From 5f68143289bd25c505d40684662a071b39417727 Mon Sep 17 00:00:00 2001 From: Daybrush Date: Thu, 5 Oct 2023 01:33:02 +0900 Subject: [PATCH] fix: fix line break #1001 --- .../react-moveable/src/MoveableManager.tsx | 70 +++++++++++++++---- packages/react-moveable/src/types.ts | 1 + packages/react-moveable/src/utils.tsx | 4 +- .../stories/4-Options/0-Default.stories.tsx | 7 ++ .../4-Options/ReactRootContainerApp.tsx | 50 +++++++++++++ .../stories/4-Options/ReactZoomApp.tsx | 62 +++++----------- 6 files changed, 132 insertions(+), 62 deletions(-) create mode 100644 packages/react-moveable/stories/4-Options/ReactRootContainerApp.tsx diff --git a/packages/react-moveable/src/MoveableManager.tsx b/packages/react-moveable/src/MoveableManager.tsx index b2d5d3aeb..b9ca67457 100644 --- a/packages/react-moveable/src/MoveableManager.tsx +++ b/packages/react-moveable/src/MoveableManager.tsx @@ -97,6 +97,12 @@ export default class MoveableManager 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,14 +766,21 @@ export default class MoveableManager 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 { @@ -775,7 +788,7 @@ export default class MoveableManager top, bottom, right, - } = getPaddingBox(padding); + } = getPaddingBox(padding || {}); const n = is3d ? 4 : 3; // const clipPathInfo = getClipPath( @@ -808,12 +821,46 @@ export default class MoveableManager 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 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) => { diff --git a/packages/react-moveable/src/types.ts b/packages/react-moveable/src/types.ts index f658a0cc1..9c9a4eccc 100644 --- a/packages/react-moveable/src/types.ts +++ b/packages/react-moveable/src/types.ts @@ -273,6 +273,7 @@ export type MoveableManagerState = { container: SVGElement | HTMLElement | null | undefined; disableNativeEvent: boolean; gestos: Record; + renderLines: number[][][]; renderPoses: number[][]; posDelta: number[]; style: Partial>; diff --git a/packages/react-moveable/src/utils.tsx b/packages/react-moveable/src/utils.tsx index d70a33f1a..364da3e7e 100644 --- a/packages/react-moveable/src/utils.tsx +++ b/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), diff --git a/packages/react-moveable/stories/4-Options/0-Default.stories.tsx b/packages/react-moveable/stories/4-Options/0-Default.stories.tsx index 06e786830..8e0eae166 100644 --- a/packages/react-moveable/stories/4-Options/0-Default.stories.tsx +++ b/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"), diff --git a/packages/react-moveable/stories/4-Options/ReactRootContainerApp.tsx b/packages/react-moveable/stories/4-Options/ReactRootContainerApp.tsx new file mode 100644 index 000000000..11c375703 --- /dev/null +++ b/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) { + return ( +
+
92 x 167 (34, 84)
+
+
+
+
Target
+ { + 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); + }} + > +
+
+
+
+ ); +} diff --git a/packages/react-moveable/stories/4-Options/ReactZoomApp.tsx b/packages/react-moveable/stories/4-Options/ReactZoomApp.tsx index 11c375703..52f0d9bee 100644 --- a/packages/react-moveable/stories/4-Options/ReactZoomApp.tsx +++ b/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) { - return ( -
-
92 x 167 (34, 84)
-
-
-
-
Target
- { - 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); - }} - > -
-
-
-
- ); +export default function App() { + return
+
+ { + e.target.style.cssText += e.cssText; + }} + /> +
; }