@operato/scene-manufacturing 1.3.18 → 1.3.20

package/src/tact-timer.ts

@@ -1,7 +1,6 @@
 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
+import { MASK } from './tact-timer-mask'
 
 const NATURE: ComponentNature = {
   mutable: false,
@@ -34,6 +33,11 @@ const NATURE: ComponentNature = {
         options: ['', 'increase', 'decrease']
       }
     },
+    {
+      type: 'color',
+      label: 'tact-timer-mask-color',
+      name: 'maskColor'
+    },
     {
       type: 'color',
       label: 'increase-progress-color',
@@ -90,19 +94,9 @@ const NATURE: ComponentNature = {
 }
 
 export default class TactTimer extends RectPath(Shape) {
-  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
+  private imageElement?: HTMLImageElement
 
   get nature() {
     return NATURE
@@ -136,6 +130,21 @@ export default class TactTimer extends RectPath(Shape) {
     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() {
@@ -170,6 +179,7 @@ export default class TactTimer extends RectPath(Shape) {
       width,
       round = 0,
       fontColor,
+      maskColor,
       increaseFontColor,
       decreaseFontColor,
       increaseProgressColor = 'transparent',
@@ -177,8 +187,7 @@ export default class TactTimer extends RectPath(Shape) {
       underThresholdColor = 'transparent',
       progressDirection = 'increase',
       progressThreshold = 0,
-      showProgress,
-      showTimer
+      showProgress
     } = this.state
 
     const increase = this.countdown > 0
@@ -220,7 +229,9 @@ export default class TactTimer extends RectPath(Shape) {
       context.beginPath()
     }
 
-    this.drawImage(context, TactTimer.mask, left, top, width, height)
+    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)

package/translations/en.json

@@ -11,5 +11,6 @@
   "label.show-progress": "show progress",
   "label.show-timer": "show timer",
   "label.start-time": "start time",
-  "label.end-time": "end time"
+  "label.end-time": "end time",
+  "label.tact-timer-mask-color": "mask color"
 }

package/translations/ja.json

@@ -11,5 +11,6 @@
   "label.show-progress": "進捗を表示",
   "label.show-timer": "タイマーを表示",
   "label.start-time": "開始時間",
-  "label.end-time": "終了時間"
+  "label.end-time": "終了時間",
+  "label.tact-timer-mask-color": "マスクの色"
 }

package/translations/ko.json

@@ -11,5 +11,6 @@
   "label.show-progress": "진행색상 보이기",
   "label.show-timer": "타이머 보이기",
   "label.start-time": "시작 시간",
-  "label.end-time": "완료 시간"
+  "label.end-time": "완료 시간",
+  "label.tact-timer-mask-color": "마스크 색상"
 }

package/translations/ms.json

@@ -11,5 +11,6 @@
   "label.show-progress": "tunjuk kemajuan",
   "label.show-timer": "tunjuk pemasa",
   "label.start-time": "masa mula",
-  "label.end-time": "masa tamat"
+  "label.end-time": "masa tamat",
+  "label.tact-timer-mask-color": "warna topeng"
 }

package/translations/zh.json

@@ -11,5 +11,6 @@
   "label.show-progress": "显示进度",
   "label.show-timer": "显示计时器",
   "label.start-time": "开始时间",
-  "label.end-time": "完成时间"
+  "label.end-time": "完成时间",
+  "label.tact-timer-mask-color": "遮罩颜色"
 }