diff --git a/CHANGELOG.md b/CHANGELOG.md index e42944f..b33da3a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,40 @@ All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. +### [3.0.3](https://github.com/phphe/he-tree-vue/compare/v3.0.2...v3.0.3) (2021-04-16) + + +### Bug Fixes + +* **draggable plugin:** fix node insert error after drop ([04de941](https://github.com/phphe/he-tree-vue/commit/04de9418e893fa3390de6a3863e9abcc47d200c1)), closes [#51](https://github.com/phphe/he-tree-vue/issues/51) + +### [3.0.2](https://github.com/phphe/he-tree-vue/compare/v3.0.1...v3.0.2) (2021-04-12) + + +### Bug Fixes + +* **draggable plugin:** wrong result when move downwards in same level ([9124ec1](https://github.com/phphe/he-tree-vue/commit/9124ec19c72836b3927d1c4065fa1fd135689ab6)) + +### [3.0.1](https://github.com/phphe/he-tree-vue/compare/v3.0.0...v3.0.1) (2021-03-30) + + +### Bug Fixes + +* **draggable plugin:** fix change even ([72c1b08](https://github.com/phphe/he-tree-vue/commit/72c1b08785a895040ce65f6175cf5db093383173)) + +## [3.0.0](https://github.com/phphe/he-tree-vue/compare/v2.0.7-beta.3...v3.0.0) (2020-12-13) + + +### Features + +* **all:** update for vue3 ([fd2e1ac](https://github.com/phphe/he-tree-vue/commit/fd2e1acdf001f23a5e87528a13361eb7828fa62b)) +* **types:** update types declaration for vue3 ([175c0f2](https://github.com/phphe/he-tree-vue/commit/175c0f27e7a19f17befe8784f1b289a90cb50500)) + + +### Bug Fixes + +* **dist:** use .js instead of .vue to fix 'render overrided issue' ([5b2fcc3](https://github.com/phphe/he-tree-vue/commit/5b2fcc3ca3d209999cd9ce400f0af65cb9421dad)) + ### [2.0.7-beta.3](https://github.com/phphe/he-tree-vue/compare/v2.0.7-beta.2...v2.0.7-beta.3) (2020-12-13) ### [2.0.7-beta.2](https://github.com/phphe/he-tree-vue/compare/v2.0.7-beta.1...v2.0.7-beta.2) (2020-12-13) diff --git a/dist/he-tree-vue.cjs.js b/dist/he-tree-vue.cjs.js index d1045ad..dd1915b 100644 --- a/dist/he-tree-vue.cjs.js +++ b/dist/he-tree-vue.cjs.js @@ -1,5 +1,5 @@ /*! - * he-tree-vue v2.0.7-beta.1 + * he-tree-vue v3.1.2 * (c) phphe (https://github.com/phphe) * Homepage: https://he-tree-vue.phphe.com * Released under the MIT License. @@ -10,14 +10,9 @@ Object.defineProperty(exports, '__esModule', { value: true }); function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; } -var _toConsumableArray = _interopDefault(require('@babel/runtime/helpers/toConsumableArray')); -var _defineProperty = _interopDefault(require('@babel/runtime/helpers/defineProperty')); +var vue = require('vue'); var hp = require('helper-js'); var vf = require('vue-functions'); -var __vue_normalize__ = _interopDefault(require('vue-runtime-helpers/dist/normalize-component.js')); -var Vue = _interopDefault(require('vue')); -var _regeneratorRuntime = _interopDefault(require('@babel/runtime/regenerator')); -var _asyncToGenerator = _interopDefault(require('@babel/runtime/helpers/asyncToGenerator')); var draggableHelper = _interopDefault(require('draggable-helper')); function cloneTreeData(treeData, opt) { @@ -27,9 +22,9 @@ function walkTreeData(treeData, handler, opt) { return new hp.TreeData(treeData).walk(handler, opt); } function getPureTreeData(treeData) { - var opt = { - afterNodeCreated: function afterNodeCreated(newNode) { - Object.keys(newNode).forEach(function (key) { + const opt = { + afterNodeCreated: newNode => { + Object.keys(newNode).forEach(key => { if (key[0] === '$') { delete newNode[key]; } @@ -39,95 +34,76 @@ function getPureTreeData(treeData) { return cloneTreeData(treeData, opt); } -function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; } - -function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } - -var template = function template(h) { - var _this = this; - +const template = function () { // convert undefined to empty str - var noUndefined = function noUndefined(str) { - return str ? str : ''; - }; // tree tpl, to render recursively - - - var childrenListTpl = function childrenListTpl(nodes, parent, parentPath) { - var indentStyle = _defineProperty({}, !_this.rtl ? 'paddingLeft' : 'paddingRight', parentPath.length * _this.indent + 'px'); - - var branchTpl = function branchTpl(node, index) { - var path = [].concat(_toConsumableArray(parentPath), [index]); - var transitionComponent = _this.foldingTransition || 'transition'; - - var slotDefault = function slotDefault() { - var original = function original() { - if (_this.$scopedSlots.default) { - return _this.$scopedSlots.default({ - node: node, - index: index, - path: path, - tree: _this + const noUndefined = str => str ? str : ''; + // tree tpl, to render recursively + const childrenListTpl = (nodes, parent, parentPath) => { + const indentStyle = { + [!this.rtl ? 'paddingLeft' : 'paddingRight']: parentPath.length * this.indent + 'px' + }; + const branchTpl = (node, index) => { + const path = [...parentPath, index]; + const transitionComponent = this.foldingTransition || 'transition'; + const slotDefault = () => { + const original = () => { + if (this.$slots.default) { + return this.$slots.default({ + node, + index, + path, + tree: this }); - } else if (_this.$slots.default) { - return _this.$slots.default; } else { return node.text; } }; - - if (_this.overrideSlotDefault) { - return _this.overrideSlotDefault({ - node: node, - index: index, - path: path, - tree: _this + if (this.overrideSlotDefault) { + return this.overrideSlotDefault({ + node, + index, + path, + tree: this }, original); } else { return original(); } }; - - var nodebackStyle = indentStyle; - + let nodebackStyle = indentStyle; if (node.$nodeBackStyle) { - nodebackStyle = _objectSpread(_objectSpread({}, nodebackStyle), node.$nodeBackStyle); + nodebackStyle = { + ...nodebackStyle, + ...node.$nodeBackStyle + }; } - - return h("div", { - "class": "tree-branch ".concat(noUndefined(node.$branchClass), " ").concat(noUndefined(node.$hidden && 'he-tree--hidden')), + return vue.createVNode("div", { + "class": `tree-branch ${noUndefined(node.$branchClass)} ${noUndefined(node.$hidden && 'he-tree--hidden')}`, "style": node.$branchStyle || {}, - "attrs": { - "data-tree-node-path": path.join(',') - } - }, [h("div", { - "class": "tree-node-back ".concat(noUndefined(node.$nodeBackClass)), + "data-tree-node-path": path.join(',') + }, [vue.createVNode("div", { + "class": `tree-node-back ${noUndefined(node.$nodeBackClass)}`, "style": nodebackStyle || {} - }, [h("div", { - "class": "tree-node ".concat(noUndefined(node.$nodeClass)), + }, [vue.createVNode("div", { + "class": `tree-node ${noUndefined(node.$nodeClass)}`, "style": node.$nodeStyle || {} - }, [slotDefault()])]), (node.children && node.children.length) > 0 && h(transitionComponent, { - "attrs": { - "name": _this.$props.foldingTransitionName - } - }, [!node.$folded && childrenListTpl(node.children, node, path)])]); + }, [slotDefault()])]), (node.children && node.children.length) > 0 && vue.createVNode(transitionComponent, { + "name": this.$props.foldingTransitionName + }, { + default: () => [!node.$folded && childrenListTpl(node.children, node, path)] + })]); }; - - return h("div", { - "class": "tree-children ".concat(noUndefined(parent === _this.rootNode && 'tree-root'), " ").concat(noUndefined(parent.$childrenClass)), + return vue.createVNode("div", { + "class": `tree-children ${noUndefined(parent === this.rootNode && 'tree-root')} ${noUndefined(parent.$childrenClass)}`, "style": parent.$childrenStyle || {} }, [nodes.map(branchTpl)]); }; - - return h("div", { - "class": "he-tree ".concat(this.treeClass, " ").concat(noUndefined(this.rtl && 'he-tree--rtl')), - "attrs": { - "data-tree-id": this.treeId - } + return vue.createVNode("div", { + "class": `he-tree ${this.treeClass} ${noUndefined(this.rtl && 'he-tree--rtl')}`, + "data-tree-id": this.treeId }, [this.blockHeader && this.blockHeader(), childrenListTpl(this.rootNode.children, this.rootNode, []), this.blockFooter && this.blockFooter()]); }; - -var trees = {}; -var Tree = { +const trees = {}; +const Tree = { render: template, mixins: [vf.updatablePropsEvenUnbound({ value: { @@ -144,77 +120,74 @@ var Tree = { type: Boolean }, rootNode: { - default: function _default(is) { - return {}; - } + default: is => ({}) } }, // components: {}, - data: function data() { + data() { return { - trees: trees, + trees, treeClass: '', - treeId: hp.randString() + treeId: hp.randString(), + // hooks of render + blockHeader: null, + blockFooter: null, + overrideSlotDefault: null }; }, // computed: {}, watch: { treeData: { immediate: true, - handler: function handler(treeData) { + handler(treeData) { this._TreeDataHelper = new hp.TreeData(this.treeData); } } }, methods: { - iteratePath: function iteratePath(path, opt) { + iteratePath(path, opt) { return this._TreeDataHelper.iteratePath(path, opt); }, - getTreeVmByTreeEl: function getTreeVmByTreeEl(treeEl) { + getTreeVmByTreeEl(treeEl) { return this.trees[treeEl.getAttribute('data-tree-id')]; }, - getAllNodesByPath: function getAllNodesByPath(path) { + getAllNodesByPath(path) { return this._TreeDataHelper.getAllNodes(path); }, - getNodeByPath: function getNodeByPath(path) { + getNodeByPath(path) { return this._TreeDataHelper.getNode(path); }, - getPathByBranchEl: function getPathByBranchEl(branchEl) { - return branchEl.getAttribute('data-tree-node-path').split(',').map(function (v) { - return parseInt(v); - }); + getPathByBranchEl(branchEl) { + return branchEl.getAttribute('data-tree-node-path').split(',').map(v => parseInt(v)); }, - getBranchElByPath: function getBranchElByPath(path) { - return this.$el.querySelector("[data-tree-node-path='".concat(path.join(','), "']")); + getBranchElByPath(path) { + return this.$el.querySelector(`[data-tree-node-path='${path.join(',')}']`); }, - getNodeByBranchEl: function getNodeByBranchEl(branchEl) { + getNodeByBranchEl(branchEl) { return this.getNodeByPath(this.getPathByBranchEl(branchEl)); }, - getNodeParentByPath: function getNodeParentByPath(path) { + getNodeParentByPath(path) { return this._TreeDataHelper.getNodeParent(path); }, - removeNodeByPath: function removeNodeByPath(path) { + removeNodeByPath(path) { return this._TreeDataHelper.removeNode(path); }, - walkTreeData: function walkTreeData$1(handler, opt) { + walkTreeData(handler, opt) { return walkTreeData(this.treeData, handler, opt); }, - cloneTreeData: function cloneTreeData$1(opt) { + cloneTreeData(opt) { return cloneTreeData(this.treeData, opt); }, // return cloned new tree data without property witch starts with `$` - getPureTreeData: function getPureTreeData$1() { + getPureTreeData() { return getPureTreeData(this.treeData); } }, - created: function created() { - var _this2 = this; - + created() { // - var updateRootNode = function updateRootNode() { - _this2.$set(_this2.rootNode, 'children', _this2.treeData); + const updateRootNode = () => { + this.rootNode.children = this.treeData; }; - this.$watch('rootNode', updateRootNode, { immediate: true }); @@ -222,20 +195,17 @@ var Tree = { immediate: true }); }, - mounted: function mounted() { - var _this3 = this; - + mounted() { // this.treeId = hp.randString(); - this.$set(this.trees, this.treeId, this); - this.$once('hook:beforeDestroy', function () { - _this3.$delete(_this3.trees, _this3.treeId); - }); + this.trees[this.treeId] = this; + }, + beforeUnmount() { + delete this.trees[this.treeId]; }, - // beforeDestroy() {}, // - mixPlugins: function mixPlugins(plugins) { - var MixedTree = { + mixPlugins(plugins) { + const MixedTree = { name: 'Tree', extends: Tree, mixins: plugins, @@ -245,41 +215,14 @@ var Tree = { } }; -/* script */ -var __vue_script__ = Tree; -/* template */ - -/* style */ - -var __vue_inject_styles__ = undefined; -/* scoped */ - -var __vue_scope_id__ = undefined; -/* module identifier */ - -var __vue_module_identifier__ = undefined; -/* functional template */ - -var __vue_is_functional_template__ = undefined; -/* style inject */ - -/* style inject SSR */ - -/* style inject shadow dom */ - -var __vue_component__ = /*#__PURE__*/__vue_normalize__({}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined); - -function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; } - -function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$1(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } function foldAll(treeData) { - walkTreeData(treeData, function (childNode) { - Vue.set(childNode, '$folded', true); + walkTreeData(treeData, childNode => { + childNode.$folded = true; }); } function unfoldAll(treeData) { - walkTreeData(treeData, function (childNode) { - Vue.set(childNode, '$folded', false); + walkTreeData(treeData, childNode => { + childNode.$folded = false; }); } var fold = { @@ -292,118 +235,93 @@ var fold = { type: Boolean } }, + emits: ['nodeFoldedChanged', 'node-folded-changed'], methods: { - fold: function fold(node, path) { + fold(node, path) { if (!node.$folded) { - this.$set(node, '$folded', true); + node['$folded'] = true; this.$emit('nodeFoldedChanged', node); + this.$emit('node-folded-changed', node); } }, - unfold: function unfold(node, path) { - var opt = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}; - opt = _objectSpread$1({ - foldOthers: false - }, opt); - + unfold(node, path, opt = {}) { + opt = { + foldOthers: false, + ...opt + }; if (opt.foldOthers) { this.foldAll(); } - if (node.$folded) { - this.$set(node, '$folded', false); + node['$folded'] = false; this.$emit('nodeFoldedChanged', node); - this.$emit('node-folded-changed', node); } }, - toggleFold: function toggleFold(node, path, opt) { + toggleFold(node, path, opt) { if (node.$folded) { this.unfold(node, path, opt); } else { this.fold(node, path, opt); } }, - foldAll: function foldAll() { - var _this = this; - - this.walkTreeData(function (childNode) { - _this.fold(childNode); + foldAll() { + this.walkTreeData(childNode => { + this.fold(childNode); }); }, - unfoldAll: function unfoldAll() { - var _this2 = this; - - this.walkTreeData(function (childNode) { - _this2.unfold(childNode, { + unfoldAll() { + this.walkTreeData(childNode => { + this.unfold(childNode, { unfoldParent: false }); }); } }, - mounted: function mounted() { + mounted() { if (this.foldAllAfterMounted) { this.foldAll(); } } }; -function _createForOfIteratorHelper(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; } - -function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); } - -function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; } var check = { props: {}, methods: { - afterCheckChanged: function afterCheckChanged(node, path) { - var _this = this; - + afterCheckChanged(node, path) { // update parent - var nodes = this.getAllNodesByPath(path); - var reversedParents = nodes.slice(0, nodes.length - 1); + const nodes = this.getAllNodesByPath(path); + const reversedParents = nodes.slice(0, nodes.length - 1); reversedParents.reverse(); - - var _iterator = _createForOfIteratorHelper(reversedParents), - _step; - - try { - for (_iterator.s(); !(_step = _iterator.n()).done;) { - var parent = _step.value; - this.$set(parent, '$checked', parent.children.every(function (child) { - return child.$checked; - })); - } // update children - - } catch (err) { - _iterator.e(err); - } finally { - _iterator.f(); + for (const parent of reversedParents) { + parent['$checked'] = parent.children.every(child => child.$checked); } - + // update children if (node.children && node.children.length > 0) { - walkTreeData(node.children, function (childNode) { - _this.$set(childNode, '$checked', node.$checked); + walkTreeData(node.children, childNode => { + childNode['$checked'] = node.$checked; }); } }, - check: function check(node, path) { - this.$set(node, '$checked', true); + check(node, path) { + node['$checked'] = true; this.afterCheckChanged(node, path); }, - uncheck: function uncheck(node, path) { - this.$set(node, '$checked', false); + uncheck(node, path) { + node['$checked'] = false; this.afterCheckChanged(node, path); }, - toggleCheck: function toggleCheck(node, path) { - this.$set(node, '$checked', !node.$checked); + toggleCheck(node, path) { + node['$checked'] = !node.$checked; this.afterCheckChanged(node, path); } } }; -function doDraggableDecision (_ref) { - var conditions = _ref.conditions, - doAction = _ref.doAction; - +// arg {options, event, store, opt, info, conditions, actions, doAction} +function doDraggableDecision ({ + conditions, + doAction +}) { // decision start ================================= if (conditions['no closest'] === true) { doAction('append to root'); @@ -549,27 +467,48 @@ function doDraggableDecision (_ref) { } } } - } // decision end ================================= - + } + // decision end ================================= } -function _createForOfIteratorHelper$1(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$1(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; } - -function _unsupportedIterableToArray$1(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray$1(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$1(o, minLen); } - -function _arrayLikeToArray$1(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; } - -function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; } - -function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$2(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } - -function makeTreeDraggable(treeEl) { - var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; - options = _objectSpread$2(_objectSpread$2({}, options), {}, { - treeEl: treeEl - }); - - var _draggableHelper = draggableHelper(treeEl, { +// in follow code, options belongs to makeTreeDraggable, opt belongs to draggableHelper +function makeTreeDraggable(treeEl, options = {}) { + options = { + // indent: 20, + // triggerClass: 'tree-node', + // triggerBySelf: false, + // unfoldWhenDragover + // unfoldWhenDragoverDelay + // draggingNodePositionMode + // getTriggerEl optional + // rootClass: 'tree-root', + // childrenClass: 'tree-children', + // branchClass: 'tree-branch', + // nodeClass: 'tree-node', + // nodeBackClass: 'tree-node-back', + // placeholderClass: 'tree-placeholder', + // placeholderNodeBackClass: 'tree-placeholder-node-back', + // placeholderNodeClass: 'tree-placeholder-node', + // draggingClass: 'dragging', + // placeholderId + // unfoldTargetNodeByEl + // getPathByBranchEl + // edgeScroll: false, + // edgeScrollTriggerMargin: 50, + // edgeScrollSpeed: 0.35, + // edgeScrollTriggerMode: 'top_left_corner', + // edgeScrol: 'top_left_corner', + // edgeScrollSpecifiedContainerX?: HTMLElement, + // edgeScrollSpecifiedContainerY?: HTMLElement, + // rtl: false + // preventTextSelection: boolean + ...options, + treeEl + }; + const { + destroy, + options: draggableHelperOptions + } = draggableHelper(treeEl, { triggerClassName: options.triggerClass, triggerBySelf: options.triggerBySelf, draggingClassName: options.draggingClass, @@ -583,76 +522,76 @@ function makeTreeDraggable(treeEl) { rtl: options.rtl, preventTextSelection: options.preventTextSelection, updateMovedElementStyleManually: true, - getMovedOrClonedElement: function getMovedOrClonedElement(directTriggerElement, store) { + getMovedOrClonedElement: (directTriggerElement, store) => { // find closest branch from parents - var el = hp.findParent(store.triggerElement, function (el) { - return hp.hasClass(el, options.branchClass); - }, { + const el = hp.findParent(store.triggerElement, el => hp.hasClass(el, options.branchClass), { withSelf: true }); return el; }, - beforeFirstMove: function beforeFirstMove(store, dhOptions) { + beforeFirstMove(store, dhOptions) { store.startTreeEl = treeEl; store.dragBranchEl = store.movedElement; store.startPath = options.getPathByBranchEl(store.movedOrClonedElement); - if (options.beforeFirstMove && options.beforeFirstMove(store, dhOptions) === false) { return false; } }, - beforeMove: function beforeMove(store, dhOptions) { - var updatePlaceholderIndent = function updatePlaceholderIndent() { + beforeMove: (store, dhOptions) => { + const updatePlaceholderIndent = () => { // set indent of placeholder - var placeholderPath = options.getPathByBranchEl(store.placeholder); - var placeholderNodeBack = store.placeholder.querySelector(".".concat(options.nodeBackClass)); - placeholderNodeBack.style[!options.rtl ? 'paddingLeft' : 'paddingRight'] = (placeholderPath.length - 1) * options.indent + 'px'; // remove tempChildren if empty - + const placeholderPath = options.getPathByBranchEl(store.placeholder); + const placeholderNodeBack = store.placeholder.querySelector(`.${options.nodeBackClass}`); + placeholderNodeBack.style[!options.rtl ? 'paddingLeft' : 'paddingRight'] = (placeholderPath.length - 1) * options.indent + 'px'; + // remove tempChildren if empty if (store.tempChildren.children.length === 0) { hp.removeEl(store.tempChildren); } - }; // first move + }; + // first move // 第一次移动 - - if (store.movedCount === 0) { // create placeholder // 创建占位元素 - var placeholder = hp.createElementFromHTML("\n
\n
\n
\n
\n
\n
\n ")); + const placeholder = hp.createElementFromHTML(` +
+
+
+
+
+
+ `); hp.insertAfter(placeholder, store.movedOrClonedElement); store.placeholder = placeholder; - options.afterPlaceholderCreated(store); // create a tree children el to use when can't get childrenEl - - var tempChildren = document.createElement('DIV'); + options.afterPlaceholderCreated(store); + // create a tree children el to use when can't get childrenEl + const tempChildren = document.createElement('DIV'); hp.addClass(tempChildren, options.childrenClass); - store.tempChildren = tempChildren; // update placeholder indent. update moved element style - + store.tempChildren = tempChildren; + // update placeholder indent. update moved element style updatePlaceholderIndent(); - store.updateMovedElementStyle(); // skip first move + store.updateMovedElementStyle(); + // skip first move // 跳过第一次移动 - return; - } // - - - store.updateMovedElementStyle(); // - + } + // + store.updateMovedElementStyle(); + // store.oneMoveStore = {}; // life cycle: one move - - var movingEl = store.movedElement; // branch + const movingEl = store.movedElement; // branch // find closest branch and hovering tree - - var _tree; - - var movingNode = movingEl.querySelector(".".concat(options.nodeClass)); // movingNodeOf and movingNodeRect are not always real. when RTL, there 'x' is top right. when draggingNodePositionMode is mouse, there x and y are mouse position. So don't calc them with their width or height. + let tree; + const movingNode = movingEl.querySelector(`.${options.nodeClass}`); + // movingNodeOf and movingNodeRect are not always real. when RTL, there 'x' is top right. when draggingNodePositionMode is mouse, there x and y are mouse position. So don't calc them with their width or height. // movingNodeOf 和 movingNodeRect并非一直如字面意义是movingNode真实坐标. RTL时, x坐标是右上角. draggingNodePositionMode是mouse时, x和y是鼠标坐标. - - var movingNodeOf = hp.getOffset(movingNode); - var movingNodeRect = hp.getBoundingClientRect(movingNode); - + let movingNodeOf = hp.getOffset(movingNode); + let movingNodeRect = hp.getBoundingClientRect(movingNode); if (options.draggingNodePositionMode === 'mouse') { // use mouse position as dragging node position - var moveEvent = store.moveEvent; + const { + moveEvent + } = store; movingNodeOf = { x: moveEvent.pageX, y: moveEvent.pageY @@ -664,102 +603,69 @@ function makeTreeDraggable(treeEl) { } else if (options.rtl) { movingNodeOf.x += movingNode.offsetWidth; movingNodeRect.x += movingNode.offsetWidth; - } // find tree with elementsFromPoint - - - var found; - var firstElement; - - var _iterator = _createForOfIteratorHelper$1(hp.elementsFromPoint(movingNodeRect.x, movingNodeRect.y)), - _step; - - try { - for (_iterator.s(); !(_step = _iterator.n()).done;) { - var itemEl = _step.value; - - if (!firstElement) { - firstElement = itemEl; - } - - if (hp.hasClass(itemEl, options.treeClass)) { - found = itemEl; - break; - } - } // check if the found element is covered by other elements - - } catch (err) { - _iterator.e(err); - } finally { - _iterator.f(); } - + // find tree with elementsFromPoint + let found; + let firstElement; + for (const itemEl of hp.elementsFromPoint(movingNodeRect.x, movingNodeRect.y)) { + if (!firstElement) { + firstElement = itemEl; + } + if (hp.hasClass(itemEl, options.treeClass)) { + found = itemEl; + break; + } + } + // check if the found element is covered by other elements if (firstElement !== found && !hp.isDescendantOf(firstElement, found)) { found = null; } - - _tree = found; - - if (!_tree) { + tree = found; + if (!tree) { // out of tree or tree is covered by other elements return; - } // check if target tree right - - - if (options.filterTargetTree(_tree, store, dhOptions) === false) { + } + // check if target tree right + if (options.filterTargetTree(tree, store, dhOptions) === false) { return; } - - store.targetTreeEl = _tree; // info ======================================== + store.targetTreeEl = tree; + // info ======================================== // life cycle: one move - - var info = { - tree: function tree() { - return _tree; - }, - root: function root() { - return info.tree.querySelector(".".concat(options.childrenClass)); - }, - closestNode: function closestNode() { - var nodes = []; // all visible nodes sort by y - - var walkToGetNodes = function walkToGetNodes(branch) { + const info = { + tree: () => tree, + root: () => info.tree.querySelector(`.${options.childrenClass}`), + closestNode: () => { + const nodes = []; // all visible nodes sort by y + const walkToGetNodes = branch => { // if (branch !== info.tree) { - var node = branch.querySelector(".".concat(options.nodeClass)); - + const node = branch.querySelector(`.${options.nodeClass}`); if (node && !isElementHidden(node)) { nodes.push(node); } - } // - - - var childrenEl = branch.querySelector(".".concat(options.childrenClass)); - + } + // + const childrenEl = branch.querySelector(`.${options.childrenClass}`); if (childrenEl) { - for (var i = 0; i < childrenEl.children.length; i++) { - var child = childrenEl.children[i]; - + for (let i = 0; i < childrenEl.children.length; i++) { + const child = childrenEl.children[i]; if (child !== movingEl && hp.hasClass(child, options.branchClass)) { walkToGetNodes(child); } } } }; - - walkToGetNodes(info.tree); // - + walkToGetNodes(info.tree); + // if (nodes.length === 0) { return; - } // - - - var found; - var t = hp.binarySearch(nodes, function (node) { - return hp.getOffset(node).y - movingNodeOf.y; - }, { + } + // + let found; + const t = hp.binarySearch(nodes, node => hp.getOffset(node).y - movingNodeOf.y, { returnNearestIfNoHit: true }); - if (t.hit) { found = t.value; } else { @@ -769,75 +675,55 @@ function makeTreeDraggable(treeEl) { found = t.value; } } - return found; }, - closestNodeOffset: function closestNodeOffset() { - return hp.getOffset(info.closestNode); - }, - closestBranch: function closestBranch() { - return hp.findParent(info.closestNode, function (el) { - return hp.hasClass(el, options.branchClass); - }); - }, - closestNext: function closestNext() { - var next = info.closestBranch.nextSibling; - + closestNodeOffset: () => hp.getOffset(info.closestNode), + closestBranch: () => hp.findParent(info.closestNode, el => hp.hasClass(el, options.branchClass)), + closestNext: () => { + let next = info.closestBranch.nextSibling; while (next) { if (next !== movingEl && hp.hasClass(next, options.branchClass) && !isElementHidden(next)) { return next; } - next = next.nextSibling; } }, - closestPrev: function closestPrev() { - var prev = info.closestBranch.previousSibling; - + closestPrev: () => { + let prev = info.closestBranch.previousSibling; while (prev) { if (prev !== movingEl && hp.hasClass(prev, options.branchClass) && !isElementHidden(prev)) { return prev; } - prev = prev.previousSibling; } }, - aboveBranch: function aboveBranch() { + aboveBranch: () => { // find above from branch to root // closestBranch must be placeholder if (info.closestBranch !== store.placeholder) { return; } - if (conditions['closest has next']) { return; - } // find placeholder prev or parent - - - var cur = info.closestBranch; - var prev = cur.previousSibling; - var found; - + } + // find placeholder prev or parent + let cur = info.closestBranch; + let prev = cur.previousSibling; + let found; while (prev) { if (prev !== movingEl && hp.hasClass(prev, options.branchClass) && !isElementHidden(prev)) { cur = prev; found = true; break; } - prev = prev.previousSibling; } - if (!found) { - cur = hp.findParent(cur, function (el) { - return hp.hasClass(el, options.branchClass); - }); - } // - - + cur = hp.findParent(cur, el => hp.hasClass(el, options.branchClass)); + } + // while (cur) { - var curNode = cur.querySelector(".".concat(options.nodeClass)); - + const curNode = cur.querySelector(`.${options.nodeClass}`); if (!options.rtl) { if (hp.getOffset(curNode).x <= movingNodeOf.x) { break; @@ -847,671 +733,308 @@ function makeTreeDraggable(treeEl) { break; } } - - var hasNextBranch = void 0; - var t = cur.nextSibling; - + let hasNextBranch; + let t = cur.nextSibling; while (t) { if (t !== movingEl && t !== store.placeholder && hp.hasClass(t, options.branchClass) && !isElementHidden(t)) { hasNextBranch = true; break; } - t = t.nextSibling; } - if (hasNextBranch) { break; } - - var parent = hp.findParent(cur, function (el) { - return hp.hasClass(el, options.branchClass); - }); - + const parent = hp.findParent(cur, el => hp.hasClass(el, options.branchClass)); if (!parent) { break; } - cur = parent; } - return cur; } - }; // conditions ======================================== + }; + // conditions ======================================== // life cycle: one move - - var conditions = { - 'no closest': function noClosest() { - return !info.closestNode; - }, - 'closest is top': function closestIsTop() { - return info.closestBranch === hp.findNodeList(info.root.children, function (el) { - return el !== movingEl && !isElementHidden(el); - }); - }, - 'closest is top excluding placeholder': function closestIsTopExcludingPlaceholder() { - return info.closestBranch === hp.findNodeList(info.root.children, function (el) { - return el !== movingEl && el !== store.placeholder && !isElementHidden(el); - }); - }, - 'on closest middle': function onClosestMiddle() { - return movingNodeOf.y < info.closestNodeOffset.y + info.closestNode.offsetHeight / 2; - }, - 'at closest indent right': function atClosestIndentRight() { - return movingNodeOf.x > info.closestNodeOffset.x + options.indent; - }, - 'at closest left': function atClosestLeft() { - return movingNodeOf.x < info.closestNodeOffset.x; - }, - 'closest is placeholder': function closestIsPlaceholder() { - return info.closestBranch === store.placeholder; - }, - 'no aboveBranch': function noAboveBranch() { - return !info.aboveBranch; - }, - 'closest has next': function closestHasNext() { - return info.closestNext; - }, - 'closest has prev': function closestHasPrev() { - return info.closestPrev; - }, - 'closest has children excluding placeholder movingEl': function closestHasChildrenExcludingPlaceholderMovingEl() { - var childrenEl = info.closestBranch.querySelector(".".concat(options.childrenClass)); - + const conditions = { + 'no closest': () => !info.closestNode, + 'closest is top': () => info.closestBranch === hp.findNodeList(info.root.children, el => el !== movingEl && !isElementHidden(el)), + 'closest is top excluding placeholder': () => info.closestBranch === hp.findNodeList(info.root.children, el => el !== movingEl && el !== store.placeholder && !isElementHidden(el)), + 'on closest middle': () => movingNodeOf.y < info.closestNodeOffset.y + info.closestNode.offsetHeight / 2, + 'at closest indent right': () => movingNodeOf.x > info.closestNodeOffset.x + options.indent, + 'at closest left': () => movingNodeOf.x < info.closestNodeOffset.x, + 'closest is placeholder': () => info.closestBranch === store.placeholder, + 'no aboveBranch': () => !info.aboveBranch, + 'closest has next': () => info.closestNext, + 'closest has prev': () => info.closestPrev, + 'closest has children excluding placeholder movingEl': () => { + const childrenEl = info.closestBranch.querySelector(`.${options.childrenClass}`); if (childrenEl) { - return hp.findNodeList(childrenEl.children, function (el) { - return el !== movingEl && el !== store.placeholder && !isElementHidden(el); - }); + return hp.findNodeList(childrenEl.children, el => el !== movingEl && el !== store.placeholder && !isElementHidden(el)); } } - }; // fix for rtl - + }; + // fix for rtl if (options.rtl) { Object.assign(conditions, { - 'at closest indent right': function atClosestIndentRight() { - return movingNodeOf.x < info.closestNodeOffset.x + info.closestNode.offsetWidth - options.indent; - }, + 'at closest indent right': () => movingNodeOf.x < info.closestNodeOffset.x + info.closestNode.offsetWidth - options.indent, // at indent left - 'at closest left': function atClosestLeft() { - return movingNodeOf.x > info.closestNodeOffset.x + info.closestNode.offsetWidth; - } // at right - + 'at closest left': () => movingNodeOf.x > info.closestNodeOffset.x + info.closestNode.offsetWidth // at right }); - } // convert conditions result to Boolean - - - Object.keys(conditions).forEach(function (key) { - var old = conditions[key]; - + } + // convert conditions result to Boolean + Object.keys(conditions).forEach(key => { + const old = conditions[key]; conditions[key] = function () { return Boolean(old.call(this)); }; - }); // - + }); + // hp.attachCache(info, info); hp.attachCache(conditions, conditions); store.oneMoveStore.info = info; - store.oneMoveStore.conditions = conditions; // actions start ======================================== - - var doAction = function doAction(name) { - for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { - args[_key - 1] = arguments[_key]; - } - + store.oneMoveStore.conditions = conditions; + // actions start ======================================== + const doAction = (name, ...args) => { if (!store._doActionQueue) { store._doActionQueue = Promise.resolve(); } - - var queue = store._doActionQueue; - store._doActionQueue = queue.then( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() { - var actionRecords, action, r; - return _regeneratorRuntime.wrap(function _callee$(_context) { - while (1) { - switch (_context.prev = _context.next) { - case 0: - // record tried actions in one move - if (!store.oneMoveStore.actionRecords) { - store.oneMoveStore.actionRecords = []; - } - - actionRecords = store.oneMoveStore.actionRecords; // - - action = actions[name]; - r = action.apply(void 0, args); - actionRecords.push(name); - _context.next = 7; - return r; - - case 7: - updatePlaceholderIndent(); - - case 8: - case "end": - return _context.stop(); - } - } - }, _callee); - }))); + const queue = store._doActionQueue; + store._doActionQueue = queue.then(async () => { + // record tried actions in one move + if (!store.oneMoveStore.actionRecords) { + store.oneMoveStore.actionRecords = []; + } + const { + actionRecords + } = store.oneMoveStore; + // + const action = actions[name]; + const r = action(...args); + actionRecords.push(name); + await r; + updatePlaceholderIndent(); + }); }; - - var actions = { - 'nothing': function nothing() { - return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() { - return _regeneratorRuntime.wrap(function _callee2$(_context2) { - while (1) { - switch (_context2.prev = _context2.next) { - case 0: - case "end": - return _context2.stop(); - } - } - }, _callee2); - }))(); - }, + const actions = { + async 'nothing'() {}, // do nothing - 'append to root': function appendToRoot() { - return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() { - return _regeneratorRuntime.wrap(function _callee3$(_context3) { - while (1) { - switch (_context3.prev = _context3.next) { - case 0: - // no closest branch, just append to root - if (options.isTargetTreeRootDroppable(store)) { - hp.appendTo(store.placeholder, info.root); - } - - case 1: - case "end": - return _context3.stop(); - } - } - }, _callee3); - }))(); + async 'append to root'() { + // no closest branch, just append to root + if (options.isTargetTreeRootDroppable(store)) { + hp.appendTo(store.placeholder, info.root); + } }, - 'insert before': function insertBefore() { - return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() { - return _regeneratorRuntime.wrap(function _callee4$(_context4) { - while (1) { - switch (_context4.prev = _context4.next) { - case 0: - if (!options.isNodeParentDroppable(info.closestBranch, store.targetTreeEl)) { - _context4.next = 4; - break; - } - - hp.insertBefore(store.placeholder, info.closestBranch); - _context4.next = 5; - break; - - case 4: - return _context4.abrupt("return", secondCase(getParentBranchByEl(info.closestBranch))); - - case 5: - case "end": - return _context4.stop(); - } - } - }, _callee4); - }))(); + async 'insert before'() { + if (options.isNodeParentDroppable(info.closestBranch, store.targetTreeEl)) { + hp.insertBefore(store.placeholder, info.closestBranch); + } else { + return secondCase(getParentBranchByEl(info.closestBranch)); + } }, - 'insert after': function insertAfter() { - var _arguments = arguments; - return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() { - var branch, moved, isFirstTriedAction; - return _regeneratorRuntime.wrap(function _callee5$(_context5) { - while (1) { - switch (_context5.prev = _context5.next) { - case 0: - branch = _arguments.length > 0 && _arguments[0] !== undefined ? _arguments[0] : info.closestBranch; - - if (!options.isNodeParentDroppable(branch, store.targetTreeEl)) { - _context5.next = 5; - break; - } - - hp.insertAfter(store.placeholder, branch); - _context5.next = 11; - break; - - case 5: - _context5.next = 7; - return secondCase(getParentBranchByEl(branch)); - - case 7: - moved = _context5.sent; - isFirstTriedAction = !store.oneMoveStore.actionRecords || store.oneMoveStore.actionRecords.length === 1; - - if (!(!moved && isFirstTriedAction)) { - _context5.next = 11; - break; - } - - return _context5.abrupt("return", thirdCase(branch)); - - case 11: - case "end": - return _context5.stop(); - } - } - }, _callee5); - }))(); + async 'insert after'(branch = info.closestBranch) { + if (options.isNodeParentDroppable(branch, store.targetTreeEl)) { + hp.insertAfter(store.placeholder, branch); + } else { + const moved = await secondCase(getParentBranchByEl(branch)); + const isFirstTriedAction = !store.oneMoveStore.actionRecords || store.oneMoveStore.actionRecords.length === 1; + if (!moved && isFirstTriedAction) { + return thirdCase(branch); + } + } }, - prepend: function prepend() { - return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6() { - return _regeneratorRuntime.wrap(function _callee6$(_context6) { - while (1) { - switch (_context6.prev = _context6.next) { - case 0: - if (!(info.closestBranch === store.placeholder)) { - _context6.next = 2; - break; - } - - return _context6.abrupt("return"); - - case 2: - if (!(options.ifNodeFolded(info.closestBranch, store) && !options.unfoldWhenDragover)) { - _context6.next = 6; - break; - } - - return _context6.abrupt("return", doAction('insert after', info.closestBranch)); - - case 6: - if (!options.isNodeDroppable(info.closestBranch, store.targetTreeEl)) { - _context6.next = 11; - break; - } - - _context6.next = 9; - return tryUnfoldAndPrepend(info.closestBranch); - - case 9: - _context6.next = 12; - break; - - case 11: - return _context6.abrupt("return", secondCase(info.closestBranch)); - - case 12: - case "end": - return _context6.stop(); - } - } - }, _callee6); - }))(); + async prepend() { + if (info.closestBranch === store.placeholder) { + return; + } + if (options.ifNodeFolded(info.closestBranch, store) && !options.unfoldWhenDragover) { + return doAction('insert after', info.closestBranch); + } else { + if (options.isNodeDroppable(info.closestBranch, store.targetTreeEl)) { + await tryUnfoldAndPrepend(info.closestBranch); + } else { + return secondCase(info.closestBranch); + } + } }, - 'after above': function afterAbove() { - return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7() { - return _regeneratorRuntime.wrap(function _callee7$(_context7) { - while (1) { - switch (_context7.prev = _context7.next) { - case 0: - if (!options.isNodeParentDroppable(info.aboveBranch, store.targetTreeEl)) { - _context7.next = 4; - break; - } - - hp.insertAfter(store.placeholder, info.aboveBranch); - _context7.next = 5; - break; - - case 4: - return _context7.abrupt("return", secondCase(getParentBranchByEl(info.aboveBranch))); - - case 5: - case "end": - return _context7.stop(); - } - } - }, _callee7); - }))(); + async 'after above'() { + if (options.isNodeParentDroppable(info.aboveBranch, store.targetTreeEl)) { + hp.insertAfter(store.placeholder, info.aboveBranch); + } else { + return secondCase(getParentBranchByEl(info.aboveBranch)); + } }, - 'append to prev': function appendToPrev() { - return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee8() { - var childrenEl; - return _regeneratorRuntime.wrap(function _callee8$(_context8) { - while (1) { - switch (_context8.prev = _context8.next) { - case 0: - if (!(info.closestPrev === store.placeholder)) { - _context8.next = 2; - break; - } - - return _context8.abrupt("return"); - - case 2: - if (!options.ifNodeFolded(info.closestPrev, store)) { - _context8.next = 6; - break; - } - - return _context8.abrupt("return", doAction('insert after', info.closestPrev)); - - case 6: - if (!options.isNodeDroppable(info.closestPrev, store.targetTreeEl)) { - _context8.next = 13; - break; - } - - _context8.next = 9; - return unfoldAndGetChildrenEl(info.closestPrev); - - case 9: - childrenEl = _context8.sent; - hp.appendTo(store.placeholder, childrenEl); - _context8.next = 14; - break; - - case 13: - return _context8.abrupt("return", secondCase(info.closestPrev)); - - case 14: - case "end": - return _context8.stop(); - } - } - }, _callee8); - }))(); + async 'append to prev'() { + if (info.closestPrev === store.placeholder) { + return; + } + if (options.ifNodeFolded(info.closestPrev, store)) { + return doAction('insert after', info.closestPrev); + } else { + if (options.isNodeDroppable(info.closestPrev, store.targetTreeEl)) { + const childrenEl = await unfoldAndGetChildrenEl(info.closestPrev); + hp.appendTo(store.placeholder, childrenEl); + } else { + return secondCase(info.closestPrev); + } + } } - }; // second case for actions, when target position not droppable + }; + // second case for actions, when target position not droppable // return true if moved - - var secondCase = /*#__PURE__*/function () { - var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee9(branchEl) { - var targetEl; - return _regeneratorRuntime.wrap(function _callee9$(_context9) { - while (1) { - switch (_context9.prev = _context9.next) { - case 0: - if (!branchEl) { - _context9.next = 5; - break; - } - - targetEl = options._findClosestDroppablePosition(branchEl, store.targetTreeEl); - - if (!targetEl) { - _context9.next = 5; - break; - } - - hp.insertAfter(store.placeholder, targetEl); - return _context9.abrupt("return", true); - - case 5: - case "end": - return _context9.stop(); - } - } - }, _callee9); - })); - - return function secondCase(_x) { - return _ref2.apply(this, arguments); - }; - }(); // when action is after, first case and second case invalid, try prepend + const secondCase = async branchEl => { + if (branchEl) { + const targetEl = options._findClosestDroppablePosition(branchEl, store.targetTreeEl); + if (targetEl) { + hp.insertAfter(store.placeholder, targetEl); + return true; + } + } + }; + // when action is after, first case and second case invalid, try prepend // 当操作是'after', 第一种第二种情况无效时, 尝试prepend - - - var thirdCase = /*#__PURE__*/function () { - var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee10(branchEl) { - return _regeneratorRuntime.wrap(function _callee10$(_context10) { - while (1) { - switch (_context10.prev = _context10.next) { - case 0: - if (!(!options.ifNodeFolded(branchEl, store) && options.isNodeDroppable(branchEl, store.targetTreeEl))) { - _context10.next = 3; - break; - } - - _context10.next = 3; - return tryUnfoldAndPrepend(branchEl); - - case 3: - case "end": - return _context10.stop(); - } - } - }, _callee10); - })); - - return function thirdCase(_x2) { - return _ref3.apply(this, arguments); - }; - }(); - - var unfoldAndGetChildrenEl = /*#__PURE__*/function () { - var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee11(branch) { - var childrenEl; - return _regeneratorRuntime.wrap(function _callee11$(_context11) { - while (1) { - switch (_context11.prev = _context11.next) { - case 0: - _context11.next = 2; - return options.unfoldTargetNodeByEl(branch, store); - - case 2: - childrenEl = branch.querySelector(".".concat(options.childrenClass)); - - if (!childrenEl) { - childrenEl = store.tempChildren; - hp.appendTo(childrenEl, branch); - } - - return _context11.abrupt("return", childrenEl); - - case 5: - case "end": - return _context11.stop(); - } - } - }, _callee11); - })); - - return function unfoldAndGetChildrenEl(_x3) { - return _ref4.apply(this, arguments); + const thirdCase = async branchEl => { + // the third case + if (!options.ifNodeFolded(branchEl, store) && options.isNodeDroppable(branchEl, store.targetTreeEl)) { + await tryUnfoldAndPrepend(branchEl); + } + }; + const unfoldAndGetChildrenEl = async branch => { + await options.unfoldTargetNodeByEl(branch, store); + let childrenEl = branch.querySelector(`.${options.childrenClass}`); + if (!childrenEl) { + childrenEl = store.tempChildren; + hp.appendTo(childrenEl, branch); + } + return childrenEl; + }; + const tryUnfoldAndPrepend = async branchEl => { + const func = async () => { + const childrenEl = await unfoldAndGetChildrenEl(branchEl); + hp.prependTo(store.placeholder, childrenEl); }; - }(); - - var tryUnfoldAndPrepend = /*#__PURE__*/function () { - var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee13(branchEl) { - var func, oneMoveStore; - return _regeneratorRuntime.wrap(function _callee13$(_context13) { - while (1) { - switch (_context13.prev = _context13.next) { - case 0: - func = /*#__PURE__*/function () { - var _ref6 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee12() { - var childrenEl; - return _regeneratorRuntime.wrap(function _callee12$(_context12) { - while (1) { - switch (_context12.prev = _context12.next) { - case 0: - _context12.next = 2; - return unfoldAndGetChildrenEl(branchEl); - - case 2: - childrenEl = _context12.sent; - hp.prependTo(store.placeholder, childrenEl); - - case 4: - case "end": - return _context12.stop(); - } - } - }, _callee12); - })); - - return function func() { - return _ref6.apply(this, arguments); - }; - }(); - - if (!options.ifNodeFolded(branchEl, store)) { - _context13.next = 6; - break; - } - - // delay if node folded - oneMoveStore = store.oneMoveStore; - setTimeout(function () { - // check if expired - if (oneMoveStore === store.oneMoveStore) { - func(); - } - }, options.unfoldWhenDragoverDelay); - _context13.next = 8; - break; - - case 6: - _context13.next = 8; - return func(); - - case 8: - case "end": - return _context13.stop(); - } + if (options.ifNodeFolded(branchEl, store)) { + // delay if node folded + let oneMoveStore = store.oneMoveStore; + setTimeout(() => { + // check if expired + if (oneMoveStore === store.oneMoveStore) { + func(); } - }, _callee13); - })); - - return function tryUnfoldAndPrepend(_x4) { - return _ref5.apply(this, arguments); - }; - }(); // actions end ======================================== - - + }, options.unfoldWhenDragoverDelay); + } else { + await func(); + } + }; + // actions end ======================================== doDraggableDecision({ - options: options, + options, event: store.moveEvent, - store: store, + store, opt: dhOptions, - info: info, - conditions: conditions, - actions: actions, - doAction: doAction + info, + conditions, + actions, + doAction }); }, - afterMove: function afterMove(store, dhOptions) { + afterMove: (store, dhOptions) => { options.afterMove && options.afterMove(store, dhOptions); }, - beforeDrop: function () { - var _beforeDrop = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee14(store, dhOptions) { - var endEvent, movingEl, placeholder, tempChildren, movedCount, targetTreeEl, startTreeEl, maskTree, maskTree2, pathChanged, isPathChanged; - return _regeneratorRuntime.wrap(function _callee14$(_context14) { - while (1) { - switch (_context14.prev = _context14.next) { - case 0: - isPathChanged = function _isPathChanged() { - var startTree = store.startTree, - targetTree = store.targetTree, - startPath = store.startPath, - targetPath = store.targetPath; - return startTree !== targetTree || startPath.toString() !== targetPath.toString(); - }; - - endEvent = store.endEvent; - movingEl = store.movedElement; // branch - - placeholder = store.placeholder, tempChildren = store.tempChildren, movedCount = store.movedCount, targetTreeEl = store.targetTreeEl, startTreeEl = store.startTreeEl; // use mask tree to avoid flick caused by DOM update in short time - // 复制 targetTreeEl 作为遮罩, 避免短时间内更新DOM引起的闪烁 - - if (targetTreeEl) { - // No targetTreeEl mean no valid move. - // targetTreeEl不存在意味着没有有效移动. - // create mask tree - maskTree = targetTreeEl.cloneNode(true); - targetTreeEl.style.display = 'none'; - hp.insertAfter(maskTree, targetTreeEl); - - if (startTreeEl !== targetTreeEl) { - maskTree2 = startTreeEl.cloneNode(true); - startTreeEl.style.display = 'none'; - hp.insertAfter(maskTree2, startTreeEl); - } // - - - store.targetPath = options.getPathByBranchEl(placeholder); - pathChanged = isPathChanged(); - store.targetPathNotEqualToStartPath = pathChanged; - store.pathChangePrevented = false; - - if (options.beforeDrop && options.beforeDrop(pathChanged, store, dhOptions) === false) { - pathChanged = false; - store.pathChangePrevented = false; - } - - store.pathChanged = pathChanged; - } // destroy placeholder and tempChildren - - - hp.removeEl(placeholder); - - if (tempChildren) { - hp.removeEl(tempChildren); - } - - store.updateMovedElementStyle(); // - - _context14.next = 10; - return options.afterDrop(store, dhOptions); - - case 10: - if (!maskTree) { - _context14.next = 16; - break; - } - - _context14.next = 13; - return hp.waitTime(30); - - case 13: - hp.removeEl(maskTree); - targetTreeEl.style.display = 'block'; - - if (maskTree2) { - hp.removeEl(maskTree2); - startTreeEl.style.display = 'block'; - } - - case 16: - case "end": - return _context14.stop(); + beforeDrop: async (store, dhOptions) => { + const movingEl = store.movedElement; // branch + const { + placeholder, + tempChildren, + movedCount, + targetTreeEl, + startTreeEl + } = store; + // use mask tree to avoid flick caused by DOM update in short time + // 复制 targetTreeEl 作为遮罩, 避免短时间内更新DOM引起的闪烁 + let maskTree, maskTree2; + if (targetTreeEl) { + // No targetTreeEl mean no valid move. + // targetTreeEl不存在意味着没有有效移动. + + // create mask tree + maskTree = targetTreeEl.cloneNode(true); + targetTreeEl.style.display = 'none'; + hp.insertAfter(maskTree, targetTreeEl); + if (startTreeEl !== targetTreeEl) { + maskTree2 = startTreeEl.cloneNode(true); + startTreeEl.style.display = 'none'; + hp.insertAfter(maskTree2, startTreeEl); + } + // + store.targetPath = options.getPathByBranchEl(placeholder); + let pathChanged = isPathChanged(); + store.targetPathNotEqualToStartPath = pathChanged; + store.pathChangePrevented = false; + if (options.beforeDrop && options.beforeDrop(pathChanged, store, dhOptions) === false) { + pathChanged = false; + store.pathChangePrevented = false; + } + store.pathChanged = pathChanged; + } + // destroy placeholder and tempChildren + hp.removeEl(placeholder); + if (tempChildren) { + hp.removeEl(tempChildren); + } + store.updateMovedElementStyle(); + // + await options.afterDrop(store, dhOptions); + // remove mask tree + if (maskTree) { + await hp.waitTime(30); + hp.removeEl(maskTree); + targetTreeEl.style.display = 'block'; + if (maskTree2) { + hp.removeEl(maskTree2); + startTreeEl.style.display = 'block'; + } + } + // + function isPathChanged() { + const { + startTree, + targetTree, + startPath, + targetPath + } = store; + if (startTree === targetTree && startPath.length === targetPath.length) { + if (startPath.toString() === targetPath.toString()) { + return false; + } else { + // downward same-level move, the end of targetPath is 1 more than real value + // 同级向下移动时, targetPath的末位比真实值大1 + const t = startPath.slice(0); + t[t.length - 1]++; + if (t.toString() === targetPath.toString()) { + return false; } } - }, _callee14); - })); - - function beforeDrop(_x5, _x6) { - return _beforeDrop.apply(this, arguments); + } + return true; } - - return beforeDrop; - }() - }), - destroy = _draggableHelper.destroy, - draggableHelperOptions = _draggableHelper.options; - + } + }); return { - destroy: destroy, - options: options, - optionsUpdated: optionsUpdated + destroy, + options, + optionsUpdated }; - function getParentBranchByEl(el) { - return hp.findParent(el, function (el) { + return hp.findParent(el, el => { if (hp.hasClass(el, options.branchClass)) { return true; } - if (hp.hasClass(el, options.rootClass)) { return 'break'; } }); } - function optionsUpdated() { Object.assign(draggableHelperOptions, { triggerClassName: options.triggerClass, @@ -1529,18 +1052,12 @@ function makeTreeDraggable(treeEl) { }); } } - function isElementHidden(el) { return el.offsetWidth === 0 && el.offsetHeight === 0; } -function _createForOfIteratorHelper$2(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$2(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; } - -function _unsupportedIterableToArray$2(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray$2(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$2(o, minLen); } - -function _arrayLikeToArray$2(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; } -var treesStore = {}; -var script = { +const treesStore = {}; +var Draggable_vue = { props: { triggerClass: { type: [String, Array], @@ -1608,172 +1125,132 @@ var script = { default: true } }, + emits: ['afterPlaceholderCreated', 'after-placeholder-created', 'before-first-move', 'drag', 'he-tree-drag', 'after-move', 'he-tree-before-drop', 'input', 'change', 'drop', 'he-tree-drop'], // components: {}, - data: function data() { + data() { return { - treesStore: treesStore + treesStore }; }, // computed: {}, // watch: {}, methods: { - _Draggable_unfoldTargetNodeByEl: function _Draggable_unfoldTargetNodeByEl(branchEl, store) { - var targetTree = store.targetTree; - var path = targetTree.getPathByBranchEl(branchEl); - var node = targetTree.getNodeByPath(path); + _Draggable_unfoldTargetNodeByEl(branchEl, store) { + const { + targetTree + } = store; + const path = targetTree.getPathByBranchEl(branchEl); + const node = targetTree.getNodeByPath(path); targetTree.unfold && targetTree.unfold(node, path); - return new Promise(function (resolve, reject) { - targetTree.$nextTick(function () { + return new Promise((resolve, reject) => { + targetTree.$nextTick(() => { resolve(); }); }); }, - isNodeDraggable: function isNodeDraggable(node, path) { - var store = this.treesStore.store; - var allNodes = this.getAllNodesByPath(path); + isNodeDraggable(node, path) { + const { + store + } = this.treesStore; + const allNodes = this.getAllNodesByPath(path); allNodes.unshift(this.rootNode); - - var _iterator = _createForOfIteratorHelper$2(hp.iterateAll(allNodes, { + for (const { + value: node, + index + } of hp.iterateAll(allNodes, { reverse: true - })), - _step; - - try { - for (_iterator.s(); !(_step = _iterator.n()).done;) { - var _step$value = _step.value, - _node = _step$value.value, - index = _step$value.index; - var currentPath = path.slice(0, index + 1); - var draggableOpt = _node.$draggable !== undefined ? _node.$draggable : this.eachDraggable; - var draggable = hp.resolveValueOrGettter(draggableOpt, [currentPath, this, store]); - - if (draggable === undefined) { - continue; - } else { - return draggable; - } + })) { + const currentPath = path.slice(0, index + 1); + const draggableOpt = node.$draggable !== undefined ? node.$draggable : this.eachDraggable; + const draggable = hp.resolveValueOrGettter(draggableOpt, [currentPath, this, store]); + if (draggable === undefined) { + continue; + } else { + return draggable; } - } catch (err) { - _iterator.e(err); - } finally { - _iterator.f(); } - return true; }, - isNodeDroppable: function isNodeDroppable(node, path) { - var store = this.treesStore.store; - var allNodes = this.getAllNodesByPath(path); + isNodeDroppable(node, path) { + const { + store + } = this.treesStore; + const allNodes = this.getAllNodesByPath(path); allNodes.unshift(this.rootNode); - var droppableFinal, resolved; - - var _iterator2 = _createForOfIteratorHelper$2(hp.iterateAll(allNodes, { + let droppableFinal, resolved; + for (const { + value: node, + index + } of hp.iterateAll(allNodes, { reverse: true - })), - _step2; - - try { - for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) { - var _step2$value = _step2.value, - _node2 = _step2$value.value, - index = _step2$value.index; - var currentPath = path.slice(0, index + 1); - var droppableOpt = _node2.$droppable !== undefined ? _node2.$droppable : this.eachDroppable; - var droppable = hp.resolveValueOrGettter(droppableOpt, [currentPath, this, store]); - - if (droppable === undefined) { - continue; - } else { - droppableFinal = droppable; - resolved = true; - break; - } + })) { + const currentPath = path.slice(0, index + 1); + const droppableOpt = node.$droppable !== undefined ? node.$droppable : this.eachDroppable; + const droppable = hp.resolveValueOrGettter(droppableOpt, [currentPath, this, store]); + if (droppable === undefined) { + continue; + } else { + droppableFinal = droppable; + resolved = true; + break; } - } catch (err) { - _iterator2.e(err); - } finally { - _iterator2.f(); } - if (!resolved) { droppableFinal = true; } - if (this._internal_hook_isNodeDroppable) { return this._internal_hook_isNodeDroppable({ - droppableFinal: droppableFinal, - node: node, - path: path, - store: store + droppableFinal, + node, + path, + store }); } - return droppableFinal; }, // override - getPathByBranchEl: function getPathByBranchEl(branchEl) { - var getAttrPath = function getAttrPath(el) { - var pathStr = el.getAttribute('data-tree-node-path'); - + getPathByBranchEl(branchEl) { + const store = this.treesStore.store; + const getAttrPath = el => { + const pathStr = el.getAttribute('data-tree-node-path'); if (pathStr) { - return pathStr.split(',').map(function (v) { - return parseInt(v); - }); + return pathStr.split(',').map(v => parseInt(v)); } }; - - var path = getAttrPath(branchEl); - + const path = getAttrPath(branchEl); if (path) { return path; - } // placeholder path - - - var parentPath; - hp.findParent(branchEl, function (el) { + } + // placeholder path + let parentPath; + hp.findParent(branchEl, el => { if (hp.hasClass(el, 'tree-root')) { parentPath = []; return true; } - if (hp.hasClass(el, 'tree-branch')) { parentPath = getAttrPath(el); return true; } }); - var index = 0; - - var _iterator3 = _createForOfIteratorHelper$2(hp.iterateAll(branchEl.parentElement.children)), - _step3; - - try { - for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) { - var _step3$value = _step3.value, - el = _step3$value.value, - index2 = _step3$value.index; - - if (hp.hasClass(el, 'tree-branch') || hp.hasClass(el, 'tree-placeholder')) { - if (el === branchEl) { - break; - } - - index++; + let index = 0; + for (const { + value: el, + index: index2 + } of hp.iterateAll(branchEl.parentElement.children)) { + if (hp.hasClass(el, 'tree-branch') || hp.hasClass(el, 'tree-placeholder')) { + if (el === branchEl) { + break; } + index++; } - } catch (err) { - _iterator3.e(err); - } finally { - _iterator3.f(); } - - return [].concat(_toConsumableArray(parentPath), [index]); + return [...parentPath, index]; } }, // created() {}, - mounted: function mounted() { - var _this = this; - - var options = this._draggableOptions = { + mounted() { + const options = this._draggableOptions = { indent: this.indent, triggerClass: this.triggerClass, triggerBySelf: this.triggerBySelf, @@ -1799,271 +1276,210 @@ var script = { placeholderNodeBackClass: 'tree-placeholder-node-back', placeholderNodeClass: 'tree-placeholder-node', draggingClass: 'dragging', - placeholderId: "he_tree_drag_placeholder", - ifNodeFolded: function ifNodeFolded(branchEl, store) { - var targetTree = store.targetTree; - var node = targetTree.getNodeByBranchEl(branchEl); + placeholderId: `he_tree_drag_placeholder`, + ifNodeFolded: (branchEl, store) => { + const { + targetTree + } = store; + const node = targetTree.getNodeByBranchEl(branchEl); return node.$folded; }, - isTargetTreeRootDroppable: function isTargetTreeRootDroppable(store) { - var droppable = hp.resolveValueOrGettter(store.targetTree.rootNode.$droppable, [store.targetTree, store]); - + isTargetTreeRootDroppable: store => { + const droppable = hp.resolveValueOrGettter(store.targetTree.rootNode.$droppable, [store.targetTree, store]); if (droppable !== undefined) { return droppable; } - return true; }, - unfoldTargetNodeByEl: function unfoldTargetNodeByEl() { - return _this._Draggable_unfoldTargetNodeByEl.apply(_this, arguments); - }, - isNodeParentDroppable: function isNodeParentDroppable(branchEl, treeEl) { - var tree = _this.getTreeVmByTreeEl(treeEl); - - var path = tree.getPathByBranchEl(branchEl); - var parentPath = hp.arrayWithoutEnd(path, 1); - var parent = tree.getNodeByPath(parentPath); + unfoldTargetNodeByEl: (...args) => this._Draggable_unfoldTargetNodeByEl(...args), + isNodeParentDroppable: (branchEl, treeEl) => { + const tree = this.getTreeVmByTreeEl(treeEl); + const path = tree.getPathByBranchEl(branchEl); + const parentPath = hp.arrayWithoutEnd(path, 1); + const parent = tree.getNodeByPath(parentPath); return tree.isNodeDroppable(parent, parentPath); }, - isNodeDroppable: function isNodeDroppable(branchEl, treeEl) { - var tree = _this.getTreeVmByTreeEl(treeEl); - - var path = tree.getPathByBranchEl(branchEl); - var node = tree.getNodeByPath(path); + isNodeDroppable: (branchEl, treeEl) => { + const tree = this.getTreeVmByTreeEl(treeEl); + const path = tree.getPathByBranchEl(branchEl); + const node = tree.getNodeByPath(path); return tree.isNodeDroppable(node, path); }, - _findClosestDroppablePosition: function _findClosestDroppablePosition(branchEl, treeEl) { - var tree = _this.getTreeVmByTreeEl(treeEl); - - var path = tree.getPathByBranchEl(branchEl); - var findPath = hp.arrayWithoutEnd(path, 1); - var cur = path; - - var _iterator4 = _createForOfIteratorHelper$2(tree.iteratePath(findPath, { + _findClosestDroppablePosition: (branchEl, treeEl) => { + const tree = this.getTreeVmByTreeEl(treeEl); + const path = tree.getPathByBranchEl(branchEl); + const findPath = hp.arrayWithoutEnd(path, 1); + let cur = path; + for (const { + node, + path + } of tree.iteratePath(findPath, { reverse: true - })), - _step4; - - try { - for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) { - var _step4$value = _step4.value, - node = _step4$value.node, - _path = _step4$value.path; - - if (tree.isNodeDroppable(node, _path)) { - return tree.getBranchElByPath(cur); - } else { - cur = _path; - } + })) { + if (tree.isNodeDroppable(node, path)) { + return tree.getBranchElByPath(cur); + } else { + cur = path; } - } catch (err) { - _iterator4.e(err); - } finally { - _iterator4.f(); } - - if (tree.isNodeDroppable(_this.rootNode, [])) { + if (tree.isNodeDroppable(this.rootNode, [])) { return tree.getBranchElByPath(cur); } }, - afterPlaceholderCreated: function afterPlaceholderCreated(store) { + afterPlaceholderCreated: store => { store.startTree.$emit('afterPlaceholderCreated', store); store.startTree.$emit('after-placeholder-created', store); }, - getPathByBranchEl: function getPathByBranchEl(branchEl) { - return _this.getPathByBranchEl(branchEl); - }, - beforeFirstMove: function beforeFirstMove(store) { - _this.treesStore.store = store; - store.startTree = _this.getTreeVmByTreeEl(store.startTreeEl); - var draggable = hp.resolveValueOrGettter(store.startTree.draggable, [store.startTree, store]); - + getPathByBranchEl: branchEl => this.getPathByBranchEl(branchEl), + beforeFirstMove: store => { + this.treesStore.store = store; + store.startTree = this.getTreeVmByTreeEl(store.startTreeEl); + const draggable = hp.resolveValueOrGettter(store.startTree.draggable, [store.startTree, store]); if (!draggable) { return false; } - - var startTree = store.startTree, - dragBranchEl = store.dragBranchEl, - startPath = store.startPath; + const { + startTree, + dragBranchEl, + startPath + } = store; store.dragNode = startTree.getNodeByPath(startPath); - - if (_this.cloneWhenDrag) { + if (this.cloneWhenDrag) { store.dragNode = cloneTreeData(store.dragNode); } - if (!startTree.isNodeDraggable(store.dragNode, startPath)) { return false; } - if (startTree.hasHook('ondragstart') && startTree.executeHook('ondragstart', [startTree, store]) === false) { return false; } - store.startTree.$emit('before-first-move', store); store.startTree.$emit('drag', store); - - _this.$root.$emit('he-tree-drag', store); + this.$root.$emit('he-tree-drag', store); }, - filterTargetTree: function filterTargetTree(targetTreeEl, store) { - var targetTree = _this.getTreeVmByTreeEl(targetTreeEl); - - var startTree = store.startTree; - + filterTargetTree: (targetTreeEl, store) => { + const targetTree = this.getTreeVmByTreeEl(targetTreeEl); + const { + startTree + } = store; if (startTree !== targetTree) { - if (_this._internal_hook_filterTargetTree) { - if (_this._internal_hook_filterTargetTree(targetTree, store) === false) { + if (this._internal_hook_filterTargetTree) { + if (this._internal_hook_filterTargetTree(targetTree, store) === false) { return false; } } else { return false; } } - - var targetTreeDroppable = hp.resolveValueOrGettter(targetTree.droppable, [targetTree, store]); - + const targetTreeDroppable = hp.resolveValueOrGettter(targetTree.droppable, [targetTree, store]); if (!targetTreeDroppable) { return false; } - store.targetTree = targetTree; - - if (!hp.resolveValueOrGettter(store.startTree === store.targetTree) && hp.resolveValueOrGettter(_this._Draggable_unfoldTargetNode, [false, _this.treeData]) !== _this.rootNode.children) { + if (!hp.resolveValueOrGettter(store.startTree === store.targetTree) && hp.resolveValueOrGettter(this._Draggable_unfoldTargetNode, [false, this.treeData]) !== this.rootNode.children) { return false; } }, - afterMove: function afterMove(store) { + afterMove: store => { store.startTree.$emit('after-move', store); }, - beforeDrop: function beforeDrop(pathChanged, store) { - var targetTree = store.targetTree; - + beforeDrop: (pathChanged, store) => { + const { + targetTree + } = store; if (targetTree.hasHook('ondragend') && targetTree.executeHook('ondragend', [targetTree, store]) === false) { return false; } - - _this.$root.$emit('he-tree-before-drop', store); + this.$root.$emit('he-tree-before-drop', store); }, - afterDrop: function afterDrop(store, t) { + afterDrop: (store, t) => { if (store.pathChanged) { - var startTree = store.startTree, - targetTree = store.targetTree, - startPath = store.startPath, - targetPath = store.targetPath, - dragNode = store.dragNode; - - if (_this.cloneWhenDrag !== true) { + const { + startTree, + targetTree, + startPath, + dragNode + } = store; + let { + targetPath + } = store; + if (this.cloneWhenDrag !== true) { // remove from start position - var startParentPath = hp.arrayWithoutEnd(startPath, 1); - var startParent = startTree.getNodeByPath(startParentPath); - var startSiblings = startParentPath.length === 0 ? startTree.treeData : startParent.children; - var startIndex = hp.arrayLast(startPath); - startSiblings.splice(startIndex, 1); // update targetPath - + const startParentPath = hp.arrayWithoutEnd(startPath, 1); + const startParent = startTree.getNodeByPath(startParentPath); + const startSiblings = startParentPath.length === 0 ? startTree.treeData : startParent.children; + const startIndex = hp.arrayLast(startPath); + startSiblings.splice(startIndex, 1); + // remove node from the starting position may affect the target path. + // example + // startPath targetPath + // [0] [1] + // [0] [1, 0] + // [3, 1] [3, 3] + // [3, 1] [3, 3, 5] + // above targetPaths should be transformed to [0], [0, 0] [3, 2] [3, 2, 5] if (startTree === targetTree) { if (startPath.length <= targetPath.length) { - var lenNoEnd = startPath.length - 1; - var same = true; - - for (var i = 0; i < lenNoEnd; i++) { - var s = startPath[i]; - var _t = targetPath[i]; - - if (s !== _t) { - same = false; - break; - } - } - - if (same) { - var endIndex = startPath.length - 1; - + const sw = startPath.slice(0, startPath.length - 1); // without end + const tw = targetPath.slice(0, sw.length); // same length with sw + if (sw.toString() === tw.toString()) { + const endIndex = sw.length; if (startPath[endIndex] < targetPath[endIndex]) { + // deprecated. I forgot why create a copy of targetPath. // targetPath = targetPath.slice(0) // create a copy of targetPath targetPath[endIndex] -= 1; + } else if (startPath[endIndex] === targetPath[endIndex]) { + console.error('Draggable.afterDrop: That is impossible!'); } } } } - } // insert to target position - - - var targetParentPath = hp.arrayWithoutEnd(targetPath, 1); - var targetParent = targetTree.getNodeByPath(targetParentPath); - var targetSiblings; - + } + // insert to target position + const targetParentPath = hp.arrayWithoutEnd(targetPath, 1); + const targetParent = targetTree.getNodeByPath(targetParentPath); + let targetSiblings; if (targetParentPath.length === 0) { targetSiblings = targetTree.treeData; } else { if (!targetParent.children) { - _this.$set(targetParent, 'children', []); + targetParent['children'] = []; } - targetSiblings = targetParent.children; } - - var targetIndex = hp.arrayLast(targetPath); - targetSiblings.splice(targetIndex, 0, dragNode); // emit event - + const targetIndex = hp.arrayLast(targetPath); + targetSiblings.splice(targetIndex, 0, dragNode); + // emit event startTree.$emit('input', startTree.treeData); startTree.$emit('change', store); targetTree.$emit('drop', store); - - _this.$root.$emit('he-tree-drop', store); - + this.$root.$emit('he-tree-drop', store); if (targetTree !== startTree) { targetTree.$emit('input', targetTree.treeData); targetTree.$emit('change', store); } - - return new Promise(function (resolve, reject) { - targetTree.$nextTick(function () { + return new Promise((resolve, reject) => { + targetTree.$nextTick(() => { resolve(); }); }); } } }; - - var _makeTreeDraggable_obj = this._makeTreeDraggable_obj = makeTreeDraggable(this.$el, options); // watch props and update options - - - ['indent', 'triggerClass', 'triggerBySelf', 'unfoldWhenDragover', 'unfoldWhenDragoverDelay', 'draggingNodePositionMode', 'cloneWhenDrag', 'edgeScroll', 'edgeScrollTriggerMargin', 'edgeScrollSpeed', 'edgeScrollTriggerMode', 'edgeScrollSpecifiedContainerY', 'edgeScrollSpecifiedContainerY', 'rtl', 'preventTextSelection'].forEach(function (name) { - _this.$watch(name, function (value) { + const _makeTreeDraggable_obj = this._makeTreeDraggable_obj = makeTreeDraggable(this.$el, options); + // watch props and update options + ['indent', 'triggerClass', 'triggerBySelf', 'unfoldWhenDragover', 'unfoldWhenDragoverDelay', 'draggingNodePositionMode', 'cloneWhenDrag', 'edgeScroll', 'edgeScrollTriggerMargin', 'edgeScrollSpeed', 'edgeScrollTriggerMode', 'edgeScrollSpecifiedContainerY', 'edgeScrollSpecifiedContainerY', 'rtl', 'preventTextSelection'].forEach(name => { + this.$watch(name, value => { _makeTreeDraggable_obj.options[name] = value; - _makeTreeDraggable_obj.optionsUpdated(); }); }); } }; -/* script */ -var __vue_script__$1 = script; -/* template */ - -/* style */ - -var __vue_inject_styles__$1 = undefined; -/* scoped */ - -var __vue_scope_id__$1 = undefined; -/* module identifier */ - -var __vue_module_identifier__$1 = undefined; -/* functional template */ - -var __vue_is_functional_template__$1 = undefined; -/* style inject */ - -/* style inject SSR */ - -/* style inject shadow dom */ - -var __vue_component__$1 = /*#__PURE__*/__vue_normalize__({}, __vue_inject_styles__$1, __vue_script__$1, __vue_scope_id__$1, __vue_is_functional_template__$1, __vue_module_identifier__$1, false, undefined, undefined, undefined); - exports.Check = check; -exports.Draggable = __vue_component__$1; +exports.Draggable = Draggable_vue; exports.Fold = fold; -exports.Tree = __vue_component__; +exports.Tree = Tree; exports.cloneTreeData = cloneTreeData; exports.foldAll = foldAll; exports.getPureTreeData = getPureTreeData; diff --git a/dist/he-tree-vue.css b/dist/he-tree-vue.css index eee9d28..1c19384 100644 --- a/dist/he-tree-vue.css +++ b/dist/he-tree-vue.css @@ -1,4 +1,3 @@ - .he-tree .tree-node{ border: 1px solid #ccc; margin-bottom: 5px; @@ -10,350 +9,8 @@ .he-tree--rtl{ direction: rtl; } - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -/* .he-tree .tree-placeholder{ -} */ +.he-tree .tree-placeholder{ +} .he-tree .tree-placeholder-node{ background: #ddf2f9; border: 1px dashed #00d9ff; @@ -361,4 +18,4 @@ } .he-tree .dragging .tree-node-back:hover{ background-color: inherit; -} +} \ No newline at end of file diff --git a/dist/he-tree-vue.esm.js b/dist/he-tree-vue.esm.js index 9606774..8c44984 100644 --- a/dist/he-tree-vue.esm.js +++ b/dist/he-tree-vue.esm.js @@ -1,17 +1,12 @@ /*! - * he-tree-vue v2.0.7-beta.1 + * he-tree-vue v3.1.2 * (c) phphe (https://github.com/phphe) * Homepage: https://he-tree-vue.phphe.com * Released under the MIT License. */ -import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray'; -import _defineProperty from '@babel/runtime/helpers/defineProperty'; -import { TreeData, randString, findParent, hasClass, createElementFromHTML, insertAfter, addClass, getOffset, getBoundingClientRect, elementsFromPoint, isDescendantOf, attachCache, removeEl, binarySearch, findNodeList, appendTo, insertBefore, prependTo, waitTime, iterateAll, resolveValueOrGettter, arrayWithoutEnd, arrayLast } from 'helper-js'; +import { createVNode } from 'vue'; +import { TreeData, randString, findParent, hasClass, createElementFromHTML, insertAfter, addClass, getOffset, getBoundingClientRect, elementsFromPoint, isDescendantOf, attachCache, removeEl, waitTime, binarySearch, findNodeList, appendTo, insertBefore, prependTo, iterateAll, resolveValueOrGettter, arrayWithoutEnd, arrayLast } from 'helper-js'; import { updatablePropsEvenUnbound, hookHelper } from 'vue-functions'; -import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs'; -import Vue from 'vue'; -import _regeneratorRuntime from '@babel/runtime/regenerator'; -import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator'; import draggableHelper from 'draggable-helper'; function cloneTreeData(treeData, opt) { @@ -21,9 +16,9 @@ function walkTreeData(treeData, handler, opt) { return new TreeData(treeData).walk(handler, opt); } function getPureTreeData(treeData) { - var opt = { - afterNodeCreated: function afterNodeCreated(newNode) { - Object.keys(newNode).forEach(function (key) { + const opt = { + afterNodeCreated: newNode => { + Object.keys(newNode).forEach(key => { if (key[0] === '$') { delete newNode[key]; } @@ -33,95 +28,76 @@ function getPureTreeData(treeData) { return cloneTreeData(treeData, opt); } -function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; } - -function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } - -var template = function template(h) { - var _this = this; - +const template = function () { // convert undefined to empty str - var noUndefined = function noUndefined(str) { - return str ? str : ''; - }; // tree tpl, to render recursively - - - var childrenListTpl = function childrenListTpl(nodes, parent, parentPath) { - var indentStyle = _defineProperty({}, !_this.rtl ? 'paddingLeft' : 'paddingRight', parentPath.length * _this.indent + 'px'); - - var branchTpl = function branchTpl(node, index) { - var path = [].concat(_toConsumableArray(parentPath), [index]); - var transitionComponent = _this.foldingTransition || 'transition'; - - var slotDefault = function slotDefault() { - var original = function original() { - if (_this.$scopedSlots.default) { - return _this.$scopedSlots.default({ - node: node, - index: index, - path: path, - tree: _this + const noUndefined = str => str ? str : ''; + // tree tpl, to render recursively + const childrenListTpl = (nodes, parent, parentPath) => { + const indentStyle = { + [!this.rtl ? 'paddingLeft' : 'paddingRight']: parentPath.length * this.indent + 'px' + }; + const branchTpl = (node, index) => { + const path = [...parentPath, index]; + const transitionComponent = this.foldingTransition || 'transition'; + const slotDefault = () => { + const original = () => { + if (this.$slots.default) { + return this.$slots.default({ + node, + index, + path, + tree: this }); - } else if (_this.$slots.default) { - return _this.$slots.default; } else { return node.text; } }; - - if (_this.overrideSlotDefault) { - return _this.overrideSlotDefault({ - node: node, - index: index, - path: path, - tree: _this + if (this.overrideSlotDefault) { + return this.overrideSlotDefault({ + node, + index, + path, + tree: this }, original); } else { return original(); } }; - - var nodebackStyle = indentStyle; - + let nodebackStyle = indentStyle; if (node.$nodeBackStyle) { - nodebackStyle = _objectSpread(_objectSpread({}, nodebackStyle), node.$nodeBackStyle); + nodebackStyle = { + ...nodebackStyle, + ...node.$nodeBackStyle + }; } - - return h("div", { - "class": "tree-branch ".concat(noUndefined(node.$branchClass), " ").concat(noUndefined(node.$hidden && 'he-tree--hidden')), + return createVNode("div", { + "class": `tree-branch ${noUndefined(node.$branchClass)} ${noUndefined(node.$hidden && 'he-tree--hidden')}`, "style": node.$branchStyle || {}, - "attrs": { - "data-tree-node-path": path.join(',') - } - }, [h("div", { - "class": "tree-node-back ".concat(noUndefined(node.$nodeBackClass)), + "data-tree-node-path": path.join(',') + }, [createVNode("div", { + "class": `tree-node-back ${noUndefined(node.$nodeBackClass)}`, "style": nodebackStyle || {} - }, [h("div", { - "class": "tree-node ".concat(noUndefined(node.$nodeClass)), + }, [createVNode("div", { + "class": `tree-node ${noUndefined(node.$nodeClass)}`, "style": node.$nodeStyle || {} - }, [slotDefault()])]), (node.children && node.children.length) > 0 && h(transitionComponent, { - "attrs": { - "name": _this.$props.foldingTransitionName - } - }, [!node.$folded && childrenListTpl(node.children, node, path)])]); + }, [slotDefault()])]), (node.children && node.children.length) > 0 && createVNode(transitionComponent, { + "name": this.$props.foldingTransitionName + }, { + default: () => [!node.$folded && childrenListTpl(node.children, node, path)] + })]); }; - - return h("div", { - "class": "tree-children ".concat(noUndefined(parent === _this.rootNode && 'tree-root'), " ").concat(noUndefined(parent.$childrenClass)), + return createVNode("div", { + "class": `tree-children ${noUndefined(parent === this.rootNode && 'tree-root')} ${noUndefined(parent.$childrenClass)}`, "style": parent.$childrenStyle || {} }, [nodes.map(branchTpl)]); }; - - return h("div", { - "class": "he-tree ".concat(this.treeClass, " ").concat(noUndefined(this.rtl && 'he-tree--rtl')), - "attrs": { - "data-tree-id": this.treeId - } + return createVNode("div", { + "class": `he-tree ${this.treeClass} ${noUndefined(this.rtl && 'he-tree--rtl')}`, + "data-tree-id": this.treeId }, [this.blockHeader && this.blockHeader(), childrenListTpl(this.rootNode.children, this.rootNode, []), this.blockFooter && this.blockFooter()]); }; - -var trees = {}; -var Tree = { +const trees = {}; +const Tree = { render: template, mixins: [updatablePropsEvenUnbound({ value: { @@ -138,77 +114,74 @@ var Tree = { type: Boolean }, rootNode: { - default: function _default(is) { - return {}; - } + default: is => ({}) } }, // components: {}, - data: function data() { + data() { return { - trees: trees, + trees, treeClass: '', - treeId: randString() + treeId: randString(), + // hooks of render + blockHeader: null, + blockFooter: null, + overrideSlotDefault: null }; }, // computed: {}, watch: { treeData: { immediate: true, - handler: function handler(treeData) { + handler(treeData) { this._TreeDataHelper = new TreeData(this.treeData); } } }, methods: { - iteratePath: function iteratePath(path, opt) { + iteratePath(path, opt) { return this._TreeDataHelper.iteratePath(path, opt); }, - getTreeVmByTreeEl: function getTreeVmByTreeEl(treeEl) { + getTreeVmByTreeEl(treeEl) { return this.trees[treeEl.getAttribute('data-tree-id')]; }, - getAllNodesByPath: function getAllNodesByPath(path) { + getAllNodesByPath(path) { return this._TreeDataHelper.getAllNodes(path); }, - getNodeByPath: function getNodeByPath(path) { + getNodeByPath(path) { return this._TreeDataHelper.getNode(path); }, - getPathByBranchEl: function getPathByBranchEl(branchEl) { - return branchEl.getAttribute('data-tree-node-path').split(',').map(function (v) { - return parseInt(v); - }); + getPathByBranchEl(branchEl) { + return branchEl.getAttribute('data-tree-node-path').split(',').map(v => parseInt(v)); }, - getBranchElByPath: function getBranchElByPath(path) { - return this.$el.querySelector("[data-tree-node-path='".concat(path.join(','), "']")); + getBranchElByPath(path) { + return this.$el.querySelector(`[data-tree-node-path='${path.join(',')}']`); }, - getNodeByBranchEl: function getNodeByBranchEl(branchEl) { + getNodeByBranchEl(branchEl) { return this.getNodeByPath(this.getPathByBranchEl(branchEl)); }, - getNodeParentByPath: function getNodeParentByPath(path) { + getNodeParentByPath(path) { return this._TreeDataHelper.getNodeParent(path); }, - removeNodeByPath: function removeNodeByPath(path) { + removeNodeByPath(path) { return this._TreeDataHelper.removeNode(path); }, - walkTreeData: function walkTreeData$1(handler, opt) { + walkTreeData(handler, opt) { return walkTreeData(this.treeData, handler, opt); }, - cloneTreeData: function cloneTreeData$1(opt) { + cloneTreeData(opt) { return cloneTreeData(this.treeData, opt); }, // return cloned new tree data without property witch starts with `$` - getPureTreeData: function getPureTreeData$1() { + getPureTreeData() { return getPureTreeData(this.treeData); } }, - created: function created() { - var _this2 = this; - + created() { // - var updateRootNode = function updateRootNode() { - _this2.$set(_this2.rootNode, 'children', _this2.treeData); + const updateRootNode = () => { + this.rootNode.children = this.treeData; }; - this.$watch('rootNode', updateRootNode, { immediate: true }); @@ -216,20 +189,17 @@ var Tree = { immediate: true }); }, - mounted: function mounted() { - var _this3 = this; - + mounted() { // this.treeId = randString(); - this.$set(this.trees, this.treeId, this); - this.$once('hook:beforeDestroy', function () { - _this3.$delete(_this3.trees, _this3.treeId); - }); + this.trees[this.treeId] = this; + }, + beforeUnmount() { + delete this.trees[this.treeId]; }, - // beforeDestroy() {}, // - mixPlugins: function mixPlugins(plugins) { - var MixedTree = { + mixPlugins(plugins) { + const MixedTree = { name: 'Tree', extends: Tree, mixins: plugins, @@ -239,41 +209,14 @@ var Tree = { } }; -/* script */ -var __vue_script__ = Tree; -/* template */ - -/* style */ - -var __vue_inject_styles__ = undefined; -/* scoped */ - -var __vue_scope_id__ = undefined; -/* module identifier */ - -var __vue_module_identifier__ = undefined; -/* functional template */ - -var __vue_is_functional_template__ = undefined; -/* style inject */ - -/* style inject SSR */ - -/* style inject shadow dom */ - -var __vue_component__ = /*#__PURE__*/__vue_normalize__({}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined); - -function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; } - -function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$1(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } function foldAll(treeData) { - walkTreeData(treeData, function (childNode) { - Vue.set(childNode, '$folded', true); + walkTreeData(treeData, childNode => { + childNode.$folded = true; }); } function unfoldAll(treeData) { - walkTreeData(treeData, function (childNode) { - Vue.set(childNode, '$folded', false); + walkTreeData(treeData, childNode => { + childNode.$folded = false; }); } var fold = { @@ -286,118 +229,93 @@ var fold = { type: Boolean } }, + emits: ['nodeFoldedChanged', 'node-folded-changed'], methods: { - fold: function fold(node, path) { + fold(node, path) { if (!node.$folded) { - this.$set(node, '$folded', true); + node['$folded'] = true; this.$emit('nodeFoldedChanged', node); + this.$emit('node-folded-changed', node); } }, - unfold: function unfold(node, path) { - var opt = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}; - opt = _objectSpread$1({ - foldOthers: false - }, opt); - + unfold(node, path, opt = {}) { + opt = { + foldOthers: false, + ...opt + }; if (opt.foldOthers) { this.foldAll(); } - if (node.$folded) { - this.$set(node, '$folded', false); + node['$folded'] = false; this.$emit('nodeFoldedChanged', node); - this.$emit('node-folded-changed', node); } }, - toggleFold: function toggleFold(node, path, opt) { + toggleFold(node, path, opt) { if (node.$folded) { this.unfold(node, path, opt); } else { this.fold(node, path, opt); } }, - foldAll: function foldAll() { - var _this = this; - - this.walkTreeData(function (childNode) { - _this.fold(childNode); + foldAll() { + this.walkTreeData(childNode => { + this.fold(childNode); }); }, - unfoldAll: function unfoldAll() { - var _this2 = this; - - this.walkTreeData(function (childNode) { - _this2.unfold(childNode, { + unfoldAll() { + this.walkTreeData(childNode => { + this.unfold(childNode, { unfoldParent: false }); }); } }, - mounted: function mounted() { + mounted() { if (this.foldAllAfterMounted) { this.foldAll(); } } }; -function _createForOfIteratorHelper(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; } - -function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); } - -function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; } var check = { props: {}, methods: { - afterCheckChanged: function afterCheckChanged(node, path) { - var _this = this; - + afterCheckChanged(node, path) { // update parent - var nodes = this.getAllNodesByPath(path); - var reversedParents = nodes.slice(0, nodes.length - 1); + const nodes = this.getAllNodesByPath(path); + const reversedParents = nodes.slice(0, nodes.length - 1); reversedParents.reverse(); - - var _iterator = _createForOfIteratorHelper(reversedParents), - _step; - - try { - for (_iterator.s(); !(_step = _iterator.n()).done;) { - var parent = _step.value; - this.$set(parent, '$checked', parent.children.every(function (child) { - return child.$checked; - })); - } // update children - - } catch (err) { - _iterator.e(err); - } finally { - _iterator.f(); + for (const parent of reversedParents) { + parent['$checked'] = parent.children.every(child => child.$checked); } - + // update children if (node.children && node.children.length > 0) { - walkTreeData(node.children, function (childNode) { - _this.$set(childNode, '$checked', node.$checked); + walkTreeData(node.children, childNode => { + childNode['$checked'] = node.$checked; }); } }, - check: function check(node, path) { - this.$set(node, '$checked', true); + check(node, path) { + node['$checked'] = true; this.afterCheckChanged(node, path); }, - uncheck: function uncheck(node, path) { - this.$set(node, '$checked', false); + uncheck(node, path) { + node['$checked'] = false; this.afterCheckChanged(node, path); }, - toggleCheck: function toggleCheck(node, path) { - this.$set(node, '$checked', !node.$checked); + toggleCheck(node, path) { + node['$checked'] = !node.$checked; this.afterCheckChanged(node, path); } } }; -function doDraggableDecision (_ref) { - var conditions = _ref.conditions, - doAction = _ref.doAction; - +// arg {options, event, store, opt, info, conditions, actions, doAction} +function doDraggableDecision ({ + conditions, + doAction +}) { // decision start ================================= if (conditions['no closest'] === true) { doAction('append to root'); @@ -543,27 +461,48 @@ function doDraggableDecision (_ref) { } } } - } // decision end ================================= - + } + // decision end ================================= } -function _createForOfIteratorHelper$1(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$1(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; } - -function _unsupportedIterableToArray$1(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray$1(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$1(o, minLen); } - -function _arrayLikeToArray$1(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; } - -function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; } - -function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$2(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } - -function makeTreeDraggable(treeEl) { - var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; - options = _objectSpread$2(_objectSpread$2({}, options), {}, { - treeEl: treeEl - }); - - var _draggableHelper = draggableHelper(treeEl, { +// in follow code, options belongs to makeTreeDraggable, opt belongs to draggableHelper +function makeTreeDraggable(treeEl, options = {}) { + options = { + // indent: 20, + // triggerClass: 'tree-node', + // triggerBySelf: false, + // unfoldWhenDragover + // unfoldWhenDragoverDelay + // draggingNodePositionMode + // getTriggerEl optional + // rootClass: 'tree-root', + // childrenClass: 'tree-children', + // branchClass: 'tree-branch', + // nodeClass: 'tree-node', + // nodeBackClass: 'tree-node-back', + // placeholderClass: 'tree-placeholder', + // placeholderNodeBackClass: 'tree-placeholder-node-back', + // placeholderNodeClass: 'tree-placeholder-node', + // draggingClass: 'dragging', + // placeholderId + // unfoldTargetNodeByEl + // getPathByBranchEl + // edgeScroll: false, + // edgeScrollTriggerMargin: 50, + // edgeScrollSpeed: 0.35, + // edgeScrollTriggerMode: 'top_left_corner', + // edgeScrol: 'top_left_corner', + // edgeScrollSpecifiedContainerX?: HTMLElement, + // edgeScrollSpecifiedContainerY?: HTMLElement, + // rtl: false + // preventTextSelection: boolean + ...options, + treeEl + }; + const { + destroy, + options: draggableHelperOptions + } = draggableHelper(treeEl, { triggerClassName: options.triggerClass, triggerBySelf: options.triggerBySelf, draggingClassName: options.draggingClass, @@ -577,76 +516,76 @@ function makeTreeDraggable(treeEl) { rtl: options.rtl, preventTextSelection: options.preventTextSelection, updateMovedElementStyleManually: true, - getMovedOrClonedElement: function getMovedOrClonedElement(directTriggerElement, store) { + getMovedOrClonedElement: (directTriggerElement, store) => { // find closest branch from parents - var el = findParent(store.triggerElement, function (el) { - return hasClass(el, options.branchClass); - }, { + const el = findParent(store.triggerElement, el => hasClass(el, options.branchClass), { withSelf: true }); return el; }, - beforeFirstMove: function beforeFirstMove(store, dhOptions) { + beforeFirstMove(store, dhOptions) { store.startTreeEl = treeEl; store.dragBranchEl = store.movedElement; store.startPath = options.getPathByBranchEl(store.movedOrClonedElement); - if (options.beforeFirstMove && options.beforeFirstMove(store, dhOptions) === false) { return false; } }, - beforeMove: function beforeMove(store, dhOptions) { - var updatePlaceholderIndent = function updatePlaceholderIndent() { + beforeMove: (store, dhOptions) => { + const updatePlaceholderIndent = () => { // set indent of placeholder - var placeholderPath = options.getPathByBranchEl(store.placeholder); - var placeholderNodeBack = store.placeholder.querySelector(".".concat(options.nodeBackClass)); - placeholderNodeBack.style[!options.rtl ? 'paddingLeft' : 'paddingRight'] = (placeholderPath.length - 1) * options.indent + 'px'; // remove tempChildren if empty - + const placeholderPath = options.getPathByBranchEl(store.placeholder); + const placeholderNodeBack = store.placeholder.querySelector(`.${options.nodeBackClass}`); + placeholderNodeBack.style[!options.rtl ? 'paddingLeft' : 'paddingRight'] = (placeholderPath.length - 1) * options.indent + 'px'; + // remove tempChildren if empty if (store.tempChildren.children.length === 0) { removeEl(store.tempChildren); } - }; // first move + }; + // first move // 第一次移动 - - if (store.movedCount === 0) { // create placeholder // 创建占位元素 - var placeholder = createElementFromHTML("\n
\n
\n
\n
\n
\n
\n ")); + const placeholder = createElementFromHTML(` +
+
+
+
+
+
+ `); insertAfter(placeholder, store.movedOrClonedElement); store.placeholder = placeholder; - options.afterPlaceholderCreated(store); // create a tree children el to use when can't get childrenEl - - var tempChildren = document.createElement('DIV'); + options.afterPlaceholderCreated(store); + // create a tree children el to use when can't get childrenEl + const tempChildren = document.createElement('DIV'); addClass(tempChildren, options.childrenClass); - store.tempChildren = tempChildren; // update placeholder indent. update moved element style - + store.tempChildren = tempChildren; + // update placeholder indent. update moved element style updatePlaceholderIndent(); - store.updateMovedElementStyle(); // skip first move + store.updateMovedElementStyle(); + // skip first move // 跳过第一次移动 - return; - } // - - - store.updateMovedElementStyle(); // - + } + // + store.updateMovedElementStyle(); + // store.oneMoveStore = {}; // life cycle: one move - - var movingEl = store.movedElement; // branch + const movingEl = store.movedElement; // branch // find closest branch and hovering tree - - var _tree; - - var movingNode = movingEl.querySelector(".".concat(options.nodeClass)); // movingNodeOf and movingNodeRect are not always real. when RTL, there 'x' is top right. when draggingNodePositionMode is mouse, there x and y are mouse position. So don't calc them with their width or height. + let tree; + const movingNode = movingEl.querySelector(`.${options.nodeClass}`); + // movingNodeOf and movingNodeRect are not always real. when RTL, there 'x' is top right. when draggingNodePositionMode is mouse, there x and y are mouse position. So don't calc them with their width or height. // movingNodeOf 和 movingNodeRect并非一直如字面意义是movingNode真实坐标. RTL时, x坐标是右上角. draggingNodePositionMode是mouse时, x和y是鼠标坐标. - - var movingNodeOf = getOffset(movingNode); - var movingNodeRect = getBoundingClientRect(movingNode); - + let movingNodeOf = getOffset(movingNode); + let movingNodeRect = getBoundingClientRect(movingNode); if (options.draggingNodePositionMode === 'mouse') { // use mouse position as dragging node position - var moveEvent = store.moveEvent; + const { + moveEvent + } = store; movingNodeOf = { x: moveEvent.pageX, y: moveEvent.pageY @@ -658,102 +597,69 @@ function makeTreeDraggable(treeEl) { } else if (options.rtl) { movingNodeOf.x += movingNode.offsetWidth; movingNodeRect.x += movingNode.offsetWidth; - } // find tree with elementsFromPoint - - - var found; - var firstElement; - - var _iterator = _createForOfIteratorHelper$1(elementsFromPoint(movingNodeRect.x, movingNodeRect.y)), - _step; - - try { - for (_iterator.s(); !(_step = _iterator.n()).done;) { - var itemEl = _step.value; - - if (!firstElement) { - firstElement = itemEl; - } - - if (hasClass(itemEl, options.treeClass)) { - found = itemEl; - break; - } - } // check if the found element is covered by other elements - - } catch (err) { - _iterator.e(err); - } finally { - _iterator.f(); } - + // find tree with elementsFromPoint + let found; + let firstElement; + for (const itemEl of elementsFromPoint(movingNodeRect.x, movingNodeRect.y)) { + if (!firstElement) { + firstElement = itemEl; + } + if (hasClass(itemEl, options.treeClass)) { + found = itemEl; + break; + } + } + // check if the found element is covered by other elements if (firstElement !== found && !isDescendantOf(firstElement, found)) { found = null; } - - _tree = found; - - if (!_tree) { + tree = found; + if (!tree) { // out of tree or tree is covered by other elements return; - } // check if target tree right - - - if (options.filterTargetTree(_tree, store, dhOptions) === false) { + } + // check if target tree right + if (options.filterTargetTree(tree, store, dhOptions) === false) { return; } - - store.targetTreeEl = _tree; // info ======================================== + store.targetTreeEl = tree; + // info ======================================== // life cycle: one move - - var info = { - tree: function tree() { - return _tree; - }, - root: function root() { - return info.tree.querySelector(".".concat(options.childrenClass)); - }, - closestNode: function closestNode() { - var nodes = []; // all visible nodes sort by y - - var walkToGetNodes = function walkToGetNodes(branch) { + const info = { + tree: () => tree, + root: () => info.tree.querySelector(`.${options.childrenClass}`), + closestNode: () => { + const nodes = []; // all visible nodes sort by y + const walkToGetNodes = branch => { // if (branch !== info.tree) { - var node = branch.querySelector(".".concat(options.nodeClass)); - + const node = branch.querySelector(`.${options.nodeClass}`); if (node && !isElementHidden(node)) { nodes.push(node); } - } // - - - var childrenEl = branch.querySelector(".".concat(options.childrenClass)); - + } + // + const childrenEl = branch.querySelector(`.${options.childrenClass}`); if (childrenEl) { - for (var i = 0; i < childrenEl.children.length; i++) { - var child = childrenEl.children[i]; - + for (let i = 0; i < childrenEl.children.length; i++) { + const child = childrenEl.children[i]; if (child !== movingEl && hasClass(child, options.branchClass)) { walkToGetNodes(child); } } } }; - - walkToGetNodes(info.tree); // - + walkToGetNodes(info.tree); + // if (nodes.length === 0) { return; - } // - - - var found; - var t = binarySearch(nodes, function (node) { - return getOffset(node).y - movingNodeOf.y; - }, { + } + // + let found; + const t = binarySearch(nodes, node => getOffset(node).y - movingNodeOf.y, { returnNearestIfNoHit: true }); - if (t.hit) { found = t.value; } else { @@ -763,75 +669,55 @@ function makeTreeDraggable(treeEl) { found = t.value; } } - return found; }, - closestNodeOffset: function closestNodeOffset() { - return getOffset(info.closestNode); - }, - closestBranch: function closestBranch() { - return findParent(info.closestNode, function (el) { - return hasClass(el, options.branchClass); - }); - }, - closestNext: function closestNext() { - var next = info.closestBranch.nextSibling; - + closestNodeOffset: () => getOffset(info.closestNode), + closestBranch: () => findParent(info.closestNode, el => hasClass(el, options.branchClass)), + closestNext: () => { + let next = info.closestBranch.nextSibling; while (next) { if (next !== movingEl && hasClass(next, options.branchClass) && !isElementHidden(next)) { return next; } - next = next.nextSibling; } }, - closestPrev: function closestPrev() { - var prev = info.closestBranch.previousSibling; - + closestPrev: () => { + let prev = info.closestBranch.previousSibling; while (prev) { if (prev !== movingEl && hasClass(prev, options.branchClass) && !isElementHidden(prev)) { return prev; } - prev = prev.previousSibling; } }, - aboveBranch: function aboveBranch() { + aboveBranch: () => { // find above from branch to root // closestBranch must be placeholder if (info.closestBranch !== store.placeholder) { return; } - if (conditions['closest has next']) { return; - } // find placeholder prev or parent - - - var cur = info.closestBranch; - var prev = cur.previousSibling; - var found; - + } + // find placeholder prev or parent + let cur = info.closestBranch; + let prev = cur.previousSibling; + let found; while (prev) { if (prev !== movingEl && hasClass(prev, options.branchClass) && !isElementHidden(prev)) { cur = prev; found = true; break; } - prev = prev.previousSibling; } - if (!found) { - cur = findParent(cur, function (el) { - return hasClass(el, options.branchClass); - }); - } // - - + cur = findParent(cur, el => hasClass(el, options.branchClass)); + } + // while (cur) { - var curNode = cur.querySelector(".".concat(options.nodeClass)); - + const curNode = cur.querySelector(`.${options.nodeClass}`); if (!options.rtl) { if (getOffset(curNode).x <= movingNodeOf.x) { break; @@ -841,671 +727,308 @@ function makeTreeDraggable(treeEl) { break; } } - - var hasNextBranch = void 0; - var t = cur.nextSibling; - + let hasNextBranch; + let t = cur.nextSibling; while (t) { if (t !== movingEl && t !== store.placeholder && hasClass(t, options.branchClass) && !isElementHidden(t)) { hasNextBranch = true; break; } - t = t.nextSibling; } - if (hasNextBranch) { break; } - - var parent = findParent(cur, function (el) { - return hasClass(el, options.branchClass); - }); - + const parent = findParent(cur, el => hasClass(el, options.branchClass)); if (!parent) { break; } - cur = parent; } - return cur; } - }; // conditions ======================================== + }; + // conditions ======================================== // life cycle: one move - - var conditions = { - 'no closest': function noClosest() { - return !info.closestNode; - }, - 'closest is top': function closestIsTop() { - return info.closestBranch === findNodeList(info.root.children, function (el) { - return el !== movingEl && !isElementHidden(el); - }); - }, - 'closest is top excluding placeholder': function closestIsTopExcludingPlaceholder() { - return info.closestBranch === findNodeList(info.root.children, function (el) { - return el !== movingEl && el !== store.placeholder && !isElementHidden(el); - }); - }, - 'on closest middle': function onClosestMiddle() { - return movingNodeOf.y < info.closestNodeOffset.y + info.closestNode.offsetHeight / 2; - }, - 'at closest indent right': function atClosestIndentRight() { - return movingNodeOf.x > info.closestNodeOffset.x + options.indent; - }, - 'at closest left': function atClosestLeft() { - return movingNodeOf.x < info.closestNodeOffset.x; - }, - 'closest is placeholder': function closestIsPlaceholder() { - return info.closestBranch === store.placeholder; - }, - 'no aboveBranch': function noAboveBranch() { - return !info.aboveBranch; - }, - 'closest has next': function closestHasNext() { - return info.closestNext; - }, - 'closest has prev': function closestHasPrev() { - return info.closestPrev; - }, - 'closest has children excluding placeholder movingEl': function closestHasChildrenExcludingPlaceholderMovingEl() { - var childrenEl = info.closestBranch.querySelector(".".concat(options.childrenClass)); - + const conditions = { + 'no closest': () => !info.closestNode, + 'closest is top': () => info.closestBranch === findNodeList(info.root.children, el => el !== movingEl && !isElementHidden(el)), + 'closest is top excluding placeholder': () => info.closestBranch === findNodeList(info.root.children, el => el !== movingEl && el !== store.placeholder && !isElementHidden(el)), + 'on closest middle': () => movingNodeOf.y < info.closestNodeOffset.y + info.closestNode.offsetHeight / 2, + 'at closest indent right': () => movingNodeOf.x > info.closestNodeOffset.x + options.indent, + 'at closest left': () => movingNodeOf.x < info.closestNodeOffset.x, + 'closest is placeholder': () => info.closestBranch === store.placeholder, + 'no aboveBranch': () => !info.aboveBranch, + 'closest has next': () => info.closestNext, + 'closest has prev': () => info.closestPrev, + 'closest has children excluding placeholder movingEl': () => { + const childrenEl = info.closestBranch.querySelector(`.${options.childrenClass}`); if (childrenEl) { - return findNodeList(childrenEl.children, function (el) { - return el !== movingEl && el !== store.placeholder && !isElementHidden(el); - }); + return findNodeList(childrenEl.children, el => el !== movingEl && el !== store.placeholder && !isElementHidden(el)); } } - }; // fix for rtl - + }; + // fix for rtl if (options.rtl) { Object.assign(conditions, { - 'at closest indent right': function atClosestIndentRight() { - return movingNodeOf.x < info.closestNodeOffset.x + info.closestNode.offsetWidth - options.indent; - }, + 'at closest indent right': () => movingNodeOf.x < info.closestNodeOffset.x + info.closestNode.offsetWidth - options.indent, // at indent left - 'at closest left': function atClosestLeft() { - return movingNodeOf.x > info.closestNodeOffset.x + info.closestNode.offsetWidth; - } // at right - + 'at closest left': () => movingNodeOf.x > info.closestNodeOffset.x + info.closestNode.offsetWidth // at right }); - } // convert conditions result to Boolean - - - Object.keys(conditions).forEach(function (key) { - var old = conditions[key]; - + } + // convert conditions result to Boolean + Object.keys(conditions).forEach(key => { + const old = conditions[key]; conditions[key] = function () { return Boolean(old.call(this)); }; - }); // - + }); + // attachCache(info, info); attachCache(conditions, conditions); store.oneMoveStore.info = info; - store.oneMoveStore.conditions = conditions; // actions start ======================================== - - var doAction = function doAction(name) { - for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { - args[_key - 1] = arguments[_key]; - } - + store.oneMoveStore.conditions = conditions; + // actions start ======================================== + const doAction = (name, ...args) => { if (!store._doActionQueue) { store._doActionQueue = Promise.resolve(); } - - var queue = store._doActionQueue; - store._doActionQueue = queue.then( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() { - var actionRecords, action, r; - return _regeneratorRuntime.wrap(function _callee$(_context) { - while (1) { - switch (_context.prev = _context.next) { - case 0: - // record tried actions in one move - if (!store.oneMoveStore.actionRecords) { - store.oneMoveStore.actionRecords = []; - } - - actionRecords = store.oneMoveStore.actionRecords; // - - action = actions[name]; - r = action.apply(void 0, args); - actionRecords.push(name); - _context.next = 7; - return r; - - case 7: - updatePlaceholderIndent(); - - case 8: - case "end": - return _context.stop(); - } - } - }, _callee); - }))); + const queue = store._doActionQueue; + store._doActionQueue = queue.then(async () => { + // record tried actions in one move + if (!store.oneMoveStore.actionRecords) { + store.oneMoveStore.actionRecords = []; + } + const { + actionRecords + } = store.oneMoveStore; + // + const action = actions[name]; + const r = action(...args); + actionRecords.push(name); + await r; + updatePlaceholderIndent(); + }); }; - - var actions = { - 'nothing': function nothing() { - return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() { - return _regeneratorRuntime.wrap(function _callee2$(_context2) { - while (1) { - switch (_context2.prev = _context2.next) { - case 0: - case "end": - return _context2.stop(); - } - } - }, _callee2); - }))(); - }, + const actions = { + async 'nothing'() {}, // do nothing - 'append to root': function appendToRoot() { - return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() { - return _regeneratorRuntime.wrap(function _callee3$(_context3) { - while (1) { - switch (_context3.prev = _context3.next) { - case 0: - // no closest branch, just append to root - if (options.isTargetTreeRootDroppable(store)) { - appendTo(store.placeholder, info.root); - } - - case 1: - case "end": - return _context3.stop(); - } - } - }, _callee3); - }))(); + async 'append to root'() { + // no closest branch, just append to root + if (options.isTargetTreeRootDroppable(store)) { + appendTo(store.placeholder, info.root); + } }, - 'insert before': function insertBefore$1() { - return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() { - return _regeneratorRuntime.wrap(function _callee4$(_context4) { - while (1) { - switch (_context4.prev = _context4.next) { - case 0: - if (!options.isNodeParentDroppable(info.closestBranch, store.targetTreeEl)) { - _context4.next = 4; - break; - } - - insertBefore(store.placeholder, info.closestBranch); - _context4.next = 5; - break; - - case 4: - return _context4.abrupt("return", secondCase(getParentBranchByEl(info.closestBranch))); - - case 5: - case "end": - return _context4.stop(); - } - } - }, _callee4); - }))(); + async 'insert before'() { + if (options.isNodeParentDroppable(info.closestBranch, store.targetTreeEl)) { + insertBefore(store.placeholder, info.closestBranch); + } else { + return secondCase(getParentBranchByEl(info.closestBranch)); + } }, - 'insert after': function insertAfter$1() { - var _arguments = arguments; - return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() { - var branch, moved, isFirstTriedAction; - return _regeneratorRuntime.wrap(function _callee5$(_context5) { - while (1) { - switch (_context5.prev = _context5.next) { - case 0: - branch = _arguments.length > 0 && _arguments[0] !== undefined ? _arguments[0] : info.closestBranch; - - if (!options.isNodeParentDroppable(branch, store.targetTreeEl)) { - _context5.next = 5; - break; - } - - insertAfter(store.placeholder, branch); - _context5.next = 11; - break; - - case 5: - _context5.next = 7; - return secondCase(getParentBranchByEl(branch)); - - case 7: - moved = _context5.sent; - isFirstTriedAction = !store.oneMoveStore.actionRecords || store.oneMoveStore.actionRecords.length === 1; - - if (!(!moved && isFirstTriedAction)) { - _context5.next = 11; - break; - } - - return _context5.abrupt("return", thirdCase(branch)); - - case 11: - case "end": - return _context5.stop(); - } - } - }, _callee5); - }))(); + async 'insert after'(branch = info.closestBranch) { + if (options.isNodeParentDroppable(branch, store.targetTreeEl)) { + insertAfter(store.placeholder, branch); + } else { + const moved = await secondCase(getParentBranchByEl(branch)); + const isFirstTriedAction = !store.oneMoveStore.actionRecords || store.oneMoveStore.actionRecords.length === 1; + if (!moved && isFirstTriedAction) { + return thirdCase(branch); + } + } }, - prepend: function prepend() { - return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6() { - return _regeneratorRuntime.wrap(function _callee6$(_context6) { - while (1) { - switch (_context6.prev = _context6.next) { - case 0: - if (!(info.closestBranch === store.placeholder)) { - _context6.next = 2; - break; - } - - return _context6.abrupt("return"); - - case 2: - if (!(options.ifNodeFolded(info.closestBranch, store) && !options.unfoldWhenDragover)) { - _context6.next = 6; - break; - } - - return _context6.abrupt("return", doAction('insert after', info.closestBranch)); - - case 6: - if (!options.isNodeDroppable(info.closestBranch, store.targetTreeEl)) { - _context6.next = 11; - break; - } - - _context6.next = 9; - return tryUnfoldAndPrepend(info.closestBranch); - - case 9: - _context6.next = 12; - break; - - case 11: - return _context6.abrupt("return", secondCase(info.closestBranch)); - - case 12: - case "end": - return _context6.stop(); - } - } - }, _callee6); - }))(); + async prepend() { + if (info.closestBranch === store.placeholder) { + return; + } + if (options.ifNodeFolded(info.closestBranch, store) && !options.unfoldWhenDragover) { + return doAction('insert after', info.closestBranch); + } else { + if (options.isNodeDroppable(info.closestBranch, store.targetTreeEl)) { + await tryUnfoldAndPrepend(info.closestBranch); + } else { + return secondCase(info.closestBranch); + } + } }, - 'after above': function afterAbove() { - return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7() { - return _regeneratorRuntime.wrap(function _callee7$(_context7) { - while (1) { - switch (_context7.prev = _context7.next) { - case 0: - if (!options.isNodeParentDroppable(info.aboveBranch, store.targetTreeEl)) { - _context7.next = 4; - break; - } - - insertAfter(store.placeholder, info.aboveBranch); - _context7.next = 5; - break; - - case 4: - return _context7.abrupt("return", secondCase(getParentBranchByEl(info.aboveBranch))); - - case 5: - case "end": - return _context7.stop(); - } - } - }, _callee7); - }))(); + async 'after above'() { + if (options.isNodeParentDroppable(info.aboveBranch, store.targetTreeEl)) { + insertAfter(store.placeholder, info.aboveBranch); + } else { + return secondCase(getParentBranchByEl(info.aboveBranch)); + } }, - 'append to prev': function appendToPrev() { - return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee8() { - var childrenEl; - return _regeneratorRuntime.wrap(function _callee8$(_context8) { - while (1) { - switch (_context8.prev = _context8.next) { - case 0: - if (!(info.closestPrev === store.placeholder)) { - _context8.next = 2; - break; - } - - return _context8.abrupt("return"); - - case 2: - if (!options.ifNodeFolded(info.closestPrev, store)) { - _context8.next = 6; - break; - } - - return _context8.abrupt("return", doAction('insert after', info.closestPrev)); - - case 6: - if (!options.isNodeDroppable(info.closestPrev, store.targetTreeEl)) { - _context8.next = 13; - break; - } - - _context8.next = 9; - return unfoldAndGetChildrenEl(info.closestPrev); - - case 9: - childrenEl = _context8.sent; - appendTo(store.placeholder, childrenEl); - _context8.next = 14; - break; - - case 13: - return _context8.abrupt("return", secondCase(info.closestPrev)); - - case 14: - case "end": - return _context8.stop(); - } - } - }, _callee8); - }))(); + async 'append to prev'() { + if (info.closestPrev === store.placeholder) { + return; + } + if (options.ifNodeFolded(info.closestPrev, store)) { + return doAction('insert after', info.closestPrev); + } else { + if (options.isNodeDroppable(info.closestPrev, store.targetTreeEl)) { + const childrenEl = await unfoldAndGetChildrenEl(info.closestPrev); + appendTo(store.placeholder, childrenEl); + } else { + return secondCase(info.closestPrev); + } + } } - }; // second case for actions, when target position not droppable + }; + // second case for actions, when target position not droppable // return true if moved - - var secondCase = /*#__PURE__*/function () { - var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee9(branchEl) { - var targetEl; - return _regeneratorRuntime.wrap(function _callee9$(_context9) { - while (1) { - switch (_context9.prev = _context9.next) { - case 0: - if (!branchEl) { - _context9.next = 5; - break; - } - - targetEl = options._findClosestDroppablePosition(branchEl, store.targetTreeEl); - - if (!targetEl) { - _context9.next = 5; - break; - } - - insertAfter(store.placeholder, targetEl); - return _context9.abrupt("return", true); - - case 5: - case "end": - return _context9.stop(); - } - } - }, _callee9); - })); - - return function secondCase(_x) { - return _ref2.apply(this, arguments); - }; - }(); // when action is after, first case and second case invalid, try prepend + const secondCase = async branchEl => { + if (branchEl) { + const targetEl = options._findClosestDroppablePosition(branchEl, store.targetTreeEl); + if (targetEl) { + insertAfter(store.placeholder, targetEl); + return true; + } + } + }; + // when action is after, first case and second case invalid, try prepend // 当操作是'after', 第一种第二种情况无效时, 尝试prepend - - - var thirdCase = /*#__PURE__*/function () { - var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee10(branchEl) { - return _regeneratorRuntime.wrap(function _callee10$(_context10) { - while (1) { - switch (_context10.prev = _context10.next) { - case 0: - if (!(!options.ifNodeFolded(branchEl, store) && options.isNodeDroppable(branchEl, store.targetTreeEl))) { - _context10.next = 3; - break; - } - - _context10.next = 3; - return tryUnfoldAndPrepend(branchEl); - - case 3: - case "end": - return _context10.stop(); - } - } - }, _callee10); - })); - - return function thirdCase(_x2) { - return _ref3.apply(this, arguments); - }; - }(); - - var unfoldAndGetChildrenEl = /*#__PURE__*/function () { - var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee11(branch) { - var childrenEl; - return _regeneratorRuntime.wrap(function _callee11$(_context11) { - while (1) { - switch (_context11.prev = _context11.next) { - case 0: - _context11.next = 2; - return options.unfoldTargetNodeByEl(branch, store); - - case 2: - childrenEl = branch.querySelector(".".concat(options.childrenClass)); - - if (!childrenEl) { - childrenEl = store.tempChildren; - appendTo(childrenEl, branch); - } - - return _context11.abrupt("return", childrenEl); - - case 5: - case "end": - return _context11.stop(); - } - } - }, _callee11); - })); - - return function unfoldAndGetChildrenEl(_x3) { - return _ref4.apply(this, arguments); + const thirdCase = async branchEl => { + // the third case + if (!options.ifNodeFolded(branchEl, store) && options.isNodeDroppable(branchEl, store.targetTreeEl)) { + await tryUnfoldAndPrepend(branchEl); + } + }; + const unfoldAndGetChildrenEl = async branch => { + await options.unfoldTargetNodeByEl(branch, store); + let childrenEl = branch.querySelector(`.${options.childrenClass}`); + if (!childrenEl) { + childrenEl = store.tempChildren; + appendTo(childrenEl, branch); + } + return childrenEl; + }; + const tryUnfoldAndPrepend = async branchEl => { + const func = async () => { + const childrenEl = await unfoldAndGetChildrenEl(branchEl); + prependTo(store.placeholder, childrenEl); }; - }(); - - var tryUnfoldAndPrepend = /*#__PURE__*/function () { - var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee13(branchEl) { - var func, oneMoveStore; - return _regeneratorRuntime.wrap(function _callee13$(_context13) { - while (1) { - switch (_context13.prev = _context13.next) { - case 0: - func = /*#__PURE__*/function () { - var _ref6 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee12() { - var childrenEl; - return _regeneratorRuntime.wrap(function _callee12$(_context12) { - while (1) { - switch (_context12.prev = _context12.next) { - case 0: - _context12.next = 2; - return unfoldAndGetChildrenEl(branchEl); - - case 2: - childrenEl = _context12.sent; - prependTo(store.placeholder, childrenEl); - - case 4: - case "end": - return _context12.stop(); - } - } - }, _callee12); - })); - - return function func() { - return _ref6.apply(this, arguments); - }; - }(); - - if (!options.ifNodeFolded(branchEl, store)) { - _context13.next = 6; - break; - } - - // delay if node folded - oneMoveStore = store.oneMoveStore; - setTimeout(function () { - // check if expired - if (oneMoveStore === store.oneMoveStore) { - func(); - } - }, options.unfoldWhenDragoverDelay); - _context13.next = 8; - break; - - case 6: - _context13.next = 8; - return func(); - - case 8: - case "end": - return _context13.stop(); - } + if (options.ifNodeFolded(branchEl, store)) { + // delay if node folded + let oneMoveStore = store.oneMoveStore; + setTimeout(() => { + // check if expired + if (oneMoveStore === store.oneMoveStore) { + func(); } - }, _callee13); - })); - - return function tryUnfoldAndPrepend(_x4) { - return _ref5.apply(this, arguments); - }; - }(); // actions end ======================================== - - + }, options.unfoldWhenDragoverDelay); + } else { + await func(); + } + }; + // actions end ======================================== doDraggableDecision({ - options: options, + options, event: store.moveEvent, - store: store, + store, opt: dhOptions, - info: info, - conditions: conditions, - actions: actions, - doAction: doAction + info, + conditions, + actions, + doAction }); }, - afterMove: function afterMove(store, dhOptions) { + afterMove: (store, dhOptions) => { options.afterMove && options.afterMove(store, dhOptions); }, - beforeDrop: function () { - var _beforeDrop = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee14(store, dhOptions) { - var endEvent, movingEl, placeholder, tempChildren, movedCount, targetTreeEl, startTreeEl, maskTree, maskTree2, pathChanged, isPathChanged; - return _regeneratorRuntime.wrap(function _callee14$(_context14) { - while (1) { - switch (_context14.prev = _context14.next) { - case 0: - isPathChanged = function _isPathChanged() { - var startTree = store.startTree, - targetTree = store.targetTree, - startPath = store.startPath, - targetPath = store.targetPath; - return startTree !== targetTree || startPath.toString() !== targetPath.toString(); - }; - - endEvent = store.endEvent; - movingEl = store.movedElement; // branch - - placeholder = store.placeholder, tempChildren = store.tempChildren, movedCount = store.movedCount, targetTreeEl = store.targetTreeEl, startTreeEl = store.startTreeEl; // use mask tree to avoid flick caused by DOM update in short time - // 复制 targetTreeEl 作为遮罩, 避免短时间内更新DOM引起的闪烁 - - if (targetTreeEl) { - // No targetTreeEl mean no valid move. - // targetTreeEl不存在意味着没有有效移动. - // create mask tree - maskTree = targetTreeEl.cloneNode(true); - targetTreeEl.style.display = 'none'; - insertAfter(maskTree, targetTreeEl); - - if (startTreeEl !== targetTreeEl) { - maskTree2 = startTreeEl.cloneNode(true); - startTreeEl.style.display = 'none'; - insertAfter(maskTree2, startTreeEl); - } // - - - store.targetPath = options.getPathByBranchEl(placeholder); - pathChanged = isPathChanged(); - store.targetPathNotEqualToStartPath = pathChanged; - store.pathChangePrevented = false; - - if (options.beforeDrop && options.beforeDrop(pathChanged, store, dhOptions) === false) { - pathChanged = false; - store.pathChangePrevented = false; - } - - store.pathChanged = pathChanged; - } // destroy placeholder and tempChildren - - - removeEl(placeholder); - - if (tempChildren) { - removeEl(tempChildren); - } - - store.updateMovedElementStyle(); // - - _context14.next = 10; - return options.afterDrop(store, dhOptions); - - case 10: - if (!maskTree) { - _context14.next = 16; - break; - } - - _context14.next = 13; - return waitTime(30); - - case 13: - removeEl(maskTree); - targetTreeEl.style.display = 'block'; - - if (maskTree2) { - removeEl(maskTree2); - startTreeEl.style.display = 'block'; - } - - case 16: - case "end": - return _context14.stop(); + beforeDrop: async (store, dhOptions) => { + const movingEl = store.movedElement; // branch + const { + placeholder, + tempChildren, + movedCount, + targetTreeEl, + startTreeEl + } = store; + // use mask tree to avoid flick caused by DOM update in short time + // 复制 targetTreeEl 作为遮罩, 避免短时间内更新DOM引起的闪烁 + let maskTree, maskTree2; + if (targetTreeEl) { + // No targetTreeEl mean no valid move. + // targetTreeEl不存在意味着没有有效移动. + + // create mask tree + maskTree = targetTreeEl.cloneNode(true); + targetTreeEl.style.display = 'none'; + insertAfter(maskTree, targetTreeEl); + if (startTreeEl !== targetTreeEl) { + maskTree2 = startTreeEl.cloneNode(true); + startTreeEl.style.display = 'none'; + insertAfter(maskTree2, startTreeEl); + } + // + store.targetPath = options.getPathByBranchEl(placeholder); + let pathChanged = isPathChanged(); + store.targetPathNotEqualToStartPath = pathChanged; + store.pathChangePrevented = false; + if (options.beforeDrop && options.beforeDrop(pathChanged, store, dhOptions) === false) { + pathChanged = false; + store.pathChangePrevented = false; + } + store.pathChanged = pathChanged; + } + // destroy placeholder and tempChildren + removeEl(placeholder); + if (tempChildren) { + removeEl(tempChildren); + } + store.updateMovedElementStyle(); + // + await options.afterDrop(store, dhOptions); + // remove mask tree + if (maskTree) { + await waitTime(30); + removeEl(maskTree); + targetTreeEl.style.display = 'block'; + if (maskTree2) { + removeEl(maskTree2); + startTreeEl.style.display = 'block'; + } + } + // + function isPathChanged() { + const { + startTree, + targetTree, + startPath, + targetPath + } = store; + if (startTree === targetTree && startPath.length === targetPath.length) { + if (startPath.toString() === targetPath.toString()) { + return false; + } else { + // downward same-level move, the end of targetPath is 1 more than real value + // 同级向下移动时, targetPath的末位比真实值大1 + const t = startPath.slice(0); + t[t.length - 1]++; + if (t.toString() === targetPath.toString()) { + return false; } } - }, _callee14); - })); - - function beforeDrop(_x5, _x6) { - return _beforeDrop.apply(this, arguments); + } + return true; } - - return beforeDrop; - }() - }), - destroy = _draggableHelper.destroy, - draggableHelperOptions = _draggableHelper.options; - + } + }); return { - destroy: destroy, - options: options, - optionsUpdated: optionsUpdated + destroy, + options, + optionsUpdated }; - function getParentBranchByEl(el) { - return findParent(el, function (el) { + return findParent(el, el => { if (hasClass(el, options.branchClass)) { return true; } - if (hasClass(el, options.rootClass)) { return 'break'; } }); } - function optionsUpdated() { Object.assign(draggableHelperOptions, { triggerClassName: options.triggerClass, @@ -1523,18 +1046,12 @@ function makeTreeDraggable(treeEl) { }); } } - function isElementHidden(el) { return el.offsetWidth === 0 && el.offsetHeight === 0; } -function _createForOfIteratorHelper$2(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$2(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; } - -function _unsupportedIterableToArray$2(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray$2(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$2(o, minLen); } - -function _arrayLikeToArray$2(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; } -var treesStore = {}; -var script = { +const treesStore = {}; +var Draggable_vue = { props: { triggerClass: { type: [String, Array], @@ -1602,172 +1119,132 @@ var script = { default: true } }, + emits: ['afterPlaceholderCreated', 'after-placeholder-created', 'before-first-move', 'drag', 'he-tree-drag', 'after-move', 'he-tree-before-drop', 'input', 'change', 'drop', 'he-tree-drop'], // components: {}, - data: function data() { + data() { return { - treesStore: treesStore + treesStore }; }, // computed: {}, // watch: {}, methods: { - _Draggable_unfoldTargetNodeByEl: function _Draggable_unfoldTargetNodeByEl(branchEl, store) { - var targetTree = store.targetTree; - var path = targetTree.getPathByBranchEl(branchEl); - var node = targetTree.getNodeByPath(path); + _Draggable_unfoldTargetNodeByEl(branchEl, store) { + const { + targetTree + } = store; + const path = targetTree.getPathByBranchEl(branchEl); + const node = targetTree.getNodeByPath(path); targetTree.unfold && targetTree.unfold(node, path); - return new Promise(function (resolve, reject) { - targetTree.$nextTick(function () { + return new Promise((resolve, reject) => { + targetTree.$nextTick(() => { resolve(); }); }); }, - isNodeDraggable: function isNodeDraggable(node, path) { - var store = this.treesStore.store; - var allNodes = this.getAllNodesByPath(path); + isNodeDraggable(node, path) { + const { + store + } = this.treesStore; + const allNodes = this.getAllNodesByPath(path); allNodes.unshift(this.rootNode); - - var _iterator = _createForOfIteratorHelper$2(iterateAll(allNodes, { + for (const { + value: node, + index + } of iterateAll(allNodes, { reverse: true - })), - _step; - - try { - for (_iterator.s(); !(_step = _iterator.n()).done;) { - var _step$value = _step.value, - _node = _step$value.value, - index = _step$value.index; - var currentPath = path.slice(0, index + 1); - var draggableOpt = _node.$draggable !== undefined ? _node.$draggable : this.eachDraggable; - var draggable = resolveValueOrGettter(draggableOpt, [currentPath, this, store]); - - if (draggable === undefined) { - continue; - } else { - return draggable; - } + })) { + const currentPath = path.slice(0, index + 1); + const draggableOpt = node.$draggable !== undefined ? node.$draggable : this.eachDraggable; + const draggable = resolveValueOrGettter(draggableOpt, [currentPath, this, store]); + if (draggable === undefined) { + continue; + } else { + return draggable; } - } catch (err) { - _iterator.e(err); - } finally { - _iterator.f(); } - return true; }, - isNodeDroppable: function isNodeDroppable(node, path) { - var store = this.treesStore.store; - var allNodes = this.getAllNodesByPath(path); + isNodeDroppable(node, path) { + const { + store + } = this.treesStore; + const allNodes = this.getAllNodesByPath(path); allNodes.unshift(this.rootNode); - var droppableFinal, resolved; - - var _iterator2 = _createForOfIteratorHelper$2(iterateAll(allNodes, { + let droppableFinal, resolved; + for (const { + value: node, + index + } of iterateAll(allNodes, { reverse: true - })), - _step2; - - try { - for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) { - var _step2$value = _step2.value, - _node2 = _step2$value.value, - index = _step2$value.index; - var currentPath = path.slice(0, index + 1); - var droppableOpt = _node2.$droppable !== undefined ? _node2.$droppable : this.eachDroppable; - var droppable = resolveValueOrGettter(droppableOpt, [currentPath, this, store]); - - if (droppable === undefined) { - continue; - } else { - droppableFinal = droppable; - resolved = true; - break; - } + })) { + const currentPath = path.slice(0, index + 1); + const droppableOpt = node.$droppable !== undefined ? node.$droppable : this.eachDroppable; + const droppable = resolveValueOrGettter(droppableOpt, [currentPath, this, store]); + if (droppable === undefined) { + continue; + } else { + droppableFinal = droppable; + resolved = true; + break; } - } catch (err) { - _iterator2.e(err); - } finally { - _iterator2.f(); } - if (!resolved) { droppableFinal = true; } - if (this._internal_hook_isNodeDroppable) { return this._internal_hook_isNodeDroppable({ - droppableFinal: droppableFinal, - node: node, - path: path, - store: store + droppableFinal, + node, + path, + store }); } - return droppableFinal; }, // override - getPathByBranchEl: function getPathByBranchEl(branchEl) { - var getAttrPath = function getAttrPath(el) { - var pathStr = el.getAttribute('data-tree-node-path'); - + getPathByBranchEl(branchEl) { + const store = this.treesStore.store; + const getAttrPath = el => { + const pathStr = el.getAttribute('data-tree-node-path'); if (pathStr) { - return pathStr.split(',').map(function (v) { - return parseInt(v); - }); + return pathStr.split(',').map(v => parseInt(v)); } }; - - var path = getAttrPath(branchEl); - + const path = getAttrPath(branchEl); if (path) { return path; - } // placeholder path - - - var parentPath; - findParent(branchEl, function (el) { + } + // placeholder path + let parentPath; + findParent(branchEl, el => { if (hasClass(el, 'tree-root')) { parentPath = []; return true; } - if (hasClass(el, 'tree-branch')) { parentPath = getAttrPath(el); return true; } }); - var index = 0; - - var _iterator3 = _createForOfIteratorHelper$2(iterateAll(branchEl.parentElement.children)), - _step3; - - try { - for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) { - var _step3$value = _step3.value, - el = _step3$value.value, - index2 = _step3$value.index; - - if (hasClass(el, 'tree-branch') || hasClass(el, 'tree-placeholder')) { - if (el === branchEl) { - break; - } - - index++; + let index = 0; + for (const { + value: el, + index: index2 + } of iterateAll(branchEl.parentElement.children)) { + if (hasClass(el, 'tree-branch') || hasClass(el, 'tree-placeholder')) { + if (el === branchEl) { + break; } + index++; } - } catch (err) { - _iterator3.e(err); - } finally { - _iterator3.f(); } - - return [].concat(_toConsumableArray(parentPath), [index]); + return [...parentPath, index]; } }, // created() {}, - mounted: function mounted() { - var _this = this; - - var options = this._draggableOptions = { + mounted() { + const options = this._draggableOptions = { indent: this.indent, triggerClass: this.triggerClass, triggerBySelf: this.triggerBySelf, @@ -1793,265 +1270,204 @@ var script = { placeholderNodeBackClass: 'tree-placeholder-node-back', placeholderNodeClass: 'tree-placeholder-node', draggingClass: 'dragging', - placeholderId: "he_tree_drag_placeholder", - ifNodeFolded: function ifNodeFolded(branchEl, store) { - var targetTree = store.targetTree; - var node = targetTree.getNodeByBranchEl(branchEl); + placeholderId: `he_tree_drag_placeholder`, + ifNodeFolded: (branchEl, store) => { + const { + targetTree + } = store; + const node = targetTree.getNodeByBranchEl(branchEl); return node.$folded; }, - isTargetTreeRootDroppable: function isTargetTreeRootDroppable(store) { - var droppable = resolveValueOrGettter(store.targetTree.rootNode.$droppable, [store.targetTree, store]); - + isTargetTreeRootDroppable: store => { + const droppable = resolveValueOrGettter(store.targetTree.rootNode.$droppable, [store.targetTree, store]); if (droppable !== undefined) { return droppable; } - return true; }, - unfoldTargetNodeByEl: function unfoldTargetNodeByEl() { - return _this._Draggable_unfoldTargetNodeByEl.apply(_this, arguments); - }, - isNodeParentDroppable: function isNodeParentDroppable(branchEl, treeEl) { - var tree = _this.getTreeVmByTreeEl(treeEl); - - var path = tree.getPathByBranchEl(branchEl); - var parentPath = arrayWithoutEnd(path, 1); - var parent = tree.getNodeByPath(parentPath); + unfoldTargetNodeByEl: (...args) => this._Draggable_unfoldTargetNodeByEl(...args), + isNodeParentDroppable: (branchEl, treeEl) => { + const tree = this.getTreeVmByTreeEl(treeEl); + const path = tree.getPathByBranchEl(branchEl); + const parentPath = arrayWithoutEnd(path, 1); + const parent = tree.getNodeByPath(parentPath); return tree.isNodeDroppable(parent, parentPath); }, - isNodeDroppable: function isNodeDroppable(branchEl, treeEl) { - var tree = _this.getTreeVmByTreeEl(treeEl); - - var path = tree.getPathByBranchEl(branchEl); - var node = tree.getNodeByPath(path); + isNodeDroppable: (branchEl, treeEl) => { + const tree = this.getTreeVmByTreeEl(treeEl); + const path = tree.getPathByBranchEl(branchEl); + const node = tree.getNodeByPath(path); return tree.isNodeDroppable(node, path); }, - _findClosestDroppablePosition: function _findClosestDroppablePosition(branchEl, treeEl) { - var tree = _this.getTreeVmByTreeEl(treeEl); - - var path = tree.getPathByBranchEl(branchEl); - var findPath = arrayWithoutEnd(path, 1); - var cur = path; - - var _iterator4 = _createForOfIteratorHelper$2(tree.iteratePath(findPath, { + _findClosestDroppablePosition: (branchEl, treeEl) => { + const tree = this.getTreeVmByTreeEl(treeEl); + const path = tree.getPathByBranchEl(branchEl); + const findPath = arrayWithoutEnd(path, 1); + let cur = path; + for (const { + node, + path + } of tree.iteratePath(findPath, { reverse: true - })), - _step4; - - try { - for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) { - var _step4$value = _step4.value, - node = _step4$value.node, - _path = _step4$value.path; - - if (tree.isNodeDroppable(node, _path)) { - return tree.getBranchElByPath(cur); - } else { - cur = _path; - } + })) { + if (tree.isNodeDroppable(node, path)) { + return tree.getBranchElByPath(cur); + } else { + cur = path; } - } catch (err) { - _iterator4.e(err); - } finally { - _iterator4.f(); } - - if (tree.isNodeDroppable(_this.rootNode, [])) { + if (tree.isNodeDroppable(this.rootNode, [])) { return tree.getBranchElByPath(cur); } }, - afterPlaceholderCreated: function afterPlaceholderCreated(store) { + afterPlaceholderCreated: store => { store.startTree.$emit('afterPlaceholderCreated', store); store.startTree.$emit('after-placeholder-created', store); }, - getPathByBranchEl: function getPathByBranchEl(branchEl) { - return _this.getPathByBranchEl(branchEl); - }, - beforeFirstMove: function beforeFirstMove(store) { - _this.treesStore.store = store; - store.startTree = _this.getTreeVmByTreeEl(store.startTreeEl); - var draggable = resolveValueOrGettter(store.startTree.draggable, [store.startTree, store]); - + getPathByBranchEl: branchEl => this.getPathByBranchEl(branchEl), + beforeFirstMove: store => { + this.treesStore.store = store; + store.startTree = this.getTreeVmByTreeEl(store.startTreeEl); + const draggable = resolveValueOrGettter(store.startTree.draggable, [store.startTree, store]); if (!draggable) { return false; } - - var startTree = store.startTree, - dragBranchEl = store.dragBranchEl, - startPath = store.startPath; + const { + startTree, + dragBranchEl, + startPath + } = store; store.dragNode = startTree.getNodeByPath(startPath); - - if (_this.cloneWhenDrag) { + if (this.cloneWhenDrag) { store.dragNode = cloneTreeData(store.dragNode); } - if (!startTree.isNodeDraggable(store.dragNode, startPath)) { return false; } - if (startTree.hasHook('ondragstart') && startTree.executeHook('ondragstart', [startTree, store]) === false) { return false; } - store.startTree.$emit('before-first-move', store); store.startTree.$emit('drag', store); - - _this.$root.$emit('he-tree-drag', store); + this.$root.$emit('he-tree-drag', store); }, - filterTargetTree: function filterTargetTree(targetTreeEl, store) { - var targetTree = _this.getTreeVmByTreeEl(targetTreeEl); - - var startTree = store.startTree; - + filterTargetTree: (targetTreeEl, store) => { + const targetTree = this.getTreeVmByTreeEl(targetTreeEl); + const { + startTree + } = store; if (startTree !== targetTree) { - if (_this._internal_hook_filterTargetTree) { - if (_this._internal_hook_filterTargetTree(targetTree, store) === false) { + if (this._internal_hook_filterTargetTree) { + if (this._internal_hook_filterTargetTree(targetTree, store) === false) { return false; } } else { return false; } } - - var targetTreeDroppable = resolveValueOrGettter(targetTree.droppable, [targetTree, store]); - + const targetTreeDroppable = resolveValueOrGettter(targetTree.droppable, [targetTree, store]); if (!targetTreeDroppable) { return false; } - store.targetTree = targetTree; - - if (!resolveValueOrGettter(store.startTree === store.targetTree) && resolveValueOrGettter(_this._Draggable_unfoldTargetNode, [false, _this.treeData]) !== _this.rootNode.children) { + if (!resolveValueOrGettter(store.startTree === store.targetTree) && resolveValueOrGettter(this._Draggable_unfoldTargetNode, [false, this.treeData]) !== this.rootNode.children) { return false; } }, - afterMove: function afterMove(store) { + afterMove: store => { store.startTree.$emit('after-move', store); }, - beforeDrop: function beforeDrop(pathChanged, store) { - var targetTree = store.targetTree; - + beforeDrop: (pathChanged, store) => { + const { + targetTree + } = store; if (targetTree.hasHook('ondragend') && targetTree.executeHook('ondragend', [targetTree, store]) === false) { return false; } - - _this.$root.$emit('he-tree-before-drop', store); + this.$root.$emit('he-tree-before-drop', store); }, - afterDrop: function afterDrop(store, t) { + afterDrop: (store, t) => { if (store.pathChanged) { - var startTree = store.startTree, - targetTree = store.targetTree, - startPath = store.startPath, - targetPath = store.targetPath, - dragNode = store.dragNode; - - if (_this.cloneWhenDrag !== true) { + const { + startTree, + targetTree, + startPath, + dragNode + } = store; + let { + targetPath + } = store; + if (this.cloneWhenDrag !== true) { // remove from start position - var startParentPath = arrayWithoutEnd(startPath, 1); - var startParent = startTree.getNodeByPath(startParentPath); - var startSiblings = startParentPath.length === 0 ? startTree.treeData : startParent.children; - var startIndex = arrayLast(startPath); - startSiblings.splice(startIndex, 1); // update targetPath - + const startParentPath = arrayWithoutEnd(startPath, 1); + const startParent = startTree.getNodeByPath(startParentPath); + const startSiblings = startParentPath.length === 0 ? startTree.treeData : startParent.children; + const startIndex = arrayLast(startPath); + startSiblings.splice(startIndex, 1); + // remove node from the starting position may affect the target path. + // example + // startPath targetPath + // [0] [1] + // [0] [1, 0] + // [3, 1] [3, 3] + // [3, 1] [3, 3, 5] + // above targetPaths should be transformed to [0], [0, 0] [3, 2] [3, 2, 5] if (startTree === targetTree) { if (startPath.length <= targetPath.length) { - var lenNoEnd = startPath.length - 1; - var same = true; - - for (var i = 0; i < lenNoEnd; i++) { - var s = startPath[i]; - var _t = targetPath[i]; - - if (s !== _t) { - same = false; - break; - } - } - - if (same) { - var endIndex = startPath.length - 1; - + const sw = startPath.slice(0, startPath.length - 1); // without end + const tw = targetPath.slice(0, sw.length); // same length with sw + if (sw.toString() === tw.toString()) { + const endIndex = sw.length; if (startPath[endIndex] < targetPath[endIndex]) { + // deprecated. I forgot why create a copy of targetPath. // targetPath = targetPath.slice(0) // create a copy of targetPath targetPath[endIndex] -= 1; + } else if (startPath[endIndex] === targetPath[endIndex]) { + console.error('Draggable.afterDrop: That is impossible!'); } } } } - } // insert to target position - - - var targetParentPath = arrayWithoutEnd(targetPath, 1); - var targetParent = targetTree.getNodeByPath(targetParentPath); - var targetSiblings; - + } + // insert to target position + const targetParentPath = arrayWithoutEnd(targetPath, 1); + const targetParent = targetTree.getNodeByPath(targetParentPath); + let targetSiblings; if (targetParentPath.length === 0) { targetSiblings = targetTree.treeData; } else { if (!targetParent.children) { - _this.$set(targetParent, 'children', []); + targetParent['children'] = []; } - targetSiblings = targetParent.children; } - - var targetIndex = arrayLast(targetPath); - targetSiblings.splice(targetIndex, 0, dragNode); // emit event - + const targetIndex = arrayLast(targetPath); + targetSiblings.splice(targetIndex, 0, dragNode); + // emit event startTree.$emit('input', startTree.treeData); startTree.$emit('change', store); targetTree.$emit('drop', store); - - _this.$root.$emit('he-tree-drop', store); - + this.$root.$emit('he-tree-drop', store); if (targetTree !== startTree) { targetTree.$emit('input', targetTree.treeData); targetTree.$emit('change', store); } - - return new Promise(function (resolve, reject) { - targetTree.$nextTick(function () { + return new Promise((resolve, reject) => { + targetTree.$nextTick(() => { resolve(); }); }); } } }; - - var _makeTreeDraggable_obj = this._makeTreeDraggable_obj = makeTreeDraggable(this.$el, options); // watch props and update options - - - ['indent', 'triggerClass', 'triggerBySelf', 'unfoldWhenDragover', 'unfoldWhenDragoverDelay', 'draggingNodePositionMode', 'cloneWhenDrag', 'edgeScroll', 'edgeScrollTriggerMargin', 'edgeScrollSpeed', 'edgeScrollTriggerMode', 'edgeScrollSpecifiedContainerY', 'edgeScrollSpecifiedContainerY', 'rtl', 'preventTextSelection'].forEach(function (name) { - _this.$watch(name, function (value) { + const _makeTreeDraggable_obj = this._makeTreeDraggable_obj = makeTreeDraggable(this.$el, options); + // watch props and update options + ['indent', 'triggerClass', 'triggerBySelf', 'unfoldWhenDragover', 'unfoldWhenDragoverDelay', 'draggingNodePositionMode', 'cloneWhenDrag', 'edgeScroll', 'edgeScrollTriggerMargin', 'edgeScrollSpeed', 'edgeScrollTriggerMode', 'edgeScrollSpecifiedContainerY', 'edgeScrollSpecifiedContainerY', 'rtl', 'preventTextSelection'].forEach(name => { + this.$watch(name, value => { _makeTreeDraggable_obj.options[name] = value; - _makeTreeDraggable_obj.optionsUpdated(); }); }); } }; -/* script */ -var __vue_script__$1 = script; -/* template */ - -/* style */ - -var __vue_inject_styles__$1 = undefined; -/* scoped */ - -var __vue_scope_id__$1 = undefined; -/* module identifier */ - -var __vue_module_identifier__$1 = undefined; -/* functional template */ - -var __vue_is_functional_template__$1 = undefined; -/* style inject */ - -/* style inject SSR */ - -/* style inject shadow dom */ - -var __vue_component__$1 = /*#__PURE__*/__vue_normalize__({}, __vue_inject_styles__$1, __vue_script__$1, __vue_scope_id__$1, __vue_is_functional_template__$1, __vue_module_identifier__$1, false, undefined, undefined, undefined); - -export { check as Check, __vue_component__$1 as Draggable, fold as Fold, __vue_component__ as Tree, cloneTreeData, foldAll, getPureTreeData, unfoldAll, walkTreeData }; +export { check as Check, Draggable_vue as Draggable, fold as Fold, Tree, cloneTreeData, foldAll, getPureTreeData, unfoldAll, walkTreeData }; diff --git a/dist/he-tree-vue.js b/dist/he-tree-vue.js index 7c0799b..1820bb8 100644 --- a/dist/he-tree-vue.js +++ b/dist/he-tree-vue.js @@ -1,5311 +1,4016 @@ /*! - * he-tree-vue v2.0.7-beta.1 + * he-tree-vue v3.1.2 * (c) phphe (https://github.com/phphe) * Homepage: https://he-tree-vue.phphe.com * Released under the MIT License. */ (function (global, factory) { - typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) : - typeof define === 'function' && define.amd ? define(['exports', 'vue'], factory) : - (global = global || self, factory(global.heTreeVue = {}, global.Vue)); -}(this, (function (exports, Vue) { 'use strict'; - - Vue = Vue && Object.prototype.hasOwnProperty.call(Vue, 'default') ? Vue['default'] : Vue; - - function _arrayLikeToArray(arr, len) { - if (len == null || len > arr.length) len = arr.length; - - for (var i = 0, arr2 = new Array(len); i < len; i++) { - arr2[i] = arr[i]; - } - - return arr2; - } - - var arrayLikeToArray = _arrayLikeToArray; - - function _arrayWithoutHoles(arr) { - if (Array.isArray(arr)) return arrayLikeToArray(arr); - } - - var arrayWithoutHoles = _arrayWithoutHoles; - - function _iterableToArray(iter) { - if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); - } - - var iterableToArray = _iterableToArray; - - function _unsupportedIterableToArray(o, minLen) { - if (!o) return; - if (typeof o === "string") return arrayLikeToArray(o, minLen); - var n = Object.prototype.toString.call(o).slice(8, -1); - if (n === "Object" && o.constructor) n = o.constructor.name; - if (n === "Map" || n === "Set") return Array.from(o); - if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return arrayLikeToArray(o, minLen); - } - - var unsupportedIterableToArray = _unsupportedIterableToArray; - - function _nonIterableSpread() { - throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); - } - - var nonIterableSpread = _nonIterableSpread; - - function _toConsumableArray(arr) { - return arrayWithoutHoles(arr) || iterableToArray(arr) || unsupportedIterableToArray(arr) || nonIterableSpread(); - } - - var toConsumableArray = _toConsumableArray; - - function _defineProperty(obj, key, value) { - if (key in obj) { - Object.defineProperty(obj, key, { - value: value, - enumerable: true, - configurable: true, - writable: true - }); - } else { - obj[key] = value; - } - - return obj; - } - - var defineProperty = _defineProperty; - - function createCommonjsModule(fn, module) { - return module = { exports: {} }, fn(module, module.exports), module.exports; - } - - var getPrototypeOf = createCommonjsModule(function (module) { - function _getPrototypeOf(o) { - module.exports = _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { - return o.__proto__ || Object.getPrototypeOf(o); - }; - return _getPrototypeOf(o); - } - - module.exports = _getPrototypeOf; - }); - - function _superPropBase(object, property) { - while (!Object.prototype.hasOwnProperty.call(object, property)) { - object = getPrototypeOf(object); - if (object === null) break; - } - - return object; - } - - var superPropBase = _superPropBase; - - var get = createCommonjsModule(function (module) { - function _get(target, property, receiver) { - if (typeof Reflect !== "undefined" && Reflect.get) { - module.exports = _get = Reflect.get; - } else { - module.exports = _get = function _get(target, property, receiver) { - var base = superPropBase(target, property); - if (!base) return; - var desc = Object.getOwnPropertyDescriptor(base, property); - - if (desc.get) { - return desc.get.call(receiver); - } - - return desc.value; - }; - } - - return _get(target, property, receiver || target); - } - - module.exports = _get; - }); - - var setPrototypeOf = createCommonjsModule(function (module) { - function _setPrototypeOf(o, p) { - module.exports = _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { - o.__proto__ = p; - return o; - }; - - return _setPrototypeOf(o, p); - } - - module.exports = _setPrototypeOf; - }); - - var _typeof_1 = createCommonjsModule(function (module) { - function _typeof(obj) { - "@babel/helpers - typeof"; - - if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { - module.exports = _typeof = function _typeof(obj) { - return typeof obj; - }; - } else { - module.exports = _typeof = function _typeof(obj) { - return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; - }; - } - - return _typeof(obj); - } - - module.exports = _typeof; - }); - - function _defineProperties(target, props) { - for (var i = 0; i < props.length; i++) { - var descriptor = props[i]; - descriptor.enumerable = descriptor.enumerable || false; - descriptor.configurable = true; - if ("value" in descriptor) descriptor.writable = true; - Object.defineProperty(target, descriptor.key, descriptor); - } - } - - function _createClass(Constructor, protoProps, staticProps) { - if (protoProps) _defineProperties(Constructor.prototype, protoProps); - if (staticProps) _defineProperties(Constructor, staticProps); - return Constructor; - } - - var createClass = _createClass; - - function _classCallCheck(instance, Constructor) { - if (!(instance instanceof Constructor)) { - throw new TypeError("Cannot call a class as a function"); - } - } - - var classCallCheck = _classCallCheck; - - var runtime_1 = createCommonjsModule(function (module) { - /** - * Copyright (c) 2014-present, Facebook, Inc. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - */ - - var runtime = (function (exports) { - - var Op = Object.prototype; - var hasOwn = Op.hasOwnProperty; - var undefined$1; // More compressible than void 0. - var $Symbol = typeof Symbol === "function" ? Symbol : {}; - var iteratorSymbol = $Symbol.iterator || "@@iterator"; - var asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator"; - var toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag"; - - function wrap(innerFn, outerFn, self, tryLocsList) { - // If outerFn provided and outerFn.prototype is a Generator, then outerFn.prototype instanceof Generator. - var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator; - var generator = Object.create(protoGenerator.prototype); - var context = new Context(tryLocsList || []); - - // The ._invoke method unifies the implementations of the .next, - // .throw, and .return methods. - generator._invoke = makeInvokeMethod(innerFn, self, context); - - return generator; - } - exports.wrap = wrap; - - // Try/catch helper to minimize deoptimizations. Returns a completion - // record like context.tryEntries[i].completion. This interface could - // have been (and was previously) designed to take a closure to be - // invoked without arguments, but in all the cases we care about we - // already have an existing method we want to call, so there's no need - // to create a new function object. We can even get away with assuming - // the method takes exactly one argument, since that happens to be true - // in every case, so we don't have to touch the arguments object. The - // only additional allocation required is the completion record, which - // has a stable shape and so hopefully should be cheap to allocate. - function tryCatch(fn, obj, arg) { - try { - return { type: "normal", arg: fn.call(obj, arg) }; - } catch (err) { - return { type: "throw", arg: err }; - } - } - - var GenStateSuspendedStart = "suspendedStart"; - var GenStateSuspendedYield = "suspendedYield"; - var GenStateExecuting = "executing"; - var GenStateCompleted = "completed"; - - // Returning this object from the innerFn has the same effect as - // breaking out of the dispatch switch statement. - var ContinueSentinel = {}; - - // Dummy constructor functions that we use as the .constructor and - // .constructor.prototype properties for functions that return Generator - // objects. For full spec compliance, you may wish to configure your - // minifier not to mangle the names of these two functions. - function Generator() {} - function GeneratorFunction() {} - function GeneratorFunctionPrototype() {} - - // This is a polyfill for %IteratorPrototype% for environments that - // don't natively support it. - var IteratorPrototype = {}; - IteratorPrototype[iteratorSymbol] = function () { - return this; - }; - - var getProto = Object.getPrototypeOf; - var NativeIteratorPrototype = getProto && getProto(getProto(values([]))); - if (NativeIteratorPrototype && - NativeIteratorPrototype !== Op && - hasOwn.call(NativeIteratorPrototype, iteratorSymbol)) { - // This environment has a native %IteratorPrototype%; use it instead - // of the polyfill. - IteratorPrototype = NativeIteratorPrototype; - } - - var Gp = GeneratorFunctionPrototype.prototype = - Generator.prototype = Object.create(IteratorPrototype); - GeneratorFunction.prototype = Gp.constructor = GeneratorFunctionPrototype; - GeneratorFunctionPrototype.constructor = GeneratorFunction; - GeneratorFunctionPrototype[toStringTagSymbol] = - GeneratorFunction.displayName = "GeneratorFunction"; - - // Helper for defining the .next, .throw, and .return methods of the - // Iterator interface in terms of a single ._invoke method. - function defineIteratorMethods(prototype) { - ["next", "throw", "return"].forEach(function(method) { - prototype[method] = function(arg) { - return this._invoke(method, arg); - }; - }); - } - - exports.isGeneratorFunction = function(genFun) { - var ctor = typeof genFun === "function" && genFun.constructor; - return ctor - ? ctor === GeneratorFunction || - // For the native GeneratorFunction constructor, the best we can - // do is to check its .name property. - (ctor.displayName || ctor.name) === "GeneratorFunction" - : false; - }; - - exports.mark = function(genFun) { - if (Object.setPrototypeOf) { - Object.setPrototypeOf(genFun, GeneratorFunctionPrototype); - } else { - genFun.__proto__ = GeneratorFunctionPrototype; - if (!(toStringTagSymbol in genFun)) { - genFun[toStringTagSymbol] = "GeneratorFunction"; - } - } - genFun.prototype = Object.create(Gp); - return genFun; - }; - - // Within the body of any async function, `await x` is transformed to - // `yield regeneratorRuntime.awrap(x)`, so that the runtime can test - // `hasOwn.call(value, "__await")` to determine if the yielded value is - // meant to be awaited. - exports.awrap = function(arg) { - return { __await: arg }; - }; - - function AsyncIterator(generator, PromiseImpl) { - function invoke(method, arg, resolve, reject) { - var record = tryCatch(generator[method], generator, arg); - if (record.type === "throw") { - reject(record.arg); - } else { - var result = record.arg; - var value = result.value; - if (value && - typeof value === "object" && - hasOwn.call(value, "__await")) { - return PromiseImpl.resolve(value.__await).then(function(value) { - invoke("next", value, resolve, reject); - }, function(err) { - invoke("throw", err, resolve, reject); - }); - } - - return PromiseImpl.resolve(value).then(function(unwrapped) { - // When a yielded Promise is resolved, its final value becomes - // the .value of the Promise<{value,done}> result for the - // current iteration. - result.value = unwrapped; - resolve(result); - }, function(error) { - // If a rejected Promise was yielded, throw the rejection back - // into the async generator function so it can be handled there. - return invoke("throw", error, resolve, reject); - }); - } - } - - var previousPromise; - - function enqueue(method, arg) { - function callInvokeWithMethodAndArg() { - return new PromiseImpl(function(resolve, reject) { - invoke(method, arg, resolve, reject); - }); - } - - return previousPromise = - // If enqueue has been called before, then we want to wait until - // all previous Promises have been resolved before calling invoke, - // so that results are always delivered in the correct order. If - // enqueue has not been called before, then it is important to - // call invoke immediately, without waiting on a callback to fire, - // so that the async generator function has the opportunity to do - // any necessary setup in a predictable way. This predictability - // is why the Promise constructor synchronously invokes its - // executor callback, and why async functions synchronously - // execute code before the first await. Since we implement simple - // async functions in terms of async generators, it is especially - // important to get this right, even though it requires care. - previousPromise ? previousPromise.then( - callInvokeWithMethodAndArg, - // Avoid propagating failures to Promises returned by later - // invocations of the iterator. - callInvokeWithMethodAndArg - ) : callInvokeWithMethodAndArg(); - } - - // Define the unified helper method that is used to implement .next, - // .throw, and .return (see defineIteratorMethods). - this._invoke = enqueue; - } - - defineIteratorMethods(AsyncIterator.prototype); - AsyncIterator.prototype[asyncIteratorSymbol] = function () { - return this; - }; - exports.AsyncIterator = AsyncIterator; - - // Note that simple async functions are implemented on top of - // AsyncIterator objects; they just return a Promise for the value of - // the final result produced by the iterator. - exports.async = function(innerFn, outerFn, self, tryLocsList, PromiseImpl) { - if (PromiseImpl === void 0) PromiseImpl = Promise; - - var iter = new AsyncIterator( - wrap(innerFn, outerFn, self, tryLocsList), - PromiseImpl - ); - - return exports.isGeneratorFunction(outerFn) - ? iter // If outerFn is a generator, return the full iterator. - : iter.next().then(function(result) { - return result.done ? result.value : iter.next(); - }); - }; - - function makeInvokeMethod(innerFn, self, context) { - var state = GenStateSuspendedStart; - - return function invoke(method, arg) { - if (state === GenStateExecuting) { - throw new Error("Generator is already running"); - } - - if (state === GenStateCompleted) { - if (method === "throw") { - throw arg; - } - - // Be forgiving, per 25.3.3.3.3 of the spec: - // https://people.mozilla.org/~jorendorff/es6-draft.html#sec-generatorresume - return doneResult(); - } - - context.method = method; - context.arg = arg; - - while (true) { - var delegate = context.delegate; - if (delegate) { - var delegateResult = maybeInvokeDelegate(delegate, context); - if (delegateResult) { - if (delegateResult === ContinueSentinel) continue; - return delegateResult; - } - } - - if (context.method === "next") { - // Setting context._sent for legacy support of Babel's - // function.sent implementation. - context.sent = context._sent = context.arg; - - } else if (context.method === "throw") { - if (state === GenStateSuspendedStart) { - state = GenStateCompleted; - throw context.arg; - } - - context.dispatchException(context.arg); - - } else if (context.method === "return") { - context.abrupt("return", context.arg); - } - - state = GenStateExecuting; - - var record = tryCatch(innerFn, self, context); - if (record.type === "normal") { - // If an exception is thrown from innerFn, we leave state === - // GenStateExecuting and loop back for another invocation. - state = context.done - ? GenStateCompleted - : GenStateSuspendedYield; - - if (record.arg === ContinueSentinel) { - continue; - } - - return { - value: record.arg, - done: context.done - }; - - } else if (record.type === "throw") { - state = GenStateCompleted; - // Dispatch the exception by looping back around to the - // context.dispatchException(context.arg) call above. - context.method = "throw"; - context.arg = record.arg; - } - } - }; - } - - // Call delegate.iterator[context.method](context.arg) and handle the - // result, either by returning a { value, done } result from the - // delegate iterator, or by modifying context.method and context.arg, - // setting context.delegate to null, and returning the ContinueSentinel. - function maybeInvokeDelegate(delegate, context) { - var method = delegate.iterator[context.method]; - if (method === undefined$1) { - // A .throw or .return when the delegate iterator has no .throw - // method always terminates the yield* loop. - context.delegate = null; - - if (context.method === "throw") { - // Note: ["return"] must be used for ES3 parsing compatibility. - if (delegate.iterator["return"]) { - // If the delegate iterator has a return method, give it a - // chance to clean up. - context.method = "return"; - context.arg = undefined$1; - maybeInvokeDelegate(delegate, context); - - if (context.method === "throw") { - // If maybeInvokeDelegate(context) changed context.method from - // "return" to "throw", let that override the TypeError below. - return ContinueSentinel; - } - } - - context.method = "throw"; - context.arg = new TypeError( - "The iterator does not provide a 'throw' method"); - } - - return ContinueSentinel; - } - - var record = tryCatch(method, delegate.iterator, context.arg); - - if (record.type === "throw") { - context.method = "throw"; - context.arg = record.arg; - context.delegate = null; - return ContinueSentinel; - } - - var info = record.arg; - - if (! info) { - context.method = "throw"; - context.arg = new TypeError("iterator result is not an object"); - context.delegate = null; - return ContinueSentinel; - } - - if (info.done) { - // Assign the result of the finished delegate to the temporary - // variable specified by delegate.resultName (see delegateYield). - context[delegate.resultName] = info.value; - - // Resume execution at the desired location (see delegateYield). - context.next = delegate.nextLoc; - - // If context.method was "throw" but the delegate handled the - // exception, let the outer generator proceed normally. If - // context.method was "next", forget context.arg since it has been - // "consumed" by the delegate iterator. If context.method was - // "return", allow the original .return call to continue in the - // outer generator. - if (context.method !== "return") { - context.method = "next"; - context.arg = undefined$1; - } - - } else { - // Re-yield the result returned by the delegate method. - return info; - } - - // The delegate iterator is finished, so forget it and continue with - // the outer generator. - context.delegate = null; - return ContinueSentinel; - } - - // Define Generator.prototype.{next,throw,return} in terms of the - // unified ._invoke helper method. - defineIteratorMethods(Gp); - - Gp[toStringTagSymbol] = "Generator"; - - // A Generator should always return itself as the iterator object when the - // @@iterator function is called on it. Some browsers' implementations of the - // iterator prototype chain incorrectly implement this, causing the Generator - // object to not be returned from this call. This ensures that doesn't happen. - // See https://github.com/facebook/regenerator/issues/274 for more details. - Gp[iteratorSymbol] = function() { - return this; - }; - - Gp.toString = function() { - return "[object Generator]"; - }; - - function pushTryEntry(locs) { - var entry = { tryLoc: locs[0] }; - - if (1 in locs) { - entry.catchLoc = locs[1]; - } - - if (2 in locs) { - entry.finallyLoc = locs[2]; - entry.afterLoc = locs[3]; - } - - this.tryEntries.push(entry); - } - - function resetTryEntry(entry) { - var record = entry.completion || {}; - record.type = "normal"; - delete record.arg; - entry.completion = record; - } - - function Context(tryLocsList) { - // The root entry object (effectively a try statement without a catch - // or a finally block) gives us a place to store values thrown from - // locations where there is no enclosing try statement. - this.tryEntries = [{ tryLoc: "root" }]; - tryLocsList.forEach(pushTryEntry, this); - this.reset(true); - } - - exports.keys = function(object) { - var keys = []; - for (var key in object) { - keys.push(key); - } - keys.reverse(); - - // Rather than returning an object with a next method, we keep - // things simple and return the next function itself. - return function next() { - while (keys.length) { - var key = keys.pop(); - if (key in object) { - next.value = key; - next.done = false; - return next; - } - } - - // To avoid creating an additional object, we just hang the .value - // and .done properties off the next function object itself. This - // also ensures that the minifier will not anonymize the function. - next.done = true; - return next; - }; - }; - - function values(iterable) { - if (iterable) { - var iteratorMethod = iterable[iteratorSymbol]; - if (iteratorMethod) { - return iteratorMethod.call(iterable); - } - - if (typeof iterable.next === "function") { - return iterable; - } - - if (!isNaN(iterable.length)) { - var i = -1, next = function next() { - while (++i < iterable.length) { - if (hasOwn.call(iterable, i)) { - next.value = iterable[i]; - next.done = false; - return next; - } - } - - next.value = undefined$1; - next.done = true; - - return next; - }; - - return next.next = next; - } - } - - // Return an iterator with no values. - return { next: doneResult }; - } - exports.values = values; - - function doneResult() { - return { value: undefined$1, done: true }; - } - - Context.prototype = { - constructor: Context, - - reset: function(skipTempReset) { - this.prev = 0; - this.next = 0; - // Resetting context._sent for legacy support of Babel's - // function.sent implementation. - this.sent = this._sent = undefined$1; - this.done = false; - this.delegate = null; - - this.method = "next"; - this.arg = undefined$1; - - this.tryEntries.forEach(resetTryEntry); - - if (!skipTempReset) { - for (var name in this) { - // Not sure about the optimal order of these conditions: - if (name.charAt(0) === "t" && - hasOwn.call(this, name) && - !isNaN(+name.slice(1))) { - this[name] = undefined$1; - } - } - } - }, - - stop: function() { - this.done = true; - - var rootEntry = this.tryEntries[0]; - var rootRecord = rootEntry.completion; - if (rootRecord.type === "throw") { - throw rootRecord.arg; - } - - return this.rval; - }, - - dispatchException: function(exception) { - if (this.done) { - throw exception; - } - - var context = this; - function handle(loc, caught) { - record.type = "throw"; - record.arg = exception; - context.next = loc; - - if (caught) { - // If the dispatched exception was caught by a catch block, - // then let that catch block handle the exception normally. - context.method = "next"; - context.arg = undefined$1; - } - - return !! caught; - } - - for (var i = this.tryEntries.length - 1; i >= 0; --i) { - var entry = this.tryEntries[i]; - var record = entry.completion; - - if (entry.tryLoc === "root") { - // Exception thrown outside of any try block that could handle - // it, so set the completion value of the entire function to - // throw the exception. - return handle("end"); - } - - if (entry.tryLoc <= this.prev) { - var hasCatch = hasOwn.call(entry, "catchLoc"); - var hasFinally = hasOwn.call(entry, "finallyLoc"); - - if (hasCatch && hasFinally) { - if (this.prev < entry.catchLoc) { - return handle(entry.catchLoc, true); - } else if (this.prev < entry.finallyLoc) { - return handle(entry.finallyLoc); - } - - } else if (hasCatch) { - if (this.prev < entry.catchLoc) { - return handle(entry.catchLoc, true); - } - - } else if (hasFinally) { - if (this.prev < entry.finallyLoc) { - return handle(entry.finallyLoc); - } - - } else { - throw new Error("try statement without catch or finally"); - } - } - } - }, - - abrupt: function(type, arg) { - for (var i = this.tryEntries.length - 1; i >= 0; --i) { - var entry = this.tryEntries[i]; - if (entry.tryLoc <= this.prev && - hasOwn.call(entry, "finallyLoc") && - this.prev < entry.finallyLoc) { - var finallyEntry = entry; - break; - } - } - - if (finallyEntry && - (type === "break" || - type === "continue") && - finallyEntry.tryLoc <= arg && - arg <= finallyEntry.finallyLoc) { - // Ignore the finally entry if control is not jumping to a - // location outside the try/catch block. - finallyEntry = null; - } - - var record = finallyEntry ? finallyEntry.completion : {}; - record.type = type; - record.arg = arg; - - if (finallyEntry) { - this.method = "next"; - this.next = finallyEntry.finallyLoc; - return ContinueSentinel; - } - - return this.complete(record); - }, - - complete: function(record, afterLoc) { - if (record.type === "throw") { - throw record.arg; - } - - if (record.type === "break" || - record.type === "continue") { - this.next = record.arg; - } else if (record.type === "return") { - this.rval = this.arg = record.arg; - this.method = "return"; - this.next = "end"; - } else if (record.type === "normal" && afterLoc) { - this.next = afterLoc; - } - - return ContinueSentinel; - }, - - finish: function(finallyLoc) { - for (var i = this.tryEntries.length - 1; i >= 0; --i) { - var entry = this.tryEntries[i]; - if (entry.finallyLoc === finallyLoc) { - this.complete(entry.completion, entry.afterLoc); - resetTryEntry(entry); - return ContinueSentinel; - } - } - }, - - "catch": function(tryLoc) { - for (var i = this.tryEntries.length - 1; i >= 0; --i) { - var entry = this.tryEntries[i]; - if (entry.tryLoc === tryLoc) { - var record = entry.completion; - if (record.type === "throw") { - var thrown = record.arg; - resetTryEntry(entry); - } - return thrown; - } - } - - // The context.catch method must only be called with a location - // argument that corresponds to a known catch block. - throw new Error("illegal catch attempt"); - }, - - delegateYield: function(iterable, resultName, nextLoc) { - this.delegate = { - iterator: values(iterable), - resultName: resultName, - nextLoc: nextLoc - }; - - if (this.method === "next") { - // Deliberately forget the last sent value so that we don't - // accidentally pass it on to the delegate. - this.arg = undefined$1; - } - - return ContinueSentinel; - } - }; - - // Regardless of whether this script is executing as a CommonJS module - // or not, return the runtime object so that we can declare the variable - // regeneratorRuntime in the outer scope, which allows this module to be - // injected easily by `bin/regenerator --include-runtime script.js`. - return exports; - - }( - // If this script is executing as a CommonJS module, use module.exports - // as the regeneratorRuntime namespace. Otherwise create a new empty - // object. Either way, the resulting object will be used to initialize - // the regeneratorRuntime variable at the top of this file. - module.exports - )); - - try { - regeneratorRuntime = runtime; - } catch (accidentalStrictMode) { - // This module should not be running in strict mode, so the above - // assignment should always work unless something is misconfigured. Just - // in case runtime.js accidentally runs in strict mode, we can escape - // strict mode using a global Function call. This could conceivably fail - // if a Content Security Policy forbids using Function, but in that case - // the proper solution is to fix the accidental strict mode problem. If - // you've misconfigured your bundler to force strict mode and applied a - // CSP to forbid Function, and you're not willing to fix either of those - // problems, please detail your unique predicament in a GitHub issue. - Function("r", "regeneratorRuntime = r")(runtime); - } - }); - - var regenerator = runtime_1; - - /*! - * helper-js v2.0.1 - * (c) phphe (https://github.com/phphe) - * Homepage: undefined - * Released under the MIT License. - */ - - var _marked = /*#__PURE__*/regenerator.mark(iterateAll); - - function _createForOfIteratorHelper(o) { - if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { - if (Array.isArray(o) || (o = _unsupportedIterableToArray$1(o))) { - var i = 0; - - var F = function F() {}; - - return { - s: F, - n: function n() { - if (i >= o.length) return { - done: true - }; - return { - done: false, - value: o[i++] - }; - }, - e: function e(_e) { - throw _e; - }, - f: F - }; - } - - throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); - } - - var it, - normalCompletion = true, - didErr = false, - err; - return { - s: function s() { - it = o[Symbol.iterator](); - }, - n: function n() { - var step = it.next(); - normalCompletion = step.done; - return step; - }, - e: function e(_e2) { - didErr = true; - err = _e2; - }, - f: function f() { - try { - if (!normalCompletion && it.return != null) it.return(); - } finally { - if (didErr) throw err; - } - } - }; - } - - function _unsupportedIterableToArray$1(o, minLen) { - if (!o) return; - if (typeof o === "string") return _arrayLikeToArray$1(o, minLen); - var n = Object.prototype.toString.call(o).slice(8, -1); - if (n === "Object" && o.constructor) n = o.constructor.name; - if (n === "Map" || n === "Set") return Array.from(n); - if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$1(o, minLen); - } - - function _arrayLikeToArray$1(arr, len) { - if (len == null || len > arr.length) len = arr.length; - - for (var i = 0, arr2 = new Array(len); i < len; i++) { - arr2[i] = arr[i]; - } - - return arr2; - } // 为此库有需要的方法存储信息 - - function isArray(v) { - return Object.prototype.toString.call(v) === '[object Array]'; - } - - function isObject(v) { - return Object.prototype.toString.call(v) === '[object Object]'; - } - - function isFunction(v) { - return typeof v === 'function'; - } - // 返回指定范围随机整数, 包括范围起始值和终止值 - - - function randInt(min, max) { - return Math.floor(Math.random() * (max - min + 1) + min); - } // rand item in array - // 返回数组随机一项 - - - function randChoice(arr) { - return arr[randInt(0, arr.length - 1)]; - } // Pad a string to a certain length with another string - // 随机字符串 - - - function randString() { - var len = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 8; - var seeds = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; - var r = ''; - - for (var i = 0; i < len; i++) { - r += randChoice(seeds); - } - - return r; - } // ## Array - // ## 数组 - // remove item from array. return removed count - // 从数组删除项. 返回删除计数 - - - function arrayRemove(arr, v) { - var index; - var count = 0; - - while ((index = arr.indexOf(v)) > -1) { - arr.splice(index, 1); - count++; - } - - return count; - } // remove items from array by sorted indexes. indexes example: [0, 2, 6, 8, 9] - // 返回数组末项 - - - function arrayLast(arr) { - return arr[arr.length - 1]; - } // return arr1 - arr2 - - function toArrayIfNot(arrOrNot) { - return isArray(arrOrNot) ? arrOrNot : [arrOrNot]; - } - // 返回新数组排除末尾n项 - - - function arrayWithoutEnd(arr, n) { - return arr.slice(0, arr.length - n); - } // get one-dimensional array from multidimensional array - - function iterateAll(val) { - var opt, - i, - info, - _i2, - _Object$keys, - key, - _info, - _i3, - _info2, - keys, - _i4, - _keys, - _key, - _info3, - _args = arguments; - - return regenerator.wrap(function iterateAll$(_context) { - while (1) { - switch (_context.prev = _context.next) { - case 0: - opt = _args.length > 1 && _args[1] !== undefined ? _args[1] : {}; - - if (opt.reverse) { - _context.next = 30; - break; - } - - if (!(val.length != null)) { - _context.next = 14; - break; - } - - i = 0; - - case 4: - if (!(i < val.length)) { - _context.next = 12; - break; - } - - info = { - value: val[i], - index: i - }; - - if (!(!opt.exclude || !opt.exclude(info))) { - _context.next = 9; - break; - } - - _context.next = 9; - return info; - - case 9: - i++; - _context.next = 4; - break; - - case 12: - _context.next = 28; - break; - - case 14: - if (!isObject(val)) { - _context.next = 27; - break; - } - - _i2 = 0, _Object$keys = Object.keys(val); - - case 16: - if (!(_i2 < _Object$keys.length)) { - _context.next = 25; - break; - } - - key = _Object$keys[_i2]; - _info = { - value: val[key], - key: key - }; - - if (!(!opt.exclude || !opt.exclude(_info))) { - _context.next = 22; - break; - } - - _context.next = 22; - return _info; - - case 22: - _i2++; - _context.next = 16; - break; - - case 25: - _context.next = 28; - break; - - case 27: - throw 'Unsupported type'; - - case 28: - _context.next = 58; - break; - - case 30: - if (!(val.length != null)) { - _context.next = 42; - break; - } - - _i3 = val.length - 1; - - case 32: - if (!(_i3 >= 0)) { - _context.next = 40; - break; - } - - _info2 = { - value: val[_i3], - index: _i3 - }; - - if (!(!opt.exclude || !opt.exclude(_info2))) { - _context.next = 37; - break; - } - - _context.next = 37; - return _info2; - - case 37: - _i3--; - _context.next = 32; - break; - - case 40: - _context.next = 58; - break; - - case 42: - if (!isObject(val)) { - _context.next = 57; - break; - } - - keys = Object.keys(val); - keys.reverse(); - _i4 = 0, _keys = keys; - - case 46: - if (!(_i4 < _keys.length)) { - _context.next = 55; - break; - } - - _key = _keys[_i4]; - _info3 = { - value: val[_key], - key: _key - }; - - if (!(!opt.exclude || !opt.exclude(_info3))) { - _context.next = 52; - break; - } - - _context.next = 52; - return _info3; - - case 52: - _i4++; - _context.next = 46; - break; - - case 55: - _context.next = 58; - break; - - case 57: - throw 'Unsupported type'; - - case 58: - case "end": - return _context.stop(); - } - } - }, _marked); - } // example: objectGet(window, 'document.body.children.0') . source: http://stackoverflow.com/questions/8817394/javascript-get-deep-value-from-object-by-passing-path-to-it-as-string - - function objectAssignIfKeyNull(obj1, obj2) { - Object.keys(obj2).forEach(function (key) { - if (obj1[key] == null) { - obj1[key] = obj2[key]; - } - }); - } - - function depthFirstSearch(obj, handler) { - var childrenKey = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'children'; - var opt = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {}; - var rootChildren = isArray(obj) ? obj : [obj]; // - - var StopException = function StopException() { - classCallCheck(this, StopException); - }; - - var func = function func(children, parent, parentPath) { - if (opt.reverse) { - children = children.slice(); - children.reverse(); - } - - var len = children.length; - - for (var i = 0; i < len; i++) { - var item = children[i]; - var index = opt.reverse ? len - i - 1 : i; - var path = parentPath ? [].concat(toConsumableArray(parentPath), [index]) : []; - var r = handler(item, index, parent, path); - - if (r === false) { - // stop - throw new StopException(); - } else if (r === 'skip children') { - continue; - } else if (r === 'skip siblings') { - break; - } - - if (item[childrenKey] != null) { - func(item[childrenKey], item, path); - } - } - }; - - try { - func(rootChildren, null, isArray(obj) ? [] : null); - } catch (e) { - if (e instanceof StopException) ;else { - throw e; - } - } - } // refer [depthFirstSearch](#depthFirstSearch) - - - var walkTreeData = depthFirstSearch; // tree data helpers - - var TreeData = /*#__PURE__*/function () { - // data = null; - function TreeData() { - var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : []; - - classCallCheck(this, TreeData); - - this.childrenKey = 'children'; - this.data = data; - } - - createClass(TreeData, [{ - key: "iteratePath", - value: /*#__PURE__*/regenerator.mark(function iteratePath(path) { - var opt, - childrenKey, - rootChildren, - prevPath, - prevChildren, - _iterator4, - _step4, - index, - currentPath, - currentNode, - list, - _iterator5, - _step5, - _step5$value, - path0, - node, - _path, - _args2 = arguments; - - return regenerator.wrap(function iteratePath$(_context2) { - while (1) { - switch (_context2.prev = _context2.next) { - case 0: - opt = _args2.length > 1 && _args2[1] !== undefined ? _args2[1] : {}; - childrenKey = this.childrenKey, rootChildren = this.rootChildren; - - if (opt.reverse) { - _context2.next = 29; - break; - } - - prevPath = []; - prevChildren = rootChildren; - _iterator4 = _createForOfIteratorHelper(path); - _context2.prev = 6; - - _iterator4.s(); - - case 8: - if ((_step4 = _iterator4.n()).done) { - _context2.next = 19; - break; - } - - index = _step4.value; - currentPath = [].concat(toConsumableArray(prevPath), [index]); - currentNode = prevChildren[index]; - _context2.next = 14; - return { - path: currentPath, - node: currentNode - }; - - case 14: - prevPath = currentPath; - prevChildren = currentNode[childrenKey]; - - case 17: - _context2.next = 8; - break; - - case 19: - _context2.next = 24; - break; - - case 21: - _context2.prev = 21; - _context2.t0 = _context2["catch"](6); - - _iterator4.e(_context2.t0); - - case 24: - _context2.prev = 24; - - _iterator4.f(); - - return _context2.finish(24); - - case 27: - _context2.next = 49; - break; - - case 29: - list = toConsumableArray(this.iteratePath(path, Object.assign(Object.assign({}, opt), { - reverse: false - }))); - list.reverse(); - _iterator5 = _createForOfIteratorHelper(list); - _context2.prev = 32; - - _iterator5.s(); - - case 34: - if ((_step5 = _iterator5.n()).done) { - _context2.next = 41; - break; - } - - _step5$value = _step5.value, path0 = _step5$value.path, node = _step5$value.node; - _path = path0; - _context2.next = 39; - return { - path: _path, - node: node - }; - - case 39: - _context2.next = 34; - break; - - case 41: - _context2.next = 46; - break; - - case 43: - _context2.prev = 43; - _context2.t1 = _context2["catch"](32); - - _iterator5.e(_context2.t1); - - case 46: - _context2.prev = 46; - - _iterator5.f(); - - return _context2.finish(46); - - case 49: - case "end": - return _context2.stop(); - } - } - }, iteratePath, this, [[6, 21, 24, 27], [32, 43, 46, 49]]); - }) - }, { - key: "getAllNodes", - value: function getAllNodes(path) { - var all = []; - - var _iterator6 = _createForOfIteratorHelper(this.iteratePath(path)), - _step6; - - try { - for (_iterator6.s(); !(_step6 = _iterator6.n()).done;) { - var node = _step6.value.node; - all.push(node); - } - } catch (err) { - _iterator6.e(err); - } finally { - _iterator6.f(); - } - - return all; - } - }, { - key: "getNode", - value: function getNode(path) { - return arrayLast(this.getAllNodes(path)); - } - }, { - key: "getNodeIndexAndParent", - value: function getNodeIndexAndParent(path) { - var parentPath = path.slice(); - var index = parentPath.pop(); - return { - parent: this.getNode(parentPath), - index: index, - parentPath: parentPath - }; - } - }, { - key: "getNodeParent", - value: function getNodeParent(path) { - return this.getNodeIndexAndParent(path).parent; - } - }, { - key: "setPathNode", - value: function setPathNode(path, node) { - if (path == null || path.length === 0) { - this.data = node; - } else { - var childrenKey = this.childrenKey, - rootChildren = this.rootChildren; - - var _this$getNodeIndexAnd = this.getNodeIndexAndParent(path), - parent = _this$getNodeIndexAnd.parent, - index = _this$getNodeIndexAnd.index; - - var parentChildren = path.length === 1 ? rootChildren : parent[childrenKey]; - parentChildren[index] = node; - } - } - }, { - key: "removeNode", - value: function removeNode(path) { - var childrenKey = this.childrenKey, - rootChildren = this.rootChildren; - - var _this$getNodeIndexAnd2 = this.getNodeIndexAndParent(path), - parent = _this$getNodeIndexAnd2.parent, - index = _this$getNodeIndexAnd2.index; - - var parentChildren = path.length === 1 ? rootChildren : parent[childrenKey]; - var node = parentChildren[index]; - parentChildren.splice(index, 1); - return node; - } - }, { - key: "walk", - value: function walk(handler, opt) { - var childrenKey = this.childrenKey, - data = this.data; // @ts-ignore - - return walkTreeData(data, handler, childrenKey, opt); - } - }, { - key: "clone", - value: function clone() { - var opt = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; // opt.afterNodeCreated(newNode, {oldNode: node, index, parent, path}) - - var childrenKey = this.childrenKey; - var td = new TreeData(); - this.walk(function (node, index, parent, path) { - var newNode = Object.assign({}, node); - - if (newNode[childrenKey]) { - newNode[childrenKey] = []; - } - - if (opt.afterNodeCreated) { - opt.afterNodeCreated(newNode, { - oldNode: node, - index: index, - parent: parent, - path: path - }); - } - - td.setPathNode(path, newNode); - }); - return td.data; - } - }, { - key: "rootChildren", - get: function get() { - var childrenKey = this.childrenKey; - var data = this.data; - return isArray(data) ? data : data[childrenKey]; - } - }]); - - return TreeData; - }(); // ## function - // ## 函数 - // if it is function, return result, else return it directly. - - - function resolveValueOrGettter(valueOrGetter) { - var args = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : []; - - if (isFunction(valueOrGetter)) { - return valueOrGetter.apply(void 0, toConsumableArray(args)); - } else { - return valueOrGetter; - } - } - - - function joinFunctionsByNext(funcs) { - var next = function next() {}; - - var _iterator7 = _createForOfIteratorHelper(iterateAll(funcs, { - reverse: true - })), - _step7; - - try { - for (_iterator7.s(); !(_step7 = _iterator7.n()).done;) { - var func = _step7.value.value; - var currentNext = next; - next = wrapFuncWithNext(func, currentNext); - } - } catch (err) { - _iterator7.e(err); - } finally { - _iterator7.f(); - } - - return next; - - function wrapFuncWithNext(func, next) { - return function () { - for (var _len4 = arguments.length, args = new Array(_len4), _key5 = 0; _key5 < _len4; _key5++) { - args[_key5] = arguments[_key5]; - } - - return func.apply(void 0, [next].concat(args)); - }; - } - } // ## promise - // return NodeList if there are multiple top-level nodes - - - function createElementFromHTML(htmlString) { - var div = document.createElement('div'); - div.innerHTML = htmlString.trim(); - - if (div.childNodes.length > 1) { - return div.childNodes; - } else { - return div.childNodes[0]; - } - } - - function isDescendantOf(el, parent) { - while (true) { - if (el.parentElement == null) { - return false; - } else if (el.parentElement === parent) { - return true; - } else { - el = el.parentElement; - } - } - } - - function removeEl(el) { - if (el.parentNode !== null) { - return el.parentNode.removeChild(el); - } - } // refer: https://stackoverflow.com/questions/871399/cross-browser-method-for-detecting-the-scrolltop-of-the-browser-window - - - function getScroll() { - if (typeof pageYOffset != 'undefined') { - //most browsers except IE before #9 - return { - top: pageYOffset, - left: pageXOffset - }; - } else { - var B = document.body; //IE 'quirks' - - var D = document.documentElement; //IE with doctype - - D = D.clientHeight ? D : B; - return { - top: D.scrollTop, - left: D.scrollLeft - }; - } - } // refer: https://gist.github.com/aderaaij/89547e34617b95ac29d1 - - - function getOffset(el) { - var rect = getBoundingClientRect(el); - var scroll = getScroll(); - return { - x: rect.left + scroll.left, - y: rect.top + scroll.top - }; - } // there is some trap in el.offsetParent, so use this func to fix - - function getBoundingClientRect(el) { - // refer: http://www.51xuediannao.com/javascript/getBoundingClientRect.html - var xy = el.getBoundingClientRect(); - var top = xy.top - document.documentElement.clientTop, - //document.documentElement.clientTop 在IE67中始终为2，其他高级点的浏览器为0 - bottom = xy.bottom, - left = xy.left - document.documentElement.clientLeft, - //document.documentElement.clientLeft 在IE67中始终为2，其他高级点的浏览器为0 - right = xy.right, - width = xy.width || right - left, - //IE67不存在width 使用right - left获得 - height = xy.height || bottom - top; - var x = left; - var y = top; - return { - top: top, - right: right, - bottom: bottom, - left: left, - width: width, - height: height, - x: x, - y: y - }; - } // refer [getBoundingClientRect](#getBoundingClientRect) - - - var getViewportPosition = getBoundingClientRect; // TODO not tested - - function findParent(el, callback) { - var opt = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}; - var cur = opt && opt.withSelf ? el : el.parentElement; - - while (cur) { - var r = callback(cur); - - if (r === 'break') { - return; - } else if (r) { - return cur; - } else { - cur = cur.parentElement; - } - } - } - - function backupAttr(el, name) { - var key = "original_".concat(name); - el[key] = el.getAttribute(name); - } - - function restoreAttr(el, name) { - var key = "original_".concat(name); - var value = el[key]; - - if (value == null) { - el.removeAttribute(name); - } else { - el.setAttribute(name, value); - } - } // source: http://youmightnotneedjquery.com/ - - - function hasClass(el, className) { - if (el.classList) { - return el.classList.contains(className); - } else { - return new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className); - } - } // source: http://youmightnotneedjquery.com/ - - - function addClass(el, className) { - if (!hasClass(el, className)) { - if (el.classList) { - el.classList.add(className); - } else { - el.className += ' ' + className; - } - } - } // source: http://youmightnotneedjquery.com/ - - function onDOM(el, name, handler) { - for (var _len5 = arguments.length, args = new Array(_len5 > 3 ? _len5 - 3 : 0), _key6 = 3; _key6 < _len5; _key6++) { - args[_key6 - 3] = arguments[_key6]; - } - - if (el.addEventListener) { - // 所有主流浏览器，除了 IE 8 及更早 IE版本 - el.addEventListener.apply(el, [name, handler].concat(args)); // @ts-ignore - } else if (el.attachEvent) { - // IE 8 及更早 IE 版本 - // @ts-ignore - el.attachEvent.apply(el, ["on".concat(name), handler].concat(args)); - } - } - - function offDOM(el, name, handler) { - for (var _len6 = arguments.length, args = new Array(_len6 > 3 ? _len6 - 3 : 0), _key7 = 3; _key7 < _len6; _key7++) { - args[_key7 - 3] = arguments[_key7]; - } - - if (el.removeEventListener) { - // 所有主流浏览器，除了 IE 8 及更早 IE版本 - el.removeEventListener.apply(el, [name, handler].concat(args)); // @ts-ignore - } else if (el.detachEvent) { - // IE 8 及更早 IE 版本 - // @ts-ignore - el.detachEvent.apply(el, ["on".concat(name), handler].concat(args)); - } - } - - function findNodeList(list, callback) { - var opt = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}; - var iterator = iterateAll(list, { - reverse: opt.reverse - }); - - var _iterator13 = _createForOfIteratorHelper(iterator), - _step13; - - try { - for (_iterator13.s(); !(_step13 = _iterator13.n()).done;) { - var _step13$value = _step13.value, - value = _step13$value.value, - index = _step13$value.index; - - if (callback(value, index)) { - return value; - } - } - } catch (err) { - _iterator13.e(err); - } finally { - _iterator13.f(); - } - } - - function elementsFromPoint(x, y) { - var args = [x, y]; // @ts-ignore - - var func = document.elementsFromPoint || document.msElementsFromPoint || elementsFromPoint; - return func.apply(document, args); - - function elementsFromPoint(x, y) { - var parents = []; - var parent = void 0; - - do { - if (parent !== document.elementFromPoint(x, y)) { - parent = document.elementFromPoint(x, y); - parents.push(parent); - parent.style.pointerEvents = 'none'; - } else { - parent = false; - } - } while (parent); - - parents.forEach(function (parent) { - return parent.style.pointerEvents = 'all'; - }); - return parents; - } - } - /* scroll to a positon with duration - from https://gist.github.com/andjosh/6764939 - interface options{ - x: number // nullable. don't scroll horizontally when null - y: number // nullable. don't scroll vertically when null - duration: number // default 0 - element: Element // default is the top scrollable element. - beforeEveryFrame: (count: number) => boolean|void // call before requestAnimationFrame execution. return false to stop - } - return stop - */ - - - function scrollTo(options) { - if (!options.element) { - options.element = document.scrollingElement || document.documentElement; - } - - if (options.duration == null) { - options.duration = 0; - } - - var x = options.x, - y = options.y, - duration = options.duration, - element = options.element; - var requestAnimationFrameId; - var count = 0; - - var startY = element.scrollTop, - changeY = y - startY, - startX = element.scrollLeft, - changeX = x - startX, - startDate = +new Date(), - animateScroll = function animateScroll() { - if (options.beforeEveryFrame && options.beforeEveryFrame(count) === false) { - return; - } - - var currentDate = new Date().getTime(); - var changedTime = currentDate - startDate; - - if (y != null) { - element.scrollTop = parseInt(calc(startY, changeY, changedTime, duration)); - } - - if (x != null) { - element.scrollLeft = parseInt(calc(startX, changeX, changedTime, duration)); - } - - if (changedTime < duration) { - requestAnimationFrameId = requestAnimationFrame(animateScroll); - } else { - if (y != null) { - element.scrollTop = y; - } - - if (x != null) { - element.scrollLeft = x; - } - } - - count++; - }; - - var stop = function stop() { - cancelAnimationFrame(requestAnimationFrameId); - }; - - animateScroll(); // return stop - - return stop; - - function calc(startValue, changeInValue, changedTime, duration) { - return startValue + changeInValue * (changedTime / duration); - } - } // ### DOM structure - - - function insertBefore(el, target) { - target.parentElement.insertBefore(el, target); - } - - function insertAfter(el, target) { - target.parentElement.insertBefore(el, target.nextSibling); - } - - function prependTo(el, target) { - target.insertBefore(el, target.firstChild); - } - - function appendTo(el, target) { - target.appendChild(el); - } // ## Date - - function binarySearch(arr, callback) { - var opt = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}; - opt = Object.assign({ - start: 0, - end: arr.length - 1, - maxTimes: 1000 - }, opt); - var _opt = opt, - start = _opt.start, - end = _opt.end; - var _opt2 = opt, - returnNearestIfNoHit = _opt2.returnNearestIfNoHit, - maxTimes = _opt2.maxTimes; - var midNum; - var mid; - - if (start == null) { - start = 0; - end = arr.length - 1; - } - - var i = 0; - var r; - - while (start >= 0 && start <= end) { - if (i >= maxTimes) { - throw Error("binarySearch: loop times is over ".concat(maxTimes, ", you can increase the limit.")); - } - - midNum = Math.floor((end - start) / 2 + start); - mid = arr[midNum]; - r = callback(mid, i); - - if (r > 0) { - end = midNum - 1; - } else if (r < 0) { - start = midNum + 1; - } else { - return { - index: midNum, - value: mid, - count: i + 1, - hit: true - }; - } - - i++; - } - - return returnNearestIfNoHit ? { - index: midNum, - value: mid, - count: i + 1, - hit: false, - greater: r > 0 - } : null; - } // - - function waitTime(milliseconds, callback) { - return new Promise(function (resolve, reject) { - setTimeout(function () { - callback && callback(); - resolve(); - }, milliseconds); - }); - } - - var Cache = /*#__PURE__*/function () { - function Cache() { - classCallCheck(this, Cache); - - this.store = {}; - } - - createClass(Cache, [{ - key: "has", - value: function has(name) { - return this.store.hasOwnProperty(name); - } - }, { - key: "remember", - value: function remember(name, getter) { - if (!this.has(name)) { - this.store[name] = { - value: getter() - }; - } - - return this.store[name].value; - } - }, { - key: "forget", - value: function forget(name) { - if (name) { - if (this.has(name)) { - delete this.store[name]; - } - } else { - this.store = {}; - } - } - }]); - - return Cache; - }(); // attach cached getters to an object; can attach to self - - - function attachCache(obj, toCache) { - var cache = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : new Cache(); - - var _loop3 = function _loop3(key) { - var getter = toCache[key]; - Object.defineProperty(obj, key, { - get: function get() { - var _this9 = this; - - return cache.remember(key, function () { - return getter.call(_this9); - }); - } - }); - }; - - for (var key in toCache) { - _loop3(key); - } - } // for animation - - /*! - * vue-functions v2.0.7-beta.1 - * (c) phphe (https://github.com/phphe) - * Homepage: undefined - * Released under the MIT License. - */ - /** - * [updatablePropsEvenUnbound description] - * @param {[type]} props [object or getter] - * @return {[type]} [description] - * props eg: { - value: {$localName: 'current', $localSetter: (value, vm)}, - } - default localName is `localProps_${name}` - */ - - - function updatablePropsEvenUnbound(props) { - if (isFunction(props)) { - props = props(); - } else { - // object - props = Object.assign({}, props); - } - - var standardProps = {}; // without key starts with `$` - - var _loop = function _loop(name) { - var prop = props[name]; // complete 补全选项 - - if (!prop.$localName) { - prop.$localName = "localProps_".concat(name); - } - - if (!prop.$localSetter) { - prop.$localSetter = function (value) { - return value; - }; - } // make standardProp - - - var standardProp = {}; - standardProps[name] = standardProp; - Object.keys(props[name]).forEach(function (key) { - if (key[0] !== '$') { - standardProp[key] = prop[key]; - } - }); - }; - - for (var name in props) { - _loop(name); - } - - var component = { - props: standardProps, - computed: {}, - watch: {} - }; - - component.data = function () { - var t = { - localValueOfUpdatableProps: {} - }; - - for (var _i = 0, _Object$keys = Object.keys(props); _i < _Object$keys.length; _i++) { - var _name = _Object$keys[_i]; - t.localValueOfUpdatableProps[_name] = this[_name]; - } - - return t; - }; - - var _loop2 = function _loop2() { - var name = _Object$keys2[_i2]; - var prop = props[name]; - - component.watch[name] = function (value) { - this.localValueOfUpdatableProps[name] = prop.$localSetter(value, this); - }; - - var localName = prop.$localName; - component.computed[localName] = { - get: function get() { - return this.localValueOfUpdatableProps[name]; - }, - set: function set(value) { - if (name === 'value') { - this.$emit('input', value); - } else { - this.$emit("update:".concat(name), value); - } - - this.localValueOfUpdatableProps[name] = prop.$localSetter(value, this); - } - }; - }; - - for (var _i2 = 0, _Object$keys2 = Object.keys(props); _i2 < _Object$keys2.length; _i2++) { - _loop2(); - } - - return component; - } - - var hookHelper = { - methods: { - // todo extract hooks to vue-functions - // get hooks in this._hooks, without which in props - _getNonPropHooksByName: function _getNonPropHooksByName(name) { - if (this._hooks) { - return this._hooks[name]; - } - }, - addHook: function addHook(name, func) { - if (!this._getNonPropHooksByName(name)) { - if (!this._hooks) { - this._hooks = {}; - } - - if (!this._hooks[name]) { - this._hooks[name] = []; - } - } - - this._hooks[name].push(func); - }, - removeHook: function removeHook(name, func) { - var hooks = this._getNonPropHooksByName(name); - - if (hooks) { - arrayRemove(hooks, func); - } - }, - hasHook: function hasHook(name) { - return this._getNonPropHooksByName(name) || this[name]; - }, - executeHook: function executeHook(name, args) { - var _this2 = this; - - var hooks = this._getNonPropHooksByName(name); - - hooks = hooks ? hooks.slice() : []; - - if (this[name] && isFunction(this[name])) { - hooks.push(function (next) { - for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { - args[_key - 1] = arguments[_key]; - } - - return _this2[name].apply(_this2, args); - }); - } - - return joinFunctionsByNext(hooks).apply(void 0, toConsumableArray(args)); - } - } - }; - - function cloneTreeData(treeData, opt) { - return new TreeData(treeData).clone(opt); - } - function walkTreeData$1(treeData, handler, opt) { - return new TreeData(treeData).walk(handler, opt); - } - function getPureTreeData(treeData) { - var opt = { - afterNodeCreated: function afterNodeCreated(newNode) { - Object.keys(newNode).forEach(function (key) { - if (key[0] === '$') { - delete newNode[key]; - } - }); - } - }; - return cloneTreeData(treeData, opt); - } - - function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; } - - function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } - - var template = function template(h) { - var _this = this; - - // convert undefined to empty str - var noUndefined = function noUndefined(str) { - return str ? str : ''; - }; // tree tpl, to render recursively - - - var childrenListTpl = function childrenListTpl(nodes, parent, parentPath) { - var indentStyle = defineProperty({}, !_this.rtl ? 'paddingLeft' : 'paddingRight', parentPath.length * _this.indent + 'px'); - - var branchTpl = function branchTpl(node, index) { - var path = [].concat(toConsumableArray(parentPath), [index]); - var transitionComponent = _this.foldingTransition || 'transition'; - - var slotDefault = function slotDefault() { - var original = function original() { - if (_this.$scopedSlots.default) { - return _this.$scopedSlots.default({ - node: node, - index: index, - path: path, - tree: _this - }); - } else if (_this.$slots.default) { - return _this.$slots.default; - } else { - return node.text; - } - }; - - if (_this.overrideSlotDefault) { - return _this.overrideSlotDefault({ - node: node, - index: index, - path: path, - tree: _this - }, original); - } else { - return original(); - } - }; - - var nodebackStyle = indentStyle; - - if (node.$nodeBackStyle) { - nodebackStyle = _objectSpread(_objectSpread({}, nodebackStyle), node.$nodeBackStyle); - } - - return h("div", { - "class": "tree-branch ".concat(noUndefined(node.$branchClass), " ").concat(noUndefined(node.$hidden && 'he-tree--hidden')), - "style": node.$branchStyle || {}, - "attrs": { - "data-tree-node-path": path.join(',') - } - }, [h("div", { - "class": "tree-node-back ".concat(noUndefined(node.$nodeBackClass)), - "style": nodebackStyle || {} - }, [h("div", { - "class": "tree-node ".concat(noUndefined(node.$nodeClass)), - "style": node.$nodeStyle || {} - }, [slotDefault()])]), (node.children && node.children.length) > 0 && h(transitionComponent, { - "attrs": { - "name": _this.$props.foldingTransitionName - } - }, [!node.$folded && childrenListTpl(node.children, node, path)])]); - }; - - return h("div", { - "class": "tree-children ".concat(noUndefined(parent === _this.rootNode && 'tree-root'), " ").concat(noUndefined(parent.$childrenClass)), - "style": parent.$childrenStyle || {} - }, [nodes.map(branchTpl)]); - }; - - return h("div", { - "class": "he-tree ".concat(this.treeClass, " ").concat(noUndefined(this.rtl && 'he-tree--rtl')), - "attrs": { - "data-tree-id": this.treeId - } - }, [this.blockHeader && this.blockHeader(), childrenListTpl(this.rootNode.children, this.rootNode, []), this.blockFooter && this.blockFooter()]); - }; - - var trees = {}; - var Tree = { - render: template, - mixins: [updatablePropsEvenUnbound({ - value: { - $localName: 'treeData', - required: true - } - }), hookHelper], - props: { - indent: { - type: Number, - default: 20 - }, - rtl: { - type: Boolean - }, - rootNode: { - default: function _default(is) { - return {}; - } - } - }, - // components: {}, - data: function data() { - return { - trees: trees, - treeClass: '', - treeId: randString() - }; - }, - // computed: {}, - watch: { - treeData: { - immediate: true, - handler: function handler(treeData) { - this._TreeDataHelper = new TreeData(this.treeData); - } - } - }, - methods: { - iteratePath: function iteratePath(path, opt) { - return this._TreeDataHelper.iteratePath(path, opt); - }, - getTreeVmByTreeEl: function getTreeVmByTreeEl(treeEl) { - return this.trees[treeEl.getAttribute('data-tree-id')]; - }, - getAllNodesByPath: function getAllNodesByPath(path) { - return this._TreeDataHelper.getAllNodes(path); - }, - getNodeByPath: function getNodeByPath(path) { - return this._TreeDataHelper.getNode(path); - }, - getPathByBranchEl: function getPathByBranchEl(branchEl) { - return branchEl.getAttribute('data-tree-node-path').split(',').map(function (v) { - return parseInt(v); - }); - }, - getBranchElByPath: function getBranchElByPath(path) { - return this.$el.querySelector("[data-tree-node-path='".concat(path.join(','), "']")); - }, - getNodeByBranchEl: function getNodeByBranchEl(branchEl) { - return this.getNodeByPath(this.getPathByBranchEl(branchEl)); - }, - getNodeParentByPath: function getNodeParentByPath(path) { - return this._TreeDataHelper.getNodeParent(path); - }, - removeNodeByPath: function removeNodeByPath(path) { - return this._TreeDataHelper.removeNode(path); - }, - walkTreeData: function walkTreeData(handler, opt) { - return walkTreeData$1(this.treeData, handler, opt); - }, - cloneTreeData: function cloneTreeData$1(opt) { - return cloneTreeData(this.treeData, opt); - }, - // return cloned new tree data without property witch starts with `$` - getPureTreeData: function getPureTreeData$1() { - return getPureTreeData(this.treeData); - } - }, - created: function created() { - var _this2 = this; - - // - var updateRootNode = function updateRootNode() { - _this2.$set(_this2.rootNode, 'children', _this2.treeData); - }; - - this.$watch('rootNode', updateRootNode, { - immediate: true - }); - this.$watch('treeData', updateRootNode, { - immediate: true - }); - }, - mounted: function mounted() { - var _this3 = this; - - // - this.treeId = randString(); - this.$set(this.trees, this.treeId, this); - this.$once('hook:beforeDestroy', function () { - _this3.$delete(_this3.trees, _this3.treeId); - }); - }, - // beforeDestroy() {}, - // - mixPlugins: function mixPlugins(plugins) { - var MixedTree = { - name: 'Tree', - extends: Tree, - mixins: plugins, - mixPlugins: this.mixPlugins - }; - return MixedTree; - } - }; - - function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier - /* server only */ - , shadowMode, createInjector, createInjectorSSR, createInjectorShadow) { - if (typeof shadowMode !== 'boolean') { - createInjectorSSR = createInjector; - createInjector = shadowMode; - shadowMode = false; - } // Vue.extend constructor export interop. - - - var options = typeof script === 'function' ? script.options : script; // render functions - - if (template && template.render) { - options.render = template.render; - options.staticRenderFns = template.staticRenderFns; - options._compiled = true; // functional template - - if (isFunctionalTemplate) { - options.functional = true; - } - } // scopedId - - - if (scopeId) { - options._scopeId = scopeId; - } - - var hook; - - if (moduleIdentifier) { - // server build - hook = function hook(context) { - // 2.3 injection - context = context || // cached call - this.$vnode && this.$vnode.ssrContext || // stateful - this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext; // functional - // 2.2 with runInNewContext: true - - if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') { - context = __VUE_SSR_CONTEXT__; - } // inject component styles - - - if (style) { - style.call(this, createInjectorSSR(context)); - } // register component module identifier for async chunk inference - - - if (context && context._registeredComponents) { - context._registeredComponents.add(moduleIdentifier); - } - }; // used by ssr in case component is cached and beforeCreate - // never gets called - - - options._ssrRegister = hook; - } else if (style) { - hook = shadowMode ? function (context) { - style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot)); - } : function (context) { - style.call(this, createInjector(context)); - }; - } - - if (hook) { - if (options.functional) { - // register for functional component in vue file - var originalRender = options.render; - - options.render = function renderWithStyleInjection(h, context) { - hook.call(context); - return originalRender(h, context); - }; - } else { - // inject component registration as beforeCreate hook - var existing = options.beforeCreate; - options.beforeCreate = existing ? [].concat(existing, hook) : [hook]; - } - } - - return script; - } - - /* script */ - var __vue_script__ = Tree; - /* template */ - - /* style */ - - var __vue_inject_styles__ = undefined; - /* scoped */ - - var __vue_scope_id__ = undefined; - /* module identifier */ - - var __vue_module_identifier__ = undefined; - /* functional template */ - - var __vue_is_functional_template__ = undefined; - /* style inject */ - - /* style inject SSR */ - - /* style inject shadow dom */ - - var __vue_component__ = /*#__PURE__*/normalizeComponent({}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined); - - function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; } - - function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$1(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } - function foldAll(treeData) { - walkTreeData$1(treeData, function (childNode) { - Vue.set(childNode, '$folded', true); - }); - } - function unfoldAll(treeData) { - walkTreeData$1(treeData, function (childNode) { - Vue.set(childNode, '$folded', false); - }); - } - var fold = { - props: { - foldingTransitionName: { - type: String - }, - foldingTransition: {}, - foldAllAfterMounted: { - type: Boolean - } - }, - methods: { - fold: function fold(node, path) { - if (!node.$folded) { - this.$set(node, '$folded', true); - this.$emit('nodeFoldedChanged', node); - } - }, - unfold: function unfold(node, path) { - var opt = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}; - opt = _objectSpread$1({ - foldOthers: false - }, opt); - - if (opt.foldOthers) { - this.foldAll(); - } - - if (node.$folded) { - this.$set(node, '$folded', false); - this.$emit('nodeFoldedChanged', node); - this.$emit('node-folded-changed', node); - } - }, - toggleFold: function toggleFold(node, path, opt) { - if (node.$folded) { - this.unfold(node, path, opt); - } else { - this.fold(node, path, opt); - } - }, - foldAll: function foldAll() { - var _this = this; - - this.walkTreeData(function (childNode) { - _this.fold(childNode); - }); - }, - unfoldAll: function unfoldAll() { - var _this2 = this; - - this.walkTreeData(function (childNode) { - _this2.unfold(childNode, { - unfoldParent: false - }); - }); - } - }, - mounted: function mounted() { - if (this.foldAllAfterMounted) { - this.foldAll(); - } - } - }; - - function _createForOfIteratorHelper$1(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$2(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; } - - function _unsupportedIterableToArray$2(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray$2(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$2(o, minLen); } - - function _arrayLikeToArray$2(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; } - var check = { - props: {}, - methods: { - afterCheckChanged: function afterCheckChanged(node, path) { - var _this = this; - - // update parent - var nodes = this.getAllNodesByPath(path); - var reversedParents = nodes.slice(0, nodes.length - 1); - reversedParents.reverse(); - - var _iterator = _createForOfIteratorHelper$1(reversedParents), - _step; - - try { - for (_iterator.s(); !(_step = _iterator.n()).done;) { - var parent = _step.value; - this.$set(parent, '$checked', parent.children.every(function (child) { - return child.$checked; - })); - } // update children - - } catch (err) { - _iterator.e(err); - } finally { - _iterator.f(); - } - - if (node.children && node.children.length > 0) { - walkTreeData$1(node.children, function (childNode) { - _this.$set(childNode, '$checked', node.$checked); - }); - } - }, - check: function check(node, path) { - this.$set(node, '$checked', true); - this.afterCheckChanged(node, path); - }, - uncheck: function uncheck(node, path) { - this.$set(node, '$checked', false); - this.afterCheckChanged(node, path); - }, - toggleCheck: function toggleCheck(node, path) { - this.$set(node, '$checked', !node.$checked); - this.afterCheckChanged(node, path); - } - } - }; - - function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { - try { - var info = gen[key](arg); - var value = info.value; - } catch (error) { - reject(error); - return; - } - - if (info.done) { - resolve(value); - } else { - Promise.resolve(value).then(_next, _throw); - } - } - - function _asyncToGenerator(fn) { - return function () { - var self = this, - args = arguments; - return new Promise(function (resolve, reject) { - var gen = fn.apply(self, args); - - function _next(value) { - asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); - } - - function _throw(err) { - asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); - } - - _next(undefined); - }); - }; - } - - var asyncToGenerator = _asyncToGenerator; - - /*! - * drag-event-service v1.1.7 - * (c) phphe (https://github.com/phphe) - * Homepage: undefined - * Released under the MIT License. - */ - var events = { - start: ['mousedown', 'touchstart'], - move: ['mousemove', 'touchmove'], - end: ['mouseup', 'touchend'] - }; - var DragEventService = { - isTouch: function isTouch(e) { - return e.type && e.type.startsWith('touch'); - }, - _getStore: function _getStore(el) { - if (!el._wrapperStore) { - el._wrapperStore = []; - } - - return el._wrapperStore; - }, - on: function on(el, name, handler, options) { - var _hp$onDOM, _hp$onDOM2; - - var _resolveOptions = resolveOptions(options), - args = _resolveOptions.args, - mouseArgs = _resolveOptions.mouseArgs, - touchArgs = _resolveOptions.touchArgs; - - var store = this._getStore(el); - - var ts = this; - - var wrapper = function wrapper(e) { - var mouse; - var isTouch = ts.isTouch(e); - - if (isTouch) { - // touch - mouse = { - x: e.changedTouches[0].pageX, - y: e.changedTouches[0].pageY, - pageX: e.changedTouches[0].pageX, - pageY: e.changedTouches[0].pageY, - clientX: e.changedTouches[0].clientX, - clientY: e.changedTouches[0].clientY, - screenX: e.changedTouches[0].screenX, - screenY: e.changedTouches[0].screenY - }; - } else { - // mouse - mouse = { - x: e.pageX, - y: e.pageY, - pageX: e.pageX, - pageY: e.pageY, - clientX: e.clientX, - clientY: e.clientY, - screenX: e.screenX, - screenY: e.screenY - }; - - if (name === 'start' && e.which !== 1) { - // not left button mousedown - return; - } - } - - return handler.call(this, e, mouse); - }; - - store.push({ - handler: handler, - wrapper: wrapper - }); // follow format will cause big bundle size - // 以下写法将会使打包工具认为hp是上下文, 导致打包整个hp - // hp.onDOM(el, events[name][0], wrapper, ...args) - - (_hp$onDOM = onDOM).call.apply(_hp$onDOM, [null, el, events[name][0], wrapper].concat([].concat(toConsumableArray(args), toConsumableArray(mouseArgs)))); - - (_hp$onDOM2 = onDOM).call.apply(_hp$onDOM2, [null, el, events[name][1], wrapper].concat([].concat(toConsumableArray(args), toConsumableArray(touchArgs)))); - }, - off: function off(el, name, handler, options) { - var _resolveOptions2 = resolveOptions(options), - args = _resolveOptions2.args, - mouseArgs = _resolveOptions2.mouseArgs; - - var store = this._getStore(el); - - for (var i = store.length - 1; i >= 0; i--) { - var _store$i = store[i], - handler2 = _store$i.handler, - wrapper = _store$i.wrapper; - - if (handler === handler2) { - var _hp$offDOM, _hp$offDOM2; - - (_hp$offDOM = offDOM).call.apply(_hp$offDOM, [null, el, events[name][0], wrapper].concat([].concat(toConsumableArray(args), toConsumableArray(mouseArgs)))); - - (_hp$offDOM2 = offDOM).call.apply(_hp$offDOM2, [null, el, events[name][1], wrapper].concat([].concat(toConsumableArray(args), toConsumableArray(mouseArgs)))); - - store.splice(i, 1); - } - } - } - }; - - function resolveOptions(options) { - if (!options) { - options = {}; - } - - var args = options.args || []; - var mouseArgs = options.mouseArgs || []; - var touchArgs = options.touchArgs || []; - return { - args: args, - mouseArgs: mouseArgs, - touchArgs: touchArgs - }; - } - - /*! - * draggable-helper v5.0.6 - * (c) phphe (https://github.com/phphe) - * Homepage: undefined - * Released under the MIT License. - */ - - function _createForOfIteratorHelper$2(o) { - if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { - if (Array.isArray(o) || (o = _unsupportedIterableToArray$3(o))) { - var i = 0; - - var F = function F() {}; - - return { - s: F, - n: function n() { - if (i >= o.length) return { - done: true - }; - return { - done: false, - value: o[i++] - }; - }, - e: function e(_e) { - throw _e; - }, - f: F - }; - } - - throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); - } - - var it, - normalCompletion = true, - didErr = false, - err; - return { - s: function s() { - it = o[Symbol.iterator](); - }, - n: function n() { - var step = it.next(); - normalCompletion = step.done; - return step; - }, - e: function e(_e2) { - didErr = true; - err = _e2; - }, - f: function f() { - try { - if (!normalCompletion && it.return != null) it.return(); - } finally { - if (didErr) throw err; - } - } - }; - } - - function _unsupportedIterableToArray$3(o, minLen) { - if (!o) return; - if (typeof o === "string") return _arrayLikeToArray$3(o, minLen); - var n = Object.prototype.toString.call(o).slice(8, -1); - if (n === "Object" && o.constructor) n = o.constructor.name; - if (n === "Map" || n === "Set") return Array.from(n); - if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$3(o, minLen); - } - - function _arrayLikeToArray$3(arr, len) { - if (len == null || len > arr.length) len = arr.length; - - for (var i = 0, arr2 = new Array(len); i < len; i++) { - arr2[i] = arr[i]; - } - - return arr2; - } - /* Default export, a function. - ```js - import draggableHelper from 'draggable-helper' - draggableHelper(listenerElement, options) - ``` - Arguments: - listenerElement: HTMLElement. The element to bind mouse and touch event listener. - options: Options. Optional. - */ - - /* 默认导出, 一个方法. - ```js - import draggableHelper from 'draggable-helper' - draggableHelper(listenerElement, options) - ``` - 参数: - listenerElement: HTMLElement. 绑定鼠标和触摸事件监听器的HTML元素. - options: Options. 可选. - */ - - - var _edgeScroll = { - afterFirstMove: function afterFirstMove(store, opt) {}, - afterMove: function afterMove(store, opt) {}, - afterDrop: function afterDrop(store, opt) {} - }; - - function index(listenerElement) { - var opt = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; - var store; // set default value of options - // 设置options的默认值 - - objectAssignIfKeyNull(opt, defaultOptions); // define the event listener of mousedown and touchstart - // 定义mousedown和touchstart事件监听器 - - var onMousedownOrTouchStart = function onMousedownOrTouchStart(e, mouse) { - // execute native event hooks - if (!DragEventService.isTouch(e)) { - opt.onmousedown && opt.onmousedown(e); - } else { - opt.ontouchstart && opt.ontouchstart(e); - } - - var target = e.target; // check if triggered by ignore tags - // 检查是否由忽略的标签名触发 - - if (opt.ingoreTags.includes(target.tagName)) { - return; - } // check if trigger element and its parent has undraggable class name - // 检查触发事件的元素和其与element之间的父级是否有不允许拖动的类名 - - - if (hasClass(target, opt.undraggableClassName)) { - return; - } - - var isParentUndraggable = findParent(target, function (el) { - if (hasClass(el, opt.undraggableClassName)) { - return true; - } - - if (el === listenerElement) { - return 'break'; - } - }); - - if (isParentUndraggable) { - return; - } // Initialize store. Store start event, initial position - // 初始化store. 存储开始事件, 事件触发坐标 - - - store = JSON.parse(JSON.stringify(initialStore)); - store.startEvent = e; - store.listenerElement = listenerElement; - store.directTriggerElement = target; - store.initialMouse = Object.assign({}, mouse); // get triggerElement - - var triggerElementIsMovedOrClonedElement = false; - - if (opt.getTriggerElement) { - var el = opt.getTriggerElement(store.directTriggerElement, store); - - if (!el) { - return; - } - - store.triggerElement = el; - } else if (opt.triggerClassName) { - var triggerElement; - - var _iterator = _createForOfIteratorHelper$2(toArrayIfNot(opt.triggerClassName)), - _step; - - try { - var _loop = function _loop() { - var className = _step.value; - triggerElement = findParent(store.directTriggerElement, function (el) { - if (hasClass(el, className)) { - return true; - } - - if (el === listenerElement) { - return 'break'; - } - }, { - withSelf: true - }); - - if (triggerElement) { - return "break"; - } - }; - - for (_iterator.s(); !(_step = _iterator.n()).done;) { - var _ret = _loop(); - - if (_ret === "break") break; - } - } catch (err) { - _iterator.e(err); - } finally { - _iterator.f(); - } - - if (!triggerElement) { - return; - } - - store.triggerElement = triggerElement; - } else { - triggerElementIsMovedOrClonedElement = true; - } // get movedOrClonedElement - - - store.movedOrClonedElement = opt.getMovedOrClonedElement ? opt.getMovedOrClonedElement(store.directTriggerElement, store, opt) : listenerElement; - - if (!store.movedOrClonedElement) { - return; - } - - if (triggerElementIsMovedOrClonedElement) { - store.triggerElement = store.movedOrClonedElement; - } // check if trigger element is same with directTriggerElement when options.triggerBySelf is true - // options.triggerBySelf为true时, 检查触发事件的元素是否是允许触发的元素 - - - if (opt.triggerBySelf && store.triggerElement !== store.directTriggerElement) { - return; - } // prevent text be selected - // 阻止文字被选中 - - - if (!DragEventService.isTouch(e)) { - // Do not prevent when touch. Or the elements within the node can not trigger click event. - // 不要在触摸时阻止事件. 否则将导致节点内的元素不触发点击事件. - if (opt.preventTextSelection) { - e.preventDefault(); - } - } // listen mousemove and touchmove - // 监听mousemove和touchmove - - - DragEventService.on(document, 'move', onMousemoveOrTouchMove, { - touchArgs: [{ - passive: false - }] - }); // listen mouseup and touchend - // 监听mouseup和touchend - - DragEventService.on(window, 'end', onMouseupOrTouchEnd); - }; // bind mousedown or touchstart event listener - // 绑定mousedown和touchstart事件监听器 - - - DragEventService.on(listenerElement, 'start', onMousedownOrTouchStart, { - touchArgs: [{ - passive: true - }] - }); // define the event listener of mousemove and touchmove - // 定义mousemove和touchmove事件监听器 - - var onMousemoveOrTouchMove = function onMousemoveOrTouchMove(e, mouse) { - // execute native event hooks - if (!DragEventService.isTouch(e)) { - opt.onmousemove && opt.onmousemove(e); - } else { - opt.ontouchmove && opt.ontouchmove(e); - } // - - - var _store = store, - movedOrClonedElement = _store.movedOrClonedElement; // calc move and attach related info to store - // 计算move并附加相关信息到store - - var move = store.move = { - x: mouse.clientX - store.initialMouse.clientX, - y: mouse.clientY - store.initialMouse.clientY - }; - store.moveEvent = e; - store.mouse = mouse; - - if (DragEventService.isTouch(e)) { - // prevent page scroll when touch. - // 当触摸时阻止屏幕被拖动. - e.preventDefault(); - } else { - // prevent text be selected - // 阻止文字被选中 - if (opt.preventTextSelection) { - e.preventDefault(); - } - } // first move - // 第一次移动 - - - if (store.movedCount === 0) { - // check if min displacement exceeded. - // 检查是否达到最小位移 - if (opt.minDisplacement) { - var x2 = Math.pow(move.x, 2); - var y2 = Math.pow(move.y, 2); - var dtc = Math.pow(x2 + y2, 0.5); - - if (dtc < opt.minDisplacement) { - return; - } - } // resolve elements - - - var movedElement = opt.clone ? movedOrClonedElement.cloneNode(true) : movedOrClonedElement; - var initialPosition = getViewportPosition(movedOrClonedElement); // attach elements and initialPosition to store - // 附加元素和初始位置到store - - store.movedOrClonedElement = movedOrClonedElement; - store.movedElement = movedElement; - store.initialPositionRelativeToViewport = initialPosition; - store.initialPosition = initialPosition; // define the function to update moved element style - // 定义更新移动元素样式的方法 - - var updateMovedElementStyle = function updateMovedElementStyle() { - if (opt.clone) { - store.movedOrClonedElement.parentElement.appendChild(movedElement); - } - - var size = getBoundingClientRect(movedElement); - var style = { - width: "".concat(Math.ceil(size.width), "px"), - height: "".concat(Math.ceil(size.height), "px"), - zIndex: 9999, - opacity: 0.8, - position: 'fixed', - left: initialPosition.x + 'px', - top: initialPosition.y + 'px', - pointerEvents: 'none' - }; - backupAttr(movedElement, 'style'); - - for (var key in style) { - movedElement.style[key] = style[key]; - } - - backupAttr(movedElement, 'class'); - addClass(movedElement, opt.draggingClassName); - /* - check if the changed position is expected and correct it. about stacking context. - 当某父元素使用了transform属性时, fixed不再以窗口左上角为坐标. 以下功能是在第一次移动后, 检查元素实际位置和期望位置是否相同, 不同则说明坐标系不是期望的. 则把初始位置减去偏移, 无论任何父元素导致了层叠上下文问题, 都能正确显示. - */ - - var nowPosition = getViewportPosition(movedElement); - - if (nowPosition.x !== initialPosition.x) { - initialPosition.x = initialPosition.x - (nowPosition.x - initialPosition.x); - initialPosition.y = initialPosition.y - (nowPosition.y - initialPosition.y); - movedElement.style.left = initialPosition.x + 'px'; - movedElement.style.top = initialPosition.y + 'px'; - } - }; - - store.updateMovedElementStyle = updateMovedElementStyle; // call hook beforeFirstMove, beforeMove - - if (opt.beforeFirstMove && opt.beforeFirstMove(store, opt) === false) { - return; - } - - if (opt.beforeMove && opt.beforeMove(store, opt) === false) { - return; - } // try to update moved element style - // 尝试更新移动元素样式 - - - if (!opt.updateMovedElementStyleManually) { - store.updateMovedElementStyle(); - } - - _edgeScroll.afterFirstMove(store, opt); - - opt.afterFirstMove && opt.afterFirstMove(store, opt); - } // Not the first move - // 非第一次移动 - else { - // define the function to update moved element style - // 定义更新移动元素样式的方法 - var _updateMovedElementStyle = function _updateMovedElementStyle() { - Object.assign(store.movedElement.style, { - left: store.initialPosition.x + move.x + 'px', - top: store.initialPosition.y + move.y + 'px' - }); - }; - - store.updateMovedElementStyle = _updateMovedElementStyle; // call hook beforeMove - - if (opt.beforeMove && opt.beforeMove(store, opt) === false) { - return; - } // try to update moved element style - // 尝试更新移动元素样式 - - - if (!opt.updateMovedElementStyleManually) { - store.updateMovedElementStyle(); - } - } - - _edgeScroll.afterMove(store, opt); - - store.movedCount++; - opt.afterMove && opt.afterMove(store, opt); - }; // define the event listener of mouseup and touchend - // 定义mouseup和touchend事件监听器 - - - var onMouseupOrTouchEnd = function onMouseupOrTouchEnd(e) { - // execute native event hooks - if (!DragEventService.isTouch(e)) { - opt.onmousedown && opt.onmousedown(e); - } else { - opt.ontouchend && opt.ontouchend(e); - } // cancel listening mousemove, touchmove, mouseup, touchend - // 取消监听事件mousemove, touchmove, mouseup, touchend - - - DragEventService.off(document, 'move', onMousemoveOrTouchMove, { - touchArgs: [{ - passive: false - }] - }); - DragEventService.off(window, 'end', onMouseupOrTouchEnd); // - - if (store.movedCount === 0) { - return; - } - - store.endEvent = e; - var _store2 = store, - movedElement = _store2.movedElement; // define the function to update moved element style - // 定义更新移动元素样式的方法 - - var updateMovedElementStyle = function updateMovedElementStyle() { - restoreAttr(movedElement, 'style'); - restoreAttr(movedElement, 'class'); - - if (opt.clone) { - movedElement.parentElement.removeChild(movedElement); - } - }; - - store.updateMovedElementStyle = updateMovedElementStyle; // call hook beforeDrop - - if (opt.beforeDrop && opt.beforeDrop(store, opt) === false) { - return; - } // try to update moved element style - // 尝试更新移动元素样式 - - - if (!opt.updateMovedElementStyleManually) { - updateMovedElementStyle(); - } - - _edgeScroll.afterDrop(store, opt); - - opt.afterDrop && opt.afterDrop(store, opt); - }; // define the destroy function - // 定义销毁/退出的方法 - - - var destroy = function destroy() { - DragEventService.off(listenerElement, 'start', onMousedownOrTouchStart, { - touchArgs: [{ - passive: true - }] - }); - DragEventService.off(document, 'move', onMousemoveOrTouchMove, { - touchArgs: [{ - passive: false - }] - }); - DragEventService.off(window, 'end', onMouseupOrTouchEnd); - }; // - - - return { - destroy: destroy, - options: opt - }; - } // available options and default options value - // 可用选项和默认选项值 - - - var defaultOptions = { - ingoreTags: ['INPUT', 'TEXTAREA', 'SELECT', 'OPTGROUP', 'OPTION'], - undraggableClassName: 'undraggable', - minDisplacement: 10, - draggingClassName: 'dragging', - clone: false, - updateMovedElementStyleManually: false, - preventTextSelection: true, - edgeScrollTriggerMargin: 50, - edgeScrollSpeed: 0.35, - edgeScrollTriggerMode: 'top_left_corner' - }; // Info after event triggered. Created when mousedown or touchstart, destroied after mouseup or touchend. - // 事件触发后的相关信息. mousedown或touchstart时创建, mouseup或touchend后销毁. - - var initialStore = { - movedCount: 0 - }; // edge scroll - // 边缘滚动 - - var stopHorizontalScroll, stopVerticalScroll; - - _edgeScroll.afterMove = function (store, opt) { - if (!opt.edgeScroll) { - return; - } - - var margin = opt.edgeScrollTriggerMargin; - stopOldScrollAnimation(); // get triggerPoint. The point trigger edge scroll. - - var triggerPoint = { - x: store.mouse.clientX, - y: store.mouse.clientY - }; - - if (opt.edgeScrollTriggerMode === 'top_left_corner') { - var vp = getViewportPosition(store.movedElement); - triggerPoint = { - x: vp.x, - y: vp.y - }; - } // - - - var foundHorizontal, foundVertical, prevElement, horizontalDir, verticalDir; - var findInElements; - var cachedElementsFromPoint; // find x container - - var minScrollableDisplacement = 10; - - if (opt.edgeScrollSpecifiedContainerX) { - var containerX; - - if (typeof opt.edgeScrollSpecifiedContainerX === 'function') { - containerX = opt.edgeScrollSpecifiedContainerX(store, opt); - } else { - containerX = opt.edgeScrollSpecifiedContainerX; - } - - if (containerX) { - findInElements = [containerX]; - } - } - - if (!findInElements) { - findInElements = elementsFromPoint(triggerPoint.x, triggerPoint.y); - cachedElementsFromPoint = findInElements; - } - - var _iterator2 = _createForOfIteratorHelper$2(findInElements), - _step2; - - try { - for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) { - var itemEl = _step2.value; - - if (prevElement && !isDescendantOf(prevElement, itemEl)) { - // itemEl is being covered by other elements - // itemEl被其他元素遮挡 - continue; - } - - var t = minScrollableDisplacement; // min scrollable displacement. 最小可滚动距离, 小于此距离不触发滚动. - - if (!foundHorizontal) { - if (itemEl.scrollWidth > itemEl.clientWidth) { - var _vp = fixedGetViewportPosition(itemEl); - - if (triggerPoint.x <= _vp.left + margin) { - if (scrollableDisplacement(itemEl, 'left') > t && isScrollable(itemEl, 'x')) { - foundHorizontal = itemEl; - horizontalDir = 'left'; - } - } else if (triggerPoint.x >= _vp.left + itemEl.clientWidth - margin) { - if (scrollableDisplacement(itemEl, 'right') > t && isScrollable(itemEl, 'x')) { - foundHorizontal = itemEl; - horizontalDir = 'right'; - } - } - } - } - - if (foundHorizontal) { - break; - } - - prevElement = itemEl; - } - } catch (err) { - _iterator2.e(err); - } finally { - _iterator2.f(); - } - - prevElement = null; // find y container - - findInElements = null; - - if (opt.edgeScrollSpecifiedContainerY) { - var containerY; - - if (typeof opt.edgeScrollSpecifiedContainerY === 'function') { - containerY = opt.edgeScrollSpecifiedContainerY(store, opt); - } else { - containerY = opt.edgeScrollSpecifiedContainerY; - } - - if (containerY) { - findInElements = [containerY]; - } - } - - if (!findInElements) { - findInElements = cachedElementsFromPoint || elementsFromPoint(triggerPoint.x, triggerPoint.y); - } - - var _iterator3 = _createForOfIteratorHelper$2(findInElements), - _step3; - - try { - for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) { - var _itemEl = _step3.value; - - if (prevElement && !isDescendantOf(prevElement, _itemEl)) { - // itemEl is being covered by other elements - // itemEl被其他元素遮挡 - continue; - } - - var _t = minScrollableDisplacement; // min scrollable displacement. 最小可滚动距离, 小于此距离不触发滚动. - - if (!foundVertical) { - if (_itemEl.scrollHeight > _itemEl.clientHeight) { - var _vp2 = fixedGetViewportPosition(_itemEl); - - if (triggerPoint.y <= _vp2.top + margin) { - if (scrollableDisplacement(_itemEl, 'up') > _t && isScrollable(_itemEl, 'y')) { - foundVertical = _itemEl; - verticalDir = 'up'; - } - } else if (triggerPoint.y >= _vp2.top + _itemEl.clientHeight - margin) { - if (scrollableDisplacement(_itemEl, 'down') > _t && isScrollable(_itemEl, 'y')) { - foundVertical = _itemEl; - verticalDir = 'down'; - } - } - } - } - - if (foundVertical) { - break; - } - - prevElement = _itemEl; - } // scroll - - } catch (err) { - _iterator3.e(err); - } finally { - _iterator3.f(); - } - - if (foundHorizontal) { - if (horizontalDir === 'left') { - stopHorizontalScroll = scrollTo({ - x: 0, - element: foundHorizontal, - duration: scrollableDisplacement(foundHorizontal, 'left') / opt.edgeScrollSpeed - }); - } else { - stopHorizontalScroll = scrollTo({ - x: foundHorizontal.scrollWidth - foundHorizontal.clientWidth, - element: foundHorizontal, - duration: scrollableDisplacement(foundHorizontal, 'right') / opt.edgeScrollSpeed - }); - } - } - - if (foundVertical) { - if (verticalDir === 'up') { - stopVerticalScroll = scrollTo({ - y: 0, - element: foundVertical, - duration: scrollableDisplacement(foundVertical, 'up') / opt.edgeScrollSpeed - }); - } else { - stopVerticalScroll = scrollTo({ - y: foundVertical.scrollHeight - foundVertical.clientHeight, - element: foundVertical, - duration: scrollableDisplacement(foundVertical, 'down') / opt.edgeScrollSpeed - }); - } - } // is element scrollable in a direction - // 元素某方向是否可滚动 - - - function isScrollable(el, dir) { - var style = getComputedStyle(el); - var key = "overflow-".concat(dir); // document.documentElement is special - - var special = document.scrollingElement || document.documentElement; - - if (el === special) { - return style[key] === 'visible' || style[key] === 'auto' || style[key] === 'scroll'; - } - - return style[key] === 'auto' || style[key] === 'scroll'; - } // scrollable displacement of element in a direction - // 元素某方向可滚动距离 - - - function scrollableDisplacement(el, dir) { - if (dir === 'up') { - return el.scrollTop; - } else if (dir === 'down') { - return el.scrollHeight - el.scrollTop - el.clientHeight; - } else if (dir === 'left') { - return el.scrollLeft; - } else if (dir === 'right') { - return el.scrollWidth - el.scrollLeft - el.clientWidth; - } - } - - function fixedGetViewportPosition(el) { - var r = getViewportPosition(el); // document.documentElement is special - - var special = document.scrollingElement || document.documentElement; - - if (el === special) { - r.top = 0; - r.left = 0; - } - - return r; - } - }; - - _edgeScroll.afterDrop = function (store, opt) { - if (!opt.edgeScroll) { - return; - } - - stopOldScrollAnimation(); - }; // stop old scroll animation - // 结束之前的滚动动画 - - - function stopOldScrollAnimation() { - if (stopHorizontalScroll) { - stopHorizontalScroll(); - stopHorizontalScroll = null; - } - - if (stopVerticalScroll) { - stopVerticalScroll(); - stopVerticalScroll = null; - } - } - - function doDraggableDecision (_ref) { - var conditions = _ref.conditions, - doAction = _ref.doAction; - - // decision start ================================= - if (conditions['no closest'] === true) { - doAction('append to root'); - } else if (conditions['no closest'] === false) { - if (conditions['closest is top'] === true) { - if (conditions['on closest middle'] === true) { - doAction('insert before'); - } else if (conditions['on closest middle'] === false) { - if (conditions['at closest indent right'] === true) { - doAction('prepend'); - } else if (conditions['at closest indent right'] === false) { - if (conditions['closest is placeholder'] === true) { - doAction('insert after'); - } else if (conditions['closest is placeholder'] === false) { - if (conditions['closest has children excluding placeholder movingEl'] === true) { - doAction('prepend'); - } else if (conditions['closest has children excluding placeholder movingEl'] === false) { - doAction('insert after'); - } - } - } - } - } else if (conditions['closest is top'] === false) { - if (conditions['on closest middle'] === true) { - if (conditions['at closest indent right'] === false) { - if (conditions['at closest left'] === false) { - if (conditions['closest is placeholder'] === false) { - if (conditions['closest has next'] === true) { - if (conditions['closest has children excluding placeholder movingEl'] === false) { - doAction('insert after'); - } else if (conditions['closest has children excluding placeholder movingEl'] === true) { - doAction('prepend'); - } - } else if (conditions['closest has next'] === false) { - if (conditions['closest has children excluding placeholder movingEl'] === true) { - doAction('prepend'); - } else if (conditions['closest has children excluding placeholder movingEl'] === false) { - doAction('insert after'); - } - } - } else if (conditions['closest is placeholder'] === true) { - doAction('nothing'); - } - } else if (conditions['at closest left'] === true) { - if (conditions['closest is placeholder'] === true) { - if (conditions['no aboveBranch'] === true) { - doAction('nothing'); - } else if (conditions['no aboveBranch'] === false) { - doAction('after above'); - } - } else if (conditions['closest is placeholder'] === false) { - if (conditions['closest has children excluding placeholder movingEl'] === false) { - doAction('insert after'); - } else if (conditions['closest has children excluding placeholder movingEl'] === true) { - doAction('prepend'); - } - } - } - } else if (conditions['at closest indent right'] === true) { - if (conditions['closest is placeholder'] === false) { - if (conditions['closest has next'] === true) { - if (conditions['closest has children excluding placeholder movingEl'] === false) { - doAction('prepend'); - } else if (conditions['closest has children excluding placeholder movingEl'] === true) { - if (conditions['closest is top excluding placeholder'] === true) { - doAction('insert before'); - } else if (conditions['closest is top excluding placeholder'] === false) { - doAction('prepend'); - } - } - } else if (conditions['closest has next'] === false) { - doAction('prepend'); - } - } else if (conditions['closest is placeholder'] === true) { - if (conditions['no aboveBranch'] === true) { - if (conditions['closest has prev'] === false) { - doAction('nothing'); - } else if (conditions['closest has prev'] === true) { - doAction('append to prev'); - } - } else if (conditions['no aboveBranch'] === false) { - if (conditions['closest has prev'] === true) { - doAction('append to prev'); - } else if (conditions['closest has prev'] === false) { - doAction('nothing'); - } - } - } - } - } else if (conditions['on closest middle'] === false) { - if (conditions['at closest indent right'] === false) { - if (conditions['at closest left'] === false) { - if (conditions['closest is placeholder'] === false) { - if (conditions['closest has children excluding placeholder movingEl'] === true) { - doAction('prepend'); - } else if (conditions['closest has children excluding placeholder movingEl'] === false) { - doAction('insert after'); - } - } else if (conditions['closest is placeholder'] === true) { - doAction('nothing'); - } - } else if (conditions['at closest left'] === true) { - if (conditions['closest is placeholder'] === true) { - if (conditions['no aboveBranch'] === false) { - doAction('after above'); - } else if (conditions['no aboveBranch'] === true) { - doAction('nothing'); - } - } else if (conditions['closest is placeholder'] === false) { - if (conditions['closest has next'] === false) { - if (conditions['closest has children excluding placeholder movingEl'] === false) { - doAction('insert after'); - } else if (conditions['closest has children excluding placeholder movingEl'] === true) { - doAction('prepend'); - } - } else if (conditions['closest has next'] === true) { - if (conditions['closest has children excluding placeholder movingEl'] === true) { - doAction('prepend'); - } else if (conditions['closest has children excluding placeholder movingEl'] === false) { - doAction('insert after'); - } - } - } - } - } else if (conditions['at closest indent right'] === true) { - if (conditions['closest is placeholder'] === true) { - if (conditions['no aboveBranch'] === true) { - if (conditions['closest has prev'] === false) { - doAction('nothing'); - } else if (conditions['closest has prev'] === true) { - doAction('append to prev'); - } - } else if (conditions['no aboveBranch'] === false) { - if (conditions['closest has prev'] === true) { - doAction('append to prev'); - } else if (conditions['closest has prev'] === false) { - doAction('nothing'); - } - } - } else if (conditions['closest is placeholder'] === false) { - doAction('prepend'); - } - } - } - } - } // decision end ================================= - - } - - function _createForOfIteratorHelper$3(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$4(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; } - - function _unsupportedIterableToArray$4(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray$4(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$4(o, minLen); } - - function _arrayLikeToArray$4(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; } - - function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; } - - function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$2(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } - - function makeTreeDraggable(treeEl) { - var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; - options = _objectSpread$2(_objectSpread$2({}, options), {}, { - treeEl: treeEl - }); - - var _draggableHelper = index(treeEl, { - triggerClassName: options.triggerClass, - triggerBySelf: options.triggerBySelf, - draggingClassName: options.draggingClass, - clone: options.cloneWhenDrag, - edgeScroll: options.edgeScroll, - edgeScrollTriggerMargin: options.edgeScrollTriggerMargin, - edgeScrollSpeed: options.edgeScrollSpeed, - edgeScrollTriggerMode: options.edgeScrollTriggerMode, - edgeScrollSpecifiedContainerX: options.edgeScrollSpecifiedContainerX, - edgeScrollSpecifiedContainerY: options.edgeScrollSpecifiedContainerY, - rtl: options.rtl, - preventTextSelection: options.preventTextSelection, - updateMovedElementStyleManually: true, - getMovedOrClonedElement: function getMovedOrClonedElement(directTriggerElement, store) { - // find closest branch from parents - var el = findParent(store.triggerElement, function (el) { - return hasClass(el, options.branchClass); - }, { - withSelf: true - }); - return el; - }, - beforeFirstMove: function beforeFirstMove(store, dhOptions) { - store.startTreeEl = treeEl; - store.dragBranchEl = store.movedElement; - store.startPath = options.getPathByBranchEl(store.movedOrClonedElement); - - if (options.beforeFirstMove && options.beforeFirstMove(store, dhOptions) === false) { - return false; - } - }, - beforeMove: function beforeMove(store, dhOptions) { - var updatePlaceholderIndent = function updatePlaceholderIndent() { - // set indent of placeholder - var placeholderPath = options.getPathByBranchEl(store.placeholder); - var placeholderNodeBack = store.placeholder.querySelector(".".concat(options.nodeBackClass)); - placeholderNodeBack.style[!options.rtl ? 'paddingLeft' : 'paddingRight'] = (placeholderPath.length - 1) * options.indent + 'px'; // remove tempChildren if empty - - if (store.tempChildren.children.length === 0) { - removeEl(store.tempChildren); - } - }; // first move - // 第一次移动 - - - if (store.movedCount === 0) { - // create placeholder - // 创建占位元素 - var placeholder = createElementFromHTML("\n
\n
\n
\n
\n
\n
\n ")); - insertAfter(placeholder, store.movedOrClonedElement); - store.placeholder = placeholder; - options.afterPlaceholderCreated(store); // create a tree children el to use when can't get childrenEl - - var tempChildren = document.createElement('DIV'); - addClass(tempChildren, options.childrenClass); - store.tempChildren = tempChildren; // update placeholder indent. update moved element style - - updatePlaceholderIndent(); - store.updateMovedElementStyle(); // skip first move - // 跳过第一次移动 - - return; - } // - - - store.updateMovedElementStyle(); // - - store.oneMoveStore = {}; // life cycle: one move - - var movingEl = store.movedElement; // branch - // find closest branch and hovering tree - - var _tree; - - var movingNode = movingEl.querySelector(".".concat(options.nodeClass)); // movingNodeOf and movingNodeRect are not always real. when RTL, there 'x' is top right. when draggingNodePositionMode is mouse, there x and y are mouse position. So don't calc them with their width or height. - // movingNodeOf 和 movingNodeRect并非一直如字面意义是movingNode真实坐标. RTL时, x坐标是右上角. draggingNodePositionMode是mouse时, x和y是鼠标坐标. - - var movingNodeOf = getOffset(movingNode); - var movingNodeRect = getBoundingClientRect(movingNode); - - if (options.draggingNodePositionMode === 'mouse') { - // use mouse position as dragging node position - var moveEvent = store.moveEvent; - movingNodeOf = { - x: moveEvent.pageX, - y: moveEvent.pageY - }; - movingNodeRect = { - x: moveEvent.clientX, - y: moveEvent.clientY - }; - } else if (options.rtl) { - movingNodeOf.x += movingNode.offsetWidth; - movingNodeRect.x += movingNode.offsetWidth; - } // find tree with elementsFromPoint - - - var found; - var firstElement; - - var _iterator = _createForOfIteratorHelper$3(elementsFromPoint(movingNodeRect.x, movingNodeRect.y)), - _step; - - try { - for (_iterator.s(); !(_step = _iterator.n()).done;) { - var itemEl = _step.value; - - if (!firstElement) { - firstElement = itemEl; - } - - if (hasClass(itemEl, options.treeClass)) { - found = itemEl; - break; - } - } // check if the found element is covered by other elements - - } catch (err) { - _iterator.e(err); - } finally { - _iterator.f(); - } - - if (firstElement !== found && !isDescendantOf(firstElement, found)) { - found = null; - } - - _tree = found; - - if (!_tree) { - // out of tree or tree is covered by other elements - return; - } // check if target tree right - - - if (options.filterTargetTree(_tree, store, dhOptions) === false) { - return; - } - - store.targetTreeEl = _tree; // info ======================================== - // life cycle: one move - - var info = { - tree: function tree() { - return _tree; - }, - root: function root() { - return info.tree.querySelector(".".concat(options.childrenClass)); - }, - closestNode: function closestNode() { - var nodes = []; // all visible nodes sort by y - - var walkToGetNodes = function walkToGetNodes(branch) { - // - if (branch !== info.tree) { - var node = branch.querySelector(".".concat(options.nodeClass)); - - if (node && !isElementHidden(node)) { - nodes.push(node); - } - } // - - - var childrenEl = branch.querySelector(".".concat(options.childrenClass)); - - if (childrenEl) { - for (var i = 0; i < childrenEl.children.length; i++) { - var child = childrenEl.children[i]; - - if (child !== movingEl && hasClass(child, options.branchClass)) { - walkToGetNodes(child); - } - } - } - }; - - walkToGetNodes(info.tree); // - - if (nodes.length === 0) { - return; - } // - - - var found; - var t = binarySearch(nodes, function (node) { - return getOffset(node).y - movingNodeOf.y; - }, { - returnNearestIfNoHit: true - }); - - if (t.hit) { - found = t.value; - } else { - if (t.greater) { - found = nodes[t.index - 1] || t.value; - } else { - found = t.value; - } - } - - return found; - }, - closestNodeOffset: function closestNodeOffset() { - return getOffset(info.closestNode); - }, - closestBranch: function closestBranch() { - return findParent(info.closestNode, function (el) { - return hasClass(el, options.branchClass); - }); - }, - closestNext: function closestNext() { - var next = info.closestBranch.nextSibling; - - while (next) { - if (next !== movingEl && hasClass(next, options.branchClass) && !isElementHidden(next)) { - return next; - } - - next = next.nextSibling; - } - }, - closestPrev: function closestPrev() { - var prev = info.closestBranch.previousSibling; - - while (prev) { - if (prev !== movingEl && hasClass(prev, options.branchClass) && !isElementHidden(prev)) { - return prev; - } - - prev = prev.previousSibling; - } - }, - aboveBranch: function aboveBranch() { - // find above from branch to root - // closestBranch must be placeholder - if (info.closestBranch !== store.placeholder) { - return; - } - - if (conditions['closest has next']) { - return; - } // find placeholder prev or parent - - - var cur = info.closestBranch; - var prev = cur.previousSibling; - var found; - - while (prev) { - if (prev !== movingEl && hasClass(prev, options.branchClass) && !isElementHidden(prev)) { - cur = prev; - found = true; - break; - } - - prev = prev.previousSibling; - } - - if (!found) { - cur = findParent(cur, function (el) { - return hasClass(el, options.branchClass); - }); - } // - - - while (cur) { - var curNode = cur.querySelector(".".concat(options.nodeClass)); - - if (!options.rtl) { - if (getOffset(curNode).x <= movingNodeOf.x) { - break; - } - } else { - if (getOffset(curNode).x + curNode.offsetWidth >= movingNodeOf.x) { - break; - } - } - - var hasNextBranch = void 0; - var t = cur.nextSibling; - - while (t) { - if (t !== movingEl && t !== store.placeholder && hasClass(t, options.branchClass) && !isElementHidden(t)) { - hasNextBranch = true; - break; - } - - t = t.nextSibling; - } - - if (hasNextBranch) { - break; - } - - var parent = findParent(cur, function (el) { - return hasClass(el, options.branchClass); - }); - - if (!parent) { - break; - } - - cur = parent; - } - - return cur; - } - }; // conditions ======================================== - // life cycle: one move - - var conditions = { - 'no closest': function noClosest() { - return !info.closestNode; - }, - 'closest is top': function closestIsTop() { - return info.closestBranch === findNodeList(info.root.children, function (el) { - return el !== movingEl && !isElementHidden(el); - }); - }, - 'closest is top excluding placeholder': function closestIsTopExcludingPlaceholder() { - return info.closestBranch === findNodeList(info.root.children, function (el) { - return el !== movingEl && el !== store.placeholder && !isElementHidden(el); - }); - }, - 'on closest middle': function onClosestMiddle() { - return movingNodeOf.y < info.closestNodeOffset.y + info.closestNode.offsetHeight / 2; - }, - 'at closest indent right': function atClosestIndentRight() { - return movingNodeOf.x > info.closestNodeOffset.x + options.indent; - }, - 'at closest left': function atClosestLeft() { - return movingNodeOf.x < info.closestNodeOffset.x; - }, - 'closest is placeholder': function closestIsPlaceholder() { - return info.closestBranch === store.placeholder; - }, - 'no aboveBranch': function noAboveBranch() { - return !info.aboveBranch; - }, - 'closest has next': function closestHasNext() { - return info.closestNext; - }, - 'closest has prev': function closestHasPrev() { - return info.closestPrev; - }, - 'closest has children excluding placeholder movingEl': function closestHasChildrenExcludingPlaceholderMovingEl() { - var childrenEl = info.closestBranch.querySelector(".".concat(options.childrenClass)); - - if (childrenEl) { - return findNodeList(childrenEl.children, function (el) { - return el !== movingEl && el !== store.placeholder && !isElementHidden(el); - }); - } - } - }; // fix for rtl - - if (options.rtl) { - Object.assign(conditions, { - 'at closest indent right': function atClosestIndentRight() { - return movingNodeOf.x < info.closestNodeOffset.x + info.closestNode.offsetWidth - options.indent; - }, - // at indent left - 'at closest left': function atClosestLeft() { - return movingNodeOf.x > info.closestNodeOffset.x + info.closestNode.offsetWidth; - } // at right - - }); - } // convert conditions result to Boolean - - - Object.keys(conditions).forEach(function (key) { - var old = conditions[key]; - - conditions[key] = function () { - return Boolean(old.call(this)); - }; - }); // - - attachCache(info, info); - attachCache(conditions, conditions); - store.oneMoveStore.info = info; - store.oneMoveStore.conditions = conditions; // actions start ======================================== - - var doAction = function doAction(name) { - for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { - args[_key - 1] = arguments[_key]; - } - - if (!store._doActionQueue) { - store._doActionQueue = Promise.resolve(); - } - - var queue = store._doActionQueue; - store._doActionQueue = queue.then( /*#__PURE__*/asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee() { - var actionRecords, action, r; - return regenerator.wrap(function _callee$(_context) { - while (1) { - switch (_context.prev = _context.next) { - case 0: - // record tried actions in one move - if (!store.oneMoveStore.actionRecords) { - store.oneMoveStore.actionRecords = []; - } - - actionRecords = store.oneMoveStore.actionRecords; // - - action = actions[name]; - r = action.apply(void 0, args); - actionRecords.push(name); - _context.next = 7; - return r; - - case 7: - updatePlaceholderIndent(); - - case 8: - case "end": - return _context.stop(); - } - } - }, _callee); - }))); - }; - - var actions = { - 'nothing': function nothing() { - return asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee2() { - return regenerator.wrap(function _callee2$(_context2) { - while (1) { - switch (_context2.prev = _context2.next) { - case 0: - case "end": - return _context2.stop(); - } - } - }, _callee2); - }))(); - }, - // do nothing - 'append to root': function appendToRoot() { - return asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee3() { - return regenerator.wrap(function _callee3$(_context3) { - while (1) { - switch (_context3.prev = _context3.next) { - case 0: - // no closest branch, just append to root - if (options.isTargetTreeRootDroppable(store)) { - appendTo(store.placeholder, info.root); - } - - case 1: - case "end": - return _context3.stop(); - } - } - }, _callee3); - }))(); - }, - 'insert before': function insertBefore$1() { - return asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee4() { - return regenerator.wrap(function _callee4$(_context4) { - while (1) { - switch (_context4.prev = _context4.next) { - case 0: - if (!options.isNodeParentDroppable(info.closestBranch, store.targetTreeEl)) { - _context4.next = 4; - break; - } - - insertBefore(store.placeholder, info.closestBranch); - _context4.next = 5; - break; - - case 4: - return _context4.abrupt("return", secondCase(getParentBranchByEl(info.closestBranch))); - - case 5: - case "end": - return _context4.stop(); - } - } - }, _callee4); - }))(); - }, - 'insert after': function insertAfter$1() { - var _arguments = arguments; - return asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee5() { - var branch, moved, isFirstTriedAction; - return regenerator.wrap(function _callee5$(_context5) { - while (1) { - switch (_context5.prev = _context5.next) { - case 0: - branch = _arguments.length > 0 && _arguments[0] !== undefined ? _arguments[0] : info.closestBranch; - - if (!options.isNodeParentDroppable(branch, store.targetTreeEl)) { - _context5.next = 5; - break; - } - - insertAfter(store.placeholder, branch); - _context5.next = 11; - break; - - case 5: - _context5.next = 7; - return secondCase(getParentBranchByEl(branch)); - - case 7: - moved = _context5.sent; - isFirstTriedAction = !store.oneMoveStore.actionRecords || store.oneMoveStore.actionRecords.length === 1; - - if (!(!moved && isFirstTriedAction)) { - _context5.next = 11; - break; - } - - return _context5.abrupt("return", thirdCase(branch)); - - case 11: - case "end": - return _context5.stop(); - } - } - }, _callee5); - }))(); - }, - prepend: function prepend() { - return asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee6() { - return regenerator.wrap(function _callee6$(_context6) { - while (1) { - switch (_context6.prev = _context6.next) { - case 0: - if (!(info.closestBranch === store.placeholder)) { - _context6.next = 2; - break; - } - - return _context6.abrupt("return"); - - case 2: - if (!(options.ifNodeFolded(info.closestBranch, store) && !options.unfoldWhenDragover)) { - _context6.next = 6; - break; - } - - return _context6.abrupt("return", doAction('insert after', info.closestBranch)); - - case 6: - if (!options.isNodeDroppable(info.closestBranch, store.targetTreeEl)) { - _context6.next = 11; - break; - } - - _context6.next = 9; - return tryUnfoldAndPrepend(info.closestBranch); - - case 9: - _context6.next = 12; - break; - - case 11: - return _context6.abrupt("return", secondCase(info.closestBranch)); - - case 12: - case "end": - return _context6.stop(); - } - } - }, _callee6); - }))(); - }, - 'after above': function afterAbove() { - return asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee7() { - return regenerator.wrap(function _callee7$(_context7) { - while (1) { - switch (_context7.prev = _context7.next) { - case 0: - if (!options.isNodeParentDroppable(info.aboveBranch, store.targetTreeEl)) { - _context7.next = 4; - break; - } - - insertAfter(store.placeholder, info.aboveBranch); - _context7.next = 5; - break; - - case 4: - return _context7.abrupt("return", secondCase(getParentBranchByEl(info.aboveBranch))); - - case 5: - case "end": - return _context7.stop(); - } - } - }, _callee7); - }))(); - }, - 'append to prev': function appendToPrev() { - return asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee8() { - var childrenEl; - return regenerator.wrap(function _callee8$(_context8) { - while (1) { - switch (_context8.prev = _context8.next) { - case 0: - if (!(info.closestPrev === store.placeholder)) { - _context8.next = 2; - break; - } - - return _context8.abrupt("return"); - - case 2: - if (!options.ifNodeFolded(info.closestPrev, store)) { - _context8.next = 6; - break; - } - - return _context8.abrupt("return", doAction('insert after', info.closestPrev)); - - case 6: - if (!options.isNodeDroppable(info.closestPrev, store.targetTreeEl)) { - _context8.next = 13; - break; - } - - _context8.next = 9; - return unfoldAndGetChildrenEl(info.closestPrev); - - case 9: - childrenEl = _context8.sent; - appendTo(store.placeholder, childrenEl); - _context8.next = 14; - break; - - case 13: - return _context8.abrupt("return", secondCase(info.closestPrev)); - - case 14: - case "end": - return _context8.stop(); - } - } - }, _callee8); - }))(); - } - }; // second case for actions, when target position not droppable - // return true if moved - - var secondCase = /*#__PURE__*/function () { - var _ref2 = asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee9(branchEl) { - var targetEl; - return regenerator.wrap(function _callee9$(_context9) { - while (1) { - switch (_context9.prev = _context9.next) { - case 0: - if (!branchEl) { - _context9.next = 5; - break; - } - - targetEl = options._findClosestDroppablePosition(branchEl, store.targetTreeEl); - - if (!targetEl) { - _context9.next = 5; - break; - } - - insertAfter(store.placeholder, targetEl); - return _context9.abrupt("return", true); - - case 5: - case "end": - return _context9.stop(); - } - } - }, _callee9); - })); - - return function secondCase(_x) { - return _ref2.apply(this, arguments); - }; - }(); // when action is after, first case and second case invalid, try prepend - // 当操作是'after', 第一种第二种情况无效时, 尝试prepend - - - var thirdCase = /*#__PURE__*/function () { - var _ref3 = asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee10(branchEl) { - return regenerator.wrap(function _callee10$(_context10) { - while (1) { - switch (_context10.prev = _context10.next) { - case 0: - if (!(!options.ifNodeFolded(branchEl, store) && options.isNodeDroppable(branchEl, store.targetTreeEl))) { - _context10.next = 3; - break; - } - - _context10.next = 3; - return tryUnfoldAndPrepend(branchEl); - - case 3: - case "end": - return _context10.stop(); - } - } - }, _callee10); - })); - - return function thirdCase(_x2) { - return _ref3.apply(this, arguments); - }; - }(); - - var unfoldAndGetChildrenEl = /*#__PURE__*/function () { - var _ref4 = asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee11(branch) { - var childrenEl; - return regenerator.wrap(function _callee11$(_context11) { - while (1) { - switch (_context11.prev = _context11.next) { - case 0: - _context11.next = 2; - return options.unfoldTargetNodeByEl(branch, store); - - case 2: - childrenEl = branch.querySelector(".".concat(options.childrenClass)); - - if (!childrenEl) { - childrenEl = store.tempChildren; - appendTo(childrenEl, branch); - } - - return _context11.abrupt("return", childrenEl); - - case 5: - case "end": - return _context11.stop(); - } - } - }, _callee11); - })); - - return function unfoldAndGetChildrenEl(_x3) { - return _ref4.apply(this, arguments); - }; - }(); - - var tryUnfoldAndPrepend = /*#__PURE__*/function () { - var _ref5 = asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee13(branchEl) { - var func, oneMoveStore; - return regenerator.wrap(function _callee13$(_context13) { - while (1) { - switch (_context13.prev = _context13.next) { - case 0: - func = /*#__PURE__*/function () { - var _ref6 = asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee12() { - var childrenEl; - return regenerator.wrap(function _callee12$(_context12) { - while (1) { - switch (_context12.prev = _context12.next) { - case 0: - _context12.next = 2; - return unfoldAndGetChildrenEl(branchEl); - - case 2: - childrenEl = _context12.sent; - prependTo(store.placeholder, childrenEl); - - case 4: - case "end": - return _context12.stop(); - } - } - }, _callee12); - })); - - return function func() { - return _ref6.apply(this, arguments); - }; - }(); - - if (!options.ifNodeFolded(branchEl, store)) { - _context13.next = 6; - break; - } - - // delay if node folded - oneMoveStore = store.oneMoveStore; - setTimeout(function () { - // check if expired - if (oneMoveStore === store.oneMoveStore) { - func(); - } - }, options.unfoldWhenDragoverDelay); - _context13.next = 8; - break; - - case 6: - _context13.next = 8; - return func(); - - case 8: - case "end": - return _context13.stop(); - } - } - }, _callee13); - })); - - return function tryUnfoldAndPrepend(_x4) { - return _ref5.apply(this, arguments); - }; - }(); // actions end ======================================== - - - doDraggableDecision({ - options: options, - event: store.moveEvent, - store: store, - opt: dhOptions, - info: info, - conditions: conditions, - actions: actions, - doAction: doAction - }); - }, - afterMove: function afterMove(store, dhOptions) { - options.afterMove && options.afterMove(store, dhOptions); - }, - beforeDrop: function () { - var _beforeDrop = asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee14(store, dhOptions) { - var endEvent, movingEl, placeholder, tempChildren, movedCount, targetTreeEl, startTreeEl, maskTree, maskTree2, pathChanged, isPathChanged; - return regenerator.wrap(function _callee14$(_context14) { - while (1) { - switch (_context14.prev = _context14.next) { - case 0: - isPathChanged = function _isPathChanged() { - var startTree = store.startTree, - targetTree = store.targetTree, - startPath = store.startPath, - targetPath = store.targetPath; - return startTree !== targetTree || startPath.toString() !== targetPath.toString(); - }; - - endEvent = store.endEvent; - movingEl = store.movedElement; // branch - - placeholder = store.placeholder, tempChildren = store.tempChildren, movedCount = store.movedCount, targetTreeEl = store.targetTreeEl, startTreeEl = store.startTreeEl; // use mask tree to avoid flick caused by DOM update in short time - // 复制 targetTreeEl 作为遮罩, 避免短时间内更新DOM引起的闪烁 - - if (targetTreeEl) { - // No targetTreeEl mean no valid move. - // targetTreeEl不存在意味着没有有效移动. - // create mask tree - maskTree = targetTreeEl.cloneNode(true); - targetTreeEl.style.display = 'none'; - insertAfter(maskTree, targetTreeEl); - - if (startTreeEl !== targetTreeEl) { - maskTree2 = startTreeEl.cloneNode(true); - startTreeEl.style.display = 'none'; - insertAfter(maskTree2, startTreeEl); - } // - - - store.targetPath = options.getPathByBranchEl(placeholder); - pathChanged = isPathChanged(); - store.targetPathNotEqualToStartPath = pathChanged; - store.pathChangePrevented = false; - - if (options.beforeDrop && options.beforeDrop(pathChanged, store, dhOptions) === false) { - pathChanged = false; - store.pathChangePrevented = false; - } - - store.pathChanged = pathChanged; - } // destroy placeholder and tempChildren - - - removeEl(placeholder); - - if (tempChildren) { - removeEl(tempChildren); - } - - store.updateMovedElementStyle(); // - - _context14.next = 10; - return options.afterDrop(store, dhOptions); - - case 10: - if (!maskTree) { - _context14.next = 16; - break; - } - - _context14.next = 13; - return waitTime(30); - - case 13: - removeEl(maskTree); - targetTreeEl.style.display = 'block'; - - if (maskTree2) { - removeEl(maskTree2); - startTreeEl.style.display = 'block'; - } - - case 16: - case "end": - return _context14.stop(); - } - } - }, _callee14); - })); - - function beforeDrop(_x5, _x6) { - return _beforeDrop.apply(this, arguments); - } - - return beforeDrop; - }() - }), - destroy = _draggableHelper.destroy, - draggableHelperOptions = _draggableHelper.options; - - return { - destroy: destroy, - options: options, - optionsUpdated: optionsUpdated - }; - - function getParentBranchByEl(el) { - return findParent(el, function (el) { - if (hasClass(el, options.branchClass)) { - return true; - } - - if (hasClass(el, options.rootClass)) { - return 'break'; - } - }); - } - - function optionsUpdated() { - Object.assign(draggableHelperOptions, { - triggerClassName: options.triggerClass, - triggerBySelf: options.triggerBySelf, - draggingClassName: options.draggingClass, - clone: options.cloneWhenDrag, - // edgeScroll - edgeScroll: options.edgeScroll, - edgeScrollTriggerMargin: options.edgeScrollTriggerMargin, - edgeScrollSpeed: options.edgeScrollSpeed, - edgeScrollTriggerMode: options.edgeScrollTriggerMode, - // - rtl: options.rtl, - preventTextSelection: options.preventTextSelection - }); - } - } - - function isElementHidden(el) { - return el.offsetWidth === 0 && el.offsetHeight === 0; - } - - function _createForOfIteratorHelper$4(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$5(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; } - - function _unsupportedIterableToArray$5(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray$5(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$5(o, minLen); } - - function _arrayLikeToArray$5(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; } - var treesStore = {}; - var script = { - props: { - triggerClass: { - type: [String, Array], - default: 'tree-node' - }, - triggerBySelf: { - type: Boolean - }, - draggable: { - type: [Boolean, Function], - default: true - }, - droppable: { - type: [Boolean, Function], - default: true - }, - eachDraggable: { - type: [Function] - }, - // type: [Boolean, Function] - eachDroppable: { - type: [Function] - }, - // type: [Boolean, Function] - ondragstart: { - type: Function - }, - ondragend: { - type: Function - }, - unfoldWhenDragover: { - type: Boolean, - default: true - }, - unfoldWhenDragoverDelay: { - type: Number, - default: 30 - }, - draggingNodePositionMode: { - type: String, - default: 'top_left_corner' - }, - // top_left_corner, mouse - edgeScroll: { - type: Boolean - }, - edgeScrollTriggerMargin: { - type: Number, - default: 50 - }, - edgeScrollSpeed: { - type: Number, - default: 0.35 - }, - edgeScrollTriggerMode: { - type: String, - default: 'top_left_corner' - }, - edgeScrollSpecifiedContainerX: {}, - // HTMLElement || ((store) => HTMLElement) - edgeScrollSpecifiedContainerY: {}, - // HTMLElement || ((store) => HTMLElement) - preventTextSelection: { - type: Boolean, - default: true - } - }, - // components: {}, - data: function data() { - return { - treesStore: treesStore - }; - }, - // computed: {}, - // watch: {}, - methods: { - _Draggable_unfoldTargetNodeByEl: function _Draggable_unfoldTargetNodeByEl(branchEl, store) { - var targetTree = store.targetTree; - var path = targetTree.getPathByBranchEl(branchEl); - var node = targetTree.getNodeByPath(path); - targetTree.unfold && targetTree.unfold(node, path); - return new Promise(function (resolve, reject) { - targetTree.$nextTick(function () { - resolve(); - }); - }); - }, - isNodeDraggable: function isNodeDraggable(node, path) { - var store = this.treesStore.store; - var allNodes = this.getAllNodesByPath(path); - allNodes.unshift(this.rootNode); - - var _iterator = _createForOfIteratorHelper$4(iterateAll(allNodes, { - reverse: true - })), - _step; - - try { - for (_iterator.s(); !(_step = _iterator.n()).done;) { - var _step$value = _step.value, - _node = _step$value.value, - index = _step$value.index; - var currentPath = path.slice(0, index + 1); - var draggableOpt = _node.$draggable !== undefined ? _node.$draggable : this.eachDraggable; - var draggable = resolveValueOrGettter(draggableOpt, [currentPath, this, store]); - - if (draggable === undefined) { - continue; - } else { - return draggable; - } - } - } catch (err) { - _iterator.e(err); - } finally { - _iterator.f(); - } - - return true; - }, - isNodeDroppable: function isNodeDroppable(node, path) { - var store = this.treesStore.store; - var allNodes = this.getAllNodesByPath(path); - allNodes.unshift(this.rootNode); - var droppableFinal, resolved; - - var _iterator2 = _createForOfIteratorHelper$4(iterateAll(allNodes, { - reverse: true - })), - _step2; - - try { - for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) { - var _step2$value = _step2.value, - _node2 = _step2$value.value, - index = _step2$value.index; - var currentPath = path.slice(0, index + 1); - var droppableOpt = _node2.$droppable !== undefined ? _node2.$droppable : this.eachDroppable; - var droppable = resolveValueOrGettter(droppableOpt, [currentPath, this, store]); - - if (droppable === undefined) { - continue; - } else { - droppableFinal = droppable; - resolved = true; - break; - } - } - } catch (err) { - _iterator2.e(err); - } finally { - _iterator2.f(); - } - - if (!resolved) { - droppableFinal = true; - } - - if (this._internal_hook_isNodeDroppable) { - return this._internal_hook_isNodeDroppable({ - droppableFinal: droppableFinal, - node: node, - path: path, - store: store - }); - } - - return droppableFinal; - }, - // override - getPathByBranchEl: function getPathByBranchEl(branchEl) { - var getAttrPath = function getAttrPath(el) { - var pathStr = el.getAttribute('data-tree-node-path'); - - if (pathStr) { - return pathStr.split(',').map(function (v) { - return parseInt(v); - }); - } - }; - - var path = getAttrPath(branchEl); - - if (path) { - return path; - } // placeholder path - - - var parentPath; - findParent(branchEl, function (el) { - if (hasClass(el, 'tree-root')) { - parentPath = []; - return true; - } - - if (hasClass(el, 'tree-branch')) { - parentPath = getAttrPath(el); - return true; - } - }); - var index = 0; - - var _iterator3 = _createForOfIteratorHelper$4(iterateAll(branchEl.parentElement.children)), - _step3; - - try { - for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) { - var _step3$value = _step3.value, - el = _step3$value.value, - index2 = _step3$value.index; - - if (hasClass(el, 'tree-branch') || hasClass(el, 'tree-placeholder')) { - if (el === branchEl) { - break; - } - - index++; - } - } - } catch (err) { - _iterator3.e(err); - } finally { - _iterator3.f(); - } - - return [].concat(toConsumableArray(parentPath), [index]); - } - }, - // created() {}, - mounted: function mounted() { - var _this = this; - - var options = this._draggableOptions = { - indent: this.indent, - triggerClass: this.triggerClass, - triggerBySelf: this.triggerBySelf, - unfoldWhenDragover: this.unfoldWhenDragover, - unfoldWhenDragoverDelay: this.unfoldWhenDragoverDelay, - draggingNodePositionMode: this.draggingNodePositionMode, - cloneWhenDrag: this.cloneWhenDrag, - edgeScroll: this.edgeScroll, - edgeScrollTriggerMargin: this.edgeScrollTriggerMargin, - edgeScrollSpeed: this.edgeScrollSpeed, - edgeScrollTriggerMode: this.edgeScrollTriggerMode, - edgeScrollSpecifiedContainerX: this.edgeScrollSpecifiedContainerX, - edgeScrollSpecifiedContainerY: this.edgeScrollSpecifiedContainerY, - rtl: this.rtl, - preventTextSelection: this.preventTextSelection, - treeClass: 'he-tree', - rootClass: 'tree-root', - childrenClass: 'tree-children', - branchClass: 'tree-branch', - nodeClass: 'tree-node', - nodeBackClass: 'tree-node-back', - placeholderClass: 'tree-placeholder', - placeholderNodeBackClass: 'tree-placeholder-node-back', - placeholderNodeClass: 'tree-placeholder-node', - draggingClass: 'dragging', - placeholderId: "he_tree_drag_placeholder", - ifNodeFolded: function ifNodeFolded(branchEl, store) { - var targetTree = store.targetTree; - var node = targetTree.getNodeByBranchEl(branchEl); - return node.$folded; - }, - isTargetTreeRootDroppable: function isTargetTreeRootDroppable(store) { - var droppable = resolveValueOrGettter(store.targetTree.rootNode.$droppable, [store.targetTree, store]); - - if (droppable !== undefined) { - return droppable; - } - - return true; - }, - unfoldTargetNodeByEl: function unfoldTargetNodeByEl() { - return _this._Draggable_unfoldTargetNodeByEl.apply(_this, arguments); - }, - isNodeParentDroppable: function isNodeParentDroppable(branchEl, treeEl) { - var tree = _this.getTreeVmByTreeEl(treeEl); - - var path = tree.getPathByBranchEl(branchEl); - var parentPath = arrayWithoutEnd(path, 1); - var parent = tree.getNodeByPath(parentPath); - return tree.isNodeDroppable(parent, parentPath); - }, - isNodeDroppable: function isNodeDroppable(branchEl, treeEl) { - var tree = _this.getTreeVmByTreeEl(treeEl); - - var path = tree.getPathByBranchEl(branchEl); - var node = tree.getNodeByPath(path); - return tree.isNodeDroppable(node, path); - }, - _findClosestDroppablePosition: function _findClosestDroppablePosition(branchEl, treeEl) { - var tree = _this.getTreeVmByTreeEl(treeEl); - - var path = tree.getPathByBranchEl(branchEl); - var findPath = arrayWithoutEnd(path, 1); - var cur = path; - - var _iterator4 = _createForOfIteratorHelper$4(tree.iteratePath(findPath, { - reverse: true - })), - _step4; - - try { - for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) { - var _step4$value = _step4.value, - node = _step4$value.node, - _path = _step4$value.path; - - if (tree.isNodeDroppable(node, _path)) { - return tree.getBranchElByPath(cur); - } else { - cur = _path; - } - } - } catch (err) { - _iterator4.e(err); - } finally { - _iterator4.f(); - } - - if (tree.isNodeDroppable(_this.rootNode, [])) { - return tree.getBranchElByPath(cur); - } - }, - afterPlaceholderCreated: function afterPlaceholderCreated(store) { - store.startTree.$emit('afterPlaceholderCreated', store); - store.startTree.$emit('after-placeholder-created', store); - }, - getPathByBranchEl: function getPathByBranchEl(branchEl) { - return _this.getPathByBranchEl(branchEl); - }, - beforeFirstMove: function beforeFirstMove(store) { - _this.treesStore.store = store; - store.startTree = _this.getTreeVmByTreeEl(store.startTreeEl); - var draggable = resolveValueOrGettter(store.startTree.draggable, [store.startTree, store]); - - if (!draggable) { - return false; - } - - var startTree = store.startTree, - dragBranchEl = store.dragBranchEl, - startPath = store.startPath; - store.dragNode = startTree.getNodeByPath(startPath); - - if (_this.cloneWhenDrag) { - store.dragNode = cloneTreeData(store.dragNode); - } - - if (!startTree.isNodeDraggable(store.dragNode, startPath)) { - return false; - } - - if (startTree.hasHook('ondragstart') && startTree.executeHook('ondragstart', [startTree, store]) === false) { - return false; - } - - store.startTree.$emit('before-first-move', store); - store.startTree.$emit('drag', store); - - _this.$root.$emit('he-tree-drag', store); - }, - filterTargetTree: function filterTargetTree(targetTreeEl, store) { - var targetTree = _this.getTreeVmByTreeEl(targetTreeEl); - - var startTree = store.startTree; - - if (startTree !== targetTree) { - if (_this._internal_hook_filterTargetTree) { - if (_this._internal_hook_filterTargetTree(targetTree, store) === false) { - return false; - } - } else { - return false; - } - } - - var targetTreeDroppable = resolveValueOrGettter(targetTree.droppable, [targetTree, store]); - - if (!targetTreeDroppable) { - return false; - } - - store.targetTree = targetTree; - - if (!resolveValueOrGettter(store.startTree === store.targetTree) && resolveValueOrGettter(_this._Draggable_unfoldTargetNode, [false, _this.treeData]) !== _this.rootNode.children) { - return false; - } - }, - afterMove: function afterMove(store) { - store.startTree.$emit('after-move', store); - }, - beforeDrop: function beforeDrop(pathChanged, store) { - var targetTree = store.targetTree; - - if (targetTree.hasHook('ondragend') && targetTree.executeHook('ondragend', [targetTree, store]) === false) { - return false; - } - - _this.$root.$emit('he-tree-before-drop', store); - }, - afterDrop: function afterDrop(store, t) { - if (store.pathChanged) { - var startTree = store.startTree, - targetTree = store.targetTree, - startPath = store.startPath, - targetPath = store.targetPath, - dragNode = store.dragNode; - - if (_this.cloneWhenDrag !== true) { - // remove from start position - var startParentPath = arrayWithoutEnd(startPath, 1); - var startParent = startTree.getNodeByPath(startParentPath); - var startSiblings = startParentPath.length === 0 ? startTree.treeData : startParent.children; - var startIndex = arrayLast(startPath); - startSiblings.splice(startIndex, 1); // update targetPath - - if (startTree === targetTree) { - if (startPath.length <= targetPath.length) { - var lenNoEnd = startPath.length - 1; - var same = true; - - for (var i = 0; i < lenNoEnd; i++) { - var s = startPath[i]; - var _t = targetPath[i]; - - if (s !== _t) { - same = false; - break; - } - } - - if (same) { - var endIndex = startPath.length - 1; - - if (startPath[endIndex] < targetPath[endIndex]) { - targetPath[endIndex] -= 1; - } - } - } - } - } // insert to target position - - - var targetParentPath = arrayWithoutEnd(targetPath, 1); - var targetParent = targetTree.getNodeByPath(targetParentPath); - var targetSiblings; - - if (targetParentPath.length === 0) { - targetSiblings = targetTree.treeData; - } else { - if (!targetParent.children) { - _this.$set(targetParent, 'children', []); - } - - targetSiblings = targetParent.children; - } - - var targetIndex = arrayLast(targetPath); - targetSiblings.splice(targetIndex, 0, dragNode); // emit event - - startTree.$emit('input', startTree.treeData); - startTree.$emit('change', store); - targetTree.$emit('drop', store); - - _this.$root.$emit('he-tree-drop', store); - - if (targetTree !== startTree) { - targetTree.$emit('input', targetTree.treeData); - targetTree.$emit('change', store); - } - - return new Promise(function (resolve, reject) { - targetTree.$nextTick(function () { - resolve(); - }); - }); - } - } - }; - - var _makeTreeDraggable_obj = this._makeTreeDraggable_obj = makeTreeDraggable(this.$el, options); // watch props and update options - - - ['indent', 'triggerClass', 'triggerBySelf', 'unfoldWhenDragover', 'unfoldWhenDragoverDelay', 'draggingNodePositionMode', 'cloneWhenDrag', 'edgeScroll', 'edgeScrollTriggerMargin', 'edgeScrollSpeed', 'edgeScrollTriggerMode', 'edgeScrollSpecifiedContainerY', 'edgeScrollSpecifiedContainerY', 'rtl', 'preventTextSelection'].forEach(function (name) { - _this.$watch(name, function (value) { - _makeTreeDraggable_obj.options[name] = value; - - _makeTreeDraggable_obj.optionsUpdated(); - }); - }); - } - }; - - /* script */ - var __vue_script__$1 = script; - /* template */ - - /* style */ - - var __vue_inject_styles__$1 = undefined; - /* scoped */ - - var __vue_scope_id__$1 = undefined; - /* module identifier */ - - var __vue_module_identifier__$1 = undefined; - /* functional template */ - - var __vue_is_functional_template__$1 = undefined; - /* style inject */ - - /* style inject SSR */ - - /* style inject shadow dom */ - - var __vue_component__$1 = /*#__PURE__*/normalizeComponent({}, __vue_inject_styles__$1, __vue_script__$1, __vue_scope_id__$1, __vue_is_functional_template__$1, __vue_module_identifier__$1, false, undefined, undefined, undefined); - - exports.Check = check; - exports.Draggable = __vue_component__$1; - exports.Fold = fold; - exports.Tree = __vue_component__; - exports.cloneTreeData = cloneTreeData; - exports.foldAll = foldAll; - exports.getPureTreeData = getPureTreeData; - exports.unfoldAll = unfoldAll; - exports.walkTreeData = walkTreeData$1; - - Object.defineProperty(exports, '__esModule', { value: true }); + typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) : + typeof define === 'function' && define.amd ? define(['exports', 'vue'], factory) : + (global = global || self, factory(global.heTreeVue = {}, global.Vue)); +}(this, (function (exports, vue) { 'use strict'; + + function unwrapExports (x) { + return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x; + } + + function createCommonjsModule(fn, module) { + return module = { exports: {} }, fn(module, module.exports), module.exports; + } + + var assertThisInitialized = createCommonjsModule(function (module) { + function _assertThisInitialized(self) { + if (self === void 0) { + throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); + } + return self; + } + module.exports = _assertThisInitialized, module.exports.__esModule = true, module.exports["default"] = module.exports; + }); + + unwrapExports(assertThisInitialized); + + var getPrototypeOf = createCommonjsModule(function (module) { + function _getPrototypeOf(o) { + module.exports = _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { + return o.__proto__ || Object.getPrototypeOf(o); + }, module.exports.__esModule = true, module.exports["default"] = module.exports; + return _getPrototypeOf(o); + } + module.exports = _getPrototypeOf, module.exports.__esModule = true, module.exports["default"] = module.exports; + }); + + unwrapExports(getPrototypeOf); + + var superPropBase = createCommonjsModule(function (module) { + function _superPropBase(object, property) { + while (!Object.prototype.hasOwnProperty.call(object, property)) { + object = getPrototypeOf(object); + if (object === null) break; + } + return object; + } + module.exports = _superPropBase, module.exports.__esModule = true, module.exports["default"] = module.exports; + }); + + unwrapExports(superPropBase); + + var get = createCommonjsModule(function (module) { + function _get() { + if (typeof Reflect !== "undefined" && Reflect.get) { + module.exports = _get = Reflect.get.bind(), module.exports.__esModule = true, module.exports["default"] = module.exports; + } else { + module.exports = _get = function _get(target, property, receiver) { + var base = superPropBase(target, property); + if (!base) return; + var desc = Object.getOwnPropertyDescriptor(base, property); + if (desc.get) { + return desc.get.call(arguments.length < 3 ? target : receiver); + } + return desc.value; + }, module.exports.__esModule = true, module.exports["default"] = module.exports; + } + return _get.apply(this, arguments); + } + module.exports = _get, module.exports.__esModule = true, module.exports["default"] = module.exports; + }); + + unwrapExports(get); + + var setPrototypeOf = createCommonjsModule(function (module) { + function _setPrototypeOf(o, p) { + module.exports = _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { + o.__proto__ = p; + return o; + }, module.exports.__esModule = true, module.exports["default"] = module.exports; + return _setPrototypeOf(o, p); + } + module.exports = _setPrototypeOf, module.exports.__esModule = true, module.exports["default"] = module.exports; + }); + + unwrapExports(setPrototypeOf); + + var inherits = createCommonjsModule(function (module) { + function _inherits(subClass, superClass) { + if (typeof superClass !== "function" && superClass !== null) { + throw new TypeError("Super expression must either be null or a function"); + } + subClass.prototype = Object.create(superClass && superClass.prototype, { + constructor: { + value: subClass, + writable: true, + configurable: true + } + }); + Object.defineProperty(subClass, "prototype", { + writable: false + }); + if (superClass) setPrototypeOf(subClass, superClass); + } + module.exports = _inherits, module.exports.__esModule = true, module.exports["default"] = module.exports; + }); + + unwrapExports(inherits); + + var _typeof_1 = createCommonjsModule(function (module) { + function _typeof(obj) { + "@babel/helpers - typeof"; + + return (module.exports = _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { + return typeof obj; + } : function (obj) { + return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; + }, module.exports.__esModule = true, module.exports["default"] = module.exports), _typeof(obj); + } + module.exports = _typeof, module.exports.__esModule = true, module.exports["default"] = module.exports; + }); + + unwrapExports(_typeof_1); + + var possibleConstructorReturn = createCommonjsModule(function (module) { + var _typeof = _typeof_1["default"]; + + function _possibleConstructorReturn(self, call) { + if (call && (_typeof(call) === "object" || typeof call === "function")) { + return call; + } else if (call !== void 0) { + throw new TypeError("Derived constructors may only return object or undefined"); + } + return assertThisInitialized(self); + } + module.exports = _possibleConstructorReturn, module.exports.__esModule = true, module.exports["default"] = module.exports; + }); + + unwrapExports(possibleConstructorReturn); + + var arrayWithHoles = createCommonjsModule(function (module) { + function _arrayWithHoles(arr) { + if (Array.isArray(arr)) return arr; + } + module.exports = _arrayWithHoles, module.exports.__esModule = true, module.exports["default"] = module.exports; + }); + + unwrapExports(arrayWithHoles); + + var iterableToArrayLimit = createCommonjsModule(function (module) { + function _iterableToArrayLimit(arr, i) { + var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; + if (null != _i) { + var _s, + _e, + _x, + _r, + _arr = [], + _n = !0, + _d = !1; + try { + if (_x = (_i = _i.call(arr)).next, 0 === i) { + if (Object(_i) !== _i) return; + _n = !1; + } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); + } catch (err) { + _d = !0, _e = err; + } finally { + try { + if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; + } finally { + if (_d) throw _e; + } + } + return _arr; + } + } + module.exports = _iterableToArrayLimit, module.exports.__esModule = true, module.exports["default"] = module.exports; + }); + + unwrapExports(iterableToArrayLimit); + + var arrayLikeToArray = createCommonjsModule(function (module) { + function _arrayLikeToArray(arr, len) { + if (len == null || len > arr.length) len = arr.length; + for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; + return arr2; + } + module.exports = _arrayLikeToArray, module.exports.__esModule = true, module.exports["default"] = module.exports; + }); + + unwrapExports(arrayLikeToArray); + + var unsupportedIterableToArray = createCommonjsModule(function (module) { + function _unsupportedIterableToArray(o, minLen) { + if (!o) return; + if (typeof o === "string") return arrayLikeToArray(o, minLen); + var n = Object.prototype.toString.call(o).slice(8, -1); + if (n === "Object" && o.constructor) n = o.constructor.name; + if (n === "Map" || n === "Set") return Array.from(o); + if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return arrayLikeToArray(o, minLen); + } + module.exports = _unsupportedIterableToArray, module.exports.__esModule = true, module.exports["default"] = module.exports; + }); + + unwrapExports(unsupportedIterableToArray); + + var nonIterableRest = createCommonjsModule(function (module) { + function _nonIterableRest() { + throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); + } + module.exports = _nonIterableRest, module.exports.__esModule = true, module.exports["default"] = module.exports; + }); + + unwrapExports(nonIterableRest); + + var slicedToArray = createCommonjsModule(function (module) { + function _slicedToArray(arr, i) { + return arrayWithHoles(arr) || iterableToArrayLimit(arr, i) || unsupportedIterableToArray(arr, i) || nonIterableRest(); + } + module.exports = _slicedToArray, module.exports.__esModule = true, module.exports["default"] = module.exports; + }); + + unwrapExports(slicedToArray); + + var toPrimitive = createCommonjsModule(function (module) { + var _typeof = _typeof_1["default"]; + function _toPrimitive(input, hint) { + if (_typeof(input) !== "object" || input === null) return input; + var prim = input[Symbol.toPrimitive]; + if (prim !== undefined) { + var res = prim.call(input, hint || "default"); + if (_typeof(res) !== "object") return res; + throw new TypeError("@@toPrimitive must return a primitive value."); + } + return (hint === "string" ? String : Number)(input); + } + module.exports = _toPrimitive, module.exports.__esModule = true, module.exports["default"] = module.exports; + }); + + unwrapExports(toPrimitive); + + var toPropertyKey = createCommonjsModule(function (module) { + var _typeof = _typeof_1["default"]; + + function _toPropertyKey(arg) { + var key = toPrimitive(arg, "string"); + return _typeof(key) === "symbol" ? key : String(key); + } + module.exports = _toPropertyKey, module.exports.__esModule = true, module.exports["default"] = module.exports; + }); + + unwrapExports(toPropertyKey); + + var createClass = createCommonjsModule(function (module) { + function _defineProperties(target, props) { + for (var i = 0; i < props.length; i++) { + var descriptor = props[i]; + descriptor.enumerable = descriptor.enumerable || false; + descriptor.configurable = true; + if ("value" in descriptor) descriptor.writable = true; + Object.defineProperty(target, toPropertyKey(descriptor.key), descriptor); + } + } + function _createClass(Constructor, protoProps, staticProps) { + if (protoProps) _defineProperties(Constructor.prototype, protoProps); + if (staticProps) _defineProperties(Constructor, staticProps); + Object.defineProperty(Constructor, "prototype", { + writable: false + }); + return Constructor; + } + module.exports = _createClass, module.exports.__esModule = true, module.exports["default"] = module.exports; + }); + + var _createClass = unwrapExports(createClass); + + var classCallCheck = createCommonjsModule(function (module) { + function _classCallCheck(instance, Constructor) { + if (!(instance instanceof Constructor)) { + throw new TypeError("Cannot call a class as a function"); + } + } + module.exports = _classCallCheck, module.exports.__esModule = true, module.exports["default"] = module.exports; + }); + + var _classCallCheck = unwrapExports(classCallCheck); + + var arrayWithoutHoles = createCommonjsModule(function (module) { + function _arrayWithoutHoles(arr) { + if (Array.isArray(arr)) return arrayLikeToArray(arr); + } + module.exports = _arrayWithoutHoles, module.exports.__esModule = true, module.exports["default"] = module.exports; + }); + + unwrapExports(arrayWithoutHoles); + + var iterableToArray = createCommonjsModule(function (module) { + function _iterableToArray(iter) { + if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); + } + module.exports = _iterableToArray, module.exports.__esModule = true, module.exports["default"] = module.exports; + }); + + unwrapExports(iterableToArray); + + var nonIterableSpread = createCommonjsModule(function (module) { + function _nonIterableSpread() { + throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); + } + module.exports = _nonIterableSpread, module.exports.__esModule = true, module.exports["default"] = module.exports; + }); + + unwrapExports(nonIterableSpread); + + var toConsumableArray = createCommonjsModule(function (module) { + function _toConsumableArray(arr) { + return arrayWithoutHoles(arr) || iterableToArray(arr) || unsupportedIterableToArray(arr) || nonIterableSpread(); + } + module.exports = _toConsumableArray, module.exports.__esModule = true, module.exports["default"] = module.exports; + }); + + var _toConsumableArray = unwrapExports(toConsumableArray); + + var regeneratorRuntime$1 = createCommonjsModule(function (module) { + var _typeof = _typeof_1["default"]; + function _regeneratorRuntime() { + module.exports = _regeneratorRuntime = function _regeneratorRuntime() { + return exports; + }, module.exports.__esModule = true, module.exports["default"] = module.exports; + var exports = {}, + Op = Object.prototype, + hasOwn = Op.hasOwnProperty, + defineProperty = Object.defineProperty || function (obj, key, desc) { + obj[key] = desc.value; + }, + $Symbol = "function" == typeof Symbol ? Symbol : {}, + iteratorSymbol = $Symbol.iterator || "@@iterator", + asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator", + toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag"; + function define(obj, key, value) { + return Object.defineProperty(obj, key, { + value: value, + enumerable: !0, + configurable: !0, + writable: !0 + }), obj[key]; + } + try { + define({}, ""); + } catch (err) { + define = function define(obj, key, value) { + return obj[key] = value; + }; + } + function wrap(innerFn, outerFn, self, tryLocsList) { + var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator, + generator = Object.create(protoGenerator.prototype), + context = new Context(tryLocsList || []); + return defineProperty(generator, "_invoke", { + value: makeInvokeMethod(innerFn, self, context) + }), generator; + } + function tryCatch(fn, obj, arg) { + try { + return { + type: "normal", + arg: fn.call(obj, arg) + }; + } catch (err) { + return { + type: "throw", + arg: err + }; + } + } + exports.wrap = wrap; + var ContinueSentinel = {}; + function Generator() {} + function GeneratorFunction() {} + function GeneratorFunctionPrototype() {} + var IteratorPrototype = {}; + define(IteratorPrototype, iteratorSymbol, function () { + return this; + }); + var getProto = Object.getPrototypeOf, + NativeIteratorPrototype = getProto && getProto(getProto(values([]))); + NativeIteratorPrototype && NativeIteratorPrototype !== Op && hasOwn.call(NativeIteratorPrototype, iteratorSymbol) && (IteratorPrototype = NativeIteratorPrototype); + var Gp = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(IteratorPrototype); + function defineIteratorMethods(prototype) { + ["next", "throw", "return"].forEach(function (method) { + define(prototype, method, function (arg) { + return this._invoke(method, arg); + }); + }); + } + function AsyncIterator(generator, PromiseImpl) { + function invoke(method, arg, resolve, reject) { + var record = tryCatch(generator[method], generator, arg); + if ("throw" !== record.type) { + var result = record.arg, + value = result.value; + return value && "object" == _typeof(value) && hasOwn.call(value, "__await") ? PromiseImpl.resolve(value.__await).then(function (value) { + invoke("next", value, resolve, reject); + }, function (err) { + invoke("throw", err, resolve, reject); + }) : PromiseImpl.resolve(value).then(function (unwrapped) { + result.value = unwrapped, resolve(result); + }, function (error) { + return invoke("throw", error, resolve, reject); + }); + } + reject(record.arg); + } + var previousPromise; + defineProperty(this, "_invoke", { + value: function value(method, arg) { + function callInvokeWithMethodAndArg() { + return new PromiseImpl(function (resolve, reject) { + invoke(method, arg, resolve, reject); + }); + } + return previousPromise = previousPromise ? previousPromise.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); + } + }); + } + function makeInvokeMethod(innerFn, self, context) { + var state = "suspendedStart"; + return function (method, arg) { + if ("executing" === state) throw new Error("Generator is already running"); + if ("completed" === state) { + if ("throw" === method) throw arg; + return doneResult(); + } + for (context.method = method, context.arg = arg;;) { + var delegate = context.delegate; + if (delegate) { + var delegateResult = maybeInvokeDelegate(delegate, context); + if (delegateResult) { + if (delegateResult === ContinueSentinel) continue; + return delegateResult; + } + } + if ("next" === context.method) context.sent = context._sent = context.arg;else if ("throw" === context.method) { + if ("suspendedStart" === state) throw state = "completed", context.arg; + context.dispatchException(context.arg); + } else "return" === context.method && context.abrupt("return", context.arg); + state = "executing"; + var record = tryCatch(innerFn, self, context); + if ("normal" === record.type) { + if (state = context.done ? "completed" : "suspendedYield", record.arg === ContinueSentinel) continue; + return { + value: record.arg, + done: context.done + }; + } + "throw" === record.type && (state = "completed", context.method = "throw", context.arg = record.arg); + } + }; + } + function maybeInvokeDelegate(delegate, context) { + var methodName = context.method, + method = delegate.iterator[methodName]; + if (undefined === method) return context.delegate = null, "throw" === methodName && delegate.iterator["return"] && (context.method = "return", context.arg = undefined, maybeInvokeDelegate(delegate, context), "throw" === context.method) || "return" !== methodName && (context.method = "throw", context.arg = new TypeError("The iterator does not provide a '" + methodName + "' method")), ContinueSentinel; + var record = tryCatch(method, delegate.iterator, context.arg); + if ("throw" === record.type) return context.method = "throw", context.arg = record.arg, context.delegate = null, ContinueSentinel; + var info = record.arg; + return info ? info.done ? (context[delegate.resultName] = info.value, context.next = delegate.nextLoc, "return" !== context.method && (context.method = "next", context.arg = undefined), context.delegate = null, ContinueSentinel) : info : (context.method = "throw", context.arg = new TypeError("iterator result is not an object"), context.delegate = null, ContinueSentinel); + } + function pushTryEntry(locs) { + var entry = { + tryLoc: locs[0] + }; + 1 in locs && (entry.catchLoc = locs[1]), 2 in locs && (entry.finallyLoc = locs[2], entry.afterLoc = locs[3]), this.tryEntries.push(entry); + } + function resetTryEntry(entry) { + var record = entry.completion || {}; + record.type = "normal", delete record.arg, entry.completion = record; + } + function Context(tryLocsList) { + this.tryEntries = [{ + tryLoc: "root" + }], tryLocsList.forEach(pushTryEntry, this), this.reset(!0); + } + function values(iterable) { + if (iterable) { + var iteratorMethod = iterable[iteratorSymbol]; + if (iteratorMethod) return iteratorMethod.call(iterable); + if ("function" == typeof iterable.next) return iterable; + if (!isNaN(iterable.length)) { + var i = -1, + next = function next() { + for (; ++i < iterable.length;) if (hasOwn.call(iterable, i)) return next.value = iterable[i], next.done = !1, next; + return next.value = undefined, next.done = !0, next; + }; + return next.next = next; + } + } + return { + next: doneResult + }; + } + function doneResult() { + return { + value: undefined, + done: !0 + }; + } + return GeneratorFunction.prototype = GeneratorFunctionPrototype, defineProperty(Gp, "constructor", { + value: GeneratorFunctionPrototype, + configurable: !0 + }), defineProperty(GeneratorFunctionPrototype, "constructor", { + value: GeneratorFunction, + configurable: !0 + }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, toStringTagSymbol, "GeneratorFunction"), exports.isGeneratorFunction = function (genFun) { + var ctor = "function" == typeof genFun && genFun.constructor; + return !!ctor && (ctor === GeneratorFunction || "GeneratorFunction" === (ctor.displayName || ctor.name)); + }, exports.mark = function (genFun) { + return Object.setPrototypeOf ? Object.setPrototypeOf(genFun, GeneratorFunctionPrototype) : (genFun.__proto__ = GeneratorFunctionPrototype, define(genFun, toStringTagSymbol, "GeneratorFunction")), genFun.prototype = Object.create(Gp), genFun; + }, exports.awrap = function (arg) { + return { + __await: arg + }; + }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, asyncIteratorSymbol, function () { + return this; + }), exports.AsyncIterator = AsyncIterator, exports.async = function (innerFn, outerFn, self, tryLocsList, PromiseImpl) { + void 0 === PromiseImpl && (PromiseImpl = Promise); + var iter = new AsyncIterator(wrap(innerFn, outerFn, self, tryLocsList), PromiseImpl); + return exports.isGeneratorFunction(outerFn) ? iter : iter.next().then(function (result) { + return result.done ? result.value : iter.next(); + }); + }, defineIteratorMethods(Gp), define(Gp, toStringTagSymbol, "Generator"), define(Gp, iteratorSymbol, function () { + return this; + }), define(Gp, "toString", function () { + return "[object Generator]"; + }), exports.keys = function (val) { + var object = Object(val), + keys = []; + for (var key in object) keys.push(key); + return keys.reverse(), function next() { + for (; keys.length;) { + var key = keys.pop(); + if (key in object) return next.value = key, next.done = !1, next; + } + return next.done = !0, next; + }; + }, exports.values = values, Context.prototype = { + constructor: Context, + reset: function reset(skipTempReset) { + if (this.prev = 0, this.next = 0, this.sent = this._sent = undefined, this.done = !1, this.delegate = null, this.method = "next", this.arg = undefined, this.tryEntries.forEach(resetTryEntry), !skipTempReset) for (var name in this) "t" === name.charAt(0) && hasOwn.call(this, name) && !isNaN(+name.slice(1)) && (this[name] = undefined); + }, + stop: function stop() { + this.done = !0; + var rootRecord = this.tryEntries[0].completion; + if ("throw" === rootRecord.type) throw rootRecord.arg; + return this.rval; + }, + dispatchException: function dispatchException(exception) { + if (this.done) throw exception; + var context = this; + function handle(loc, caught) { + return record.type = "throw", record.arg = exception, context.next = loc, caught && (context.method = "next", context.arg = undefined), !!caught; + } + for (var i = this.tryEntries.length - 1; i >= 0; --i) { + var entry = this.tryEntries[i], + record = entry.completion; + if ("root" === entry.tryLoc) return handle("end"); + if (entry.tryLoc <= this.prev) { + var hasCatch = hasOwn.call(entry, "catchLoc"), + hasFinally = hasOwn.call(entry, "finallyLoc"); + if (hasCatch && hasFinally) { + if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); + if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); + } else if (hasCatch) { + if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); + } else { + if (!hasFinally) throw new Error("try statement without catch or finally"); + if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); + } + } + } + }, + abrupt: function abrupt(type, arg) { + for (var i = this.tryEntries.length - 1; i >= 0; --i) { + var entry = this.tryEntries[i]; + if (entry.tryLoc <= this.prev && hasOwn.call(entry, "finallyLoc") && this.prev < entry.finallyLoc) { + var finallyEntry = entry; + break; + } + } + finallyEntry && ("break" === type || "continue" === type) && finallyEntry.tryLoc <= arg && arg <= finallyEntry.finallyLoc && (finallyEntry = null); + var record = finallyEntry ? finallyEntry.completion : {}; + return record.type = type, record.arg = arg, finallyEntry ? (this.method = "next", this.next = finallyEntry.finallyLoc, ContinueSentinel) : this.complete(record); + }, + complete: function complete(record, afterLoc) { + if ("throw" === record.type) throw record.arg; + return "break" === record.type || "continue" === record.type ? this.next = record.arg : "return" === record.type ? (this.rval = this.arg = record.arg, this.method = "return", this.next = "end") : "normal" === record.type && afterLoc && (this.next = afterLoc), ContinueSentinel; + }, + finish: function finish(finallyLoc) { + for (var i = this.tryEntries.length - 1; i >= 0; --i) { + var entry = this.tryEntries[i]; + if (entry.finallyLoc === finallyLoc) return this.complete(entry.completion, entry.afterLoc), resetTryEntry(entry), ContinueSentinel; + } + }, + "catch": function _catch(tryLoc) { + for (var i = this.tryEntries.length - 1; i >= 0; --i) { + var entry = this.tryEntries[i]; + if (entry.tryLoc === tryLoc) { + var record = entry.completion; + if ("throw" === record.type) { + var thrown = record.arg; + resetTryEntry(entry); + } + return thrown; + } + } + throw new Error("illegal catch attempt"); + }, + delegateYield: function delegateYield(iterable, resultName, nextLoc) { + return this.delegate = { + iterator: values(iterable), + resultName: resultName, + nextLoc: nextLoc + }, "next" === this.method && (this.arg = undefined), ContinueSentinel; + } + }, exports; + } + module.exports = _regeneratorRuntime, module.exports.__esModule = true, module.exports["default"] = module.exports; + }); + + unwrapExports(regeneratorRuntime$1); + + // TODO(Babel 8): Remove this file. + + var runtime = regeneratorRuntime$1(); + var regenerator = runtime; + + // Copied from https://github.com/facebook/regenerator/blob/main/packages/runtime/runtime.js#L736= + try { + regeneratorRuntime = runtime; + } catch (accidentalStrictMode) { + if (typeof globalThis === "object") { + globalThis.regeneratorRuntime = runtime; + } else { + Function("r", "regeneratorRuntime = r")(runtime); + } + } + + /*! + * helper-js v2.0.7 + * (c) phphe (https://github.com/phphe) + * Homepage: null + * Released under the MIT License. + */ + var _marked = /*#__PURE__*/regenerator.mark(iterateAll); + function _createForOfIteratorHelper(o, allowArrayLike) { + var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; + if (!it) { + if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { + if (it) o = it; + var i = 0; + var F = function F() {}; + return { + s: F, + n: function n() { + if (i >= o.length) return { + done: true + }; + return { + done: false, + value: o[i++] + }; + }, + e: function e(_e) { + throw _e; + }, + f: F + }; + } + throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); + } + var normalCompletion = true, + didErr = false, + err; + return { + s: function s() { + it = it.call(o); + }, + n: function n() { + var step = it.next(); + normalCompletion = step.done; + return step; + }, + e: function e(_e2) { + didErr = true; + err = _e2; + }, + f: function f() { + try { + if (!normalCompletion && it.return != null) it.return(); + } finally { + if (didErr) throw err; + } + } + }; + } + function _unsupportedIterableToArray(o, minLen) { + if (!o) return; + if (typeof o === "string") return _arrayLikeToArray(o, minLen); + var n = Object.prototype.toString.call(o).slice(8, -1); + if (n === "Object" && o.constructor) n = o.constructor.name; + if (n === "Map" || n === "Set") return Array.from(o); + if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); + } + function _arrayLikeToArray(arr, len) { + if (len == null || len > arr.length) len = arr.length; + for (var i = 0, arr2 = new Array(len); i < len; i++) { + arr2[i] = arr[i]; + } + return arr2; + } + function isArray(v) { + return Object.prototype.toString.call(v) === "[object Array]"; + } + function isObject(v) { + return Object.prototype.toString.call(v) === "[object Object]"; + } + function isFunction(v) { + return typeof v === "function"; + } + // 返回指定范围随机整数, 包括范围起始值和终止值 + + function randInt(min, max) { + return Math.floor(Math.random() * (max - min + 1) + min); + } // rand item in array + // 返回数组随机一项 + + function randChoice(arr) { + return arr[randInt(0, arr.length - 1)]; + } // Pad a string to a certain length with another string + // 随机字符串 + + function randString() { + var len = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 8; + var seeds = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; + var r = ""; + for (var i = 0; i < len; i++) { + r += randChoice(seeds); + } + return r; + } // ## Array + // ## 数组 + // remove item from array. return removed count + // 从数组删除项. 返回删除计数 + + function arrayRemove(arr, v) { + var index; + var count = 0; + while ((index = arr.indexOf(v)) > -1) { + arr.splice(index, 1); + count++; + } + return count; + } // remove items from array by sorted indexes. indexes example: [0, 2, 6, 8, 9] + // 返回数组末项 + + function arrayLast(arr) { + return arr[arr.length - 1]; + } // return arr1 - arr2 + function toArrayIfNot(arrOrNot) { + return isArray(arrOrNot) ? arrOrNot : [arrOrNot]; + } + // 返回新数组排除末尾n项 + + function arrayWithoutEnd(arr, n) { + return arr.slice(0, arr.length - n); + } // get one-dimensional array from multidimensional array + function iterateAll(val) { + var opt, + i, + info, + _i2, + _Object$keys, + key, + _info, + _i3, + _info2, + keys, + _i4, + _keys, + _key, + _info3, + _args = arguments; + return regenerator.wrap(function iterateAll$(_context) { + while (1) { + switch (_context.prev = _context.next) { + case 0: + opt = _args.length > 1 && _args[1] !== undefined ? _args[1] : {}; + if (opt.reverse) { + _context.next = 30; + break; + } + if (!(val.length != null)) { + _context.next = 14; + break; + } + i = 0; + case 4: + if (!(i < val.length)) { + _context.next = 12; + break; + } + info = { + value: val[i], + index: i + }; + if (!(!opt.exclude || !opt.exclude(info))) { + _context.next = 9; + break; + } + _context.next = 9; + return info; + case 9: + i++; + _context.next = 4; + break; + case 12: + _context.next = 28; + break; + case 14: + if (!isObject(val)) { + _context.next = 27; + break; + } + _i2 = 0, _Object$keys = Object.keys(val); + case 16: + if (!(_i2 < _Object$keys.length)) { + _context.next = 25; + break; + } + key = _Object$keys[_i2]; + _info = { + value: val[key], + key: key + }; + if (!(!opt.exclude || !opt.exclude(_info))) { + _context.next = 22; + break; + } + _context.next = 22; + return _info; + case 22: + _i2++; + _context.next = 16; + break; + case 25: + _context.next = 28; + break; + case 27: + throw "Unsupported type"; + case 28: + _context.next = 58; + break; + case 30: + if (!(val.length != null)) { + _context.next = 42; + break; + } + _i3 = val.length - 1; + case 32: + if (!(_i3 >= 0)) { + _context.next = 40; + break; + } + _info2 = { + value: val[_i3], + index: _i3 + }; + if (!(!opt.exclude || !opt.exclude(_info2))) { + _context.next = 37; + break; + } + _context.next = 37; + return _info2; + case 37: + _i3--; + _context.next = 32; + break; + case 40: + _context.next = 58; + break; + case 42: + if (!isObject(val)) { + _context.next = 57; + break; + } + keys = Object.keys(val); + keys.reverse(); + _i4 = 0, _keys = keys; + case 46: + if (!(_i4 < _keys.length)) { + _context.next = 55; + break; + } + _key = _keys[_i4]; + _info3 = { + value: val[_key], + key: _key + }; + if (!(!opt.exclude || !opt.exclude(_info3))) { + _context.next = 52; + break; + } + _context.next = 52; + return _info3; + case 52: + _i4++; + _context.next = 46; + break; + case 55: + _context.next = 58; + break; + case 57: + throw "Unsupported type"; + case 58: + case "end": + return _context.stop(); + } + } + }, _marked); + } // example: objectGet(window, 'document.body.children.0') . source: http://stackoverflow.com/questions/8817394/javascript-get-deep-value-from-object-by-passing-path-to-it-as-string + function objectAssignIfKeyNull(obj1, obj2) { + Object.keys(obj2).forEach(function (key) { + if (obj1[key] == null) { + obj1[key] = obj2[key]; + } + }); + } + function depthFirstSearch(obj, handler) { + var childrenKey = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "children"; + var opt = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {}; + var rootChildren = isArray(obj) ? obj : [obj]; // + + var StopException = /*#__PURE__*/_createClass(function StopException() { + _classCallCheck(this, StopException); + }); + var func = function func(children, parent, parentPath) { + if (opt.reverse) { + children = children.slice(); + children.reverse(); + } + var len = children.length; + for (var i = 0; i < len; i++) { + var item = children[i]; + var index = opt.reverse ? len - i - 1 : i; + var path = parentPath ? [].concat(_toConsumableArray(parentPath), [index]) : []; + var r = handler(item, index, parent, path); + if (r === false) { + // stop + throw new StopException(); + } else if (r === "skip children") { + continue; + } else if (r === "skip siblings") { + break; + } + if (item[childrenKey] != null) { + func(item[childrenKey], item, path); + } + } + }; + try { + func(rootChildren, null, isArray(obj) ? [] : null); + } catch (e) { + if (e instanceof StopException) ;else { + throw e; + } + } + } // refer [depthFirstSearch](#depthFirstSearch) + + var walkTreeData = depthFirstSearch; // tree data helpers + + var TreeData = /*#__PURE__*/function () { + // data = null; + function TreeData() { + var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : []; + _classCallCheck(this, TreeData); + this.childrenKey = "children"; + this.data = data; + } + _createClass(TreeData, [{ + key: "rootChildren", + get: function get() { + var childrenKey = this.childrenKey; + var data = this.data; + return isArray(data) ? data : data[childrenKey]; + } + }, { + key: "iteratePath", + value: /*#__PURE__*/regenerator.mark(function iteratePath(path) { + var opt, + childrenKey, + rootChildren, + prevPath, + prevChildren, + _iterator4, + _step4, + index, + currentPath, + currentNode, + list, + _iterator5, + _step5, + _step5$value, + path0, + node, + _path, + _args2 = arguments; + return regenerator.wrap(function iteratePath$(_context2) { + while (1) { + switch (_context2.prev = _context2.next) { + case 0: + opt = _args2.length > 1 && _args2[1] !== undefined ? _args2[1] : {}; + childrenKey = this.childrenKey, rootChildren = this.rootChildren; + if (opt.reverse) { + _context2.next = 29; + break; + } + prevPath = []; + prevChildren = rootChildren; + _iterator4 = _createForOfIteratorHelper(path); + _context2.prev = 6; + _iterator4.s(); + case 8: + if ((_step4 = _iterator4.n()).done) { + _context2.next = 19; + break; + } + index = _step4.value; + currentPath = [].concat(_toConsumableArray(prevPath), [index]); + currentNode = prevChildren[index]; + _context2.next = 14; + return { + path: currentPath, + node: currentNode + }; + case 14: + prevPath = currentPath; + prevChildren = currentNode[childrenKey]; + case 17: + _context2.next = 8; + break; + case 19: + _context2.next = 24; + break; + case 21: + _context2.prev = 21; + _context2.t0 = _context2["catch"](6); + _iterator4.e(_context2.t0); + case 24: + _context2.prev = 24; + _iterator4.f(); + return _context2.finish(24); + case 27: + _context2.next = 49; + break; + case 29: + list = _toConsumableArray(this.iteratePath(path, Object.assign(Object.assign({}, opt), { + reverse: false + }))); + list.reverse(); + _iterator5 = _createForOfIteratorHelper(list); + _context2.prev = 32; + _iterator5.s(); + case 34: + if ((_step5 = _iterator5.n()).done) { + _context2.next = 41; + break; + } + _step5$value = _step5.value, path0 = _step5$value.path, node = _step5$value.node; + _path = path0; + _context2.next = 39; + return { + path: _path, + node: node + }; + case 39: + _context2.next = 34; + break; + case 41: + _context2.next = 46; + break; + case 43: + _context2.prev = 43; + _context2.t1 = _context2["catch"](32); + _iterator5.e(_context2.t1); + case 46: + _context2.prev = 46; + _iterator5.f(); + return _context2.finish(46); + case 49: + case "end": + return _context2.stop(); + } + } + }, iteratePath, this, [[6, 21, 24, 27], [32, 43, 46, 49]]); + }) + }, { + key: "getAllNodes", + value: function getAllNodes(path) { + var all = []; + var _iterator6 = _createForOfIteratorHelper(this.iteratePath(path)), + _step6; + try { + for (_iterator6.s(); !(_step6 = _iterator6.n()).done;) { + var node = _step6.value.node; + all.push(node); + } + } catch (err) { + _iterator6.e(err); + } finally { + _iterator6.f(); + } + return all; + } + }, { + key: "getNode", + value: function getNode(path) { + return arrayLast(this.getAllNodes(path)); + } + }, { + key: "getNodeIndexAndParent", + value: function getNodeIndexAndParent(path) { + var parentPath = path.slice(); + var index = parentPath.pop(); + return { + parent: this.getNode(parentPath), + index: index, + parentPath: parentPath + }; + } + }, { + key: "getNodeParent", + value: function getNodeParent(path) { + return this.getNodeIndexAndParent(path).parent; + } + }, { + key: "setPathNode", + value: function setPathNode(path, node) { + if (path == null || path.length === 0) { + this.data = node; + } else { + var childrenKey = this.childrenKey, + rootChildren = this.rootChildren; + var _this$getNodeIndexAnd = this.getNodeIndexAndParent(path), + parent = _this$getNodeIndexAnd.parent, + index = _this$getNodeIndexAnd.index; + var parentChildren = path.length === 1 ? rootChildren : parent[childrenKey]; + parentChildren[index] = node; + } + } + }, { + key: "removeNode", + value: function removeNode(path) { + var childrenKey = this.childrenKey, + rootChildren = this.rootChildren; + var _this$getNodeIndexAnd2 = this.getNodeIndexAndParent(path), + parent = _this$getNodeIndexAnd2.parent, + index = _this$getNodeIndexAnd2.index; + var parentChildren = path.length === 1 ? rootChildren : parent[childrenKey]; + var node = parentChildren[index]; + parentChildren.splice(index, 1); + return node; + } + }, { + key: "walk", + value: function walk(handler, opt) { + var childrenKey = this.childrenKey, + data = this.data; // @ts-ignore + + return walkTreeData(data, handler, childrenKey, opt); + } + }, { + key: "clone", + value: function clone() { + var opt = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; + // opt.afterNodeCreated(newNode, {oldNode: node, index, parent, path}) + var childrenKey = this.childrenKey; + var td = new TreeData(); + td.childrenKey = childrenKey; + this.walk(function (node, index, parent, path) { + var newNode = Object.assign({}, node); + if (newNode[childrenKey]) { + newNode[childrenKey] = []; + } + if (opt.afterNodeCreated) { + opt.afterNodeCreated(newNode, { + oldNode: node, + index: index, + parent: parent, + path: path + }); + } + td.setPathNode(path, newNode); + }); + return td.data; + } + }]); + return TreeData; + }(); // ## function + // ## 函数 + // if it is function, return result, else return it directly. + + function resolveValueOrGettter(valueOrGetter) { + var args = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : []; + if (isFunction(valueOrGetter)) { + return valueOrGetter.apply(void 0, _toConsumableArray(args)); + } else { + return valueOrGetter; + } + } + + function joinFunctionsByNext(funcs) { + var next = function next() {}; + var _iterator7 = _createForOfIteratorHelper(iterateAll(funcs, { + reverse: true + })), + _step7; + try { + for (_iterator7.s(); !(_step7 = _iterator7.n()).done;) { + var func = _step7.value.value; + var currentNext = next; + next = wrapFuncWithNext(func, currentNext); + } + } catch (err) { + _iterator7.e(err); + } finally { + _iterator7.f(); + } + return next; + function wrapFuncWithNext(func, next) { + return function () { + for (var _len4 = arguments.length, args = new Array(_len4), _key5 = 0; _key5 < _len4; _key5++) { + args[_key5] = arguments[_key5]; + } + return func.apply(void 0, [next].concat(args)); + }; + } + } // ## promise + // return NodeList if there are multiple top-level nodes + + function createElementFromHTML(htmlString) { + var div = document.createElement("div"); + div.innerHTML = htmlString.trim(); + if (div.childNodes.length > 1) { + return div.childNodes; + } else { + return div.childNodes[0]; + } + } + function isDescendantOf(el, parent) { + while (true) { + if (el.parentElement == null) { + return false; + } else if (el.parentElement === parent) { + return true; + } else { + el = el.parentElement; + } + } + } + function removeEl(el) { + if (el.parentNode !== null) { + return el.parentNode.removeChild(el); + } + } // refer: https://stackoverflow.com/questions/871399/cross-browser-method-for-detecting-the-scrolltop-of-the-browser-window + + function getScroll() { + if (typeof pageYOffset != "undefined") { + //most browsers except IE before #9 + return { + top: pageYOffset, + left: pageXOffset + }; + } else { + var B = document.body; //IE 'quirks' + + var D = document.documentElement; //IE with doctype + + D = D.clientHeight ? D : B; + return { + top: D.scrollTop, + left: D.scrollLeft + }; + } + } // refer: https://gist.github.com/aderaaij/89547e34617b95ac29d1 + + function getOffset(el) { + var rect = getBoundingClientRect(el); + var scroll = getScroll(); + return { + x: rect.left + scroll.left, + y: rect.top + scroll.top + }; + } // there is some trap in el.offsetParent, so use this func to fix + function getBoundingClientRect(el) { + // refer: http://www.51xuediannao.com/javascript/getBoundingClientRect.html + var xy = el.getBoundingClientRect(); + var top = xy.top - document.documentElement.clientTop, + //document.documentElement.clientTop 在IE67中始终为2，其他高级点的浏览器为0 + bottom = xy.bottom, + left = xy.left - document.documentElement.clientLeft, + //document.documentElement.clientLeft 在IE67中始终为2，其他高级点的浏览器为0 + right = xy.right, + width = xy.width || right - left, + //IE67不存在width 使用right - left获得 + height = xy.height || bottom - top; + var x = left; + var y = top; + return { + top: top, + right: right, + bottom: bottom, + left: left, + width: width, + height: height, + x: x, + y: y + }; + } // refer [getBoundingClientRect](#getBoundingClientRect) + + var getViewportPosition = getBoundingClientRect; // TODO not tested + function findParent(el, callback) { + var opt = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}; + var cur = opt && opt.withSelf ? el : el.parentElement; + while (cur) { + var r = callback(cur); + if (r === "break") { + return; + } else if (r) { + return cur; + } else { + cur = cur.parentElement; + } + } + } + function backupAttr(el, name) { + var key = "original_".concat(name); + el[key] = el.getAttribute(name); + } + function restoreAttr(el, name) { + var key = "original_".concat(name); + var value = el[key]; + if (value == null) { + el.removeAttribute(name); + } else { + el.setAttribute(name, value); + } + } // source: http://youmightnotneedjquery.com/ + + function hasClass(el, className) { + if (el.classList) { + return el.classList.contains(className); + } else { + return new RegExp("(^| )" + className + "( |$)", "gi").test(el.className); + } + } // source: http://youmightnotneedjquery.com/ + + function addClass(el, className) { + if (!hasClass(el, className)) { + if (el.classList) { + el.classList.add(className); + } else { + el.className += " " + className; + } + } + } // source: http://youmightnotneedjquery.com/ + function onDOM(el, name, handler) { + for (var _len5 = arguments.length, args = new Array(_len5 > 3 ? _len5 - 3 : 0), _key6 = 3; _key6 < _len5; _key6++) { + args[_key6 - 3] = arguments[_key6]; + } + if (el.addEventListener) { + // 所有主流浏览器，除了 IE 8 及更早 IE版本 + el.addEventListener.apply(el, [name, handler].concat(args)); // @ts-ignore + } else if (el.attachEvent) { + // IE 8 及更早 IE 版本 + // @ts-ignore + el.attachEvent.apply(el, ["on".concat(name), handler].concat(args)); + } + } + function offDOM(el, name, handler) { + for (var _len6 = arguments.length, args = new Array(_len6 > 3 ? _len6 - 3 : 0), _key7 = 3; _key7 < _len6; _key7++) { + args[_key7 - 3] = arguments[_key7]; + } + if (el.removeEventListener) { + // 所有主流浏览器，除了 IE 8 及更早 IE版本 + el.removeEventListener.apply(el, [name, handler].concat(args)); // @ts-ignore + } else if (el.detachEvent) { + // IE 8 及更早 IE 版本 + // @ts-ignore + el.detachEvent.apply(el, ["on".concat(name), handler].concat(args)); + } + } + function findNodeList(list, callback) { + var opt = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}; + var iterator = iterateAll(list, { + reverse: opt.reverse + }); + var _iterator13 = _createForOfIteratorHelper(iterator), + _step13; + try { + for (_iterator13.s(); !(_step13 = _iterator13.n()).done;) { + var _step13$value = _step13.value, + value = _step13$value.value, + index = _step13$value.index; + if (callback(value, index)) { + return value; + } + } + } catch (err) { + _iterator13.e(err); + } finally { + _iterator13.f(); + } + } + function elementsFromPoint(x, y) { + var args = [x, y]; + var func = document.elementsFromPoint || + // @ts-ignore + document.msElementsFromPoint || elementsFromPoint; + return func.apply(document, args); + function elementsFromPoint(x, y) { + var parents = []; + var parent = void 0; + do { + if (parent !== document.elementFromPoint(x, y)) { + parent = document.elementFromPoint(x, y); + parents.push(parent); + parent.style.pointerEvents = "none"; + } else { + parent = false; + } + } while (parent); + parents.forEach(function (parent) { + return parent.style.pointerEvents = "all"; + }); + return parents; + } + } + /* scroll to a positon with duration + from https://gist.github.com/andjosh/6764939 + interface options{ + x: number // nullable. don't scroll horizontally when null + y: number // nullable. don't scroll vertically when null + duration: number // default 0 + element: Element // default is the top scrollable element. + beforeEveryFrame: (count: number) => boolean|void // call before requestAnimationFrame execution. return false to stop + } + return stop + */ + + function scrollTo(options) { + if (!options.element) { + options.element = document.scrollingElement || document.documentElement; + } + if (options.duration == null) { + options.duration = 0; + } + var x = options.x, + y = options.y, + duration = options.duration, + element = options.element; + var requestAnimationFrameId; + var count = 0; + var startY = element.scrollTop, + changeY = y - startY, + startX = element.scrollLeft, + changeX = x - startX, + startDate = +new Date(), + animateScroll = function animateScroll() { + if (options.beforeEveryFrame && options.beforeEveryFrame(count) === false) { + return; + } + var currentDate = new Date().getTime(); + var changedTime = currentDate - startDate; + if (y != null) { + element.scrollTop = parseInt(calc(startY, changeY, changedTime, duration)); + } + if (x != null) { + element.scrollLeft = parseInt(calc(startX, changeX, changedTime, duration)); + } + if (changedTime < duration) { + requestAnimationFrameId = requestAnimationFrame(animateScroll); + } else { + if (y != null) { + element.scrollTop = y; + } + if (x != null) { + element.scrollLeft = x; + } + } + count++; + }; + var stop = function stop() { + cancelAnimationFrame(requestAnimationFrameId); + }; + animateScroll(); // return stop + + return stop; + function calc(startValue, changeInValue, changedTime, duration) { + return startValue + changeInValue * (changedTime / duration); + } + } // ### DOM structure + + function insertBefore(el, target) { + target.parentElement.insertBefore(el, target); + } + function insertAfter(el, target) { + target.parentElement.insertBefore(el, target.nextSibling); + } + function prependTo(el, target) { + target.insertBefore(el, target.firstChild); + } + function appendTo(el, target) { + target.appendChild(el); + } // ## Date + function binarySearch(arr, callback) { + var opt = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}; + opt = Object.assign({ + start: 0, + end: arr.length - 1, + maxTimes: 1000 + }, opt); + var _opt = opt, + start = _opt.start, + end = _opt.end; + var _opt2 = opt, + returnNearestIfNoHit = _opt2.returnNearestIfNoHit, + maxTimes = _opt2.maxTimes; + var midNum; + var mid; + if (start == null) { + start = 0; + end = arr.length - 1; + } + var i = 0; + var r; + while (start >= 0 && start <= end) { + if (i >= maxTimes) { + throw Error("binarySearch: loop times is over ".concat(maxTimes, ", you can increase the limit.")); + } + midNum = Math.floor((end - start) / 2 + start); + mid = arr[midNum]; + r = callback(mid, i); + if (r > 0) { + end = midNum - 1; + } else if (r < 0) { + start = midNum + 1; + } else { + return { + index: midNum, + value: mid, + count: i + 1, + hit: true + }; + } + i++; + } + return returnNearestIfNoHit ? { + index: midNum, + value: mid, + count: i + 1, + hit: false, + greater: r > 0 + } : null; + } // + function waitTime(milliseconds, callback) { + return new Promise(function (resolve, reject) { + setTimeout(function () { + callback && callback(); + resolve(); + }, milliseconds); + }); + } + var Cache = /*#__PURE__*/function () { + function Cache() { + _classCallCheck(this, Cache); + this.store = {}; + } + _createClass(Cache, [{ + key: "has", + value: function has(name) { + return this.store.hasOwnProperty(name); + } + }, { + key: "remember", + value: function remember(name, getter) { + if (!this.has(name)) { + this.store[name] = { + value: getter() + }; + } + return this.store[name].value; + } + }, { + key: "forget", + value: function forget(name) { + if (name) { + if (this.has(name)) { + delete this.store[name]; + } + } else { + this.store = {}; + } + } + }]); + return Cache; + }(); // attach cached getters to an object; can attach to self + + function attachCache(obj, toCache) { + var cache = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : new Cache(); + var _loop2 = function _loop2(key) { + var getter = toCache[key]; + Object.defineProperty(obj, key, { + get: function get() { + var _this9 = this; + return cache.remember(key, function () { + return getter.call(_this9); + }); + } + }); + }; + for (var key in toCache) { + _loop2(key); + } + } // for animation + + /*! + * vue-functions v2.0.6 + * (c) phphe (https://github.com/phphe) + * Homepage: undefined + * Released under the MIT License. + */ + /** + * [updatablePropsEvenUnbound description] + * @param {[type]} props [object or getter] + * @return {[type]} [description] + * props eg: { + value: {$localName: 'current', $localSetter: (value, vm)}, + } + default localName is `localProps_${name}` + */ + + function updatablePropsEvenUnbound(props) { + if (isFunction(props)) { + props = props(); + } else { + // object + props = Object.assign({}, props); + } + var standardProps = {}; // without key starts with `$` + + var _loop = function _loop(name) { + var prop = props[name]; // complete 补全选项 + + if (!prop.$localName) { + prop.$localName = "localProps_".concat(name); + } + if (!prop.$localSetter) { + prop.$localSetter = function (value) { + return value; + }; + } // make standardProp + + var standardProp = {}; + standardProps[name] = standardProp; + Object.keys(props[name]).forEach(function (key) { + if (key[0] !== '$') { + standardProp[key] = prop[key]; + } + }); + }; + for (var name in props) { + _loop(name); + } + var component = { + props: standardProps, + computed: {}, + watch: {} + }; + component.data = function () { + var t = { + localValueOfUpdatableProps: {} + }; + for (var _i = 0, _Object$keys = Object.keys(props); _i < _Object$keys.length; _i++) { + var _name = _Object$keys[_i]; + t.localValueOfUpdatableProps[_name] = this[_name]; + } + return t; + }; + var _loop2 = function _loop2() { + var name = _Object$keys2[_i2]; + var prop = props[name]; + component.watch[name] = function (value) { + this.localValueOfUpdatableProps[name] = prop.$localSetter(value, this); + }; + var localName = prop.$localName; + component.computed[localName] = { + get: function get() { + return this.localValueOfUpdatableProps[name]; + }, + set: function set(value) { + if (name === 'value') { + this.$emit('input', value); + } else { + this.$emit("update:".concat(name), value); + } + this.localValueOfUpdatableProps[name] = prop.$localSetter(value, this); + } + }; + }; + for (var _i2 = 0, _Object$keys2 = Object.keys(props); _i2 < _Object$keys2.length; _i2++) { + _loop2(); + } + return component; + } + var hookHelper = { + methods: { + // todo extract hooks to vue-functions + // get hooks in this._hooks, without which in props + _getNonPropHooksByName: function _getNonPropHooksByName(name) { + if (this._hooks) { + return this._hooks[name]; + } + }, + addHook: function addHook(name, func) { + if (!this._getNonPropHooksByName(name)) { + if (!this._hooks) { + this._hooks = {}; + } + if (!this._hooks[name]) { + this._hooks[name] = []; + } + } + this._hooks[name].push(func); + }, + removeHook: function removeHook(name, func) { + var hooks = this._getNonPropHooksByName(name); + if (hooks) { + arrayRemove(hooks, func); + } + }, + hasHook: function hasHook(name) { + return this._getNonPropHooksByName(name) || this[name]; + }, + executeHook: function executeHook(name, args) { + var _this2 = this; + var hooks = this._getNonPropHooksByName(name); + hooks = hooks ? hooks.slice() : []; + if (this[name] && isFunction(this[name])) { + hooks.push(function (next) { + for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { + args[_key - 1] = arguments[_key]; + } + return _this2[name].apply(_this2, args); + }); + } + return joinFunctionsByNext(hooks).apply(void 0, _toConsumableArray(args)); + } + } + }; + + function cloneTreeData(treeData, opt) { + return new TreeData(treeData).clone(opt); + } + function walkTreeData$1(treeData, handler, opt) { + return new TreeData(treeData).walk(handler, opt); + } + function getPureTreeData(treeData) { + const opt = { + afterNodeCreated: newNode => { + Object.keys(newNode).forEach(key => { + if (key[0] === '$') { + delete newNode[key]; + } + }); + } + }; + return cloneTreeData(treeData, opt); + } + + const template = function () { + // convert undefined to empty str + const noUndefined = str => str ? str : ''; + // tree tpl, to render recursively + const childrenListTpl = (nodes, parent, parentPath) => { + const indentStyle = { + [!this.rtl ? 'paddingLeft' : 'paddingRight']: parentPath.length * this.indent + 'px' + }; + const branchTpl = (node, index) => { + const path = [...parentPath, index]; + const transitionComponent = this.foldingTransition || 'transition'; + const slotDefault = () => { + const original = () => { + if (this.$slots.default) { + return this.$slots.default({ + node, + index, + path, + tree: this + }); + } else { + return node.text; + } + }; + if (this.overrideSlotDefault) { + return this.overrideSlotDefault({ + node, + index, + path, + tree: this + }, original); + } else { + return original(); + } + }; + let nodebackStyle = indentStyle; + if (node.$nodeBackStyle) { + nodebackStyle = { + ...nodebackStyle, + ...node.$nodeBackStyle + }; + } + return vue.createVNode("div", { + "class": `tree-branch ${noUndefined(node.$branchClass)} ${noUndefined(node.$hidden && 'he-tree--hidden')}`, + "style": node.$branchStyle || {}, + "data-tree-node-path": path.join(',') + }, [vue.createVNode("div", { + "class": `tree-node-back ${noUndefined(node.$nodeBackClass)}`, + "style": nodebackStyle || {} + }, [vue.createVNode("div", { + "class": `tree-node ${noUndefined(node.$nodeClass)}`, + "style": node.$nodeStyle || {} + }, [slotDefault()])]), (node.children && node.children.length) > 0 && vue.createVNode(transitionComponent, { + "name": this.$props.foldingTransitionName + }, { + default: () => [!node.$folded && childrenListTpl(node.children, node, path)] + })]); + }; + return vue.createVNode("div", { + "class": `tree-children ${noUndefined(parent === this.rootNode && 'tree-root')} ${noUndefined(parent.$childrenClass)}`, + "style": parent.$childrenStyle || {} + }, [nodes.map(branchTpl)]); + }; + return vue.createVNode("div", { + "class": `he-tree ${this.treeClass} ${noUndefined(this.rtl && 'he-tree--rtl')}`, + "data-tree-id": this.treeId + }, [this.blockHeader && this.blockHeader(), childrenListTpl(this.rootNode.children, this.rootNode, []), this.blockFooter && this.blockFooter()]); + }; + const trees = {}; + const Tree = { + render: template, + mixins: [updatablePropsEvenUnbound({ + value: { + $localName: 'treeData', + required: true + } + }), hookHelper], + props: { + indent: { + type: Number, + default: 20 + }, + rtl: { + type: Boolean + }, + rootNode: { + default: is => ({}) + } + }, + // components: {}, + data() { + return { + trees, + treeClass: '', + treeId: randString(), + // hooks of render + blockHeader: null, + blockFooter: null, + overrideSlotDefault: null + }; + }, + // computed: {}, + watch: { + treeData: { + immediate: true, + handler(treeData) { + this._TreeDataHelper = new TreeData(this.treeData); + } + } + }, + methods: { + iteratePath(path, opt) { + return this._TreeDataHelper.iteratePath(path, opt); + }, + getTreeVmByTreeEl(treeEl) { + return this.trees[treeEl.getAttribute('data-tree-id')]; + }, + getAllNodesByPath(path) { + return this._TreeDataHelper.getAllNodes(path); + }, + getNodeByPath(path) { + return this._TreeDataHelper.getNode(path); + }, + getPathByBranchEl(branchEl) { + return branchEl.getAttribute('data-tree-node-path').split(',').map(v => parseInt(v)); + }, + getBranchElByPath(path) { + return this.$el.querySelector(`[data-tree-node-path='${path.join(',')}']`); + }, + getNodeByBranchEl(branchEl) { + return this.getNodeByPath(this.getPathByBranchEl(branchEl)); + }, + getNodeParentByPath(path) { + return this._TreeDataHelper.getNodeParent(path); + }, + removeNodeByPath(path) { + return this._TreeDataHelper.removeNode(path); + }, + walkTreeData(handler, opt) { + return walkTreeData$1(this.treeData, handler, opt); + }, + cloneTreeData(opt) { + return cloneTreeData(this.treeData, opt); + }, + // return cloned new tree data without property witch starts with `$` + getPureTreeData() { + return getPureTreeData(this.treeData); + } + }, + created() { + // + const updateRootNode = () => { + this.rootNode.children = this.treeData; + }; + this.$watch('rootNode', updateRootNode, { + immediate: true + }); + this.$watch('treeData', updateRootNode, { + immediate: true + }); + }, + mounted() { + // + this.treeId = randString(); + this.trees[this.treeId] = this; + }, + beforeUnmount() { + delete this.trees[this.treeId]; + }, + // + mixPlugins(plugins) { + const MixedTree = { + name: 'Tree', + extends: Tree, + mixins: plugins, + mixPlugins: this.mixPlugins + }; + return MixedTree; + } + }; + + function foldAll(treeData) { + walkTreeData$1(treeData, childNode => { + childNode.$folded = true; + }); + } + function unfoldAll(treeData) { + walkTreeData$1(treeData, childNode => { + childNode.$folded = false; + }); + } + var fold = { + props: { + foldingTransitionName: { + type: String + }, + foldingTransition: {}, + foldAllAfterMounted: { + type: Boolean + } + }, + emits: ['nodeFoldedChanged', 'node-folded-changed'], + methods: { + fold(node, path) { + if (!node.$folded) { + node['$folded'] = true; + this.$emit('nodeFoldedChanged', node); + this.$emit('node-folded-changed', node); + } + }, + unfold(node, path, opt = {}) { + opt = { + foldOthers: false, + ...opt + }; + if (opt.foldOthers) { + this.foldAll(); + } + if (node.$folded) { + node['$folded'] = false; + this.$emit('nodeFoldedChanged', node); + } + }, + toggleFold(node, path, opt) { + if (node.$folded) { + this.unfold(node, path, opt); + } else { + this.fold(node, path, opt); + } + }, + foldAll() { + this.walkTreeData(childNode => { + this.fold(childNode); + }); + }, + unfoldAll() { + this.walkTreeData(childNode => { + this.unfold(childNode, { + unfoldParent: false + }); + }); + } + }, + mounted() { + if (this.foldAllAfterMounted) { + this.foldAll(); + } + } + }; + + var check = { + props: {}, + methods: { + afterCheckChanged(node, path) { + // update parent + const nodes = this.getAllNodesByPath(path); + const reversedParents = nodes.slice(0, nodes.length - 1); + reversedParents.reverse(); + for (const parent of reversedParents) { + parent['$checked'] = parent.children.every(child => child.$checked); + } + // update children + if (node.children && node.children.length > 0) { + walkTreeData$1(node.children, childNode => { + childNode['$checked'] = node.$checked; + }); + } + }, + check(node, path) { + node['$checked'] = true; + this.afterCheckChanged(node, path); + }, + uncheck(node, path) { + node['$checked'] = false; + this.afterCheckChanged(node, path); + }, + toggleCheck(node, path) { + node['$checked'] = !node.$checked; + this.afterCheckChanged(node, path); + } + } + }; + + /*! + * drag-event-service v1.1.10 + * (c) phphe (https://github.com/phphe) + * Homepage: null + * Released under the MIT License. + */ + var events = { + start: ['mousedown', 'touchstart'], + move: ['mousemove', 'touchmove'], + end: ['mouseup', 'touchend'] + }; + var DragEventService = { + isTouch: function isTouch(e) { + return e.type && e.type.startsWith('touch'); + }, + _getStore: function _getStore(el) { + if (!el._wrapperStore) { + el._wrapperStore = []; + } + return el._wrapperStore; + }, + on: function on(el, name, handler, options) { + var _hp$onDOM, _hp$onDOM2; + var _resolveOptions = resolveOptions(options), + args = _resolveOptions.args, + mouseArgs = _resolveOptions.mouseArgs, + touchArgs = _resolveOptions.touchArgs; + var store = this._getStore(el); + var ts = this; + var wrapper = function wrapper(e) { + var mouse; + var isTouch = ts.isTouch(e); + if (isTouch) { + // touch + mouse = { + x: e.changedTouches[0].pageX, + y: e.changedTouches[0].pageY, + pageX: e.changedTouches[0].pageX, + pageY: e.changedTouches[0].pageY, + clientX: e.changedTouches[0].clientX, + clientY: e.changedTouches[0].clientY, + screenX: e.changedTouches[0].screenX, + screenY: e.changedTouches[0].screenY + }; + } else { + // mouse + mouse = { + x: e.pageX, + y: e.pageY, + pageX: e.pageX, + pageY: e.pageY, + clientX: e.clientX, + clientY: e.clientY, + screenX: e.screenX, + screenY: e.screenY + }; + if (name === 'start' && e.which !== 1) { + // not left button mousedown + return; + } + } + return handler.call(this, e, mouse); + }; + store.push({ + handler: handler, + wrapper: wrapper + }); // follow format will cause big bundle size + // 以下写法将会使打包工具认为hp是上下文, 导致打包整个hp + // hp.onDOM(el, events[name][0], wrapper, ...args) + + (_hp$onDOM = onDOM).call.apply(_hp$onDOM, [null, el, events[name][0], wrapper].concat([].concat(_toConsumableArray(args), _toConsumableArray(mouseArgs)))); + (_hp$onDOM2 = onDOM).call.apply(_hp$onDOM2, [null, el, events[name][1], wrapper].concat([].concat(_toConsumableArray(args), _toConsumableArray(touchArgs)))); + }, + off: function off(el, name, handler, options) { + var _resolveOptions2 = resolveOptions(options), + args = _resolveOptions2.args, + mouseArgs = _resolveOptions2.mouseArgs; + var store = this._getStore(el); + for (var i = store.length - 1; i >= 0; i--) { + var _store$i = store[i], + handler2 = _store$i.handler, + wrapper = _store$i.wrapper; + if (handler === handler2) { + var _hp$offDOM, _hp$offDOM2; + (_hp$offDOM = offDOM).call.apply(_hp$offDOM, [null, el, events[name][0], wrapper].concat([].concat(_toConsumableArray(args), _toConsumableArray(mouseArgs)))); + (_hp$offDOM2 = offDOM).call.apply(_hp$offDOM2, [null, el, events[name][1], wrapper].concat([].concat(_toConsumableArray(args), _toConsumableArray(mouseArgs)))); + store.splice(i, 1); + } + } + } + }; + function resolveOptions(options) { + if (!options) { + options = {}; + } + var args = options.args || []; + var mouseArgs = options.mouseArgs || []; + var touchArgs = options.touchArgs || []; + return { + args: args, + mouseArgs: mouseArgs, + touchArgs: touchArgs + }; + } + + /*! + * draggable-helper v5.0.6 + * (c) phphe (https://github.com/phphe) + * Homepage: undefined + * Released under the MIT License. + */ + function _createForOfIteratorHelper$1(o) { + if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { + if (Array.isArray(o) || (o = _unsupportedIterableToArray$1(o))) { + var i = 0; + var F = function F() {}; + return { + s: F, + n: function n() { + if (i >= o.length) return { + done: true + }; + return { + done: false, + value: o[i++] + }; + }, + e: function e(_e) { + throw _e; + }, + f: F + }; + } + throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); + } + var it, + normalCompletion = true, + didErr = false, + err; + return { + s: function s() { + it = o[Symbol.iterator](); + }, + n: function n() { + var step = it.next(); + normalCompletion = step.done; + return step; + }, + e: function e(_e2) { + didErr = true; + err = _e2; + }, + f: function f() { + try { + if (!normalCompletion && it.return != null) it.return(); + } finally { + if (didErr) throw err; + } + } + }; + } + function _unsupportedIterableToArray$1(o, minLen) { + if (!o) return; + if (typeof o === "string") return _arrayLikeToArray$1(o, minLen); + var n = Object.prototype.toString.call(o).slice(8, -1); + if (n === "Object" && o.constructor) n = o.constructor.name; + if (n === "Map" || n === "Set") return Array.from(n); + if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$1(o, minLen); + } + function _arrayLikeToArray$1(arr, len) { + if (len == null || len > arr.length) len = arr.length; + for (var i = 0, arr2 = new Array(len); i < len; i++) { + arr2[i] = arr[i]; + } + return arr2; + } + /* Default export, a function. + ```js + import draggableHelper from 'draggable-helper' + draggableHelper(listenerElement, options) + ``` + Arguments: + listenerElement: HTMLElement. The element to bind mouse and touch event listener. + options: Options. Optional. + */ + + /* 默认导出, 一个方法. + ```js + import draggableHelper from 'draggable-helper' + draggableHelper(listenerElement, options) + ``` + 参数: + listenerElement: HTMLElement. 绑定鼠标和触摸事件监听器的HTML元素. + options: Options. 可选. + */ + + var _edgeScroll = { + afterFirstMove: function afterFirstMove(store, opt) {}, + afterMove: function afterMove(store, opt) {}, + afterDrop: function afterDrop(store, opt) {} + }; + function index(listenerElement) { + var opt = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; + var store; // set default value of options + // 设置options的默认值 + + objectAssignIfKeyNull(opt, defaultOptions); // define the event listener of mousedown and touchstart + // 定义mousedown和touchstart事件监听器 + + var onMousedownOrTouchStart = function onMousedownOrTouchStart(e, mouse) { + // execute native event hooks + if (!DragEventService.isTouch(e)) { + opt.onmousedown && opt.onmousedown(e); + } else { + opt.ontouchstart && opt.ontouchstart(e); + } + var target = e.target; // check if triggered by ignore tags + // 检查是否由忽略的标签名触发 + + if (opt.ingoreTags.includes(target.tagName)) { + return; + } // check if trigger element and its parent has undraggable class name + // 检查触发事件的元素和其与element之间的父级是否有不允许拖动的类名 + + if (hasClass(target, opt.undraggableClassName)) { + return; + } + var isParentUndraggable = findParent(target, function (el) { + if (hasClass(el, opt.undraggableClassName)) { + return true; + } + if (el === listenerElement) { + return 'break'; + } + }); + if (isParentUndraggable) { + return; + } // Initialize store. Store start event, initial position + // 初始化store. 存储开始事件, 事件触发坐标 + + store = JSON.parse(JSON.stringify(initialStore)); + store.startEvent = e; + store.listenerElement = listenerElement; + store.directTriggerElement = target; + store.initialMouse = Object.assign({}, mouse); // get triggerElement + + var triggerElementIsMovedOrClonedElement = false; + if (opt.getTriggerElement) { + var el = opt.getTriggerElement(store.directTriggerElement, store); + if (!el) { + return; + } + store.triggerElement = el; + } else if (opt.triggerClassName) { + var triggerElement; + var _iterator = _createForOfIteratorHelper$1(toArrayIfNot(opt.triggerClassName)), + _step; + try { + var _loop = function _loop() { + var className = _step.value; + triggerElement = findParent(store.directTriggerElement, function (el) { + if (hasClass(el, className)) { + return true; + } + if (el === listenerElement) { + return 'break'; + } + }, { + withSelf: true + }); + if (triggerElement) { + return "break"; + } + }; + for (_iterator.s(); !(_step = _iterator.n()).done;) { + var _ret = _loop(); + if (_ret === "break") break; + } + } catch (err) { + _iterator.e(err); + } finally { + _iterator.f(); + } + if (!triggerElement) { + return; + } + store.triggerElement = triggerElement; + } else { + triggerElementIsMovedOrClonedElement = true; + } // get movedOrClonedElement + + store.movedOrClonedElement = opt.getMovedOrClonedElement ? opt.getMovedOrClonedElement(store.directTriggerElement, store, opt) : listenerElement; + if (!store.movedOrClonedElement) { + return; + } + if (triggerElementIsMovedOrClonedElement) { + store.triggerElement = store.movedOrClonedElement; + } // check if trigger element is same with directTriggerElement when options.triggerBySelf is true + // options.triggerBySelf为true时, 检查触发事件的元素是否是允许触发的元素 + + if (opt.triggerBySelf && store.triggerElement !== store.directTriggerElement) { + return; + } // prevent text be selected + // 阻止文字被选中 + + if (!DragEventService.isTouch(e)) { + // Do not prevent when touch. Or the elements within the node can not trigger click event. + // 不要在触摸时阻止事件. 否则将导致节点内的元素不触发点击事件. + if (opt.preventTextSelection) { + e.preventDefault(); + } + } // listen mousemove and touchmove + // 监听mousemove和touchmove + + DragEventService.on(document, 'move', onMousemoveOrTouchMove, { + touchArgs: [{ + passive: false + }] + }); // listen mouseup and touchend + // 监听mouseup和touchend + + DragEventService.on(window, 'end', onMouseupOrTouchEnd); + }; // bind mousedown or touchstart event listener + // 绑定mousedown和touchstart事件监听器 + + DragEventService.on(listenerElement, 'start', onMousedownOrTouchStart, { + touchArgs: [{ + passive: true + }] + }); // define the event listener of mousemove and touchmove + // 定义mousemove和touchmove事件监听器 + + var onMousemoveOrTouchMove = function onMousemoveOrTouchMove(e, mouse) { + // execute native event hooks + if (!DragEventService.isTouch(e)) { + opt.onmousemove && opt.onmousemove(e); + } else { + opt.ontouchmove && opt.ontouchmove(e); + } // + + var _store = store, + movedOrClonedElement = _store.movedOrClonedElement; // calc move and attach related info to store + // 计算move并附加相关信息到store + + var move = store.move = { + x: mouse.clientX - store.initialMouse.clientX, + y: mouse.clientY - store.initialMouse.clientY + }; + store.moveEvent = e; + store.mouse = mouse; + if (DragEventService.isTouch(e)) { + // prevent page scroll when touch. + // 当触摸时阻止屏幕被拖动. + e.preventDefault(); + } else { + // prevent text be selected + // 阻止文字被选中 + if (opt.preventTextSelection) { + e.preventDefault(); + } + } // first move + // 第一次移动 + + if (store.movedCount === 0) { + // check if min displacement exceeded. + // 检查是否达到最小位移 + if (opt.minDisplacement) { + var x2 = Math.pow(move.x, 2); + var y2 = Math.pow(move.y, 2); + var dtc = Math.pow(x2 + y2, 0.5); + if (dtc < opt.minDisplacement) { + return; + } + } // resolve elements + + var movedElement = opt.clone ? movedOrClonedElement.cloneNode(true) : movedOrClonedElement; + var initialPosition = getViewportPosition(movedOrClonedElement); // attach elements and initialPosition to store + // 附加元素和初始位置到store + + store.movedOrClonedElement = movedOrClonedElement; + store.movedElement = movedElement; + store.initialPositionRelativeToViewport = initialPosition; + store.initialPosition = initialPosition; // define the function to update moved element style + // 定义更新移动元素样式的方法 + + var updateMovedElementStyle = function updateMovedElementStyle() { + if (opt.clone) { + store.movedOrClonedElement.parentElement.appendChild(movedElement); + } + var size = getBoundingClientRect(movedElement); + var style = { + width: "".concat(Math.ceil(size.width), "px"), + height: "".concat(Math.ceil(size.height), "px"), + zIndex: 9999, + opacity: 0.8, + position: 'fixed', + left: initialPosition.x + 'px', + top: initialPosition.y + 'px', + pointerEvents: 'none' + }; + backupAttr(movedElement, 'style'); + for (var key in style) { + movedElement.style[key] = style[key]; + } + backupAttr(movedElement, 'class'); + addClass(movedElement, opt.draggingClassName); + /* + check if the changed position is expected and correct it. about stacking context. + 当某父元素使用了transform属性时, fixed不再以窗口左上角为坐标. 以下功能是在第一次移动后, 检查元素实际位置和期望位置是否相同, 不同则说明坐标系不是期望的. 则把初始位置减去偏移, 无论任何父元素导致了层叠上下文问题, 都能正确显示. + */ + + var nowPosition = getViewportPosition(movedElement); + if (nowPosition.x !== initialPosition.x) { + initialPosition.x = initialPosition.x - (nowPosition.x - initialPosition.x); + initialPosition.y = initialPosition.y - (nowPosition.y - initialPosition.y); + movedElement.style.left = initialPosition.x + 'px'; + movedElement.style.top = initialPosition.y + 'px'; + } + }; + store.updateMovedElementStyle = updateMovedElementStyle; // call hook beforeFirstMove, beforeMove + + if (opt.beforeFirstMove && opt.beforeFirstMove(store, opt) === false) { + return; + } + if (opt.beforeMove && opt.beforeMove(store, opt) === false) { + return; + } // try to update moved element style + // 尝试更新移动元素样式 + + if (!opt.updateMovedElementStyleManually) { + store.updateMovedElementStyle(); + } + _edgeScroll.afterFirstMove(store, opt); + opt.afterFirstMove && opt.afterFirstMove(store, opt); + } // Not the first move + // 非第一次移动 + else { + // define the function to update moved element style + // 定义更新移动元素样式的方法 + var _updateMovedElementStyle = function _updateMovedElementStyle() { + Object.assign(store.movedElement.style, { + left: store.initialPosition.x + move.x + 'px', + top: store.initialPosition.y + move.y + 'px' + }); + }; + store.updateMovedElementStyle = _updateMovedElementStyle; // call hook beforeMove + + if (opt.beforeMove && opt.beforeMove(store, opt) === false) { + return; + } // try to update moved element style + // 尝试更新移动元素样式 + + if (!opt.updateMovedElementStyleManually) { + store.updateMovedElementStyle(); + } + } + _edgeScroll.afterMove(store, opt); + store.movedCount++; + opt.afterMove && opt.afterMove(store, opt); + }; // define the event listener of mouseup and touchend + // 定义mouseup和touchend事件监听器 + + var onMouseupOrTouchEnd = function onMouseupOrTouchEnd(e) { + // execute native event hooks + if (!DragEventService.isTouch(e)) { + opt.onmousedown && opt.onmousedown(e); + } else { + opt.ontouchend && opt.ontouchend(e); + } // cancel listening mousemove, touchmove, mouseup, touchend + // 取消监听事件mousemove, touchmove, mouseup, touchend + + DragEventService.off(document, 'move', onMousemoveOrTouchMove, { + touchArgs: [{ + passive: false + }] + }); + DragEventService.off(window, 'end', onMouseupOrTouchEnd); // + + if (store.movedCount === 0) { + return; + } + store.endEvent = e; + var _store2 = store, + movedElement = _store2.movedElement; // define the function to update moved element style + // 定义更新移动元素样式的方法 + + var updateMovedElementStyle = function updateMovedElementStyle() { + restoreAttr(movedElement, 'style'); + restoreAttr(movedElement, 'class'); + if (opt.clone) { + movedElement.parentElement.removeChild(movedElement); + } + }; + store.updateMovedElementStyle = updateMovedElementStyle; // call hook beforeDrop + + if (opt.beforeDrop && opt.beforeDrop(store, opt) === false) { + return; + } // try to update moved element style + // 尝试更新移动元素样式 + + if (!opt.updateMovedElementStyleManually) { + updateMovedElementStyle(); + } + _edgeScroll.afterDrop(store, opt); + opt.afterDrop && opt.afterDrop(store, opt); + }; // define the destroy function + // 定义销毁/退出的方法 + + var destroy = function destroy() { + DragEventService.off(listenerElement, 'start', onMousedownOrTouchStart, { + touchArgs: [{ + passive: true + }] + }); + DragEventService.off(document, 'move', onMousemoveOrTouchMove, { + touchArgs: [{ + passive: false + }] + }); + DragEventService.off(window, 'end', onMouseupOrTouchEnd); + }; // + + return { + destroy: destroy, + options: opt + }; + } // available options and default options value + // 可用选项和默认选项值 + + var defaultOptions = { + ingoreTags: ['INPUT', 'TEXTAREA', 'SELECT', 'OPTGROUP', 'OPTION'], + undraggableClassName: 'undraggable', + minDisplacement: 10, + draggingClassName: 'dragging', + clone: false, + updateMovedElementStyleManually: false, + preventTextSelection: true, + edgeScrollTriggerMargin: 50, + edgeScrollSpeed: 0.35, + edgeScrollTriggerMode: 'top_left_corner' + }; // Info after event triggered. Created when mousedown or touchstart, destroied after mouseup or touchend. + // 事件触发后的相关信息. mousedown或touchstart时创建, mouseup或touchend后销毁. + + var initialStore = { + movedCount: 0 + }; // edge scroll + // 边缘滚动 + + var stopHorizontalScroll, stopVerticalScroll; + _edgeScroll.afterMove = function (store, opt) { + if (!opt.edgeScroll) { + return; + } + var margin = opt.edgeScrollTriggerMargin; + stopOldScrollAnimation(); // get triggerPoint. The point trigger edge scroll. + + var triggerPoint = { + x: store.mouse.clientX, + y: store.mouse.clientY + }; + if (opt.edgeScrollTriggerMode === 'top_left_corner') { + var vp = getViewportPosition(store.movedElement); + triggerPoint = { + x: vp.x, + y: vp.y + }; + } // + + var foundHorizontal, foundVertical, prevElement, horizontalDir, verticalDir; + var findInElements; + var cachedElementsFromPoint; // find x container + + var minScrollableDisplacement = 10; + if (opt.edgeScrollSpecifiedContainerX) { + var containerX; + if (typeof opt.edgeScrollSpecifiedContainerX === 'function') { + containerX = opt.edgeScrollSpecifiedContainerX(store, opt); + } else { + containerX = opt.edgeScrollSpecifiedContainerX; + } + if (containerX) { + findInElements = [containerX]; + } + } + if (!findInElements) { + findInElements = elementsFromPoint(triggerPoint.x, triggerPoint.y); + cachedElementsFromPoint = findInElements; + } + var _iterator2 = _createForOfIteratorHelper$1(findInElements), + _step2; + try { + for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) { + var itemEl = _step2.value; + if (prevElement && !isDescendantOf(prevElement, itemEl)) { + // itemEl is being covered by other elements + // itemEl被其他元素遮挡 + continue; + } + var t = minScrollableDisplacement; // min scrollable displacement. 最小可滚动距离, 小于此距离不触发滚动. + + if (!foundHorizontal) { + if (itemEl.scrollWidth > itemEl.clientWidth) { + var _vp = fixedGetViewportPosition(itemEl); + if (triggerPoint.x <= _vp.left + margin) { + if (scrollableDisplacement(itemEl, 'left') > t && isScrollable(itemEl, 'x')) { + foundHorizontal = itemEl; + horizontalDir = 'left'; + } + } else if (triggerPoint.x >= _vp.left + itemEl.clientWidth - margin) { + if (scrollableDisplacement(itemEl, 'right') > t && isScrollable(itemEl, 'x')) { + foundHorizontal = itemEl; + horizontalDir = 'right'; + } + } + } + } + if (foundHorizontal) { + break; + } + prevElement = itemEl; + } + } catch (err) { + _iterator2.e(err); + } finally { + _iterator2.f(); + } + prevElement = null; // find y container + + findInElements = null; + if (opt.edgeScrollSpecifiedContainerY) { + var containerY; + if (typeof opt.edgeScrollSpecifiedContainerY === 'function') { + containerY = opt.edgeScrollSpecifiedContainerY(store, opt); + } else { + containerY = opt.edgeScrollSpecifiedContainerY; + } + if (containerY) { + findInElements = [containerY]; + } + } + if (!findInElements) { + findInElements = cachedElementsFromPoint || elementsFromPoint(triggerPoint.x, triggerPoint.y); + } + var _iterator3 = _createForOfIteratorHelper$1(findInElements), + _step3; + try { + for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) { + var _itemEl = _step3.value; + if (prevElement && !isDescendantOf(prevElement, _itemEl)) { + // itemEl is being covered by other elements + // itemEl被其他元素遮挡 + continue; + } + var _t = minScrollableDisplacement; // min scrollable displacement. 最小可滚动距离, 小于此距离不触发滚动. + + if (!foundVertical) { + if (_itemEl.scrollHeight > _itemEl.clientHeight) { + var _vp2 = fixedGetViewportPosition(_itemEl); + if (triggerPoint.y <= _vp2.top + margin) { + if (scrollableDisplacement(_itemEl, 'up') > _t && isScrollable(_itemEl, 'y')) { + foundVertical = _itemEl; + verticalDir = 'up'; + } + } else if (triggerPoint.y >= _vp2.top + _itemEl.clientHeight - margin) { + if (scrollableDisplacement(_itemEl, 'down') > _t && isScrollable(_itemEl, 'y')) { + foundVertical = _itemEl; + verticalDir = 'down'; + } + } + } + } + if (foundVertical) { + break; + } + prevElement = _itemEl; + } // scroll + } catch (err) { + _iterator3.e(err); + } finally { + _iterator3.f(); + } + if (foundHorizontal) { + if (horizontalDir === 'left') { + stopHorizontalScroll = scrollTo({ + x: 0, + element: foundHorizontal, + duration: scrollableDisplacement(foundHorizontal, 'left') / opt.edgeScrollSpeed + }); + } else { + stopHorizontalScroll = scrollTo({ + x: foundHorizontal.scrollWidth - foundHorizontal.clientWidth, + element: foundHorizontal, + duration: scrollableDisplacement(foundHorizontal, 'right') / opt.edgeScrollSpeed + }); + } + } + if (foundVertical) { + if (verticalDir === 'up') { + stopVerticalScroll = scrollTo({ + y: 0, + element: foundVertical, + duration: scrollableDisplacement(foundVertical, 'up') / opt.edgeScrollSpeed + }); + } else { + stopVerticalScroll = scrollTo({ + y: foundVertical.scrollHeight - foundVertical.clientHeight, + element: foundVertical, + duration: scrollableDisplacement(foundVertical, 'down') / opt.edgeScrollSpeed + }); + } + } // is element scrollable in a direction + // 元素某方向是否可滚动 + + function isScrollable(el, dir) { + var style = getComputedStyle(el); + var key = "overflow-".concat(dir); // document.documentElement is special + + var special = document.scrollingElement || document.documentElement; + if (el === special) { + return style[key] === 'visible' || style[key] === 'auto' || style[key] === 'scroll'; + } + return style[key] === 'auto' || style[key] === 'scroll'; + } // scrollable displacement of element in a direction + // 元素某方向可滚动距离 + + function scrollableDisplacement(el, dir) { + if (dir === 'up') { + return el.scrollTop; + } else if (dir === 'down') { + return el.scrollHeight - el.scrollTop - el.clientHeight; + } else if (dir === 'left') { + return el.scrollLeft; + } else if (dir === 'right') { + return el.scrollWidth - el.scrollLeft - el.clientWidth; + } + } + function fixedGetViewportPosition(el) { + var r = getViewportPosition(el); // document.documentElement is special + + var special = document.scrollingElement || document.documentElement; + if (el === special) { + r.top = 0; + r.left = 0; + } + return r; + } + }; + _edgeScroll.afterDrop = function (store, opt) { + if (!opt.edgeScroll) { + return; + } + stopOldScrollAnimation(); + }; // stop old scroll animation + // 结束之前的滚动动画 + + function stopOldScrollAnimation() { + if (stopHorizontalScroll) { + stopHorizontalScroll(); + stopHorizontalScroll = null; + } + if (stopVerticalScroll) { + stopVerticalScroll(); + stopVerticalScroll = null; + } + } + + // arg {options, event, store, opt, info, conditions, actions, doAction} + function doDraggableDecision ({ + conditions, + doAction + }) { + // decision start ================================= + if (conditions['no closest'] === true) { + doAction('append to root'); + } else if (conditions['no closest'] === false) { + if (conditions['closest is top'] === true) { + if (conditions['on closest middle'] === true) { + doAction('insert before'); + } else if (conditions['on closest middle'] === false) { + if (conditions['at closest indent right'] === true) { + doAction('prepend'); + } else if (conditions['at closest indent right'] === false) { + if (conditions['closest is placeholder'] === true) { + doAction('insert after'); + } else if (conditions['closest is placeholder'] === false) { + if (conditions['closest has children excluding placeholder movingEl'] === true) { + doAction('prepend'); + } else if (conditions['closest has children excluding placeholder movingEl'] === false) { + doAction('insert after'); + } + } + } + } + } else if (conditions['closest is top'] === false) { + if (conditions['on closest middle'] === true) { + if (conditions['at closest indent right'] === false) { + if (conditions['at closest left'] === false) { + if (conditions['closest is placeholder'] === false) { + if (conditions['closest has next'] === true) { + if (conditions['closest has children excluding placeholder movingEl'] === false) { + doAction('insert after'); + } else if (conditions['closest has children excluding placeholder movingEl'] === true) { + doAction('prepend'); + } + } else if (conditions['closest has next'] === false) { + if (conditions['closest has children excluding placeholder movingEl'] === true) { + doAction('prepend'); + } else if (conditions['closest has children excluding placeholder movingEl'] === false) { + doAction('insert after'); + } + } + } else if (conditions['closest is placeholder'] === true) { + doAction('nothing'); + } + } else if (conditions['at closest left'] === true) { + if (conditions['closest is placeholder'] === true) { + if (conditions['no aboveBranch'] === true) { + doAction('nothing'); + } else if (conditions['no aboveBranch'] === false) { + doAction('after above'); + } + } else if (conditions['closest is placeholder'] === false) { + if (conditions['closest has children excluding placeholder movingEl'] === false) { + doAction('insert after'); + } else if (conditions['closest has children excluding placeholder movingEl'] === true) { + doAction('prepend'); + } + } + } + } else if (conditions['at closest indent right'] === true) { + if (conditions['closest is placeholder'] === false) { + if (conditions['closest has next'] === true) { + if (conditions['closest has children excluding placeholder movingEl'] === false) { + doAction('prepend'); + } else if (conditions['closest has children excluding placeholder movingEl'] === true) { + if (conditions['closest is top excluding placeholder'] === true) { + doAction('insert before'); + } else if (conditions['closest is top excluding placeholder'] === false) { + doAction('prepend'); + } + } + } else if (conditions['closest has next'] === false) { + doAction('prepend'); + } + } else if (conditions['closest is placeholder'] === true) { + if (conditions['no aboveBranch'] === true) { + if (conditions['closest has prev'] === false) { + doAction('nothing'); + } else if (conditions['closest has prev'] === true) { + doAction('append to prev'); + } + } else if (conditions['no aboveBranch'] === false) { + if (conditions['closest has prev'] === true) { + doAction('append to prev'); + } else if (conditions['closest has prev'] === false) { + doAction('nothing'); + } + } + } + } + } else if (conditions['on closest middle'] === false) { + if (conditions['at closest indent right'] === false) { + if (conditions['at closest left'] === false) { + if (conditions['closest is placeholder'] === false) { + if (conditions['closest has children excluding placeholder movingEl'] === true) { + doAction('prepend'); + } else if (conditions['closest has children excluding placeholder movingEl'] === false) { + doAction('insert after'); + } + } else if (conditions['closest is placeholder'] === true) { + doAction('nothing'); + } + } else if (conditions['at closest left'] === true) { + if (conditions['closest is placeholder'] === true) { + if (conditions['no aboveBranch'] === false) { + doAction('after above'); + } else if (conditions['no aboveBranch'] === true) { + doAction('nothing'); + } + } else if (conditions['closest is placeholder'] === false) { + if (conditions['closest has next'] === false) { + if (conditions['closest has children excluding placeholder movingEl'] === false) { + doAction('insert after'); + } else if (conditions['closest has children excluding placeholder movingEl'] === true) { + doAction('prepend'); + } + } else if (conditions['closest has next'] === true) { + if (conditions['closest has children excluding placeholder movingEl'] === true) { + doAction('prepend'); + } else if (conditions['closest has children excluding placeholder movingEl'] === false) { + doAction('insert after'); + } + } + } + } + } else if (conditions['at closest indent right'] === true) { + if (conditions['closest is placeholder'] === true) { + if (conditions['no aboveBranch'] === true) { + if (conditions['closest has prev'] === false) { + doAction('nothing'); + } else if (conditions['closest has prev'] === true) { + doAction('append to prev'); + } + } else if (conditions['no aboveBranch'] === false) { + if (conditions['closest has prev'] === true) { + doAction('append to prev'); + } else if (conditions['closest has prev'] === false) { + doAction('nothing'); + } + } + } else if (conditions['closest is placeholder'] === false) { + doAction('prepend'); + } + } + } + } + } + // decision end ================================= + } + + // in follow code, options belongs to makeTreeDraggable, opt belongs to draggableHelper + function makeTreeDraggable(treeEl, options = {}) { + options = { + // indent: 20, + // triggerClass: 'tree-node', + // triggerBySelf: false, + // unfoldWhenDragover + // unfoldWhenDragoverDelay + // draggingNodePositionMode + // getTriggerEl optional + // rootClass: 'tree-root', + // childrenClass: 'tree-children', + // branchClass: 'tree-branch', + // nodeClass: 'tree-node', + // nodeBackClass: 'tree-node-back', + // placeholderClass: 'tree-placeholder', + // placeholderNodeBackClass: 'tree-placeholder-node-back', + // placeholderNodeClass: 'tree-placeholder-node', + // draggingClass: 'dragging', + // placeholderId + // unfoldTargetNodeByEl + // getPathByBranchEl + // edgeScroll: false, + // edgeScrollTriggerMargin: 50, + // edgeScrollSpeed: 0.35, + // edgeScrollTriggerMode: 'top_left_corner', + // edgeScrol: 'top_left_corner', + // edgeScrollSpecifiedContainerX?: HTMLElement, + // edgeScrollSpecifiedContainerY?: HTMLElement, + // rtl: false + // preventTextSelection: boolean + ...options, + treeEl + }; + const { + destroy, + options: draggableHelperOptions + } = index(treeEl, { + triggerClassName: options.triggerClass, + triggerBySelf: options.triggerBySelf, + draggingClassName: options.draggingClass, + clone: options.cloneWhenDrag, + edgeScroll: options.edgeScroll, + edgeScrollTriggerMargin: options.edgeScrollTriggerMargin, + edgeScrollSpeed: options.edgeScrollSpeed, + edgeScrollTriggerMode: options.edgeScrollTriggerMode, + edgeScrollSpecifiedContainerX: options.edgeScrollSpecifiedContainerX, + edgeScrollSpecifiedContainerY: options.edgeScrollSpecifiedContainerY, + rtl: options.rtl, + preventTextSelection: options.preventTextSelection, + updateMovedElementStyleManually: true, + getMovedOrClonedElement: (directTriggerElement, store) => { + // find closest branch from parents + const el = findParent(store.triggerElement, el => hasClass(el, options.branchClass), { + withSelf: true + }); + return el; + }, + beforeFirstMove(store, dhOptions) { + store.startTreeEl = treeEl; + store.dragBranchEl = store.movedElement; + store.startPath = options.getPathByBranchEl(store.movedOrClonedElement); + if (options.beforeFirstMove && options.beforeFirstMove(store, dhOptions) === false) { + return false; + } + }, + beforeMove: (store, dhOptions) => { + const updatePlaceholderIndent = () => { + // set indent of placeholder + const placeholderPath = options.getPathByBranchEl(store.placeholder); + const placeholderNodeBack = store.placeholder.querySelector(`.${options.nodeBackClass}`); + placeholderNodeBack.style[!options.rtl ? 'paddingLeft' : 'paddingRight'] = (placeholderPath.length - 1) * options.indent + 'px'; + // remove tempChildren if empty + if (store.tempChildren.children.length === 0) { + removeEl(store.tempChildren); + } + }; + // first move + // 第一次移动 + if (store.movedCount === 0) { + // create placeholder + // 创建占位元素 + const placeholder = createElementFromHTML(` +
+
+
+
+
+
+ `); + insertAfter(placeholder, store.movedOrClonedElement); + store.placeholder = placeholder; + options.afterPlaceholderCreated(store); + // create a tree children el to use when can't get childrenEl + const tempChildren = document.createElement('DIV'); + addClass(tempChildren, options.childrenClass); + store.tempChildren = tempChildren; + // update placeholder indent. update moved element style + updatePlaceholderIndent(); + store.updateMovedElementStyle(); + // skip first move + // 跳过第一次移动 + return; + } + // + store.updateMovedElementStyle(); + // + store.oneMoveStore = {}; // life cycle: one move + const movingEl = store.movedElement; // branch + // find closest branch and hovering tree + let tree; + const movingNode = movingEl.querySelector(`.${options.nodeClass}`); + // movingNodeOf and movingNodeRect are not always real. when RTL, there 'x' is top right. when draggingNodePositionMode is mouse, there x and y are mouse position. So don't calc them with their width or height. + // movingNodeOf 和 movingNodeRect并非一直如字面意义是movingNode真实坐标. RTL时, x坐标是右上角. draggingNodePositionMode是mouse时, x和y是鼠标坐标. + let movingNodeOf = getOffset(movingNode); + let movingNodeRect = getBoundingClientRect(movingNode); + if (options.draggingNodePositionMode === 'mouse') { + // use mouse position as dragging node position + const { + moveEvent + } = store; + movingNodeOf = { + x: moveEvent.pageX, + y: moveEvent.pageY + }; + movingNodeRect = { + x: moveEvent.clientX, + y: moveEvent.clientY + }; + } else if (options.rtl) { + movingNodeOf.x += movingNode.offsetWidth; + movingNodeRect.x += movingNode.offsetWidth; + } + // find tree with elementsFromPoint + let found; + let firstElement; + for (const itemEl of elementsFromPoint(movingNodeRect.x, movingNodeRect.y)) { + if (!firstElement) { + firstElement = itemEl; + } + if (hasClass(itemEl, options.treeClass)) { + found = itemEl; + break; + } + } + // check if the found element is covered by other elements + if (firstElement !== found && !isDescendantOf(firstElement, found)) { + found = null; + } + tree = found; + if (!tree) { + // out of tree or tree is covered by other elements + return; + } + // check if target tree right + if (options.filterTargetTree(tree, store, dhOptions) === false) { + return; + } + store.targetTreeEl = tree; + // info ======================================== + // life cycle: one move + const info = { + tree: () => tree, + root: () => info.tree.querySelector(`.${options.childrenClass}`), + closestNode: () => { + const nodes = []; // all visible nodes sort by y + const walkToGetNodes = branch => { + // + if (branch !== info.tree) { + const node = branch.querySelector(`.${options.nodeClass}`); + if (node && !isElementHidden(node)) { + nodes.push(node); + } + } + // + const childrenEl = branch.querySelector(`.${options.childrenClass}`); + if (childrenEl) { + for (let i = 0; i < childrenEl.children.length; i++) { + const child = childrenEl.children[i]; + if (child !== movingEl && hasClass(child, options.branchClass)) { + walkToGetNodes(child); + } + } + } + }; + walkToGetNodes(info.tree); + // + if (nodes.length === 0) { + return; + } + // + let found; + const t = binarySearch(nodes, node => getOffset(node).y - movingNodeOf.y, { + returnNearestIfNoHit: true + }); + if (t.hit) { + found = t.value; + } else { + if (t.greater) { + found = nodes[t.index - 1] || t.value; + } else { + found = t.value; + } + } + return found; + }, + closestNodeOffset: () => getOffset(info.closestNode), + closestBranch: () => findParent(info.closestNode, el => hasClass(el, options.branchClass)), + closestNext: () => { + let next = info.closestBranch.nextSibling; + while (next) { + if (next !== movingEl && hasClass(next, options.branchClass) && !isElementHidden(next)) { + return next; + } + next = next.nextSibling; + } + }, + closestPrev: () => { + let prev = info.closestBranch.previousSibling; + while (prev) { + if (prev !== movingEl && hasClass(prev, options.branchClass) && !isElementHidden(prev)) { + return prev; + } + prev = prev.previousSibling; + } + }, + aboveBranch: () => { + // find above from branch to root + // closestBranch must be placeholder + if (info.closestBranch !== store.placeholder) { + return; + } + if (conditions['closest has next']) { + return; + } + // find placeholder prev or parent + let cur = info.closestBranch; + let prev = cur.previousSibling; + let found; + while (prev) { + if (prev !== movingEl && hasClass(prev, options.branchClass) && !isElementHidden(prev)) { + cur = prev; + found = true; + break; + } + prev = prev.previousSibling; + } + if (!found) { + cur = findParent(cur, el => hasClass(el, options.branchClass)); + } + // + while (cur) { + const curNode = cur.querySelector(`.${options.nodeClass}`); + if (!options.rtl) { + if (getOffset(curNode).x <= movingNodeOf.x) { + break; + } + } else { + if (getOffset(curNode).x + curNode.offsetWidth >= movingNodeOf.x) { + break; + } + } + let hasNextBranch; + let t = cur.nextSibling; + while (t) { + if (t !== movingEl && t !== store.placeholder && hasClass(t, options.branchClass) && !isElementHidden(t)) { + hasNextBranch = true; + break; + } + t = t.nextSibling; + } + if (hasNextBranch) { + break; + } + const parent = findParent(cur, el => hasClass(el, options.branchClass)); + if (!parent) { + break; + } + cur = parent; + } + return cur; + } + }; + // conditions ======================================== + // life cycle: one move + const conditions = { + 'no closest': () => !info.closestNode, + 'closest is top': () => info.closestBranch === findNodeList(info.root.children, el => el !== movingEl && !isElementHidden(el)), + 'closest is top excluding placeholder': () => info.closestBranch === findNodeList(info.root.children, el => el !== movingEl && el !== store.placeholder && !isElementHidden(el)), + 'on closest middle': () => movingNodeOf.y < info.closestNodeOffset.y + info.closestNode.offsetHeight / 2, + 'at closest indent right': () => movingNodeOf.x > info.closestNodeOffset.x + options.indent, + 'at closest left': () => movingNodeOf.x < info.closestNodeOffset.x, + 'closest is placeholder': () => info.closestBranch === store.placeholder, + 'no aboveBranch': () => !info.aboveBranch, + 'closest has next': () => info.closestNext, + 'closest has prev': () => info.closestPrev, + 'closest has children excluding placeholder movingEl': () => { + const childrenEl = info.closestBranch.querySelector(`.${options.childrenClass}`); + if (childrenEl) { + return findNodeList(childrenEl.children, el => el !== movingEl && el !== store.placeholder && !isElementHidden(el)); + } + } + }; + // fix for rtl + if (options.rtl) { + Object.assign(conditions, { + 'at closest indent right': () => movingNodeOf.x < info.closestNodeOffset.x + info.closestNode.offsetWidth - options.indent, + // at indent left + 'at closest left': () => movingNodeOf.x > info.closestNodeOffset.x + info.closestNode.offsetWidth // at right + }); + } + // convert conditions result to Boolean + Object.keys(conditions).forEach(key => { + const old = conditions[key]; + conditions[key] = function () { + return Boolean(old.call(this)); + }; + }); + // + attachCache(info, info); + attachCache(conditions, conditions); + store.oneMoveStore.info = info; + store.oneMoveStore.conditions = conditions; + // actions start ======================================== + const doAction = (name, ...args) => { + if (!store._doActionQueue) { + store._doActionQueue = Promise.resolve(); + } + const queue = store._doActionQueue; + store._doActionQueue = queue.then(async () => { + // record tried actions in one move + if (!store.oneMoveStore.actionRecords) { + store.oneMoveStore.actionRecords = []; + } + const { + actionRecords + } = store.oneMoveStore; + // + const action = actions[name]; + const r = action(...args); + actionRecords.push(name); + await r; + updatePlaceholderIndent(); + }); + }; + const actions = { + async 'nothing'() {}, + // do nothing + async 'append to root'() { + // no closest branch, just append to root + if (options.isTargetTreeRootDroppable(store)) { + appendTo(store.placeholder, info.root); + } + }, + async 'insert before'() { + if (options.isNodeParentDroppable(info.closestBranch, store.targetTreeEl)) { + insertBefore(store.placeholder, info.closestBranch); + } else { + return secondCase(getParentBranchByEl(info.closestBranch)); + } + }, + async 'insert after'(branch = info.closestBranch) { + if (options.isNodeParentDroppable(branch, store.targetTreeEl)) { + insertAfter(store.placeholder, branch); + } else { + const moved = await secondCase(getParentBranchByEl(branch)); + const isFirstTriedAction = !store.oneMoveStore.actionRecords || store.oneMoveStore.actionRecords.length === 1; + if (!moved && isFirstTriedAction) { + return thirdCase(branch); + } + } + }, + async prepend() { + if (info.closestBranch === store.placeholder) { + return; + } + if (options.ifNodeFolded(info.closestBranch, store) && !options.unfoldWhenDragover) { + return doAction('insert after', info.closestBranch); + } else { + if (options.isNodeDroppable(info.closestBranch, store.targetTreeEl)) { + await tryUnfoldAndPrepend(info.closestBranch); + } else { + return secondCase(info.closestBranch); + } + } + }, + async 'after above'() { + if (options.isNodeParentDroppable(info.aboveBranch, store.targetTreeEl)) { + insertAfter(store.placeholder, info.aboveBranch); + } else { + return secondCase(getParentBranchByEl(info.aboveBranch)); + } + }, + async 'append to prev'() { + if (info.closestPrev === store.placeholder) { + return; + } + if (options.ifNodeFolded(info.closestPrev, store)) { + return doAction('insert after', info.closestPrev); + } else { + if (options.isNodeDroppable(info.closestPrev, store.targetTreeEl)) { + const childrenEl = await unfoldAndGetChildrenEl(info.closestPrev); + appendTo(store.placeholder, childrenEl); + } else { + return secondCase(info.closestPrev); + } + } + } + }; + // second case for actions, when target position not droppable + // return true if moved + const secondCase = async branchEl => { + if (branchEl) { + const targetEl = options._findClosestDroppablePosition(branchEl, store.targetTreeEl); + if (targetEl) { + insertAfter(store.placeholder, targetEl); + return true; + } + } + }; + // when action is after, first case and second case invalid, try prepend + // 当操作是'after', 第一种第二种情况无效时, 尝试prepend + const thirdCase = async branchEl => { + // the third case + if (!options.ifNodeFolded(branchEl, store) && options.isNodeDroppable(branchEl, store.targetTreeEl)) { + await tryUnfoldAndPrepend(branchEl); + } + }; + const unfoldAndGetChildrenEl = async branch => { + await options.unfoldTargetNodeByEl(branch, store); + let childrenEl = branch.querySelector(`.${options.childrenClass}`); + if (!childrenEl) { + childrenEl = store.tempChildren; + appendTo(childrenEl, branch); + } + return childrenEl; + }; + const tryUnfoldAndPrepend = async branchEl => { + const func = async () => { + const childrenEl = await unfoldAndGetChildrenEl(branchEl); + prependTo(store.placeholder, childrenEl); + }; + if (options.ifNodeFolded(branchEl, store)) { + // delay if node folded + let oneMoveStore = store.oneMoveStore; + setTimeout(() => { + // check if expired + if (oneMoveStore === store.oneMoveStore) { + func(); + } + }, options.unfoldWhenDragoverDelay); + } else { + await func(); + } + }; + // actions end ======================================== + doDraggableDecision({ + options, + event: store.moveEvent, + store, + opt: dhOptions, + info, + conditions, + actions, + doAction + }); + }, + afterMove: (store, dhOptions) => { + options.afterMove && options.afterMove(store, dhOptions); + }, + beforeDrop: async (store, dhOptions) => { + const movingEl = store.movedElement; // branch + const { + placeholder, + tempChildren, + movedCount, + targetTreeEl, + startTreeEl + } = store; + // use mask tree to avoid flick caused by DOM update in short time + // 复制 targetTreeEl 作为遮罩, 避免短时间内更新DOM引起的闪烁 + let maskTree, maskTree2; + if (targetTreeEl) { + // No targetTreeEl mean no valid move. + // targetTreeEl不存在意味着没有有效移动. + + // create mask tree + maskTree = targetTreeEl.cloneNode(true); + targetTreeEl.style.display = 'none'; + insertAfter(maskTree, targetTreeEl); + if (startTreeEl !== targetTreeEl) { + maskTree2 = startTreeEl.cloneNode(true); + startTreeEl.style.display = 'none'; + insertAfter(maskTree2, startTreeEl); + } + // + store.targetPath = options.getPathByBranchEl(placeholder); + let pathChanged = isPathChanged(); + store.targetPathNotEqualToStartPath = pathChanged; + store.pathChangePrevented = false; + if (options.beforeDrop && options.beforeDrop(pathChanged, store, dhOptions) === false) { + pathChanged = false; + store.pathChangePrevented = false; + } + store.pathChanged = pathChanged; + } + // destroy placeholder and tempChildren + removeEl(placeholder); + if (tempChildren) { + removeEl(tempChildren); + } + store.updateMovedElementStyle(); + // + await options.afterDrop(store, dhOptions); + // remove mask tree + if (maskTree) { + await waitTime(30); + removeEl(maskTree); + targetTreeEl.style.display = 'block'; + if (maskTree2) { + removeEl(maskTree2); + startTreeEl.style.display = 'block'; + } + } + // + function isPathChanged() { + const { + startTree, + targetTree, + startPath, + targetPath + } = store; + if (startTree === targetTree && startPath.length === targetPath.length) { + if (startPath.toString() === targetPath.toString()) { + return false; + } else { + // downward same-level move, the end of targetPath is 1 more than real value + // 同级向下移动时, targetPath的末位比真实值大1 + const t = startPath.slice(0); + t[t.length - 1]++; + if (t.toString() === targetPath.toString()) { + return false; + } + } + } + return true; + } + } + }); + return { + destroy, + options, + optionsUpdated + }; + function getParentBranchByEl(el) { + return findParent(el, el => { + if (hasClass(el, options.branchClass)) { + return true; + } + if (hasClass(el, options.rootClass)) { + return 'break'; + } + }); + } + function optionsUpdated() { + Object.assign(draggableHelperOptions, { + triggerClassName: options.triggerClass, + triggerBySelf: options.triggerBySelf, + draggingClassName: options.draggingClass, + clone: options.cloneWhenDrag, + // edgeScroll + edgeScroll: options.edgeScroll, + edgeScrollTriggerMargin: options.edgeScrollTriggerMargin, + edgeScrollSpeed: options.edgeScrollSpeed, + edgeScrollTriggerMode: options.edgeScrollTriggerMode, + // + rtl: options.rtl, + preventTextSelection: options.preventTextSelection + }); + } + } + function isElementHidden(el) { + return el.offsetWidth === 0 && el.offsetHeight === 0; + } + + const treesStore = {}; + var Draggable_vue = { + props: { + triggerClass: { + type: [String, Array], + default: 'tree-node' + }, + triggerBySelf: { + type: Boolean + }, + draggable: { + type: [Boolean, Function], + default: true + }, + droppable: { + type: [Boolean, Function], + default: true + }, + eachDraggable: { + type: [Function] + }, + // type: [Boolean, Function] + eachDroppable: { + type: [Function] + }, + // type: [Boolean, Function] + ondragstart: { + type: Function + }, + ondragend: { + type: Function + }, + unfoldWhenDragover: { + type: Boolean, + default: true + }, + unfoldWhenDragoverDelay: { + type: Number, + default: 30 + }, + draggingNodePositionMode: { + type: String, + default: 'top_left_corner' + }, + // top_left_corner, mouse + edgeScroll: { + type: Boolean + }, + edgeScrollTriggerMargin: { + type: Number, + default: 50 + }, + edgeScrollSpeed: { + type: Number, + default: 0.35 + }, + edgeScrollTriggerMode: { + type: String, + default: 'top_left_corner' + }, + edgeScrollSpecifiedContainerX: {}, + // HTMLElement || ((store) => HTMLElement) + edgeScrollSpecifiedContainerY: {}, + // HTMLElement || ((store) => HTMLElement) + preventTextSelection: { + type: Boolean, + default: true + } + }, + emits: ['afterPlaceholderCreated', 'after-placeholder-created', 'before-first-move', 'drag', 'he-tree-drag', 'after-move', 'he-tree-before-drop', 'input', 'change', 'drop', 'he-tree-drop'], + // components: {}, + data() { + return { + treesStore + }; + }, + // computed: {}, + // watch: {}, + methods: { + _Draggable_unfoldTargetNodeByEl(branchEl, store) { + const { + targetTree + } = store; + const path = targetTree.getPathByBranchEl(branchEl); + const node = targetTree.getNodeByPath(path); + targetTree.unfold && targetTree.unfold(node, path); + return new Promise((resolve, reject) => { + targetTree.$nextTick(() => { + resolve(); + }); + }); + }, + isNodeDraggable(node, path) { + const { + store + } = this.treesStore; + const allNodes = this.getAllNodesByPath(path); + allNodes.unshift(this.rootNode); + for (const { + value: node, + index + } of iterateAll(allNodes, { + reverse: true + })) { + const currentPath = path.slice(0, index + 1); + const draggableOpt = node.$draggable !== undefined ? node.$draggable : this.eachDraggable; + const draggable = resolveValueOrGettter(draggableOpt, [currentPath, this, store]); + if (draggable === undefined) { + continue; + } else { + return draggable; + } + } + return true; + }, + isNodeDroppable(node, path) { + const { + store + } = this.treesStore; + const allNodes = this.getAllNodesByPath(path); + allNodes.unshift(this.rootNode); + let droppableFinal, resolved; + for (const { + value: node, + index + } of iterateAll(allNodes, { + reverse: true + })) { + const currentPath = path.slice(0, index + 1); + const droppableOpt = node.$droppable !== undefined ? node.$droppable : this.eachDroppable; + const droppable = resolveValueOrGettter(droppableOpt, [currentPath, this, store]); + if (droppable === undefined) { + continue; + } else { + droppableFinal = droppable; + resolved = true; + break; + } + } + if (!resolved) { + droppableFinal = true; + } + if (this._internal_hook_isNodeDroppable) { + return this._internal_hook_isNodeDroppable({ + droppableFinal, + node, + path, + store + }); + } + return droppableFinal; + }, + // override + getPathByBranchEl(branchEl) { + const store = this.treesStore.store; + const getAttrPath = el => { + const pathStr = el.getAttribute('data-tree-node-path'); + if (pathStr) { + return pathStr.split(',').map(v => parseInt(v)); + } + }; + const path = getAttrPath(branchEl); + if (path) { + return path; + } + // placeholder path + let parentPath; + findParent(branchEl, el => { + if (hasClass(el, 'tree-root')) { + parentPath = []; + return true; + } + if (hasClass(el, 'tree-branch')) { + parentPath = getAttrPath(el); + return true; + } + }); + let index = 0; + for (const { + value: el, + index: index2 + } of iterateAll(branchEl.parentElement.children)) { + if (hasClass(el, 'tree-branch') || hasClass(el, 'tree-placeholder')) { + if (el === branchEl) { + break; + } + index++; + } + } + return [...parentPath, index]; + } + }, + // created() {}, + mounted() { + const options = this._draggableOptions = { + indent: this.indent, + triggerClass: this.triggerClass, + triggerBySelf: this.triggerBySelf, + unfoldWhenDragover: this.unfoldWhenDragover, + unfoldWhenDragoverDelay: this.unfoldWhenDragoverDelay, + draggingNodePositionMode: this.draggingNodePositionMode, + cloneWhenDrag: this.cloneWhenDrag, + edgeScroll: this.edgeScroll, + edgeScrollTriggerMargin: this.edgeScrollTriggerMargin, + edgeScrollSpeed: this.edgeScrollSpeed, + edgeScrollTriggerMode: this.edgeScrollTriggerMode, + edgeScrollSpecifiedContainerX: this.edgeScrollSpecifiedContainerX, + edgeScrollSpecifiedContainerY: this.edgeScrollSpecifiedContainerY, + rtl: this.rtl, + preventTextSelection: this.preventTextSelection, + treeClass: 'he-tree', + rootClass: 'tree-root', + childrenClass: 'tree-children', + branchClass: 'tree-branch', + nodeClass: 'tree-node', + nodeBackClass: 'tree-node-back', + placeholderClass: 'tree-placeholder', + placeholderNodeBackClass: 'tree-placeholder-node-back', + placeholderNodeClass: 'tree-placeholder-node', + draggingClass: 'dragging', + placeholderId: `he_tree_drag_placeholder`, + ifNodeFolded: (branchEl, store) => { + const { + targetTree + } = store; + const node = targetTree.getNodeByBranchEl(branchEl); + return node.$folded; + }, + isTargetTreeRootDroppable: store => { + const droppable = resolveValueOrGettter(store.targetTree.rootNode.$droppable, [store.targetTree, store]); + if (droppable !== undefined) { + return droppable; + } + return true; + }, + unfoldTargetNodeByEl: (...args) => this._Draggable_unfoldTargetNodeByEl(...args), + isNodeParentDroppable: (branchEl, treeEl) => { + const tree = this.getTreeVmByTreeEl(treeEl); + const path = tree.getPathByBranchEl(branchEl); + const parentPath = arrayWithoutEnd(path, 1); + const parent = tree.getNodeByPath(parentPath); + return tree.isNodeDroppable(parent, parentPath); + }, + isNodeDroppable: (branchEl, treeEl) => { + const tree = this.getTreeVmByTreeEl(treeEl); + const path = tree.getPathByBranchEl(branchEl); + const node = tree.getNodeByPath(path); + return tree.isNodeDroppable(node, path); + }, + _findClosestDroppablePosition: (branchEl, treeEl) => { + const tree = this.getTreeVmByTreeEl(treeEl); + const path = tree.getPathByBranchEl(branchEl); + const findPath = arrayWithoutEnd(path, 1); + let cur = path; + for (const { + node, + path + } of tree.iteratePath(findPath, { + reverse: true + })) { + if (tree.isNodeDroppable(node, path)) { + return tree.getBranchElByPath(cur); + } else { + cur = path; + } + } + if (tree.isNodeDroppable(this.rootNode, [])) { + return tree.getBranchElByPath(cur); + } + }, + afterPlaceholderCreated: store => { + store.startTree.$emit('afterPlaceholderCreated', store); + store.startTree.$emit('after-placeholder-created', store); + }, + getPathByBranchEl: branchEl => this.getPathByBranchEl(branchEl), + beforeFirstMove: store => { + this.treesStore.store = store; + store.startTree = this.getTreeVmByTreeEl(store.startTreeEl); + const draggable = resolveValueOrGettter(store.startTree.draggable, [store.startTree, store]); + if (!draggable) { + return false; + } + const { + startTree, + dragBranchEl, + startPath + } = store; + store.dragNode = startTree.getNodeByPath(startPath); + if (this.cloneWhenDrag) { + store.dragNode = cloneTreeData(store.dragNode); + } + if (!startTree.isNodeDraggable(store.dragNode, startPath)) { + return false; + } + if (startTree.hasHook('ondragstart') && startTree.executeHook('ondragstart', [startTree, store]) === false) { + return false; + } + store.startTree.$emit('before-first-move', store); + store.startTree.$emit('drag', store); + this.$root.$emit('he-tree-drag', store); + }, + filterTargetTree: (targetTreeEl, store) => { + const targetTree = this.getTreeVmByTreeEl(targetTreeEl); + const { + startTree + } = store; + if (startTree !== targetTree) { + if (this._internal_hook_filterTargetTree) { + if (this._internal_hook_filterTargetTree(targetTree, store) === false) { + return false; + } + } else { + return false; + } + } + const targetTreeDroppable = resolveValueOrGettter(targetTree.droppable, [targetTree, store]); + if (!targetTreeDroppable) { + return false; + } + store.targetTree = targetTree; + if (!resolveValueOrGettter(store.startTree === store.targetTree) && resolveValueOrGettter(this._Draggable_unfoldTargetNode, [false, this.treeData]) !== this.rootNode.children) { + return false; + } + }, + afterMove: store => { + store.startTree.$emit('after-move', store); + }, + beforeDrop: (pathChanged, store) => { + const { + targetTree + } = store; + if (targetTree.hasHook('ondragend') && targetTree.executeHook('ondragend', [targetTree, store]) === false) { + return false; + } + this.$root.$emit('he-tree-before-drop', store); + }, + afterDrop: (store, t) => { + if (store.pathChanged) { + const { + startTree, + targetTree, + startPath, + dragNode + } = store; + let { + targetPath + } = store; + if (this.cloneWhenDrag !== true) { + // remove from start position + const startParentPath = arrayWithoutEnd(startPath, 1); + const startParent = startTree.getNodeByPath(startParentPath); + const startSiblings = startParentPath.length === 0 ? startTree.treeData : startParent.children; + const startIndex = arrayLast(startPath); + startSiblings.splice(startIndex, 1); + // remove node from the starting position may affect the target path. + // example + // startPath targetPath + // [0] [1] + // [0] [1, 0] + // [3, 1] [3, 3] + // [3, 1] [3, 3, 5] + // above targetPaths should be transformed to [0], [0, 0] [3, 2] [3, 2, 5] + if (startTree === targetTree) { + if (startPath.length <= targetPath.length) { + const sw = startPath.slice(0, startPath.length - 1); // without end + const tw = targetPath.slice(0, sw.length); // same length with sw + if (sw.toString() === tw.toString()) { + const endIndex = sw.length; + if (startPath[endIndex] < targetPath[endIndex]) { + // deprecated. I forgot why create a copy of targetPath. // targetPath = targetPath.slice(0) // create a copy of targetPath + targetPath[endIndex] -= 1; + } else if (startPath[endIndex] === targetPath[endIndex]) { + console.error('Draggable.afterDrop: That is impossible!'); + } + } + } + } + } + // insert to target position + const targetParentPath = arrayWithoutEnd(targetPath, 1); + const targetParent = targetTree.getNodeByPath(targetParentPath); + let targetSiblings; + if (targetParentPath.length === 0) { + targetSiblings = targetTree.treeData; + } else { + if (!targetParent.children) { + targetParent['children'] = []; + } + targetSiblings = targetParent.children; + } + const targetIndex = arrayLast(targetPath); + targetSiblings.splice(targetIndex, 0, dragNode); + // emit event + startTree.$emit('input', startTree.treeData); + startTree.$emit('change', store); + targetTree.$emit('drop', store); + this.$root.$emit('he-tree-drop', store); + if (targetTree !== startTree) { + targetTree.$emit('input', targetTree.treeData); + targetTree.$emit('change', store); + } + return new Promise((resolve, reject) => { + targetTree.$nextTick(() => { + resolve(); + }); + }); + } + } + }; + const _makeTreeDraggable_obj = this._makeTreeDraggable_obj = makeTreeDraggable(this.$el, options); + // watch props and update options + ['indent', 'triggerClass', 'triggerBySelf', 'unfoldWhenDragover', 'unfoldWhenDragoverDelay', 'draggingNodePositionMode', 'cloneWhenDrag', 'edgeScroll', 'edgeScrollTriggerMargin', 'edgeScrollSpeed', 'edgeScrollTriggerMode', 'edgeScrollSpecifiedContainerY', 'edgeScrollSpecifiedContainerY', 'rtl', 'preventTextSelection'].forEach(name => { + this.$watch(name, value => { + _makeTreeDraggable_obj.options[name] = value; + _makeTreeDraggable_obj.optionsUpdated(); + }); + }); + } + }; + + exports.Check = check; + exports.Draggable = Draggable_vue; + exports.Fold = fold; + exports.Tree = Tree; + exports.cloneTreeData = cloneTreeData; + exports.foldAll = foldAll; + exports.getPureTreeData = getPureTreeData; + exports.unfoldAll = unfoldAll; + exports.walkTreeData = walkTreeData$1; + + Object.defineProperty(exports, '__esModule', { value: true }); }))); diff --git a/dist/he-tree-vue.min.js b/dist/he-tree-vue.min.js index a47a829..0c5395e 100644 --- a/dist/he-tree-vue.min.js +++ b/dist/he-tree-vue.min.js @@ -1,25 +1,25 @@ /*! - * he-tree-vue v2.0.7-beta.1 + * he-tree-vue v3.1.2 * (c) phphe (https://github.com/phphe) * Homepage: https://he-tree-vue.phphe.com * Released under the MIT License. */ -!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],t):t((e=e||self).heTreeVue={},e.Vue)}(this,(function(e,t){"use strict";t=t&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t;var r=function(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r=0;--o){var a=this.tryEntries[o],i=a.completion;if("root"===a.tryLoc)return n("end");if(a.tryLoc<=this.prev){var l=r.call(a,"catchLoc"),c=r.call(a,"finallyLoc");if(l&&c){if(this.prev=0;--n){var o=this.tryEntries[n];if(o.tryLoc<=this.prev&&r.call(o,"finallyLoc")&&this.prev=0;--t){var r=this.tryEntries[t];if(r.finallyLoc===e)return this.complete(r.completion,r.afterLoc),S(r),s}},catch:function(e){for(var t=this.tryEntries.length-1;t>=0;--t){var r=this.tryEntries[t];if(r.tryLoc===e){var n=r.completion;if("throw"===n.type){var o=n.arg;S(r)}return o}}throw new Error("illegal catch attempt")},delegateYield:function(e,t,r){return this.delegate={iterator:E(e),resultName:t,nextLoc:r},"next"===this.method&&(this.arg=void 0),s}},e}(e.exports);try{regeneratorRuntime=t}catch(e){Function("r","regeneratorRuntime = r")(t)}})),v=g.mark(C);function y(e){if("undefined"==typeof Symbol||null==e[Symbol.iterator]){if(Array.isArray(e)||(e=function(e,t){if(!e)return;if("string"==typeof e)return m(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);"Object"===r&&e.constructor&&(r=e.constructor.name);if("Map"===r||"Set"===r)return Array.from(r);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return m(e,t)}(e))){var t=0,r=function(){};return{s:r,n:function(){return t>=e.length?{done:!0}:{done:!1,value:e[t++]}},e:function(e){throw e},f:r}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var n,o,a=!0,i=!1;return{s:function(){n=e[Symbol.iterator]()},n:function(){var e=n.next();return a=e.done,e},e:function(e){i=!0,o=e},f:function(){try{a||null==n.return||n.return()}finally{if(i)throw o}}}}function m(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r0&&void 0!==arguments[0]?arguments[0]:8,t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789",r="",n=0;n1&&void 0!==y[1]?y[1]:{}).reverse){g.next=30;break}if(null==e.length){g.next=14;break}r=0;case 4:if(!(r=0)){g.next=40;break}if(s={value:e[c],index:c},t.exclude&&t.exclude(s)){g.next=37;break}return g.next=37,s;case 37:c--,g.next=32;break;case 40:g.next=58;break;case 42:if(!x(e)){g.next=57;break}(u=Object.keys(e)).reverse(),d=0,f=u;case 46:if(!(d2&&void 0!==arguments[2]?arguments[2]:"children",n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{},o=b(e)?e:[e],a=function e(){p(this,e)},i=function e(o,i,c){n.reverse&&(o=o.slice()).reverse();for(var s=o.length,u=0;u0&&void 0!==arguments[0]?arguments[0]:[];p(this,e),this.childrenKey="children",this.data=t}return h(e,[{key:"iteratePath",value:g.mark((function e(t){var r,n,o,a,i,c,s,u,d,f,h,p,v,m,b,x,S,w=arguments;return g.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(r=w.length>1&&void 0!==w[1]?w[1]:{},n=this.childrenKey,o=this.rootChildren,r.reverse){e.next=29;break}a=[],i=o,c=y(t),e.prev=6,c.s();case 8:if((s=c.n()).done){e.next=19;break}return u=s.value,d=[].concat(l(a),[u]),f=i[u],e.next=14,{path:d,node:f};case 14:a=d,i=f[n];case 17:e.next=8;break;case 19:e.next=24;break;case 21:e.prev=21,e.t0=e.catch(6),c.e(e.t0);case 24:return e.prev=24,c.f(),e.finish(24);case 27:e.next=49;break;case 29:(h=l(this.iteratePath(t,Object.assign(Object.assign({},r),{reverse:!1})))).reverse(),p=y(h),e.prev=32,p.s();case 34:if((v=p.n()).done){e.next=41;break}return m=v.value,b=m.path,x=m.node,S=b,e.next=39,{path:S,node:x};case 39:e.next=34;break;case 41:e.next=46;break;case 43:e.prev=43,e.t1=e.catch(32),p.e(e.t1);case 46:return e.prev=46,p.f(),e.finish(46);case 49:case"end":return e.stop()}}),e,this,[[6,21,24,27],[32,43,46,49]])}))},{key:"getAllNodes",value:function(e){var t,r=[],n=y(this.iteratePath(e));try{for(n.s();!(t=n.n()).done;){var o=t.value.node;r.push(o)}}catch(e){n.e(e)}finally{n.f()}return r}},{key:"getNode",value:function(e){return k(this.getAllNodes(e))}},{key:"getNodeIndexAndParent",value:function(e){var t=e.slice(),r=t.pop();return{parent:this.getNode(t),index:r,parentPath:t}}},{key:"getNodeParent",value:function(e){return this.getNodeIndexAndParent(e).parent}},{key:"setPathNode",value:function(e,t){if(null==e||0===e.length)this.data=t;else{var r=this.childrenKey,n=this.rootChildren,o=this.getNodeIndexAndParent(e),a=o.parent,i=o.index;(1===e.length?n:a[r])[i]=t}}},{key:"removeNode",value:function(e){var t=this.childrenKey,r=this.rootChildren,n=this.getNodeIndexAndParent(e),o=n.parent,a=n.index,i=1===e.length?r:o[t],l=i[a];return i.splice(a,1),l}},{key:"walk",value:function(e,t){var r=this.childrenKey,n=this.data;return O(n,e,r,t)}},{key:"clone",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},r=this.childrenKey,n=new e;return this.walk((function(e,o,a,i){var l=Object.assign({},e);l[r]&&(l[r]=[]),t.afterNodeCreated&&t.afterNodeCreated(l,{oldNode:e,index:o,parent:a,path:i}),n.setPathNode(i,l)})),n.data}},{key:"rootChildren",get:function(){var e=this.childrenKey,t=this.data;return b(t)?t:t[e]}}]),e}();function D(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[];return S(e)?e.apply(void 0,l(t)):e}function _(e){var t=document.createElement("div");return t.innerHTML=e.trim(),t.childNodes.length>1?t.childNodes:t.childNodes[0]}function M(e,t){for(;;){if(null==e.parentElement)return!1;if(e.parentElement===t)return!0;e=e.parentElement}}function j(e){if(null!==e.parentNode)return e.parentNode.removeChild(e)}function $(e){var t=A(e),r=function(){if("undefined"!=typeof pageYOffset)return{top:pageYOffset,left:pageXOffset};var e=document.body,t=document.documentElement;return{top:(t=t.clientHeight?t:e).scrollTop,left:t.scrollLeft}}();return{x:t.left+r.left,y:t.top+r.top}}function A(e){var t=e.getBoundingClientRect(),r=t.top-document.documentElement.clientTop,n=t.bottom,o=t.left-document.documentElement.clientLeft,a=t.right;return{top:r,right:a,bottom:n,left:o,width:t.width||a-o,height:t.height||n-r,x:o,y:r}}var L=A;function F(e,t){for(var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},n=r&&r.withSelf?e:e.parentElement;n;){var o=t(n);if("break"===o)return;if(o)return n;n=n.parentElement}}function I(e,t){e["original_".concat(t)]=e.getAttribute(t)}function H(e,t){var r=e["original_".concat(t)];null==r?e.removeAttribute(t):e.setAttribute(t,r)}function Y(e,t){return e.classList?e.classList.contains(t):new RegExp("(^| )"+t+"( |$)","gi").test(e.className)}function X(e,t){Y(e,t)||(e.classList?e.classList.add(t):e.className+=" "+t)}function W(e,t,r){for(var n=arguments.length,o=new Array(n>3?n-3:0),a=3;a3?n-3:0),a=3;a2&&void 0!==arguments[2]?arguments[2]:{},o=C(e,{reverse:n.reverse}),a=y(o);try{for(a.s();!(r=a.n()).done;){var i=r.value,l=i.value,c=i.index;if(t(l,c))return l}}catch(e){a.e(e)}finally{a.f()}}function V(e,t){var r=[e,t];return(document.elementsFromPoint||document.msElementsFromPoint||function(e,t){var r=[],n=void 0;do{n!==document.elementFromPoint(e,t)?(n=document.elementFromPoint(e,t),r.push(n),n.style.pointerEvents="none"):n=!1}while(n);return r.forEach((function(e){return e.style.pointerEvents="all"})),r}).apply(document,r)}function q(e){e.element||(e.element=document.scrollingElement||document.documentElement),null==e.duration&&(e.duration=0);var t,r=e.x,n=e.y,o=e.duration,a=e.element,i=0,l=a.scrollTop,c=n-l,s=a.scrollLeft,u=r-s,d=+new Date;return function h(){if(!e.beforeEveryFrame||!1!==e.beforeEveryFrame(i)){var p=(new Date).getTime()-d;null!=n&&(a.scrollTop=parseInt(f(l,c,p,o))),null!=r&&(a.scrollLeft=parseInt(f(s,u,p,o))),p2&&void 0!==arguments[2]?arguments[2]:{},a=o=Object.assign({start:0,end:e.length-1,maxTimes:1e3},o),i=a.start,l=a.end,c=o,s=c.returnNearestIfNoHit,u=c.maxTimes;null==i&&(i=0,l=e.length-1);for(var d,f=0;i>=0&&i<=l;){if(f>=u)throw Error("binarySearch: loop times is over ".concat(u,", you can increase the limit."));if((d=t(n=e[r=Math.floor((l-i)/2+i)],f))>0)l=r-1;else{if(!(d<0))return{index:r,value:n,count:f+1,hit:!0};i=r+1}f++}return s?{index:r,value:n,count:f+1,hit:!1,greater:d>0}:null}function Z(e,t){return new Promise((function(r,n){setTimeout((function(){t&&t(),r()}),e)}))}var ee=function(){function e(){p(this,e),this.store={}}return h(e,[{key:"has",value:function(e){return this.store.hasOwnProperty(e)}},{key:"remember",value:function(e,t){return this.has(e)||(this.store[e]={value:t()}),this.store[e].value}},{key:"forget",value:function(e){e?this.has(e)&&delete this.store[e]:this.store={}}}]),e}();function te(e,t){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:new ee,n=function(n){var o=t[n];Object.defineProperty(e,n,{get:function(){var e=this;return r.remember(n,(function(){return o.call(e)}))}})};for(var o in t)n(o)} +!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],t):t((e=e||self).heTreeVue={},e.Vue)}(this,(function(e,t){"use strict";function r(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}function o(e,t){return e(t={exports:{}},t.exports),t.exports}var n=o((function(e){e.exports=function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e},e.exports.__esModule=!0,e.exports.default=e.exports}));r(n);var a=o((function(e){function t(r){return e.exports=t=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},e.exports.__esModule=!0,e.exports.default=e.exports,t(r)}e.exports=t,e.exports.__esModule=!0,e.exports.default=e.exports}));r(a);var l=o((function(e){e.exports=function(e,t){for(;!Object.prototype.hasOwnProperty.call(e,t)&&null!==(e=a(e)););return e},e.exports.__esModule=!0,e.exports.default=e.exports}));r(l),r(o((function(e){function t(){return"undefined"!=typeof Reflect&&Reflect.get?(e.exports=t=Reflect.get.bind(),e.exports.__esModule=!0,e.exports.default=e.exports):(e.exports=t=function(e,t,r){var o=l(e,t);if(o){var n=Object.getOwnPropertyDescriptor(o,t);return n.get?n.get.call(arguments.length<3?e:r):n.value}},e.exports.__esModule=!0,e.exports.default=e.exports),t.apply(this,arguments)}e.exports=t,e.exports.__esModule=!0,e.exports.default=e.exports})));var i=o((function(e){function t(r,o){return e.exports=t=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},e.exports.__esModule=!0,e.exports.default=e.exports,t(r,o)}e.exports=t,e.exports.__esModule=!0,e.exports.default=e.exports}));r(i),r(o((function(e){e.exports=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&i(e,t)},e.exports.__esModule=!0,e.exports.default=e.exports})));var s=o((function(e){function t(r){return e.exports=t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},e.exports.__esModule=!0,e.exports.default=e.exports,t(r)}e.exports=t,e.exports.__esModule=!0,e.exports.default=e.exports}));r(s),r(o((function(e){var t=s.default;e.exports=function(e,r){if(r&&("object"===t(r)||"function"==typeof r))return r;if(void 0!==r)throw new TypeError("Derived constructors may only return object or undefined");return n(e)},e.exports.__esModule=!0,e.exports.default=e.exports})));var c=o((function(e){e.exports=function(e){if(Array.isArray(e))return e},e.exports.__esModule=!0,e.exports.default=e.exports}));r(c);var d=o((function(e){e.exports=function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var o,n,a,l,i=[],s=!0,c=!1;try{if(a=(r=r.call(e)).next,0===t){if(Object(r)!==r)return;s=!1}else for(;!(s=(o=a.call(r)).done)&&(i.push(o.value),i.length!==t);s=!0);}catch(e){c=!0,n=e}finally{try{if(!s&&null!=r.return&&(l=r.return(),Object(l)!==l))return}finally{if(c)throw n}}return i}},e.exports.__esModule=!0,e.exports.default=e.exports}));r(d);var u=o((function(e){e.exports=function(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,o=new Array(t);r=0;--o){var n=this.tryEntries[o],l=n.completion;if("root"===n.tryLoc)return r("end");if(n.tryLoc<=this.prev){var i=a.call(n,"catchLoc"),s=a.call(n,"finallyLoc");if(i&&s){if(this.prev=0;--r){var o=this.tryEntries[r];if(o.tryLoc<=this.prev&&a.call(o,"finallyLoc")&&this.prev=0;--t){var r=this.tryEntries[t];if(r.finallyLoc===e)return this.complete(r.completion,r.afterLoc),_(r),p}},catch:function(e){for(var t=this.tryEntries.length-1;t>=0;--t){var r=this.tryEntries[t];if(r.tryLoc===e){var o=r.completion;if("throw"===o.type){var n=o.arg;_(r)}return n}}throw new Error("illegal catch attempt")},delegateYield:function(e,t,r){return this.delegate={iterator:P(e),resultName:t,nextLoc:r},"next"===this.method&&(this.arg=void 0),p}},o}e.exports=r,e.exports.__esModule=!0,e.exports.default=e.exports}));r(E);var T=E(),N=T;try{regeneratorRuntime=T}catch(e){"object"==typeof globalThis?globalThis.regeneratorRuntime=T:Function("r","regeneratorRuntime = r")(T)} /*! - * vue-functions v2.0.7-beta.1 - * (c) phphe (https://github.com/phphe) - * Homepage: undefined - * Released under the MIT License. - */var re={methods:{_getNonPropHooksByName:function(e){if(this._hooks)return this._hooks[e]},addHook:function(e,t){this._getNonPropHooksByName(e)||(this._hooks||(this._hooks={}),this._hooks[e]||(this._hooks[e]=[])),this._hooks[e].push(t)},removeHook:function(e,t){var r=this._getNonPropHooksByName(e);r&&function(e,t){for(var r,n=0;(r=e.indexOf(t))>-1;)e.splice(r,1),n++}(r,t)},hasHook:function(e){return this._getNonPropHooksByName(e)||this[e]},executeHook:function(e,t){var r=this,n=this._getNonPropHooksByName(e);return n=n?n.slice():[],this[e]&&S(this[e])&&n.push((function(t){for(var n=arguments.length,o=new Array(n>1?n-1:0),a=1;a0&&e(d,{attrs:{name:t.$props.foldingTransitionName}},[!o.$folded&&n(o.children,o,u)])])}))])}(this.rootNode.children,this.rootNode,[]),this.blockFooter&&this.blockFooter()])},mixins:[function(e){e=S(e)?e():Object.assign({},e);var t={},r=function(r){var n=e[r];n.$localName||(n.$localName="localProps_".concat(r)),n.$localSetter||(n.$localSetter=function(e){return e});var o={};t[r]=o,Object.keys(e[r]).forEach((function(e){"$"!==e[0]&&(o[e]=n[e])}))};for(var n in e)r(n);for(var o={props:t,computed:{},watch:{},data:function(){for(var t={localValueOfUpdatableProps:{}},r=0,n=Object.keys(e);r2&&void 0!==arguments[2]?arguments[2]:{};(r=he({foldOthers:!1},r)).foldOthers&&this.foldAll(),e.$folded&&(this.$set(e,"$folded",!1),this.$emit("nodeFoldedChanged",e),this.$emit("node-folded-changed",e))},toggleFold:function(e,t,r){e.$folded?this.unfold(e,t,r):this.fold(e,t,r)},foldAll:function(){var e=this;this.walkTreeData((function(t){e.fold(t)}))},unfoldAll:function(){var e=this;this.walkTreeData((function(t){e.unfold(t,{unfoldParent:!1})}))}},mounted:function(){this.foldAllAfterMounted&&this.foldAll()}};function ge(e,t){var r;if("undefined"==typeof Symbol||null==e[Symbol.iterator]){if(Array.isArray(e)||(r=function(e,t){if(!e)return;if("string"==typeof e)return ve(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);"Object"===r&&e.constructor&&(r=e.constructor.name);if("Map"===r||"Set"===r)return Array.from(e);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return ve(e,t)}(e))||t&&e&&"number"==typeof e.length){r&&(e=r);var n=0,o=function(){};return{s:o,n:function(){return n>=e.length?{done:!0}:{done:!1,value:e[n++]}},e:function(e){throw e},f:o}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var a,i=!0,l=!1;return{s:function(){r=e[Symbol.iterator]()},n:function(){var e=r.next();return i=e.done,e},e:function(e){l=!0,a=e},f:function(){try{i||null==r.return||r.return()}finally{if(l)throw a}}}}function ve(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r0&&oe(e.children,(function(t){r.$set(t,"$checked",e.$checked)}))},check:function(e,t){this.$set(e,"$checked",!0),this.afterCheckChanged(e,t)},uncheck:function(e,t){this.$set(e,"$checked",!1),this.afterCheckChanged(e,t)},toggleCheck:function(e,t){this.$set(e,"$checked",!e.$checked),this.afterCheckChanged(e,t)}}};function me(e,t,r,n,o,a,i){try{var l=e[a](i),c=l.value}catch(e){return void r(e)}l.done?t(c):Promise.resolve(c).then(n,o)}var be=function(e){return function(){var t=this,r=arguments;return new Promise((function(n,o){var a=e.apply(t,r);function i(e){me(a,n,o,i,l,"next",e)}function l(e){me(a,n,o,i,l,"throw",e)}i(void 0)}))}},xe={start:["mousedown","touchstart"],move:["mousemove","touchmove"],end:["mouseup","touchend"]},Se={isTouch:function(e){return e.type&&e.type.startsWith("touch")},_getStore:function(e){return e._wrapperStore||(e._wrapperStore=[]),e._wrapperStore},on:function(e,t,r,n){var o,a,i=we(n),c=i.args,s=i.mouseArgs,u=i.touchArgs,d=this._getStore(e),f=this,h=function(e){var n;if(f.isTouch(e))n={x:e.changedTouches[0].pageX,y:e.changedTouches[0].pageY,pageX:e.changedTouches[0].pageX,pageY:e.changedTouches[0].pageY,clientX:e.changedTouches[0].clientX,clientY:e.changedTouches[0].clientY,screenX:e.changedTouches[0].screenX,screenY:e.changedTouches[0].screenY};else if(n={x:e.pageX,y:e.pageY,pageX:e.pageX,pageY:e.pageY,clientX:e.clientX,clientY:e.clientY,screenX:e.screenX,screenY:e.screenY},"start"===t&&1!==e.which)return;return r.call(this,e,n)};d.push({handler:r,wrapper:h}),(o=W).call.apply(o,[null,e,xe[t][0],h].concat([].concat(l(c),l(s)))),(a=W).call.apply(a,[null,e,xe[t][1],h].concat([].concat(l(c),l(u))))},off:function(e,t,r,n){for(var o=we(n),a=o.args,i=o.mouseArgs,c=this._getStore(e),s=c.length-1;s>=0;s--){var u,d,f=c[s],h=f.handler,p=f.wrapper;if(r===h)(u=R).call.apply(u,[null,e,xe[t][0],p].concat([].concat(l(a),l(i)))),(d=R).call.apply(d,[null,e,xe[t][1],p].concat([].concat(l(a),l(i)))),c.splice(s,1)}}}; + * helper-js v2.0.7 + * (c) phphe (https://github.com/phphe) + * Homepage: null + * Released under the MIT License. + */var w=N.mark(j);function k(e,t){var r="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(!r){if(Array.isArray(e)||(r=function(e,t){if(!e)return;if("string"==typeof e)return _(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);"Object"===r&&e.constructor&&(r=e.constructor.name);if("Map"===r||"Set"===r)return Array.from(e);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return _(e,t)}(e))||t&&e&&"number"==typeof e.length){r&&(e=r);var o=0,n=function(){};return{s:n,n:function(){return o>=e.length?{done:!0}:{done:!1,value:e[o++]}},e:function(e){throw e},f:n}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var a,l=!0,i=!1;return{s:function(){r=r.call(e)},n:function(){var e=r.next();return l=e.done,e},e:function(e){i=!0,a=e},f:function(){try{l||null==r.return||r.return()}finally{if(i)throw a}}}}function _(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,o=new Array(t);r0&&void 0!==arguments[0]?arguments[0]:8,t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789",r="",o=0;o1&&void 0!==g[1]?g[1]:{}).reverse){v.next=30;break}if(null==e.length){v.next=14;break}r=0;case 4:if(!(r=0)){v.next=40;break}if(c={value:e[s],index:s},t.exclude&&t.exclude(c)){v.next=37;break}return v.next=37,c;case 37:s--,v.next=32;break;case 40:v.next=58;break;case 42:if(!P(e)){v.next=57;break}(d=Object.keys(e)).reverse(),u=0,h=d;case 46:if(!(u2&&void 0!==arguments[2]?arguments[2]:"children",o=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{},n=C(e)?e:[e],a=v((function e(){y(this,e)})),l=function e(n,l,i){o.reverse&&(n=n.slice()).reverse();for(var s=n.length,c=0;c0&&void 0!==arguments[0]?arguments[0]:[];y(this,e),this.childrenKey="children",this.data=t}return v(e,[{key:"rootChildren",get:function(){var e=this.childrenKey,t=this.data;return C(t)?t:t[e]}},{key:"iteratePath",value:N.mark((function e(t){var r,o,n,a,l,i,s,c,d,u,h,f,p,g,v,y,m,x=arguments;return N.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(r=x.length>1&&void 0!==x[1]?x[1]:{},o=this.childrenKey,n=this.rootChildren,r.reverse){e.next=29;break}a=[],l=n,i=k(t),e.prev=6,i.s();case 8:if((s=i.n()).done){e.next=19;break}return c=s.value,d=[].concat(S(a),[c]),u=l[c],e.next=14,{path:d,node:u};case 14:a=d,l=u[o];case 17:e.next=8;break;case 19:e.next=24;break;case 21:e.prev=21,e.t0=e.catch(6),i.e(e.t0);case 24:return e.prev=24,i.f(),e.finish(24);case 27:e.next=49;break;case 29:(h=S(this.iteratePath(t,Object.assign(Object.assign({},r),{reverse:!1})))).reverse(),f=k(h),e.prev=32,f.s();case 34:if((p=f.n()).done){e.next=41;break}return g=p.value,v=g.path,y=g.node,m=v,e.next=39,{path:m,node:y};case 39:e.next=34;break;case 41:e.next=46;break;case 43:e.prev=43,e.t1=e.catch(32),f.e(e.t1);case 46:return e.prev=46,f.f(),e.finish(46);case 49:case"end":return e.stop()}}),e,this,[[6,21,24,27],[32,43,46,49]])}))},{key:"getAllNodes",value:function(e){var t,r=[],o=k(this.iteratePath(e));try{for(o.s();!(t=o.n()).done;){var n=t.value.node;r.push(n)}}catch(e){o.e(e)}finally{o.f()}return r}},{key:"getNode",value:function(e){return O(this.getAllNodes(e))}},{key:"getNodeIndexAndParent",value:function(e){var t=e.slice(),r=t.pop();return{parent:this.getNode(t),index:r,parentPath:t}}},{key:"getNodeParent",value:function(e){return this.getNodeIndexAndParent(e).parent}},{key:"setPathNode",value:function(e,t){if(null==e||0===e.length)this.data=t;else{var r=this.childrenKey,o=this.rootChildren,n=this.getNodeIndexAndParent(e),a=n.parent,l=n.index;(1===e.length?o:a[r])[l]=t}}},{key:"removeNode",value:function(e){var t=this.childrenKey,r=this.rootChildren,o=this.getNodeIndexAndParent(e),n=o.parent,a=o.index,l=1===e.length?r:n[t],i=l[a];return l.splice(a,1),i}},{key:"walk",value:function(e,t){var r=this.childrenKey,o=this.data;return F(o,e,r,t)}},{key:"clone",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},r=this.childrenKey,o=new e;return o.childrenKey=r,this.walk((function(e,n,a,l){var i=Object.assign({},e);i[r]&&(i[r]=[]),t.afterNodeCreated&&t.afterNodeCreated(i,{oldNode:e,index:n,parent:a,path:l}),o.setPathNode(l,i)})),o.data}}]),e}();function I(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[];return B(e)?e.apply(void 0,S(t)):e}function Y(e,t){for(;;){if(null==e.parentElement)return!1;if(e.parentElement===t)return!0;e=e.parentElement}}function W(e){if(null!==e.parentNode)return e.parentNode.removeChild(e)}function X(e){var t=R(e),r=function(){if("undefined"!=typeof pageYOffset)return{top:pageYOffset,left:pageXOffset};var e=document.body,t=document.documentElement;return{top:(t=t.clientHeight?t:e).scrollTop,left:t.scrollLeft}}();return{x:t.left+r.left,y:t.top+r.top}}function R(e){var t=e.getBoundingClientRect(),r=t.top-document.documentElement.clientTop,o=t.bottom,n=t.left-document.documentElement.clientLeft,a=t.right;return{top:r,right:a,bottom:o,left:n,width:t.width||a-n,height:t.height||o-r,x:n,y:r}}var V=R;function U(e,t){for(var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},o=r&&r.withSelf?e:e.parentElement;o;){var n=t(o);if("break"===n)return;if(n)return o;o=o.parentElement}}function q(e,t){e["original_".concat(t)]=e.getAttribute(t)}function G(e,t){var r=e["original_".concat(t)];null==r?e.removeAttribute(t):e.setAttribute(t,r)}function K(e,t){return e.classList?e.classList.contains(t):new RegExp("(^| )"+t+"( |$)","gi").test(e.className)}function Q(e,t){K(e,t)||(e.classList?e.classList.add(t):e.className+=" "+t)}function J(e,t,r){for(var o=arguments.length,n=new Array(o>3?o-3:0),a=3;a3?o-3:0),a=3;a2&&void 0!==arguments[2]?arguments[2]:{},n=j(e,{reverse:o.reverse}),a=k(n);try{for(a.s();!(r=a.n()).done;){var l=r.value,i=l.value,s=l.index;if(t(i,s))return i}}catch(e){a.e(e)}finally{a.f()}}function ee(e,t){var r=[e,t];return(document.elementsFromPoint||document.msElementsFromPoint||function(e,t){var r=[],o=void 0;do{o!==document.elementFromPoint(e,t)?(o=document.elementFromPoint(e,t),r.push(o),o.style.pointerEvents="none"):o=!1}while(o);return r.forEach((function(e){return e.style.pointerEvents="all"})),r}).apply(document,r)}function te(e){e.element||(e.element=document.scrollingElement||document.documentElement),null==e.duration&&(e.duration=0);var t,r=e.x,o=e.y,n=e.duration,a=e.element,l=0,i=a.scrollTop,s=o-i,c=a.scrollLeft,d=r-c,u=+new Date;return function f(){if(!e.beforeEveryFrame||!1!==e.beforeEveryFrame(l)){var p=(new Date).getTime()-u;null!=o&&(a.scrollTop=parseInt(h(i,s,p,n))),null!=r&&(a.scrollLeft=parseInt(h(c,d,p,n))),p2&&void 0!==arguments[2]?arguments[2]:new ne,o=function(o){var n=t[o];Object.defineProperty(e,o,{get:function(){var e=this;return r.remember(o,(function(){return n.call(e)}))}})};for(var n in t)o(n)} /*! - * drag-event-service v1.1.7 - * (c) phphe (https://github.com/phphe) - * Homepage: undefined - * Released under the MIT License. - */function we(e){return e||(e={}),{args:e.args||[],mouseArgs:e.mouseArgs||[],touchArgs:e.touchArgs||[]}} + * vue-functions v2.0.6 + * (c) phphe (https://github.com/phphe) + * Homepage: undefined + * Released under the MIT License. + */var le={methods:{_getNonPropHooksByName:function(e){if(this._hooks)return this._hooks[e]},addHook:function(e,t){this._getNonPropHooksByName(e)||(this._hooks||(this._hooks={}),this._hooks[e]||(this._hooks[e]=[])),this._hooks[e].push(t)},removeHook:function(e,t){var r=this._getNonPropHooksByName(e);r&&function(e,t){for(var r,o=0;(r=e.indexOf(t))>-1;)e.splice(r,1),o++}(r,t)},hasHook:function(e){return this._getNonPropHooksByName(e)||this[e]},executeHook:function(e,t){var r=this,o=this._getNonPropHooksByName(e);return o=o?o.slice():[],this[e]&&B(this[e])&&o.push((function(t){for(var o=arguments.length,n=new Array(o>1?o-1:0),a=1;a{Object.keys(e).forEach(t=>{"$"===t[0]&&delete e[t]})}})}const de={},ue={render:function(){const e=e=>e||"",r=(o,n,a)=>{const l={[this.rtl?"paddingRight":"paddingLeft"]:a.length*this.indent+"px"};return t.createVNode("div",{class:`tree-children ${e(n===this.rootNode&&"tree-root")} ${e(n.$childrenClass)}`,style:n.$childrenStyle||{}},[o.map((o,n)=>{const i=[...a,n],s=this.foldingTransition||"transition";let c=l;return o.$nodeBackStyle&&(c={...c,...o.$nodeBackStyle}),t.createVNode("div",{class:`tree-branch ${e(o.$branchClass)} ${e(o.$hidden&&"he-tree--hidden")}`,style:o.$branchStyle||{},"data-tree-node-path":i.join(",")},[t.createVNode("div",{class:"tree-node-back "+e(o.$nodeBackClass),style:c||{}},[t.createVNode("div",{class:"tree-node "+e(o.$nodeClass),style:o.$nodeStyle||{}},[(()=>{const e=()=>this.$slots.default?this.$slots.default({node:o,index:n,path:i,tree:this}):o.text;return this.overrideSlotDefault?this.overrideSlotDefault({node:o,index:n,path:i,tree:this},e):e()})()])]),(o.children&&o.children.length)>0&&t.createVNode(s,{name:this.$props.foldingTransitionName},{default:()=>[!o.$folded&&r(o.children,o,i)]})])})])};return t.createVNode("div",{class:`he-tree ${this.treeClass} ${e(this.rtl&&"he-tree--rtl")}`,"data-tree-id":this.treeId},[this.blockHeader&&this.blockHeader(),r(this.rootNode.children,this.rootNode,[]),this.blockFooter&&this.blockFooter()])},mixins:[function(e){e=B(e)?e():Object.assign({},e);var t={},r=function(r){var o=e[r];o.$localName||(o.$localName="localProps_".concat(r)),o.$localSetter||(o.$localSetter=function(e){return e});var n={};t[r]=n,Object.keys(e[r]).forEach((function(e){"$"!==e[0]&&(n[e]=o[e])}))};for(var o in e)r(o);for(var n={props:t,computed:{},watch:{},data:function(){for(var t={localValueOfUpdatableProps:{}},r=0,o=Object.keys(e);r({})}},data:()=>({trees:de,treeClass:"",treeId:D(),blockHeader:null,blockFooter:null,overrideSlotDefault:null}),watch:{treeData:{immediate:!0,handler(e){this._TreeDataHelper=new H(this.treeData)}}},methods:{iteratePath(e,t){return this._TreeDataHelper.iteratePath(e,t)},getTreeVmByTreeEl(e){return this.trees[e.getAttribute("data-tree-id")]},getAllNodesByPath(e){return this._TreeDataHelper.getAllNodes(e)},getNodeByPath(e){return this._TreeDataHelper.getNode(e)},getPathByBranchEl:e=>e.getAttribute("data-tree-node-path").split(",").map(e=>parseInt(e)),getBranchElByPath(e){return this.$el.querySelector(`[data-tree-node-path='${e.join(",")}']`)},getNodeByBranchEl(e){return this.getNodeByPath(this.getPathByBranchEl(e))},getNodeParentByPath(e){return this._TreeDataHelper.getNodeParent(e)},removeNodeByPath(e){return this._TreeDataHelper.removeNode(e)},walkTreeData(e,t){return se(this.treeData,e,t)},cloneTreeData(e){return ie(this.treeData,e)},getPureTreeData(){return ce(this.treeData)}},created(){const e=()=>{this.rootNode.children=this.treeData};this.$watch("rootNode",e,{immediate:!0}),this.$watch("treeData",e,{immediate:!0})},mounted(){this.treeId=D(),this.trees[this.treeId]=this},beforeUnmount(){delete this.trees[this.treeId]},mixPlugins(e){return{name:"Tree",extends:ue,mixins:e,mixPlugins:this.mixPlugins}}};var he={props:{foldingTransitionName:{type:String},foldingTransition:{},foldAllAfterMounted:{type:Boolean}},emits:["nodeFoldedChanged","node-folded-changed"],methods:{fold(e,t){e.$folded||(e.$folded=!0,this.$emit("nodeFoldedChanged",e),this.$emit("node-folded-changed",e))},unfold(e,t,r={}){(r={foldOthers:!1,...r}).foldOthers&&this.foldAll(),e.$folded&&(e.$folded=!1,this.$emit("nodeFoldedChanged",e))},toggleFold(e,t,r){e.$folded?this.unfold(e,t,r):this.fold(e,t,r)},foldAll(){this.walkTreeData(e=>{this.fold(e)})},unfoldAll(){this.walkTreeData(e=>{this.unfold(e,{unfoldParent:!1})})}},mounted(){this.foldAllAfterMounted&&this.foldAll()}},fe={props:{},methods:{afterCheckChanged(e,t){const r=this.getAllNodesByPath(t),o=r.slice(0,r.length-1);o.reverse();for(const e of o)e.$checked=e.children.every(e=>e.$checked);e.children&&e.children.length>0&&se(e.children,t=>{t.$checked=e.$checked})},check(e,t){e.$checked=!0,this.afterCheckChanged(e,t)},uncheck(e,t){e.$checked=!1,this.afterCheckChanged(e,t)},toggleCheck(e,t){e.$checked=!e.$checked,this.afterCheckChanged(e,t)}}},pe={start:["mousedown","touchstart"],move:["mousemove","touchmove"],end:["mouseup","touchend"]},ge={isTouch:function(e){return e.type&&e.type.startsWith("touch")},_getStore:function(e){return e._wrapperStore||(e._wrapperStore=[]),e._wrapperStore},on:function(e,t,r,o){var n,a,l=ve(o),i=l.args,s=l.mouseArgs,c=l.touchArgs,d=this._getStore(e),u=this,h=function(e){var o;if(u.isTouch(e))o={x:e.changedTouches[0].pageX,y:e.changedTouches[0].pageY,pageX:e.changedTouches[0].pageX,pageY:e.changedTouches[0].pageY,clientX:e.changedTouches[0].clientX,clientY:e.changedTouches[0].clientY,screenX:e.changedTouches[0].screenX,screenY:e.changedTouches[0].screenY};else if(o={x:e.pageX,y:e.pageY,pageX:e.pageX,pageY:e.pageY,clientX:e.clientX,clientY:e.clientY,screenX:e.screenX,screenY:e.screenY},"start"===t&&1!==e.which)return;return r.call(this,e,o)};d.push({handler:r,wrapper:h}),(n=J).call.apply(n,[null,e,pe[t][0],h].concat([].concat(S(i),S(s)))),(a=J).call.apply(a,[null,e,pe[t][1],h].concat([].concat(S(i),S(c))))},off:function(e,t,r,o){for(var n=ve(o),a=n.args,l=n.mouseArgs,i=this._getStore(e),s=i.length-1;s>=0;s--){var c,d,u=i[s],h=u.handler,f=u.wrapper;if(r===h)(c=z).call.apply(c,[null,e,pe[t][0],f].concat([].concat(S(a),S(l)))),(d=z).call.apply(d,[null,e,pe[t][1],f].concat([].concat(S(a),S(l)))),i.splice(s,1)}}};function ve(e){return e||(e={}),{args:e.args||[],mouseArgs:e.mouseArgs||[],touchArgs:e.touchArgs||[]}} /*! - * draggable-helper v5.0.6 - * (c) phphe (https://github.com/phphe) - * Homepage: undefined - * Released under the MIT License. - */function Ee(e){if("undefined"==typeof Symbol||null==e[Symbol.iterator]){if(Array.isArray(e)||(e=function(e,t){if(!e)return;if("string"==typeof e)return ke(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);"Object"===r&&e.constructor&&(r=e.constructor.name);if("Map"===r||"Set"===r)return Array.from(r);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return ke(e,t)}(e))){var t=0,r=function(){};return{s:r,n:function(){return t>=e.length?{done:!0}:{done:!1,value:e[t++]}},e:function(e){throw e},f:r}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var n,o,a=!0,i=!1;return{s:function(){n=e[Symbol.iterator]()},n:function(){var e=n.next();return a=e.done,e},e:function(e){i=!0,o=e},f:function(){try{a||null==n.return||n.return()}finally{if(i)throw o}}}}function ke(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r1&&void 0!==arguments[1]?arguments[1]:{};P(r,Oe);var n=function(n,i){Se.isTouch(n)?r.ontouchstart&&r.ontouchstart(n):r.onmousedown&&r.onmousedown(n);var l=n.target;if(!r.ingoreTags.includes(l.tagName)&&(!Y(l,r.undraggableClassName)&&!F(l,(function(t){return!!Y(t,r.undraggableClassName)||(t===e?"break":void 0)})))){(t=JSON.parse(JSON.stringify(Be))).startEvent=n,t.listenerElement=e,t.directTriggerElement=l,t.initialMouse=Object.assign({},i);var c=!1;if(r.getTriggerElement){var s=r.getTriggerElement(t.directTriggerElement,t);if(!s)return;t.triggerElement=s}else if(r.triggerClassName){var u,d,f=Ee(T(r.triggerClassName));try{var h=function(){var r=d.value;if(u=F(t.directTriggerElement,(function(t){return!!Y(t,r)||(t===e?"break":void 0)}),{withSelf:!0}))return"break"};for(f.s();!(d=f.n()).done;){if("break"===h())break}}catch(e){f.e(e)}finally{f.f()}if(!u)return;t.triggerElement=u}else c=!0;t.movedOrClonedElement=r.getMovedOrClonedElement?r.getMovedOrClonedElement(t.directTriggerElement,t,r):e,t.movedOrClonedElement&&(c&&(t.triggerElement=t.movedOrClonedElement),r.triggerBySelf&&t.triggerElement!==t.directTriggerElement||(Se.isTouch(n)||r.preventTextSelection&&n.preventDefault(),Se.on(document,"move",o,{touchArgs:[{passive:!1}]}),Se.on(window,"end",a)))}};Se.on(e,"start",n,{touchArgs:[{passive:!0}]});var o=function(e,n){Se.isTouch(e)?r.ontouchmove&&r.ontouchmove(e):r.onmousemove&&r.onmousemove(e);var o=t.movedOrClonedElement,a=t.move={x:n.clientX-t.initialMouse.clientX,y:n.clientY-t.initialMouse.clientY};if(t.moveEvent=e,t.mouse=n,(Se.isTouch(e)||r.preventTextSelection)&&e.preventDefault(),0===t.movedCount){if(r.minDisplacement){var i=Math.pow(a.x,2),l=Math.pow(a.y,2);if(Math.pow(i+l,.5)=e.length?{done:!0}:{done:!1,value:e[n++]}},e:function(e){throw e},f:o}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var a,i=!0,l=!1;return{s:function(){r=e[Symbol.iterator]()},n:function(){var e=r.next();return i=e.done,e},e:function(e){l=!0,a=e},f:function(){try{i||null==r.return||r.return()}finally{if(l)throw a}}}}function je(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r=e.length?{done:!0}:{done:!1,value:e[n++]}},e:function(e){throw e},f:o}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var a,i=!0,l=!1;return{s:function(){r=e[Symbol.iterator]()},n:function(){var e=r.next();return i=e.done,e},e:function(e){l=!0,a=e},f:function(){try{i||null==r.return||r.return()}finally{if(l)throw a}}}}function Ie(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);rv.clientWidth){var y=k(v);u.x<=y.left+r?E(v,"left")>10&&w(v,"x")&&(n=v,i="left"):u.x>=y.left+v.clientWidth-r&&E(v,"right")>10&&w(v,"x")&&(n=v,i="right")}if(n)break;a=v}}}catch(e){g.e(e)}finally{g.f()}if(a=null,c=null,t.edgeScrollSpecifiedContainerY)(p="function"==typeof t.edgeScrollSpecifiedContainerY?t.edgeScrollSpecifiedContainerY(e,t):t.edgeScrollSpecifiedContainerY)&&(c=[p]);c||(c=s||V(u.x,u.y));var m,b=Ee(c);try{for(b.s();!(m=b.n()).done;){var x=m.value;if(!a||M(a,x)){if(!o&&x.scrollHeight>x.clientHeight){var S=k(x);u.y<=S.top+r?E(x,"up")>10&&w(x,"y")&&(o=x,l="up"):u.y>=S.top+x.clientHeight-r&&E(x,"down")>10&&w(x,"y")&&(o=x,l="down")}if(o)break;a=x}}}catch(e){b.e(e)}finally{b.f()}n&&(Ce=q("left"===i?{x:0,element:n,duration:E(n,"left")/t.edgeScrollSpeed}:{x:n.scrollWidth-n.clientWidth,element:n,duration:E(n,"right")/t.edgeScrollSpeed})),o&&(Pe=q("up"===l?{y:0,element:o,duration:E(o,"up")/t.edgeScrollSpeed}:{y:o.scrollHeight-o.clientHeight,element:o,duration:E(o,"down")/t.edgeScrollSpeed}))}function w(e,t){var r=getComputedStyle(e),n="overflow-".concat(t);return e===(document.scrollingElement||document.documentElement)?"visible"===r[n]||"auto"===r[n]||"scroll"===r[n]:"auto"===r[n]||"scroll"===r[n]}function E(e,t){return"up"===t?e.scrollTop:"down"===t?e.scrollHeight-e.scrollTop-e.clientHeight:"left"===t?e.scrollLeft:"right"===t?e.scrollWidth-e.scrollLeft-e.clientWidth:void 0}function k(e){var t=L(e);return e===(document.scrollingElement||document.documentElement)&&(t.top=0,t.left=0),t}},Te.afterDrop=function(e,t){t.edgeScroll&&De()};var He={},Ye=ue({},void 0,{props:{triggerClass:{type:[String,Array],default:"tree-node"},triggerBySelf:{type:Boolean},draggable:{type:[Boolean,Function],default:!0},droppable:{type:[Boolean,Function],default:!0},eachDraggable:{type:[Function]},eachDroppable:{type:[Function]},ondragstart:{type:Function},ondragend:{type:Function},unfoldWhenDragover:{type:Boolean,default:!0},unfoldWhenDragoverDelay:{type:Number,default:30},draggingNodePositionMode:{type:String,default:"top_left_corner"},edgeScroll:{type:Boolean},edgeScrollTriggerMargin:{type:Number,default:50},edgeScrollSpeed:{type:Number,default:.35},edgeScrollTriggerMode:{type:String,default:"top_left_corner"},edgeScrollSpecifiedContainerX:{},edgeScrollSpecifiedContainerY:{},preventTextSelection:{type:Boolean,default:!0}},data:function(){return{treesStore:He}},methods:{_Draggable_unfoldTargetNodeByEl:function(e,t){var r=t.targetTree,n=r.getPathByBranchEl(e),o=r.getNodeByPath(n);return r.unfold&&r.unfold(o,n),new Promise((function(e,t){r.$nextTick((function(){e()}))}))},isNodeDraggable:function(e,t){var r=this.treesStore.store,n=this.getAllNodesByPath(t);n.unshift(this.rootNode);var o,a=Fe(C(n,{reverse:!0}));try{for(a.s();!(o=a.n()).done;){var i=o.value,l=i.value,c=i.index,s=t.slice(0,c+1),u=D(void 0!==l.$draggable?l.$draggable:this.eachDraggable,[s,this,r]);if(void 0!==u)return u}}catch(e){a.e(e)}finally{a.f()}return!0},isNodeDroppable:function(e,t){var r,n,o=this.treesStore.store,a=this.getAllNodesByPath(t);a.unshift(this.rootNode);var i,l=Fe(C(a,{reverse:!0}));try{for(l.s();!(i=l.n()).done;){var c=i.value,s=c.value,u=c.index,d=t.slice(0,u+1),f=D(void 0!==s.$droppable?s.$droppable:this.eachDroppable,[d,this,o]);if(void 0!==f){r=f,n=!0;break}}}catch(e){l.e(e)}finally{l.f()}return n||(r=!0),this._internal_hook_isNodeDroppable?this._internal_hook_isNodeDroppable({droppableFinal:r,node:e,path:t,store:o}):r},getPathByBranchEl:function(e){var t,r=function(e){var t=e.getAttribute("data-tree-node-path");if(t)return t.split(",").map((function(e){return parseInt(e)}))},n=r(e);if(n)return n;F(e,(function(e){return Y(e,"tree-root")?(t=[],!0):Y(e,"tree-branch")?(t=r(e),!0):void 0}));var o,a=0,i=Fe(C(e.parentElement.children));try{for(i.s();!(o=i.n()).done;){var c=o.value,s=c.value;c.index;if(Y(s,"tree-branch")||Y(s,"tree-placeholder")){if(s===e)break;a++}}}catch(e){i.e(e)}finally{i.f()}return[].concat(l(t),[a])}},mounted:function(){var e=this,t=this._draggableOptions={indent:this.indent,triggerClass:this.triggerClass,triggerBySelf:this.triggerBySelf,unfoldWhenDragover:this.unfoldWhenDragover,unfoldWhenDragoverDelay:this.unfoldWhenDragoverDelay,draggingNodePositionMode:this.draggingNodePositionMode,cloneWhenDrag:this.cloneWhenDrag,edgeScroll:this.edgeScroll,edgeScrollTriggerMargin:this.edgeScrollTriggerMargin,edgeScrollSpeed:this.edgeScrollSpeed,edgeScrollTriggerMode:this.edgeScrollTriggerMode,edgeScrollSpecifiedContainerX:this.edgeScrollSpecifiedContainerX,edgeScrollSpecifiedContainerY:this.edgeScrollSpecifiedContainerY,rtl:this.rtl,preventTextSelection:this.preventTextSelection,treeClass:"he-tree",rootClass:"tree-root",childrenClass:"tree-children",branchClass:"tree-branch",nodeClass:"tree-node",nodeBackClass:"tree-node-back",placeholderClass:"tree-placeholder",placeholderNodeBackClass:"tree-placeholder-node-back",placeholderNodeClass:"tree-placeholder-node",draggingClass:"dragging",placeholderId:"he_tree_drag_placeholder",ifNodeFolded:function(e,t){return t.targetTree.getNodeByBranchEl(e).$folded},isTargetTreeRootDroppable:function(e){var t=D(e.targetTree.rootNode.$droppable,[e.targetTree,e]);return void 0===t||t},unfoldTargetNodeByEl:function(){return e._Draggable_unfoldTargetNodeByEl.apply(e,arguments)},isNodeParentDroppable:function(t,r){var n=e.getTreeVmByTreeEl(r),o=N(n.getPathByBranchEl(t),1),a=n.getNodeByPath(o);return n.isNodeDroppable(a,o)},isNodeDroppable:function(t,r){var n=e.getTreeVmByTreeEl(r),o=n.getPathByBranchEl(t),a=n.getNodeByPath(o);return n.isNodeDroppable(a,o)},_findClosestDroppablePosition:function(t,r){var n,o=e.getTreeVmByTreeEl(r),a=o.getPathByBranchEl(t),i=N(a,1),l=a,c=Fe(o.iteratePath(i,{reverse:!0}));try{for(c.s();!(n=c.n()).done;){var s=n.value,u=s.node,d=s.path;if(o.isNodeDroppable(u,d))return o.getBranchElByPath(l);l=d}}catch(e){c.e(e)}finally{c.f()}if(o.isNodeDroppable(e.rootNode,[]))return o.getBranchElByPath(l)},afterPlaceholderCreated:function(e){e.startTree.$emit("afterPlaceholderCreated",e),e.startTree.$emit("after-placeholder-created",e)},getPathByBranchEl:function(t){return e.getPathByBranchEl(t)},beforeFirstMove:function(t){if(e.treesStore.store=t,t.startTree=e.getTreeVmByTreeEl(t.startTreeEl),!D(t.startTree.draggable,[t.startTree,t]))return!1;var r=t.startTree,n=(t.dragBranchEl,t.startPath);return t.dragNode=r.getNodeByPath(n),e.cloneWhenDrag&&(t.dragNode=ne(t.dragNode)),!!r.isNodeDraggable(t.dragNode,n)&&((!r.hasHook("ondragstart")||!1!==r.executeHook("ondragstart",[r,t]))&&(t.startTree.$emit("before-first-move",t),t.startTree.$emit("drag",t),void e.$root.$emit("he-tree-drag",t)))},filterTargetTree:function(t,r){var n=e.getTreeVmByTreeEl(t);if(r.startTree!==n){if(!e._internal_hook_filterTargetTree)return!1;if(!1===e._internal_hook_filterTargetTree(n,r))return!1}return!!D(n.droppable,[n,r])&&(r.targetTree=n,!(!D(r.startTree===r.targetTree)&&D(e._Draggable_unfoldTargetNode,[!1,e.treeData])!==e.rootNode.children)&&void 0)},afterMove:function(e){e.startTree.$emit("after-move",e)},beforeDrop:function(t,r){var n=r.targetTree;if(n.hasHook("ondragend")&&!1===n.executeHook("ondragend",[n,r]))return!1;e.$root.$emit("he-tree-before-drop",r)},afterDrop:function(t,r){if(t.pathChanged){var n=t.startTree,o=t.targetTree,a=t.startPath,i=t.targetPath,l=t.dragNode;if(!0!==e.cloneWhenDrag){var c=N(a,1),s=n.getNodeByPath(c),u=0===c.length?n.treeData:s.children,d=k(a);if(u.splice(d,1),n===o&&a.length<=i.length){for(var f=a.length-1,h=!0,p=0;p1&&void 0!==arguments[1]?arguments[1]:{};t=Ae(Ae({},t),{},{treeEl:e});var r,n=Ne(e,{triggerClassName:t.triggerClass,triggerBySelf:t.triggerBySelf,draggingClassName:t.draggingClass,clone:t.cloneWhenDrag,edgeScroll:t.edgeScroll,edgeScrollTriggerMargin:t.edgeScrollTriggerMargin,edgeScrollSpeed:t.edgeScrollSpeed,edgeScrollTriggerMode:t.edgeScrollTriggerMode,edgeScrollSpecifiedContainerX:t.edgeScrollSpecifiedContainerX,edgeScrollSpecifiedContainerY:t.edgeScrollSpecifiedContainerY,rtl:t.rtl,preventTextSelection:t.preventTextSelection,updateMovedElementStyleManually:!0,getMovedOrClonedElement:function(e,r){return F(r.triggerElement,(function(e){return Y(e,t.branchClass)}),{withSelf:!0})},beforeFirstMove:function(r,n){if(r.startTreeEl=e,r.dragBranchEl=r.movedElement,r.startPath=t.getPathByBranchEl(r.movedOrClonedElement),t.beforeFirstMove&&!1===t.beforeFirstMove(r,n))return!1},beforeMove:function(e,r){var n=function(){var r=t.getPathByBranchEl(e.placeholder);e.placeholder.querySelector(".".concat(t.nodeBackClass)).style[t.rtl?"paddingRight":"paddingLeft"]=(r.length-1)*t.indent+"px",0===e.tempChildren.children.length&&j(e.tempChildren)};if(0===e.movedCount){var o=_('\n
\n
\n
\n
\n
\n
\n '));K(o,e.movedOrClonedElement),e.placeholder=o,t.afterPlaceholderCreated(e);var a=document.createElement("DIV");return X(a,t.childrenClass),e.tempChildren=a,n(),void e.updateMovedElementStyle()}e.updateMovedElementStyle(),e.oneMoveStore={};var l,c,s,u=e.movedElement,d=u.querySelector(".".concat(t.nodeClass)),f=$(d),h=A(d);if("mouse"===t.draggingNodePositionMode){var p=e.moveEvent;f={x:p.pageX,y:p.pageY},h={x:p.clientX,y:p.clientY}}else t.rtl&&(f.x+=d.offsetWidth,h.x+=d.offsetWidth);var v,y=Me(V(h.x,h.y));try{for(y.s();!(v=y.n()).done;){var m=v.value;if(s||(s=m),Y(m,t.treeClass)){c=m;break}}}catch(e){y.e(e)}finally{y.f()}if(s===c||M(s,c)||(c=null),(l=c)&&!1!==t.filterTargetTree(l,e,r)){e.targetTreeEl=l;var b={tree:function(){return l},root:function(){return b.tree.querySelector(".".concat(t.childrenClass))},closestNode:function(){var e=[];if(function r(n){if(n!==b.tree){var o=n.querySelector(".".concat(t.nodeClass));o&&!Le(o)&&e.push(o)}var a=n.querySelector(".".concat(t.childrenClass));if(a)for(var i=0;i=f.x)break}else if($(a).x<=f.x)break;for(var i=void 0,l=n.nextSibling;l;){if(l!==u&&l!==e.placeholder&&Y(l,t.branchClass)&&!Le(l)){i=!0;break}l=l.nextSibling}if(i)break;var c=F(n,(function(e){return Y(e,t.branchClass)}));if(!c)break;n=c}return n}}},x={"no closest":function(){return!b.closestNode},"closest is top":function(){return b.closestBranch===U(b.root.children,(function(e){return e!==u&&!Le(e)}))},"closest is top excluding placeholder":function(){return b.closestBranch===U(b.root.children,(function(t){return t!==u&&t!==e.placeholder&&!Le(t)}))},"on closest middle":function(){return f.yb.closestNodeOffset.x+t.indent},"at closest left":function(){return f.xb.closestNodeOffset.x+b.closestNode.offsetWidth}}),Object.keys(x).forEach((function(e){var t=x[e];x[e]=function(){return Boolean(t.call(this))}})),te(b,b),te(x,x),e.oneMoveStore.info=b,e.oneMoveStore.conditions=x;var S=function(t){for(var r=arguments.length,o=new Array(r>1?r-1:0),a=1;a0&&void 0!==r[0]?r[0]:b.closestBranch,!t.isNodeParentDroppable(o,e.targetTreeEl)){n.next=5;break}K(e.placeholder,o),n.next=11;break;case 5:return n.next=7,E(i(o));case 7:if(a=n.sent,l=!e.oneMoveStore.actionRecords||1===e.oneMoveStore.actionRecords.length,a||!l){n.next=11;break}return n.abrupt("return",k(o));case 11:case"end":return n.stop()}}),n)})))()},prepend:function(){return be(g.mark((function r(){return g.wrap((function(r){for(;;)switch(r.prev=r.next){case 0:if(b.closestBranch!==e.placeholder){r.next=2;break}return r.abrupt("return");case 2:if(!t.ifNodeFolded(b.closestBranch,e)||t.unfoldWhenDragover){r.next=6;break}return r.abrupt("return",S("insert after",b.closestBranch));case 6:if(!t.isNodeDroppable(b.closestBranch,e.targetTreeEl)){r.next=11;break}return r.next=9,N(b.closestBranch);case 9:r.next=12;break;case 11:return r.abrupt("return",E(b.closestBranch));case 12:case"end":return r.stop()}}),r)})))()},"after above":function(){return be(g.mark((function r(){return g.wrap((function(r){for(;;)switch(r.prev=r.next){case 0:if(!t.isNodeParentDroppable(b.aboveBranch,e.targetTreeEl)){r.next=4;break}K(e.placeholder,b.aboveBranch),r.next=5;break;case 4:return r.abrupt("return",E(i(b.aboveBranch)));case 5:case"end":return r.stop()}}),r)})))()},"append to prev":function(){return be(g.mark((function r(){var n;return g.wrap((function(r){for(;;)switch(r.prev=r.next){case 0:if(b.closestPrev!==e.placeholder){r.next=2;break}return r.abrupt("return");case 2:if(!t.ifNodeFolded(b.closestPrev,e)){r.next=6;break}return r.abrupt("return",S("insert after",b.closestPrev));case 6:if(!t.isNodeDroppable(b.closestPrev,e.targetTreeEl)){r.next=13;break}return r.next=9,T(b.closestPrev);case 9:n=r.sent,J(e.placeholder,n),r.next=14;break;case 13:return r.abrupt("return",E(b.closestPrev));case 14:case"end":return r.stop()}}),r)})))()}},E=function(){var r=be(g.mark((function r(n){var o;return g.wrap((function(r){for(;;)switch(r.prev=r.next){case 0:if(!n){r.next=5;break}if(!(o=t._findClosestDroppablePosition(n,e.targetTreeEl))){r.next=5;break}return K(e.placeholder,o),r.abrupt("return",!0);case 5:case"end":return r.stop()}}),r)})));return function(e){return r.apply(this,arguments)}}(),k=function(){var r=be(g.mark((function r(n){return g.wrap((function(r){for(;;)switch(r.prev=r.next){case 0:if(t.ifNodeFolded(n,e)||!t.isNodeDroppable(n,e.targetTreeEl)){r.next=3;break}return r.next=3,N(n);case 3:case"end":return r.stop()}}),r)})));return function(e){return r.apply(this,arguments)}}(),T=function(){var r=be(g.mark((function r(n){var o;return g.wrap((function(r){for(;;)switch(r.prev=r.next){case 0:return r.next=2,t.unfoldTargetNodeByEl(n,e);case 2:return(o=n.querySelector(".".concat(t.childrenClass)))||J(o=e.tempChildren,n),r.abrupt("return",o);case 5:case"end":return r.stop()}}),r)})));return function(e){return r.apply(this,arguments)}}(),N=function(){var r=be(g.mark((function r(n){var o,a;return g.wrap((function(r){for(;;)switch(r.prev=r.next){case 0:if(o=function(){var t=be(g.mark((function t(){var r;return g.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return t.next=2,T(n);case 2:r=t.sent,Q(e.placeholder,r);case 4:case"end":return t.stop()}}),t)})));return function(){return t.apply(this,arguments)}}(),!t.ifNodeFolded(n,e)){r.next=6;break}a=e.oneMoveStore,setTimeout((function(){a===e.oneMoveStore&&o()}),t.unfoldWhenDragoverDelay),r.next=8;break;case 6:return r.next=8,o();case 8:case"end":return r.stop()}}),r)})));return function(e){return r.apply(this,arguments)}}();_e({options:t,event:e.moveEvent,store:e,opt:r,info:b,conditions:x,actions:w,doAction:S})}},afterMove:function(e,r){t.afterMove&&t.afterMove(e,r)},beforeDrop:(r=be(g.mark((function e(r,n){var o,a,i,l,c,s,u,d;return g.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return d=function(){var e=r.startTree,t=r.targetTree,n=r.startPath,o=r.targetPath;return e!==t||n.toString()!==o.toString()},r.endEvent,r.movedElement,o=r.placeholder,a=r.tempChildren,r.movedCount,i=r.targetTreeEl,l=r.startTreeEl,i&&(c=i.cloneNode(!0),i.style.display="none",K(c,i),l!==i&&(s=l.cloneNode(!0),l.style.display="none",K(s,l)),r.targetPath=t.getPathByBranchEl(o),u=d(),r.targetPathNotEqualToStartPath=u,r.pathChangePrevented=!1,t.beforeDrop&&!1===t.beforeDrop(u,r,n)&&(u=!1,r.pathChangePrevented=!1),r.pathChanged=u),j(o),a&&j(a),r.updateMovedElementStyle(),e.next=10,t.afterDrop(r,n);case 10:if(!c){e.next=16;break}return e.next=13,Z(30);case 13:j(c),i.style.display="block",s&&(j(s),l.style.display="block");case 16:case"end":return e.stop()}}),e)}))),function(e,t){return r.apply(this,arguments)})}),o=n.destroy,a=n.options;return{destroy:o,options:t,optionsUpdated:l};function i(e){return F(e,(function(e){return!!Y(e,t.branchClass)||(Y(e,t.rootClass)?"break":void 0)}))}function l(){Object.assign(a,{triggerClassName:t.triggerClass,triggerBySelf:t.triggerBySelf,draggingClassName:t.draggingClass,clone:t.cloneWhenDrag,edgeScroll:t.edgeScroll,edgeScrollTriggerMargin:t.edgeScrollTriggerMargin,edgeScrollSpeed:t.edgeScrollSpeed,edgeScrollTriggerMode:t.edgeScrollTriggerMode,rtl:t.rtl,preventTextSelection:t.preventTextSelection})}}(this.$el,t);["indent","triggerClass","triggerBySelf","unfoldWhenDragover","unfoldWhenDragoverDelay","draggingNodePositionMode","cloneWhenDrag","edgeScroll","edgeScrollTriggerMargin","edgeScrollSpeed","edgeScrollTriggerMode","edgeScrollSpecifiedContainerY","edgeScrollSpecifiedContainerY","rtl","preventTextSelection"].forEach((function(t){e.$watch(t,(function(e){r.options[t]=e,r.optionsUpdated()}))}))}},void 0,void 0,void 0,!1,void 0,void 0,void 0);e.Check=ye,e.Draggable=Ye,e.Fold=pe,e.Tree=de,e.cloneTreeData=ne,e.foldAll=function(e){oe(e,(function(e){t.set(e,"$folded",!0)}))},e.getPureTreeData=ae,e.unfoldAll=function(e){oe(e,(function(e){t.set(e,"$folded",!1)}))},e.walkTreeData=oe,Object.defineProperty(e,"__esModule",{value:!0})})); + * draggable-helper v5.0.6 + * (c) phphe (https://github.com/phphe) + * Homepage: undefined + * Released under the MIT License. + */function ye(e){if("undefined"==typeof Symbol||null==e[Symbol.iterator]){if(Array.isArray(e)||(e=function(e,t){if(!e)return;if("string"==typeof e)return me(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);"Object"===r&&e.constructor&&(r=e.constructor.name);if("Map"===r||"Set"===r)return Array.from(r);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return me(e,t)}(e))){var t=0,r=function(){};return{s:r,n:function(){return t>=e.length?{done:!0}:{done:!1,value:e[t++]}},e:function(e){throw e},f:r}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o,n,a=!0,l=!1;return{s:function(){o=e[Symbol.iterator]()},n:function(){var e=o.next();return a=e.done,e},e:function(e){l=!0,n=e},f:function(){try{a||null==o.return||o.return()}finally{if(l)throw n}}}}function me(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,o=new Array(t);r1&&void 0!==arguments[1]?arguments[1]:{};L(r,Ee);var o=function(o,l){ge.isTouch(o)?r.ontouchstart&&r.ontouchstart(o):r.onmousedown&&r.onmousedown(o);var i=o.target;if(!r.ingoreTags.includes(i.tagName)&&(!K(i,r.undraggableClassName)&&!U(i,(function(t){return!!K(t,r.undraggableClassName)||(t===e?"break":void 0)})))){(t=JSON.parse(JSON.stringify(Te))).startEvent=o,t.listenerElement=e,t.directTriggerElement=i,t.initialMouse=Object.assign({},l);var s=!1;if(r.getTriggerElement){var c=r.getTriggerElement(t.directTriggerElement,t);if(!c)return;t.triggerElement=c}else if(r.triggerClassName){var d,u,h=ye($(r.triggerClassName));try{var f=function(){var r=u.value;if(d=U(t.directTriggerElement,(function(t){return!!K(t,r)||(t===e?"break":void 0)}),{withSelf:!0}))return"break"};for(h.s();!(u=h.n()).done;){if("break"===f())break}}catch(e){h.e(e)}finally{h.f()}if(!d)return;t.triggerElement=d}else s=!0;t.movedOrClonedElement=r.getMovedOrClonedElement?r.getMovedOrClonedElement(t.directTriggerElement,t,r):e,t.movedOrClonedElement&&(s&&(t.triggerElement=t.movedOrClonedElement),r.triggerBySelf&&t.triggerElement!==t.directTriggerElement||(ge.isTouch(o)||r.preventTextSelection&&o.preventDefault(),ge.on(document,"move",n,{touchArgs:[{passive:!1}]}),ge.on(window,"end",a)))}};ge.on(e,"start",o,{touchArgs:[{passive:!0}]});var n=function(e,o){ge.isTouch(e)?r.ontouchmove&&r.ontouchmove(e):r.onmousemove&&r.onmousemove(e);var n=t.movedOrClonedElement,a=t.move={x:o.clientX-t.initialMouse.clientX,y:o.clientY-t.initialMouse.clientY};if(t.moveEvent=e,t.mouse=o,(ge.isTouch(e)||r.preventTextSelection)&&e.preventDefault(),0===t.movedCount){if(r.minDisplacement){var l=Math.pow(a.x,2),i=Math.pow(a.y,2);if(Math.pow(l+i,.5)U(r.triggerElement,e=>K(e,t.branchClass),{withSelf:!0}),beforeFirstMove(r,o){if(r.startTreeEl=e,r.dragBranchEl=r.movedElement,r.startPath=t.getPathByBranchEl(r.movedOrClonedElement),t.beforeFirstMove&&!1===t.beforeFirstMove(r,o))return!1},beforeMove:(e,r)=>{const o=()=>{const r=t.getPathByBranchEl(e.placeholder);e.placeholder.querySelector("."+t.nodeBackClass).style[t.rtl?"paddingRight":"paddingLeft"]=(r.length-1)*t.indent+"px",0===e.tempChildren.children.length&&W(e.tempChildren)};if(0===e.movedCount){const r=(a=`\n
\n
\n
\n
\n
\n
\n `,(l=document.createElement("div")).innerHTML=a.trim(),l.childNodes.length>1?l.childNodes:l.childNodes[0]);re(r,e.movedOrClonedElement),e.placeholder=r,t.afterPlaceholderCreated(e);const n=document.createElement("DIV");return Q(n,t.childrenClass),e.tempChildren=n,o(),void e.updateMovedElementStyle()}var a,l;e.updateMovedElementStyle(),e.oneMoveStore={};const i=e.movedElement;let s;const c=i.querySelector("."+t.nodeClass);let d,u,h=X(c),f=R(c);if("mouse"===t.draggingNodePositionMode){const{moveEvent:t}=e;h={x:t.pageX,y:t.pageY},f={x:t.clientX,y:t.clientY}}else t.rtl&&(h.x+=c.offsetWidth,f.x+=c.offsetWidth);for(const e of ee(f.x,f.y))if(u||(u=e),K(e,t.treeClass)){d=e;break}if(u===d||Y(u,d)||(d=null),s=d,!s)return;if(!1===t.filterTargetTree(s,e,r))return;e.targetTreeEl=s;const p={tree:()=>s,root:()=>p.tree.querySelector("."+t.childrenClass),closestNode:()=>{const e=[],r=o=>{if(o!==p.tree){const r=o.querySelector("."+t.nodeClass);r&&!ke(r)&&e.push(r)}const n=o.querySelector("."+t.childrenClass);if(n)for(let e=0;e2&&void 0!==arguments[2]?arguments[2]:{},a=n=Object.assign({start:0,end:e.length-1,maxTimes:1e3},n),l=a.start,i=a.end,s=n,c=s.returnNearestIfNoHit,d=s.maxTimes;null==l&&(l=0,i=e.length-1);for(var u,h=0;l>=0&&l<=i;){if(h>=d)throw Error("binarySearch: loop times is over ".concat(d,", you can increase the limit."));if((u=t(o=e[r=Math.floor((i-l)/2+l)],h))>0)i=r-1;else{if(!(u<0))return{index:r,value:o,count:h+1,hit:!0};l=r+1}h++}return c?{index:r,value:o,count:h+1,hit:!1,greater:u>0}:null}(e,e=>X(e).y-h.y,{returnNearestIfNoHit:!0});return o=n.hit?n.value:n.greater&&e[n.index-1]||n.value,o},closestNodeOffset:()=>X(p.closestNode),closestBranch:()=>U(p.closestNode,e=>K(e,t.branchClass)),closestNext:()=>{let e=p.closestBranch.nextSibling;for(;e;){if(e!==i&&K(e,t.branchClass)&&!ke(e))return e;e=e.nextSibling}},closestPrev:()=>{let e=p.closestBranch.previousSibling;for(;e;){if(e!==i&&K(e,t.branchClass)&&!ke(e))return e;e=e.previousSibling}},aboveBranch:()=>{if(p.closestBranch!==e.placeholder)return;if(g["closest has next"])return;let r,o=p.closestBranch,n=o.previousSibling;for(;n;){if(n!==i&&K(n,t.branchClass)&&!ke(n)){o=n,r=!0;break}n=n.previousSibling}for(r||(o=U(o,e=>K(e,t.branchClass)));o;){const r=o.querySelector("."+t.nodeClass);if(t.rtl){if(X(r).x+r.offsetWidth>=h.x)break}else if(X(r).x<=h.x)break;let n,a=o.nextSibling;for(;a;){if(a!==i&&a!==e.placeholder&&K(a,t.branchClass)&&!ke(a)){n=!0;break}a=a.nextSibling}if(n)break;const l=U(o,e=>K(e,t.branchClass));if(!l)break;o=l}return o}},g={"no closest":()=>!p.closestNode,"closest is top":()=>p.closestBranch===Z(p.root.children,e=>e!==i&&!ke(e)),"closest is top excluding placeholder":()=>p.closestBranch===Z(p.root.children,t=>t!==i&&t!==e.placeholder&&!ke(t)),"on closest middle":()=>h.yh.x>p.closestNodeOffset.x+t.indent,"at closest left":()=>h.xp.closestBranch===e.placeholder,"no aboveBranch":()=>!p.aboveBranch,"closest has next":()=>p.closestNext,"closest has prev":()=>p.closestPrev,"closest has children excluding placeholder movingEl":()=>{const r=p.closestBranch.querySelector("."+t.childrenClass);if(r)return Z(r.children,t=>t!==i&&t!==e.placeholder&&!ke(t))}};t.rtl&&Object.assign(g,{"at closest indent right":()=>h.xh.x>p.closestNodeOffset.x+p.closestNode.offsetWidth}),Object.keys(g).forEach(e=>{const t=g[e];g[e]=function(){return Boolean(t.call(this))}}),ae(p,p),ae(g,g),e.oneMoveStore.info=p,e.oneMoveStore.conditions=g;const v=(t,...r)=>{e._doActionQueue||(e._doActionQueue=Promise.resolve());const n=e._doActionQueue;e._doActionQueue=n.then(async()=>{e.oneMoveStore.actionRecords||(e.oneMoveStore.actionRecords=[]);const{actionRecords:n}=e.oneMoveStore,a=(0,y[t])(...r);n.push(t),await a,o()})},y={async nothing(){},async"append to root"(){t.isTargetTreeRootDroppable(e)&&oe(e.placeholder,p.root)},async"insert before"(){if(!t.isNodeParentDroppable(p.closestBranch,e.targetTreeEl))return m(n(p.closestBranch));var r,o;r=e.placeholder,(o=p.closestBranch).parentElement.insertBefore(r,o)},async"insert after"(r=p.closestBranch){if(t.isNodeParentDroppable(r,e.targetTreeEl))re(e.placeholder,r);else{const t=await m(n(r)),o=!e.oneMoveStore.actionRecords||1===e.oneMoveStore.actionRecords.length;if(!t&&o)return x(r)}},async prepend(){if(p.closestBranch!==e.placeholder)return t.ifNodeFolded(p.closestBranch,e)&&!t.unfoldWhenDragover?v("insert after",p.closestBranch):t.isNodeDroppable(p.closestBranch,e.targetTreeEl)?void await S(p.closestBranch):m(p.closestBranch)},async"after above"(){if(!t.isNodeParentDroppable(p.aboveBranch,e.targetTreeEl))return m(n(p.aboveBranch));re(e.placeholder,p.aboveBranch)},async"append to prev"(){if(p.closestPrev!==e.placeholder){if(t.ifNodeFolded(p.closestPrev,e))return v("insert after",p.closestPrev);if(!t.isNodeDroppable(p.closestPrev,e.targetTreeEl))return m(p.closestPrev);{const t=await b(p.closestPrev);oe(e.placeholder,t)}}}},m=async r=>{if(r){const o=t._findClosestDroppablePosition(r,e.targetTreeEl);if(o)return re(e.placeholder,o),!0}},x=async r=>{!t.ifNodeFolded(r,e)&&t.isNodeDroppable(r,e.targetTreeEl)&&await S(r)},b=async r=>{await t.unfoldTargetNodeByEl(r,e);let o=r.querySelector("."+t.childrenClass);return o||(o=e.tempChildren,oe(o,r)),o},S=async r=>{const o=async()=>{const t=await b(r);var o,n;o=e.placeholder,(n=t).insertBefore(o,n.firstChild)};if(t.ifNodeFolded(r,e)){let r=e.oneMoveStore;setTimeout(()=>{r===e.oneMoveStore&&o()},t.unfoldWhenDragoverDelay)}else await o()};!function({conditions:e,doAction:t}){!0===e["no closest"]?t("append to root"):!1===e["no closest"]&&(!0===e["closest is top"]?!0===e["on closest middle"]?t("insert before"):!1===e["on closest middle"]&&(!0===e["at closest indent right"]?t("prepend"):!1===e["at closest indent right"]&&(!0===e["closest is placeholder"]?t("insert after"):!1===e["closest is placeholder"]&&(!0===e["closest has children excluding placeholder movingEl"]?t("prepend"):!1===e["closest has children excluding placeholder movingEl"]&&t("insert after")))):!1===e["closest is top"]&&(!0===e["on closest middle"]?!1===e["at closest indent right"]?!1===e["at closest left"]?!1===e["closest is placeholder"]?!0===e["closest has next"]?!1===e["closest has children excluding placeholder movingEl"]?t("insert after"):!0===e["closest has children excluding placeholder movingEl"]&&t("prepend"):!1===e["closest has next"]&&(!0===e["closest has children excluding placeholder movingEl"]?t("prepend"):!1===e["closest has children excluding placeholder movingEl"]&&t("insert after")):!0===e["closest is placeholder"]&&t("nothing"):!0===e["at closest left"]&&(!0===e["closest is placeholder"]?!0===e["no aboveBranch"]?t("nothing"):!1===e["no aboveBranch"]&&t("after above"):!1===e["closest is placeholder"]&&(!1===e["closest has children excluding placeholder movingEl"]?t("insert after"):!0===e["closest has children excluding placeholder movingEl"]&&t("prepend"))):!0===e["at closest indent right"]&&(!1===e["closest is placeholder"]?!0===e["closest has next"]?!1===e["closest has children excluding placeholder movingEl"]?t("prepend"):!0===e["closest has children excluding placeholder movingEl"]&&(!0===e["closest is top excluding placeholder"]?t("insert before"):!1===e["closest is top excluding placeholder"]&&t("prepend")):!1===e["closest has next"]&&t("prepend"):!0===e["closest is placeholder"]&&(!0===e["no aboveBranch"]?!1===e["closest has prev"]?t("nothing"):!0===e["closest has prev"]&&t("append to prev"):!1===e["no aboveBranch"]&&(!0===e["closest has prev"]?t("append to prev"):!1===e["closest has prev"]&&t("nothing")))):!1===e["on closest middle"]&&(!1===e["at closest indent right"]?!1===e["at closest left"]?!1===e["closest is placeholder"]?!0===e["closest has children excluding placeholder movingEl"]?t("prepend"):!1===e["closest has children excluding placeholder movingEl"]&&t("insert after"):!0===e["closest is placeholder"]&&t("nothing"):!0===e["at closest left"]&&(!0===e["closest is placeholder"]?!1===e["no aboveBranch"]?t("after above"):!0===e["no aboveBranch"]&&t("nothing"):!1===e["closest is placeholder"]&&(!1===e["closest has next"]?!1===e["closest has children excluding placeholder movingEl"]?t("insert after"):!0===e["closest has children excluding placeholder movingEl"]&&t("prepend"):!0===e["closest has next"]&&(!0===e["closest has children excluding placeholder movingEl"]?t("prepend"):!1===e["closest has children excluding placeholder movingEl"]&&t("insert after")))):!0===e["at closest indent right"]&&(!0===e["closest is placeholder"]?!0===e["no aboveBranch"]?!1===e["closest has prev"]?t("nothing"):!0===e["closest has prev"]&&t("append to prev"):!1===e["no aboveBranch"]&&(!0===e["closest has prev"]?t("append to prev"):!1===e["closest has prev"]&&t("nothing")):!1===e["closest is placeholder"]&&t("prepend")))))}({options:t,event:e.moveEvent,store:e,opt:r,info:p,conditions:g,actions:y,doAction:v})},afterMove:(e,r)=>{t.afterMove&&t.afterMove(e,r)},beforeDrop:async(e,r)=>{e.movedElement;const{placeholder:o,tempChildren:n,movedCount:a,targetTreeEl:l,startTreeEl:i}=e;let s,c;if(l){s=l.cloneNode(!0),l.style.display="none",re(s,l),i!==l&&(c=i.cloneNode(!0),i.style.display="none",re(c,i)),e.targetPath=t.getPathByBranchEl(o);let n=function(){const{startTree:t,targetTree:r,startPath:o,targetPath:n}=e;if(t===r&&o.length===n.length){if(o.toString()===n.toString())return!1;{const e=o.slice(0);if(e[e.length-1]++,e.toString()===n.toString())return!1}}return!0}();e.targetPathNotEqualToStartPath=n,e.pathChangePrevented=!1,t.beforeDrop&&!1===t.beforeDrop(n,e,r)&&(n=!1,e.pathChangePrevented=!1),e.pathChanged=n}var d,u;W(o),n&&W(n),e.updateMovedElementStyle(),await t.afterDrop(e,r),s&&(await(d=30,new Promise((function(e,t){setTimeout((function(){u&&u(),e()}),d)}))),W(s),l.style.display="block",c&&(W(c),i.style.display="block"))}});return{destroy:r,options:t,optionsUpdated:function(){Object.assign(o,{triggerClassName:t.triggerClass,triggerBySelf:t.triggerBySelf,draggingClassName:t.draggingClass,clone:t.cloneWhenDrag,edgeScroll:t.edgeScroll,edgeScrollTriggerMargin:t.edgeScrollTriggerMargin,edgeScrollSpeed:t.edgeScrollSpeed,edgeScrollTriggerMode:t.edgeScrollTriggerMode,rtl:t.rtl,preventTextSelection:t.preventTextSelection})}};function n(e){return U(e,e=>!!K(e,t.branchClass)||(K(e,t.rootClass)?"break":void 0))}}function ke(e){return 0===e.offsetWidth&&0===e.offsetHeight}xe.afterMove=function(e,t){if(t.edgeScroll){var r=t.edgeScrollTriggerMargin;Ne();var o,n,a,l,i,s,c,d={x:e.mouse.clientX,y:e.mouse.clientY};if("top_left_corner"===t.edgeScrollTriggerMode){var u=V(e.movedElement);d={x:u.x,y:u.y}}var h;if(t.edgeScrollSpecifiedContainerX)(h="function"==typeof t.edgeScrollSpecifiedContainerX?t.edgeScrollSpecifiedContainerX(e,t):t.edgeScrollSpecifiedContainerX)&&(s=[h]);s||(c=s=ee(d.x,d.y));var f,p,g=ye(s);try{for(g.s();!(f=g.n()).done;){var v=f.value;if(!a||Y(a,v)){if(!o&&v.scrollWidth>v.clientWidth){var y=N(v);d.x<=y.left+r?T(v,"left")>10&&E(v,"x")&&(o=v,l="left"):d.x>=y.left+v.clientWidth-r&&T(v,"right")>10&&E(v,"x")&&(o=v,l="right")}if(o)break;a=v}}}catch(e){g.e(e)}finally{g.f()}if(a=null,s=null,t.edgeScrollSpecifiedContainerY)(p="function"==typeof t.edgeScrollSpecifiedContainerY?t.edgeScrollSpecifiedContainerY(e,t):t.edgeScrollSpecifiedContainerY)&&(s=[p]);s||(s=c||ee(d.x,d.y));var m,x=ye(s);try{for(x.s();!(m=x.n()).done;){var b=m.value;if(!a||Y(a,b)){if(!n&&b.scrollHeight>b.clientHeight){var S=N(b);d.y<=S.top+r?T(b,"up")>10&&E(b,"y")&&(n=b,i="up"):d.y>=S.top+b.clientHeight-r&&T(b,"down")>10&&E(b,"y")&&(n=b,i="down")}if(n)break;a=b}}}catch(e){x.e(e)}finally{x.f()}o&&(be=te("left"===l?{x:0,element:o,duration:T(o,"left")/t.edgeScrollSpeed}:{x:o.scrollWidth-o.clientWidth,element:o,duration:T(o,"right")/t.edgeScrollSpeed})),n&&(Se=te("up"===i?{y:0,element:n,duration:T(n,"up")/t.edgeScrollSpeed}:{y:n.scrollHeight-n.clientHeight,element:n,duration:T(n,"down")/t.edgeScrollSpeed}))}function E(e,t){var r=getComputedStyle(e),o="overflow-".concat(t);return e===(document.scrollingElement||document.documentElement)?"visible"===r[o]||"auto"===r[o]||"scroll"===r[o]:"auto"===r[o]||"scroll"===r[o]}function T(e,t){return"up"===t?e.scrollTop:"down"===t?e.scrollHeight-e.scrollTop-e.clientHeight:"left"===t?e.scrollLeft:"right"===t?e.scrollWidth-e.scrollLeft-e.clientWidth:void 0}function N(e){var t=V(e);return e===(document.scrollingElement||document.documentElement)&&(t.top=0,t.left=0),t}},xe.afterDrop=function(e,t){t.edgeScroll&&Ne()};const _e={};var Ce={props:{triggerClass:{type:[String,Array],default:"tree-node"},triggerBySelf:{type:Boolean},draggable:{type:[Boolean,Function],default:!0},droppable:{type:[Boolean,Function],default:!0},eachDraggable:{type:[Function]},eachDroppable:{type:[Function]},ondragstart:{type:Function},ondragend:{type:Function},unfoldWhenDragover:{type:Boolean,default:!0},unfoldWhenDragoverDelay:{type:Number,default:30},draggingNodePositionMode:{type:String,default:"top_left_corner"},edgeScroll:{type:Boolean},edgeScrollTriggerMargin:{type:Number,default:50},edgeScrollSpeed:{type:Number,default:.35},edgeScrollTriggerMode:{type:String,default:"top_left_corner"},edgeScrollSpecifiedContainerX:{},edgeScrollSpecifiedContainerY:{},preventTextSelection:{type:Boolean,default:!0}},emits:["afterPlaceholderCreated","after-placeholder-created","before-first-move","drag","he-tree-drag","after-move","he-tree-before-drop","input","change","drop","he-tree-drop"],data:()=>({treesStore:_e}),methods:{_Draggable_unfoldTargetNodeByEl(e,t){const{targetTree:r}=t,o=r.getPathByBranchEl(e),n=r.getNodeByPath(o);return r.unfold&&r.unfold(n,o),new Promise((e,t)=>{r.$nextTick(()=>{e()})})},isNodeDraggable(e,t){const{store:r}=this.treesStore,o=this.getAllNodesByPath(t);o.unshift(this.rootNode);for(const{value:e,index:n}of j(o,{reverse:!0})){const o=t.slice(0,n+1),a=I(void 0!==e.$draggable?e.$draggable:this.eachDraggable,[o,this,r]);if(void 0!==a)return a}return!0},isNodeDroppable(e,t){const{store:r}=this.treesStore,o=this.getAllNodesByPath(t);let n,a;o.unshift(this.rootNode);for(const{value:e,index:l}of j(o,{reverse:!0})){const o=t.slice(0,l+1),i=I(void 0!==e.$droppable?e.$droppable:this.eachDroppable,[o,this,r]);if(void 0!==i){n=i,a=!0;break}}return a||(n=!0),this._internal_hook_isNodeDroppable?this._internal_hook_isNodeDroppable({droppableFinal:n,node:e,path:t,store:r}):n},getPathByBranchEl(e){this.treesStore.store;const t=e=>{const t=e.getAttribute("data-tree-node-path");if(t)return t.split(",").map(e=>parseInt(e))},r=t(e);if(r)return r;let o;U(e,e=>K(e,"tree-root")?(o=[],!0):K(e,"tree-branch")?(o=t(e),!0):void 0);let n=0;for(const{value:t,index:r}of j(e.parentElement.children))if(K(t,"tree-branch")||K(t,"tree-placeholder")){if(t===e)break;n++}return[...o,n]}},mounted(){const e=this._draggableOptions={indent:this.indent,triggerClass:this.triggerClass,triggerBySelf:this.triggerBySelf,unfoldWhenDragover:this.unfoldWhenDragover,unfoldWhenDragoverDelay:this.unfoldWhenDragoverDelay,draggingNodePositionMode:this.draggingNodePositionMode,cloneWhenDrag:this.cloneWhenDrag,edgeScroll:this.edgeScroll,edgeScrollTriggerMargin:this.edgeScrollTriggerMargin,edgeScrollSpeed:this.edgeScrollSpeed,edgeScrollTriggerMode:this.edgeScrollTriggerMode,edgeScrollSpecifiedContainerX:this.edgeScrollSpecifiedContainerX,edgeScrollSpecifiedContainerY:this.edgeScrollSpecifiedContainerY,rtl:this.rtl,preventTextSelection:this.preventTextSelection,treeClass:"he-tree",rootClass:"tree-root",childrenClass:"tree-children",branchClass:"tree-branch",nodeClass:"tree-node",nodeBackClass:"tree-node-back",placeholderClass:"tree-placeholder",placeholderNodeBackClass:"tree-placeholder-node-back",placeholderNodeClass:"tree-placeholder-node",draggingClass:"dragging",placeholderId:"he_tree_drag_placeholder",ifNodeFolded:(e,t)=>{const{targetTree:r}=t;return r.getNodeByBranchEl(e).$folded},isTargetTreeRootDroppable:e=>{const t=I(e.targetTree.rootNode.$droppable,[e.targetTree,e]);return void 0===t||t},unfoldTargetNodeByEl:(...e)=>this._Draggable_unfoldTargetNodeByEl(...e),isNodeParentDroppable:(e,t)=>{const r=this.getTreeVmByTreeEl(t),o=A(r.getPathByBranchEl(e),1),n=r.getNodeByPath(o);return r.isNodeDroppable(n,o)},isNodeDroppable:(e,t)=>{const r=this.getTreeVmByTreeEl(t),o=r.getPathByBranchEl(e),n=r.getNodeByPath(o);return r.isNodeDroppable(n,o)},_findClosestDroppablePosition:(e,t)=>{const r=this.getTreeVmByTreeEl(t),o=r.getPathByBranchEl(e),n=A(o,1);let a=o;for(const{node:e,path:t}of r.iteratePath(n,{reverse:!0})){if(r.isNodeDroppable(e,t))return r.getBranchElByPath(a);a=t}if(r.isNodeDroppable(this.rootNode,[]))return r.getBranchElByPath(a)},afterPlaceholderCreated:e=>{e.startTree.$emit("afterPlaceholderCreated",e),e.startTree.$emit("after-placeholder-created",e)},getPathByBranchEl:e=>this.getPathByBranchEl(e),beforeFirstMove:e=>{this.treesStore.store=e,e.startTree=this.getTreeVmByTreeEl(e.startTreeEl);if(!I(e.startTree.draggable,[e.startTree,e]))return!1;const{startTree:t,dragBranchEl:r,startPath:o}=e;return e.dragNode=t.getNodeByPath(o),this.cloneWhenDrag&&(e.dragNode=ie(e.dragNode)),!!t.isNodeDraggable(e.dragNode,o)&&((!t.hasHook("ondragstart")||!1!==t.executeHook("ondragstart",[t,e]))&&(e.startTree.$emit("before-first-move",e),e.startTree.$emit("drag",e),void this.$root.$emit("he-tree-drag",e)))},filterTargetTree:(e,t)=>{const r=this.getTreeVmByTreeEl(e),{startTree:o}=t;if(o!==r){if(!this._internal_hook_filterTargetTree)return!1;if(!1===this._internal_hook_filterTargetTree(r,t))return!1}return!!I(r.droppable,[r,t])&&(t.targetTree=r,!(!I(t.startTree===t.targetTree)&&I(this._Draggable_unfoldTargetNode,[!1,this.treeData])!==this.rootNode.children)&&void 0)},afterMove:e=>{e.startTree.$emit("after-move",e)},beforeDrop:(e,t)=>{const{targetTree:r}=t;if(r.hasHook("ondragend")&&!1===r.executeHook("ondragend",[r,t]))return!1;this.$root.$emit("he-tree-before-drop",t)},afterDrop:(e,t)=>{if(e.pathChanged){const{startTree:t,targetTree:r,startPath:o,dragNode:n}=e;let{targetPath:a}=e;if(!0!==this.cloneWhenDrag){const e=A(o,1),n=t.getNodeByPath(e),l=0===e.length?t.treeData:n.children,i=O(o);if(l.splice(i,1),t===r&&o.length<=a.length){const e=o.slice(0,o.length-1),t=a.slice(0,e.length);if(e.toString()===t.toString()){const t=e.length;o[t]{r.$nextTick(()=>{e()})})}}},t=this._makeTreeDraggable_obj=we(this.$el,e);["indent","triggerClass","triggerBySelf","unfoldWhenDragover","unfoldWhenDragoverDelay","draggingNodePositionMode","cloneWhenDrag","edgeScroll","edgeScrollTriggerMargin","edgeScrollSpeed","edgeScrollTriggerMode","edgeScrollSpecifiedContainerY","edgeScrollSpecifiedContainerY","rtl","preventTextSelection"].forEach(e=>{this.$watch(e,r=>{t.options[e]=r,t.optionsUpdated()})})}};e.Check=fe,e.Draggable=Ce,e.Fold=he,e.Tree=ue,e.cloneTreeData=ie,e.foldAll=function(e){se(e,e=>{e.$folded=!0})},e.getPureTreeData=ce,e.unfoldAll=function(e){se(e,e=>{e.$folded=!1})},e.walkTreeData=se,Object.defineProperty(e,"__esModule",{value:!0})})); diff --git a/package.json b/package.json index 6553c09..f22ca3c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "he-tree-vue", - "version": "2.0.7-beta.3", + "version": "3.1.2", "description": "A draggable sortable nested vue tree component.", "main": "dist/he-tree-vue.cjs.js", "module": "dist/he-tree-vue.esm.js", @@ -38,25 +38,22 @@ }, "devDependencies": { "@vue/babel-preset-app": "^4.2.3", - "@vue/cli-plugin-babel": "^4.1.0", - "@vue/cli-service": "^4.1.0", + "@vue/cli-plugin-babel": "~4.5.0", + "@vue/cli-service": "~4.5.0", + "@vue/compiler-sfc": "^3.0.0", "commitizen": "^4.1.2", "conventional-changelog-cli": "^2.0.34", "cz-conventional-changelog": "^3.2.0", - "pug": "^2.0.4", + "pug": "^3.0.0", "pug-plain-loader": "^1.0.0", "rogo": "^2.0.2", "rollup-plugin-postcss": "^2.4.1", - "rollup-plugin-vue": "^5.1.1", - "sass": "^1.23.7", - "sass-loader": "^8.0.0", + "rollup-plugin-vue": "^6.0.0-beta.10", "standard-version": "^8.0.0", - "vue": "^2.6.10", - "vue-template-compiler": "^2.6.10" + "vue": "^3.0.0" }, "peerDependencies": { - "vue": "^2.6.10", - "vue-property-decorator": "^8.4.0" + "vue": "^3.0.0" }, "license": "MIT", "config": { diff --git a/scripts/build.js b/scripts/build.js index 9cf7121..94fe0a9 100644 --- a/scripts/build.js +++ b/scripts/build.js @@ -14,15 +14,18 @@ const pkg = require("../package.json"); const input = 'src/index.js'; const outDir = 'dist'; const outputName = pkg.name; // the built file name is outDir/outputName.format.js -const moduleName = rogo_1.camelize(pkg.name); // for umd, amd +const moduleName = (0, rogo_1.camelize)(pkg.name); // for umd, amd const extractCssPath = path.resolve(outDir, `${outputName}.css`); +const globals = { + vue: 'Vue', +}; const getBabelConfig = () => ({ // .babelrc presets: [ ['@vue/cli-plugin-babel/preset', { useBuiltIns: false, polyfills: [], - targets: 'defaults', + targets: { browsers: 'defaults' }, // default browsers, coverage 90% }], ], plugins: [ @@ -43,9 +46,9 @@ exports.default = [ // esm { input, - external: (source) => rogo_1.belongsTo(source, Object.keys(pkg.dependencies || {})) || rogo_1.belongsTo(source, Object.keys(pkg.peerDependencies || {})), + external: (source) => (0, rogo_1.belongsTo)(source, Object.keys(pkg.dependencies || {})) || (0, rogo_1.belongsTo)(source, Object.keys(pkg.peerDependencies || {})), plugins: [ - vue({ css: false }), + vue(), postcss({ extract: extractCssPath }), babel(esmBabelConfig), node(), cjs(), json(), @@ -60,9 +63,9 @@ exports.default = [ // cjs { input, - external: (source) => rogo_1.belongsTo(source, Object.keys(pkg.dependencies || {})) || rogo_1.belongsTo(source, Object.keys(pkg.peerDependencies || {})), + external: (source) => (0, rogo_1.belongsTo)(source, Object.keys(pkg.dependencies || {})) || (0, rogo_1.belongsTo)(source, Object.keys(pkg.peerDependencies || {})), plugins: [ - vue({ css: false }), + vue(), postcss({ extract: extractCssPath }), babel(cjsBabelConfig), node(), cjs(), json(), @@ -77,9 +80,9 @@ exports.default = [ // umd { input, - external: (source) => rogo_1.belongsTo(source, Object.keys(pkg.peerDependencies || {})), + external: (source) => (0, rogo_1.belongsTo)(source, Object.keys(pkg.peerDependencies || {})), plugins: [ - vue({ css: false }), + vue(), postcss({ extract: extractCssPath }), babel(umdBabelConfig), node(), cjs(), json(), @@ -90,18 +93,19 @@ exports.default = [ banner: getBanner(pkg), sourcemap: false, name: moduleName, + globals, }, }, // umd min { input, - external: (source) => rogo_1.belongsTo(source, Object.keys(pkg.peerDependencies || {})), + external: (source) => (0, rogo_1.belongsTo)(source, Object.keys(pkg.peerDependencies || {})), plugins: [ - vue({ css: false }), + vue(), postcss({ extract: extractCssPath }), babel(umdBabelConfig), node(), cjs(), json(), - rollup_plugin_terser_1.terser(), + (0, rollup_plugin_terser_1.terser)(), // to minify bundle ], output: { file: path.resolve(outDir, `${outputName}.min.js`), @@ -109,11 +113,12 @@ exports.default = [ banner: getBanner(pkg), sourcemap: false, name: moduleName, + globals, }, }, ]; if (process.argv.includes('--report')) { - rogo_1.report(outDir); + (0, rogo_1.report)(outDir); } function getBanner(pkg) { return ` diff --git a/scripts/build.ts b/scripts/build.ts index c673d99..d85c94d 100644 --- a/scripts/build.ts +++ b/scripts/build.ts @@ -16,6 +16,9 @@ const outDir = 'dist' const outputName = pkg.name // the built file name is outDir/outputName.format.js const moduleName = camelize(pkg.name) // for umd, amd const extractCssPath = path.resolve(outDir, `${outputName}.css`) +const globals = { + vue: 'Vue', +} const getBabelConfig = () => ({ // .babelrc @@ -23,7 +26,7 @@ const getBabelConfig = () => ({ ['@vue/cli-plugin-babel/preset', { useBuiltIns: false, polyfills: [], - targets: 'defaults', // default browsers, coverage 90% + targets: {browsers: 'defaults'}, // default browsers, coverage 90% }], ], plugins: [ @@ -50,7 +53,7 @@ export default [ input, external: (source) => belongsTo(source, Object.keys(pkg.dependencies||{})) || belongsTo(source, Object.keys(pkg.peerDependencies||{})), plugins: [ - vue({css: false}), + vue(), postcss({extract: extractCssPath}), babel(esmBabelConfig), node(), cjs(), json(), @@ -67,7 +70,7 @@ export default [ input, external: (source) => belongsTo(source, Object.keys(pkg.dependencies||{})) || belongsTo(source, Object.keys(pkg.peerDependencies||{})), plugins: [ - vue({css: false}), + vue(), postcss({extract: extractCssPath}), babel(cjsBabelConfig), node(), cjs(), json(), @@ -84,7 +87,7 @@ export default [ input, external: (source) => belongsTo(source, Object.keys(pkg.peerDependencies||{})), plugins: [ - vue({css: false}), + vue(), postcss({extract: extractCssPath}), babel(umdBabelConfig), node(), cjs(), json(), @@ -95,6 +98,7 @@ export default [ banner: getBanner(pkg), sourcemap: false, name: moduleName, + globals, }, }, // umd min @@ -102,7 +106,7 @@ export default [ input, external: (source) => belongsTo(source, Object.keys(pkg.peerDependencies||{})), plugins: [ - vue({css: false}), + vue(), postcss({extract: extractCssPath}), babel(umdBabelConfig), node(), cjs(), json(), @@ -114,6 +118,7 @@ export default [ banner: getBanner(pkg), sourcemap: false, name: moduleName, + globals, }, }, ] diff --git a/src/App.vue b/src/App.vue index 6d5b2e9..1f87106 100644 --- a/src/App.vue +++ b/src/App.vue @@ -10,7 +10,7 @@ InScrollBox.mr CustomTrigger.mr RTLTree.mr - //- DraggableProTree.mr + DraggableProTree.mr diff --git a/src/components/Tree.css b/src/components/Tree.css new file mode 100644 index 0000000..4f26cac --- /dev/null +++ b/src/components/Tree.css @@ -0,0 +1,11 @@ +.he-tree .tree-node{ + border: 1px solid #ccc; + margin-bottom: 5px; + padding: 5px; +} +.he-tree--hidden{ + display: none; +} +.he-tree--rtl{ + direction: rtl; +} \ No newline at end of file diff --git a/src/components/Tree.vue b/src/components/Tree.js similarity index 83% rename from src/components/Tree.vue rename to src/components/Tree.js index 8dd7732..c302828 100644 --- a/src/components/Tree.vue +++ b/src/components/Tree.js @@ -1,9 +1,10 @@ - - - +export default Tree \ No newline at end of file diff --git a/src/examples/Base.vue b/src/examples/Base.vue index 406bf24..5a66b76 100644 --- a/src/examples/Base.vue +++ b/src/examples/Base.vue @@ -4,9 +4,9 @@ div h2 Base .base-trees.flex Tree.base-tree(:value="treeData1" ref="tree1") - //- div(slot-scope="{node, index}") {{node}} + template(v-slot:default="{node, index}") {{node.text}} Tree.base-tree.ml(:value="treeData1" ref="tree2") - div(slot-scope="{node, index, path, tree}") + template(v-slot:default="{node, index, path, tree}") b(v-if="node.children && node.children.length > 0" @click="tree.toggleFold(node, path)") {{node.$folded ? '+' : '-'}}  input(type="checkbox" :checked="node.$checked" @change="tree.toggleCheck(node, path)") |   @@ -14,7 +14,7 @@ div .ml b Fola all after mounted: Tree.base-tree(:value="treeData2" ref="tree3" foldAllAfterMounted) - div(slot-scope="{node, index, path, tree}") + template(v-slot:default="{node, index, path, tree}") b(v-if="node.children && node.children.length > 0" @click="tree.toggleFold(node, path)") {{node.$folded ? '+' : '-'}}  input(type="checkbox" :checked="node.$checked" @change="tree.toggleCheck(node, path)") |   @@ -23,10 +23,10 @@ div - - diff --git a/src/plugins/draggable/draggable.js b/src/plugins/draggable/draggable.js index f34677e..22304a0 100644 --- a/src/plugins/draggable/draggable.js +++ b/src/plugins/draggable/draggable.js @@ -496,7 +496,20 @@ export default function makeTreeDraggable(treeEl, options = {}) { // function isPathChanged() { const {startTree, targetTree, startPath, targetPath} = store - return startTree !== targetTree || startPath.toString() !== targetPath.toString() + if (startTree === targetTree && startPath.length === targetPath.length) { + if (startPath.toString() === targetPath.toString()) { + return false + } else { + // downward same-level move, the end of targetPath is 1 more than real value + // 同级向下移动时, targetPath的末位比真实值大1 + const t = startPath.slice(0) + t[t.length - 1] ++ + if (t.toString() === targetPath.toString()) { + return false + } + } + } + return true } }, }) diff --git a/src/plugins/fold.js b/src/plugins/fold.js index 331479c..e0fd09b 100644 --- a/src/plugins/fold.js +++ b/src/plugins/fold.js @@ -1,14 +1,13 @@ -import Vue from 'vue' import { walkTreeData } from "../utils"; export function foldAll(treeData) { walkTreeData(treeData, childNode => { - Vue.set(childNode, '$folded', true) + childNode.$folded = true }) } export function unfoldAll(treeData) { walkTreeData(treeData, childNode => { - Vue.set(childNode, '$folded', false) + childNode.$folded = false }) } @@ -18,11 +17,13 @@ export default { foldingTransition: {}, foldAllAfterMounted: {type: Boolean}, }, + emits: ['nodeFoldedChanged', 'node-folded-changed'], methods: { fold(node, path) { if (!node.$folded) { - this.$set(node, '$folded', true) + node['$folded'] = true this.$emit('nodeFoldedChanged', node) + this.$emit('node-folded-changed', node) } }, unfold(node, path, opt = {}) { @@ -34,9 +35,8 @@ export default { this.foldAll() } if (node.$folded) { - this.$set(node, '$folded', false) + node['$folded'] = false this.$emit('nodeFoldedChanged', node) - this.$emit('node-folded-changed', node) } }, toggleFold(node, path, opt) { diff --git a/types/_.ts b/types/_.ts new file mode 100644 index 0000000..fcdebcf --- /dev/null +++ b/types/_.ts @@ -0,0 +1,188 @@ +import { defineComponent, VNode, PropType } from 'vue' +import * as dh from "draggable-helper"; + +interface Node { + [propName: string]: any + children?: Node[] + $hidden?: boolean + $branchClass?: any + $nodeBackClass?: any + $nodeClass?: any + $childrenClass?: any + $branchStyle?: any + $nodeBackStyle?: any + $nodeStyle?: any + $childrenStyle?: any + $folded?: boolean + $checked?: boolean + $draggable?(currentPath: Path, tree: Tree, store: Store): IsDraggableOrIsDroppable + $droppable?(currentPath: Path, tree: Tree, store: Store): IsDraggableOrIsDroppable +} +type TreeData = Node[] +type Path = number[] + +interface iteratePathOptions { + reverse: boolean +} +interface Trees { + [treeId: string]: any +} +type overrideSlotDefault_arg0 = {node: Node, index: number, path: Path, tree: Tree} +// the original vnodes if this.overrideSlotDefault is not defined +interface VNodeFunc{ + (): VNode +} +// interface overrideSlotDefault{ +// (info: overrideSlotDefault_arg0, original: VNodeFunc): any +// } +const tree = defineComponent({ + props: { + value: {type: Object as PropType, required: true}, + indent: {type: Number, default: 20}, + rtl: {type: Boolean}, + rootNode: {type: Object as PropType, default: () => ({})}, + }, + computed: { + treeData: { + get(): TreeData { + return {} as TreeData + }, + set(value: TreeData) {}, + }, + }, + data() { + return { + trees: {} as Trees, + treeClass: '', + treeId: '', + // hooks. in data not in props, so you only can set it by extend or mixins, and override it + overrideSlotDefault: {} as VNodeFunc, + blockHeader: {} as VNodeFunc, + blockFooter: {} as VNodeFunc, + } + }, + methods: { + iteratePath(path: Path, opt?: iteratePathOptions){ return {} as IterableIterator<[Path, Node]> }, + getTreeVmByTreeEl(treeEl: HTMLElement) {return {} as any}, + getAllNodesByPath(path: Path) {return {} as Node}, + getNodeByPath(path: Path) {return {} as Node}, + getPathByBranchEl(branchEl: HTMLElement) {return {} as Path}, + getBranchElByPath(path: Path) {return {} as HTMLElement}, + getNodeParentByPath(path: Path) {return {} as Node}, + removeNodeByPath(path: Path) {return {} as Node}, + walkTreeData(callback: walkTreeDataCallback, options?: {reverse: boolean}) {}, + cloneTreeData(options?: cloneTreeDataOptions) {return {} as TreeData}, + // remove key which starts with '$ + getPureTreeData(){return {} as TreeData}, + }, +}) +export type Tree = typeof tree + +interface unfoldOptions { + foldOthers: boolean +} +// plugins ======================== +const fold = defineComponent({ + props: { + foldingTransitionName: {type: String}, + foldingTransition: {type: Object as PropType}, // transition component + foldAllAfterMounted: {type: Boolean}, + }, + methods: { + fold(node: Node, path: Path){}, + unfold(node: Node, path: Path, opt?:unfoldOptions){}, + toggleFold(node: Node, path: Path, opt?:unfoldOptions){}, + foldAll(){}, + unfoldAll(){}, + }, +}) +export type Fold = typeof fold + +export interface foldAll { + (treeData: TreeData): void +} + +export interface unfoldAll { + (treeData: TreeData): void +} + +const check = defineComponent({ + methods: { + check(node: Node, path: Path){}, + uncheck(node: Node, path: Path){}, + toggleCheck(node: Node, path: Path){}, + } +}) +export type Check = typeof check +type IsDraggableOrIsDroppable = boolean | undefined +// darg info store +interface Store extends dh.Store{ + startTreeEl?: HTMLElement + startTree?: any + startPath?: Path + dragBranchEl?: HTMLElement + dragNode?: Node + targetTreeEl?: HTMLElement + targetTree?: any + targetPath?: Path + targetPathNotEqualToStartPath?: boolean + placeholder?: HTMLElement + pathChangePrevented?: boolean + pathChanged?: boolean +} +interface prop_draggable_droppable{ + (tree: Tree, store: Store): IsDraggableOrIsDroppable +} +interface prop_eachDraggable_eachDroppable{ + (currentPath: Path, tree: Tree, store: Store): IsDraggableOrIsDroppable +} +interface prop_ondragstart_ondragend{ + // return false to prevent + (tree: Tree, store: Store): false|any +} +const draggable = defineComponent({ + props: { + triggerClass: {type: String, default: 'tree-node'}, + triggerBySelf: {type: Boolean}, + draggable: {type: Object as PropType, default: true}, + droppable: {type: Object as PropType, default: true}, + eachDraggable: {type: Object as PropType}, + eachDroppable: {type: Object as PropType}, + ondragstart: {type: Object as PropType}, + ondragend: {type: Object as PropType}, + unfoldWhenDragover: {type: Boolean, default: true}, + unfoldWhenDragoverDelay: {type: Number, default: 30}, + draggingNodePositionMode: {type: Object as PropType<'top_left_corner'|'mouse'>, default: 'top_left_corner'}, + edgeScroll: {type: Boolean}, + edgeScrollTriggerMargin: {type: Number, default: 50}, + edgeScrollSpeed: {type: Number, default: 0.35}, + edgeScrollTriggerMode: {type: Object as PropType, default: 'top_left_corner'}, + edgeScrollSpecifiedContainerX: {type: Object as PropType}, + edgeScrollSpecifiedContainerY: {type: Object as PropType}, + data() { + return { + treesStore: {} as {store: Store}, + } + }, + } +}) +export type Draggable = typeof draggable + +// utils ====================== +interface cloneTreeDataOptions{ + afterNodeCreated(newNode: object, info: {oldNode: object, index: number, parent: object, path: Path}): void +} +export function cloneTreeData(treeData: TreeData, options?: cloneTreeDataOptions){ + return {} as TreeData +} + +type walkTreeDataCallbackReturn = void|false|'skip children'|'skip siblings' +interface walkTreeDataCallback { + (node: Node, index: number, parent: object|null, path:number[]): walkTreeDataCallbackReturn +} +export function walkTreeData(treeData: TreeData, callback: walkTreeDataCallback, options?: {reverse: boolean}){} + +// remove key which starts with '$ +export function getPureTreeData(treeData: TreeData){ + return {} as TreeData +} \ No newline at end of file diff --git a/types/index.d.ts b/types/index.d.ts index af17655..a48c6fd 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -1,188 +1 @@ -import { Component, Vue, Prop, Emit } from 'vue-property-decorator' -import {VNode} from 'vue' -import * as dh from "draggable-helper"; - -interface Node { - [propName: string]: any - children?: Node[] - $hidden?: boolean - $branchClass?: any - $nodeBackClass?: any - $nodeClass?: any - $childrenClass?: any - $branchStyle?: any - $nodeBackStyle?: any - $nodeStyle?: any - $childrenStyle?: any - $folded?: boolean - $checked?: boolean - $draggable?(currentPath: Path, tree: Tree, store: Store): IsDraggableOrIsDroppable - $droppable?(currentPath: Path, tree: Tree, store: Store): IsDraggableOrIsDroppable -} -type TreeData = Node[] -type Path = number[] - -interface iteratePathOptions { - reverse: boolean -} -interface Trees { - [treeId: string]: Vue -} -type overrideSlotDefault_arg0 = {node: Node, index: number, path: Path, tree: Tree} -// the original vnodes if this.overrideSlotDefault is not defined -interface VNodeFunc{ - (): VNode -} -// interface overrideSlotDefault{ -// (info: overrideSlotDefault_arg0, original: VNodeFunc): any -// } -export class Tree extends Vue{ - @Prop() - value: TreeData - get treeData(): TreeData // alias of this.value - set treeData(value: TreeData) // emit 'input' event - // Declared as computed property setter - @Prop({ default: 20 }) - indent: number - @Prop() - rtl: boolean // direction=rtl - @Prop({ default: {} }) - rootNode: Node - // data - trees: Trees - treeClass: string - treeId: string - // methods - iteratePath(path: Path, opt?: iteratePathOptions): IterableIterator<[Path, Node]> - getTreeVmByTreeEl(treeEl: HTMLElement): Vue - getAllNodesByPath(path: Path): Node[] - getNodeByPath(path: Path): Node - getPathByBranchEl(branchEl: HTMLElement): Path - getBranchElByPath(path: Path): HTMLElement - getBranchElByPath(path: Path): HTMLElement - getPathByBranchEl(branchEl: HTMLElement): Node - getNodeParentByPath(path: Path): Node - removeNodeByPath(path: Path): Node - walkTreeData(callback: walkTreeDataCallback, options?: {reverse: boolean}): void - cloneTreeData(options?: cloneTreeDataOptions): TreeData - // remove key which starts with '$ - getPureTreeData(): TreeData - // hooks. in data not in props, so you only can set it by extend or mixins, and override it - // overrideSlotDefault?: overrideSlotDefault - // blockHeader?: VNodeFunc - // blockFooter?: VNodeFunc -} - -interface unfoldOptions { - foldOthers: boolean -} -// plugins ======================== -export class Fold extends Vue{ - @Prop() - foldingTransitionName: string - @Prop() - foldingTransition: Vue - @Prop() - foldAllAfterMounted: boolean - // methods - fold(node: Node, path: Path): void - unfold(node: Node, path: Path, opt?:unfoldOptions): void - toggleFold(node: Node, path: Path, opt?:unfoldOptions): void - foldAll(): void - unfoldAll(): void -} - -export interface foldAll { - (treeData: TreeData): void -} - -export interface unfoldAll { - (treeData: TreeData): void -} - -export class Check extends Vue{ - // methods - check(node: Node, path: Path): void - uncheck(node: Node, path: Path): void - toggleCheck(node: Node, path: Path): void -} -type IsDraggableOrIsDroppable = boolean | undefined -// darg info store -interface Store extends dh.Store{ - startTreeEl?: HTMLElement - startTree?: Vue - startPath?: Path - dragBranchEl?: HTMLElement - dragNode?: Node - targetTreeEl?: HTMLElement - targetTree?: Vue - targetPath?: Path - targetPathNotEqualToStartPath?: boolean - placeholder?: HTMLElement - pathChangePrevented?: boolean - pathChanged?: boolean -} -interface prop_draggable_droppable{ - (tree: Tree, store: Store): IsDraggableOrIsDroppable -} -interface prop_eachDraggable_eachDroppable{ - (currentPath: Path, tree: Tree, store: Store): IsDraggableOrIsDroppable -} -interface prop_ondragstart_ondragend{ - // return false to prevent - (tree: Tree, store: Store): false|any -} -export class Draggable extends Vue{ - @Prop({default: 'tree-node'}) - triggerClass: string - @Prop() - triggerBySelf: boolean - @Prop({default: true}) - draggable: boolean | prop_draggable_droppable - @Prop({default: true}) - droppable: boolean | prop_draggable_droppable - @Prop() - eachDraggable: prop_eachDraggable_eachDroppable - @Prop() - eachDroppable: prop_eachDraggable_eachDroppable - @Prop() - ondragstart: prop_ondragstart_ondragend - @Prop() - ondragend: prop_ondragstart_ondragend - @Prop({default: true}) - unfoldWhenDragover: boolean - @Prop({default: 30}) - unfoldWhenDragoverDelay: number - @Prop({default: 'top_left_corner'}) - draggingNodePositionMode: 'top_left_corner'|'mouse' - @Prop() - edgeScroll: boolean - @Prop({default: 50}) - edgeScrollTriggerMargin: number - @Prop({default: 0.35}) - edgeScrollSpeed: number - @Prop({default: 'top_left_corner'}) - edgeScrollTriggerMode: dh.Options['edgeScrollTriggerMode'] - @Prop() - edgeScrollSpecifiedContainerX: dh.Options['edgeScrollSpecifiedContainerX'] - @Prop() - edgeScrollSpecifiedContainerY: dh.Options['edgeScrollSpecifiedContainerY'] - // data - treesStore: {store: Store} // just for get the darg info store - // methods -} - -// utils ====================== -interface cloneTreeDataOptions{ - afterNodeCreated(newNode: object, info: {oldNode: object, index: number, parent: object, path: Path}): void -} -export function cloneTreeData(treeData: TreeData, options?: cloneTreeDataOptions): TreeData - -type walkTreeDataCallbackReturn = void|false|'skip children'|'skip siblings' -interface walkTreeDataCallback { - (node: Node, index: number, parent: object|null, path:number[]): walkTreeDataCallbackReturn -} -export function walkTreeData(treeData: TreeData, callback: walkTreeDataCallback, options?: {reverse: boolean}): void - -// remove key which starts with '$ -export function getPureTreeData(treeData: TreeData): TreeData \ No newline at end of file +export * from './_' \ No newline at end of file