Fix : Node handle misallignement during live edits

.changeset/node-live.md

@@ -0,0 +1,5 @@
+---
+"json-schema-studio": minor
+---
+
+Fix : Handle Node edge misallignment during Live edits 

src/components/CustomReactFlowNode.tsx

@@ -1,6 +1,6 @@
-import { Handle } from "@xyflow/react";
+import { Handle, useUpdateNodeInternals } from "@xyflow/react";
 import type { RFNodeData } from "../utils/processAST";
-import { useContext, useLayoutEffect, useRef, useState } from "react";
+import { useContext, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { AppContext } from "../contexts/AppContext";
 
 const CustomNode = ({ data, id, selected }: { data: RFNodeData; id: string; selected: boolean }) => {
@@ -13,18 +13,17 @@ const CustomNode = ({ data, id, selected }: { data: RFNodeData; id: string; sele
     {}
   );
 
-  useLayoutEffect(() => {
-    const container = Object.values(rowRefs.current)[0]?.offsetParent;
-    if (!(container instanceof HTMLElement)) return;
+  const updateNodeInternals = useUpdateNodeInternals();
+  useEffect(() => {
+    updateNodeInternals(id);
+  }, [handleOffsets, id, updateNodeInternals]);
 
-    const containerRect = container.getBoundingClientRect();
+  useLayoutEffect(() => {
     const offsets: Record<string, number> = {};
 
     for (const [key, row] of Object.entries(rowRefs.current)) {
       if (!row) continue;
-
-      const rect = row.getBoundingClientRect();
-      offsets[key] = rect.top + rect.height / 2 - containerRect.top;
+      offsets[key] = row.offsetTop + row.offsetHeight / 2;
     }
 
     setHandleOffsets(offsets);

src/components/GraphView.tsx

@@ -58,6 +58,7 @@ const GraphView = ({
   const [nodes, setNodes, onNodeChange] = useNodesState<GraphNode>([]);
   const [edges, setEdges, onEdgeChange] = useEdgesState<GraphEdge>([]);
   const [collisionResolved, setCollisionResolved] = useState(false);
+  const [isGraphReady, setIsGraphReady] = useState(false);
   const [hoveredEdgeId, setHoveredEdgeId] = useState<string | null>(null);
   const [matchedNodes, setMatchedNodes] = useState<GraphNode[]>([]);
   const [currentMatchIndex, setCurrentMatchIndex] = useState(0);
@@ -266,7 +267,8 @@ const GraphView = ({
     setCollisionResolved(true);
 
     setTimeout(() => {
-      fitView({ duration: 800, padding: 0.05 });
+      fitView({ duration: isGraphReady ? 800 : 0, padding: 0.05 });
+      setIsGraphReady(true);
     }, 300);
   }, [nodes, collisionResolved, allNodesMeasured, setNodes, fitView]);
 
@@ -286,8 +288,13 @@ const GraphView = ({
     if (!containerRef.current) return;
 
     let timeoutId: ReturnType<typeof setTimeout>;
+    let initialized = false;
 
     const observer = new ResizeObserver(() => {
+      if (!initialized) {
+        initialized = true;
+        return;
+      }
       clearTimeout(timeoutId);
       timeoutId = setTimeout(() => {
         const currentZoom = getZoom();
@@ -410,8 +417,11 @@ const GraphView = ({
     <div
       ref={containerRef}
       tabIndex={0}
-      // onKeyDown={handleKeyDown}
       className="relative w-full h-full"
+      style={{
+        opacity: isGraphReady ? 1 : 0,
+        transition: isGraphReady ? "opacity 0.4s ease-in" : "none",
+      }}
     >
       <ReactFlow
         nodes={nodes}