@yh-ui/flow 0.1.21

package/dist/renderer/FlowBackground.vue

@@ -0,0 +1,82 @@
+<template>
+  <!--
+    ★ 性能优化背景：
+    - 不依赖 Vue 响应式，改由父组件手动调用 update(viewport) 驱动
+    - SVG pattern：只改 x/y/width/height 属性，浏览器不需要重绘
+  -->
+  <svg ref="svgRef" class="yh-flow-background" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+      <pattern
+        ref="patternRef"
+        :id="patternId"
+        x="0"
+        y="0"
+        :width="patternSize"
+        :height="patternSize"
+        patternUnits="userSpaceOnUse"
+      >
+        <template v-if="type === 'dots'">
+          <circle
+            ref="dotRef"
+            :cx="patternSize / 2"
+            :cy="patternSize / 2"
+            r="1"
+            :fill="color || '#b1b1b7'"
+          />
+        </template>
+        <template v-else-if="type === 'grid'">
+          <path
+            ref="gridPathRef"
+            :d="`M ${patternSize} 0 L 0 0 0 ${patternSize}`"
+            fill="none"
+            :stroke="color || '#e5e7eb'"
+            stroke-width="0.5"
+          />
+        </template>
+      </pattern>
+    </defs>
+    <rect width="100%" height="100%" :fill="`url(#${patternId})`" />
+  </svg>
+</template>
+
+<script setup>
+import { ref, getCurrentInstance } from "vue";
+const props = defineProps({
+  type: { type: String, required: false },
+  color: { type: String, required: false },
+  gap: { type: Number, required: false }
+});
+const uid = getCurrentInstance()?.uid ?? Math.random().toString(36).slice(2);
+const patternId = `yh-bg-pattern-${uid}`;
+const svgRef = ref();
+const patternRef = ref();
+const dotRef = ref();
+const gridPathRef = ref();
+const INITIAL_GAP = props.gap || 20;
+const patternSize = INITIAL_GAP;
+function updateViewport(t) {
+  const pattern = patternRef.value;
+  if (!pattern) return;
+  const gap = props.gap || 20;
+  const scaledGap = gap * t.zoom;
+  const ox = t.x % scaledGap;
+  const oy = t.y % scaledGap;
+  pattern.setAttribute("x", String(ox));
+  pattern.setAttribute("y", String(oy));
+  pattern.setAttribute("width", String(scaledGap));
+  pattern.setAttribute("height", String(scaledGap));
+  if (props.type === "dots" && dotRef.value) {
+    const half = scaledGap / 2;
+    dotRef.value.setAttribute("cx", String(half));
+    dotRef.value.setAttribute("cy", String(half));
+    dotRef.value.setAttribute("r", String(Math.max(0.8, 1.5 * t.zoom)));
+  } else if (props.type === "grid" && gridPathRef.value) {
+    gridPathRef.value.setAttribute("d", `M ${scaledGap} 0 L 0 0 0 ${scaledGap}`);
+  }
+}
+defineExpose({ updateViewport });
+</script>
+
+<style scoped>
+.yh-flow-background{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:0}
+</style>

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

@@ -0,0 +1,11 @@
+import type { ViewportTransform } from '../types';
+type __VLS_Props = {
+    type?: 'dots' | 'grid';
+    color?: string;
+    gap?: number;
+};
+declare function updateViewport(t: ViewportTransform): void;
+declare const _default: import("vue").DefineComponent<__VLS_Props, {
+    updateViewport: typeof updateViewport;
+}, {}, {}, {}, 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/Minimap.d.vue.ts

@@ -0,0 +1,30 @@
+import type { Node } from '../types';
+type __VLS_Props = {
+    nodeColor?: string | ((node: Node) => string);
+    nodeStrokeColor?: string | ((node: Node) => string);
+    nodeStrokeWidth?: number;
+    maskColor?: string;
+    maskStrokeColor?: string;
+    maskStrokeWidth?: number;
+    width?: number;
+    height?: number;
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    pannable?: boolean;
+    zoomable?: boolean;
+    /** Enable interactive click-to-navigate */
+    interactive?: boolean;
+    /** Show layout control buttons */
+    showLayoutControls?: boolean;
+    /** Current layout type */
+    layoutType?: 'dagre' | 'elk' | 'force' | 'grid' | 'none';
+    /** Layout direction */
+    layoutDirection?: 'TB' | 'BT' | 'LR' | 'RL';
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    layoutChange: (layout: "none" | "dagre" | "elk" | "force" | "grid") => any;
+    directionChange: (direction: "TB" | "BT" | "LR" | "RL") => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onLayoutChange?: ((layout: "none" | "dagre" | "elk" | "force" | "grid") => any) | undefined;
+    onDirectionChange?: ((direction: "TB" | "BT" | "LR" | "RL") => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/renderer/Minimap.vue

@@ -0,0 +1,290 @@
+<template>
+  <div
+    class="yh-flow-minimap"
+    :class="[position]"
+    :style="{
+  width: cW + 'px',
+  height: cH + 'px'
+}"
+    @mousedown.stop="handleMouseDown"
+  >
+    <!-- Canvas：绘制节点+连线（静态部分，节点变化才重绘） -->
+    <canvas ref="canvasRef" :width="cW" :height="cH" class="yh-flow-minimap__canvas" />
+    <!-- SVG：视口框 -->
+    <svg
+      ref="svgRef"
+      class="yh-flow-minimap__vp"
+      :width="cW"
+      :height="cH"
+      :viewBox="`0 0 ${cW} ${cH}`"
+      :style="{
+  background: props.maskColor || 'transparent'
+}"
+    >
+      <rect
+        ref="vpRectEl"
+        x="0"
+        y="0"
+        width="20"
+        height="20"
+        :fill="props.maskColor || 'rgba(59,130,246,0.08)'"
+        :stroke="props.maskStrokeColor || '#3b82f6'"
+        :stroke-width="props.maskStrokeWidth || 1.2"
+        rx="2"
+        class="yh-flow-minimap__rect"
+      />
+    </svg>
+
+    <!-- Layout Controls (optional) -->
+    <div v-if="props.showLayoutControls" class="yh-flow-minimap__layout-controls">
+      <button
+        class="layout-btn"
+        :class="{
+  active: props.layoutType === 'dagre'
+}"
+        title="Dagre Layout"
+        @click.stop="emit('layoutChange', 'dagre')"
+      >
+        D
+      </button>
+      <button
+        class="layout-btn"
+        :class="{
+  active: props.layoutType === 'elk'
+}"
+        title="ELK Layout"
+        @click.stop="emit('layoutChange', 'elk')"
+      >
+        E
+      </button>
+      <button
+        class="layout-btn"
+        :class="{
+  active: props.layoutType === 'force'
+}"
+        title="Force Layout"
+        @click.stop="emit('layoutChange', 'force')"
+      >
+        F
+      </button>
+      <button
+        class="layout-btn"
+        :class="{
+  active: props.layoutDirection === 'TB'
+}"
+        title="Top to Bottom"
+        @click.stop="emit('directionChange', 'TB')"
+      >
+        TB
+      </button>
+      <button
+        class="layout-btn"
+        :class="{
+  active: props.layoutDirection === 'LR'
+}"
+        title="Left to Right"
+        @click.stop="emit('directionChange', 'LR')"
+      >
+        LR
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted, onBeforeUnmount } from "vue";
+import { useFlowContext } from "../core/FlowContext";
+const props = defineProps({
+  nodeColor: { type: [String, Function], required: false },
+  nodeStrokeColor: { type: [String, Function], required: false },
+  nodeStrokeWidth: { type: Number, required: false },
+  maskColor: { type: String, required: false },
+  maskStrokeColor: { type: String, required: false },
+  maskStrokeWidth: { type: Number, required: false },
+  width: { type: Number, required: false },
+  height: { type: Number, required: false },
+  position: { type: String, required: false },
+  pannable: { type: Boolean, required: false },
+  zoomable: { type: Boolean, required: false },
+  interactive: { type: Boolean, required: false },
+  showLayoutControls: { type: Boolean, required: false },
+  layoutType: { type: String, required: false },
+  layoutDirection: { type: String, required: false }
+});
+const emit = defineEmits(["layoutChange", "directionChange"]);
+const cW = computed(() => props.width || 200);
+const cH = computed(() => props.height || 150);
+const canvasRef = ref();
+const vpRectEl = ref();
+const flowInstance = useFlowContext();
+const nodes = flowInstance.nodes;
+const edges = flowInstance.edges;
+const viewport = flowInstance.viewport;
+let _mapScale = 1;
+let _minX = 0;
+let _minY = 0;
+let _offsetX = 0;
+let _offsetY = 0;
+const computeGraphBounds = () => {
+  const currentNodes = nodes.value;
+  if (!currentNodes.length) return { minX: 0, minY: 0, maxX: 1, maxY: 1 };
+  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+  for (let i = 0; i < currentNodes.length; i++) {
+    const n = currentNodes[i];
+    if (n.hidden) continue;
+    const nw = n.width || 120;
+    const nh = n.height || 50;
+    if (n.position.x < minX) minX = n.position.x;
+    if (n.position.y < minY) minY = n.position.y;
+    if (n.position.x + nw > maxX) maxX = n.position.x + nw;
+    if (n.position.y + nh > maxY) maxY = n.position.y + nh;
+  }
+  if (minX === Infinity) return { minX: 0, minY: 0, maxX: 1, maxY: 1 };
+  return { minX, minY, maxX, maxY };
+};
+const toMX = (x) => (x - _minX) * _mapScale + _offsetX;
+const toMY = (y) => (y - _minY) * _mapScale + _offsetY;
+const drawCanvas = () => {
+  const canvas = canvasRef.value;
+  if (!canvas) return;
+  const ctx = canvas.getContext("2d", { alpha: true });
+  if (!ctx) return;
+  const b = computeGraphBounds();
+  _minX = b.minX;
+  _minY = b.minY;
+  const gW = b.maxX - b.minX || 1;
+  const gH = b.maxY - b.minY || 1;
+  const pad = 4;
+  _mapScale = Math.min((cW.value - pad * 2) / gW, (cH.value - pad * 2) / gH);
+  _offsetX = (cW.value - gW * _mapScale) / 2;
+  _offsetY = (cH.value - gH * _mapScale) / 2;
+  ctx.clearRect(0, 0, cW.value, cH.value);
+  if (!nodes.value.length) {
+    updateVpRect(viewport.value);
+    return;
+  }
+  const nodeMap = /* @__PURE__ */ new Map();
+  nodes.value.forEach((n) => nodeMap.set(n.id, n));
+  const rootStyles = getComputedStyle(canvas);
+  const themeEdgeColor = rootStyles.getPropertyValue("--flow-edge-stroke").trim() || "#94a3b8";
+  const themeMinimapNodeColor = rootStyles.getPropertyValue("--flow-minimap-node-color").trim() || "#cbd5e1";
+  const themeAccentColor = rootStyles.getPropertyValue("--flow-node-selected-border").trim() || "#3b82f6";
+  ctx.strokeStyle = themeEdgeColor;
+  ctx.lineWidth = 1.2;
+  ctx.globalAlpha = 0.5;
+  ctx.beginPath();
+  edges.value.forEach((e) => {
+    if (e.hidden) return;
+    const src = nodeMap.get(e.source);
+    const tgt = nodeMap.get(e.target);
+    if (!src || !tgt) return;
+    ctx.moveTo(
+      toMX(src.position.x + (src.width || 120) / 2),
+      toMY(src.position.y + (src.height || 50) / 2)
+    );
+    ctx.lineTo(
+      toMX(tgt.position.x + (tgt.width || 120) / 2),
+      toMY(tgt.position.y + (tgt.height || 50) / 2)
+    );
+  });
+  ctx.stroke();
+  ctx.globalAlpha = 0.85;
+  nodes.value.forEach((n) => {
+    if (n.hidden) return;
+    let color = n.selected ? themeAccentColor : themeMinimapNodeColor;
+    if (!n.selected && props.nodeColor) {
+      color = typeof props.nodeColor === "function" ? props.nodeColor(n) : props.nodeColor;
+    }
+    ctx.fillStyle = color;
+    const nw = Math.max((n.width || 120) * _mapScale, 3);
+    const nh = Math.max((n.height || 50) * _mapScale, 3);
+    const nx = toMX(n.position.x);
+    const ny = toMY(n.position.y);
+    ctx.fillRect(nx, ny, nw, nh);
+    if (props.nodeStrokeWidth || props.nodeStrokeColor) {
+      let strokeColor = "#94a3b8";
+      if (props.nodeStrokeColor) {
+        strokeColor = typeof props.nodeStrokeColor === "function" ? props.nodeStrokeColor(n) : props.nodeStrokeColor;
+      }
+      ctx.strokeStyle = strokeColor;
+      ctx.lineWidth = props.nodeStrokeWidth || 0.5;
+      ctx.strokeRect(nx, ny, nw, nh);
+    }
+  });
+  ctx.globalAlpha = 1;
+  updateVpRect(viewport.value);
+};
+const updateVpRect = (vp) => {
+  const el = vpRectEl.value;
+  if (!el || !_mapScale) return;
+  const container = flowInstance.$el;
+  const containerW = container?.clientWidth || 800;
+  const containerH = container?.clientHeight || 600;
+  const canvasLeft = -vp.x / vp.zoom;
+  const canvasTop = -vp.y / vp.zoom;
+  const canvasW = containerW / vp.zoom;
+  const canvasH = containerH / vp.zoom;
+  const rx = (canvasLeft - _minX) * _mapScale + _offsetX;
+  const ry = (canvasTop - _minY) * _mapScale + _offsetY;
+  const rw = Math.max(canvasW * _mapScale, 2);
+  const rh = Math.max(canvasH * _mapScale, 2);
+  el.setAttribute("x", String(rx));
+  el.setAttribute("y", String(ry));
+  el.setAttribute("width", String(rw));
+  el.setAttribute("height", String(rh));
+};
+let isDragging = false;
+const handleMouseMove = (e) => {
+  if (!isDragging || props.pannable === false) return;
+  const rect = canvasRef.value?.getBoundingClientRect();
+  if (!rect) return;
+  const mx = e.clientX - rect.left;
+  const my = e.clientY - rect.top;
+  const canvasX = (mx - _offsetX) / _mapScale + _minX;
+  const canvasY = (my - _offsetY) / _mapScale + _minY;
+  const zoom = viewport.value.zoom;
+  const container = flowInstance.$el;
+  const containerW = container?.clientWidth || 800;
+  const containerH = container?.clientHeight || 600;
+  const newX = containerW / 2 - canvasX * zoom;
+  const newY = containerH / 2 - canvasY * zoom;
+  flowInstance.setViewport({ x: newX, y: newY, zoom });
+};
+const handleMouseUp = () => {
+  isDragging = false;
+  document.removeEventListener("mousemove", handleMouseMove);
+  document.removeEventListener("mouseup", handleMouseUp);
+};
+const handleMouseDown = (e) => {
+  if (props.interactive && !isDragging) {
+    const rect = canvasRef.value?.getBoundingClientRect();
+    if (rect) {
+      const mx = e.clientX - rect.left;
+      const my = e.clientY - rect.top;
+      const canvasX = (mx - _offsetX) / _mapScale + _minX;
+      const canvasY = (my - _offsetY) / _mapScale + _minY;
+      const zoom = viewport.value.zoom;
+      const container = flowInstance.$el;
+      const containerW = container?.clientWidth || 800;
+      const containerH = container?.clientHeight || 600;
+      const newX = containerW / 2 - canvasX * zoom;
+      const newY = containerH / 2 - canvasY * zoom;
+      flowInstance.setViewport({ x: newX, y: newY, zoom });
+    }
+    return;
+  }
+  if (props.pannable === false) return;
+  isDragging = true;
+  handleMouseMove(e);
+  document.addEventListener("mousemove", handleMouseMove);
+  document.addEventListener("mouseup", handleMouseUp);
+};
+onMounted(drawCanvas);
+onBeforeUnmount(handleMouseUp);
+watch([nodes, edges], drawCanvas, { deep: true, flush: "post" });
+watch(viewport, (vp) => updateVpRect(vp), { flush: "sync" });
+</script>
+
+<style scoped>
+.yh-flow-minimap{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background:var(--flow-minimap-background,hsla(0,0%,100%,.75));border:1px solid var(--flow-minimap-viewport-border,rgba(0,0,0,.08));border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.04);cursor:crosshair;overflow:hidden;pointer-events:auto;position:absolute;transition:transform .2s cubic-bezier(.4,0,.2,1);z-index:10}.yh-flow-minimap:hover{transform:scale(1.02)}.yh-flow-minimap.bottom-right{bottom:16px;right:16px}.yh-flow-minimap.top-right{right:16px;top:16px}.yh-flow-minimap.bottom-left{bottom:16px;left:16px}.yh-flow-minimap.top-left{left:16px;top:16px}.yh-flow-minimap__canvas,.yh-flow-minimap__vp{display:block;left:0;position:absolute;top:0}.yh-flow-minimap__vp{pointer-events:none}.yh-flow-minimap__rect{filter:drop-shadow(0 0 2px rgba(59,130,246,.3));transition:all .1s ease-out}.yh-flow-minimap__layout-controls{background:hsla(0,0%,100%,.9);border-radius:4px;bottom:4px;box-shadow:0 1px 3px rgba(0,0,0,.1);display:flex;gap:2px;left:4px;padding:2px;position:absolute}.layout-btn{background:transparent;border:none;border-radius:2px;color:#64748b;cursor:pointer;font-size:9px;font-weight:600;height:18px;transition:all .15s;width:20px}.layout-btn:hover{background:rgba(59,130,246,.1);color:#3b82f6}.layout-btn.active{background:#3b82f6;color:#fff}
+</style>

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

@@ -0,0 +1,30 @@
+import type { Node } from '../types';
+type __VLS_Props = {
+    nodeColor?: string | ((node: Node) => string);
+    nodeStrokeColor?: string | ((node: Node) => string);
+    nodeStrokeWidth?: number;
+    maskColor?: string;
+    maskStrokeColor?: string;
+    maskStrokeWidth?: number;
+    width?: number;
+    height?: number;
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    pannable?: boolean;
+    zoomable?: boolean;
+    /** Enable interactive click-to-navigate */
+    interactive?: boolean;
+    /** Show layout control buttons */
+    showLayoutControls?: boolean;
+    /** Current layout type */
+    layoutType?: 'dagre' | 'elk' | 'force' | 'grid' | 'none';
+    /** Layout direction */
+    layoutDirection?: 'TB' | 'BT' | 'LR' | 'RL';
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    layoutChange: (layout: "none" | "dagre" | "elk" | "force" | "grid") => any;
+    directionChange: (direction: "TB" | "BT" | "LR" | "RL") => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onLayoutChange?: ((layout: "none" | "dagre" | "elk" | "force" | "grid") => any) | undefined;
+    onDirectionChange?: ((direction: "TB" | "BT" | "LR" | "RL") => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/renderer/NodeRenderer.d.vue.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;
+    };
+};