@web-utils/component 2.0.14 → 2.2.0

package/flow/index.mjs

@@ -0,0 +1,277 @@
+import { s as l, r as c } from "../chunks/util.C2Bhx22L.mjs";
+import { n as u } from "../chunks/vueComponentNormalizer.JwmUNtgn.mjs";
+var h = function() {
+  var t = this, e = t.$createElement, n = t._self._c || e;
+  return n("div", {
+    staticClass: "avue-flow",
+    style: t.styleName
+  }, [n("div", {
+    style: t.styleName,
+    attrs: {
+      id: t.id
+    }
+  }, [n("div", {
+    staticClass: "avue-grid"
+  }), t._l(t.option.nodeList, function(i, o) {
+    return [i.display ? t._e() : n("FlowNode", {
+      key: o,
+      attrs: {
+        id: i.id,
+        node: i,
+        index: o,
+        active: t.active
+      },
+      on: {
+        changeNodeSite: t.changeNodeSite
+      },
+      nativeOn: {
+        click: function(s) {
+          return t.handleClick(i);
+        }
+      },
+      scopedSlots: t._u([{
+        key: "header",
+        fn: function(s) {
+          var a = s.node;
+          return [t._t("header", null, {
+            node: a
+          })];
+        }
+      }], null, !0)
+    }, [t._t("default", null, {
+      node: i
+    })], 2)];
+  })], 2)]);
+}, d = [];
+const f = {
+  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",
+        /* "span"表示标签，".className"表示类，"#id"表示元素id */
+        filterExclude: !1,
+        anchor: "Continuous",
+        allowLoopback: !1
+      },
+      jsplumbTargetOptions: {
+        filter: ".avue-flow__node-drag",
+        /* "span"表示标签，".className"表示类，"#id"表示元素id */
+        filterExclude: !1,
+        anchor: "Continuous",
+        allowLoopback: !1
+      },
+      loadEasyFlowFinish: !1
+    };
+  },
+  computed: {
+    active: {
+      get() {
+        return this.value;
+      },
+      set(t) {
+        this.$emit("input", t), this.$emit("change", t);
+      }
+    },
+    styleName() {
+      return {
+        position: "relative",
+        width: l(this.width),
+        height: l(this.height)
+      };
+    }
+  },
+  created() {
+    this.id = c(), this.jsplumbSetting.Container = this.id;
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    init() {
+      this.jsPlumb = window.jsPlumb.getInstance(), this.$nextTick(() => {
+        this.jsPlumbInit();
+      });
+    },
+    handleClick(t) {
+      this.$emit("click", t);
+    },
+    // 是否具有该线
+    hasLine(t, e) {
+      for (let n = 0; n < this.data.lineList.length; n++) {
+        const i = this.data.lineList[n];
+        if (i.from === t && i.to === e)
+          return !0;
+      }
+      return !1;
+    },
+    // 是否含有相反的线
+    hashOppositeLine(t, e) {
+      return this.hasLine(e, t);
+    },
+    // 删除线
+    deleteLine(t, e) {
+      this.option.lineList = this.option.lineList.filter(function(n) {
+        return n.from !== t && n.to !== e;
+      });
+    },
+    // 改变连线
+    changeLine(t, e) {
+      this.deleteLine(t, e);
+    },
+    // 改变节点的位置
+    changeNodeSite({ index: t, left: e, top: n }) {
+      for (let i = 0; i < this.option.nodeList.length; i++)
+        i === t && (this.$set(this.option.nodeList[i], "left", e), this.$set(this.option.nodeList[i], "top", n));
+    },
+    // 删除节点
+    deleteNode(t) {
+      return this.$confirm(`确定要删除节点${t}?`, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+        closeOnClickModal: !1
+      }).then(() => {
+        this.option.nodeList.forEach((e) => {
+          e.id === t && (e.display = !0);
+        }), this.$nextTick(function() {
+          this.jsPlumb.removeAllEndpoints(t);
+        });
+      }).catch(() => {
+      }), !0;
+    },
+    // 添加新的节点
+    addNode(t) {
+      const e = this.option.nodeList.length, n = `node${e}`;
+      this.option.nodeList.push({
+        id: `node${e}`,
+        name: t,
+        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 t = 0; t < this.option.nodeList.length; t++) {
+        const e = this.option.nodeList[t];
+        this.jsPlumb.makeSource(e.id, this.jsplumbSourceOptions), this.jsPlumb.makeTarget(e.id, this.jsplumbTargetOptions), this.jsPlumb.draggable(e.id);
+      }
+      for (let t = 0; t < this.option.lineList.length; t++) {
+        const e = this.option.lineList[t];
+        this.jsPlumb.connect({
+          source: e.from,
+          target: e.to
+        }, this.jsplumbConnectOptions);
+      }
+      this.$nextTick(function() {
+        this.loadEasyFlowFinish = !0;
+      });
+    },
+    jsPlumbInit() {
+      const t = this;
+      this.jsPlumb.ready(function() {
+        t.jsPlumb.importDefaults(t.jsplumbSetting), t.jsPlumb.setSuspendDrawing(!1, !0), t.loadEasyFlow(), t.jsPlumb.bind("click", function(e) {
+          console.log("click", e), t.$confirm("确定删除所点击的线吗?", "提示", {
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
+            type: "warning"
+          }).then(() => {
+            t.jsPlumb.deleteConnection(e);
+          }).catch(() => {
+          });
+        }), t.jsPlumb.bind("connection", function(e) {
+          console.log("connection", e);
+          const n = e.source.id, i = e.target.id;
+          t.loadEasyFlowFinish && t.option.lineList.push({
+            from: n,
+            to: i
+          });
+        }), t.jsPlumb.bind("connectionDetached", function(e) {
+          console.log("connectionDetached", e), t.deleteLine(e.sourceId, e.targetId);
+        }), t.jsPlumb.bind("connectionMoved", function(e) {
+          console.log("connectionMoved", e), t.changeLine(e.originalSourceId, e.originalTargetId);
+        }), t.jsPlumb.bind("contextmenu", function(e) {
+          console.log("contextmenu", e);
+        }), t.jsPlumb.bind("beforeDrop", function(e) {
+          console.log("beforeDrop", e);
+          const n = e.sourceId, i = e.targetId;
+          return n === i ? (t.$message.error("不能连接自己"), !1) : t.hasLine(n, i) ? (t.$message.error("不能重复连线"), !1) : t.hashOppositeLine(n, i) ? (t.$message.error("不能回环哦"), !1) : !0;
+        }), t.jsPlumb.bind("beforeDetach", function(e) {
+          console.log("beforeDetach", e);
+        });
+      });
+    }
+  }
+}, r = {};
+var m = /* @__PURE__ */ u(
+  f,
+  h,
+  d,
+  !1,
+  p,
+  null,
+  null,
+  null
+);
+function p(t) {
+  for (let e in r)
+    this[e] = r[e];
+}
+const j = /* @__PURE__ */ function() {
+  return m.exports;
+}();
+export {
+  j as default
+};

package/flow/style.css

@@ -0,0 +1 @@
+.avue-flow{position:relative}.avue-flow .avue-draggable{padding:0}.avue-flow__node{box-sizing:border-box;border:1px solid #eee;border-radius:5px;flex-direction:column;width:200px;height:80px;display:flex;position:relative;overflow:hidden;box-shadow:0 0 12px #66a6e0}.avue-flow__node--active{border-width:2px;border-color:#f56c6c}.avue-flow__node-drag{margin:0 5px;display:inline-block}.avue-flow__node-header{background-color:#66a6e0;flex:1}.avue-flow__node-body{text-align:center;background:#fff;flex:1.5;justify-content:center;align-items:center;display:flex}