@industry-theme/principal-view-panels 0.1.13 → 0.1.15

package/dist/panels.bundle.js

@@ -47788,19 +47788,11 @@ function requireEdgeInfoPanel() {
   EdgeInfoPanel.EdgeInfoPanel = void 0;
   const jsx_runtime_1 = require$$0;
   const industry_theme_1 = requireCjs();
-  const EdgeInfoPanel$1 = ({ edge, typeDefinition, sourceNodeId, targetNodeId, onClose, onDelete }) => {
+  const SIDE_OPTIONS = ["top", "right", "bottom", "left"];
+  const EdgeInfoPanel$1 = ({ edge, typeDefinition, sourceNodeId, targetNodeId, onClose, onDelete, onUpdateSides }) => {
+    var _a, _b;
     const { theme } = (0, industry_theme_1.useTheme)();
     const edgeColor = typeDefinition.color || theme.colors.primary;
-    const displayFields = typeDefinition.dataSchema ? Object.entries(typeDefinition.dataSchema).filter(([, schema2]) => schema2.displayInInfo).map(([field, schema2]) => {
-      var _a;
-      return {
-        field,
-        label: schema2.label || field,
-        value: (_a = edge.data) == null ? void 0 : _a[field]
-      };
-    }) : [];
-    const hasSchemaFields = displayFields.length > 0;
-    const edgeDataEntries = edge.data ? Object.entries(edge.data) : [];
     return (0, jsx_runtime_1.jsxs)("div", { style: {
       position: "absolute",
       top: "60px",
@@ -47850,17 +47842,37 @@ function requireEdgeInfoPanel() {
       backgroundColor: theme.colors.muted,
       padding: "2px 6px",
       borderRadius: "3px"
-    }, children: targetNodeId })] })] }), hasSchemaFields && (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "12px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
-      fontSize: "10px",
-      color: theme.colors.textSecondary,
-      marginBottom: "8px",
-      fontWeight: "bold"
-    }, children: "Properties" }), displayFields.map(({ field, label, value }) => (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "8px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: theme.colors.textSecondary, marginBottom: "2px" }, children: label }), (0, jsx_runtime_1.jsx)("div", { style: { fontSize: "12px" }, children: value !== void 0 && value !== null ? typeof value === "object" ? JSON.stringify(value, null, 2) : String(value) : "-" })] }, field))] }), !hasSchemaFields && edgeDataEntries.length > 0 && (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "12px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
-      fontSize: "10px",
-      color: theme.colors.textSecondary,
-      marginBottom: "8px",
-      fontWeight: "bold"
-    }, children: "Data" }), edgeDataEntries.map(([key, value]) => (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "8px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: theme.colors.textSecondary, marginBottom: "2px" }, children: key }), (0, jsx_runtime_1.jsx)("div", { style: { fontSize: "12px", wordBreak: "break-word" }, children: value !== void 0 && value !== null ? typeof value === "object" ? JSON.stringify(value, null, 2) : String(value) : "-" })] }, key))] }), (0, jsx_runtime_1.jsxs)("div", { style: {
+    }, children: targetNodeId })] })] }), (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "12px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: theme.colors.textSecondary, marginBottom: "8px" }, children: "Connection Sides" }), (0, jsx_runtime_1.jsxs)("div", { style: { display: "flex", gap: "12px" }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { flex: 1 }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: theme.colors.textMuted, marginBottom: "4px" }, children: "From Side" }), (0, jsx_runtime_1.jsx)("select", { value: ((_a = edge.data) == null ? void 0 : _a.fromSide) || "right", onChange: (e) => {
+      var _a2;
+      if (onUpdateSides) {
+        onUpdateSides(edge.id, e.target.value, ((_a2 = edge.data) == null ? void 0 : _a2.toSide) || "left");
+      }
+    }, disabled: !onUpdateSides, style: {
+      width: "100%",
+      padding: "6px 8px",
+      fontSize: "12px",
+      borderRadius: "4px",
+      border: `1px solid ${theme.colors.border}`,
+      backgroundColor: theme.colors.background,
+      color: theme.colors.text,
+      cursor: onUpdateSides ? "pointer" : "not-allowed",
+      opacity: onUpdateSides ? 1 : 0.6
+    }, children: SIDE_OPTIONS.map((side) => (0, jsx_runtime_1.jsx)("option", { value: side, children: side }, side)) })] }), (0, jsx_runtime_1.jsxs)("div", { style: { flex: 1 }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: theme.colors.textMuted, marginBottom: "4px" }, children: "To Side" }), (0, jsx_runtime_1.jsx)("select", { value: ((_b = edge.data) == null ? void 0 : _b.toSide) || "left", onChange: (e) => {
+      var _a2;
+      if (onUpdateSides) {
+        onUpdateSides(edge.id, ((_a2 = edge.data) == null ? void 0 : _a2.fromSide) || "right", e.target.value);
+      }
+    }, disabled: !onUpdateSides, style: {
+      width: "100%",
+      padding: "6px 8px",
+      fontSize: "12px",
+      borderRadius: "4px",
+      border: `1px solid ${theme.colors.border}`,
+      backgroundColor: theme.colors.background,
+      color: theme.colors.text,
+      cursor: onUpdateSides ? "pointer" : "not-allowed",
+      opacity: onUpdateSides ? 1 : 0.6
+    }, children: SIDE_OPTIONS.map((side) => (0, jsx_runtime_1.jsx)("option", { value: side, children: side }, side)) })] })] })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
       fontSize: "10px",
       color: theme.colors.textMuted,
       marginTop: "12px",
@@ -48227,16 +48239,26 @@ function requireGraphRenderer() {
         onPendingChangesChange == null ? void 0 : onPendingChangesChange(checkHasChanges(newState));
       }, [editStateRef, onEditStateChange, onPendingChangesChange, checkHasChanges]);
       const onEdgeClick = (0, react_1.useCallback)((_event, edge) => {
-        setSelectedEdgeId(edge.id);
+        setSelectedEdgeId((prev) => prev === edge.id ? null : edge.id);
         setSelectedNodeId(null);
       }, []);
       const onNodeClick = (0, react_1.useCallback)((_event, node) => {
-        setSelectedNodeId(node.id);
+        setSelectedNodeId((prev) => prev === node.id ? null : node.id);
         setSelectedEdgeId(null);
       }, []);
       const onCloseEdgeInfoPanel = (0, react_1.useCallback)(() => {
         setSelectedEdgeId(null);
       }, []);
+      const handleUpdateEdgeSides = (0, react_1.useCallback)((edgeId, fromSide, toSide) => {
+        setLocalEdges((currentEdges) => currentEdges.map((edge) => edge.id === edgeId ? {
+          ...edge,
+          data: {
+            ...edge.data,
+            fromSide,
+            toSide
+          }
+        } : edge));
+      }, []);
       const onCloseNodeInfoPanel = (0, react_1.useCallback)(() => {
         setSelectedNodeId(null);
       }, []);
@@ -48675,11 +48697,11 @@ 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: editable, nodesConnectable: editable, edgesReconnectable: editable, onNodesChange: handleNodesChange, onConnect: handleConnect, onReconnectStart: handleReconnectStart, onReconnect: handleReconnect, onReconnectEnd: handleReconnectEnd, panOnDrag: true, selectionOnDrag: false, 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: 100, elevateEdgesOnSelect: true, onNodesChange: handleNodesChange, onConnect: handleConnect, onReconnectStart: handleReconnectStart, onReconnect: handleReconnect, onReconnectEnd: handleReconnectEnd, panOnDrag: true, selectionOnDrag: false, 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;
-      }, nodeBorderRadius: 2, pannable: true, zoomable: true })] }, baseNodesKey), 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 }), 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 }), pendingConnection && (0, jsx_runtime_1.jsxs)("div", { style: {
+      }, nodeBorderRadius: 2, pannable: true, zoomable: true })] }, baseNodesKey), 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 }), 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 }), pendingConnection && (0, jsx_runtime_1.jsxs)("div", { style: {
         position: "absolute",
         top: "50%",
         left: "50%",