fix: fix line break #1001

packages/react-moveable/src/MoveableManager.tsx

@@ -97,6 +97,12 @@ export default class MoveableManager<T = {}>
     public state: MoveableManagerState = {
         container: null,
         gestos: {},
+        renderLines: [
+            [[0, 0], [0, 0]],
+            [[0, 0], [0, 0]],
+            [[0, 0], [0, 0]],
+            [[0, 0], [0, 0]],
+        ],
         renderPoses: [[0, 0], [0, 0], [0, 0], [0, 0]],
         disableNativeEvent: false,
         posDelta: [0, 0],
@@ -760,22 +766,29 @@ export default class MoveableManager<T = {}>
             top: stateTop,
             isPersisted,
         } = state;
+        const zoom = props.zoom || 1;
 
-        if (!padding) {
+        if (!padding && zoom <= 1) {
             state.renderPoses = [
                 pos1,
                 pos2,
                 pos3,
                 pos4,
             ];
+            state.renderLines = [
+                [pos1, pos2],
+                [pos2, pos4],
+                [pos4, pos3],
+                [pos3, pos1],
+            ];
             return;
         }
         const {
             left,
             top,
             bottom,
             right,
-        } = getPaddingBox(padding);
+        } = getPaddingBox(padding || {});
         const n = is3d ? 4 : 3;
 
         // const clipPathInfo = getClipPath(
@@ -808,12 +821,46 @@ export default class MoveableManager<T = {}>
             createOriginMatrix(transformOrigin, n),
         );
 
+        const renderPos1 = calculatePadding(nextMatrix, pos1, [-left, -top], n);
+        const renderPos2 = calculatePadding(nextMatrix, pos2, [right, -top], n);
+        const renderPos3 = calculatePadding(nextMatrix, pos3, [-left, bottom], n);
+        const renderPos4 = calculatePadding(nextMatrix, pos4, [right, bottom], n);
+
         state.renderPoses = [
-            calculatePadding(nextMatrix, pos1, [-left, -top], n),
-            calculatePadding(nextMatrix, pos2, [right, -top], n),
-            calculatePadding(nextMatrix, pos3, [-left, bottom], n),
-            calculatePadding(nextMatrix, pos4, [right, bottom], n),
+            renderPos1,
+            renderPos2,
+            renderPos3,
+            renderPos4,
         ];
+        state.renderLines = [
+            [renderPos1, renderPos2],
+            [renderPos2, renderPos4],
+            [renderPos4, renderPos3],
+            [renderPos3, renderPos1],
+        ];
+
+        if (zoom) {
+            const zoomOffset = zoom / 2;
+
+            state.renderLines = [
+                [
+                    calculatePadding(nextMatrix, pos1, [-left - zoomOffset, -top], n),
+                    calculatePadding(nextMatrix, pos2, [right + zoomOffset, -top], n),
+                ],
+                [
+                    calculatePadding(nextMatrix, pos2, [right, -top - zoomOffset], n),
+                    calculatePadding(nextMatrix, pos4, [right, bottom + zoomOffset], n),
+                ],
+                [
+                    calculatePadding(nextMatrix, pos4, [right + zoomOffset, bottom], n),
+                    calculatePadding(nextMatrix, pos3, [-left - zoomOffset, bottom], n),
+                ],
+                [
+                    calculatePadding(nextMatrix, pos3, [-left, bottom + zoomOffset], n),
+                    calculatePadding(nextMatrix, pos1, [-left, -top - zoomOffset], n),
+                ],
+            ];
+        }
     }
     public checkUpdate() {
         this._isPropTargetChanged = false;
@@ -1043,18 +1090,13 @@ export default class MoveableManager<T = {}>
         if (hideDefaultLines || (parentMoveable && hideChildMoveableDefaultLines)) {
             return [];
         }
-        const renderPoses = this.getState().renderPoses;
+        const state = this.getState();
         const Renderer = {
             createElement,
         };
 
-        return [
-            [0, 1],
-            [1, 3],
-            [3, 2],
-            [2, 0],
-        ].map(([from, to], i) => {
-            return renderLine(Renderer, "", renderPoses[from], renderPoses[to], zoom!, `render-line-${i}`);
+        return state.renderLines.map((line, i) => {
+            return renderLine(Renderer, "", line[0], line[1], zoom!, `render-line-${i}`);
         });
     }
     private _onPreventClick = (e: any) => {

packages/react-moveable/src/types.ts

@@ -273,6 +273,7 @@ export type MoveableManagerState<T = {}> = {
     container: SVGElement | HTMLElement | null | undefined;
     disableNativeEvent: boolean;
     gestos: Record<string, Gesto | CustomGesto | null>;
+    renderLines: number[][][];
     renderPoses: number[][];
     posDelta: number[];
     style: Partial<Writable<CSSStyleDeclaration>>;

packages/react-moveable/src/utils.tsx

@@ -1215,8 +1215,8 @@ export function calculatePadding(
         return pos;
     }
 
-    const xAdded = calculatePosition(matrix, [normalized(added[0]), 0], n);
-    const yAdded = calculatePosition(matrix, [0, normalized(added[1])], n);
+    const xAdded = calculatePosition(matrix, [normalized(added[0] || 1), 0], n);
+    const yAdded = calculatePosition(matrix, [0, normalized(added[1] || 1)], n);
     const nextAdded = calculatePosition(matrix, [
         added[0] / getDistSize(xAdded),
         added[1] / getDistSize(yAdded),

packages/react-moveable/stories/4-Options/0-Default.stories.tsx

@@ -137,9 +137,16 @@ export const OptionsRootContainer = add("rootContainer (css transformed containe
 });
 
 export const OptionsRootContainerZoom = add("rootContainer (css zoomed container)", {
+    app: require("./ReactRootContainerApp").default,
+    path: require.resolve("./ReactRootContainerApp"),
+});
+
+export const OptionsZoom = add("zoom (line, control)", {
     app: require("./ReactZoomApp").default,
     path: require.resolve("./ReactZoomApp"),
 });
+
+
 export const OptionsAccuratePosition = add("useAccuratePosition (Render in a more accurate position)", {
     app: require("./ReactUseAccuratePositionApp").default,
     path: require.resolve("./ReactUseAccuratePositionApp"),

packages/react-moveable/stories/4-Options/ReactRootContainerApp.tsx

@@ -0,0 +1,50 @@
+import * as React from "react";
+import Moveable from "@/react-moveable";
+
+export default function App(props: Record<string, any>) {
+    return (
+        <div className="margin no-relative">
+            <div style={{
+                position: "absolute",
+                left: "84px",
+                top: "159px",
+                zIndex: 1,
+            }}>92 x 167 (34, 84)</div>
+            <div className="root" style={{
+                // position: "relative",
+                padding: "10px",
+            }}>
+                <div style={{
+                    zoom: 0.5,
+                    position: "relative",
+                }}>
+                    <div style={{
+                        position: "relative",
+                        marginTop: "100px",
+                        width: "500px",
+                        height: "500px",
+                    }}>
+                        <div className="target" style={{
+                            transform: "translate(0px, 0px)",
+                        }}>Target</div>
+                        <Moveable
+                            target={".target"}
+                            draggable={true}
+                            rotatable={true}
+                            resizable={true}
+                            rootContainer={document.body}
+                            onRender={e => {
+                                e.target.style.cssText += e.cssText;
+                            }}
+                            onRenderEnd={e => {
+                                console.log("RCR", e.moveable.state.rootContainerClientRect);
+                                console.log("ORM", e.moveable.state.originalRootMatrix);
+                                console.log("MCR", e.moveable.state.moveableClientRect);
+                            }}
+                        ></Moveable>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}

packages/react-moveable/stories/4-Options/ReactZoomApp.tsx

@@ -1,50 +1,20 @@
 import * as React from "react";
 import Moveable from "@/react-moveable";
 
-export default function App(props: Record<string, any>) {
-    return (
-        <div className="margin no-relative">
-            <div style={{
-                position: "absolute",
-                left: "84px",
-                top: "159px",
-                zIndex: 1,
-            }}>92 x 167 (34, 84)</div>
-            <div className="root" style={{
-                // position: "relative",
-                padding: "10px",
-            }}>
-                <div style={{
-                    zoom: 0.5,
-                    position: "relative",
-                }}>
-                    <div style={{
-                        position: "relative",
-                        marginTop: "100px",
-                        width: "500px",
-                        height: "500px",
-                    }}>
-                        <div className="target" style={{
-                            transform: "translate(0px, 0px)",
-                        }}>Target</div>
-                        <Moveable
-                            target={".target"}
-                            draggable={true}
-                            rotatable={true}
-                            resizable={true}
-                            rootContainer={document.body}
-                            onRender={e => {
-                                e.target.style.cssText += e.cssText;
-                            }}
-                            onRenderEnd={e => {
-                                console.log("RCR", e.moveable.state.rootContainerClientRect);
-                                console.log("ORM", e.moveable.state.originalRootMatrix);
-                                console.log("MCR", e.moveable.state.moveableClientRect);
-                            }}
-                        ></Moveable>
-                    </div>
-                </div>
-            </div>
-        </div>
-    );
+export default function App() {
+    return <div className="container">
+        <div className="target" style={{
+            width: "300px",
+            height: "300px",
+        }}></div>
+        <Moveable
+            target={".target"}
+            draggable={true}
+            rotatable={true}
+            zoom={5}
+            onRender={e => {
+                e.target.style.cssText += e.cssText;
+            }}
+        />
+    </div>;
 }