@operato/scene-mpi 8.0.0-beta.1 → 8.0.0-beta.2

package/src/indicator.ts

@@ -1,638 +0,0 @@
-const IMAGE = new URL('../../icons/indicator.png', import.meta.url).href
-
-import { Component, ComponentNature, RectPath, Shape } from '@hatiolab/things-scene'
-import SegmentDisplay from './segment-display'
-
-import {
-  onMouseDownMButton,
-  onMouseDownFButton,
-  onMouseDownCButton,
-  onMouseDownBigButton
-} from './indicator-user-action'
-
-import { onmessage } from './indicator-on-message'
-import Gateway from './gateway'
-
-const NATURE: ComponentNature = {
-  mutable: false,
-  resizable: true,
-  rotatable: true,
-  properties: [
-    {
-      type: 'string',
-      label: 'segment_role',
-      name: 'segments'
-    },
-    {
-      type: 'select',
-      label: 'button_color',
-      name: 'buttonColor',
-      property: {
-        options: [
-          {
-            display: 'BASIC',
-            value: '#0000'
-          },
-          {
-            display: 'YELLOW',
-            value: '#ff0'
-          },
-          {
-            display: 'GREEN',
-            value: '#0f0'
-          },
-          {
-            display: 'RED',
-            value: '#f00'
-          },
-          {
-            display: 'BLUE',
-            value: '#00f'
-          }
-        ]
-      }
-    },
-    {
-      type: 'select',
-      label: 'boot_flag',
-      name: 'boot_flag',
-      property: {
-        options: [
-          {
-            display: '',
-            value: ''
-          },
-          {
-            display: 'TRUE',
-            value: 'true'
-          },
-          {
-            display: 'FALSE',
-            value: 'false'
-          }
-        ]
-      }
-    },
-    {
-      type: 'select',
-      label: 'reply_target',
-      name: 'reply_target',
-      property: {
-        options: [
-          {
-            display: '',
-            value: ''
-          },
-          {
-            display: 'MQTT',
-            value: 'MQTT'
-          },
-          {
-            display: 'GraphQl',
-            value: 'GraphQl'
-          }
-        ]
-      }
-    }
-  ],
-  help: 'scene/component/indicator'
-}
-
-const WIDTH = 449
-const HEIGHT = 53
-
-const RECT_BUTTON_EDGE = 3
-
-export default class Indicator extends RectPath(Shape) {
-  lit = false
-  ledLit = false
-  store = {} as any
-  conf = {
-    seg_role: ['S', 'S'],
-    alignment: 'R',
-    btn_mode: 'S',
-    btn_intvl: 5,
-    bf_on_msg: '',
-    bf_on_msg_t: 1,
-    bf_on_delay: 1,
-    cncl_delay: 10,
-    blink_if_full: true,
-    off_use_res: false,
-    led_bar_mode: 'S',
-    led_bar_intvl: 5,
-    led_bar_brtns: 6
-  } as any
-  currentTask = 'ready'
-  cookedData: any = {}
-  readOnly?: boolean
-  version?: any
-
-  static _image: HTMLImageElement
-
-  static get image() {
-    if (!Indicator._image) {
-      Indicator._image = new Image()
-      Indicator._image.src = IMAGE
-    }
-
-    return Indicator._image
-  }
-
-  get colors(): { [key: string]: string } {
-    return {
-      R: '#f00',
-      G: '#0f0',
-      B: '#00f',
-      C: '#0ff',
-      M: '#f0f',
-      Y: '#ff0',
-      K: '#0000',
-      W: '#fff'
-    }
-  }
-
-  get btnModes() {
-    return {
-      BLINK: 'B', // 깜박
-      ALWAYS: 'S' // 항상
-    }
-  }
-
-  get tasks(): { [key: string]: string } {
-    return {
-      PICK: 'pick',
-      STOCK: 'stock',
-      FULL: 'full',
-      MODIFY: 'modify',
-      END: 'end',
-      DISPLAY: 'display',
-      READY: 'ready',
-      STRSHOW: 'strshow'
-    }
-  }
-
-  get alignmentOptions() {
-    return {
-      LEFT: 'L',
-      RIGHT: 'R'
-    }
-  }
-
-  get segmentRoles() {
-    return {
-      RELAY_SEQ: {
-        INITIAL: 'R',
-        KEY: 'org_relay'
-      },
-      BOXES: {
-        INITIAL: 'B',
-        KEY: 'org_box_qty'
-      },
-      PCS: {
-        INITIAL: 'P',
-        KEY: 'org_ea_qty'
-      }
-    }
-  }
-
-  get getConf() {
-    return this.conf
-  }
-
-  set setConf(conf: any) {
-    this.conf = conf
-  }
-
-  get gateway(): Gateway {
-    return this.root.findFirst('gateway') as Gateway
-    // var gateway = this.parent
-    // while (gateway.constructor.name !== ('Gateway' || 'Window')) {
-    //   gateway = gateway.parent
-    // }
-
-    // if (gateway.constructor.name === 'Window') return
-
-    // return gateway
-  }
-
-  get ledRect() {
-    return this.parent.findFirst('rect') || {}
-  }
-
-  dispose() {
-    super.dispose()
-  }
-
-  /**
-   *
-   * @param {array} args
-   */
-  setSegmentsState(args: any[]) {
-    var stateArr: any[] = []
-
-    var currentRole = this.store.seg_role ? this.store.seg_role : this.getConf.seg_role
-    currentRole.forEach((role: any) => {
-      var ele
-      args.forEach(arg => {
-        if (role == arg.role && (arg.value || arg.value >= 0)) {
-          ele = arg.value
-        }
-      })
-      stateArr.push(ele)
-    })
-    var stateStr = stateArr.join(',')
-    this.setState('segments', stateStr)
-  }
-
-  /**
-   *
-   * @param {object} data
-   */
-  jobLightOn(data: any, lit = true) {
-    var toutDisplayMessage = (indicator: Indicator) => {
-      indicator.displayMessage(indicator.getConf.bf_on_msg, indicator.cookedData.buttonColor, false)
-      setTimeout(() => {
-        toutDelayBeforeLightOn(indicator)
-      }, indicator.getConf.bf_on_msg_t * 100)
-    }
-
-    var toutDelayBeforeLightOn = (indicator: Indicator) => {
-      indicator.lightOff()
-      setTimeout(() => {
-        indicator.lightOn(data, lit)
-      }, indicator.getConf.bf_on_delay * 100)
-    }
-
-    if (typeof this.getConf.bf_on_msg === 'string' && this.getConf.bf_on_msg.length > 0) {
-      toutDisplayMessage(this)
-    } else if (this.getConf.bf_on_delay > 0) {
-      toutDelayBeforeLightOn(this)
-    } else {
-      this.lightOn(data, lit)
-    }
-  }
-
-  /**
-   *
-   * @param {object} data
-   */
-  lightOn(data: any, lit = true) {
-    var sublen = 6 / this.getConf.seg_role.length
-    switch (this.getConf.alignment) {
-      case this.alignmentOptions.LEFT:
-        {
-          let arr: any[] = []
-          Object.values(this.segmentRoles).forEach(role => {
-            if (data[role.KEY] || data[role.KEY] >= 0) {
-              var obj = {
-                role: role.INITIAL,
-                value: data[role.KEY]
-              }
-              arr.push(obj)
-            }
-          })
-          this.setSegmentsState(arr)
-        }
-        break
-      case this.alignmentOptions.RIGHT:
-      default:
-        {
-          let arr: any[] = []
-          Object.values(this.segmentRoles).forEach(role => {
-            if (data[role.KEY] || data[role.KEY] >= 0) {
-              var obj = {
-                role: role.INITIAL,
-                value: ('  ' + data[role.KEY]).substr(-sublen)
-              }
-              arr.push(obj)
-            }
-          })
-          this.setSegmentsState(arr)
-        }
-        break
-    }
-    if (data.buttonColor) this.setState('buttonColor', String(data.buttonColor))
-    this.lit = lit
-  }
-
-  lightOff() {
-    this.setState('segments', this.displays.length == 3 ? ',,' : ',')
-    this.setState('buttonColor', '#0000')
-
-    this.lit = false
-  }
-
-  /**
-   *
-   * @param {string} msg
-   * @param {string} color
-   */
-  displayMessage(msg: string, color = 'K', lit = true) {
-    var eachSegLen = this.displays[0].pattern.length
-    var allSegLen = eachSegLen * this.displays.length
-
-    var d = msg || this.getConf.bf_on_msg
-
-    switch (this.conf.alignment) {
-      case this.alignmentOptions.LEFT:
-        {
-          d = (d + '      ').substr(0, allSegLen)
-        }
-        break
-      case this.alignmentOptions.RIGHT:
-      default:
-        {
-          d = ('      ' + d).substr(-allSegLen)
-        }
-        break
-    }
-
-    var da = []
-
-    var i = 1
-    var startIdx = 0
-    while (i <= allSegLen) {
-      if (i % eachSegLen == 0) {
-        da.push(d.substr(startIdx, eachSegLen))
-        startIdx = i
-      }
-      i++
-    }
-    this.setState('segments', da.join(','))
-    this.setState('buttonColor', this.colors[color])
-    this.lit = lit
-  }
-
-  rectButtonContains(x: number, y: number, WRATE: number, HRATE: number) {
-    var left = 310 * WRATE
-    var top = 8 * HRATE
-    var width = 62 * WRATE
-    var height = 36 * HRATE
-
-    var extend = RECT_BUTTON_EDGE
-
-    return (
-      x < Math.max(left + width, left) + extend &&
-      x > Math.min(left + width, left) - extend &&
-      y < Math.max(top + height, top) + extend &&
-      y > Math.min(top + height, top) - extend
-    )
-  }
-
-  mfcButtonContains(x: number, y: number, WRATE: number, HRATE: number) {
-    var left = 38 * WRATE
-    var top = 14 * HRATE
-    var width = 17 * WRATE
-    var height = 25 * HRATE
-
-    var extend = RECT_BUTTON_EDGE
-    if (
-      x < Math.max(left + width, left) + extend &&
-      x > Math.min(left + width, left) - extend &&
-      y < Math.max(top + height, top) + extend &&
-      y > Math.min(top + height, top) - extend
-    ) {
-      return 'M'
-    }
-
-    var rx = 9 * WRATE
-    var ry = 9 * HRATE
-    var cx = 70 * WRATE
-    var cy = 17 * HRATE
-    var normx = (x - cx) / (rx * 2 - 0.5)
-    var normy = (y - cy) / (ry * 2 - 0.5)
-
-    if (normx * normx + normy * normy < 0.25) {
-      return 'F'
-    }
-
-    cx = 70 * WRATE
-    cy = 39 * HRATE
-    normx = (x - cx) / (rx * 2 - 0.5)
-    normy = (y - cy) / (ry * 2 - 0.5)
-
-    if (normx * normx + normy * normy < 0.25) {
-      return 'C'
-    }
-  }
-
-  onmousedown(e: MouseEvent, hint: any) {
-    var { left, top, width, height } = this.bounds
-
-    var WRATE = width / WIDTH
-    var HRATE = height / HEIGHT
-
-    var { x, y } = this.transcoordC2S(e.offsetX, e.offsetY)
-
-    if (this.rectButtonContains(x - left, y - top, WRATE, HRATE)) {
-      onMouseDownBigButton(this)
-    } else {
-      switch (this.mfcButtonContains(x - left, y - top, WRATE, HRATE)) {
-        case 'M':
-          onMouseDownMButton(this)
-          break
-        case 'F':
-          onMouseDownFButton(this)
-          break
-        case 'C':
-          onMouseDownCButton(this)
-          break
-        default:
-      }
-    }
-  }
-
-  get displays() {
-    var { width, height } = this.bounds
-
-    var WRATE = width / WIDTH
-    var HRATE = height / HEIGHT
-
-    var { segments = new Array(this.getConf.seg_role.length).join(',') } = this.state
-
-    return (segments as string).split(',', 3).map((value, idx, array) => {
-      var display = new SegmentDisplay(63 * WRATE, 28 * HRATE)
-
-      display.pattern = array.length == 2 ? '###' : array.length == 3 ? '##' : '###' // 3 넘는 건 안 함
-      display.displayAngle = 8
-      display.digitHeight = 20
-      display.digitWidth = 11
-      display.digitDistance = 6
-      display.segmentWidth = 2.5
-      display.segmentDistance = 0.2
-      display.segmentCount = SegmentDisplay.SevenSegment
-      display.cornerType = SegmentDisplay.SymmetricCorner
-      display.colorOn = idx == 0 ? '#007dfe' : idx == 1 ? '#fd0000' : '#fee400'
-      display.colorOff = '#2c2c2c'
-
-      display.setValue(value)
-
-      return display
-    })
-  }
-
-  _drawRectButton(context: CanvasRenderingContext2D, WRATE: number, HRATE: number, color: string) {
-    var w = 62 * WRATE
-    var h = 36 * HRATE
-    var r = Math.min(7 * WRATE, 7 * HRATE)
-    var edge = Math.floor(r / 2)
-    var highlight = Math.floor(r / 5)
-
-    if (w < 2 * r) r = w / 2
-    if (h < 2 * r) r = h / 2
-
-    context.beginPath()
-    context.moveTo(r, 0)
-    context.arcTo(w, 0, w, h, r)
-    context.arcTo(w, h, 0, h, r)
-    context.arcTo(0, h, 0, 0, r)
-    context.arcTo(0, 0, w, 0, r)
-
-    context.globalAlpha = 1
-    context.fillStyle = color
-    context.strokeStyle = color
-    context.lineWidth = edge - 2
-    context.fill()
-    context.stroke()
-    context.strokeStyle = 'black'
-    context.globalAlpha = 0.3
-    context.stroke()
-
-    context.beginPath()
-    context.moveTo(highlight, h - r)
-    context.arcTo(highlight, highlight, r, highlight, r - highlight)
-    context.lineTo(w - r, highlight)
-    context.strokeStyle = 'white'
-    context.globalAlpha = 0.6
-    context.lineWidth = highlight
-    context.stroke()
-
-    context.beginPath()
-    context.moveTo(w - r, highlight)
-    context.arcTo(w - highlight, highlight, w - highlight, r, r - highlight)
-    context.arcTo(w - highlight, h - highlight, w - r, h - highlight, r - highlight)
-    context.arcTo(highlight, h - highlight, highlight, h - r, r - highlight)
-
-    context.strokeStyle = 'white'
-    context.globalAlpha = 0.4
-    context.lineWidth = highlight
-    context.stroke()
-
-    context.globalAlpha = 1
-  }
-
-  _drawMFCButton(context: CanvasRenderingContext2D, WRATE: number, HRATE: number) {
-    context.textAlign = 'center'
-    context.textBaseline = 'middle'
-    context.font = `${Math.min(13 * WRATE, 13 * HRATE)}px Arial`
-
-    context.lineJoin = 'round'
-    var r = Math.min(7 * WRATE, 7 * HRATE)
-    var edge = Math.floor(r / 3)
-    // console.log('r', r, 'wrate', WRATE, 'hrate', HRATE, 'edge', edge)
-    context.lineWidth = edge
-
-    context.beginPath()
-    // context.ellipse(96 * WRATE, 27 * HRATE, 7 * WRATE, 7 * HRATE, 0, 0, 2 * Math.PI)
-    context.fillStyle = 'rgba(255, 0, 0, 0.0)'
-    context.strokeStyle = 'rgba(255, 0, 0, 0.0)'
-    context.strokeRect(38 * WRATE, 14 * HRATE, 17 * WRATE, 25 * HRATE)
-    context.fillRect(38 * WRATE, 14 * HRATE, 17 * WRATE, 25 * HRATE)
-    context.fill()
-
-    // context.fillStyle = 'black'
-    // context.fillText('M', 40 * WRATE, 27 * HRATE)
-
-    context.beginPath()
-    context.ellipse(70 * WRATE, 15 * HRATE, 9 * WRATE, 9 * HRATE, 0, 0, 2 * Math.PI)
-    context.fillStyle = 'rgba(255, 0, 0, 0.0)'
-    context.fill()
-
-    // context.fillStyle = 'white'
-    // context.fillText('F', 70 * WRATE, 17 * HRATE)
-
-    context.beginPath()
-    context.ellipse(70 * WRATE, 39 * HRATE, 9 * WRATE, 9 * HRATE, 0, 0, 2 * Math.PI)
-    context.fillStyle = 'rgba(255, 0, 0, 0.0)'
-    context.fill()
-
-    // context.fillStyle = 'white'
-    // context.fillText('C', 70 * WRATE, 39 * HRATE)
-  }
-
-  render(context: CanvasRenderingContext2D) {
-    var { left, top, width, height } = this.bounds
-
-    var color = this.state.buttonColor || '#0000'
-
-    var WRATE = width / WIDTH
-    var HRATE = height / HEIGHT
-
-    context.translate(left, top)
-    context.save()
-
-    context.beginPath()
-    this.drawImage(context, Indicator.image, 0, 0, width, height)
-
-    this._drawMFCButton(context, WRATE, HRATE)
-
-    var displays = this.displays
-
-    var myCursor = displays.length == 3 ? 1 : 0
-
-    context.translate((135 - myCursor * 12) * WRATE, 12 * HRATE)
-    displays[0].draw(context)
-
-    if (displays.length >= 2) {
-      context.translate((75 - myCursor * 25) * WRATE, 0)
-      displays[1].draw(context)
-    }
-
-    if (displays.length >= 3) {
-      context.translate((75 - myCursor * 25) * WRATE, 0)
-      displays[2].draw(context)
-    }
-
-    context.beginPath()
-
-    context.restore()
-    context.translate(310 * WRATE, 8 * HRATE)
-    this._drawRectButton(context, WRATE, HRATE, color)
-
-    context.beginPath()
-  }
-
-  onchangeData(after: any, before: any) {
-    super.onchangeData(after, before)
-
-    onmessage(this, after.data)
-  }
-
-  get hasTextProperty() {
-    return false
-  }
-
-  get nature() {
-    return NATURE
-  }
-
-  onButton() {
-    switch (this.currentTask) {
-      case this.tasks.END:
-        {
-          //  onMouseDownFButton(this);
-        }
-        break
-      case this.tasks.DISPLAY: {
-        return
-      }
-      default:
-        {
-          onMouseDownBigButton(this)
-        }
-        break
-    }
-  }
-}
-
-Component.register('indicator', Indicator)

package/src/reply-button.ts

@@ -1,88 +0,0 @@
-const reply = new URL('../../icons/reply-button.png', import.meta.url).href
-
-import { Component, ComponentNature, RectPath, Shape } from '@hatiolab/things-scene'
-
-import { consoleLogger } from './gateway-on-message'
-import Gateway from './gateway'
-
-export const buttons = [
-  {
-    icon: reply,
-    handler: onClickReply
-  }
-]
-
-const NATURE: ComponentNature = {
-  mutable: false,
-  resizable: true,
-  rotatable: true,
-  properties: [
-    {
-      type: 'string',
-      name: 'publisher',
-      label: 'publisher'
-    }
-  ],
-  help: 'scene/component/reply-button'
-}
-
-export default class ReplyButton extends RectPath(Shape) {
-  static _image?: HTMLImageElement
-
-  static get image() {
-    if (!ReplyButton._image) {
-      ReplyButton._image = new Image()
-      ReplyButton._image.src = reply
-    }
-
-    return ReplyButton._image
-  }
-
-  get publisher() {
-    if (this.state.publisher) {
-      return this.root.findById(this.state.publisher)
-    }
-  }
-
-  render(context: CanvasRenderingContext2D) {
-    var { left, top, width, height } = this.bounds
-
-    context.beginPath()
-
-    context.rect(left, top, width, height)
-
-    this.drawFill(context)
-    this.drawStroke(context)
-
-    this.drawImage(context, ReplyButton.image, left, top, width, height)
-  }
-
-  onmousedown(e: MouseEvent, hint: any) {
-    var button = this.buttonContains()
-    if (button) {
-      button.handler(this)
-    }
-  }
-
-  buttonContains() {
-    return buttons[0]
-  }
-
-  get nature() {
-    return NATURE
-  }
-}
-
-function onClickReply(button: Component) {
-  consoleLogger('onClickReply')
-
-  var gateways = button.root.findAll('gateway') as Gateway[]
-
-  gateways.forEach((gw, index) => {
-    gw.indicators.forEach(ind => {
-      ind.onButton()
-    })
-  })
-}
-
-Component.register('reply-button', ReplyButton)