@operato/scene-bpmn 1.1.8 → 1.1.10

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [1.1.10](https://github.com/things-scene/operato-scene/compare/v1.1.9...v1.1.10) (2022-11-06)
+
+
+### :bug: Bug Fix
+
+* bpmn label positions ([805c888](https://github.com/things-scene/operato-scene/commit/805c888a9f51b1094e2af7edd27c8a22e933b1e6))
+
+
+
+### [1.1.9](https://github.com/things-scene/operato-scene/compare/v1.1.8...v1.1.9) (2022-11-06)
+
+
+### :bug: Bug Fix
+
+* bpmn-flow template ([464a8bd](https://github.com/things-scene/operato-scene/commit/464a8bd39762b1f746ad461ff167efe0feacb073))
+* transaction, interrupting properties for bpmn ([e9a7308](https://github.com/things-scene/operato-scene/commit/e9a7308d3cd983b604d278984dc4764d6c3fd974))
+
+
+
 ### [1.1.8](https://github.com/things-scene/operato-scene/compare/v1.1.7...v1.1.8) (2022-11-05)
 
 

package/dist/base/bpmn-container-base.js

@@ -20,8 +20,8 @@ export var FLOW;
 })(FLOW || (FLOW = {}));
 const STYLE_MAP = {
     message: {
-        strokeStyle: 'navy',
-        fillStyle: 'navy'
+        strokeStyle: 'black',
+        fillStyle: 'black'
     },
     sequence: {
         strokeStyle: 'red',

package/dist/base/bpmn-container-base.js.map

@@ -1 +1 @@
-{"version":3,"file":"bpmn-container-base.js","sourceRoot":"","sources":["../../src/base/bpmn-container-base.ts"],"names":[],"mappings":"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","sourcesContent":["import { Anchor, Container, Connectable, LinkEnd } from '@hatiolab/things-scene'\n\nexport enum DIRECTION {\n  NORTH = 'N',\n  EAST = 'E',\n  SOUTH = 'S',\n  WEST = 'W'\n}\n\nexport enum INOUT {\n  IN = 'in',\n  OUT = 'out',\n  INOUT = 'inout'\n}\n\nexport enum FLOW {\n  MESSAGE = 'message',\n  SEQUENCE = 'sequence',\n  ASSOCIATION = 'association'\n}\n\nexport type NODE = {\n  name: string\n  description: string\n  inout: INOUT\n  type: FLOW\n  direction: DIRECTION\n  multiplicity?: number\n}\n\nconst STYLE_MAP = {\n  message: {\n    strokeStyle: 'navy',\n    fillStyle: 'navy'\n  },\n  sequence: {\n    strokeStyle: 'red',\n    fillStyle: 'red',\n    lineDash: 'long-dash-dot'\n  },\n  association: {\n    strokeStyle: 'yellow',\n    fillStyle: 'yellow',\n    lineDash: 'dash',\n    begin: 'none',\n    beginSize: 'size1',\n    end: 'none',\n    endSize: 'size1'\n  }\n}\n\ntype FILTER_FUNCTION = (this: Anchor, counterEnd?: LinkEnd) => boolean\n\nconst ANCHOR_LENGTH = 8\n\nconst TEMPLATE = {\n  type: 'bpmn-flow',\n  lineWidth: 2,\n  strokeStyle: 'black',\n  begin: 'none',\n  beginSize: 'size1',\n  end: 'arrow',\n  endSize: 'size9',\n  round: 10\n}\n\nfunction linkFilter(this: Anchor, counterEnd?: LinkEnd) {\n  if (!counterEnd) {\n    return this.inout !== 'in'\n  }\n\n  const { component, anchor } = counterEnd || {}\n  /* FIXME remove !anchor.type condition */\n  return !anchor?.type || anchor.type === this.type\n}\n\nexport default abstract class BPMNContainerBase extends Connectable(Container) {\n  get anchors(): Array<Anchor> {\n    var allNodes = this.nodes\n    var { left, top, width, height } = this.bounds\n\n    var right = left + width\n    var bottom = top + height\n\n    const dirs: Array<Array<Anchor>> = [DIRECTION.NORTH, DIRECTION.EAST, DIRECTION.SOUTH, DIRECTION.WEST].map(\n      direction => {\n        const nodes = allNodes.filter(node => node.direction === direction)\n        if (nodes.length === 0) {\n          return []\n        }\n\n        var dx = 0\n        var dy = 0\n        var sx = 0\n        var sy = 0\n\n        switch (direction) {\n          case DIRECTION.NORTH:\n            sx = left\n            sy = top\n            dx = width / (nodes.length + 1)\n            dy = 0\n\n            break\n\n          case DIRECTION.EAST:\n            sx = right\n            sy = top\n            dx = 0\n            dy = height / (nodes.length + 1)\n\n            break\n\n          case DIRECTION.SOUTH:\n            sx = left\n            sy = bottom\n            dx = width / (nodes.length + 1)\n            dy = 0\n\n            break\n\n          case DIRECTION.WEST:\n            sx = left\n            sy = top\n            dx = 0\n            dy = height / (nodes.length + 1)\n\n            break\n\n          default:\n        }\n\n        return nodes.map((node, idx) => {\n          const x = sx + dx * (idx + 1)\n          const y = sy + dy * (idx + 1)\n\n          return {\n            type: node.type as string,\n            name: node.name,\n            inout: node.inout,\n            position: {\n              x,\n              y\n            },\n            bounds: {\n              left: x - ANCHOR_LENGTH / 2,\n              top: y - ANCHOR_LENGTH / 2,\n              width: ANCHOR_LENGTH,\n              height: ANCHOR_LENGTH\n            },\n            filter: linkFilter,\n            template: {\n              ...TEMPLATE,\n              ...(STYLE_MAP[node.type || 'message'] || STYLE_MAP['message'])\n            },\n            multiplicity: node.multiplicity\n          }\n        })\n      }\n    )\n\n    return dirs.flat()\n  }\n\n  get nodes(): NODE[] {\n    return [\n      {\n        name: 'Left',\n        description: 'Left side message inout',\n        inout: INOUT.INOUT,\n        type: FLOW.MESSAGE,\n        direction: DIRECTION.WEST,\n        multiplicity: 1\n      },\n      {\n        name: 'Top',\n        description: 'Top side message inout',\n        inout: INOUT.INOUT,\n        type: FLOW.MESSAGE,\n        direction: DIRECTION.NORTH,\n        multiplicity: 1\n      },\n      {\n        name: 'Right',\n        description: 'Right side message inout',\n        inout: INOUT.INOUT,\n        type: FLOW.MESSAGE,\n        direction: DIRECTION.EAST,\n        multiplicity: 1\n      },\n      {\n        name: 'Down',\n        description: 'Down side message inout',\n        inout: INOUT.INOUT,\n        type: FLOW.MESSAGE,\n        direction: DIRECTION.SOUTH,\n        multiplicity: 1\n      }\n    ]\n  }\n}\n"]}
+{"version":3,"file":"bpmn-container-base.js","sourceRoot":"","sources":["../../src/base/bpmn-container-base.ts"],"names":[],"mappings":"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","sourcesContent":["import { Anchor, Container, Connectable, LinkEnd, Properties } from '@hatiolab/things-scene'\n\nexport enum DIRECTION {\n  NORTH = 'N',\n  EAST = 'E',\n  SOUTH = 'S',\n  WEST = 'W'\n}\n\nexport enum INOUT {\n  IN = 'in',\n  OUT = 'out',\n  INOUT = 'inout'\n}\n\nexport enum FLOW {\n  MESSAGE = 'message',\n  SEQUENCE = 'sequence',\n  ASSOCIATION = 'association'\n}\n\nexport type NODE = {\n  name: string\n  description: string\n  inout: INOUT\n  type: FLOW\n  direction: DIRECTION\n  multiplicity?: number\n}\n\nconst STYLE_MAP = {\n  message: {\n    strokeStyle: 'black',\n    fillStyle: 'black'\n  },\n  sequence: {\n    strokeStyle: 'red',\n    fillStyle: 'red',\n    lineDash: 'long-dash-dot'\n  },\n  association: {\n    strokeStyle: 'yellow',\n    fillStyle: 'yellow',\n    lineDash: 'dash',\n    begin: 'none',\n    beginSize: 'size1',\n    end: 'none',\n    endSize: 'size1'\n  }\n}\n\ntype FILTER_FUNCTION = (this: Anchor, counterEnd?: LinkEnd) => boolean\n\nconst ANCHOR_LENGTH = 8\n\nconst TEMPLATE = {\n  type: 'bpmn-flow',\n  lineWidth: 2,\n  strokeStyle: 'black',\n  begin: 'none',\n  beginSize: 'size1',\n  end: 'arrow',\n  endSize: 'size9',\n  round: 10\n}\n\nfunction linkFilter(this: Anchor, counterEnd?: LinkEnd) {\n  if (!counterEnd) {\n    return this.inout !== 'in'\n  }\n\n  const { component, anchor } = counterEnd || {}\n  /* FIXME remove !anchor.type condition */\n  return !anchor?.type || anchor.type === this.type\n}\n\nexport default abstract class BPMNContainerBase extends Connectable(Container) {\n  get anchors(): Array<Anchor> {\n    var allNodes = this.nodes\n    var { left, top, width, height } = this.bounds\n\n    var right = left + width\n    var bottom = top + height\n\n    const dirs: Array<Array<Anchor>> = [DIRECTION.NORTH, DIRECTION.EAST, DIRECTION.SOUTH, DIRECTION.WEST].map(\n      direction => {\n        const nodes = allNodes.filter(node => node.direction === direction)\n        if (nodes.length === 0) {\n          return []\n        }\n\n        var dx = 0\n        var dy = 0\n        var sx = 0\n        var sy = 0\n\n        switch (direction) {\n          case DIRECTION.NORTH:\n            sx = left\n            sy = top\n            dx = width / (nodes.length + 1)\n            dy = 0\n\n            break\n\n          case DIRECTION.EAST:\n            sx = right\n            sy = top\n            dx = 0\n            dy = height / (nodes.length + 1)\n\n            break\n\n          case DIRECTION.SOUTH:\n            sx = left\n            sy = bottom\n            dx = width / (nodes.length + 1)\n            dy = 0\n\n            break\n\n          case DIRECTION.WEST:\n            sx = left\n            sy = top\n            dx = 0\n            dy = height / (nodes.length + 1)\n\n            break\n\n          default:\n        }\n\n        return nodes.map((node, idx) => {\n          const x = sx + dx * (idx + 1)\n          const y = sy + dy * (idx + 1)\n\n          return {\n            type: node.type as string,\n            name: node.name,\n            inout: node.inout,\n            position: {\n              x,\n              y\n            },\n            bounds: {\n              left: x - ANCHOR_LENGTH / 2,\n              top: y - ANCHOR_LENGTH / 2,\n              width: ANCHOR_LENGTH,\n              height: ANCHOR_LENGTH\n            },\n            filter: linkFilter,\n            template: {\n              ...TEMPLATE,\n              ...(STYLE_MAP[node.type || 'message'] || STYLE_MAP['message'])\n            },\n            multiplicity: node.multiplicity\n          }\n        })\n      }\n    )\n\n    return dirs.flat()\n  }\n\n  get nodes(): NODE[] {\n    return [\n      {\n        name: 'Left',\n        description: 'Left side message inout',\n        inout: INOUT.INOUT,\n        type: FLOW.MESSAGE,\n        direction: DIRECTION.WEST,\n        multiplicity: 1\n      },\n      {\n        name: 'Top',\n        description: 'Top side message inout',\n        inout: INOUT.INOUT,\n        type: FLOW.MESSAGE,\n        direction: DIRECTION.NORTH,\n        multiplicity: 1\n      },\n      {\n        name: 'Right',\n        description: 'Right side message inout',\n        inout: INOUT.INOUT,\n        type: FLOW.MESSAGE,\n        direction: DIRECTION.EAST,\n        multiplicity: 1\n      },\n      {\n        name: 'Down',\n        description: 'Down side message inout',\n        inout: INOUT.INOUT,\n        type: FLOW.MESSAGE,\n        direction: DIRECTION.SOUTH,\n        multiplicity: 1\n      }\n    ]\n  }\n}\n"]}

package/dist/base/bpmn-control-base.js

@@ -20,8 +20,8 @@ export var FLOW;
 })(FLOW || (FLOW = {}));
 const STYLE_MAP = {
     message: {
-        strokeStyle: 'navy',
-        fillStyle: 'navy'
+        strokeStyle: 'black',
+        fillStyle: 'black'
     },
     sequence: {
         strokeStyle: 'red',

package/dist/base/bpmn-control-base.js.map

@@ -1 +1 @@
-{"version":3,"file":"bpmn-control-base.js","sourceRoot":"","sources":["../../src/base/bpmn-control-base.ts"],"names":[],"mappings":"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","sourcesContent":["import { Anchor, BOUNDS, Component, Connectable, LinkEnd, RectPath, Shape } from '@hatiolab/things-scene'\n\nexport enum DIRECTION {\n  NORTH = 'N',\n  EAST = 'E',\n  SOUTH = 'S',\n  WEST = 'W'\n}\n\nexport enum INOUT {\n  IN = 'in',\n  OUT = 'out',\n  INOUT = 'inout'\n}\n\nexport enum FLOW {\n  MESSAGE = 'message',\n  SEQUENCE = 'sequence',\n  ASSOCIATION = 'association'\n}\n\nexport type NODE = {\n  name: string\n  description: string\n  inout: INOUT\n  type: FLOW\n  direction: DIRECTION\n  multiplicity?: number\n}\n\nconst STYLE_MAP = {\n  message: {\n    strokeStyle: 'navy',\n    fillStyle: 'navy'\n  },\n  sequence: {\n    strokeStyle: 'red',\n    fillStyle: 'red',\n    lineDash: 'long-dash-dot'\n  },\n  association: {\n    strokeStyle: 'yellow',\n    fillStyle: 'yellow',\n    lineDash: 'dash',\n    begin: 'none',\n    beginSize: 'size1',\n    end: 'none',\n    endSize: 'size1'\n  }\n}\n\ntype FILTER_FUNCTION = (this: Anchor, counterEnd?: LinkEnd) => boolean\n\nconst ANCHOR_LENGTH = 8\n\nconst TEMPLATE = {\n  type: 'bpmn-flow',\n  lineWidth: 2,\n  strokeStyle: 'black',\n  begin: 'none',\n  beginSize: 'size1',\n  end: 'arrow',\n  endSize: 'size9',\n  round: 10\n}\n\nfunction linkFilter(this: Anchor, counterEnd?: LinkEnd) {\n  if (!counterEnd) {\n    return this.inout !== 'in'\n  }\n\n  const { component, anchor } = counterEnd || {}\n  /* FIXME remove !anchor.type condition */\n  return !anchor?.type || anchor.type === this.type\n}\n\nexport default abstract class BPMNControlBase extends Connectable(RectPath(Shape)) {\n  get anchors(): Array<Anchor> {\n    var allNodes = this.nodes\n    var { left, top, width, height } = this.bounds\n\n    var right = left + width\n    var bottom = top + height\n\n    const dirs: Array<Array<Anchor>> = [DIRECTION.NORTH, DIRECTION.EAST, DIRECTION.SOUTH, DIRECTION.WEST].map(\n      direction => {\n        const nodes = allNodes.filter(node => node.direction === direction)\n        if (nodes.length === 0) {\n          return []\n        }\n\n        var dx = 0\n        var dy = 0\n        var sx = 0\n        var sy = 0\n\n        switch (direction) {\n          case DIRECTION.NORTH:\n            sx = left\n            sy = top\n            dx = width / (nodes.length + 1)\n            dy = 0\n\n            break\n\n          case DIRECTION.EAST:\n            sx = right\n            sy = top\n            dx = 0\n            dy = height / (nodes.length + 1)\n\n            break\n\n          case DIRECTION.SOUTH:\n            sx = left\n            sy = bottom\n            dx = width / (nodes.length + 1)\n            dy = 0\n\n            break\n\n          case DIRECTION.WEST:\n            sx = left\n            sy = top\n            dx = 0\n            dy = height / (nodes.length + 1)\n\n            break\n\n          default:\n        }\n\n        return nodes.map((node, idx) => {\n          const x = sx + dx * (idx + 1)\n          const y = sy + dy * (idx + 1)\n\n          return {\n            type: node.type as string,\n            name: node.name,\n            inout: node.inout,\n            position: {\n              x,\n              y\n            },\n            bounds: {\n              left: x - ANCHOR_LENGTH / 2,\n              top: y - ANCHOR_LENGTH / 2,\n              width: ANCHOR_LENGTH,\n              height: ANCHOR_LENGTH\n            },\n            filter: linkFilter,\n            template: {\n              ...TEMPLATE,\n              ...(STYLE_MAP[node.type || 'message'] || STYLE_MAP['message'])\n            },\n            multiplicity: node.multiplicity\n          }\n        })\n      }\n    )\n\n    return dirs.flat()\n  }\n\n  get nodes(): NODE[] {\n    return [\n      {\n        name: 'Left',\n        description: 'Left side message inout',\n        inout: INOUT.INOUT,\n        type: FLOW.MESSAGE,\n        direction: DIRECTION.WEST,\n        multiplicity: 1\n      },\n      {\n        name: 'Top',\n        description: 'Top side message inout',\n        inout: INOUT.INOUT,\n        type: FLOW.MESSAGE,\n        direction: DIRECTION.NORTH,\n        multiplicity: 1\n      },\n      {\n        name: 'Right',\n        description: 'Right side message inout',\n        inout: INOUT.INOUT,\n        type: FLOW.MESSAGE,\n        direction: DIRECTION.EAST,\n        multiplicity: 1\n      },\n      {\n        name: 'Down',\n        description: 'Down side message inout',\n        inout: INOUT.INOUT,\n        type: FLOW.MESSAGE,\n        direction: DIRECTION.SOUTH,\n        multiplicity: 1\n      }\n    ]\n  }\n}\n"]}
+{"version":3,"file":"bpmn-control-base.js","sourceRoot":"","sources":["../../src/base/bpmn-control-base.ts"],"names":[],"mappings":"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","sourcesContent":["import { Anchor, BOUNDS, Component, Connectable, LinkEnd, Properties, RectPath, Shape } from '@hatiolab/things-scene'\n\nexport enum DIRECTION {\n  NORTH = 'N',\n  EAST = 'E',\n  SOUTH = 'S',\n  WEST = 'W'\n}\n\nexport enum INOUT {\n  IN = 'in',\n  OUT = 'out',\n  INOUT = 'inout'\n}\n\nexport enum FLOW {\n  MESSAGE = 'message',\n  SEQUENCE = 'sequence',\n  ASSOCIATION = 'association'\n}\n\nexport type NODE = {\n  name: string\n  description: string\n  inout: INOUT\n  type: FLOW\n  direction: DIRECTION\n  multiplicity?: number\n}\n\nconst STYLE_MAP = {\n  message: {\n    strokeStyle: 'black',\n    fillStyle: 'black'\n  },\n  sequence: {\n    strokeStyle: 'red',\n    fillStyle: 'red',\n    lineDash: 'long-dash-dot'\n  },\n  association: {\n    strokeStyle: 'yellow',\n    fillStyle: 'yellow',\n    lineDash: 'dash',\n    begin: 'none',\n    beginSize: 'size1',\n    end: 'none',\n    endSize: 'size1'\n  }\n}\n\ntype FILTER_FUNCTION = (this: Anchor, counterEnd?: LinkEnd) => boolean\n\nconst ANCHOR_LENGTH = 8\n\nconst TEMPLATE = {\n  type: 'bpmn-flow',\n  lineWidth: 2,\n  strokeStyle: 'black',\n  begin: 'none',\n  beginSize: 'size1',\n  end: 'arrow',\n  endSize: 'size9',\n  round: 10\n}\n\nfunction linkFilter(this: Anchor, counterEnd?: LinkEnd) {\n  if (!counterEnd) {\n    return this.inout !== 'in'\n  }\n\n  const { component, anchor } = counterEnd || {}\n  /* FIXME remove !anchor.type condition */\n  return !anchor?.type || anchor.type === this.type\n}\n\nexport default abstract class BPMNControlBase extends Connectable(RectPath(Shape)) {\n  get anchors(): Array<Anchor> {\n    var allNodes = this.nodes\n    var { left, top, width, height } = this.bounds\n\n    var right = left + width\n    var bottom = top + height\n\n    const dirs: Array<Array<Anchor>> = [DIRECTION.NORTH, DIRECTION.EAST, DIRECTION.SOUTH, DIRECTION.WEST].map(\n      direction => {\n        const nodes = allNodes.filter(node => node.direction === direction)\n        if (nodes.length === 0) {\n          return []\n        }\n\n        var dx = 0\n        var dy = 0\n        var sx = 0\n        var sy = 0\n\n        switch (direction) {\n          case DIRECTION.NORTH:\n            sx = left\n            sy = top\n            dx = width / (nodes.length + 1)\n            dy = 0\n\n            break\n\n          case DIRECTION.EAST:\n            sx = right\n            sy = top\n            dx = 0\n            dy = height / (nodes.length + 1)\n\n            break\n\n          case DIRECTION.SOUTH:\n            sx = left\n            sy = bottom\n            dx = width / (nodes.length + 1)\n            dy = 0\n\n            break\n\n          case DIRECTION.WEST:\n            sx = left\n            sy = top\n            dx = 0\n            dy = height / (nodes.length + 1)\n\n            break\n\n          default:\n        }\n\n        return nodes.map((node, idx) => {\n          const x = sx + dx * (idx + 1)\n          const y = sy + dy * (idx + 1)\n\n          return {\n            type: node.type as string,\n            name: node.name,\n            inout: node.inout,\n            position: {\n              x,\n              y\n            },\n            bounds: {\n              left: x - ANCHOR_LENGTH / 2,\n              top: y - ANCHOR_LENGTH / 2,\n              width: ANCHOR_LENGTH,\n              height: ANCHOR_LENGTH\n            },\n            filter: linkFilter,\n            template: {\n              ...TEMPLATE,\n              ...(STYLE_MAP[node.type || 'message'] || STYLE_MAP['message'])\n            },\n            multiplicity: node.multiplicity\n          }\n        })\n      }\n    )\n\n    return dirs.flat()\n  }\n\n  get nodes(): NODE[] {\n    return [\n      {\n        name: 'Left',\n        description: 'Left side message inout',\n        inout: INOUT.INOUT,\n        type: FLOW.MESSAGE,\n        direction: DIRECTION.WEST,\n        multiplicity: 1\n      },\n      {\n        name: 'Top',\n        description: 'Top side message inout',\n        inout: INOUT.INOUT,\n        type: FLOW.MESSAGE,\n        direction: DIRECTION.NORTH,\n        multiplicity: 1\n      },\n      {\n        name: 'Right',\n        description: 'Right side message inout',\n        inout: INOUT.INOUT,\n        type: FLOW.MESSAGE,\n        direction: DIRECTION.EAST,\n        multiplicity: 1\n      },\n      {\n        name: 'Down',\n        description: 'Down side message inout',\n        inout: INOUT.INOUT,\n        type: FLOW.MESSAGE,\n        direction: DIRECTION.SOUTH,\n        multiplicity: 1\n      }\n    ]\n  }\n}\n"]}

package/dist/bpmn-data-object.d.ts

@@ -1,4 +1,4 @@
-import { Properties } from '@hatiolab/things-scene';
+import { Properties, BOUNDS } from '@hatiolab/things-scene';
 import BPMNControlBase from './base/bpmn-control-base';
 export default class BPMNDataObject extends BPMNControlBase {
     private imageElement?;
@@ -25,6 +25,7 @@ export default class BPMNDataObject extends BPMNControlBase {
         })[];
         help: string;
     };
+    get textBounds(): BOUNDS;
     render(ctx: CanvasRenderingContext2D): void;
     onchange(after: Properties, before: Properties): void;
     getImageElement(): HTMLImageElement | undefined;

package/dist/bpmn-data-object.js

@@ -38,6 +38,19 @@ export default class BPMNDataObject extends BPMNControlBase {
     static get nature() {
         return NATURE;
     }
+    get textBounds() {
+        var { left, top, width, height } = this.bounds;
+        var { paddingTop, paddingLeft, paddingRight } = this.state;
+        paddingTop || (paddingTop = 0);
+        paddingLeft || (paddingLeft = 0);
+        paddingRight || (paddingRight = 0);
+        return {
+            left: left + paddingLeft,
+            top: top + paddingTop + height + 10,
+            width: Math.max(width - paddingLeft - paddingRight, 0),
+            height: 0
+        };
+    }
     render(ctx) {
         const { left, top, width, height } = this.bounds;
         const { collection = false } = this.state;

package/dist/bpmn-data-object.js.map

@@ -1 +1 @@
-{"version":3,"file":"bpmn-data-object.js","sourceRoot":"","sources":["../src/bpmn-data-object.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component, Properties } from '@hatiolab/things-scene'\n\nimport BPMNControlBase from './base/bpmn-control-base'\n\nconst NATURE = {\n  mutable: false,\n  resizable: true,\n  rotatable: false,\n  properties: [\n    {\n      type: 'select',\n      name: 'inout',\n      label: 'inout',\n      property: {\n        options: [\n          {\n            display: '',\n            value: ''\n          },\n          {\n            display: 'input',\n            value: 'input'\n          },\n          {\n            display: 'output',\n            value: 'output'\n          }\n        ]\n      }\n    },\n    {\n      type: 'checkbox',\n      name: 'collection',\n      label: 'collection'\n    }\n  ],\n  help: '/bpmn/data-object/data-object'\n}\n\nexport default class BPMNDataObject extends BPMNControlBase {\n  private imageElement?: HTMLImageElement\n  private collectionImageElement?: HTMLImageElement\n\n  static get nature() {\n    return NATURE\n  }\n\n  render(ctx: CanvasRenderingContext2D) {\n    const { left, top, width, height } = this.bounds\n    const { collection = false } = this.state\n\n    const corner = (Math.min(width, height) * 2) / 5\n\n    ctx.translate(left, top)\n    ctx.beginPath()\n\n    ctx.moveTo(width - corner, 0)\n    ctx.lineTo(width - corner, corner)\n    ctx.lineTo(width, corner)\n    ctx.lineTo(width - corner, 0)\n    this.drawStroke(ctx)\n\n    ctx.beginPath()\n    ctx.moveTo(0, 0)\n    ctx.lineTo(width - corner, 0)\n    ctx.lineTo(width - corner, corner)\n    ctx.lineTo(width, corner)\n    ctx.lineTo(width, height)\n    ctx.lineTo(0, height)\n    ctx.lineTo(0, 0)\n\n    this.drawFill(ctx)\n    this.drawStroke(ctx)\n\n    ctx.beginPath()\n\n    const image = this.getImageElement()\n    if (image) {\n      this.drawImage(ctx, image, 0, 0, corner, corner)\n    }\n\n    if (collection) {\n      this.drawImage(ctx, this.getCollectionImageElement()!, (width - 16) / 2, height - 16, 16, 16)\n    }\n\n    ctx.translate(-left, -top)\n  }\n\n  onchange(after: Properties, before: Properties) {\n    if ('inout' in after || 'collection' in after || 'strokeStyle' in after) {\n      delete this.imageElement\n      delete this.collectionImageElement\n    }\n  }\n\n  getImageElement(): HTMLImageElement | undefined {\n    if (!this.imageElement) {\n      const { inout, strokeStyle } = this.state\n\n      if (!inout) {\n        return\n      }\n\n      const src: string = IMAGES[inout]\n      if (!src) {\n        return\n      }\n\n      this.imageElement = new Image()\n      this.imageElement.src =\n        'data:image/svg+xml;charset=UTF-8;base64,' + btoa(src.replace(/{{strokeColor}}/g, strokeStyle))\n    }\n\n    return this.imageElement\n  }\n\n  getCollectionImageElement(): HTMLImageElement | undefined {\n    if (!this.collectionImageElement) {\n      const { strokeStyle } = this.state\n\n      this.collectionImageElement = new Image()\n      this.collectionImageElement.src =\n        'data:image/svg+xml;charset=UTF-8;base64,' + btoa(COLLECTION.replace(/{{strokeColor}}/g, strokeStyle))\n    }\n\n    return this.collectionImageElement\n  }\n}\n\nComponent.register('bpmn-data-object', BPMNDataObject)\n\nconst IMAGES: { [type: string]: string } = {\n  input: `\n  <svg version=\"1.1\" id=\"Layer_3\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n  viewBox=\"0 0 35 35\" style=\"enable-background:new 0 0 35 35;\" xml:space=\"preserve\">\n    <style type=\"text/css\">\n     .st0{fill:none;stroke:{{strokeColor}};stroke-miterlimit:10;}\n    </style>\n    <path class=\"st0\" d=\"M19,13.8V8l9.5,9.5L19,27v-5.8H6.5v-7.5H19z\"/>\n  </svg>\n  `,\n  output: `\n  <svg version=\"1.1\" id=\"Layer_3\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n  viewBox=\"0 0 35 35\" style=\"enable-background:new 0 0 35 35;\" xml:space=\"preserve\">\n    <style type=\"text/css\">\n     .st0{fill:{{strokeColor}};}\n    </style>\n    <path class=\"st0\" d=\"M19,13.8V8l9.5,9.5L19,27v-5.8H6.5v-7.5H19z\"/>\n  </svg>\n  `\n}\n\nconst COLLECTION: string = `\n    <svg version=\"1.1\" id=\"Layer_3\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n    viewBox=\"0 0 35 35\" style=\"enable-background:new 0 0 35 35;\" xml:space=\"preserve\">\n    <style type=\"text/css\">\n    .st0{fill:{{strokeColor}};}\n    </style>\n    <g>\n      <rect x=\"5.5\" y=\"1.9\" class=\"st0\" width=\"3.3\" height=\"25.3\"/>\n      <rect x=\"15.9\" y=\"1.9\" class=\"st0\" width=\"3.3\" height=\"25.3\"/>\n      <rect x=\"26.2\" y=\"1.9\" class=\"st0\" width=\"3.3\" height=\"25.3\"/>\n    </g>\n    </svg>\n  `\n"]}
+{"version":3,"file":"bpmn-data-object.js","sourceRoot":"","sources":["../src/bpmn-data-object.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component, Properties, BOUNDS } from '@hatiolab/things-scene'\n\nimport BPMNControlBase from './base/bpmn-control-base'\n\nconst NATURE = {\n  mutable: false,\n  resizable: true,\n  rotatable: false,\n  properties: [\n    {\n      type: 'select',\n      name: 'inout',\n      label: 'inout',\n      property: {\n        options: [\n          {\n            display: '',\n            value: ''\n          },\n          {\n            display: 'input',\n            value: 'input'\n          },\n          {\n            display: 'output',\n            value: 'output'\n          }\n        ]\n      }\n    },\n    {\n      type: 'checkbox',\n      name: 'collection',\n      label: 'collection'\n    }\n  ],\n  help: '/bpmn/data-object/data-object'\n}\n\nexport default class BPMNDataObject extends BPMNControlBase {\n  private imageElement?: HTMLImageElement\n  private collectionImageElement?: HTMLImageElement\n\n  static get nature() {\n    return NATURE\n  }\n\n  get textBounds(): BOUNDS {\n    var { left, top, width, height } = this.bounds\n    var { paddingTop, paddingLeft, paddingRight } = this.state\n\n    paddingTop ||= 0\n    paddingLeft ||= 0\n    paddingRight ||= 0\n\n    return {\n      left: left + paddingLeft,\n      top: top + paddingTop + height + 10,\n      width: Math.max(width - paddingLeft - paddingRight, 0),\n      height: 0\n    }\n  }\n\n  render(ctx: CanvasRenderingContext2D) {\n    const { left, top, width, height } = this.bounds\n    const { collection = false } = this.state\n\n    const corner = (Math.min(width, height) * 2) / 5\n\n    ctx.translate(left, top)\n    ctx.beginPath()\n\n    ctx.moveTo(width - corner, 0)\n    ctx.lineTo(width - corner, corner)\n    ctx.lineTo(width, corner)\n    ctx.lineTo(width - corner, 0)\n    this.drawStroke(ctx)\n\n    ctx.beginPath()\n    ctx.moveTo(0, 0)\n    ctx.lineTo(width - corner, 0)\n    ctx.lineTo(width - corner, corner)\n    ctx.lineTo(width, corner)\n    ctx.lineTo(width, height)\n    ctx.lineTo(0, height)\n    ctx.lineTo(0, 0)\n\n    this.drawFill(ctx)\n    this.drawStroke(ctx)\n\n    ctx.beginPath()\n\n    const image = this.getImageElement()\n    if (image) {\n      this.drawImage(ctx, image, 0, 0, corner, corner)\n    }\n\n    if (collection) {\n      this.drawImage(ctx, this.getCollectionImageElement()!, (width - 16) / 2, height - 16, 16, 16)\n    }\n\n    ctx.translate(-left, -top)\n  }\n\n  onchange(after: Properties, before: Properties) {\n    if ('inout' in after || 'collection' in after || 'strokeStyle' in after) {\n      delete this.imageElement\n      delete this.collectionImageElement\n    }\n  }\n\n  getImageElement(): HTMLImageElement | undefined {\n    if (!this.imageElement) {\n      const { inout, strokeStyle } = this.state\n\n      if (!inout) {\n        return\n      }\n\n      const src: string = IMAGES[inout]\n      if (!src) {\n        return\n      }\n\n      this.imageElement = new Image()\n      this.imageElement.src =\n        'data:image/svg+xml;charset=UTF-8;base64,' + btoa(src.replace(/{{strokeColor}}/g, strokeStyle))\n    }\n\n    return this.imageElement\n  }\n\n  getCollectionImageElement(): HTMLImageElement | undefined {\n    if (!this.collectionImageElement) {\n      const { strokeStyle } = this.state\n\n      this.collectionImageElement = new Image()\n      this.collectionImageElement.src =\n        'data:image/svg+xml;charset=UTF-8;base64,' + btoa(COLLECTION.replace(/{{strokeColor}}/g, strokeStyle))\n    }\n\n    return this.collectionImageElement\n  }\n}\n\nComponent.register('bpmn-data-object', BPMNDataObject)\n\nconst IMAGES: { [type: string]: string } = {\n  input: `\n  <svg version=\"1.1\" id=\"Layer_3\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n  viewBox=\"0 0 35 35\" style=\"enable-background:new 0 0 35 35;\" xml:space=\"preserve\">\n    <style type=\"text/css\">\n     .st0{fill:none;stroke:{{strokeColor}};stroke-miterlimit:10;}\n    </style>\n    <path class=\"st0\" d=\"M19,13.8V8l9.5,9.5L19,27v-5.8H6.5v-7.5H19z\"/>\n  </svg>\n  `,\n  output: `\n  <svg version=\"1.1\" id=\"Layer_3\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n  viewBox=\"0 0 35 35\" style=\"enable-background:new 0 0 35 35;\" xml:space=\"preserve\">\n    <style type=\"text/css\">\n     .st0{fill:{{strokeColor}};}\n    </style>\n    <path class=\"st0\" d=\"M19,13.8V8l9.5,9.5L19,27v-5.8H6.5v-7.5H19z\"/>\n  </svg>\n  `\n}\n\nconst COLLECTION: string = `\n    <svg version=\"1.1\" id=\"Layer_3\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n    viewBox=\"0 0 35 35\" style=\"enable-background:new 0 0 35 35;\" xml:space=\"preserve\">\n    <style type=\"text/css\">\n    .st0{fill:{{strokeColor}};}\n    </style>\n    <g>\n      <rect x=\"5.5\" y=\"1.9\" class=\"st0\" width=\"3.3\" height=\"25.3\"/>\n      <rect x=\"15.9\" y=\"1.9\" class=\"st0\" width=\"3.3\" height=\"25.3\"/>\n      <rect x=\"26.2\" y=\"1.9\" class=\"st0\" width=\"3.3\" height=\"25.3\"/>\n    </g>\n    </svg>\n  `\n"]}

package/dist/bpmn-data-store.d.ts

@@ -1,3 +1,4 @@
+import { BOUNDS } from '@hatiolab/things-scene';
 import BPMNControlBase from './base/bpmn-control-base';
 export default class BPMNDataStore extends BPMNControlBase {
     static get nature(): {
@@ -7,5 +8,6 @@ export default class BPMNDataStore extends BPMNControlBase {
         properties: never[];
         help: string;
     };
+    get textBounds(): BOUNDS;
     render(ctx: CanvasRenderingContext2D): void;
 }

package/dist/bpmn-data-store.js

@@ -11,6 +11,19 @@ export default class BPMNDataStore extends BPMNControlBase {
     static get nature() {
         return NATURE;
     }
+    get textBounds() {
+        var { left, top, width, height } = this.bounds;
+        var { paddingTop, paddingLeft, paddingRight } = this.state;
+        paddingTop || (paddingTop = 0);
+        paddingLeft || (paddingLeft = 0);
+        paddingRight || (paddingRight = 0);
+        return {
+            left: left + paddingLeft,
+            top: top + paddingTop + height + 10,
+            width: Math.max(width - paddingLeft - paddingRight, 0),
+            height: 0
+        };
+    }
     render(ctx) {
         const { left, top, width, height } = this.bounds;
         const ry = Math.abs(height / 6);

package/dist/bpmn-data-store.js.map

@@ -1 +1 @@
-{"version":3,"file":"bpmn-data-store.js","sourceRoot":"","sources":["../src/bpmn-data-store.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAElD,OAAO,eAAe,MAAM,0BAA0B,CAAA;AAEtD,MAAM,MAAM,GAAG;IACb,OAAO,EAAE,KAAK;IACd,SAAS,EAAE,IAAI;IACf,SAAS,EAAE,KAAK;IAChB,UAAU,EAAE,EAAE;IACd,IAAI,EAAE,6BAA6B;CACpC,CAAA;AAED,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,eAAe;IACxD,MAAM,KAAK,MAAM;QACf,OAAO,MAAM,CAAA;IACf,CAAC;IAED,MAAM,CAAC,GAA6B;QAClC,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,CAAA;QAChD,MAAM,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,CAAC,CAAC,CAAA;QAC/B,MAAM,UAAU,GAAG,IAAI,CAAC,EAAE,CAAA;QAC1B,MAAM,QAAQ,GAAG,CAAC,CAAA;QAElB,GAAG,CAAC,SAAS,CAAC,IAAI,EAAE,GAAG,CAAC,CAAA;QACxB,GAAG,CAAC,SAAS,EAAE,CAAA;QAEf,GAAG,CAAC,OAAO,CAAC,KAAK,GAAG,CAAC,EAAE,EAAE,EAAE,KAAK,GAAG,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,UAAU,EAAE,UAAU,GAAG,IAAI,CAAC,EAAE,GAAG,CAAC,EAAE,IAAI,CAAC,CAAA;QAExF,GAAG,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,CAAA;QAC1B,GAAG,CAAC,OAAO,CAAC,KAAK,GAAG,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,KAAK,GAAG,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,CAAC,CAAA;QAEjF,GAAG,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,GAAG,EAAE,CAAC,CAAA;QACtB,GAAG,CAAC,OAAO,CAAC,KAAK,GAAG,CAAC,EAAE,EAAE,GAAG,EAAE,EAAE,KAAK,GAAG,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,CAAC,CAAA;QAE7E,GAAG,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,CAAC,CAAA;QACjB,GAAG,CAAC,MAAM,CAAC,CAAC,EAAE,MAAM,GAAG,EAAE,CAAC,CAAA;QAC1B,GAAG,CAAC,OAAO,CAAC,KAAK,GAAG,CAAC,EAAE,MAAM,GAAG,EAAE,EAAE,KAAK,GAAG,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,CAAC,CAAA;QACjF,GAAG,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,CAAA;QAErB,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAA;QAClB,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAA;QAEpB,GAAG,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,CAAC,GAAG,CAAC,CAAA;IAC5B,CAAC;CACF;AAED,SAAS,CAAC,QAAQ,CAAC,iBAAiB,EAAE,aAAa,CAAC,CAAA","sourcesContent":["import { Component } from '@hatiolab/things-scene'\n\nimport BPMNControlBase from './base/bpmn-control-base'\n\nconst NATURE = {\n  mutable: false,\n  resizable: true,\n  rotatable: false,\n  properties: [],\n  help: '/bpmn/data-store/data-store'\n}\n\nexport default class BPMNDataStore extends BPMNControlBase {\n  static get nature() {\n    return NATURE\n  }\n\n  render(ctx: CanvasRenderingContext2D) {\n    const { left, top, width, height } = this.bounds\n    const ry = Math.abs(height / 6)\n    const startAngle = Math.PI\n    const endAngle = 0\n\n    ctx.translate(left, top)\n    ctx.beginPath()\n\n    ctx.ellipse(width / 2, ry, width / 2, ry, 0, startAngle, startAngle - Math.PI * 2, true)\n\n    ctx.moveTo(0, ry + ry / 2)\n    ctx.ellipse(width / 2, ry + ry / 2, width / 2, ry, 0, startAngle, endAngle, true)\n\n    ctx.moveTo(0, ry + ry)\n    ctx.ellipse(width / 2, ry + ry, width / 2, ry, 0, startAngle, endAngle, true)\n\n    ctx.moveTo(0, ry)\n    ctx.lineTo(0, height - ry)\n    ctx.ellipse(width / 2, height - ry, width / 2, ry, 0, startAngle, endAngle, true)\n    ctx.lineTo(width, ry)\n\n    this.drawFill(ctx)\n    this.drawStroke(ctx)\n\n    ctx.translate(-left, -top)\n  }\n}\n\nComponent.register('bpmn-data-store', BPMNDataStore)\n"]}
+{"version":3,"file":"bpmn-data-store.js","sourceRoot":"","sources":["../src/bpmn-data-store.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component, BOUNDS } from '@hatiolab/things-scene'\n\nimport BPMNControlBase from './base/bpmn-control-base'\n\nconst NATURE = {\n  mutable: false,\n  resizable: true,\n  rotatable: false,\n  properties: [],\n  help: '/bpmn/data-store/data-store'\n}\n\nexport default class BPMNDataStore extends BPMNControlBase {\n  static get nature() {\n    return NATURE\n  }\n\n  get textBounds(): BOUNDS {\n    var { left, top, width, height } = this.bounds\n    var { paddingTop, paddingLeft, paddingRight } = this.state\n\n    paddingTop ||= 0\n    paddingLeft ||= 0\n    paddingRight ||= 0\n\n    return {\n      left: left + paddingLeft,\n      top: top + paddingTop + height + 10,\n      width: Math.max(width - paddingLeft - paddingRight, 0),\n      height: 0\n    }\n  }\n\n  render(ctx: CanvasRenderingContext2D) {\n    const { left, top, width, height } = this.bounds\n    const ry = Math.abs(height / 6)\n    const startAngle = Math.PI\n    const endAngle = 0\n\n    ctx.translate(left, top)\n    ctx.beginPath()\n\n    ctx.ellipse(width / 2, ry, width / 2, ry, 0, startAngle, startAngle - Math.PI * 2, true)\n\n    ctx.moveTo(0, ry + ry / 2)\n    ctx.ellipse(width / 2, ry + ry / 2, width / 2, ry, 0, startAngle, endAngle, true)\n\n    ctx.moveTo(0, ry + ry)\n    ctx.ellipse(width / 2, ry + ry, width / 2, ry, 0, startAngle, endAngle, true)\n\n    ctx.moveTo(0, ry)\n    ctx.lineTo(0, height - ry)\n    ctx.ellipse(width / 2, height - ry, width / 2, ry, 0, startAngle, endAngle, true)\n    ctx.lineTo(width, ry)\n\n    this.drawFill(ctx)\n    this.drawStroke(ctx)\n\n    ctx.translate(-left, -top)\n  }\n}\n\nComponent.register('bpmn-data-store', BPMNDataStore)\n"]}

package/dist/bpmn-event.d.ts

@@ -1,4 +1,4 @@
-import { Properties } from '@hatiolab/things-scene';
+import { BOUNDS, Properties } from '@hatiolab/things-scene';
 import BPMNControlBase from './base/bpmn-control-base';
 export default class BPMNEvent extends BPMNControlBase {
     private imageElement?;
@@ -6,7 +6,7 @@ export default class BPMNEvent extends BPMNControlBase {
         mutable: boolean;
         resizable: boolean;
         rotatable: boolean;
-        properties: {
+        properties: ({
             type: string;
             name: string;
             label: string;
@@ -16,9 +16,15 @@ export default class BPMNEvent extends BPMNControlBase {
                     value: string;
                 }[];
             };
-        }[];
+        } | {
+            type: string;
+            label: string;
+            name: string;
+            property?: undefined;
+        })[];
         help: string;
     };
+    get textBounds(): BOUNDS;
     render(ctx: CanvasRenderingContext2D): void;
     onchange(after: Properties, before: Properties): void;
     getImageElement(): HTMLImageElement | undefined;

package/dist/bpmn-event.js

@@ -87,6 +87,11 @@ const NATURE = {
                     }
                 ]
             }
+        },
+        {
+            type: 'checkbox',
+            label: 'interrupting',
+            name: 'interrupting'
         }
     ],
     help: '/bpmn/event/event'
@@ -95,35 +100,49 @@ export default class BPMNEvent extends BPMNControlBase {
     static get nature() {
         return NATURE;
     }
+    get textBounds() {
+        var { left, top, width, height } = this.bounds;
+        var { paddingTop, paddingLeft, paddingRight } = this.state;
+        paddingTop || (paddingTop = 0);
+        paddingLeft || (paddingLeft = 0);
+        paddingRight || (paddingRight = 0);
+        return {
+            left: left + paddingLeft,
+            top: top + paddingTop + height + 10,
+            width: Math.max(width - paddingLeft - paddingRight, 0),
+            height: 0
+        };
+    }
     render(ctx) {
         const { left, top, width, height } = this.bounds;
-        const { lineWidth } = this.state;
-        const { eventType } = this.state;
+        const { eventType, interrupting } = this.state;
         const cx = width / 2;
         const cy = height / 2;
         ctx.translate(left, top);
         ctx.beginPath();
+        var lineWidth = 2;
         switch (eventType) {
             case 'intermediate':
-                this.setState('lineWidth', 2);
+                lineWidth = 1;
                 ctx.ellipse(cx, cy, width / 2, height / 2, 0, 0, 2 * Math.PI);
                 ctx.moveTo(width / 2 + width / 2.5, height / 2);
                 ctx.ellipse(cx, cy, width / 2.5, height / 2.5, 0, 0, 2 * Math.PI);
                 break;
             case 'end':
-                this.setState('lineWidth', 6);
+                lineWidth = 5;
                 ctx.ellipse(cx, cy, width / 2 - 1.5, height / 2 - 1.5, 0, 0, 2 * Math.PI);
                 break;
             case 'start':
             default:
-                this.setState('lineWidth', 2);
                 ctx.ellipse(cx, cy, width / 2, height / 2, 0, 0, 2 * Math.PI);
                 break;
         }
         this.drawFill(ctx);
-        this.drawStroke(ctx);
+        this.drawStroke(ctx, {
+            lineWidth,
+            lineDash: interrupting ? 'round-dot' : 'solid'
+        });
         ctx.beginPath();
-        this.setState('lineWidth', lineWidth);
         const image = this.getImageElement();
         if (image) {
             this.drawImage(ctx, image, width / 6, height / 6, (width * 2) / 3, (height * 2) / 3);
@@ -132,7 +151,9 @@ export default class BPMNEvent extends BPMNControlBase {
     }
     onchange(after, before) {
         if ('marker' in after || 'strokeStyle' in after) {
+            // Since strokeStyle affects the image, the image is redrawn according to the change of strokeStyle.
             delete this.imageElement;
+            this.invalidate();
         }
     }
     getImageElement() {

package/dist/bpmn-event.js.map

@@ -1 +1 @@
-{"version":3,"file":"bpmn-event.js","sourceRoot":"","sources":["../src/bpmn-event.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component, Properties } from '@hatiolab/things-scene'\n\nimport BPMNControlBase from './base/bpmn-control-base'\n\nenum BEHAVIOR {\n  catching,\n  throwing\n}\n\nconst NATURE = {\n  mutable: false,\n  resizable: true,\n  rotatable: false,\n  properties: [\n    {\n      type: 'select',\n      name: 'eventType',\n      label: 'event-type',\n      property: {\n        options: [\n          {\n            display: 'start',\n            value: 'start'\n          },\n          {\n            display: 'intermediate',\n            value: 'intermediate'\n          },\n          {\n            display: 'end',\n            value: 'end'\n          }\n        ]\n      }\n    },\n    {\n      type: 'select',\n      name: 'marker',\n      label: 'marker',\n      property: {\n        options: [\n          {\n            display: 'message',\n            value: 'message'\n          },\n          {\n            display: 'timer',\n            value: 'timer'\n          },\n          {\n            display: 'error',\n            value: 'error'\n          },\n          {\n            display: 'escalation',\n            value: 'escalation'\n          },\n          {\n            display: 'cancel',\n            value: 'cancel'\n          },\n          {\n            display: 'compensation',\n            value: 'compensation'\n          },\n          {\n            display: 'conditional',\n            value: 'conditional'\n          },\n          {\n            display: 'link',\n            value: 'link'\n          },\n          {\n            display: 'signal',\n            value: 'signal'\n          },\n          {\n            display: 'terminate',\n            value: 'terminate'\n          },\n          {\n            display: 'multiple',\n            value: 'multiple'\n          },\n          {\n            display: 'parallel multiple',\n            value: 'parallel-multiple'\n          }\n        ]\n      }\n    }\n  ],\n  help: '/bpmn/event/event'\n}\n\nexport default class BPMNEvent extends BPMNControlBase {\n  private imageElement?: HTMLImageElement\n\n  static get nature() {\n    return NATURE\n  }\n\n  render(ctx: CanvasRenderingContext2D) {\n    const { left, top, width, height } = this.bounds\n    const { lineWidth } = this.state\n    const { eventType } = this.state\n    const cx = width / 2\n    const cy = height / 2\n\n    ctx.translate(left, top)\n    ctx.beginPath()\n\n    switch (eventType) {\n      case 'intermediate':\n        this.setState('lineWidth', 2)\n\n        ctx.ellipse(cx, cy, width / 2, height / 2, 0, 0, 2 * Math.PI)\n        ctx.moveTo(width / 2 + width / 2.5, height / 2)\n        ctx.ellipse(cx, cy, width / 2.5, height / 2.5, 0, 0, 2 * Math.PI)\n        break\n      case 'end':\n        this.setState('lineWidth', 6)\n        ctx.ellipse(cx, cy, width / 2 - 1.5, height / 2 - 1.5, 0, 0, 2 * Math.PI)\n        break\n      case 'start':\n      default:\n        this.setState('lineWidth', 2)\n        ctx.ellipse(cx, cy, width / 2, height / 2, 0, 0, 2 * Math.PI)\n        break\n    }\n\n    this.drawFill(ctx)\n    this.drawStroke(ctx)\n\n    ctx.beginPath()\n\n    this.setState('lineWidth', lineWidth)\n\n    const image = this.getImageElement()\n    if (image) {\n      this.drawImage(ctx, image, width / 6, height / 6, (width * 2) / 3, (height * 2) / 3)\n    }\n\n    ctx.translate(-left, -top)\n  }\n\n  onchange(after: Properties, before: Properties) {\n    if ('marker' in after || 'strokeStyle' in after) {\n      delete this.imageElement\n    }\n  }\n\n  getImageElement(): HTMLImageElement | undefined {\n    if (!this.imageElement) {\n      const { marker, strokeStyle } = this.state\n\n      if (!marker) {\n        return\n      }\n\n      const src = IMAGES[marker]\n      if (!src) {\n        return\n      }\n\n      this.imageElement = new Image()\n      this.imageElement.src =\n        'data:image/svg+xml;charset=UTF-8;base64,' + btoa(src.replace(/{{strokeColor}}/g, strokeStyle))\n    }\n\n    return this.imageElement\n  }\n}\n\nComponent.register('bpmn-event', BPMNEvent)\n\nconst IMAGES: { [type: string]: string } = {\n  message: `\n  <svg version=\"1.1\" id=\"Layer_3\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n  viewBox=\"0 0 35 35\" style=\"enable-background:new 0 0 35 35;\" xml:space=\"preserve\">\n    <style type=\"text/css\">\n      .st0{fill:{{strokeColor}};}\n   </style>\n    <path class=\"st0\" d=\"M29.5,10.3c0-1.3-1.1-2.4-2.4-2.4H7.9c-1.3,0-2.4,1.1-2.4,2.4v14.4c0,1.3,1.1,2.4,2.4,2.4h19.2c1.3,0,2.4-1.1,2.4-2.4V10.3z\n      M27.1,9.3l-9.6,7l-9.6-7H27.1z M28.1,25.7H6.9v-16l10.6,8l10.6-8V25.7z\"/>\n  </svg>\n  `,\n  'message-fill': `\n  <svg version=\"1.1\" id=\"Layer_3\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n  viewBox=\"0 0 35 35\" style=\"enable-background:new 0 0 35 35;\" xml:space=\"preserve\">\n    <style type=\"text/css\">\n      .st0{fill:{{strokeColor}};}\n   </style>\n   <path d=\"M27.1,7.9H7.9c-1.3,0-2.4,1.1-2.4,2.4l0,14.4c0,1.3,1.1,2.4,2.4,2.4h19.2c1.3,0,2.4-1.1,2.4-2.4V10.3\n   C29.5,9,28.4,7.9,27.1,7.9z M27.1,12.7l-9.6,6l-9.6-6v-2.4l9.6,6l9.6-6V12.7z\"/>\n  </svg>\n  `,\n  timer: `\n  <svg version=\"1.1\" id=\"Layer_3\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n  viewBox=\"0 0 35 35\" style=\"enable-background:new 0 0 35 35;\" xml:space=\"preserve\">\n  <style type=\"text/css\">\n    .st0{fill:{{strokeColor}};}\n  </style>\n    <g>\n      <g id=\"XMLID_807_\">\n        <path class=\"st0\" d=\"M17.5,9.6c0.3,0,0.6-0.3,0.6-0.6V7.2c0-0.3-0.3-0.6-0.6-0.6c-0.3,0-0.6,0.3-0.6,0.6V9C16.9,9.3,17.2,9.6,17.5,9.6z\"/>\n      </g>\n      <g>\n        <path class=\"st0\" d=\"M7.4,18.2h1.8c0.3,0,0.6-0.3,0.6-0.6c0-0.3-0.3-0.6-0.6-0.6H7.4c-0.3,0-0.6,0.3-0.6,0.6C6.8,18,7,18.2,7.4,18.2z\"/>\n      </g>\n      <g>\n        <path class=\"st0\" d=\"M17.5,28.5c0.3,0,0.6-0.3,0.6-0.6v-1.8c0-0.3-0.3-0.6-0.6-0.6c-0.3,0-0.6,0.3-0.6,0.6v1.8C16.9,28.2,17.2,28.5,17.5,28.5z\n          \"/>\n      </g>\n      <g>\n        <path class=\"st0\" d=\"M25.9,18.2h1.8c0.3,0,0.6-0.3,0.6-0.6c0-0.3-0.3-0.6-0.6-0.6h-1.8c-0.3,0-0.6,0.3-0.6,0.6C25.3,18,25.5,18.2,25.9,18.2z\"\n          />\n      </g>\n      <g>\n        <path class=\"st0\" d=\"M13.2,10.9c0.1,0,0.2,0,0.3-0.1c0.3-0.2,0.4-0.5,0.2-0.8l-0.9-1.5c-0.2-0.3-0.5-0.4-0.8-0.2c-0.3,0.2-0.4,0.5-0.2,0.8\n          l0.9,1.5C12.8,10.8,13,10.9,13.2,10.9z\"/>\n      </g>\n      <g>\n        <path class=\"st0\" d=\"M9,23.5c0.1,0,0.2,0,0.3-0.1l1.5-0.9c0.3-0.2,0.4-0.5,0.2-0.8c-0.2-0.3-0.5-0.4-0.8-0.2l-1.5,0.9\n          c-0.3,0.2-0.4,0.5-0.2,0.8C8.6,23.4,8.8,23.5,9,23.5z\"/>\n      </g>\n      <g>\n        <path class=\"st0\" d=\"M22.6,27.2c0.1,0,0.2,0,0.3-0.1c0.3-0.2,0.4-0.5,0.2-0.8l-0.9-1.5c-0.2-0.3-0.5-0.4-0.8-0.2c-0.3,0.2-0.4,0.5-0.2,0.8\n          l0.9,1.5C22.2,27.1,22.4,27.2,22.6,27.2z\"/>\n      </g>\n      <g>\n        <path class=\"st0\" d=\"M25.1,14.5c0.1,0,0.2,0,0.3-0.1l1.5-0.9c0.3-0.2,0.4-0.5,0.2-0.8c-0.2-0.3-0.5-0.4-0.8-0.2l-1.5,0.9\n          c-0.3,0.2-0.4,0.5-0.2,0.8C24.7,14.4,24.9,14.5,25.1,14.5z\"/>\n      </g>\n      <g>\n        <path class=\"st0\" d=\"M10,13.8c0.2,0,0.4-0.1,0.5-0.3c0.2-0.3,0.1-0.7-0.2-0.8l-1.5-0.9c-0.3-0.2-0.7-0.1-0.8,0.2c-0.2,0.3-0.1,0.7,0.2,0.8\n          l1.5,0.9C9.8,13.8,9.9,13.8,10,13.8z\"/>\n      </g>\n      <g>\n        <path class=\"st0\" d=\"M12.4,27.1c0.2,0,0.4-0.1,0.5-0.3l0.9-1.5c0.2-0.3,0.1-0.7-0.2-0.8c-0.3-0.2-0.7-0.1-0.8,0.2l-0.9,1.5\n          c-0.2,0.3-0.1,0.7,0.2,0.8C12.2,27.1,12.3,27.1,12.4,27.1z\"/>\n      </g>\n      <g>\n        <path class=\"st0\" d=\"M26,23.5c0.2,0,0.4-0.1,0.5-0.3c0.2-0.3,0.1-0.7-0.2-0.8l-1.5-0.9c-0.3-0.2-0.7-0.1-0.8,0.2c-0.2,0.3-0.1,0.7,0.2,0.8\n          l1.5,0.9C25.8,23.5,25.9,23.5,26,23.5z\"/>\n      </g>\n      <g>\n        <path class=\"st0\" d=\"M21.8,10.8c0.2,0,0.4-0.1,0.5-0.3L23.2,9c0.2-0.3,0.1-0.7-0.2-0.8c-0.3-0.2-0.7-0.1-0.8,0.2l-0.9,1.5\n          c-0.2,0.3-0.1,0.7,0.2,0.8C21.6,10.8,21.7,10.8,21.8,10.8z\"/>\n      </g>\n      <g id=\"XMLID_806_\">\n        <path class=\"st0\" d=\"M17.5,17.7c0.4,0,0.7-0.3,0.7-0.7v-5.6c0-0.4-0.3-0.7-0.7-0.7c-0.4,0-0.7,0.3-0.7,0.7V17C16.8,17.4,17.1,17.7,17.5,17.7z\"\n          />\n      </g>\n      <g id=\"XMLID_805_\">\n        <path class=\"st0\" d=\"M17.5,18.3h3.9c0.4,0,0.7-0.3,0.7-0.7c0-0.4-0.3-0.7-0.7-0.7h-3.9c-0.4,0-0.7,0.3-0.7,0.7C16.8,17.9,17.1,18.3,17.5,18.3z\n          \"/>\n      </g>\n      <g>\n        <path class=\"st0\" d=\"M17.5,7.2c5.7,0,10.2,4.6,10.2,10.2s-4.6,10.2-10.2,10.2S7.2,23.2,7.2,17.5S11.8,7.2,17.5,7.2 M17.5,6.5\n          c-6.1,0-11,4.9-11,11s4.9,11,11,11s11-4.9,11-11S23.6,6.5,17.5,6.5L17.5,6.5z\"/>\n      </g>\n    </g>\n  </svg>\n  `,\n  error: `\n  <svg version=\"1.1\" id=\"Layer_3\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n  viewBox=\"0 0 35 35\" style=\"enable-background:new 0 0 35 35;\" xml:space=\"preserve\">\n  <style type=\"text/css\">\n    .st0{fill:{{strokeColor}};}\n  </style>\n  <g>\n    <path class=\"st0\" d=\"M9.7,10.3l11.1,6.1c0.2,0.1,0.5,0.2,0.7,0.2c0.4,0,0.7-0.1,1-0.4l4.9-4.3l-2,12.7l-10.1-6c-0.2-0.1-0.5-0.2-0.8-0.2\n      c-0.3,0-0.7,0.1-0.9,0.3l-6,4.7L9.7,10.3 M29.5,8l-8,7.1L8.5,8l-3,19l9-7.1l12,7.1L29.5,8L29.5,8z\"/>\n  </g>\n  </svg>\n  `,\n  'error-fill': `\n  <svg version=\"1.1\" id=\"Layer_3\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n  viewBox=\"0 0 35 35\" style=\"enable-background:new 0 0 35 35;\" xml:space=\"preserve\">\n  <style type=\"text/css\">\n    .st0{fill:{{strokeColor}};}\n  </style>\n  <g>\n    <polygon class=\"st0\" points=\"26.5,27 29.5,8 21.5,15.1 8.5,8 5.5,27 14.5,19.9 \t\"/>\n  </g>\n  </svg>\n  `,\n  escalation: `\n  <svg version=\"1.1\" id=\"Layer_3\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n  viewBox=\"0 0 35 35\" style=\"enable-background:new 0 0 35 35;\" xml:space=\"preserve\">\n    <style type=\"text/css\">\n    .st0{fill:none;stroke:{{strokeColor}};stroke-miterlimit:10;}\n    </style>\n    <polygon class=\"st0\" points=\"17.5,19.9 7.5,27 17.5,8 27.5,27 \"/>\n  </svg>\n  `,\n  'escalation-fill': `\n  <svg version=\"1.1\" id=\"Layer_3\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n  viewBox=\"0 0 35 35\" style=\"enable-background:new 0 0 35 35;\" xml:space=\"preserve\">\n    <style type=\"text/css\">\n    .st0{fill:{{strokeColor}};}\n    </style>\n    <polygon class=\"st0\" points=\"17.5,19.9 7.5,27 17.5,8 27.5,27 \"/>\n  </svg>\n  `,\n  cancel: `\n  <svg version=\"1.1\" id=\"Layer_3\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n  viewBox=\"0 0 35 35\" style=\"enable-background:new 0 0 35 35;\" xml:space=\"preserve\">\n    <style type=\"text/css\">\n    .st0{fill:{{strokeColor}};}\n    </style>\n    <path class=\"st0\" d=\"M24.4,8.8l1.8,1.8l-6.9,6.9l6.9,6.9l-1.8,1.8l-6.9-6.9l-6.9,6.9l-1.8-1.8l6.9-6.9l-6.9-6.9l1.8-1.8l6.9,6.9L24.4,8.8\n\t\t M24.4,7.4l-0.7,0.7l-6.2,6.2l-6.2-6.2l-0.7-0.7L9.9,8.1L8.1,9.9l-0.7,0.7l0.7,0.7l6.2,6.2l-6.2,6.2l-0.7,0.7l0.7,0.7l1.8,1.8\n\t\tl0.7,0.7l0.7-0.7l6.2-6.2l6.2,6.2l0.7,0.7l0.7-0.7l1.8-1.8l0.7-0.7l-0.7-0.7l-6.2-6.2l6.2-6.2l0.7-0.7l-0.7-0.7l-1.8-1.8L24.4,7.4\n\t\tL24.4,7.4z\"/>\n  </svg>\n  `,\n  'cancel-fill': `\n  <svg version=\"1.1\" id=\"Layer_3\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n  viewBox=\"0 0 35 35\" style=\"enable-background:new 0 0 35 35;\" xml:space=\"preserve\">\n    <style type=\"text/css\">\n      .st0{fill:{{strokeColor}};}\n    </style>\n    <g>\n      <rect class=\"st0\" x=\"6.5\" y=\"16.3\" transform=\"matrix(0.7071 -0.7071 0.7071 0.7071 -7.2487 17.5)\" width=\"22\" height=\"2.5\"/>\n    </g>\n    <g>\n      <rect class=\"st0\" x=\"16.2\" y=\"6.5\" transform=\"matrix(0.7071 -0.7071 0.7071 0.7071 -7.2487 17.5)\" width=\"2.5\" height=\"22\"/>\n    </g>\n  </svg>\n  `,\n  compensation: `\n  <svg version=\"1.1\" id=\"Layer_3\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n  viewBox=\"0 0 35 35\" style=\"enable-background:new 0 0 35 35;\" xml:space=\"preserve\">\n    <style type=\"text/css\">\n     .st0{fill:{{strokeColor}};}\n    </style>\n    <path class=\"st0\" d=\"M17,10.4v14.2l-7.1-7.1L17,10.4 M18,8l-9.5,9.5L18,27V8L18,8z M8.5,17.5L8.5,17.5L8.5,17.5L8.5,17.5L8.5,17.5z\"/>\n    <path class=\"st0\" d=\"M25.5,10.4v14.2l-7.1-7.1L25.5,10.4 M26.5,8L17,17.5l9.5,9.5V8L26.5,8z M17,17.5L17,17.5L17,17.5L17,17.5L17,17.5z\"/>\n  </svg>\n  `,\n  'compensation-fill': `\n  <svg version=\"1.1\" id=\"Layer_3\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n  viewBox=\"0 0 35 35\" style=\"enable-background:new 0 0 35 35;\" xml:space=\"preserve\">\n    <style type=\"text/css\">\n     .st0{fill:{{strokeColor}};}\n    </style>\n    <polygon class=\"st0\" points=\"8.5,17.5 18,8 18,27 8.5,17.5 \t\t\"/>\n    <polygon class=\"st0\" points=\"17,17.5 26.5,8 26.5,27 17,17.5 \t\t\"/>\n  </svg>\n  `,\n  conditional: `\n  <svg version=\"1.1\" id=\"Layer_3\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n  viewBox=\"0 0 35 35\" style=\"enable-background:new 0 0 35 35;\" xml:space=\"preserve\">\n    <style type=\"text/css\">\n     .st0{fill:{{strokeColor}};}\n    </style>\n    <g>\n      <path class=\"st0\" d=\"M28.6,11.1v14.8H6.5V11.1h20.3 M26.8,8H8.2c-1.5,0-2.7,1-2.7,2.1v15.8c0,1.2,1.2,1.1,2.7,1.1h18.7c1.5,0,2.7,0.1,2.7-1.1\n        V10.1C29.5,8.9,28.3,8,26.8,8L26.8,8z\"/>\n    </g>\n    <path class=\"st0\" d=\"M27.5,23.5h-20v-1h20V23.5z M27.5,17.8h-20v-1h20V17.8z M27.5,14.9h-20v-1h20V14.9z M27.5,20.6h-20v-1h20V20.6z\"/>\n  </svg>\n  `,\n  link: `\n  <svg version=\"1.1\" id=\"Layer_3\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n  viewBox=\"0 0 35 35\" style=\"enable-background:new 0 0 35 35;\" xml:space=\"preserve\">\n    <style type=\"text/css\">\n     .st0{fill:none;stroke:{{strokeColor}};stroke-miterlimit:10;}\n    </style>\n    <path class=\"st0\" d=\"M19,13.8V8l9.5,9.5L19,27v-5.8H6.5v-7.5H19z\"/>\n  </svg>\n  `,\n  'link-fill': `\n  <svg version=\"1.1\" id=\"Layer_3\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n  viewBox=\"0 0 35 35\" style=\"enable-background:new 0 0 35 35;\" xml:space=\"preserve\">\n    <style type=\"text/css\">\n     .st0{fill:{{strokeColor}};}\n    </style>\n    <path class=\"st0\" d=\"M19,13.8V8l9.5,9.5L19,27v-5.8H6.5v-7.5H19z\"/>\n  </svg>\n  `,\n  signal: `\n  <svg version=\"1.1\" id=\"Layer_3\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n  viewBox=\"0 0 35 35\" style=\"enable-background:new 0 0 35 35;\" xml:space=\"preserve\">\n    <style type=\"text/css\">\n     .st0{fill:none;stroke:{{strokeColor}};stroke-miterlimit:10;}\n    </style>\n    <polygon class=\"st0\" points=\"17.5,26.9 7.5,27 17.5,8 27.5,27 \"/>\n  </svg>\n  `,\n  'signal-fill': `\n  <svg version=\"1.1\" id=\"Layer_3\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n  viewBox=\"0 0 35 35\" style=\"enable-background:new 0 0 35 35;\" xml:space=\"preserve\">\n    <style type=\"text/css\">\n     .st0{fill:{{strokeColor}};}\n    </style>\n    <polygon class=\"st0\" points=\"17.5,26.9 7.5,27 17.5,8 27.5,27 \"/>\n  </svg>\n  `,\n  terminate: `\n  <svg version=\"1.1\" id=\"Layer_3\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n  viewBox=\"0 0 35 35\" style=\"enable-background:new 0 0 35 35;\" xml:space=\"preserve\">\n    <style type=\"text/css\">\n     .st0{fill:{{strokeColor}};}\n    </style>\n    <circle class=\"st0\" cx=\"17.5\" cy=\"17.5\" r=\"11.5\"/>\n  </svg>\n  `,\n  multiple: `\n  <svg version=\"1.1\" id=\"Layer_3\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n  viewBox=\"0 0 35 35\" style=\"enable-background:new 0 0 35 35;\" xml:space=\"preserve\">\n    <style type=\"text/css\">\n     .st0{stroke:{{strokeColor}};}\n    </style>\n    <path class=\"st0\" d=\"M17.5,9.2l8.8,6.4L23,26H12L8.7,15.6L17.5,9.2 M17.5,8l-10,7.3L11.3,27h12.4l3.8-11.8L17.5,8L17.5,8z\"/>\n  </svg>\n  `,\n  'multiple-fill': `\n  <svg version=\"1.1\" id=\"Layer_3\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n  viewBox=\"0 0 35 35\" style=\"enable-background:new 0 0 35 35;\" xml:space=\"preserve\">\n    <style type=\"text/css\">\n     .st0{fill:{{strokeColor}};}\n    </style>\n    <polygon class=\"st0\" points=\"17.5,8 7.5,15.3 11.3,27 23.7,27 27.5,15.3 \t\"/>\n  </svg>\n  `,\n  'parallel-multiple': `\n  <svg version=\"1.1\" id=\"Layer_3\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n  viewBox=\"0 0 35 35\" style=\"enable-background:new 0 0 35 35;\" xml:space=\"preserve\">\n    <style type=\"text/css\">\n     .st0{fill:none;stroke:{{strokeColor}};stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}\n     .st1{fill:{{strokeColor}};}\n    </style>\n    <path class=\"st1\" d=\"M18.4,10v6.6H25l0,1.7h-6.6V25h-1.7l0-6.6H10v-1.7h6.6V10H18.4 M19.4,9h-1h-1.7h-1v1v5.6H10H9v1v1.7v1h1h5.6l0,5.6v1h1h1.7\n\t\th1v-1v-5.6H25h1l0-1l0-1.7l0-1h-1h-5.6V10V9L19.4,9z\"/>\n    <circle class=\"st0\" cx=\"17.5\" cy=\"17.5\" r=\"12\"/>\n  </svg>\n  `\n}\n"]}
+{"version":3,"file":"bpmn-event.js","sourceRoot":"","sources":["../src/bpmn-event.ts"],"names":[],"mappings":"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","sourcesContent":["import { BOUNDS, Component, Properties } from '@hatiolab/things-scene'\n\nimport BPMNControlBase from './base/bpmn-control-base'\n\nenum BEHAVIOR {\n  catching,\n  throwing\n}\n\nconst NATURE = {\n  mutable: false,\n  resizable: true,\n  rotatable: false,\n  properties: [\n    {\n      type: 'select',\n      name: 'eventType',\n      label: 'event-type',\n      property: {\n        options: [\n          {\n            display: 'start',\n            value: 'start'\n          },\n          {\n            display: 'intermediate',\n            value: 'intermediate'\n          },\n          {\n            display: 'end',\n            value: 'end'\n          }\n        ]\n      }\n    },\n    {\n      type: 'select',\n      name: 'marker',\n      label: 'marker',\n      property: {\n        options: [\n          {\n            display: 'message',\n            value: 'message'\n          },\n          {\n            display: 'timer',\n            value: 'timer'\n          },\n          {\n            display: 'error',\n            value: 'error'\n          },\n          {\n            display: 'escalation',\n            value: 'escalation'\n          },\n          {\n            display: 'cancel',\n            value: 'cancel'\n          },\n          {\n            display: 'compensation',\n            value: 'compensation'\n          },\n          {\n            display: 'conditional',\n            value: 'conditional'\n          },\n          {\n            display: 'link',\n            value: 'link'\n          },\n          {\n            display: 'signal',\n            value: 'signal'\n          },\n          {\n            display: 'terminate',\n            value: 'terminate'\n          },\n          {\n            display: 'multiple',\n            value: 'multiple'\n          },\n          {\n            display: 'parallel multiple',\n            value: 'parallel-multiple'\n          }\n        ]\n      }\n    },\n    {\n      type: 'checkbox',\n      label: 'interrupting',\n      name: 'interrupting'\n    }\n  ],\n  help: '/bpmn/event/event'\n}\n\nexport default class BPMNEvent extends BPMNControlBase {\n  private imageElement?: HTMLImageElement\n\n  static get nature() {\n    return NATURE\n  }\n\n  get textBounds(): BOUNDS {\n    var { left, top, width, height } = this.bounds\n    var { paddingTop, paddingLeft, paddingRight } = this.state\n\n    paddingTop ||= 0\n    paddingLeft ||= 0\n    paddingRight ||= 0\n\n    return {\n      left: left + paddingLeft,\n      top: top + paddingTop + height + 10,\n      width: Math.max(width - paddingLeft - paddingRight, 0),\n      height: 0\n    }\n  }\n\n  render(ctx: CanvasRenderingContext2D) {\n    const { left, top, width, height } = this.bounds\n    const { eventType, interrupting } = this.state\n    const cx = width / 2\n    const cy = height / 2\n\n    ctx.translate(left, top)\n    ctx.beginPath()\n\n    var lineWidth = 2\n\n    switch (eventType) {\n      case 'intermediate':\n        lineWidth = 1\n        ctx.ellipse(cx, cy, width / 2, height / 2, 0, 0, 2 * Math.PI)\n        ctx.moveTo(width / 2 + width / 2.5, height / 2)\n        ctx.ellipse(cx, cy, width / 2.5, height / 2.5, 0, 0, 2 * Math.PI)\n        break\n\n      case 'end':\n        lineWidth = 5\n        ctx.ellipse(cx, cy, width / 2 - 1.5, height / 2 - 1.5, 0, 0, 2 * Math.PI)\n        break\n\n      case 'start':\n      default:\n        ctx.ellipse(cx, cy, width / 2, height / 2, 0, 0, 2 * Math.PI)\n        break\n    }\n\n    this.drawFill(ctx)\n\n    this.drawStroke(ctx, {\n      lineWidth,\n      lineDash: interrupting ? 'round-dot' : 'solid'\n    })\n\n    ctx.beginPath()\n\n    const image = this.getImageElement()\n    if (image) {\n      this.drawImage(ctx, image, width / 6, height / 6, (width * 2) / 3, (height * 2) / 3)\n    }\n\n    ctx.translate(-left, -top)\n  }\n\n  onchange(after: Properties, before: Properties) {\n    if ('marker' in after || 'strokeStyle' in after) {\n      // Since strokeStyle affects the image, the image is redrawn according to the change of strokeStyle.\n      delete this.imageElement\n      this.invalidate()\n    }\n  }\n\n  getImageElement(): HTMLImageElement | undefined {\n    if (!this.imageElement) {\n      const { marker, strokeStyle } = this.state\n\n      if (!marker) {\n        return\n      }\n\n      const src = IMAGES[marker]\n      if (!src) {\n        return\n      }\n\n      this.imageElement = new Image()\n      this.imageElement.src =\n        'data:image/svg+xml;charset=UTF-8;base64,' + btoa(src.replace(/{{strokeColor}}/g, strokeStyle))\n    }\n\n    return this.imageElement\n  }\n}\n\nComponent.register('bpmn-event', BPMNEvent)\n\nconst IMAGES: { [type: string]: string } = {\n  message: `\n  <svg version=\"1.1\" id=\"Layer_3\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n  viewBox=\"0 0 35 35\" style=\"enable-background:new 0 0 35 35;\" xml:space=\"preserve\">\n    <style type=\"text/css\">\n      .st0{fill:{{strokeColor}};}\n   </style>\n    <path class=\"st0\" d=\"M29.5,10.3c0-1.3-1.1-2.4-2.4-2.4H7.9c-1.3,0-2.4,1.1-2.4,2.4v14.4c0,1.3,1.1,2.4,2.4,2.4h19.2c1.3,0,2.4-1.1,2.4-2.4V10.3z\n      M27.1,9.3l-9.6,7l-9.6-7H27.1z M28.1,25.7H6.9v-16l10.6,8l10.6-8V25.7z\"/>\n  </svg>\n  `,\n  'message-fill': `\n  <svg version=\"1.1\" id=\"Layer_3\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n  viewBox=\"0 0 35 35\" style=\"enable-background:new 0 0 35 35;\" xml:space=\"preserve\">\n    <style type=\"text/css\">\n      .st0{fill:{{strokeColor}};}\n   </style>\n   <path d=\"M27.1,7.9H7.9c-1.3,0-2.4,1.1-2.4,2.4l0,14.4c0,1.3,1.1,2.4,2.4,2.4h19.2c1.3,0,2.4-1.1,2.4-2.4V10.3\n   C29.5,9,28.4,7.9,27.1,7.9z M27.1,12.7l-9.6,6l-9.6-6v-2.4l9.6,6l9.6-6V12.7z\"/>\n  </svg>\n  `,\n  timer: `\n  <svg version=\"1.1\" id=\"Layer_3\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n  viewBox=\"0 0 35 35\" style=\"enable-background:new 0 0 35 35;\" xml:space=\"preserve\">\n  <style type=\"text/css\">\n    .st0{fill:{{strokeColor}};}\n  </style>\n    <g>\n      <g id=\"XMLID_807_\">\n        <path class=\"st0\" d=\"M17.5,9.6c0.3,0,0.6-0.3,0.6-0.6V7.2c0-0.3-0.3-0.6-0.6-0.6c-0.3,0-0.6,0.3-0.6,0.6V9C16.9,9.3,17.2,9.6,17.5,9.6z\"/>\n      </g>\n      <g>\n        <path class=\"st0\" d=\"M7.4,18.2h1.8c0.3,0,0.6-0.3,0.6-0.6c0-0.3-0.3-0.6-0.6-0.6H7.4c-0.3,0-0.6,0.3-0.6,0.6C6.8,18,7,18.2,7.4,18.2z\"/>\n      </g>\n      <g>\n        <path class=\"st0\" d=\"M17.5,28.5c0.3,0,0.6-0.3,0.6-0.6v-1.8c0-0.3-0.3-0.6-0.6-0.6c-0.3,0-0.6,0.3-0.6,0.6v1.8C16.9,28.2,17.2,28.5,17.5,28.5z\n          \"/>\n      </g>\n      <g>\n        <path class=\"st0\" d=\"M25.9,18.2h1.8c0.3,0,0.6-0.3,0.6-0.6c0-0.3-0.3-0.6-0.6-0.6h-1.8c-0.3,0-0.6,0.3-0.6,0.6C25.3,18,25.5,18.2,25.9,18.2z\"\n          />\n      </g>\n      <g>\n        <path class=\"st0\" d=\"M13.2,10.9c0.1,0,0.2,0,0.3-0.1c0.3-0.2,0.4-0.5,0.2-0.8l-0.9-1.5c-0.2-0.3-0.5-0.4-0.8-0.2c-0.3,0.2-0.4,0.5-0.2,0.8\n          l0.9,1.5C12.8,10.8,13,10.9,13.2,10.9z\"/>\n      </g>\n      <g>\n        <path class=\"st0\" d=\"M9,23.5c0.1,0,0.2,0,0.3-0.1l1.5-0.9c0.3-0.2,0.4-0.5,0.2-0.8c-0.2-0.3-0.5-0.4-0.8-0.2l-1.5,0.9\n          c-0.3,0.2-0.4,0.5-0.2,0.8C8.6,23.4,8.8,23.5,9,23.5z\"/>\n      </g>\n      <g>\n        <path class=\"st0\" d=\"M22.6,27.2c0.1,0,0.2,0,0.3-0.1c0.3-0.2,0.4-0.5,0.2-0.8l-0.9-1.5c-0.2-0.3-0.5-0.4-0.8-0.2c-0.3,0.2-0.4,0.5-0.2,0.8\n          l0.9,1.5C22.2,27.1,22.4,27.2,22.6,27.2z\"/>\n      </g>\n      <g>\n        <path class=\"st0\" d=\"M25.1,14.5c0.1,0,0.2,0,0.3-0.1l1.5-0.9c0.3-0.2,0.4-0.5,0.2-0.8c-0.2-0.3-0.5-0.4-0.8-0.2l-1.5,0.9\n          c-0.3,0.2-0.4,0.5-0.2,0.8C24.7,14.4,24.9,14.5,25.1,14.5z\"/>\n      </g>\n      <g>\n        <path class=\"st0\" d=\"M10,13.8c0.2,0,0.4-0.1,0.5-0.3c0.2-0.3,0.1-0.7-0.2-0.8l-1.5-0.9c-0.3-0.2-0.7-0.1-0.8,0.2c-0.2,0.3-0.1,0.7,0.2,0.8\n          l1.5,0.9C9.8,13.8,9.9,13.8,10,13.8z\"/>\n      </g>\n      <g>\n        <path class=\"st0\" d=\"M12.4,27.1c0.2,0,0.4-0.1,0.5-0.3l0.9-1.5c0.2-0.3,0.1-0.7-0.2-0.8c-0.3-0.2-0.7-0.1-0.8,0.2l-0.9,1.5\n          c-0.2,0.3-0.1,0.7,0.2,0.8C12.2,27.1,12.3,27.1,12.4,27.1z\"/>\n      </g>\n      <g>\n        <path class=\"st0\" d=\"M26,23.5c0.2,0,0.4-0.1,0.5-0.3c0.2-0.3,0.1-0.7-0.2-0.8l-1.5-0.9c-0.3-0.2-0.7-0.1-0.8,0.2c-0.2,0.3-0.1,0.7,0.2,0.8\n          l1.5,0.9C25.8,23.5,25.9,23.5,26,23.5z\"/>\n      </g>\n      <g>\n        <path class=\"st0\" d=\"M21.8,10.8c0.2,0,0.4-0.1,0.5-0.3L23.2,9c0.2-0.3,0.1-0.7-0.2-0.8c-0.3-0.2-0.7-0.1-0.8,0.2l-0.9,1.5\n          c-0.2,0.3-0.1,0.7,0.2,0.8C21.6,10.8,21.7,10.8,21.8,10.8z\"/>\n      </g>\n      <g id=\"XMLID_806_\">\n        <path class=\"st0\" d=\"M17.5,17.7c0.4,0,0.7-0.3,0.7-0.7v-5.6c0-0.4-0.3-0.7-0.7-0.7c-0.4,0-0.7,0.3-0.7,0.7V17C16.8,17.4,17.1,17.7,17.5,17.7z\"\n          />\n      </g>\n      <g id=\"XMLID_805_\">\n        <path class=\"st0\" d=\"M17.5,18.3h3.9c0.4,0,0.7-0.3,0.7-0.7c0-0.4-0.3-0.7-0.7-0.7h-3.9c-0.4,0-0.7,0.3-0.7,0.7C16.8,17.9,17.1,18.3,17.5,18.3z\n          \"/>\n      </g>\n      <g>\n        <path class=\"st0\" d=\"M17.5,7.2c5.7,0,10.2,4.6,10.2,10.2s-4.6,10.2-10.2,10.2S7.2,23.2,7.2,17.5S11.8,7.2,17.5,7.2 M17.5,6.5\n          c-6.1,0-11,4.9-11,11s4.9,11,11,11s11-4.9,11-11S23.6,6.5,17.5,6.5L17.5,6.5z\"/>\n      </g>\n    </g>\n  </svg>\n  `,\n  error: `\n  <svg version=\"1.1\" id=\"Layer_3\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n  viewBox=\"0 0 35 35\" style=\"enable-background:new 0 0 35 35;\" xml:space=\"preserve\">\n  <style type=\"text/css\">\n    .st0{fill:{{strokeColor}};}\n  </style>\n  <g>\n    <path class=\"st0\" d=\"M9.7,10.3l11.1,6.1c0.2,0.1,0.5,0.2,0.7,0.2c0.4,0,0.7-0.1,1-0.4l4.9-4.3l-2,12.7l-10.1-6c-0.2-0.1-0.5-0.2-0.8-0.2\n      c-0.3,0-0.7,0.1-0.9,0.3l-6,4.7L9.7,10.3 M29.5,8l-8,7.1L8.5,8l-3,19l9-7.1l12,7.1L29.5,8L29.5,8z\"/>\n  </g>\n  </svg>\n  `,\n  'error-fill': `\n  <svg version=\"1.1\" id=\"Layer_3\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n  viewBox=\"0 0 35 35\" style=\"enable-background:new 0 0 35 35;\" xml:space=\"preserve\">\n  <style type=\"text/css\">\n    .st0{fill:{{strokeColor}};}\n  </style>\n  <g>\n    <polygon class=\"st0\" points=\"26.5,27 29.5,8 21.5,15.1 8.5,8 5.5,27 14.5,19.9 \t\"/>\n  </g>\n  </svg>\n  `,\n  escalation: `\n  <svg version=\"1.1\" id=\"Layer_3\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n  viewBox=\"0 0 35 35\" style=\"enable-background:new 0 0 35 35;\" xml:space=\"preserve\">\n    <style type=\"text/css\">\n    .st0{fill:none;stroke:{{strokeColor}};stroke-miterlimit:10;}\n    </style>\n    <polygon class=\"st0\" points=\"17.5,19.9 7.5,27 17.5,8 27.5,27 \"/>\n  </svg>\n  `,\n  'escalation-fill': `\n  <svg version=\"1.1\" id=\"Layer_3\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n  viewBox=\"0 0 35 35\" style=\"enable-background:new 0 0 35 35;\" xml:space=\"preserve\">\n    <style type=\"text/css\">\n    .st0{fill:{{strokeColor}};}\n    </style>\n    <polygon class=\"st0\" points=\"17.5,19.9 7.5,27 17.5,8 27.5,27 \"/>\n  </svg>\n  `,\n  cancel: `\n  <svg version=\"1.1\" id=\"Layer_3\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n  viewBox=\"0 0 35 35\" style=\"enable-background:new 0 0 35 35;\" xml:space=\"preserve\">\n    <style type=\"text/css\">\n    .st0{fill:{{strokeColor}};}\n    </style>\n    <path class=\"st0\" d=\"M24.4,8.8l1.8,1.8l-6.9,6.9l6.9,6.9l-1.8,1.8l-6.9-6.9l-6.9,6.9l-1.8-1.8l6.9-6.9l-6.9-6.9l1.8-1.8l6.9,6.9L24.4,8.8\n\t\t M24.4,7.4l-0.7,0.7l-6.2,6.2l-6.2-6.2l-0.7-0.7L9.9,8.1L8.1,9.9l-0.7,0.7l0.7,0.7l6.2,6.2l-6.2,6.2l-0.7,0.7l0.7,0.7l1.8,1.8\n\t\tl0.7,0.7l0.7-0.7l6.2-6.2l6.2,6.2l0.7,0.7l0.7-0.7l1.8-1.8l0.7-0.7l-0.7-0.7l-6.2-6.2l6.2-6.2l0.7-0.7l-0.7-0.7l-1.8-1.8L24.4,7.4\n\t\tL24.4,7.4z\"/>\n  </svg>\n  `,\n  'cancel-fill': `\n  <svg version=\"1.1\" id=\"Layer_3\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n  viewBox=\"0 0 35 35\" style=\"enable-background:new 0 0 35 35;\" xml:space=\"preserve\">\n    <style type=\"text/css\">\n      .st0{fill:{{strokeColor}};}\n    </style>\n    <g>\n      <rect class=\"st0\" x=\"6.5\" y=\"16.3\" transform=\"matrix(0.7071 -0.7071 0.7071 0.7071 -7.2487 17.5)\" width=\"22\" height=\"2.5\"/>\n    </g>\n    <g>\n      <rect class=\"st0\" x=\"16.2\" y=\"6.5\" transform=\"matrix(0.7071 -0.7071 0.7071 0.7071 -7.2487 17.5)\" width=\"2.5\" height=\"22\"/>\n    </g>\n  </svg>\n  `,\n  compensation: `\n  <svg version=\"1.1\" id=\"Layer_3\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n  viewBox=\"0 0 35 35\" style=\"enable-background:new 0 0 35 35;\" xml:space=\"preserve\">\n    <style type=\"text/css\">\n     .st0{fill:{{strokeColor}};}\n    </style>\n    <path class=\"st0\" d=\"M17,10.4v14.2l-7.1-7.1L17,10.4 M18,8l-9.5,9.5L18,27V8L18,8z M8.5,17.5L8.5,17.5L8.5,17.5L8.5,17.5L8.5,17.5z\"/>\n    <path class=\"st0\" d=\"M25.5,10.4v14.2l-7.1-7.1L25.5,10.4 M26.5,8L17,17.5l9.5,9.5V8L26.5,8z M17,17.5L17,17.5L17,17.5L17,17.5L17,17.5z\"/>\n  </svg>\n  `,\n  'compensation-fill': `\n  <svg version=\"1.1\" id=\"Layer_3\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n  viewBox=\"0 0 35 35\" style=\"enable-background:new 0 0 35 35;\" xml:space=\"preserve\">\n    <style type=\"text/css\">\n     .st0{fill:{{strokeColor}};}\n    </style>\n    <polygon class=\"st0\" points=\"8.5,17.5 18,8 18,27 8.5,17.5 \t\t\"/>\n    <polygon class=\"st0\" points=\"17,17.5 26.5,8 26.5,27 17,17.5 \t\t\"/>\n  </svg>\n  `,\n  conditional: `\n  <svg version=\"1.1\" id=\"Layer_3\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n  viewBox=\"0 0 35 35\" style=\"enable-background:new 0 0 35 35;\" xml:space=\"preserve\">\n    <style type=\"text/css\">\n     .st0{fill:{{strokeColor}};}\n    </style>\n    <g>\n      <path class=\"st0\" d=\"M28.6,11.1v14.8H6.5V11.1h20.3 M26.8,8H8.2c-1.5,0-2.7,1-2.7,2.1v15.8c0,1.2,1.2,1.1,2.7,1.1h18.7c1.5,0,2.7,0.1,2.7-1.1\n        V10.1C29.5,8.9,28.3,8,26.8,8L26.8,8z\"/>\n    </g>\n    <path class=\"st0\" d=\"M27.5,23.5h-20v-1h20V23.5z M27.5,17.8h-20v-1h20V17.8z M27.5,14.9h-20v-1h20V14.9z M27.5,20.6h-20v-1h20V20.6z\"/>\n  </svg>\n  `,\n  link: `\n  <svg version=\"1.1\" id=\"Layer_3\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n  viewBox=\"0 0 35 35\" style=\"enable-background:new 0 0 35 35;\" xml:space=\"preserve\">\n    <style type=\"text/css\">\n     .st0{fill:none;stroke:{{strokeColor}};stroke-miterlimit:10;}\n    </style>\n    <path class=\"st0\" d=\"M19,13.8V8l9.5,9.5L19,27v-5.8H6.5v-7.5H19z\"/>\n  </svg>\n  `,\n  'link-fill': `\n  <svg version=\"1.1\" id=\"Layer_3\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n  viewBox=\"0 0 35 35\" style=\"enable-background:new 0 0 35 35;\" xml:space=\"preserve\">\n    <style type=\"text/css\">\n     .st0{fill:{{strokeColor}};}\n    </style>\n    <path class=\"st0\" d=\"M19,13.8V8l9.5,9.5L19,27v-5.8H6.5v-7.5H19z\"/>\n  </svg>\n  `,\n  signal: `\n  <svg version=\"1.1\" id=\"Layer_3\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n  viewBox=\"0 0 35 35\" style=\"enable-background:new 0 0 35 35;\" xml:space=\"preserve\">\n    <style type=\"text/css\">\n     .st0{fill:none;stroke:{{strokeColor}};stroke-miterlimit:10;}\n    </style>\n    <polygon class=\"st0\" points=\"17.5,26.9 7.5,27 17.5,8 27.5,27 \"/>\n  </svg>\n  `,\n  'signal-fill': `\n  <svg version=\"1.1\" id=\"Layer_3\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n  viewBox=\"0 0 35 35\" style=\"enable-background:new 0 0 35 35;\" xml:space=\"preserve\">\n    <style type=\"text/css\">\n     .st0{fill:{{strokeColor}};}\n    </style>\n    <polygon class=\"st0\" points=\"17.5,26.9 7.5,27 17.5,8 27.5,27 \"/>\n  </svg>\n  `,\n  terminate: `\n  <svg version=\"1.1\" id=\"Layer_3\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n  viewBox=\"0 0 35 35\" style=\"enable-background:new 0 0 35 35;\" xml:space=\"preserve\">\n    <style type=\"text/css\">\n     .st0{fill:{{strokeColor}};}\n    </style>\n    <circle class=\"st0\" cx=\"17.5\" cy=\"17.5\" r=\"11.5\"/>\n  </svg>\n  `,\n  multiple: `\n  <svg version=\"1.1\" id=\"Layer_3\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n  viewBox=\"0 0 35 35\" style=\"enable-background:new 0 0 35 35;\" xml:space=\"preserve\">\n    <style type=\"text/css\">\n     .st0{stroke:{{strokeColor}};}\n    </style>\n    <path class=\"st0\" d=\"M17.5,9.2l8.8,6.4L23,26H12L8.7,15.6L17.5,9.2 M17.5,8l-10,7.3L11.3,27h12.4l3.8-11.8L17.5,8L17.5,8z\"/>\n  </svg>\n  `,\n  'multiple-fill': `\n  <svg version=\"1.1\" id=\"Layer_3\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n  viewBox=\"0 0 35 35\" style=\"enable-background:new 0 0 35 35;\" xml:space=\"preserve\">\n    <style type=\"text/css\">\n     .st0{fill:{{strokeColor}};}\n    </style>\n    <polygon class=\"st0\" points=\"17.5,8 7.5,15.3 11.3,27 23.7,27 27.5,15.3 \t\"/>\n  </svg>\n  `,\n  'parallel-multiple': `\n  <svg version=\"1.1\" id=\"Layer_3\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n  viewBox=\"0 0 35 35\" style=\"enable-background:new 0 0 35 35;\" xml:space=\"preserve\">\n    <style type=\"text/css\">\n     .st0{fill:none;stroke:{{strokeColor}};stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}\n     .st1{fill:{{strokeColor}};}\n    </style>\n    <path class=\"st1\" d=\"M18.4,10v6.6H25l0,1.7h-6.6V25h-1.7l0-6.6H10v-1.7h6.6V10H18.4 M19.4,9h-1h-1.7h-1v1v5.6H10H9v1v1.7v1h1h5.6l0,5.6v1h1h1.7\n\t\th1v-1v-5.6H25h1l0-1l0-1.7l0-1h-1h-5.6V10V9L19.4,9z\"/>\n    <circle class=\"st0\" cx=\"17.5\" cy=\"17.5\" r=\"12\"/>\n  </svg>\n  `\n}\n"]}

package/dist/bpmn-expanded-subprocess.d.ts

@@ -4,11 +4,22 @@ export default class BPMNExpandedSubprocess extends BPMNContainerBase {
         mutable: boolean;
         resizable: boolean;
         rotatable: boolean;
-        properties: {
+        properties: ({
             type: string;
             name: string;
             label: string;
-        }[];
+            property?: undefined;
+        } | {
+            type: string;
+            label: string;
+            name: string;
+            property: {
+                options: {
+                    display: string;
+                    value: string;
+                }[];
+            };
+        })[];
         help: string;
     };
     render(ctx: CanvasRenderingContext2D): void;