@yh-ui/flow 0.1.21

package/dist/types/index.d.ts

@@ -0,0 +1,366 @@
+import type { Component, Ref } from 'vue';
+import type { FlowEventKey, FlowEventHandler, FlowEvents } from './events';
+import type { FitViewOptions } from './viewport';
+import type { Connection } from './edge';
+export type { FlowEventKey, FlowEventHandler, FlowEvents };
+export type { FitViewOptions };
+export type { Connection };
+export type NodeType = string;
+export type HandleType = 'source' | 'target';
+export type Position = 'top' | 'right' | 'bottom' | 'left';
+export interface NodeHandle {
+    type: HandleType;
+    position: Position;
+    id?: string;
+    style?: NodeStyle;
+    class?: string;
+    isConnectable?: boolean;
+}
+export interface NodeStyle {
+    [key: string]: string | number | undefined;
+}
+export interface NodeData {
+    [key: string]: unknown;
+    label?: string;
+    style?: NodeStyle;
+    class?: string;
+    icon?: string;
+    description?: string;
+    labelColor?: string;
+    descriptionColor?: string;
+}
+export interface NodePosition {
+    x: number;
+    y: number;
+}
+export interface NodeDimension {
+    width: number;
+    height: number;
+}
+export interface Node<Data = NodeData> {
+    id: string;
+    type: NodeType;
+    position: NodePosition;
+    data: Data;
+    style?: NodeStyle;
+    class?: string;
+    draggable?: boolean;
+    selectable?: boolean;
+    connectable?: boolean;
+    resizable?: boolean;
+    deletable?: boolean;
+    hidden?: boolean;
+    selected?: boolean;
+    dragging?: boolean;
+    width?: number;
+    height?: number;
+    parentId?: string;
+    zIndex?: number;
+    extent?: 'parent' | string;
+    expandParent?: boolean;
+    labelColor?: string;
+    descriptionColor?: string;
+    positionAbsolute?: NodePosition;
+    handleBounds?: {
+        top?: NodeHandle[];
+        right?: NodeHandle[];
+        bottom?: NodeHandle[];
+        left?: NodeHandle[];
+    };
+}
+export type NodeChangeType = 'select' | 'position' | 'remove' | 'dimensions' | 'style' | 'data' | 'selectMulti' | 'unselect';
+export interface NodeChange<T = Node> {
+    type: NodeChangeType;
+    id: string;
+    item: T;
+    selected?: boolean;
+    position?: NodePosition;
+    dimensions?: NodeDimension;
+    style?: NodeStyle;
+    data?: NodeData;
+    drag?: boolean;
+}
+export type EdgeType = string | 'smoothstep' | 'step' | 'bezier' | 'straight' | 'default';
+export interface EdgeStyle {
+    stroke?: string;
+    strokeWidth?: number;
+    strokeDasharray?: string;
+    [key: string]: string | number | undefined;
+}
+export interface EdgeMarker {
+    type: 'arrow' | 'arrowclosed';
+    color?: string;
+    width?: number;
+    height?: number;
+}
+export interface EdgeData {
+    [key: string]: unknown;
+    label?: string;
+    type?: EdgeType;
+    animated?: boolean;
+    style?: EdgeStyle;
+    labelStyle?: NodeStyle;
+    labelShowBg?: boolean;
+    labelBgColor?: string;
+    labelBgPadding?: [number, number];
+    labelBgBorderRadius?: number;
+}
+export interface Edge<Data = EdgeData> {
+    id: string;
+    source: string;
+    target: string;
+    sourceHandle?: string | null;
+    targetHandle?: string | null;
+    type?: EdgeType;
+    animated?: boolean;
+    label?: string;
+    labelStyle?: NodeStyle;
+    labelColor?: string;
+    labelShowBg?: boolean;
+    labelBgColor?: string;
+    labelBgPadding?: [number, number];
+    labelBgBorderRadius?: number;
+    style?: EdgeStyle;
+    markerEnd?: string | EdgeMarker;
+    markerStart?: string | EdgeMarker;
+    data?: Data;
+    zIndex?: number;
+    selectable?: boolean;
+    deletable?: boolean;
+    hidden?: boolean;
+    selected?: boolean;
+    updatable?: boolean | 'source' | 'target';
+}
+export type EdgeChangeType = 'select' | 'remove' | 'style' | 'data' | 'selectMulti' | 'unselect';
+export interface EdgeChange<T = Edge> {
+    type: EdgeChangeType;
+    id: string;
+    item: T;
+    selected?: boolean;
+    style?: EdgeStyle;
+    data?: EdgeData;
+}
+export interface ViewportTransform {
+    x: number;
+    y: number;
+    zoom: number;
+}
+export interface ViewportOptions {
+    minZoom?: number;
+    maxZoom?: number;
+    translateExtent?: [[number, number], [number, number]];
+    zoomStep?: number;
+    panZoomSpeed?: number;
+    zoomInMultiplier?: number;
+    zoomOutMultiplier?: number;
+}
+export interface SelectionMode {
+    partial: 'partial';
+    full: 'full';
+}
+export interface SelectionRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface ConnectionLine {
+    sourceX: number;
+    sourceY: number;
+    targetX: number;
+    targetY: number;
+    sourcePosition?: Position;
+    targetPosition?: Position;
+}
+export interface ValidConnectionFunc {
+    (connection: Connection): boolean | Error | void;
+}
+export interface FlowPlugin {
+    id: string;
+    name: string;
+    version?: string;
+    description?: string;
+    enabled?: boolean;
+    install: (flow: FlowInstance, options?: Record<string, unknown>) => void;
+    destroy?: () => void;
+    component?: Component;
+    componentProps?: Record<string, unknown>;
+}
+export interface FlowInstance {
+    nodes: Ref<Node[]>;
+    edges: Ref<Edge[]>;
+    viewport: Ref<ViewportTransform>;
+    addNode: (node: Node) => void;
+    removeNode: (nodeId: string) => void;
+    updateNode: (nodeId: string, data: Partial<Node>) => void;
+    getNode: (nodeId: string) => Node | undefined;
+    addEdge: (edge: Edge) => void;
+    removeEdge: (edgeId: string) => void;
+    updateEdge: (edgeId: string, data: Partial<Edge>) => void;
+    getEdge: (edgeId: string) => Edge | undefined;
+    setViewport: (transform: ViewportTransform) => void;
+    fitView: (options?: FitViewOptions) => void;
+    zoomIn: (factor?: number) => void;
+    zoomOut: (factor?: number) => void;
+    centerView: () => void;
+    selectNode: (nodeId: string, selected?: boolean, multi?: boolean) => void;
+    selectEdge: (edgeId: string, selected?: boolean, multi?: boolean) => void;
+    clearSelection: () => void;
+    getNodes: () => Node[];
+    getEdges: () => Edge[];
+    getViewport: () => ViewportTransform;
+    screenToCanvas: (x: number, y: number) => {
+        x: number;
+        y: number;
+    };
+    canvasToScreen: (x: number, y: number) => {
+        x: number;
+        y: number;
+    };
+    on: <K extends FlowEventKey>(event: K, handler: FlowEventHandler<K>) => void;
+    off: <K extends FlowEventKey>(event: K, handler: FlowEventHandler<K>) => void;
+    emit: <K extends FlowEventKey>(event: K, payload?: FlowEvents[K]) => void;
+    isValidConnection: (connection: Connection) => boolean;
+    $el: HTMLElement | undefined;
+    draggingNodeId: Ref<string | null>;
+    draggingPosition: Ref<{
+        x: number;
+        y: number;
+    } | null>;
+    isLocked: Ref<boolean>;
+    setInteractive: (interactive: boolean) => void;
+    usePlugin: (plugin: FlowPlugin) => void;
+    removePlugin: (pluginId: string) => void;
+    /** Create a new node from a registered template */
+    createNodeFromTemplate?: (type: string, id: string, position: {
+        x: number;
+        y: number;
+    }, overrides?: Record<string, unknown>) => Node | null;
+    /** Export flow data to JSON string */
+    exportFlowData?: (viewport?: {
+        x: number;
+        y: number;
+        zoom: number;
+    }) => string;
+    /** Import flow data from JSON string */
+    importFlowData?: (json: string) => {
+        nodes: Node[];
+        edges: Edge[];
+        viewport?: {
+            x: number;
+            y: number;
+            zoom: number;
+        };
+    } | null;
+    /** Check if a node is nested (has parent) */
+    isNestedNode?: (node: Node) => boolean;
+    /** Get all children of a node */
+    getNodeChildren?: (node: Node) => Node[];
+    /** Get parent of a node */
+    getNodeParent?: (node: Node) => Node | undefined;
+    exportJson?: () => string;
+    /** Screenshot: pass options or legacy HTMLElement as container. Returns result with dataUrl/blob. */
+    exportImage?: (options?: ScreenshotOptions | HTMLElement) => Promise<ScreenshotResult>;
+    applyLayout?: (options?: unknown) => void | Promise<void>;
+}
+/** 截图范围：当前视口 或 整图（自动 fitView 后截取再恢复视口） */
+export type ScreenshotMode = 'viewport' | 'full';
+/** 截图输出图片格式 */
+export type ScreenshotImageType = 'png' | 'jpeg' | 'webp';
+/** 截图选项 */
+export interface ScreenshotOptions {
+    /** 截取范围：viewport=当前可见区域，full=整图 */
+    mode?: ScreenshotMode;
+    /** 图片格式，默认 png */
+    imageType?: ScreenshotImageType;
+    /** 图片质量 0–1，仅 jpeg/webp 有效 */
+    imageQuality?: number;
+    /** 设备像素比，默认 2（高清屏友好） */
+    pixelRatio?: number;
+    /** 背景色，默认 #ffffff */
+    backgroundColor?: string;
+    /** 导出文件名（不含扩展名），仅在下发下载时使用 */
+    fileName?: string;
+    /** 是否触发浏览器下载，默认 true */
+    download?: boolean;
+    /** 是否同时写入剪贴板，默认 false */
+    copyToClipboard?: boolean;
+    /** 指定要截取的 DOM 元素，不传则使用 flow 根元素 */
+    container?: HTMLElement;
+    /** full 模式下的 fitView 内边距，默认 20 */
+    fullModePadding?: number;
+}
+/** 截图结果（程序化使用：上传、预览等） */
+export interface ScreenshotResult {
+    /** Data URL */
+    dataUrl: string;
+    /** Blob（便于 FormData/上传） */
+    blob: Blob;
+    /** 图片宽度（像素） */
+    width: number;
+    /** 图片高度（像素） */
+    height: number;
+    /** MIME 类型 */
+    mimeType: string;
+    /** 文件扩展名 */
+    extension: string;
+}
+export interface GraphState {
+    nodes: Node[];
+    edges: Edge[];
+    transform: ViewportTransform;
+    selectedNodes: Node[];
+    selectedEdges: Edge[];
+    hoveredNode: Node | null;
+    hoveredEdge: Edge | null;
+    isDragging: boolean;
+    isSelecting: boolean;
+    selectionRect: SelectionRect | null;
+}
+export interface HistoryState {
+    nodes: Node[];
+    edges: Edge[];
+}
+export interface HistoryManager {
+    undo: () => void;
+    redo: () => void;
+    push: (state: HistoryState) => void;
+    canUndo: () => boolean;
+    canRedo: () => boolean;
+    clear: () => void;
+}
+export type MaybeElement = HTMLElement | SVGElement | null;
+export type Coordinate = {
+    x: number;
+    y: number;
+};
+export type Box = Coordinate & {
+    width: number;
+    height: number;
+};
+export type Rect = Box & {
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
+};
+export interface CustomNodeComponentProps<Data = NodeData> {
+    node: Node<Data>;
+}
+export interface CustomEdgeComponentProps<Data = EdgeData> {
+    edge: Edge<Data>;
+    path: string;
+    sourceX: number;
+    sourceY: number;
+    targetX: number;
+    targetY: number;
+    labelX: number;
+    labelY: number;
+    labelWidth: number;
+    stroke: string;
+    strokeWidth: number;
+}
+export type CustomNodeComponent<Data = NodeData, Props = CustomNodeComponentProps<Data>> = Component<Props>;
+export type CustomEdgeComponent<Data = EdgeData, Props = CustomEdgeComponentProps<Data>> = Component<Props>;
+export type NodeTypes = Record<string, CustomNodeComponent>;
+export type EdgeTypes = Record<string, CustomEdgeComponent>;

package/dist/types/node.cjs

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isNode = isNode;
+function isNode(value) {
+  return !!value && typeof value === "object" && "id" in value && "type" in value;
+}

package/dist/types/node.d.ts

@@ -0,0 +1,90 @@
+export type NodeType = string;
+export type HandleType = 'source' | 'target';
+export type Position = 'top' | 'right' | 'bottom' | 'left';
+export interface NodeHandle {
+    type: HandleType;
+    position: Position;
+    id?: string;
+    style?: NodeStyle;
+    class?: string;
+    isConnectable?: boolean;
+}
+export interface NodeStyle {
+    [key: string]: string | number | undefined;
+}
+export interface NodeData {
+    [key: string]: unknown;
+    label?: string;
+    style?: NodeStyle;
+    class?: string;
+    icon?: string;
+    description?: string;
+    model?: string;
+    prompt?: string;
+    temperature?: number;
+    maxTokens?: number;
+    tools?: string[];
+    toolName?: string;
+    condition?: string;
+    memoryType?: string;
+    status?: 'pending' | 'running' | 'success' | 'error';
+    streamOutput?: string;
+}
+export interface NodePosition {
+    x: number;
+    y: number;
+}
+export interface NodeDimension {
+    width: number;
+    height: number;
+}
+export interface NodeHandleBounds {
+    top?: NodeHandle[];
+    right?: NodeHandle[];
+    bottom?: NodeHandle[];
+    left?: NodeHandle[];
+}
+export interface Node<Data = NodeData> {
+    id: string;
+    type: NodeType;
+    position: NodePosition;
+    data: Data;
+    style?: NodeStyle;
+    class?: string;
+    draggable?: boolean;
+    selectable?: boolean;
+    connectable?: boolean;
+    resizable?: boolean;
+    deletable?: boolean;
+    hidden?: boolean;
+    selected?: boolean;
+    dragging?: boolean;
+    width?: number;
+    height?: number;
+    parentId?: string;
+    zIndex?: number;
+    extent?: 'parent' | string;
+    expandParent?: boolean;
+    positionAbsolute?: NodePosition;
+    handleBounds?: NodeHandleBounds;
+    children?: string[];
+    computed?: boolean;
+}
+export type NodeChangeType = 'select' | 'position' | 'remove' | 'dimensions' | 'style' | 'data' | 'selectMulti' | 'unselect';
+export interface NodeChange<T = Node> {
+    type: NodeChangeType;
+    id: string;
+    item: T;
+    selected?: boolean;
+    position?: NodePosition;
+    dimensions?: NodeDimension;
+    style?: NodeStyle;
+    data?: NodeData;
+    drag?: boolean;
+}
+export type NodeUserData = Partial<Omit<Node, 'id' | 'type' | 'data'>> & {
+    id: string;
+    type?: NodeType;
+    data?: NodeData;
+};
+export declare function isNode<T extends Node>(value: unknown): value is T;

package/dist/types/node.mjs

@@ -0,0 +1,3 @@
+export function isNode(value) {
+  return !!value && typeof value === "object" && "id" in value && "type" in value;
+}

package/dist/types/viewport.cjs

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getViewportForBounds = getViewportForBounds;
+exports.isNodeVisible = isNodeVisible;
+exports.project = project;
+exports.unproject = unproject;
+function getViewportForBounds(bounds, width, height, minZoom, maxZoom, padding = 0.2) {
+  const x = width / 2 - (bounds.x + bounds.width / 2) * minZoom;
+  const y = height / 2 - (bounds.y + bounds.height / 2) * minZoom;
+  const zoom = Math.min(width * (1 - padding * 2) / bounds.width, height * (1 - padding * 2) / bounds.height);
+  return {
+    x,
+    y,
+    zoom: Math.min(Math.max(zoom, minZoom), maxZoom)
+  };
+}
+function project(position, transform) {
+  return {
+    x: (position.x - transform.x) / transform.zoom,
+    y: (position.y - transform.y) / transform.zoom
+  };
+}
+function unproject(position, transform) {
+  return {
+    x: position.x * transform.zoom + transform.x,
+    y: position.y * transform.zoom + transform.y
+  };
+}
+function isNodeVisible(node, transform, width, height) {
+  const nodeWidth = node.width ?? 0;
+  const nodeHeight = node.height ?? 0;
+  const paddedWidth = width * 1.5;
+  const paddedHeight = height * 1.5;
+  const nodeX = node.position.x * transform.zoom + transform.x;
+  const nodeY = node.position.y * transform.zoom + transform.y;
+  const scaledNodeWidth = nodeWidth * transform.zoom;
+  const scaledNodeHeight = nodeHeight * transform.zoom;
+  return nodeX + scaledNodeWidth > -paddedWidth && nodeX < paddedWidth + width && nodeY + scaledNodeHeight > -paddedHeight && nodeY < paddedHeight + height;
+}

package/dist/types/viewport.d.ts

@@ -0,0 +1,62 @@
+import type { NodePosition } from './node';
+export interface ViewportTransform {
+    x: number;
+    y: number;
+    zoom: number;
+}
+export interface ViewportOptions {
+    minZoom?: number;
+    maxZoom?: number;
+    translateExtent?: [[number, number], [number, number]];
+    zoomStep?: number;
+    panZoomSpeed?: number;
+    zoomInMultiplier?: number;
+    zoomOutMultiplier?: number;
+    panning?: boolean;
+    zooming?: boolean;
+    zoomOnScroll?: boolean;
+    zoomOnPinch?: boolean;
+    panOnScroll?: boolean;
+    panOnDrag?: boolean;
+    fitViewOnInit?: boolean;
+    fitViewOnInitOptions?: FitViewOptions;
+}
+export interface FitViewOptions {
+    padding?: number;
+    includeHiddenNodes?: boolean;
+    minZoom?: number;
+    maxZoom?: number;
+}
+export interface ScreenToFlowPositionOptions {
+    offset?: {
+        x: number;
+        y: number;
+    };
+    snapToGrid?: boolean;
+    gridSize?: number;
+}
+export declare function getViewportForBounds(bounds: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}, width: number, height: number, minZoom: number, maxZoom: number, padding?: number): ViewportTransform;
+export declare function project(position: {
+    x: number;
+    y: number;
+}, transform: ViewportTransform): {
+    x: number;
+    y: number;
+};
+export declare function unproject(position: {
+    x: number;
+    y: number;
+}, transform: ViewportTransform): {
+    x: number;
+    y: number;
+};
+export declare function isNodeVisible(node: {
+    position: NodePosition;
+    width?: number;
+    height?: number;
+}, transform: ViewportTransform, width: number, height: number): boolean;

package/dist/types/viewport.mjs

@@ -0,0 +1,36 @@
+export function getViewportForBounds(bounds, width, height, minZoom, maxZoom, padding = 0.2) {
+  const x = width / 2 - (bounds.x + bounds.width / 2) * minZoom;
+  const y = height / 2 - (bounds.y + bounds.height / 2) * minZoom;
+  const zoom = Math.min(
+    width * (1 - padding * 2) / bounds.width,
+    height * (1 - padding * 2) / bounds.height
+  );
+  return {
+    x,
+    y,
+    zoom: Math.min(Math.max(zoom, minZoom), maxZoom)
+  };
+}
+export function project(position, transform) {
+  return {
+    x: (position.x - transform.x) / transform.zoom,
+    y: (position.y - transform.y) / transform.zoom
+  };
+}
+export function unproject(position, transform) {
+  return {
+    x: position.x * transform.zoom + transform.x,
+    y: position.y * transform.zoom + transform.y
+  };
+}
+export function isNodeVisible(node, transform, width, height) {
+  const nodeWidth = node.width ?? 0;
+  const nodeHeight = node.height ?? 0;
+  const paddedWidth = width * 1.5;
+  const paddedHeight = height * 1.5;
+  const nodeX = node.position.x * transform.zoom + transform.x;
+  const nodeY = node.position.y * transform.zoom + transform.y;
+  const scaledNodeWidth = nodeWidth * transform.zoom;
+  const scaledNodeHeight = nodeHeight * transform.zoom;
+  return nodeX + scaledNodeWidth > -paddedWidth && nodeX < paddedWidth + width && nodeY + scaledNodeHeight > -paddedHeight && nodeY < paddedHeight + height;
+}