@operato/scene-bpmn 1.1.1

package/logs/.08636eb59927f12972f6774f5947c8507b3564c2-audit.json

@@ -0,0 +1,20 @@
+{
+    "keep": {
+        "days": true,
+        "amount": 2
+    },
+    "auditLog": "logs/.08636eb59927f12972f6774f5947c8507b3564c2-audit.json",
+    "files": [
+        {
+            "date": 1667438337346,
+            "name": "logs/application-2022-11-03-10.log",
+            "hash": "f0581517b21bfccdbb36d87d99f48fd434dfbaf07fae279ffc85a3bec09418e5"
+        },
+        {
+            "date": 1667442518428,
+            "name": "logs/application-2022-11-03-11.log",
+            "hash": "1d20e07d330c7ee2e12367b6594acf2b6fee893ae2b7e8cfb4213267441558e4"
+        }
+    ],
+    "hashType": "sha256"
+}

package/logs/.5e5d741d8b7784a2fbad65eedc0fd46946aaf6f2-audit.json

@@ -0,0 +1,20 @@
+{
+    "keep": {
+        "days": true,
+        "amount": 14
+    },
+    "auditLog": "logs/.5e5d741d8b7784a2fbad65eedc0fd46946aaf6f2-audit.json",
+    "files": [
+        {
+            "date": 1667438338735,
+            "name": "logs/connections-2022-11-03-10.log",
+            "hash": "53ba4fc3646ad58d25c2719784b36a71cb5af73122db53aa54cf97120c01b755"
+        },
+        {
+            "date": 1667442519853,
+            "name": "logs/connections-2022-11-03-11.log",
+            "hash": "2e6e25982e029b45ea868e3607a21b500518da2e8abb2f25f3f29edfa2fe4283"
+        }
+    ],
+    "hashType": "sha256"
+}

package/logs/application-2022-11-03-10.log

@@ -0,0 +1,22 @@
+2022-11-03T10:18:57+09:00 info: File Storage is Ready.
+2022-11-03T10:18:58+09:00 error: oracledb module loading failed
+2022-11-03T10:19:04+09:00 info: File Storage is Ready.
+2022-11-03T10:19:04+09:00 error: oracledb module loading failed
+2022-11-03T10:19:05+09:00 info: Default DataSource established
+2022-11-03T10:19:05+09:00 info: Transaction DataSource established
+2022-11-03T10:20:28+09:00 info: File Storage is Ready.
+2022-11-03T10:20:28+09:00 error: oracledb module loading failed
+2022-11-03T10:20:29+09:00 info: Default DataSource established
+2022-11-03T10:20:29+09:00 info: Transaction DataSource established
+2022-11-03T10:20:50+09:00 info: File Storage is Ready.
+2022-11-03T10:20:51+09:00 error: oracledb module loading failed
+2022-11-03T10:20:51+09:00 info: Default DataSource established
+2022-11-03T10:20:52+09:00 info: Transaction DataSource established
+2022-11-03T10:20:52+09:00 info: 🚀 Server ready at http://0.0.0.0:3000/graphql
+2022-11-03T10:20:52+09:00 info: 🚀 Subscriptions ready at ws://0.0.0.0:3000/graphql
+2022-11-03T10:23:02+09:00 info: File Storage is Ready.
+2022-11-03T10:23:02+09:00 error: oracledb module loading failed
+2022-11-03T10:23:03+09:00 info: Default DataSource established
+2022-11-03T10:23:03+09:00 info: Transaction DataSource established
+2022-11-03T10:23:03+09:00 info: 🚀 Server ready at http://0.0.0.0:3000/graphql
+2022-11-03T10:23:03+09:00 info: 🚀 Subscriptions ready at ws://0.0.0.0:3000/graphql

package/logs/application-2022-11-03-11.log

@@ -0,0 +1,18 @@
+2022-11-03T11:28:38+09:00 info: File Storage is Ready.
+2022-11-03T11:28:40+09:00 error: oracledb module loading failed
+2022-11-03T11:28:40+09:00 info: Default DataSource established
+2022-11-03T11:28:40+09:00 info: Transaction DataSource established
+2022-11-03T11:28:41+09:00 info: 🚀 Server ready at http://0.0.0.0:3000/graphql
+2022-11-03T11:28:41+09:00 info: 🚀 Subscriptions ready at ws://0.0.0.0:3000/graphql
+2022-11-03T11:39:44+09:00 info: File Storage is Ready.
+2022-11-03T11:39:44+09:00 error: oracledb module loading failed
+2022-11-03T11:39:45+09:00 info: Default DataSource established
+2022-11-03T11:39:45+09:00 info: Transaction DataSource established
+2022-11-03T11:39:46+09:00 info: 🚀 Server ready at http://0.0.0.0:3000/graphql
+2022-11-03T11:39:46+09:00 info: 🚀 Subscriptions ready at ws://0.0.0.0:3000/graphql
+2022-11-03T11:51:28+09:00 info: File Storage is Ready.
+2022-11-03T11:51:28+09:00 error: oracledb module loading failed
+2022-11-03T11:51:29+09:00 info: Default DataSource established
+2022-11-03T11:51:29+09:00 info: Transaction DataSource established
+2022-11-03T11:51:30+09:00 info: 🚀 Server ready at http://0.0.0.0:3000/graphql
+2022-11-03T11:51:30+09:00 info: 🚀 Subscriptions ready at ws://0.0.0.0:3000/graphql

package/logs/connections-2022-11-03-10.log

@@ -0,0 +1,70 @@
+2022-11-03T10:20:52+09:00 info: Initializing ConnectionManager...
+2022-11-03T10:20:52+09:00 info: Connector 'echo-back-server' started to ready
+2022-11-03T10:20:52+09:00 info: Connector 'echo-back' started to ready
+2022-11-03T10:20:52+09:00 info: Connector 'http-connector' started to ready
+2022-11-03T10:20:52+09:00 info: Connector 'graphql-connector' started to ready
+2022-11-03T10:20:52+09:00 info: Connector 'sqlite-connector' started to ready
+2022-11-03T10:20:52+09:00 info: Connector 'postgresql-connector' started to ready
+2022-11-03T10:20:52+09:00 info: Connector 'mqtt-connector' started to ready
+2022-11-03T10:20:52+09:00 info: Connector 'mssql-connector' started to ready
+2022-11-03T10:20:52+09:00 info: Connector 'oracle-connector' started to ready
+2022-11-03T10:20:52+09:00 info: Connector 'mysql-connector' started to ready
+2022-11-03T10:20:52+09:00 info: Connector 'socket-server' started to ready
+2022-11-03T10:20:52+09:00 info: echo-back-servers are ready
+2022-11-03T10:20:52+09:00 info: echo-back connections are ready
+2022-11-03T10:20:52+09:00 info: http-connector connections are ready
+2022-11-03T10:20:52+09:00 info: graphql-connector connections are ready
+2022-11-03T10:20:52+09:00 info: sqlite-connector connections are ready
+2022-11-03T10:20:52+09:00 info: postgresql-connector connections are ready
+2022-11-03T10:20:52+09:00 info: mqtt-connector connections are ready
+2022-11-03T10:20:52+09:00 info: mssql-connector connections are ready
+2022-11-03T10:20:52+09:00 info: oracle-connector connections are ready
+2022-11-03T10:20:52+09:00 info: mysql-connector connections are ready
+2022-11-03T10:20:52+09:00 info: socket servers are ready
+2022-11-03T10:20:52+09:00 info: All connector for 'echo-back-server' ready
+2022-11-03T10:20:52+09:00 info: All connector for 'echo-back' ready
+2022-11-03T10:20:52+09:00 info: All connector for 'http-connector' ready
+2022-11-03T10:20:52+09:00 info: All connector for 'graphql-connector' ready
+2022-11-03T10:20:52+09:00 info: All connector for 'sqlite-connector' ready
+2022-11-03T10:20:52+09:00 info: All connector for 'postgresql-connector' ready
+2022-11-03T10:20:52+09:00 info: All connector for 'mqtt-connector' ready
+2022-11-03T10:20:52+09:00 info: All connector for 'mssql-connector' ready
+2022-11-03T10:20:52+09:00 info: All connector for 'oracle-connector' ready
+2022-11-03T10:20:52+09:00 info: All connector for 'mysql-connector' ready
+2022-11-03T10:20:52+09:00 info: All connector for 'socket-server' ready
+2022-11-03T10:20:52+09:00 info: ConnectionManager initialization done:
+2022-11-03T10:23:04+09:00 info: Initializing ConnectionManager...
+2022-11-03T10:23:04+09:00 info: Connector 'echo-back-server' started to ready
+2022-11-03T10:23:04+09:00 info: Connector 'echo-back' started to ready
+2022-11-03T10:23:04+09:00 info: Connector 'http-connector' started to ready
+2022-11-03T10:23:04+09:00 info: Connector 'graphql-connector' started to ready
+2022-11-03T10:23:04+09:00 info: Connector 'sqlite-connector' started to ready
+2022-11-03T10:23:04+09:00 info: Connector 'postgresql-connector' started to ready
+2022-11-03T10:23:04+09:00 info: Connector 'mqtt-connector' started to ready
+2022-11-03T10:23:04+09:00 info: Connector 'mssql-connector' started to ready
+2022-11-03T10:23:04+09:00 info: Connector 'oracle-connector' started to ready
+2022-11-03T10:23:04+09:00 info: Connector 'mysql-connector' started to ready
+2022-11-03T10:23:04+09:00 info: Connector 'socket-server' started to ready
+2022-11-03T10:23:04+09:00 info: echo-back-servers are ready
+2022-11-03T10:23:04+09:00 info: echo-back connections are ready
+2022-11-03T10:23:04+09:00 info: http-connector connections are ready
+2022-11-03T10:23:04+09:00 info: graphql-connector connections are ready
+2022-11-03T10:23:04+09:00 info: sqlite-connector connections are ready
+2022-11-03T10:23:04+09:00 info: postgresql-connector connections are ready
+2022-11-03T10:23:04+09:00 info: mqtt-connector connections are ready
+2022-11-03T10:23:04+09:00 info: mssql-connector connections are ready
+2022-11-03T10:23:04+09:00 info: oracle-connector connections are ready
+2022-11-03T10:23:04+09:00 info: mysql-connector connections are ready
+2022-11-03T10:23:04+09:00 info: socket servers are ready
+2022-11-03T10:23:04+09:00 info: All connector for 'echo-back-server' ready
+2022-11-03T10:23:04+09:00 info: All connector for 'echo-back' ready
+2022-11-03T10:23:04+09:00 info: All connector for 'http-connector' ready
+2022-11-03T10:23:04+09:00 info: All connector for 'graphql-connector' ready
+2022-11-03T10:23:04+09:00 info: All connector for 'sqlite-connector' ready
+2022-11-03T10:23:04+09:00 info: All connector for 'postgresql-connector' ready
+2022-11-03T10:23:04+09:00 info: All connector for 'mqtt-connector' ready
+2022-11-03T10:23:04+09:00 info: All connector for 'mssql-connector' ready
+2022-11-03T10:23:04+09:00 info: All connector for 'oracle-connector' ready
+2022-11-03T10:23:04+09:00 info: All connector for 'mysql-connector' ready
+2022-11-03T10:23:04+09:00 info: All connector for 'socket-server' ready
+2022-11-03T10:23:04+09:00 info: ConnectionManager initialization done:

package/logs/connections-2022-11-03-11.log

@@ -0,0 +1,105 @@
+2022-11-03T11:28:41+09:00 info: Initializing ConnectionManager...
+2022-11-03T11:28:41+09:00 info: Connector 'echo-back-server' started to ready
+2022-11-03T11:28:41+09:00 info: Connector 'echo-back' started to ready
+2022-11-03T11:28:41+09:00 info: Connector 'http-connector' started to ready
+2022-11-03T11:28:41+09:00 info: Connector 'graphql-connector' started to ready
+2022-11-03T11:28:41+09:00 info: Connector 'sqlite-connector' started to ready
+2022-11-03T11:28:41+09:00 info: Connector 'postgresql-connector' started to ready
+2022-11-03T11:28:41+09:00 info: Connector 'mqtt-connector' started to ready
+2022-11-03T11:28:41+09:00 info: Connector 'mssql-connector' started to ready
+2022-11-03T11:28:41+09:00 info: Connector 'oracle-connector' started to ready
+2022-11-03T11:28:41+09:00 info: Connector 'mysql-connector' started to ready
+2022-11-03T11:28:41+09:00 info: Connector 'socket-server' started to ready
+2022-11-03T11:28:41+09:00 info: echo-back-servers are ready
+2022-11-03T11:28:41+09:00 info: echo-back connections are ready
+2022-11-03T11:28:41+09:00 info: http-connector connections are ready
+2022-11-03T11:28:41+09:00 info: graphql-connector connections are ready
+2022-11-03T11:28:41+09:00 info: sqlite-connector connections are ready
+2022-11-03T11:28:41+09:00 info: postgresql-connector connections are ready
+2022-11-03T11:28:41+09:00 info: mqtt-connector connections are ready
+2022-11-03T11:28:41+09:00 info: mssql-connector connections are ready
+2022-11-03T11:28:41+09:00 info: oracle-connector connections are ready
+2022-11-03T11:28:41+09:00 info: mysql-connector connections are ready
+2022-11-03T11:28:41+09:00 info: socket servers are ready
+2022-11-03T11:28:41+09:00 info: All connector for 'echo-back-server' ready
+2022-11-03T11:28:41+09:00 info: All connector for 'echo-back' ready
+2022-11-03T11:28:41+09:00 info: All connector for 'http-connector' ready
+2022-11-03T11:28:41+09:00 info: All connector for 'graphql-connector' ready
+2022-11-03T11:28:41+09:00 info: All connector for 'sqlite-connector' ready
+2022-11-03T11:28:41+09:00 info: All connector for 'postgresql-connector' ready
+2022-11-03T11:28:41+09:00 info: All connector for 'mqtt-connector' ready
+2022-11-03T11:28:41+09:00 info: All connector for 'mssql-connector' ready
+2022-11-03T11:28:41+09:00 info: All connector for 'oracle-connector' ready
+2022-11-03T11:28:41+09:00 info: All connector for 'mysql-connector' ready
+2022-11-03T11:28:41+09:00 info: All connector for 'socket-server' ready
+2022-11-03T11:28:41+09:00 info: ConnectionManager initialization done:
+2022-11-03T11:39:46+09:00 info: Initializing ConnectionManager...
+2022-11-03T11:39:46+09:00 info: Connector 'echo-back-server' started to ready
+2022-11-03T11:39:46+09:00 info: Connector 'echo-back' started to ready
+2022-11-03T11:39:46+09:00 info: Connector 'http-connector' started to ready
+2022-11-03T11:39:46+09:00 info: Connector 'graphql-connector' started to ready
+2022-11-03T11:39:46+09:00 info: Connector 'sqlite-connector' started to ready
+2022-11-03T11:39:46+09:00 info: Connector 'postgresql-connector' started to ready
+2022-11-03T11:39:46+09:00 info: Connector 'mqtt-connector' started to ready
+2022-11-03T11:39:46+09:00 info: Connector 'mssql-connector' started to ready
+2022-11-03T11:39:46+09:00 info: Connector 'oracle-connector' started to ready
+2022-11-03T11:39:46+09:00 info: Connector 'mysql-connector' started to ready
+2022-11-03T11:39:46+09:00 info: Connector 'socket-server' started to ready
+2022-11-03T11:39:46+09:00 info: echo-back-servers are ready
+2022-11-03T11:39:46+09:00 info: echo-back connections are ready
+2022-11-03T11:39:46+09:00 info: http-connector connections are ready
+2022-11-03T11:39:46+09:00 info: graphql-connector connections are ready
+2022-11-03T11:39:46+09:00 info: sqlite-connector connections are ready
+2022-11-03T11:39:46+09:00 info: postgresql-connector connections are ready
+2022-11-03T11:39:46+09:00 info: mqtt-connector connections are ready
+2022-11-03T11:39:46+09:00 info: mssql-connector connections are ready
+2022-11-03T11:39:46+09:00 info: oracle-connector connections are ready
+2022-11-03T11:39:46+09:00 info: mysql-connector connections are ready
+2022-11-03T11:39:46+09:00 info: socket servers are ready
+2022-11-03T11:39:46+09:00 info: All connector for 'echo-back-server' ready
+2022-11-03T11:39:46+09:00 info: All connector for 'echo-back' ready
+2022-11-03T11:39:46+09:00 info: All connector for 'http-connector' ready
+2022-11-03T11:39:46+09:00 info: All connector for 'graphql-connector' ready
+2022-11-03T11:39:46+09:00 info: All connector for 'sqlite-connector' ready
+2022-11-03T11:39:46+09:00 info: All connector for 'postgresql-connector' ready
+2022-11-03T11:39:46+09:00 info: All connector for 'mqtt-connector' ready
+2022-11-03T11:39:46+09:00 info: All connector for 'mssql-connector' ready
+2022-11-03T11:39:46+09:00 info: All connector for 'oracle-connector' ready
+2022-11-03T11:39:46+09:00 info: All connector for 'mysql-connector' ready
+2022-11-03T11:39:46+09:00 info: All connector for 'socket-server' ready
+2022-11-03T11:39:46+09:00 info: ConnectionManager initialization done:
+2022-11-03T11:51:30+09:00 info: Initializing ConnectionManager...
+2022-11-03T11:51:30+09:00 info: Connector 'echo-back-server' started to ready
+2022-11-03T11:51:30+09:00 info: Connector 'echo-back' started to ready
+2022-11-03T11:51:30+09:00 info: Connector 'http-connector' started to ready
+2022-11-03T11:51:30+09:00 info: Connector 'graphql-connector' started to ready
+2022-11-03T11:51:30+09:00 info: Connector 'sqlite-connector' started to ready
+2022-11-03T11:51:30+09:00 info: Connector 'postgresql-connector' started to ready
+2022-11-03T11:51:30+09:00 info: Connector 'mqtt-connector' started to ready
+2022-11-03T11:51:30+09:00 info: Connector 'mssql-connector' started to ready
+2022-11-03T11:51:30+09:00 info: Connector 'oracle-connector' started to ready
+2022-11-03T11:51:30+09:00 info: Connector 'mysql-connector' started to ready
+2022-11-03T11:51:30+09:00 info: Connector 'socket-server' started to ready
+2022-11-03T11:51:30+09:00 info: echo-back-servers are ready
+2022-11-03T11:51:30+09:00 info: echo-back connections are ready
+2022-11-03T11:51:30+09:00 info: http-connector connections are ready
+2022-11-03T11:51:30+09:00 info: graphql-connector connections are ready
+2022-11-03T11:51:30+09:00 info: sqlite-connector connections are ready
+2022-11-03T11:51:30+09:00 info: postgresql-connector connections are ready
+2022-11-03T11:51:30+09:00 info: mqtt-connector connections are ready
+2022-11-03T11:51:30+09:00 info: mssql-connector connections are ready
+2022-11-03T11:51:30+09:00 info: oracle-connector connections are ready
+2022-11-03T11:51:30+09:00 info: mysql-connector connections are ready
+2022-11-03T11:51:30+09:00 info: socket servers are ready
+2022-11-03T11:51:30+09:00 info: All connector for 'echo-back-server' ready
+2022-11-03T11:51:30+09:00 info: All connector for 'echo-back' ready
+2022-11-03T11:51:30+09:00 info: All connector for 'http-connector' ready
+2022-11-03T11:51:30+09:00 info: All connector for 'graphql-connector' ready
+2022-11-03T11:51:30+09:00 info: All connector for 'sqlite-connector' ready
+2022-11-03T11:51:30+09:00 info: All connector for 'postgresql-connector' ready
+2022-11-03T11:51:30+09:00 info: All connector for 'mqtt-connector' ready
+2022-11-03T11:51:30+09:00 info: All connector for 'mssql-connector' ready
+2022-11-03T11:51:30+09:00 info: All connector for 'oracle-connector' ready
+2022-11-03T11:51:30+09:00 info: All connector for 'mysql-connector' ready
+2022-11-03T11:51:30+09:00 info: All connector for 'socket-server' ready
+2022-11-03T11:51:30+09:00 info: ConnectionManager initialization done:

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@operato/scene-bpmn",
+  "description": "bpmn components for things-scene",
+  "license": "MIT",
+  "author": "heartyoh",
+  "version": "1.1.1",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "things-scene": true,
+  "publishConfig": {
+    "access": "public",
+    "@operato:registry": "https://registry.npmjs.org"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/things-scene/operato-scene.git",
+    "directory": "packages/bpmn"
+  },
+  "scripts": {
+    "serve": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"things-factory-dev\"",
+    "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
+    "build": "tsc",
+    "prepublish": "tsc",
+    "lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
+    "format": "eslint --ext .ts,.html . --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore",
+    "migration": "things-factory-migration"
+  },
+  "dependencies": {
+    "@hatiolab/things-scene": "^3.0.19"
+  },
+  "devDependencies": {
+    "@hatiolab/prettier-config": "^1.0.0",
+    "@things-factory/builder": "^6.0.0-alpha.0",
+    "@things-factory/operato-board": "^6.0.0-alpha.0",
+    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/parser": "^4.33.0",
+    "@web/dev-server": "^0.1.28",
+    "concurrently": "^5.3.0",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.3.0",
+    "husky": "^4.3.8",
+    "lint-staged": "^10.5.4",
+    "prettier": "^2.4.1",
+    "tslib": "^2.3.1",
+    "typescript": "^4.8.4"
+  },
+  "prettier": "@hatiolab/prettier-config",
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.ts": [
+      "eslint --fix",
+      "prettier --write"
+    ]
+  },
+  "gitHead": "5541bc4f8d0114d073e6e84825007d9ae865efc7"
+}

package/src/base/bpmn-activity.ts

@@ -0,0 +1,32 @@
+import BPMNControlBase from './bpmn-control-base'
+
+export default abstract class BPMNActivity extends BPMNControlBase {
+  abstract getImageElement(): HTMLImageElement | null | undefined
+
+  render(ctx: CanvasRenderingContext2D) {
+    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)
+  }
+}

package/src/base/bpmn-container-base.ts

@@ -0,0 +1,201 @@
+import { Anchor, BOUNDS, Container, Connectable, LinkEnd } from '@hatiolab/things-scene'
+
+export enum DIRECTION {
+  NORTH = 'N',
+  EAST = 'E',
+  SOUTH = 'S',
+  WEST = 'W'
+}
+
+export enum INOUT {
+  IN = 'in',
+  OUT = 'out',
+  INOUT = 'inout'
+}
+
+export enum FLOW {
+  MESSAGE = 'message',
+  SEQUENCE = 'sequence',
+  ASSOCIATION = 'association'
+}
+
+export type NODE = {
+  name: string
+  description: string
+  inout: INOUT
+  type: FLOW
+  direction: DIRECTION
+  multiplicity?: number
+}
+
+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'
+  }
+}
+
+type FILTER_FUNCTION = (this: Anchor, counterEnd?: LinkEnd) => boolean
+
+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(this: Anchor, counterEnd?: LinkEnd) {
+  if (!counterEnd) {
+    return this.inout !== 'in'
+  }
+
+  const { component, anchor } = counterEnd || {}
+  /* FIXME remove !anchor.type condition */
+  return !anchor?.type || anchor.type === this.type
+}
+
+export default abstract class BPMNContainerBase extends Connectable(Container) {
+  get anchors(): Array<Anchor> {
+    var allNodes = this.nodes
+    var { left, top, width, height } = this.bounds
+
+    var right = left + width
+    var bottom = top + height
+
+    const dirs: Array<Array<Anchor>> = [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 as string,
+            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(): NODE[] {
+    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
+      }
+    ]
+  }
+}