@industry-theme/principal-view-panels 0.1.18 → 0.1.19

package/dist/panels.bundle.js

@@ -47074,7 +47074,7 @@ function requireCustomNode() {
   const react_1 = /* @__PURE__ */ requireUmd();
   const iconResolver_1 = requireIconResolver();
   const CustomNode$1 = ({ data, selected }) => {
-    var _a, _b, _c, _d, _e2, _f, _g, _h, _i, _j, _k, _l, _m, _n2, _o2, _p;
+    var _a, _b, _c, _d, _e2, _f, _g, _h, _i, _j, _k, _l, _m, _n2, _o2, _p, _q, _r, _s, _t2, _u;
     const nodeProps = data;
     const { typeDefinition, state, hasViolations, data: nodeData, animationType, animationDuration = 1e3, editable = false } = nodeProps;
     if (!typeDefinition) {
@@ -47154,10 +47154,16 @@ function requireCustomNode() {
         case "diamond":
           return {
             ...baseStyles,
-            transform: "rotate(45deg)",
+            border: "none",
+            // Border handled by wrapper
+            clipPath: "polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)",
             width: "100%",
             height: "100%",
-            padding: "8px"
+            minWidth: "unset",
+            minHeight: "unset",
+            padding: "8px 16px",
+            boxShadow: "none"
+            // Shadow handled by wrapper
           };
         case "rectangle":
         default:
@@ -47170,7 +47176,7 @@ function requireCustomNode() {
     const isDiamond = typeDefinition.shape === "diamond";
     const isHexagon = typeDefinition.shape === "hexagon";
     const isCircle = typeDefinition.shape === "circle";
-    const keepAspectRatio = isCircle || isDiamond;
+    const keepAspectRatio = isCircle;
     const minWidth = ((_g = typeDefinition.size) == null ? void 0 : _g.width) || 80;
     const minHeight = ((_h = typeDefinition.size) == null ? void 0 : _h.height) || (isCircle ? minWidth : 40);
     const hexagonClipPath = "polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%)";
@@ -47205,6 +47211,37 @@ function requireCustomNode() {
       fontWeight: 500,
       gap: "4px"
     } : {};
+    const diamondClipPath = "polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)";
+    const diamondBorderWidth = 2;
+    const diamondBorderStyle = isDiamond ? {
+      position: "relative",
+      clipPath: diamondClipPath,
+      backgroundColor: hasViolations ? "#D0021B" : strokeColor,
+      width: "100%",
+      height: "100%",
+      minWidth: ((_k = typeDefinition.size) == null ? void 0 : _k.width) || 80,
+      minHeight: ((_l = typeDefinition.size) == null ? void 0 : _l.height) || 80,
+      boxShadow: selected ? `0 0 0 2px ${strokeColor}` : "0 2px 4px rgba(0,0,0,0.1)",
+      transition: "box-shadow 0.2s ease",
+      boxSizing: "border-box"
+    } : {};
+    const diamondInnerStyle = isDiamond ? {
+      position: "absolute",
+      top: diamondBorderWidth,
+      left: diamondBorderWidth,
+      right: diamondBorderWidth,
+      bottom: diamondBorderWidth,
+      clipPath: diamondClipPath,
+      backgroundColor: "white",
+      color: "#000",
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center",
+      fontSize: "12px",
+      fontWeight: 500,
+      gap: "4px"
+    } : {};
     const baseHandleStyle = editable ? {
       background: color,
       width: 12,
@@ -47216,28 +47253,11 @@ function requireCustomNode() {
       width: 8,
       height: 8
     };
-    const diamondOffset = isDiamond ? "21%" : "0";
-    const getHandleStyle = (position) => {
+    const getHandleStyle = (_position) => {
       if (!isDiamond && !isHexagon)
         return baseHandleStyle;
       const offsetStyle = { ...baseHandleStyle };
-      if (isDiamond) {
-        switch (position) {
-          case "top":
-            offsetStyle.top = `-${diamondOffset}`;
-            break;
-          case "bottom":
-            offsetStyle.bottom = `-${diamondOffset}`;
-            break;
-          case "left":
-            offsetStyle.left = `-${diamondOffset}`;
-            break;
-          case "right":
-            offsetStyle.right = `-${diamondOffset}`;
-            break;
-        }
-      }
-      if (isHexagon) {
+      if (isHexagon || isDiamond) {
         offsetStyle.zIndex = 10;
       }
       return offsetStyle;
@@ -47248,19 +47268,29 @@ function requireCustomNode() {
       borderRadius: 2
     }, lineStyle: {
       borderWidth: 1
-    } }), (0, jsx_runtime_1.jsx)(react_1.Handle, { type: "target", position: react_1.Position.Top, id: "top", style: getHandleStyle("top") }), (0, jsx_runtime_1.jsx)(react_1.Handle, { type: "target", position: react_1.Position.Bottom, id: "bottom", style: getHandleStyle("bottom") }), (0, jsx_runtime_1.jsx)(react_1.Handle, { type: "target", position: react_1.Position.Left, id: "left", style: getHandleStyle("left") }), (0, jsx_runtime_1.jsx)(react_1.Handle, { type: "target", position: react_1.Position.Right, id: "right", style: getHandleStyle("right") }), isHexagon ? (0, jsx_runtime_1.jsx)("div", { style: hexagonBorderStyle, className: animationClass, children: (0, jsx_runtime_1.jsxs)("div", { style: hexagonInnerStyle, children: [icon && (0, jsx_runtime_1.jsx)("div", { style: { display: "flex", justifyContent: "center", alignItems: "center" }, children: (0, iconResolver_1.resolveIcon)(icon, 20) }), (0, jsx_runtime_1.jsx)("div", { style: { textAlign: "center", wordBreak: "break-word" }, children: displayName }), state && (0, jsx_runtime_1.jsx)("div", { style: {
+    } }), (0, jsx_runtime_1.jsx)(react_1.Handle, { type: "target", position: react_1.Position.Top, id: "top", style: getHandleStyle() }), (0, jsx_runtime_1.jsx)(react_1.Handle, { type: "target", position: react_1.Position.Bottom, id: "bottom", style: getHandleStyle() }), (0, jsx_runtime_1.jsx)(react_1.Handle, { type: "target", position: react_1.Position.Left, id: "left", style: getHandleStyle() }), (0, jsx_runtime_1.jsx)(react_1.Handle, { type: "target", position: react_1.Position.Right, id: "right", style: getHandleStyle() }), isHexagon ? (0, jsx_runtime_1.jsx)("div", { style: hexagonBorderStyle, className: animationClass, children: (0, jsx_runtime_1.jsxs)("div", { style: hexagonInnerStyle, children: [icon && (0, jsx_runtime_1.jsx)("div", { style: { display: "flex", justifyContent: "center", alignItems: "center" }, children: (0, iconResolver_1.resolveIcon)(icon, 20) }), (0, jsx_runtime_1.jsx)("div", { style: { textAlign: "center", wordBreak: "break-word" }, children: displayName }), state && (0, jsx_runtime_1.jsx)("div", { style: {
+      fontSize: "10px",
+      backgroundColor: color,
+      color: "white",
+      padding: "2px 6px",
+      borderRadius: "4px",
+      textAlign: "center"
+    }, children: ((_m = nodeDataStates == null ? void 0 : nodeDataStates[state]) == null ? void 0 : _m.label) || ((_o2 = (_n2 = typeDefinition.states) == null ? void 0 : _n2[state]) == null ? void 0 : _o2.label) || state }), hasViolations && (0, jsx_runtime_1.jsx)("div", { style: {
+      fontSize: "10px",
+      color: "#D0021B",
+      fontWeight: "bold"
+    }, children: "⚠️" })] }) }) : isDiamond ? (0, jsx_runtime_1.jsx)("div", { style: diamondBorderStyle, className: animationClass, children: (0, jsx_runtime_1.jsxs)("div", { style: diamondInnerStyle, children: [icon && (0, jsx_runtime_1.jsx)("div", { style: { display: "flex", justifyContent: "center", alignItems: "center" }, children: (0, iconResolver_1.resolveIcon)(icon, 20) }), (0, jsx_runtime_1.jsx)("div", { style: { textAlign: "center", wordBreak: "break-word" }, children: displayName }), state && (0, jsx_runtime_1.jsx)("div", { style: {
       fontSize: "10px",
       backgroundColor: color,
       color: "white",
       padding: "2px 6px",
       borderRadius: "4px",
       textAlign: "center"
-    }, children: ((_k = nodeDataStates == null ? void 0 : nodeDataStates[state]) == null ? void 0 : _k.label) || ((_m = (_l = typeDefinition.states) == null ? void 0 : _l[state]) == null ? void 0 : _m.label) || state }), hasViolations && (0, jsx_runtime_1.jsx)("div", { style: {
+    }, children: ((_p = nodeDataStates == null ? void 0 : nodeDataStates[state]) == null ? void 0 : _p.label) || ((_r = (_q = typeDefinition.states) == null ? void 0 : _q[state]) == null ? void 0 : _r.label) || state }), hasViolations && (0, jsx_runtime_1.jsx)("div", { style: {
       fontSize: "10px",
       color: "#D0021B",
       fontWeight: "bold"
     }, children: "⚠️" })] }) }) : (0, jsx_runtime_1.jsx)("div", { style: getShapeStyles(), className: animationClass, children: (0, jsx_runtime_1.jsxs)("div", { style: {
-      ...isDiamond ? { transform: "rotate(-45deg)" } : {},
       ...isGroup ? { width: "100%" } : {}
     }, children: [isGroup ? (0, jsx_runtime_1.jsxs)("div", { style: {
       display: "flex",
@@ -47275,11 +47305,11 @@ function requireCustomNode() {
       padding: "2px 6px",
       borderRadius: "4px",
       textAlign: "center"
-    }, children: ((_n2 = nodeDataStates == null ? void 0 : nodeDataStates[state]) == null ? void 0 : _n2.label) || ((_p = (_o2 = typeDefinition.states) == null ? void 0 : _o2[state]) == null ? void 0 : _p.label) || state }), hasViolations && (0, jsx_runtime_1.jsx)("div", { style: {
+    }, children: ((_s = nodeDataStates == null ? void 0 : nodeDataStates[state]) == null ? void 0 : _s.label) || ((_u = (_t2 = typeDefinition.states) == null ? void 0 : _t2[state]) == null ? void 0 : _u.label) || state }), hasViolations && (0, jsx_runtime_1.jsx)("div", { style: {
       fontSize: "10px",
       color: "#D0021B",
       fontWeight: "bold"
-    }, children: "⚠️" })] }) }), (0, jsx_runtime_1.jsx)(react_1.Handle, { type: "source", position: react_1.Position.Top, id: "top-out", style: getHandleStyle("top") }), (0, jsx_runtime_1.jsx)(react_1.Handle, { type: "source", position: react_1.Position.Bottom, id: "bottom-out", style: getHandleStyle("bottom") }), (0, jsx_runtime_1.jsx)(react_1.Handle, { type: "source", position: react_1.Position.Left, id: "left-out", style: getHandleStyle("left") }), (0, jsx_runtime_1.jsx)(react_1.Handle, { type: "source", position: react_1.Position.Right, id: "right-out", style: getHandleStyle("right") }), (0, jsx_runtime_1.jsx)("style", { children: `
+    }, children: "⚠️" })] }) }), (0, jsx_runtime_1.jsx)(react_1.Handle, { type: "source", position: react_1.Position.Top, id: "top-out", style: getHandleStyle() }), (0, jsx_runtime_1.jsx)(react_1.Handle, { type: "source", position: react_1.Position.Bottom, id: "bottom-out", style: getHandleStyle() }), (0, jsx_runtime_1.jsx)(react_1.Handle, { type: "source", position: react_1.Position.Left, id: "left-out", style: getHandleStyle() }), (0, jsx_runtime_1.jsx)(react_1.Handle, { type: "source", position: react_1.Position.Right, id: "right-out", style: getHandleStyle() }), (0, jsx_runtime_1.jsx)("style", { children: `
         /* Processing pulse - continuous breathing effect */
         .node-pulse {
           animation: node-pulse ease-in-out infinite;
@@ -47349,22 +47379,6 @@ function requireCustomNode() {
           }
         }
 
-        /* Special handling for diamond shape with shake */
-        .node-shake[style*="rotate(45deg)"] {
-          animation: node-shake-diamond ease-in-out;
-        }
-
-        @keyframes node-shake-diamond {
-          0%, 100% {
-            transform: rotate(45deg) translateX(0);
-          }
-          10%, 30%, 50%, 70%, 90% {
-            transform: rotate(45deg) translateX(-4px);
-          }
-          20%, 40%, 60%, 80% {
-            transform: rotate(45deg) translateX(4px);
-          }
-        }
       ` })] });
   };
   CustomNode.CustomNode = CustomNode$1;
@@ -48962,7 +48976,7 @@ function requireGraphRenderer() {
         }, 100);
         return () => clearTimeout(timeoutId);
       }, [baseNodesKey, fitView]);
-      return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.ReactFlow, { nodes: xyflowNodes, edges: xyflowEdges, nodeTypes, edgeTypes, minZoom: 0.1, maxZoom: 4, defaultEdgeOptions: { type: "custom" }, onEdgeClick, onNodeClick, proOptions: { hideAttribution: true }, nodesDraggable: editable, elementsSelectable: true, nodesConnectable: editable, edgesReconnectable: editable, reconnectRadius: 25, elevateEdgesOnSelect: true, onNodesChange: handleNodesChange, onConnect: handleConnect, onReconnectStart: handleReconnectStart, onReconnect: handleReconnect, onReconnectEnd: handleReconnectEnd, onPaneClick, onSelectionChange: handleSelectionChange, panOnDrag: !editable, selectionOnDrag: editable, selectionKeyCode: null, multiSelectionKeyCode: "Shift", children: [showBackground && (0, jsx_runtime_1.jsx)(react_2.Background, { color: theme.colors.border, gap: 16, size: 1 }), showControls && (0, jsx_runtime_1.jsx)(react_2.Controls, { showZoom: true, showFitView: true, showInteractive: true }), showMinimap && (0, jsx_runtime_1.jsx)(react_2.MiniMap, { nodeColor: (node) => {
+      return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.ReactFlow, { nodes: xyflowNodes, edges: xyflowEdges, nodeTypes, edgeTypes, minZoom: 0.1, maxZoom: 4, defaultEdgeOptions: { type: "custom" }, onEdgeClick, onNodeClick, proOptions: { hideAttribution: true }, nodesDraggable: editable, elementsSelectable: true, nodesConnectable: editable, edgesReconnectable: editable, reconnectRadius: 25, elevateEdgesOnSelect: true, onNodesChange: handleNodesChange, onConnect: handleConnect, onReconnectStart: handleReconnectStart, onReconnect: handleReconnect, onReconnectEnd: handleReconnectEnd, onPaneClick, onSelectionChange: handleSelectionChange, panOnDrag: true, selectionOnDrag: false, selectionKeyCode: editable ? "Shift" : null, multiSelectionKeyCode: "Shift", children: [showBackground && (0, jsx_runtime_1.jsx)(react_2.Background, { color: theme.colors.border, gap: 16, size: 1 }), showControls && (0, jsx_runtime_1.jsx)(react_2.Controls, { showZoom: true, showFitView: true, showInteractive: true }), showMinimap && (0, jsx_runtime_1.jsx)(react_2.MiniMap, { nodeColor: (node) => {
         var _a;
         const nodeData = node.data;
         return ((_a = nodeData == null ? void 0 : nodeData.typeDefinition) == null ? void 0 : _a.color) || theme.colors.secondary;
@@ -54569,7 +54583,7 @@ function handleToCanvasSide(handle) {
   return void 0;
 }
 function applyChangesToCanvas(canvas, changes) {
-  var _a, _b;
+  var _a, _b, _c;
   const updatedCanvas = JSON.parse(JSON.stringify(canvas));
   for (const { nodeId, position } of changes.positionChanges) {
     const node = (_a = updatedCanvas.nodes) == null ? void 0 : _a.find((n) => n.id === nodeId);
@@ -54578,8 +54592,15 @@ function applyChangesToCanvas(canvas, changes) {
       node.y = Math.round(position.y);
     }
   }
-  for (const { nodeId, updates } of changes.nodeUpdates) {
+  for (const { nodeId, dimensions } of changes.dimensionChanges) {
     const node = (_b = updatedCanvas.nodes) == null ? void 0 : _b.find((n) => n.id === nodeId);
+    if (node) {
+      node.width = dimensions.width;
+      node.height = dimensions.height;
+    }
+  }
+  for (const { nodeId, updates } of changes.nodeUpdates) {
+    const node = (_c = updatedCanvas.nodes) == null ? void 0 : _c.find((n) => n.id === nodeId);
     if (node) {
       if (updates.type && updates.type !== nodeId) {
         node.id = updates.type;