fix: fix edge resize snap, snap-back on release, and core block handles (#100)

Author: 3xpyth0n

src/app/components/project/CustomNodeResizer.tsx

@@ -4,6 +4,7 @@ import { memo, useCallback, useMemo, useRef } from "react";
 import {
   NodeResizer,
   NodeResizerProps,
+  NodeResizeControl,
   useViewport,
   useStore,
   useNodeId,
@@ -249,12 +250,11 @@ const CustomNodeResizer = memo((props: NodeResizerProps) => {
     (event, params) => {
       resizeStateRef.current = null;
       helperLinesCtxRef.current?.setHelperLines([]);
-      helperLinesCtxRef.current?.setActiveResizeSnap(null);
 
       const node = resizingNodeRef.current;
       const fallbackParams: ResizeParams | undefined =
-        params ??
         lastResizeParamsRef.current ??
+        params ??
         (node
           ? {
               x: node.position.x,
@@ -347,6 +347,7 @@ const CustomNodeResizer = memo((props: NodeResizerProps) => {
                 y: corrected.y,
                 width: corrected.width,
                 height: corrected.height,
+                handle: currentHandle,
               }
             : null,
         );
@@ -366,6 +367,42 @@ const CustomNodeResizer = memo((props: NodeResizerProps) => {
     return null;
   }
 
+  const isCore = resizingNode?.type === "core";
+
+  const coreHandleStyle = useMemo(
+    () =>
+      ({
+        background: "transparent",
+        backgroundColor: "transparent",
+        border: "none",
+        boxShadow: "none",
+        width: `${hitboxSize}px`,
+        height: `${hitboxSize}px`,
+        "--hitbox-size": `${hitboxSize}px`,
+        pointerEvents: "auto",
+      }) as React.CSSProperties,
+    [hitboxSize],
+  );
+
+  if (isCore) {
+    return (
+      <NodeResizeControl
+        position="bottom-right"
+        className={`${styles.handle} ${props.handleClassName || ""}`}
+        style={coreHandleStyle}
+        minWidth={props.minWidth}
+        minHeight={props.minHeight}
+        maxWidth={props.maxWidth}
+        maxHeight={props.maxHeight}
+        keepAspectRatio={props.keepAspectRatio}
+        shouldResize={shouldResize}
+        onResizeStart={onResizeStart}
+        onResize={onResize}
+        onResizeEnd={onResizeEnd}
+      />
+    );
+  }
+
   return (
     <NodeResizer
       {...props}

src/app/components/project/HelperLinesContext.tsx

@@ -9,6 +9,7 @@ export interface ActiveResizeSnap {
   y: number;
   width: number;
   height: number;
+  handle: string;
 }
 
 interface HelperLinesContextValue {

src/app/components/project/hooks/useProjectCanvasGraph.ts

@@ -385,17 +385,34 @@ export const useProjectCanvasGraph = ({
       });
 
       const snap = activeResizeSnapRef.current;
+      const snapMovesX =
+        snap !== null &&
+        (snap.handle === "left" ||
+          snap.handle === "top-left" ||
+          snap.handle === "bottom-left");
+      const snapMovesY =
+        snap !== null &&
+        (snap.handle === "top" ||
+          snap.handle === "top-left" ||
+          snap.handle === "top-right");
       const resolvedChanges = snap
         ? filteredChanges.map((c) => {
             if (!("id" in c) || c.id !== snap.id) return c;
             if (c.type === "dimensions" && c.dimensions) {
+              if (c.resizing === false) activeResizeSnapRef.current = null;
               return {
                 ...c,
                 dimensions: { width: snap.width, height: snap.height },
               };
             }
             if (c.type === "position" && c.position) {
-              return { ...c, position: { x: snap.x, y: snap.y } };
+              return {
+                ...c,
+                position: {
+                  x: snapMovesX ? snap.x : c.position.x,
+                  y: snapMovesY ? snap.y : c.position.y,
+                },
+              };
             }
             return c;
           })