@yh-ui/flow 0.1.21

package/dist/core/useHistory.cjs

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useHistory = useHistory;
+var _vue = require("vue");
+function useHistory(nodes, edges, options = {}) {
+  const {
+    maxHistory = 50,
+    onHistoryChange
+  } = options;
+  const history = (0, _vue.shallowRef)([]);
+  const historyPointer = (0, _vue.ref)(-1);
+  const canUndo = (0, _vue.computed)(() => historyPointer.value > 0);
+  const canRedo = (0, _vue.computed)(() => historyPointer.value < history.value.length - 1);
+  const push = state => {
+    const newHistory = history.value.slice(0, historyPointer.value + 1);
+    newHistory.push({
+      nodes: JSON.parse(JSON.stringify(state.nodes)),
+      edges: JSON.parse(JSON.stringify(state.edges))
+    });
+    if (newHistory.length > maxHistory) {
+      newHistory.shift();
+    }
+    history.value = newHistory;
+    historyPointer.value = newHistory.length - 1;
+    onHistoryChange?.(canUndo.value, canRedo.value);
+  };
+  const undo = () => {
+    if (!canUndo.value) return;
+    historyPointer.value--;
+    const prevState = history.value[historyPointer.value];
+    if (prevState) {
+      nodes.value = JSON.parse(JSON.stringify(prevState.nodes));
+      edges.value = JSON.parse(JSON.stringify(prevState.edges));
+    }
+    onHistoryChange?.(canUndo.value, canRedo.value);
+  };
+  const redo = () => {
+    if (!canRedo.value) return;
+    historyPointer.value++;
+    const nextState = history.value[historyPointer.value];
+    if (nextState) {
+      nodes.value = JSON.parse(JSON.stringify(nextState.nodes));
+      edges.value = JSON.parse(JSON.stringify(nextState.edges));
+    }
+    onHistoryChange?.(canUndo.value, canRedo.value);
+  };
+  const clear = () => {
+    history.value = [];
+    historyPointer.value = -1;
+    onHistoryChange?.(false, false);
+  };
+  return {
+    canUndo,
+    canRedo,
+    undo,
+    redo,
+    push,
+    clear
+  };
+}

package/dist/core/useHistory.d.ts

@@ -0,0 +1,15 @@
+import { type Ref } from 'vue';
+import type { Node, Edge, HistoryState } from '../types';
+export interface UseHistoryOptions {
+    maxHistory?: number;
+    onHistoryChange?: (canUndo: boolean, canRedo: boolean) => void;
+}
+export interface UseHistoryReturn {
+    canUndo: Ref<boolean>;
+    canRedo: Ref<boolean>;
+    undo: () => void;
+    redo: () => void;
+    push: (state: HistoryState) => void;
+    clear: () => void;
+}
+export declare function useHistory(nodes: Ref<Node[]>, edges: Ref<Edge[]>, options?: UseHistoryOptions): UseHistoryReturn;

package/dist/core/useHistory.mjs

@@ -0,0 +1,54 @@
+import { ref, computed, shallowRef } from "vue";
+export function useHistory(nodes, edges, options = {}) {
+  const { maxHistory = 50, onHistoryChange } = options;
+  const history = shallowRef([]);
+  const historyPointer = ref(-1);
+  const canUndo = computed(() => historyPointer.value > 0);
+  const canRedo = computed(() => historyPointer.value < history.value.length - 1);
+  const push = (state) => {
+    const newHistory = history.value.slice(0, historyPointer.value + 1);
+    newHistory.push({
+      nodes: JSON.parse(JSON.stringify(state.nodes)),
+      edges: JSON.parse(JSON.stringify(state.edges))
+    });
+    if (newHistory.length > maxHistory) {
+      newHistory.shift();
+    }
+    history.value = newHistory;
+    historyPointer.value = newHistory.length - 1;
+    onHistoryChange?.(canUndo.value, canRedo.value);
+  };
+  const undo = () => {
+    if (!canUndo.value) return;
+    historyPointer.value--;
+    const prevState = history.value[historyPointer.value];
+    if (prevState) {
+      nodes.value = JSON.parse(JSON.stringify(prevState.nodes));
+      edges.value = JSON.parse(JSON.stringify(prevState.edges));
+    }
+    onHistoryChange?.(canUndo.value, canRedo.value);
+  };
+  const redo = () => {
+    if (!canRedo.value) return;
+    historyPointer.value++;
+    const nextState = history.value[historyPointer.value];
+    if (nextState) {
+      nodes.value = JSON.parse(JSON.stringify(nextState.nodes));
+      edges.value = JSON.parse(JSON.stringify(nextState.edges));
+    }
+    onHistoryChange?.(canUndo.value, canRedo.value);
+  };
+  const clear = () => {
+    history.value = [];
+    historyPointer.value = -1;
+    onHistoryChange?.(false, false);
+  };
+  return {
+    canUndo,
+    canRedo,
+    undo,
+    redo,
+    push,
+    clear
+  };
+}

package/dist/core/useKeyboard.cjs

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useKeyboard = useKeyboard;
+function useKeyboard(options = {}) {
+  const {
+    enabled = true,
+    onDelete,
+    onCopy,
+    onPaste,
+    onUndo,
+    onRedo,
+    onSelectAll,
+    onEscape
+  } = options;
+  const handleKeyDown = event => {
+    if (!enabled) return;
+    const key = event.key;
+    const ctrl = event.ctrlKey || event.metaKey;
+    if ((key === "Delete" || key === "Backspace") && !event.target?.toString().includes("Input")) {
+      event.preventDefault();
+      onDelete?.();
+    }
+    if (ctrl && key === "c") {
+      onCopy?.();
+    }
+    if (ctrl && key === "v") {
+      onPaste?.({
+        nodes: [],
+        edges: []
+      });
+    }
+    if (ctrl && key === "z" && !event.shiftKey) {
+      event.preventDefault();
+      onUndo?.();
+    }
+    if (ctrl && key === "z" && event.shiftKey || ctrl && key === "y") {
+      event.preventDefault();
+      onRedo?.();
+    }
+    if (ctrl && key === "a") {
+      event.preventDefault();
+      onSelectAll?.();
+    }
+    if (key === "Escape") {
+      onEscape?.();
+    }
+  };
+  return {
+    handleKeyDown
+  };
+}

package/dist/core/useKeyboard.d.ts

@@ -0,0 +1,18 @@
+import type { Node, Edge } from '../types';
+export interface UseKeyboardOptions {
+    enabled?: boolean;
+    onDelete?: () => void;
+    onCopy?: () => void;
+    onPaste?: (data: {
+        nodes: Node[];
+        edges: Edge[];
+    }) => void;
+    onUndo?: () => void;
+    onRedo?: () => void;
+    onSelectAll?: () => void;
+    onEscape?: () => void;
+}
+export interface UseKeyboardReturn {
+    handleKeyDown: (event: KeyboardEvent) => void;
+}
+export declare function useKeyboard(options?: UseKeyboardOptions): UseKeyboardReturn;

package/dist/core/useKeyboard.mjs

@@ -0,0 +1,45 @@
+export function useKeyboard(options = {}) {
+  const {
+    enabled = true,
+    onDelete,
+    onCopy,
+    onPaste,
+    onUndo,
+    onRedo,
+    onSelectAll,
+    onEscape
+  } = options;
+  const handleKeyDown = (event) => {
+    if (!enabled) return;
+    const key = event.key;
+    const ctrl = event.ctrlKey || event.metaKey;
+    if ((key === "Delete" || key === "Backspace") && !event.target?.toString().includes("Input")) {
+      event.preventDefault();
+      onDelete?.();
+    }
+    if (ctrl && key === "c") {
+      onCopy?.();
+    }
+    if (ctrl && key === "v") {
+      onPaste?.({ nodes: [], edges: [] });
+    }
+    if (ctrl && key === "z" && !event.shiftKey) {
+      event.preventDefault();
+      onUndo?.();
+    }
+    if (ctrl && key === "z" && event.shiftKey || ctrl && key === "y") {
+      event.preventDefault();
+      onRedo?.();
+    }
+    if (ctrl && key === "a") {
+      event.preventDefault();
+      onSelectAll?.();
+    }
+    if (key === "Escape") {
+      onEscape?.();
+    }
+  };
+  return {
+    handleKeyDown
+  };
+}

package/dist/core/useNodeDistribution.cjs

@@ -0,0 +1,171 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useNodeDistribution = useNodeDistribution;
+function useNodeDistribution(options) {
+  const {
+    nodes
+  } = options;
+  const distributeHorizontally = (nodeIds, gap = 50) => {
+    const targetNodeIds = nodeIds || nodes.value.filter(n => n.selected).map(n => n.id);
+    if (targetNodeIds.length < 3) return;
+    const targetNodes = nodes.value.filter(n => targetNodeIds.includes(n.id));
+    targetNodes.sort((a, b) => a.position.x - b.position.x);
+    const firstNode = targetNodes[0];
+    const lastNode = targetNodes[targetNodes.length - 1];
+    const lastWidth = lastNode.width || 200;
+    const totalWidth = targetNodes.reduce((sum, n) => sum + (n.width || 200), 0);
+    const totalGap = gap * (targetNodes.length - 1);
+    const availableSpace = lastNode.position.x + lastWidth - firstNode.position.x - totalWidth - totalGap;
+    if (availableSpace <= 0) {
+      let currentX = firstNode.position.x;
+      targetNodes.forEach(node => {
+        const nodeIndex = nodes.value.findIndex(n => n.id === node.id);
+        if (nodeIndex >= 0) {
+          nodes.value[nodeIndex] = {
+            ...nodes.value[nodeIndex],
+            position: {
+              ...nodes.value[nodeIndex].position,
+              x: currentX
+            }
+          };
+        }
+        currentX += (node.width || 200) + gap;
+      });
+    } else {
+      let currentX = firstNode.position.x;
+      targetNodes.forEach(node => {
+        const nodeIndex = nodes.value.findIndex(n => n.id === node.id);
+        if (nodeIndex >= 0) {
+          nodes.value[nodeIndex] = {
+            ...nodes.value[nodeIndex],
+            position: {
+              ...nodes.value[nodeIndex].position,
+              x: currentX
+            }
+          };
+        }
+        currentX += (node.width || 200) + gap;
+      });
+    }
+  };
+  const distributeVertically = (nodeIds, gap = 50) => {
+    const targetNodeIds = nodeIds || nodes.value.filter(n => n.selected).map(n => n.id);
+    if (targetNodeIds.length < 3) return;
+    const targetNodes = nodes.value.filter(n => targetNodeIds.includes(n.id));
+    targetNodes.sort((a, b) => a.position.y - b.position.y);
+    const firstNode = targetNodes[0];
+    const lastNode = targetNodes[targetNodes.length - 1];
+    const lastHeight = lastNode.height || 50;
+    const totalHeight = targetNodes.reduce((sum, n) => sum + (n.height || 50), 0);
+    const totalGap = gap * (targetNodes.length - 1);
+    const availableSpace = lastNode.position.y + lastHeight - firstNode.position.y - totalHeight - totalGap;
+    if (availableSpace <= 0) {
+      let currentY = firstNode.position.y;
+      targetNodes.forEach(node => {
+        const nodeIndex = nodes.value.findIndex(n => n.id === node.id);
+        if (nodeIndex >= 0) {
+          nodes.value[nodeIndex] = {
+            ...nodes.value[nodeIndex],
+            position: {
+              ...nodes.value[nodeIndex].position,
+              y: currentY
+            }
+          };
+        }
+        currentY += (node.height || 50) + gap;
+      });
+    } else {
+      let currentY = firstNode.position.y;
+      targetNodes.forEach(node => {
+        const nodeIndex = nodes.value.findIndex(n => n.id === node.id);
+        if (nodeIndex >= 0) {
+          nodes.value[nodeIndex] = {
+            ...nodes.value[nodeIndex],
+            position: {
+              ...nodes.value[nodeIndex].position,
+              y: currentY
+            }
+          };
+        }
+        currentY += (node.height || 50) + gap;
+      });
+    }
+  };
+  const alignNodesHorizontal = (nodeIds, alignment = "left") => {
+    const targetNodeIds = nodeIds || nodes.value.filter(n => n.selected).map(n => n.id);
+    if (targetNodeIds.length < 2) return;
+    const targetNodes = nodes.value.filter(n => targetNodeIds.includes(n.id));
+    let referenceX;
+    if (alignment === "left") {
+      referenceX = Math.min(...targetNodes.map(n => n.position.x));
+    } else if (alignment === "right") {
+      referenceX = Math.max(...targetNodes.map(n => n.position.x + (n.width || 200)));
+    } else {
+      const centers = targetNodes.map(n => n.position.x + (n.width || 200) / 2);
+      referenceX = centers.reduce((a, b) => a + b, 0) / centers.length;
+    }
+    targetNodes.forEach(node => {
+      const nodeIndex = nodes.value.findIndex(n => n.id === node.id);
+      if (nodeIndex >= 0) {
+        let newX;
+        if (alignment === "left") {
+          newX = referenceX;
+        } else if (alignment === "right") {
+          newX = referenceX - (node.width || 200);
+        } else {
+          newX = referenceX - (node.width || 200) / 2;
+        }
+        nodes.value[nodeIndex] = {
+          ...nodes.value[nodeIndex],
+          position: {
+            ...nodes.value[nodeIndex].position,
+            x: newX
+          }
+        };
+      }
+    });
+  };
+  const alignNodesVertical = (nodeIds, alignment = "top") => {
+    const targetNodeIds = nodeIds || nodes.value.filter(n => n.selected).map(n => n.id);
+    if (targetNodeIds.length < 2) return;
+    const targetNodes = nodes.value.filter(n => targetNodeIds.includes(n.id));
+    let referenceY;
+    if (alignment === "top") {
+      referenceY = Math.min(...targetNodes.map(n => n.position.y));
+    } else if (alignment === "bottom") {
+      referenceY = Math.max(...targetNodes.map(n => n.position.y + (n.height || 50)));
+    } else {
+      const middles = targetNodes.map(n => n.position.y + (n.height || 50) / 2);
+      referenceY = middles.reduce((a, b) => a + b, 0) / middles.length;
+    }
+    targetNodes.forEach(node => {
+      const nodeIndex = nodes.value.findIndex(n => n.id === node.id);
+      if (nodeIndex >= 0) {
+        let newY;
+        if (alignment === "top") {
+          newY = referenceY;
+        } else if (alignment === "bottom") {
+          newY = referenceY - (node.height || 50);
+        } else {
+          newY = referenceY - (node.height || 50) / 2;
+        }
+        nodes.value[nodeIndex] = {
+          ...nodes.value[nodeIndex],
+          position: {
+            ...nodes.value[nodeIndex].position,
+            y: newY
+          }
+        };
+      }
+    });
+  };
+  return {
+    distributeHorizontally,
+    distributeVertically,
+    alignNodesHorizontal,
+    alignNodesVertical
+  };
+}

package/dist/core/useNodeDistribution.d.ts

@@ -0,0 +1,12 @@
+import { type Ref } from 'vue';
+import type { Node } from '../types';
+export interface UseNodeDistributionOptions {
+    nodes: Ref<Node[]>;
+}
+export interface UseNodeDistributionReturn {
+    distributeHorizontally: (nodeIds?: string[], gap?: number) => void;
+    distributeVertically: (nodeIds?: string[], gap?: number) => void;
+    alignNodesHorizontal: (nodeIds?: string[], alignment?: 'left' | 'center' | 'right') => void;
+    alignNodesVertical: (nodeIds?: string[], alignment?: 'top' | 'middle' | 'bottom') => void;
+}
+export declare function useNodeDistribution(options: UseNodeDistributionOptions): UseNodeDistributionReturn;

package/dist/core/useNodeDistribution.mjs

@@ -0,0 +1,145 @@
+export function useNodeDistribution(options) {
+  const { nodes } = options;
+  const distributeHorizontally = (nodeIds, gap = 50) => {
+    const targetNodeIds = nodeIds || nodes.value.filter((n) => n.selected).map((n) => n.id);
+    if (targetNodeIds.length < 3) return;
+    const targetNodes = nodes.value.filter((n) => targetNodeIds.includes(n.id));
+    targetNodes.sort((a, b) => a.position.x - b.position.x);
+    const firstNode = targetNodes[0];
+    const lastNode = targetNodes[targetNodes.length - 1];
+    const lastWidth = lastNode.width || 200;
+    const totalWidth = targetNodes.reduce((sum, n) => sum + (n.width || 200), 0);
+    const totalGap = gap * (targetNodes.length - 1);
+    const availableSpace = lastNode.position.x + lastWidth - firstNode.position.x - totalWidth - totalGap;
+    if (availableSpace <= 0) {
+      let currentX = firstNode.position.x;
+      targetNodes.forEach((node) => {
+        const nodeIndex = nodes.value.findIndex((n) => n.id === node.id);
+        if (nodeIndex >= 0) {
+          nodes.value[nodeIndex] = {
+            ...nodes.value[nodeIndex],
+            position: { ...nodes.value[nodeIndex].position, x: currentX }
+          };
+        }
+        currentX += (node.width || 200) + gap;
+      });
+    } else {
+      let currentX = firstNode.position.x;
+      targetNodes.forEach((node) => {
+        const nodeIndex = nodes.value.findIndex((n) => n.id === node.id);
+        if (nodeIndex >= 0) {
+          nodes.value[nodeIndex] = {
+            ...nodes.value[nodeIndex],
+            position: { ...nodes.value[nodeIndex].position, x: currentX }
+          };
+        }
+        currentX += (node.width || 200) + gap;
+      });
+    }
+  };
+  const distributeVertically = (nodeIds, gap = 50) => {
+    const targetNodeIds = nodeIds || nodes.value.filter((n) => n.selected).map((n) => n.id);
+    if (targetNodeIds.length < 3) return;
+    const targetNodes = nodes.value.filter((n) => targetNodeIds.includes(n.id));
+    targetNodes.sort((a, b) => a.position.y - b.position.y);
+    const firstNode = targetNodes[0];
+    const lastNode = targetNodes[targetNodes.length - 1];
+    const lastHeight = lastNode.height || 50;
+    const totalHeight = targetNodes.reduce((sum, n) => sum + (n.height || 50), 0);
+    const totalGap = gap * (targetNodes.length - 1);
+    const availableSpace = lastNode.position.y + lastHeight - firstNode.position.y - totalHeight - totalGap;
+    if (availableSpace <= 0) {
+      let currentY = firstNode.position.y;
+      targetNodes.forEach((node) => {
+        const nodeIndex = nodes.value.findIndex((n) => n.id === node.id);
+        if (nodeIndex >= 0) {
+          nodes.value[nodeIndex] = {
+            ...nodes.value[nodeIndex],
+            position: { ...nodes.value[nodeIndex].position, y: currentY }
+          };
+        }
+        currentY += (node.height || 50) + gap;
+      });
+    } else {
+      let currentY = firstNode.position.y;
+      targetNodes.forEach((node) => {
+        const nodeIndex = nodes.value.findIndex((n) => n.id === node.id);
+        if (nodeIndex >= 0) {
+          nodes.value[nodeIndex] = {
+            ...nodes.value[nodeIndex],
+            position: { ...nodes.value[nodeIndex].position, y: currentY }
+          };
+        }
+        currentY += (node.height || 50) + gap;
+      });
+    }
+  };
+  const alignNodesHorizontal = (nodeIds, alignment = "left") => {
+    const targetNodeIds = nodeIds || nodes.value.filter((n) => n.selected).map((n) => n.id);
+    if (targetNodeIds.length < 2) return;
+    const targetNodes = nodes.value.filter((n) => targetNodeIds.includes(n.id));
+    let referenceX;
+    if (alignment === "left") {
+      referenceX = Math.min(...targetNodes.map((n) => n.position.x));
+    } else if (alignment === "right") {
+      referenceX = Math.max(...targetNodes.map((n) => n.position.x + (n.width || 200)));
+    } else {
+      const centers = targetNodes.map((n) => n.position.x + (n.width || 200) / 2);
+      referenceX = centers.reduce((a, b) => a + b, 0) / centers.length;
+    }
+    targetNodes.forEach((node) => {
+      const nodeIndex = nodes.value.findIndex((n) => n.id === node.id);
+      if (nodeIndex >= 0) {
+        let newX;
+        if (alignment === "left") {
+          newX = referenceX;
+        } else if (alignment === "right") {
+          newX = referenceX - (node.width || 200);
+        } else {
+          newX = referenceX - (node.width || 200) / 2;
+        }
+        nodes.value[nodeIndex] = {
+          ...nodes.value[nodeIndex],
+          position: { ...nodes.value[nodeIndex].position, x: newX }
+        };
+      }
+    });
+  };
+  const alignNodesVertical = (nodeIds, alignment = "top") => {
+    const targetNodeIds = nodeIds || nodes.value.filter((n) => n.selected).map((n) => n.id);
+    if (targetNodeIds.length < 2) return;
+    const targetNodes = nodes.value.filter((n) => targetNodeIds.includes(n.id));
+    let referenceY;
+    if (alignment === "top") {
+      referenceY = Math.min(...targetNodes.map((n) => n.position.y));
+    } else if (alignment === "bottom") {
+      referenceY = Math.max(...targetNodes.map((n) => n.position.y + (n.height || 50)));
+    } else {
+      const middles = targetNodes.map((n) => n.position.y + (n.height || 50) / 2);
+      referenceY = middles.reduce((a, b) => a + b, 0) / middles.length;
+    }
+    targetNodes.forEach((node) => {
+      const nodeIndex = nodes.value.findIndex((n) => n.id === node.id);
+      if (nodeIndex >= 0) {
+        let newY;
+        if (alignment === "top") {
+          newY = referenceY;
+        } else if (alignment === "bottom") {
+          newY = referenceY - (node.height || 50);
+        } else {
+          newY = referenceY - (node.height || 50) / 2;
+        }
+        nodes.value[nodeIndex] = {
+          ...nodes.value[nodeIndex],
+          position: { ...nodes.value[nodeIndex].position, y: newY }
+        };
+      }
+    });
+  };
+  return {
+    distributeHorizontally,
+    distributeVertically,
+    alignNodesHorizontal,
+    alignNodesVertical
+  };
+}