demo: add group, ungroup demo #947

Author: daybrush

lerna.json

@@ -15,6 +15,13 @@
                     "demo/release/latest/dist"
                 ]
             },
+            {
+                "basePath": "packages/helper/dist",
+                "dists": [
+                    "demo/helper/release/{{version}}/dist",
+                    "demo/helper/release/latest/dist"
+                ]
+            },
             {
                 "basePath": "doc",
                 "dists": [

packages/react-moveable/.storybook/main.js

@@ -34,6 +34,8 @@ module.exports = {
         config.resolve.alias["@/stories"] = path.resolve(__dirname, "../stories");
         config.resolve.alias["moveable-helper"] = path.resolve(__dirname, "../stories/moveable-helper");
         config.resolve.alias["@/react-moveable"] = path.resolve(__dirname, "../src");
+        config.resolve.alias["@/helper"] = path.resolve(__dirname, "../../helper/src");
+
         return config;
     },
     stories: [

packages/react-moveable/croffle.config.js

@@ -180,6 +180,7 @@ const config = [
             croissant.addSirup(PreviewPropsSirup);
             croissant.addSirup(sirup => {
                 sirup.convertImport("@/react-moveable", "react-moveable");
+                sirup.convertImport("@/helper", "@moveable/helper");
             });
             croissant.addSirup(DefaultModulePrefixSirup);
             return croissant;

packages/react-moveable/package.json

@@ -71,7 +71,6 @@
         "@croffle/bakery": "^0.0.21",
         "@daybrush/builder": "^0.1.2",
         "@daybrush/tester": "^0.1.3",
-        "@moveable/helper": "~0.1.2",
         "@scena/react-guides": "^0.17.1",
         "@storybook/addon-actions": "6.5.16",
         "@storybook/addon-controls": "6.5.16",

packages/react-moveable/stories/9A-Components/0-Components.stories.tsx

@@ -15,6 +15,12 @@ export const ComponentsSelectoWithMultipleGroup = add("Use Selecto with Multiple
     path: require.resolve("./ReactSelectoMultipleGroupApp"),
 });
 
+export const ComponentsSelectoWitGroupUngroup = add("Use Selecto with Group & Ungroup", {
+    app: require("./ReactSelectoMultipleGroupUngroupApp").default,
+    path: require.resolve("./ReactSelectoMultipleGroupUngroupApp"),
+});
+
+
 
 export const ComponentsInfiniteViewer = add("Use Infinite Viewer", {
     app: require("./ReactInfiniteViewerApp").default,

packages/react-moveable/stories/9A-Components/ReactSelectoMultipleGroupApp.tsx

@@ -3,7 +3,7 @@ import * as React from "react";
 import { useKeycon } from "react-keycon";
 import Selecto from "react-selecto";
 import Moveable, { MoveableTargetGroupsType } from "@/react-moveable";
-import { GroupManager, TargetList } from "@moveable/helper";
+import { GroupManager, TargetList } from "@/helper";
 
 export default function App() {
     const { isKeydown: isCommand } = useKeycon({ keys: "meta" });

packages/react-moveable/stories/9A-Components/ReactSelectoMultipleGroupUngroupApp.tsx

@@ -0,0 +1,116 @@
+import { deepFlat } from "@daybrush/utils";
+import * as React from "react";
+import Selecto from "react-selecto";
+import Moveable, { MoveableTargetGroupsType } from "@/react-moveable";
+import { GroupManager, TargetList } from "@/helper";
+
+export default function App() {
+    const groupManager = React.useMemo<GroupManager>(() => new GroupManager([]), []);
+    const [targets, setTargets] = React.useState<MoveableTargetGroupsType>([]);
+    const moveableRef = React.useRef<Moveable>(null);
+    const selectoRef = React.useRef<Selecto>(null);
+    const cubes = [];
+
+    for (let i = 0; i < 30; ++i) {
+        cubes.push(i);
+    }
+    const setSelectedTargets = React.useCallback((nextTargetes: MoveableTargetGroupsType) => {
+        selectoRef.current!.setSelectedTargets(deepFlat(nextTargetes));
+        setTargets(nextTargetes);
+    }, []);
+    React.useEffect(() => {
+        // [[0, 1], 2], 3, 4, [5, 6], 7, 8, 9
+        const elements = selectoRef.current!.getSelectableElements();
+
+        groupManager.set([], elements);
+    }, []);
+
+    return <div className="root">
+        <div className="container">
+            <button onClick={() => {
+                const nextGroup = groupManager.group(targets, true);
+
+                if (nextGroup) {
+                    setTargets(nextGroup);
+                }
+            }}>Group</button>
+            &nbsp;
+            <button onClick={() => {
+                const nextGroup = groupManager.ungroup(targets);
+
+                if (nextGroup) {
+                    setTargets(nextGroup);
+                }
+            }}>Ungrooup</button>
+            <Moveable
+                ref={moveableRef}
+                draggable={true}
+                rotatable={true}
+                scalable={true}
+                target={targets}
+                onDrag={e => {
+                    e.target.style.transform = e.transform;
+                }}
+                onRenderGroup={e => {
+                    e.events.forEach(ev => {
+                        ev.target.style.cssText += ev.cssText;
+                    });
+                }}
+            ></Moveable>
+            <Selecto
+                ref={selectoRef}
+                dragContainer={window}
+                selectableTargets={[".selecto-area .cube"]}
+                hitRate={0}
+                selectByClick={true}
+                selectFromInside={false}
+                toggleContinueSelect={["shift"]}
+                ratio={0}
+                onDragStart={e => {
+                    const moveable = moveableRef.current!;
+                    const target = e.inputEvent.target;
+                    const flatted = deepFlat(targets);
+
+                    if (
+                        target.tagName === "BUTTON"
+                        || moveable.isMoveableElement(target)
+                        || flatted.some(t => t === target || t.contains(target))
+                    ) {
+                        e.stop();
+                    }
+                }}
+                onSelectEnd={e => {
+                    const {
+                        isDragStart,
+                        added,
+                        removed,
+                        inputEvent,
+                    } = e;
+                    const moveable = moveableRef.current!;
+
+                    if (isDragStart) {
+                        inputEvent.preventDefault();
+
+                        moveable.waitToChangeTarget().then(() => {
+                            moveable.dragStart(inputEvent);
+                        });
+                    }
+                    let nextChilds: TargetList;
+
+                    if (isDragStart) {
+                        nextChilds = groupManager.selectCompletedChilds(targets, added, removed);
+                    } else {
+                        nextChilds = groupManager.selectSameDepthChilds(targets, added, removed);
+                    }
+
+                    e.currentTarget.setSelectedTargets(nextChilds.flatten());
+                    setSelectedTargets(nextChilds.targets());
+                }}
+            ></Selecto>
+            <div className="elements selecto-area">
+                {cubes.map(i => <div className="cube" key={i}>{i}</div>)}
+            </div>
+            <div className="empty elements"></div>
+        </div>
+    </div>;
+}

packages/react-moveable/tsconfig.json

@@ -29,6 +29,9 @@
             ],
             "@/react-moveable": [
                 "./src/"
+            ],
+            "@/helper": [
+                "../helper/src/"
             ]
         }
     },