@a2simcode/ui 0.0.42 → 0.0.43

package/dist/simcode-ui.es234.js

@@ -0,0 +1,435 @@
+import tt from "inherits";
+import { forEach as ot, isObject as q } from "./simcode-ui.es240.js";
+import { assign as T } from "./simcode-ui.es57.js";
+import { buildUUID as rt } from "./simcode-ui.es241.js";
+import { query as it } from "min-dom";
+import X from "./simcode-ui.es242.js";
+import { translate as ct } from "./simcode-ui.es243.js";
+import { createLine as st } from "./simcode-ui.es244.js";
+import { getStrokeColor as s, getFillColor as f, getStrokeWidth as L, getSemantic as at, getCirclePath as nt, getRoundRectPath as dt, getDiamondPath as ht, getRectPath as ut } from "./simcode-ui.es245.js";
+import { create as e, attr as W, append as w, classes as kt } from "tiny-svg";
+import { getLabel as lt } from "./simcode-ui.es246.js";
+const O = 10, C = 0.95, E = (n, y) => n.type === y;
+function P(n, y, k, b, j, v, H) {
+  X.call(this, n, H);
+  const p = "var(--j-color-bg-container)", h = "var(--j-color-text)", a = {};
+  Object.keys(v.palette).forEach((o) => {
+    const t = v.palette[o];
+    a[t.type] = t.options;
+  });
+  const { computeStyle: F } = y;
+  function g(o) {
+    return B[o];
+  }
+  function z(o) {
+    return y.computeStyle(o, ["no-fill"], {
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      stroke: h,
+      strokeWidth: 2
+    });
+  }
+  function M(o) {
+    return y.computeStyle(o, {
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      stroke: h,
+      strokeWidth: 2,
+      fill: "white"
+    });
+  }
+  function V(o, t, r, i) {
+    r = z(r);
+    const c = st(t, r, i);
+    return w(o, c), c;
+  }
+  function Z(o, t, r) {
+    return V(o, t, r, 5);
+  }
+  function I(o, t, r, i, c) {
+    q(i) && (c = i, i = 0), i = i || 0, c = F(c, {
+      stroke: h,
+      strokeWidth: 2,
+      fill: p
+    }), c.fill === "none" && delete c.fillOpacity;
+    const d = t / 2, l = r / 2, u = e("circle");
+    return W(u, {
+      cx: d,
+      cy: l,
+      r: Math.round((t + r) / 4 - i)
+    }), W(u, c), w(o, u), u;
+  }
+  function R(o, t, r, i, c, d) {
+    q(c) && (d = c, c = 0), c = c || 0, d = F(d, {
+      stroke: h,
+      strokeWidth: 2,
+      fill: p
+    });
+    const l = e("rect");
+    return W(l, {
+      x: c,
+      y: c,
+      width: t - c * 2,
+      height: r - c * 2,
+      rx: i,
+      ry: i
+    }), W(l, d), w(o, l), l;
+  }
+  function S(o, t, r) {
+    r = F(r, ["no-fill"], {
+      strokeWidth: 2,
+      stroke: h
+    });
+    const i = e("path");
+    return W(i, { d: t }), W(i, r), w(o, i), i;
+  }
+  function $(o, t, r, i) {
+    const c = t / 2, d = r / 2, u = [
+      { x: c, y: 0 },
+      { x: t, y: d },
+      { x: c, y: r },
+      { x: 0, y: d }
+    ].map((K) => K.x + "," + K.y).join(" ");
+    i = F(i, {
+      stroke: h,
+      strokeWidth: 2,
+      fill: p
+    });
+    const _ = e("polygon");
+    return W(_, {
+      points: u
+    }), W(_, i), w(o, _), _;
+  }
+  function J(o, t, r, i) {
+    return S(t, r, T({ "data-marker": o }, i));
+  }
+  function U(o, t, r) {
+    r = T(
+      {
+        size: {
+          width: 100
+        }
+      },
+      r
+    );
+    const i = j.createText(t || "", r);
+    return kt(i).add("djs-label"), w(o, i), i;
+  }
+  function A(o, t, r) {
+    const i = at(t);
+    return U(o, i.name, {
+      box: t,
+      align: r,
+      padding: 5,
+      style: {
+        fill: s(t, h)
+      }
+    });
+  }
+  function N(o, t) {
+    const r = {
+      width: 90,
+      height: 30,
+      x: t.width / 2 + t.x,
+      y: t.height / 2 + t.y
+    };
+    return U(o, lt(t), {
+      box: r,
+      fitBox: !0,
+      style: T({}, j.getExternalStyle(), {
+        fill: s(t, h)
+      })
+    });
+  }
+  function x(o, t, r) {
+    const i = r && r.indexOf("SubProcessMarker") !== -1;
+    let c;
+    i ? c = {
+      seq: -21,
+      parallel: -22,
+      compensation: -42,
+      loop: -18,
+      adhoc: 10
+    } : c = {
+      seq: -3,
+      parallel: -6,
+      compensation: -27,
+      loop: 0,
+      adhoc: 10
+    }, ot(r, (d) => {
+      g(d)(o, t, c);
+    });
+  }
+  function Y(o) {
+    return o.replace(/[^0-9a-zA-z]+/g, "_");
+  }
+  function Q(o, t) {
+    const { ref: r = { x: 0, y: 0 }, scale: i = 1, element: c, parentGfx: d = b._svg } = t, l = e("marker", {
+      id: o,
+      viewBox: "0 0 20 20",
+      refX: r.x,
+      refY: r.y,
+      markerWidth: 20 * i,
+      markerHeight: 20 * i,
+      orient: "auto"
+    });
+    w(l, c);
+    let u = it(":scope > defs", d);
+    u || (u = e("defs"), w(d, u)), w(u, l);
+  }
+  function G(o, t, r, i) {
+    const c = t + "-" + Y(r) + "-" + Y(i) + "-" + rt();
+    return m(o, c, t, r, i), "url(#" + c + ")";
+  }
+  function m(o, t, r, i, c) {
+    {
+      const d = e("path", {
+        d: "M 1 5 L 11 10 L 1 15 Z",
+        ...M({
+          fill: c,
+          stroke: c,
+          strokeWidth: 1
+        })
+      });
+      Q(t, {
+        element: d,
+        ref: { x: 11, y: 10 },
+        scale: 0.5,
+        parentGfx: o
+      });
+    }
+  }
+  function D(o, t, r, i) {
+    const c = a[t.type]?.icon || t.icon;
+    if (c) {
+      const d = k.getScaledPath(c, {
+        abspos: {
+          x: r,
+          y: i
+        }
+      });
+      S(o, d, {
+        strokeWidth: 0,
+        fill: s(t, a[t.type]?.iconFill || t.iconFill)
+      });
+    }
+  }
+  const B = {
+    event(o, t, r) {
+      return "fillOpacity" in r || (r.fillOpacity = C), I(o, t.width, t.height, r);
+    },
+    startEvent(o, t) {
+      const r = {
+        fill: f(t, a.startEvent?.fill || t.fill),
+        stroke: s(t, a.startEvent?.stroke || t.stroke),
+        strokeWidth: L(
+          t,
+          a.startEvent?.strokeWidth || t.strokeWidth
+        )
+      }, i = g("event")(o, t, r);
+      return D(o, t, 18, 18), i;
+    },
+    endEvent(o, t) {
+      const r = g("event")(o, t, {
+        strokeWidth: L(
+          t,
+          a.endEvent?.strokeWidth || t.strokeWidth || 4
+        ),
+        fill: f(t, a.endEvent?.fill || t.fill),
+        stroke: s(t, a.endEvent?.stroke || t.stroke)
+      });
+      return D(o, t, 18, 18), r;
+    },
+    gateway(o, t) {
+      const r = {
+        fillOpacity: C,
+        strokeWidth: L(
+          t,
+          a[t.type]?.strokeWidth || t.strokeWidth || 4
+        ),
+        fill: f(t, a[t.type]?.fill || t.fill),
+        stroke: s(t, a[t.type]?.stroke || t.stroke)
+      };
+      return $(o, t.width, t.height, r);
+    },
+    gatewayAnd(o, t) {
+      const r = g("gateway")(o, t), i = k.getScaledPath("GATEWAY_PARALLEL", {
+        xScaleFactor: 0.4,
+        yScaleFactor: 0.4,
+        containerWidth: a[t.type]?.width || t.width,
+        containerHeight: a[t.type]?.height || t.height,
+        position: {
+          mx: 0.47,
+          my: 0.29
+        }
+      });
+      return S(o, i, {
+        strokeWidth: 1,
+        fill: s(t, a[t.type]?.iconFill || t.iconFill),
+        stroke: s(t, a[t.type]?.iconFill || t.iconFill)
+      }), r;
+    },
+    gatewayXor(o, t) {
+      const r = g("gateway")(o, t), i = k.getScaledPath("GATEWAY_EXCLUSIVE", {
+        xScaleFactor: 0.4,
+        yScaleFactor: 0.4,
+        containerWidth: t.width,
+        containerHeight: t.height,
+        position: {
+          mx: 0.32,
+          my: 0.3
+        }
+      });
+      return S(o, i, {
+        strokeWidth: 1,
+        fill: s(t, a[t.type]?.iconFill || t.iconFill),
+        stroke: s(t, a[t.type]?.iconFill || t.iconFill)
+      }), r;
+    },
+    gatewayInclusive(o, t) {
+      const r = g("gateway")(o, t);
+      return I(o, t.width, t.height, t.height * 0.24, {
+        strokeWidth: 2.5,
+        fill: s(t, p),
+        stroke: s(t, a[t.type]?.iconFill || t.iconFill)
+      }), r;
+    },
+    activity(o, t, r) {
+      return r = r || {}, "fillOpacity" in r || (r.fillOpacity = C), R(o, t.width, t.height, O, r);
+    },
+    task(o, t) {
+      const r = {
+        fill: f(t, p),
+        stroke: s(t, h)
+      }, i = g("activity")(o, t, r);
+      return A(o, t, "center-middle"), x(o, t), i;
+    },
+    userTask(o, t) {
+      const r = g("task")(o, t), i = 15, c = 12, d = k.getScaledPath("TASK_TYPE_USER_1", {
+        abspos: {
+          x: i,
+          y: c
+        }
+      });
+      S(o, d, {
+        strokeWidth: 0.5,
+        fill: f(t, p),
+        stroke: s(t, h)
+      });
+      const l = k.getScaledPath("TASK_TYPE_USER_2", {
+        abspos: {
+          x: i,
+          y: c
+        }
+      });
+      S(o, l, {
+        strokeWidth: 0.5,
+        fill: f(t, p),
+        stroke: s(t, h)
+      });
+      const u = k.getScaledPath("TASK_TYPE_USER_3", {
+        abspos: {
+          x: i,
+          y: c
+        }
+      });
+      return S(o, u, {
+        strokeWidth: 0.5,
+        fill: s(t, h),
+        stroke: s(t, h)
+      }), r;
+    },
+    scriptTask(o, t) {
+      const r = g("task")(o, t), i = k.getScaledPath("TASK_TYPE_SCRIPT", {
+        abspos: {
+          x: 15,
+          y: 20
+        }
+      });
+      return S(o, i, {
+        strokeWidth: 1,
+        stroke: s(t, h)
+      }), r;
+    },
+    SubProcessMarker(o, t) {
+      const r = R(o, 14, 14, 0, {
+        strokeWidth: 1,
+        fill: f(t, p),
+        stroke: s(t, h)
+      });
+      ct(r, t.width / 2 - 7.5, t.height - 20);
+      const i = k.getScaledPath("MARKER_SUB_PROCESS", {
+        xScaleFactor: 1.5,
+        yScaleFactor: 1.5,
+        containerWidth: t.width,
+        containerHeight: t.height,
+        position: {
+          mx: (t.width / 2 - 7.5) / t.width,
+          my: (t.height - 20) / t.height
+        }
+      });
+      J("sub-process", o, i, {
+        fill: f(t, p),
+        stroke: s(t, h)
+      });
+    },
+    subprocess(o, t, r) {
+      r = T(
+        {
+          fill: f(t, p),
+          stroke: s(t, h)
+        },
+        r
+      );
+      const i = g("activity")(o, t, r);
+      return A(o, t, "center-middle"), x(o, t, ["SubProcessMarker"]), i;
+    },
+    label(o, t) {
+      return N(o, t);
+    },
+    myline(o, t) {
+      const r = f(t, v.lineStroke || p), i = s(t, v.lineStroke || h);
+      return Z(o, t.waypoints, {
+        markerEnd: G(o, "sequenceflow-end", r, i),
+        stroke: i
+      });
+    },
+    default(o, t) {
+      const r = {
+        strokeWidth: L(
+          t,
+          a[t.type]?.strokeWidth || t.strokeWidth || 1
+        ),
+        fill: f(t, a[t.type]?.fill || t.fill),
+        stroke: s(t, a[t.type]?.stroke || t.stroke)
+      }, i = R(
+        o,
+        t.width,
+        t.height,
+        t.radius || O,
+        r
+      );
+      return A(o, t, "center-middle"), x(o, t), D(o, t, t.iconX, t.iconY), i;
+    }
+  };
+  this.handlers = B, this._drawPath = S;
+}
+tt(P, X);
+P.$inject = ["eventBus", "styles", "pathMap", "canvas", "textRenderer", "myOptions"];
+P.prototype.canRender = function() {
+  return !0;
+};
+P.prototype.drawShape = function(n, y) {
+  const { type: k } = y;
+  return (this.handlers[k] || this.handlers.default)(n, y);
+};
+P.prototype.drawConnection = function(n, y) {
+  const { type: k } = y, b = this.handlers[k];
+  return b(n, y);
+};
+P.prototype.getShapePath = function(n) {
+  return E(n, "startEvent") || E(n, "endEvent") ? nt(n) : E(n, "userTask") || E(n, "scriptTask") || E(n, "subprocess") ? dt(n, O) : E(n, "gatewayAnd") || E(n, "gatewayXor") || E(n, "gatewayInclusive") ? ht(n) : ut(n);
+};
+export {
+  P as default
+};

package/dist/simcode-ui.es235.js

@@ -0,0 +1,63 @@
+import { assign as a } from "./simcode-ui.es57.js";
+import s from "./simcode-ui.es247.js";
+const x = 12, c = 1.2, y = 30;
+function f(h) {
+  const e = a(
+    {
+      fontFamily: "Arial, sans-serif",
+      fontSize: x,
+      fontWeight: "normal",
+      lineHeight: c
+    },
+    h && h.defaultStyle || {}
+  ), l = parseInt(e.fontSize, 10) - 1, o = a(
+    {},
+    e,
+    {
+      fontSize: l
+    },
+    h && h.externalStyle || {}
+  ), r = new s({
+    style: e
+  });
+  this.getExternalLabelBounds = function(t, n) {
+    const i = r.getDimensions(n, {
+      box: {
+        width: 90,
+        height: 30,
+        x: t.width / 2 + t.x,
+        y: t.height / 2 + t.y
+      },
+      style: o
+    });
+    return {
+      x: Math.round(t.x + t.width / 2 - i.width / 2),
+      y: Math.round(t.y),
+      width: Math.ceil(i.width),
+      height: Math.ceil(i.height)
+    };
+  }, this.getTextAnnotationBounds = function(t, n) {
+    const i = r.getDimensions(n, {
+      box: t,
+      style: e,
+      align: "left-top",
+      padding: 5
+    });
+    return {
+      x: t.x,
+      y: t.y,
+      width: t.width,
+      height: Math.max(y, Math.round(i.height))
+    };
+  }, this.createText = function(t, n) {
+    return r.createText(t, n || {});
+  }, this.getDefaultStyle = function() {
+    return e;
+  }, this.getExternalStyle = function() {
+    return o;
+  };
+}
+f.$inject = ["config.textRenderer"];
+export {
+  f as default
+};

package/dist/simcode-ui.es236.js

@@ -0,0 +1,81 @@
+function f() {
+  this.pathMap = {
+    GATEWAY_EXCLUSIVE: {
+      d: "m {mx},{my} {e.x0},{e.y0} {e.x1},{e.y0} {e.x2},0 {e.x4},{e.y2} {e.x4},{e.y1} {e.x2},0 {e.x1},{e.y3} {e.x0},{e.y3} {e.x3},0 {e.x5},{e.y1} {e.x5},{e.y2} {e.x3},0 z",
+      height: 17.5,
+      width: 17.5,
+      heightElements: [8.5, 6.5312, -6.5312, -8.5],
+      widthElements: [6.5, -6.5, 3, -3, 5, -5]
+    },
+    GATEWAY_PARALLEL: {
+      d: "m {mx},{my} 0,{e.y1} -{e.x1},0 0,{e.y0} {e.x1},0 0,{e.y1} {e.x0},0 0,-{e.y1} {e.x1},0 0,-{e.y0} -{e.x1},0 0,-{e.y1} -{e.x0},0 z",
+      height: 30,
+      width: 30,
+      heightElements: [5, 12.5],
+      widthElements: [5, 12.5]
+    },
+    TEXT_ANNOTATION: {
+      d: "m {mx}, {my} m 10,0 l -10,0 l 0,{e.y0} l 10,0",
+      height: 30,
+      width: 10,
+      heightElements: [30],
+      widthElements: [10]
+    },
+    MARKER_SUB_PROCESS: {
+      d: "m{mx},{my} m 7,2 l 0,10 m -5,-5 l 10,0",
+      height: 10,
+      width: 10,
+      heightElements: [],
+      widthElements: []
+    },
+    TASK_TYPE_SCRIPT: {
+      d: "m {mx},{my} c 9.966553,-6.27276 -8.000926,-7.91932 2.968968,-14.938 l -8.802728,0 c -10.969894,7.01868 6.997585,8.66524 -2.968967,14.938 z m -7,-12 l 5,0 m -4.5,3 l 4.5,0 m -3,3 l 5,0m -4,3 l 5,0",
+      height: 15,
+      width: 12.6,
+      heightElements: [6, 14],
+      widthElements: [10.5, 21]
+    },
+    TASK_TYPE_USER_1: {
+      d: "m {mx},{my} c 0.909,-0.845 1.594,-2.049 1.594,-3.385 0,-2.554 -1.805,-4.62199999 -4.357,-4.62199999 -2.55199998,0 -4.28799998,2.06799999 -4.28799998,4.62199999 0,1.348 0.974,2.562 1.89599998,3.405 -0.52899998,0.187 -5.669,2.097 -5.794,4.7560005 v 6.718 h 17 v -6.718 c 0,-2.2980005 -5.5279996,-4.5950005 -6.0509996,-4.7760005 zm -8,6 l 0,5.5 m 11,0 l 0,-5"
+    },
+    TASK_TYPE_USER_2: {
+      d: "m {mx},{my} m 2.162,1.009 c 0,2.4470005 -2.158,4.4310005 -4.821,4.4310005 -2.66499998,0 -4.822,-1.981 -4.822,-4.4310005 "
+    },
+    TASK_TYPE_USER_3: {
+      d: "m {mx},{my} m -6.9,-3.80 c 0,0 2.25099998,-2.358 4.27399998,-1.177 2.024,1.181 4.221,1.537 4.124,0.965 -0.098,-0.57 -0.117,-3.79099999 -4.191,-4.13599999 -3.57499998,0.001 -4.20799998,3.36699999 -4.20699998,4.34799999 z"
+    }
+  }, this.getRawPath = function(h) {
+    return this.pathMap[h].d;
+  }, this.getScaledPath = function(h, i) {
+    let t, m;
+    i.abspos ? (t = i.abspos.x, m = i.abspos.y) : (t = i.containerWidth * i.position.mx, m = i.containerHeight * i.position.my);
+    let e = {};
+    typeof h == "object" ? (e = h, e.d.indexOf("{mx},{my}") === -1 && (e.d = "m {mx},{my}" + e.d), e.width && (t -= e.width / 2), e.height && (m -= e.height / 2)) : e = this.pathMap[h];
+    const o = {};
+    if (i.position) {
+      const s = i.containerHeight / e.height * i.yScaleFactor, d = i.containerWidth / e.width * i.xScaleFactor;
+      for (let n = 0; n < e.heightElements.length; n++)
+        o["y" + n] = e.heightElements[n] * s;
+      for (let n = 0; n < e.widthElements.length; n++)
+        o["x" + n] = e.widthElements[n] * d;
+    }
+    return E(e.d, {
+      mx: t,
+      my: m,
+      e: o
+    });
+  };
+}
+const c = /\{([^}]+)\}/g, y = /(?:(?:^|\.)(.+?)(?=\[|\.|$|\()|\[('|")(.+?)\2\])(\(\))?/g;
+function g(l, h, i) {
+  let t = i;
+  return h.replace(y, (m, e, o, x, s) => {
+    e = e || x, t && (e in t && (t = t[e]), typeof t == "function" && s && (t = t()));
+  }), t = (t == null || t === i ? l : t) + "", t;
+}
+function E(l, h) {
+  return String(l).replace(c, (i, t) => g(i, t, h));
+}
+export {
+  f as default
+};

package/dist/simcode-ui.es237.js

@@ -0,0 +1,101 @@
+import { assign as l } from "./simcode-ui.es57.js";
+import { getMid as o } from "./simcode-ui.es259.js";
+import { translate as y } from "./simcode-ui.es241.js";
+function h(e, t) {
+  return l(
+    {
+      id: e.id,
+      type: e.type,
+      businessObject: e
+    },
+    t
+  );
+}
+function p(e, t, n) {
+  const i = e.waypoint;
+  return !i || i.length < 2 ? [o(t), o(n)] : i.map((s) => ({ x: s.x, y: s.y }));
+}
+function a(e, t, n, i, s, r) {
+  this._eventBus = e, this._canvas = n, this._elementFactory = i, this._elementRegistry = s, this._translate = y, this._textRenderer = r, this._modeling = t;
+}
+a.$inject = [
+  "eventBus",
+  "modeling",
+  "canvas",
+  "elementFactory",
+  "elementRegistry",
+  "textRenderer"
+];
+a.prototype.add = function(e) {
+  let t;
+  const { label: n } = e;
+  if (n && (n.id = e.id, n.name = e.name, delete e.label), e.type === "myline") {
+    const i = this._getSource(e), s = this._getTarget(e);
+    t = this._elementFactory.createConnection(
+      h(e, {
+        source: i,
+        target: s,
+        waypoints: p(e, i, s)
+      })
+    ), this._canvas.addConnection(t);
+  } else {
+    const i = this._elementFactory._getDefaultSize(e.type);
+    t = this._elementFactory.createShape(
+      h(e, {
+        x: Math.round(e.x),
+        y: Math.round(e.y),
+        width: i.width,
+        height: i.height,
+        isFrame: !1
+      })
+    ), this._canvas.addShape(t);
+  }
+  return n && t && this.addLabel(n, t), t;
+};
+a.prototype.addLabel = function(e, t) {
+  const n = this._elementFactory.createLabel({
+    id: e.id + "_label",
+    labelTarget: t,
+    type: "label",
+    x: Math.round(e.x),
+    y: Math.round(e.y),
+    width: Math.round(e.width),
+    height: Math.round(e.height),
+    businessObject: e
+  });
+  return this._canvas.addShape(n, t.parent);
+};
+a.prototype.update = function(e, t) {
+  const n = this._elementRegistry.get(e);
+  n.businessObject = l(n.businessObject, t), t.type === "myline" ? (this._canvas.removeConnection(n), this._canvas.addConnection(n, n.parent)) : (this._canvas.removeShape(n), this._canvas.addShape(n, n.parent));
+  const i = this._elementRegistry.get(e + "_label");
+  if (i)
+    i.businessObject = n.businessObject, this._canvas.removeShape(i), this._canvas.addShape(i, n.parent);
+  else {
+    const { name: s } = t;
+    if (s && [
+      "startEvent",
+      "myEvent",
+      "endEvent",
+      "gatewayAnd",
+      "gatewayXor",
+      "gatewayInclusive",
+      "myline"
+    ].includes(t.type)) {
+      const r = { x: t.x + 12, y: t.y + 42, width: 10, height: 10, name: s, id: e }, c = this._textRenderer.getExternalLabelBounds(r, t.name);
+      this._modeling.resizeShape(r, c, { width: 0, height: 0 }), n && this.addLabel(r, n);
+    }
+  }
+};
+a.prototype._getSource = function(e) {
+  return this._getElement(e.from);
+};
+a.prototype._getTarget = function(e) {
+  return this._getElement(e.to);
+};
+a.prototype._getElement = function(e) {
+  return this._elementRegistry.get(e);
+};
+export {
+  a as default
+};