@web-utils/component 4.0.15 → 5.0.0-beta01

package/flow-designer/style.css

@@ -1 +1 @@
-.element-listeners-drawer .el-drawer__header{margin-bottom:0}.element-multi-instance .el-select{display:block}.flow-tips-list-item{list-style:inside square}.flow-tips-title{padding-top:10px;padding-bottom:10px}.flow-tips-keyword{font-weight:700}.process-panel__container{box-sizing:border-box;border-left:1px solid #eee;max-height:100%;padding:0 8px;transition:width .25s ease-in;overflow:hidden auto;box-shadow:0 0 8px #ccc}.process-panel__container.hide:hover{background-color:#e8f4ff}.process-panel__container.show{overflow-x:auto}.process-panel__container .open-properties-handel{color:#606266;text-align:center;cursor:pointer;font-size:20px}.process-panel__container .open-properties-handel:hover{color:#1682e6}.process-panel__container .element-property{align-items:flex-start;width:100%;margin:8px 0;display:flex}.process-panel__container .element-property .element-property__label{box-sizing:border-box;text-align:right;width:90px;padding-right:12px;font-size:14px;line-height:32px;display:block;overflow:hidden}.process-panel__container .element-property .element-property__value{flex:1;line-height:32px}.process-panel__container .element-property .el-form-item{width:100%;margin-bottom:0;padding-bottom:18px}.process-panel__container .list-property{flex-direction:column}.process-panel__container .list-property .element-listener-item{grid-column-gap:8px;grid-template-columns:16px auto 32px 32px;width:100%;display:inline-grid}.process-panel__container .list-property .element-listener-item+.element-listener-item{margin-top:8px}.process-panel__container .el-collapse-item__content{padding-bottom:0}.process-panel__container .el-input.is-disabled .el-input__inner{color:#999}.process-panel__container .el-form-item.el-form-item--mini{margin-bottom:0}.process-panel__container .el-form-item.el-form-item--mini+.el-form-item{margin-top:16px}.process-panel__container .el-select{display:block}.panel-tab__title{padding:0 8px;font-size:1.1em;font-weight:600;line-height:1.2em}.panel-tab__title i{margin-right:8px;font-size:1.2em}.panel-tab__content{box-sizing:border-box;border-top:1px solid #eee;width:100%;padding:8px 16px}.panel-tab__content .panel-tab__content--title{justify-content:space-between;padding-bottom:8px;display:flex}.panel-tab__content .panel-tab__content--title span{text-align:left;flex:1}.listener-filed__title{justify-content:space-between;align-items:center;width:100%;margin-top:0;display:inline-flex}.listener-filed__title span{text-align:left;width:200px;font-size:14px}.listener-filed__title i{margin-right:8px}.element-drawer__button{justify-content:space-around;width:100%;margin-top:8px;display:inline-flex}.element-drawer__button>.el-button{width:100%}.flow-drawer .el-drawer__body{padding:10px}.flow-drawer .listener-filed__title{justify-content:normal;padding-bottom:6px}.flow-drawer .el-select,.flow-dialog .el-select{display:block}.my-process-designer{box-sizing:border-box;flex-direction:column;flex:1;width:100%;height:100%;display:flex}.my-process-designer .bts-toggle-mode{display:none}.my-process-designer .djs-palette.open .djs-palette-entries div[class^=bpmn-icon-]:before,.my-process-designer .djs-palette.open .djs-palette-entries div[class*=bpmn-icon-]:before{line-height:unset}.my-process-designer .djs-palette.open .djs-palette-entries div.entry{position:relative}.my-process-designer .djs-palette.open .djs-palette-entries div.entry:hover:after{z-index:100;box-sizing:border-box;font-variant:normal;text-transform:none;width:max-content;-webkit-text-decoration:inherit;text-decoration:inherit;vertical-align:text-bottom;content:attr(title);background:#fafafa;border:1px solid #ccc;border-radius:4px;padding:0 16px;font-size:.5em;display:inline-block;position:absolute;top:0;bottom:0;right:-10px;overflow:hidden;transform:translate(100%);box-shadow:0 0 6px #eee}.my-process-designer .my-process-designer__header{width:100%;min-height:36px}.my-process-designer .my-process-designer__header .el-button{text-align:center}.my-process-designer .my-process-designer__header .el-button-group{margin:4px}.my-process-designer .my-process-designer__header .el-tooltip__popper .el-button{text-align:left;width:100%;padding-left:8px;padding-right:8px}.my-process-designer .my-process-designer__header .el-tooltip__popper .el-button:hover{color:#fff;background:#409effcc}.my-process-designer .my-process-designer__header .align{position:relative}.my-process-designer .my-process-designer__header .align i:after{content:"|";position:absolute;transform:rotate(90deg)translate(200%,60%)}.my-process-designer .my-process-designer__header .align.align-left i{transform:rotate(90deg)}.my-process-designer .my-process-designer__header .align.align-right i{transform:rotate(-90deg)}.my-process-designer .my-process-designer__header .align.align-top i{transform:rotate(180deg)}.my-process-designer .my-process-designer__header .align.align-bottom i{transform:rotate(0)}.my-process-designer .my-process-designer__header .align.align-center i{transform:rotate(90deg)}.my-process-designer .my-process-designer__header .align.align-center i:after{transform:rotate(90deg)translateY(60%)}.my-process-designer .my-process-designer__header .align.align-middle i{transform:rotate(0)}.my-process-designer .my-process-designer__header .align.align-middle i:after{transform:rotate(90deg)translateY(60%)}.my-process-designer .my-process-designer__container{flex:1;width:100%;display:inline-flex}.my-process-designer .my-process-designer__container .my-process-designer__canvas{flex:1;height:100%;position:relative}.my-process-designer .my-process-designer__container .my-process-designer__canvas div.toggle-mode{display:none}.my-process-designer .my-process-designer__container .my-process-designer__property-panel{z-index:10;height:100%;overflow:scroll auto}.my-process-designer .my-process-designer__container .my-process-designer__property-panel *{box-sizing:border-box}.flow-designer{background-color:#fff;width:100%;height:100%;display:flex}
+.process-panel__container{box-sizing:border-box;border-left:1px solid #eee;max-height:100%;padding:0 8px;transition:width .25s ease-in;overflow:hidden auto;box-shadow:0 0 8px #ccc}.process-panel__container.hide:hover{background-color:#e8f4ff}.process-panel__container.show{overflow-x:auto}.process-panel__container .open-properties-handel{color:#606266;text-align:center;cursor:pointer;font-size:20px}.process-panel__container .open-properties-handel:hover{color:#1682e6}.process-panel__container .element-property{align-items:flex-start;width:100%;margin:8px 0;display:flex}.process-panel__container .element-property .element-property__label{box-sizing:border-box;text-align:right;width:90px;padding-right:12px;font-size:14px;line-height:32px;display:block;overflow:hidden}.process-panel__container .element-property .element-property__value{flex:1;line-height:32px}.process-panel__container .element-property .el-form-item{width:100%;margin-bottom:0;padding-bottom:18px}.process-panel__container .list-property{flex-direction:column}.process-panel__container .list-property .element-listener-item{grid-column-gap:8px;grid-template-columns:16px auto 32px 32px;width:100%;display:inline-grid}.process-panel__container .list-property .element-listener-item+.element-listener-item{margin-top:8px}.process-panel__container .el-collapse-item__content{padding-bottom:0}.process-panel__container .el-input.is-disabled .el-input__inner{color:#999}.process-panel__container .el-form-item.el-form-item--mini{margin-bottom:0}.process-panel__container .el-form-item.el-form-item--mini+.el-form-item{margin-top:16px}.process-panel__container .el-select{display:block}.panel-tab__title{padding:0 8px;font-size:1.1em;font-weight:600;line-height:1.2em}.panel-tab__title i{margin-right:8px;font-size:1.2em}.panel-tab__content{box-sizing:border-box;border-top:1px solid #eee;width:100%;padding:8px 16px}.panel-tab__content .panel-tab__content--title{justify-content:space-between;padding-bottom:8px;display:flex}.panel-tab__content .panel-tab__content--title span{text-align:left;flex:1}.listener-filed__title{justify-content:space-between;align-items:center;width:100%;margin-top:0;display:inline-flex}.listener-filed__title span{text-align:left;width:200px;font-size:14px}.listener-filed__title i{margin-right:8px}.element-drawer__button{justify-content:space-around;width:100%;margin-top:8px;display:inline-flex}.element-drawer__button>.el-button{width:100%}.flow-drawer .el-drawer__body{padding:10px}.flow-drawer .listener-filed__title{justify-content:normal;padding-bottom:6px}.flow-drawer .el-select,.flow-dialog .el-select{display:block}.my-process-designer{box-sizing:border-box;flex-direction:column;flex:1;width:100%;height:100%;display:flex}.my-process-designer .bts-toggle-mode{display:none}.my-process-designer .djs-palette.open .djs-palette-entries div[class^=bpmn-icon-]:before,.my-process-designer .djs-palette.open .djs-palette-entries div[class*=bpmn-icon-]:before{line-height:unset}.my-process-designer .djs-palette.open .djs-palette-entries div.entry{position:relative}.my-process-designer .djs-palette.open .djs-palette-entries div.entry:hover:after{z-index:100;box-sizing:border-box;font-variant:normal;text-transform:none;width:max-content;-webkit-text-decoration:inherit;text-decoration:inherit;vertical-align:text-bottom;content:attr(title);background:#fafafa;border:1px solid #ccc;border-radius:4px;padding:0 16px;font-size:.5em;display:inline-block;position:absolute;top:0;bottom:0;right:-10px;overflow:hidden;transform:translate(100%);box-shadow:0 0 6px #eee}.my-process-designer .my-process-designer__header{width:100%;min-height:36px}.my-process-designer .my-process-designer__header .el-button{text-align:center}.my-process-designer .my-process-designer__header .el-button-group{margin:4px}.my-process-designer .my-process-designer__header .el-tooltip__popper .el-button{text-align:left;width:100%;padding-left:8px;padding-right:8px}.my-process-designer .my-process-designer__header .el-tooltip__popper .el-button:hover{color:#fff;background:#409effcc}.my-process-designer .my-process-designer__header .align{position:relative}.my-process-designer .my-process-designer__header .align i:after{content:"|";position:absolute;transform:rotate(90deg)translate(200%,60%)}.my-process-designer .my-process-designer__header .align.align-left i{transform:rotate(90deg)}.my-process-designer .my-process-designer__header .align.align-right i{transform:rotate(-90deg)}.my-process-designer .my-process-designer__header .align.align-top i{transform:rotate(180deg)}.my-process-designer .my-process-designer__header .align.align-bottom i{transform:rotate(0)}.my-process-designer .my-process-designer__header .align.align-center i{transform:rotate(90deg)}.my-process-designer .my-process-designer__header .align.align-center i:after{transform:rotate(90deg)translateY(60%)}.my-process-designer .my-process-designer__header .align.align-middle i{transform:rotate(0)}.my-process-designer .my-process-designer__header .align.align-middle i:after{transform:rotate(90deg)translateY(60%)}.my-process-designer .my-process-designer__container{flex:1;width:100%;display:inline-flex}.my-process-designer .my-process-designer__container .my-process-designer__canvas{flex:1;height:100%;position:relative}.my-process-designer .my-process-designer__container .my-process-designer__canvas div.toggle-mode{display:none}.my-process-designer .my-process-designer__container .my-process-designer__property-panel{z-index:10;height:100%;overflow:scroll auto}.my-process-designer .my-process-designer__container .my-process-designer__property-panel *{box-sizing:border-box}.flow-designer{background-color:#fff;width:100%;height:100%;display:flex}

package/flow-node/index.mjs

@@ -1,64 +1,56 @@
-import { s as o } from "../chunks/util.DI42t5GU.mjs";
-import { n as s } from "../chunks/_plugin-vue2_normalizer.CeySl7Fu.mjs";
-const n = {
-  name: "FlowNode",
-  props: {
-    active: [String, Number],
-    index: [String, Number],
-    node: Object
-  },
-  data() {
-    return {
-      // 控制节点操作显示
-      mouseEnter: !1
-    };
-  },
-  computed: {
-    // 节点容器样式
-    flowNodeContainer: {
-      get() {
-        return {
-          position: "absolute",
-          width: "200px",
-          top: o(this.node.top),
-          left: o(this.node.left),
-          boxShadow: this.mouseEnter ? "#66a6e0 0px 0px 12px 0px" : "",
-          backgroundColor: "transparent"
-        };
-      }
-    }
-  },
-  methods: {
-    // 鼠标进入
-    showDelete() {
-      this.mouseEnter = !0;
-    },
-    // 鼠标离开
-    hideDelete() {
-      this.mouseEnter = !1;
-    },
-    // 鼠标移动后抬起
-    changeNodeSite() {
-      this.node.left === this.$refs.node.style.left && this.node.top === this.$refs.node.style.top || this.$emit("changeNodeSite", {
-        index: this.index,
-        left: Number(this.$refs.node.style.left.replace("px", "")),
-        top: Number(this.$refs.node.style.top.replace("px", ""))
-      });
-    }
-  }
-};
-var d = function() {
-  var e = this, t = e._self._c;
-  return t("div", { ref: "node", style: e.flowNodeContainer, attrs: { left: e.node.left, top: e.node.top, disabled: "", mask: !1 }, on: { mouseenter: e.showDelete, mouseleave: e.hideDelete, mouseup: e.changeNodeSite } }, [t("div", { class: ["avue-flow__node", { active: e.active === e.node.id }] }, [t("div", { staticClass: "avue-flow__node-header" }, [t("i", { staticClass: "el-icon-rank", class: e.b("node-drag") }), e._t("header", null, { node: e.node })], 2), t("div", { staticClass: "avue-flow__node-body" }, [e._t("default", null, { node: e.node })], 2)])]);
-}, r = [], a = /* @__PURE__ */ s(
-  n,
-  d,
-  r,
-  !1,
-  null,
-  null
-);
-const u = a.exports;
-export {
-  u as default
-};
+import { t as e } from "../chunks/_plugin-vue_export-helper.7vrlOII_.mjs";
+import { x as t } from "../chunks/util.g-WQEec9.mjs";
+import { createElementBlock as n, createElementVNode as r, normalizeClass as i, normalizeStyle as a, openBlock as o, renderSlot as s } from "vue";
+//#region src/components/flow/FlowNode.vue
+var c = {
+	name: "FlowNode",
+	props: {
+		active: [String, Number],
+		index: [String, Number],
+		node: Object
+	},
+	data() {
+		return { mouseEnter: !1 };
+	},
+	computed: { flowNodeContainer: { get() {
+		return {
+			position: "absolute",
+			width: "200px",
+			top: t(this.node.top),
+			left: t(this.node.left),
+			boxShadow: this.mouseEnter ? "#66a6e0 0px 0px 12px 0px" : "",
+			backgroundColor: "transparent"
+		};
+	} } },
+	methods: {
+		showDelete() {
+			this.mouseEnter = !0;
+		},
+		hideDelete() {
+			this.mouseEnter = !1;
+		},
+		changeNodeSite() {
+			this.node.left === this.$refs.node.style.left && this.node.top === this.$refs.node.style.top || this.$emit("changeNodeSite", {
+				index: this.index,
+				left: Number(this.$refs.node.style.left.replace("px", "")),
+				top: Number(this.$refs.node.style.top.replace("px", ""))
+			});
+		}
+	}
+}, l = ["left", "top"], u = { class: "avue-flow__node-header" }, d = { class: "avue-flow__node-body" };
+function f(e, t, c, f, p, m) {
+	return o(), n("div", {
+		ref: "node",
+		style: a(m.flowNodeContainer),
+		left: c.node.left,
+		top: c.node.top,
+		disabled: "",
+		mask: !1,
+		onMouseenter: t[0] || (t[0] = (...e) => m.showDelete && m.showDelete(...e)),
+		onMouseleave: t[1] || (t[1] = (...e) => m.hideDelete && m.hideDelete(...e)),
+		onMouseup: t[2] || (t[2] = (...e) => m.changeNodeSite && m.changeNodeSite(...e))
+	}, [r("div", { class: i(["avue-flow__node", { active: c.active === c.node.id }]) }, [r("div", u, [r("i", { class: i(["el-icon-rank", e.b("node-drag")]) }, null, 2), s(e.$slots, "header", { node: c.node })]), r("div", d, [s(e.$slots, "default", { node: c.node })])], 2)], 44, l);
+}
+var p = /* @__PURE__ */ e(c, [["render", f]]);
+//#endregion
+export { p as default };

package/flow-viewer/index.mjs

@@ -1,158 +1,160 @@
-import g from "../easy-popup/index.mjs";
-import w from "bpmn-js/lib/NavigatedViewer";
-import c from "diagram-js/lib/navigation/zoomscroll/ZoomScroll";
-import { create as l, attr as a, append as p } from "tiny-svg";
-import { query as y } from "min-dom";
-import "../easy-popup/style.css";
-import { n as v } from "../chunks/_plugin-vue2_normalizer.CeySl7Fu.mjs";
-const m = c.prototype._handleWheel, k = {
-  __init__: ["zoomScroll"],
-  zoomScroll: ["type", c]
-}, _ = {
-  name: "FlowViewer",
-  components: {
-    EasyPopup: g
-  },
-  props: {
-    xml: {
-      type: String,
-      required: !0
-    },
-    options: {
-      type: Object
-    },
-    activities: {
-      type: Array,
-      default: () => []
-    },
-    historicActivities: {
-      type: Array,
-      default: () => []
-    },
-    highlightColor: {
-      type: String,
-      default: "rgb(0 190 0 / 100%)"
-    },
-    ctrlKey: Boolean,
-    nodePopup: Boolean,
-    events: Array
-  },
-  data() {
-    return {
-      element: null
-    };
-  },
-  watch: {
-    xml(i) {
-      var e;
-      (e = this.bpmnViewer) == null || e.importXML(i);
-    }
-  },
-  mounted() {
-    c.prototype._handleWheel = this.ctrlKey ? m : function(i) {
-      const { target: e, deltaMode: t, clientX: o, clientY: n, deltaX: h, deltaY: s } = i;
-      m.call(this, {
-        target: e,
-        deltaMode: t,
-        clientX: o,
-        clientY: n,
-        deltaX: h,
-        deltaY: s,
-        preventDefault() {
-          i.preventDefault();
-        },
-        ctrlKey: !0
-      });
-    }, this.bpmnViewer = new w({
-      ...this.options,
-      container: this.$refs.container,
-      additionalModules: [k]
-    }), this.bpmnViewer.on("import.done", (i) => {
-      const e = i.error, t = i.warnings;
-      e ? this.$emit("error", e) : this.$emit("shown", t), this.canvas = this.bpmnViewer.get("canvas"), this.fitViewportCenter(), this.elementRegistry = this.bpmnViewer.get("elementRegistry");
-      const o = this.bpmnViewer.get("eventBus");
-      this.events && this.events.forEach((r) => {
-        o.on(r, (u) => {
-          this.$emit(r.replace(".", "-"), u.element);
-        });
-      }), this.nodePopup && o.on("element.mousemove", (r) => {
-        r.element.type === "bpmn:UserTask" && requestAnimationFrame(async () => {
-          this.element = r.element, await this.$nextTick(), this.$refs.popup.show(r.originalEvent);
-        });
-      }), this.nodePopup && o.on("element.out", () => {
-        this.$refs.popup.hide(), this.element = {};
-      }), this.highlightFlow(this.historicActivities, this.activities);
-      const n = l("marker");
-      a(n, {
-        id: "sequenceflow-arrow-green",
-        viewBox: "0 0 20 20",
-        refX: "11",
-        refY: "10",
-        markerWidth: "10",
-        markerHeight: "10",
-        orient: "auto"
-      });
-      const h = l("path");
-      a(h, {
-        d: "M 1 5 L 11 10 L 1 15 Z",
-        style: "stroke-linecap: round; stroke-linejoin: round; stroke: var(--highlight-color); stroke-width: 1px; fill: var(--highlight-color);"
-      }), p(n, h);
-      const s = l("marker");
-      a(s, {
-        id: "conditional-default-flow-marker-green",
-        viewBox: "0 0 20 20",
-        refX: "0",
-        refY: "10",
-        markerWidth: "10",
-        markerHeight: "10",
-        orient: "auto"
-      });
-      const d = l("path");
-      a(d, {
-        d: "M 6 4 L 10 16",
-        style: "stroke-linecap: round; stroke-linejoin: round; stroke: var(--highlight-color); stroke-width: 2px; fill: var(--highlight-color);"
-      }), p(s, d);
-      const f = y("defs", this.$el);
-      p(f, n), p(f, s);
-    }), this.bpmnViewer.importXML(this.xml), this.$watch(
-      () => ({
-        activities: this.activities,
-        historicActivities: this.historicActivities
-      }),
-      ({ activities: i, historicActivities: e }) => {
-        this.highlightFlow(e, i);
-      }
-    );
-  },
-  beforeDestroy() {
-    var i;
-    c.prototype._handleWheel = m, (i = this.bpmnViewer) == null || i.destroy();
-  },
-  methods: {
-    fitViewportCenter(i = "center") {
-      this.canvas.zoom("fit-viewport", i);
-    },
-    highlightFlow(i, e) {
-      this.elementRegistry.getAll().forEach((t) => {
-        ["bpmn:StartEvent", "bpmn:UserTask", "bpmn:ExclusiveGateway", "bpmn:ParallelGateway", "bpmn:EndEvent"].includes(t.type) && (i.includes(t.id) && !e.includes(t.id) ? this.canvas.addMarker(t, "highlight") : this.canvas.removeMarker(t, "highlight")), t.type === "bpmn:SequenceFlow" && (i.includes(t.id) ? this.canvas.addMarker(t, "highlight-line") : this.canvas.removeMarker(t, "highlight-line")), t.type === "bpmn:UserTask" && (e.includes(t.id) ? this.canvas.addMarker(t, "highlight-current") : this.canvas.removeMarker(t, "highlight-current"));
-      });
-    }
-  }
-};
-var b = function() {
-  var e = this, t = e._self._c;
-  return t("div", { ref: "container", staticClass: "flow-viewer flow-background-image", style: { "--highlight-color": e.highlightColor } }, [t(g, { ref: "popup", attrs: { "append-to-body": "", "flex-column": "", offset: { x: 6, y: 6 } } }, [e._t("default", function() {
-    return [e._v(" " + e._s(e.element) + " ")];
-  }, { element: e.element })], 2)], 1);
-}, x = [], M = /* @__PURE__ */ v(
-  _,
-  b,
-  x,
-  !1,
-  null,
-  null
-);
-const C = M.exports;
-export {
-  C as default
+import { t as e } from "../chunks/_plugin-vue_export-helper.7vrlOII_.mjs";
+import t from "../easy-popup/index.mjs";
+import { createElementBlock as n, createTextVNode as r, createVNode as i, normalizeStyle as a, openBlock as o, renderSlot as s, resolveComponent as c, toDisplayString as l, withCtx as u } from "vue";
+import d from "bpmn-js/lib/NavigatedViewer";
+import f from "diagram-js/lib/navigation/zoomscroll/ZoomScroll";
+import { append as p, attr as m, create as h } from "tiny-svg";
+import { query as g } from "min-dom";
+//#region src/components/bpmn-process-designer/FlowViewer.vue
+var _ = f.prototype._handleWheel, v = {
+	__init__: ["zoomScroll"],
+	zoomScroll: ["type", f]
+}, y = {
+	name: "FlowViewer",
+	components: { EasyPopup: t },
+	props: {
+		xml: {
+			type: String,
+			required: !0
+		},
+		options: { type: Object },
+		activities: {
+			type: Array,
+			default: () => []
+		},
+		historicActivities: {
+			type: Array,
+			default: () => []
+		},
+		highlightColor: {
+			type: String,
+			default: "rgb(0 190 0 / 100%)"
+		},
+		ctrlKey: Boolean,
+		nodePopup: Boolean,
+		events: Array
+	},
+	emits: ["error", "shown"],
+	data() {
+		return { element: null };
+	},
+	watch: { xml(e) {
+		var t;
+		(t = this.bpmnViewer) == null || t.importXML(e);
+	} },
+	mounted() {
+		f.prototype._handleWheel = this.ctrlKey ? _ : function(e) {
+			let { target: t, deltaMode: n, clientX: r, clientY: i, deltaX: a, deltaY: o } = e;
+			_.call(this, {
+				target: t,
+				deltaMode: n,
+				clientX: r,
+				clientY: i,
+				deltaX: a,
+				deltaY: o,
+				preventDefault() {
+					e.preventDefault();
+				},
+				ctrlKey: !0
+			});
+		}, this.bpmnViewer = new d({
+			...this.options,
+			container: this.$refs.container,
+			additionalModules: [v]
+		}), this.bpmnViewer.on("import.done", (e) => {
+			let t = e.error, n = e.warnings;
+			t ? this.$emit("error", t) : this.$emit("shown", n), this.canvas = this.bpmnViewer.get("canvas"), this.fitViewportCenter(), this.elementRegistry = this.bpmnViewer.get("elementRegistry");
+			let r = this.bpmnViewer.get("eventBus");
+			this.events && this.events.forEach((e) => {
+				r.on(e, (t) => {
+					this.$emit(e.replace(".", "-"), t.element);
+				});
+			}), this.nodePopup && r.on("element.mousemove", (e) => {
+				e.element.type === "bpmn:UserTask" && requestAnimationFrame(async () => {
+					this.element = e.element, await this.$nextTick(), this.$refs.popup.show(e.originalEvent);
+				});
+			}), this.nodePopup && r.on("element.out", () => {
+				this.$refs.popup.hide(), this.element = {};
+			}), this.highlightFlow(this.historicActivities, this.activities);
+			let i = h("marker");
+			m(i, {
+				id: "sequenceflow-arrow-green",
+				viewBox: "0 0 20 20",
+				refX: "11",
+				refY: "10",
+				markerWidth: "10",
+				markerHeight: "10",
+				orient: "auto"
+			});
+			let a = h("path");
+			m(a, {
+				d: "M 1 5 L 11 10 L 1 15 Z",
+				style: "stroke-linecap: round; stroke-linejoin: round; stroke: var(--highlight-color); stroke-width: 1px; fill: var(--highlight-color);"
+			}), p(i, a);
+			let o = h("marker");
+			m(o, {
+				id: "conditional-default-flow-marker-green",
+				viewBox: "0 0 20 20",
+				refX: "0",
+				refY: "10",
+				markerWidth: "10",
+				markerHeight: "10",
+				orient: "auto"
+			});
+			let s = h("path");
+			m(s, {
+				d: "M 6 4 L 10 16",
+				style: "stroke-linecap: round; stroke-linejoin: round; stroke: var(--highlight-color); stroke-width: 2px; fill: var(--highlight-color);"
+			}), p(o, s);
+			let c = g("defs", this.$el);
+			p(c, i), p(c, o);
+		}), this.bpmnViewer.importXML(this.xml), this.$watch(() => ({
+			activities: this.activities,
+			historicActivities: this.historicActivities
+		}), ({ activities: e, historicActivities: t }) => {
+			this.highlightFlow(t, e);
+		});
+	},
+	beforeUnmount() {
+		var e;
+		f.prototype._handleWheel = _, (e = this.bpmnViewer) == null || e.destroy();
+	},
+	methods: {
+		fitViewportCenter(e = "center") {
+			this.canvas.zoom("fit-viewport", e);
+		},
+		highlightFlow(e, t) {
+			this.elementRegistry.getAll().forEach((n) => {
+				[
+					"bpmn:StartEvent",
+					"bpmn:UserTask",
+					"bpmn:ExclusiveGateway",
+					"bpmn:ParallelGateway",
+					"bpmn:EndEvent"
+				].includes(n.type) && (e.includes(n.id) && !t.includes(n.id) ? this.canvas.addMarker(n, "highlight") : this.canvas.removeMarker(n, "highlight")), n.type === "bpmn:SequenceFlow" && (e.includes(n.id) ? this.canvas.addMarker(n, "highlight-line") : this.canvas.removeMarker(n, "highlight-line")), n.type === "bpmn:UserTask" && (t.includes(n.id) ? this.canvas.addMarker(n, "highlight-current") : this.canvas.removeMarker(n, "highlight-current"));
+			});
+		}
+	}
 };
+function b(e, t, d, f, p, m) {
+	let h = c("EasyPopup");
+	return o(), n("div", {
+		ref: "container",
+		style: a({ "--highlight-color": d.highlightColor }),
+		class: "flow-viewer flow-background-image"
+	}, [i(h, {
+		ref: "popup",
+		"append-to-body": "",
+		"flex-column": "",
+		offset: {
+			x: 6,
+			y: 6
+		}
+	}, {
+		default: u(() => [s(e.$slots, "default", { element: p.element }, () => [r(l(p.element), 1)])]),
+		_: 3
+	}, 512)], 4);
+}
+var x = /* @__PURE__ */ e(y, [["render", b]]);
+//#endregion
+export { x as default };

package/form-block/index.mjs

@@ -1,149 +1,2 @@
-import s from "element-ui/lib/transitions/collapse-transition";
-import n from "element-ui/lib/row";
-import { h as i } from "vue";
-import { n as d } from "../chunks/_plugin-vue2_normalizer.CeySl7Fu.mjs";
-const l = ["disabled", "size", "statusIcon", "inlineMessage", "autoLabelWidth", "hideRequiredAsterisk", "$emit", "validate", "clearValidate"], m = ["$emit", "validate", "clearValidate"], c = {
-  name: "FormBlock",
-  inject: {
-    elForm: {
-      default: {}
-    }
-  },
-  provide() {
-    return {
-      elForm: this.formConfig
-    };
-  },
-  props: {
-    blockTitle: String,
-    active: Boolean,
-    enabled: Boolean,
-    disabled: Boolean,
-    wrapRow: {
-      type: Boolean,
-      default: !0
-    },
-    gutter: {
-      type: Number,
-      default: 20
-    },
-    collapse: Boolean
-  },
-  data() {
-    const e = {};
-    return l.forEach((o) => {
-      e[o] = null;
-    }), {
-      expand: !0,
-      formConfig: e
-    };
-  },
-  computed: {
-    formCfg() {
-      const e = {
-        enabled: this.enabled,
-        forbidden: this.disabled
-      };
-      return l.forEach((o) => {
-        e[o] = this.elForm[o];
-      }), e;
-    }
-  },
-  watch: {
-    collapse: {
-      immediate: !0,
-      handler(e) {
-        this.expand = !e;
-      }
-    },
-    formCfg: {
-      immediate: !0,
-      handler() {
-        this.formConfig.disabled = this.available(), l.forEach((e) => {
-          var o;
-          e !== "disabled" && (m.includes(e) ? this.formConfig[e] = (o = this.elForm[e]) == null ? void 0 : o.bind(this.elForm) : this.formConfig[e] = this.elForm[e]);
-        });
-      }
-    }
-  },
-  mounted() {
-    this.dispatch("FormView", "FormView.addTab", [this]);
-  },
-  beforeDestroy() {
-    this.dispatch("FormView", "FormView.removeTab", [this]);
-  },
-  methods: {
-    available() {
-      return this.disabled ? this.disabled : this.enabled ? !this.enabled : this.elForm.disabled;
-    },
-    dispatch(e, o, a) {
-      let t = this.$parent || this.$root, r = t.$options.name;
-      for (; t && (!r || r !== e); )
-        t = t.$parent, t && (r = t.$options.name);
-      t && t.$emit.apply(t, [o].concat(a));
-    },
-    renderDefault() {
-      const {
-        wrapRow: e,
-        gutter: o,
-        formConfig: a,
-        $scopedSlots: t
-      } = this;
-      return e ? i(n, {
-        attrs: {
-          gutter: o
-        }
-      }, [t.default({
-        disabled: a.disabled
-      })]) : t.default({
-        disabled: a.disabled
-      });
-    },
-    toggle() {
-      this.expand = !this.expand;
-    },
-    open() {
-      this.expand = !0;
-    }
-  },
-  render() {
-    const {
-      renderDefault: e,
-      blockTitle: o,
-      active: a,
-      expand: t,
-      toggle: r
-    } = this;
-    return i("div", {
-      class: ["form-block", {
-        "default-active": a
-      }]
-    }, [i("div", {
-      class: "form-block-title",
-      on: {
-        click: r
-      }
-    }, [i("span", {
-      class: "flex-item"
-    }, [o]), " ", i("i", {
-      class: t ? "el-icon-arrow-down" : "el-icon-arrow-right"
-    })]), i(s, [i("div", {
-      directives: [{
-        name: "show",
-        value: t
-      }]
-    }, [e()])])]);
-  }
-}, f = null, h = null;
-var p = /* @__PURE__ */ d(
-  c,
-  f,
-  h,
-  !1,
-  null,
-  null
-);
-const w = p.exports;
-export {
-  w as default
-};
+import { t as e } from "../chunks/FormBlock.BEENc22F.mjs";
+export { e as default };