From 1d644dc0a3e55778aae6d656d2b412d55618daff Mon Sep 17 00:00:00 2001 From: Yizhao Chen Date: Mon, 8 Oct 2018 11:50:25 -0700 Subject: [PATCH 1/2] added english translations to comments --- src/DragNode.vue | 36 ++++++++++++++--------------- src/VueDragTree.vue | 6 ++--- src/util.js | 56 ++++++++++++++++++++++----------------------- 3 files changed, 49 insertions(+), 49 deletions(-) diff --git a/src/DragNode.vue b/src/DragNode.vue index 77c15e3..0540abd 100644 --- a/src/DragNode.vue +++ b/src/DragNode.vue @@ -17,8 +17,8 @@ let id = 1000 let fromData = null let toData = null -let nodeClicked = undefined // Attention: 递归的所有组件共享同一个＂顶级作用域＂（这个词或许不太正确，但就这个意思）．即：共享上面这几个let变量．这为实现当前节点的高亮提供了基础． -let rootTree = null // vue-drag-tree组件引用 +let nodeClicked = undefined // Attention: 递归的所有组件共享同一个＂顶级作用域＂（这个词或许不太正确，但就这个意思）．即：共享上面这几个let变量．这为实现当前节点的高亮提供了基础．** Recursive components share a comon 'highest-level scope' (not the most accurate terminilogy, but basically what it means). As in: share the few 'left' variables above, serves as highlight for current node. +let rootTree = null // vue-drag-tree组件引用 ** component reference import { findRoot, exchangeData } from './util' export default { @@ -26,8 +26,8 @@ export default { data() { return { open: false, - isClicked: false, // 当前节点被点击 - isHover: false, // 当前节点被hvoer + isClicked: false, // 当前节点被点击 ** clicking current node + isHover: false, // 当前节点被hvoer ** hovering current node styleObj: { opacity: 1 } @@ -44,7 +44,7 @@ export default { default: () => true }, defaultText: { - // 填加节点时显示的默认文本． + // 填加节点时显示的默认文本．** display default text for node type: String, default: '新增节点' }, @@ -69,19 +69,19 @@ export default { if (this.isFolder) { this.open = !this.open } - // 调用vue-drag-tree的父组件中的方法,以传递出当前被点击的节点的id值 - //　API: 对外开放的当前被点击节点的信息 + // 调用vue-drag-tree的父组件中的方法,以传递出当前被点击的节点的id值 ** method for calling vue-drag-tree's parent component to transfer the id value of the node that was clicked + //　API: 对外开放的当前被点击节点的信息 ** exposes info on clicked node rootTree.emitCurNodeClicked(this.model, this) - // 纪录节点被点击的状态 + // 纪录节点被点击的状态 ** record node click status this.isClicked = !this.isClicked - // 用户需要节点高亮 - // 第一次点击当前节点．当前节点高亮，遍历重置其他节点的样式 + // 用户需要节点高亮 ** highlight the node the user needs + // 第一次点击当前节点．当前节点高亮，遍历重置其他节点的样式 ** first time clicking current node, highlights it, traverse and resets other node's style if (nodeClicked != this.model.id) { let treeParent = rootTree.$parent - // 遍历重置所有树组件的高亮样式 + // 遍历重置所有树组件的高亮样式 ** traverse and resets other node's highlighting style let nodeStack = [treeParent.$children[0]] while (nodeStack.length != 0) { let item = nodeStack.shift() @@ -90,16 +90,16 @@ export default { nodeStack = nodeStack.concat(item.$children) } } - // 然后把当前节点的样式设置为高亮 + // 然后把当前节点的样式设置为高亮 ** then highlights current clicked node this.isClicked = true - // 设置节点为 当前节点 + // 设置节点为 当前节点 ** sets node to current node nodeClicked = this.model.id } }, changeType() { - // 用户需要高亮-->才纪录当前被点击节点 + // 用户需要高亮-->才纪录当前被点击节点 ** user needs highlight --> then record currently clicked node if (this.currentHighlight) { nodeClicked = this.model.id } @@ -123,12 +123,12 @@ export default { }) }, removeChild(id) { - // 获取父组件的model.children + // 获取父组件的model.children ** acquire parent's model.children let parent_model_children = this.$parent.model.children - // 在父组件model.children里删除 + // 在父组件model.children里删除 ** delete from parent's model.children for (let index in parent_model_children) { - // 找到该删的id + // 找到该删的id ** find the id that needs to be deleted if (parent_model_children[index].id == id) { parent_model_children = parent_model_children.splice(index, 1) break @@ -162,7 +162,7 @@ export default { drop(e) { e.preventDefault() this.styleObj.opacity = 1 - // 如果判断当前节点不允许被drop，return; + // 如果判断当前节点不允许被drop，return; ** if decided that current node cannot be dropped, return; if (!this.allowDrop(this.model, this)) { return } diff --git a/src/VueDragTree.vue b/src/VueDragTree.vue index df747a9..75245ff 100755 --- a/src/VueDragTree.vue +++ b/src/VueDragTree.vue @@ -21,7 +21,7 @@ export default { default: () => true }, defaultText: { - // 填加节点时显示的默认文本． + // 填加节点时显示的默认文本．** add default text for node type: String, default: '新增节点' }, @@ -41,12 +41,12 @@ export default { }, // setter set(newValue) { - // 移除原属性内部所有的值，为了要一个“干净”的引用对象。 + // 移除原属性内部所有的值，为了要一个“干净”的引用对象。** remove all values in properties, because a clean reference target is needed let length = this.data.length for (let i = 0; i < length; i++) { this.data.shift(i) } - // 然后利用对象深拷贝（返回target的引用），因此控制台不会报错～ + // 然后利用对象深拷贝（返回target的引用），因此控制台不会报错～ ** then use deep copy of target (return target's reference). so console won't display error this.data = Object.assign(this.data, newValue) } } diff --git a/src/util.js b/src/util.js index de053bd..6fad0b5 100644 --- a/src/util.js +++ b/src/util.js @@ -1,12 +1,12 @@ -// 返回最顶层那个vue-drag-tree.vue组件 +// 返回最顶层那个vue-drag-tree.vue组件 ** returns highest level vue-drag-tree.vue component const findRoot = which => { let ok = false let that = which while (!ok) { - // 根据组件name来判断 + // 根据组件name来判断 ** decide based on the name of the component if (that.$options._componentTag === 'vue-drag-tree') { ok = true - // 交换两者的数据 + // 交换两者的数据 ** exchange data between the two break } that = that.$parent @@ -15,23 +15,23 @@ const findRoot = which => { } /** - * 是否两节点为包含关系 - * 即：直系父与子的关系 + * 是否两节点为包含关系 ** whether or not two nodes are related + * 即：直系父与子的关系 ** as in: direct parent-child relation */ const hasInclude = (from, to) => { return from.$parent._uid === to._uid } /** - * 两节点为直线关系？ - * 即：from为to的某个子集，但又不是父子关系？ + * 两节点为直线关系？** two nodes have direct relationship + * 即：from为to的某个子集，但又不是父子关系？ ** as in: from is a subset of two, but not parent-child relation */ const isLinealRelation = (from, to) => { let parent = from.$parent - // 判断完成，不管是什么结果 + // 判断完成，不管是什么结果 ** decision completed, regardless of result let ok = false - // 是直线关系？ + // 是直线关系？** direct relationship? let status = false while (!ok) { if (parent._uid === to._uid) { @@ -43,7 +43,7 @@ const isLinealRelation = (from, to) => { !parent.$options._componentTag || parent.$options._componentTag === 'vue-drag-tree' ) { - // 如果检测到这里，就该结束了。 + // 如果检测到这里，就该结束了。** if detection got to here, then it should end ok = true break } @@ -54,63 +54,63 @@ const isLinealRelation = (from, to) => { } /** - * 交换两节点数据 - * @param rootCom 根组件（vue-drag-tree.vue） - * @param from 被拖拽节点组件Vnode数据 - * @param to 拖拽节点组件Vnode数据 + * 交换两节点数据 ** exchange data between nodes + * @param rootCom 根组件（vue-drag-tree.vue）** root component + * @param from 被拖拽节点组件Vnode数据 ** Vnode data of the node component being dragged and dropped + * @param to 拖拽节点组件Vnode数据 ** Vnode data of the node component dragged and dropped to */ const exchangeData = (rootCom, from, to) => { - // 如果拖动节点和被拖动节点相同，return; + // 如果拖动节点和被拖动节点相同，return; ** if the node is dragged from and dropped to the same place, return if (from._uid === to._uid) { return } const newFrom = Object.assign({}, from.model) - // 如果两者是父子关系。将from节点，移动到to节点一级且放到其后一位 + // 如果两者是父子关系。将from节点，移动到to节点一级且放到其后一位 ** if two are parent-child relationship. take 'from' node, move to 'to' node's first level and after it if (hasInclude(from, to)) { - // 如果“父”是最上层节点（节点数组中的最外层数据） + // 如果“父”是最上层节点（节点数组中的最外层数据）** if parent is highest node (node data set's furthest out layer of data) const tempParent = to.$parent const toModel = to.model if (tempParent.$options._componentTag === 'vue-drag-tree') { - // 将from节点添加到 根数组中 + // 将from节点添加到 根数组中 ** add 'from' node to root data set tempParent.newData.push(newFrom) - // 移除to中from节点信息； + // 移除to中from节点信息；** remove the 'from' node info from 'to' toModel.children = toModel.children.filter(item => item.id !== newFrom.id) return } const toParentModel = tempParent.model - // 先移除to中from节点信息； + // 先移除to中from节点信息；** first remove 'from' node info from 'to' toModel.children = toModel.children.filter(item => item.id !== newFrom.id) - // 将 from节点 添加到 to 一级别中。 + // 将 from节点 添加到 to 一级别中。** add 'from' node to 'to' node's lower level toParentModel.children = toParentModel.children.concat([newFrom]) return } - // 如果是 线性 关系，但非父子 + // 如果是 线性 关系，但非父子 ** if direct relationship, but not parent-child if (isLinealRelation(from, to)) { const fromParentModel = from.$parent.model const toModel = to.model - // 先将from从其父节点信息移除； + // 先将from从其父节点信息移除；** remove 'from' from its parent node fromParentModel.children = fromParentModel.children.filter( item => item.id !== newFrom.id ) - // 再from节点添加到to节点中最后一位。 + // 再from节点添加到to节点中最后一位。** then add 'from' node to last position of 'to' node toModel.children = toModel.children.concat([newFrom]) return } - // 两节点（无线性关系），把from节点扔到to节点中。 + // 两节点（无线性关系），把from节点扔到to节点中。 ** two nodes not directly related. add 'from' node to 'to' node const fromParentModel = from.$parent.model const toModel = to.model - // 先将from从其父节点信息移除； + // 先将from从其父节点信息移除；** first remove 'from' from its parent node if (from.$parent.$options._componentTag === 'vue-drag-tree') { /** - * 找到vue-drag-tree的父组件（数据源头），在这里修改数据。 + * 找到vue-drag-tree的父组件（数据源头），在这里修改数据。** find vue-drag-tree's parent component(data source), edit data here. */ from.$parent.newData = from.$parent.newData.filter( item => item.id !== newFrom.id @@ -121,7 +121,7 @@ const exchangeData = (rootCom, from, to) => { ) } - // 再from节点添加到to节点中最后一位。 + // 再from节点添加到to节点中最后一位。** then add 'from' to 'to' node's last position if (!toModel.children) { toModel.children = [newFrom] } else { From e2ab516e7abab853dfc011f3ec47cb25f7dcdcd9 Mon Sep 17 00:00:00 2001 From: Dragos Manarcescu Date: Sun, 13 Oct 2019 20:26:33 +0300 Subject: [PATCH 2/2] Preserve the state of the tree(open/closed nodes) --- src/DragNode.vue | 27 ++++++++++++++++++++------- src/VueDragTree.vue | 2 +- 2 files changed, 21 insertions(+), 8 deletions(-) diff --git a/src/DragNode.vue b/src/DragNode.vue index 0540abd..3c3981d 100644 --- a/src/DragNode.vue +++ b/src/DragNode.vue @@ -6,9 +6,9 @@ {{model.name}} -
- - +
+ +
@@ -25,15 +25,20 @@ export default { name: 'DragNode', data() { return { - open: false, + // open: false, isClicked: false, // 当前节点被点击 ** clicking current node isHover: false, // 当前节点被hvoer ** hovering current node styleObj: { opacity: 1 - } + }, + willOpen: this.open } }, props: { + open: { + type: Boolean, + default: false + }, model: Object, allowDrag: { type: Function, @@ -62,12 +67,20 @@ export default { }, isDraggable() { return this.allowDrag(this.model, this) + }, + computedOpen: { + get() { + return this.willOpen + }, + set(newValue) { + this.willOpen = newValue + } } }, methods: { toggle() { if (this.isFolder) { - this.open = !this.open + this.willOpen = !this.willOpen } // 调用vue-drag-tree的父组件中的方法,以传递出当前被点击的节点的id值 ** method for calling vue-drag-tree's parent component to transfer the id value of the node that was clicked //　API: 对外开放的当前被点击节点的信息 ** exposes info on clicked node @@ -106,7 +119,7 @@ export default { if (!this.isFolder) { this.$set(this.model, 'children', []) this.addChild() - this.open = true + this.willOpen = true this.isClicked = true } }, diff --git a/src/VueDragTree.vue b/src/VueDragTree.vue index 75245ff..f943a59 100755 --- a/src/VueDragTree.vue +++ b/src/VueDragTree.vue @@ -1,7 +1,7 @@