@yh-ui/flow 0.1.21

package/dist/components/NodeEditPanel.vue

@@ -0,0 +1,214 @@
+<script setup>
+import { ref, watch } from "vue";
+const props = defineProps({
+  node: { type: [Object, null], required: true },
+  visible: { type: Boolean, required: true }
+});
+const emit = defineEmits(["update", "close"]);
+const localNode = ref({
+  label: "",
+  description: ""
+});
+watch(
+  () => props.node,
+  (node) => {
+    if (node) {
+      const data = node.data;
+      const displayLabel = data.label || data.title || data.name || data.text || node.id;
+      localNode.value = {
+        label: String(displayLabel),
+        description: data.description || data.desc || "",
+        labelColor: node.labelColor || "#303133",
+        descriptionColor: node.descriptionColor || "#909399",
+        width: node.width || document.getElementById(`node-${node.id}`)?.offsetWidth || 150,
+        height: node.height || document.getElementById(`node-${node.id}`)?.offsetHeight || 40,
+        type: node.type
+      };
+    }
+  },
+  { immediate: true }
+);
+const updateLabelColor = (color) => {
+  localNode.value.labelColor = color;
+  emit("update", { labelColor: color });
+};
+const updateDescriptionColor = (color) => {
+  localNode.value.descriptionColor = color;
+  emit("update", { descriptionColor: color });
+};
+const updateLabel = () => {
+  if (!props.node) return;
+  const data = { ...props.node.data };
+  if ("label" in data || !("title" in data || "name" in data || "text" in data)) {
+    data.label = localNode.value.label;
+  } else if ("title" in data) {
+    data.title = localNode.value.label;
+  } else if ("name" in data) {
+    data.name = localNode.value.label;
+  } else if ("text" in data) {
+    data.text = localNode.value.label;
+  }
+  emit("update", { data });
+};
+const updateDescription = () => {
+  if (!props.node) return;
+  const data = { ...props.node.data };
+  if ("description" in data || !("desc" in data)) {
+    data.description = localNode.value.description;
+  } else {
+    data.desc = localNode.value.description;
+  }
+  emit("update", { data });
+};
+const updateStyle = (key, value) => {
+  const newStyle = { ...props.node?.style, [key]: value };
+  emit("update", { style: newStyle });
+};
+const updateSize = () => {
+  emit("update", {
+    width: localNode.value.width,
+    height: localNode.value.height
+  });
+};
+const handleClose = () => {
+  emit("close");
+};
+const handleBorderRadius = (event) => {
+  const value = event.target.value;
+  updateStyle("borderRadius", `${value}px`);
+};
+const getBorderColor = () => {
+  const border = props.node?.style?.border;
+  if (typeof border === "string") {
+    const match = border.match(/#(?:[0-9a-fA-F]{3}){1,2}|rgb\(.*?\)|rgba\(.*?\)/);
+    return match ? match[0] : "#dddddd";
+  }
+  return "#dddddd";
+};
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="slide-fade">
+      <div v-if="visible && node" class="node-edit-panel">
+        <div class="panel-header">
+          <span class="panel-title">编辑节点</span>
+          <button class="close-btn" @click="handleClose">×</button>
+        </div>
+
+        <div class="panel-content">
+          <div class="form-group">
+            <label>标签</label>
+            <input
+              v-model="localNode.label"
+              type="text"
+              placeholder="节点标签"
+              @blur="updateLabel"
+              @keyup.enter="updateLabel"
+            />
+          </div>
+
+          <div class="form-group">
+            <label>描述</label>
+            <textarea
+              v-model="localNode.description"
+              placeholder="节点描述"
+              rows="2"
+              @blur="updateDescription"
+            />
+          </div>
+
+          <div class="form-group">
+            <label>尺寸</label>
+            <div class="size-inputs">
+              <input
+                v-model.number="localNode.width"
+                type="number"
+                min="50"
+                max="800"
+                placeholder="宽度"
+                @blur="updateSize"
+              />
+              <span>×</span>
+              <input
+                v-model.number="localNode.height"
+                type="number"
+                min="30"
+                max="600"
+                placeholder="高度"
+                @blur="updateSize"
+              />
+            </div>
+          </div>
+
+          <div class="form-group">
+            <label>背景色</label>
+            <div class="color-picker-row">
+              <input
+                type="color"
+                :value="node.style?.backgroundColor || '#ffffff'"
+                class="modern-color-picker"
+                @input="e => updateStyle('backgroundColor', e.target.value)"
+              />
+              <span class="color-value">{{ node.style?.backgroundColor || "#ffffff" }}</span>
+            </div>
+          </div>
+
+          <div class="form-group">
+            <label>边框颜色</label>
+            <div class="color-picker-row">
+              <input
+                type="color"
+                :value="getBorderColor()"
+                class="modern-color-picker"
+                @input="e => updateStyle('border', `1px solid ${e.target.value}`)"
+              />
+              <span class="color-value">{{ getBorderColor() }}</span>
+            </div>
+          </div>
+
+          <div class="form-group">
+            <label>圆角</label>
+            <input
+              :value="parseInt(String(node.style?.borderRadius || '8'))"
+              type="range"
+              min="0"
+              max="20"
+              @input="handleBorderRadius"
+            />
+          </div>
+
+          <div class="form-group">
+            <label>标签文字颜色</label>
+            <div class="color-picker-row">
+              <input
+                type="color"
+                :value="localNode.labelColor"
+                class="modern-color-picker"
+                @input="e => updateLabelColor(e.target.value)"
+              />
+              <span class="color-value">{{ localNode.labelColor }}</span>
+            </div>
+          </div>
+
+          <div class="form-group">
+            <label>文字描述颜色</label>
+            <div class="color-picker-row">
+              <input
+                type="color"
+                :value="localNode.descriptionColor"
+                class="modern-color-picker"
+                @input="e => updateDescriptionColor(e.target.value)"
+              />
+              <span class="color-value">{{ localNode.descriptionColor }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped>
+.node-edit-panel{background:#fff;border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,.15);position:fixed;right:20px;top:100px;width:280px;z-index:1000}.panel-header{align-items:center;border-bottom:1px solid #eee;display:flex;justify-content:space-between;padding:12px 16px}.panel-title{color:#333;font-size:14px;font-weight:600}.close-btn{background:none;border:none;color:#999;cursor:pointer;font-size:20px;line-height:1;padding:0}.close-btn:hover{color:#333}.panel-content{max-height:70vh;overflow-y:auto;padding:16px}.form-group{margin-bottom:16px}.form-group label{color:#666;display:block;font-size:12px;margin-bottom:6px}.form-group input[type=number],.form-group input[type=text],.form-group textarea{border:1px solid #ddd;border-radius:4px;box-sizing:border-box;font-size:13px;padding:8px 10px;width:100%}.form-group input:focus,.form-group textarea:focus{border-color:#3b82f6;outline:none}.form-group textarea{resize:vertical}.size-inputs{align-items:center;display:flex;gap:8px}.size-inputs input{flex:1}.size-inputs span{color:#999}.color-picker-row{align-items:center;display:flex;gap:12px}.modern-color-picker{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;cursor:pointer;height:36px;padding:0;width:36px}.modern-color-picker::-webkit-color-swatch{border:1px solid #e2e8f0;border-radius:6px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}.modern-color-picker::-moz-color-swatch{border:1px solid #e2e8f0;border-radius:6px}.color-value{color:#64748b;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:13px;text-transform:uppercase}.color-swatch.active{border-color:#3b82f6;box-shadow:0 0 0 2px rgba(59,130,246,.3)}.form-group input[type=range]{width:100%}.slide-fade-enter-active,.slide-fade-leave-active{transition:all .3s ease}.slide-fade-enter-from,.slide-fade-leave-to{opacity:0;transform:translateX(20px)}
+</style>

package/dist/components/NodeEditPanel.vue.d.ts

@@ -0,0 +1,13 @@
+import type { Node, NodeData } from '../types';
+type __VLS_Props = {
+    node: Node | null;
+    visible: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    close: () => any;
+    update: (node: Partial<Node<NodeData>>) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+    onUpdate?: ((node: Partial<Node<NodeData>>) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/edges/BaseEdge.d.vue.ts

@@ -0,0 +1,23 @@
+import type { Position, EdgeStyle } from '../../types';
+interface Props {
+    id: string;
+    sourceX: number;
+    sourceY: number;
+    targetX: number;
+    targetY: number;
+    sourcePosition?: Position;
+    targetPosition?: Position;
+    style?: EdgeStyle;
+    selected?: boolean;
+    animated?: boolean;
+    label?: string;
+}
+declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    label: string;
+    style: EdgeStyle;
+    selected: boolean;
+    animated: boolean;
+    sourcePosition: Position;
+    targetPosition: Position;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/edges/BaseEdge.vue

@@ -0,0 +1,55 @@
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  id: { type: String, required: true },
+  sourceX: { type: Number, required: true },
+  sourceY: { type: Number, required: true },
+  targetX: { type: Number, required: true },
+  targetY: { type: Number, required: true },
+  sourcePosition: { type: String, required: false, default: "right" },
+  targetPosition: { type: String, required: false, default: "left" },
+  style: { type: Object, required: false, default: () => ({}) },
+  selected: { type: Boolean, required: false, default: false },
+  animated: { type: Boolean, required: false, default: false },
+  label: { type: String, required: false, default: "" }
+});
+const path = computed(() => {
+  const { sourceX, sourceY, targetX, targetY } = props;
+  return `M ${sourceX} ${sourceY} L ${targetX} ${targetY}`;
+});
+const pathStyle = computed(() => ({
+  ...props.style,
+  strokeDasharray: props.animated ? "5,5" : void 0,
+  animation: props.animated ? "dash 0.5s linear infinite" : void 0
+}));
+</script>
+
+<template>
+  <g :class="['flow-base-edge', {
+  selected,
+  animated
+}]">
+    <path :d="path" fill="none" :style="pathStyle" stroke-width="2" stroke="#b1b1b7" />
+    <path
+      v-if="label"
+      :d="path"
+      fill="none"
+      stroke="transparent"
+      stroke-width="20"
+      class="flow-edge-label-path"
+    />
+    <foreignObject
+      v-if="label"
+      :x="(sourceX + targetX) / 2 - 30"
+      :y="(sourceY + targetY) / 2 - 10"
+      width="60"
+      height="20"
+    >
+      <div class="flow-edge-label">{{ label }}</div>
+    </foreignObject>
+  </g>
+</template>
+
+<style scoped>
+.flow-edge-label{background:#fff;border-radius:4px;color:#666;font-size:12px;padding:2px 6px;text-align:center}@keyframes dash{to{stroke-dashoffset:-10}}
+</style>

package/dist/components/edges/BaseEdge.vue.d.ts

@@ -0,0 +1,23 @@
+import type { Position, EdgeStyle } from '../../types';
+interface Props {
+    id: string;
+    sourceX: number;
+    sourceY: number;
+    targetX: number;
+    targetY: number;
+    sourcePosition?: Position;
+    targetPosition?: Position;
+    style?: EdgeStyle;
+    selected?: boolean;
+    animated?: boolean;
+    label?: string;
+}
+declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    label: string;
+    style: EdgeStyle;
+    selected: boolean;
+    animated: boolean;
+    sourcePosition: Position;
+    targetPosition: Position;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/edges/BezierEdge.d.vue.ts

@@ -0,0 +1,22 @@
+import type { Position, EdgeStyle } from '../../types';
+interface Props {
+    sourceX: number;
+    sourceY: number;
+    targetX: number;
+    targetY: number;
+    sourcePosition?: Position;
+    targetPosition?: Position;
+    style?: EdgeStyle;
+    selected?: boolean;
+    animated?: boolean;
+    label?: string;
+}
+declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    label: string;
+    style: EdgeStyle;
+    selected: boolean;
+    animated: boolean;
+    sourcePosition: Position;
+    targetPosition: Position;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/edges/BezierEdge.vue

@@ -0,0 +1,57 @@
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  sourceX: { type: Number, required: true },
+  sourceY: { type: Number, required: true },
+  targetX: { type: Number, required: true },
+  targetY: { type: Number, required: true },
+  sourcePosition: { type: String, required: false, default: "right" },
+  targetPosition: { type: String, required: false, default: "left" },
+  style: { type: Object, required: false, default: () => ({}) },
+  selected: { type: Boolean, required: false, default: false },
+  animated: { type: Boolean, required: false, default: false },
+  label: { type: String, required: false, default: "" }
+});
+const path = computed(() => {
+  const { sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition } = props;
+  const curvature = 0.5;
+  let sourceControlX = sourceX;
+  let sourceControlY = sourceY;
+  let targetControlX = targetX;
+  let targetControlY = targetY;
+  const deltaX = Math.abs(targetX - sourceX) * curvature;
+  const deltaY = Math.abs(targetY - sourceY) * curvature;
+  if (sourcePosition === "right") sourceControlX += deltaX;
+  else if (sourcePosition === "left") sourceControlX -= deltaX;
+  else if (sourcePosition === "bottom") sourceControlY += deltaY;
+  else if (sourcePosition === "top") sourceControlY -= deltaY;
+  if (targetPosition === "right") targetControlX += deltaX;
+  else if (targetPosition === "left") targetControlX -= deltaX;
+  else if (targetPosition === "bottom") targetControlY += deltaY;
+  else if (targetPosition === "top") targetControlY -= deltaY;
+  return `M ${sourceX} ${sourceY} C ${sourceControlX} ${sourceControlY}, ${targetControlX} ${targetControlY}, ${targetX} ${targetY}`;
+});
+const centerX = computed(() => (props.sourceX + props.targetX) / 2);
+const centerY = computed(() => (props.sourceY + props.targetY) / 2);
+const pathStyle = computed(() => ({
+  ...props.style,
+  strokeDasharray: props.animated ? "5,5" : void 0,
+  animation: props.animated ? "dash 0.5s linear infinite" : void 0
+}));
+</script>
+
+<template>
+  <g :class="['flow-bezier-edge', {
+  selected,
+  animated
+}]">
+    <path :d="path" fill="none" :style="pathStyle" stroke-width="2" stroke="#b1b1b7" />
+    <foreignObject v-if="label" :x="centerX - 30" :y="centerY - 10" width="60" height="20">
+      <div class="flow-edge-label">{{ label }}</div>
+    </foreignObject>
+  </g>
+</template>
+
+<style scoped>
+.flow-edge-label{background:#fff;border-radius:4px;color:#666;font-size:12px;padding:2px 6px;text-align:center}@keyframes dash{to{stroke-dashoffset:-10}}
+</style>

package/dist/components/edges/BezierEdge.vue.d.ts

@@ -0,0 +1,22 @@
+import type { Position, EdgeStyle } from '../../types';
+interface Props {
+    sourceX: number;
+    sourceY: number;
+    targetX: number;
+    targetY: number;
+    sourcePosition?: Position;
+    targetPosition?: Position;
+    style?: EdgeStyle;
+    selected?: boolean;
+    animated?: boolean;
+    label?: string;
+}
+declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    label: string;
+    style: EdgeStyle;
+    selected: boolean;
+    animated: boolean;
+    sourcePosition: Position;
+    targetPosition: Position;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/edges/DataFlowEdge.d.vue.ts

@@ -0,0 +1,41 @@
+import type { Edge, Position, EdgeStyle } from '../../types';
+export type DataFlowStatus = 'idle' | 'processing' | 'success' | 'error' | 'warning';
+export type DataFlowEffect = 'particles' | 'glow' | 'pulse' | 'wave' | 'none';
+interface Props {
+    /** EdgeRenderer 注入：完整边对象 */
+    edge: Edge;
+    /** EdgeRenderer 注入：预计算 SVG 路径 */
+    path: string;
+    /** EdgeRenderer 注入：源点 X */
+    sourceX: number;
+    /** EdgeRenderer 注入：源点 Y */
+    sourceY: number;
+    /** EdgeRenderer 注入：目标点 X */
+    targetX: number;
+    /** EdgeRenderer 注入：目标点 Y */
+    targetY: number;
+    /** EdgeRenderer 注入：中心 X（用于标签） */
+    labelX?: number;
+    /** EdgeRenderer 注入：中心 Y（用于标签） */
+    labelY?: number;
+    /** EdgeRenderer 注入：边样式 */
+    style?: EdgeStyle;
+    /** EdgeRenderer 注入：线条颜色 */
+    stroke?: string;
+    /** EdgeRenderer 注入：线条宽度 */
+    strokeWidth?: number;
+    /** 源点方向（EdgeRenderer 从 sourceHandle 推导） */
+    sourcePosition?: Position;
+    /** 目标点方向 */
+    targetPosition?: Position;
+}
+declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    style: EdgeStyle;
+    stroke: string;
+    strokeWidth: number;
+    sourcePosition: Position;
+    targetPosition: Position;
+    labelX: number;
+    labelY: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;