From 8708e5ca33154bc6cce84fbe6f9a016e4dc26bdc Mon Sep 17 00:00:00 2001 From: Danny Date: Sat, 17 Oct 2015 19:05:12 -0400 Subject: [PATCH 1/3] Update react-ui-tree.js I don't think this is necessary. I may want to move a node under another if it's collapsed. Also this prevents moving any nodes without children under another in the same tree node. --- dist/react-ui-tree.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/dist/react-ui-tree.js b/dist/react-ui-tree.js index a005c5fc..af818498 100644 --- a/dist/react-ui-tree.js +++ b/dist/react-ui-tree.js @@ -150,7 +150,7 @@ module.exports = React.createClass({ } } else if (diffX > paddingLeft) { // right - if (index.prev && !tree.getIndex(index.prev).node.collapsed) { + if (index.prev) { newIndex = tree.move(index.id, index.prev, 'append'); } } @@ -231,4 +231,4 @@ module.exports = React.createClass({ this.change(tree); } -}); \ No newline at end of file +}); From 15c6c0f98e71262740a5353ade7e65c2b76fea10 Mon Sep 17 00:00:00 2001 From: Danny Date: Sun, 18 Oct 2015 12:51:33 -0400 Subject: [PATCH 2/3] static tree func allow creation of static tree to prevent manipulation of structure if defined --- dist/react-ui-tree.js | 152 +++++++++++++++++++++--------------------- 1 file changed, 77 insertions(+), 75 deletions(-) diff --git a/dist/react-ui-tree.js b/dist/react-ui-tree.js index af818498..5c81f847 100644 --- a/dist/react-ui-tree.js +++ b/dist/react-ui-tree.js @@ -114,87 +114,89 @@ module.exports = React.createClass({ // oh drag: function drag(e) { - if (this._start) { - this.setState({ - dragging: this.dragging - }); - this._start = false; - } - - var tree = this.state.tree; - var dragging = this.state.dragging; - var paddingLeft = this.props.paddingLeft; - var newIndex = null; - var index = tree.getIndex(dragging.id); - var collapsed = index.node.collapsed; - - var _startX = this._startX; - var _startY = this._startY; - var _offsetX = this._offsetX; - var _offsetY = this._offsetY; - - var pos = { - x: _startX + e.clientX - _offsetX, - y: _startY + e.clientY - _offsetY - }; - dragging.x = pos.x; - dragging.y = pos.y; - - var diffX = dragging.x - paddingLeft / 2 - (index.left - 2) * paddingLeft; - var diffY = dragging.y - dragging.h / 2 - (index.top - 2) * dragging.h; - - if (diffX < 0) { - // left - if (index.parent && !index.next) { - newIndex = tree.move(index.id, index.parent, 'after'); + if (!this.props.static) { + if (this._start) { + this.setState({ + dragging: this.dragging + }); + this._start = false; } - } else if (diffX > paddingLeft) { - // right - if (index.prev) { - newIndex = tree.move(index.id, index.prev, 'append'); - } - } - - if (newIndex) { - index = newIndex; - newIndex.node.collapsed = collapsed; - dragging.id = newIndex.id; - } - - if (diffY < 0) { - // up - var above = tree.getNodeByTop(index.top - 1); - newIndex = tree.move(index.id, above.id, 'before'); - } else if (diffY > dragging.h) { - // down - if (index.next) { - var below = tree.getIndex(index.next); - if (below.children && below.children.length && !below.node.collapsed) { - newIndex = tree.move(index.id, index.next, 'prepend'); - } else { - newIndex = tree.move(index.id, index.next, 'after'); + + var tree = this.state.tree; + var dragging = this.state.dragging; + var paddingLeft = this.props.paddingLeft; + var newIndex = null; + var index = tree.getIndex(dragging.id); + var collapsed = index.node.collapsed; + + var _startX = this._startX; + var _startY = this._startY; + var _offsetX = this._offsetX; + var _offsetY = this._offsetY; + + var pos = { + x: _startX + e.clientX - _offsetX, + y: _startY + e.clientY - _offsetY + }; + dragging.x = pos.x; + dragging.y = pos.y; + + var diffX = dragging.x - paddingLeft / 2 - (index.left - 2) * paddingLeft; + var diffY = dragging.y - dragging.h / 2 - (index.top - 2) * dragging.h; + + if (diffX < 0) { + // left + if (index.parent && !index.next) { + newIndex = tree.move(index.id, index.parent, 'after'); + } + } else if (diffX > paddingLeft) { + // right + if (index.prev) { + newIndex = tree.move(index.id, index.prev, 'append'); } - } else { - var below = tree.getNodeByTop(index.top + index.height); - if (below && below.parent !== index.id) { - if (below.children && below.children.length) { - newIndex = tree.move(index.id, below.id, 'prepend'); + } + + if (newIndex) { + index = newIndex; + newIndex.node.collapsed = collapsed; + dragging.id = newIndex.id; + } + + if (diffY < 0) { + // up + var above = tree.getNodeByTop(index.top - 1); + newIndex = tree.move(index.id, above.id, 'before'); + } else if (diffY > dragging.h) { + // down + if (index.next) { + var below = tree.getIndex(index.next); + if (below.children && below.children.length && !below.node.collapsed) { + newIndex = tree.move(index.id, index.next, 'prepend'); } else { - newIndex = tree.move(index.id, below.id, 'after'); + newIndex = tree.move(index.id, index.next, 'after'); + } + } else { + var below = tree.getNodeByTop(index.top + index.height); + if (below && below.parent !== index.id) { + if (below.children && below.children.length) { + newIndex = tree.move(index.id, below.id, 'prepend'); + } else { + newIndex = tree.move(index.id, below.id, 'after'); + } } } } - } - - if (newIndex) { - newIndex.node.collapsed = collapsed; - dragging.id = newIndex.id; - } - - this.setState({ - tree: tree, - dragging: dragging - }); + + if (newIndex) { + newIndex.node.collapsed = collapsed; + dragging.id = newIndex.id; + } + + this.setState({ + tree: tree, + dragging: dragging + }); + }; }, dragEnd: function dragEnd() { From 1fe72951d1aacf77982203aea729bcbcb60da58f Mon Sep 17 00:00:00 2001 From: Danny Date: Sun, 18 Oct 2015 12:52:24 -0400 Subject: [PATCH 3/3] Update README.md --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 8e3454e1..45879b96 100644 --- a/README.md +++ b/README.md @@ -15,6 +15,7 @@ npm install react-ui-tree --save tree={this.state.tree} // tree object onChange={this.handleChange} // onChange(tree) tree object changed renderNode={this.renderNode} // renderNode(node) return react element + static={false} //static trees cannot have their structure modified /> // a sample tree object