diff --git a/demo/angular/index.ts b/demo/angular/index.ts index 6d1c5be..04944c8 100644 --- 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 index fc6ed78..ddb35de 100644 --- 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 index 86bfa5f..5e2e3c9 100644 --- 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 index 812a180..5d575e9 100644 --- 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); }, }, });