feat: add cssText on clip event

daybrush · Nov 7, 2022 · 90e5397 · 90e5397
1 parent 40a23db
commit 90e5397
Show file tree

Hide file tree

Showing 5 changed files with 104 additions and 28 deletions.
diff --git a/packages/react-moveable/src/react-moveable/ables/Clippable.tsx b/packages/react-moveable/src/react-moveable/ables/Clippable.tsx
@@ -12,6 +12,7 @@ import {
     getComputedStyle,
     getSizeDistByDist,
     getProps,
+    fillCSSObject,
 } from "../utils";
 import { plus, minus, multiply } from "@scena/matrix";
 import { getDragDist, calculatePointerDist, setDragStart } from "../gesto/GestoUtils";
@@ -491,14 +492,19 @@ function addClipPath(moveable: MoveableManagerInterface<ClippableProps>, e: any)
         return;
     }
     const clipStyles = getClipStyles(moveable, clipPath, poses)!;
+    const clipStyle = `${clipType}(${clipStyles.join(splitter)})`;
+
     triggerEvent(moveable, "onClip", fillParams<OnClip>(moveable, e, {
         clipEventType: "added",
         clipType,
         poses,
         clipStyles,
-        clipStyle: `${clipType}(${clipStyles.join(splitter)})`,
+        clipStyle,
         distX: 0,
         distY: 0,
+        ...fillCSSObject({
+            clipPath: clipStyle,
+        }, e),
     }));
 }
 function removeClipPath(moveable: MoveableManagerInterface<ClippableProps>, e: any) {
@@ -526,14 +532,19 @@ function removeClipPath(moveable: MoveableManagerInterface<ClippableProps>, e: a
         return;
     }
     const clipStyles = getClipStyles(moveable, clipPath, poses)!;
+    const clipStyle = `${clipType}(${clipStyles.join(splitter)})`;
+
     triggerEvent(moveable, "onClip", fillParams<OnClip>(moveable, e, {
         clipEventType: "removed",
         clipType,
         poses,
         clipStyles,
-        clipStyle: `${clipType}(${clipStyles.join(splitter)})`,
+        clipStyle,
         distX: 0,
         distY: 0,
+        ...fillCSSObject({
+            clipPath: clipStyle,
+        }, e),
     }));
 }
 /**
@@ -566,6 +577,13 @@ export default {
     background: #6d6;
     cursor: pointer;
 }
+.clip-control:after {
+    content: "";
+    position:absolute;
+    width: 100%;
+    height: 100%;
+    background: #f55;
+}
 .control.clip-control.clip-radius {
     background: #d66;
 }
@@ -1079,6 +1097,9 @@ export default {
             clipStyles: nextClipStyles,
             distX,
             distY,
+            ...fillCSSObject({
+                [clipType === "rect" ? "clip" : "clipPath"]: clipStyle,
+            }, e),
         }));
 
         return true;

diff --git a/packages/react-moveable/src/react-moveable/types.ts b/packages/react-moveable/src/react-moveable/types.ts
@@ -2680,22 +2680,38 @@ export interface OnClipStart extends OnEvent {
  * @typedef
  * @memberof Moveable.Clippable
  * @extends Moveable.OnEvent
- * @property - The clip type.
- * @property - The clip event type.
- * @property - The control positions
- * @property - x position of the distance the control has moved
- * @property - y position of the distance the control has moved
- * @property - CSS style of changed clip
- * @property - Splited CSS styles of changed clip
+ * @extends Moveable.CSSObject
  */
-export interface OnClip extends OnEvent {
+export interface OnClip extends OnEvent, CSSObject {
+    /**
+     * The clip type.
+     */
     clipType: "polygon" | "circle" | "ellipse" | "inset" | "rect";
+    /**
+     * The clip event type.
+     */
     clipEventType: "added" | "changed" | "removed";
+    /**
+     * The control positions
+     */
     poses: number[][];
+    /**
+     * x position of the distance the control has moved
+     */
     distX: number;
+    /**
+     * y position of the distance the control has moved
+     */
     distY: number;
+    /**
+     * CSS style of changed clip
+     */
     clipStyle: string;
+    /**
+     * Splited CSS styles of changed clip
+     */
     clipStyles: string[];
+
 }
 /**
  * @typedef
@@ -2744,6 +2760,8 @@ export interface PersistRectData {
      * The absolute transform origin
      */
     origin: number[];
+
+    children?: PersistRectData[];
 }
 
 

diff --git a/packages/react-moveable/stories/5A-Advanced/9-Clippable/Deafult.stories.tsx b/packages/react-moveable/stories/5A-Advanced/9-Clippable/Deafult.stories.tsx
@@ -4,11 +4,18 @@ import { makeStoryGroup } from "../../utils/story";
 const group = makeStoryGroup("Advanced Clippable", module);
 
 
-group.add("Clip & Snap", {
+
+group.add("Clippable with Drag, Resize, Rotate", {
     app: require("./ReactClippableApp").default,
     path: require.resolve("./ReactClippableApp"),
 });
 
+
+group.add("Clip & Snap", {
+    app: require("./ReactClipSnapApp").default,
+    path: require.resolve("./ReactClipSnapApp"),
+});
+
 group.add("keepRatio for both clippable and resizeable", {
     app: require("./ReactClippableResizableKeepRatioApp").default,
     path: require.resolve("./ReactClippableResizableKeepRatioApp"),

diff --git a/packages/react-moveable/stories/5A-Advanced/9-Clippable/ReactClipSnapApp.tsx b/packages/react-moveable/stories/5A-Advanced/9-Clippable/ReactClipSnapApp.tsx
@@ -0,0 +1,42 @@
+import * as React from "react";
+import Moveable from "@/react-moveable";
+
+export default function App(props: Record<string, any>) {
+    const targetRef = React.useRef<HTMLDivElement>(null);
+
+    return (
+        <div className="root">
+            <div className="container">
+                <div className="target" ref={targetRef} style={{
+                    top: "50px",
+                    left: "50px",
+                    width: "200px",
+                    height: "200px",
+                }}>Target</div>
+                <Moveable
+                    target={targetRef}
+                    draggable={true}
+                    resizable={true}
+                    clippable={true}
+                    dragWithClip={false}
+                    clipTargetBounds={true}
+                    snappable={true}
+
+                    horizontalGuidelines={[0, 100, 200, 300]}
+                    // verticalGuidelines={[0, 100, 200, 300]}
+                    snapThreshold={5}
+                    onDrag={e => {
+                        e.target.style.transform = e.transform;
+                    }}
+                    onResize={e => {
+                        e.target.style.width = `${e.width}px`;
+                        e.target.style.height = `${e.height}px`;
+                        e.target.style.transform = e.drag.transform;
+                    }}
+                    onClip={e => {
+                        e.target.style.clipPath = e.clipStyle;
+                    }} />
+            </div>
+        </div>
+    );
+}
diff --git a/packages/react-moveable/stories/5A-Advanced/9-Clippable/ReactClippableApp.tsx b/packages/react-moveable/stories/5A-Advanced/9-Clippable/ReactClippableApp.tsx
@@ -17,25 +17,13 @@ export default function App(props: Record<string, any>) {
                     target={targetRef}
                     draggable={true}
                     resizable={true}
+                    rotatable={true}
                     clippable={true}
-                    dragWithClip={false}
-                    clipTargetBounds={true}
-                    snappable={true}
-
-                    horizontalGuidelines={[0, 100, 200, 300]}
-                    // verticalGuidelines={[0, 100, 200, 300]}
-                    snapThreshold={5}
-                    onDrag={e => {
-                        e.target.style.transform = e.transform;
-                    }}
-                    onResize={e => {
-                        e.target.style.width = `${e.width}px`;
-                        e.target.style.height = `${e.height}px`;
-                        e.target.style.transform = e.drag.transform;
+                    dragWithClip={true}
+                    onRender={e => {
+                        e.target.style.cssText += e.cssText;
                     }}
-                    onClip={e => {
-                        e.target.style.clipPath = e.clipStyle;
-                    }} />
+                />
             </div>
         </div>
     );