@operato/scene-wheel-sorter 8.0.0-beta.1 → 8.0.0

package/src/conveyor-join-trapezoid.ts

@@ -1,69 +0,0 @@
-import { Component, ComponentNature, Polygon } from '@hatiolab/things-scene'
-
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-import MixinRoller from './mixin-conveyor'
-
-const NATURE: ComponentNature = {
-  mutable: false,
-  resizable: true,
-  rotatable: true,
-  properties: [
-    {
-      type: 'select',
-      label: 'conveyor-type',
-      name: 'conveyorType',
-      property: {
-        options: [
-          {
-            display: 'Roller',
-            value: 0
-          },
-          {
-            display: 'Belt',
-            value: 1
-          }
-        ]
-      }
-    },
-    {
-      type: 'number',
-      label: 'roll-width',
-      name: 'rollWidth'
-    },
-    {
-      type: 'number',
-      label: 'value',
-      name: 'value'
-    },
-    {
-      type: 'checkbox',
-      label: 'animation',
-      name: 'animated'
-    }
-  ],
-  help: 'scene/component/conveyor-join-trapezoid'
-}
-
-const STAT_IDLE = 0
-const STAT_RUN = 1
-const STAT_CHUTE_FULL = 3
-const STAT_ERROR = 4
-
-export default class ConveyorJoinTrapezoid extends MixinRoller(Polygon) {
-  get nature() {
-    return NATURE
-  }
-
-  is3dish() {
-    return false
-  }
-
-  render(context: CanvasRenderingContext2D) {
-    this.getState('animated') && this.animOnState()
-    super.render(context)
-  }
-}
-
-Component.register('conveyor-join-trapezoid', ConveyorJoinTrapezoid as any)

package/src/conveyor-join.ts

@@ -1,205 +0,0 @@
-import { Component, ComponentNature, Donut, POSITION } from '@hatiolab/things-scene'
-
-import MixinRoller from './mixin-conveyor'
-
-const NATURE: ComponentNature = {
-  mutable: false,
-  resizable: true,
-  rotatable: true,
-  properties: [
-    {
-      type: 'select',
-      label: 'conveyor-type',
-      name: 'conveyorType',
-      property: {
-        options: [
-          {
-            display: 'Roller',
-            value: 0
-          },
-          {
-            display: 'Belt',
-            value: 1
-          }
-        ]
-      }
-    },
-    {
-      type: 'angle',
-      label: 'start-angle',
-      name: 'startAngle'
-    },
-    {
-      type: 'angle',
-      label: 'end-angle',
-      name: 'endAngle'
-    },
-    {
-      type: 'number',
-      label: 'ratio',
-      name: 'ratio'
-    },
-    {
-      type: 'number',
-      label: 'roll-width',
-      name: 'rollWidth'
-    },
-    {
-      type: 'number',
-      label: 'value',
-      name: 'value'
-    },
-    {
-      type: 'checkbox',
-      label: 'animation',
-      name: 'animated'
-    }
-  ],
-  help: 'scene/component/conveyor-join'
-}
-
-var controlHandler = {
-  ondragmove: function (point: POSITION, index: number, component: Component) {
-    var { cx, cy, rx, ry, startAngle, endAngle } = component.model
-
-    var { x, y } = component.transcoordP2S(point.x, point.y)
-
-    const angle = (startAngle + endAngle) / 2
-
-    /* 원점으로부터 최대 거리 */
-    const dx = Math.abs(rx * Math.sin(angle))
-    const dy = Math.abs(ry * Math.cos(angle))
-    const distance = Math.sqrt(dx * dx + dy * dy)
-
-    /* 원점으로부터 현재 컨트롤 위치까지의 거리 */
-    const px = Math.abs(cx - x)
-    const py = Math.abs(cy - y)
-    const pdistance = Math.sqrt(px * px + py * py)
-
-    var ratio = (pdistance / distance) * 100
-
-    ratio = ratio >= 100 || ratio <= -100 ? 100 : Math.abs(ratio)
-
-    component.set({ ratio })
-  }
-}
-
-var antiClockWiseControlHandler = {
-  ondragmove: function (point: POSITION, index: number, component: Component) {
-    var { cx, cy } = component.model
-
-    var transcoorded = component.transcoordP2S(point.x, point.y)
-
-    var theta = Math.atan2(-(transcoorded.y - cy), transcoorded.x - cx)
-
-    if (theta > 0 && theta <= Math.PI / 2) theta = Math.PI / 2
-    if (theta < 0 && theta >= -Math.PI / 2) theta = -Math.PI / 2
-
-    const startAngle = (-theta + Math.PI / 2 - Math.PI * 2) % (Math.PI * 2)
-
-    component.set({ startAngle })
-  }
-}
-
-var clockwiseControlHandler = {
-  ondragmove: function (point: POSITION, index: number, component: Component) {
-    var { cx, cy } = component.model
-
-    var transcoorded = component.transcoordP2S(point.x, point.y)
-
-    var theta = Math.atan2(-(transcoorded.y - cy), transcoorded.x - cx)
-
-    if (theta > 0) if (theta >= Math.PI / 2) theta = Math.PI / 2
-    if (theta < 0) if (theta <= -Math.PI / 2) theta = -Math.PI / 2
-
-    var endAngle = -theta + Math.PI / 2
-
-    component.set({ endAngle })
-  }
-}
-
-function normalizeAngle(angle: number): number {
-  angle = angle % (2 * Math.PI)
-  if (angle <= -Math.PI) {
-    angle += 2 * Math.PI
-  } else if (angle > Math.PI) {
-    angle -= 2 * Math.PI
-  }
-  return angle
-}
-
-export default class ConveyorJoin extends MixinRoller(Donut) {
-  get nature() {
-    return NATURE
-  }
-
-  is3dish() {
-    return false
-  }
-
-  contains(x: number, y: number) {
-    var { cx, cy, rx, ry, ratio, startAngle, endAngle } = this.state
-    rx = Math.abs(rx)
-    ry = Math.abs(ry)
-
-    const normx = (x - cx) / (rx * 2 - 0.5)
-    const normy = (y - cy) / (ry * 2 - 0.5)
-    const ratiox = (x - cx) / ((rx / 100) * ratio * 2 - 0.5)
-    const ratioy = (y - cy) / ((ry / 100) * ratio * 2 - 0.5)
-
-    if (normx * normx + normy * normy < 0.25 && ratiox * ratiox + ratioy * ratioy > 0.25) {
-      const angle = normalizeAngle(Math.atan2(-normy, normx) - Math.PI / 2)
-
-      if (angle >= startAngle && angle <= endAngle) {
-        return true
-      }
-    }
-
-    return false
-  }
-
-  render(ctx: CanvasRenderingContext2D) {
-    var { ratio = 50, cx, cy, rx, ry, startAngle = 0, endAngle = Math.PI / 2, animated = false } = this.state
-
-    animated && this.animOnState()
-
-    ctx.beginPath()
-
-    startAngle = (startAngle - Math.PI / 2 - Math.PI * 2) % (Math.PI * 2)
-    endAngle -= Math.PI / 2
-
-    ctx.ellipse(cx, cy, Math.abs(rx), Math.abs(ry), 0, startAngle, endAngle)
-    ctx.ellipse(cx, cy, Math.abs((rx / 100) * ratio), Math.abs((ry / 100) * ratio), 0, endAngle, startAngle, true)
-
-    ctx.lineTo(rx * Math.cos(startAngle) + cx, ry * Math.sin(startAngle) + cy)
-  }
-
-  get controls() {
-    var { cx, cy, rx, ry, ratio, startAngle, endAngle } = this.state
-
-    var controls = []
-
-    controls.push({
-      x: cx + ((rx + (rx * ratio) / 100) / 2) * Math.sin(startAngle),
-      y: cy - ((ry + (ry * ratio) / 100) / 2) * Math.cos(startAngle),
-      handler: antiClockWiseControlHandler
-    })
-
-    controls.push({
-      x: cx + ((rx + (rx * ratio) / 100) / 2) * Math.sin(endAngle),
-      y: cy - ((ry + (ry * ratio) / 100) / 2) * Math.cos(endAngle),
-      handler: clockwiseControlHandler
-    })
-
-    const angle = (startAngle + endAngle) / 2
-    controls.push({
-      x: cx + ((rx * ratio) / 100) * Math.sin(angle),
-      y: cy - ((ry * ratio) / 100) * Math.cos(angle),
-      handler: controlHandler
-    })
-
-    return controls
-  }
-}
-
-Component.register('conveyor-join', ConveyorJoin as any)

package/src/conveyor.ts

@@ -1,69 +0,0 @@
-import { Component, ComponentNature, RectPath, Shape } from '@hatiolab/things-scene'
-
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-import MixinRoller from './mixin-conveyor'
-
-const NATURE: ComponentNature = {
-  mutable: false,
-  resizable: true,
-  rotatable: true,
-  properties: [
-    {
-      type: 'select',
-      label: 'conveyor-type',
-      name: 'conveyorType',
-      property: {
-        options: [
-          {
-            display: 'Roller',
-            value: 0
-          },
-          {
-            display: 'Belt',
-            value: 1
-          }
-        ]
-      }
-    },
-    {
-      type: 'number',
-      label: 'roll-width',
-      name: 'rollWidth'
-    },
-    {
-      type: 'number',
-      label: 'value',
-      name: 'value'
-    },
-    {
-      type: 'checkbox',
-      label: 'animation',
-      name: 'animated'
-    }
-  ],
-  help: 'scene/component/conveyor'
-}
-
-export default class Conveyor extends MixinRoller(RectPath(Shape)) {
-  get nature() {
-    return NATURE
-  }
-
-  render(ctx: CanvasRenderingContext2D) {
-    var { width, height, left, top, animated = false } = this.state
-
-    animated && this.animOnState()
-
-    ctx.beginPath()
-    ctx.rect(left, top, width, height)
-  }
-
-  is3dish() {
-    return false
-  }
-}
-
-Component.register('conveyor', Conveyor as any)
-Component.register('conveyor-belt', Conveyor as any)

package/src/index.ts

@@ -1,8 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-export { default as Conveyor } from './conveyor'
-export { default as ConveyorJoin } from './conveyor-join'
-export { default as ConveyorJoinTrapezoid } from './conveyor-join-trapezoid'
-export { default as WheelSorter } from './wheel-sorter'
-export { default as Scanner } from './scanner'

package/src/mixin-conveyor.ts

@@ -1,169 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-import { Class, Component, ValueHolder } from '@hatiolab/things-scene'
-
-const TYPE_ROLLER = 0
-const TYPE_BELT = 1
-
-const FILL_STYLES = ['#ccc', '#afd0f1', '#afd0f1', '#ffba00', '#e9746b'] // IDLE, RUN, RUN(REVERSE), WARN, ERROR
-const STROKE_STYLES = ['#999', '#87b1db', '#87b1db', '#d96f21', '#a73928'] // IDLE, RUN, RUN(REVERSE), WARN, ERROR
-
-type RollerPattern = {
-  width: number
-  height: number
-}
-
-function pattern_for_belt_type(component: any) {
-  var { height } = component.bounds
-
-  var { rollWidth = 10 } = component.model
-
-  var width = Math.max(rollWidth, 1)
-
-  var color = FILL_STYLES[component.value] || FILL_STYLES[0]
-  var stroke = STROKE_STYLES[component.value] || STROKE_STYLES[0]
-  var lineWidth = 1
-
-  if (!component._roller_pattern) component._roller_pattern = document.createElement('canvas')
-
-  component._roller_pattern.width = width
-  component._roller_pattern.height = height
-
-  var context = component._roller_pattern.getContext('2d')
-
-  context.beginPath()
-  context.fillStyle = color
-  context.strokeStyle = stroke
-  context.lineWidth = lineWidth
-
-  context.moveTo(0, 0)
-  context.lineTo(width, 0)
-  context.lineTo(width, height)
-  context.lineTo(0, height)
-  context.lineTo(0, 0)
-  context.fill()
-
-  context.beginPath()
-
-  context.globalAlpha = 0.2
-
-  var x_for_belt = (component._step || 0) % width
-  if (component.value == 2) x_for_belt = width - x_for_belt
-
-  context.moveTo(x_for_belt, height)
-  context.lineTo(x_for_belt, 0)
-
-  context.stroke()
-
-  return component._roller_pattern
-}
-
-function pattern_for_roller_type(component: any) {
-  var { height } = component.bounds
-
-  var { rollWidth = 10, animated } = component.model
-
-  // var modelWidth = component.model.width;
-
-  var width = Math.max(rollWidth, 1)
-
-  var color = FILL_STYLES[component.value] || FILL_STYLES[0]
-  var stroke = STROKE_STYLES[component.value] || STROKE_STYLES[0]
-  var lineWidth = Math.min(1, width / 10)
-
-  width += lineWidth * 2
-
-  if (!component._roller_pattern) component._roller_pattern = document.createElement('canvas')
-
-  var gap = Math.floor((width * 2) / 3)
-
-  // while (Math.round(modelWidth - width) % (width + gap) > gap) {
-  //   gap++
-  //   console.log(gap, Math.round(modelWidth - width) % (width + gap))
-  // }
-
-  component._roller_pattern.width = width + gap
-  component._roller_pattern.height = height
-
-  var context = component._roller_pattern.getContext('2d')
-
-  context.beginPath()
-  context.fillStyle = color
-  context.strokeStyle = stroke
-  context.lineWidth = lineWidth
-
-  context.ellipse(lineWidth + width / 2, height - width / 4 - lineWidth, width / 2, width / 4, 0, 0, Math.PI)
-
-  context.moveTo(lineWidth, height - width / 4)
-  context.lineTo(lineWidth, width / 4)
-
-  context.ellipse(lineWidth + width / 2, width / 4 + lineWidth, width / 2, width / 4, 0, Math.PI, 0)
-
-  context.lineTo(lineWidth + width, height - width / 4)
-
-  context.fill()
-  context.stroke()
-
-  context.globalAlpha = 0.2
-
-  context.lineWidth = width / 3
-
-  if (animated) {
-    var x_for_roll = component._step % width
-    if (component.value == 2) x_for_roll = width - x_for_roll
-
-    context.moveTo(x_for_roll, height - width / 4)
-    context.lineTo(x_for_roll, width / 4)
-
-    context.stroke()
-  }
-
-  return component._roller_pattern
-}
-
-const patterns = [pattern_for_roller_type, pattern_for_belt_type]
-
-export default (superclass: Class) => {
-  var A = class extends ValueHolder(superclass) {
-    dispose() {
-      super.dispose()
-      delete this._roller_pattern
-    }
-
-    animOnState() {
-      if ((this.value !== 1 && this.value !== 2) || this.disposed) return
-
-      if (!this._step || this._step > 40000) this._step = this.value == 0
-
-      this._step++
-
-      var self = this
-
-      requestAnimationFrame(function () {
-        self.clearCache('fillStyle')
-        self.invalidate()
-      })
-    }
-
-    get conveyorType() {
-      var conveyorType = this.getState('conveyorType')
-      if (conveyorType != TYPE_BELT && conveyorType != TYPE_ROLLER) conveyorType = TYPE_ROLLER
-      return conveyorType
-    }
-
-    get fillStyle() {
-      return {
-        image: patterns[this.conveyorType](this),
-        offsetX: 0,
-        offsetY: 0,
-        type: 'pattern'
-      }
-    }
-  }
-
-  Component.memoize(A.prototype, 'fillStyle', false)
-  Component.memoize(A.prototype, 'conveyorType', false)
-
-  return A
-}

package/src/mixin-scanner.ts

@@ -1,122 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-import { Class, Component, ValueHolder } from '@hatiolab/things-scene'
-
-const FILL_STYLES = ['rgba(0,0,0,.4)', 'rgba(175,208,241,.7)', 'rgba(255,186,0,.7)', 'rgba(198,50,40,.7)'] // IDLE, RUN, WARN, ERROR
-const STROKE_STYLES = ['rgba(0,0,0,.7)', 'rgba(175,208,241,1)', 'rgba(255,186,0,1)', 'rgba(198,50,40,1)'] // IDLE, RUN, WARN, ERROR
-
-function pattern(component: any) {
-  var { width, height } = component.bounds
-
-  var color = FILL_STYLES[component.value] || FILL_STYLES[0]
-  var stroke = STROKE_STYLES[component.value] || STROKE_STYLES[0]
-  var lineWidth = 1
-
-  if (!component._scanner_pattern) component._scanner_pattern = document.createElement('canvas')
-
-  component._scanner_pattern.width = width
-  component._scanner_pattern.height = height
-
-  var ctx = component._scanner_pattern.getContext('2d')
-
-  var radius = width / 10
-  var left = 0
-  var top = 0
-
-  // outer box
-  ctx.beginPath()
-  ctx.fillStyle = color
-  ctx.strokeStyle = stroke
-
-  ctx.rect(0, 0, width, height)
-  ctx.fill()
-  // ctx.stroke();
-
-  // inner box
-  radius = width / 40
-  left = width / 4
-  top = height / 4
-
-  ctx.beginPath()
-  ctx.fillStyle = 'rgba(0,0,0,.7)'
-  ctx.strokeStyle = null
-
-  ctx.moveTo(left + radius, top)
-  ctx.lineTo(left + width / 2 - radius, top)
-  ctx.quadraticCurveTo(left + width / 2, top, left + width / 2, top + radius)
-  ctx.lineTo(left + width / 2, top + height / 2 - radius)
-  ctx.quadraticCurveTo(left + width / 2, top + height / 2, left + width / 2 - radius, top + height / 2)
-  ctx.lineTo(left + radius, top + height / 2)
-  ctx.quadraticCurveTo(left, top + height / 2, left, top + height / 2 - radius)
-  ctx.lineTo(left, top + radius)
-  ctx.quadraticCurveTo(left, top, left + radius, top)
-  ctx.fill()
-
-  // barcode
-  left = left + width * 0.1
-  top = top + height * 0.05
-
-  var offsetTop = 0
-  var barcodeAreaWidth = width * 0.3
-  var barcodeAreaHeight = height * 0.4
-
-  ctx.beginPath()
-  ctx.fillStyle = '#fff'
-
-  ctx.moveTo(left, top)
-  ctx.rect(left, top + offsetTop, barcodeAreaWidth, (barcodeAreaHeight / 14) * 0.9)
-  offsetTop = (barcodeAreaHeight / 14) * 2
-  ctx.rect(left, top + offsetTop, barcodeAreaWidth, (barcodeAreaHeight / 14) * 0.3)
-  offsetTop = (barcodeAreaHeight / 14) * 4
-  ctx.rect(left, top + offsetTop, barcodeAreaWidth, (barcodeAreaHeight / 14) * 0.4)
-  offsetTop = (barcodeAreaHeight / 14) * 6
-  ctx.rect(left, top + offsetTop, barcodeAreaWidth, (barcodeAreaHeight / 14) * 0.8)
-  offsetTop = (barcodeAreaHeight / 14) * 8
-  ctx.rect(left, top + offsetTop, barcodeAreaWidth, (barcodeAreaHeight / 14) * 0.6)
-  offsetTop = (barcodeAreaHeight / 14) * 10
-  ctx.rect(left, top + offsetTop, barcodeAreaWidth, barcodeAreaHeight / 14)
-  offsetTop = (barcodeAreaHeight / 14) * 11
-  ctx.rect(left, top + offsetTop, barcodeAreaWidth, barcodeAreaHeight / 14)
-  offsetTop = (barcodeAreaHeight / 14) * 14
-  ctx.rect(left, top + offsetTop, barcodeAreaWidth, (barcodeAreaHeight / 14) * 0.3)
-
-  ctx.fill()
-
-  // lazer
-  ctx.beginPath()
-  left = width / 2
-  top = height * 0.1
-
-  ctx.strokeStyle = '#cc3300'
-  ctx.lineWidth = 1
-  ctx.moveTo(left, top)
-  ctx.lineTo(left, height * 0.9)
-
-  ctx.stroke()
-
-  return component._scanner_pattern
-}
-
-export default (superclass: Class) => {
-  var A = class extends ValueHolder(superclass) {
-    dispose() {
-      super.dispose()
-      delete this._scanner_pattern
-    }
-
-    get fillStyle() {
-      return {
-        image: pattern(this),
-        offsetX: 0,
-        offsetY: 0,
-        type: 'pattern',
-        fitPattern: true
-      }
-    }
-  }
-
-  Component.memoize(A.prototype, 'fillStyle', false)
-
-  return A
-}