feat: add rotateAroundControls prop

daybrush · Jul 23, 2022 · d473ffa · d473ffa
1 parent 7a9012e
commit d473ffa
Show file tree

Hide file tree

Showing 10 changed files with 298 additions and 67 deletions.
diff --git a/packages/react-moveable/package.json b/packages/react-moveable/package.json
@@ -72,21 +72,20 @@
         "@types/react-dom": "^16.9.4",
         "@typescript-eslint/eslint-plugin": "^3.9.1",
         "@typescript-eslint/parser": "^3.9.1",
-        "autoprefixer": "^10.2.1",
         "babel-loader": "^8.0.6",
         "css-loader": "^5.0.1",
         "eslint": "^7.7.0",
         "eslint-plugin-import": "^2.22.1",
         "eslint-plugin-react": "^7.22.0",
         "gh-pages": "^2.1.1",
         "keycon": "^1.0.0",
-        "postcss-loader": "^4.1.0",
         "print-sizes": "0.0.4",
         "pvu": "^0.6.1",
         "raw-loader": "^4.0.2",
         "react": "^16.8.6",
         "react-dom": "^16.8.6",
         "react-infinite-viewer": "^0.12.0",
+        "react-keycon": "^0.1.2",
         "react-selecto": "^1.15.0",
         "scenejs": "^1.5.0",
         "shape-svg": "^0.3.3",
@@ -103,6 +102,7 @@
         "@scena/dragscroll": "^1.1.1",
         "@scena/event-emitter": "^1.0.5",
         "@scena/matrix": "^1.1.1",
+        "@scena/react-guides": "^0.17.1",
         "css-to-mat": "^1.0.3",
         "framework-utils": "^1.1.0",
         "gesto": "^1.9.0",

diff --git a/packages/react-moveable/src/react-moveable/ables/Rotatable.tsx b/packages/react-moveable/src/react-moveable/ables/Rotatable.tsx
@@ -1,6 +1,6 @@
 import {
     prefix, triggerEvent, fillParams,
-    calculatePosition, fillEndParams, getRotationRad, getRefTargets, catchEvent,
+    calculatePosition, fillEndParams, getRotationRad, getRefTargets, catchEvent, getProps,
 } from "../utils";
 import {
     IObject, hasClass, getRad,
@@ -31,7 +31,8 @@ import {
     getTransformDirection,
     getPosByDirection,
 } from "../gesto/GestoUtils";
-import { renderDirectionControls } from "../renderDirections";
+import { renderAroundControls, renderDirectionControls } from "../renderDirections";
+import { DIRECTIONS } from "../consts";
 
 /**
  * @namespace Rotatable
@@ -195,7 +196,11 @@ export function dragControlCondition(moveable: MoveableManagerInterface<Rotatabl
         return e.requestAble === "rotatable";
     }
     const target = e.inputEvent.target as HTMLElement;
-    if (hasClass(target, prefix("rotation-control"))) {
+    if (
+        hasClass(target, prefix("rotation-control"))
+        || hasClass(target, prefix("around-control"))
+        || (hasClass(target, prefix("control")) && hasClass(target, prefix("rotatable")))
+    ) {
         return true;
     }
     const rotationTarget = moveable.props.rotationTarget;
@@ -211,6 +216,74 @@ export function dragControlCondition(moveable: MoveableManagerInterface<Rotatabl
     return false;
 }
 
+const directionCSS = DIRECTIONS.map(dir => {
+    let top = "";
+    let left = "";
+    let originX = "center";
+    let originY = "center";
+
+    if (dir.indexOf("n") > -1) {
+        top = "top: -20px;";
+        originY = "bottom";
+    }
+    if (dir.indexOf("s") > -1) {
+        top = "top: 0px;";
+        originY = "top";
+    }
+    if (dir.indexOf("w") > -1) {
+        left = "left: -20px;";
+        originX = "right";
+    }
+    if (dir.indexOf("e") > -1) {
+        left = "left: 0px;";
+        originX = "left";
+    }
+    return `.around-control[data-direction*="${dir}"] {
+        ${left}${top}
+        transform-origin: ${originX} ${originY};
+    }`;
+}).join("\n");
+const css = `.rotation {
+    position: absolute;
+    height: 40px;
+    width: 1px;
+    transform-origin: 50% 100%;
+    height: calc(40px * var(--zoom));
+    top: auto;
+    left: 0;
+    bottom: 100%;
+    will-change: transform;
+}
+.rotation .rotation-line {
+    display: block;
+    width: 100%;
+    height: 100%;
+    transform-origin: 50% 50%;
+}
+.rotation .rotation-control {
+    border-color: #4af;
+    border-color: var(--moveable-color);
+    background:#fff;
+    cursor: alias;
+}
+.rotatable.direction.control {
+    cursor: alias;
+}
+.around-control {
+    position: absolute;
+    will-change: transform;
+    width: 20px;
+    height: 20px;
+    left: -10px;
+    top: -10px;
+    box-sizing: border-box;
+    background: transparent;
+    z-index: 8;
+    cursor: alias;
+    transform-origin: center center;
+}
+${directionCSS}
+`;
 export default {
     name: "rotatable",
     canPinch: true,
@@ -220,6 +293,8 @@ export default {
         throttleRotate: Number,
         renderDirections: Object,
         rotationTarget: Object,
+        rotateAroundControls: Boolean,
+        edge: Boolean,
     } as const,
     events: {
         onRotateStart: "rotateStart",
@@ -231,38 +306,15 @@ export default {
         onRotateGroup: "rotateGroup",
         onRotateGroupEnd: "rotateGroupEnd",
     } as const,
-    css: [
-        `.rotation {
-            position: absolute;
-            height: 40px;
-            width: 1px;
-            transform-origin: 50% 100%;
-            height: calc(40px * var(--zoom));
-            top: auto;
-            left: 0;
-            bottom: 100%;
-            will-change: transform;
-        }
-        .rotation .rotation-line {
-            display: block;
-            width: 100%;
-            height: 100%;
-            transform-origin: 50% 50%;
-        }
-        .rotation .rotation-control {
-            border-color: #4af;
-            border-color: var(--moveable-color);
-            background:#fff;
-            cursor: alias;
-        }`,
-    ],
+    css: [css],
     render(moveable: MoveableManagerInterface<RotatableProps>, React: Renderer): any {
         const {
             rotatable,
             rotationPosition,
             zoom,
             renderDirections,
-        } = moveable.props;
+            rotateAroundControls,
+        } = getProps(moveable.props, "rotatable");
         const {
             renderPoses,
             direction,
@@ -293,6 +345,9 @@ export default {
         if (renderDirections) {
             jsxs.push(...renderDirectionControls(moveable, [], "rotatable", React));
         }
+        if (rotateAroundControls) {
+            jsxs.push(...renderAroundControls(moveable, React));
+        }
 
         return jsxs;
     },
@@ -539,9 +594,6 @@ export default {
             absoluteRotation,
 
             isPinch: !!isPinch,
-            // setValue(pos: number) {
-            //     datas.requestValue = pos;
-            // },
             ...fillTransformEvent(
                 moveable,
                 nextTransform,

diff --git a/packages/react-moveable/src/react-moveable/ables/Scalable.ts b/packages/react-moveable/src/react-moveable/ables/Scalable.ts
@@ -51,6 +51,7 @@ export default {
         throttleScale: Number,
         renderDirections: String,
         keepRatio: Boolean,
+        edge: Boolean,
     } as const,
     events: {
         onScaleStart: "scaleStart",

diff --git a/packages/react-moveable/src/react-moveable/ables/Warpable.tsx b/packages/react-moveable/src/react-moveable/ables/Warpable.tsx
@@ -62,6 +62,7 @@ export default {
     props: {
         warpable: Boolean,
         renderDirections: Array,
+        edge: Boolean,
     } as const,
     events: {
         onWarpStart: "warpStart",

diff --git a/packages/react-moveable/src/react-moveable/ables/consts.ts b/packages/react-moveable/src/react-moveable/ables/consts.ts
@@ -24,8 +24,8 @@ import IndividualGroupable from "./IndividualGroupable";
 
 export const MOVEABLE_ABLES = /*#__PURE__*/[
     BeforeRenderable,
-    Default, Snappable, Pinchable, Draggable, edgeDraggable, Rotatable,
-    Resizable, Scalable, Warpable, Scrollable, Padding, Origin,
+    Default, Snappable, Pinchable, Draggable, edgeDraggable,
+    Resizable, Scalable, Warpable, Rotatable, Scrollable, Padding, Origin,
     OriginDraggable,
     Clippable, Roundable, Groupable, IndividualGroupable,
     Clickable,

diff --git a/packages/react-moveable/stories/5A-Advanced/4-Rotatable/Deafult.stories.tsx b/packages/react-moveable/stories/5A-Advanced/4-Rotatable/Deafult.stories.tsx
@@ -8,3 +8,7 @@ group.add("rotate with custom origin", {
     app: require("./ReactCustomOriginApp").default,
     text: require("!!raw-loader!./ReactCustomOriginApp").default,
 });
+group.add("rotate with direction controls", {
+    app: require("./ReactRotateWithControlsApp").default,
+    text: require("!!raw-loader!./ReactRotateWithControlsApp").default,
+});
diff --git a/packages/react-moveable/stories/5A-Advanced/4-Rotatable/ReactRotateWithControlsApp.tsx b/packages/react-moveable/stories/5A-Advanced/4-Rotatable/ReactRotateWithControlsApp.tsx
@@ -0,0 +1,34 @@
+import * as React from "react";
+import Moveable, { DIRECTIONS} from "../../../src/react-moveable";
+import { useKeycon } from "react-keycon";
+
+export default function App() {
+    const { isKeydown } = useKeycon({
+        keys: ["meta"],
+    });
+
+    return (
+        <div className="root">
+            <div className="target">Target</div>
+            <Moveable
+                target={".target"}
+                rotatable={{
+                    renderDirections: isKeydown ? DIRECTIONS : false,
+                }}
+                resizable={{
+                    renderDirections: isKeydown ? false : true,
+                }}
+                rotateAroundControls={true}
+                onResize={e => {
+                    e.target.style.cssText += e.cssText;
+                }}
+                onRotateStart={e => {
+                    e.setFixedDirection([-0.5, -0.5]);
+                }}
+                onRotate={e => {
+                    e.target.style.transform = e.drag.transform;
+                }}
+            />
+        </div>
+    );
+}
diff --git a/packages/react-moveable/stories/99-Tests/ReactLargeZoomElementGuidelinesApp.tsx b/packages/react-moveable/stories/99-Tests/ReactLargeZoomElementGuidelinesApp.tsx
@@ -2,6 +2,7 @@ import * as React from "react";
 import Moveable from "@/react-moveable";
 
 export default function App() {
+
     return <div className="container" style={{
     }}>
         <div className="preview" style={{