@operato/scene-bpmn 1.1.1

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

@@ -0,0 +1,201 @@
+import { Anchor, BOUNDS, Component, Connectable, LinkEnd, RectPath, Shape } 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 BPMNControlBase extends Connectable(RectPath(Shape)) {
+  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
+      }
+    ]
+  }
+}

package/src/bpmn-call-activity.ts

@@ -0,0 +1,22 @@
+import { Component } from '@hatiolab/things-scene'
+import BPMNActivity from './base/bpmn-activity'
+
+const NATURE = {
+  mutable: false,
+  resizable: true,
+  rotatable: false,
+  properties: [],
+  help: '/eipatterns/bpmn-call-activity/bpmn-call-activity'
+}
+
+export default class BPMNCallActivity extends BPMNActivity {
+  static get nature() {
+    return NATURE
+  }
+
+  getImageElement(): HTMLImageElement | undefined {
+    return
+  }
+}
+
+Component.register('bpmn-call-activity', BPMNCallActivity)

package/src/bpmn-comment.ts

@@ -0,0 +1,65 @@
+import { BOUNDS, 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-comment/bpmn-comment'
+}
+
+export default class BPMNComment extends BPMNControlBase {
+  static get nature() {
+    return NATURE
+  }
+
+  get nodes(): NODE[] {
+    return [
+      {
+        name: 'Left',
+        description: 'Left side message inout',
+        inout: INOUT.INOUT,
+        type: FLOW.MESSAGE,
+        direction: DIRECTION.WEST,
+        multiplicity: 1
+      }
+    ]
+  }
+
+  render(ctx: CanvasRenderingContext2D) {
+    const { left, top, width, height } = this.bounds
+    const bracket = height / 3
+
+    ctx.translate(left, top)
+    ctx.beginPath()
+
+    ctx.moveTo(bracket, 0)
+    ctx.lineTo(0, 0)
+    ctx.lineTo(0, height)
+    ctx.lineTo(bracket, height)
+    this.drawStroke(ctx)
+
+    ctx.beginPath()
+    ctx.rect(0, 0, width, height)
+    this.drawFill(ctx)
+
+    ctx.beginPath()
+
+    ctx.translate(-left, -top)
+  }
+
+  get textBounds(): BOUNDS {
+    var { left, top, width, height } = this.bounds
+
+    return {
+      left: left + 10,
+      top: top + 10,
+      width: width - 10,
+      height: height - 10
+    }
+  }
+}
+
+Component.register('bpmn-comment', BPMNComment)

package/src/bpmn-data-object.ts

@@ -0,0 +1,127 @@
+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',
+      name: 'inout',
+      label: 'inout',
+      property: {
+        options: [
+          {
+            display: '',
+            value: ''
+          },
+          {
+            display: 'input',
+            value: 'input'
+          },
+          {
+            display: 'output',
+            value: 'output'
+          }
+        ]
+      }
+    }
+  ],
+  help: '/eipatterns/bpmn-data-object/bpmn-data-object'
+}
+
+export default class BPMNDataObject extends BPMNControlBase {
+  private imageElement?: HTMLImageElement
+
+  static get nature() {
+    return NATURE
+  }
+
+  render(ctx: CanvasRenderingContext2D) {
+    var { left, top, width, height } = this.bounds
+
+    const corner = (Math.min(width, height) * 2) / 5
+
+    ctx.translate(left, top)
+    ctx.beginPath()
+
+    ctx.moveTo(width - corner, 0)
+    ctx.lineTo(width - corner, corner)
+    ctx.lineTo(width, corner)
+    ctx.lineTo(width - corner, 0)
+    this.drawStroke(ctx)
+
+    ctx.beginPath()
+    ctx.moveTo(0, 0)
+    ctx.lineTo(width - corner, 0)
+    ctx.lineTo(width - corner, corner)
+    ctx.lineTo(width, corner)
+    ctx.lineTo(width, height)
+    ctx.lineTo(0, height)
+    ctx.lineTo(0, 0)
+
+    this.drawFill(ctx)
+    this.drawStroke(ctx)
+
+    ctx.beginPath()
+
+    const image = this.getImageElement()
+    if (image) {
+      this.drawImage(ctx, image, 0, 0, corner, corner)
+    }
+
+    ctx.translate(-left, -top)
+  }
+
+  onchange(after: Properties, before: Properties) {
+    if ('inout' in after || 'strokeStyle' in after) {
+      delete this.imageElement
+    }
+  }
+
+  getImageElement(): HTMLImageElement | undefined {
+    if (!this.imageElement) {
+      const { inout, strokeStyle } = this.state
+
+      if (!inout) {
+        return
+      }
+
+      const src: string = IMAGES[inout]
+      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-data-object', BPMNDataObject)
+
+const IMAGES: { [type: string]: string } = {
+  input: `
+  <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>
+  `,
+  output: `
+  <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>
+  `
+}

package/src/bpmn-data-store.ts

@@ -0,0 +1,47 @@
+import { Component } from '@hatiolab/things-scene'
+
+import BPMNControlBase from './base/bpmn-control-base'
+
+const NATURE = {
+  mutable: false,
+  resizable: true,
+  rotatable: false,
+  properties: [],
+  help: '/eipatterns/bpmn-data-store/bpmn-data-store'
+}
+
+export default class BPMNDataStore extends BPMNControlBase {
+  static get nature() {
+    return NATURE
+  }
+
+  render(ctx: CanvasRenderingContext2D) {
+    const { left, top, width, height } = this.bounds
+    const ry = Math.abs(height / 6)
+    const startAngle = Math.PI
+    const endAngle = 0
+
+    ctx.translate(left, top)
+    ctx.beginPath()
+
+    ctx.ellipse(width / 2, ry, width / 2, ry, 0, startAngle, startAngle - Math.PI * 2, true)
+
+    ctx.moveTo(0, ry + ry / 2)
+    ctx.ellipse(width / 2, ry + ry / 2, width / 2, ry, 0, startAngle, endAngle, true)
+
+    ctx.moveTo(0, ry + ry)
+    ctx.ellipse(width / 2, ry + ry, width / 2, ry, 0, startAngle, endAngle, true)
+
+    ctx.moveTo(0, ry)
+    ctx.lineTo(0, height - ry)
+    ctx.ellipse(width / 2, height - ry, width / 2, ry, 0, startAngle, endAngle, true)
+    ctx.lineTo(width, ry)
+
+    this.drawFill(ctx)
+    this.drawStroke(ctx)
+
+    ctx.translate(-left, -top)
+  }
+}
+
+Component.register('bpmn-data-store', BPMNDataStore)