@yh-ui/flow 0.1.21

package/dist/renderer/NodeRenderer.vue

@@ -0,0 +1,328 @@
+<template>
+  <div class="yh-flow-nodes">
+    <div
+      v-for="node in visibleNodes"
+      :key="node.id"
+      :id="`node-${node.id}`"
+      class="yh-flow-node"
+      :class="{
+  'is-selected': node.selected,
+  'is-dragging': node.dragging,
+  'is-hidden': node.hidden,
+  [`type-${node.type}`]: true
+}"
+      :style="getNodeStyle(node)"
+      @mousedown="handleNodeMouseDown($event, node)"
+      @click="handleNodeClick($event, node)"
+      @dblclick="handleNodeDblClick($event, node)"
+      @contextmenu="handleNodeContextMenu($event, node)"
+    >
+      <!-- Handle (连接点) -->
+      <template v-if="props.connectable !== false && node.connectable !== false">
+        <!-- Source handles -->
+        <div
+          v-for="handle in getHandles(node, 'source')"
+          :key="`handle-source-${handle.id || handle.position}`"
+          class="yh-flow-handle is-source"
+          :class="`position-${handle.position}`"
+          :data-handle-id="handle.id"
+          :data-handle-type="'source'"
+          @mousedown.stop="handleConnectStart($event, node, handle)"
+        ></div>
+        <!-- Target handles -->
+        <div
+          v-for="handle in getHandles(node, 'target')"
+          :key="`handle-target-${handle.id || handle.position}`"
+          class="yh-flow-handle is-target"
+          :class="`position-${handle.position}`"
+          :data-handle-id="handle.id"
+          :data-handle-type="'target'"
+          @mousedown.stop="handleConnectStart($event, node, handle)"
+        ></div>
+      </template>
+      <!-- 节点内容 -->
+      <div class="yh-flow-node__content">
+        <slot name="node" :node="node">
+          <!-- Automatic Custom Node Component -->
+          <component
+            v-if="getComponent(node.type)"
+            :is="getComponent(node.type)"
+            v-bind="getComponentProps(node)"
+            :node="node"
+          />
+          <div v-else class="yh-flow-node__header" :style="{
+  color: node.labelColor
+}">
+            {{ node.data?.label || node.id }}
+          </div>
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref } from "vue";
+import { getCustomNodeTemplate, getCustomNode } from "../utils/custom-types";
+import DiamondNode from "../components/nodes/DiamondNode.vue";
+import DatabaseNode from "../components/nodes/DatabaseNode.vue";
+const props = defineProps({
+  nodes: { type: Array, required: true },
+  nodeTypes: { type: Object, required: false, default: () => ({}) },
+  transform: { type: Object, required: true },
+  draggable: { type: Boolean, required: false, default: true },
+  connectable: { type: Boolean, required: false, default: true },
+  readonly: { type: Boolean, required: false, default: false }
+});
+const emit = defineEmits(["node-click", "node-dblclick", "node-contextmenu", "node-drag-start", "node-drag", "node-drag-end", "connect-start", "node-select-toggle"]);
+const getComponent = (type) => {
+  if (type === "diamond") return DiamondNode;
+  if (type === "database") return DatabaseNode;
+  if (props.nodeTypes && props.nodeTypes[type]) {
+    return props.nodeTypes[type];
+  }
+  return getCustomNodeTemplate(type)?.component || getCustomNode(type)?.component;
+};
+const visibleNodes = computed(() => {
+  return props.nodes.filter((n) => !n.hidden);
+});
+const getNodeStyle = (node) => {
+  const width = node.width || 150;
+  const height = node.height || 40;
+  let zIndex = node.zIndex || 10;
+  if (node.type === "group") {
+    zIndex = node.selected ? 2 : 1;
+  } else {
+    zIndex = node.selected ? 100 : Math.max(10, zIndex);
+  }
+  return {
+    transform: `translate(${node.position.x}px, ${node.position.y}px)`,
+    width: `${width}px`,
+    height: `${height}px`,
+    zIndex,
+    "--flow-node-label-color": node.labelColor,
+    "--flow-node-description-color": node.descriptionColor,
+    ...node.style
+  };
+};
+const getComponentProps = (node) => {
+  const {
+    id,
+    type,
+    data,
+    position,
+    width,
+    height,
+    selected,
+    dragging,
+    connectable,
+    zIndex,
+    style,
+    labelColor,
+    descriptionColor
+  } = node;
+  return {
+    id,
+    type,
+    data,
+    position,
+    width,
+    height,
+    selected,
+    dragging,
+    connectable,
+    zIndex,
+    style,
+    labelColor,
+    descriptionColor
+  };
+};
+const getHandles = (node, type) => {
+  if (node.handleBounds) {
+    const handles = [];
+    if (node.handleBounds.top) handles.push(...node.handleBounds.top);
+    if (node.handleBounds.right) handles.push(...node.handleBounds.right);
+    if (node.handleBounds.bottom) handles.push(...node.handleBounds.bottom);
+    if (node.handleBounds.left) handles.push(...node.handleBounds.left);
+    return handles.filter((h) => h.type === type);
+  }
+  if (node.type === "group") {
+    return [];
+  }
+  if (node.type === "input") {
+    return type === "source" ? [{ type: "source", position: "right" }] : [];
+  }
+  if (node.type === "output") {
+    return type === "target" ? [{ type: "target", position: "left" }] : [];
+  }
+  if (node.type === "bpmn-start") {
+    return type === "source" ? [{ type: "source", position: "right" }] : [];
+  }
+  if (node.type === "bpmn-end") {
+    return type === "target" ? [{ type: "target", position: "left" }] : [];
+  }
+  if (node.type === "bpmn-task" || node.type === "bpmn-service-task" || node.type === "bpmn-user-task") {
+    if (type === "source") return [{ type: "source", position: "right" }];
+    return [{ type: "target", position: "left" }];
+  }
+  if (node.type === "bpmn-exclusive-gateway" || node.type === "bpmn-parallel-gateway" || node.type === "bpmn-inclusive-gateway") {
+    if (type === "source") {
+      return [
+        { type: "source", position: "right" },
+        { type: "source", position: "bottom" }
+      ];
+    }
+    return [{ type: "target", position: "left" }];
+  }
+  if (node.type === "ai-start") {
+    return type === "source" ? [{ type: "source", position: "right" }] : [];
+  }
+  if (node.type === "ai-end") {
+    return type === "target" ? [{ type: "target", position: "left" }] : [];
+  }
+  if (node.type === "ai-llm" || node.type === "ai-prompt" || node.type === "ai-agent" || node.type === "ai-tool" || node.type === "ai-memory") {
+    if (type === "source") return [{ type: "source", position: "right" }];
+    return [{ type: "target", position: "left" }];
+  }
+  if (node.type === "ai-condition") {
+    if (type === "source") {
+      return [
+        { type: "source", position: "right" },
+        { type: "source", position: "bottom" }
+      ];
+    }
+    return [{ type: "target", position: "left" }];
+  }
+  if (type === "source") {
+    return [
+      { type: "source", position: "right" },
+      { type: "source", position: "bottom" }
+    ];
+  } else {
+    return [
+      { type: "target", position: "left" },
+      { type: "target", position: "top" }
+    ];
+  }
+};
+const draggingNode = ref(null);
+const dragStartPos = ref({ x: 0, y: 0 });
+const nodeStartPos = ref({ x: 0, y: 0 });
+const draggingNodes = ref([]);
+const nodesStartPositions = ref(/* @__PURE__ */ new Map());
+const DRAG_THRESHOLD = 3;
+const hasDragged = ref(false);
+const pendingClickNode = ref(null);
+const pendingClickEvent = ref(null);
+const handleNodeMouseDown = (event, node) => {
+  if (props.readonly || !props.draggable || node.draggable === false) return;
+  const target = event.target;
+  if (target.closest(".yh-flow-handle") || target.closest(".resizer-handle") || target.closest(".yh-flow-node-toolbar")) {
+    return;
+  }
+  const selection = window.getSelection();
+  if (selection) selection.removeAllRanges();
+  pendingClickNode.value = node;
+  pendingClickEvent.value = event;
+  hasDragged.value = false;
+  const wasSelected = node.selected;
+  const draggedIds = /* @__PURE__ */ new Set();
+  const addNodeAndChildren = (id) => {
+    if (draggedIds.has(id)) return;
+    draggedIds.add(id);
+    props.nodes.forEach((n) => {
+      if (n.parentId === id) addNodeAndChildren(n.id);
+    });
+  };
+  const isMultiSelection = event.shiftKey || event.metaKey || event.ctrlKey;
+  const otherSelectedNodes = props.nodes.filter((n) => n.selected && n.id !== node.id);
+  let nodesToDrag = [node.id];
+  if (isMultiSelection || wasSelected) {
+    if (otherSelectedNodes.length > 0) {
+      nodesToDrag = [node.id, ...otherSelectedNodes.map((n) => n.id)];
+    }
+  }
+  nodesToDrag.forEach(addNodeAndChildren);
+  draggingNodes.value = Array.from(draggedIds);
+  nodesStartPositions.value = /* @__PURE__ */ new Map();
+  draggingNodes.value.forEach((nodeId) => {
+    const n = props.nodes.find((nd) => nd.id === nodeId);
+    if (n) {
+      nodesStartPositions.value.set(nodeId, { ...n.position });
+    }
+  });
+  if (draggingNodes.value.length === 1) {
+    draggingNode.value = node.id;
+    nodeStartPos.value = { ...node.position };
+  } else {
+    draggingNode.value = null;
+  }
+  dragStartPos.value = { x: event.clientX, y: event.clientY };
+  document.addEventListener("mousemove", handleMouseMove);
+  document.addEventListener("mouseup", handleMouseUp);
+};
+const handleMouseMove = (event) => {
+  if (draggingNodes.value.length === 0) return;
+  const rawDx = event.clientX - dragStartPos.value.x;
+  const rawDy = event.clientY - dragStartPos.value.y;
+  if (!hasDragged.value && Math.abs(rawDx) < DRAG_THRESHOLD && Math.abs(rawDy) < DRAG_THRESHOLD)
+    return;
+  if (!hasDragged.value) {
+    hasDragged.value = true;
+    const mainNode = pendingClickNode.value;
+    if (mainNode) emit("node-drag-start", event, mainNode);
+  }
+  const dx = (event.clientX - dragStartPos.value.x) / props.transform.zoom;
+  const dy = (event.clientY - dragStartPos.value.y) / props.transform.zoom;
+  draggingNodes.value.forEach((nodeId) => {
+    const startPos = nodesStartPositions.value.get(nodeId);
+    if (startPos) {
+      const newPosition = {
+        x: startPos.x + dx,
+        y: startPos.y + dy
+      };
+      const node = props.nodes.find((n) => n.id === nodeId);
+      if (node) {
+        emit("node-drag", event, node, newPosition);
+      }
+    }
+  });
+};
+const handleMouseUp = (event) => {
+  if (draggingNodes.value.length > 0) {
+    if (hasDragged.value) {
+      draggingNodes.value.forEach((nodeId) => {
+        const node = props.nodes.find((n) => n.id === nodeId);
+        if (node) {
+          emit("node-drag-end", event, node);
+        }
+      });
+    }
+    draggingNodes.value = [];
+    nodesStartPositions.value = /* @__PURE__ */ new Map();
+  }
+  if (!hasDragged.value && pendingClickNode.value) {
+    emit("node-click", event, pendingClickNode.value);
+  }
+  draggingNode.value = null;
+  pendingClickNode.value = null;
+  pendingClickEvent.value = null;
+  document.removeEventListener("mousemove", handleMouseMove);
+  document.removeEventListener("mouseup", handleMouseUp);
+};
+const handleNodeClick = (_event, _node) => {
+};
+const handleNodeDblClick = (event, node) => {
+  emit("node-dblclick", event, node);
+};
+const handleNodeContextMenu = (event, node) => {
+  emit("node-contextmenu", event, node);
+};
+const handleConnectStart = (event, node, handle) => {
+  emit("connect-start", event, node.id, handle.id || handle.position || "", handle.type);
+};
+</script>
+
+<style scoped>
+.yh-flow-nodes{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.yh-flow-node{background:var(--flow-node-background,#fff);border:1px solid var(--flow-node-border,#1a192b);border-radius:var(--flow-node-border-radius,3px);box-shadow:var(--flow-node-shadow,none);box-sizing:border-box;cursor:pointer;overflow:visible;pointer-events:auto;position:absolute;transition:box-shadow .2s,border-color .2s;-webkit-user-select:none;-moz-user-select:none;user-select:none}.yh-flow-node:hover{box-shadow:0 4px 12px rgba(0,0,0,.05)}.yh-flow-node.is-selected{border-color:var(--flow-node-selected-border,#3b82f6);box-shadow:var(--flow-node-selected-shadow,0 0 0 1px #3b82f6)}.yh-flow-node.is-dragging{cursor:grabbing;opacity:.8}.yh-flow-node.is-hidden{display:none}.yh-flow-node.type-group{background:rgba(248,250,252,.5);border:1px dashed #9ca3af;box-shadow:none}.yh-flow-node.type-group.is-selected{background:rgba(248,250,252,.7);border:1px solid #3b82f6;box-shadow:0 0 0 2px rgba(59,130,246,.2)}.yh-flow-node.type-group:hover{box-shadow:0 0 0 2px rgba(0,0,0,.05)}.yh-flow-node.type-database,.yh-flow-node.type-diamond{background:transparent;border:none;border-radius:0;box-shadow:none}.yh-flow-node.type-database.is-selected,.yh-flow-node.type-diamond.is-selected{border:none;box-shadow:none}.yh-flow-node.type-database:hover,.yh-flow-node.type-diamond:hover{box-shadow:none}.yh-flow-node.type-group .yh-flow-node__content{padding:8px 12px}.yh-flow-node.type-group .yh-flow-node__header{color:#6b7280;font-size:13px}.yh-flow-node__content{height:100%;padding:0}.yh-flow-node__content,.yh-flow-node__header{align-items:center;box-sizing:border-box;display:flex;justify-content:center;width:100%}.yh-flow-node__header{color:var(--flow-node-label-color,#222);font-size:var(--flow-node-label-font-size,12px);font-weight:var(--flow-node-label-font-weight,500);padding:10px;text-align:center}.yh-flow-handle{background:var(--flow-handle-background,#1a192b);border:1px solid var(--flow-handle-border,#fff);border-radius:var(--flow-handle-border-radius,50%);box-sizing:border-box;cursor:crosshair;height:var(--flow-handle-size,6px);position:absolute;transition:background-color .2s,border-color .2s,transform .2s;width:var(--flow-handle-size,6px);z-index:10}.yh-flow-handle:hover,.yh-flow-node.is-selected .yh-flow-handle{background:var(--flow-handle-hover-background,#3b82f6);border-color:var(--flow-handle-border,#fff)}.yh-flow-handle.is-source.position-right,.yh-flow-handle.is-target.position-right{right:-3px;top:50%;transform:translateY(-50%)}.yh-flow-handle.is-source.position-right:hover,.yh-flow-handle.is-target.position-right:hover,.yh-flow-node.is-selected .yh-flow-handle.position-right{transform:translateY(-50%) scale(1.3)}.yh-flow-handle.is-source.position-left,.yh-flow-handle.is-target.position-left{left:-3px;top:50%;transform:translateY(-50%)}.yh-flow-handle.is-source.position-left:hover,.yh-flow-handle.is-target.position-left:hover,.yh-flow-node.is-selected .yh-flow-handle.position-left{transform:translateY(-50%) scale(1.3)}.yh-flow-handle.is-source.position-top,.yh-flow-handle.is-target.position-top{left:50%;top:-3px;transform:translateX(-50%)}.yh-flow-handle.is-source.position-top:hover,.yh-flow-handle.is-target.position-top:hover,.yh-flow-node.is-selected .yh-flow-handle.position-top{transform:translateX(-50%) scale(1.3)}.yh-flow-handle.is-source.position-bottom,.yh-flow-handle.is-target.position-bottom{bottom:-3px;left:50%;transform:translateX(-50%)}.yh-flow-handle.is-source.position-bottom:hover,.yh-flow-handle.is-target.position-bottom:hover,.yh-flow-node.is-selected .yh-flow-handle.position-bottom{transform:translateX(-50%) scale(1.3)}
+</style>

package/dist/renderer/NodeRenderer.vue.d.ts

@@ -0,0 +1,56 @@
+import type { Node, HandleType, NodeTypes } from '../types';
+type __VLS_Props = {
+    nodes: Node[];
+    nodeTypes?: NodeTypes;
+    transform: {
+        x: number;
+        y: number;
+        zoom: number;
+    };
+    draggable?: boolean;
+    connectable?: boolean;
+    readonly?: boolean;
+};
+declare var __VLS_1: {
+    node: any;
+};
+type __VLS_Slots = {} & {
+    node?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "node-click": (event: MouseEvent, node: Node<import("../types").NodeData>) => any;
+    "node-dblclick": (event: MouseEvent, node: Node<import("../types").NodeData>) => any;
+    "node-contextmenu": (event: MouseEvent, node: Node<import("../types").NodeData>) => any;
+    "node-drag-start": (event: MouseEvent, node: Node<import("../types").NodeData>) => any;
+    "node-drag": (event: MouseEvent, node: Node<import("../types").NodeData>, position: {
+        x: number;
+        y: number;
+    }) => any;
+    "node-drag-end": (event: MouseEvent, node: Node<import("../types").NodeData>) => any;
+    "connect-start": (event: MouseEvent, nodeId: string, handleId: string, handleType: HandleType) => any;
+    "node-select-toggle": (nodeId: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onNode-click"?: ((event: MouseEvent, node: Node<import("../types").NodeData>) => any) | undefined;
+    "onNode-dblclick"?: ((event: MouseEvent, node: Node<import("../types").NodeData>) => any) | undefined;
+    "onNode-contextmenu"?: ((event: MouseEvent, node: Node<import("../types").NodeData>) => any) | undefined;
+    "onNode-drag-start"?: ((event: MouseEvent, node: Node<import("../types").NodeData>) => any) | undefined;
+    "onNode-drag"?: ((event: MouseEvent, node: Node<import("../types").NodeData>, position: {
+        x: number;
+        y: number;
+    }) => any) | undefined;
+    "onNode-drag-end"?: ((event: MouseEvent, node: Node<import("../types").NodeData>) => any) | undefined;
+    "onConnect-start"?: ((event: MouseEvent, nodeId: string, handleId: string, handleType: HandleType) => any) | undefined;
+    "onNode-select-toggle"?: ((nodeId: string) => any) | undefined;
+}>, {
+    draggable: boolean;
+    connectable: boolean;
+    nodeTypes: NodeTypes;
+    readonly: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/renderer/SelectionBox.d.vue.ts

@@ -0,0 +1,11 @@
+import type { SelectionRect } from '../types';
+type __VLS_Props = {
+    selectionRect: SelectionRect | null;
+    transform: {
+        x: number;
+        y: number;
+        zoom: number;
+    };
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/renderer/SelectionBox.vue

@@ -0,0 +1,28 @@
+<template>
+  <div v-if="selectionRect" class="yh-flow-selection-box" :style="selectionBoxStyle" />
+</template>
+
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  selectionRect: { type: [Object, null], required: true },
+  transform: { type: Object, required: true }
+});
+const selectionBoxStyle = computed(() => {
+  if (!props.selectionRect) return {};
+  const x = props.selectionRect.x * props.transform.zoom + props.transform.x;
+  const y = props.selectionRect.y * props.transform.zoom + props.transform.y;
+  const width = props.selectionRect.width * props.transform.zoom;
+  const height = props.selectionRect.height * props.transform.zoom;
+  return {
+    left: `${x}px`,
+    top: `${y}px`,
+    width: `${width}px`,
+    height: `${height}px`
+  };
+});
+</script>
+
+<style scoped>
+.yh-flow-selection-box{background:var(--flow-selection-box-background,rgba(64,158,255,.1));border:1px solid var(--flow-selection-box-border,#409eff);pointer-events:none;position:absolute;z-index:1000}
+</style>

package/dist/renderer/SelectionBox.vue.d.ts

@@ -0,0 +1,11 @@
+import type { SelectionRect } from '../types';
+type __VLS_Props = {
+    selectionRect: SelectionRect | null;
+    transform: {
+        x: number;
+        y: number;
+        zoom: number;
+    };
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/types/edge.cjs

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isEdge = isEdge;
+exports.isEdgeType = isEdgeType;
+function isEdge(value) {
+  return !!value && typeof value === "object" && "id" in value && "source" in value && "target" in value;
+}
+function isEdgeType(type) {
+  return ["smoothstep", "step", "bezier", "straight", "default"].includes(type);
+}

package/dist/types/edge.d.ts

@@ -0,0 +1,65 @@
+import type { NodeStyle } from './node';
+export type EdgeType = string | 'smoothstep' | 'step' | 'bezier' | 'straight' | 'default';
+export interface Connection {
+    source: string;
+    target: string;
+    sourceHandle?: string | null;
+    targetHandle?: string | null;
+}
+export interface EdgeStyle {
+    stroke?: string;
+    strokeWidth?: number;
+    strokeDasharray?: string;
+    [key: string]: string | number | undefined;
+}
+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;
+    animationType?: 'dash' | 'dot' | 'taper';
+    label?: string;
+    labelStyle?: NodeStyle;
+    labelShowBg?: boolean;
+    labelBgColor?: string;
+    labelBgPadding?: [number, number];
+    labelBgBorderRadius?: number;
+    style?: EdgeStyle;
+    data?: Data;
+    zIndex?: number;
+    selectable?: boolean;
+    deletable?: boolean;
+    hidden?: boolean;
+    selected?: boolean;
+}
+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 type EdgeUserData = Partial<Omit<Edge, 'id' | 'source' | 'target'>> & {
+    id: string;
+    source: string;
+    target: string;
+};
+export declare function isEdge<T extends Edge>(value: unknown): value is T;
+export declare function isEdgeType(type: string): type is EdgeType;

package/dist/types/edge.mjs

@@ -0,0 +1,6 @@
+export function isEdge(value) {
+  return !!value && typeof value === "object" && "id" in value && "source" in value && "target" in value;
+}
+export function isEdgeType(type) {
+  return ["smoothstep", "step", "bezier", "straight", "default"].includes(type);
+}

package/dist/types/events.cjs

@@ -0,0 +1 @@
+"use strict";

package/dist/types/events.d.ts

@@ -0,0 +1,115 @@
+import type { Node, Edge, ViewportTransform, Connection } from './index';
+export type FlowEventCallback<T = unknown> = (event: T) => void;
+export interface FlowEvents {
+    'node:click': {
+        node: Node;
+        nativeEvent: MouseEvent;
+    };
+    'node:dblclick': {
+        node: Node;
+        nativeEvent: MouseEvent;
+    };
+    'node:dragstart': {
+        node: Node;
+        nativeEvent: MouseEvent;
+    };
+    'node:drag': {
+        node: Node;
+        nativeEvent: MouseEvent;
+        position: {
+            x: number;
+            y: number;
+        };
+    };
+    'node:dragend': {
+        node: Node;
+        nativeEvent: MouseEvent;
+    };
+    'node:selected': {
+        node: Node;
+    };
+    'node:unselected': {
+        node: Node;
+    };
+    'node:contextmenu': {
+        node: Node;
+        nativeEvent: MouseEvent;
+    };
+    'edge:click': {
+        edge: Edge;
+        nativeEvent: MouseEvent;
+    };
+    'edge:dblclick': {
+        edge: Edge;
+        nativeEvent: MouseEvent;
+    };
+    'edge:selected': {
+        edge: Edge;
+    };
+    'edge:unselected': {
+        edge: Edge;
+    };
+    'edge:contextmenu': {
+        edge: Edge;
+        nativeEvent: MouseEvent;
+    };
+    'edge:connect': {
+        connection: Connection;
+    };
+    'edge:update': {
+        edge: Edge;
+        connection: Connection;
+    };
+    'viewport:change': {
+        transform: ViewportTransform;
+    };
+    'selection:change': {
+        selectedNodes: Node[];
+        selectedEdges: Edge[];
+    };
+    'selection:dragstart': {
+        nodes: Node[];
+        edges: Edge[];
+    };
+    'selection:drag': {
+        nodes: Node[];
+        edges: Edge[];
+    };
+    'selection:dragend': {
+        nodes: Node[];
+        edges: Edge[];
+    };
+    'pane:click': {
+        nativeEvent: MouseEvent;
+    };
+    'pane:dblclick': {
+        nativeEvent: MouseEvent;
+    };
+    'pane:contextmenu': {
+        nativeEvent: MouseEvent;
+    };
+    'connect:start': {
+        connection: Connection;
+        nativeEvent: MouseEvent;
+    };
+    'connect:end': {
+        connection: Connection;
+        nativeEvent: MouseEvent;
+    };
+    'connect:cancel': void;
+}
+export type FlowEventKey = keyof FlowEvents;
+export type FlowEventHandler<T extends FlowEventKey> = FlowEvents[T] extends void ? () => void : (event: FlowEvents[T]) => void;
+export interface EventBus {
+    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;
+    once<K extends FlowEventKey>(event: K, handler: FlowEventHandler<K>): void;
+    clear(): void;
+}
+export interface SelectionRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}

package/dist/types/index.cjs

@@ -0,0 +1 @@
+"use strict";