@web-utils/component 4.0.15 → 5.0.0-beta01

package/flow/index.mjs

@@ -1,248 +1,240 @@
-import r from "../flow-node/index.mjs";
-import { t as a, s as l } from "../chunks/util.DI42t5GU.mjs";
-import { n as c } from "../chunks/_plugin-vue2_normalizer.CeySl7Fu.mjs";
-const u = {
-  name: "Flow",
-  props: {
-    value: {
-      type: String
-    },
-    option: {
-      type: Object
-    },
-    width: {
-      type: [Number, String],
-      default: "100%"
-    },
-    height: {
-      type: [Number, String],
-      default: "100%"
-    }
-  },
-  data() {
-    return {
-      jsPlumb: {},
-      id: "",
-      // 默认设置参数
-      jsplumbSetting: {
-        // 动态锚点、位置自适应
-        Anchors: [
-          "Top",
-          "TopCenter",
-          "TopRight",
-          "TopLeft",
-          "Right",
-          "RightMiddle",
-          "Bottom",
-          "BottomCenter",
-          "BottomRight",
-          "BottomLeft",
-          "Left",
-          "LeftMiddle"
-        ],
-        Container: "",
-        // 连线的样式 StateMachine、Flowchart
-        Connector: "Flowchart",
-        // 鼠标不能拖动删除线
-        ConnectionsDetachable: !1,
-        // 删除线的时候节点不删除
-        DeleteEndpointsOnDetach: !1,
-        // 连线的端点
-        // Endpoint: ["Dot", {radius: 5}],
-        Endpoint: ["Rectangle", { height: 10, width: 10 }],
-        // 线端点的样式
-        EndpointStyle: { fill: "rgba(255,255,255,0)", outlineWidth: 1 },
-        LogEnabled: !0,
-        // 是否打开jsPlumb的内部日志记录
-        // 绘制线
-        PaintStyle: { stroke: "black", strokeWidth: 3 },
-        // 绘制箭头
-        Overlays: [["Arrow", { width: 12, length: 12, location: 1 }]],
-        RenderMode: "svg"
-      },
-      // jsplumb连接参数
-      jsplumbConnectOptions: {
-        isSource: !0,
-        isTarget: !0,
-        // 动态锚点、提供了4个方向 Continuous、AutoDefault
-        anchor: "Continuous"
-      },
-      jsplumbSourceOptions: {
-        filter: ".avue-flow__node-drag",
-        filterExclude: !1,
-        anchor: "Continuous",
-        allowLoopback: !1
-      },
-      jsplumbTargetOptions: {
-        filter: ".avue-flow__node-drag",
-        filterExclude: !1,
-        anchor: "Continuous",
-        allowLoopback: !1
-      },
-      loadEasyFlowFinish: !1
-    };
-  },
-  computed: {
-    active: {
-      get() {
-        return this.value;
-      },
-      set(e) {
-        this.$emit("input", e), this.$emit("change", e);
-      }
-    },
-    styleName() {
-      return {
-        position: "relative",
-        width: l(this.width),
-        height: l(this.height)
-      };
-    }
-  },
-  created() {
-    this.id = a(), this.jsplumbSetting.Container = this.id;
-  },
-  mounted() {
-    this.init();
-  },
-  methods: {
-    init() {
-      this.jsPlumb = window.jsPlumb.getInstance(), this.$nextTick(() => {
-        this.jsPlumbInit();
-      });
-    },
-    handleClick(e) {
-      this.$emit("click", e);
-    },
-    // 是否具有该线
-    hasLine(e, t) {
-      for (let i = 0; i < this.data.lineList.length; i++) {
-        const n = this.data.lineList[i];
-        if (n.from === e && n.to === t)
-          return !0;
-      }
-      return !1;
-    },
-    // 是否含有相反的线
-    hashOppositeLine(e, t) {
-      return this.hasLine(t, e);
-    },
-    // 删除线
-    deleteLine(e, t) {
-      this.option.lineList = this.option.lineList.filter((i) => i.from !== e && i.to !== t);
-    },
-    // 改变连线
-    changeLine(e, t) {
-      this.deleteLine(e, t);
-    },
-    // 改变节点的位置
-    changeNodeSite({ index: e, left: t, top: i }) {
-      for (let n = 0; n < this.option.nodeList.length; n++)
-        n === e && (this.$set(this.option.nodeList[n], "left", t), this.$set(this.option.nodeList[n], "top", i));
-    },
-    // 删除节点
-    deleteNode(e) {
-      return this.$confirm(`确定要删除节点${e}?`, "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
-        closeOnClickModal: !1
-      }).then(() => {
-        this.option.nodeList.forEach((t) => {
-          t.id === e && (t.display = !0);
-        }), this.$nextTick(function() {
-          this.jsPlumb.removeAllEndpoints(e);
-        });
-      }).catch(() => {
-      }), !0;
-    },
-    // 添加新的节点
-    addNode(e) {
-      const t = this.option.nodeList.length, i = `node${t}`;
-      this.option.nodeList.push({
-        id: `node${t}`,
-        name: e,
-        left: 0,
-        top: 0
-      }), this.$nextTick(function() {
-        this.jsPlumb.makeSource(i, this.jsplumbSourceOptions), this.jsPlumb.makeTarget(i, this.jsplumbTargetOptions), this.jsPlumb.draggable(i, {
-          containment: "parent"
-        });
-      });
-    },
-    loadEasyFlow() {
-      for (let e = 0; e < this.option.nodeList.length; e++) {
-        const t = this.option.nodeList[e];
-        this.jsPlumb.makeSource(t.id, this.jsplumbSourceOptions), this.jsPlumb.makeTarget(t.id, this.jsplumbTargetOptions), this.jsPlumb.draggable(t.id);
-      }
-      for (let e = 0; e < this.option.lineList.length; e++) {
-        const t = this.option.lineList[e];
-        this.jsPlumb.connect(
-          {
-            source: t.from,
-            target: t.to
-          },
-          this.jsplumbConnectOptions
-        );
-      }
-      this.$nextTick(function() {
-        this.loadEasyFlowFinish = !0;
-      });
-    },
-    jsPlumbInit() {
-      const e = this;
-      this.jsPlumb.ready(() => {
-        e.jsPlumb.importDefaults(e.jsplumbSetting), e.jsPlumb.setSuspendDrawing(!1, !0), e.loadEasyFlow(), e.jsPlumb.bind("click", (t) => {
-          console.log("click", t), e.$confirm("确定删除所点击的线吗?", "提示", {
-            confirmButtonText: "确定",
-            cancelButtonText: "取消",
-            type: "warning"
-          }).then(() => {
-            e.jsPlumb.deleteConnection(t);
-          }).catch(() => {
-          });
-        }), e.jsPlumb.bind("connection", (t) => {
-          console.log("connection", t);
-          const i = t.source.id, n = t.target.id;
-          e.loadEasyFlowFinish && e.option.lineList.push({
-            from: i,
-            to: n
-          });
-        }), e.jsPlumb.bind("connectionDetached", (t) => {
-          console.log("connectionDetached", t), e.deleteLine(t.sourceId, t.targetId);
-        }), e.jsPlumb.bind("connectionMoved", (t) => {
-          console.log("connectionMoved", t), e.changeLine(t.originalSourceId, t.originalTargetId);
-        }), e.jsPlumb.bind("contextmenu", (t) => {
-          console.log("contextmenu", t);
-        }), e.jsPlumb.bind("beforeDrop", (t) => {
-          console.log("beforeDrop", t);
-          const i = t.sourceId, n = t.targetId;
-          return i === n ? (e.$message.error("不能连接自己"), !1) : e.hasLine(i, n) ? (e.$message.error("不能重复连线"), !1) : e.hashOppositeLine(i, n) ? (e.$message.error("不能回环哦"), !1) : !0;
-        }), e.jsPlumb.bind("beforeDetach", (t) => {
-          console.log("beforeDetach", t);
-        });
-      });
-    }
-  }
-};
-var h = function() {
-  var t = this, i = t._self._c;
-  return i("div", { staticClass: "avue-flow", style: t.styleName }, [i("div", { style: t.styleName, attrs: { id: t.id } }, [i("div", { staticClass: "avue-grid" }), t._l(t.option.nodeList, function(n, o) {
-    return [n.display ? t._e() : i(r, { key: o, attrs: { id: n.id, node: n, index: o, active: t.active }, on: { changeNodeSite: t.changeNodeSite }, nativeOn: { click: function(s) {
-      return t.handleClick(n);
-    } }, scopedSlots: t._u([{ key: "header", fn: function({ node: s }) {
-      return [t._t("header", null, { node: s })];
-    } }], null, !0) }, [t._t("default", null, { node: n })], 2)];
-  })], 2)]);
-}, d = [], m = /* @__PURE__ */ c(
-  u,
-  h,
-  d,
-  !1,
-  null,
-  null
-);
-const b = m.exports;
-export {
-  b as default
-};
+import { t as e } from "../chunks/_plugin-vue_export-helper.7vrlOII_.mjs";
+import { x as t, y as n } from "../chunks/util.g-WQEec9.mjs";
+import { Fragment as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, normalizeStyle as c, openBlock as l, renderList as u, renderSlot as d, resolveComponent as f, withCtx as p } from "vue";
+//#region src/components/flow/Flow.vue
+var m = {
+	name: "Flow",
+	props: {
+		value: { type: String },
+		option: { type: Object },
+		width: {
+			type: [Number, String],
+			default: "100%"
+		},
+		height: {
+			type: [Number, String],
+			default: "100%"
+		}
+	},
+	data() {
+		return {
+			jsPlumb: {},
+			id: "",
+			jsplumbSetting: {
+				Anchors: [
+					"Top",
+					"TopCenter",
+					"TopRight",
+					"TopLeft",
+					"Right",
+					"RightMiddle",
+					"Bottom",
+					"BottomCenter",
+					"BottomRight",
+					"BottomLeft",
+					"Left",
+					"LeftMiddle"
+				],
+				Container: "",
+				Connector: "Flowchart",
+				ConnectionsDetachable: !1,
+				DeleteEndpointsOnDetach: !1,
+				Endpoint: ["Rectangle", {
+					height: 10,
+					width: 10
+				}],
+				EndpointStyle: {
+					fill: "rgba(255,255,255,0)",
+					outlineWidth: 1
+				},
+				LogEnabled: !0,
+				PaintStyle: {
+					stroke: "black",
+					strokeWidth: 3
+				},
+				Overlays: [["Arrow", {
+					width: 12,
+					length: 12,
+					location: 1
+				}]],
+				RenderMode: "svg"
+			},
+			jsplumbConnectOptions: {
+				isSource: !0,
+				isTarget: !0,
+				anchor: "Continuous"
+			},
+			jsplumbSourceOptions: {
+				filter: ".avue-flow__node-drag",
+				filterExclude: !1,
+				anchor: "Continuous",
+				allowLoopback: !1
+			},
+			jsplumbTargetOptions: {
+				filter: ".avue-flow__node-drag",
+				filterExclude: !1,
+				anchor: "Continuous",
+				allowLoopback: !1
+			},
+			loadEasyFlowFinish: !1
+		};
+	},
+	computed: {
+		active: {
+			get() {
+				return this.value;
+			},
+			set(e) {
+				this.$emit("input", e), this.$emit("change", e);
+			}
+		},
+		styleName() {
+			return {
+				position: "relative",
+				width: t(this.width),
+				height: t(this.height)
+			};
+		}
+	},
+	created() {
+		this.id = n(), this.jsplumbSetting.Container = this.id;
+	},
+	mounted() {
+		this.init();
+	},
+	methods: {
+		init() {
+			this.jsPlumb = window.jsPlumb.getInstance(), this.$nextTick(() => {
+				this.jsPlumbInit();
+			});
+		},
+		handleClick(e) {
+			this.$emit("click", e);
+		},
+		hasLine(e, t) {
+			for (let n = 0; n < this.data.lineList.length; n++) {
+				let r = this.data.lineList[n];
+				if (r.from === e && r.to === t) return !0;
+			}
+			return !1;
+		},
+		hashOppositeLine(e, t) {
+			return this.hasLine(t, e);
+		},
+		deleteLine(e, t) {
+			this.option.lineList = this.option.lineList.filter((n) => n.from !== e && n.to !== t);
+		},
+		changeLine(e, t) {
+			this.deleteLine(e, t);
+		},
+		changeNodeSite({ index: e, left: t, top: n }) {
+			for (let r = 0; r < this.option.nodeList.length; r++) r === e && (this.$set(this.option.nodeList[r], "left", t), this.$set(this.option.nodeList[r], "top", n));
+		},
+		deleteNode(e) {
+			return this.$confirm(`确定要删除节点${e}?`, "提示", {
+				confirmButtonText: "确定",
+				cancelButtonText: "取消",
+				type: "warning",
+				closeOnClickModal: !1
+			}).then(() => {
+				this.option.nodeList.forEach((t) => {
+					t.id === e && (t.display = !0);
+				}), this.$nextTick(function() {
+					this.jsPlumb.removeAllEndpoints(e);
+				});
+			}).catch(() => {}), !0;
+		},
+		addNode(e) {
+			let t = this.option.nodeList.length, n = `node${t}`;
+			this.option.nodeList.push({
+				id: `node${t}`,
+				name: e,
+				left: 0,
+				top: 0
+			}), this.$nextTick(function() {
+				this.jsPlumb.makeSource(n, this.jsplumbSourceOptions), this.jsPlumb.makeTarget(n, this.jsplumbTargetOptions), this.jsPlumb.draggable(n, { containment: "parent" });
+			});
+		},
+		loadEasyFlow() {
+			for (let e = 0; e < this.option.nodeList.length; e++) {
+				let t = this.option.nodeList[e];
+				this.jsPlumb.makeSource(t.id, this.jsplumbSourceOptions), this.jsPlumb.makeTarget(t.id, this.jsplumbTargetOptions), this.jsPlumb.draggable(t.id);
+			}
+			for (let e = 0; e < this.option.lineList.length; e++) {
+				let t = this.option.lineList[e];
+				this.jsPlumb.connect({
+					source: t.from,
+					target: t.to
+				}, this.jsplumbConnectOptions);
+			}
+			this.$nextTick(function() {
+				this.loadEasyFlowFinish = !0;
+			});
+		},
+		jsPlumbInit() {
+			let e = this;
+			this.jsPlumb.ready(() => {
+				e.jsPlumb.importDefaults(e.jsplumbSetting), e.jsPlumb.setSuspendDrawing(!1, !0), e.loadEasyFlow(), e.jsPlumb.bind("click", (t) => {
+					console.log("click", t), e.$confirm("确定删除所点击的线吗?", "提示", {
+						confirmButtonText: "确定",
+						cancelButtonText: "取消",
+						type: "warning"
+					}).then(() => {
+						e.jsPlumb.deleteConnection(t);
+					}).catch(() => {});
+				}), e.jsPlumb.bind("connection", (t) => {
+					console.log("connection", t);
+					let n = t.source.id, r = t.target.id;
+					e.loadEasyFlowFinish && e.option.lineList.push({
+						from: n,
+						to: r
+					});
+				}), e.jsPlumb.bind("connectionDetached", (t) => {
+					console.log("connectionDetached", t), e.deleteLine(t.sourceId, t.targetId);
+				}), e.jsPlumb.bind("connectionMoved", (t) => {
+					console.log("connectionMoved", t), e.changeLine(t.originalSourceId, t.originalTargetId);
+				}), e.jsPlumb.bind("contextmenu", (e) => {
+					console.log("contextmenu", e);
+				}), e.jsPlumb.bind("beforeDrop", (t) => {
+					console.log("beforeDrop", t);
+					let n = t.sourceId, r = t.targetId;
+					return n === r ? (e.$message.error("不能连接自己"), !1) : e.hasLine(n, r) ? (e.$message.error("不能重复连线"), !1) : e.hashOppositeLine(n, r) ? (e.$message.error("不能回环哦"), !1) : !0;
+				}), e.jsPlumb.bind("beforeDetach", (e) => {
+					console.log("beforeDetach", e);
+				});
+			});
+		}
+	}
+}, h = ["id"];
+function g(e, t, n, m, g, _) {
+	let v = f("FlowNode");
+	return l(), o("div", {
+		class: "avue-flow",
+		style: c(_.styleName)
+	}, [s("div", {
+		id: g.id,
+		style: c(_.styleName)
+	}, [t[0] || (t[0] = s("div", { class: "avue-grid" }, null, -1)), (l(!0), o(r, null, u(n.option.nodeList, (t, n) => (l(), o(r, null, [t.display ? a("v-if", !0) : (l(), i(v, {
+		id: t.id,
+		key: n,
+		node: t,
+		index: n,
+		active: _.active,
+		onClick: (e) => _.handleClick(t),
+		onChangeNodeSite: _.changeNodeSite
+	}, {
+		header: p(({ node: t }) => [d(e.$slots, "header", { node: t })]),
+		default: p(() => [d(e.$slots, "default", { node: t })]),
+		_: 2
+	}, 1032, [
+		"id",
+		"node",
+		"index",
+		"active",
+		"onClick",
+		"onChangeNodeSite"
+	]))], 64))), 256))], 12, h)], 4);
+}
+var _ = /* @__PURE__ */ e(m, [["render", g]]);
+//#endregion
+export { _ as default };