@operato/scene-bpmn 1.1.1

package/src/bpmn-event.ts

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

package/src/bpmn-flow.ts

@@ -0,0 +1,28 @@
+import { Component, OrthoLine } from '@hatiolab/things-scene'
+
+const NATURE = {
+  mutable: false,
+  resizable: false,
+  rotatable: false,
+  properties: [
+    {
+      type: 'number',
+      label: 'round',
+      name: 'round',
+      property: {
+        min: 0,
+        max: 100,
+        step: 1
+      }
+    }
+  ],
+  help: 'scene/component/bpmn-flow'
+}
+
+export default class BPMNFlow extends OrthoLine {
+  get nature() {
+    return NATURE
+  }
+}
+
+Component.register('bpmn-flow', BPMNFlow)

package/src/bpmn-gateway.ts

@@ -0,0 +1,165 @@
+import { Component, Properties } from '@hatiolab/things-scene'
+
+import BPMNControlBase from './base/bpmn-control-base'
+
+const NATURE = {
+  mutable: false,
+  resizable: false,
+  rotatable: false,
+  properties: [
+    {
+      type: 'select',
+      label: 'gateway-type',
+      name: 'gatewayType',
+      property: {
+        options: [
+          {
+            display: '',
+            value: ''
+          },
+          {
+            display: 'exclusive',
+            value: 'exclusive'
+          },
+          {
+            display: 'inclusive',
+            value: 'inclusive'
+          },
+          {
+            display: 'complex',
+            value: 'complex'
+          },
+          {
+            display: 'event based',
+            value: 'event-based'
+          },
+          {
+            display: 'parallel',
+            value: 'parallel'
+          }
+        ]
+      }
+    }
+  ],
+  help: '/eipatterns/bpmn-gateway/bpmn-gateway'
+}
+
+export default class BPMNGateway extends BPMNControlBase {
+  private imageElement?: HTMLImageElement
+
+  static get nature() {
+    return NATURE
+  }
+
+  render(ctx: CanvasRenderingContext2D) {
+    var { left, top, width, height } = this.bounds
+
+    ctx.translate(left, top)
+    ctx.beginPath()
+
+    ctx.moveTo(width / 2, 0)
+    ctx.lineTo(width, height / 2)
+    ctx.lineTo(width / 2, height)
+    ctx.lineTo(0, height / 2)
+    ctx.lineTo(width / 2, 0)
+
+    this.drawFill(ctx)
+    this.drawStroke(ctx)
+
+    ctx.beginPath()
+
+    const image = this.getImageElement()
+    if (image) {
+      this.drawImage(ctx, image, width / 6, height / 6, (width * 2) / 3, (height * 2) / 3)
+    }
+
+    ctx.translate(-left, -top)
+  }
+
+  onchange(after: Properties, before: Properties) {
+    if ('gatewayType' in after || 'strokeStyle' in after) {
+      delete this.imageElement
+    }
+  }
+
+  getImageElement(): HTMLImageElement | undefined {
+    if (!this.imageElement) {
+      const { gatewayType, strokeStyle } = this.state
+
+      if (!gatewayType) {
+        return
+      }
+
+      const src = IMAGES[gatewayType]
+      if (!src) {
+        return
+      }
+
+      this.imageElement = new Image()
+      this.imageElement.src =
+        'data:image/svg+xml;charset=UTF-8;base64,' + btoa(src.replace(/{{strokeColor}}/g, strokeStyle))
+    }
+
+    return this.imageElement
+  }
+}
+
+Component.register('bpmn-gateway', BPMNGateway)
+
+const IMAGES: { [type: string]: string } = {
+  inclusive: `
+  <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"
+  viewBox="0 0 35 35" style="enable-background:new 0 0 35 35;" xml:space="preserve">
+    <style type="text/css">
+     .st0{fill:{{strokeColor}};}
+    </style>
+    <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
+		S23.9,6,17.5,6L17.5,6z"/>
+  </svg>
+  `,
+  exclusive: `
+  <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"
+  viewBox="0 0 35 35" style="enable-background:new 0 0 35 35;" xml:space="preserve">
+    <style type="text/css">
+     .st0{fill:{{strokeColor}};}
+    </style>
+    <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"/>
+    <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"/>
+  </svg>
+  `,
+  parallel: `
+  <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"
+  viewBox="0 0 35 35" style="enable-background:new 0 0 35 35;" xml:space="preserve">
+    <style type="text/css">
+     .st0{fill:{{strokeColor}};}
+    </style>
+    <rect class="st0" x="16.3" y="6.5" width="3.5" height="22"/>
+    <rect class="st0" x="6.5" y="16.2" width="22" height="3.5"/>
+  </svg>
+  `,
+  complex: `
+  <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"
+  viewBox="0 0 35 35" style="enable-background:new 0 0 35 35;" xml:space="preserve">
+    <style type="text/css">
+     .st0{fill:{{strokeColor}};}
+    </style>
+    <rect class="st0" x="16.2" y="6.5" width="3.5" height="22"/>
+    <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"/>
+    <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"/>
+    <rect class="st0" x="6.5" y="16.2" width="22" height="3.5"/>
+  </svg>
+  `,
+  'event-based': `
+  <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"
+  viewBox="0 0 35 35" style="enable-background:new 0 0 35 35;" xml:space="preserve">
+    <style type="text/css">
+     .st0{fill:{{strokeColor}};}
+    </style>
+    <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
+    s5.4,12,12,12s12-5.4,12-12S24.1,5.5,17.5,5.5L17.5,5.5z"/>
+    <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
+    s4.5,10,10,10s10-4.5,10-10S23,7.5,17.5,7.5L17.5,7.5z"/>
+    <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"/>
+  </svg>
+  `
+}

package/src/bpmn-group.ts

@@ -0,0 +1,39 @@
+import { Component } from '@hatiolab/things-scene'
+
+import BPMNControlBase, { DIRECTION, INOUT, NODE, FLOW } from './base/bpmn-control-base'
+
+const NATURE = {
+  mutable: false,
+  resizable: true,
+  rotatable: false,
+  properties: [],
+  help: '/eipatterns/bpmn-group/bpmn-group'
+}
+
+export default class BPMNGroup extends BPMNControlBase {
+  static get nature() {
+    return NATURE
+  }
+
+  get nodes(): NODE[] {
+    return [
+      {
+        name: 'In',
+        description: 'Message inlet',
+        inout: INOUT.IN,
+        type: FLOW.MESSAGE,
+        direction: DIRECTION.WEST,
+        multiplicity: 1
+      },
+      {
+        name: 'Out',
+        description: 'Message outlet',
+        inout: INOUT.OUT,
+        type: FLOW.MESSAGE,
+        direction: DIRECTION.EAST
+      }
+    ]
+  }
+}
+
+Component.register('bpmn-group', BPMNGroup)