feat: support object self type #701

daybrush · Jul 20, 2022 · 99967c2 · 99967c2
1 parent bf29635
commit 99967c2
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 8 deletions.
diff --git a/packages/react-moveable/src/react-moveable/ables/Clippable.tsx b/packages/react-moveable/src/react-moveable/ables/Clippable.tsx
@@ -11,6 +11,7 @@ import {
     convertCSSSize,
     getComputedStyle,
     getSizeDistByDist,
+    getProps,
 } from "../utils";
 import { plus, minus, multiply } from "@scena/matrix";
 import { getDragDist, calculatePointerDist, setDragStart } from "../gesto/GestoUtils";
@@ -596,7 +597,8 @@ export default {
     ],
     render(moveable: MoveableManagerInterface<ClippableProps, ClippableState>, React: Renderer): any[] {
         const {
-            customClipPath, defaultClipPath,
+            customClipPath,
+            defaultClipPath,
             clipArea, zoom,
         } = moveable.props;
         const {
@@ -834,8 +836,9 @@ export default {
         if (!clipPath) {
             return false;
         }
+        const props = getProps(moveable.props, "clippable");
 
-        const { keepRatio } = moveable.props;
+        const { keepRatio } = props;
         let distX = 0;
         let distY = 0;
 
@@ -849,7 +852,7 @@ export default {
         }
 
         const firstDist = [distX, distY];
-        const props = moveable.props;
+
         const state = moveable.state;
         const { width, height } = state;
         const isDragWithTarget = !isArea && !isControl && !isLine;

diff --git a/packages/react-moveable/src/react-moveable/ables/Resizable.ts b/packages/react-moveable/src/react-moveable/ables/Resizable.ts
@@ -4,6 +4,7 @@ import {
     getAbsolutePosesByState,
     catchEvent,
     getOffsetSizeDist,
+    getProps,
 } from "../utils";
 import {
     setDragStart,
@@ -223,7 +224,7 @@ export default {
         if (!isResize) {
             return;
         }
-        const props = moveable.props;
+        const props = getProps(moveable.props, "resizable");
         const {
             resizeFormat,
             throttleResize = parentFlag ? 0 : 1,
@@ -588,11 +589,12 @@ export default {
         if (!datas.isResize) {
             return;
         }
+        const props = getProps(moveable.props, "resizable");
 
         catchEvent(moveable, "onBeforeResize", parentEvent => {
             triggerEvent(moveable, "onBeforeResizeGroup", fillParams<OnBeforeResizeGroup>(moveable, e, {
                 ...parentEvent,
-                targets: moveable.props.targets!,
+                targets: props.targets!,
             }, true));
         });
 
@@ -608,7 +610,7 @@ export default {
             dist,
         } = params;
 
-        const keepRatio = moveable.props.keepRatio;
+        const keepRatio = props.keepRatio;
 
         const parentScale = [
             boundingWidth / (boundingWidth - dist[0]),
@@ -642,7 +644,7 @@ export default {
             },
         );
         const nextParams: OnResizeGroup = {
-            targets: moveable.props.targets!,
+            targets: props.targets!,
             events,
             ...params,
         };

diff --git a/packages/react-moveable/src/react-moveable/types.ts b/packages/react-moveable/src/react-moveable/types.ts
@@ -2356,7 +2356,7 @@ export interface ClippableOptions {
      * Whether to clip the target.
      * @default false
      */
-    clippable?: boolean;
+    clippable?: boolean | ClippableOptions;
     /**
      * Whether to keep the ratio of size if your clipPath is 'inset', 'rect', 'ellipse' type
      * @default false

diff --git a/packages/react-moveable/src/react-moveable/utils.tsx b/packages/react-moveable/src/react-moveable/utils.tsx
@@ -934,6 +934,18 @@ export function getCSSSize(target: SVGElement | HTMLElement) {
     ];
 }
 
+export function getProps<Props>(props: Props, ableName: keyof Props): Props {
+    const self = props[ableName];
+
+    if (isObject(self)) {
+        return {
+            ...props,
+            ...self,
+        };
+    }
+    return props;
+}
+
 export function getSize(
     target?: SVGElement | HTMLElement | null,
     style: CSSStyleDeclaration | null = target ? getComputedStyle(target) : null,

diff --git a/packages/react-moveable/stories/99-Tests/Deafult.stories.tsx b/packages/react-moveable/stories/99-Tests/Deafult.stories.tsx
@@ -25,3 +25,7 @@ group.add("Test Custom Element Offset", {
     app: require("./ReactCustomElementApp").default,
     text: require("!!raw-loader!./ReactCustomElementApp").default,
 });
+group.add("Check drag accuracy when using bounds", {
+    app: require("./ReactAccuracyApp").default,
+    text: require("!!raw-loader!./ReactAccuracyApp").default,
+});