diff --git a/src/components/workspace/cursor.tsx b/src/components/workspace/cursor.tsx index f5ef958..2b682e3 100644 --- a/src/components/workspace/cursor.tsx +++ b/src/components/workspace/cursor.tsx @@ -13,15 +13,14 @@ export const Cursor = () => { const Cursor = useSelector((state: any) => state.editor.cursor); - const workspace = document.getElementById(ids.workspace)?.getBoundingClientRect(); - const zoomControls = document.getElementById(ids.zoomControls)?.getBoundingClientRect(); - const mainControls = document.getElementById(ids.controls)?.getBoundingClientRect(); - const move = (e) => { const ptr = pointer(e); const x = ptr[0]; const y = ptr[1]; const customCursor = document.getElementById(ids.cursor); + const workspace = document.getElementById(ids.workspace)?.getBoundingClientRect(); + const mainControls = document.getElementById(ids.controls)?.getBoundingClientRect(); + const zoomControls = document.getElementById(ids.zoomControls)?.getBoundingClientRect(); if ( isWithinBounds(x, y, workspace) && !isWithinBounds(x, y, zoomControls) && diff --git a/src/hooks/interactions.ts b/src/hooks/interactions.ts index 79f0277..2805c59 100644 --- a/src/hooks/interactions.ts +++ b/src/hooks/interactions.ts @@ -7,22 +7,28 @@ import { default as interact } from "@interactjs/interact"; export const resizeCursors = ["ns-resize", "ew-resize", "nwse-resize", "nesw-resize"]; -const resizeAttributes = ["width", "height"]; - const useInteractions = () => { useEffect(() => { interact(".resizable").resizable({ edges: { left: true, right: true, bottom: true, top: true }, - invert: "reposition", listeners: { move(event) { const target = event.target; + const width = +event.target.getAttribute("width"); + const height = +event.target.getAttribute("height"); + const aspectRatio = width / height; const zoom = d3Extended.zoomTransform(document.querySelector(selectors.workspaceGroup)); - for (const attr of resizeAttributes) { - let v = +target.getAttribute(attr); - v += (event.deltaRect[attr] * 1) / zoom.k; - target.setAttribute(attr, Math.round(v / 10) * 10); + let dx = event.deltaRect.width; + let dy = event.deltaRect.height; + if (event.shiftKey) { + dy = dx / aspectRatio; + } + if (zoom.k < 1) { + dx *= 1 / zoom.k; + dy *= 1 / zoom.k; } + target.setAttribute("width", Math.abs(width + dx)); + target.setAttribute("height", Math.abs(height + dy)); } } });