@operato/scene-bpmn 7.0.1 → 7.3.19

package/src/bpmn-event.ts

@@ -1,468 +0,0 @@
-import { BOUNDS, Component, ComponentNature, Properties } from '@hatiolab/things-scene'
-
-import BPMNControlBase from './base/bpmn-control-base'
-
-enum BEHAVIOR {
-  catching,
-  throwing
-}
-
-const NATURE: ComponentNature = {
-  mutable: false,
-  resizable: true,
-  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'
-          }
-        ]
-      }
-    },
-    {
-      type: 'checkbox',
-      label: 'interrupting',
-      name: 'interrupting'
-    }
-  ],
-  help: '/bpmn/event/event'
-}
-
-export default class BPMNEvent extends BPMNControlBase {
-  private imageElement?: HTMLImageElement
-
-  static get nature() {
-    return NATURE
-  }
-
-  get textBounds(): BOUNDS {
-    var { left, top, width, height } = this.bounds
-    var { paddingTop, paddingLeft, paddingRight } = this.state
-
-    paddingTop ||= 0
-    paddingLeft ||= 0
-    paddingRight ||= 0
-
-    return {
-      left: left + paddingLeft,
-      top: top + paddingTop + height + 10,
-      width: Math.max(width - paddingLeft - paddingRight, 0),
-      height: 0
-    }
-  }
-
-  render(ctx: CanvasRenderingContext2D) {
-    const { left, top, width, height } = this.bounds
-    const { eventType, interrupting } = this.state
-    const cx = width / 2
-    const cy = height / 2
-
-    ctx.translate(left, top)
-    ctx.beginPath()
-
-    var lineWidth = 2
-
-    switch (eventType) {
-      case 'intermediate':
-        lineWidth = 1
-        ctx.ellipse(cx, cy, width / 2, height / 2, 0, 0, 2 * Math.PI)
-        ctx.moveTo(width / 2 + width / 2.5, height / 2)
-        ctx.ellipse(cx, cy, width / 2.5, height / 2.5, 0, 0, 2 * Math.PI)
-        break
-
-      case 'end':
-        lineWidth = 5
-        ctx.ellipse(cx, cy, width / 2 - 1.5, height / 2 - 1.5, 0, 0, 2 * Math.PI)
-        break
-
-      case 'start':
-      default:
-        ctx.ellipse(cx, cy, width / 2, height / 2, 0, 0, 2 * Math.PI)
-        break
-    }
-
-    ctx.translate(-left, -top)
-
-    this.drawFill(ctx)
-
-    this.drawStroke(ctx, {
-      lineWidth,
-      lineDash: interrupting ? 'round-dot' : 'solid'
-    })
-
-    ctx.beginPath()
-
-    const image = this.getImageElement()
-    if (image) {
-      this.drawImage(ctx, image, left + width / 6, top + height / 6, (width * 2) / 3, (height * 2) / 3)
-    }
-  }
-
-  onchange(after: Properties, before: Properties) {
-    if ('marker' in after || 'strokeStyle' in after) {
-      // Since strokeStyle affects the image, the image is redrawn according to the change of strokeStyle.
-      delete this.imageElement
-      this.invalidate()
-    }
-  }
-
-  getImageElement(): 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-expanded-subprocess.ts

@@ -1,207 +0,0 @@
-import { Component, ComponentNature } from '@hatiolab/things-scene'
-import { over } from 'lodash'
-
-import BPMNContainerBase, { DIRECTION, INOUT, NODE, FLOW } from './base/bpmn-container-base'
-
-const NATURE: ComponentNature = {
-  mutable: false,
-  resizable: true,
-  rotatable: false,
-  properties: [
-    {
-      type: 'string',
-      name: 'name',
-      label: 'name'
-    },
-    {
-      type: 'checkbox',
-      label: 'call-activity',
-      name: 'callActivity'
-    },
-    {
-      type: 'checkbox',
-      label: 'transaction',
-      name: 'transaction'
-    },
-    {
-      type: 'checkbox',
-      label: 'interrupting',
-      name: 'interrupting'
-    },
-    {
-      type: 'select',
-      label: 'trigger-event',
-      name: 'triggerEvent',
-      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'
-          }
-        ]
-      }
-    },
-    {
-      // TODO this property might be an array
-      type: 'select',
-      label: 'boundary-event',
-      name: 'boundaryEvent',
-      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'
-}
-
-export default class BPMNExpandedSubprocess extends BPMNContainerBase {
-  get nature() {
-    return NATURE
-  }
-
-  render(ctx: CanvasRenderingContext2D) {
-    const { left, top, width, height } = this.bounds
-    const { callActivity, interrupting, transaction } = this.state
-    var radius = 9
-
-    ctx.translate(left, top)
-    ctx.beginPath()
-
-    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)
-    }
-
-    ctx.translate(-left, -top)
-
-    this.drawFill(ctx)
-
-    if (callActivity) {
-      this.drawStroke(ctx, { lineWidth: 5 })
-    } else {
-      this.drawStroke(ctx, {
-        lineWidth: transaction ? 1 : 2,
-        lineDash: interrupting ? 'dash' : 'solid'
-      })
-    }
-  }
-
-  get textHidden() {
-    return false
-  }
-}
-
-Component.register('bpmn-expanded-subprocess', BPMNExpandedSubprocess)