use move rather than copy as the demo of draggable

plantain-00 · May 11, 2017 · ca36e65 · ca36e65
1 parent b7d21b7
commit ca36e65
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 13 deletions.
diff --git a/demo/angular/index.ts b/demo/angular/index.ts
@@ -9,7 +9,7 @@ enableProdMode();
 
 import { Component } from "@angular/core";
 
-import { data, clearSelectionOfTree, toggle, setSelectionOfTree, setParentsSelection, copy } from "../common";
+import { data, clearSelectionOfTree, toggle, setSelectionOfTree, setParentsSelection, move } from "../common";
 import * as common from "../../dist/common";
 
 @Component({
@@ -90,7 +90,7 @@ export class MainComponent {
         toggle(eventData);
     }
     drop3(dropData: common.DropData) {
-        copy(dropData, this.data3);
+        move(dropData, this.data3);
     }
     ontoggle4(eventData: common.EventData) {
         toggle(eventData);
@@ -109,7 +109,7 @@ export class MainComponent {
         setParentsSelection(this.data7, eventData.path);
     }
     drop7(dropData: common.DropData) {
-        copy(dropData, this.data7);
+        move(dropData, this.data7);
     }
 }
 

diff --git a/demo/common.ts b/demo/common.ts
@@ -189,13 +189,53 @@ export function copy(dropData: DropData, treeData: TreeData[]) {
         dropData.targetData.state.opened = true;
     } else {
         const startIndex = dropData.targetPath[dropData.targetPath.length - 1] + (dropData.targetData.state.dropPosition === DropPosition.up ? 0 : 1);
-        const parent = getNodeFromPath(treeData, dropData.targetPath.slice(0, dropData.targetPath.length - 1));
-        if (parent && parent.children) {
-            parent.children.splice(startIndex, 0, JSON.parse(JSON.stringify(dropData.sourceData)));
+        const targetParent = getNodeFromPath(treeData, dropData.targetPath.slice(0, dropData.targetPath.length - 1));
+        const targetChildren = targetParent && targetParent.children ? targetParent.children : treeData;
+        targetChildren.splice(startIndex, 0, JSON.parse(JSON.stringify(dropData.sourceData)));
+    }
+}
+
+function targetIsOrIsChildrenOfSource(dropData: DropData) {
+    if (dropData.targetPath.length < dropData.sourcePath.length) {
+        return false;
+    }
+    for (let i = 0; i < dropData.sourcePath.length; i++) {
+        if (dropData.targetPath[i] !== dropData.sourcePath[i]) {
+            return false;
+        }
+    }
+    return true;
+}
+
+export function move(dropData: DropData, treeData: TreeData[]) {
+    if (targetIsOrIsChildrenOfSource(dropData)) {
+        alert("can not move to itself or its children");
+        return;
+    }
+
+    const sourceParent = getNodeFromPath(treeData, dropData.sourcePath.slice(0, dropData.sourcePath.length - 1));
+    const sourceChildren = sourceParent && sourceParent.children ? sourceParent.children : treeData;
+    let sourceIndex = dropData.sourcePath[dropData.sourcePath.length - 1];
+
+    if (dropData.targetData.state.dropPosition === DropPosition.inside) {
+        if (dropData.targetData.children) {
+            dropData.targetData.children.push(dropData.sourceData);
         } else {
-            treeData.splice(startIndex, 0, JSON.parse(JSON.stringify(dropData.sourceData)));
+            dropData.targetData.children = [dropData.sourceData];
+        }
+        dropData.targetData.state.opened = true;
+    } else {
+        const startIndex = dropData.targetPath[dropData.targetPath.length - 1] + (dropData.targetData.state.dropPosition === DropPosition.up ? 0 : 1);
+        const targetParent = getNodeFromPath(treeData, dropData.targetPath.slice(0, dropData.targetPath.length - 1));
+        const targetChildren = targetParent && targetParent.children ? targetParent.children : treeData;
+        targetChildren.splice(startIndex, 0, dropData.sourceData);
+
+        if (targetChildren === sourceChildren && startIndex < sourceIndex) {
+            sourceIndex++;
         }
     }
+
+    sourceChildren.splice(sourceIndex, 1);
 }
 
 type Data = {

diff --git a/demo/react/index.tsx b/demo/react/index.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import { Tree } from "../../dist/react";
-import { data, clearSelectionOfTree, toggle, setSelectionOfTree, setParentsSelection, copy } from "../common";
+import { data, clearSelectionOfTree, toggle, setSelectionOfTree, setParentsSelection, move } from "../common";
 import * as common from "../../dist/common";
 
 class Main extends React.Component<{}, { data: common.TreeData[], selectedId: number | null, data2: common.TreeData[] }> {
@@ -101,7 +101,7 @@ class Main extends React.Component<{}, { data: common.TreeData[], selectedId: nu
         });
     }
     drop3(dropData: common.DropData) {
-        copy(dropData, this.data3);
+        move(dropData, this.data3);
     }
     toggle4(eventData: common.EventData) {
         toggle(eventData, () => {
@@ -129,7 +129,7 @@ class Main extends React.Component<{}, { data: common.TreeData[], selectedId: nu
         this.setState({ data: this.data7 });
     }
     drop7(dropData: common.DropData) {
-        copy(dropData, this.data7);
+        move(dropData, this.data7);
     }
 }
 

diff --git a/demo/vue/index.ts b/demo/vue/index.ts
@@ -1,6 +1,6 @@
 import * as Vue from "vue";
 import "../../dist/vue";
-import { data, clearSelectionOfTree, toggle, setSelectionOfTree, setParentsSelection, copy } from "../common";
+import { data, clearSelectionOfTree, toggle, setSelectionOfTree, setParentsSelection, move } from "../common";
 import * as common from "../../dist/common";
 
 /* tslint:disable:no-unused-expression */
@@ -42,7 +42,7 @@ new Vue({
             toggle(eventData);
         },
         drop3(this: This, dropData: common.DropData) {
-            copy(dropData, this.data3);
+            move(dropData, this.data3);
         },
         toggle4(eventData: common.EventData) {
             toggle(eventData);
@@ -61,7 +61,7 @@ new Vue({
             setParentsSelection(this.data7, eventData.path);
         },
         drop7(this: This, dropData: common.DropData) {
-            copy(dropData, this.data7);
+            move(dropData, this.data7);
         },
     },
 });