Skip to content
New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Nest 380 #29

Closed
wants to merge 4 commits into from
Closed

Nest 380 #29

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1d644dc
added english translations to comments
yizhaochen Oct 8, 2018
d67cc4f
Merge pull request #1 from SWARMengineering/translate-comments
yizhaochen Oct 8, 2018
e2ab516
Preserve the state of the tree(open/closed nodes)
manadragos Oct 13, 2019
76d4da9
Merge branch 'master' into NEST-380
manadragos Oct 13, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
91 changes: 56 additions & 35 deletions src/DragNode.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,9 @@
</slot>
</div>
</div>
<div class='treeMargin' v-show="open" v-if="isFolder">
<drag-node v-for="item2 in model.children" :allowDrag='allowDrag' :allowDrop='allowDrop' :depth='increaseDepth' :model="item2" :key='item2.id' :defaultText='defaultText' :disableDBClick='disableDBClick'>

<div class='treeMargin' v-show="computedOpen" v-if="isFolder">
<drag-node :open="item2.open" v-for="item2 in model.children" :allowDrag='allowDrag' :allowDrop='allowDrop' :depth='increaseDepth' :model="item2" :key='item2.id' :defaultText='defaultText'>
</drag-node>
</div>
</div>
Expand All @@ -27,15 +28,20 @@ export default {
name: "DragNode",
data() {
return {
open: false,
isClicked: false, // 当前节点被点击
isHover: false, // 当前节点被hvoer
// 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,
Expand All @@ -46,7 +52,7 @@ export default {
default: () => true
},
defaultText: {
// 填加节点时显示的默认文本．
// 填加节点时显示的默认文本．** display default text for node
type: String,
default: "New Node"
},
Expand All @@ -67,40 +73,51 @@ export default {
return this.depth + 1;
},
isDraggable() {
return this.allowDrag(this.model, this);
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值
//　API: 对外开放的当前被点击节点的信息
rootTree.emitCurNodeClicked(this.model, this);
// 调用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)

// 纪录节点被点击的状态
this.isClicked = !this.isClicked;
// 纪录节点被点击的状态 ** 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;

// 遍历重置所有树组件的高亮样式
let nodeStack = [treeParent.$children[0]];
while (nodeStack.length != 0) {
// 遍历重置所有树组件的高亮样式 ** traverse and resets other node's highlighting style
let nodeStack = [treeParent.$children[0]]

while (nodeStack.length != 0) {
let item = nodeStack.shift();
item.isClicked = false;
if (item.$children && item.$children.length > 0) {
nodeStack = nodeStack.concat(item.$children);
}
}
// 然后把当前节点的样式设置为高亮
this.isClicked = true;

// 设置节点为 当前节点
nodeClicked = this.model.id;
// 然后把当前节点的样式设置为高亮 ** then highlights current clicked node
this.isClicked = true

// 设置节点为 当前节点 ** sets node to current node
nodeClicked = this.model.id
}
},

Expand All @@ -114,10 +131,11 @@ export default {
nodeClicked = this.model.id;
}
if (!this.isFolder) {
this.$set(this.model, "children", []);
this.addChild();
this.open = true;
this.isClicked = true;

this.$set(this.model, 'children', [])
this.addChild()
this.willOpen = true
this.isClicked = true
}
},
mouseOver(e) {
Expand All @@ -133,12 +151,13 @@ export default {
});
},
removeChild(id) {
// 获取父组件的model.children
let parent_model_children = this.$parent.model.children;

// 在父组件model.children里删除
// 获取父组件的model.children ** acquire parent's model.children
let parent_model_children = this.$parent.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;
Expand Down Expand Up @@ -170,9 +189,11 @@ export default {
rootTree.emitDragLeave(this.model, this, e);
},
drop(e) {
e.preventDefault();
this.styleObj.opacity = 1;
// 如果判断当前节点不允许被drop，return;

e.preventDefault()
this.styleObj.opacity = 1
// 如果判断当前节点不允许被drop，return; ** if decided that current node cannot be dropped, return;

if (!this.allowDrop(this.model, this)) {
return;
}
Expand Down
15 changes: 9 additions & 6 deletions src/VueDragTree.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<div>
<template v-for='(item,index) in newData'>
<drag-node :model='item' :allowDrag='allowDrag' :allowDrop='allowDrop' :depth='increaseDepth' :defaultText='defaultText' :disableDBClick='disableDBClick' :key='index' v-slot='slotProps'>
<drag-node :open='item.open' :model='item' :allowDrag='allowDrag' :allowDrop='allowDrop' :depth='increaseDepth' :defaultText='defaultText' :disableDBClick='disableDBClick' :key='index' v-slot='slotProps'>
<slot :nodeName="slotProps.nodeName" :isClicked='slotProps.isClicked'></slot>
</drag-node>
</template>
Expand All @@ -23,7 +23,7 @@ export default {
default: () => true
},
defaultText: {
// 填加节点时显示的默认文本．
// 填加节点时显示的默认文本．** add default text for node
type: String,
default: "New Node"
},
Expand All @@ -48,13 +48,16 @@ export default {
},
// setter
set(newValue) {
// 移除原属性内部所有的值，为了要一个“干净”的引用对象。
let length = this.data.length;

// 移除原属性内部所有的值，为了要一个“干净”的引用对象。** 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的引用），因此控制台不会报错～
this.data = Object.assign(this.data, newValue);

// 然后利用对象深拷贝（返回target的引用），因此控制台不会报错～ ** then use deep copy of target (return target's reference). so console won't display error
this.data = Object.assign(this.data, newValue)
}
}
},
Expand Down
56 changes: 28 additions & 28 deletions src/util.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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) {
Expand All @@ -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
}
Expand All @@ -54,13 +54,13 @@ 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
}
Expand All @@ -72,50 +72,50 @@ const exchangeData = (rootCom, from, to) => {

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
Expand All @@ -126,7 +126,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 {
Expand Down