@quantumwake/kgraph 0.1.2

package/dist/index.d.ts

@@ -0,0 +1,309 @@
+import * as React from 'react';
+import React__default from 'react';
+
+interface KGraphNode {
+    id: string;
+    type: string;
+    position: {
+        x: number;
+        y: number;
+    };
+    data: Record<string, any>;
+    selected?: boolean;
+    dragging?: boolean;
+    hidden?: boolean;
+    width?: number;
+    height?: number;
+    group?: string;
+}
+interface KGraphEdge {
+    id: string;
+    source: string;
+    target: string;
+    sourceHandle?: string;
+    targetHandle?: string;
+    type?: string;
+    data?: Record<string, any>;
+    selected?: boolean;
+    animated?: boolean;
+}
+interface KGraphConnection {
+    source: string;
+    target: string;
+    sourceHandle?: string;
+    targetHandle?: string;
+}
+type HandlePosition = 'top' | 'right' | 'bottom' | 'left';
+type HandleType = 'source' | 'target';
+interface HandleInfo {
+    nodeId: string;
+    handleId: string;
+    type: HandleType;
+    position: HandlePosition;
+    x: number;
+    y: number;
+}
+type NodeChange = {
+    type: 'position';
+    id: string;
+    position?: {
+        x: number;
+        y: number;
+    };
+    dragging: boolean;
+} | {
+    type: 'select';
+    id: string;
+    selected: boolean;
+} | {
+    type: 'remove';
+    id: string;
+} | {
+    type: 'add';
+    item: KGraphNode;
+} | {
+    type: 'dimensions';
+    id: string;
+    dimensions: {
+        width: number;
+        height: number;
+    };
+};
+type EdgeChange = {
+    type: 'select';
+    id: string;
+    selected: boolean;
+} | {
+    type: 'remove';
+    id: string;
+} | {
+    type: 'add';
+    item: KGraphEdge;
+};
+interface KGraphViewport {
+    x: number;
+    y: number;
+    zoom: number;
+}
+interface NodeComponentProps {
+    id: string;
+    data: Record<string, any>;
+    selected: boolean;
+    type: string;
+}
+interface EdgeComponentProps {
+    id: string;
+    sourceX: number;
+    sourceY: number;
+    targetX: number;
+    targetY: number;
+    sourcePosition: HandlePosition;
+    targetPosition: HandlePosition;
+    selected: boolean;
+    data?: Record<string, any>;
+    animated?: boolean;
+    style?: React__default.CSSProperties;
+}
+interface HandleProps {
+    id: string;
+    type: HandleType;
+    position: HandlePosition;
+    style?: React__default.CSSProperties;
+    className?: string;
+}
+interface KGraphCanvasProps {
+    nodes: KGraphNode[];
+    edges: KGraphEdge[];
+    onNodesChange?: (changes: NodeChange[]) => void;
+    onEdgesChange?: (changes: EdgeChange[]) => void;
+    onConnect?: (connection: KGraphConnection) => void;
+    onNodeClick?: (event: React__default.MouseEvent, node: KGraphNode) => void;
+    onEdgeClick?: (event: React__default.MouseEvent, edge: KGraphEdge) => void;
+    onPaneClick?: (event: React__default.MouseEvent) => void;
+    onDrop?: (event: React__default.DragEvent, position: {
+        x: number;
+        y: number;
+    }) => void;
+    onDragOver?: (event: React__default.DragEvent) => void;
+    nodeTypes?: Record<string, React__default.ComponentType<NodeComponentProps>>;
+    edgeTypes?: Record<string, React__default.ComponentType<EdgeComponentProps>>;
+    snapToGrid?: boolean;
+    snapGrid?: [number, number];
+    panOnDrag?: boolean;
+    zoomOnScroll?: boolean;
+    nodesDraggable?: boolean;
+    nodesConnectable?: boolean;
+    elementsSelectable?: boolean;
+    fitView?: boolean;
+    showMiniMap?: boolean;
+    showBackground?: boolean;
+    backgroundGap?: number;
+    minZoom?: number;
+    maxZoom?: number;
+    className?: string;
+    style?: React__default.CSSProperties;
+    children?: React__default.ReactNode;
+}
+interface KGraphContextValue {
+    viewport: KGraphViewport;
+    setViewport: React__default.Dispatch<React__default.SetStateAction<KGraphViewport>>;
+    screenToCanvasPosition: (screenX: number, screenY: number) => {
+        x: number;
+        y: number;
+    };
+    canvasToScreenPosition: (canvasX: number, canvasY: number) => {
+        x: number;
+        y: number;
+    };
+    fitView: (options?: {
+        padding?: number;
+    }) => void;
+    zoomIn: () => void;
+    zoomOut: () => void;
+    zoomTo: (level: number) => void;
+    registerHandle: (info: HandleInfo) => void;
+    unregisterHandle: (nodeId: string, handleId: string) => void;
+    getHandlePosition: (nodeId: string, handleId: string) => HandleInfo | undefined;
+    getAllHandles: () => Map<string, HandleInfo>;
+    containerRef: React__default.RefObject<HTMLDivElement | null>;
+    nodes: KGraphNode[];
+    edges: KGraphEdge[];
+}
+
+declare const KGraphCanvas: React__default.FC<KGraphCanvasProps>;
+
+declare function useKGraphContext(): KGraphContextValue;
+interface KGraphProviderProps {
+    children: React__default.ReactNode;
+    nodes: KGraphNode[];
+    edges: KGraphEdge[];
+    initialViewport?: KGraphViewport;
+    minZoom?: number;
+    maxZoom?: number;
+}
+declare const KGraphProvider: React__default.FC<KGraphProviderProps>;
+
+/**
+ * Public hook for accessing KGraph viewport controls.
+ * Drop-in replacement for ReactFlow's useReactFlow().
+ */
+declare function useKGraph(): {
+    screenToCanvasPosition: (screenX: number, screenY: number) => {
+        x: number;
+        y: number;
+    };
+    fitView: (options?: {
+        padding?: number;
+    }) => void;
+    zoomIn: () => void;
+    zoomOut: () => void;
+    zoomTo: (level: number) => void;
+    getViewport: () => KGraphViewport;
+    setViewport: React.Dispatch<React.SetStateAction<KGraphViewport>>;
+    getNodes: () => KGraphNode[];
+    getEdges: () => KGraphEdge[];
+};
+
+interface KGraphHandleProps extends HandleProps {
+    nodeId?: string;
+    onConnectionStart?: (nodeId: string, handleId: string, type: 'source' | 'target', e: React__default.MouseEvent) => void;
+}
+declare const Handle: React__default.FC<KGraphHandleProps>;
+
+interface EdgeLabelProps {
+    x: number;
+    y: number;
+    zoom: number;
+    children: React__default.ReactNode;
+}
+/**
+ * EdgeLabel renders children as an HTML overlay at the given canvas coordinates.
+ * Replaces ReactFlow's EdgeLabelRenderer.
+ * The content is scaled inversely to the zoom level so it stays a consistent screen size.
+ */
+declare const EdgeLabel: React__default.FC<EdgeLabelProps>;
+
+interface NodeRendererProps {
+    nodes: KGraphNode[];
+    nodeTypes: Record<string, React__default.ComponentType<NodeComponentProps>>;
+    defaultNodeType?: React__default.ComponentType<NodeComponentProps>;
+    onNodesChange?: (changes: NodeChange[]) => void;
+    snapToGrid: boolean;
+    snapGrid: [number, number];
+    draggable: boolean;
+    selectable: boolean;
+    onNodeClick?: (event: React__default.MouseEvent, node: KGraphNode) => void;
+    onConnectionStart?: (nodeId: string, handleId: string, type: 'source' | 'target', e: React__default.MouseEvent) => void;
+    zoom: number;
+}
+declare const NodeRenderer: React__default.FC<NodeRendererProps>;
+
+interface EdgeRendererProps {
+    edges: KGraphEdge[];
+    edgeTypes: Record<string, React__default.ComponentType<EdgeComponentProps>>;
+    onEdgeClick?: (event: React__default.MouseEvent, edge: KGraphEdge) => void;
+    selectedEdgeId?: string | null;
+}
+declare const EdgeRenderer: React__default.FC<EdgeRendererProps>;
+
+interface ConnectionLineProps {
+    sourceX: number;
+    sourceY: number;
+    sourcePosition: HandlePosition;
+    targetX: number;
+    targetY: number;
+}
+declare const ConnectionLine: React__default.FC<ConnectionLineProps>;
+
+interface DotGridProps {
+    viewport: KGraphViewport;
+    gap?: number;
+    color?: string;
+    size?: number;
+}
+declare const DotGrid: React__default.FC<DotGridProps>;
+
+interface MiniMapProps {
+    nodes: KGraphNode[];
+    viewport: KGraphViewport;
+    width?: number;
+    height?: number;
+    nodeColor?: string | ((node: KGraphNode) => string);
+    maskColor?: string;
+    backgroundColor?: string;
+    borderColor?: string;
+    onViewportChange?: (viewport: KGraphViewport) => void;
+    containerWidth: number;
+    containerHeight: number;
+}
+declare const MiniMap: React__default.FC<MiniMapProps>;
+
+/**
+ * Compute a cubic bezier path between two points with directional control points.
+ * Drop-in replacement for ReactFlow's getBezierPath — uses the same control point
+ * algorithm so curves look identical.
+ *
+ * Returns [pathString, labelX, labelY, offsetX, offsetY]
+ */
+declare function getBezierPath({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition, curvature, }: {
+    sourceX: number;
+    sourceY: number;
+    sourcePosition?: HandlePosition;
+    targetX: number;
+    targetY: number;
+    targetPosition?: HandlePosition;
+    curvature?: number;
+}): [string, number, number, number, number];
+
+/**
+ * Apply an array of node changes immutably.
+ * Drop-in replacement for ReactFlow's applyNodeChanges.
+ */
+declare function applyNodeChanges(changes: NodeChange[], nodes: KGraphNode[]): KGraphNode[];
+/**
+ * Apply an array of edge changes immutably.
+ * Drop-in replacement for ReactFlow's applyEdgeChanges.
+ */
+declare function applyEdgeChanges(changes: EdgeChange[], edges: KGraphEdge[]): KGraphEdge[];
+
+export { ConnectionLine, DotGrid, type EdgeChange, type EdgeComponentProps, EdgeLabel, EdgeRenderer, Handle, type HandleInfo, type HandlePosition, type HandleProps, type HandleType, KGraphCanvas, type KGraphCanvasProps, type KGraphConnection, type KGraphContextValue, type KGraphEdge, type KGraphNode, KGraphProvider, type KGraphViewport, MiniMap, type NodeChange, type NodeComponentProps, NodeRenderer, applyEdgeChanges, applyNodeChanges, getBezierPath, useKGraph, useKGraphContext };