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

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,13 +138,12 @@ 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;
+        // Rotated square - use 100% to fill container
         return {
           ...baseStyles,
           transform: 'rotate(45deg)',
-          width: diamondSize,
-          height: diamondSize,
+          width: '100%',
+          height: '100%',
           padding: '8px',
         };
       case 'rectangle':
@@ -156,6 +157,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 and diamonds should maintain square aspect)
+  const keepAspectRatio = isCircle || isDiamond;
+
+  // 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 +175,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',
       }
     : {};
 
@@ -245,6 +258,25 @@ 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')} />