@infinit-canvas/react 0.1.0 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@infinit-canvas/react",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "A performant infinite canvas React component powered by OffscreenCanvas and Web Workers",
   "type": "module",
   "main": "./dist/react-infinite-canvas.cjs",

package/src/types.d.ts

@@ -8,6 +8,18 @@ export type SnapGrid = [number, number];
 export type CoordinateExtent = [[number, number], [number, number]];
 
 export type Position = 'top' | 'bottom' | 'left' | 'right';
+export declare const Position: {
+  readonly Top: 'top';
+  readonly Bottom: 'bottom';
+  readonly Left: 'left';
+  readonly Right: 'right';
+};
+
+export type MarkerType = 'arrow' | 'arrowclosed';
+export declare const MarkerType: {
+  readonly Arrow: 'arrow';
+  readonly ArrowClosed: 'arrowclosed';
+};
 export type HandleType = 'source' | 'target';
 export type ConnectionMode = 'strict' | 'loose';
 export type SelectionMode = 'full' | 'partial';
@@ -236,8 +248,13 @@ export interface InfiniteCanvasProps {
   nodes?: Node[];
   edges?: Edge[];
 
+  // Custom types
+  nodeTypes?: NodeTypes;
+  edgeTypes?: EdgeTypes;
+
   // Appearance
   dark?: boolean;
+  colorMode?: ColorMode;
   gridSize?: number;
   width?: string | number;
   height?: string | number;
@@ -320,6 +337,20 @@ export interface InfiniteCanvasProps {
   elevateNodesOnSelect?: boolean;
   elevateEdgesOnSelect?: boolean;
 
+  // DOM event passthrough
+  onDragOver?: (event: React.DragEvent) => void;
+  onDrop?: (event: React.DragEvent) => void;
+
+  // React Flow compatibility
+  proOptions?: ProOptions;
+  nodeOrigin?: NodeOrigin;
+  defaultViewport?: Viewport;
+  selectNodesOnDrag?: boolean;
+  onSelectionDragStart?: SelectionDragHandler;
+  onNodesDelete?: OnNodesDelete;
+  onEdgesDelete?: OnEdgesDelete;
+  onNodeDragStart?: OnNodeDrag;
+
   // Legacy
   onHudUpdate?: (data: HudData) => void;
   showHud?: boolean;
@@ -328,6 +359,9 @@ export interface InfiniteCanvasProps {
 
   // Children
   children?: React.ReactNode;
+
+  // Allow additional props
+  [key: string]: any;
 }
 
 export interface ControlsProps {
@@ -470,3 +504,122 @@ 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;
+
+// ─── React Flow Compatibility Types ─────────────────────────────
+
+export interface Box {
+  x: number;
+  y: number;
+  x2: number;
+  y2: number;
+}
+
+export declare function nodeToBox(node: Node): Box;
+
+export interface InternalNode<NodeType extends Node = Node> extends NodeType {
+  _absolutePosition: XYPosition;
+  measured?: { width?: number; height?: number };
+}
+
+export type BuiltInNode = Node;
+
+export interface NodeProps<NodeType extends Node = Node> {
+  id: string;
+  data: NodeType['data'];
+  type: string;
+  selected: boolean;
+  dragging: boolean;
+  width?: number;
+  height?: number;
+  positionAbsoluteX: number;
+  positionAbsoluteY: number;
+  zIndex: number;
+  isConnectable: boolean;
+  sourcePosition?: Position;
+  targetPosition?: Position;
+  dragHandle?: string;
+}
+
+export interface EdgeProps<EdgeType extends Edge = Edge> {
+  id: string;
+  source: string;
+  target: string;
+  sourceX: number;
+  sourceY: number;
+  targetX: number;
+  targetY: number;
+  selected?: boolean;
+  animated?: boolean;
+  data?: EdgeType['data'];
+  label?: string;
+  type?: string;
+  sourceHandleId?: string | null;
+  targetHandleId?: string | null;
+  sourcePosition: Position;
+  targetPosition: Position;
+  style?: React.CSSProperties;
+  markerStart?: string;
+  markerEnd?: string;
+}
+
+export interface HandleProps {
+  type: HandleType;
+  position: Position;
+  id?: string;
+  isConnectable?: boolean;
+  isConnectableStart?: boolean;
+  isConnectableEnd?: boolean;
+  onConnect?: (connection: Connection) => void;
+  style?: React.CSSProperties;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export interface ConnectionLineComponentProps {
+  fromX: number;
+  fromY: number;
+  toX: number;
+  toY: number;
+  fromPosition: Position;
+  toPosition: Position;
+  fromNode?: Node;
+  toNode?: Node;
+  connectionLineType?: string;
+  connectionLineStyle?: React.CSSProperties;
+}
+
+export interface MiniMapNodeProps {
+  id: string;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  selected: boolean;
+  color?: string;
+  style?: React.CSSProperties;
+}
+
+export type NodeTypes = Record<string, React.ComponentType<NodeProps<any>>>;
+export type EdgeTypes = Record<string, React.ComponentType<EdgeProps<any>>>;
+
+export type InfiniteCanvasInstance = ReactFlowInstance;
+export type InfiniteCanvasState = {
+  nodes: Node[];
+  edges: Edge[];
+  domNode: HTMLDivElement | null;
+  width: number;
+  height: number;
+};
+
+export type NodeOrigin = [number, number];
+
+export interface ProOptions {
+  account?: string;
+  hideAttribution?: boolean;
+}
+
+export type SelectionDragHandler = (event: React.MouseEvent, nodes: Node[]) => void;
+export type OnNodesDelete = (nodes: Node[]) => void;
+export type OnEdgesDelete = (edges: Edge[]) => void;
+
+export type useShallow = <T>(selector: (state: any) => T) => T;