fix: fix targetGroups' compare condition

daybrush · Dec 14, 2022 · 959a9f0 · 959a9f0
1 parent 4bc6ef5
commit 959a9f0
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 5 deletions.
diff --git a/packages/react-moveable/src/MoveableGroup.tsx b/packages/react-moveable/src/MoveableGroup.tsx
@@ -7,6 +7,7 @@ import { MIN_NUM, MAX_NUM, TINY_NUM } from "./consts";
 import {
     getAbsolutePosesByState, equals, unset, rotatePosesInfo,
     convertTransformOriginArray,
+    isDeepArrayEquals,
 } from "./utils";
 import { minus, plus } from "@scena/matrix";
 import { getIntersectionPointsByConstants, getMinMaxs } from "overlap-area";
@@ -220,6 +221,7 @@ class MoveableGroup extends MoveableManager<GroupableProps> {
     public moveables: MoveableManager[] = [];
     public transformOrigin = "50% 50%";
     public renderGroupRects: GroupRect[] = [];
+    private _targetGroups: MoveableTargetGroupsType = [];
     private _hasFirstTargets = false;
 
     public componentDidMount() {
@@ -246,9 +248,10 @@ class MoveableGroup extends MoveableManager<GroupableProps> {
         const moveables = this.moveables;
         const target = state.target! || props.target!;
         const checkeds = moveables.map(moveable => ({ finded: false, manager: moveable }));
+        const targetGroups = this.props.targetGroups || [];
         const moveableGroups = findMoveableGroups(
             checkeds,
-            this.props.targetGroups || [],
+            targetGroups,
         );
 
         moveableGroups.push(...checkeds.filter(({ finded }) => !finded).map(({ manager }) => manager));
@@ -310,6 +313,8 @@ class MoveableGroup extends MoveableManager<GroupableProps> {
             this.scale = [1, 1];
         }
 
+
+        this._targetGroups = targetGroups;
         this.renderGroupRects = renderGroupRects;
         const transformOrigin = this.transformOrigin;
         const rotation = this.rotation;
@@ -436,10 +441,16 @@ class MoveableGroup extends MoveableManager<GroupableProps> {
         if (isContainerChanged) {
             state.container = props.container;
         }
-        const { added, changed, removed } = this.differ.update(props.targets!);
+        const targets = props.targets!;
+        const { added, changed, removed } = this.differ.update(targets);
         const isTargetChanged = added.length || removed.length;
 
-        if (isContainerChanged || isTargetChanged || changed.length) {
+        if (
+            isContainerChanged
+            || isTargetChanged
+            || changed.length
+            || targets.length && isDeepArrayEquals(this._targetGroups, props.targetGroups || [])
+        ) {
             this.updateRect();
             this._hasFirstTargets = true;
         }

diff --git a/packages/react-moveable/src/ables/Clippable.tsx b/packages/react-moveable/src/ables/Clippable.tsx
@@ -319,6 +319,7 @@ export default {
             customClipPath,
             defaultClipPath,
             clipArea, zoom,
+            groupable,
         } = moveable.props;
         const {
             target, width, height, allMatrix, is3d, left, top,
@@ -328,7 +329,7 @@ export default {
             rotation: rotationRad,
         } = moveable.getState();
 
-        if (!target) {
+        if (!target || groupable) {
             return [];
         }
 
@@ -503,7 +504,7 @@ export default {
         return this.dragControlStart(moveable, e);
     },
     drag(moveable: MoveableManagerInterface<ClippableProps, ClippableState>, e: any) {
-        return this.dragControl(moveable, {...e, isDragTarget: true });
+        return this.dragControl(moveable, { ...e, isDragTarget: true });
     },
     dragEnd(moveable: MoveableManagerInterface<ClippableProps, ClippableState>, e: any) {
         return this.dragControlEnd(moveable, e);

diff --git a/packages/react-moveable/src/utils.tsx b/packages/react-moveable/src/utils.tsx
@@ -1618,3 +1618,19 @@ export function rotatePosesInfo(poses: number[][], origin: number[], rad: number
         result: nextPoses.map(pos => plus(pos, origin)),
     };
 }
+
+
+
+export function isDeepArrayEquals(arr1: any[], arr2: any[]): boolean {
+    return arr1.length === arr2.length && arr1.every((value1, i) => {
+        const value2 = arr2[i];
+        const isArray1 = isArray(value1);
+        const isArray2 = isArray(value2);
+        if (isArray1 && isArray2) {
+            return isDeepArrayEquals(value1, value2);
+        } else if (!isArray1 && !isArray2) {
+            return value1 === value2;
+        }
+        return false;
+    });
+}