@industry-theme/principal-view-panels 0.12.45 → 0.12.46

package/dist/panels.bundle.js

@@ -86441,6 +86441,11 @@ const NodeTooltip = ({ description, otel, sources, references, visible, nodeRef
   }
   return renderTooltipContent();
 };
+const GraphEditContext = createContext({});
+const GraphEditProvider = ({ children: children2, value }) => {
+  return jsx(GraphEditContext.Provider, { value, children: children2 });
+};
+const useGraphEdit = () => useContext(GraphEditContext);
 function hexToLightColor(hexColor, lightness = 0.88) {
   const hex2 = hexColor.replace("#", "");
   const r2 = parseInt(hex2.substring(0, 2), 16);
@@ -86455,6 +86460,8 @@ function hexToLightColor(hexColor, lightness = 0.88) {
 const CustomNode = ({ data, selected: selected2, dragging }) => {
   var _a, _b, _c, _d, _e2, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
   const { theme: theme2 } = useTheme();
+  const { onNodeResizeEnd } = useGraphEdit();
+  const nodeId = useNodeId();
   const [isHovered, setIsHovered] = useState(false);
   const nodeRef = useRef(null);
   const nodeProps = data;
@@ -86475,6 +86482,14 @@ const CustomNode = ({ data, selected: selected2, dragging }) => {
     // Default to not hidden
   } = nodeProps;
   const nodeOpacity = isHidden ? 0.4 : isActive ? 1 : 0.1;
+  const handleResizeEnd = useCallback((_event, params) => {
+    if (nodeId && onNodeResizeEnd && params.width && params.height) {
+      onNodeResizeEnd(nodeId, {
+        width: Math.round(params.width),
+        height: Math.round(params.height)
+      });
+    }
+  }, [nodeId, onNodeResizeEnd]);
   console.log("[CustomNode] Node data:", {
     name: nodeProps.name,
     nodeDataKeys: nodeData ? Object.keys(nodeData).join(", ") : "undefined",
@@ -86884,7 +86899,7 @@ const CustomNode = ({ data, selected: selected2, dragging }) => {
     }
     return offsetStyle;
   };
-  return jsxs(Fragment, { children: [editable && jsx(NodeResizer, { color: strokeColor, isVisible: selected2, minWidth, minHeight, keepAspectRatio, handleStyle: {
+  return jsxs(Fragment, { children: [editable && jsx(NodeResizer, { color: strokeColor, isVisible: selected2, minWidth, minHeight, keepAspectRatio, onResizeEnd: handleResizeEnd, handleStyle: {
     width: 8,
     height: 8,
     borderRadius: 2,
@@ -87347,7 +87362,7 @@ const CenterIndicator = ({ color: color2 }) => {
     zIndex: 5
   }, children: [jsx("line", { x1: screenX, y1: screenY - size, x2: screenX, y2: screenY + size, stroke: color2, strokeWidth, opacity: 0.7 }), jsx("line", { x1: screenX - size, y1: screenY, x2: screenX + size, y2: screenY, stroke: color2, strokeWidth, opacity: 0.7 }), jsx("circle", { cx: screenX, cy: screenY, r: 3, fill: color2, opacity: 0.7 })] });
 };
-const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges, violations = [], configName: _configName, showMinimap = false, showControls = true, showBackground = true, backgroundVariant = "lines", backgroundGap, showCenterIndicator = false, showTooltips = true, fitViewDuration = 200, highlightedNodeId, activeNodeIds, events = [], onEventProcessed, editable = false, onPendingChangesChange, onEditStateChange, editStateRef, onNodeClick: onNodeClickProp, fitViewToNodeIds, fitViewPadding = 0.2, draggableNodeIds, onNodeDragStop: onNodeDragStopProp, onCopy }) => {
+const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges, violations = [], configName: _configName, showMinimap = false, showControls = true, showBackground = true, backgroundVariant = "lines", backgroundGap, showCenterIndicator = false, showTooltips = true, fitViewDuration = 200, highlightedNodeId, activeNodeIds, events = [], onEventProcessed, editable = false, onPendingChangesChange, onEditStateChange, editStateRef, resetVisualStateRef, onNodeClick: onNodeClickProp, fitViewToNodeIds, fitViewPadding = 0.2, draggableNodeIds, onNodeDragStop: onNodeDragStopProp, onCopy }) => {
   const { fitView: fitView2, fitBounds, getNodes } = useReactFlow();
   const updateNodeInternals2 = useUpdateNodeInternals();
   const { theme: theme2 } = useTheme();
@@ -87441,6 +87456,18 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
     onEditStateChange == null ? void 0 : onEditStateChange(newState);
     onPendingChangesChange == null ? void 0 : onPendingChangesChange(hasChanges);
   }, [editStateRef, onEditStateChange, onPendingChangesChange, checkHasChanges]);
+  const handleNodeResizeEnd = useCallback((nodeId, dimensions) => {
+    if (!editable)
+      return;
+    updateEditState((prev) => {
+      const newDimensions = new Map(prev.dimensionChanges);
+      newDimensions.set(nodeId, dimensions);
+      return { ...prev, dimensionChanges: newDimensions };
+    });
+  }, [editable, updateEditState]);
+  const graphEditContextValue = useMemo(() => ({
+    onNodeResizeEnd: handleNodeResizeEnd
+  }), [handleNodeResizeEnd]);
   const detectAlignmentGuides = useCallback((draggingNodeId, nodes2) => {
     const threshold = 5;
     const guides = [];
@@ -88024,21 +88051,6 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
       });
     }
     const positionChanges = changes.filter((change) => change.type === "position" && "position" in change && change.position !== void 0 && "dragging" in change && change.dragging === false);
-    const dimensionChanges = changes.filter((change) => change.type === "dimensions" && "dimensions" in change && change.dimensions !== void 0 && "resizing" in change && change.resizing === false);
-    if (dimensionChanges.length > 0) {
-      updateEditState((prev) => {
-        const newDimensions = new Map(prev.dimensionChanges);
-        for (const change of dimensionChanges) {
-          if (change.dimensions) {
-            newDimensions.set(change.id, {
-              width: Math.round(change.dimensions.width),
-              height: Math.round(change.dimensions.height)
-            });
-          }
-        }
-        return { ...prev, dimensionChanges: newDimensions };
-      });
-    }
     if (positionChanges.length > 0) {
       updateEditState((prev) => {
         const newPositions = new Map(prev.positionChanges);
@@ -88104,6 +88116,13 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
       setXyflowLocalEdges(xyflowEdgesBase);
     }
   }, [baseEdgesKey, xyflowEdgesBase]);
+  useEffect(() => {
+    resetVisualStateRef.current = () => {
+      setXyflowLocalNodes(xyflowNodesBase);
+      setXyflowLocalEdges(xyflowEdgesBase);
+      onPendingChangesChange == null ? void 0 : onPendingChangesChange(false);
+    };
+  }, [xyflowNodesBase, xyflowEdgesBase, onPendingChangesChange]);
   const xyflowEdges = editable ? xyflowLocalEdges : xyflowEdgesBase;
   const handleEdgesChange = useCallback((changes) => {
     if (!editable)
@@ -88159,7 +88178,7 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
     }, 150);
     return () => clearTimeout(timeoutId);
   }, [fitViewToNodeIdsKey, fitViewToNodeIds, fitViewPadding, fitView2, fitViewDuration, getNodes, fitBounds]);
-  return jsxs(Fragment, { children: [jsxs(index$2, { nodes: xyflowNodes, edges: xyflowEdges, nodeTypes, edgeTypes, minZoom: 0.1, maxZoom: 4, defaultEdgeOptions: { type: "custom" }, onEdgeClick, onNodeClick, onNodeDoubleClick, onNodeDrag: handleNodeDrag, onNodeDragStop: handleNodeDragStop, proOptions: { hideAttribution: true }, nodesDraggable: editable || draggableNodeIds && draggableNodeIds.size > 0, elementsSelectable: editable, selectNodesOnDrag: false, nodesConnectable: editable, edgesReconnectable: editable, reconnectRadius: 25, elevateEdgesOnSelect: true, onNodesChange: handleNodesChange, onEdgesChange: handleEdgesChange, onConnect: handleConnect, onReconnectStart: handleReconnectStart, onReconnect: handleReconnect, onReconnectEnd: handleReconnectEnd, onPaneClick, onSelectionChange: handleSelectionChange, panOnDrag: !editable, panOnScroll: true, zoomOnScroll: false, zoomOnPinch: true, zoomOnDoubleClick: false, selectionOnDrag: false, selectionKeyCode: null, multiSelectionKeyCode: "Shift", children: [showBackground && jsx(Background, { color: backgroundVariant === "dots" ? theme2.colors.border : theme2.colors.textMuted, gap: backgroundGap ?? (backgroundVariant === "dots" ? 16 : 50), size: backgroundVariant === "dots" ? 1 : 0.5, variant: backgroundVariant === "dots" ? BackgroundVariant.Dots : backgroundVariant === "lines" ? BackgroundVariant.Lines : BackgroundVariant.Cross }), showControls && jsx(Controls, { showZoom: true, showFitView: true, showInteractive: true }), showMinimap && jsx(MiniMap, { nodeColor: (node2) => {
+  return jsxs(GraphEditProvider, { value: graphEditContextValue, children: [jsxs(index$2, { nodes: xyflowNodes, edges: xyflowEdges, nodeTypes, edgeTypes, minZoom: 0.1, maxZoom: 4, defaultEdgeOptions: { type: "custom" }, onEdgeClick, onNodeClick, onNodeDoubleClick, onNodeDrag: handleNodeDrag, onNodeDragStop: handleNodeDragStop, proOptions: { hideAttribution: true }, nodesDraggable: editable || draggableNodeIds && draggableNodeIds.size > 0, elementsSelectable: editable, selectNodesOnDrag: false, nodesConnectable: editable, edgesReconnectable: editable, reconnectRadius: 25, elevateEdgesOnSelect: true, onNodesChange: handleNodesChange, onEdgesChange: handleEdgesChange, onConnect: handleConnect, onReconnectStart: handleReconnectStart, onReconnect: handleReconnect, onReconnectEnd: handleReconnectEnd, onPaneClick, onSelectionChange: handleSelectionChange, panOnDrag: !editable, panOnScroll: true, zoomOnScroll: false, zoomOnPinch: true, zoomOnDoubleClick: false, selectionOnDrag: false, selectionKeyCode: null, multiSelectionKeyCode: "Shift", children: [showBackground && jsx(Background, { color: backgroundVariant === "dots" ? theme2.colors.border : theme2.colors.textMuted, gap: backgroundGap ?? (backgroundVariant === "dots" ? 16 : 50), size: backgroundVariant === "dots" ? 1 : 0.5, variant: backgroundVariant === "dots" ? BackgroundVariant.Dots : backgroundVariant === "lines" ? BackgroundVariant.Lines : BackgroundVariant.Cross }), showControls && jsx(Controls, { showZoom: true, showFitView: true, showInteractive: true }), showMinimap && jsx(MiniMap, { nodeColor: (node2) => {
     var _a;
     const nodeData = node2.data;
     return ((_a = nodeData == null ? void 0 : nodeData.typeDefinition) == null ? void 0 : _a.color) || theme2.colors.secondary;
@@ -88329,6 +88348,7 @@ const GraphRenderer = forwardRef((props2, ref) => {
   }, []);
   const canvasData = useCanvasToLegacy(canvas, library);
   const editStateRef = useRef(createEmptyEditState());
+  const resetVisualStateRef = useRef(null);
   useImperativeHandle(ref, () => ({
     getPendingChanges: () => {
       const state = editStateRef.current;
@@ -88358,7 +88378,9 @@ const GraphRenderer = forwardRef((props2, ref) => {
       };
     },
     resetEditState: () => {
+      var _a;
       editStateRef.current = createEmptyEditState();
+      (_a = resetVisualStateRef.current) == null ? void 0 : _a.call(resetVisualStateRef);
     },
     hasUnsavedChanges: () => {
       const state = editStateRef.current;
@@ -88378,7 +88400,7 @@ const GraphRenderer = forwardRef((props2, ref) => {
   }
   const { configuration, nodes, edges } = canvasData;
   const { violations, configName, showMinimap, showControls, showBackground, backgroundVariant, backgroundGap, showCenterIndicator, showTooltips, fitViewDuration, highlightedNodeId, activeNodeIds, events, onEventProcessed, editable, onPendingChangesChange, onNodeClick, fitViewToNodeIds, fitViewPadding, draggableNodeIds, onNodeDragStop, onCopy } = props2;
-  return jsx("div", { ref: containerRef, className, style: { width, height, position: "relative" }, children: jsx(TooltipPortalContext.Provider, { value: portalTarget, children: jsx(ReactFlowProvider, { children: jsx(GraphRendererInner, { configuration, nodes, edges, violations, configName, showMinimap, showControls, showBackground, backgroundVariant, backgroundGap, showCenterIndicator, showTooltips, fitViewDuration, highlightedNodeId, activeNodeIds, events, onEventProcessed, editable, onPendingChangesChange, editStateRef, onNodeClick, fitViewToNodeIds, fitViewPadding, draggableNodeIds, onNodeDragStop, onCopy }) }) }) });
+  return jsx("div", { ref: containerRef, className, style: { width, height, position: "relative" }, children: jsx(TooltipPortalContext.Provider, { value: portalTarget, children: jsx(ReactFlowProvider, { children: jsx(GraphRendererInner, { configuration, nodes, edges, violations, configName, showMinimap, showControls, showBackground, backgroundVariant, backgroundGap, showCenterIndicator, showTooltips, fitViewDuration, highlightedNodeId, activeNodeIds, events, onEventProcessed, editable, onPendingChangesChange, editStateRef, resetVisualStateRef, onNodeClick, fitViewToNodeIds, fitViewPadding, draggableNodeIds, onNodeDragStop, onCopy }) }) }) });
 });
 GraphRenderer.displayName = "GraphRenderer";
 const DEFAULT_NODE_WIDTH = 200;