@operato/scene-manufacturing 1.3.19 → 1.3.21

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.3.21](https://github.com/things-scene/operato-scene/compare/v1.3.20...v1.3.21) (2024-07-12)
+
+
+### :bug: Bug Fix
+
+* upgrade tact-timer ([6e73ec8](https://github.com/things-scene/operato-scene/commit/6e73ec85f2a71116a48bb33623ca0917339641c1))
+
+
+
+## [1.3.20](https://github.com/things-scene/operato-scene/compare/v1.3.19...v1.3.20) (2024-07-11)
+
+
+### :bug: Bug Fix
+
+* make tact-timer mask color settable ([29ac68c](https://github.com/things-scene/operato-scene/commit/29ac68cd91885d001494ded3843688aad20bbc21))
+
+
+
 ## [1.3.19](https://github.com/things-scene/operato-scene/compare/v1.3.18...v1.3.19) (2024-07-06)
 
 

package/dist/tact-timer-mask.d.ts

@@ -0,0 +1 @@
+export declare const MASK: string;

package/dist/tact-timer-mask.js

@@ -0,0 +1,35 @@
+export const MASK = `
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 95 23">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: url(#linear-gradient);
+      }
+
+      .cls-1, .cls-2 {
+        stroke-width: 0px;
+      }
+
+      .cls-2 {
+        fill: {{fillColor}};
+      }
+    </style>
+    <linearGradient id="linear-gradient" x1="47.4" y1="85.6" x2="47.4" y2="95" gradientTransform="translate(0 -74)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#000" stop-opacity="0"/>
+      <stop offset=".9" stop-color="#000" stop-opacity=".2"/>
+    </linearGradient>
+  </defs>
+  <rect class="cls-1" x="1.4" y="11.6" width="92.1" height="9.5" rx="2.6" ry="2.6"/>
+  <path class="cls-2" d="M95,0H0v23h95V0ZM92.5,17.9c0,1.4-1.2,2.6-2.6,2.6H5.1c-1.4,0-2.6-1.2-2.6-2.6V5.1c0-1.4,1.2-2.6,2.6-2.6h84.8c1.4,0,2.6,1.2,2.6,2.6v12.8Z"/>
+  <path class="cls-2" d="M47.9,3.1c0-.6.7-.6.7-.6v-.7h-2.5v.7s.7,0,.7.6v16.7s0,.7-.7.8v.6h2.5v-.6c-.7-.1-.7-.8-.7-.8V3.1Z"/>
+  <path class="cls-2" d="M38.6,3.1c0-.6.7-.6.7-.6v-.7h-2.5v.7s.7,0,.7.6v16.7s0,.7-.7.8v.6h2.5v-.6c-.7-.1-.7-.8-.7-.8V3.1Z"/>
+  <path class="cls-2" d="M29.3,3.1c0-.6.7-.6.7-.6v-.7h-2.5v.7s.7,0,.7.6v16.7s0,.7-.7.8v.6h2.5v-.6c-.7-.1-.7-.8-.7-.8V3.1Z"/>
+  <path class="cls-2" d="M19.9,3.1c0-.6.7-.6.7-.6v-.7h-2.5v.7s.7,0,.7.6v16.7s0,.7-.7.8v.6h2.5v-.6c-.7-.1-.7-.8-.7-.8V3.1Z"/>
+  <path class="cls-2" d="M11,3.1c0-.6.7-.6.7-.6v-.7h-2.5v.7s.7,0,.7.6v16.7s0,.7-.7.8v.6h2.5v-.6c-.7-.1-.7-.8-.7-.8V3.1Z"/>
+  <path class="cls-2" d="M84.9,3.1c0-.6.7-.6.7-.6v-.7h-2.5v.7s.7,0,.7.6v16.7s0,.7-.7.8v.6h2.5v-.6c-.7-.1-.7-.8-.7-.8V3.1Z"/>
+  <path class="cls-2" d="M75.6,3.1c0-.6.7-.6.7-.6v-.7h-2.5v.7s.7,0,.7.6v16.7s0,.7-.7.8v.6h2.5v-.6c-.7-.1-.7-.8-.7-.8V3.1Z"/>
+  <path class="cls-2" d="M66.4,3.1c0-.6.7-.6.7-.6v-.7h-2.5v.7s.7,0,.7.6v16.7s0,.7-.7.8v.6h2.5v-.6c-.7-.1-.7-.8-.7-.8V3.1Z"/>
+  <path class="cls-2" d="M57.2,3.1c0-.6.7-.6.7-.6v-.7h-2.5v.7s.7,0,.7.6v16.7s0,.7-.7.8v.6h2.5v-.6c-.7-.1-.7-.8-.7-.8V3.1Z"/>
+</svg>
+`;
+//# sourceMappingURL=tact-timer-mask.js.map

package/dist/tact-timer-mask.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tact-timer-mask.js","sourceRoot":"","sources":["../src/tact-timer-mask.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,IAAI,GAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiC3B,CAAA","sourcesContent":["export const MASK: string = `\n<svg id=\"Layer_1\" data-name=\"Layer 1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" viewBox=\"0 0 95 23\">\n  <defs>\n    <style>\n      .cls-1 {\n        fill: url(#linear-gradient);\n      }\n\n      .cls-1, .cls-2 {\n        stroke-width: 0px;\n      }\n\n      .cls-2 {\n        fill: {{fillColor}};\n      }\n    </style>\n    <linearGradient id=\"linear-gradient\" x1=\"47.4\" y1=\"85.6\" x2=\"47.4\" y2=\"95\" gradientTransform=\"translate(0 -74)\" gradientUnits=\"userSpaceOnUse\">\n      <stop offset=\"0\" stop-color=\"#000\" stop-opacity=\"0\"/>\n      <stop offset=\".9\" stop-color=\"#000\" stop-opacity=\".2\"/>\n    </linearGradient>\n  </defs>\n  <rect class=\"cls-1\" x=\"1.4\" y=\"11.6\" width=\"92.1\" height=\"9.5\" rx=\"2.6\" ry=\"2.6\"/>\n  <path class=\"cls-2\" d=\"M95,0H0v23h95V0ZM92.5,17.9c0,1.4-1.2,2.6-2.6,2.6H5.1c-1.4,0-2.6-1.2-2.6-2.6V5.1c0-1.4,1.2-2.6,2.6-2.6h84.8c1.4,0,2.6,1.2,2.6,2.6v12.8Z\"/>\n  <path class=\"cls-2\" d=\"M47.9,3.1c0-.6.7-.6.7-.6v-.7h-2.5v.7s.7,0,.7.6v16.7s0,.7-.7.8v.6h2.5v-.6c-.7-.1-.7-.8-.7-.8V3.1Z\"/>\n  <path class=\"cls-2\" d=\"M38.6,3.1c0-.6.7-.6.7-.6v-.7h-2.5v.7s.7,0,.7.6v16.7s0,.7-.7.8v.6h2.5v-.6c-.7-.1-.7-.8-.7-.8V3.1Z\"/>\n  <path class=\"cls-2\" d=\"M29.3,3.1c0-.6.7-.6.7-.6v-.7h-2.5v.7s.7,0,.7.6v16.7s0,.7-.7.8v.6h2.5v-.6c-.7-.1-.7-.8-.7-.8V3.1Z\"/>\n  <path class=\"cls-2\" d=\"M19.9,3.1c0-.6.7-.6.7-.6v-.7h-2.5v.7s.7,0,.7.6v16.7s0,.7-.7.8v.6h2.5v-.6c-.7-.1-.7-.8-.7-.8V3.1Z\"/>\n  <path class=\"cls-2\" d=\"M11,3.1c0-.6.7-.6.7-.6v-.7h-2.5v.7s.7,0,.7.6v16.7s0,.7-.7.8v.6h2.5v-.6c-.7-.1-.7-.8-.7-.8V3.1Z\"/>\n  <path class=\"cls-2\" d=\"M84.9,3.1c0-.6.7-.6.7-.6v-.7h-2.5v.7s.7,0,.7.6v16.7s0,.7-.7.8v.6h2.5v-.6c-.7-.1-.7-.8-.7-.8V3.1Z\"/>\n  <path class=\"cls-2\" d=\"M75.6,3.1c0-.6.7-.6.7-.6v-.7h-2.5v.7s.7,0,.7.6v16.7s0,.7-.7.8v.6h2.5v-.6c-.7-.1-.7-.8-.7-.8V3.1Z\"/>\n  <path class=\"cls-2\" d=\"M66.4,3.1c0-.6.7-.6.7-.6v-.7h-2.5v.7s.7,0,.7.6v16.7s0,.7-.7.8v.6h2.5v-.6c-.7-.1-.7-.8-.7-.8V3.1Z\"/>\n  <path class=\"cls-2\" d=\"M57.2,3.1c0-.6.7-.6.7-.6v-.7h-2.5v.7s.7,0,.7.6v16.7s0,.7-.7.8v.6h2.5v-.6c-.7-.1-.7-.8-.7-.8V3.1Z\"/>\n</svg>\n`\n"]}

package/dist/tact-timer.d.ts

@@ -1,14 +1,14 @@
 import { ComponentNature, Properties, Shape } from '@hatiolab/things-scene';
 declare const TactTimer_base: typeof Shape;
 export default class TactTimer extends TactTimer_base {
-    static MASK: HTMLImageElement;
-    static get mask(): HTMLImageElement;
     private _start;
     private _due;
+    private imageElement?;
     get nature(): ComponentNature;
     ready(): void;
     start(): void;
     onchange(after: Properties): void;
+    getImageElement(): HTMLImageElement | undefined;
     counting(): void;
     render(context: CanvasRenderingContext2D): void;
     postrender(context: CanvasRenderingContext2D): void;

package/dist/tact-timer.js

@@ -1,6 +1,6 @@
 import { Component, 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 = {
     mutable: false,
     resizable: true,
@@ -34,23 +34,28 @@ const NATURE = {
         },
         {
             type: 'color',
-            label: 'increase-progress-color',
-            name: 'increaseProgressColor'
+            label: 'tact-timer-mask-color',
+            name: 'maskColor'
         },
         {
             type: 'color',
-            label: 'decrease-progress-color',
-            name: 'decreaseProgressColor'
+            label: 'before-due-progress-color',
+            name: 'beforeDueProgressColor'
         },
         {
             type: 'color',
-            label: 'increase-font-color',
-            name: 'increaseFontColor'
+            label: 'over-due-progress-color',
+            name: 'overDueProgressColor'
         },
         {
             type: 'color',
-            label: 'decrese-font-color',
-            name: 'decreaseFontColor'
+            label: 'before-due-font-color',
+            name: 'beforeDueFontColor'
+        },
+        {
+            type: 'color',
+            label: 'over-due-font-color',
+            name: 'overDueFontColor'
         },
         {
             type: 'color',
@@ -92,13 +97,6 @@ export default class TactTimer extends RectPath(Shape) {
         this._start = 0;
         this._due = 0;
     }
-    static get mask() {
-        if (!TactTimer.MASK) {
-            TactTimer.MASK = new Image();
-            TactTimer.MASK.src = mask;
-        }
-        return TactTimer.MASK;
-    }
     get nature() {
         return NATURE;
     }
@@ -112,27 +110,41 @@ export default class TactTimer extends RectPath(Shape) {
         }
     }
     start() {
-        const { startTime, endTime } = this.state;
+        const { startTime, endTime, hidden } = this.state;
         const start = this.parseTime(startTime);
         const end = this.parseTime(endTime);
-        if (start && end) {
+        if (start && end && !hidden) {
             this._due = end.getTime();
             this._start = start.getTime();
             this.counting();
         }
     }
     onchange(after) {
-        if ('startTime' in after || 'endTime' in after) {
+        if ('startTime' in after || 'endTime' in after || 'hidden' in after) {
             this.start();
         }
+        if ('maskColor' in after) {
+            delete this.imageElement;
+        }
+    }
+    getImageElement() {
+        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() {
-        if (this.disposed) {
+        const { hidden } = this.state;
+        if (this.disposed || hidden) {
             return;
         }
         requestAnimationFrame(() => {
-            const { showTimer } = this.state;
+            const { showTimer, beforeDueFontColor, overDueFontColor, fontColor } = this.state;
             const countdown = this.countdown;
+            this.setState('fontColor', (this.countdown > 0 ? beforeDueFontColor : overDueFontColor) || fontColor);
             if (showTimer) {
                 const text = format(Math.abs(countdown), this.getState('format'));
                 this.text = text;
@@ -147,7 +159,7 @@ export default class TactTimer extends RectPath(Shape) {
         });
     }
     render(context) {
-        var { top, left, height, width, round = 0, fontColor, increaseFontColor, decreaseFontColor, increaseProgressColor = 'transparent', decreaseProgressColor = 'transparent', underThresholdColor = 'transparent', progressDirection = 'increase', progressThreshold = 0, showProgress, showTimer } = this.state;
+        var { top, left, height, width, round = 0, fontColor, maskColor, beforeDueFontColor, overDueFontColor, beforeDueProgressColor = 'transparent', overDueProgressColor = 'transparent', underThresholdColor = 'transparent', progressDirection = 'increase', progressThreshold = 0, showProgress } = this.state;
         const increase = this.countdown > 0;
         const totalDuration = (this._due - this._start) / 1000;
         const underThreshold = this.countdown / totalDuration < progressThreshold / 100;
@@ -174,14 +186,15 @@ export default class TactTimer extends RectPath(Shape) {
             context.fillStyle = increase
                 ? underThreshold
                     ? underThresholdColor
-                    : increaseProgressColor
-                : decreaseProgressColor;
+                    : beforeDueProgressColor
+                : overDueProgressColor;
             context.fill();
             context.beginPath();
         }
-        this.drawImage(context, TactTimer.mask, left, top, width, height);
+        const image = this.getImageElement();
+        this.drawImage(context, image, left - 2, top - 2, width + 4, height + 4);
         context.roundRect(left, top, width, height, round);
-        this.setState('fontColor', (increase ? increaseFontColor : decreaseFontColor) || fontColor);
+        this.setState('fontColor', (increase ? beforeDueFontColor : overDueFontColor) || fontColor);
     }
     postrender(context) {
         this.drawStroke(context);

package/dist/tact-timer.js.map

@@ -1 +1 @@
-{"version":3,"file":"tact-timer.js","sourceRoot":"","sources":["../src/tact-timer.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentNature, Properties, RectPath, Shape } from '@hatiolab/things-scene'\nimport format from './libs/format'\n\nconst mask = new URL('../icons/tact-timer-mask.svg', import.meta.url).href\n\nconst NATURE: ComponentNature = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [\n    {\n      type: 'string',\n      label: 'start-time',\n      name: 'startTime',\n      placeholder: 'YYYYMMDDhhmmss'\n    },\n    {\n      type: 'string',\n      label: 'end-time',\n      name: 'endTime',\n      placeholder: 'YYYYMMDDhhmmss'\n    },\n    {\n      type: 'string',\n      label: 'format',\n      name: 'format',\n      placeholder: 'hh:mm:ss'\n    },\n    {\n      type: 'select',\n      label: 'progress-direction',\n      name: 'progressDirection',\n      property: {\n        options: ['', 'increase', 'decrease']\n      }\n    },\n    {\n      type: 'color',\n      label: 'increase-progress-color',\n      name: 'increaseProgressColor'\n    },\n    {\n      type: 'color',\n      label: 'decrease-progress-color',\n      name: 'decreaseProgressColor'\n    },\n    {\n      type: 'color',\n      label: 'increase-font-color',\n      name: 'increaseFontColor'\n    },\n    {\n      type: 'color',\n      label: 'decrese-font-color',\n      name: 'decreaseFontColor'\n    },\n    {\n      type: 'color',\n      label: 'under-threshold-color',\n      name: 'underThresholdColor'\n    },\n    {\n      type: 'number',\n      label: 'progress-threshold',\n      name: 'progressThreshold',\n      placeholder: '%'\n    },\n    {\n      type: 'number',\n      label: 'round',\n      name: 'round'\n    },\n    {\n      type: 'boolean',\n      label: 'auto-start',\n      name: 'autoStart'\n    },\n    {\n      type: 'boolean',\n      label: 'show-progress',\n      name: 'showProgress'\n    },\n    {\n      type: 'boolean',\n      label: 'show-timer',\n      name: 'showTimer'\n    }\n  ],\n  help: 'scene/component/manufacturing/tact-timer'\n}\n\nexport default class TactTimer extends RectPath(Shape) {\n  static MASK: HTMLImageElement\n\n  static get mask() {\n    if (!TactTimer.MASK) {\n      TactTimer.MASK = new Image()\n      TactTimer.MASK.src = mask\n    }\n\n    return TactTimer.MASK\n  }\n\n  private _start: number = 0\n  private _due: number = 0\n\n  get nature() {\n    return NATURE\n  }\n\n  ready() {\n    if (!this.app.isViewMode) {\n      return\n    }\n\n    const { autoStart } = this.state\n\n    if (autoStart) {\n      this.start()\n    }\n  }\n\n  start() {\n    const { startTime, endTime } = this.state\n    const start = this.parseTime(startTime)\n    const end = this.parseTime(endTime)\n\n    if (start && end) {\n      this._due = end.getTime()\n      this._start = start.getTime()\n      this.counting()\n    }\n  }\n\n  onchange(after: Properties) {\n    if ('startTime' in after || 'endTime' in after) {\n      this.start()\n    }\n  }\n\n  counting() {\n    if (this.disposed) {\n      return\n    }\n\n    requestAnimationFrame(() => {\n      const { showTimer } = this.state\n      const countdown = this.countdown\n\n      if (showTimer) {\n        const text = format(Math.abs(countdown), this.getState('format'))\n        this.text = text\n      } else {\n        this.text = ''\n      }\n\n      this.setState('data', this.countdown)\n\n      setTimeout(() => {\n        this.counting()\n      }, 1000)\n    })\n  }\n\n  render(context: CanvasRenderingContext2D) {\n    var {\n      top,\n      left,\n      height,\n      width,\n      round = 0,\n      fontColor,\n      increaseFontColor,\n      decreaseFontColor,\n      increaseProgressColor = 'transparent',\n      decreaseProgressColor = 'transparent',\n      underThresholdColor = 'transparent',\n      progressDirection = 'increase',\n      progressThreshold = 0,\n      showProgress,\n      showTimer\n    } = this.state\n\n    const increase = this.countdown > 0\n    const totalDuration = (this._due - this._start) / 1000\n    const underThreshold = this.countdown / totalDuration < progressThreshold / 100\n\n    // progress의 색상\n    context.beginPath()\n    context.roundRect(left, top, width, height, round)\n    context.clip()\n    this.drawFill(context)\n\n    // value의 색상\n    context.beginPath()\n\n    if (!showProgress) {\n      return\n    }\n\n    var progress = Math.abs((this.countdown / totalDuration) * 100)\n\n    if (!isNaN(progress)) {\n      progress = width - (width * progress) / 100\n      progress = Math.max(Math.min(progress, width), 0)\n\n      if (progressDirection == 'increase') {\n        context.rect(left, top, progress, height)\n      } else {\n        context.rect(left + progress, top, width - progress, height)\n      }\n\n      context.fillStyle = increase\n        ? underThreshold\n          ? underThresholdColor\n          : increaseProgressColor\n        : decreaseProgressColor\n      context.fill()\n\n      context.beginPath()\n    }\n\n    this.drawImage(context, TactTimer.mask, left, top, width, height)\n    context.roundRect(left, top, width, height, round)\n\n    this.setState('fontColor', (increase ? increaseFontColor : decreaseFontColor) || fontColor)\n  }\n\n  postrender(context: CanvasRenderingContext2D) {\n    this.drawStroke(context)\n    this.drawText(context)\n  }\n\n  parseTime(timeString: string): Date | undefined {\n    if (!timeString || timeString.length !== 14) {\n      return undefined\n    }\n    const year = parseInt(timeString.slice(0, 4), 10)\n    const month = parseInt(timeString.slice(4, 6), 10) - 1\n    const day = parseInt(timeString.slice(6, 8), 10)\n    const hour = parseInt(timeString.slice(8, 10), 10)\n    const minute = parseInt(timeString.slice(10, 12), 10)\n    const second = parseInt(timeString.slice(12, 14), 10)\n\n    return new Date(year, month, day, hour, minute, second)\n  }\n\n  get countdown(): number {\n    const due = this._due || 0\n    const now = Date.now()\n\n    return Math.round((due - now) / 1000)\n  }\n\n  get value() {\n    const { startTime, endTime } = this.state\n    return [startTime, endTime]\n  }\n\n  set value(v) {\n    if (v instanceof Array) {\n      const [startTime, endTime] = v\n      this.setState({\n        startTime,\n        endTime\n      })\n    } else if (typeof v == 'object') {\n      const { startTime, endTime } = v\n      this.setState({\n        startTime,\n        endTime\n      })\n    } else if (typeof v == 'string') {\n      const [startTime, endTime] = (v as string).split(/[-+/%$#_,]+/)\n      this.setState({\n        startTime,\n        endTime\n      })\n    } else {\n      this.setState({\n        startTime: undefined,\n        endTime: undefined\n      })\n    }\n  }\n}\n\nComponent.register('tact-timer', TactTimer)\n"]}
+{"version":3,"file":"tact-timer.js","sourceRoot":"","sources":["../src/tact-timer.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentNature, Properties, RectPath, Shape } from '@hatiolab/things-scene'\nimport format from './libs/format'\nimport { MASK } from './tact-timer-mask'\n\nconst NATURE: ComponentNature = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [\n    {\n      type: 'string',\n      label: 'start-time',\n      name: 'startTime',\n      placeholder: 'YYYYMMDDhhmmss'\n    },\n    {\n      type: 'string',\n      label: 'end-time',\n      name: 'endTime',\n      placeholder: 'YYYYMMDDhhmmss'\n    },\n    {\n      type: 'string',\n      label: 'format',\n      name: 'format',\n      placeholder: 'hh:mm:ss'\n    },\n    {\n      type: 'select',\n      label: 'progress-direction',\n      name: 'progressDirection',\n      property: {\n        options: ['', 'increase', 'decrease']\n      }\n    },\n    {\n      type: 'color',\n      label: 'tact-timer-mask-color',\n      name: 'maskColor'\n    },\n    {\n      type: 'color',\n      label: 'before-due-progress-color',\n      name: 'beforeDueProgressColor'\n    },\n    {\n      type: 'color',\n      label: 'over-due-progress-color',\n      name: 'overDueProgressColor'\n    },\n    {\n      type: 'color',\n      label: 'before-due-font-color',\n      name: 'beforeDueFontColor'\n    },\n    {\n      type: 'color',\n      label: 'over-due-font-color',\n      name: 'overDueFontColor'\n    },\n    {\n      type: 'color',\n      label: 'under-threshold-color',\n      name: 'underThresholdColor'\n    },\n    {\n      type: 'number',\n      label: 'progress-threshold',\n      name: 'progressThreshold',\n      placeholder: '%'\n    },\n    {\n      type: 'number',\n      label: 'round',\n      name: 'round'\n    },\n    {\n      type: 'boolean',\n      label: 'auto-start',\n      name: 'autoStart'\n    },\n    {\n      type: 'boolean',\n      label: 'show-progress',\n      name: 'showProgress'\n    },\n    {\n      type: 'boolean',\n      label: 'show-timer',\n      name: 'showTimer'\n    }\n  ],\n  help: 'scene/component/manufacturing/tact-timer'\n}\n\nexport default class TactTimer extends RectPath(Shape) {\n  private _start: number = 0\n  private _due: number = 0\n  private imageElement?: HTMLImageElement\n\n  get nature() {\n    return NATURE\n  }\n\n  ready() {\n    if (!this.app.isViewMode) {\n      return\n    }\n\n    const { autoStart } = this.state\n\n    if (autoStart) {\n      this.start()\n    }\n  }\n\n  start() {\n    const { startTime, endTime, hidden } = this.state\n    const start = this.parseTime(startTime)\n    const end = this.parseTime(endTime)\n\n    if (start && end && !hidden) {\n      this._due = end.getTime()\n      this._start = start.getTime()\n      this.counting()\n    }\n  }\n\n  onchange(after: Properties) {\n    if ('startTime' in after || 'endTime' in after || 'hidden' in after) {\n      this.start()\n    }\n\n    if ('maskColor' in after) {\n      delete this.imageElement\n    }\n  }\n\n  getImageElement(): HTMLImageElement | undefined {\n    if (!this.imageElement) {\n      const { maskColor = 'black' } = this.state\n\n      this.imageElement = new Image()\n      this.imageElement.src =\n        'data:image/svg+xml;charset=UTF-8;base64,' + btoa(MASK.replace(/{{fillColor}}/g, maskColor))\n    }\n\n    return this.imageElement\n  }\n\n  counting() {\n    const { hidden } = this.state\n    if (this.disposed || hidden) {\n      return\n    }\n\n    requestAnimationFrame(() => {\n      const { showTimer, beforeDueFontColor, overDueFontColor, fontColor } = this.state\n      const countdown = this.countdown\n\n      this.setState('fontColor', (this.countdown > 0 ? beforeDueFontColor : overDueFontColor) || fontColor)\n\n      if (showTimer) {\n        const text = format(Math.abs(countdown), this.getState('format'))\n        this.text = text\n      } else {\n        this.text = ''\n      }\n\n      this.setState('data', this.countdown)\n\n      setTimeout(() => {\n        this.counting()\n      }, 1000)\n    })\n  }\n\n  render(context: CanvasRenderingContext2D) {\n    var {\n      top,\n      left,\n      height,\n      width,\n      round = 0,\n      fontColor,\n      maskColor,\n      beforeDueFontColor,\n      overDueFontColor,\n      beforeDueProgressColor = 'transparent',\n      overDueProgressColor = 'transparent',\n      underThresholdColor = 'transparent',\n      progressDirection = 'increase',\n      progressThreshold = 0,\n      showProgress\n    } = this.state\n\n    const increase = this.countdown > 0\n    const totalDuration = (this._due - this._start) / 1000\n    const underThreshold = this.countdown / totalDuration < progressThreshold / 100\n\n    // progress의 색상\n    context.beginPath()\n    context.roundRect(left, top, width, height, round)\n    context.clip()\n    this.drawFill(context)\n\n    // value의 색상\n    context.beginPath()\n\n    if (!showProgress) {\n      return\n    }\n\n    var progress = Math.abs((this.countdown / totalDuration) * 100)\n\n    if (!isNaN(progress)) {\n      progress = width - (width * progress) / 100\n      progress = Math.max(Math.min(progress, width), 0)\n\n      if (progressDirection == 'increase') {\n        context.rect(left, top, progress, height)\n      } else {\n        context.rect(left + progress, top, width - progress, height)\n      }\n\n      context.fillStyle = increase\n        ? underThreshold\n          ? underThresholdColor\n          : beforeDueProgressColor\n        : overDueProgressColor\n      context.fill()\n\n      context.beginPath()\n    }\n\n    const image = this.getImageElement()\n    this.drawImage(context, image!, left - 2, top - 2, width + 4, height + 4)\n\n    context.roundRect(left, top, width, height, round)\n\n    this.setState('fontColor', (increase ? beforeDueFontColor : overDueFontColor) || fontColor)\n  }\n\n  postrender(context: CanvasRenderingContext2D) {\n    this.drawStroke(context)\n    this.drawText(context)\n  }\n\n  parseTime(timeString: string): Date | undefined {\n    if (!timeString || timeString.length !== 14) {\n      return undefined\n    }\n    const year = parseInt(timeString.slice(0, 4), 10)\n    const month = parseInt(timeString.slice(4, 6), 10) - 1\n    const day = parseInt(timeString.slice(6, 8), 10)\n    const hour = parseInt(timeString.slice(8, 10), 10)\n    const minute = parseInt(timeString.slice(10, 12), 10)\n    const second = parseInt(timeString.slice(12, 14), 10)\n\n    return new Date(year, month, day, hour, minute, second)\n  }\n\n  get countdown(): number {\n    const due = this._due || 0\n    const now = Date.now()\n\n    return Math.round((due - now) / 1000)\n  }\n\n  get value() {\n    const { startTime, endTime } = this.state\n    return [startTime, endTime]\n  }\n\n  set value(v) {\n    if (v instanceof Array) {\n      const [startTime, endTime] = v\n      this.setState({\n        startTime,\n        endTime\n      })\n    } else if (typeof v == 'object') {\n      const { startTime, endTime } = v\n      this.setState({\n        startTime,\n        endTime\n      })\n    } else if (typeof v == 'string') {\n      const [startTime, endTime] = (v as string).split(/[-+/%$#_,]+/)\n      this.setState({\n        startTime,\n        endTime\n      })\n    } else {\n      this.setState({\n        startTime: undefined,\n        endTime: undefined\n      })\n    }\n  }\n}\n\nComponent.register('tact-timer', TactTimer)\n"]}

package/helps/scene/component/manufacturing/tact-timer.ja.md

@@ -1,65 +1,65 @@
-### タクトタイマー（Tact Timer）
+# Tact Timer
 
-タクトタイマーは生産ラインやプロセスで使用される時間管理ツールで、特定の作業や活動に割り当てられた時間を設定し管理するために使用されます。このツールは開始時間と終了時間に基づいてリアルタイムで経過時間を計算し、実際の経過時間をモニタリングし、プログレスバーとカウントダウンテキストを表示して、使用者に現在の進行状況を視覚的に表現します。これにより、生産プロセスを効率的に管理し、生産量を最適化するのに役立ちます。
+"Tact Timer"は、生産ラインや工程で使用される時間管理ツールで、特定の作業や活動に割り当てられた時間を設定および管理するために使用されます。このツールは開始時間と終了時間に基づいてリアルタイムで経過時間を計算および監視し、プログレスバーとカウントダウンテキストを表示してユーザーに現在の進行状況を視覚的に表現します。これにより、生産プロセスを効率的に管理し、生産量を最適化するのに役立ちます。
 
-#### 特性
+## properties
 
-- 開始時間（startTime）
+- 開始時間(startTime)
   - 作業の開始時間を設定します。
-  - フォーマット：'YYYYMMDDhhmmss'
-- 終了時間（endTime）
+  - フォーマット: 'YYYYMMDDhhmmss'
+- 終了時間(endTime)
   - 作業の終了時間を設定します。
-  - フォーマット：'YYYYMMDDhhmmss'
-- カウントダウンフォーマット（format）
-  - フォーマット：'hh:mm:ss'
-  - カウントダウン結果の表示形式
-- 進行方向（progressDirection）
-  - プログレスバーの進行方向設定
-  - 'increase' の場合、increaseProgressColor から始まり、0 を過ぎた後は decreaseProgressColor に変わります
-  - 'decrease' の場合、decreaseProgressColor から始まり、0 を過ぎた後は increaseProgressColor に変わります
-- 増加進行色（increaseProgressColor）
-  - 増加時の進行色
-- 減少進行色（decreaseProgressColor）
-  - 減少時の進行色
-- 増加フォント色（increaseFontColor）
-  - 増加時のフォント色
-- 減少フォント色（decreaseFontColor）
-  - 減少時のフォント色
-- 進行閾値（progressThreshold）
-  - 警告閾値（%）、進行状況が閾値以下の場合に閾値以下色が使用されます
-- 閾値以下色（underThresholdColor）
-  - 閾値以下の進行色
-- 自動開始（autoStart）
-  - カウントダウンを自動的に開始します
-- 角を丸くする（round）
-  - コンポーネント四角形領域の 4 つの角の丸い形状の半径サイズ
+  - フォーマット: 'YYYYMMDDhhmmss'
+- カウントダウンフォーマット(format)
+  - フォーマット: 'hh:mm:ss'
+  - カウントダウン結果の表示フォーマット
+- 進行方向(progressDirection)
+  - プログレスバーの進行方向を設定します。
+  - 'increase': 増加する方向
+  - 'decrease': 減少する方向
+- 期限前進行色(beforeDueProgressColor)
+  - 期限前の進行色
+- 期限後進行色(overDueProgressColor)
+  - 期限後の進行色
+- 期限前フォント色(beforeDueFontColor)
+  - 期限前のフォント色
+- 期限後フォント色(overDueFontColor)
+  - 期限後のフォント色
+- 進行しきい値(progressThreshold)
+  - 警告しきい値(%)。進行状況がしきい値以下の場合、しきい値以下の色が使用されます
+- しきい値以下の色(underThresholdColor)
+  - しきい値以下の場合の進行色
+- 自動開始(autoStart)
+  - カウントダウンを自動的に開始します。
+- 丸くする(round)
+  - コンポーネントの四角の四隅の丸みの半径サイズ
 - 進行色を表示(showProgress)
-  - 進行度を背景色で表現する
+  - 背景色で進行状況を表示します。
 - タイマーを表示(showTimer)
-  - 残り時間または経過時間をテキストで表示する
+  - 残り時間または経過時間をテキストで表示します。
 
-#### データ
+## data
 
-- 設定された開始時間と終了時間に基づいて、現在の残り時間が毎秒更新されます。
+- 設定された開始時間と終了時間に基づいて、毎秒現在の残り時間が更新されます。
 - タイマーは設定された終了時間を基準に 0 までカウントダウンされます。
 
-#### value
+## value
 
-`value`プロパティは、`startTime`と`endTime`をさまざまな形式で設定するために使用できます。また、さまざまな特殊文字を使用して時間を区切ることができます：
+`value`プロパティは`startTime`と`endTime`をさまざまな形式で設定するために使用でき、複数の特殊文字を使用して時間を区切ることができます：
 
-- 配列として: `['YYYYMMDDhhmmss', 'YYYYMMDDhhmmss']`
+- 配列として設定: `['YYYYMMDDhhmmss', 'YYYYMMDDhhmmss']`
 
   ```javascript
   component.value = ['20240101000000', '20240101235959']
   ```
 
-- オブジェクトとして:
+- オブジェクトとして設定:
 
   ```javascript
   component.value = { startTime: '20240101000000', endTime: '20240101235959' }
   ```
 
-- 特殊文字を含む文字列として:
+- 特殊文字を含む文字列として設定:
   - 使用可能な特殊文字: `-`, `/`, `%`, `$`, `#`, `_`, `,`
   ```javascript
   component.value = '20240101000000-20240101235959'

package/helps/scene/component/manufacturing/tact-timer.ko.md

@@ -17,14 +17,14 @@
   - 프로그레스 바의 진행 방향을 설정합니다.
   - 'increase': 증가하는 방향으로 진행
   - 'decrease': 감소하는 방향으로 진행
-- 증가 진행 색상(increaseProgressColor)
-  - 증가할 때의 진행 색상
-- 감소 진행 색상(decreaseProgressColor)
-  - 감소할 때의 진행 색상
-- 증가 폰트 색상(increaseFontColor)
-  - 증가할 때의 폰트 색상
-- 감소 폰트 색상(decreaseFontColor)
-  - 감소할 때의 폰트 색상
+- 만기 이전 진행 색상(beforeDueProgressColor)
+  - 만기 이전의 진행 색상
+- 만기 이후 진행 색상(overDueProgressColor)
+  - 만기 이후의 진행 색상
+- 만기 이전 폰트 색상(beforeDueFontColor)
+  - 만기 이전의 폰트 색상
+- 만기 이후 폰트 색상(overDueFontColor)
+  - 만기 이후의 폰트 색상
 - 진행 임계값(progressThreshold)
   - 경고 임계값(%). 진행 상황이 임계값 이하인 경우 임계 이하 색상이 사용됨
 - 임계 이하 색상(underThresholdColor)

package/helps/scene/component/manufacturing/tact-timer.md

@@ -1,66 +1,66 @@
-### Tact Timer
+# Tact Timer
 
-"Tact Timer" is a time management tool used in production lines or processes. It is utilized for setting and managing allocated time for a specific task or activity. This tool calculates elapsed time in real-time, monitors actual elapsed time, and visually represents the current progress to the user by displaying a progress bar and countdown text. It aids in efficiently managing the production process and optimizing output.
+"Tact Timer" is a time management tool used in production lines or processes to set and manage the time allocated to specific tasks or activities. This tool calculates and monitors elapsed time in real-time based on the start and end times and displays the current progress visually to the user using a progress bar and countdown text. This helps manage the production process efficiently and optimize output.
 
-#### properties
+## properties
 
-- Start Time (startTime)
+- start time(startTime)
   - Sets the start time of the task.
   - Format: 'YYYYMMDDhhmmss'
-- End Time (endTime)
+- end time(endTime)
   - Sets the end time of the task.
   - Format: 'YYYYMMDDhhmmss'
-- Countdown Format (format)
+- countdown format(format)
   - Format: 'hh:mm:ss'
   - Format for displaying the countdown result
-- Progress Direction (progressDirection)
-  - Sets the direction of progress for the progress bar
-  - In the case of 'increase', it starts with increaseProgressColor, changing to decreaseProgressColor after passing 0
-  - In the case of 'decrease', it starts with decreaseProgressColor, changing to increaseProgressColor after passing 0
-- Increase Progress Color (increaseProgressColor)
-  - Color for progress during increase
-- Decrease Progress Color (decreaseProgressColor)
-  - Color for progress during decrease
-- Increase Font Color (increaseFontColor)
-  - Font color during increase
-- Decrease Font Color (decreaseFontColor)
-  - Font color during decrease
-- Progress Threshold (progressThreshold)
-  - Warning threshold (%) of elapsed time; threshold color is used when progress is below this level
-- Under Threshold Color (underThresholdColor)
-  - Color for progress below the threshold
-- Auto Start (autoStart)
+- progress direction(progressDirection)
+  - Sets the direction of the progress bar.
+  - 'increase': Progress increases
+  - 'decrease': Progress decreases
+- before due progress color(beforeDueProgressColor)
+  - Progress color before due
+- over due progress color(overDueProgressColor)
+  - Progress color after due
+- before due font color(beforeDueFontColor)
+  - Font color before due
+- over due font color(overDueFontColor)
+  - Font color after due
+- progress threshold(progressThreshold)
+  - Warning threshold(%). Under threshold color is used when progress is below the threshold
+- under threshold color(underThresholdColor)
+  - Progress color when below threshold
+- auto start(autoStart)
   - Automatically starts the countdown
-- Round (round)
-  - Radius size of the rounded shape at the four corners of the component's rectangular area
-- Show Progress Color (showProgress)
-  - Use background color to represent the degree of progress
-- Show Timer (showTimer)
-  - Show remaining time or elapsed time as text
+- round(round)
+  - Radius size of the rounded corners of the component's rectangular area
+- show progress color(showProgress)
+  - Displays the progress as a background color
+- show timer(showTimer)
+  - Displays the remaining or elapsed time as text
 
-#### data
+## data
 
-- The current value, counted down from the start time to the end time, is updated every second (unit: seconds).
+- The remaining time is updated every second based on the set start and end times.
 - The timer counts down to 0 based on the set end time.
 
-#### value
+## value
 
-The `value` property can be used to set the `startTime` and `endTime` in different formats and using various special characters to separate the times:
+The `value` attribute can be used to set `startTime` and `endTime` in various formats, and can use various special characters to separate the times:
 
-- As an array: `['YYYYMMDDhhmmss', 'YYYYMMDDhhmmss']`
+- Set as an array: `['YYYYMMDDhhmmss', 'YYYYMMDDhhmmss']`
 
   ```javascript
   component.value = ['20240101000000', '20240101235959']
   ```
 
-- As an object:
+- Set as an object:
 
   ```javascript
   component.value = { startTime: '20240101000000', endTime: '20240101235959' }
   ```
 
-- As a string with special characters:
-  - Allowed special characters: `-`, `/`, `%`, `$`, `#`, `_`, `,`
+- Set as a string with special characters:
+  - Available special characters: `-`, `/`, `%`, `$`, `#`, `_`, `,`
   ```javascript
   component.value = '20240101000000-20240101235959'
   component.value = '20240101000000/20240101235959'
@@ -71,4 +71,4 @@ The `value` property can be used to set the `startTime` and `endTime` in differe
   component.value = '20240101000000,20240101235959'
   ```
 
-In all cases, the component will parse the provided `startTime` and `endTime` and update its state accordingly.
+In all cases, the component parses the provided `startTime` and `endTime` and updates its state accordingly.