@operato/scene-bpmn 8.0.0-beta.1 → 8.0.0

package/src/bpmn-subprocess.ts

@@ -1,323 +0,0 @@
-import { Component, ComponentNature, Properties } from '@hatiolab/things-scene'
-
-import BPMNControlBase from './base/bpmn-control-base'
-
-const NATURE: ComponentNature = {
-  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'
-    },
-    {
-      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/subprocess/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
-    const { callActivity, interrupting, transaction } = this.state
-
-    ctx.translate(left, top)
-    ctx.beginPath()
-
-    var radius = 10
-
-    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'
-      })
-    }
-
-    ctx.beginPath()
-
-    const images = this.getMarkerImages() || []
-    const start = left + (width - images.length * 16) / 2
-
-    images.forEach((image, index) => {
-      this.drawImage(ctx, image, start + index * 16, top + height - 16, 16, 16)
-    })
-  }
-
-  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>
-  `
-}