@operato/scene-bpmn 1.1.8 → 1.1.10

package/dist/bpmn-expanded-subprocess.js

@@ -14,6 +14,77 @@ const NATURE = {
             type: 'checkbox',
             label: 'call-activity',
             name: 'callActivity'
+        },
+        {
+            type: 'checkbox',
+            label: 'transaction',
+            name: 'transaction'
+        },
+        {
+            type: 'checkbox',
+            label: 'interrupting',
+            name: 'interrupting'
+        },
+        {
+            type: 'select',
+            label: 'event',
+            name: 'event',
+            property: {
+                options: [
+                    {
+                        display: '',
+                        value: ''
+                    },
+                    {
+                        display: 'message',
+                        value: 'message'
+                    },
+                    {
+                        display: 'timer',
+                        value: 'timer'
+                    },
+                    {
+                        display: 'error',
+                        value: 'error'
+                    },
+                    {
+                        display: 'escalation',
+                        value: 'escalation'
+                    },
+                    {
+                        display: 'cancel',
+                        value: 'cancel'
+                    },
+                    {
+                        display: 'compensation',
+                        value: 'compensation'
+                    },
+                    {
+                        display: 'conditional',
+                        value: 'conditional'
+                    },
+                    {
+                        display: 'link',
+                        value: 'link'
+                    },
+                    {
+                        display: 'signal',
+                        value: 'signal'
+                    },
+                    {
+                        display: 'terminate',
+                        value: 'terminate'
+                    },
+                    {
+                        display: 'multiple',
+                        value: 'multiple'
+                    },
+                    {
+                        display: 'parallel multiple',
+                        value: 'parallel-multiple'
+                    }
+                ]
+            }
         }
     ],
     help: '/bpmn/expanded-subprocess/expanded-subprocess'
@@ -24,8 +95,8 @@ export default class BPMNExpandedSubprocess extends BPMNContainerBase {
     }
     render(ctx) {
         const { left, top, width, height } = this.bounds;
-        const { callActivity } = this.state;
-        const radius = 9;
+        const { callActivity, interrupting, transaction } = this.state;
+        var radius = 9;
         ctx.translate(left, top);
         ctx.beginPath();
         ctx.moveTo(radius, 0);
@@ -33,8 +104,25 @@ export default class BPMNExpandedSubprocess extends BPMNContainerBase {
         ctx.arcTo(width, height, 0, height, radius);
         ctx.arcTo(0, height, 0, 0, radius);
         ctx.arcTo(0, 0, width, 0, radius);
+        if (transaction) {
+            const LINEGAP = 3;
+            radius -= LINEGAP;
+            ctx.moveTo(radius + LINEGAP, LINEGAP);
+            ctx.arcTo(width - LINEGAP, LINEGAP, width - LINEGAP, height - LINEGAP, radius);
+            ctx.arcTo(width - LINEGAP, height - LINEGAP, LINEGAP, height, radius);
+            ctx.arcTo(LINEGAP, height - LINEGAP, LINEGAP, LINEGAP, radius);
+            ctx.arcTo(LINEGAP, LINEGAP, width - LINEGAP, LINEGAP, radius);
+        }
         this.drawFill(ctx);
-        this.drawStroke(ctx, callActivity ? { lineWidth: 5 } : undefined);
+        if (callActivity) {
+            this.drawStroke(ctx, { lineWidth: 5 });
+        }
+        else {
+            this.drawStroke(ctx, {
+                lineWidth: transaction ? 1 : 2,
+                lineDash: interrupting ? 'dash' : 'solid'
+            });
+        }
         ctx.translate(-left, -top);
     }
     get textHidden() {

package/dist/bpmn-expanded-subprocess.js.map

@@ -1 +1 @@
-{"version":3,"file":"bpmn-expanded-subprocess.js","sourceRoot":"","sources":["../src/bpmn-expanded-subprocess.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAElD,OAAO,iBAAmD,MAAM,4BAA4B,CAAA;AAE5F,MAAM,MAAM,GAAG;IACb,OAAO,EAAE,KAAK;IACd,SAAS,EAAE,IAAI;IACf,SAAS,EAAE,KAAK;IAChB,UAAU,EAAE;QACV;YACE,IAAI,EAAE,QAAQ;YACd,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,MAAM;SACd;QACD;YACE,IAAI,EAAE,UAAU;YAChB,KAAK,EAAE,eAAe;YACtB,IAAI,EAAE,cAAc;SACrB;KACF;IACD,IAAI,EAAE,+CAA+C;CACtD,CAAA;AAED,MAAM,CAAC,OAAO,OAAO,sBAAuB,SAAQ,iBAAiB;IACnE,IAAI,MAAM;QACR,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,YAAY,EAAE,GAAG,IAAI,CAAC,KAAK,CAAA;QACnC,MAAM,MAAM,GAAG,CAAC,CAAA;QAEhB,GAAG,CAAC,SAAS,CAAC,IAAI,EAAE,GAAG,CAAC,CAAA;QACxB,GAAG,CAAC,SAAS,EAAE,CAAA;QAEf,GAAG,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,CAAA;QACrB,GAAG,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;QAC1C,GAAG,CAAC,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;QAC3C,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,CAAC,CAAA;QAClC,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,CAAC,CAAA;QAEjC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAA;QAClB,IAAI,CAAC,UAAU,CAAC,GAAG,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA;QAEjE,GAAG,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,CAAC,GAAG,CAAC,CAAA;IAC5B,CAAC;IAED,IAAI,UAAU;QACZ,OAAO,KAAK,CAAA;IACd,CAAC;CACF;AAED,SAAS,CAAC,QAAQ,CAAC,0BAA0B,EAAE,sBAAsB,CAAC,CAAA","sourcesContent":["import { Component } from '@hatiolab/things-scene'\n\nimport BPMNContainerBase, { DIRECTION, INOUT, NODE, FLOW } from './base/bpmn-container-base'\n\nconst NATURE = {\n  mutable: false,\n  resizable: true,\n  rotatable: false,\n  properties: [\n    {\n      type: 'string',\n      name: 'name',\n      label: 'name'\n    },\n    {\n      type: 'checkbox',\n      label: 'call-activity',\n      name: 'callActivity'\n    }\n  ],\n  help: '/bpmn/expanded-subprocess/expanded-subprocess'\n}\n\nexport default class BPMNExpandedSubprocess extends BPMNContainerBase {\n  get nature() {\n    return NATURE\n  }\n\n  render(ctx: CanvasRenderingContext2D) {\n    const { left, top, width, height } = this.bounds\n    const { callActivity } = this.state\n    const radius = 9\n\n    ctx.translate(left, top)\n    ctx.beginPath()\n\n    ctx.moveTo(radius, 0)\n    ctx.arcTo(width, 0, width, height, radius)\n    ctx.arcTo(width, height, 0, height, radius)\n    ctx.arcTo(0, height, 0, 0, radius)\n    ctx.arcTo(0, 0, width, 0, radius)\n\n    this.drawFill(ctx)\n    this.drawStroke(ctx, callActivity ? { lineWidth: 5 } : undefined)\n\n    ctx.translate(-left, -top)\n  }\n\n  get textHidden() {\n    return false\n  }\n}\n\nComponent.register('bpmn-expanded-subprocess', BPMNExpandedSubprocess)\n"]}
+{"version":3,"file":"bpmn-expanded-subprocess.js","sourceRoot":"","sources":["../src/bpmn-expanded-subprocess.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component } from '@hatiolab/things-scene'\nimport { over } from 'lodash'\n\nimport BPMNContainerBase, { DIRECTION, INOUT, NODE, FLOW } from './base/bpmn-container-base'\n\nconst NATURE = {\n  mutable: false,\n  resizable: true,\n  rotatable: false,\n  properties: [\n    {\n      type: 'string',\n      name: 'name',\n      label: 'name'\n    },\n    {\n      type: 'checkbox',\n      label: 'call-activity',\n      name: 'callActivity'\n    },\n    {\n      type: 'checkbox',\n      label: 'transaction',\n      name: 'transaction'\n    },\n    {\n      type: 'checkbox',\n      label: 'interrupting',\n      name: 'interrupting'\n    },\n    {\n      type: 'select',\n      label: 'event',\n      name: 'event',\n      property: {\n        options: [\n          {\n            display: '',\n            value: ''\n          },\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/expanded-subprocess/expanded-subprocess'\n}\n\nexport default class BPMNExpandedSubprocess extends BPMNContainerBase {\n  get nature() {\n    return NATURE\n  }\n\n  render(ctx: CanvasRenderingContext2D) {\n    const { left, top, width, height } = this.bounds\n    const { callActivity, interrupting, transaction } = this.state\n    var radius = 9\n\n    ctx.translate(left, top)\n    ctx.beginPath()\n\n    ctx.moveTo(radius, 0)\n    ctx.arcTo(width, 0, width, height, radius)\n    ctx.arcTo(width, height, 0, height, radius)\n    ctx.arcTo(0, height, 0, 0, radius)\n    ctx.arcTo(0, 0, width, 0, radius)\n\n    if (transaction) {\n      const LINEGAP = 3\n      radius -= LINEGAP\n\n      ctx.moveTo(radius + LINEGAP, LINEGAP)\n      ctx.arcTo(width - LINEGAP, LINEGAP, width - LINEGAP, height - LINEGAP, radius)\n      ctx.arcTo(width - LINEGAP, height - LINEGAP, LINEGAP, height, radius)\n      ctx.arcTo(LINEGAP, height - LINEGAP, LINEGAP, LINEGAP, radius)\n      ctx.arcTo(LINEGAP, LINEGAP, width - LINEGAP, LINEGAP, radius)\n    }\n\n    this.drawFill(ctx)\n\n    if (callActivity) {\n      this.drawStroke(ctx, { lineWidth: 5 })\n    } else {\n      this.drawStroke(ctx, {\n        lineWidth: transaction ? 1 : 2,\n        lineDash: interrupting ? 'dash' : 'solid'\n      })\n    }\n\n    ctx.translate(-left, -top)\n  }\n\n  get textHidden() {\n    return false\n  }\n}\n\nComponent.register('bpmn-expanded-subprocess', BPMNExpandedSubprocess)\n"]}

package/dist/bpmn-flow.d.ts

@@ -4,7 +4,7 @@ export default class BPMNFlow extends OrthoLine {
         mutable: boolean;
         resizable: boolean;
         rotatable: boolean;
-        properties: {
+        properties: ({
             type: string;
             label: string;
             name: string;
@@ -13,7 +13,13 @@ export default class BPMNFlow extends OrthoLine {
                 max: number;
                 step: number;
             };
-        }[];
+        } | {
+            type: string;
+            label: string;
+            name: string;
+            property?: undefined;
+        })[];
         help: string;
     };
+    get pathExtendable(): boolean;
 }

package/dist/bpmn-flow.js

@@ -13,6 +13,11 @@ const NATURE = {
                 max: 100,
                 step: 1
             }
+        },
+        {
+            type: 'checkbox',
+            label: 'default',
+            name: 'default'
         }
     ],
     help: 'bpmn/flow/flow'
@@ -21,6 +26,9 @@ export default class BPMNFlow extends OrthoLine {
     get nature() {
         return NATURE;
     }
+    get pathExtendable() {
+        return false;
+    }
 }
 Component.register('bpmn-flow', BPMNFlow);
 //# sourceMappingURL=bpmn-flow.js.map

package/dist/bpmn-flow.js.map

@@ -1 +1 @@
-{"version":3,"file":"bpmn-flow.js","sourceRoot":"","sources":["../src/bpmn-flow.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAE7D,MAAM,MAAM,GAAG;IACb,OAAO,EAAE,KAAK;IACd,SAAS,EAAE,KAAK;IAChB,SAAS,EAAE,KAAK;IAChB,UAAU,EAAE;QACV;YACE,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE,OAAO;YACd,IAAI,EAAE,OAAO;YACb,QAAQ,EAAE;gBACR,GAAG,EAAE,CAAC;gBACN,GAAG,EAAE,GAAG;gBACR,IAAI,EAAE,CAAC;aACR;SACF;KACF;IACD,IAAI,EAAE,gBAAgB;CACvB,CAAA;AAED,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,SAAS;IAC7C,IAAI,MAAM;QACR,OAAO,MAAM,CAAA;IACf,CAAC;CACF;AAED,SAAS,CAAC,QAAQ,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAA","sourcesContent":["import { Component, OrthoLine } from '@hatiolab/things-scene'\n\nconst NATURE = {\n  mutable: false,\n  resizable: false,\n  rotatable: false,\n  properties: [\n    {\n      type: 'number',\n      label: 'round',\n      name: 'round',\n      property: {\n        min: 0,\n        max: 100,\n        step: 1\n      }\n    }\n  ],\n  help: 'bpmn/flow/flow'\n}\n\nexport default class BPMNFlow extends OrthoLine {\n  get nature() {\n    return NATURE\n  }\n}\n\nComponent.register('bpmn-flow', BPMNFlow)\n"]}
+{"version":3,"file":"bpmn-flow.js","sourceRoot":"","sources":["../src/bpmn-flow.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAE7D,MAAM,MAAM,GAAG;IACb,OAAO,EAAE,KAAK;IACd,SAAS,EAAE,KAAK;IAChB,SAAS,EAAE,KAAK;IAChB,UAAU,EAAE;QACV;YACE,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE,OAAO;YACd,IAAI,EAAE,OAAO;YACb,QAAQ,EAAE;gBACR,GAAG,EAAE,CAAC;gBACN,GAAG,EAAE,GAAG;gBACR,IAAI,EAAE,CAAC;aACR;SACF;QACD;YACE,IAAI,EAAE,UAAU;YAChB,KAAK,EAAE,SAAS;YAChB,IAAI,EAAE,SAAS;SAChB;KACF;IACD,IAAI,EAAE,gBAAgB;CACvB,CAAA;AAED,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,SAAS;IAC7C,IAAI,MAAM;QACR,OAAO,MAAM,CAAA;IACf,CAAC;IAED,IAAI,cAAc;QAChB,OAAO,KAAK,CAAA;IACd,CAAC;CACF;AAED,SAAS,CAAC,QAAQ,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAA","sourcesContent":["import { Component, OrthoLine } from '@hatiolab/things-scene'\n\nconst NATURE = {\n  mutable: false,\n  resizable: false,\n  rotatable: false,\n  properties: [\n    {\n      type: 'number',\n      label: 'round',\n      name: 'round',\n      property: {\n        min: 0,\n        max: 100,\n        step: 1\n      }\n    },\n    {\n      type: 'checkbox',\n      label: 'default',\n      name: 'default'\n    }\n  ],\n  help: 'bpmn/flow/flow'\n}\n\nexport default class BPMNFlow extends OrthoLine {\n  get nature() {\n    return NATURE\n  }\n\n  get pathExtendable() {\n    return false\n  }\n}\n\nComponent.register('bpmn-flow', BPMNFlow)\n"]}

package/dist/bpmn-gateway.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 BPMNGateway extends BPMNControlBase {
     private imageElement?;
@@ -19,6 +19,7 @@ export default class BPMNGateway extends BPMNControlBase {
         }[];
         help: string;
     };
+    get textBounds(): BOUNDS;
     render(ctx: CanvasRenderingContext2D): void;
     onchange(after: Properties, before: Properties): void;
     getImageElement(): HTMLImageElement | undefined;

package/dist/bpmn-gateway.js

@@ -45,6 +45,19 @@ export default class BPMNGateway 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) {
         var { left, top, width, height } = this.bounds;
         ctx.translate(left, top);

package/dist/bpmn-gateway.js.map

@@ -1 +1 @@
-{"version":3,"file":"bpmn-gateway.js","sourceRoot":"","sources":["../src/bpmn-gateway.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      label: 'gateway-type',\n      name: 'gatewayType',\n      property: {\n        options: [\n          {\n            display: '',\n            value: ''\n          },\n          {\n            display: 'exclusive',\n            value: 'exclusive'\n          },\n          {\n            display: 'inclusive',\n            value: 'inclusive'\n          },\n          {\n            display: 'complex',\n            value: 'complex'\n          },\n          {\n            display: 'event based',\n            value: 'event-based'\n          },\n          {\n            display: 'parallel',\n            value: 'parallel'\n          }\n        ]\n      }\n    }\n  ],\n  help: '/bpmn/gateway/gateway'\n}\n\nexport default class BPMNGateway extends BPMNControlBase {\n  private imageElement?: HTMLImageElement\n\n  static get nature() {\n    return NATURE\n  }\n\n  render(ctx: CanvasRenderingContext2D) {\n    var { left, top, width, height } = this.bounds\n\n    ctx.translate(left, top)\n    ctx.beginPath()\n\n    ctx.moveTo(width / 2, 0)\n    ctx.lineTo(width, height / 2)\n    ctx.lineTo(width / 2, height)\n    ctx.lineTo(0, height / 2)\n    ctx.lineTo(width / 2, 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, 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 ('gatewayType' in after || 'strokeStyle' in after) {\n      delete this.imageElement\n    }\n  }\n\n  getImageElement(): HTMLImageElement | undefined {\n    if (!this.imageElement) {\n      const { gatewayType, strokeStyle } = this.state\n\n      if (!gatewayType) {\n        return\n      }\n\n      const src = IMAGES[gatewayType]\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-gateway', BPMNGateway)\n\nconst IMAGES: { [type: string]: string } = {\n  inclusive: `\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.5,8.5c5,0,9,4,9,9s-4,9-9,9s-9-4-9-9S12.5,8.5,17.5,8.5 M17.5,6C11.1,6,6,11.1,6,17.5S11.1,29,17.5,29S29,23.9,29,17.5\n\t\tS23.9,6,17.5,6L17.5,6z\"/>\n  </svg>\n  `,\n  exclusive: `\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    <rect class=\"st0\" x=\"6.5\" y=\"15.8\" transform=\"matrix(0.7071 -0.7071 0.7071 0.7071 -7.2487 17.5)\" width=\"22\" height=\"3.5\"/>\n    <rect class=\"st0\" x=\"15.8\" y=\"6.5\" transform=\"matrix(0.7071 -0.7071 0.7071 0.7071 -7.2487 17.5)\" width=\"3.5\" height=\"22\"/>\n  </svg>\n  `,\n  parallel: `\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    <rect class=\"st0\" x=\"16.3\" y=\"6.5\" width=\"3.5\" height=\"22\"/>\n    <rect class=\"st0\" x=\"6.5\" y=\"16.2\" width=\"22\" height=\"3.5\"/>\n  </svg>\n  `,\n  complex: `\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    <rect class=\"st0\" x=\"16.2\" y=\"6.5\" width=\"3.5\" height=\"22\"/>\n    <rect class=\"st0\" x=\"6.5\" y=\"16.2\" transform=\"matrix(0.7071 -0.7071 0.7071 0.7071 -7.2487 17.5)\" width=\"22\" height=\"3.5\"/>\n    <rect class=\"st0\" x=\"16.2\" y=\"6.5\" transform=\"matrix(0.7072 -0.707 0.707 0.7072 -7.2487 17.4966)\" width=\"3.5\" height=\"22\"/>\n    <rect class=\"st0\" x=\"6.5\" y=\"16.2\" width=\"22\" height=\"3.5\"/>\n  </svg>\n  `,\n  'event-based': `\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.5,6.2c6.2,0,11.2,5,11.2,11.2s-5,11.2-11.2,11.2s-11.2-5-11.2-11.2S11.3,6.2,17.5,6.2 M17.5,5.5c-6.6,0-12,5.4-12,12\n    s5.4,12,12,12s12-5.4,12-12S24.1,5.5,17.5,5.5L17.5,5.5z\"/>\n    <path class=\"st0\" d=\"M17.5,8.2c5.1,0,9.2,4.1,9.2,9.2s-4.1,9.2-9.2,9.2s-9.2-4.1-9.2-9.2S12.4,8.2,17.5,8.2 M17.5,7.5c-5.5,0-10,4.5-10,10\n    s4.5,10,10,10s10-4.5,10-10S23,7.5,17.5,7.5L17.5,7.5z\"/>\n    <path class=\"st0\" d=\"M17.5,11.7l5.7,4.1L21,22.5h-7l-2.2-6.7L17.5,11.7 M17.5,10l-7.3,5.3l2.8,8.6h9l2.8-8.6L17.5,10L17.5,10z\"/>\n  </svg>\n  `\n}\n"]}
+{"version":3,"file":"bpmn-gateway.js","sourceRoot":"","sources":["../src/bpmn-gateway.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\nconst NATURE = {\n  mutable: false,\n  resizable: true,\n  rotatable: false,\n  properties: [\n    {\n      type: 'select',\n      label: 'gateway-type',\n      name: 'gatewayType',\n      property: {\n        options: [\n          {\n            display: '',\n            value: ''\n          },\n          {\n            display: 'exclusive',\n            value: 'exclusive'\n          },\n          {\n            display: 'inclusive',\n            value: 'inclusive'\n          },\n          {\n            display: 'complex',\n            value: 'complex'\n          },\n          {\n            display: 'event based',\n            value: 'event-based'\n          },\n          {\n            display: 'parallel',\n            value: 'parallel'\n          }\n        ]\n      }\n    }\n  ],\n  help: '/bpmn/gateway/gateway'\n}\n\nexport default class BPMNGateway 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    var { left, top, width, height } = this.bounds\n\n    ctx.translate(left, top)\n    ctx.beginPath()\n\n    ctx.moveTo(width / 2, 0)\n    ctx.lineTo(width, height / 2)\n    ctx.lineTo(width / 2, height)\n    ctx.lineTo(0, height / 2)\n    ctx.lineTo(width / 2, 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, 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 ('gatewayType' in after || 'strokeStyle' in after) {\n      delete this.imageElement\n    }\n  }\n\n  getImageElement(): HTMLImageElement | undefined {\n    if (!this.imageElement) {\n      const { gatewayType, strokeStyle } = this.state\n\n      if (!gatewayType) {\n        return\n      }\n\n      const src = IMAGES[gatewayType]\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-gateway', BPMNGateway)\n\nconst IMAGES: { [type: string]: string } = {\n  inclusive: `\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.5,8.5c5,0,9,4,9,9s-4,9-9,9s-9-4-9-9S12.5,8.5,17.5,8.5 M17.5,6C11.1,6,6,11.1,6,17.5S11.1,29,17.5,29S29,23.9,29,17.5\n\t\tS23.9,6,17.5,6L17.5,6z\"/>\n  </svg>\n  `,\n  exclusive: `\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    <rect class=\"st0\" x=\"6.5\" y=\"15.8\" transform=\"matrix(0.7071 -0.7071 0.7071 0.7071 -7.2487 17.5)\" width=\"22\" height=\"3.5\"/>\n    <rect class=\"st0\" x=\"15.8\" y=\"6.5\" transform=\"matrix(0.7071 -0.7071 0.7071 0.7071 -7.2487 17.5)\" width=\"3.5\" height=\"22\"/>\n  </svg>\n  `,\n  parallel: `\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    <rect class=\"st0\" x=\"16.3\" y=\"6.5\" width=\"3.5\" height=\"22\"/>\n    <rect class=\"st0\" x=\"6.5\" y=\"16.2\" width=\"22\" height=\"3.5\"/>\n  </svg>\n  `,\n  complex: `\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    <rect class=\"st0\" x=\"16.2\" y=\"6.5\" width=\"3.5\" height=\"22\"/>\n    <rect class=\"st0\" x=\"6.5\" y=\"16.2\" transform=\"matrix(0.7071 -0.7071 0.7071 0.7071 -7.2487 17.5)\" width=\"22\" height=\"3.5\"/>\n    <rect class=\"st0\" x=\"16.2\" y=\"6.5\" transform=\"matrix(0.7072 -0.707 0.707 0.7072 -7.2487 17.4966)\" width=\"3.5\" height=\"22\"/>\n    <rect class=\"st0\" x=\"6.5\" y=\"16.2\" width=\"22\" height=\"3.5\"/>\n  </svg>\n  `,\n  'event-based': `\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.5,6.2c6.2,0,11.2,5,11.2,11.2s-5,11.2-11.2,11.2s-11.2-5-11.2-11.2S11.3,6.2,17.5,6.2 M17.5,5.5c-6.6,0-12,5.4-12,12\n    s5.4,12,12,12s12-5.4,12-12S24.1,5.5,17.5,5.5L17.5,5.5z\"/>\n    <path class=\"st0\" d=\"M17.5,8.2c5.1,0,9.2,4.1,9.2,9.2s-4.1,9.2-9.2,9.2s-9.2-4.1-9.2-9.2S12.4,8.2,17.5,8.2 M17.5,7.5c-5.5,0-10,4.5-10,10\n    s4.5,10,10,10s10-4.5,10-10S23,7.5,17.5,7.5L17.5,7.5z\"/>\n    <path class=\"st0\" d=\"M17.5,11.7l5.7,4.1L21,22.5h-7l-2.2-6.7L17.5,11.7 M17.5,10l-7.3,5.3l2.8,8.6h9l2.8-8.6L17.5,10L17.5,10z\"/>\n  </svg>\n  `\n}\n"]}

package/dist/bpmn-message.d.ts

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

package/dist/bpmn-message.js

@@ -11,6 +11,19 @@ export default class BPMNMessage 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) {
         var { left, top, width, height } = this.bounds;
         const corner = (Math.min(width, height) * 2) / 5;

package/dist/bpmn-message.js.map

@@ -1 +1 @@
-{"version":3,"file":"bpmn-message.js","sourceRoot":"","sources":["../src/bpmn-message.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,uBAAuB;CAC9B,CAAA;AAED,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,eAAe;IACtD,MAAM,KAAK,MAAM;QACf,OAAO,MAAM,CAAA;IACf,CAAC;IAED,MAAM,CAAC,GAA6B;QAClC,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,CAAA;QAE9C,MAAM,MAAM,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAA;QAEhD,GAAG,CAAC,SAAS,CAAC,IAAI,EAAE,GAAG,CAAC,CAAA;QACxB,GAAG,CAAC,SAAS,EAAE,CAAA;QAEf,GAAG,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;QAChB,GAAG,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAA;QACpB,GAAG,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,CAAA;QACzB,GAAG,CAAC,MAAM,CAAC,CAAC,EAAE,MAAM,CAAC,CAAA;QACrB,GAAG,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;QAChB,GAAG,CAAC,MAAM,CAAC,KAAK,GAAG,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,CAAA;QACjC,GAAG,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAA;QAEpB,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,cAAc,EAAE,WAAW,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/message/message'\n}\n\nexport default class BPMNMessage extends BPMNControlBase {\n  static get nature() {\n    return NATURE\n  }\n\n  render(ctx: CanvasRenderingContext2D) {\n    var { left, top, width, height } = this.bounds\n\n    const corner = (Math.min(width, height) * 2) / 5\n\n    ctx.translate(left, top)\n    ctx.beginPath()\n\n    ctx.moveTo(0, 0)\n    ctx.lineTo(width, 0)\n    ctx.lineTo(width, height)\n    ctx.lineTo(0, height)\n    ctx.lineTo(0, 0)\n    ctx.lineTo(width / 2, height / 2)\n    ctx.lineTo(width, 0)\n\n    this.drawFill(ctx)\n    this.drawStroke(ctx)\n\n    ctx.translate(-left, -top)\n  }\n}\n\nComponent.register('bpmn-message', BPMNMessage)\n"]}
+{"version":3,"file":"bpmn-message.js","sourceRoot":"","sources":["../src/bpmn-message.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAE1D,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,uBAAuB;CAC9B,CAAA;AAED,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,eAAe;IACtD,MAAM,KAAK,MAAM;QACf,OAAO,MAAM,CAAA;IACf,CAAC;IAED,IAAI,UAAU;QACZ,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,CAAA;QAC9C,IAAI,EAAE,UAAU,EAAE,WAAW,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC,KAAK,CAAA;QAE1D,UAAU,KAAV,UAAU,GAAK,CAAC,EAAA;QAChB,WAAW,KAAX,WAAW,GAAK,CAAC,EAAA;QACjB,YAAY,KAAZ,YAAY,GAAK,CAAC,EAAA;QAElB,OAAO;YACL,IAAI,EAAE,IAAI,GAAG,WAAW;YACxB,GAAG,EAAE,GAAG,GAAG,UAAU,GAAG,MAAM,GAAG,EAAE;YACnC,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,WAAW,GAAG,YAAY,EAAE,CAAC,CAAC;YACtD,MAAM,EAAE,CAAC;SACV,CAAA;IACH,CAAC;IAED,MAAM,CAAC,GAA6B;QAClC,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,CAAA;QAE9C,MAAM,MAAM,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAA;QAEhD,GAAG,CAAC,SAAS,CAAC,IAAI,EAAE,GAAG,CAAC,CAAA;QACxB,GAAG,CAAC,SAAS,EAAE,CAAA;QAEf,GAAG,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;QAChB,GAAG,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAA;QACpB,GAAG,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,CAAA;QACzB,GAAG,CAAC,MAAM,CAAC,CAAC,EAAE,MAAM,CAAC,CAAA;QACrB,GAAG,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;QAChB,GAAG,CAAC,MAAM,CAAC,KAAK,GAAG,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,CAAA;QACjC,GAAG,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAA;QAEpB,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,cAAc,EAAE,WAAW,CAAC,CAAA","sourcesContent":["import { BOUNDS, 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/message/message'\n}\n\nexport default class BPMNMessage 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    var { left, top, width, height } = this.bounds\n\n    const corner = (Math.min(width, height) * 2) / 5\n\n    ctx.translate(left, top)\n    ctx.beginPath()\n\n    ctx.moveTo(0, 0)\n    ctx.lineTo(width, 0)\n    ctx.lineTo(width, height)\n    ctx.lineTo(0, height)\n    ctx.lineTo(0, 0)\n    ctx.lineTo(width / 2, height / 2)\n    ctx.lineTo(width, 0)\n\n    this.drawFill(ctx)\n    this.drawStroke(ctx)\n\n    ctx.translate(-left, -top)\n  }\n}\n\nComponent.register('bpmn-message', BPMNMessage)\n"]}

package/dist/bpmn-subprocess.d.ts

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

package/dist/bpmn-subprocess.js

@@ -29,6 +29,77 @@ const NATURE = {
             type: 'checkbox',
             label: 'call-activity',
             name: 'callActivity'
+        },
+        {
+            type: 'checkbox',
+            label: 'transaction',
+            name: 'transaction'
+        },
+        {
+            type: 'checkbox',
+            label: 'interrupting',
+            name: 'interrupting'
+        },
+        {
+            type: 'select',
+            label: 'event',
+            name: 'event',
+            property: {
+                options: [
+                    {
+                        display: '',
+                        value: ''
+                    },
+                    {
+                        display: 'message',
+                        value: 'message'
+                    },
+                    {
+                        display: 'timer',
+                        value: 'timer'
+                    },
+                    {
+                        display: 'error',
+                        value: 'error'
+                    },
+                    {
+                        display: 'escalation',
+                        value: 'escalation'
+                    },
+                    {
+                        display: 'cancel',
+                        value: 'cancel'
+                    },
+                    {
+                        display: 'compensation',
+                        value: 'compensation'
+                    },
+                    {
+                        display: 'conditional',
+                        value: 'conditional'
+                    },
+                    {
+                        display: 'link',
+                        value: 'link'
+                    },
+                    {
+                        display: 'signal',
+                        value: 'signal'
+                    },
+                    {
+                        display: 'terminate',
+                        value: 'terminate'
+                    },
+                    {
+                        display: 'multiple',
+                        value: 'multiple'
+                    },
+                    {
+                        display: 'parallel multiple',
+                        value: 'parallel-multiple'
+                    }
+                ]
+            }
         }
     ],
     help: '/bpmn/subprocess/subprocess'
@@ -39,17 +110,34 @@ export default class BPMNSubprocess extends BPMNControlBase {
     }
     render(ctx) {
         var { left, top, width, height } = this.bounds;
-        const { callActivity } = this.state;
+        const { callActivity, interrupting, transaction } = this.state;
         ctx.translate(left, top);
         ctx.beginPath();
-        var radius = 9;
+        var radius = 10;
         ctx.moveTo(radius, 0);
         ctx.arcTo(width, 0, width, height, radius);
         ctx.arcTo(width, height, 0, height, radius);
         ctx.arcTo(0, height, 0, 0, radius);
         ctx.arcTo(0, 0, width, 0, radius);
+        if (transaction) {
+            const LINEGAP = 3;
+            radius -= LINEGAP;
+            ctx.moveTo(radius + LINEGAP, LINEGAP);
+            ctx.arcTo(width - LINEGAP, LINEGAP, width - LINEGAP, height - LINEGAP, radius);
+            ctx.arcTo(width - LINEGAP, height - LINEGAP, LINEGAP, height, radius);
+            ctx.arcTo(LINEGAP, height - LINEGAP, LINEGAP, LINEGAP, radius);
+            ctx.arcTo(LINEGAP, LINEGAP, width - LINEGAP, LINEGAP, radius);
+        }
         this.drawFill(ctx);
-        this.drawStroke(ctx, callActivity ? { lineWidth: 5 } : undefined);
+        if (callActivity) {
+            this.drawStroke(ctx, { lineWidth: 5 });
+        }
+        else {
+            this.drawStroke(ctx, {
+                lineWidth: transaction ? 1 : 2,
+                lineDash: interrupting ? 'dash' : 'solid'
+            });
+        }
         ctx.beginPath();
         const images = this.getMarkerImages() || [];
         const start = (width - images.length * 16) / 2;

package/dist/bpmn-subprocess.js.map

@@ -1 +1 @@
-{"version":3,"file":"bpmn-subprocess.js","sourceRoot":"","sources":["../src/bpmn-subprocess.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: 'checkbox',\n      label: 'loop',\n      name: 'loop'\n    },\n    {\n      type: 'checkbox',\n      label: 'multi-instance',\n      name: 'multiInstance'\n    },\n    {\n      type: 'checkbox',\n      label: 'compensation',\n      name: 'compensation'\n    },\n    {\n      type: 'checkbox',\n      label: 'adhoc',\n      name: 'adhoc'\n    },\n    {\n      type: 'checkbox',\n      label: 'call-activity',\n      name: 'callActivity'\n    }\n  ],\n  help: '/bpmn/subprocess/subprocess'\n}\n\nexport default class BPMNSubprocess extends BPMNControlBase {\n  private markerImages?: HTMLImageElement[]\n\n  static get nature() {\n    return NATURE\n  }\n\n  render(ctx: CanvasRenderingContext2D) {\n    var { left, top, width, height } = this.bounds\n    const { callActivity } = this.state\n\n    ctx.translate(left, top)\n    ctx.beginPath()\n\n    var radius = 9\n\n    ctx.moveTo(radius, 0)\n    ctx.arcTo(width, 0, width, height, radius)\n    ctx.arcTo(width, height, 0, height, radius)\n    ctx.arcTo(0, height, 0, 0, radius)\n    ctx.arcTo(0, 0, width, 0, radius)\n\n    this.drawFill(ctx)\n    this.drawStroke(ctx, callActivity ? { lineWidth: 5 } : undefined)\n\n    ctx.beginPath()\n\n    const images = this.getMarkerImages() || []\n    const start = (width - images.length * 16) / 2\n\n    images.forEach((image, index) => {\n      this.drawImage(ctx, image, start + index * 16, height - 16, 16, 16)\n    })\n\n    ctx.translate(-left, -top)\n  }\n\n  onchange(after: Properties, before: Properties) {\n    if (['loop', 'multiInstance', 'adhoc', 'compensation', 'strokeStyle'].find(prop => prop in after)) {\n      delete this.markerImages\n    }\n  }\n\n  getMarkerImages(): HTMLImageElement[] | null | undefined {\n    if (!this.markerImages) {\n      const { strokeStyle } = this.state\n\n      this.markerImages = Object.keys(MARKERS)\n        .filter(key => key === 'subprocess' || this.state[key])\n        .map(key => {\n          let image = new Image()\n          image.src =\n            'data:image/svg+xml;charset=UTF-8;base64,' + btoa(MARKERS[key].replace(/{{strokeColor}}/g, strokeStyle))\n          return image\n        })\n    }\n\n    return this.markerImages\n  }\n}\n\nComponent.register('bpmn-subprocess', BPMNSubprocess)\n\nconst MARKERS: { [type: string]: string } = {\n  loop: `\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=\"M9.5,5.2C4.3,9.7,3.7,17.5,8.1,22.8L5,25.4l7.8,0.6l0.6-7.8L10.2,21c-3.5-4.1-3-10.1,1-13.6s10.1-3,13.6,1\n\ts3,10.1-1,13.6c-1.6,1.4-3.5,2.1-5.4,2.3l-0.2,2.8c2.6-0.2,5.3-1.1,7.4-3c5.2-4.5,5.8-12.3,1.3-17.5S14.7,0.8,9.5,5.2z\"/>\n</svg>\n`,\n  multiInstance: `\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\t 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  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\t 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=\"M16.1,6.9v15.6l-7.8-7.8L16.1,6.9 M18.1,2.1L5.5,14.7l12.6,12.6V2.1L18.1,2.1z M5.5,14.7L5.5,14.7L5.5,14.7\n        L5.5,14.7L5.5,14.7z\"/>\n    </g>\n    <g>\n      <path class=\"st0\" d=\"M27.5,6.9v15.6l-7.8-7.8L27.5,6.9 M29.5,2.1L16.9,14.7l12.6,12.6V2.1L29.5,2.1z M16.9,14.7L16.9,14.7\n        L16.9,14.7L16.9,14.7L16.9,14.7z\"/>\n    </g>\n  </svg>\n  `,\n  subprocess: `\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\t 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:2;stroke-miterlimit:10;}\n      .st1{fill:{{strokeColor}};}  \n    </style>\n    <rect x=\"5.5\" y=\"2.5\" class=\"st0\" width=\"24\" height=\"24\"/>\n    <g>\n      <g>\n        <rect x=\"16.4\" y=\"6\" class=\"st1\" width=\"2.1\" height=\"17\"/>\n      </g>\n      <g>\n        <rect x=\"9\" y=\"13.4\" class=\"st1\" width=\"17\" height=\"2.1\"/>\n      </g>\n    </g>\n  </svg>\n  `,\n  adhoc: `\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\t 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.2,10.3c-0.8,0.9-1.7,1.7-2.5,2.2c-0.8,0.5-1.6,0.8-2.4,0.8c-1,0-3-0.6-6.1-1.9C15,10.2,12.6,9.6,11,9.6\n\t\tc-2.1,0-3.9,0.7-5.5,1.9v6.9c0.1,0,0.3-0.2,0.6-0.6C7.9,16,9.5,15,10.9,15c0.8,0,2.9,0.6,6.1,1.9c3.3,1.2,5.7,1.8,7.1,1.8\n\t\tc2,0,3.8-0.6,5.3-1.8v-6.9C29.4,10.1,29.3,10.2,29.2,10.3z\"/>\n  </svg>\n  `\n}\n"]}
+{"version":3,"file":"bpmn-subprocess.js","sourceRoot":"","sources":["../src/bpmn-subprocess.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: 'checkbox',\n      label: 'loop',\n      name: 'loop'\n    },\n    {\n      type: 'checkbox',\n      label: 'multi-instance',\n      name: 'multiInstance'\n    },\n    {\n      type: 'checkbox',\n      label: 'compensation',\n      name: 'compensation'\n    },\n    {\n      type: 'checkbox',\n      label: 'adhoc',\n      name: 'adhoc'\n    },\n    {\n      type: 'checkbox',\n      label: 'call-activity',\n      name: 'callActivity'\n    },\n    {\n      type: 'checkbox',\n      label: 'transaction',\n      name: 'transaction'\n    },\n    {\n      type: 'checkbox',\n      label: 'interrupting',\n      name: 'interrupting'\n    },\n    {\n      type: 'select',\n      label: 'event',\n      name: 'event',\n      property: {\n        options: [\n          {\n            display: '',\n            value: ''\n          },\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/subprocess/subprocess'\n}\n\nexport default class BPMNSubprocess extends BPMNControlBase {\n  private markerImages?: HTMLImageElement[]\n\n  static get nature() {\n    return NATURE\n  }\n\n  render(ctx: CanvasRenderingContext2D) {\n    var { left, top, width, height } = this.bounds\n    const { callActivity, interrupting, transaction } = this.state\n\n    ctx.translate(left, top)\n    ctx.beginPath()\n\n    var radius = 10\n\n    ctx.moveTo(radius, 0)\n    ctx.arcTo(width, 0, width, height, radius)\n    ctx.arcTo(width, height, 0, height, radius)\n    ctx.arcTo(0, height, 0, 0, radius)\n    ctx.arcTo(0, 0, width, 0, radius)\n\n    if (transaction) {\n      const LINEGAP = 3\n      radius -= LINEGAP\n\n      ctx.moveTo(radius + LINEGAP, LINEGAP)\n      ctx.arcTo(width - LINEGAP, LINEGAP, width - LINEGAP, height - LINEGAP, radius)\n      ctx.arcTo(width - LINEGAP, height - LINEGAP, LINEGAP, height, radius)\n      ctx.arcTo(LINEGAP, height - LINEGAP, LINEGAP, LINEGAP, radius)\n      ctx.arcTo(LINEGAP, LINEGAP, width - LINEGAP, LINEGAP, radius)\n    }\n\n    this.drawFill(ctx)\n\n    if (callActivity) {\n      this.drawStroke(ctx, { lineWidth: 5 })\n    } else {\n      this.drawStroke(ctx, {\n        lineWidth: transaction ? 1 : 2,\n        lineDash: interrupting ? 'dash' : 'solid'\n      })\n    }\n\n    ctx.beginPath()\n\n    const images = this.getMarkerImages() || []\n    const start = (width - images.length * 16) / 2\n\n    images.forEach((image, index) => {\n      this.drawImage(ctx, image, start + index * 16, height - 16, 16, 16)\n    })\n\n    ctx.translate(-left, -top)\n  }\n\n  onchange(after: Properties, before: Properties) {\n    if (['loop', 'multiInstance', 'adhoc', 'compensation', 'strokeStyle'].find(prop => prop in after)) {\n      delete this.markerImages\n    }\n  }\n\n  getMarkerImages(): HTMLImageElement[] | null | undefined {\n    if (!this.markerImages) {\n      const { strokeStyle } = this.state\n\n      this.markerImages = Object.keys(MARKERS)\n        .filter(key => key === 'subprocess' || this.state[key])\n        .map(key => {\n          let image = new Image()\n          image.src =\n            'data:image/svg+xml;charset=UTF-8;base64,' + btoa(MARKERS[key].replace(/{{strokeColor}}/g, strokeStyle))\n          return image\n        })\n    }\n\n    return this.markerImages\n  }\n}\n\nComponent.register('bpmn-subprocess', BPMNSubprocess)\n\nconst MARKERS: { [type: string]: string } = {\n  loop: `\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=\"M9.5,5.2C4.3,9.7,3.7,17.5,8.1,22.8L5,25.4l7.8,0.6l0.6-7.8L10.2,21c-3.5-4.1-3-10.1,1-13.6s10.1-3,13.6,1\n\ts3,10.1-1,13.6c-1.6,1.4-3.5,2.1-5.4,2.3l-0.2,2.8c2.6-0.2,5.3-1.1,7.4-3c5.2-4.5,5.8-12.3,1.3-17.5S14.7,0.8,9.5,5.2z\"/>\n</svg>\n`,\n  multiInstance: `\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\t 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  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\t 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=\"M16.1,6.9v15.6l-7.8-7.8L16.1,6.9 M18.1,2.1L5.5,14.7l12.6,12.6V2.1L18.1,2.1z M5.5,14.7L5.5,14.7L5.5,14.7\n        L5.5,14.7L5.5,14.7z\"/>\n    </g>\n    <g>\n      <path class=\"st0\" d=\"M27.5,6.9v15.6l-7.8-7.8L27.5,6.9 M29.5,2.1L16.9,14.7l12.6,12.6V2.1L29.5,2.1z M16.9,14.7L16.9,14.7\n        L16.9,14.7L16.9,14.7L16.9,14.7z\"/>\n    </g>\n  </svg>\n  `,\n  subprocess: `\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\t 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:2;stroke-miterlimit:10;}\n      .st1{fill:{{strokeColor}};}  \n    </style>\n    <rect x=\"5.5\" y=\"2.5\" class=\"st0\" width=\"24\" height=\"24\"/>\n    <g>\n      <g>\n        <rect x=\"16.4\" y=\"6\" class=\"st1\" width=\"2.1\" height=\"17\"/>\n      </g>\n      <g>\n        <rect x=\"9\" y=\"13.4\" class=\"st1\" width=\"17\" height=\"2.1\"/>\n      </g>\n    </g>\n  </svg>\n  `,\n  adhoc: `\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\t 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.2,10.3c-0.8,0.9-1.7,1.7-2.5,2.2c-0.8,0.5-1.6,0.8-2.4,0.8c-1,0-3-0.6-6.1-1.9C15,10.2,12.6,9.6,11,9.6\n\t\tc-2.1,0-3.9,0.7-5.5,1.9v6.9c0.1,0,0.3-0.2,0.6-0.6C7.9,16,9.5,15,10.9,15c0.8,0,2.9,0.6,6.1,1.9c3.3,1.2,5.7,1.8,7.1,1.8\n\t\tc2,0,3.8-0.6,5.3-1.8v-6.9C29.4,10.1,29.3,10.2,29.2,10.3z\"/>\n  </svg>\n  `\n}\n"]}

package/dist/bpmn-task.js

@@ -76,6 +76,11 @@ const NATURE = {
             type: 'checkbox',
             label: 'call-activity',
             name: 'callActivity'
+        },
+        {
+            type: 'checkbox',
+            label: 'interrupting',
+            name: 'interrupting'
         }
     ],
     help: '/bpmn/task/task'
@@ -86,7 +91,7 @@ export default class BPMNTask extends BPMNControlBase {
     }
     render(ctx) {
         const { left, top, width, height } = this.bounds;
-        const { callActivity } = this.state;
+        const { callActivity, interrupting } = this.state;
         const radius = 9;
         ctx.translate(left, top);
         ctx.beginPath();
@@ -96,7 +101,14 @@ export default class BPMNTask extends BPMNControlBase {
         ctx.arcTo(0, height, 0, 0, radius);
         ctx.arcTo(0, 0, width, 0, radius);
         this.drawFill(ctx);
-        this.drawStroke(ctx, callActivity ? { lineWidth: 5 } : undefined);
+        if (callActivity) {
+            this.drawStroke(ctx, { lineWidth: 5 });
+        }
+        else {
+            this.drawStroke(ctx, {
+                lineDash: interrupting ? 'dash' : 'solid'
+            });
+        }
         ctx.beginPath();
         const image = this.getImageElement();
         if (image) {