@yh-ui/flow 0.1.21

package/dist/core/index.cjs

@@ -0,0 +1,104 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _useFlow = require("./useFlow.cjs");
+Object.keys(_useFlow).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useFlow[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useFlow[key];
+    }
+  });
+});
+var _useViewport = require("./useViewport.cjs");
+Object.keys(_useViewport).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useViewport[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useViewport[key];
+    }
+  });
+});
+var _useNodes = require("./useNodes.cjs");
+Object.keys(_useNodes).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useNodes[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useNodes[key];
+    }
+  });
+});
+var _useEdges = require("./useEdges.cjs");
+Object.keys(_useEdges).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useEdges[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useEdges[key];
+    }
+  });
+});
+var _useSelection = require("./useSelection.cjs");
+Object.keys(_useSelection).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useSelection[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useSelection[key];
+    }
+  });
+});
+var _useHistory = require("./useHistory.cjs");
+Object.keys(_useHistory).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useHistory[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useHistory[key];
+    }
+  });
+});
+var _useKeyboard = require("./useKeyboard.cjs");
+Object.keys(_useKeyboard).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useKeyboard[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useKeyboard[key];
+    }
+  });
+});
+var _useAlignment = require("./useAlignment.cjs");
+Object.keys(_useAlignment).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useAlignment[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useAlignment[key];
+    }
+  });
+});
+var _useNodeDistribution = require("./useNodeDistribution.cjs");
+Object.keys(_useNodeDistribution).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useNodeDistribution[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useNodeDistribution[key];
+    }
+  });
+});

package/dist/core/index.d.ts

@@ -0,0 +1,9 @@
+export * from './useFlow';
+export * from './useViewport';
+export * from './useNodes';
+export * from './useEdges';
+export * from './useSelection';
+export * from './useHistory';
+export * from './useKeyboard';
+export * from './useAlignment';
+export * from './useNodeDistribution';

package/dist/core/index.mjs

@@ -0,0 +1,9 @@
+export * from "./useFlow.mjs";
+export * from "./useViewport.mjs";
+export * from "./useNodes.mjs";
+export * from "./useEdges.mjs";
+export * from "./useSelection.mjs";
+export * from "./useHistory.mjs";
+export * from "./useKeyboard.mjs";
+export * from "./useAlignment.mjs";
+export * from "./useNodeDistribution.mjs";

package/dist/core/useAlignment.cjs

@@ -0,0 +1,81 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useAlignment = useAlignment;
+var _vue = require("vue");
+function useAlignment(options) {
+  const {
+    nodes,
+    snapThreshold = 10
+  } = options;
+  const horizontalSnapLines = (0, _vue.ref)([]);
+  const verticalSnapLines = (0, _vue.ref)([]);
+  const getAlignmentSnap = (nodeId, position) => {
+    const node = nodes.value.find(n => n.id === nodeId);
+    if (!node) {
+      return {
+        x: position.x,
+        y: position.y,
+        snappedX: false,
+        snappedY: false
+      };
+    }
+    const nodeWidth = node.width || 200;
+    const nodeHeight = node.height || 50;
+    const otherNodes = nodes.value.filter(n => n.id !== nodeId);
+    let snappedX = false;
+    let snappedY = false;
+    const dragYPositions = [position.y, position.y + nodeHeight / 2, position.y + nodeHeight];
+    for (const otherNode of otherNodes) {
+      const otherHeight = otherNode.height || 50;
+      const otherYPositions = [otherNode.position.y, otherNode.position.y + otherHeight / 2, otherNode.position.y + otherHeight];
+      for (let i = 0; i < dragYPositions.length; i++) {
+        for (const otherY of otherYPositions) {
+          if (Math.abs(dragYPositions[i] - otherY) < snapThreshold) {
+            if (i === 0) position.y = otherY;else if (i === 1) position.y = otherY - nodeHeight / 2;else position.y = otherY - nodeHeight;
+            snappedY = true;
+            break;
+          }
+        }
+        if (snappedY) break;
+      }
+      if (snappedY) break;
+    }
+    const dragXPositions = [position.x, position.x + nodeWidth / 2, position.x + nodeWidth];
+    for (const otherNode of otherNodes) {
+      const otherWidth = otherNode.width || 200;
+      const otherXPositions = [otherNode.position.x, otherNode.position.x + otherWidth / 2, otherNode.position.x + otherWidth];
+      for (let i = 0; i < dragXPositions.length; i++) {
+        for (const otherX of otherXPositions) {
+          if (Math.abs(dragXPositions[i] - otherX) < snapThreshold) {
+            if (i === 0) position.x = otherX;else if (i === 1) position.x = otherX - nodeWidth / 2;else position.x = otherX - otherWidth;
+            snappedX = true;
+            break;
+          }
+        }
+        if (snappedX) break;
+      }
+    }
+    return {
+      x: position.x,
+      y: position.y,
+      snappedX,
+      snappedY
+    };
+  };
+  const snapToAlignment = (nodeId, position) => {
+    const snapResult = getAlignmentSnap(nodeId, position);
+    return {
+      x: snapResult.x,
+      y: snapResult.y
+    };
+  };
+  return {
+    snapToAlignment,
+    getAlignmentSnap,
+    horizontalSnapLines,
+    verticalSnapLines
+  };
+}

package/dist/core/useAlignment.d.ts

@@ -0,0 +1,33 @@
+import { type Ref } from 'vue';
+import type { Node } from '../types';
+export interface UseAlignmentOptions {
+    nodes: Ref<Node[]>;
+    snapThreshold?: number;
+}
+export interface UseAlignmentReturn {
+    snapToAlignment: (nodeId: string, position: {
+        x: number;
+        y: number;
+    }) => {
+        x: number;
+        y: number;
+    };
+    getAlignmentSnap: (nodeId: string, position: {
+        x: number;
+        y: number;
+    }) => {
+        x: number;
+        y: number;
+        snappedX: boolean;
+        snappedY: boolean;
+    };
+    horizontalSnapLines: Ref<{
+        y: number;
+        active: boolean;
+    }[]>;
+    verticalSnapLines: Ref<{
+        x: number;
+        active: boolean;
+    }[]>;
+}
+export declare function useAlignment(options: UseAlignmentOptions): UseAlignmentReturn;

package/dist/core/useAlignment.mjs

@@ -0,0 +1,71 @@
+import { ref } from "vue";
+export function useAlignment(options) {
+  const { nodes, snapThreshold = 10 } = options;
+  const horizontalSnapLines = ref([]);
+  const verticalSnapLines = ref([]);
+  const getAlignmentSnap = (nodeId, position) => {
+    const node = nodes.value.find((n) => n.id === nodeId);
+    if (!node) {
+      return { x: position.x, y: position.y, snappedX: false, snappedY: false };
+    }
+    const nodeWidth = node.width || 200;
+    const nodeHeight = node.height || 50;
+    const otherNodes = nodes.value.filter((n) => n.id !== nodeId);
+    let snappedX = false;
+    let snappedY = false;
+    const dragYPositions = [position.y, position.y + nodeHeight / 2, position.y + nodeHeight];
+    for (const otherNode of otherNodes) {
+      const otherHeight = otherNode.height || 50;
+      const otherYPositions = [
+        otherNode.position.y,
+        otherNode.position.y + otherHeight / 2,
+        otherNode.position.y + otherHeight
+      ];
+      for (let i = 0; i < dragYPositions.length; i++) {
+        for (const otherY of otherYPositions) {
+          if (Math.abs(dragYPositions[i] - otherY) < snapThreshold) {
+            if (i === 0) position.y = otherY;
+            else if (i === 1) position.y = otherY - nodeHeight / 2;
+            else position.y = otherY - nodeHeight;
+            snappedY = true;
+            break;
+          }
+        }
+        if (snappedY) break;
+      }
+      if (snappedY) break;
+    }
+    const dragXPositions = [position.x, position.x + nodeWidth / 2, position.x + nodeWidth];
+    for (const otherNode of otherNodes) {
+      const otherWidth = otherNode.width || 200;
+      const otherXPositions = [
+        otherNode.position.x,
+        otherNode.position.x + otherWidth / 2,
+        otherNode.position.x + otherWidth
+      ];
+      for (let i = 0; i < dragXPositions.length; i++) {
+        for (const otherX of otherXPositions) {
+          if (Math.abs(dragXPositions[i] - otherX) < snapThreshold) {
+            if (i === 0) position.x = otherX;
+            else if (i === 1) position.x = otherX - nodeWidth / 2;
+            else position.x = otherX - otherWidth;
+            snappedX = true;
+            break;
+          }
+        }
+        if (snappedX) break;
+      }
+    }
+    return { x: position.x, y: position.y, snappedX, snappedY };
+  };
+  const snapToAlignment = (nodeId, position) => {
+    const snapResult = getAlignmentSnap(nodeId, position);
+    return { x: snapResult.x, y: snapResult.y };
+  };
+  return {
+    snapToAlignment,
+    getAlignmentSnap,
+    horizontalSnapLines,
+    verticalSnapLines
+  };
+}

package/dist/core/useEdges.cjs

@@ -0,0 +1,132 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useEdges = useEdges;
+function useEdges(options) {
+  const {
+    edges,
+    nodes: _nodes,
+    onEdgesChange,
+    isValidConnection
+  } = options;
+  const addEdge = edge => {
+    if (isValidConnection && !isValidConnection({
+      source: edge.source,
+      target: edge.target,
+      sourceHandle: edge.sourceHandle,
+      targetHandle: edge.targetHandle
+    })) {
+      return;
+    }
+    const exists = edges.value.some(e => e.source === edge.source && e.target === edge.target);
+    if (exists) return;
+    edges.value = [...edges.value, edge];
+    onEdgesChange?.([{
+      type: "select",
+      id: edge.id,
+      item: edge,
+      selected: true
+    }]);
+  };
+  const removeEdge = edgeId => {
+    edges.value = edges.value.filter(e => e.id !== edgeId);
+    onEdgesChange?.([{
+      type: "remove",
+      id: edgeId,
+      item: {}
+    }]);
+  };
+  const updateEdge = (edgeId, data) => {
+    edges.value = edges.value.map(edge => {
+      if (edge.id === edgeId) {
+        return {
+          ...edge,
+          ...data
+        };
+      }
+      return edge;
+    });
+  };
+  const setEdges = newEdges => {
+    edges.value = newEdges;
+  };
+  const getEdge = edgeId => {
+    return edges.value.find(e => e.id === edgeId);
+  };
+  const getSelectedEdges = () => {
+    return edges.value.filter(e => e.selected);
+  };
+  const selectEdge = (edgeId, selected = true, multi = false) => {
+    edges.value = edges.value.map(edge2 => {
+      if (multi) {
+        if (edge2.id === edgeId) {
+          return {
+            ...edge2,
+            selected
+          };
+        }
+        return edge2;
+      } else {
+        if (edge2.id === edgeId) {
+          return {
+            ...edge2,
+            selected
+          };
+        } else {
+          return {
+            ...edge2,
+            selected: false
+          };
+        }
+      }
+    });
+    const edge = edges.value.find(e => e.id === edgeId);
+    if (edge) {
+      onEdgesChange?.([{
+        type: "select",
+        id: edgeId,
+        item: edge,
+        selected
+      }]);
+    }
+  };
+  const selectEdges = (edgeIds, selected = true) => {
+    edges.value = edges.value.map(edge => {
+      if (edgeIds.includes(edge.id)) {
+        return {
+          ...edge,
+          selected
+        };
+      }
+      return edge;
+    });
+  };
+  const clearSelection = () => {
+    edges.value = edges.value.map(edge => ({
+      ...edge,
+      selected: false
+    }));
+  };
+  const getEdgesForNode = nodeId => {
+    return edges.value.filter(e => e.source === nodeId || e.target === nodeId);
+  };
+  const getConnectedEdges = nodeId => {
+    return edges.value.filter(e => e.source === nodeId || e.target === nodeId);
+  };
+  return {
+    edges,
+    addEdge,
+    removeEdge,
+    updateEdge,
+    setEdges,
+    getEdge,
+    getSelectedEdges,
+    selectEdge,
+    selectEdges,
+    clearSelection,
+    getEdgesForNode,
+    getConnectedEdges
+  };
+}

package/dist/core/useEdges.d.ts

@@ -0,0 +1,29 @@
+import { type Ref } from 'vue';
+import type { Edge, EdgeChange } from '../types';
+import type { Node } from '../types';
+export interface UseEdgesOptions {
+    edges: Ref<Edge[]>;
+    nodes: Ref<Node[]>;
+    onEdgesChange?: (changes: EdgeChange[]) => void;
+    isValidConnection?: (connection: {
+        source: string;
+        target: string;
+        sourceHandle?: string | null;
+        targetHandle?: string | null;
+    }) => boolean;
+}
+export interface UseEdgesReturn {
+    edges: Ref<Edge[]>;
+    addEdge: (edge: Edge) => void;
+    removeEdge: (edgeId: string) => void;
+    updateEdge: (edgeId: string, data: Partial<Edge>) => void;
+    setEdges: (edges: Edge[]) => void;
+    getEdge: (edgeId: string) => Edge | undefined;
+    getSelectedEdges: () => Edge[];
+    selectEdge: (edgeId: string, selected?: boolean, multi?: boolean) => void;
+    selectEdges: (edgeIds: string[], selected?: boolean) => void;
+    clearSelection: () => void;
+    getEdgesForNode: (nodeId: string) => Edge[];
+    getConnectedEdges: (nodeId: string) => Edge[];
+}
+export declare function useEdges(options: UseEdgesOptions): UseEdgesReturn;

package/dist/core/useEdges.mjs

@@ -0,0 +1,89 @@
+export function useEdges(options) {
+  const { edges, nodes: _nodes, onEdgesChange, isValidConnection } = options;
+  const addEdge = (edge) => {
+    if (isValidConnection && !isValidConnection({
+      source: edge.source,
+      target: edge.target,
+      sourceHandle: edge.sourceHandle,
+      targetHandle: edge.targetHandle
+    })) {
+      return;
+    }
+    const exists = edges.value.some((e) => e.source === edge.source && e.target === edge.target);
+    if (exists) return;
+    edges.value = [...edges.value, edge];
+    onEdgesChange?.([{ type: "select", id: edge.id, item: edge, selected: true }]);
+  };
+  const removeEdge = (edgeId) => {
+    edges.value = edges.value.filter((e) => e.id !== edgeId);
+    onEdgesChange?.([{ type: "remove", id: edgeId, item: {} }]);
+  };
+  const updateEdge = (edgeId, data) => {
+    edges.value = edges.value.map((edge) => {
+      if (edge.id === edgeId) {
+        return { ...edge, ...data };
+      }
+      return edge;
+    });
+  };
+  const setEdges = (newEdges) => {
+    edges.value = newEdges;
+  };
+  const getEdge = (edgeId) => {
+    return edges.value.find((e) => e.id === edgeId);
+  };
+  const getSelectedEdges = () => {
+    return edges.value.filter((e) => e.selected);
+  };
+  const selectEdge = (edgeId, selected = true, multi = false) => {
+    edges.value = edges.value.map((edge2) => {
+      if (multi) {
+        if (edge2.id === edgeId) {
+          return { ...edge2, selected };
+        }
+        return edge2;
+      } else {
+        if (edge2.id === edgeId) {
+          return { ...edge2, selected };
+        } else {
+          return { ...edge2, selected: false };
+        }
+      }
+    });
+    const edge = edges.value.find((e) => e.id === edgeId);
+    if (edge) {
+      onEdgesChange?.([{ type: "select", id: edgeId, item: edge, selected }]);
+    }
+  };
+  const selectEdges = (edgeIds, selected = true) => {
+    edges.value = edges.value.map((edge) => {
+      if (edgeIds.includes(edge.id)) {
+        return { ...edge, selected };
+      }
+      return edge;
+    });
+  };
+  const clearSelection = () => {
+    edges.value = edges.value.map((edge) => ({ ...edge, selected: false }));
+  };
+  const getEdgesForNode = (nodeId) => {
+    return edges.value.filter((e) => e.source === nodeId || e.target === nodeId);
+  };
+  const getConnectedEdges = (nodeId) => {
+    return edges.value.filter((e) => e.source === nodeId || e.target === nodeId);
+  };
+  return {
+    edges,
+    addEdge,
+    removeEdge,
+    updateEdge,
+    setEdges,
+    getEdge,
+    getSelectedEdges,
+    selectEdge,
+    selectEdges,
+    clearSelection,
+    getEdgesForNode,
+    getConnectedEdges
+  };
+}

package/dist/core/useFlow.cjs

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createFlowContext = createFlowContext;
+exports.provideFlowContext = provideFlowContext;
+exports.useFlowContext = useFlowContext;
+var _vue = require("vue");
+const FLOW_CONTEXT_KEY = Symbol("flow-context");
+function createFlowContext(nodes, edges, viewport, _options = {}) {
+  const eventBus = /* @__PURE__ */new Map();
+  const on = (event, handler) => {
+    if (!eventBus.has(event)) {
+      eventBus.set(event, /* @__PURE__ */new Set());
+    }
+    eventBus.get(event).add(handler);
+  };
+  const off = (event, handler) => {
+    eventBus.get(event)?.delete(handler);
+  };
+  const emit = (event, ...args) => {
+    eventBus.get(event)?.forEach(handler => handler(...args));
+  };
+  return {
+    on,
+    off,
+    emit
+  };
+}
+function useFlowContext() {
+  const context = (0, _vue.inject)(FLOW_CONTEXT_KEY);
+  if (!context) {
+    throw new Error("useFlowContext must be used within a Flow component");
+  }
+  return context;
+}
+function provideFlowContext(context) {
+  (0, _vue.provide)(FLOW_CONTEXT_KEY, context);
+}

package/dist/core/useFlow.d.ts

@@ -0,0 +1,31 @@
+import { type Ref } from 'vue';
+import type { Node, Edge, ViewportTransform } from '../types';
+export interface FlowContextValue {
+    nodes: Ref<Node[]>;
+    edges: Ref<Edge[]>;
+    viewport: Ref<ViewportTransform>;
+    addNode: (node: Node) => void;
+    removeNode: (nodeId: string) => void;
+    addEdge: (edge: Edge) => void;
+    removeEdge: (edgeId: string) => void;
+    setViewport: (transform: ViewportTransform) => void;
+    fitView: (options?: {
+        padding?: number;
+    }) => void;
+    getNodes: () => Node[];
+    getEdges: () => Edge[];
+    on: (event: string, handler: (...args: unknown[]) => void) => void;
+    off: (event: string, handler: (...args: unknown[]) => void) => void;
+}
+export declare function createFlowContext(nodes: Ref<Node[]>, edges: Ref<Edge[]>, viewport: Ref<ViewportTransform>, _options?: {
+    snapToGrid?: boolean;
+    snapGrid?: [number, number];
+    maxHistory?: number;
+    keyboardShortcuts?: boolean;
+}): {
+    on: (event: string, handler: (...args: unknown[]) => void) => void;
+    off: (event: string, handler: (...args: unknown[]) => void) => void;
+    emit: (event: string, ...args: unknown[]) => void;
+};
+export declare function useFlowContext(): FlowContextValue;
+export declare function provideFlowContext(context: FlowContextValue): void;

package/dist/core/useFlow.mjs

@@ -0,0 +1,32 @@
+import { provide, inject } from "vue";
+const FLOW_CONTEXT_KEY = Symbol("flow-context");
+export function createFlowContext(nodes, edges, viewport, _options = {}) {
+  const eventBus = /* @__PURE__ */ new Map();
+  const on = (event, handler) => {
+    if (!eventBus.has(event)) {
+      eventBus.set(event, /* @__PURE__ */ new Set());
+    }
+    eventBus.get(event).add(handler);
+  };
+  const off = (event, handler) => {
+    eventBus.get(event)?.delete(handler);
+  };
+  const emit = (event, ...args) => {
+    eventBus.get(event)?.forEach((handler) => handler(...args));
+  };
+  return {
+    on,
+    off,
+    emit
+  };
+}
+export function useFlowContext() {
+  const context = inject(FLOW_CONTEXT_KEY);
+  if (!context) {
+    throw new Error("useFlowContext must be used within a Flow component");
+  }
+  return context;
+}
+export function provideFlowContext(context) {
+  provide(FLOW_CONTEXT_KEY, context);
+}