feat: support group persist #780

packages/react-moveable/src/react-moveable/InitialMoveable.tsx

@@ -136,7 +136,7 @@ export class InitialMoveable<T = {}>
         const refTargets = this._updateRefs(true);
         const elementTargets = getElementTargets(refTargets, this.selectorMap);
 
-        const isGroup = elementTargets.length > 1;
+        let isGroup = elementTargets.length > 1;
         const totalAbles = moveableContructor.getTotalAbles();
         const ables = [
             ...totalAbles,
@@ -156,6 +156,11 @@ export class InitialMoveable<T = {}>
         const prevMoveable = this.moveable;
 
 
+        const persistData = props.persistData;
+
+        if (persistData?.children) {
+            isGroup = true;
+        }
         if (isGroup) {
             if (props.individualGroupable) {
                 return <MoveableIndividualGroup key="individual-group" ref={ref(this, "moveable")}

packages/react-moveable/src/react-moveable/MoveableIndividualGroup.tsx

@@ -11,11 +11,22 @@ import { prefix } from "./utils";
 class MoveableIndividualGroup extends MoveableManager<GroupableProps> {
     public moveables: MoveableManager[] = [];
     public render() {
+        const props = this.props;
         const {
             cspNonce,
             cssStyled: ControlBoxElement,
-            targets,
-        } = this.props;
+            persistData,
+        } = props;
+
+        let targets: Array<HTMLElement | SVGElement | null | undefined> = props.targets || [];
+        const length = targets.length;
+        const canPersist = this.isUnmounted || !length;
+        let persistDatChildren = persistData?.children ?? [];
+        if (canPersist && !length && persistDatChildren.length) {
+            targets = persistDatChildren.map(() => null);
+        } else if (!canPersist) {
+            persistDatChildren = [];
+        }
 
         return <ControlBoxElement
             cspNonce={cspNonce}
@@ -28,6 +39,7 @@ class MoveableIndividualGroup extends MoveableManager<GroupableProps> {
                     {...this.props}
                     target={target}
                     wrapperMoveable={this}
+                    persistData={persistDatChildren[i]}
                 />;
             })}
         </ControlBoxElement>;

packages/react-moveable/src/react-moveable/MoveableManager.tsx

@@ -25,13 +25,13 @@ import {
     GroupableProps,
 } from "./types";
 import { triggerAble, getTargetAbleGesto, getAbleGesto, checkMoveableTarget } from "./gesto/getAbleGesto";
-import { plus } from "@scena/matrix";
+import { minus, plus } from "@scena/matrix";
 import {
     addClass, cancelAnimationFrame, find,
     getKeys, IObject, removeClass, requestAnimationFrame,
 } from "@daybrush/utils";
 import { renderLine } from "./renderDirections";
-import { fitPoints, getAreaSize, getOverlapSize, isInside } from "overlap-area";
+import { fitPoints, getAreaSize, getMinMaxs, getOverlapSize, isInside } from "overlap-area";
 import EventManager from "./EventManager";
 import styled from "react-css-styled";
 import EventEmitter from "@scena/event-emitter";
@@ -728,15 +728,37 @@ export default class MoveableManager<T = {}>
     }
     public getState(): MoveableManagerState {
         const props = this.props;
-        if (props.target) {
+        if (props.target || (props as any).targets?.length) {
             this._hasFirstTarget = true;
         }
         const hasControlBox = this.controlBox;
         const persistData = props.persistData as any;
         const firstRenderState = props.firstRenderState as any;
 
         if (!this._hasFirstTarget && persistData) {
-            this.updateState(getPersistState(persistData), false);
+            const persistState = getPersistState(persistData);
+
+            if (props.groupable) {
+                const {
+                    pos1,
+                    pos2,
+                    pos3,
+                    pos4,
+                } = persistState;
+                const minPos = getMinMaxs([pos1!, pos2!, pos3!, pos4!]);
+                const delta = [minPos.minX, minPos.minY];
+                const pos = [persistState.left!, persistState.top!];
+
+                persistState.pos1 = minus(pos1!, delta);
+                persistState.pos2 = minus(pos2!, delta);
+                persistState.pos3 = minus(pos3!, delta);
+                persistState.pos4 = minus(pos4!, delta);
+                persistState.origin = minus(plus(pos, persistState.origin!), delta);
+                persistState.beforeOrigin = minus(plus(pos, persistState.beforeOrigin!), delta);
+
+                persistState.posDelta = delta;
+            }
+            this.updateState(persistState, false);
         } else if (firstRenderState && !hasControlBox) {
             return firstRenderState;
         }

packages/react-moveable/src/react-moveable/ables/Groupable.tsx

@@ -16,14 +16,21 @@ export default {
     } as const,
     events: {} as const,
     render(moveable: MoveableGroupInterface<GroupableProps>, React: Renderer): any[] {
-        const targets = moveable.props.targets || [];
+        const props = moveable.props;
+        let targets: Array<HTMLElement | SVGElement | undefined | null> = props.targets || [];
 
         moveable.moveables = [];
-        const { left, top } = moveable.state;
+        const { left, top, isPersisted } = moveable.getState();
         const position = [left, top];
-        const props = moveable.props;
         const zoom = props.zoom || 1;
         const renderGroupRects = moveable.renderGroupRects;
+        let persistDatChildren = props.persistData?.children || [];
+
+        if (isPersisted) {
+            targets = persistDatChildren.map(() => null);
+        } else {
+            persistDatChildren = [];
+        }
 
         return [
             ...targets.map((target, i) => {
@@ -38,6 +45,7 @@ export default {
                     hideChildMoveableDefaultLines={props.hideChildMoveableDefaultLines}
                     parentMoveable={moveable}
                     parentPosition={position}
+                    persistData={persistDatChildren[i]}
                     zoom={zoom}
                 />;
             }),

packages/react-moveable/src/react-moveable/utils/persist.ts

@@ -4,11 +4,12 @@ import { MoveableManagerState, PersistRectData } from "../types";
 
 export function getPersistState(rect: PersistRectData): Partial<MoveableManagerState> {
 
-    const beforeOrigin = minus(rect.origin, [rect.left, rect.top]);
+    const origin = minus(rect.origin, [rect.left, rect.top]);
     return {
         ...rect,
-        beforeOrigin,
-        origin: beforeOrigin,
+        beforeOrigin: origin,
+        // originalBeforeOrigin: origin,
+        origin,
         isPersisted: true,
     };
 }

packages/react-moveable/stories/4-Options/0-Default.stories.tsx

@@ -33,7 +33,16 @@ group.add("Cursor is applied in viewer during dragging.", {
 
 
 
-group.add("First render with persisted data.", {
+group.add("First render with persisted data", {
     app: require("./ReactPersistDataApp").default,
     path: require.resolve("./ReactPersistDataApp"),
 });
+
+group.add("First render with persisted data (group)", {
+    app: require("./ReactGroupPersistDataApp").default,
+    path: require.resolve("./ReactGroupPersistDataApp"),
+});
+group.add("First render with persisted data (individual group)", {
+    app: require("./ReactIndividualGroupPersistDataApp").default,
+    path: require.resolve("./ReactIndividualGroupPersistDataApp"),
+});

packages/react-moveable/stories/4-Options/ReactGroupPersistDataApp.tsx

@@ -0,0 +1,142 @@
+import * as React from "react";
+import Moveable from "@/react-moveable";
+
+export default function App() {
+    return (
+        <div className="root">
+            <p className="description">
+                * You can persist by `moveable.getRect()` method.
+            </p>
+            <div className="target target1" style={{
+                transform: "translate(57.4837px, 16.3011px) rotate(30.5213deg)",
+            }}>No Target1</div>
+            <div className="target target2" style={{
+                transform: "translate(22.3858px, 104.945px) rotate(30.5213deg)",
+            }}>No Target2</div>
+            <div className="target target3" style={{
+                transform: "translate(-16.8514px, 28.7599px) rotate(30.5213deg)",
+            }}>No Target3</div>
+            <Moveable
+                // target={".target"}
+                draggable={true}
+                resizable={true}
+                rotatable={true}
+                origin={true}
+                persistData={{
+                    left: 92.99700062437337,
+                    top: 117.83604282479718,
+                    pos1: [
+                        209.80457062437335,
+                        117.83604282479718,
+                    ],
+                    pos2: [
+                        451.00777062437334,
+                        260.03656282479716,
+                    ],
+                    pos3: [
+                        92.99700062437337,
+                        315.96724282479715,
+                    ],
+                    pos4: [
+                        334.20020062437334,
+                        458.1677628247972,
+                    ],
+                    offsetWidth: 280,
+                    offsetHeight: 230,
+                    origin: [
+                        272.00238562437335,
+                        288.0019028247972,
+                    ],
+                    children: [
+                        {
+                            left: 159.01875,
+                            top: 117.83615,
+                            pos1: [
+                                209.80455,
+                                117.83615,
+                            ],
+                            pos2: [
+                                295.94865,
+                                168.62195,
+                            ],
+                            pos3: [
+                                159.01875,
+                                203.98025,
+                            ],
+                            pos4: [
+                                245.16285,
+                                254.76605,
+                            ],
+                            offsetWidth: 100,
+                            offsetHeight: 100,
+                            origin: [
+                                227.4837,
+                                186.30110000000002,
+                            ],
+                        },
+                        {
+                            left: 303.92085000000003,
+                            top: 226.48005,
+                            pos1: [
+                                354.70665,
+                                226.48005,
+                            ],
+                            pos2: [
+                                440.85075,
+                                277.26585,
+                            ],
+                            pos3: [
+                                303.92085000000003,
+                                312.62415,
+                            ],
+                            pos4: [
+                                390.06495,
+                                363.40995,
+                            ],
+                            offsetWidth: 100,
+                            offsetHeight: 100,
+                            origin: [
+                                372.3858,
+                                294.945,
+                            ],
+                        },
+                        {
+                            left: 144.68365,
+                            top: 260.29495,
+                            pos1: [
+                                195.46945,
+                                260.29495,
+                            ],
+                            pos2: [
+                                281.61355,
+                                311.08074999999997,
+                            ],
+                            pos3: [
+                                144.68365,
+                                346.43904999999995,
+                            ],
+                            pos4: [
+                                230.82774999999998,
+                                397.22484999999995,
+                            ],
+                            offsetWidth: 100,
+                            offsetHeight: 100,
+                            origin: [
+                                213.1486,
+                                328.75989999999996,
+                            ],
+                        },
+                    ],
+                }}
+                onRenderGroup={e => {
+                    e.events.forEach(ev => {
+                        ev.target.style.cssText += ev.cssText;
+                    });
+                }}
+                onRenderGroupEnd={e => {
+                    console.log(JSON.stringify(e.moveable.getRect(), undefined, 4));
+                }}
+            />
+        </div>
+    );
+}