├── src
├── state
│ ├── dragState.js
│ ├── resizeState
│ ├── gridEngineState.js
│ ├── renderState.js
│ ├── mouseState.js
│ ├── boxState.js
│ └── gridState.js
├── lib
│ ├── events.js
│ ├── shims.js
│ ├── mouse.js
│ ├── gridMethod.js
│ ├── utils.js
│ ├── drag.js
│ ├── resize.js
│ ├── render.js
│ └── gridEngine.js
├── element
│ ├── gridDOM.js
│ ├── boxContainerElement.js
│ ├── boxElement.js
│ ├── gridElement.js
│ ├── gridVisual.js
│ └── resizeHandleElement.js
├── component
│ ├── box.js
│ └── grid.js
└── dashgrid.js
├── specs
├── tests
│ ├── dragger.test.js
│ ├── gridResize.test.js
│ ├── performance.test.js
│ ├── boxAddRemove.test.js
│ ├── engine.test.js
│ ├── boxCollision.test.js
│ ├── boxMove.test.js
│ ├── boxResize.test.js
│ └── initGrid.test.js
├── index.html
├── util.js
├── demo.css
└── test.js
├── .npmignore
├── res
└── demo.gif
├── .gitignore
├── dist
├── dashgrid.js
├── dashgrid.css
└── dashgrid.min.js
├── .babelrc
├── demo
├── index.html
├── demo.css
└── main.js
├── package.json
├── LICENSE
├── CHANGELOG
└── README.md
/src/state/dragState.js:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/state/resizeState:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/specs/tests/dragger.test.js:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | tests/
3 |
--------------------------------------------------------------------------------
/src/lib/events.js:
--------------------------------------------------------------------------------
1 | export const click = new WeakMap();
2 |
--------------------------------------------------------------------------------
/src/element/gridDOM.js:
--------------------------------------------------------------------------------
1 | let DOM = new Map();
2 |
3 | export {DOM};
--------------------------------------------------------------------------------
/res/demo.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alajmo/dashgrid/HEAD/res/demo.gif
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | npm-debug.log
3 | docs/
4 | .package.json*
5 | notes.md
6 |
7 | # ctags
8 | .tags*
9 |
10 | # builds
11 | bundle.js
12 |
--------------------------------------------------------------------------------
/dist/dashgrid.js:
--------------------------------------------------------------------------------
1 | console.error("\n/home/samir/Projects/module/dashgrid/src/dashgrid.js:1\nimport './lib/shims.js';\n^\nParseError: 'import' and 'export' may appear only with 'sourceType: module'");
--------------------------------------------------------------------------------
/src/element/boxContainerElement.js:
--------------------------------------------------------------------------------
1 | export {BoxContainerElement};
2 |
3 | function BoxContainerElement() {
4 | let boxesElement = document.createElement('div');
5 | boxesElement.className = 'dashgrid-boxes;'
6 |
7 | return boxesElement;
8 | }
9 |
--------------------------------------------------------------------------------
/src/state/gridEngineState.js:
--------------------------------------------------------------------------------
1 | export {GridEngineState};
2 |
3 | function GridEngineState() {
4 | let gridEngineState = {
5 | movingBox: undefined,
6 | movedBoxes: []
7 | };
8 |
9 | return Object.seal(gridEngineState);
10 | }
11 |
--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["es2015", "react"],
3 | "env": {
4 | "development": {
5 | "plugins": [
6 | ["react-transform", {
7 | "transforms": [{
8 | "transform": "livereactload/babel-transform",
9 | "imports": ["react"]
10 | }]
11 | }]
12 | ]
13 | }
14 | }
15 | }
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/src/lib/shims.js:
--------------------------------------------------------------------------------
1 | // shim layer with setTimeout fallback for requiestAnimationFrame
2 | window.requestAnimFrame = (function(){
3 | return window.requestAnimationFrame ||
4 | window.webkitRequestAnimationFrame ||
5 | window.mozRequestAnimationFrame ||
6 | function (cb){
7 | cb = cb || function () {};
8 | window.setTimeout(cb, 1000 / 60);
9 | };
10 | })();
11 |
--------------------------------------------------------------------------------
/specs/tests/gridResize.test.js:
--------------------------------------------------------------------------------
1 | var diff = require('deep-diff').diff;
2 | var deepcopy = require('deepcopy');
3 |
4 | import {isNumber, arraysEqual} from '../util.js';
5 |
6 | export default function gridResize(dashGridGlobal, test) {
7 | // Mockup.
8 | let differences, prevState;
9 | let boxes = [{row: 0, column: 0, rowspan: 3, columnspan: 3}];
10 | let grid = dashGridGlobal('#grid', {boxes: boxes});
11 | }
12 |
--------------------------------------------------------------------------------
/specs/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/specs/tests/performance.test.js:
--------------------------------------------------------------------------------
1 | testStats(grid, boxes, numRows, numColumns);
2 |
3 | export function testStats(grid, boxes, numRows, numColumns) {
4 | var t1 = window.performance.now();
5 | for (let i = 0; i < numRows; i += 1) {
6 | for (let j = 0; j < numColumns; j += 1) {
7 | grid.updateBox(boxes[0], {row: i, column: j});
8 | }
9 | }
10 | var t2 = window.performance.now();
11 | console.log(t2 - t1);
12 | }
13 |
--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 | Dashgrid
12 |
13 |
16 |
17 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/src/state/renderState.js:
--------------------------------------------------------------------------------
1 | export {RenderState};
2 |
3 | /**
4 | *
5 | */
6 | function RenderState () {
7 | let state = {
8 | // Start row / column denotes the pixel at which each cell starts at.
9 | startColumn: [],
10 | startRow: [],
11 | columnWidth: undefined,
12 | rowHeight: undefined,
13 | minLeft: undefined,
14 | minTop: undefined,
15 | maxLeft: undefined,
16 | maxTop: undefined
17 | };
18 |
19 | return Object.seal(state);
20 | }
21 |
--------------------------------------------------------------------------------
/src/state/mouseState.js:
--------------------------------------------------------------------------------
1 | export {MouseState};
2 |
3 | function MouseState() {
4 | let state = {
5 | eX: undefined,
6 | eY: undefined,
7 | eW: undefined,
8 | eH: undefined,
9 | mouseX: 0,
10 | mouseY: 0,
11 | lastMouseX: 0,
12 | lastMouseY: 0,
13 | mOffX: 0,
14 | mOffY: 0,
15 | previousPosition: Object.seal({row: undefined, column: undefined}),
16 | currentPosition: Object.seal({row: undefined, column: undefined})
17 | };
18 |
19 | return Object.seal(state);
20 | }
21 |
--------------------------------------------------------------------------------
/dist/dashgrid.css:
--------------------------------------------------------------------------------
1 | .dashgrid{position:absolute;display:block;z-index:1000}.dashgridBox{position:absolute;cursor:move;transition:opacity .3s,left .3s,top .3s,width .3s,height .3s;z-index:1002}.dashgridBoxMoving{transition:none}.grid-shadow-box{background-color:#e8e8e8;transition:none}.dashgridBoxMoving,.grid,.grid-box,.grid-shadow-box{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.horizontal-line,.vertical-line{background:#fff;position:absolute}.grid-centroid{position:absolute;background:#000;width:5px;height:5px}
--------------------------------------------------------------------------------
/src/component/box.js:
--------------------------------------------------------------------------------
1 | import * as Event from '../lib/events.js';
2 | import {BoxState} from '../state/boxState.js';
3 | import {BoxElement} from '../element/boxElement.js';
4 | import {resizeHandle} from '../element/resizeHandleElement.js';
5 |
6 | export {Box};
7 |
8 | function Box({boxOption, gridState}) {
9 | const box = {
10 | component: {},
11 | state: {
12 | box: BoxState({boxOption})
13 | },
14 | element: {
15 | box: BoxElement(boxOption.content)
16 | },
17 | events: {
18 | boxEvents: new WeakMap()
19 | }
20 | };
21 |
22 | Event.click.set(box.element.box, box);
23 |
24 | return Object.seal(box);
25 | }
26 |
--------------------------------------------------------------------------------
/src/state/boxState.js:
--------------------------------------------------------------------------------
1 | export {BoxState};
2 |
3 | /**
4 | * Template function for box objects.
5 | * @returns {Object} Box object.
6 | */
7 | function BoxState({boxOption}) {
8 | let state = {
9 | row: boxOption.row,
10 | column: boxOption.column,
11 | rowspan: boxOption.rowspan,
12 | columnspan: boxOption.columnspan,
13 | draggable: boxOption.draggable,
14 | resizable: boxOption.resizable,
15 | pushable: boxOption.pushable,
16 | floating: boxOption.floating,
17 | stacking: boxOption.stacking,
18 | swapping: boxOption.swapping,
19 | transition: boxOption.transition
20 | };
21 |
22 | return Object.seal(state);
23 | }
24 |
--------------------------------------------------------------------------------
/src/element/boxElement.js:
--------------------------------------------------------------------------------
1 | export {BoxElement};
2 |
3 | /**
4 | *
5 | * @param {Object} element The DOM element to which to attach the grid element content.
6 | * @param {Object} gridState The grid state.
7 | * @returns {Object} The dom element.
8 | */
9 | function BoxElement(contentElement) {
10 | const element = document.createElement('div');
11 |
12 | // Properties.
13 | element.className = 'dashgrid-box';
14 | element.style.position = 'absolute';
15 | element.style.cursor = 'move';
16 | // TODOD change transition to grid setting.
17 | element.style.transition = 'opacity .3s, left .3s, top .3s, width .3s, height .3s';
18 | element.style.zIndex = 1003;
19 | element.appendChild(contentElement);
20 |
21 | return element;
22 | }
23 |
--------------------------------------------------------------------------------
/src/element/gridElement.js:
--------------------------------------------------------------------------------
1 | // Contains core grid elements.
2 |
3 | export {gridElement, boxesElement};
4 |
5 | /**
6 | * Modifies element.
7 | * @param {Object} element The DOM element to which to attach the grid element content.
8 | * @param {Object} gridState The grid state.
9 | * @returns {Object} The dom element.
10 | */
11 | function gridElement(element) {
12 | // Properties.
13 | element.style.position = 'absolute';
14 | element.style.top = '0px';
15 | element.style.left = '0px';
16 | element.style.display = 'block';
17 | element.style.zIndex = '1000';
18 |
19 | return element;
20 | };
21 |
22 | function boxesElement() {
23 | const element = document.createElement('div');
24 | element.className = 'dg-boxes';
25 | element.style.position = 'absolute';
26 | element.style.top = '0px';
27 | element.style.left = '0px';
28 | element.style.block = 'block';
29 | element.style.zIndex = '1001';
30 |
31 | return element;
32 | }
33 |
--------------------------------------------------------------------------------
/specs/util.js:
--------------------------------------------------------------------------------
1 | export function eventFire(el, etype){
2 | if (el.fireEvent) {
3 | el.fireEvent('on' + etype);
4 | } else {
5 | var evObj = document.createEvent('Events');
6 | evObj.initEvent(etype, true, false);
7 | el.dispatchEvent(evObj);
8 | }
9 | }
10 |
11 | export function decorateRunAll(t, o1, o2) {
12 | t.all = function () {
13 | Object.keys(t).forEach(function (key) {
14 | if (key !== 'all') {t[key](o1, o2);}
15 | });
16 | };
17 | }
18 |
19 | export function isNumber(obj) {
20 | return !Array.isArray(obj) && (obj - parseFloat(obj) + 1) >= 0;
21 | }
22 |
23 | export function isFunction(object) {
24 | // return object && getClass.call(object) == '[object Function]';
25 | }
26 |
27 | export function arraysEqual(a, b) {
28 | if (a === b) return true;
29 | if (a == null || b == null) return false;
30 | if (a.length != b.length) return false;
31 |
32 | // If you don't care about the order of the elements inside
33 | // the array, you should sort both arrays here.
34 |
35 | for (var i = 0; i < a.length; ++i) {
36 | if (a[i] !== b[i]) return false;
37 | }
38 | return true;
39 | }
40 |
--------------------------------------------------------------------------------
/src/dashgrid.js:
--------------------------------------------------------------------------------
1 | import './lib/shims.js';
2 | import * as Event from './lib/events.js';
3 |
4 | // Component.
5 | import {Grid} from './component/grid.js';
6 | import * as GridElement from './element/gridElement.js';
7 | import * as GridVisual from './element/gridVisual.js';
8 | import * as GridMethod from './lib/gridMethod.js';
9 | import * as GridEngine from './lib/gridEngine.js';
10 | import * as Render from './lib/render.js';
11 |
12 | export default Dashgrid;
13 |
14 | /**
15 | * @param {Object} element Element to which bind Dashgrid to.
16 | * @param {Array.