Feat: added shift key support to maintain aspect ratio during resize

mezh-hq · Dec 7, 2024 · acf6b31 · acf6b31
1 parent e0dd1d7
commit acf6b31
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 11 deletions.
diff --git 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
@@ -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));
         }
       }
     });