@jeevandev/flow-canvas 0.0.4 → 0.0.5

package/dist/index.d.ts

@@ -1 +1,214 @@
-export {}
+import { default as default_2 } from 'react';
+import { JSX } from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { StoreApi } from 'zustand';
+import { WritableDraft } from 'immer';
+
+export declare const Canvas: ({ children, grid, background, className, style, canvasStyle }: CanvasProps) => JSX.Element;
+
+declare interface CanvasProps {
+    children?: ReactNode;
+    grid?: ReactNode;
+    background?: ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    canvasStyle?: React.CSSProperties;
+}
+
+export declare const DefaultNode: ({ data, ...props }: {
+    data: any;
+} & React.HTMLAttributes<HTMLDivElement>) => JSX.Element;
+
+export declare interface Edge {
+    id: string;
+    source: string;
+    target: string;
+    sourceHandle?: string;
+    targetHandle?: string;
+    type?: string;
+    data?: Record<string, any>;
+    style?: React.CSSProperties;
+    animated?: boolean;
+}
+
+export declare const Editor: ({ children, initialNodes, initialEdges, nodes, config, className, style, onChange }: EditorProps & {
+    nodes?: EditorNode[];
+}) => JSX.Element;
+
+export declare interface EditorConfig {
+    width?: number;
+    height?: number;
+    showGrid?: boolean;
+    gridSize?: number;
+    gridColor?: string;
+    snapGuide?: boolean;
+    snapping?: boolean;
+    pan?: boolean;
+    zoom?: boolean;
+    isLimited?: boolean;
+    minZoom?: number;
+    maxZoom?: number;
+    viewOnly?: boolean;
+    connectionMode?: 'loose' | 'strict';
+    snapToHandle?: boolean;
+    rotation?: boolean;
+    rotationSnap?: number;
+    rotationSpeed?: number;
+}
+
+export declare interface EditorNode {
+    id: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    rotation?: number;
+    draggable?: boolean;
+    resizable?: boolean;
+    rotatable?: boolean;
+    type?: string;
+    data?: Record<string, any>;
+    handles?: Record<string, {
+        id: string;
+        type: 'source' | 'target';
+        position: 'top' | 'right' | 'bottom' | 'left';
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    }>;
+    className?: string;
+    style?: React.CSSProperties;
+    customCss?: string;
+    [key: string]: any;
+}
+
+export declare interface EditorProps {
+    children?: ReactNode;
+    initialNodes?: EditorNode[];
+    initialEdges?: Edge[];
+    config?: EditorConfig;
+    className?: string;
+    style?: React.CSSProperties;
+    onChange?: (state: EditorState) => void;
+}
+
+export declare interface EditorState {
+    nodes: Record<string, EditorNode>;
+    edges: Record<string, Edge>;
+    selectedIds: string[];
+    config: EditorConfig;
+    camera: {
+        x: number;
+        y: number;
+        zoom: number;
+    };
+    dimensions: {
+        width: number;
+        height: number;
+    };
+    connectionState: {
+        nodeId: string | null;
+        handleId: string | null;
+        handleType: 'source' | 'target' | null;
+        position: {
+            x: number;
+            y: number;
+        } | null;
+        isValid: boolean;
+    };
+    startConnection: (nodeId: string, handleId: string, handleType: 'source' | 'target', position: {
+        x: number;
+        y: number;
+    }) => void;
+    updateConnection: (position: {
+        x: number;
+        y: number;
+    }) => void;
+    endConnection: () => void;
+    setNodes: (nodes: EditorNode[]) => void;
+    addNode: (node: EditorNode) => void;
+    updateNode: (id: string, node: Partial<EditorNode>) => void;
+    registerHandle: (nodeId: string, handleId: string, handle: {
+        type: 'source' | 'target';
+        position: 'top' | 'right' | 'bottom' | 'left';
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    }) => void;
+    removeNode: (id: string) => void;
+    setEdges: (edges: Edge[]) => void;
+    addEdge: (edge: Edge) => void;
+    removeEdge: (id: string) => void;
+    selectNode: (id: string, multi?: boolean) => void;
+    deselectAll: () => void;
+    deleteSelected: () => void;
+    duplicateSelected: () => void;
+    setConfig: (config: Partial<EditorConfig>) => void;
+    panCamera: (dx: number, dy: number) => void;
+    zoomCamera: (factor: number, cx: number, cy: number) => void;
+    setCamera: (x: number, y: number, zoom: number) => void;
+    setDimensions: (width: number, height: number) => void;
+    nudgeSelected: (dx: number, dy: number) => void;
+    resizeNode: (id: string, x: number, y: number, w: number, h: number) => void;
+    rotateNode: (id: string, angle: number) => void;
+}
+
+export declare const ElementWrapper: default_2.MemoExoticComponent<({ id, children, className, style, draggable, resizable, rotatable, selectable, rotationSnap, showDragHandle, doubleClickToEdit, ...props }: Props) => JSX.Element | null>;
+
+export declare const Handle: ({ type, id, position, className, style, ...props }: HandleProps) => JSX.Element;
+
+declare interface HandleProps extends default_2.HTMLAttributes<HTMLDivElement> {
+    type: 'source' | 'target';
+    id?: string;
+    position?: 'top' | 'right' | 'bottom' | 'left';
+}
+
+export declare const InputNode: ({ data, ...props }: {
+    data: any;
+} & React.HTMLAttributes<HTMLDivElement>) => JSX.Element;
+
+export declare const NodeLayer: ({ nodeTypes }: NodeLayerProps) => JSX.Element;
+
+declare interface NodeLayerProps {
+    nodeTypes?: Record<string, default_2.ComponentType<any>>;
+}
+
+export declare const OutputNode: ({ data, ...props }: {
+    data: any;
+} & React.HTMLAttributes<HTMLDivElement>) => JSX.Element;
+
+declare interface Props extends Omit<default_2.HTMLAttributes<HTMLDivElement>, 'id' | 'style' | 'onDrag'> {
+    id: string;
+    children: ReactNode;
+    className?: string;
+    style?: default_2.CSSProperties;
+    draggable?: boolean;
+    resizable?: boolean;
+    rotatable?: boolean;
+    selectable?: boolean;
+    rotationSnap?: boolean | number;
+    showDragHandle?: boolean;
+    doubleClickToEdit?: boolean;
+}
+
+declare interface Props_2 {
+    id: string;
+    children: ReactNode;
+    className?: string;
+    style?: default_2.CSSProperties;
+    draggable?: boolean;
+    selectable?: boolean;
+}
+
+export declare const useEditor: <T>(selector: (state: EditorState) => T) => T;
+
+export declare const useEditorStoreApi: () => Omit<StoreApi<EditorState>, "setState"> & {
+    setState(nextStateOrUpdater: EditorState | Partial<EditorState> | ((state: WritableDraft<EditorState>) => void), shouldReplace?: false): void;
+    setState(nextStateOrUpdater: EditorState | ((state: WritableDraft<EditorState>) => void), shouldReplace: true): void;
+};
+
+export declare const WorkflowNodeWrapper: default_2.MemoExoticComponent<({ id, children, className, style, draggable, selectable, }: Props_2) => JSX.Element | null>;
+
+export { }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jeevandev/flow-canvas",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "type": "module",
   "main": "./dist/flow-canvas.umd.js",
   "module": "./dist/flow-canvas.es.js",
@@ -10,7 +10,7 @@
       "import": "./dist/flow-canvas.es.js",
       "require": "./dist/flow-canvas.umd.js"
     },
-    "./style.css": "./dist/style.css"
+    "./style.css": "./dist/flow-canvas.css"
   },
   "files": [
     "dist"