fix: fix Resizable's wrong position calculation (#101)

* feat: add baseDirection props * fix: fix Resizable's wrong position calculation
daybrush · Nov 22, 2019 · 7d8a228 · 7d8a228
1 parent dbe369d
commit 7d8a228
Show file tree

Hide file tree

Showing 15 changed files with 161 additions and 74 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "moveable",
-  "version": "0.10.8",
+  "version": "0.11.0-rc2",
   "description": "Moveable is Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable, Groupable, Snappable.",
   "main": "./dist/moveable.cjs.js",
   "module": "./dist/moveable.esm.js",
@@ -57,7 +57,7 @@
   "dependencies": {
     "@egjs/component": "^2.1.2",
     "preact": "^10.0.4",
-    "preact-moveable": "^0.12.14"
+    "preact-moveable": "^0.13.0"
   },
   "devDependencies": {
     "@daybrush/builder": "^0.1.2",

diff --git a/packages/preact-moveable/package-lock.json b/packages/preact-moveable/package-lock.json
diff --git a/packages/preact-moveable/package.json b/packages/preact-moveable/package.json
@@ -1,6 +1,6 @@
 {
     "name": "preact-moveable",
-    "version": "0.12.14",
+    "version": "0.13.1",
     "description": "A Preact Component that create Moveable, Draggable, Resizable, Scalable, Rotatable, Pinchable, Groupable, Snappable.",
     "main": "./dist/moveable.cjs.js",
     "module": "./dist/moveable.esm.js",
@@ -61,6 +61,6 @@
     },
     "dependencies": {
         "preact-css-styler": "^1.0.0",
-        "react-moveable": "^0.13.12"
+        "react-moveable": "^0.14.2"
     }
 }
diff --git a/packages/react-moveable/package-lock.json b/packages/react-moveable/package-lock.json
diff --git a/packages/react-moveable/package.json b/packages/react-moveable/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-moveable",
-  "version": "0.13.12",
+  "version": "0.14.3",
   "description": "A React Component that create Moveable, Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable, Groupable.",
   "main": "./dist/moveable.cjs.js",
   "module": "./dist/moveable.esm.js",

diff --git a/packages/react-moveable/src/App.css b/packages/react-moveable/src/App.css
@@ -149,4 +149,9 @@ img {
 .box.box23 {
     border-left-width: 0px;
     border-right-width: 0px;
+    word-break: break-all;
+    height: auto;
+}
+.box.box23 span {
+    position: relative;
 }
diff --git a/packages/react-moveable/src/App.tsx b/packages/react-moveable/src/App.tsx
@@ -17,18 +17,20 @@ setAlias("matrix3d", ["transform", "matrix3d"]);
 
 class App extends React.Component {
     public moveable!: Moveable;
-    public state = {
-        target: null,
-        container: null,
-        targets: [],
-        isResizable: true,
-        emo: null,
-    } as {
+    public state: {
         container: any,
         target: any,
         emo: any,
+        isShift: boolean,
         targets: Array<HTMLElement | SVGElement>,
         isResizable: boolean,
+    } = {
+        target: null,
+        container: null,
+        targets: [],
+        isResizable: true,
+        isShift: false,
+        emo: null,
     };
     private itemMap: Map<HTMLElement |SVGElement, Frame> = new Map();
     private items: IObject<Frame> = {};
@@ -51,8 +53,8 @@ class App extends React.Component {
                     pinchable={true}
                     draggable={true}
                     rotatable={true}
-                    // resizable={true}
-                    scalable={true}
+                    resizable={true}
+                    // scalable={true}
                     ref={ref(this, "ab")}
                     // keepRatio={false}
                     target={this.state.targets}
@@ -154,7 +156,7 @@ class App extends React.Component {
                     target={selectedTarget}
                     container={document.querySelector<HTMLElement>("#con")}
                     ref={ref(this, "moveable")}
-                    keepRatio={true}
+                    // keepRatio={this.state.isShift}
                     origin={false}
                     // dragArea={true}
                     draggable={true}
@@ -352,9 +354,9 @@ class App extends React.Component {
         const keycon = new KeyController(window);
 
         keycon.keydown("shift", () => {
-            this.setState({ isResizable: false });
+            this.setState({ isResizable: false, isShift: true });
         }).keyup("shift", () => {
-            this.setState({ isResizable: true });
+            this.setState({ isResizable: true, isShift: false });
         });
 
         const targets: any[] = [].slice.call(document.querySelectorAll(`[data-target="box"] span`));

diff --git a/packages/react-moveable/src/react-moveable/DraggerUtils.ts b/packages/react-moveable/src/react-moveable/DraggerUtils.ts
@@ -6,7 +6,7 @@ import {
 import MoveableManager from "./MoveableManager";
 import { caculatePoses, getAbsoluteMatrix, getAbsolutePosesByState } from "./utils";
 import { splitUnit } from "@daybrush/utils";
-import { MoveableManagerState } from "./types";
+import { MoveableManagerState, GroupableProps, ResizableProps } from "./types";
 
 export function setDragStart(moveable: MoveableManager<any>, { datas }: any) {
     const {
@@ -229,12 +229,14 @@ export function getScaleDist(
 }
 
 export function getResizeDist(
-    moveable: MoveableManager<any>,
+    moveable: MoveableManager<GroupableProps>,
     width: number,
     height: number,
+    // prevWidth: number,
+    // prevHeight: number,
     direction: number[],
+    fixedPosition: number[],
     transformOrigin: string[],
-    dragClient?: number[],
 ) {
     const {
         groupable,
@@ -245,7 +247,7 @@ export function getResizeDist(
         offsetMatrix,
         is3d,
         width: prevWidth,
-        height: prevheight,
+        height: prevHeight,
         left,
         top,
     } = moveable.state;
@@ -256,14 +258,31 @@ export function getResizeDist(
         width,
         height,
         prevWidth,
-        prevheight,
+        prevHeight,
         prevOrigin,
     );
     const groupLeft = groupable ? left : 0;
     const groupTop = groupable ? top : 0;
     const nextMatrix = getNextMatrix(offsetMatrix, targetMatrix, nextOrigin, n);
-    const startPos = dragClient ? dragClient : getStartPos(getAbsolutePosesByState(moveable.state), direction);
-    const dist = getDist(startPos, nextMatrix, width, height, n, direction);
+    const dist = getDist(fixedPosition, nextMatrix, width, height, n, direction);
 
     return minus(dist, [groupLeft, groupTop]);
 }
+export function getStartDirection(
+    moveable: MoveableManager<ResizableProps>,
+    direction: number[],
+) {
+    const {
+        baseDirection = [-1, -1],
+    } = moveable.props;
+    return [
+        direction[0] ? direction[0] : baseDirection[0] * -1,
+        direction[1] ? direction[0] : baseDirection[1] * -1,
+    ];
+}
+export function getFixedPosition(
+    moveable: MoveableManager<ResizableProps>,
+    direction: number[],
+) {
+    return getStartPos(getAbsolutePosesByState(moveable.state), direction);
+}
diff --git a/packages/react-moveable/src/react-moveable/MoveableManager.tsx b/packages/react-moveable/src/react-moveable/MoveableManager.tsx
@@ -188,9 +188,14 @@ export default class MoveableManager<T = {}, U = {}>
         this.updateRect(type, true);
     }
     public getRect(): RectInfo {
+        const state = this.state;
         const poses = getAbsolutePosesByState(this.state);
         const [pos1, pos2, pos3, pos4] = poses;
         const rect = getRect(poses);
+        const {
+            width: offsetWidth,
+            height: offsetHeight,
+        } = state;
         const {
             width,
             height,
@@ -206,6 +211,8 @@ export default class MoveableManager<T = {}, U = {}>
             pos2,
             pos3,
             pos4,
+            offsetWidth,
+            offsetHeight,
         };
     }
     public checkUpdate() {