fix: fix helper's methods

packages/helper/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@moveable/helper",
-    "version": "0.0.4",
+    "version": "0.1.0",
     "description": "Helper for demo of Moveable",
     "main": "./dist/helper.cjs.js",
     "module": "./dist/helper.esm.js",

packages/helper/src/GroupManager.ts

@@ -1,29 +1,39 @@
 import { deepFlat, isArray } from "@daybrush/utils";
 import { GroupArrayChild, GroupSingleChild } from "./groups";
-import { TargetGroupsType } from "./types";
+import { GroupChild, TargetGroupsObject, TargetGroupsType, TargetList } from "./types";
+
 
 function createGroupChildren(
-    targetGroups: TargetGroupsType,
+    targetGroups: TargetGroupsObject,
     parent: GroupArrayChild,
 ) {
     const {
         value,
         map,
     } = parent;
     targetGroups.forEach(child => {
-        if (isArray(child)) {
+        if ("groupId" in child) {
+            const group = new GroupArrayChild(parent);
+
+            group.id = child.groupId;
+            group.depth = parent.depth + 1;
+            value.push(group);
+
+            createGroupChildren(child.children, group);
+        } else if (isArray(child)) {
             const group = new GroupArrayChild(parent);
 
             group.depth = parent.depth + 1;
             value.push(group);
 
             createGroupChildren(child, group);
         } else {
-            const single = new GroupSingleChild(parent, child);
+            const element = "current" in child ? child.current : child;
+            const single = new GroupSingleChild(parent, element!);
 
             single.depth = parent.depth + 1;
             value.push(single);
-            map.set(child, single);
+            map.set(element!, single);
         }
     });
 
@@ -39,8 +49,33 @@ function createGroupChildren(
     return parent;
 }
 
+export function toTargetList(raw: GroupChild[]): TargetList {
+    function targets(childs: GroupChild[] = []) {
+        const arr: TargetGroupsType = [];
+
+        childs.forEach((child) => {
+            if (child.type === "single") {
+                arr.push(child.value);
+            } else {
+                arr.push(targets(child.value));
+            }
+        });
+
+        return arr;
+    }
+    function flatten() {
+        return deepFlat(targets(raw));
+    }
+    return {
+        raw: () => raw,
+        targets: () => targets(raw),
+        flatten,
+
+    };
+}
+
 export class GroupManager extends GroupArrayChild {
-    public type: "root" = "root";
+    public type = "root" as const;
     constructor(
         targetGroups: TargetGroupsType,
         targets?: Array<HTMLElement | SVGElement>,
@@ -49,7 +84,7 @@ export class GroupManager extends GroupArrayChild {
         this.set(targetGroups, targets);
     }
     public set(
-        targetGroups: TargetGroupsType,
+        targetGroups: TargetGroupsObject,
         targets: Array<HTMLElement | SVGElement> = [],
     ) {
         this.map = new Map();
@@ -71,23 +106,24 @@ export class GroupManager extends GroupArrayChild {
             map.set(target, single);
         });
     }
-    public selectNextChild(targets: TargetGroupsType, target: HTMLElement | SVGElement) {
-        let nextTargets = [...targets];
+    public selectSubChilds(targets: TargetGroupsType, target: HTMLElement | SVGElement) {
         const root = this;
-        const nextChild = root.findNextChild(target, nextTargets);
+        const nextChild = root.findNextChild(target, targets, false);
         const targetChild = root.map.get(target);
 
+        let nextChilds: GroupChild[] = [];
+
         if (nextChild) {
-            nextTargets = [nextChild.toTargetGroups()];
+            nextChilds = [nextChild];
         } else if (targetChild) {
-            nextTargets = [target];
+            nextChilds = [targetChild];
         } else {
-            nextTargets = [];
+            nextChilds = [];
         }
 
-        return nextTargets;
+        return toTargetList(nextChilds);
     }
-    public selectSingleTargets(
+    public selectSingleChilds(
         targets: TargetGroupsType,
         added: Array<HTMLElement | SVGElement>,
         removed: Array<HTMLElement | SVGElement>,
@@ -108,16 +144,18 @@ export class GroupManager extends GroupArrayChild {
             nextTargets.push(element);
         });
 
-        return nextTargets;
+        return toTargetList(this.toChilds(nextTargets));
     }
-    public selectCompletedTargets(
+    public selectCompletedChilds(
         targets: TargetGroupsType,
         added: Array<HTMLElement | SVGElement>,
         removed: Array<HTMLElement | SVGElement>,
         continueSelect?: boolean,
     ) {
+
         const nextTargets = [...targets];
         const startSelected = deepFlat(nextTargets);
+
         // group can be added, removed.
         removed.forEach(element => {
             // Single Target
@@ -128,7 +166,6 @@ export class GroupManager extends GroupArrayChild {
                 nextTargets.splice(index, 1);
                 return;
             }
-
             // Group Target
             const removedChild = continueSelect
                 // Finds the nearest child for element and nextTargets.
@@ -156,10 +193,9 @@ export class GroupManager extends GroupArrayChild {
                 nextTargets.push(element);
             }
         });
-
-        return nextTargets;
+        return toTargetList(this.toChilds(nextTargets));
     }
-    public selectSameDepthTargets(
+    public selectSameDepthChilds(
         targets: TargetGroupsType,
         added: Array<HTMLElement | SVGElement>,
         removed: Array<HTMLElement | SVGElement>,
@@ -209,7 +245,56 @@ export class GroupManager extends GroupArrayChild {
                 nextTargets.push(child.toTargetGroups());
             }
         });
+        return toTargetList(this.toChilds(nextTargets));
+    }
+    public toChilds(targets: TargetGroupsType): GroupChild[] {
+        const childs: GroupChild[] = [];
+
+
+        targets.forEach(target => {
+            if (isArray(target)) {
+                const arrayChild = this.findArrayChild(target);
+
+                if (arrayChild) {
+                    childs.push(arrayChild);
+                }
+            } else {
+                const single = this.map.get(target);
+
+                if (single) {
+                    childs.push(single);
+                } else {
+                    childs.push(new GroupSingleChild(this, target));
+                }
+            }
+        });
+
+        return childs;
+    }
+    public toSingleChild(element: HTMLElement | SVGElement, isAuto: true): GroupSingleChild;
+    public toSingleChild(element: HTMLElement | SVGElement, isAuto?: boolean): GroupSingleChild | undefined;
+    public toSingleChild(element: HTMLElement | SVGElement, isAuto?: boolean): GroupSingleChild | undefined {
+        const value = this.map.get(element);
+
+        if (isAuto) {
+            return value || new GroupSingleChild(this, element);
+        }
+        return value;
+    }
+    public findArrayChildById(id: string): GroupArrayChild | null {
+        let value: GroupArrayChild | null = null;
+
+        this.value.some(function find(child: GroupChild) {
+            if (child.type !== "single") {
+                if (child.id === id) {
+                    value = child;
+                    return true;
+                } else {
+                    return child.value.some(find);
+                }
+            }
+        });
 
-        return nextTargets;
+        return value;
     }
 }

packages/helper/src/groups.ts

@@ -4,11 +4,21 @@ import { GroupChild, TargetGroupsType } from "./types";
 export class Child {
     public type: "group" | "root" | "single" = "single";
     public depth = 0;
-    constructor(public parent?: GroupArrayChild) { }
+    protected _scope: string[] = [];
+    constructor(public parent?: GroupArrayChild) {}
+
+    public get scope(): string[] {
+        const parent = this.parent;
+
+        if (!parent || parent.type === "root") {
+            return [];
+        }
+        return [...parent.scope, parent.id];
+    }
 }
 
 export class GroupSingleChild extends Child {
-    public type: "single" = "single";
+    public type = "single" as const;
     constructor(parent: GroupArrayChild, public value: HTMLElement | SVGElement) {
         super(parent);
     }
@@ -18,6 +28,7 @@ export class GroupSingleChild extends Child {
 export class GroupArrayChild extends Child {
     public type: "group" | "root" = "group";
     public value: GroupChild[] = [];
+    public id = "";
     public map: Map<HTMLElement | SVGElement, GroupSingleChild> = new Map();
 
     public compare(groups: TargetGroupsType, checker: -1 | 0 | 1 = 0) {
@@ -104,11 +115,12 @@ export class GroupArrayChild extends Child {
     public findNextChild(
         target: HTMLElement | SVGElement,
         range: TargetGroupsType = this.toTargetGroups(),
-        isExact?: boolean,
+        isExact = true,
     ): GroupArrayChild | null {
         let nextChild: GroupArrayChild | null = null;
 
         const length = range.length;
+
         range.some(child => {
             if (!isExact && length === 1 && isArray(child)) {
                 nextChild = this.findNextChild(target, child);
@@ -177,7 +189,9 @@ export class GroupArrayChild extends Child {
         target: HTMLElement | SVGElement,
         range: Array<HTMLElement | SVGElement>,
     ): GroupArrayChild | null {
-        const nextChild = this.findNextChild(target);
+        const nextChild = this.findNextChild(
+            target,
+        );
 
         if (nextChild) {
             return nextChild.findPureChild(target, range);
@@ -193,7 +207,42 @@ export class GroupArrayChild extends Child {
             }
         });
     }
+    public findArrayChild(targets: TargetGroupsType): GroupArrayChild | null {
+        const {
+            map,
+            value,
+        } = this;
+
+        let result = false;
+
+        if (this.type !== "root") {
+            result = targets.every(target => {
+                if (isArray(target)) {
+                    return value.some(child => {
+                        return child.type === "group" && child.findArrayChild(target);
+                    });
+                } else {
+                    return map.get(target);
+                }
+            });
+        }
 
+        if (result) {
+            return this;
+        } else {
+            let childResult: GroupArrayChild | null = null;
+
+            value.some(child => {
+                if (child.type === "group") {
+                    childResult = child.findArrayChild(targets);
+
+                    return childResult;
+                }
+            });
+
+            return childResult;
+        }
+    }
     public groupByPerfect(selected: Array<HTMLElement | SVGElement>) {
         return this.value.filter(child => {
             if (child.type !== "single") {

packages/helper/src/types.ts

@@ -1,4 +1,14 @@
 import { GroupArrayChild, GroupSingleChild } from "./groups";
 
+export type TargetGroupWithId = { groupId: string; children: TargetGroupsObject };
+export type TargetRef = { current: HTMLElement | SVGElement | null };
+export type TargetGroupsObject
+    = Array<HTMLElement | SVGElement | TargetRef | TargetGroupsObject | TargetGroupWithId>;
 export type TargetGroupsType = Array<HTMLElement | SVGElement | TargetGroupsType>;
 export type GroupChild = GroupSingleChild | GroupArrayChild;
+
+export interface TargetList {
+    raw(): GroupChild[];
+    flatten(): Array<HTMLElement | SVGElement>;
+    targets(): TargetGroupsType;
+}

packages/react-moveable/package.json

@@ -60,7 +60,7 @@
         "@daybrush/builder": "^0.1.0",
         "@daybrush/tester": "^0.1.3",
         "@egjs/build-helper": "^0.1.2",
-        "@moveable/helper": "~0.0.4",
+        "@moveable/helper": "~0.1.0",
         "@scena/react-guides": "^0.17.1",
         "@storybook/addon-actions": "6.5.10",
         "@storybook/addon-controls": "6.5.10",