@web-utils/component 2.9.9 → 2.9.11

package/flow-viewer/index.mjs

@@ -2,60 +2,60 @@ var k = Object.defineProperty, b = Object.defineProperties;
 var M = Object.getOwnPropertyDescriptors;
 var f = Object.getOwnPropertySymbols;
 var x = Object.prototype.hasOwnProperty, V = Object.prototype.propertyIsEnumerable;
-var u = (t, i, e) => i in t ? k(t, i, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[i] = e, w = (t, i) => {
-  for (var e in i || (i = {}))
-    x.call(i, e) && u(t, e, i[e]);
+var u = (e, i, t) => i in e ? k(e, i, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[i] = t, w = (e, i) => {
+  for (var t in i || (i = {}))
+    x.call(i, t) && u(e, t, i[t]);
   if (f)
-    for (var e of f(i))
-      V.call(i, e) && u(t, e, i[e]);
-  return t;
-}, y = (t, i) => b(t, M(i));
-var v = (t, i, e) => new Promise((s, n) => {
-  var r = (o) => {
+    for (var t of f(i))
+      V.call(i, t) && u(e, t, i[t]);
+  return e;
+}, v = (e, i) => b(e, M(i));
+var y = (e, i, t) => new Promise((l, o) => {
+  var h = (r) => {
     try {
-      a(e.next(o));
-    } catch (h) {
-      n(h);
+      a(t.next(r));
+    } catch (n) {
+      o(n);
     }
-  }, l = (o) => {
+  }, s = (r) => {
     try {
-      a(e.throw(o));
-    } catch (h) {
-      n(h);
+      a(t.throw(r));
+    } catch (n) {
+      o(n);
     }
-  }, a = (o) => o.done ? s(o.value) : Promise.resolve(o.value).then(r, l);
-  a((e = e.apply(t, i)).next());
+  }, a = (r) => r.done ? l(r.value) : Promise.resolve(r.value).then(h, s);
+  a((t = t.apply(e, i)).next());
 });
-import E from "bpmn-js/lib/NavigatedViewer";
+import $ from "bpmn-js/lib/NavigatedViewer";
 import d from "diagram-js/lib/navigation/zoomscroll/ZoomScroll";
 import { create as c, attr as m, append as p } from "tiny-svg";
-import { query as S } from "min-dom";
-import $ from "@web-utils/component/easy-popup";
+import { query as E } from "min-dom";
+import S from "@web-utils/component/easy-popup";
 import "@web-utils/component/easy-popup/style.css";
 import { n as F } from "../chunks/vueComponentNormalizer.446f5dc4.mjs";
-var B = function() {
-  var t = this, i = t.$createElement, e = t._self._c || i;
-  return e("div", {
+var A = function() {
+  var e = this, i = e.$createElement, t = e._self._c || i;
+  return t("div", {
     ref: "container",
     staticClass: "flow-viewer flow-background-image",
     style: {
-      "--highlight-color": t.highlightColor
+      "--highlight-color": e.highlightColor
     }
-  }, [e("EasyPopup", {
+  }, [t("EasyPopup", {
     ref: "popup"
-  }, [t._t("default", function() {
-    return [t._v(" " + t._s(t.element) + " ")];
+  }, [e._t("default", function() {
+    return [e._v(" " + e._s(e.element) + " ")];
   }, {
-    element: t.element
+    element: e.element
   })], 2)], 1);
-}, W = [];
-const g = d.prototype._handleWheel, X = {
+}, B = [];
+const g = d.prototype._handleWheel, W = {
   __init__: ["zoomScroll"],
   zoomScroll: ["type", d]
-}, C = {
+}, X = {
   name: "FlowViewer",
   components: {
-    EasyPopup: $
+    EasyPopup: S
   },
   props: {
     xml: {
@@ -69,7 +69,7 @@ const g = d.prototype._handleWheel, X = {
       type: Array,
       default: () => []
     },
-    flows: {
+    historicActivities: {
       type: Array,
       default: () => []
     },
@@ -85,40 +85,40 @@ const g = d.prototype._handleWheel, X = {
     };
   },
   watch: {
-    xml(t) {
+    xml(e) {
       var i;
-      (i = this.bpmnViewer) == null || i.importXML(t);
+      (i = this.bpmnViewer) == null || i.importXML(e);
     }
   },
   mounted() {
-    d.prototype._handleWheel = this.ctrlKey ? g : function(t) {
-      const { target: i, deltaMode: e, clientX: s, clientY: n, deltaX: r, deltaY: l } = t;
+    d.prototype._handleWheel = this.ctrlKey ? g : function(e) {
+      const { target: i, deltaMode: t, clientX: l, clientY: o, deltaX: h, deltaY: s } = e;
       g.call(this, {
         target: i,
-        deltaMode: e,
-        clientX: s,
-        clientY: n,
-        deltaX: r,
-        deltaY: l,
+        deltaMode: t,
+        clientX: l,
+        clientY: o,
+        deltaX: h,
+        deltaY: s,
         preventDefault() {
-          t.preventDefault();
+          e.preventDefault();
         },
         ctrlKey: !0
       });
-    }, this.bpmnViewer = new E(y(w({}, this.options), {
+    }, this.bpmnViewer = new $(v(w({}, this.options), {
       container: this.$refs.container,
-      additionalModules: [X]
-    })), this.bpmnViewer.on("import.done", (t) => {
-      const i = t.error, e = t.warnings;
-      i ? this.$emit("error", i) : this.$emit("shown", e), this.bpmnViewer.get("canvas").zoom("fit-viewport", "center"), this.canvas = this.bpmnViewer.get("canvas"), this.elementRegistry = this.bpmnViewer.get("elementRegistry");
-      const s = this.bpmnViewer.get("eventBus");
-      s.on("element.mousemove", (h) => v(this, null, function* () {
-        h.element.type === "bpmn:UserTask" && (this.$emit("node-mousemove", h.element), this.element = h.element, yield this.$nextTick(), this.$refs.popup.show(h.originalEvent));
-      })), s.on("element.out", () => {
+      additionalModules: [W]
+    })), this.bpmnViewer.on("import.done", (e) => {
+      const i = e.error, t = e.warnings;
+      i ? this.$emit("error", i) : this.$emit("shown", t), this.bpmnViewer.get("canvas").zoom("fit-viewport", "center"), this.canvas = this.bpmnViewer.get("canvas"), this.elementRegistry = this.bpmnViewer.get("elementRegistry");
+      const l = this.bpmnViewer.get("eventBus");
+      l.on("element.mousemove", (n) => y(this, null, function* () {
+        n.element.type === "bpmn:UserTask" && (this.$emit("node-mousemove", n.element), this.element = n.element, yield this.$nextTick(), this.$refs.popup.show(n.originalEvent));
+      })), l.on("element.out", () => {
         this.$refs.popup.hide(), this.element = {};
-      }), this.highlightFlow(this.flows, this.activities);
-      const n = c("marker");
-      m(n, {
+      }), this.highlightFlow(this.historicActivities, this.activities);
+      const o = c("marker");
+      m(o, {
         id: "sequenceflow-arrow-green",
         viewBox: "0 0 20 20",
         refX: "11",
@@ -127,13 +127,13 @@ const g = d.prototype._handleWheel, X = {
         markerHeight: "10",
         orient: "auto"
       });
-      const r = c("path");
-      m(r, {
+      const h = c("path");
+      m(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, r);
-      const l = c("marker");
-      m(l, {
+      }), p(o, h);
+      const s = c("marker");
+      m(s, {
         id: "conditional-default-flow-marker-green",
         viewBox: "0 0 20 20",
         refX: "0",
@@ -146,49 +146,44 @@ const g = d.prototype._handleWheel, X = {
       m(a, {
         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(l, a);
-      const o = S("defs", this.$el);
-      p(o, n), p(o, l);
+      }), p(s, a);
+      const r = E("defs", this.$el);
+      p(r, o), p(r, s);
     }), this.bpmnViewer.importXML(this.xml), this.$watch(() => ({
       activities: this.activities,
-      flows: this.flows
-    }), ({ activities: t, flows: i }) => {
-      this.highlightFlow(i, t);
+      historicActivities: this.historicActivities
+    }), ({ activities: e, historicActivities: i }) => {
+      this.highlightFlow(i, e);
     });
   },
   beforeDestroy() {
-    var t;
-    d.prototype._handleWheel = g, (t = this.bpmnViewer) == null || t.destroy();
+    var e;
+    d.prototype._handleWheel = g, (e = this.bpmnViewer) == null || e.destroy();
   },
   methods: {
-    highlightFlow(t, i) {
-      this.elementRegistry.getAll().forEach((e) => {
-        if (["bpmn:StartEvent", "bpmn:UserTask", "bpmn:ExclusiveGateway", "bpmn:ParallelGateway ", "bpmn:EndEvent"].includes(e.type)) {
-          this.canvas.removeMarker(e, "highlight");
-          const s = e.incoming.map((r) => r.id), n = e.outgoing.map((r) => r.id);
-          e.type === "bpmn:StartEvent" && n.some((r) => t.includes(r)) && this.canvas.addMarker(e, "highlight"), e.type === "bpmn:EndEvent" && s.some((r) => t.includes(r)) && this.canvas.addMarker(e, "highlight"), !this.activities.includes(e.id) && s.some((r) => t.includes(r)) && n.some((r) => t.includes(r)) && this.canvas.addMarker(e, "highlight");
-        }
-        e.type === "bpmn:SequenceFlow" && (t.includes(e.id) ? this.canvas.addMarker(e, "highlight-line") : this.canvas.removeMarker(e, "highlight-line")), e.type === "bpmn:UserTask" && (i.includes(e.id) ? this.canvas.addMarker(e, "highlight-current") : this.canvas.removeMarker(e, "highlight-current"));
+    highlightFlow(e, i) {
+      this.elementRegistry.getAll().forEach((t) => {
+        ["bpmn:StartEvent", "bpmn:UserTask", "bpmn:ExclusiveGateway", "bpmn:ParallelGateway", "bpmn:EndEvent"].includes(t.type) && (e.includes(t.id) && !i.includes(t.id) ? this.canvas.addMarker(t, "highlight") : this.canvas.removeMarker(t, "highlight")), t.type === "bpmn:SequenceFlow" && (e.includes(t.id) ? this.canvas.addMarker(t, "highlight-line") : this.canvas.removeMarker(t, "highlight-line")), t.type === "bpmn:UserTask" && (i.includes(t.id) ? this.canvas.addMarker(t, "highlight-current") : this.canvas.removeMarker(t, "highlight-current"));
       });
     }
   }
 }, _ = {};
-var L = /* @__PURE__ */ F(
-  C,
+var C = /* @__PURE__ */ F(
+  X,
+  A,
   B,
-  W,
   !1,
-  j,
+  L,
   null,
   null,
   null
 );
-function j(t) {
+function L(e) {
   for (let i in _)
     this[i] = _[i];
 }
 const P = /* @__PURE__ */ function() {
-  return L.exports;
+  return C.exports;
 }();
 export {
   P as default

package/flow-viewer/style.css

@@ -1 +1 @@
-.flow-viewer{width:100%;height:400px}.flow-viewer .highlight g.djs-visual rect,.flow-viewer .highlight g.djs-visual circle,.flow-viewer .highlight g.djs-visual polygon,.flow-viewer .highlight g.djs-visual path{stroke:var(--highlight-color)!important}.flow-viewer .highlight g.djs-visual polygon+path{fill:var(--highlight-color)!important}@keyframes dashoffset{to{stroke-dashoffset:0}}.flow-viewer .highlight-current g.djs-visual rect{fill:#fbe9d1!important;stroke:#d67e7d!important;animation:dashoffset 2s linear infinite;stroke-dashoffset:80;stroke-dasharray:8}.flow-viewer .highlight-line g.djs-visual path{stroke:var(--highlight-color)!important;stroke-width:2px!important;marker-end:url(#sequenceflow-arrow-green)!important}
+.flow-viewer{width:100%;height:400px}.flow-viewer .highlight g.djs-visual rect,.flow-viewer .highlight g.djs-visual circle,.flow-viewer .highlight g.djs-visual polygon,.flow-viewer .highlight g.djs-visual path{stroke:var(--highlight-color)!important}.flow-viewer .highlight g.djs-visual polygon+path{fill:var(--highlight-color)!important}@keyframes dashoffset{to{stroke-dashoffset:100%}}.flow-viewer .highlight-current g.djs-visual rect{fill:#fbe9d1!important;stroke:#d67e7d!important;animation:dashoffset 40s linear infinite;animation-fill-mode:forwards;stroke-dasharray:8}.flow-viewer .highlight-line g.djs-visual path{stroke:var(--highlight-color)!important;stroke-width:2px!important;marker-end:url(#sequenceflow-arrow-green)!important}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@web-utils/component",
   "description": "Web Components",
-  "version": "2.9.9",
+  "version": "2.9.11",
   "author": "Simple",
   "license": "MIT",
   "type": "module",

package/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "https://json.schemastore.org/web-types",
   "framework": "vue",
   "name": "@web-utils/component",
-  "version": "2.9.9",
+  "version": "2.9.11",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -2605,7 +2605,7 @@
               "default": "[]"
             },
             {
-              "name": "flows",
+              "name": "historicActivities",
               "value": {
                 "kind": "expression",
                 "type": "array"