@web-utils/component 2.7.20 → 2.7.21

package/dist/components/flow/index.js

@@ -1,49 +1,49 @@
-import { s as l, r as c } from "../../chunks/util.23fe58fb.js";
-import { n as u } from "../../chunks/vueComponentNormalizer.71e2aa87.js";
-var h = function() {
-  var t = this, e = t.$createElement, n = t._self._c || e;
-  return n("div", {
+import { s as setPx, r as randomId } from "../../chunks/util.89913643.js";
+import { n as normalizeComponent } from "../../chunks/vueComponentNormalizer.bf552d98.js";
+var render = function() {
+  var _vm = this, _h = _vm.$createElement, _c = _vm._self._c || _h;
+  return _c("div", {
     staticClass: "avue-flow",
-    style: t.styleName
-  }, [n("div", {
-    style: t.styleName,
+    style: _vm.styleName
+  }, [_c("div", {
+    style: _vm.styleName,
     attrs: {
-      id: t.id
+      id: _vm.id
     }
-  }, [n("div", {
+  }, [_c("div", {
     staticClass: "avue-grid"
-  }), t._l(t.option.nodeList, function(i, o) {
-    return [i.display ? t._e() : n("FlowNode", {
-      key: o,
+  }), _vm._l(_vm.option.nodeList, function(node, index) {
+    return [node.display ? _vm._e() : _c("FlowNode", {
+      key: index,
       attrs: {
-        id: i.id,
-        node: i,
-        index: o,
-        active: t.active
+        id: node.id,
+        node,
+        index,
+        active: _vm.active
       },
       on: {
-        changeNodeSite: t.changeNodeSite
+        changeNodeSite: _vm.changeNodeSite
       },
       nativeOn: {
-        click: function(s) {
-          return t.handleClick(i);
+        click: function($event) {
+          return _vm.handleClick(node);
         }
       },
-      scopedSlots: t._u([{
+      scopedSlots: _vm._u([{
         key: "header",
-        fn: function(s) {
-          var a = s.node;
-          return [t._t("header", null, {
-            node: a
+        fn: function(_ref) {
+          var s = _ref.node;
+          return [_vm._t("header", null, {
+            node: s
           })];
         }
       }], null, !0)
-    }, [t._t("default", null, {
-      node: i
+    }, [_vm._t("default", null, {
+      node
     })], 2)];
   })], 2)]);
-}, d = [];
-const m = {
+}, staticRenderFns = [];
+const __vue2_script = {
   name: "Flow",
   props: {
     value: {
@@ -118,20 +118,20 @@ const m = {
       get() {
         return this.value;
       },
-      set(t) {
-        this.$emit("input", t), this.$emit("change", t);
+      set(val) {
+        this.$emit("input", val), this.$emit("change", val);
       }
     },
     styleName() {
       return {
         position: "relative",
-        width: l(this.width),
-        height: l(this.height)
+        width: setPx(this.width),
+        height: setPx(this.height)
       };
     }
   },
   created() {
-    this.id = c(), this.jsplumbSetting.Container = this.id;
+    this.id = randomId(), this.jsplumbSetting.Container = this.id;
   },
   mounted() {
     this.init();
@@ -142,77 +142,77 @@ const m = {
         this.jsPlumbInit();
       });
     },
-    handleClick(t) {
-      this.$emit("click", t);
+    handleClick(node) {
+      this.$emit("click", node);
     },
     // 是否具有该线
-    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)
+    hasLine(from, to) {
+      for (let i = 0; i < this.data.lineList.length; i++) {
+        const line = this.data.lineList[i];
+        if (line.from === from && line.to === to)
           return !0;
       }
       return !1;
     },
     // 是否含有相反的线
-    hashOppositeLine(t, e) {
-      return this.hasLine(e, t);
+    hashOppositeLine(from, to) {
+      return this.hasLine(to, from);
     },
     // 删除线
-    deleteLine(t, e) {
-      this.option.lineList = this.option.lineList.filter(function(n) {
-        return n.from !== t && n.to !== e;
+    deleteLine(from, to) {
+      this.option.lineList = this.option.lineList.filter(function(line) {
+        return line.from !== from && line.to !== to;
       });
     },
     // 改变连线
-    changeLine(t, e) {
-      this.deleteLine(t, e);
+    changeLine(oldFrom, oldTo) {
+      this.deleteLine(oldFrom, oldTo);
     },
     // 改变节点的位置
-    changeNodeSite({ index: t, left: e, top: n }) {
+    changeNodeSite({ index, left, top }) {
       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));
+        i === index && (this.$set(this.option.nodeList[i], "left", left), this.$set(this.option.nodeList[i], "top", top));
     },
     // 删除节点
-    deleteNode(t) {
-      return this.$confirm(`确定要删除节点${t}?`, "提示", {
+    deleteNode(nodeId) {
+      return this.$confirm(`确定要删除节点${nodeId}?`, "提示", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
         type: "warning",
         closeOnClickModal: !1
       }).then(() => {
-        this.option.nodeList.forEach((e) => {
-          e.id === t && (e.display = !0);
+        this.option.nodeList.forEach((node) => {
+          node.id === nodeId && (node.display = !0);
         }), this.$nextTick(function() {
-          this.jsPlumb.removeAllEndpoints(t);
+          this.jsPlumb.removeAllEndpoints(nodeId);
         });
       }).catch(() => {
       }), !0;
     },
     // 添加新的节点
-    addNode(t) {
-      const e = this.option.nodeList.length, n = `node${e}`;
+    addNode(name) {
+      const index = this.option.nodeList.length, nodeId = `node${index}`;
       this.option.nodeList.push({
-        id: `node${e}`,
-        name: t,
+        id: `node${index}`,
+        name,
         left: 0,
         top: 0
       }), this.$nextTick(function() {
-        this.jsPlumb.makeSource(n, this.jsplumbSourceOptions), this.jsPlumb.makeTarget(n, this.jsplumbTargetOptions), this.jsPlumb.draggable(n, {
+        this.jsPlumb.makeSource(nodeId, this.jsplumbSourceOptions), this.jsPlumb.makeTarget(nodeId, this.jsplumbTargetOptions), this.jsPlumb.draggable(nodeId, {
           containment: "parent"
         });
       });
     },
     loadEasyFlow() {
-      for (var 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 (var i = 0; i < this.option.nodeList.length; i++) {
+        const node = this.option.nodeList[i];
+        this.jsPlumb.makeSource(node.id, this.jsplumbSourceOptions), this.jsPlumb.makeTarget(node.id, this.jsplumbTargetOptions), this.jsPlumb.draggable(node.id);
       }
-      for (var t = 0; t < this.option.lineList.length; t++) {
-        const n = this.option.lineList[t];
+      for (var i = 0; i < this.option.lineList.length; i++) {
+        const line = this.option.lineList[i];
         this.jsPlumb.connect({
-          source: n.from,
-          target: n.to
+          source: line.from,
+          target: line.to
         }, this.jsplumbConnectOptions);
       }
       this.$nextTick(function() {
@@ -220,58 +220,58 @@ const m = {
       });
     },
     jsPlumbInit() {
-      const t = this;
+      const _this = 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("确定删除所点击的线吗?", "提示", {
+        _this.jsPlumb.importDefaults(_this.jsplumbSetting), _this.jsPlumb.setSuspendDrawing(!1, !0), _this.loadEasyFlow(), _this.jsPlumb.bind("click", function(conn) {
+          console.log("click", conn), _this.$confirm("确定删除所点击的线吗?", "提示", {
             confirmButtonText: "确定",
             cancelButtonText: "取消",
             type: "warning"
           }).then(() => {
-            t.jsPlumb.deleteConnection(e);
+            _this.jsPlumb.deleteConnection(conn);
           }).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
+        }), _this.jsPlumb.bind("connection", function(evt) {
+          console.log("connection", evt);
+          const from = evt.source.id, to = evt.target.id;
+          _this.loadEasyFlowFinish && _this.option.lineList.push({
+            from,
+            to
           });
-        }), 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);
+        }), _this.jsPlumb.bind("connectionDetached", function(evt) {
+          console.log("connectionDetached", evt), _this.deleteLine(evt.sourceId, evt.targetId);
+        }), _this.jsPlumb.bind("connectionMoved", function(evt) {
+          console.log("connectionMoved", evt), _this.changeLine(evt.originalSourceId, evt.originalTargetId);
+        }), _this.jsPlumb.bind("contextmenu", function(evt) {
+          console.log("contextmenu", evt);
+        }), _this.jsPlumb.bind("beforeDrop", function(evt) {
+          console.log("beforeDrop", evt);
+          const from = evt.sourceId, to = evt.targetId;
+          return from === to ? (_this.$message.error("不能连接自己"), !1) : _this.hasLine(from, to) ? (_this.$message.error("不能重复连线"), !1) : _this.hashOppositeLine(from, to) ? (_this.$message.error("不能回环哦"), !1) : !0;
+        }), _this.jsPlumb.bind("beforeDetach", function(evt) {
+          console.log("beforeDetach", evt);
         });
       });
     }
   }
-}, r = {};
-var f = /* @__PURE__ */ u(
-  m,
-  h,
-  d,
+}, __cssModules = {};
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  __vue2_script,
+  render,
+  staticRenderFns,
   !1,
-  p,
+  __vue2_injectStyles,
   null,
   null,
   null
 );
-function p(t) {
-  for (let e in r)
-    this[e] = r[e];
+function __vue2_injectStyles(context) {
+  for (let o in __cssModules)
+    this[o] = __cssModules[o];
 }
-const j = /* @__PURE__ */ function() {
-  return f.exports;
+const Flow = /* @__PURE__ */ function() {
+  return __component__.exports;
 }();
 export {
-  j as default
+  Flow as default
 };

package/dist/components/flow/style.css

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

package/dist/components/flow-node/index.js

@@ -1,39 +1,39 @@
-import { s as n } from "../../chunks/util.23fe58fb.js";
-import { n as r } from "../../chunks/vueComponentNormalizer.71e2aa87.js";
-var l = function() {
-  var e = this, o = e.$createElement, t = e._self._c || o;
-  return t("div", {
+import { s as setPx } from "../../chunks/util.89913643.js";
+import { n as normalizeComponent } from "../../chunks/vueComponentNormalizer.bf552d98.js";
+var render = function() {
+  var _vm = this, _h = _vm.$createElement, _c = _vm._self._c || _h;
+  return _c("div", {
     ref: "node",
-    style: e.flowNodeContainer,
+    style: _vm.flowNodeContainer,
     attrs: {
-      left: e.node.left,
-      top: e.node.top,
+      left: _vm.node.left,
+      top: _vm.node.top,
       disabled: "",
       mask: !1
     },
     on: {
-      mouseenter: e.showDelete,
-      mouseleave: e.hideDelete,
-      mouseup: e.changeNodeSite
+      mouseenter: _vm.showDelete,
+      mouseleave: _vm.hideDelete,
+      mouseup: _vm.changeNodeSite
     }
-  }, [t("div", {
+  }, [_c("div", {
     class: ["avue-flow__node", {
-      active: e.active === e.node.id
+      active: _vm.active === _vm.node.id
     }]
-  }, [t("div", {
+  }, [_c("div", {
     staticClass: "avue-flow__node-header"
-  }, [t("i", {
+  }, [_c("i", {
     staticClass: "el-icon-rank",
-    class: e.b("node-drag")
-  }), e._t("header", null, {
-    node: e.node
-  })], 2), t("div", {
+    class: _vm.b("node-drag")
+  }), _vm._t("header", null, {
+    node: _vm.node
+  })], 2), _c("div", {
     staticClass: "avue-flow__node-body"
-  }, [e._t("default", null, {
-    node: e.node
+  }, [_vm._t("default", null, {
+    node: _vm.node
   })], 2)])]);
-}, a = [];
-const i = {
+}, staticRenderFns = [];
+const __vue2_script = {
   name: "FlowNode",
   props: {
     active: [String, Number],
@@ -53,8 +53,8 @@ const i = {
         return {
           position: "absolute",
           width: "200px",
-          top: n(this.node.top),
-          left: n(this.node.left),
+          top: setPx(this.node.top),
+          left: setPx(this.node.left),
           boxShadow: this.mouseEnter ? "#66a6e0 0px 0px 12px 0px" : "",
           backgroundColor: "transparent"
         };
@@ -79,24 +79,24 @@ const i = {
       });
     }
   }
-}, s = {};
-var d = /* @__PURE__ */ r(
-  i,
-  l,
-  a,
+}, __cssModules = {};
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  __vue2_script,
+  render,
+  staticRenderFns,
   !1,
-  u,
+  __vue2_injectStyles,
   null,
   null,
   null
 );
-function u(e) {
-  for (let o in s)
-    this[o] = s[o];
+function __vue2_injectStyles(context) {
+  for (let o in __cssModules)
+    this[o] = __cssModules[o];
 }
-const p = /* @__PURE__ */ function() {
-  return d.exports;
+const FlowNode = /* @__PURE__ */ function() {
+  return __component__.exports;
 }();
 export {
-  p as default
+  FlowNode as default
 };

package/dist/components/flow-viewer/index.js

@@ -0,0 +1,135 @@
+import BpmnViewer from "bpmn-js/lib/NavigatedViewer";
+import ZoomScroll from "diagram-js/lib/navigation/zoomscroll/ZoomScroll";
+import { n as normalizeComponent } from "../../chunks/vueComponentNormalizer.bf552d98.js";
+var render = function() {
+  var _vm = this, _h = _vm.$createElement, _c = _vm._self._c || _h;
+  return _c("div", {
+    ref: "container",
+    staticClass: "flow-viewer"
+  }, [_c("EasyPopup", {
+    ref: "popup"
+  }, [_vm._t("default", function() {
+    return [_vm._v(" " + _vm._s(_vm.element) + " ")];
+  }, {
+    element: _vm.element
+  })], 2)], 1);
+}, staticRenderFns = [];
+const handleWheel = ZoomScroll.prototype._handleWheel;
+ZoomScroll.prototype._handleWheel = function(e) {
+  const { target, deltaMode, clientX, clientY, deltaX, deltaY } = e;
+  handleWheel.call(this, {
+    target,
+    deltaMode,
+    clientX,
+    clientY,
+    deltaX,
+    deltaY,
+    preventDefault() {
+      e.preventDefault();
+    },
+    ctrlKey: !0
+  });
+};
+const ZoomScrollModule = {
+  __init__: ["zoomScroll"],
+  zoomScroll: ["type", ZoomScroll]
+}, __vue2_script = {
+  name: "FlowViewer",
+  props: {
+    xml: {
+      type: String,
+      required: !0
+    },
+    options: {
+      type: Object
+    },
+    activities: {
+      type: Array,
+      default: () => []
+    },
+    flows: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      element: null
+    };
+  },
+  watch: {
+    xml(val) {
+      var _a;
+      (_a = this.bpmnViewer) == null || _a.importXML(val);
+    },
+    activities: "highlightActivity",
+    flows: "highlightFlow"
+  },
+  mounted() {
+    var _a;
+    const container = this.$refs.container;
+    this.bpmnViewer = new BpmnViewer({
+      ...this.options,
+      container,
+      additionalModules: [ZoomScrollModule]
+    }), this.bpmnViewer.on("import.done", (event) => {
+      const error = event.error, warnings = event.warnings;
+      error ? this.$emit("error", error) : this.$emit("shown", warnings), this.bpmnViewer.get("canvas").zoom("fit-viewport", "center");
+      const eventBus = this.bpmnViewer.get("eventBus");
+      this.canvas = this.bpmnViewer.get("canvas"), eventBus.on("element.mousemove", async (e) => {
+        e.element.type === "bpmn:UserTask" && (this.element = e.element, await this.$nextTick(), this.$refs.popup.show(e.originalEvent));
+      }), eventBus.on("element.out", () => {
+        this.$refs.popup.hide(), this.element = {};
+      }), this.highlightFlow(this.flows), this.highlightActivity(this.activities);
+    }), (_a = this.bpmnViewer) == null || _a.importXML(this.xml);
+  },
+  beforeDestroy() {
+    var _a;
+    (_a = this.bpmnViewer) == null || _a.destroy();
+  },
+  methods: {
+    getElementById(id) {
+      return this.canvas.getRootElement().children.find((value) => value.id === id);
+    },
+    highlightFlow(flows) {
+      this.canvas.getRootElement().children.filter((value) => value.type === "bpmn:SequenceFlow" && this.canvas.hasMarker(value, "highlight-line")).forEach((value) => {
+        var _a;
+        return (_a = this.canvas) == null ? void 0 : _a.removeMarker(value, "highlight-line");
+      }), flows.length > 0 && flows.forEach((value) => {
+        var _a;
+        const element = this.getElementById(value);
+        element && ((_a = this.canvas) == null || _a.addMarker(element, "highlight-line"));
+      });
+    },
+    highlightActivity(activities) {
+      this.canvas.getRootElement().children.filter((value) => value.type === "bpmn:UserTask" && this.canvas.hasMarker(value, "highlight")).forEach((value) => {
+        var _a;
+        return (_a = this.canvas) == null ? void 0 : _a.removeMarker(value, "highlight");
+      }), activities.length > 0 && activities.forEach((value) => {
+        var _a;
+        const element = this.getElementById(value);
+        element && ((_a = this.canvas) == null || _a.addMarker(element, "highlight"));
+      });
+    }
+  }
+}, __cssModules = {};
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  __vue2_script,
+  render,
+  staticRenderFns,
+  !1,
+  __vue2_injectStyles,
+  null,
+  null,
+  null
+);
+function __vue2_injectStyles(context) {
+  for (let o in __cssModules)
+    this[o] = __cssModules[o];
+}
+const FlowViewer = /* @__PURE__ */ function() {
+  return __component__.exports;
+}();
+export {
+  FlowViewer as default
+};

package/dist/components/flow-viewer/style.css

@@ -0,0 +1,13 @@
+.flow-viewer {
+  width: 100%;
+  height: 400px;
+}
+.flow-viewer .highlight:not(.djs-connection) .djs-visual > :nth-child(1) {
+  fill: #fbe9d1 !important;
+}
+.flow-viewer .highlight g.djs-visual > :nth-child(1) {
+  stroke: #d67e7d !important;
+}
+.flow-viewer .highlight-line g.djs-visual > :nth-child(1) {
+  stroke: #00be00 !important;
+}