@yh-ui/flow 0.1.21

package/dist/core/useNodes.cjs

@@ -0,0 +1,146 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useNodes = useNodes;
+var _transform = require("../utils/transform.cjs");
+function useNodes(_viewport, options) {
+  const {
+    nodes,
+    snapToGrid = false,
+    snapGrid = [15, 15],
+    onNodesChange
+  } = options;
+  const addNode = node => {
+    nodes.value = [...nodes.value, node];
+    onNodesChange?.([{
+      type: "select",
+      id: node.id,
+      item: node,
+      selected: true
+    }]);
+  };
+  const removeNode = nodeId => {
+    nodes.value = nodes.value.filter(n => n.id !== nodeId);
+    onNodesChange?.([{
+      type: "remove",
+      id: nodeId,
+      item: {}
+    }]);
+  };
+  const updateNode = (nodeId, data) => {
+    nodes.value = nodes.value.map(node => {
+      if (node.id === nodeId) {
+        return {
+          ...node,
+          ...data
+        };
+      }
+      return node;
+    });
+  };
+  const updateNodePosition = (nodeId, position, options2) => {
+    let finalPosition = position;
+    if (snapToGrid) {
+      finalPosition = (0, _transform.snapPositionToGrid)(position, snapGrid);
+    }
+    nodes.value = nodes.value.map(node2 => {
+      if (node2.id === nodeId) {
+        return {
+          ...node2,
+          position: finalPosition,
+          dragging: options2?.dragging ?? false
+        };
+      }
+      return node2;
+    });
+    const node = nodes.value.find(n => n.id === nodeId);
+    if (node) {
+      onNodesChange?.([{
+        type: "position",
+        id: nodeId,
+        item: node,
+        position: finalPosition,
+        drag: options2?.dragging
+      }]);
+    }
+  };
+  const setNodes = newNodes => {
+    nodes.value = newNodes;
+  };
+  const getNode = nodeId => {
+    return nodes.value.find(n => n.id === nodeId);
+  };
+  const getSelectedNodes = () => {
+    return nodes.value.filter(n => n.selected);
+  };
+  const selectNode = (nodeId, selected = true, multi = false) => {
+    nodes.value = nodes.value.map(node2 => {
+      if (multi) {
+        if (node2.id === nodeId) {
+          return {
+            ...node2,
+            selected
+          };
+        }
+        return node2;
+      } else {
+        if (node2.id === nodeId) {
+          return {
+            ...node2,
+            selected
+          };
+        } else {
+          return {
+            ...node2,
+            selected: false
+          };
+        }
+      }
+    });
+    const node = nodes.value.find(n => n.id === nodeId);
+    if (node) {
+      onNodesChange?.([{
+        type: "select",
+        id: nodeId,
+        item: node,
+        selected
+      }]);
+    }
+  };
+  const selectNodes = (nodeIds, selected = true) => {
+    nodes.value = nodes.value.map(node => {
+      if (nodeIds.includes(node.id)) {
+        return {
+          ...node,
+          selected
+        };
+      }
+      return node;
+    });
+  };
+  const clearSelection = () => {
+    nodes.value = nodes.value.map(node => ({
+      ...node,
+      selected: false
+    }));
+  };
+  const findNode = nodeId => {
+    return nodes.value.find(n => n.id === nodeId);
+  };
+  return {
+    nodes,
+    addNode,
+    removeNode,
+    updateNode,
+    updateNodePosition,
+    setNodes,
+    getNode,
+    getSelectedNodes,
+    selectNode,
+    selectNodes,
+    clearSelection,
+    findNode
+  };
+}

package/dist/core/useNodes.d.ts

@@ -0,0 +1,26 @@
+import type { Ref } from 'vue';
+import type { Node, NodeChange, NodePosition } from '../types';
+import type { ViewportTransform } from '../types';
+export interface UseNodesOptions {
+    nodes: Ref<Node[]>;
+    snapToGrid?: boolean;
+    snapGrid?: [number, number];
+    onNodesChange?: (changes: NodeChange[]) => void;
+}
+export interface UseNodesReturn {
+    nodes: Ref<Node[]>;
+    addNode: (node: Node) => void;
+    removeNode: (nodeId: string) => void;
+    updateNode: (nodeId: string, data: Partial<Node>) => void;
+    updateNodePosition: (nodeId: string, position: NodePosition, options?: {
+        dragging?: boolean;
+    }) => void;
+    setNodes: (nodes: Node[]) => void;
+    getNode: (nodeId: string) => Node | undefined;
+    getSelectedNodes: () => Node[];
+    selectNode: (nodeId: string, selected?: boolean, multi?: boolean) => void;
+    selectNodes: (nodeIds: string[], selected?: boolean) => void;
+    clearSelection: () => void;
+    findNode: (nodeId: string) => Node | undefined;
+}
+export declare function useNodes(_viewport: Ref<ViewportTransform>, options: UseNodesOptions): UseNodesReturn;

package/dist/core/useNodes.mjs

@@ -0,0 +1,101 @@
+import { snapPositionToGrid } from "../utils/transform.mjs";
+export function useNodes(_viewport, options) {
+  const { nodes, snapToGrid = false, snapGrid = [15, 15], onNodesChange } = options;
+  const addNode = (node) => {
+    nodes.value = [...nodes.value, node];
+    onNodesChange?.([{ type: "select", id: node.id, item: node, selected: true }]);
+  };
+  const removeNode = (nodeId) => {
+    nodes.value = nodes.value.filter((n) => n.id !== nodeId);
+    onNodesChange?.([{ type: "remove", id: nodeId, item: {} }]);
+  };
+  const updateNode = (nodeId, data) => {
+    nodes.value = nodes.value.map((node) => {
+      if (node.id === nodeId) {
+        return { ...node, ...data };
+      }
+      return node;
+    });
+  };
+  const updateNodePosition = (nodeId, position, options2) => {
+    let finalPosition = position;
+    if (snapToGrid) {
+      finalPosition = snapPositionToGrid(position, snapGrid);
+    }
+    nodes.value = nodes.value.map((node2) => {
+      if (node2.id === nodeId) {
+        return { ...node2, position: finalPosition, dragging: options2?.dragging ?? false };
+      }
+      return node2;
+    });
+    const node = nodes.value.find((n) => n.id === nodeId);
+    if (node) {
+      onNodesChange?.([
+        {
+          type: "position",
+          id: nodeId,
+          item: node,
+          position: finalPosition,
+          drag: options2?.dragging
+        }
+      ]);
+    }
+  };
+  const setNodes = (newNodes) => {
+    nodes.value = newNodes;
+  };
+  const getNode = (nodeId) => {
+    return nodes.value.find((n) => n.id === nodeId);
+  };
+  const getSelectedNodes = () => {
+    return nodes.value.filter((n) => n.selected);
+  };
+  const selectNode = (nodeId, selected = true, multi = false) => {
+    nodes.value = nodes.value.map((node2) => {
+      if (multi) {
+        if (node2.id === nodeId) {
+          return { ...node2, selected };
+        }
+        return node2;
+      } else {
+        if (node2.id === nodeId) {
+          return { ...node2, selected };
+        } else {
+          return { ...node2, selected: false };
+        }
+      }
+    });
+    const node = nodes.value.find((n) => n.id === nodeId);
+    if (node) {
+      onNodesChange?.([{ type: "select", id: nodeId, item: node, selected }]);
+    }
+  };
+  const selectNodes = (nodeIds, selected = true) => {
+    nodes.value = nodes.value.map((node) => {
+      if (nodeIds.includes(node.id)) {
+        return { ...node, selected };
+      }
+      return node;
+    });
+  };
+  const clearSelection = () => {
+    nodes.value = nodes.value.map((node) => ({ ...node, selected: false }));
+  };
+  const findNode = (nodeId) => {
+    return nodes.value.find((n) => n.id === nodeId);
+  };
+  return {
+    nodes,
+    addNode,
+    removeNode,
+    updateNode,
+    updateNodePosition,
+    setNodes,
+    getNode,
+    getSelectedNodes,
+    selectNode,
+    selectNodes,
+    clearSelection,
+    findNode
+  };
+}

package/dist/core/useSelection.cjs

@@ -0,0 +1,83 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSelection = useSelection;
+var _vue = require("vue");
+function useSelection(options) {
+  const {
+    nodes,
+    edges,
+    onSelectionChange
+  } = options;
+  const selectionRect = (0, _vue.ref)(null);
+  const isSelecting = (0, _vue.ref)(false);
+  const selectionStart = (0, _vue.ref)({
+    x: 0,
+    y: 0
+  });
+  const selectedNodes = (0, _vue.computed)(() => nodes.value.filter(n => n.selected));
+  const selectedEdges = (0, _vue.computed)(() => edges.value.filter(e => e.selected));
+  const startSelection = (x, y) => {
+    selectionStart.value = {
+      x,
+      y
+    };
+    selectionRect.value = {
+      x,
+      y,
+      width: 0,
+      height: 0
+    };
+    isSelecting.value = true;
+  };
+  const updateSelection = (x, y) => {
+    if (!isSelecting.value) return;
+    const minX = Math.min(selectionStart.value.x, x);
+    const minY = Math.min(selectionStart.value.y, y);
+    const maxX = Math.max(selectionStart.value.x, x);
+    const maxY = Math.max(selectionStart.value.y, y);
+    selectionRect.value = {
+      x: minX,
+      y: minY,
+      width: maxX - minX,
+      height: maxY - minY
+    };
+    nodes.value = nodes.value.map(node => {
+      const nodeWidth = node.width || 200;
+      const nodeHeight = node.height || 50;
+      const isInside = node.position.x >= minX && node.position.y >= minY && node.position.x + nodeWidth <= maxX && node.position.y + nodeHeight <= maxY;
+      return {
+        ...node,
+        selected: isInside
+      };
+    });
+  };
+  const endSelection = () => {
+    isSelecting.value = false;
+    selectionRect.value = null;
+    onSelectionChange?.(selectedNodes.value, selectedEdges.value);
+  };
+  const clearSelection = () => {
+    nodes.value = nodes.value.map(n => ({
+      ...n,
+      selected: false
+    }));
+    edges.value = edges.value.map(e => ({
+      ...e,
+      selected: false
+    }));
+    onSelectionChange?.([], []);
+  };
+  return {
+    selectionRect,
+    isSelecting,
+    selectedNodes,
+    selectedEdges,
+    startSelection,
+    updateSelection,
+    endSelection,
+    clearSelection
+  };
+}

package/dist/core/useSelection.d.ts

@@ -0,0 +1,18 @@
+import { type Ref } from 'vue';
+import type { Node, Edge, SelectionRect } from '../types';
+export interface UseSelectionOptions {
+    nodes: Ref<Node[]>;
+    edges: Ref<Edge[]>;
+    onSelectionChange?: (selectedNodes: Node[], selectedEdges: Edge[]) => void;
+}
+export interface UseSelectionReturn {
+    selectionRect: Ref<SelectionRect | null>;
+    isSelecting: Ref<boolean>;
+    selectedNodes: Ref<Node[]>;
+    selectedEdges: Ref<Edge[]>;
+    startSelection: (x: number, y: number) => void;
+    updateSelection: (x: number, y: number) => void;
+    endSelection: () => void;
+    clearSelection: () => void;
+}
+export declare function useSelection(options: UseSelectionOptions): UseSelectionReturn;

package/dist/core/useSelection.mjs

@@ -0,0 +1,53 @@
+import { ref, computed } from "vue";
+export function useSelection(options) {
+  const { nodes, edges, onSelectionChange } = options;
+  const selectionRect = ref(null);
+  const isSelecting = ref(false);
+  const selectionStart = ref({ x: 0, y: 0 });
+  const selectedNodes = computed(() => nodes.value.filter((n) => n.selected));
+  const selectedEdges = computed(() => edges.value.filter((e) => e.selected));
+  const startSelection = (x, y) => {
+    selectionStart.value = { x, y };
+    selectionRect.value = { x, y, width: 0, height: 0 };
+    isSelecting.value = true;
+  };
+  const updateSelection = (x, y) => {
+    if (!isSelecting.value) return;
+    const minX = Math.min(selectionStart.value.x, x);
+    const minY = Math.min(selectionStart.value.y, y);
+    const maxX = Math.max(selectionStart.value.x, x);
+    const maxY = Math.max(selectionStart.value.y, y);
+    selectionRect.value = {
+      x: minX,
+      y: minY,
+      width: maxX - minX,
+      height: maxY - minY
+    };
+    nodes.value = nodes.value.map((node) => {
+      const nodeWidth = node.width || 200;
+      const nodeHeight = node.height || 50;
+      const isInside = node.position.x >= minX && node.position.y >= minY && node.position.x + nodeWidth <= maxX && node.position.y + nodeHeight <= maxY;
+      return { ...node, selected: isInside };
+    });
+  };
+  const endSelection = () => {
+    isSelecting.value = false;
+    selectionRect.value = null;
+    onSelectionChange?.(selectedNodes.value, selectedEdges.value);
+  };
+  const clearSelection = () => {
+    nodes.value = nodes.value.map((n) => ({ ...n, selected: false }));
+    edges.value = edges.value.map((e) => ({ ...e, selected: false }));
+    onSelectionChange?.([], []);
+  };
+  return {
+    selectionRect,
+    isSelecting,
+    selectedNodes,
+    selectedEdges,
+    startSelection,
+    updateSelection,
+    endSelection,
+    clearSelection
+  };
+}

package/dist/core/useViewport.cjs

@@ -0,0 +1,157 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useViewport = useViewport;
+var _transform = require("../utils/transform.cjs");
+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 = (0, _transform.screenToCanvas)(point.x, point.y, transform.value);
+    const newTransform = {
+      ...transform.value,
+      zoom: boundedZoom
+    };
+    const screenPoint = (0, _transform.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 (0, _transform.screenToCanvas)(screenX, screenY, transform.value);
+  };
+  const _canvasToScreen = (canvasX, canvasY) => {
+    return (0, _transform.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/core/useViewport.d.ts

@@ -0,0 +1,65 @@
+import { type Ref } from 'vue';
+import type { ViewportTransform } from '../types';
+export interface UseViewportOptions {
+    minZoom?: number;
+    maxZoom?: number;
+    zoomStep?: number;
+    panZoomSpeed?: number;
+}
+export interface UseViewportReturn {
+    transform: Ref<ViewportTransform>;
+    setTransform: (transform: ViewportTransform) => void;
+    setViewport: (x: number, y: number, zoom: number) => void;
+    zoomIn: (factor?: number) => void;
+    zoomOut: (factor?: number) => void;
+    zoomTo: (zoom: number, point?: {
+        x: number;
+        y: number;
+    }) => void;
+    pan: (dx: number, dy: number) => void;
+    panTo: (x: number, y: number) => void;
+    fitView: (bounds: {
+        width: number;
+        height: number;
+    }, nodes: {
+        position: {
+            x: number;
+            y: number;
+        };
+        width?: number;
+        height?: number;
+    }[], options?: {
+        padding?: number;
+    }) => void;
+    center: (bounds: {
+        width: number;
+        height: number;
+    }, nodes: {
+        position: {
+            x: number;
+            y: number;
+        };
+        width?: number;
+        height?: number;
+    }[], options?: {
+        padding?: number;
+    }) => void;
+    screenToCanvas: (screenX: number, screenY: number) => {
+        x: number;
+        y: number;
+    };
+    canvasToScreen: (canvasX: number, canvasY: number) => {
+        x: number;
+        y: number;
+    };
+    isNodeVisible: (nodeBounds: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    }, containerBounds: {
+        width: number;
+        height: number;
+    }) => boolean;
+}
+export declare function useViewport(initialTransform: Ref<ViewportTransform>, options?: UseViewportOptions): UseViewportReturn;