@operato/scene-bpmn 1.1.1

package/src/bpmn-lane.ts

@@ -0,0 +1,46 @@
+import { Component } from '@hatiolab/things-scene'
+
+import BPMNContainerBase, { DIRECTION, INOUT, NODE, FLOW } from './base/bpmn-container-base'
+
+const NATURE = {
+  mutable: false,
+  resizable: true,
+  rotatable: false,
+  properties: [
+    {
+      type: 'string',
+      name: 'participant',
+      label: 'participant'
+    }
+  ],
+  help: '/eipatterns/bpmn-lane/bpmn-lane'
+}
+
+export default class BPMNLane extends BPMNContainerBase {
+  get nature() {
+    return NATURE
+  }
+
+  get hasTextProperty() {
+    return true
+  }
+
+  // get text() {
+  //   return this.state.name
+  // }
+
+  // get textBounds() {
+  //   var { paddingTop = 0, paddingLeft = 0, paddingRight = 0, paddingBottom = 0 } = this.state
+
+  //   var { left, top, width, height } = this.bounds
+
+  //   return {
+  //     left: left + paddingLeft,
+  //     top: top + paddingTop,
+  //     width: Math.max(width - paddingLeft - paddingRight, 0),
+  //     height: Math.max(height - paddingTop - paddingBottom, 0)
+  //   }
+  // }
+}
+
+Component.register('bpmn-lane', BPMNLane)

package/src/bpmn-pool.ts

@@ -0,0 +1,25 @@
+import { Component } from '@hatiolab/things-scene'
+
+import BPMNContainerBase, { DIRECTION, INOUT, NODE, FLOW } from './base/bpmn-container-base'
+
+const NATURE = {
+  mutable: false,
+  resizable: true,
+  rotatable: false,
+  properties: [
+    {
+      type: 'string',
+      name: 'name',
+      label: 'name'
+    }
+  ],
+  help: '/eipatterns/bpmn-pool/bpmn-pool'
+}
+
+export default class BPMNPool extends BPMNContainerBase {
+  get nature() {
+    return NATURE
+  }
+}
+
+Component.register('bpmn-pool', BPMNPool)

package/src/bpmn-subprocess.ts

@@ -0,0 +1,165 @@
+import { Component, Properties } from '@hatiolab/things-scene'
+
+import BPMNControlBase from './base/bpmn-control-base'
+
+const NATURE = {
+  mutable: false,
+  resizable: true,
+  rotatable: false,
+  properties: [
+    {
+      type: 'checkbox',
+      label: 'loop',
+      name: 'loop'
+    },
+    {
+      type: 'checkbox',
+      label: 'multi-instance',
+      name: 'multiInstance'
+    },
+    {
+      type: 'checkbox',
+      label: 'compensation',
+      name: 'compensation'
+    },
+    {
+      type: 'checkbox',
+      label: 'adhoc',
+      name: 'adhoc'
+    }
+  ],
+  help: '/eipatterns/bpmn-subprocess/bpmn-subprocess'
+}
+
+export default class BPMNSubprocess extends BPMNControlBase {
+  private markerImages?: HTMLImageElement[]
+
+  static get nature() {
+    return NATURE
+  }
+
+  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 images = this.getMarkerImages() || []
+    const start = (width - images.length * 24) / 2
+
+    images.forEach((image, index) => {
+      this.drawImage(ctx, image, start + index * 24, height - 24, 24, 24)
+    })
+
+    ctx.translate(-left, -top)
+  }
+
+  onchange(after: Properties, before: Properties) {
+    if (['loop', 'multiInstance', 'adhoc', 'compensation', 'strokeStyle'].find(prop => prop in after)) {
+      delete this.markerImages
+    }
+  }
+
+  getMarkerImages(): HTMLImageElement[] | null | undefined {
+    if (!this.markerImages) {
+      const { strokeStyle } = this.state
+
+      this.markerImages = Object.keys(MARKERS)
+        .filter(key => key === 'subprocess' || this.state[key])
+        .map(key => {
+          let image = new Image()
+          image.src =
+            'data:image/svg+xml;charset=UTF-8;base64,' + btoa(MARKERS[key].replace(/{{strokeColor}}/g, strokeStyle))
+          return image
+        })
+    }
+
+    return this.markerImages
+  }
+}
+
+Component.register('bpmn-subprocess', BPMNSubprocess)
+
+const MARKERS: { [type: string]: string } = {
+  loop: `
+<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="M9.5,5.2C4.3,9.7,3.7,17.5,8.1,22.8L5,25.4l7.8,0.6l0.6-7.8L10.2,21c-3.5-4.1-3-10.1,1-13.6s10.1-3,13.6,1
+	s3,10.1-1,13.6c-1.6,1.4-3.5,2.1-5.4,2.3l-0.2,2.8c2.6-0.2,5.3-1.1,7.4-3c5.2-4.5,5.8-12.3,1.3-17.5S14.7,0.8,9.5,5.2z"/>
+</svg>
+`,
+  multiInstance: `
+  <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 x="5.5" y="1.9" class="st0" width="3.3" height="25.3"/>
+      <rect x="15.9" y="1.9" class="st0" width="3.3" height="25.3"/>
+      <rect x="26.2" y="1.9" class="st0" width="3.3" height="25.3"/>
+    </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>
+   <g>
+      <path class="st0" d="M16.1,6.9v15.6l-7.8-7.8L16.1,6.9 M18.1,2.1L5.5,14.7l12.6,12.6V2.1L18.1,2.1z M5.5,14.7L5.5,14.7L5.5,14.7
+        L5.5,14.7L5.5,14.7z"/>
+    </g>
+    <g>
+      <path class="st0" d="M27.5,6.9v15.6l-7.8-7.8L27.5,6.9 M29.5,2.1L16.9,14.7l12.6,12.6V2.1L29.5,2.1z M16.9,14.7L16.9,14.7
+        L16.9,14.7L16.9,14.7L16.9,14.7z"/>
+    </g>
+  </svg>
+  `,
+  subprocess: `
+  <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:2;stroke-miterlimit:10;}
+      .st1{fill:{{strokeColor}};}  
+    </style>
+    <rect x="5.5" y="2.5" class="st0" width="24" height="24"/>
+    <g>
+      <g>
+        <rect x="16.4" y="6" class="st1" width="2.1" height="17"/>
+      </g>
+      <g>
+        <rect x="9" y="13.4" class="st1" width="17" height="2.1"/>
+      </g>
+    </g>
+  </svg>
+  `,
+  adhoc: `
+  <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.2,10.3c-0.8,0.9-1.7,1.7-2.5,2.2c-0.8,0.5-1.6,0.8-2.4,0.8c-1,0-3-0.6-6.1-1.9C15,10.2,12.6,9.6,11,9.6
+		c-2.1,0-3.9,0.7-5.5,1.9v6.9c0.1,0,0.3-0.2,0.6-0.6C7.9,16,9.5,15,10.9,15c0.8,0,2.9,0.6,6.1,1.9c3.3,1.2,5.7,1.8,7.1,1.8
+		c2,0,3.8-0.6,5.3-1.8v-6.9C29.4,10.1,29.3,10.2,29.2,10.3z"/>
+  </svg>
+  `
+}

package/src/bpmn-task.ts

@@ -0,0 +1,340 @@
+import { Component, Properties } from '@hatiolab/things-scene'
+
+import BPMNControlBase from './base/bpmn-control-base'
+
+const NATURE = {
+  mutable: false,
+  resizable: true,
+  rotatable: false,
+  properties: [
+    {
+      type: 'select',
+      label: 'task-type',
+      name: 'taskType',
+      property: {
+        options: [
+          {
+            display: '',
+            value: ''
+          },
+          {
+            display: 'service',
+            value: 'service'
+          },
+          {
+            display: 'send',
+            value: 'send'
+          },
+          {
+            display: 'receive',
+            value: 'receive'
+          },
+          {
+            display: 'user',
+            value: 'user'
+          },
+          {
+            display: 'manual',
+            value: 'manual'
+          },
+          {
+            display: 'business rule',
+            value: 'business-rule'
+          },
+          {
+            display: 'script',
+            value: 'script'
+          }
+        ]
+      }
+    },
+    {
+      type: 'select',
+      label: 'multi-instance',
+      name: 'multiInstance',
+      property: {
+        options: [
+          {
+            display: '',
+            value: ''
+          },
+          {
+            display: 'parallel',
+            value: 'parallel'
+          },
+          {
+            display: 'sequential',
+            value: 'sequential'
+          }
+        ]
+      }
+    },
+    {
+      type: 'checkbox',
+      label: 'loop',
+      name: 'loop'
+    }
+  ],
+  help: '/eipatterns/bpmn-task/bpmn-task'
+}
+
+export default class BPMNTask extends BPMNControlBase {
+  private imageElement?: HTMLImageElement
+  private markerImages?: HTMLImageElement[]
+
+  static get nature() {
+    return NATURE
+  }
+
+  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)
+    }
+
+    const images = this.getMarkerImages() || []
+    const start = (width - images.length * 24) / 2
+
+    images.forEach((image, index) => {
+      this.drawImage(ctx, image, start + index * 24, height - 24, 24, 24)
+    })
+
+    ctx.translate(-left, -top)
+  }
+
+  onchange(after: Properties, before: Properties) {
+    if (['loop', 'multiInstance', 'taskType', 'strokeStyle'].find(prop => prop in after)) {
+      delete this.markerImages
+      delete this.imageElement
+    }
+  }
+
+  getImageElement(): HTMLImageElement | null | undefined {
+    if (!this.imageElement) {
+      const { taskType, strokeStyle } = this.state
+
+      if (!taskType) {
+        return
+      }
+
+      const src = IMAGES[taskType]
+      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
+  }
+
+  getMarkerImages(): HTMLImageElement[] | null | undefined {
+    if (!this.markerImages) {
+      const { loop, multiInstance, strokeStyle } = this.state
+
+      this.markerImages = []
+
+      if (loop) {
+        let image = new Image()
+        image.src =
+          'data:image/svg+xml;charset=UTF-8;base64,' + btoa(MARKERS['loop'].replace(/{{strokeColor}}/g, strokeStyle))
+        this.markerImages.push(image)
+      }
+
+      if (multiInstance) {
+        let image = new Image()
+        image.src =
+          'data:image/svg+xml;charset=UTF-8;base64,' +
+          btoa(MARKERS[multiInstance].replace(/{{strokeColor}}/g, strokeStyle))
+        this.markerImages.push(image)
+      }
+    }
+
+    return this.markerImages
+  }
+}
+
+Component.register('bpmn-task', BPMNTask)
+
+const IMAGES: { [type: string]: string } = {
+  service: `
+<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>
+    <path class="st0" d="M22.6,11.3l0.3,2.1l0.1,0.6l0.5,0.2c0.5,0.2,0.9,0.5,1.4,0.8l0.5,0.3l0.5-0.2l2-0.8l1.5,2.5l-1.7,1.3
+      l-0.5,0.4l0.1,0.6c0,0.2,0.1,0.5,0.1,0.8c0,0.3,0,0.5-0.1,0.8l-0.1,0.6l0.4,0.4l1.7,1.3l-1.5,2.5l-2-0.8l-0.5-0.2l-0.5,0.4
+      c-0.4,0.3-0.9,0.6-1.4,0.8L23,25.8l-0.1,0.6l-0.3,2.1h-2.9l-0.3-2.1l-0.1-0.6l-0.5-0.2c-0.5-0.2-0.9-0.5-1.4-0.8l-0.5-0.3
+      l-0.5,0.2l-2,0.8l-1.5-2.5l1.7-1.3l0.5-0.4L15,20.6c0-0.2-0.1-0.5-0.1-0.8c0-0.2,0-0.5,0.1-0.8l0.1-0.6l-0.5-0.4L13,16.8l1.5-2.5
+      l2,0.8l0.5,0.2l0.5-0.3c0.5-0.4,0.9-0.6,1.4-0.8l0.5-0.2l0.1-0.6l0.3-2.1H22.6 M21.1,24.5c2.5,0,4.6-2.1,4.6-4.6s-2.1-4.6-4.6-4.6
+      s-4.6,2.1-4.6,4.6S18.6,24.5,21.1,24.5 M23,10.3h-3.8c-0.2,0-0.4,0.2-0.5,0.4l-0.4,2.5c-0.6,0.2-1.1,0.6-1.6,0.9l-2.4-1
+      c-0.1,0-0.1,0-0.2,0c-0.2,0-0.3,0.1-0.4,0.3l-1.9,3.3c-0.1,0.2-0.1,0.5,0.1,0.6l2,1.6c-0.1,0.3-0.1,0.6-0.1,0.9s0,0.6,0.1,0.9
+      l-2,1.6c-0.2,0.1-0.2,0.4-0.1,0.6l1.9,3.3c0.1,0.2,0.3,0.2,0.4,0.2c0.1,0,0.1,0,0.2,0l2.4-1c0.5,0.4,1,0.7,1.6,0.9l0.4,2.5
+      c0,0.2,0.2,0.4,0.5,0.4H23c0.2,0,0.4-0.2,0.5-0.4l0.4-2.5c0.6-0.2,1.1-0.6,1.6-0.9l2.4,1c0.1,0,0.1,0,0.2,0c0.2,0,0.3-0.1,0.4-0.3
+      l1.9-3.3c0.1-0.2,0.1-0.5-0.1-0.6l-2-1.6c0-0.3,0.1-0.6,0.1-0.9c0-0.3,0-0.6-0.1-0.9l2-1.6c0.2-0.1,0.2-0.4,0.1-0.6l-1.9-3.3
+      c-0.1-0.2-0.3-0.2-0.4-0.2c-0.1,0-0.1,0-0.2,0l-2.4,1c-0.5-0.4-1-0.7-1.6-0.9l-0.4-2.5C23.5,10.4,23.3,10.3,23,10.3L23,10.3z
+        M21.1,23.5c-2,0-3.6-1.6-3.6-3.6s1.6-3.6,3.6-3.6s3.6,1.6,3.6,3.6S23.1,23.5,21.1,23.5L21.1,23.5z"/>
+  </g>
+  <g>
+    <g>
+      <path class="st0" d="M16.8,6.5L17.2,9l0.1,0.6l0.3,0.1l-1,1.9c-0.5-0.2-1-0.3-1.5-0.3c-2.8,0-5.1,2.3-5.1,5.1
+        c0,1.3,0.5,2.5,1.3,3.4l-1.2,1.9l-0.4,0.2l-2.3,0.9l-1.8-3.1l2-1.5l0.5-0.4L8,17.3c0-0.3-0.1-0.6-0.1-0.9c0-0.2,0-0.5,0.1-0.9
+        l0.1-0.6l-0.5-0.4l-2-1.5l1.8-3.1l2.3,0.9l0.5,0.2l0.5-0.3c0.5-0.4,1.1-0.7,1.6-0.9l0.5-0.2L13,9l0.3-2.5H16.8 M17.2,5.5h-4.3
+        c-0.3,0-0.5,0.2-0.5,0.5L12,8.9c-0.7,0.3-1.3,0.6-1.8,1.1L7.4,8.8c-0.1,0-0.1,0-0.2,0c-0.2,0-0.4,0.1-0.5,0.3l-2.2,3.7
+        c-0.1,0.2-0.1,0.5,0.1,0.7L7,15.3C7,15.6,6.9,16,6.9,16.4c0,0.3,0,0.7,0.1,1.1l-2.3,1.8c-0.2,0.2-0.3,0.5-0.1,0.7l2.2,3.7
+        c0.1,0.2,0.3,0.3,0.5,0.3c0.1,0,0.1,0,0.2,0l2.7-1.1c0.1,0.1,0.3,0.2,0.4,0.3l2.1-3.5c-1-0.7-1.6-1.9-1.6-3.2
+        c0-2.2,1.8-4.1,4.1-4.1c0.7,0,1.4,0.2,2,0.5l1.9-3.6c-0.2-0.1-0.5-0.3-0.8-0.4L17.8,6C17.7,5.7,17.5,5.5,17.2,5.5L17.2,5.5z"/>
+    </g>
+  </g>
+  </g>
+</svg>
+`,
+  send: `
+  <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="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>
+  `,
+  receive: `
+  <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>
+  `,
+  user: `
+  <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>
+        <path class="st0" d="M17.5,6.5c2.8,0,5,2.2,5,5s-2.2,5-5,5s-5-2.2-5-5S14.7,6.5,17.5,6.5 M17.4,20c3.6,0,10.1,3.3,10.1,6.5v2h-20v-2
+          C7.5,23.3,13.8,20,17.4,20 M17.5,5.5c-3.3,0-6,2.7-6,6s2.7,6,6,6s6-2.7,6-6S20.8,5.5,17.5,5.5L17.5,5.5z M17.4,19
+          c-4,0-10.9,3.6-10.9,7.5v3h22v-3C28.5,22.5,21.4,19,17.4,19L17.4,19z"/>
+      </g>
+      <path class="st0" d="M14.6,7.2c0,0,2,4.5,7.9,3.9C22.5,11.1,21.8,4.3,14.6,7.2z"/>
+      <path class="st0" d="M16.2,9.4c0,0-1.2,1.3-4,1.2l1.2-2.5L14.9,7L16.2,9.4z"/>
+    </g>
+  </svg>
+  `,
+  manual: `
+  <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-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
+    </style>
+    <g>
+      <g>
+        <g>
+          <path class="st0" d="M24,28.5H9.5c-2.2,0-4-1.8-4-4v-7.3c0-1.1,0.4-2.1,1.2-2.9l8-7.9c0,0,1.2,1.3,1.2,1.3
+            c0.2,0.2,0.3,0.5,0.3,0.8c0,0.2-0.1,0.4-0.2,0.6c0,0-2.5,4.3-2.5,4.3h11.9c0.8,0,1.5,0.7,1.5,1.5s-0.7,1.5-1.5,1.5h-7v1H28
+            c0.8,0,1.5,0.7,1.5,1.5s-0.7,1.5-1.5,1.5h-9.5v1H27c0.8,0,1.5,0.7,1.5,1.5s-0.7,1.5-1.5,1.5h-8.5v1H24c0.8,0,1.5,0.7,1.5,1.5
+            S24.8,28.5,24,28.5z"/>
+        </g>
+      </g>
+    </g>
+  </svg>
+  `,
+  'business-rule': `
+  <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>
+        <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="M29,21.4H6v-1h23V21.4z M28.8,16.4h-23v-1h23V16.4z M14.2,10.6v16h-1v-16H14.2z"/>
+    </g>
+  </svg>
+  `,
+  script: `
+  <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-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
+    </style>
+    <g>
+      <path class="st0" d="M7.9,8h20.8c0,0-2.9,1.7-2.6,7.2c0.1,1,0.5,2,1.1,2.9c1.1,1.5,3,4.6,0.4,9h-21c0,0,3.2-5.5,1-9
+        C7.6,18,3.8,12.4,7.9,8z"/>
+      <rect class="st0" x="9.1" y="11.3" width="14" height="1"/>
+      <rect class="st0" x="9.7" y="15" width="14" height="1"/>
+      <rect class="st0" x="10.7" y="18.7" width="14" height="1"/>
+      <rect class="st0" x="11.7" y="22.3" width="14" height="1"/>
+    </g>
+  </svg>
+  `
+}
+
+const MARKERS: { [type: string]: string } = {
+  loop: `
+  <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="M9.5,5.2C4.3,9.7,3.7,17.5,8.1,22.8L5,25.4l7.8,0.6l0.6-7.8L10.2,21c-3.5-4.1-3-10.1,1-13.6s10.1-3,13.6,1
+    s3,10.1-1,13.6c-1.6,1.4-3.5,2.1-5.4,2.3l-0.2,2.8c2.6-0.2,5.3-1.1,7.4-3c5.2-4.5,5.8-12.3,1.3-17.5S14.7,0.8,9.5,5.2z"/>
+  </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>
+    <g>
+      <rect x="5.5" y="1.9" class="st0" width="3.3" height="25.3"/>
+      <rect x="15.9" y="1.9" class="st0" width="3.3" height="25.3"/>
+      <rect x="26.2" y="1.9" class="st0" width="3.3" height="25.3"/>
+    </g>
+  </svg>
+  `,
+  sequential: `
+  <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 x="4.8" y="2.6" width="25.3" height="3.3" class="st0"/>
+      <rect x="4.8" y="13" width="25.3" height="3.3" class="st0"/>
+      <rect x="4.8" y="23.3" width="25.3" height="3.3" class="st0"/>
+    </g>
+  </svg>
+  `
+}

package/src/groups/index.ts

@@ -0,0 +1,3 @@
+import { process } from './process'
+
+export default [process]

package/src/groups/process.ts

@@ -0,0 +1,48 @@
+const icon = `
+<svg version="1.1" 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>
+      <path class="st0" d="M33.2,15.2v4.6h-4.6v-4.6H33.2 M34,14.4h-6.1v6.1H34V14.4L34,14.4z"/>
+    </g>
+    <g>
+      <g>
+        <path class="st0" d="M17.5,15.3l2.2,2.2l-2.2,2.2l-2.2-2.2L17.5,15.3 M17.5,14.2l-3.3,3.3l3.3,3.3l3.3-3.3L17.5,14.2L17.5,14.2z"
+          />
+      </g>
+      <g>
+        <path class="st0" d="M19.8,7.2v4.6h-4.6V7.2H19.8 M20.6,6.5h-6.1v6.1h6.1V6.5L20.6,6.5z"/>
+      </g>
+      <g>
+        <path class="st0" d="M19.8,23.1v4.6h-4.6v-4.6H19.8 M20.6,22.4h-6.1v6.1h6.1V22.4L20.6,22.4z"/>
+      </g>
+    </g>
+    <g>
+      <g>
+        <polygon class="st0" points="13.3,17.4 10.6,19.6 10.6,15.2 13.3,17.4 			"/>
+      </g>
+      <rect x="8.2" y="16.9" class="st0" width="3.4" height="0.9"/>
+    </g>
+    <g>
+      <g>
+        <polygon class="st0" points="26.8,17.4 24,19.6 24,15.2 26.8,17.4 			"/>
+      </g>
+      <rect x="21.7" y="16.9" class="st0" width="3.4" height="0.9"/>
+    </g>
+    <g>
+      <path class="st0" d="M4.1,15.2c1.3,0,2.3,1,2.3,2.3s-1,2.3-2.3,2.3s-2.3-1-2.3-2.3S2.8,15.2,4.1,15.2 M4.1,14.4
+        c-1.7,0-3.1,1.4-3.1,3.1c0,1.7,1.4,3.1,3.1,3.1s3.1-1.4,3.1-3.1C7.1,15.8,5.8,14.4,4.1,14.4L4.1,14.4z"/>
+    </g>
+  </g>
+</svg>
+`
+
+export const process = {
+  name: 'process',
+  description: 'a group of Business Process Management Notation',
+  icon,
+  templates: []
+}

package/src/index.ts

@@ -0,0 +1,12 @@
+export { default as BPMNCallActivity } from './bpmn-call-activity'
+export { default as BPMNComment } from './bpmn-comment'
+export { default as BPMNDataObject } from './bpmn-data-object'
+export { default as BPMNDataStore } from './bpmn-data-store'
+export { default as BPMNEvent } from './bpmn-event'
+export { default as BPMNFlow } from './bpmn-flow'
+export { default as BPMNGateway } from './bpmn-gateway'
+export { default as BPMNGroup } from './bpmn-group'
+export { default as BPMNLane } from './bpmn-lane'
+export { default as BPMNPool } from './bpmn-pool'
+export { default as BPMNSubprocess } from './bpmn-subprocess'
+export { default as BPMNTask } from './bpmn-task'

package/src/templates/bpmn-call-activity.ts

@@ -0,0 +1,18 @@
+const icon = new URL('../../icons/icon-bpmn-call-activity.png', import.meta.url).href
+
+export default {
+  type: 'bpmn-call-activity',
+  description: 'controls for BPMN call-activity',
+  group: 'process',
+  icon,
+  model: {
+    type: 'bpmn-call-activity',
+    left: 10,
+    top: 10,
+    width: 100,
+    height: 60,
+    strokeStyle: 'black',
+    lineWidth: 2
+  },
+  about: 'https://www.visual-paradigm.com/guide/bpmn/bpmn-activity-types-explained/'
+}