@aiready/components 0.1.0 → 0.1.4

package/src/charts/GraphControls.tsx

@@ -0,0 +1,218 @@
+import React from 'react';
+import { cn } from '../utils/cn';
+
+export interface GraphControlsProps {
+  /**
+   * Whether dragging is enabled
+   */
+  dragEnabled?: boolean;
+
+  /**
+   * Callback to toggle drag mode
+   */
+  onDragToggle?: (enabled: boolean) => void;
+
+  /**
+   * Whether manual layout mode is enabled
+   */
+  manualLayout?: boolean;
+
+  /**
+   * Callback to toggle manual layout mode
+   */
+  onManualLayoutToggle?: (enabled: boolean) => void;
+
+  /**
+   * Callback to pin all nodes
+   */
+  onPinAll?: () => void;
+
+  /**
+   * Callback to unpin all nodes
+   */
+  onUnpinAll?: () => void;
+
+  /**
+   * Callback to center/reset the view
+   */
+  onReset?: () => void;
+
+  /**
+   * Callback to fit all nodes in view
+   */
+  onFitView?: () => void;
+
+  /**
+   * Number of pinned nodes
+   */
+  pinnedCount?: number;
+
+  /**
+   * Total number of nodes
+   */
+  totalNodes?: number;
+
+  /**
+   * Whether to show the controls
+   * @default true
+   */
+  visible?: boolean;
+
+  /**
+   * Position of the controls
+   * @default "top-left"
+   */
+  position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+
+  /**
+   * Additional CSS classes
+   */
+  className?: string;
+}
+
+/**
+ * GraphControls: Floating toolbar for manipulating graph layout and dragging
+ * Provides controls for toggling drag mode, manual layout, pinning nodes, and resetting the view
+ */
+export const GraphControls: React.FC<GraphControlsProps> = ({
+  dragEnabled = true,
+  onDragToggle,
+  manualLayout = false,
+  onManualLayoutToggle,
+  onPinAll,
+  onUnpinAll,
+  onReset,
+  onFitView,
+  pinnedCount = 0,
+  totalNodes = 0,
+  visible = true,
+  position = 'top-left',
+  className,
+}) => {
+
+  if (!visible) return null;
+
+  const positionClasses: Record<string, string> = {
+    'top-left': 'top-4 left-4',
+    'top-right': 'top-4 right-4',
+    'bottom-left': 'bottom-4 left-4',
+    'bottom-right': 'bottom-4 right-4',
+  };
+
+  const ControlButton: React.FC<{
+    onClick: () => void;
+    active?: boolean;
+    icon: string;
+    label: string;
+    disabled?: boolean;
+  }> = ({ onClick, active = false, icon, label, disabled = false }) => (
+    <div className="relative group">
+      <button
+        onClick={onClick}
+        disabled={disabled}
+        className={cn(
+          'p-2 rounded-lg transition-all duration-200',
+          active
+            ? 'bg-blue-500 text-white shadow-md hover:bg-blue-600'
+            : 'bg-gray-100 text-gray-700 hover:bg-gray-200',
+          disabled && 'opacity-50 cursor-not-allowed hover:bg-gray-100',
+          'dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600 dark:active:bg-blue-600'
+        )}
+        title={label}
+      >
+        <span className="text-lg">{icon}</span>
+      </button>
+      <div className="absolute left-full ml-2 px-2 py-1 bg-gray-900 text-white text-xs rounded whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none z-50">
+        {label}
+      </div>
+    </div>
+  );
+
+  return (
+    <div
+      className={cn(
+        'fixed z-40 bg-white dark:bg-gray-800 rounded-lg shadow-lg p-2 border border-gray-200 dark:border-gray-700',
+        positionClasses[position],
+        className
+      )}
+    >
+      <div className="flex flex-col gap-2">
+        {/* Drag Mode Toggle */}
+        <ControlButton
+          onClick={() => onDragToggle?.(!dragEnabled)}
+          active={dragEnabled}
+          icon="✋"
+          label={dragEnabled ? 'Drag enabled' : 'Drag disabled'}
+        />
+
+        {/* Manual Layout Toggle */}
+        <ControlButton
+          onClick={() => onManualLayoutToggle?.(!manualLayout)}
+          active={manualLayout}
+          icon="🔧"
+          label={manualLayout ? 'Manual layout: ON (drag freely)' : 'Manual layout: OFF (forces active)'}
+        />
+
+        {/* Divider */}
+        <div className="w-8 h-px bg-gray-300 dark:bg-gray-600 mx-auto my-1" />
+
+        {/* Pin/Unpin Controls */}
+        <div className="flex gap-1">
+          <ControlButton
+            onClick={() => onPinAll?.()}
+            disabled={totalNodes === 0}
+            icon="📌"
+            label={`Pin all nodes (${totalNodes})`}
+          />
+          <ControlButton
+            onClick={() => onUnpinAll?.()}
+            disabled={pinnedCount === 0}
+            icon="📍"
+            label={`Unpin all (${pinnedCount} pinned)`}
+          />
+        </div>
+
+        {/* Divider */}
+        <div className="w-8 h-px bg-gray-300 dark:bg-gray-600 mx-auto my-1" />
+
+        {/* View Controls */}
+        <ControlButton
+          onClick={() => onFitView?.()}
+          disabled={totalNodes === 0}
+          icon="🎯"
+          label="Fit all nodes in view"
+        />
+
+        <ControlButton
+          onClick={() => onReset?.()}
+          disabled={totalNodes === 0}
+          icon="↺"
+          label="Reset to auto-layout"
+        />
+      </div>
+
+      {/* Info Panel */}
+      <div className="mt-3 pt-3 border-t border-gray-200 dark:border-gray-700 text-xs text-gray-600 dark:text-gray-400">
+        <div className="whitespace-nowrap">
+          <strong>Nodes:</strong> {totalNodes}
+        </div>
+        {pinnedCount > 0 && (
+          <div className="whitespace-nowrap">
+            <strong>Pinned:</strong> {pinnedCount}
+          </div>
+        )}
+        <div className="mt-2 text-gray-500 dark:text-gray-500 leading-snug">
+          <strong>Tips:</strong>
+          <ul className="mt-1 ml-1 space-y-0.5">
+            <li>• Drag nodes to reposition</li>
+            <li>• Double-click to pin/unpin</li>
+            <li>• Double-click canvas to unpin all</li>
+            <li>• Scroll to zoom</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+GraphControls.displayName = 'GraphControls';

package/src/charts/LinkItem.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import type { GraphLink, GraphNode } from './ForceDirectedGraph';
+
+export interface LinkItemProps {
+  link: GraphLink;
+  onClick?: (l: GraphLink) => void;
+  defaultWidth?: number;
+  showLabel?: boolean;
+  nodes?: GraphNode[]; // Optional nodes array to resolve string IDs to node objects
+}
+
+export const LinkItem: React.FC<LinkItemProps> = ({ link, onClick, defaultWidth, showLabel = true, nodes = [] }) => {
+  const src = (link.source as any)?.id ?? (typeof link.source === 'string' ? link.source : undefined);
+  const tgt = (link.target as any)?.id ?? (typeof link.target === 'string' ? link.target : undefined);
+
+  // Helper to get node position from source/target (which could be node object or string ID)
+  const getNodePosition = (nodeOrId: string | GraphNode): { x: number; y: number } | null => {
+    if (typeof nodeOrId === 'object' && nodeOrId !== null) {
+      // It's a node object
+      const node = nodeOrId as GraphNode;
+      return { x: node.x ?? 0, y: node.y ?? 0 };
+    } else if (typeof nodeOrId === 'string') {
+      // It's a string ID, try to find in nodes array
+      const found = nodes.find(n => n.id === nodeOrId);
+      if (found) return { x: found.x ?? 0, y: found.y ?? 0 };
+    }
+    return null;
+  };
+
+  const sourcePos = getNodePosition(link.source);
+  const targetPos = getNodePosition(link.target);
+
+  // If we can't get positions, render nothing (or a placeholder)
+  if (!sourcePos || !targetPos) {
+    return null;
+  }
+
+  // Calculate midpoint for label positioning
+  const midX = (sourcePos.x + targetPos.x) / 2;
+  const midY = (sourcePos.y + targetPos.y) / 2;
+
+  return (
+    <g>
+      <line
+        x1={sourcePos.x}
+        y1={sourcePos.y}
+        x2={targetPos.x}
+        y2={targetPos.y}
+        data-source={src}
+        data-target={tgt}
+        stroke={link.color}
+        strokeWidth={link.width ?? defaultWidth ?? 1}
+        opacity={0.6}
+        className="cursor-pointer transition-opacity hover:opacity-100"
+        onClick={() => onClick?.(link)}
+      />
+      {showLabel && link.label && (
+        <text
+          x={midX}
+          y={midY}
+          fill="#666"
+          fontSize="10"
+          textAnchor="middle"
+          dominantBaseline="middle"
+          pointerEvents="none"
+        >
+          {link.label}
+        </text>
+      )}
+    </g>
+  );
+};
+
+export default LinkItem;

package/src/charts/NodeItem.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import type { GraphNode } from './ForceDirectedGraph';
+
+export interface NodeItemProps {
+  node: GraphNode;
+  isSelected: boolean;
+  isHovered: boolean;
+  pinned: boolean;
+  defaultNodeSize: number;
+  defaultNodeColor: string;
+  showLabel?: boolean;
+  onClick?: (n: GraphNode) => void;
+  onDoubleClick?: (e: React.MouseEvent, n: GraphNode) => void;
+  onMouseEnter?: (n: GraphNode) => void;
+  onMouseLeave?: () => void;
+  onMouseDown?: (e: React.MouseEvent, n: GraphNode) => void;
+}
+
+export const NodeItem: React.FC<NodeItemProps> = ({
+  node,
+  isSelected,
+  isHovered,
+  pinned,
+  defaultNodeSize,
+  defaultNodeColor,
+  showLabel = true,
+  onClick,
+  onDoubleClick,
+  onMouseEnter,
+  onMouseLeave,
+  onMouseDown,
+}) => {
+  const nodeSize = node.size || defaultNodeSize;
+  const nodeColor = node.color || defaultNodeColor;
+
+  const x = node.x ?? 0;
+  const y = node.y ?? 0;
+
+  return (
+    <g
+      key={node.id}
+      className="cursor-pointer node"
+      data-id={node.id}
+      transform={`translate(${x},${y})`}
+      onClick={() => onClick?.(node)}
+      onDoubleClick={(e) => onDoubleClick?.(e, node)}
+      onMouseEnter={() => onMouseEnter?.(node)}
+      onMouseLeave={() => onMouseLeave?.()}
+      onMouseDown={(e) => onMouseDown?.(e, node)}
+    >
+      <circle
+        r={nodeSize}
+        fill={nodeColor}
+        stroke={isSelected ? '#000' : isHovered ? '#666' : 'none'}
+        strokeWidth={pinned ? 3 : isSelected ? 2.5 : isHovered ? 2 : 1.5}
+        opacity={isHovered || isSelected ? 1 : 0.9}
+      />
+      {pinned && (
+        <circle r={nodeSize + 4} fill="none" stroke="#ff6b6b" strokeWidth={1} opacity={0.5} className="pointer-events-none" />
+      )}
+      {showLabel && node.label && (
+        <text y={nodeSize + 15} fill="#333" fontSize="12" textAnchor="middle" dominantBaseline="middle" pointerEvents="none" className="select-none">
+          {node.label}
+        </text>
+      )}
+    </g>
+  );
+};
+
+export default NodeItem;