@operato/scene-bpmn 1.1.1

package/CHANGELOG.md

@@ -0,0 +1,20 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+### [1.1.1](https://github.com/things-scene/operato-scene/compare/v1.1.0...v1.1.1) (2022-11-03)
+
+
+### :bug: Bug Fix
+
+* typo ([c4758b9](https://github.com/things-scene/operato-scene/commit/c4758b9d66e4edb15ee4b805117fd9b18ef92737))
+
+
+
+## [1.1.0](https://github.com/things-scene/operato-scene/compare/v1.0.7...v1.1.0) (2022-11-03)
+
+
+### :rocket: New Features
+
+* add bpmn and eipatterns ([6f5e74c](https://github.com/things-scene/operato-scene/commit/6f5e74c9e45ff61324c080f9b2828f1a69fddc5a))

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) hatiolab.com
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,13 @@
+## build
+
+`$ yarn build`
+
+| type | filename                      | for            | tested |
+| ---- | ----------------------------- | -------------- | ------ |
+| UMD  | things-scene-eipatterns.js    | modern browser | O      |
+| UMD  | things-scene-eipatterns-ie.js | ie 11          | O      |
+| ESM  | things-scene-eipatterns.mjs   | modern browser | O      |
+
+## publish
+
+`$ yarn publish`

package/dist/base/bpmn-activity.d.ts

@@ -0,0 +1,5 @@
+import BPMNControlBase from './bpmn-control-base';
+export default abstract class BPMNActivity extends BPMNControlBase {
+    abstract getImageElement(): HTMLImageElement | null | undefined;
+    render(ctx: CanvasRenderingContext2D): void;
+}

package/dist/base/bpmn-activity.js

@@ -0,0 +1,23 @@
+import BPMNControlBase from './bpmn-control-base';
+export default class BPMNActivity extends BPMNControlBase {
+    render(ctx) {
+        var { left, top, width, height } = this.bounds;
+        ctx.translate(left, top);
+        ctx.beginPath();
+        var radius = 9;
+        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);
+        this.drawFill(ctx);
+        this.drawStroke(ctx);
+        ctx.beginPath();
+        const image = this.getImageElement();
+        if (image) {
+            this.drawImage(ctx, image, 0, 0, 24, 24);
+        }
+        ctx.translate(-left, -top);
+    }
+}
+//# sourceMappingURL=bpmn-activity.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"bpmn-activity.js","sourceRoot":"","sources":["../../src/base/bpmn-activity.ts"],"names":[],"mappings":"AAAA,OAAO,eAAe,MAAM,qBAAqB,CAAA;AAEjD,MAAM,CAAC,OAAO,OAAgB,YAAa,SAAQ,eAAe;IAGhE,MAAM,CAAC,GAA6B;QAClC,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,CAAA;QAE9C,GAAG,CAAC,SAAS,CAAC,IAAI,EAAE,GAAG,CAAC,CAAA;QACxB,GAAG,CAAC,SAAS,EAAE,CAAA;QAEf,IAAI,MAAM,GAAG,CAAC,CAAA;QAEd,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,CAAC,CAAA;QAEpB,GAAG,CAAC,SAAS,EAAE,CAAA;QAEf,MAAM,KAAK,GAAG,IAAI,CAAC,eAAe,EAAE,CAAA;QACpC,IAAI,KAAK,EAAE;YACT,IAAI,CAAC,SAAS,CAAC,GAAG,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,CAAC,CAAA;SACzC;QAED,GAAG,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,CAAC,GAAG,CAAC,CAAA;IAC5B,CAAC;CACF","sourcesContent":["import BPMNControlBase from './bpmn-control-base'\n\nexport default abstract class BPMNActivity extends BPMNControlBase {\n  abstract getImageElement(): HTMLImageElement | null | undefined\n\n  render(ctx: CanvasRenderingContext2D) {\n    var { left, top, width, height } = this.bounds\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)\n\n    ctx.beginPath()\n\n    const image = this.getImageElement()\n    if (image) {\n      this.drawImage(ctx, image, 0, 0, 24, 24)\n    }\n\n    ctx.translate(-left, -top)\n  }\n}\n"]}

package/dist/base/bpmn-container-base.d.ts

@@ -0,0 +1,36 @@
+import { Anchor, Container } from '@hatiolab/things-scene';
+export declare enum DIRECTION {
+    NORTH = "N",
+    EAST = "E",
+    SOUTH = "S",
+    WEST = "W"
+}
+export declare enum INOUT {
+    IN = "in",
+    OUT = "out",
+    INOUT = "inout"
+}
+export declare enum FLOW {
+    MESSAGE = "message",
+    SEQUENCE = "sequence",
+    ASSOCIATION = "association"
+}
+export declare type NODE = {
+    name: string;
+    description: string;
+    inout: INOUT;
+    type: FLOW;
+    direction: DIRECTION;
+    multiplicity?: number;
+};
+declare const BPMNContainerBase_base: (new (...args: any[]) => {
+    findOutletLines(anchorName: string): import("@hatiolab/things-scene").Line[];
+    findOutletEnds(anchorName: string): import("@hatiolab/things-scene").Component[];
+    findInletLines(anchorName: string): import("@hatiolab/things-scene").Line[];
+    findInletEnds(anchorName: string): import("@hatiolab/things-scene").Component[];
+}) & typeof Container;
+export default abstract class BPMNContainerBase extends BPMNContainerBase_base {
+    get anchors(): Array<Anchor>;
+    get nodes(): NODE[];
+}
+export {};

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

@@ -0,0 +1,167 @@
+import { Container, Connectable } from '@hatiolab/things-scene';
+export var DIRECTION;
+(function (DIRECTION) {
+    DIRECTION["NORTH"] = "N";
+    DIRECTION["EAST"] = "E";
+    DIRECTION["SOUTH"] = "S";
+    DIRECTION["WEST"] = "W";
+})(DIRECTION || (DIRECTION = {}));
+export var INOUT;
+(function (INOUT) {
+    INOUT["IN"] = "in";
+    INOUT["OUT"] = "out";
+    INOUT["INOUT"] = "inout";
+})(INOUT || (INOUT = {}));
+export var FLOW;
+(function (FLOW) {
+    FLOW["MESSAGE"] = "message";
+    FLOW["SEQUENCE"] = "sequence";
+    FLOW["ASSOCIATION"] = "association";
+})(FLOW || (FLOW = {}));
+const STYLE_MAP = {
+    message: {
+        strokeStyle: 'navy',
+        fillStyle: 'navy'
+    },
+    sequence: {
+        strokeStyle: 'red',
+        fillStyle: 'red',
+        lineDash: 'long-dash-dot'
+    },
+    association: {
+        strokeStyle: 'yellow',
+        fillStyle: 'yellow',
+        lineDash: 'dash',
+        begin: 'none',
+        beginSize: 'size1',
+        end: 'none',
+        endSize: 'size1'
+    }
+};
+const ANCHOR_LENGTH = 8;
+const TEMPLATE = {
+    type: 'bpmn-flow',
+    lineWidth: 2,
+    strokeStyle: 'black',
+    begin: 'none',
+    beginSize: 'size1',
+    end: 'arrow',
+    endSize: 'size9',
+    round: 10
+};
+function linkFilter(counterEnd) {
+    if (!counterEnd) {
+        return this.inout !== 'in';
+    }
+    const { component, anchor } = counterEnd || {};
+    /* FIXME remove !anchor.type condition */
+    return !(anchor === null || anchor === void 0 ? void 0 : anchor.type) || anchor.type === this.type;
+}
+export default class BPMNContainerBase extends Connectable(Container) {
+    get anchors() {
+        var allNodes = this.nodes;
+        var { left, top, width, height } = this.bounds;
+        var right = left + width;
+        var bottom = top + height;
+        const dirs = [DIRECTION.NORTH, DIRECTION.EAST, DIRECTION.SOUTH, DIRECTION.WEST].map(direction => {
+            const nodes = allNodes.filter(node => node.direction === direction);
+            if (nodes.length === 0) {
+                return [];
+            }
+            var dx = 0;
+            var dy = 0;
+            var sx = 0;
+            var sy = 0;
+            switch (direction) {
+                case DIRECTION.NORTH:
+                    sx = left;
+                    sy = top;
+                    dx = width / (nodes.length + 1);
+                    dy = 0;
+                    break;
+                case DIRECTION.EAST:
+                    sx = right;
+                    sy = top;
+                    dx = 0;
+                    dy = height / (nodes.length + 1);
+                    break;
+                case DIRECTION.SOUTH:
+                    sx = left;
+                    sy = bottom;
+                    dx = width / (nodes.length + 1);
+                    dy = 0;
+                    break;
+                case DIRECTION.WEST:
+                    sx = left;
+                    sy = top;
+                    dx = 0;
+                    dy = height / (nodes.length + 1);
+                    break;
+                default:
+            }
+            return nodes.map((node, idx) => {
+                const x = sx + dx * (idx + 1);
+                const y = sy + dy * (idx + 1);
+                return {
+                    type: node.type,
+                    name: node.name,
+                    inout: node.inout,
+                    position: {
+                        x,
+                        y
+                    },
+                    bounds: {
+                        left: x - ANCHOR_LENGTH / 2,
+                        top: y - ANCHOR_LENGTH / 2,
+                        width: ANCHOR_LENGTH,
+                        height: ANCHOR_LENGTH
+                    },
+                    filter: linkFilter,
+                    template: {
+                        ...TEMPLATE,
+                        ...(STYLE_MAP[node.type || 'message'] || STYLE_MAP['message'])
+                    },
+                    multiplicity: node.multiplicity
+                };
+            });
+        });
+        return dirs.flat();
+    }
+    get nodes() {
+        return [
+            {
+                name: 'Left',
+                description: 'Left side message inout',
+                inout: INOUT.INOUT,
+                type: FLOW.MESSAGE,
+                direction: DIRECTION.WEST,
+                multiplicity: 1
+            },
+            {
+                name: 'Top',
+                description: 'Top side message inout',
+                inout: INOUT.INOUT,
+                type: FLOW.MESSAGE,
+                direction: DIRECTION.NORTH,
+                multiplicity: 1
+            },
+            {
+                name: 'Right',
+                description: 'Right side message inout',
+                inout: INOUT.INOUT,
+                type: FLOW.MESSAGE,
+                direction: DIRECTION.EAST,
+                multiplicity: 1
+            },
+            {
+                name: 'Down',
+                description: 'Down side message inout',
+                inout: INOUT.INOUT,
+                type: FLOW.MESSAGE,
+                direction: DIRECTION.SOUTH,
+                multiplicity: 1
+            }
+        ];
+    }
+}
+//# sourceMappingURL=bpmn-container-base.js.map

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

@@ -0,0 +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, BOUNDS, 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"]}

package/dist/base/bpmn-control-base.d.ts

@@ -0,0 +1,36 @@
+import { Anchor, Component, Shape } from '@hatiolab/things-scene';
+export declare enum DIRECTION {
+    NORTH = "N",
+    EAST = "E",
+    SOUTH = "S",
+    WEST = "W"
+}
+export declare enum INOUT {
+    IN = "in",
+    OUT = "out",
+    INOUT = "inout"
+}
+export declare enum FLOW {
+    MESSAGE = "message",
+    SEQUENCE = "sequence",
+    ASSOCIATION = "association"
+}
+export declare type NODE = {
+    name: string;
+    description: string;
+    inout: INOUT;
+    type: FLOW;
+    direction: DIRECTION;
+    multiplicity?: number;
+};
+declare const BPMNControlBase_base: (new (...args: any[]) => {
+    findOutletLines(anchorName: string): import("@hatiolab/things-scene").Line[];
+    findOutletEnds(anchorName: string): Component[];
+    findInletLines(anchorName: string): import("@hatiolab/things-scene").Line[];
+    findInletEnds(anchorName: string): Component[];
+}) & typeof Shape;
+export default abstract class BPMNControlBase extends BPMNControlBase_base {
+    get anchors(): Array<Anchor>;
+    get nodes(): NODE[];
+}
+export {};

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

@@ -0,0 +1,167 @@
+import { Connectable, RectPath, Shape } from '@hatiolab/things-scene';
+export var DIRECTION;
+(function (DIRECTION) {
+    DIRECTION["NORTH"] = "N";
+    DIRECTION["EAST"] = "E";
+    DIRECTION["SOUTH"] = "S";
+    DIRECTION["WEST"] = "W";
+})(DIRECTION || (DIRECTION = {}));
+export var INOUT;
+(function (INOUT) {
+    INOUT["IN"] = "in";
+    INOUT["OUT"] = "out";
+    INOUT["INOUT"] = "inout";
+})(INOUT || (INOUT = {}));
+export var FLOW;
+(function (FLOW) {
+    FLOW["MESSAGE"] = "message";
+    FLOW["SEQUENCE"] = "sequence";
+    FLOW["ASSOCIATION"] = "association";
+})(FLOW || (FLOW = {}));
+const STYLE_MAP = {
+    message: {
+        strokeStyle: 'navy',
+        fillStyle: 'navy'
+    },
+    sequence: {
+        strokeStyle: 'red',
+        fillStyle: 'red',
+        lineDash: 'long-dash-dot'
+    },
+    association: {
+        strokeStyle: 'yellow',
+        fillStyle: 'yellow',
+        lineDash: 'dash',
+        begin: 'none',
+        beginSize: 'size1',
+        end: 'none',
+        endSize: 'size1'
+    }
+};
+const ANCHOR_LENGTH = 8;
+const TEMPLATE = {
+    type: 'bpmn-flow',
+    lineWidth: 2,
+    strokeStyle: 'black',
+    begin: 'none',
+    beginSize: 'size1',
+    end: 'arrow',
+    endSize: 'size9',
+    round: 10
+};
+function linkFilter(counterEnd) {
+    if (!counterEnd) {
+        return this.inout !== 'in';
+    }
+    const { component, anchor } = counterEnd || {};
+    /* FIXME remove !anchor.type condition */
+    return !(anchor === null || anchor === void 0 ? void 0 : anchor.type) || anchor.type === this.type;
+}
+export default class BPMNControlBase extends Connectable(RectPath(Shape)) {
+    get anchors() {
+        var allNodes = this.nodes;
+        var { left, top, width, height } = this.bounds;
+        var right = left + width;
+        var bottom = top + height;
+        const dirs = [DIRECTION.NORTH, DIRECTION.EAST, DIRECTION.SOUTH, DIRECTION.WEST].map(direction => {
+            const nodes = allNodes.filter(node => node.direction === direction);
+            if (nodes.length === 0) {
+                return [];
+            }
+            var dx = 0;
+            var dy = 0;
+            var sx = 0;
+            var sy = 0;
+            switch (direction) {
+                case DIRECTION.NORTH:
+                    sx = left;
+                    sy = top;
+                    dx = width / (nodes.length + 1);
+                    dy = 0;
+                    break;
+                case DIRECTION.EAST:
+                    sx = right;
+                    sy = top;
+                    dx = 0;
+                    dy = height / (nodes.length + 1);
+                    break;
+                case DIRECTION.SOUTH:
+                    sx = left;
+                    sy = bottom;
+                    dx = width / (nodes.length + 1);
+                    dy = 0;
+                    break;
+                case DIRECTION.WEST:
+                    sx = left;
+                    sy = top;
+                    dx = 0;
+                    dy = height / (nodes.length + 1);
+                    break;
+                default:
+            }
+            return nodes.map((node, idx) => {
+                const x = sx + dx * (idx + 1);
+                const y = sy + dy * (idx + 1);
+                return {
+                    type: node.type,
+                    name: node.name,
+                    inout: node.inout,
+                    position: {
+                        x,
+                        y
+                    },
+                    bounds: {
+                        left: x - ANCHOR_LENGTH / 2,
+                        top: y - ANCHOR_LENGTH / 2,
+                        width: ANCHOR_LENGTH,
+                        height: ANCHOR_LENGTH
+                    },
+                    filter: linkFilter,
+                    template: {
+                        ...TEMPLATE,
+                        ...(STYLE_MAP[node.type || 'message'] || STYLE_MAP['message'])
+                    },
+                    multiplicity: node.multiplicity
+                };
+            });
+        });
+        return dirs.flat();
+    }
+    get nodes() {
+        return [
+            {
+                name: 'Left',
+                description: 'Left side message inout',
+                inout: INOUT.INOUT,
+                type: FLOW.MESSAGE,
+                direction: DIRECTION.WEST,
+                multiplicity: 1
+            },
+            {
+                name: 'Top',
+                description: 'Top side message inout',
+                inout: INOUT.INOUT,
+                type: FLOW.MESSAGE,
+                direction: DIRECTION.NORTH,
+                multiplicity: 1
+            },
+            {
+                name: 'Right',
+                description: 'Right side message inout',
+                inout: INOUT.INOUT,
+                type: FLOW.MESSAGE,
+                direction: DIRECTION.EAST,
+                multiplicity: 1
+            },
+            {
+                name: 'Down',
+                description: 'Down side message inout',
+                inout: INOUT.INOUT,
+                type: FLOW.MESSAGE,
+                direction: DIRECTION.SOUTH,
+                multiplicity: 1
+            }
+        ];
+    }
+}
+//# sourceMappingURL=bpmn-control-base.js.map

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

@@ -0,0 +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"]}

package/dist/bpmn-call-activity.d.ts

@@ -0,0 +1,11 @@
+import BPMNActivity from './base/bpmn-activity';
+export default class BPMNCallActivity extends BPMNActivity {
+    static get nature(): {
+        mutable: boolean;
+        resizable: boolean;
+        rotatable: boolean;
+        properties: never[];
+        help: string;
+    };
+    getImageElement(): HTMLImageElement | undefined;
+}

package/dist/bpmn-call-activity.js

@@ -0,0 +1,19 @@
+import { Component } from '@hatiolab/things-scene';
+import BPMNActivity from './base/bpmn-activity';
+const NATURE = {
+    mutable: false,
+    resizable: true,
+    rotatable: false,
+    properties: [],
+    help: '/eipatterns/bpmn-call-activity/bpmn-call-activity'
+};
+export default class BPMNCallActivity extends BPMNActivity {
+    static get nature() {
+        return NATURE;
+    }
+    getImageElement() {
+        return;
+    }
+}
+Component.register('bpmn-call-activity', BPMNCallActivity);
+//# sourceMappingURL=bpmn-call-activity.js.map

package/dist/bpmn-call-activity.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bpmn-call-activity.js","sourceRoot":"","sources":["../src/bpmn-call-activity.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAClD,OAAO,YAAY,MAAM,sBAAsB,CAAA;AAE/C,MAAM,MAAM,GAAG;IACb,OAAO,EAAE,KAAK;IACd,SAAS,EAAE,IAAI;IACf,SAAS,EAAE,KAAK;IAChB,UAAU,EAAE,EAAE;IACd,IAAI,EAAE,mDAAmD;CAC1D,CAAA;AAED,MAAM,CAAC,OAAO,OAAO,gBAAiB,SAAQ,YAAY;IACxD,MAAM,KAAK,MAAM;QACf,OAAO,MAAM,CAAA;IACf,CAAC;IAED,eAAe;QACb,OAAM;IACR,CAAC;CACF;AAED,SAAS,CAAC,QAAQ,CAAC,oBAAoB,EAAE,gBAAgB,CAAC,CAAA","sourcesContent":["import { Component } from '@hatiolab/things-scene'\nimport BPMNActivity from './base/bpmn-activity'\n\nconst NATURE = {\n  mutable: false,\n  resizable: true,\n  rotatable: false,\n  properties: [],\n  help: '/eipatterns/bpmn-call-activity/bpmn-call-activity'\n}\n\nexport default class BPMNCallActivity extends BPMNActivity {\n  static get nature() {\n    return NATURE\n  }\n\n  getImageElement(): HTMLImageElement | undefined {\n    return\n  }\n}\n\nComponent.register('bpmn-call-activity', BPMNCallActivity)\n"]}

package/dist/bpmn-comment.d.ts

@@ -0,0 +1,14 @@
+import { BOUNDS } from '@hatiolab/things-scene';
+import BPMNControlBase, { NODE } from './base/bpmn-control-base';
+export default class BPMNComment extends BPMNControlBase {
+    static get nature(): {
+        mutable: boolean;
+        resizable: boolean;
+        rotatable: boolean;
+        properties: never[];
+        help: string;
+    };
+    get nodes(): NODE[];
+    render(ctx: CanvasRenderingContext2D): void;
+    get textBounds(): BOUNDS;
+}

package/dist/bpmn-comment.js

@@ -0,0 +1,53 @@
+import { Component } from '@hatiolab/things-scene';
+import BPMNControlBase, { DIRECTION, INOUT, FLOW } from './base/bpmn-control-base';
+const NATURE = {
+    mutable: false,
+    resizable: true,
+    rotatable: false,
+    properties: [],
+    help: '/eipatterns/bpmn-comment/bpmn-comment'
+};
+export default class BPMNComment extends BPMNControlBase {
+    static get nature() {
+        return NATURE;
+    }
+    get nodes() {
+        return [
+            {
+                name: 'Left',
+                description: 'Left side message inout',
+                inout: INOUT.INOUT,
+                type: FLOW.MESSAGE,
+                direction: DIRECTION.WEST,
+                multiplicity: 1
+            }
+        ];
+    }
+    render(ctx) {
+        const { left, top, width, height } = this.bounds;
+        const bracket = height / 3;
+        ctx.translate(left, top);
+        ctx.beginPath();
+        ctx.moveTo(bracket, 0);
+        ctx.lineTo(0, 0);
+        ctx.lineTo(0, height);
+        ctx.lineTo(bracket, height);
+        this.drawStroke(ctx);
+        ctx.beginPath();
+        ctx.rect(0, 0, width, height);
+        this.drawFill(ctx);
+        ctx.beginPath();
+        ctx.translate(-left, -top);
+    }
+    get textBounds() {
+        var { left, top, width, height } = this.bounds;
+        return {
+            left: left + 10,
+            top: top + 10,
+            width: width - 10,
+            height: height - 10
+        };
+    }
+}
+Component.register('bpmn-comment', BPMNComment);
+//# sourceMappingURL=bpmn-comment.js.map