@operato/scene-manufacturing 7.0.1 → 7.0.4

package/dist/tact-timer.js

@@ -1,18 +1,22 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
 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;
 const NATURE = {
     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',
@@ -68,12 +72,33 @@ const NATURE = {
             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) {
+    constructor() {
+        super(...arguments);
+        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;
     }
@@ -87,11 +112,17 @@ 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) {
-        if ('tactTime' in after) {
+        if ('startTime' in after || 'endTime' in after) {
             this.start();
         }
     }
@@ -100,9 +131,15 @@ export default class TactTimer extends RectPath(Shape) {
             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);
             setTimeout(() => {
                 this.counting();
@@ -110,9 +147,10 @@ export default class TactTimer extends RectPath(Shape) {
         });
     }
     render(context) {
-        var { tactTime, top, left, height, width, round = 0, fontColor, increaseFontColor, decreaseFontColor, increaseProgressColor = 'transparent', decreaseProgressColor = 'transparent', underThresholdColor = 'transparent', progressDirection = 'increase', progressThreshold = 0 } = this.state;
+        var { top, left, height, width, round = 0, fontColor, increaseFontColor, decreaseFontColor, increaseProgressColor = 'transparent', decreaseProgressColor = 'transparent', underThresholdColor = 'transparent', progressDirection = 'increase', 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();
         context.roundRect(left, top, width, height, round);
@@ -120,7 +158,10 @@ export default class TactTimer extends RectPath(Shape) {
         this.drawFill(context);
         // 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;
             progress = Math.max(Math.min(progress, width), 0);
@@ -138,6 +179,7 @@ export default class TactTimer extends RectPath(Shape) {
             context.fill();
             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);
     }
@@ -145,17 +187,56 @@ export default class TactTimer extends RectPath(Shape) {
         this.drawStroke(context);
         this.drawText(context);
     }
-    get tactTime() {
-        return Number(this.getState('tactTime') || 0);
-    }
-    set tactTime(tactTime) {
-        this.setState('tactTime', Number(tactTime) || 0);
+    parseTime(timeString) {
+        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() {
         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.split(/[-+/%$#_,]+/);
+            this.setState({
+                startTime,
+                endTime
+            });
+        }
+        else {
+            this.setState({
+                startTime: undefined,
+                endTime: undefined
+            });
+        }
+    }
 }
 Component.register('tact-timer', TactTimer);
 //# sourceMappingURL=tact-timer.js.map

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":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { Component, ComponentNature, Properties, RectPath, Shape } from '@hatiolab/things-scene'\n\nimport format from './libs/format'\n\nconst NATURE: ComponentNature = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [\n    {\n      type: 'number',\n      label: 'tact-time',\n      name: 'tactTime',\n      placeholder: 'seconds'\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  'value-property': 'tactTime',\n  help: 'scene/component/manufacturing/tact-timer'\n}\n\nexport default class TactTimer extends RectPath(Shape) {\n  private _due?: number\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    this._due = Date.now() + this.tactTime * 1000\n    this.counting()\n  }\n\n  onchange(after: Properties) {\n    if ('tactTime' in after) {\n      this.start()\n    }\n  }\n\n  counting() {\n    if (this.disposed) {\n      return\n    }\n\n    requestAnimationFrame(() => {\n      const countdown = this.countdown\n\n      const text = format(Math.abs(countdown), this.getState('format'))\n      this.text = text\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      tactTime,\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    } = this.state\n\n    const increase = this.countdown > 0\n    const underThreshold = this.countdown / tactTime < 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    var progress = Math.abs((this.countdown / tactTime) * 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    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  get tactTime() {\n    return Number(this.getState('tactTime') || 0)\n  }\n\n  set tactTime(tactTime) {\n    this.setState('tactTime', Number(tactTime) || 0)\n  }\n\n  get countdown() {\n    const due = this._due || 0\n    const now = Date.now()\n\n    return Math.round((due - now) / 1000)\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'\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"]}

package/dist/templates/index.d.ts

@@ -12,6 +12,15 @@ declare const _default: {
         fontSize: number;
         lineWidth: number;
         round: number;
+        showProgress: boolean;
+        showTimer: boolean;
+        progressDirection: string;
+        increaseProgressColor: string;
+        decreaseProgressColor: string;
+        increaseFontColor: string;
+        decreaseFontColor: string;
+        underThresholdColor: string;
+        progressThreshold: number;
     };
 }[];
 export default _default;

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

@@ -12,6 +12,15 @@ declare const _default: {
         fontSize: number;
         lineWidth: number;
         round: number;
+        showProgress: boolean;
+        showTimer: boolean;
+        progressDirection: string;
+        increaseProgressColor: string;
+        decreaseProgressColor: string;
+        increaseFontColor: string;
+        decreaseFontColor: string;
+        underThresholdColor: string;
+        progressThreshold: number;
     };
 };
 export default _default;

package/dist/templates/tact-timer.js

@@ -12,7 +12,16 @@ 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
     }
 };
 //# sourceMappingURL=tact-timer.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"tact-timer.js","sourceRoot":"","sources":["../../src/templates/tact-timer.ts"],"names":[],"mappings":"AAAA,MAAM,IAAI,GAAG,IAAI,GAAG,CAAC,4BAA4B,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAA;AAExE,eAAe;IACb,IAAI,EAAE,YAAY;IAClB,WAAW,EAAE,YAAY;IACzB,KAAK,EAAE,KAAK,CAAC,gGAAgG;IAC7G,IAAI;IACJ,KAAK,EAAE;QACL,IAAI,EAAE,YAAY;QAClB,IAAI,EAAE,GAAG;QACT,GAAG,EAAE,GAAG;QACR,KAAK,EAAE,GAAG;QACV,MAAM,EAAE,EAAE;QACV,QAAQ,EAAE,EAAE;QACZ,SAAS,EAAE,CAAC;QACZ,KAAK,EAAE,EAAE;KACV;CACF,CAAA","sourcesContent":["const icon = new URL('../../icons/tact-timer.png', import.meta.url).href\n\nexport default {\n  type: 'tact-timer',\n  description: 'tact timer',\n  group: 'etc' /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */,\n  icon,\n  model: {\n    type: 'tact-timer',\n    left: 100,\n    top: 100,\n    width: 200,\n    height: 40,\n    fontSize: 80,\n    lineWidth: 1,\n    round: 10\n  }\n}\n"]}
+{"version":3,"file":"tact-timer.js","sourceRoot":"","sources":["../../src/templates/tact-timer.ts"],"names":[],"mappings":"AAAA,MAAM,IAAI,GAAG,IAAI,GAAG,CAAC,4BAA4B,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAA;AAExE,eAAe;IACb,IAAI,EAAE,YAAY;IAClB,WAAW,EAAE,YAAY;IACzB,KAAK,EAAE,KAAK,CAAC,gGAAgG;IAC7G,IAAI;IACJ,KAAK,EAAE;QACL,IAAI,EAAE,YAAY;QAClB,IAAI,EAAE,GAAG;QACT,GAAG,EAAE,GAAG;QACR,KAAK,EAAE,GAAG;QACV,MAAM,EAAE,EAAE;QACV,QAAQ,EAAE,EAAE;QACZ,SAAS,EAAE,CAAC;QACZ,KAAK,EAAE,EAAE;QACT,YAAY,EAAE,IAAI;QAClB,SAAS,EAAE,IAAI;QACf,iBAAiB,EAAE,UAAU;QAC7B,qBAAqB,EAAE,OAAO;QAC9B,qBAAqB,EAAE,KAAK;QAC5B,iBAAiB,EAAE,MAAM;QACzB,iBAAiB,EAAE,QAAQ;QAC3B,mBAAmB,EAAE,QAAQ;QAC7B,iBAAiB,EAAE,EAAE;KACtB;CACF,CAAA","sourcesContent":["const icon = new URL('../../icons/tact-timer.png', import.meta.url).href\n\nexport default {\n  type: 'tact-timer',\n  description: 'tact timer',\n  group: 'etc' /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */,\n  icon,\n  model: {\n    type: 'tact-timer',\n    left: 100,\n    top: 100,\n    width: 200,\n    height: 40,\n    fontSize: 80,\n    lineWidth: 1,\n    round: 10,\n    showProgress: true,\n    showTimer: true,\n    progressDirection: 'decrease',\n    increaseProgressColor: 'green',\n    decreaseProgressColor: 'red',\n    increaseFontColor: 'navy',\n    decreaseFontColor: 'orange',\n    underThresholdColor: 'yellow',\n    progressThreshold: 30\n  }\n}\n"]}

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

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

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

@@ -1,37 +1,74 @@
 # Tact Timer
 
-"Tact Timer"는 생산 라인이나 공정에서 사용되는 시간 관리 도구로, 특정 작업이나 활동에 할당된 시간인 Tact time을 설정하고 관리하는 데 사용됩니다. 이 도구는 실시간으로 Tact time을 계산하고 실제 경과 시간을 모니터링하며, 프로그레스 바와 카운트다운 텍스트를 표시하여 사용자에게 현재 진행 상황을 시각적으로 표현합니다. 이를 통해 생산 과정을 효율적으로 관리하고 생산량을 최적화하는 데 도움을 줍니다.
+"Tact Timer"는 생산 라인이나 공정에서 사용되는 시간 관리 도구로, 특정 작업이나 활동에 할당된 시간을 설정하고 관리하는 데 사용됩니다. 이 도구는 시작 시간과 종료 시간을 기반으로 실시간으로 경과 시간을 계산하고 모니터링하며, 프로그레스 바와 카운트다운 텍스트를 표시하여 사용자에게 현재 진행 상황을 시각적으로 표현합니다. 이를 통해 생산 과정을 효율적으로 관리하고 생산량을 최적화하는 데 도움을 줍니다.
 
 ## properties
 
-- Tact Time(tactTime)
-  - 이 컴포넌트의 value property 이다.
+- 시작 시간(startTime)
+  - 작업의 시작 시간을 설정합니다.
+  - 형식: 'YYYYMMDDhhmmss'
+- 종료 시간(endTime)
+  - 작업의 종료 시간을 설정합니다.
+  - 형식: 'YYYYMMDDhhmmss'
 - 카운트다운 포맷(format)
-  - format : hh:mm:ss
-  - 카운트다운 결과 표현형식
+  - 형식: 'hh:mm:ss'
+  - 카운트다운 결과 표현 형식
 - 진행 방향(progressDirection)
-  - 프로그레스바의 진행 방향 설정
-  - increase인 경우에는 increaseProgressColor로 시작하여, 0를 지난 후부터는 decreaseProgressColor로 변경된다
-  - decrease인 경우에는 decreaseProgressColor로 시작하여, 0를 지난 후부터는 increaseProgressColor로 변경된다
-- 증가 진행색상(increaseProgressColor)
-  - 증가시 진행 색상
-  - tackTime 설정시부터 tactTime의 20% 수준 countdown까지의 진행 색상
-- 감소 진행색상(decreaseProgressColor)
-  - 감소시 진행 색상
-- 증가 폰트 색상(increseFontColor)
-  - 증가시 폰트 색상
-- 감소 폰트 색상(decreseFontColor)
-  - 감소시 폰트 색상
+  - 프로그레스 바의 진행 방향을 설정합니다.
+  - 'increase': 증가하는 방향으로 진행
+  - 'decrease': 감소하는 방향으로 진행
+- 증가 진행 색상(increaseProgressColor)
+  - 증가할 때의 진행 색상
+- 감소 진행 색상(decreaseProgressColor)
+  - 감소할 때의 진행 색상
+- 증가 폰트 색상(increaseFontColor)
+  - 증가할 때의 폰트 색상
+- 감소 폰트 색상(decreaseFontColor)
+  - 감소할 때의 폰트 색상
 - 진행 임계값(progressThreshold)
-  - Tact Time의 경고 임계값(%), 진행상황이 임계값이하인 경우에 임계 이하 색상이 사용됨
-- 임계이하 색상(underThresholdColor)
-  - 임계치 이하 진행 색상
+  - 경고 임계값(%). 진행 상황이 임계값 이하인 경우 임계 이하 색상이 사용됨
+- 임계 이하 색상(underThresholdColor)
+  - 임계값 이하일 때의 진행 색상
 - 자동 시작(autoStart)
-  - 카운트다운을 자동으로 시작한다
+  - 카운트다운을 자동으로 시작합니다.
 - 둥글게(round)
-  - 컴포넌트 사각형영역의 4꼭지점 부분의 둥근 모양의 반지름 크기
+  - 컴포넌트 사각형 영역의 4꼭지점 부분의 둥근 모양의 반지름 크기
+- 진행 색상 보이기(showProgress)
+  - 진행 정도를 배경 색상으로 표현합니다.
+- 타이머 보이기(showTimer)
+  - 남은 시간 또는 경과한 시간을 텍스트로 표시합니다.
 
 ## data
 
-- tackTime 설정값 세팅 시점부터 카운트다운된 현재 값이 매초 설정된다.(단위 seconds)
-- tactTime 설정값에서 시작해서 0를 지나서 -tactTime 까지 카운트다운된다.
+- 설정된 시작 시간과 종료 시간에 따라 현재 남은 시간이 매초 업데이트됩니다.
+- 타이머는 설정된 종료 시간을 기준으로 0까지 카운트다운됩니다.
+
+## value
+
+`value` 속성은 `startTime`과 `endTime`을 다양한 형식으로 설정하는 데 사용할 수 있으며, 여러 특수문자를 사용하여 시간을 구분할 수 있습니다:
+
+- 배열로 설정: `['YYYYMMDDhhmmss', 'YYYYMMDDhhmmss']`
+
+  ```javascript
+  component.value = ['20240101000000', '20240101235959']
+  ```
+
+- 객체로 설정:
+
+  ```javascript
+  component.value = { startTime: '20240101000000', endTime: '20240101235959' }
+  ```
+
+- 특수문자를 포함한 문자열로 설정:
+  - 사용 가능한 특수문자: `-`, `/`, `%`, `$`, `#`, `_`, `,`
+  ```javascript
+  component.value = '20240101000000-20240101235959'
+  component.value = '20240101000000/20240101235959'
+  component.value = '20240101000000%20240101235959'
+  component.value = '20240101000000$20240101235959'
+  component.value = '20240101000000#20240101235959'
+  component.value = '20240101000000_20240101235959'
+  component.value = '20240101000000,20240101235959'
+  ```
+
+모든 경우에, 컴포넌트는 제공된 `startTime`과 `endTime`을 파싱하고 이에 따라 상태를 업데이트합니다.

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

@@ -1,37 +1,74 @@
-# Tact Timer
+### Tact Timer
 
-"Tact Timer" is a time management tool used in production lines or processes. It is utilized for setting and managing Tact time, which is the allocated time for a specific task or activity. This tool calculates Tact 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. 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.
 
-## properties
+#### properties
 
-- Tact Time (tactTime)
-  - This is the value property of the component.
+- Start Time (startTime)
+  - Sets the start time of the task.
+  - Format: 'YYYYMMDDhhmmss'
+- End Time (endTime)
+  - Sets the end time of the task.
+  - Format: 'YYYYMMDDhhmmss'
 - Countdown Format (format)
-  - format: hh:mm:ss
+  - 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
+  - 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
-  - Progress color from the setting of tactTime up to 20% level countdown of tactTime
 - Decrease Progress Color (decreaseProgressColor)
   - Color for progress during decrease
-- Increase Font Color (increseFontColor)
+- Increase Font Color (increaseFontColor)
   - Font color during increase
-- Decrease Font Color (decreseFontColor)
+- Decrease Font Color (decreaseFontColor)
   - Font color during decrease
 - Progress Threshold (progressThreshold)
-  - Warning threshold (%) of Tact Time; threshold color is used when progress is below this level
+  - 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)
   - 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
 
-## data
+#### data
 
-- The current value, counted down from the setting of tactTime, is set every second (unit: seconds).
-- The countdown starts from the tactTime setting value, goes past 0, and counts down to -tactTime.
+- The current value, counted down from the start time to the end time, is updated every second (unit: seconds).
+- The timer counts down to 0 based on the set end time.
+
+#### 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:
+
+- As an array: `['YYYYMMDDhhmmss', 'YYYYMMDDhhmmss']`
+
+  ```javascript
+  component.value = ['20240101000000', '20240101235959']
+  ```
+
+- As an object:
+
+  ```javascript
+  component.value = { startTime: '20240101000000', endTime: '20240101235959' }
+  ```
+
+- As a string with special characters:
+  - Allowed special characters: `-`, `/`, `%`, `$`, `#`, `_`, `,`
+  ```javascript
+  component.value = '20240101000000-20240101235959'
+  component.value = '20240101000000/20240101235959'
+  component.value = '20240101000000%20240101235959'
+  component.value = '20240101000000$20240101235959'
+  component.value = '20240101000000#20240101235959'
+  component.value = '20240101000000_20240101235959'
+  component.value = '20240101000000,20240101235959'
+  ```
+
+In all cases, the component will parse the provided `startTime` and `endTime` and update its state accordingly.