@industry-theme/principal-view-panels 0.1.41 → 0.1.43

package/dist/panels.bundle.js

@@ -47309,9 +47309,10 @@ function requireCustomNode() {
   const react_2 = /* @__PURE__ */ requireUmd();
   const iconResolver_1 = requireIconResolver();
   const NodeTooltip_1 = requireNodeTooltip();
-  const CustomNode$1 = ({ data, selected }) => {
+  const CustomNode$1 = ({ data, selected, dragging }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o;
     const [isHovered, setIsHovered] = (0, react_1.useState)(false);
+    const showTooltip = isHovered && !dragging;
     const nodeRef = (0, react_1.useRef)(null);
     const nodeProps = data;
     const { typeDefinition, state, hasViolations, data: nodeData, animationType, animationDuration = 1e3, editable = false, tooltipsEnabled = true } = nodeProps;
@@ -47561,7 +47562,7 @@ function requireCustomNode() {
       fontSize: "10px",
       color: "#D0021B",
       fontWeight: "bold"
-    }, children: "⚠️" })] }) }), tooltipsEnabled && (0, jsx_runtime_1.jsx)(NodeTooltip_1.NodeTooltip, { description, otel: otelInfo, visible: isHovered, nodeRef })] }) : isDiamond ? (0, jsx_runtime_1.jsxs)("div", { ref: nodeRef, style: { position: "relative", width: "100%", height: "100%" }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [renderOtelBadge(), (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: {
+    }, children: "⚠️" })] }) }), tooltipsEnabled && (0, jsx_runtime_1.jsx)(NodeTooltip_1.NodeTooltip, { description, otel: otelInfo, visible: showTooltip, nodeRef })] }) : isDiamond ? (0, jsx_runtime_1.jsxs)("div", { ref: nodeRef, style: { position: "relative", width: "100%", height: "100%" }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [renderOtelBadge(), (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",
@@ -47572,7 +47573,7 @@ function requireCustomNode() {
       fontSize: "10px",
       color: "#D0021B",
       fontWeight: "bold"
-    }, children: "⚠️" })] }) }), tooltipsEnabled && (0, jsx_runtime_1.jsx)(NodeTooltip_1.NodeTooltip, { description, otel: otelInfo, visible: isHovered, nodeRef })] }) : (0, jsx_runtime_1.jsxs)("div", { ref: nodeRef, style: { position: "relative", width: "100%", height: "100%" }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [renderOtelBadge(), (0, jsx_runtime_1.jsx)("div", { style: getShapeStyles(), className: animationClass, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+    }, children: "⚠️" })] }) }), tooltipsEnabled && (0, jsx_runtime_1.jsx)(NodeTooltip_1.NodeTooltip, { description, otel: otelInfo, visible: showTooltip, nodeRef })] }) : (0, jsx_runtime_1.jsxs)("div", { ref: nodeRef, style: { position: "relative", width: "100%", height: "100%" }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [renderOtelBadge(), (0, jsx_runtime_1.jsx)("div", { style: getShapeStyles(), className: animationClass, children: (0, jsx_runtime_1.jsxs)("div", { style: {
       ...isGroup ? { width: "100%" } : {}
     }, children: [isGroup ? (0, jsx_runtime_1.jsxs)("div", { style: {
       display: "flex",
@@ -47591,7 +47592,7 @@ function requireCustomNode() {
       fontSize: "10px",
       color: "#D0021B",
       fontWeight: "bold"
-    }, children: "⚠️" })] }) }), tooltipsEnabled && (0, jsx_runtime_1.jsx)(NodeTooltip_1.NodeTooltip, { description, otel: otelInfo, visible: isHovered, nodeRef })] }), (0, jsx_runtime_1.jsx)(react_2.Handle, { type: "source", position: react_2.Position.Top, id: "top-out", style: getHandleStyle() }), (0, jsx_runtime_1.jsx)(react_2.Handle, { type: "source", position: react_2.Position.Bottom, id: "bottom-out", style: getHandleStyle() }), (0, jsx_runtime_1.jsx)(react_2.Handle, { type: "source", position: react_2.Position.Left, id: "left-out", style: getHandleStyle() }), (0, jsx_runtime_1.jsx)(react_2.Handle, { type: "source", position: react_2.Position.Right, id: "right-out", style: getHandleStyle() }), (0, jsx_runtime_1.jsx)("style", { children: `
+    }, children: "⚠️" })] }) }), tooltipsEnabled && (0, jsx_runtime_1.jsx)(NodeTooltip_1.NodeTooltip, { description, otel: otelInfo, visible: showTooltip, nodeRef })] }), (0, jsx_runtime_1.jsx)(react_2.Handle, { type: "source", position: react_2.Position.Top, id: "top-out", style: getHandleStyle() }), (0, jsx_runtime_1.jsx)(react_2.Handle, { type: "source", position: react_2.Position.Bottom, id: "bottom-out", style: getHandleStyle() }), (0, jsx_runtime_1.jsx)(react_2.Handle, { type: "source", position: react_2.Position.Left, id: "left-out", style: getHandleStyle() }), (0, jsx_runtime_1.jsx)(react_2.Handle, { type: "source", position: react_2.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;
@@ -48605,6 +48606,7 @@ function requireGraphRenderer() {
       });
       const [selectedEdgeIds, setSelectedEdgeIds] = (0, react_1.useState)(/* @__PURE__ */ new Set());
       const [selectedNodeIds, setSelectedNodeIds] = (0, react_1.useState)(/* @__PURE__ */ new Set());
+      const [isDragging, setIsDragging] = (0, react_1.useState)(false);
       const [pendingConnection, setPendingConnection] = (0, react_1.useState)(null);
       const [localNodes, setLocalNodes] = (0, react_1.useState)(propNodes);
       const [localEdges, setLocalEdges] = (0, react_1.useState)(propEdges);
@@ -49072,6 +49074,13 @@ function requireGraphRenderer() {
         if (!editable)
           return;
         setXyflowLocalNodes((nds) => (0, react_2.applyNodeChanges)(changes, nds));
+        const hasDragging = changes.some((change) => change.type === "position" && "dragging" in change && change.dragging === true);
+        const hasStoppedDragging = changes.some((change) => change.type === "position" && "dragging" in change && change.dragging === false);
+        if (hasDragging) {
+          setIsDragging(true);
+        } else if (hasStoppedDragging) {
+          setIsDragging(false);
+        }
         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) {
@@ -49135,7 +49144,7 @@ function requireGraphRenderer() {
         var _a;
         const nodeData = node.data;
         return ((_a = nodeData == null ? void 0 : nodeData.typeDefinition) == null ? void 0 : _a.color) || theme.colors.secondary;
-      }, nodeBorderRadius: 2, pannable: true, zoomable: true })] }, `${baseNodesKey}-${baseEdgesKey}`), selectedNodeIds.size >= 2 && (0, jsx_runtime_1.jsx)(SelectionSidebar_1.SelectionSidebar, { selectedNodeIds, nodes, nodeTypeDefinitions: configuration.nodeTypes, onClose: onCloseNodeInfoPanel }), selectedEdgeIds.size === 1 && selectedEdge && selectedEdgeTypeDefinition && (0, jsx_runtime_1.jsx)(EdgeInfoPanel_1.EdgeInfoPanel, { edge: selectedEdge, typeDefinition: selectedEdgeTypeDefinition, sourceNodeId: selectedEdge.from, targetNodeId: selectedEdge.to, onClose: onCloseEdgeInfoPanel, onDelete: editable ? handleEdgeDelete : void 0, onUpdateSides: editable ? handleUpdateEdgeSides : void 0 }), selectedNodeIds.size === 1 && selectedNode && selectedNodeTypeDefinition && (0, jsx_runtime_1.jsx)(NodeInfoPanel_1.NodeInfoPanel, { node: selectedNode, typeDefinition: selectedNodeTypeDefinition, availableNodeTypes: configuration.nodeTypes, onClose: onCloseNodeInfoPanel, onDelete: editable ? handleNodeDelete : void 0, onUpdate: editable ? handleNodeUpdate : void 0, onSourceClick }), pendingConnection && (0, jsx_runtime_1.jsxs)("div", { style: {
+      }, nodeBorderRadius: 2, pannable: true, zoomable: true })] }, `${baseNodesKey}-${baseEdgesKey}`), selectedNodeIds.size >= 2 && !isDragging && (0, jsx_runtime_1.jsx)(SelectionSidebar_1.SelectionSidebar, { selectedNodeIds, nodes, nodeTypeDefinitions: configuration.nodeTypes, onClose: onCloseNodeInfoPanel }), selectedEdgeIds.size === 1 && selectedEdge && selectedEdgeTypeDefinition && !isDragging && (0, jsx_runtime_1.jsx)(EdgeInfoPanel_1.EdgeInfoPanel, { edge: selectedEdge, typeDefinition: selectedEdgeTypeDefinition, sourceNodeId: selectedEdge.from, targetNodeId: selectedEdge.to, onClose: onCloseEdgeInfoPanel, onDelete: editable ? handleEdgeDelete : void 0, onUpdateSides: editable ? handleUpdateEdgeSides : void 0 }), selectedNodeIds.size === 1 && selectedNode && selectedNodeTypeDefinition && !isDragging && (0, jsx_runtime_1.jsx)(NodeInfoPanel_1.NodeInfoPanel, { node: selectedNode, typeDefinition: selectedNodeTypeDefinition, availableNodeTypes: configuration.nodeTypes, onClose: onCloseNodeInfoPanel, onDelete: editable ? handleNodeDelete : void 0, onUpdate: editable ? handleNodeUpdate : void 0, onSourceClick }), pendingConnection && (0, jsx_runtime_1.jsxs)("div", { style: {
         position: "absolute",
         top: "50%",
         left: "50%",