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

package/src/bpmn-flow.ts

@@ -1,37 +0,0 @@
-import { Component, ComponentNature, OrthoLine } from '@hatiolab/things-scene'
-
-const NATURE: ComponentNature = {
-  mutable: false,
-  resizable: false,
-  rotatable: false,
-  properties: [
-    {
-      type: 'number',
-      label: 'round',
-      name: 'round',
-      property: {
-        min: 0,
-        max: 100,
-        step: 1
-      }
-    },
-    {
-      type: 'checkbox',
-      label: 'default',
-      name: 'default'
-    }
-  ],
-  help: 'bpmn/flow/flow'
-}
-
-export default class BPMNFlow extends OrthoLine {
-  get nature() {
-    return NATURE
-  }
-
-  get pathExtendable() {
-    return false
-  }
-}
-
-Component.register('bpmn-flow', BPMNFlow)

package/src/bpmn-gateway.ts

@@ -1,181 +0,0 @@
-import { BOUNDS, 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: 'select',
-      label: 'gateway-type',
-      name: 'gatewayType',
-      property: {
-        options: [
-          {
-            display: '',
-            value: ''
-          },
-          {
-            display: 'exclusive',
-            value: 'exclusive'
-          },
-          {
-            display: 'inclusive',
-            value: 'inclusive'
-          },
-          {
-            display: 'complex',
-            value: 'complex'
-          },
-          {
-            display: 'event based',
-            value: 'event-based'
-          },
-          {
-            display: 'parallel',
-            value: 'parallel'
-          }
-        ]
-      }
-    }
-  ],
-  help: '/bpmn/gateway/gateway'
-}
-
-export default class BPMNGateway 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) {
-    var { left, top, width, height } = this.bounds
-
-    ctx.translate(left, top)
-    ctx.beginPath()
-
-    ctx.moveTo(width / 2, 0)
-    ctx.lineTo(width, height / 2)
-    ctx.lineTo(width / 2, height)
-    ctx.lineTo(0, height / 2)
-    ctx.lineTo(width / 2, 0)
-
-    ctx.translate(-left, -top)
-
-    this.drawFill(ctx)
-    this.drawStroke(ctx)
-
-    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 ('gatewayType' in after || 'strokeStyle' in after) {
-      delete this.imageElement
-    }
-  }
-
-  getImageElement(): HTMLImageElement | undefined {
-    if (!this.imageElement) {
-      const { gatewayType, strokeStyle } = this.state
-
-      if (!gatewayType) {
-        return
-      }
-
-      const src = IMAGES[gatewayType]
-      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-gateway', BPMNGateway)
-
-const IMAGES: { [type: string]: string } = {
-  inclusive: `
-  <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.5,8.5c5,0,9,4,9,9s-4,9-9,9s-9-4-9-9S12.5,8.5,17.5,8.5 M17.5,6C11.1,6,6,11.1,6,17.5S11.1,29,17.5,29S29,23.9,29,17.5
-		S23.9,6,17.5,6L17.5,6z"/>
-  </svg>
-  `,
-  exclusive: `
-  <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>
-    <rect class="st0" x="6.5" y="15.8" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -7.2487 17.5)" width="22" height="3.5"/>
-    <rect class="st0" x="15.8" y="6.5" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -7.2487 17.5)" width="3.5" height="22"/>
-  </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>
-    <rect class="st0" x="16.3" y="6.5" width="3.5" height="22"/>
-    <rect class="st0" x="6.5" y="16.2" width="22" height="3.5"/>
-  </svg>
-  `,
-  complex: `
-  <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>
-    <rect class="st0" x="16.2" y="6.5" width="3.5" height="22"/>
-    <rect class="st0" x="6.5" y="16.2" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -7.2487 17.5)" width="22" height="3.5"/>
-    <rect class="st0" x="16.2" y="6.5" transform="matrix(0.7072 -0.707 0.707 0.7072 -7.2487 17.4966)" width="3.5" height="22"/>
-    <rect class="st0" x="6.5" y="16.2" width="22" height="3.5"/>
-  </svg>
-  `,
-  'event-based': `
-  <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.5,6.2c6.2,0,11.2,5,11.2,11.2s-5,11.2-11.2,11.2s-11.2-5-11.2-11.2S11.3,6.2,17.5,6.2 M17.5,5.5c-6.6,0-12,5.4-12,12
-    s5.4,12,12,12s12-5.4,12-12S24.1,5.5,17.5,5.5L17.5,5.5z"/>
-    <path class="st0" d="M17.5,8.2c5.1,0,9.2,4.1,9.2,9.2s-4.1,9.2-9.2,9.2s-9.2-4.1-9.2-9.2S12.4,8.2,17.5,8.2 M17.5,7.5c-5.5,0-10,4.5-10,10
-    s4.5,10,10,10s10-4.5,10-10S23,7.5,17.5,7.5L17.5,7.5z"/>
-    <path class="st0" d="M17.5,11.7l5.7,4.1L21,22.5h-7l-2.2-6.7L17.5,11.7 M17.5,10l-7.3,5.3l2.8,8.6h9l2.8-8.6L17.5,10L17.5,10z"/>
-  </svg>
-  `
-}

package/src/bpmn-group.ts

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

package/src/bpmn-lane.ts

@@ -1,125 +0,0 @@
-import { Component, ComponentNature, Properties } from '@hatiolab/things-scene'
-
-import BPMNContainerBase from './base/bpmn-container-base'
-
-const NATURE: ComponentNature = {
-  mutable: false,
-  resizable: true,
-  rotatable: false,
-  properties: [
-    {
-      type: 'string',
-      name: 'name',
-      label: 'name'
-    }
-  ],
-  help: '/bpmn/lane/lane'
-}
-
-export default class BPMNLane extends BPMNContainerBase {
-  private textElement?: HTMLSpanElement
-
-  get nature() {
-    return NATURE
-  }
-
-  get hasTextProperty() {
-    return true
-  }
-
-  createElement() {
-    super.createElement()
-
-    const text = document.createElement('div')
-
-    this.element.appendChild(text)
-    this.textElement = text
-    this.setTextElementProperties()
-  }
-
-  setTextElementProperties() {
-    if (!this.textElement) {
-      return
-    }
-
-    var {
-      bold,
-      italic,
-
-      fontFamily = '',
-      textAlign,
-      textBaseline,
-
-      paddingTop,
-      paddingBottom,
-      paddingLeft,
-      paddingRight,
-
-      fontSize = 20,
-      fontColor,
-      lineHeight = 1,
-      textWrap = true,
-      name
-    } = this.state
-
-    paddingBottom ||= 0
-    paddingTop ||= 0
-    paddingLeft ||= 0
-    paddingRight ||= 0
-
-    var { width, height } = this.bounds
-    const vertical = height > width
-
-    // element의 기본 style을 설정한다.
-
-    if (vertical) {
-      Object.assign(this.textElement!.style, {
-        transform: 'none',
-        position: 'relative',
-        width: `${width - paddingLeft - paddingRight}px`,
-        boxSizing: 'content-box',
-        fontFamily: fontFamily,
-        fontSize: fontSize + 'px',
-        paddingTop: paddingTop + 'px',
-        paddingRight: paddingRight + 'px',
-        paddingBottom: paddingBottom + 'px',
-        paddingLeft: paddingLeft + 'px',
-        color: fontColor,
-        fontWeight: bold ? 'bold' : '',
-        fontStyle: italic ? 'italic' : '',
-        textAlign: textAlign == 'end' ? 'right' : textAlign == 'start' ? 'left' : textAlign,
-        verticalAlign: textBaseline,
-        lineHeight,
-        whiteSpace: textWrap === true ? 'normal' : 'nowrap'
-      })
-    } else {
-      Object.assign(this.textElement!.style, {
-        transform: `translate(-50%, -50%) translate(0, ${height / 2}px) rotate(270deg) translate(0, 50%)`,
-        position: 'relative',
-        width: `${height - paddingTop - paddingBottom}px`,
-        boxSizing: 'content-box',
-        fontFamily: fontFamily,
-        fontSize: fontSize + 'px',
-        paddingTop: paddingLeft + 'px',
-        paddingRight: paddingTop + 'px',
-        paddingBottom: paddingRight + 'px',
-        paddingLeft: paddingBottom + 'px',
-        color: fontColor,
-        fontWeight: bold ? 'bold' : '',
-        fontStyle: italic ? 'italic' : '',
-        textAlign: textAlign == 'end' ? 'right' : textAlign == 'start' ? 'left' : textAlign,
-        verticalAlign: textBaseline,
-        lineHeight,
-        whiteSpace: textWrap === true ? 'normal' : 'nowrap'
-      })
-    }
-
-    this.textElement!.textContent = name
-  }
-
-  onchange(after: Properties, before: Properties) {
-    this.setTextElementProperties()
-  }
-}
-
-Component.register('bpmn-lane', BPMNLane)

package/src/bpmn-message.ts

@@ -1,57 +0,0 @@
-import { BOUNDS, Component, ComponentNature } from '@hatiolab/things-scene'
-
-import BPMNControlBase from './base/bpmn-control-base'
-
-const NATURE: ComponentNature = {
-  mutable: false,
-  resizable: true,
-  rotatable: false,
-  properties: [],
-  help: '/bpmn/message/message'
-}
-
-export default class BPMNMessage 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) {
-    var { left, top, width, height } = this.bounds
-
-    const corner = (Math.min(width, height) * 2) / 5
-
-    ctx.translate(left, top)
-    ctx.beginPath()
-
-    ctx.moveTo(0, 0)
-    ctx.lineTo(width, 0)
-    ctx.lineTo(width, height)
-    ctx.lineTo(0, height)
-    ctx.lineTo(0, 0)
-    ctx.lineTo(width / 2, height / 2)
-    ctx.lineTo(width, 0)
-
-    ctx.translate(-left, -top)
-
-    this.drawFill(ctx)
-    this.drawStroke(ctx)
-  }
-}
-
-Component.register('bpmn-message', BPMNMessage)

package/src/bpmn-pool.ts

@@ -1,25 +0,0 @@
-import { Component, ComponentNature } from '@hatiolab/things-scene'
-
-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'
-    }
-  ],
-  help: '/bpmn/pool/pool'
-}
-
-export default class BPMNPool extends BPMNContainerBase {
-  get nature() {
-    return NATURE
-  }
-}
-
-Component.register('bpmn-pool', BPMNPool)