@duxweb/dvha-pro 1.1.29 → 1.1.31

package/dist/esm/components/flowEditor/flowEditor.js

@@ -1,328 +1,237 @@
-import { defineComponent as Y, ref as f, computed as v, watch as q, provide as K, createVNode as o } from "vue";
-import { useTheme as P, useI18n as Q } from "@duxweb/dvha-core";
-import { Background as _ } from "@vue-flow/background";
-import { useVueFlow as ee, VueFlow as te, ConnectionMode as oe, MarkerType as x } from "@vue-flow/core";
-import { useVModel as le } from "@vueuse/core";
-import b from "lodash-es/cloneDeep";
-import { NButton as y } from "naive-ui";
-import "vue3-ace-editor";
-import "ace-builds/src-noconflict/mode-vue";
-import "ace-builds/src-noconflict/mode-javascript";
-import "ace-builds/src-noconflict/mode-html";
-import "ace-builds/src-noconflict/mode-json";
-import "ace-builds/src-noconflict/mode-json5";
-import "ace-builds/src-noconflict/theme-tomorrow_night";
-import "ace-builds/src-noconflict/theme-tomorrow";
-import "ace-builds/src-noconflict/ext-searchbox";
-import "ace-builds/src-noconflict/ext-language_tools";
-import "ace-builds/src-noconflict/mode-snippets";
-import "clsx";
-import { defaultNodes as se } from "./nodes/index.js";
-import { FlowSetting as ae } from "./components/setting.js";
-import { FlowToolbar as re } from "./components/toolbar.js";
-/* empty css          */
-function d() {
-  return {
-    nodes: [],
-    edges: [],
-    globalSettings: {}
-  };
+import { defaultNodes as e } from "./nodes/index.js";
+import { FlowSetting as t } from "./components/setting.js";
+import { FlowToolbar as n } from "./components/toolbar.js";
+import "./components/index.js";
+/* empty css      */
+import { computed as r, createVNode as i, defineComponent as a, provide as o, ref as s, watch as c } from "vue";
+import { useI18n as l, useTheme as u } from "@duxweb/dvha-core";
+import { NButton as d } from "naive-ui";
+import { useVModel as f } from "@vueuse/core";
+import { ConnectionMode as p, MarkerType as m, VueFlow as h, useVueFlow as g } from "@vue-flow/core";
+import _ from "lodash-es/cloneDeep";
+import { Background as v } from "@vue-flow/background";
+function y() {
+	return {
+		nodes: [],
+		edges: [],
+		globalSettings: {}
+	};
 }
-function h(s) {
-  return {
-    ...s,
-    nodes: b(s.nodes ?? []),
-    edges: b(s.edges ?? []),
-    globalSettings: b(s.globalSettings ?? {}),
-    viewport: s.viewport ? {
-      ...s.viewport
-    } : void 0
-  };
+function b(e) {
+	return {
+		...e,
+		nodes: _(e.nodes ?? []),
+		edges: _(e.edges ?? []),
+		globalSettings: _(e.globalSettings ?? {}),
+		viewport: e.viewport ? { ...e.viewport } : void 0
+	};
 }
-const Ne = /* @__PURE__ */ Y({
-  name: "DuxFlowEditor",
-  props: {
-    value: {
-      type: Object,
-      default: () => d()
-    },
-    // 自定义节点
-    customNodes: {
-      type: Object,
-      default: () => ({})
-    },
-    // 节点分类
-    categories: {
-      type: Array,
-      default: () => []
-    },
-    // 编辑器配置
-    config: {
-      type: Object,
-      default: () => ({
-        readonly: !1,
-        showGrid: !0,
-        showControls: !0
-      })
-    },
-    // 保存回调
-    onSave: {
-      type: Function,
-      default: void 0
-    }
-  },
-  emits: ["update:value"],
-  setup(s, {
-    emit: A,
-    slots: u
-  }) {
-    const F = f(), {
-      isDark: N
-    } = P(), {
-      t: V
-    } = Q(), {
-      project: O,
-      vueFlowRef: w,
-      getNodes: T,
-      getEdges: j,
-      setNodes: C,
-      setEdges: S,
-      onNodesChange: G,
-      onEdgesChange: M,
-      onConnect: B,
-      addNodes: H,
-      addEdges: I,
-      fitView: D,
-      zoomIn: R,
-      zoomOut: Z
-    } = ee(), c = v(() => ({
-      ...se,
-      ...s.customNodes
-    })), $ = v(() => {
-      const e = {};
-      return Object.entries(c.value).forEach(([t, l]) => {
-        e[t] = l.component;
-      }), e;
-    }), g = f(!1), a = le(s, "value", A, {
-      eventName: "update:value",
-      passive: !0,
-      deep: !0,
-      defaultValue: d()
-    }), r = f(a.value?.globalSettings || {}), i = v(() => ({
-      ...s.config || {},
-      readonly: s.config?.readonly ?? !1,
-      showGrid: s.config?.showGrid ?? !0,
-      showControls: s.config?.showControls ?? !0
-    })), m = (e) => {
-      const t = a.value ?? d(), l = {
-        ...t,
-        nodes: e?.nodes ?? T.value ?? t.nodes ?? [],
-        edges: e?.edges ?? j.value ?? t.edges ?? [],
-        globalSettings: e?.globalSettings ?? r.value ?? t.globalSettings ?? {}
-      }, n = h(l);
-      g.value = !0, a.value = n;
-    }, k = (e) => {
-      !Array.isArray(e) || e.length === 0 || m();
-    };
-    G(k), M(k);
-    const z = (e) => {
-      const t = e.data?.type || "success", l = {
-        success: {
-          stroke: "#10b981",
-          markerColor: "#10b981"
-        },
-        // 绿色 - 通过
-        error: {
-          stroke: "#ef4444",
-          markerColor: "#ef4444"
-        }
-        // 红色 - 退回
-      }, n = l[t] || l.success;
-      return {
-        ...e,
-        style: {
-          stroke: n.stroke,
-          strokeWidth: 2,
-          ...e.style
-        },
-        markerEnd: {
-          type: x.ArrowClosed,
-          width: 12,
-          height: 12,
-          color: n.markerColor,
-          ...e.markerEnd
-        }
-      };
-    };
-    B((e) => {
-      if (!e) return;
-      const t = {
-        id: `edge-${e.source}-${e.target}-${Date.now()}`,
-        source: e.source,
-        target: e.target,
-        sourceHandle: e.sourceHandle,
-        targetHandle: e.targetHandle,
-        data: {
-          type: "success"
-        },
-        type: "default"
-        // 使用默认贝塞尔曲线
-      }, l = z(t);
-      I([l]), m();
-    });
-    const E = (e) => {
-      const t = e ? h(e) : d();
-      if (Array.isArray(t.nodes) ? C([...t.nodes]) : C([]), Array.isArray(t.edges)) {
-        const l = t.edges.map(z);
-        S(l);
-      } else
-        S([]);
-      r.value = t.globalSettings ? {
-        ...t.globalSettings
-      } : {}, (Array.isArray(t.nodes) && t.nodes.length > 0 || Array.isArray(t.edges) && t.edges.length > 0) && setTimeout(() => {
-        D();
-      }, 100);
-    };
-    q(a, (e) => {
-      if (g.value) {
-        g.value = !1;
-        return;
-      }
-      E(e ?? d());
-    }, {
-      immediate: !0,
-      deep: !0
-    });
-    const p = f(!1), L = (e) => e.source !== e.target, U = (e) => {
-      e.preventDefault(), p.value = !1;
-      const t = e.dataTransfer?.getData("application/vueflow");
-      if (!t) return;
-      const l = JSON.parse(t), n = O({
-        x: e.clientX - (w.value?.getBoundingClientRect().left || 0),
-        y: e.clientY - (w.value?.getBoundingClientRect().top || 0)
-      }), X = {
-        ...l,
-        position: n
-      };
-      H([X]);
-    }, W = (e) => {
-      e.preventDefault(), p.value = !0;
-    }, J = (e) => {
-      e.preventDefault(), p.value = !1;
-    };
-    return K("flowNodes", c), () => o("div", {
-      class: "h-full w-full relative bg-muted rounded-md"
-    }, [o("div", {
-      ref: F,
-      class: "absolute inset-0 w-full h-full",
-      onDrop: U,
-      onDragover: W,
-      onDragleave: J
-    }, [o(te, {
-      class: "w-full h-full",
-      nodeTypes: $.value,
-      fitViewOnInit: !0,
-      defaultEdgeOptions: {
-        type: "default",
-        style: {
-          strokeWidth: 2
-        },
-        markerEnd: {
-          type: x.ArrowClosed,
-          width: 12,
-          height: 12
-        }
-      },
-      nodesDraggable: !i.value.readonly,
-      nodesConnectable: !i.value.readonly,
-      elementsSelectable: !i.value.readonly,
-      connectionMode: oe.Loose,
-      isValidConnection: L,
-      minZoom: 0.1,
-      maxZoom: 1
-    }, {
-      default: () => [i.value.showGrid && o(_, {
-        variant: "dots",
-        gap: 20,
-        size: 1.5,
-        patternColor: N.value ? "rgba(255,255,255, 0.2)" : "rgba(0,0,0, 0.2)"
-      }, null), i.value.showControls && o("div", {
-        class: "absolute bottom-4 left-1/2 transform -translate-x-1/2 flex gap-2 z-10"
-      }, [o(y, {
-        onClick: () => Z(),
-        size: "small",
-        class: "!size-8",
-        secondary: !0
-      }, {
-        icon: () => o("div", {
-          class: "i-tabler:minus size-4"
-        }, null)
-      }), o(y, {
-        onClick: () => D(),
-        size: "small",
-        class: "!size-8",
-        secondary: !0
-      }, {
-        icon: () => o("div", {
-          class: "i-tabler:focus-2 size-4"
-        }, null)
-      }), o(y, {
-        onClick: () => R(),
-        size: "small",
-        class: "!size-8",
-        secondary: !0
-      }, {
-        icon: () => o("div", {
-          class: "i-tabler:plus size-4"
-        }, null)
-      })]), u.toolbar && o("div", {
-        class: "absolute top-4 left-1/2 -translate-x-1/2 z-10"
-      }, [u.toolbar()])]
-    }), p.value && o("div", {
-      class: "absolute inset-0 bg-blue-50/80 border-2 border-dashed border-blue-400 pointer-events-none flex items-center justify-center z-10"
-    }, [o("div", {
-      class: "bg-white px-6 py-3 rounded-lg shadow-xl border border-blue-200"
-    }, [o("div", {
-      class: "flex items-center gap-2 text-blue-600"
-    }, [o("div", {
-      class: "i-tabler:plus"
-    }, null), o("span", {
-      class: "font-medium"
-    }, [V("components.flowEditor.toolbar.releaseToAdd") || ""])])])])]), o("div", {
-      class: "absolute top-4 left-4 z-1 bottom-4"
-    }, [o("div", {
-      class: "h-full bg-default shadow rounded"
-    }, [o(re, {
-      nodes: c.value,
-      categories: s.categories
-    }, null)])]), o("div", {
-      class: "absolute top-4 right-4 bottom-4 z-1"
-    }, [o("div", {
-      class: "h-full bg-default shadow rounded"
-    }, [o(ae, {
-      nodes: c.value,
-      modelValue: a.value,
-      "onUpdate:modelValue": (e, t) => {
-        const l = e ? h(e) : d();
-        g.value = !0, a.value = l, t?.skipApply ? l.globalSettings && (r.value = {
-          ...l.globalSettings
-        }) : E(l);
-      },
-      onSave: s.onSave
-    }, {
-      globalSettings: u.globalSettings ? () => u.globalSettings?.({
-        globalSettings: r.value,
-        updateGlobalSettings: (e) => {
-          r.value = {
-            ...e
-          }, m({
-            globalSettings: r.value
-          });
-        }
-      }) : void 0
-    })])])]);
-  }
+const x = /* @__PURE__ */ a({
+	name: "DuxFlowEditor",
+	props: {
+		value: {
+			type: Object,
+			default: () => y()
+		},
+		customNodes: {
+			type: Object,
+			default: () => ({})
+		},
+		categories: {
+			type: Array,
+			default: () => []
+		},
+		config: {
+			type: Object,
+			default: () => ({
+				readonly: !1,
+				showGrid: !0,
+				showControls: !0
+			})
+		},
+		onSave: {
+			type: Function,
+			default: void 0
+		}
+	},
+	emits: ["update:value"],
+	setup(a, { emit: _, slots: x }) {
+		let S = s(), { isDark: C } = u(), { t: w } = l(), { project: T, vueFlowRef: E, getNodes: D, getEdges: O, setNodes: k, setEdges: A, onNodesChange: j, onEdgesChange: M, onConnect: N, addNodes: P, addEdges: F, fitView: I, zoomIn: L, zoomOut: R } = g(), z = r(() => ({
+			...e,
+			...a.customNodes
+		})), B = r(() => {
+			let e = {};
+			return Object.entries(z.value).forEach(([t, n]) => {
+				e[t] = n.component;
+			}), e;
+		}), V = s(!1), H = f(a, "value", _, {
+			eventName: "update:value",
+			passive: !0,
+			deep: !0,
+			defaultValue: y()
+		}), U = s(H.value?.globalSettings || {}), W = r(() => ({
+			...a.config || {},
+			readonly: a.config?.readonly ?? !1,
+			showGrid: a.config?.showGrid ?? !0,
+			showControls: a.config?.showControls ?? !0
+		})), G = (e) => {
+			let t = H.value ?? y(), n = b({
+				...t,
+				nodes: e?.nodes ?? D.value ?? t.nodes ?? [],
+				edges: e?.edges ?? O.value ?? t.edges ?? [],
+				globalSettings: e?.globalSettings ?? U.value ?? t.globalSettings ?? {}
+			});
+			V.value = !0, H.value = n;
+		}, K = (e) => {
+			!Array.isArray(e) || e.length === 0 || G();
+		};
+		j(K), M(K);
+		let q = (e) => {
+			let t = e.data?.type || "success", n = {
+				success: {
+					stroke: "#10b981",
+					markerColor: "#10b981"
+				},
+				error: {
+					stroke: "#ef4444",
+					markerColor: "#ef4444"
+				}
+			}, r = n[t] || n.success;
+			return {
+				...e,
+				style: {
+					stroke: r.stroke,
+					strokeWidth: 2,
+					...e.style
+				},
+				markerEnd: {
+					type: m.ArrowClosed,
+					width: 12,
+					height: 12,
+					color: r.markerColor,
+					...e.markerEnd
+				}
+			};
+		};
+		N((e) => {
+			e && (F([q({
+				id: `edge-${e.source}-${e.target}-${Date.now()}`,
+				source: e.source,
+				target: e.target,
+				sourceHandle: e.sourceHandle,
+				targetHandle: e.targetHandle,
+				data: { type: "success" },
+				type: "default"
+			})]), G());
+		});
+		let J = (e) => {
+			let t = e ? b(e) : y();
+			Array.isArray(t.nodes) ? k([...t.nodes]) : k([]), Array.isArray(t.edges) ? A(t.edges.map(q)) : A([]), U.value = t.globalSettings ? { ...t.globalSettings } : {}, (Array.isArray(t.nodes) && t.nodes.length > 0 || Array.isArray(t.edges) && t.edges.length > 0) && setTimeout(() => {
+				I();
+			}, 100);
+		};
+		c(H, (e) => {
+			if (V.value) {
+				V.value = !1;
+				return;
+			}
+			J(e ?? y());
+		}, {
+			immediate: !0,
+			deep: !0
+		});
+		let Y = s(!1), X = (e) => e.source !== e.target, Z = (e) => {
+			e.preventDefault(), Y.value = !1;
+			let t = e.dataTransfer?.getData("application/vueflow");
+			if (!t) return;
+			let n = JSON.parse(t), r = T({
+				x: e.clientX - (E.value?.getBoundingClientRect().left || 0),
+				y: e.clientY - (E.value?.getBoundingClientRect().top || 0)
+			});
+			P([{
+				...n,
+				position: r
+			}]);
+		}, Q = (e) => {
+			e.preventDefault(), Y.value = !0;
+		}, $ = (e) => {
+			e.preventDefault(), Y.value = !1;
+		};
+		return o("flowNodes", z), () => i("div", { class: "h-full w-full relative bg-muted rounded-md" }, [
+			i("div", {
+				ref: S,
+				class: "absolute inset-0 w-full h-full",
+				onDrop: Z,
+				onDragover: Q,
+				onDragleave: $
+			}, [i(h, {
+				class: "w-full h-full",
+				nodeTypes: B.value,
+				fitViewOnInit: !0,
+				defaultEdgeOptions: {
+					type: "default",
+					style: { strokeWidth: 2 },
+					markerEnd: {
+						type: m.ArrowClosed,
+						width: 12,
+						height: 12
+					}
+				},
+				nodesDraggable: !W.value.readonly,
+				nodesConnectable: !W.value.readonly,
+				elementsSelectable: !W.value.readonly,
+				connectionMode: p.Loose,
+				isValidConnection: X,
+				minZoom: .1,
+				maxZoom: 1
+			}, { default: () => [
+				W.value.showGrid && i(v, {
+					variant: "dots",
+					gap: 20,
+					size: 1.5,
+					patternColor: C.value ? "rgba(255,255,255, 0.2)" : "rgba(0,0,0, 0.2)"
+				}, null),
+				W.value.showControls && i("div", { class: "absolute bottom-4 left-1/2 transform -translate-x-1/2 flex gap-2 z-10" }, [
+					i(d, {
+						onClick: () => R(),
+						size: "small",
+						class: "!size-8",
+						secondary: !0
+					}, { icon: () => i("div", { class: "i-tabler:minus size-4" }, null) }),
+					i(d, {
+						onClick: () => I(),
+						size: "small",
+						class: "!size-8",
+						secondary: !0
+					}, { icon: () => i("div", { class: "i-tabler:focus-2 size-4" }, null) }),
+					i(d, {
+						onClick: () => L(),
+						size: "small",
+						class: "!size-8",
+						secondary: !0
+					}, { icon: () => i("div", { class: "i-tabler:plus size-4" }, null) })
+				]),
+				x.toolbar && i("div", { class: "absolute top-4 left-1/2 -translate-x-1/2 z-10" }, [x.toolbar()])
+			] }), Y.value && i("div", { class: "absolute inset-0 bg-blue-50/80 border-2 border-dashed border-blue-400 pointer-events-none flex items-center justify-center z-10" }, [i("div", { class: "bg-white px-6 py-3 rounded-lg shadow-xl border border-blue-200" }, [i("div", { class: "flex items-center gap-2 text-blue-600" }, [i("div", { class: "i-tabler:plus" }, null), i("span", { class: "font-medium" }, [w("components.flowEditor.toolbar.releaseToAdd") || ""])])])])]),
+			i("div", { class: "absolute top-4 left-4 z-1 bottom-4" }, [i("div", { class: "h-full bg-default shadow rounded" }, [i(n, {
+				nodes: z.value,
+				categories: a.categories
+			}, null)])]),
+			i("div", { class: "absolute top-4 right-4 bottom-4 z-1" }, [i("div", { class: "h-full bg-default shadow rounded" }, [i(t, {
+				nodes: z.value,
+				modelValue: H.value,
+				"onUpdate:modelValue": (e, t) => {
+					let n = e ? b(e) : y();
+					V.value = !0, H.value = n, t?.skipApply ? n.globalSettings && (U.value = { ...n.globalSettings }) : J(n);
+				},
+				onSave: a.onSave
+			}, { globalSettings: x.globalSettings ? () => x.globalSettings?.({
+				globalSettings: U.value,
+				updateGlobalSettings: (e) => {
+					U.value = { ...e }, G({ globalSettings: U.value });
+				}
+			}) : void 0 })])])
+		]);
+	}
 });
-export {
-  Ne as DuxFlowEditor
-};
+export { x as DuxFlowEditor };

package/dist/esm/components/flowEditor/index.js

@@ -0,0 +1,14 @@
+import "./components/fieldConfig.js";
+import "./components/kvInput.js";
+import "./nodes/endNode.js";
+import "./nodes/processNode.js";
+import "./nodes/startNode.js";
+import "./components/note.js";
+import "./nodes/dynamicNodeFactory.js";
+import "./nodes/index.js";
+import "./components/nodeCard.js";
+import "./components/setting.js";
+import "./components/toolbar.js";
+import "./components/index.js";
+import "./flowEditor.js";
+import "./utils/nodeDataUtils.js";