@industry-theme/principal-view-panels 0.12.1 → 0.12.2

package/dist/panels/CanvasEditorPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CanvasEditorPanel.d.ts","sourceRoot":"","sources":["../../src/panels/CanvasEditorPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AACjF,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,UAAU,CAAC;AAI5D,OAAO,KAAK,EAAyE,gBAAgB,EAAoC,MAAM,mCAAmC,CAAC;AAKnL,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sCAAsC,CAAC;AA6BrE;;GAEG;AACH,MAAM,WAAW,sBAAuB,SAAQ,2BAA2B;IACzE;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,cAAc,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IAEjC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAE3C;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEnC;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAE7B;;OAEG;IACH,gBAAgB,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IAEnC;;;OAGG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC;QACrB,UAAU,EAAE,MAAM,CAAC;QACnB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;QAC9B,eAAe,CAAC,EAAE,MAAM,CAAC;KAC1B,CAAC,CAAC;CACJ;AAED;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAioC9D,CAAC"}
+{"version":3,"file":"CanvasEditorPanel.d.ts","sourceRoot":"","sources":["../../src/panels/CanvasEditorPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AACjF,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,UAAU,CAAC;AAI5D,OAAO,KAAK,EAAyE,gBAAgB,EAAoC,MAAM,mCAAmC,CAAC;AAKnL,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sCAAsC,CAAC;AA6BrE;;GAEG;AACH,MAAM,WAAW,sBAAuB,SAAQ,2BAA2B;IACzE;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,cAAc,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IAEjC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAE3C;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEnC;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAE7B;;OAEG;IACH,gBAAgB,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IAEnC;;;OAGG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC;QACrB,UAAU,EAAE,MAAM,CAAC;QACnB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;QAC9B,eAAe,CAAC,EAAE,MAAM,CAAC;KAC1B,CAAC,CAAC;CACJ;AAED;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAs7B9D,CAAC"}

package/dist/panels.bundle.js

@@ -94246,11 +94246,9 @@ const CanvasEditorPanel = ({
   workflowFileInfo: _workflowFileInfo,
   traceMatchInfo
 }) => {
-  var _a, _b, _c, _d, _e2;
+  var _a, _b, _c;
   const { theme: theme2 } = useTheme();
   const graphRef = useRef(null);
-  const [dimensions, setDimensions] = useState({ width: 800, height: 600 });
-  const resizeObserverRef = useRef(null);
   const [state, setState] = useState({
     canvas: null,
     library: null,
@@ -94270,6 +94268,7 @@ const CanvasEditorPanel = ({
     highlightedNodeId: null
   });
   const [shouldFitToNodes, setShouldFitToNodes] = useState(false);
+  const [fitCounter, setFitCounter] = useState(0);
   const [isCarouselExpanded, setIsCarouselExpanded] = useState(false);
   const contextRef = useRef(context2);
   const actionsRef = useRef(actions);
@@ -94285,32 +94284,6 @@ const CanvasEditorPanel = ({
     return ((_a2 = slice == null ? void 0 : slice.data) == null ? void 0 : _a2.sha) || null;
   }, [context2]);
   const [pathCopied, setPathCopied] = useState(false);
-  const containerRef = useCallback((container) => {
-    if (resizeObserverRef.current) {
-      resizeObserverRef.current.disconnect();
-      resizeObserverRef.current = null;
-    }
-    if (!container) {
-      return;
-    }
-    const updateDimensions = () => {
-      const { width, height } = container.getBoundingClientRect();
-      setDimensions((prev) => {
-        const newWidth = Math.round(width);
-        const newHeight = Math.round(height);
-        if (prev.width === newWidth && prev.height === newHeight) {
-          return prev;
-        }
-        return { width: newWidth, height: newHeight };
-      });
-    };
-    updateDimensions();
-    const resizeObserver = new ResizeObserver(() => {
-      requestAnimationFrame(updateDimensions);
-    });
-    resizeObserver.observe(container);
-    resizeObserverRef.current = resizeObserver;
-  }, []);
   const loadConfiguration = useCallback(async () => {
     if (!canvasPath) {
       setState((prev) => ({ ...prev, canvas: null, library: null, loading: false, error: null }));
@@ -94409,6 +94382,7 @@ const CanvasEditorPanel = ({
       hoveredScenarioEventNames: eventNames
     }));
     if (eventNames && eventNames.length > 0) {
+      setFitCounter((c2) => c2 + 1);
       setShouldFitToNodes(true);
     }
   }, []);
@@ -94421,6 +94395,7 @@ const CanvasEditorPanel = ({
       highlightedNodeId: null
     }));
     setIsCarouselExpanded(true);
+    setFitCounter((c2) => c2 + 1);
     setShouldFitToNodes(true);
   }, []);
   const handleNarrativeEventClick = useCallback((event, eventIndex) => {
@@ -94432,6 +94407,7 @@ const CanvasEditorPanel = ({
         currentEventIndex: eventIndex
       };
     });
+    setFitCounter((c2) => c2 + 1);
     setShouldFitToNodes(true);
   }, []);
   const handleEventCarouselDismiss = useCallback(() => {
@@ -94519,20 +94495,37 @@ const CanvasEditorPanel = ({
         return [state.highlightedNodeId];
       }
       if (activeNodeIds && activeNodeIds.length > 0) {
-        return activeNodeIds;
+        return [...activeNodeIds];
       }
       if (((_a2 = state.canvas) == null ? void 0 : _a2.nodes) && state.canvas.nodes.length > 0) {
         return state.canvas.nodes.map((n) => n.id);
       }
     }
     return void 0;
-  }, [shouldFitToNodes, activeNodeIds, (_a = state.canvas) == null ? void 0 : _a.nodes, state.highlightedNodeId]);
+  }, [shouldFitToNodes, activeNodeIds, (_a = state.canvas) == null ? void 0 : _a.nodes, state.highlightedNodeId, fitCounter]);
   useEffect(() => {
     if (shouldFitToNodes) {
-      const timer2 = setTimeout(() => setShouldFitToNodes(false), 100);
+      const timer2 = setTimeout(() => setShouldFitToNodes(false), 300);
       return () => clearTimeout(timer2);
     }
   }, [shouldFitToNodes]);
+  const prevWorkflowTemplateRef = useRef(workflowTemplate);
+  useEffect(() => {
+    const hadWorkflow = !!prevWorkflowTemplateRef.current;
+    const hasWorkflow = !!workflowTemplate;
+    prevWorkflowTemplateRef.current = workflowTemplate;
+    if (hadWorkflow !== hasWorkflow) {
+      setState((prev) => ({
+        ...prev,
+        selectedScenarioId: null,
+        selectedScenario: null,
+        hoveredScenarioEventNames: null,
+        highlightedNodeId: null,
+        currentEventIndex: 0
+      }));
+      setIsCarouselExpanded(false);
+    }
+  }, [workflowTemplate]);
   useEffect(() => {
     loadConfiguration();
   }, [canvasPath, loadConfiguration]);
@@ -94761,11 +94754,13 @@ const CanvasEditorPanel = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx("div", { style: { flex: 1, overflow: "hidden" }, children: workflowTemplate ? /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { style: { flex: 1, overflow: "hidden" }, children: /* @__PURE__ */ jsx(
       AnimatedResizableLayout,
       {
         theme: theme2,
-        leftPanel: /* @__PURE__ */ jsx("div", { style: { height: "100%", overflow: "hidden", background: theme2.colors.background }, children: /* @__PURE__ */ jsx(
+        collapsed: !workflowTemplate,
+        showCollapseButton: !!workflowTemplate,
+        leftPanel: workflowTemplate ? /* @__PURE__ */ jsx("div", { style: { height: "100%", overflow: "hidden", background: theme2.colors.background }, children: /* @__PURE__ */ jsx(
           ScenariosList,
           {
             workflowTemplate,
@@ -94774,7 +94769,7 @@ const CanvasEditorPanel = ({
             selectedScenarioId: state.selectedScenarioId ?? void 0,
             traceMatchInfo
           }
-        ) }),
+        ) }) : /* @__PURE__ */ jsx("div", {}),
         rightPanel: /* @__PURE__ */ jsxs("div", { style: { height: "100%", display: "flex", flexDirection: "column", background: theme2.colors.background, position: "relative" }, children: [
           /* @__PURE__ */ jsxs("div", { style: { flex: 1, position: "relative", minHeight: 0 }, children: [
             /* @__PURE__ */ jsx(
@@ -95010,189 +95005,6 @@ const CanvasEditorPanel = ({
           )
         ] })
       }
-    ) : (
-      /* Original editor layout when no workflow is present */
-      /* @__PURE__ */ jsxs("div", { style: { display: "flex", position: "relative", height: "100%", overflow: "hidden" }, children: [
-        /* @__PURE__ */ jsx("div", { ref: containerRef, style: { flex: 1, position: "relative" }, children: /* @__PURE__ */ jsx(
-          GraphRenderer,
-          {
-            ref: graphRef,
-            canvas: state.canvas,
-            library: state.library ?? void 0,
-            width: dimensions.width,
-            height: dimensions.height,
-            editable: state.isEditMode,
-            onPendingChangesChange: (hasChanges) => {
-              setState((prev) => ({ ...prev, hasUnsavedChanges: hasChanges }));
-            },
-            showBackground: state.showGridLines,
-            backgroundVariant: "lines",
-            highlightedNodeId: state.highlightedNodeId,
-            activeNodeIds,
-            fitViewToNodeIds,
-            fitViewPadding: 0.15
-          }
-        ) }),
-        state.isEditMode && state.hasUnsavedChanges && /* @__PURE__ */ jsxs("div", { style: {
-          position: "absolute",
-          top: 0,
-          right: 0,
-          height: 40,
-          display: "flex",
-          alignItems: "stretch",
-          backgroundColor: theme2.colors.background,
-          border: `1px solid ${theme2.colors.border}`,
-          borderRadius: 0,
-          boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
-          zIndex: 40
-        }, children: [
-          /* @__PURE__ */ jsx("div", { style: {
-            display: "flex",
-            alignItems: "center",
-            padding: theme2.space[3],
-            fontSize: theme2.fontSizes[1],
-            color: theme2.colors.warning || "#f59e0b",
-            fontStyle: "italic",
-            fontWeight: theme2.fontWeights.medium
-          }, children: "Unsaved changes" }),
-          /* @__PURE__ */ jsxs(
-            "button",
-            {
-              onClick: saveAllChanges,
-              disabled: state.isSaving,
-              style: {
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                gap: theme2.space[1],
-                padding: `0 ${theme2.space[3]}`,
-                fontSize: theme2.fontSizes[1],
-                fontFamily: theme2.fonts.body,
-                color: "white",
-                backgroundColor: theme2.colors.primary,
-                border: "none",
-                borderRadius: 0,
-                cursor: state.isSaving ? "wait" : "pointer",
-                opacity: state.isSaving ? 0.7 : 1,
-                transition: "all 0.2s",
-                minWidth: 80
-              },
-              children: [
-                state.isSaving ? /* @__PURE__ */ jsx(Loader, { size: 14, style: { animation: "spin 1s linear infinite" } }) : /* @__PURE__ */ jsx(Save, { size: 14 }),
-                /* @__PURE__ */ jsx("span", { children: "Save" })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "button",
-            {
-              onClick: discardChanges,
-              disabled: state.isSaving,
-              style: {
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                gap: theme2.space[1],
-                padding: `0 ${theme2.space[3]}`,
-                fontSize: theme2.fontSizes[1],
-                fontFamily: theme2.fonts.body,
-                color: theme2.colors.text,
-                backgroundColor: theme2.colors.backgroundSecondary,
-                border: "none",
-                borderLeft: `1px solid ${theme2.colors.border}`,
-                borderRadius: 0,
-                cursor: state.isSaving ? "wait" : "pointer",
-                opacity: state.isSaving ? 0.7 : 1,
-                transition: "all 0.2s",
-                minWidth: 80
-              },
-              children: [
-                /* @__PURE__ */ jsx(X, { size: 14 }),
-                /* @__PURE__ */ jsx("span", { children: "Discard" })
-              ]
-            }
-          )
-        ] }),
-        state.showLegend && /* @__PURE__ */ jsxs("div", { style: {
-          position: "absolute",
-          top: 0,
-          left: 0,
-          right: 0,
-          height: 40,
-          backgroundColor: theme2.colors.background,
-          borderBottom: `1px solid ${theme2.colors.border}`,
-          padding: `0 ${theme2.space[3]}`,
-          display: "flex",
-          alignItems: "center",
-          gap: theme2.space[4],
-          overflowX: "auto",
-          zIndex: 50,
-          boxSizing: "border-box"
-        }, children: [
-          /* @__PURE__ */ jsx("span", { style: {
-            fontSize: theme2.fontSizes[1],
-            fontWeight: theme2.fontWeights.medium,
-            color: theme2.colors.textMuted,
-            flexShrink: 0
-          }, children: "Edges:" }),
-          ((_e2 = (_d = state.canvas) == null ? void 0 : _d.pv) == null ? void 0 : _e2.edgeTypes) && Object.keys(state.canvas.pv.edgeTypes).length > 0 ? /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", gap: theme2.space[4], flexWrap: "wrap" }, children: Object.entries(state.canvas.pv.edgeTypes).map(([typeName, edgeType]) => /* @__PURE__ */ jsxs(
-            "div",
-            {
-              style: {
-                display: "flex",
-                alignItems: "center",
-                gap: theme2.space[2]
-              },
-              children: [
-                /* @__PURE__ */ jsxs("svg", { width: "40", height: "12", style: { flexShrink: 0 }, children: [
-                  /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx(
-                    "marker",
-                    {
-                      id: `legend-arrow-${typeName}`,
-                      markerWidth: "8",
-                      markerHeight: "6",
-                      refX: "7",
-                      refY: "3",
-                      orient: "auto",
-                      children: /* @__PURE__ */ jsx(
-                        "polygon",
-                        {
-                          points: "0 0, 8 3, 0 6",
-                          fill: edgeType.color || "#64748b"
-                        }
-                      )
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsx(
-                    "line",
-                    {
-                      x1: "2",
-                      y1: "6",
-                      x2: "32",
-                      y2: "6",
-                      stroke: edgeType.color || "#64748b",
-                      strokeWidth: Math.min(edgeType.width || 2, 3),
-                      strokeDasharray: edgeType.style === "dashed" ? "4,2" : edgeType.style === "dotted" ? "2,2" : void 0,
-                      markerEnd: edgeType.directed ? `url(#legend-arrow-${typeName})` : void 0
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsx("span", { style: {
-                  fontSize: theme2.fontSizes[1],
-                  color: theme2.colors.text,
-                  textTransform: "capitalize",
-                  whiteSpace: "nowrap"
-                }, children: typeName.replace(/-/g, " ") })
-              ]
-            },
-            typeName
-          )) }) : /* @__PURE__ */ jsx("span", { style: {
-            fontSize: theme2.fontSizes[1],
-            color: theme2.colors.textMuted,
-            fontStyle: "italic"
-          }, children: "No edge types defined" })
-        ] })
-      ] })
     ) })
   ] });
 };