@operato/scene-bpmn 7.3.9 → 7.3.19

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

@@ -1,201 +0,0 @@
-import { Anchor, BOUNDS, Component, Connectable, LinkEnd, Properties, 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: 'black',
-    fillStyle: 'black'
-  },
-  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-comment.ts

@@ -1,64 +0,0 @@
-import { BOUNDS, Component, ComponentNature } from '@hatiolab/things-scene'
-
-import BPMNControlBase, { DIRECTION, INOUT, NODE, FLOW } from './base/bpmn-control-base'
-
-const NATURE: ComponentNature = {
-  mutable: false,
-  resizable: true,
-  rotatable: false,
-  properties: [],
-  help: '/bpmn/comment/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)
-
-    ctx.translate(-left, -top)
-
-    this.drawFill(ctx)
-  }
-
-  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

@@ -1,181 +0,0 @@
-import { Component, Properties, BOUNDS, ComponentNature } from '@hatiolab/things-scene'
-
-import BPMNControlBase from './base/bpmn-control-base'
-
-const NATURE: ComponentNature = {
-  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'
-          }
-        ]
-      }
-    },
-    {
-      type: 'checkbox',
-      name: 'collection',
-      label: 'collection'
-    }
-  ],
-  help: '/bpmn/data-object/data-object'
-}
-
-export default class BPMNDataObject extends BPMNControlBase {
-  private imageElement?: HTMLImageElement
-  private collectionImageElement?: 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 { collection = false } = this.state
-
-    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)
-
-    ctx.translate(-left, -top)
-
-    this.drawFill(ctx)
-    this.drawStroke(ctx)
-
-    ctx.beginPath()
-
-    const image = this.getImageElement()
-    if (image) {
-      this.drawImage(ctx, image, left, top, corner, corner)
-    }
-
-    if (collection) {
-      this.drawImage(ctx, this.getCollectionImageElement()!, left + (width - 16) / 2, top + height - 16, 16, 16)
-    }
-  }
-
-  onchange(after: Properties, before: Properties) {
-    if ('inout' in after || 'collection' in after || 'strokeStyle' in after) {
-      delete this.imageElement
-      delete this.collectionImageElement
-    }
-  }
-
-  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
-  }
-
-  getCollectionImageElement(): HTMLImageElement | undefined {
-    if (!this.collectionImageElement) {
-      const { strokeStyle } = this.state
-
-      this.collectionImageElement = new Image()
-      this.collectionImageElement.src =
-        'data:image/svg+xml;charset=UTF-8;base64,' + btoa(COLLECTION.replace(/{{strokeColor}}/g, strokeStyle))
-    }
-
-    return this.collectionImageElement
-  }
-}
-
-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>
-  `
-}
-
-const COLLECTION: string = `
-    <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>
-  `

package/src/bpmn-data-store.ts

@@ -1,63 +0,0 @@
-import { Component, BOUNDS, ComponentNature } from '@hatiolab/things-scene'
-
-import BPMNControlBase from './base/bpmn-control-base'
-
-const NATURE: ComponentNature = {
-  mutable: false,
-  resizable: true,
-  rotatable: false,
-  properties: [],
-  help: '/bpmn/data-store/data-store'
-}
-
-export default class BPMNDataStore extends BPMNControlBase {
-  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 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)
-
-    ctx.translate(-left, -top)
-
-    this.drawFill(ctx)
-    this.drawStroke(ctx)
-  }
-}
-
-Component.register('bpmn-data-store', BPMNDataStore)