@principal-ai/principal-view-react 0.6.16 → 0.6.18

package/src/components/SelectionSidebar.tsx

@@ -0,0 +1,341 @@
+import React, { useState } from 'react';
+import type { NodeState, NodeTypeDefinition } from '@principal-ai/principal-view-core';
+import { useTheme } from '@principal-ade/industry-theme';
+import { resolveIcon } from '../utils/iconResolver';
+
+export interface SelectionSidebarProps {
+  /** Set of selected node IDs */
+  selectedNodeIds: Set<string>;
+  /** All nodes in the graph */
+  nodes: NodeState[];
+  /** Node type definitions for icons and colors */
+  nodeTypeDefinitions: Record<string, NodeTypeDefinition>;
+  /** Callback when sidebar is closed */
+  onClose: () => void;
+}
+
+interface ExpandedState {
+  [nodeId: string]: boolean;
+}
+
+/**
+ * Sidebar that displays information about multiple selected nodes
+ * Shows name and description for each node, with expandable details
+ */
+export const SelectionSidebar: React.FC<SelectionSidebarProps> = ({
+  selectedNodeIds,
+  nodes,
+  nodeTypeDefinitions,
+  onClose,
+}) => {
+  const { theme } = useTheme();
+  const [expandedNodes, setExpandedNodes] = useState<ExpandedState>({});
+
+  // Get the selected nodes in order
+  const selectedNodes = nodes.filter((n) => selectedNodeIds.has(n.id));
+
+  const toggleExpanded = (nodeId: string) => {
+    setExpandedNodes((prev) => ({
+      ...prev,
+      [nodeId]: !prev[nodeId],
+    }));
+  };
+
+  // Internal fields that should not be displayed
+  const internalFields = [
+    'icon',
+    'name',
+    'description',
+    'sources',
+    'color',
+    'stroke',
+    'width',
+    'height',
+    'canvasType',
+    'text',
+    'file',
+    'url',
+    'shape',
+    'states',
+    'actions',
+    'nodeType',
+  ];
+
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        top: '60px',
+        right: '20px',
+        backgroundColor: theme.colors.background,
+        color: theme.colors.text,
+        borderRadius: '8px',
+        boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
+        padding: '16px',
+        minWidth: '280px',
+        maxWidth: '350px',
+        maxHeight: 'calc(100vh - 120px)',
+        overflowY: 'auto',
+        zIndex: 1000,
+        border: `1px solid ${theme.colors.border}`,
+      }}
+    >
+      {/* Header */}
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          marginBottom: '12px',
+          paddingBottom: '8px',
+          borderBottom: `2px solid ${theme.colors.primary}`,
+        }}
+      >
+        <div style={{ fontWeight: 'bold', fontSize: '14px', color: theme.colors.primary }}>
+          {selectedNodes.length} nodes selected
+        </div>
+        <button
+          onClick={onClose}
+          style={{
+            border: 'none',
+            background: 'none',
+            cursor: 'pointer',
+            fontSize: '18px',
+            color: theme.colors.textSecondary,
+            padding: '0',
+            width: '24px',
+            height: '24px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          x
+        </button>
+      </div>
+
+      {/* Node List */}
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+        {selectedNodes.map((node) => {
+          const typeDefinition = nodeTypeDefinitions[node.type];
+          const nodeColor =
+            (node.data?.color as string) || typeDefinition?.color || theme.colors.secondary;
+          const icon = (node.data?.icon as string) || typeDefinition?.icon;
+          const isExpanded = expandedNodes[node.id] || false;
+          const description = node.data?.description as string | undefined;
+
+          // Get displayable data entries
+          const dataEntries = node.data
+            ? Object.entries(node.data).filter(([key]) => !internalFields.includes(key))
+            : [];
+
+          return (
+            <div
+              key={node.id}
+              style={{
+                backgroundColor: theme.colors.surface,
+                borderRadius: '6px',
+                border: `1px solid ${theme.colors.border}`,
+                overflow: 'hidden',
+              }}
+            >
+              {/* Node Header - Always visible */}
+              <button
+                onClick={() => toggleExpanded(node.id)}
+                style={{
+                  width: '100%',
+                  padding: '10px 12px',
+                  backgroundColor: 'transparent',
+                  border: 'none',
+                  cursor: 'pointer',
+                  display: 'flex',
+                  alignItems: 'flex-start',
+                  gap: '10px',
+                  textAlign: 'left',
+                }}
+              >
+                {/* Icon */}
+                <div
+                  style={{
+                    width: '28px',
+                    height: '28px',
+                    borderRadius: '6px',
+                    backgroundColor: nodeColor,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    flexShrink: 0,
+                    color: 'white',
+                  }}
+                >
+                  {icon ? resolveIcon(icon, 16) : null}
+                </div>
+
+                {/* Name and Description */}
+                <div style={{ flex: 1, minWidth: 0 }}>
+                  <div
+                    style={{
+                      fontWeight: 600,
+                      fontSize: '13px',
+                      color: theme.colors.text,
+                      marginBottom: description ? '2px' : 0,
+                    }}
+                  >
+                    {node.name || node.id}
+                  </div>
+                  {description && (
+                    <div
+                      style={{
+                        fontSize: '11px',
+                        color: theme.colors.textSecondary,
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        display: '-webkit-box',
+                        WebkitLineClamp: isExpanded ? 'unset' : 2,
+                        WebkitBoxOrient: 'vertical',
+                      }}
+                    >
+                      {description}
+                    </div>
+                  )}
+                </div>
+
+                {/* Expand/Collapse Indicator */}
+                <div
+                  style={{
+                    color: theme.colors.textSecondary,
+                    fontSize: '10px',
+                    transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)',
+                    transition: 'transform 0.2s',
+                    flexShrink: 0,
+                  }}
+                >
+                  ▼
+                </div>
+              </button>
+
+              {/* Expanded Details */}
+              {isExpanded && (
+                <div
+                  style={{
+                    padding: '0 12px 10px 12px',
+                    borderTop: `1px solid ${theme.colors.border}`,
+                    marginTop: '0',
+                  }}
+                >
+                  {/* Node Type */}
+                  <div style={{ marginTop: '10px' }}>
+                    <div
+                      style={{
+                        fontSize: '10px',
+                        color: theme.colors.textSecondary,
+                        marginBottom: '4px',
+                      }}
+                    >
+                      Type
+                    </div>
+                    <div
+                      style={{
+                        fontSize: '11px',
+                        padding: '3px 8px',
+                        backgroundColor: nodeColor,
+                        color: 'white',
+                        borderRadius: '4px',
+                        display: 'inline-block',
+                      }}
+                    >
+                      {node.type}
+                    </div>
+                  </div>
+
+                  {/* Node State */}
+                  {node.state && (
+                    <div style={{ marginTop: '8px' }}>
+                      <div
+                        style={{
+                          fontSize: '10px',
+                          color: theme.colors.textSecondary,
+                          marginBottom: '4px',
+                        }}
+                      >
+                        State
+                      </div>
+                      <div
+                        style={{
+                          fontSize: '11px',
+                          padding: '3px 8px',
+                          backgroundColor:
+                            typeDefinition?.states?.[node.state]?.color || theme.colors.secondary,
+                          color: 'white',
+                          borderRadius: '4px',
+                          display: 'inline-block',
+                        }}
+                      >
+                        {typeDefinition?.states?.[node.state]?.label || node.state}
+                      </div>
+                    </div>
+                  )}
+
+                  {/* Data Properties */}
+                  {dataEntries.length > 0 && (
+                    <div style={{ marginTop: '8px' }}>
+                      <div
+                        style={{
+                          fontSize: '10px',
+                          color: theme.colors.textSecondary,
+                          marginBottom: '6px',
+                          fontWeight: 'bold',
+                        }}
+                      >
+                        Properties
+                      </div>
+                      {dataEntries.map(([key, value]) => (
+                        <div key={key} style={{ marginBottom: '6px' }}>
+                          <div
+                            style={{
+                              fontSize: '10px',
+                              color: theme.colors.textSecondary,
+                              marginBottom: '2px',
+                            }}
+                          >
+                            {key}
+                          </div>
+                          <div
+                            style={{
+                              fontSize: '11px',
+                              color: theme.colors.text,
+                              wordBreak: 'break-word',
+                            }}
+                          >
+                            {value !== undefined && value !== null
+                              ? typeof value === 'object'
+                                ? JSON.stringify(value, null, 2)
+                                : String(value)
+                              : '-'}
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+
+                  {/* Node ID */}
+                  <div
+                    style={{
+                      fontSize: '10px',
+                      color: theme.colors.textMuted,
+                      marginTop: '8px',
+                      paddingTop: '6px',
+                      borderTop: `1px solid ${theme.colors.border}`,
+                    }}
+                  >
+                    ID: {node.id}
+                  </div>
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};

package/src/nodes/CustomNode.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Handle, Position } from '@xyflow/react';
+import { Handle, Position, NodeResizer } from '@xyflow/react';
 import type { NodeProps } from '@xyflow/react';
 import type { NodeTypeDefinition } from '@principal-ai/principal-view-core';
 import { resolveIcon } from '../utils/iconResolver';
@@ -100,6 +100,9 @@ export const CustomNode: React.FC<NodeProps<any>> = ({ data, selected }) => {
       border: `2px solid ${hasViolations ? '#D0021B' : strokeColor}`,
       fontSize: '12px',
       fontWeight: 500,
+      // Use 100% width/height to fill the node container (for resizing support)
+      width: '100%',
+      height: '100%',
       minWidth: typeDefinition.size?.width || 80,
       minHeight: typeDefinition.size?.height || 40,
       display: 'flex',
@@ -108,8 +111,9 @@ export const CustomNode: React.FC<NodeProps<any>> = ({ data, selected }) => {
       justifyContent: isGroup ? 'flex-start' : 'center',
       gap: '4px',
       boxShadow: selected ? `0 0 0 2px ${strokeColor}` : '0 2px 4px rgba(0,0,0,0.1)',
-      transition: 'all 0.2s ease',
+      transition: 'box-shadow 0.2s ease',
       animationDuration: animationType ? `${animationDuration}ms` : undefined,
+      boxSizing: 'border-box' as const,
     };
 
     switch (typeDefinition.shape) {
@@ -117,8 +121,6 @@ export const CustomNode: React.FC<NodeProps<any>> = ({ data, selected }) => {
         return {
           ...baseStyles,
           borderRadius: '50%',
-          width: typeDefinition.size?.width || 80,
-          height: typeDefinition.size?.height || 80,
           padding: '8px',
         };
       case 'hexagon':
@@ -136,14 +138,18 @@ export const CustomNode: React.FC<NodeProps<any>> = ({ data, selected }) => {
           boxShadow: 'none', // Shadow handled by wrapper
         };
       case 'diamond':
-        // Rotated square - fixed dimensions for proper diamond shape
-        const diamondSize = typeDefinition.size?.width || 70;
+        // Diamond uses wrapper approach for proper border - styles returned here are for inner fill
+        // The outer border wrapper is rendered separately in the JSX
         return {
           ...baseStyles,
-          transform: 'rotate(45deg)',
-          width: diamondSize,
-          height: diamondSize,
-          padding: '8px',
+          border: 'none', // Border handled by wrapper
+          clipPath: 'polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)',
+          width: '100%',
+          height: '100%',
+          minWidth: 'unset',
+          minHeight: 'unset',
+          padding: '8px 16px',
+          boxShadow: 'none', // Shadow handled by wrapper
         };
       case 'rectangle':
       default:
@@ -156,6 +162,14 @@ export const CustomNode: React.FC<NodeProps<any>> = ({ data, selected }) => {
 
   const isDiamond = typeDefinition.shape === 'diamond';
   const isHexagon = typeDefinition.shape === 'hexagon';
+  const isCircle = typeDefinition.shape === 'circle';
+
+  // Determine if aspect ratio should be locked (circles should maintain square aspect)
+  const keepAspectRatio = isCircle;
+
+  // Minimum dimensions for resizing
+  const minWidth = typeDefinition.size?.width || 80;
+  const minHeight = typeDefinition.size?.height || (isCircle ? minWidth : 40);
 
   // Hexagon border wrapper styles (outer shape that acts as border)
   // Hexagon with gentle diagonals
@@ -166,10 +180,14 @@ export const CustomNode: React.FC<NodeProps<any>> = ({ data, selected }) => {
         position: 'relative',
         clipPath: hexagonClipPath,
         backgroundColor: hasViolations ? '#D0021B' : strokeColor,
-        width: typeDefinition.size?.width || 120,
-        height: typeDefinition.size?.height || 120,
+        // Use 100% to fill container for resizing support
+        width: '100%',
+        height: '100%',
+        minWidth: typeDefinition.size?.width || 120,
+        minHeight: typeDefinition.size?.height || 120,
         boxShadow: selected ? `0 0 0 2px ${strokeColor}` : '0 2px 4px rgba(0,0,0,0.1)',
-        transition: 'all 0.2s ease',
+        transition: 'box-shadow 0.2s ease',
+        boxSizing: 'border-box',
       }
     : {};
 
@@ -194,6 +212,47 @@ export const CustomNode: React.FC<NodeProps<any>> = ({ data, selected }) => {
       }
     : {};
 
+  // Diamond clip-path
+  const diamondClipPath = 'polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)';
+  const diamondBorderWidth = 2;
+
+  // Diamond border wrapper styles (outer shape that acts as border)
+  const diamondBorderStyle: React.CSSProperties = isDiamond
+    ? {
+        position: 'relative',
+        clipPath: diamondClipPath,
+        backgroundColor: hasViolations ? '#D0021B' : strokeColor,
+        width: '100%',
+        height: '100%',
+        minWidth: typeDefinition.size?.width || 80,
+        minHeight: typeDefinition.size?.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',
+      }
+    : {};
+
+  // Diamond inner fill styles (white background inset from border)
+  const diamondInnerStyle: React.CSSProperties = 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',
+      }
+    : {};
+
   // Handle styles - larger and more visible in edit mode
   const baseHandleStyle = editable
     ? {
@@ -209,34 +268,13 @@ export const CustomNode: React.FC<NodeProps<any>> = ({ data, selected }) => {
         height: 8,
       };
 
-  // Diamond handles need to be offset to reach the tips of the rotated shape
-  // A 45° rotated square has tips at ~41% beyond the original edges
-  const diamondOffset = isDiamond ? '21%' : '0';
-
-  const getHandleStyle = (position: 'top' | 'bottom' | 'left' | 'right') => {
+  const getHandleStyle = (_position: 'top' | 'bottom' | 'left' | 'right') => {
     if (!isDiamond && !isHexagon) return baseHandleStyle;
 
     const offsetStyle: React.CSSProperties = { ...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) {
-      // Bring handles above the hexagon layers
+    // Bring handles above the clip-path layers for hexagon and diamond
+    if (isHexagon || isDiamond) {
       offsetStyle.zIndex = 10;
     }
 
@@ -245,13 +283,32 @@ export const CustomNode: React.FC<NodeProps<any>> = ({ data, selected }) => {
 
   return (
     <>
+      {/* Node Resizer - only shown in edit mode */}
+      {editable && (
+        <NodeResizer
+          color={strokeColor}
+          isVisible={selected}
+          minWidth={minWidth}
+          minHeight={minHeight}
+          keepAspectRatio={keepAspectRatio}
+          handleStyle={{
+            width: 8,
+            height: 8,
+            borderRadius: 2,
+          }}
+          lineStyle={{
+            borderWidth: 1,
+          }}
+        />
+      )}
+
       {/* Input handles - all 4 sides for incoming connections */}
       <Handle type="target" position={Position.Top} id="top" style={getHandleStyle('top')} />
       <Handle type="target" position={Position.Bottom} id="bottom" style={getHandleStyle('bottom')} />
       <Handle type="target" position={Position.Left} id="left" style={getHandleStyle('left')} />
       <Handle type="target" position={Position.Right} id="right" style={getHandleStyle('right')} />
 
-      {/* Hexagon needs a wrapper for proper border rendering */}
+      {/* Hexagon and Diamond need a wrapper for proper border rendering */}
       {isHexagon ? (
         <div style={hexagonBorderStyle} className={animationClass}>
           <div style={hexagonInnerStyle}>
@@ -288,12 +345,47 @@ export const CustomNode: React.FC<NodeProps<any>> = ({ data, selected }) => {
             )}
           </div>
         </div>
+      ) : isDiamond ? (
+        <div style={diamondBorderStyle} className={animationClass}>
+          <div style={diamondInnerStyle}>
+            {icon && (
+              <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+                {resolveIcon(icon, 20)}
+              </div>
+            )}
+            <div style={{ textAlign: 'center', wordBreak: 'break-word' }}>{displayName}</div>
+            {state && (
+              <div
+                style={{
+                  fontSize: '10px',
+                  backgroundColor: color,
+                  color: 'white',
+                  padding: '2px 6px',
+                  borderRadius: '4px',
+                  textAlign: 'center',
+                }}
+              >
+                {nodeDataStates?.[state]?.label || typeDefinition.states?.[state]?.label || state}
+              </div>
+            )}
+            {hasViolations && (
+              <div
+                style={{
+                  fontSize: '10px',
+                  color: '#D0021B',
+                  fontWeight: 'bold',
+                }}
+              >
+                ⚠️
+              </div>
+            )}
+          </div>
+        </div>
       ) : (
         <div style={getShapeStyles()} className={animationClass}>
-          {/* Inner content (rotated back if diamond) */}
+          {/* Inner content */}
           <div
             style={{
-              ...(isDiamond ? { transform: 'rotate(-45deg)' } : {}),
               ...(isGroup ? { width: '100%' } : {}),
             }}
           >
@@ -437,22 +529,6 @@ export const CustomNode: React.FC<NodeProps<any>> = ({ data, selected }) => {
           }
         }
 
-        /* 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);
-          }
-        }
       `}</style>
     </>
   );