@operato/scene-timer 1.2.49 → 1.2.53

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.2.53](https://github.com/things-scene/operato-scene/compare/v1.2.52...v1.2.53) (2023-08-17)
+
+
+### :bug: Bug Fix
+
+* add data-reflection property to timer family ([93a9046](https://github.com/things-scene/operato-scene/commit/93a904621788b5e45987939e4f28252a93c2c4f8))
+
+
+
 ## [1.2.49](https://github.com/things-scene/operato-scene/compare/v1.2.48...v1.2.49) (2023-06-26)
 
 

package/dist/duetimer.d.ts

@@ -1,6 +1,7 @@
 import { ComponentNature, Properties, Shape } from '@hatiolab/things-scene';
 declare const DueTimer_base: typeof Shape;
 export default class DueTimer extends DueTimer_base {
+    private _round;
     get nature(): ComponentNature;
     ready(): void;
     onchange(after: Properties): void;
@@ -12,5 +13,6 @@ export default class DueTimer extends DueTimer_base {
     get due(): number;
     set due(due: number);
     get countdown(): number;
+    get round(): number;
 }
 export {};

package/dist/duetimer.js

@@ -26,17 +26,29 @@ const NATURE = {
             name: 'format-stop',
             placeholder: '--:--:--'
         },
+        {
+            type: 'select',
+            label: 'data-reflection',
+            name: 'dataReflection',
+            property: {
+                options: ['', 'countdown', 'round']
+            }
+        },
         {
             type: 'color',
-            label: 'background-color',
-            name: 'backgroundColor',
-            property: 'backgroundColor'
+            label: 'progress-color',
+            name: 'progressColor',
+            property: 'progressColor'
         }
     ],
     'value-property': 'due',
     help: 'scene/component/duetimer'
 };
 export default class DueTimer extends RectPath(Shape) {
+    constructor() {
+        super(...arguments);
+        this._round = 0;
+    }
     get nature() {
         return NATURE;
     }
@@ -48,32 +60,42 @@ export default class DueTimer extends RectPath(Shape) {
         this.timeout = Math.max(Math.round((due - Date.now()) / 1000), 0);
     }
     onchange(after) {
-        if ('due' in after) {
+        if ('timeout' in after) {
             this.timeout = Math.max(Math.round((this.due - Date.now()) / 1000), 0);
             this.counting();
         }
     }
     counting() {
+        // @ts-ignore
+        if (this.disposed) {
+            return;
+        }
         requestAnimationFrame(() => {
             const countdown = this.countdown;
+            const { dataReflection = 'countdown' } = this.state;
             if (countdown > 0) {
-                this.setState('data', format(countdown, this.getState('format-run')));
+                const text = format(countdown, this.getState('format-run'));
+                this.text = text;
+                if (dataReflection != 'round') {
+                    this.setState('data', text);
+                }
                 setTimeout(() => {
                     this.counting();
                 }, 1000);
             }
             else {
-                this.setState('data', this.getState('format-stop'));
+                const text = format(countdown, this.getState('format-stop'));
+                this.text = text;
+                this.setState('data', dataReflection != 'round' ? text : ++this._round);
             }
         });
     }
     render(context) {
-        var { top, left, height, width, backgroundColor = 'transparent' } = this.state;
-        // background의 색상
+        var { top, left, height, width, progressColor = 'transparent' } = this.state;
+        // progress의 색상
         context.beginPath();
         context.rect(left, top, width, height);
-        context.fillStyle = backgroundColor;
-        context.fill();
+        this.drawFill(context);
         // value의 색상
         context.beginPath();
         var progress = (this.countdown / this.timeout) * 100;
@@ -81,7 +103,8 @@ export default class DueTimer extends RectPath(Shape) {
             progress = width - (width * progress) / 100;
             progress = Math.max(Math.min(progress, width), 0);
             context.rect(left, top, progress, height);
-            this.drawFill(context);
+            context.fillStyle = progressColor;
+            context.fill();
             context.beginPath();
         }
         // stroke
@@ -108,6 +131,9 @@ export default class DueTimer extends RectPath(Shape) {
         const now = Date.now();
         return Math.max(Math.round((due - now) / 1000), 0);
     }
+    get round() {
+        return this._round;
+    }
 }
 Component.register('duetimer', DueTimer);
 //# sourceMappingURL=duetimer.js.map

package/dist/duetimer.js.map

@@ -1 +1 @@
-{"version":3,"file":"duetimer.js","sourceRoot":"","sources":["../src/duetimer.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentNature, Properties, RectPath, Shape } from '@hatiolab/things-scene'\n\n/*\n * Copyright © HatioLab Inc. All rights reserved.\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: 'due',\n      name: 'due',\n      placeholder: 'timestamp'\n    },\n    {\n      type: 'string',\n      label: 'format-run',\n      name: 'format-run',\n      placeholder: 'hh:mm:ss'\n    },\n    {\n      type: 'string',\n      label: 'format-stop',\n      name: 'format-stop',\n      placeholder: '--:--:--'\n    },\n    {\n      type: 'color',\n      label: 'background-color',\n      name: 'backgroundColor',\n      property: 'backgroundColor'\n    }\n  ],\n  'value-property': 'due',\n  help: 'scene/component/duetimer'\n}\n\nexport default class DueTimer extends RectPath(Shape) {\n  get nature() {\n    return NATURE\n  }\n\n  ready() {\n    if (!this.app.isViewMode) {\n      return\n    }\n\n    var { due = 0 } = this.state\n\n    this.timeout = Math.max(Math.round((due - Date.now()) / 1000), 0)\n  }\n\n  onchange(after: Properties) {\n    if ('due' in after) {\n      this.timeout = Math.max(Math.round((this.due - Date.now()) / 1000), 0)\n      this.counting()\n    }\n  }\n\n  counting() {\n    requestAnimationFrame(() => {\n      const countdown = this.countdown\n\n      if (countdown > 0) {\n        this.setState('data', format(countdown, this.getState('format-run')))\n\n        setTimeout(() => {\n          this.counting()\n        }, 1000)\n      } else {\n        this.setState('data', this.getState('format-stop'))\n      }\n    })\n  }\n\n  render(context: CanvasRenderingContext2D) {\n    var { top, left, height, width, backgroundColor = 'transparent' } = this.state\n\n    // background의 색상\n    context.beginPath()\n    context.rect(left, top, width, height)\n\n    context.fillStyle = backgroundColor\n    context.fill()\n\n    // value의 색상\n    context.beginPath()\n\n    var progress = (this.countdown / this.timeout) * 100\n\n    if (!isNaN(progress)) {\n      progress = width - (width * progress) / 100\n      progress = Math.max(Math.min(progress, width), 0)\n\n      context.rect(left, top, progress, height)\n      this.drawFill(context)\n\n      context.beginPath()\n    }\n\n    // stroke\n    context.rect(left, top, width, height)\n  }\n\n  postrender(context: CanvasRenderingContext2D) {\n    this.drawStroke(context)\n    this.drawText(context)\n  }\n\n  get timeout() {\n    return Number(this.getState('timeout') || 0)\n  }\n\n  set timeout(timeout) {\n    this.setState('timeout', Number(timeout) || 0)\n  }\n\n  get due() {\n    return Number(this.getState('due') || 0)\n  }\n\n  set due(due) {\n    this.setState('due', due)\n  }\n\n  get countdown() {\n    const due = this.due\n    const now = Date.now()\n\n    return Math.max(Math.round((due - now) / 1000), 0)\n  }\n}\n\nComponent.register('duetimer', DueTimer)\n"]}
+{"version":3,"file":"duetimer.js","sourceRoot":"","sources":["../src/duetimer.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentNature, Properties, RectPath, Shape } from '@hatiolab/things-scene'\n\n/*\n * Copyright © HatioLab Inc. All rights reserved.\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: 'due',\n      name: 'due',\n      placeholder: 'timestamp'\n    },\n    {\n      type: 'string',\n      label: 'format-run',\n      name: 'format-run',\n      placeholder: 'hh:mm:ss'\n    },\n    {\n      type: 'string',\n      label: 'format-stop',\n      name: 'format-stop',\n      placeholder: '--:--:--'\n    },\n    {\n      type: 'select',\n      label: 'data-reflection',\n      name: 'dataReflection',\n      property: {\n        options: ['', 'countdown', 'round']\n      }\n    },\n    {\n      type: 'color',\n      label: 'progress-color',\n      name: 'progressColor',\n      property: 'progressColor'\n    }\n  ],\n  'value-property': 'due',\n  help: 'scene/component/duetimer'\n}\n\nexport default class DueTimer extends RectPath(Shape) {\n  private _round: number = 0\n\n  get nature() {\n    return NATURE\n  }\n\n  ready() {\n    if (!this.app.isViewMode) {\n      return\n    }\n\n    var { due = 0 } = this.state\n\n    this.timeout = Math.max(Math.round((due - Date.now()) / 1000), 0)\n  }\n\n  onchange(after: Properties) {\n    if ('timeout' in after) {\n      this.timeout = Math.max(Math.round((this.due - Date.now()) / 1000), 0)\n      this.counting()\n    }\n  }\n\n  counting() {\n    // @ts-ignore\n    if (this.disposed) {\n      return\n    }\n\n    requestAnimationFrame(() => {\n      const countdown = this.countdown\n      const { dataReflection = 'countdown' } = this.state\n\n      if (countdown > 0) {\n        const text = format(countdown, this.getState('format-run'))\n\n        this.text = text\n\n        if (dataReflection != 'round') {\n          this.setState('data', text)\n        }\n\n        setTimeout(() => {\n          this.counting()\n        }, 1000)\n      } else {\n        const text = format(countdown, this.getState('format-stop'))\n\n        this.text = text\n\n        this.setState('data', dataReflection != 'round' ? text : ++this._round)\n      }\n    })\n  }\n\n  render(context: CanvasRenderingContext2D) {\n    var { top, left, height, width, progressColor = 'transparent' } = this.state\n\n    // progress의 색상\n    context.beginPath()\n    context.rect(left, top, width, height)\n\n    this.drawFill(context)\n\n    // value의 색상\n    context.beginPath()\n\n    var progress = (this.countdown / this.timeout) * 100\n\n    if (!isNaN(progress)) {\n      progress = width - (width * progress) / 100\n      progress = Math.max(Math.min(progress, width), 0)\n\n      context.rect(left, top, progress, height)\n      context.fillStyle = progressColor\n      context.fill()\n\n      context.beginPath()\n    }\n\n    // stroke\n    context.rect(left, top, width, height)\n  }\n\n  postrender(context: CanvasRenderingContext2D) {\n    this.drawStroke(context)\n    this.drawText(context)\n  }\n\n  get timeout() {\n    return Number(this.getState('timeout') || 0)\n  }\n\n  set timeout(timeout) {\n    this.setState('timeout', Number(timeout) || 0)\n  }\n\n  get due() {\n    return Number(this.getState('due') || 0)\n  }\n\n  set due(due) {\n    this.setState('due', due)\n  }\n\n  get countdown() {\n    const due = this.due\n    const now = Date.now()\n\n    return Math.max(Math.round((due - now) / 1000), 0)\n  }\n\n  get round() {\n    return this._round\n  }\n}\n\nComponent.register('duetimer', DueTimer)\n"]}

package/dist/index.d.ts

@@ -1,4 +1,4 @@
 import Timer from './timer';
 import DueTimer from './duetimer';
-declare const _default: (typeof DueTimer | typeof Timer)[];
+declare const _default: (typeof Timer | typeof DueTimer)[];
 export default _default;

package/dist/templates/duetimer.d.ts

@@ -10,7 +10,6 @@ declare const _default: {
         width: number;
         height: number;
         strokeStyle: string;
-        text: string;
         days: number;
         hours: number;
         minutes: number;

package/dist/templates/duetimer.js

@@ -12,7 +12,6 @@ export default {
         width: 100,
         height: 100,
         strokeStyle: 'darkgray',
-        text: '#{data}',
         days: 0,
         hours: 0,
         minutes: 0,

package/dist/templates/duetimer.js.map

@@ -1 +1 @@
-{"version":3,"file":"duetimer.js","sourceRoot":"","sources":["../../src/templates/duetimer.ts"],"names":[],"mappings":"AAAA,MAAM,IAAI,GAAG,IAAI,GAAG,CAAC,uBAAuB,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAA;AAEnE,eAAe;IACb,IAAI,EAAE,OAAO;IACb,WAAW,EAAE,OAAO;IACpB,KAAK,EAAE,KAAK;IACZ,gGAAgG;IAChG,IAAI;IACJ,KAAK,EAAE;QACL,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,EAAE;QACR,GAAG,EAAE,EAAE;QACP,KAAK,EAAE,GAAG;QACV,MAAM,EAAE,GAAG;QACX,WAAW,EAAE,UAAU;QACvB,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,CAAC;QACP,KAAK,EAAE,CAAC;QACR,OAAO,EAAE,CAAC;QACV,OAAO,EAAE,CAAC;QACV,YAAY,EAAE,OAAO;QACrB,aAAa,EAAE,OAAO;KACvB;CACF,CAAA","sourcesContent":["const icon = new URL('../../icons/timer.png', import.meta.url).href\n\nexport default {\n  type: 'timer',\n  description: 'timer',\n  group: 'etc',\n  /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */\n  icon,\n  model: {\n    type: 'timer',\n    left: 10,\n    top: 10,\n    width: 100,\n    height: 100,\n    strokeStyle: 'darkgray',\n    text: '#{data}',\n    days: 0,\n    hours: 0,\n    minutes: 0,\n    seconds: 0,\n    'format-run': 'mm:ss',\n    'format-stop': '--:--'\n  }\n}\n"]}
+{"version":3,"file":"duetimer.js","sourceRoot":"","sources":["../../src/templates/duetimer.ts"],"names":[],"mappings":"AAAA,MAAM,IAAI,GAAG,IAAI,GAAG,CAAC,uBAAuB,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAA;AAEnE,eAAe;IACb,IAAI,EAAE,OAAO;IACb,WAAW,EAAE,OAAO;IACpB,KAAK,EAAE,KAAK;IACZ,gGAAgG;IAChG,IAAI;IACJ,KAAK,EAAE;QACL,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,EAAE;QACR,GAAG,EAAE,EAAE;QACP,KAAK,EAAE,GAAG;QACV,MAAM,EAAE,GAAG;QACX,WAAW,EAAE,UAAU;QACvB,IAAI,EAAE,CAAC;QACP,KAAK,EAAE,CAAC;QACR,OAAO,EAAE,CAAC;QACV,OAAO,EAAE,CAAC;QACV,YAAY,EAAE,OAAO;QACrB,aAAa,EAAE,OAAO;KACvB;CACF,CAAA","sourcesContent":["const icon = new URL('../../icons/timer.png', import.meta.url).href\n\nexport default {\n  type: 'timer',\n  description: 'timer',\n  group: 'etc',\n  /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */\n  icon,\n  model: {\n    type: 'timer',\n    left: 10,\n    top: 10,\n    width: 100,\n    height: 100,\n    strokeStyle: 'darkgray',\n    days: 0,\n    hours: 0,\n    minutes: 0,\n    seconds: 0,\n    'format-run': 'mm:ss',\n    'format-stop': '--:--'\n  }\n}\n"]}

package/dist/templates/index.d.ts

@@ -10,7 +10,6 @@ declare const _default: {
         width: number;
         height: number;
         strokeStyle: string;
-        text: string;
         'format-run': string;
         'format-stop': string;
     };

package/dist/templates/timer.d.ts

@@ -10,7 +10,6 @@ declare const _default: {
         width: number;
         height: number;
         strokeStyle: string;
-        text: string;
         'format-run': string;
         'format-stop': string;
     };

package/dist/templates/timer.js

@@ -12,7 +12,6 @@ export default {
         width: 100,
         height: 100,
         strokeStyle: 'darkgray',
-        text: '#{data}',
         'format-run': 'mm:ss',
         'format-stop': '--:--'
     }

package/dist/templates/timer.js.map

@@ -1 +1 @@
-{"version":3,"file":"timer.js","sourceRoot":"","sources":["../../src/templates/timer.ts"],"names":[],"mappings":"AAAA,MAAM,IAAI,GAAG,IAAI,GAAG,CAAC,0BAA0B,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAA;AAEtE,eAAe;IACb,IAAI,EAAE,UAAU;IAChB,WAAW,EAAE,UAAU;IACvB,KAAK,EAAE,KAAK;IACZ,gGAAgG;IAChG,IAAI;IACJ,KAAK,EAAE;QACL,IAAI,EAAE,UAAU;QAChB,IAAI,EAAE,EAAE;QACR,GAAG,EAAE,EAAE;QACP,KAAK,EAAE,GAAG;QACV,MAAM,EAAE,GAAG;QACX,WAAW,EAAE,UAAU;QACvB,IAAI,EAAE,SAAS;QACf,YAAY,EAAE,OAAO;QACrB,aAAa,EAAE,OAAO;KACvB;CACF,CAAA","sourcesContent":["const icon = new URL('../../icons/duetimer.png', import.meta.url).href\n\nexport default {\n  type: 'duetimer',\n  description: 'duetimer',\n  group: 'etc',\n  /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */\n  icon,\n  model: {\n    type: 'duetimer',\n    left: 10,\n    top: 10,\n    width: 100,\n    height: 100,\n    strokeStyle: 'darkgray',\n    text: '#{data}',\n    'format-run': 'mm:ss',\n    'format-stop': '--:--'\n  }\n}\n"]}
+{"version":3,"file":"timer.js","sourceRoot":"","sources":["../../src/templates/timer.ts"],"names":[],"mappings":"AAAA,MAAM,IAAI,GAAG,IAAI,GAAG,CAAC,0BAA0B,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAA;AAEtE,eAAe;IACb,IAAI,EAAE,UAAU;IAChB,WAAW,EAAE,UAAU;IACvB,KAAK,EAAE,KAAK;IACZ,gGAAgG;IAChG,IAAI;IACJ,KAAK,EAAE;QACL,IAAI,EAAE,UAAU;QAChB,IAAI,EAAE,EAAE;QACR,GAAG,EAAE,EAAE;QACP,KAAK,EAAE,GAAG;QACV,MAAM,EAAE,GAAG;QACX,WAAW,EAAE,UAAU;QACvB,YAAY,EAAE,OAAO;QACrB,aAAa,EAAE,OAAO;KACvB;CACF,CAAA","sourcesContent":["const icon = new URL('../../icons/duetimer.png', import.meta.url).href\n\nexport default {\n  type: 'duetimer',\n  description: 'duetimer',\n  group: 'etc',\n  /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */\n  icon,\n  model: {\n    type: 'duetimer',\n    left: 10,\n    top: 10,\n    width: 100,\n    height: 100,\n    strokeStyle: 'darkgray',\n    'format-run': 'mm:ss',\n    'format-stop': '--:--'\n  }\n}\n"]}

package/dist/timer.d.ts

@@ -2,6 +2,7 @@ import { ComponentNature, Properties, Shape } from '@hatiolab/things-scene';
 declare const Timer_base: typeof Shape;
 export default class Timer extends Timer_base {
     private _due?;
+    private _round;
     get nature(): ComponentNature;
     ready(): void;
     onchange(after: Properties): void;
@@ -11,5 +12,6 @@ export default class Timer extends Timer_base {
     get timeout(): number;
     set timeout(timeout: number);
     get countdown(): number;
+    get round(): number;
 }
 export {};

package/dist/timer.js

@@ -46,15 +46,32 @@ const NATURE = {
         },
         {
             type: 'color',
-            label: 'background-color',
-            name: 'backgroundColor',
-            property: 'backgroundColor'
+            label: 'progress-color',
+            name: 'progressColor',
+            property: 'progressColor'
+        },
+        {
+            type: 'select',
+            label: 'data-reflection',
+            name: 'dataReflection',
+            property: {
+                options: ['countdown', 'round']
+            }
+        },
+        {
+            type: 'boolean',
+            label: 'repeat',
+            name: 'repeat'
         }
     ],
     'value-property': 'timeout',
     help: 'scene/component/timer'
 };
 export default class Timer extends RectPath(Shape) {
+    constructor() {
+        super(...arguments);
+        this._round = 0;
+    }
     get nature() {
         return NATURE;
     }
@@ -72,26 +89,40 @@ export default class Timer extends RectPath(Shape) {
         }
     }
     counting() {
+        // @ts-ignore
+        if (this.disposed) {
+            return;
+        }
+        const { dataReflection = 'countdown' } = this.state;
         requestAnimationFrame(() => {
             const countdown = this.countdown;
             if (countdown > 0) {
-                this.setState('data', format(countdown, this.getState('format-run')));
+                const text = format(countdown, this.getState('format-run'));
+                this.text = text;
+                if (dataReflection != 'round') {
+                    this.setState('data', text);
+                }
                 setTimeout(() => {
                     this.counting();
                 }, 1000);
             }
             else {
-                this.setState('data', this.getState('format-stop'));
+                const text = format(countdown, this.getState('format-stop'));
+                this.text = text;
+                this.setState('data', dataReflection != 'round' ? text : ++this._round);
+                if (this.state.repeat) {
+                    this._due = Date.now() + this.timeout * 1000;
+                    this.counting();
+                }
             }
         });
     }
     render(context) {
-        var { top, left, height, width, backgroundColor = 'transparent' } = this.state;
-        // background의 색상
+        var { top, left, height, width, progressColor = 'transparent' } = this.state;
+        // progress의 색상
         context.beginPath();
         context.rect(left, top, width, height);
-        context.fillStyle = backgroundColor;
-        context.fill();
+        this.drawFill(context);
         // value의 색상
         context.beginPath();
         var progress = (this.countdown / this.timeout) * 100;
@@ -99,7 +130,8 @@ export default class Timer extends RectPath(Shape) {
             progress = width - (width * progress) / 100;
             progress = Math.max(Math.min(progress, width), 0);
             context.rect(left, top, progress, height);
-            this.drawFill(context);
+            context.fillStyle = progressColor;
+            context.fill();
             context.beginPath();
         }
         // stroke
@@ -124,6 +156,9 @@ export default class Timer extends RectPath(Shape) {
         const now = Date.now();
         return Math.max(Math.round((due - now) / 1000), 0);
     }
+    get round() {
+        return this._round;
+    }
 }
 Component.register('timer', Timer);
 //# sourceMappingURL=timer.js.map

package/dist/timer.js.map

@@ -1 +1 @@
-{"version":3,"file":"timer.js","sourceRoot":"","sources":["../src/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: 'days',\n      name: 'days',\n      placeholder: 'days'\n    },\n    {\n      type: 'number',\n      label: 'hours',\n      name: 'hours',\n      placeholder: 'hours'\n    },\n    {\n      type: 'number',\n      label: 'minutes',\n      name: 'minutes',\n      placeholder: 'minutes'\n    },\n    {\n      type: 'number',\n      label: 'seconds',\n      name: 'seconds',\n      placeholder: 'seconds'\n    },\n    {\n      type: 'string',\n      label: 'format-run',\n      name: 'format-run',\n      placeholder: 'hh:mm:ss'\n    },\n    {\n      type: 'string',\n      label: 'format-stop',\n      name: 'format-stop',\n      placeholder: '--:--:--'\n    },\n    {\n      type: 'color',\n      label: 'background-color',\n      name: 'backgroundColor',\n      property: 'backgroundColor'\n    }\n  ],\n  'value-property': 'timeout',\n  help: 'scene/component/timer'\n}\n\nexport default class Timer 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    var { days = 0, hours = 0, minutes = 0, seconds = 0 } = this.state\n\n    this.timeout = days * 86400 + hours * 3600 + minutes * 60 + seconds\n  }\n\n  onchange(after: Properties) {\n    if ('timeout' in after) {\n      this._due = Date.now() + this.timeout * 1000\n      this.counting()\n    }\n  }\n\n  counting() {\n    requestAnimationFrame(() => {\n      const countdown = this.countdown\n\n      if (countdown > 0) {\n        this.setState('data', format(countdown, this.getState('format-run')))\n\n        setTimeout(() => {\n          this.counting()\n        }, 1000)\n      } else {\n        this.setState('data', this.getState('format-stop'))\n      }\n    })\n  }\n\n  render(context: CanvasRenderingContext2D) {\n    var { top, left, height, width, backgroundColor = 'transparent' } = this.state\n\n    // background의 색상\n    context.beginPath()\n    context.rect(left, top, width, height)\n\n    context.fillStyle = backgroundColor\n    context.fill()\n\n    // value의 색상\n    context.beginPath()\n\n    var progress = (this.countdown / this.timeout) * 100\n\n    if (!isNaN(progress)) {\n      progress = width - (width * progress) / 100\n      progress = Math.max(Math.min(progress, width), 0)\n\n      context.rect(left, top, progress, height)\n      this.drawFill(context)\n\n      context.beginPath()\n    }\n\n    // stroke\n    context.rect(left, top, width, height)\n  }\n\n  postrender(context: CanvasRenderingContext2D) {\n    this.drawStroke(context)\n    this.drawText(context)\n  }\n\n  get timeout() {\n    return Number(this.getState('timeout') || 0)\n  }\n\n  set timeout(timeout) {\n    this.setState('timeout', Number(timeout) || 0)\n  }\n\n  get countdown() {\n    const timeout = this.timeout\n    if (!timeout || timeout < 0) {\n      return 0\n    }\n\n    const due = this._due || 0\n    const now = Date.now()\n\n    return Math.max(Math.round((due - now) / 1000), 0)\n  }\n}\n\nComponent.register('timer', Timer)\n"]}
+{"version":3,"file":"timer.js","sourceRoot":"","sources":["../src/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: 'days',\n      name: 'days',\n      placeholder: 'days'\n    },\n    {\n      type: 'number',\n      label: 'hours',\n      name: 'hours',\n      placeholder: 'hours'\n    },\n    {\n      type: 'number',\n      label: 'minutes',\n      name: 'minutes',\n      placeholder: 'minutes'\n    },\n    {\n      type: 'number',\n      label: 'seconds',\n      name: 'seconds',\n      placeholder: 'seconds'\n    },\n    {\n      type: 'string',\n      label: 'format-run',\n      name: 'format-run',\n      placeholder: 'hh:mm:ss'\n    },\n    {\n      type: 'string',\n      label: 'format-stop',\n      name: 'format-stop',\n      placeholder: '--:--:--'\n    },\n    {\n      type: 'color',\n      label: 'progress-color',\n      name: 'progressColor',\n      property: 'progressColor'\n    },\n    {\n      type: 'select',\n      label: 'data-reflection',\n      name: 'dataReflection',\n      property: {\n        options: ['countdown', 'round']\n      }\n    },\n    {\n      type: 'boolean',\n      label: 'repeat',\n      name: 'repeat'\n    }\n  ],\n  'value-property': 'timeout',\n  help: 'scene/component/timer'\n}\n\nexport default class Timer extends RectPath(Shape) {\n  private _due?: number\n  private _round: number = 0\n\n  get nature() {\n    return NATURE\n  }\n\n  ready() {\n    if (!this.app.isViewMode) {\n      return\n    }\n\n    var { days = 0, hours = 0, minutes = 0, seconds = 0 } = this.state\n\n    this.timeout = days * 86400 + hours * 3600 + minutes * 60 + seconds\n  }\n\n  onchange(after: Properties) {\n    if ('timeout' in after) {\n      this._due = Date.now() + this.timeout * 1000\n      this.counting()\n    }\n  }\n\n  counting() {\n    // @ts-ignore\n    if (this.disposed) {\n      return\n    }\n\n    const { dataReflection = 'countdown' } = this.state\n\n    requestAnimationFrame(() => {\n      const countdown = this.countdown\n\n      if (countdown > 0) {\n        const text = format(countdown, this.getState('format-run'))\n        this.text = text\n\n        if (dataReflection != 'round') {\n          this.setState('data', text)\n        }\n\n        setTimeout(() => {\n          this.counting()\n        }, 1000)\n      } else {\n        const text = format(countdown, this.getState('format-stop'))\n        this.text = text\n\n        this.setState('data', dataReflection != 'round' ? text : ++this._round)\n\n        if (this.state.repeat) {\n          this._due = Date.now() + this.timeout * 1000\n          this.counting()\n        }\n      }\n    })\n  }\n\n  render(context: CanvasRenderingContext2D) {\n    var { top, left, height, width, progressColor = 'transparent' } = this.state\n\n    // progress의 색상\n    context.beginPath()\n    context.rect(left, top, width, height)\n    this.drawFill(context)\n\n    // value의 색상\n    context.beginPath()\n\n    var progress = (this.countdown / this.timeout) * 100\n\n    if (!isNaN(progress)) {\n      progress = width - (width * progress) / 100\n      progress = Math.max(Math.min(progress, width), 0)\n\n      context.rect(left, top, progress, height)\n      context.fillStyle = progressColor\n      context.fill()\n\n      context.beginPath()\n    }\n\n    // stroke\n    context.rect(left, top, width, height)\n  }\n\n  postrender(context: CanvasRenderingContext2D) {\n    this.drawStroke(context)\n    this.drawText(context)\n  }\n\n  get timeout() {\n    return Number(this.getState('timeout') || 0)\n  }\n\n  set timeout(timeout) {\n    this.setState('timeout', Number(timeout) || 0)\n  }\n\n  get countdown() {\n    const timeout = this.timeout\n    if (!timeout || timeout < 0) {\n      return 0\n    }\n\n    const due = this._due || 0\n    const now = Date.now()\n\n    return Math.max(Math.round((due - now) / 1000), 0)\n  }\n\n  get round() {\n    return this._round\n  }\n}\n\nComponent.register('timer', Timer)\n"]}

package/helps/scene/component/duetimer.ko.md

@@ -7,7 +7,7 @@
 카운트다운 과정의 format-run, format-stop 에 의한 결과값이 data 속성에 설정된다.
 
 또한, 듀타이머 컴포넌트는 심플한 수평형 프로그레스바의 표현기능을 제공한다.
-fill-color에 설정된 색상이 카운트다운에 따라 표현된다.
+progress-color에 설정된 색상이 카운트다운에 따라 표현된다.
 
 ![fill-color]
 
@@ -15,22 +15,27 @@ fill-color에 설정된 색상이 카운트다운에 따라 표현된다.
 
 ## properties
 
-- due
+- 종료시간(due)
   - timestamp (UTC 기준으로 1970년 1월 1일 0시 0분 0초부터 현재까지 경과된 밀리 초) : 듀 타이머 컴포넌트의 종료시간 타임스탬프 값이다.
   - 듀 타이머 컴포넌트의 value property 이므로, 듀 타이머의 value 속성(due)에 세팅값을 설정할 수 있다.
   - getter: 타이머 종료시간을 가지고 있다.
   - setter: 타이머 종료시간을 설정할 수 있다.
-- format-run
+- 카운트다운 포맷(format-run)
   - string
   - format : hh:mm:ss
   - 카운트다운 결과 표현형식
-- format-stop
+- 멈춤 포맷(format-stop)
   - string
   - format : --:--:--
   - 카운트다운이 종료되었을 때 표현형식
-- background color
+- 진도 색상(progress color)
   - string, rgb color
-  - 컴포넌트의 배경 색상
+  - 카운트다운 진도 색상
+- 데이타 반영(data reflection)
+  - countdown : 매초 카운트다운할 때마다 남은 시간을 '카운트다운 포맷' 또는 '멈춤 포맷' 에 설정된 포맷으로 data에 반영된다.
+  - round : 매회차 카운트다운이 끝나면 해당 회차수가 data에 반영된다.(이 경우에 countdown 중에선 데이타값이 변하지 않는다.)
+- 반복(repeat)
+  - 이 설정이 체크되고, 매번 카운트다운이 끝나면, 자동으로 다시 시작한다.
 
 ## hidden properties
 
@@ -39,3 +44,8 @@ fill-color에 설정된 색상이 카운트다운에 따라 표현된다.
   - readonly
   - number (seconds)
   - 타이머 설정값 세팅 시점부터 카운트다운된 현재 값을 가지고 있다.
+
+- round
+  - readonly
+  - number
+  - 카운트다운의 회차수

package/helps/scene/component/duetimer.md

@@ -5,7 +5,7 @@ this component that counts down the set timeout value every second.
 - To set statically, you can set during modeling, options in days, hours, minutes, and seconds.
 - To set it dynamically, set the timeout(seconds) value in the value property during execution.
 - The result value by format-run and format-stop of the countdown process is set in the data property.
-- In addition, the timer component provides a simple horizontal progress bar expression function, you can set fill style on color setting.
+- In addition, the timer component provides a simple horizontal progress bar expression function, you can set progress-color on color setting.
 
   ![fill-color]
 
@@ -28,13 +28,25 @@ this component that counts down the set timeout value every second.
   - string
   - format : --:--:--
   - count down format on stop
-- background color
-  - string, rgb color
-  - component background color
+- progress color
+
+  - Type: string, RGB color
+  - Description: Color of the progress in countdown.
+
+- data reflection
+
+  - Countdown: Every second during the countdown, the remaining time is reflected in the data according to the format set in 'Countdown Format' or 'Stop Format'.
+  - Round: After each countdown round is completed, the round number is reflected in the data. (In this case, the data value remains unchanged during countdown.)
 
 ## hidden properties
 
 - countdown
+
   - readonly
   - number (seconds)
   - when timer set, count down will start automatically
+
+- round
+  - readonly
+  - number
+  - number of rounds in countdown

package/helps/scene/component/duetimer.zh.md

@@ -5,8 +5,8 @@
 - 静态 ： 可以在建模时以天，小时，分钟和秒为单位静态设置时间值。
 - 动态 ： 在运行时在 value 属性中设置时间（seconds）值。
 - 在数据属性中设置倒计时过程的，按格式运行和按格式停止的结果值。
-- 时间格式， 停止格式在运行和结束时以对应的格式设置为data
-- 另外，计时器组件提供了简单的水平进度条功能。填充《填充颜色》中设置的颜色将会表示对应时间的进度条。
+- 时间格式， 停止格式在运行和结束时以对应的格式设置为 data
+- 另外，倒计时器组件还提供了简单的水平进度条显示功能。进度颜色设置将随着倒计时的进行而显示。
 
   ![fill-color]
 
@@ -15,7 +15,8 @@
 ## 属性
 
 - due (截止时间）
-  - timestamp (以UTC时间为准从1970-01-01 0点0分0秒开始到现在为止的毫秒) : 是DUE计时器组件的结束时间的时间戳
+
+  - timestamp (以 UTC 时间为准从 1970-01-01 0 点 0 分 0 秒开始到现在为止的毫秒) : 是 DUE 计时器组件的结束时间的时间戳
   - 因为是计时器的 value 属性, 可以把数据传递到 value 属性（due）中设置数据值
 
 - 时间格式，
@@ -23,12 +24,20 @@
   - format : hh:mm:ss
   - 计时结果表现格式
 - 停止格式
+
   - string
   - format : --:--:--
   - 计时结束后显示的时间格式
-- 背景颜色
-  - string, rgb color
-  - 组件背景颜色
+
+- 进度颜色（Progress Color）
+
+  - 类型：字符串，RGB 颜色
+  - 描述：倒计时中进度的颜色。
+
+- 数据反映（Data Reflection）
+
+  - 倒计时：在倒计时期间的每一秒，剩余时间都会按照“倒计时格式”或“停止格式”中设置的格式反映在数据中。
+  - 圆形：在每个倒计时循环完成后，循环数会反映在数据中。（在此情况下，在倒计时期间数据值保持不变。）
 
 ## 隐藏属性
 
@@ -37,3 +46,8 @@
   - readonly
   - number (seconds)
   - 从设置定时器设置值开始，它就将当前值递减计数。
+
+- round
+  - 只读
+  - 数字
+  - 倒计时的回合数

package/helps/scene/component/timer.ko.md

@@ -7,7 +7,7 @@
 카운트다운 과정의 format-run, format-stop 에 의한 결과값이 data 속성에 설정된다.
 
 또한, 타이머 컴포넌트는 심플한 수평형 프로그레스바의 표현기능을 제공한다.
-fill-color에 설정된 색상이 카운트다운에 따라 표현된다.
+progress-color에 설정된 색상이 카운트다운에 따라 표현된다.
 
 ![fill-color]
 
@@ -15,29 +15,36 @@ fill-color에 설정된 색상이 카운트다운에 따라 표현된다.
 
 ## properties
 
-- days
+- 일(days)
   - number
   - 타임아웃 날자 설정값(0- )
-- hours
+- 시간(hours)
   - number
   - 타임아웃 시간 설정값(0-23)
-- minutes
+- 분(minutes)
   - number
   - 타임아웃 분 설정값(0-59)
-- seconds
+- 초(seconds)
   - number
   - 타임아웃 초 설정값(0-59)
-- format-run
+- 카운트다운 포맷(format-run)
   - string
   - format : hh:mm:ss
   - 카운트다운 결과 표현형식
-- format-stop
+  - '데이타반영' 속성이 'countdown' 이고 countdown > 0 인 경우에 이 포맷의 값이 data에 반영된다.
+- 멈춤 포맷(format-stop)
   - string
   - format : --:--:--
   - 카운트다운이 종료되었을 때 표현형식
-- background color
+  - '데이타반영' 속성이 'countdown' 이고 countdown = 0 인 경우에 이 포맷의 값이 data에 반영된다.
+- 진도 색상(progress color)
   - string, rgb color
-  - 컴포넌트의 배경 색상
+  - 카운트다운 진도 색상
+- 데이타 반영(data reflection)
+  - countdown : 매초 카운트다운할 때마다 남은 시간을 '카운트다운 포맷' 또는 '멈춤 포맷' 에 설정된 포맷으로 data에 반영된다.
+  - round : 매회차 카운트다운이 끝나면 해당 회차수가 data에 반영된다.(이 경우에 countdown 중에선 데이타값이 변하지 않는다.)
+- 반복(repeat)
+  - 이 설정이 체크되고, 매번 카운트다운이 끝나면, 자동으로 다시 시작한다.
 
 ## hidden properties
 
@@ -59,6 +66,12 @@ fill-color에 설정된 색상이 카운트다운에 따라 표현된다.
   [databind]: ../images/timer-data-bind.png
 
 - countdown
+
   - readonly
   - number (seconds)
   - 타이머 설정값 세팅 시점부터 카운트다운된 현재 값을 가지고 있다.
+
+- round
+  - readonly
+  - number
+  - 카운트다운의 회차수