@infinit-canvas/react 0.1.8 → 0.1.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@infinit-canvas/react",
-  "version": "0.1.8",
+  "version": "0.1.11",
   "description": "A performant infinite canvas React component powered by OffscreenCanvas and Web Workers",
   "type": "module",
   "main": "./dist/react-infinite-canvas.cjs",
@@ -16,7 +16,9 @@
   },
   "files": [
     "dist",
-    "src/types.d.ts"
+    "src/types.d.ts",
+    "LICENSE",
+    "README.md"
   ],
   "sideEffects": false,
   "keywords": [

package/src/types.d.ts

@@ -40,11 +40,11 @@ export interface NodeHandle {
   y?: number;
 }
 
-export interface Node<T = Record<string, unknown>> {
+export interface Node<T = Record<string, unknown>, TType extends string = string> {
   id: string;
   position: XYPosition;
   data: T;
-  type?: string;
+  type?: TType;
   width?: number;
   height?: number;
   selected?: boolean;
@@ -62,17 +62,18 @@ export interface Node<T = Record<string, unknown>> {
   ariaLabel?: string;
   className?: string;
   style?: React.CSSProperties;
+  measured?: { width?: number; height?: number };
 }
 
 // ─── Edge Types ──────────────────────────────────────────────────
 
 export type EdgeType = 'default' | 'straight' | 'step' | 'smoothstep';
 
-export interface Edge<T = Record<string, unknown>> {
+export interface Edge<T = Record<string, unknown>, TType extends string = string> {
   id: string;
   source: string;
   target: string;
-  type?: EdgeType | string;
+  type?: TType;
   sourceHandle?: string | null;
   targetHandle?: string | null;
   data?: T;
@@ -336,6 +337,13 @@ export interface InfiniteCanvasProps {
   edgesReconnectable?: boolean;
   elevateNodesOnSelect?: boolean;
   elevateEdgesOnSelect?: boolean;
+  noDragClassName?: string;
+  noPanClassName?: string;
+
+  // Selection drag events
+  onSelectionDragStart?: SelectionDragHandler;
+  onSelectionDrag?: SelectionDragHandler;
+  onSelectionDragStop?: SelectionDragHandler;
 
   // DOM event passthrough
   onDragOver?: (event: React.DragEvent) => void;
@@ -401,6 +409,10 @@ export interface PanelProps {
 
 // ─── Hook Return Types ───────────────────────────────────────────
 
+export interface ViewportAnimationOptions {
+  duration?: number;
+}
+
 export interface ReactFlowInstance {
   getNodes: () => Node[];
   getEdges: () => Edge[];
@@ -412,15 +424,18 @@ export interface ReactFlowInstance {
   addEdges: (edges: Edge | Edge[]) => void;
   deleteElements: (params: { nodes?: Node[]; edges?: Edge[] }) => void;
   getViewport: () => Viewport;
-  setViewport: (viewport: Partial<Viewport>) => void;
+  setViewport: (viewport: Partial<Viewport>, options?: ViewportAnimationOptions) => void;
   getZoom: () => number;
-  zoomIn: () => void;
-  zoomOut: () => void;
-  zoomTo: (zoom: number) => void;
+  zoomIn: (options?: ViewportAnimationOptions) => void;
+  zoomOut: (options?: ViewportAnimationOptions) => void;
+  zoomTo: (zoom: number, options?: ViewportAnimationOptions) => void;
   fitView: (options?: FitViewOptions) => void;
-  setCenter: (x: number, y: number, options?: { zoom?: number }) => void;
+  fitBounds: (bounds: Rect, options?: FitViewOptions) => void;
+  setCenter: (x: number, y: number, options?: { zoom?: number; duration?: number }) => void;
   screenToFlowPosition: (position: XYPosition) => XYPosition;
   flowToScreenPosition: (position: XYPosition) => XYPosition;
+  updateNodeData: (nodeId: string, dataUpdate: Partial<Node['data']> | ((node: Node) => Partial<Node['data']>)) => void;
+  toObject: () => { nodes: Node[]; edges: Edge[]; viewport: Viewport };
 }
 
 export interface UseOnViewportChangeOptions {
@@ -434,7 +449,7 @@ export interface UseOnSelectionChangeOptions {
 }
 
 export interface UseHandleConnectionsOptions {
-  nodeId: string;
+  nodeId?: string;
   type: HandleType;
   handleId?: string;
 }
@@ -443,7 +458,7 @@ export interface UseHandleConnectionsOptions {
 
 // Core
 export declare function InfiniteCanvas(props: InfiniteCanvasProps): JSX.Element;
-export declare function InfiniteCanvasProvider(props: { children: React.ReactNode }): JSX.Element;
+export declare function InfiniteCanvasProvider(props: { children: React.ReactNode; initialNodes?: Node[]; initialEdges?: Edge[] }): JSX.Element;
 export declare function useInfiniteCanvas(options?: Partial<InfiniteCanvasProps>): {
   wrapRef: React.RefObject<HTMLDivElement>;
   canvasRef: React.RefObject<HTMLCanvasElement>;
@@ -482,6 +497,30 @@ 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;
+export declare function useStore<T>(selector: (state: InfiniteCanvasState) => T, equalityFn?: (a: T, b: T) => boolean): T;
+export declare function useStoreApi(): { getState: () => InfiniteCanvasState; setState: (partial: Partial<InfiniteCanvasState>) => void; subscribe: (listener: (state: InfiniteCanvasState) => void) => () => void };
+
+// Undo/Redo
+export interface UseUndoRedoOptions {
+  maxHistorySize?: number;
+}
+export interface UseUndoRedoReturn {
+  undo: () => void;
+  redo: () => void;
+  takeSnapshot: () => void;
+  canUndo: boolean;
+  canRedo: boolean;
+}
+export declare function useUndoRedo(options?: UseUndoRedoOptions): UseUndoRedoReturn;
+
+// Change middleware
+export declare function useOnNodesChangeMiddleware<NodeType extends Node = Node>(
+  middleware: (changes: NodeChange<NodeType>[]) => NodeChange<NodeType>[] | false | void
+): (originalOnNodesChange: OnNodesChange<NodeType>) => OnNodesChange<NodeType>;
+
+export declare function useOnEdgesChangeMiddleware<EdgeType extends Edge = Edge>(
+  middleware: (changes: EdgeChange<EdgeType>[]) => EdgeChange<EdgeType>[] | false | void
+): (originalOnEdgesChange: OnEdgesChange<EdgeType>) => OnEdgesChange<EdgeType>;
 
 // Utilities
 export declare function applyNodeChanges<NodeType extends Node = Node>(changes: NodeChange<NodeType>[], nodes: NodeType[]): NodeType[];
@@ -504,6 +543,14 @@ 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;
+export declare function Handle(props: HandleProps): JSX.Element;
+export declare function NodeResizer(props: NodeResizerProps): JSX.Element;
+export declare function NodeToolbar(props: NodeToolbarProps): JSX.Element;
+export declare function EdgeToolbar(props: { children?: React.ReactNode; style?: React.CSSProperties; className?: string }): JSX.Element;
+export declare function EdgeLabelRenderer(props: { children?: React.ReactNode }): JSX.Element;
+export declare function ViewportPortal(props: { children?: React.ReactNode }): JSX.Element;
+export declare function ConnectionLine(props: ConnectionLineComponentProps): JSX.Element;
+export declare function SelectionBox(props: { selectionKeyCode?: string; selectionMode?: SelectionMode }): JSX.Element;
 
 // ─── React Flow Compatibility Types ─────────────────────────────
 
@@ -575,6 +622,33 @@ export interface HandleProps {
   children?: React.ReactNode;
 }
 
+export interface NodeResizerProps {
+  minWidth?: number;
+  minHeight?: number;
+  maxWidth?: number;
+  maxHeight?: number;
+  keepAspectRatio?: boolean;
+  shouldResize?: (event: any) => boolean;
+  onResizeStart?: (event: any, params: { width: number; height: number }) => void;
+  onResize?: (event: any, params: { width: number; height: number }) => void;
+  onResizeEnd?: (event: any, params: { width: number; height: number }) => void;
+  color?: string;
+  handleStyle?: React.CSSProperties;
+  lineStyle?: React.CSSProperties;
+  isVisible?: boolean;
+}
+
+export interface NodeToolbarProps {
+  nodeId?: string | string[];
+  isVisible?: boolean;
+  position?: Position;
+  offset?: number;
+  align?: 'center' | 'start' | 'end';
+  style?: React.CSSProperties;
+  className?: string;
+  children?: React.ReactNode;
+}
+
 export interface ConnectionLineComponentProps {
   fromX: number;
   fromY: number;
@@ -609,6 +683,9 @@ export type InfiniteCanvasState = {
   domNode: HTMLDivElement | null;
   width: number;
   height: number;
+  minZoom: number;
+  maxZoom: number;
+  [key: string]: unknown;
 };
 
 export type NodeOrigin = [number, number];