@operato/scene-wheel-sorter 0.0.11

package/src/index.ts

@@ -0,0 +1,8 @@
+/*
+ * 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

@@ -0,0 +1,169 @@
+/*
+ * 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.get('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

@@ -0,0 +1,122 @@
+/*
+ * 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
+}

package/src/mixin-wheel-sorter.ts

@@ -0,0 +1,117 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import { Class, Component, ValueHolder } from '@hatiolab/things-scene'
+
+const FILL_STYLES = ['#ccc', '#afd0f1', '#ffba00', '#e9746b'] // IDLE, RUN, WARN, ERROR
+const STROKE_STYLES = ['#999', '#87b1db', '#d96f21', '#a73928'] // IDLE, RUN, WARN, ERROR
+
+export default (superclass: Class) => {
+  var A = class extends ValueHolder(superclass) {
+    animOnState() {
+      if (this.value !== 1 || this.disposed) return
+
+      var self = this
+
+      var alpha = Math.floor(Math.random() * 100)
+      if (alpha < 10) alpha = 2
+      else if (alpha > 90) alpha = 1
+      else alpha = 0
+
+      requestAnimationFrame(function () {
+        self.delta('tilt', alpha)
+        self.clearCache('fillStyle')
+        self.invalidate()
+      })
+    }
+
+    _draw_pattern(ctx: CanvasRenderingContext2D) {
+      var { width, height, left, top } = this.bounds
+
+      var { tilt = 0, wheelSize = 3 } = this.model
+
+      tilt += this.delta('tilt') || 0
+      tilt %= 3
+      tilt -= 1
+
+      var color = FILL_STYLES[this.value] || FILL_STYLES[0]
+      var stroke = STROKE_STYLES[this.value] || STROKE_STYLES[0]
+      var lineWidth = 1
+
+      var pattern_size = wheelSize * 10 || Math.min(width / 5, height / 5)
+
+      ctx.beginPath()
+      ctx.fillStyle = color
+      ctx.rect(left, top, width, height)
+      ctx.fill()
+
+      ctx.strokeStyle = stroke
+      ctx.lineWidth = lineWidth
+
+      this._draw_wheel(ctx, pattern_size, tilt)
+    }
+
+    _draw_circle(ctx: CanvasRenderingContext2D, size: number) {
+      var { width, height } = this.bounds
+
+      var offsetX = 0,
+        offsetY = 0
+
+      while (offsetY < height) {
+        offsetX = 0
+        while (offsetX < width) {
+          ctx.moveTo(offsetX + size / 2 + size / 3, offsetY + size / 2)
+          ctx.ellipse(offsetX + size / 2, offsetY + size / 2, size / 3, size / 3, 0, 0, 2 * Math.PI, false)
+
+          offsetX += size
+        }
+        offsetY += size
+      }
+
+      ctx.stroke()
+    }
+
+    _draw_inner(ctx: CanvasRenderingContext2D, size: number, tilt: number) {
+      var { width, height } = this.bounds
+
+      var offsetX = 0,
+        offsetY = 0
+
+      while (offsetY < height) {
+        offsetX = 0
+        while (offsetX < width) {
+          ctx.translate(offsetX, offsetY)
+          ctx.beginPath()
+          ctx.translate(size / 2, size / 2)
+          ctx.rotate(tilt)
+
+          ctx.moveTo(-size / 6, -size / 6)
+          ctx.lineTo(-size / 6, size / 6)
+          ctx.moveTo(size / 6, -size / 6)
+          ctx.lineTo(size / 6, size / 6)
+
+          ctx.stroke()
+          ctx.rotate(-tilt)
+          ctx.translate(-size / 2, -size / 2)
+          ctx.translate(-offsetX, -offsetY)
+
+          offsetX += size
+        }
+        offsetY += size
+      }
+    }
+
+    _draw_wheel(ctx: CanvasRenderingContext2D, size: number, tilt: number) {
+      var { left, top } = this.bounds
+
+      ctx.beginPath()
+      ctx.translate(left, top)
+      this._draw_circle(ctx, size)
+      this._draw_inner(ctx, size, tilt)
+    }
+  }
+
+  Component.memoize(A.prototype, 'fillStyle', false)
+
+  return A
+}

package/src/scanner.ts

@@ -0,0 +1,54 @@
+import { Component, RectPath, Shape } from '@hatiolab/things-scene'
+
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import MixinScanner from './mixin-scanner'
+
+const NATURE = {
+  mutable: false,
+  resizable: true,
+  rotatable: true,
+  properties: [
+    {
+      type: 'number',
+      label: 'value',
+      name: 'value'
+    }
+  ]
+}
+
+const STAT_IDLE = 0
+const STAT_RUN = 1
+const STAT_CHUTE_FULL = 2
+const STAT_ERROR = 3
+
+export default class Scanner extends MixinScanner(RectPath(Shape)) {
+  get nature() {
+    return NATURE
+  }
+
+  render(ctx: CanvasRenderingContext2D) {
+    var { width, height, left, top } = this.model
+
+    var radius = width / 10
+
+    ctx.beginPath()
+    ctx.moveTo(left + radius, top)
+    ctx.lineTo(left + width - radius, top)
+    ctx.quadraticCurveTo(left + width, top, left + width, top + radius)
+    ctx.lineTo(left + width, top + height - radius)
+    ctx.quadraticCurveTo(left + width, top + height, left + width - radius, top + height)
+    ctx.lineTo(left + radius, top + height)
+    ctx.quadraticCurveTo(left, top + height, left, top + height - radius)
+    ctx.lineTo(left, top + radius)
+    ctx.quadraticCurveTo(left, top, left + radius, top)
+    ctx.clip()
+  }
+
+  is3dish() {
+    return false
+  }
+}
+
+Component.register('scanner', Scanner as any)

package/src/templates/index.ts

@@ -0,0 +1,123 @@
+import conveyor from '../../assets/conveyor.png'
+import conveyorBelt from '../../assets/conveyor-belt.png'
+import conveyorJoin from '../../assets/conveyor-join.png'
+import conveyorJoinTrapezoid from '../../assets/conveyor-join-trapezoid.png'
+import scanner from '../../assets/scanner.png'
+import wheelSorter from '../../assets/wheel-sorter.png'
+
+export default [
+  {
+    type: 'conveyor',
+    description: 'roller type conveyor',
+    group: 'warehouse',
+    icon: conveyor,
+    model: {
+      type: 'conveyor',
+      top: 350,
+      left: 100,
+      width: 500,
+      height: 100,
+      strokeStyle: '#999',
+      lineWidth: 1,
+      lineStyle: '#999',
+      value: 1,
+      rollWidth: 13
+    }
+  },
+  {
+    type: 'conveyor-belt',
+    description: 'belt type conveyor',
+    group: 'warehouse',
+    icon: conveyorBelt,
+    model: {
+      type: 'conveyor-belt',
+      top: 500,
+      left: 100,
+      width: 500,
+      height: 100,
+      strokeStyle: '#999',
+      lineWidth: 1,
+      lineStyle: '#999',
+      value: 1,
+      conveyorType: 1,
+      rollWidth: 13
+    }
+  },
+  {
+    type: 'conveyor-join',
+    description: 'join shaped conveyor',
+    group: 'warehouse',
+    icon: conveyorJoin,
+    model: {
+      type: 'conveyor-join',
+      cx: 100,
+      cy: 150,
+      rx: 100,
+      ry: 100,
+      startAngle: -Math.PI / 4,
+      endAngle: Math.PI / 4,
+      ratio: 34,
+      lineWidth: 1,
+      strokeStyle: 'black',
+      value: 2,
+      rollWidth: 12
+    }
+  },
+  {
+    type: 'scanner',
+    description: 'box scanner',
+    group: 'warehouse',
+    icon: scanner,
+    model: {
+      type: 'scanner',
+      top: 100,
+      left: 450,
+      width: 150,
+      height: 100,
+      lineWidth: 1,
+      strokeStyle: '#999',
+      fillStyle: 'transparent',
+      value: 2,
+      rollWidth: 3
+    }
+  },
+  {
+    type: 'conveyor-join-trapezoid',
+    description: 'conveyor join trapezoid',
+    group: 'warehouse',
+    icon: conveyorJoinTrapezoid,
+    model: {
+      type: 'conveyor-join-trapezoid',
+      lineWidth: 1,
+      path: [
+        { x: 50, y: 150 },
+        { x: 150, y: 150 },
+        { x: 150, y: 250 },
+        { x: 100, y: 300 },
+        { x: 50, y: 250 }
+      ],
+      strokeStyle: '#999',
+      fillStyle: 'transparent',
+      value: 3,
+      rollWidth: 10
+    }
+  },
+  {
+    type: 'wheel-sorter',
+    description: 'wheel sorter',
+    group: 'warehouse',
+    icon: wheelSorter,
+    model: {
+      type: 'wheel-sorter',
+      top: 50,
+      left: 200,
+      width: 200,
+      height: 200,
+      strokeStyle: '#999',
+      fillStyle: 'transparent',
+      lineWidth: 2,
+      value: 1,
+      tilt: 1
+    }
+  }
+]

package/src/wheel-sorter.ts

@@ -0,0 +1,63 @@
+import { Component, RectPath, Shape } from '@hatiolab/things-scene'
+
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import MixinWheelSorter from './mixin-wheel-sorter'
+
+const NATURE = {
+  mutable: false,
+  resizable: true,
+  rotatable: true,
+  properties: [
+    {
+      type: 'number',
+      label: 'tilt',
+      name: 'tilt'
+    },
+    {
+      type: 'number',
+      label: 'wheel-size',
+      name: 'wheelSize'
+    },
+    {
+      type: 'number',
+      label: 'value',
+      name: 'value'
+    },
+    {
+      type: 'checkbox',
+      label: 'animation',
+      name: 'animated'
+    }
+  ],
+  help: 'scene/component/wheel-sorter'
+}
+
+export default class WheelSorter extends MixinWheelSorter(RectPath(Shape)) {
+  get nature() {
+    return NATURE
+  }
+
+  render(ctx: CanvasRenderingContext2D) {
+    var { width, height, left, top, animated } = this.model
+
+    animated && this.animOnState()
+
+    ctx.beginPath()
+    ctx.rect(left, top, width, height)
+
+    ctx.clip() // bound를 벗어난 영역에도 그려지는 것을 예방.
+  }
+
+  postrender(ctx: CanvasRenderingContext2D) {
+    super.postrender(ctx)
+    this._draw_pattern(ctx)
+  }
+
+  is3dish() {
+    return false
+  }
+}
+
+Component.register('wheel-sorter', WheelSorter as any)