Skip to content

Feature/enable viewfolder dragging #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 14 commits into
base: master
Choose a base branch
from
Open

Feature/enable viewfolder dragging #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
f7991b5
allowing dnd of view folders
KaminerD May 7, 2018
ecce539
updating dist react-ui-tree
KaminerD May 7, 2018
075d647
fix tree small bug
KaminerD May 7, 2018
5786150
updating dist
KaminerD May 7, 2018
b49a3fe
small fixes
KaminerD May 7, 2018
d6b3a5e
small fixes 2
KaminerD May 7, 2018
3d12e31
updating fixes dnd
KaminerD May 9, 2018
5b43005
small bug fix
KaminerD May 9, 2018
738aff8
additional small fix
KaminerD May 9, 2018
36d8cbd
changing z-index
KaminerD May 10, 2018
94001c9
Revert "changing z-index"
KaminerD May 10, 2018
99e83cf
adding z-index
KaminerD May 10, 2018
439a7a1
check for children null to prevent console error message
KaminerD May 15, 2018
1ce5976
protecting node null exceptions
KaminerD May 17, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
156 changes: 147 additions & 9 deletions dist/react-ui-tree.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,10 @@ var _initialiseProps = function _initialiseProps() {
var _this2 = this;

this.init = function (props) {
if (_this2.state && _this2.state.dragging && _this2.state.dragging.id) {
return;
}

var tree = new _tree2.default(props.tree);
tree.isNodeCollapsed = props.isNodeCollapsed;
tree.renderNode = props.renderNode;
Expand Down Expand Up @@ -122,7 +126,8 @@ var _initialiseProps = function _initialiseProps() {
var draggingStyles = {
top: dragging.y,
left: dragging.x,
width: dragging.w
width: dragging.w,
zIndex: 1
};

return _react2.default.createElement(
Expand All @@ -139,16 +144,94 @@ var _initialiseProps = function _initialiseProps() {
return null;
};

this.findAncestor = function (el, cls) {
while ((el = el.parentElement) && !el.classList.contains(cls)) {}
return el;
};

this.getBaseItemHeight = function () {
var childrenArr = Array.from(_this2.childrenRoot.children);
var heightArray = childrenArr.filter(function (x) {
return x.clientHeight && x.clientHeight > 0;
}).map(function (x) {
return x.clientHeight;
});
var baseHeight = Math.min.apply(null, heightArray);

return baseHeight;
};

this.getPrevElementHeight = function (el) {
var childrenArr = Array.from(_this2.childrenRoot.children);

var curIndex = childrenArr.indexOf(el.parentNode);

var placeholder = childrenArr.find(function (x) {
return x.classList.contains("placeholder");
});

if (placeholder) {
curIndex = childrenArr.indexOf(placeholder);
}

if (curIndex != -1 && curIndex > 0) return childrenArr[curIndex - 1].clientHeight;

return 0;
};

this.getNextElementHeight = function (el) {
var childrenArr = Array.from(_this2.childrenRoot.children);
var curIndex = childrenArr.indexOf(el.parentNode);

var placeholder = childrenArr.find(function (x) {
return x.classList.contains("placeholder");
});

if (placeholder) {
curIndex = childrenArr.indexOf(placeholder);
}

if (curIndex != -1 && curIndex < childrenArr.length - 1) return childrenArr[curIndex + 1].clientHeight;

return 0;
};

this.dragStart = function (id, dom, e) {
if (_this2.props.disableDragging) {
return;
}
if (_this2.props.disableRootDrag && id == 1) {
return;
}
if (id == 2 && _this2.props.tree.module === "ROOT") {
return;
}

if (_this2.props.tree && _this2.props.tree.module === "ROOT") {
_this2.childrenRoot = _this2.findAncestor(dom, 'children');
if (!_this2.childrenRoot) {
return;
}
var regularNodeElSize = _this2.getBaseItemHeight();
var domBounding = dom.getBoundingClientRect();

if (e.clientY - domBounding.top > regularNodeElSize) {
return;
}

_this2.isRootTree = true;
} else {
_this2.isRootTree = false;
}

// exit from presets tree if its not favorites module
if (_this2.props.tree.module !== "ROOT" && _this2.props.tree.module !== "Favorites") {
return;
}

_this2.dragging = {
id: id,
dom: dom,
w: dom.offsetWidth,
h: dom.offsetHeight,
x: dom.offsetLeft,
Expand All @@ -167,14 +250,17 @@ var _initialiseProps = function _initialiseProps() {

this.drag = function (e) {
if (_this2._start) {
_this2.dragStarted();

_this2.setState({
dragging: _this2.dragging
});

_this2._start = false;
}

var tree = _this2.state.tree;
var dragging = _this2.state.dragging;
var dragging = _this2.dragging;
var paddingLeft = _this2.props.paddingLeft;
var newIndex = null;
var index = tree.getIndex(dragging.id);
Expand All @@ -183,7 +269,7 @@ var _initialiseProps = function _initialiseProps() {

var tempCollapsed = void 0;

if (index == null) {
if (!index || !index.node) {
tempCollapsed = false;
noIndex = true;
} else {
Expand All @@ -208,7 +294,24 @@ var _initialiseProps = function _initialiseProps() {
}

var diffX = dragging.x - paddingLeft / 2 - (index.left - 2) * paddingLeft;
var diffY = dragging.y - dragging.h / 2 - (index.top - 2) * dragging.h;
var diffY = 0;

if (_this2.isRootTree) {
var loopindex = 0;
var totalHeight = 0;
var nextElement = _this2.childrenRoot.children[0];

while (nextElement.innerText != _this2.dragging.dom.innerText && !nextElement.classList.contains("placeholder")) {
totalHeight += nextElement.clientHeight;
nextElement = _this2.childrenRoot.children[++loopindex];
}

var diffY2 = dragging.y - (index.top - 2) * dragging.h;

diffY = dragging.y - totalHeight;
} else {
diffY = dragging.y - dragging.h / 2 - (index.top - 2) * dragging.h;
}

if (diffX < 0) {
// left
Expand All @@ -218,9 +321,12 @@ var _initialiseProps = function _initialiseProps() {
} else if (diffX > paddingLeft) {
// right
if (index.prev) {
var prevNode = tree.getIndex(index.prev).node;
if (!prevNode.collapsed && !prevNode.leaf) {
newIndex = tree.move(index.id, index.prev, 'append');
var prevIndex = tree.getIndex(index.prev);
if (prevIndex) {
var prevNode = prevIndex.node;
if (!prevNode.collapsed && !prevNode.leaf) {
newIndex = tree.move(index.id, index.prev, 'append');
}
}
}
}
Expand All @@ -231,21 +337,31 @@ var _initialiseProps = function _initialiseProps() {
dragging.id = newIndex.id;
}

if (diffY < 0) {
if (_this2.safeCompareNodeId(index, "BDFAVO")) {
return;
}

var upCompareHeight = _this2.isRootTree ? -_this2.getPrevElementHeight(_this2.dragging.dom) : 0;
var downCompareHeight = _this2.isRootTree ? _this2.getNextElementHeight(_this2.dragging.dom) : dragging.h;

if (diffY < upCompareHeight) {
// up
var above = tree.getNodeByTop(index.top - 1);
if (_this2.safeCompareNodeId(above, "BDFAVO")) return;
newIndex = tree.move(index.id, above.id, 'before');
} else if (diffY > dragging.h) {
} else if (diffY > downCompareHeight) {
// down
if (index.next) {
var below = tree.getIndex(index.next);
if (_this2.safeCompareNodeId(below, "BDFAVO")) return;
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');
}
} else {
var _below = tree.getNodeByTop(index.top + index.height);
if (_this2.safeCompareNodeId(_below, "BDFAVO")) return;
if (_below && _below.parent !== index.id) {
if (_below.children && _below.children.length && !_below.node.collapsed) {
newIndex = tree.move(index.id, _below.id, 'prepend');
Expand All @@ -267,7 +383,17 @@ var _initialiseProps = function _initialiseProps() {
});
};

this.safeCompareNodeId = function (index, targetId) {
return index && index.node && index.node.id == targetId;
};

this.dragEnd = function () {
if (_this2.dragging.id == 2 && _this2.state.tree.obj.module == "ROOT") {
return;
} else if (_this2.state.tree.obj.module !== "Favorites" && _this2.state.tree.obj.module != "ROOT") {
return;
}

_this2.setState({
dragging: {
id: null,
Expand All @@ -278,11 +404,23 @@ var _initialiseProps = function _initialiseProps() {
}
});

if (!_this2._start) {
_this2.dragEnded(_this2.state.tree);
}

_this2.change(_this2.state.tree);
window.removeEventListener('mousemove', _this2.drag);
window.removeEventListener('mouseup', _this2.dragEnd);
};

this.dragStarted = function () {
if (_this2.props.onDragStarted) _this2.props.onDragStarted();
};

this.dragEnded = function (tree) {
if (_this2.props.onDragEnded) _this2.props.onDragEnded(tree.obj);
};

this.change = function (tree) {
_this2._updated = true;
if (_this2.props.onChange) _this2.props.onChange(tree.obj);
Expand Down
Loading