@infinit-canvas/react 0.1.0

package/dist/styles.css

@@ -0,0 +1,117 @@
+/* react-infinite-canvas styles */
+
+.ric-wrap {
+  position: relative;
+  overflow: hidden;
+  background: #f0f0f0;
+  border-radius: 12px;
+  border: 0.5px solid #e0e0e0;
+  cursor: grab;
+  user-select: none;
+  touch-action: none;
+}
+
+@media (prefers-color-scheme: dark) {
+  .ric-wrap {
+    background: #1e1e1e;
+    border-color: #333;
+  }
+}
+
+.ric-wrap.dragging {
+  cursor: grabbing;
+}
+
+.ric-canvas {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.ric-info {
+  position: absolute;
+  bottom: 12px;
+  left: 12px;
+  font-size: 12px;
+  font-family: monospace;
+  color: #888;
+  pointer-events: none;
+}
+
+.ric-hint {
+  position: absolute;
+  top: 12px;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 12px;
+  color: #999;
+  pointer-events: none;
+  background: #fafafa;
+  padding: 4px 12px;
+  border-radius: 20px;
+  border: 0.5px solid #e0e0e0;
+  white-space: nowrap;
+}
+
+@media (prefers-color-scheme: dark) {
+  .ric-hint {
+    background: #1a1a1a;
+    border-color: #333;
+    color: #666;
+  }
+}
+
+/* Loading overlay */
+.ric-loader {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: inherit;
+  z-index: 50;
+}
+
+.ric-spinner {
+  width: 28px;
+  height: 28px;
+  border: 3px solid rgba(0, 0, 0, 0.1);
+  border-top-color: #888;
+  border-radius: 50%;
+  animation: ric-spin 0.7s linear infinite;
+}
+
+@media (prefers-color-scheme: dark) {
+  .ric-spinner {
+    border-color: rgba(255, 255, 255, 0.1);
+    border-top-color: #666;
+  }
+}
+
+@keyframes ric-spin {
+  to { transform: rotate(360deg); }
+}
+
+/* Controls */
+.ric-controls-button:disabled {
+  opacity: 0.35;
+  cursor: default;
+  pointer-events: none;
+}
+
+.ric-controls-button:not(:disabled):hover {
+  background: #f0f0f0;
+}
+
+@media (prefers-color-scheme: dark) {
+  .ric-controls-button {
+    background: #2a2a2a !important;
+    border-color: rgba(255,255,255,0.12) !important;
+    color: #ccc !important;
+  }
+  .ric-controls-button:not(:disabled):hover {
+    background: #333 !important;
+  }
+}

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@infinit-canvas/react",
+  "version": "0.1.0",
+  "description": "A performant infinite canvas React component powered by OffscreenCanvas and Web Workers",
+  "type": "module",
+  "main": "./dist/react-infinite-canvas.cjs",
+  "module": "./dist/react-infinite-canvas.js",
+  "types": "./src/types.d.ts",
+  "exports": {
+    ".": {
+      "types": "./src/types.d.ts",
+      "import": "./dist/react-infinite-canvas.js",
+      "require": "./dist/react-infinite-canvas.cjs"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "files": [
+    "dist",
+    "src/types.d.ts"
+  ],
+  "sideEffects": false,
+  "keywords": [
+    "react",
+    "infinite-canvas",
+    "canvas",
+    "offscreen-canvas",
+    "web-worker",
+    "pan",
+    "zoom"
+  ],
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/awaisshah228/infinit-canvas"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.3.4",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "vite": "^6.0.0"
+  },
+  "scripts": {
+    "build": "vite build && cp src/styles.css dist/styles.css",
+    "dev": "vite build --watch"
+  },
+  "dependencies": {}
+}

package/src/types.d.ts

@@ -0,0 +1,472 @@
+// ─── Core Types ──────────────────────────────────────────────────
+
+export type XYPosition = { x: number; y: number };
+export type Dimensions = { width: number; height: number };
+export type Rect = XYPosition & Dimensions;
+export type Transform = [number, number, number]; // [tx, ty, scale]
+export type SnapGrid = [number, number];
+export type CoordinateExtent = [[number, number], [number, number]];
+
+export type Position = 'top' | 'bottom' | 'left' | 'right';
+export type HandleType = 'source' | 'target';
+export type ConnectionMode = 'strict' | 'loose';
+export type SelectionMode = 'full' | 'partial';
+export type PanOnScrollMode = 'free' | 'horizontal' | 'vertical';
+export type ColorMode = 'light' | 'dark' | 'system';
+export type BackgroundVariant = 'lines' | 'dots' | 'cross';
+export type PanelPosition =
+  | 'top-left' | 'top-right' | 'top-center'
+  | 'bottom-left' | 'bottom-right' | 'bottom-center';
+
+// ─── Node Types ──────────────────────────────────────────────────
+
+export interface NodeHandle {
+  id?: string;
+  type: HandleType;
+  position?: Position;
+  x?: number;
+  y?: number;
+}
+
+export interface Node<T = Record<string, unknown>> {
+  id: string;
+  position: XYPosition;
+  data: T;
+  type?: string;
+  width?: number;
+  height?: number;
+  selected?: boolean;
+  hidden?: boolean;
+  draggable?: boolean;
+  selectable?: boolean;
+  connectable?: boolean;
+  deletable?: boolean;
+  dragging?: boolean;
+  handles?: NodeHandle[];
+  parentId?: string;
+  extent?: 'parent' | CoordinateExtent;
+  expandParent?: boolean;
+  zIndex?: number;
+  ariaLabel?: string;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+// ─── Edge Types ──────────────────────────────────────────────────
+
+export type EdgeType = 'default' | 'straight' | 'step' | 'smoothstep';
+
+export interface Edge<T = Record<string, unknown>> {
+  id: string;
+  source: string;
+  target: string;
+  type?: EdgeType | string;
+  sourceHandle?: string | null;
+  targetHandle?: string | null;
+  data?: T;
+  label?: string;
+  animated?: boolean;
+  selected?: boolean;
+  hidden?: boolean;
+  deletable?: boolean;
+  selectable?: boolean;
+  zIndex?: number;
+  ariaLabel?: string;
+  style?: React.CSSProperties;
+  className?: string;
+}
+
+export interface Connection {
+  source: string;
+  target: string;
+  sourceHandle: string | null;
+  targetHandle: string | null;
+}
+
+export interface DefaultEdgeOptions extends Partial<Omit<Edge, 'id' | 'source' | 'target'>> {}
+
+// ─── Change Types ────────────────────────────────────────────────
+
+export interface NodePositionChange {
+  id: string;
+  type: 'position';
+  position?: XYPosition;
+  dragging?: boolean;
+}
+
+export interface NodeSelectionChange {
+  id: string;
+  type: 'select';
+  selected: boolean;
+}
+
+export interface NodeRemoveChange {
+  id: string;
+  type: 'remove';
+}
+
+export interface NodeAddChange<NodeType extends Node = Node> {
+  type: 'add';
+  item: NodeType;
+  index?: number;
+}
+
+export interface NodeReplaceChange<NodeType extends Node = Node> {
+  id: string;
+  type: 'replace';
+  item: NodeType;
+}
+
+export interface NodeDimensionChange {
+  id: string;
+  type: 'dimensions';
+  dimensions?: Dimensions;
+  setAttributes?: boolean | 'width' | 'height';
+  resizing?: boolean;
+}
+
+export type NodeChange<NodeType extends Node = Node> =
+  | NodePositionChange
+  | NodeSelectionChange
+  | NodeRemoveChange
+  | NodeAddChange<NodeType>
+  | NodeReplaceChange<NodeType>
+  | NodeDimensionChange;
+
+export interface EdgeSelectionChange {
+  id: string;
+  type: 'select';
+  selected: boolean;
+}
+
+export interface EdgeRemoveChange {
+  id: string;
+  type: 'remove';
+}
+
+export interface EdgeAddChange<EdgeType extends Edge = Edge> {
+  type: 'add';
+  item: EdgeType;
+  index?: number;
+}
+
+export interface EdgeReplaceChange<EdgeType extends Edge = Edge> {
+  id: string;
+  type: 'replace';
+  item: EdgeType;
+}
+
+export type EdgeChange<EdgeType extends Edge = Edge> =
+  | EdgeSelectionChange
+  | EdgeRemoveChange
+  | EdgeAddChange<EdgeType>
+  | EdgeReplaceChange<EdgeType>;
+
+// ─── Callback Types ──────────────────────────────────────────────
+
+export type OnNodesChange<NodeType extends Node = Node> = (changes: NodeChange<NodeType>[]) => void;
+export type OnEdgesChange<EdgeType extends Edge = Edge> = (changes: EdgeChange<EdgeType>[]) => void;
+export type OnConnect = (connection: Connection) => void;
+export type OnConnectStart = (event: React.MouseEvent | React.TouchEvent, params: { nodeId: string; handleId: string | null; handleType: HandleType }) => void;
+export type OnConnectEnd = (event: MouseEvent | TouchEvent) => void;
+export type IsValidConnection = (connection: Connection) => boolean;
+
+export type NodeMouseHandler<NodeType extends Node = Node> = (event: React.MouseEvent, node: NodeType) => void;
+export type EdgeMouseHandler<EdgeType extends Edge = Edge> = (event: React.MouseEvent, edge: EdgeType) => void;
+export type OnNodeDrag<NodeType extends Node = Node> = (event: React.MouseEvent, node: NodeType, nodes: NodeType[]) => void;
+
+export type OnSelectionChangeParams = { nodes: Node[]; edges: Edge[] };
+export type OnSelectionChangeFunc = (params: OnSelectionChangeParams) => void;
+
+export type OnMove = (event: MouseEvent | TouchEvent | null, viewport: Viewport) => void;
+export type OnMoveStart = OnMove;
+export type OnMoveEnd = OnMove;
+
+export type OnDelete = (params: { nodes: Node[]; edges: Edge[] }) => void;
+export type OnBeforeDelete = (params: { nodes: Node[]; edges: Edge[] }) => Promise<boolean>;
+export type OnError = (id: string, message: string) => void;
+export type OnInit = (instance: ReactFlowInstance) => void;
+
+// ─── Viewport Types ──────────────────────────────────────────────
+
+export interface Viewport {
+  x: number;
+  y: number;
+  zoom: number;
+}
+
+export interface FitViewOptions {
+  padding?: number;
+  minZoom?: number;
+  maxZoom?: number;
+  nodes?: { id: string }[];
+  duration?: number;
+}
+
+// ─── HUD Types ───────────────────────────────────────────────────
+
+export interface HudData {
+  wx: number;
+  wy: number;
+  zoom: string;
+  renderMs: string;
+  fps: number;
+  visible: number;
+  nodeCount: number;
+  visibleNodes: number;
+  edgeCount: number;
+}
+
+// ─── Card Types (Legacy) ─────────────────────────────────────────
+
+export interface Card {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+  title: string;
+  body: string;
+}
+
+// ─── Component Props ─────────────────────────────────────────────
+
+export interface InfiniteCanvasProps {
+  // Data
+  cards?: Card[];
+  nodes?: Node[];
+  edges?: Edge[];
+
+  // Appearance
+  dark?: boolean;
+  gridSize?: number;
+  width?: string | number;
+  height?: string | number;
+  className?: string;
+  style?: React.CSSProperties;
+
+  // Zoom
+  zoomMin?: number;
+  zoomMax?: number;
+
+  // Camera
+  initialCamera?: Viewport;
+  fitView?: boolean;
+  fitViewOptions?: FitViewOptions;
+
+  // Node/Edge callbacks
+  onNodesChange?: OnNodesChange;
+  onEdgesChange?: OnEdgesChange;
+  onConnect?: OnConnect;
+  onConnectStart?: OnConnectStart;
+  onConnectEnd?: OnConnectEnd;
+  onNodeClick?: NodeMouseHandler;
+  onNodeDoubleClick?: NodeMouseHandler;
+  onNodeMouseEnter?: NodeMouseHandler;
+  onNodeMouseMove?: NodeMouseHandler;
+  onNodeMouseLeave?: NodeMouseHandler;
+  onNodeContextMenu?: NodeMouseHandler;
+  onNodeDragStart?: OnNodeDrag;
+  onNodeDrag?: OnNodeDrag;
+  onNodeDragStop?: OnNodeDrag;
+  onEdgeClick?: EdgeMouseHandler;
+  onEdgeDoubleClick?: EdgeMouseHandler;
+  onEdgeMouseEnter?: EdgeMouseHandler;
+  onEdgeMouseMove?: EdgeMouseHandler;
+  onEdgeMouseLeave?: EdgeMouseHandler;
+  onEdgeContextMenu?: EdgeMouseHandler;
+  onPaneClick?: (event: React.MouseEvent) => void;
+  onPaneContextMenu?: (event: React.MouseEvent) => void;
+  onPaneMouseEnter?: (event: React.MouseEvent) => void;
+  onPaneMouseMove?: (event: React.MouseEvent) => void;
+  onPaneMouseLeave?: (event: React.MouseEvent) => void;
+  onSelectionChange?: OnSelectionChangeFunc;
+  onInit?: OnInit;
+  onMoveStart?: OnMoveStart;
+  onMove?: OnMove;
+  onMoveEnd?: OnMoveEnd;
+  onDelete?: OnDelete;
+  onBeforeDelete?: OnBeforeDelete;
+  onError?: OnError;
+
+  // Behavior
+  nodesDraggable?: boolean;
+  nodesConnectable?: boolean;
+  elementsSelectable?: boolean;
+  multiSelectionKeyCode?: string;
+  selectionOnDrag?: boolean;
+  selectionMode?: SelectionMode;
+  connectOnClick?: boolean;
+  connectionMode?: ConnectionMode;
+  connectionRadius?: number;
+  isValidConnection?: IsValidConnection;
+  snapToGrid?: boolean;
+  snapGrid?: SnapGrid;
+  deleteKeyCode?: string | string[];
+  panActivationKeyCode?: string;
+  panOnScroll?: boolean;
+  panOnScrollMode?: PanOnScrollMode;
+  panOnScrollSpeed?: number;
+  zoomOnScroll?: boolean;
+  zoomOnPinch?: boolean;
+  zoomOnDoubleClick?: boolean;
+  preventScrolling?: boolean;
+  translateExtent?: CoordinateExtent;
+  nodeExtent?: CoordinateExtent;
+  defaultEdgeOptions?: DefaultEdgeOptions;
+  autoPanOnNodeDrag?: boolean;
+  autoPanOnConnect?: boolean;
+  autoPanSpeed?: number;
+  edgesReconnectable?: boolean;
+  elevateNodesOnSelect?: boolean;
+  elevateEdgesOnSelect?: boolean;
+
+  // Legacy
+  onHudUpdate?: (data: HudData) => void;
+  showHud?: boolean;
+  showHint?: boolean;
+  hintText?: string;
+
+  // Children
+  children?: React.ReactNode;
+}
+
+export interface ControlsProps {
+  showZoom?: boolean;
+  showFitView?: boolean;
+  showInteractive?: boolean;
+  position?: PanelPosition;
+  style?: React.CSSProperties;
+  className?: string;
+}
+
+export interface MiniMapProps {
+  width?: number;
+  height?: number;
+  nodeColor?: string | ((node: Node) => string);
+  nodeStrokeColor?: string;
+  maskColor?: string;
+  style?: React.CSSProperties;
+  className?: string;
+}
+
+export interface BackgroundProps {
+  variant?: BackgroundVariant;
+  gap?: number;
+  size?: number;
+  color?: string;
+  style?: React.CSSProperties;
+  className?: string;
+}
+
+export interface PanelProps {
+  position?: PanelPosition;
+  style?: React.CSSProperties;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+// ─── Hook Return Types ───────────────────────────────────────────
+
+export interface ReactFlowInstance {
+  getNodes: () => Node[];
+  getEdges: () => Edge[];
+  getNode: (id: string) => Node | undefined;
+  getEdge: (id: string) => Edge | undefined;
+  setNodes: (nodes: Node[] | ((nodes: Node[]) => Node[])) => void;
+  setEdges: (edges: Edge[] | ((edges: Edge[]) => Edge[])) => void;
+  addNodes: (nodes: Node | Node[]) => void;
+  addEdges: (edges: Edge | Edge[]) => void;
+  deleteElements: (params: { nodes?: Node[]; edges?: Edge[] }) => void;
+  getViewport: () => Viewport;
+  setViewport: (viewport: Partial<Viewport>) => void;
+  getZoom: () => number;
+  zoomIn: () => void;
+  zoomOut: () => void;
+  zoomTo: (zoom: number) => void;
+  fitView: (options?: FitViewOptions) => void;
+  setCenter: (x: number, y: number, options?: { zoom?: number }) => void;
+  screenToFlowPosition: (position: XYPosition) => XYPosition;
+  flowToScreenPosition: (position: XYPosition) => XYPosition;
+}
+
+export interface UseOnViewportChangeOptions {
+  onChange?: (viewport: Viewport) => void;
+  onStart?: (viewport: Viewport) => void;
+  onEnd?: (viewport: Viewport) => void;
+}
+
+export interface UseOnSelectionChangeOptions {
+  onChange: OnSelectionChangeFunc;
+}
+
+export interface UseHandleConnectionsOptions {
+  nodeId: string;
+  type: HandleType;
+  handleId?: string;
+}
+
+// ─── Function Declarations ───────────────────────────────────────
+
+// Core
+export declare function InfiniteCanvas(props: InfiniteCanvasProps): JSX.Element;
+export declare function InfiniteCanvasProvider(props: { children: React.ReactNode }): JSX.Element;
+export declare function useInfiniteCanvas(options?: Partial<InfiniteCanvasProps>): {
+  wrapRef: React.RefObject<HTMLDivElement>;
+  canvasRef: React.RefObject<HTMLCanvasElement>;
+  onPointerDown: (e: React.PointerEvent) => void;
+  onPointerMove: (e: React.PointerEvent) => void;
+  onPointerUp: (e: React.PointerEvent) => void;
+  resetView: () => void;
+  addCard: (card?: Card) => void;
+  addNode: (node: Partial<Node>) => void;
+  getCamera: () => Viewport;
+  setCamera: (camera: Partial<Viewport>) => void;
+  screenToFlowPosition: (position: XYPosition) => XYPosition;
+  store: any;
+};
+
+// Hooks
+export declare function useNodesState<NodeType extends Node = Node>(
+  initialNodes: NodeType[]
+): [NodeType[], React.Dispatch<React.SetStateAction<NodeType[]>>, OnNodesChange<NodeType>];
+
+export declare function useEdgesState<EdgeType extends Edge = Edge>(
+  initialEdges: EdgeType[]
+): [EdgeType[], React.Dispatch<React.SetStateAction<EdgeType[]>>, OnEdgesChange<EdgeType>];
+
+export declare function useReactFlow(): ReactFlowInstance;
+export declare function useNodes<NodeType extends Node = Node>(): NodeType[];
+export declare function useEdges<EdgeType extends Edge = Edge>(): EdgeType[];
+export declare function useViewport(): Viewport;
+export declare function useConnection(): Connection | null;
+export declare function useNodesData(nodeIds: string | string[]): { id: string; type?: string; data: any }[];
+export declare function useNodeConnections(nodeId: string): Edge[];
+export declare function useHandleConnections(options: UseHandleConnectionsOptions): Edge[];
+export declare function useOnViewportChange(options: UseOnViewportChangeOptions): void;
+export declare function useOnSelectionChange(options: UseOnSelectionChangeOptions): void;
+export declare function useKeyPress(keyOrKeys: string | string[]): boolean;
+export declare function useUpdateNodeInternals(): (nodeId: string | string[]) => void;
+export declare function useNodesInitialized(options?: { includeHiddenNodes?: boolean }): boolean;
+export declare function useInternalNode(nodeId: string): Node | undefined;
+
+// Utilities
+export declare function applyNodeChanges<NodeType extends Node = Node>(changes: NodeChange<NodeType>[], nodes: NodeType[]): NodeType[];
+export declare function applyEdgeChanges<EdgeType extends Edge = Edge>(changes: EdgeChange<EdgeType>[], edges: EdgeType[]): EdgeType[];
+export declare function addEdge<EdgeType extends Edge = Edge>(edgeParams: EdgeType | Connection, edges: EdgeType[]): EdgeType[];
+export declare function isNode(element: any): element is Node;
+export declare function isEdge(element: any): element is Edge;
+export declare function getConnectedEdges(nodesOrId: Node[] | Node | string, edges: Edge[]): Edge[];
+export declare function getIncomers(nodeOrId: Node | string, nodes: Node[], edges: Edge[]): Node[];
+export declare function getOutgoers(nodeOrId: Node | string, nodes: Node[], edges: Edge[]): Node[];
+export declare function getNodesBounds(nodes: Node[]): Rect;
+export declare function getViewportForBounds(bounds: Rect, width: number, height: number, padding?: number): Viewport;
+export declare function snapPosition(position: XYPosition, snapGrid: SnapGrid): XYPosition;
+export declare function clampPosition(position: XYPosition, extent: CoordinateExtent): XYPosition;
+export declare function getNodeDimensions(node: Node): Dimensions;
+export declare function getNodesInside(nodes: Node[], rect: Rect, viewport: Viewport, partially?: boolean): Node[];
+
+// Components
+export declare function Controls(props: ControlsProps): JSX.Element;
+export declare function MiniMap(props: MiniMapProps): JSX.Element;
+export declare function Background(props: BackgroundProps): JSX.Element;
+export declare function Panel(props: PanelProps): JSX.Element;