@yh-ui/flow 0.1.21

package/dist/core/useViewport.mjs

@@ -0,0 +1,125 @@
+import { screenToCanvas, canvasToScreen } from "../utils/transform.mjs";
+export function useViewport(initialTransform, options = {}) {
+  const { minZoom = 0.1, maxZoom = 5, zoomStep: _zoomStep = 0.1, panZoomSpeed = 1 } = options;
+  const transform = initialTransform;
+  const setTransform = (newTransform) => {
+    transform.value = {
+      x: newTransform.x,
+      y: newTransform.y,
+      zoom: Math.min(Math.max(newTransform.zoom, minZoom), maxZoom)
+    };
+  };
+  const setViewport = (x, y, zoom) => {
+    setTransform({ x, y, zoom });
+  };
+  const zoomIn = (factor = 1.2) => {
+    const newZoom = Math.min(transform.value.zoom * factor, maxZoom);
+    transform.value = { ...transform.value, zoom: newZoom };
+  };
+  const zoomOut = (factor = 1.2) => {
+    const newZoom = Math.max(transform.value.zoom / factor, minZoom);
+    transform.value = { ...transform.value, zoom: newZoom };
+  };
+  const zoomTo = (zoom, point) => {
+    const boundedZoom = Math.min(Math.max(zoom, minZoom), maxZoom);
+    if (!point) {
+      transform.value = { ...transform.value, zoom: boundedZoom };
+      return;
+    }
+    const canvasPoint = screenToCanvas(point.x, point.y, transform.value);
+    const newTransform = {
+      ...transform.value,
+      zoom: boundedZoom
+    };
+    const screenPoint = canvasToScreen(canvasPoint.x, canvasPoint.y, newTransform);
+    const dx = point.x - screenPoint.x;
+    const dy = point.y - screenPoint.y;
+    transform.value = {
+      ...newTransform,
+      x: newTransform.x + dx,
+      y: newTransform.y + dy
+    };
+  };
+  const pan = (dx, dy) => {
+    transform.value = {
+      ...transform.value,
+      x: transform.value.x + dx * panZoomSpeed,
+      y: transform.value.y + dy * panZoomSpeed
+    };
+  };
+  const panTo = (x, y) => {
+    transform.value = { ...transform.value, x, y };
+  };
+  const fitView = (bounds, nodes, options2 = {}) => {
+    if (nodes.length === 0) return;
+    const padding = options2.padding ?? 50;
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    for (const node of nodes) {
+      const w = node.width || 200;
+      const h = node.height || 50;
+      minX = Math.min(minX, node.position.x);
+      minY = Math.min(minY, node.position.y);
+      maxX = Math.max(maxX, node.position.x + w);
+      maxY = Math.max(maxY, node.position.y + h);
+    }
+    const graphWidth = maxX - minX + padding * 2;
+    const graphHeight = maxY - minY + padding * 2;
+    const zoomX = bounds.width / graphWidth;
+    const zoomY = bounds.height / graphHeight;
+    const zoom = Math.min(zoomX, zoomY, 1);
+    const x = (bounds.width - graphWidth * zoom) / 2 - minX * zoom + padding * zoom;
+    const y = (bounds.height - graphHeight * zoom) / 2 - minY * zoom + padding * zoom;
+    setTransform({ x, y, zoom });
+  };
+  const center = (bounds, nodes, options2 = {}) => {
+    if (nodes.length === 0) return;
+    const padding = options2.padding ?? 50;
+    let centerX = 0;
+    let centerY = 0;
+    for (const node of nodes) {
+      const w = node.width || 200;
+      const h = node.height || 50;
+      centerX += node.position.x + w / 2;
+      centerY += node.position.y + h / 2;
+    }
+    centerX /= nodes.length;
+    centerY /= nodes.length;
+    const x = bounds.width / 2 - centerX * transform.value.zoom + padding;
+    const y = bounds.height / 2 - centerY * transform.value.zoom + padding;
+    panTo(x, y);
+  };
+  const _screenToCanvas = (screenX, screenY) => {
+    return screenToCanvas(screenX, screenY, transform.value);
+  };
+  const _canvasToScreen = (canvasX, canvasY) => {
+    return canvasToScreen(canvasX, canvasY, transform.value);
+  };
+  const isNodeVisible = (nodeBounds, containerBounds) => {
+    const padding = 100;
+    const visibleBounds = {
+      x: -transform.value.x / transform.value.zoom - padding,
+      y: -transform.value.y / transform.value.zoom - padding,
+      width: containerBounds.width / transform.value.zoom + padding * 2,
+      height: containerBounds.height / transform.value.zoom + padding * 2
+    };
+    return !(nodeBounds.x + nodeBounds.width < visibleBounds.x || nodeBounds.x > visibleBounds.x + visibleBounds.width || nodeBounds.y + nodeBounds.height < visibleBounds.y || nodeBounds.y > visibleBounds.y + visibleBounds.height);
+  };
+  return {
+    transform,
+    setTransform,
+    setViewport,
+    zoomIn,
+    zoomOut,
+    zoomTo,
+    pan,
+    panTo,
+    fitView,
+    center,
+    screenToCanvas: _screenToCanvas,
+    canvasToScreen: _canvasToScreen,
+    isNodeVisible
+  };
+}

package/dist/flow.cjs

@@ -0,0 +1,240 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.flowProps = exports.flowEmits = void 0;
+const flowProps = exports.flowProps = {
+  /**
+   * @description 节点数据
+   */
+  nodes: {
+    type: Array,
+    default: () => []
+  },
+  /**
+   * @description 连线数据
+   */
+  edges: {
+    type: Array,
+    default: () => []
+  },
+  /**
+   * @description 视口变换 (支持 v-model)
+   */
+  modelValue: {
+    type: Object,
+    default: () => ({
+      x: 0,
+      y: 0,
+      zoom: 1
+    })
+  },
+  /**
+   * @description 最小缩放比例
+   */
+  minZoom: {
+    type: Number,
+    default: 0.1
+  },
+  /**
+   * @description 最大缩放比例
+   */
+  maxZoom: {
+    type: Number,
+    default: 5
+  },
+  /**
+   * @description 缩放步长
+   */
+  zoomStep: {
+    type: Number,
+    default: 0.1
+  },
+  /**
+   * @description 平移速度
+   */
+  panZoomSpeed: {
+    type: Number,
+    default: 1
+  },
+  /**
+   * @description 默认节点类型
+   */
+  defaultNodeType: {
+    type: String,
+    default: "default"
+  },
+  /**
+   * @description 默认连线类型
+   */
+  defaultEdgeType: {
+    type: String,
+    default: "bezier"
+  },
+  /**
+   * @description 是否启用拖拽
+   */
+  nodesDraggable: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * @description 是否启用连线
+   */
+  edgesConnectable: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * @description 是否启用选择
+   */
+  selectable: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * @description 是否支持多选
+   */
+  multiSelectKey: {
+    type: String,
+    default: "Shift"
+  },
+  /**
+   * @description 背景类型
+   */
+  background: {
+    type: String,
+    default: "dots"
+  },
+  /**
+   * @description 背景颜色
+   */
+  backgroundColor: {
+    type: String,
+    default: "#f8f9fa"
+  },
+  /**
+   * @description 网格大小
+   */
+  gridSize: {
+    type: Number,
+    default: 20
+  },
+  /**
+   * @description 是否吸附到网格
+   */
+  snapToGrid: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * @description 吸附间距
+   */
+  snapGrid: {
+    type: Array,
+    default: () => [15, 15]
+  },
+  /**
+   * @description 是否只读
+   */
+  readonly: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * @description 是否启用键盘快捷键
+   */
+  keyboardShortcuts: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * @description 是否显示控制栏
+   */
+  showControls: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * @description 是否显示小地图
+   */
+  showMinimap: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * @description 小地图颜色
+   */
+  minimapNodeColor: {
+    type: String,
+    default: "#b1b1b7"
+  },
+  /**
+   * @description 是否显示对齐线
+   */
+  showAlignmentGuides: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * @description 是否启用撤销/重做
+   */
+  history: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * @description 最大历史记录数
+   */
+  maxHistory: {
+    type: Number,
+    default: 50
+  },
+  /**
+   * @description 是否启用虚拟滚动
+   */
+  virtualized: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * @description 虚拟滚动缓冲区
+   */
+  virtualizationThreshold: {
+    type: Number,
+    default: 100
+  },
+  /**
+   * @description 连接校验函数
+   */
+  isValidConnection: {
+    type: Function,
+    default: null
+  },
+  /**
+   * @description 主题覆盖变量
+   */
+  themeOverrides: {
+    type: Object,
+    default: void 0
+  }
+};
+const flowEmits = exports.flowEmits = {
+  "update:modelValue": transform => typeof transform.x === "number" && typeof transform.y === "number" && typeof transform.zoom === "number",
+  "update:nodes": nodes => Array.isArray(nodes),
+  "update:edges": edges => Array.isArray(edges),
+  nodeClick: event => !!event,
+  nodeDblClick: event => !!event,
+  nodeDragStart: event => !!event,
+  nodeDrag: event => !!event,
+  nodeDragEnd: event => !!event,
+  nodeContextMenu: event => !!event,
+  edgeClick: event => !!event,
+  edgeDblClick: event => !!event,
+  edgeContextMenu: event => !!event,
+  edgeConnect: _connection => true,
+  selectionChange: event => !!event,
+  historyChange: event => !!event,
+  viewportChange: transform => !!transform
+};

package/dist/flow.d.ts

@@ -0,0 +1,276 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+import type { Node, Edge, ViewportTransform, ValidConnectionFunc } from './types';
+export declare const flowProps: {
+    /**
+     * @description 节点数据
+     */
+    readonly nodes: {
+        readonly type: PropType<Node[]>;
+        readonly default: () => never[];
+    };
+    /**
+     * @description 连线数据
+     */
+    readonly edges: {
+        readonly type: PropType<Edge[]>;
+        readonly default: () => never[];
+    };
+    /**
+     * @description 视口变换 (支持 v-model)
+     */
+    readonly modelValue: {
+        readonly type: PropType<ViewportTransform>;
+        readonly default: () => {
+            x: number;
+            y: number;
+            zoom: number;
+        };
+    };
+    /**
+     * @description 最小缩放比例
+     */
+    readonly minZoom: {
+        readonly type: NumberConstructor;
+        readonly default: 0.1;
+    };
+    /**
+     * @description 最大缩放比例
+     */
+    readonly maxZoom: {
+        readonly type: NumberConstructor;
+        readonly default: 5;
+    };
+    /**
+     * @description 缩放步长
+     */
+    readonly zoomStep: {
+        readonly type: NumberConstructor;
+        readonly default: 0.1;
+    };
+    /**
+     * @description 平移速度
+     */
+    readonly panZoomSpeed: {
+        readonly type: NumberConstructor;
+        readonly default: 1;
+    };
+    /**
+     * @description 默认节点类型
+     */
+    readonly defaultNodeType: {
+        readonly type: StringConstructor;
+        readonly default: "default";
+    };
+    /**
+     * @description 默认连线类型
+     */
+    readonly defaultEdgeType: {
+        readonly type: StringConstructor;
+        readonly default: "bezier";
+    };
+    /**
+     * @description 是否启用拖拽
+     */
+    readonly nodesDraggable: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    /**
+     * @description 是否启用连线
+     */
+    readonly edgesConnectable: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    /**
+     * @description 是否启用选择
+     */
+    readonly selectable: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    /**
+     * @description 是否支持多选
+     */
+    readonly multiSelectKey: {
+        readonly type: StringConstructor;
+        readonly default: "Shift";
+    };
+    /**
+     * @description 背景类型
+     */
+    readonly background: {
+        readonly type: PropType<"none" | "dots" | "grid">;
+        readonly default: "dots";
+    };
+    /**
+     * @description 背景颜色
+     */
+    readonly backgroundColor: {
+        readonly type: StringConstructor;
+        readonly default: "#f8f9fa";
+    };
+    /**
+     * @description 网格大小
+     */
+    readonly gridSize: {
+        readonly type: NumberConstructor;
+        readonly default: 20;
+    };
+    /**
+     * @description 是否吸附到网格
+     */
+    readonly snapToGrid: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    /**
+     * @description 吸附间距
+     */
+    readonly snapGrid: {
+        readonly type: PropType<[number, number]>;
+        readonly default: () => number[];
+    };
+    /**
+     * @description 是否只读
+     */
+    readonly readonly: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    /**
+     * @description 是否启用键盘快捷键
+     */
+    readonly keyboardShortcuts: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    /**
+     * @description 是否显示控制栏
+     */
+    readonly showControls: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    /**
+     * @description 是否显示小地图
+     */
+    readonly showMinimap: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    /**
+     * @description 小地图颜色
+     */
+    readonly minimapNodeColor: {
+        readonly type: StringConstructor;
+        readonly default: "#b1b1b7";
+    };
+    /**
+     * @description 是否显示对齐线
+     */
+    readonly showAlignmentGuides: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    /**
+     * @description 是否启用撤销/重做
+     */
+    readonly history: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    /**
+     * @description 最大历史记录数
+     */
+    readonly maxHistory: {
+        readonly type: NumberConstructor;
+        readonly default: 50;
+    };
+    /**
+     * @description 是否启用虚拟滚动
+     */
+    readonly virtualized: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    /**
+     * @description 虚拟滚动缓冲区
+     */
+    readonly virtualizationThreshold: {
+        readonly type: NumberConstructor;
+        readonly default: 100;
+    };
+    /**
+     * @description 连接校验函数
+     */
+    readonly isValidConnection: {
+        readonly type: PropType<ValidConnectionFunc>;
+        readonly default: null;
+    };
+    /**
+     * @description 主题覆盖变量
+     */
+    readonly themeOverrides: {
+        readonly type: PropType<Record<string, unknown>>;
+        readonly default: undefined;
+    };
+};
+export type FlowProps = ExtractPropTypes<typeof flowProps>;
+export declare const flowEmits: {
+    'update:modelValue': (transform: ViewportTransform) => boolean;
+    'update:nodes': (nodes: Node[]) => boolean;
+    'update:edges': (edges: Edge[]) => boolean;
+    nodeClick: (event: {
+        node: Node;
+        nativeEvent: MouseEvent;
+    }) => boolean;
+    nodeDblClick: (event: {
+        node: Node;
+        nativeEvent: MouseEvent;
+    }) => boolean;
+    nodeDragStart: (event: {
+        node: Node;
+        nativeEvent: MouseEvent;
+    }) => boolean;
+    nodeDrag: (event: {
+        node: Node;
+        nativeEvent: MouseEvent;
+    }) => boolean;
+    nodeDragEnd: (event: {
+        node: Node;
+        nativeEvent: MouseEvent;
+    }) => boolean;
+    nodeContextMenu: (event: {
+        node: Node;
+        nativeEvent: MouseEvent;
+    }) => boolean;
+    edgeClick: (event: {
+        edge: Edge;
+        nativeEvent: MouseEvent;
+    }) => boolean;
+    edgeDblClick: (event: {
+        edge: Edge;
+        nativeEvent: MouseEvent;
+    }) => boolean;
+    edgeContextMenu: (event: {
+        edge: Edge;
+        nativeEvent: MouseEvent;
+    }) => boolean;
+    edgeConnect: (_connection: {
+        source: string;
+        target: string;
+        sourceHandle?: string;
+        targetHandle?: string;
+    }) => boolean;
+    selectionChange: (event: {
+        selectedNodes: Node[];
+        selectedEdges: Edge[];
+    }) => boolean;
+    historyChange: (event: {
+        canUndo: boolean;
+        canRedo: boolean;
+    }) => boolean;
+    viewportChange: (transform: ViewportTransform) => boolean;
+};
+export type FlowEmits = typeof flowEmits;