@operato/scene-manufacturing 1.3.14 → 1.3.18

package/src/tact-timer.ts

@@ -1,21 +1,24 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-
 import { Component, ComponentNature, Properties, RectPath, Shape } from '@hatiolab/things-scene'
-
 import format from './libs/format'
 
+const mask = new URL('../icons/tact-timer-mask.svg', import.meta.url).href
+
 const NATURE: ComponentNature = {
   mutable: false,
   resizable: true,
   rotatable: true,
   properties: [
     {
-      type: 'number',
-      label: 'tact-time',
-      name: 'tactTime',
-      placeholder: 'seconds'
+      type: 'string',
+      label: 'start-time',
+      name: 'startTime',
+      placeholder: 'YYYYMMDDhhmmss'
+    },
+    {
+      type: 'string',
+      label: 'end-time',
+      name: 'endTime',
+      placeholder: 'YYYYMMDDhhmmss'
     },
     {
       type: 'string',
@@ -71,14 +74,35 @@ const NATURE: ComponentNature = {
       type: 'boolean',
       label: 'auto-start',
       name: 'autoStart'
+    },
+    {
+      type: 'boolean',
+      label: 'show-progress',
+      name: 'showProgress'
+    },
+    {
+      type: 'boolean',
+      label: 'show-timer',
+      name: 'showTimer'
     }
   ],
-  'value-property': 'tactTime',
   help: 'scene/component/manufacturing/tact-timer'
 }
 
 export default class TactTimer extends RectPath(Shape) {
-  private _due?: number
+  static MASK: HTMLImageElement
+
+  static get mask() {
+    if (!TactTimer.MASK) {
+      TactTimer.MASK = new Image()
+      TactTimer.MASK.src = mask
+    }
+
+    return TactTimer.MASK
+  }
+
+  private _start: number = 0
+  private _due: number = 0
 
   get nature() {
     return NATURE
@@ -97,27 +121,38 @@ export default class TactTimer extends RectPath(Shape) {
   }
 
   start() {
-    this._due = Date.now() + this.tactTime * 1000
-    this.counting()
+    const { startTime, endTime } = this.state
+    const start = this.parseTime(startTime)
+    const end = this.parseTime(endTime)
+
+    if (start && end) {
+      this._due = end.getTime()
+      this._start = start.getTime()
+      this.counting()
+    }
   }
 
   onchange(after: Properties) {
-    if ('tactTime' in after) {
+    if ('startTime' in after || 'endTime' in after) {
       this.start()
     }
   }
 
   counting() {
-    // @ts-ignore
-    if (this.disposed || this.countdown < -this.tactTime) {
+    if (this.disposed) {
       return
     }
 
     requestAnimationFrame(() => {
+      const { showTimer } = this.state
       const countdown = this.countdown
 
-      const text = format(Math.abs(countdown), this.getState('format'))
-      this.text = text
+      if (showTimer) {
+        const text = format(Math.abs(countdown), this.getState('format'))
+        this.text = text
+      } else {
+        this.text = ''
+      }
 
       this.setState('data', this.countdown)
 
@@ -129,7 +164,6 @@ export default class TactTimer extends RectPath(Shape) {
 
   render(context: CanvasRenderingContext2D) {
     var {
-      tactTime,
       top,
       left,
       height,
@@ -142,11 +176,14 @@ export default class TactTimer extends RectPath(Shape) {
       decreaseProgressColor = 'transparent',
       underThresholdColor = 'transparent',
       progressDirection = 'increase',
-      progressThreshold = 0
+      progressThreshold = 0,
+      showProgress,
+      showTimer
     } = this.state
 
     const increase = this.countdown > 0
-    const underThreshold = this.countdown / tactTime < progressThreshold / 100
+    const totalDuration = (this._due - this._start) / 1000
+    const underThreshold = this.countdown / totalDuration < progressThreshold / 100
 
     // progress의 색상
     context.beginPath()
@@ -157,7 +194,11 @@ export default class TactTimer extends RectPath(Shape) {
     // value의 색상
     context.beginPath()
 
-    var progress = Math.abs((this.countdown / tactTime) * 100)
+    if (!showProgress) {
+      return
+    }
+
+    var progress = Math.abs((this.countdown / totalDuration) * 100)
 
     if (!isNaN(progress)) {
       progress = width - (width * progress) / 100
@@ -179,6 +220,7 @@ export default class TactTimer extends RectPath(Shape) {
       context.beginPath()
     }
 
+    this.drawImage(context, TactTimer.mask, left, top, width, height)
     context.roundRect(left, top, width, height, round)
 
     this.setState('fontColor', (increase ? increaseFontColor : decreaseFontColor) || fontColor)
@@ -189,20 +231,58 @@ export default class TactTimer extends RectPath(Shape) {
     this.drawText(context)
   }
 
-  get tactTime() {
-    return Number(this.getState('tactTime') || 0)
-  }
-
-  set tactTime(tactTime) {
-    this.setState('tactTime', Number(tactTime) || 0)
+  parseTime(timeString: string): Date | undefined {
+    if (!timeString || timeString.length !== 14) {
+      return undefined
+    }
+    const year = parseInt(timeString.slice(0, 4), 10)
+    const month = parseInt(timeString.slice(4, 6), 10) - 1
+    const day = parseInt(timeString.slice(6, 8), 10)
+    const hour = parseInt(timeString.slice(8, 10), 10)
+    const minute = parseInt(timeString.slice(10, 12), 10)
+    const second = parseInt(timeString.slice(12, 14), 10)
+
+    return new Date(year, month, day, hour, minute, second)
   }
 
-  get countdown() {
+  get countdown(): number {
     const due = this._due || 0
     const now = Date.now()
 
     return Math.round((due - now) / 1000)
   }
+
+  get value() {
+    const { startTime, endTime } = this.state
+    return [startTime, endTime]
+  }
+
+  set value(v) {
+    if (v instanceof Array) {
+      const [startTime, endTime] = v
+      this.setState({
+        startTime,
+        endTime
+      })
+    } else if (typeof v == 'object') {
+      const { startTime, endTime } = v
+      this.setState({
+        startTime,
+        endTime
+      })
+    } else if (typeof v == 'string') {
+      const [startTime, endTime] = (v as string).split(/[-+/%$#_,]+/)
+      this.setState({
+        startTime,
+        endTime
+      })
+    } else {
+      this.setState({
+        startTime: undefined,
+        endTime: undefined
+      })
+    }
+  }
 }
 
 Component.register('tact-timer', TactTimer)

package/src/templates/tact-timer.ts

@@ -13,6 +13,15 @@ export default {
     height: 40,
     fontSize: 80,
     lineWidth: 1,
-    round: 10
+    round: 10,
+    showProgress: true,
+    showTimer: true,
+    progressDirection: 'decrease',
+    increaseProgressColor: 'green',
+    decreaseProgressColor: 'red',
+    increaseFontColor: 'navy',
+    decreaseFontColor: 'orange',
+    underThresholdColor: 'yellow',
+    progressThreshold: 30
   }
 }

package/translations/en.json

@@ -7,5 +7,9 @@
   "label.progress-direction": "Progress Direction",
   "label.progress-threshold": "Progress Threshold",
   "label.tact-time": "Tact Time",
-  "label.under-threshold-color": "Under Threshold Color"
+  "label.under-threshold-color": "Under Threshold Color",
+  "label.show-progress": "show progress",
+  "label.show-timer": "show timer",
+  "label.start-time": "start time",
+  "label.end-time": "end time"
 }

package/translations/ja.json

@@ -6,6 +6,10 @@
   "label.increase-progress-color": "進行色の増加",
   "label.progress-direction": "進行方向",
   "label.progress-threshold": "進行閾値",
-  "label.tact-time": "tact time",
-  "label.under-threshold-color": "閾値以下の色"
+  "label.tact-time": "標準所要時間",
+  "label.under-threshold-color": "閾値以下の色",
+  "label.show-progress": "進捗を表示",
+  "label.show-timer": "タイマーを表示",
+  "label.start-time": "開始時間",
+  "label.end-time": "終了時間"
 }

package/translations/ko.json

@@ -7,5 +7,9 @@
   "label.progress-direction": "진행 방향",
   "label.progress-threshold": "진행 임계값",
   "label.tact-time": "tact time",
-  "label.under-threshold-color": "임계이하 색상"
+  "label.under-threshold-color": "임계이하 색상",
+  "label.show-progress": "진행색상 보이기",
+  "label.show-timer": "타이머 보이기",
+  "label.start-time": "시작 시간",
+  "label.end-time": "완료 시간"
 }

package/translations/ms.json

@@ -6,6 +6,10 @@
   "label.increase-progress-color": "warna kemajuan meningkat",
   "label.progress-direction": "arah kemajuan",
   "label.progress-threshold": "ambang kemajuan",
-  "label.tact-time": "tact time",
-  "label.under-threshold-color": "warna bawah ambang"
+  "label.tact-time": "masa standard",
+  "label.under-threshold-color": "warna bawah ambang",
+  "label.show-progress": "tunjuk kemajuan",
+  "label.show-timer": "tunjuk pemasa",
+  "label.start-time": "masa mula",
+  "label.end-time": "masa tamat"
 }

package/translations/zh.json

@@ -6,6 +6,10 @@
   "label.increase-progress-color": "增加进度颜色",
   "label.progress-direction": "进度方向",
   "label.progress-threshold": "进度阈值",
-  "label.tact-time": "tact time",
-  "label.under-threshold-color": "低于阈值颜色"
+  "label.tact-time": "标准耗时",
+  "label.under-threshold-color": "低于阈值颜色",
+  "label.show-progress": "显示进度",
+  "label.show-timer": "显示计时器",
+  "label.start-time": "开始时间",
+  "label.end-time": "完成时间"
 }