@operato/scene-manufacturing 7.0.3 → 7.0.6

package/src/tact-timer.ts

@@ -1,10 +1,6 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-
 import { Component, ComponentNature, Properties, RectPath, Shape } from '@hatiolab/things-scene'
-
 import format from './libs/format'
+import { MASK } from './tact-timer-mask'
 
 const NATURE: ComponentNature = {
   mutable: false,
@@ -12,10 +8,16 @@ const NATURE: ComponentNature = {
   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',
@@ -31,6 +33,11 @@ const NATURE: ComponentNature = {
         options: ['', 'increase', 'decrease']
       }
     },
+    {
+      type: 'color',
+      label: 'tact-timer-mask-color',
+      name: 'maskColor'
+    },
     {
       type: 'color',
       label: 'increase-progress-color',
@@ -71,14 +78,25 @@ 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
+  private _start: number = 0
+  private _due: number = 0
+  private imageElement?: HTMLImageElement
 
   get nature() {
     return NATURE
@@ -97,14 +115,36 @@ 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()
     }
+    if ('maskColor' in after) {
+      delete this.imageElement
+    }
+  }
+
+  getImageElement(): HTMLImageElement | undefined {
+    if (!this.imageElement) {
+      const { maskColor = 'black' } = this.state
+
+      this.imageElement = new Image()
+      this.imageElement.src =
+        'data:image/svg+xml;charset=UTF-8;base64,' + btoa(MASK.replace(/{{fillColor}}/g, maskColor))
+    }
+
+    return this.imageElement
   }
 
   counting() {
@@ -113,10 +153,15 @@ export default class TactTimer extends RectPath(Shape) {
     }
 
     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)
 
@@ -128,24 +173,26 @@ export default class TactTimer extends RectPath(Shape) {
 
   render(context: CanvasRenderingContext2D) {
     var {
-      tactTime,
       top,
       left,
       height,
       width,
       round = 0,
       fontColor,
+      maskColor,
       increaseFontColor,
       decreaseFontColor,
       increaseProgressColor = 'transparent',
       decreaseProgressColor = 'transparent',
       underThresholdColor = 'transparent',
       progressDirection = 'increase',
-      progressThreshold = 0
+      progressThreshold = 0,
+      showProgress
     } = 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()
@@ -156,7 +203,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
@@ -178,6 +229,9 @@ export default class TactTimer extends RectPath(Shape) {
       context.beginPath()
     }
 
+    const image = this.getImageElement()
+    this.drawImage(context, image!, left, top, width, height)
+
     context.roundRect(left, top, width, height, round)
 
     this.setState('fontColor', (increase ? increaseFontColor : decreaseFontColor) || fontColor)
@@ -188,20 +242,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

@@ -8,5 +8,10 @@
   "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",
+  "label.tact-timer-mask-color": "mask color"
 }

package/translations/ja.json

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

package/translations/ko.json

@@ -8,5 +8,10 @@
   "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": "완료 시간",
+  "label.tact-timer-mask-color": "마스크 색상"
 }

package/translations/ms.json

@@ -8,5 +8,10 @@
   "label.progress-direction": "arah kemajuan",
   "label.progress-threshold": "ambang kemajuan",
   "label.tact-time": "masa standard",
-  "label.under-threshold-color": "warna bawah ambang"
+  "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",
+  "label.tact-timer-mask-color": "warna topeng"
 }

package/translations/zh.json

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