@operato/scene-timer 0.0.11

package/@types/global/index.d.ts

@@ -0,0 +1 @@
+declare module '*.png'

package/CHANGELOG.md

@@ -0,0 +1,12 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+### [0.0.11](https://github.com/things-scene/operato-scene/compare/v0.0.10...v0.0.11) (2021-12-06)
+
+
+### :rocket: New Features
+
+* add wheel-sorter, legend, timer and compass ([dc90f73](https://github.com/things-scene/operato-scene/commit/dc90f73054424c0867a1c4a28d51da6e7fab8b85))
+* add wheel-sorter, legend, timer and compass ([518950c](https://github.com/things-scene/operato-scene/commit/518950cb5476048504a415a1dd0a1fd2d4359a77))

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Hearty, Oh
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,31 @@
+## node package를 설치한다.
+
+`$ yarn`
+
+## 실행
+
+`$ yarn serve`
+`$ yarn serve:dev`
+
+## 포트를 바꾸려면, -p 3001 식으로 추가해준다.
+
+`$ yarn serve`
+`$ yarn serve -p 3001`
+
+## test in browser
+
+http://localhost:3000
+
+## build
+
+`$ yarn build`
+
+| type | filename                                   | for            | tested |
+| ---- | ------------------------------------------ | -------------- | ------ |
+| UMD  | things-scene-timer.js    | modern browser | O      |
+| UMD  | things-scene-timer-ie.js | ie 11          | O      |
+| ESM  | things-scene-timer.mjs   | modern browser | O      |
+
+## publish
+
+`$ yarn publish`

package/dist/duetimer.d.ts

@@ -0,0 +1,35 @@
+import { Properties, Shape } from '@hatiolab/things-scene';
+declare const DueTimer_base: typeof Shape;
+export default class DueTimer extends DueTimer_base {
+    static get nature(): {
+        mutable: boolean;
+        resizable: boolean;
+        rotatable: boolean;
+        properties: ({
+            type: string;
+            label: string;
+            name: string;
+            placeholder: string;
+            property?: undefined;
+        } | {
+            type: string;
+            label: string;
+            name: string;
+            property: string;
+            placeholder?: undefined;
+        })[];
+        'value-property': string;
+        help: string;
+    };
+    ready(): void;
+    onchange(after: Properties): void;
+    counting(): void;
+    render(context: CanvasRenderingContext2D): void;
+    postrender(context: CanvasRenderingContext2D): void;
+    get timeout(): number;
+    set timeout(timeout: number);
+    get due(): number;
+    set due(due: number);
+    get countdown(): number;
+}
+export {};

package/dist/duetimer.js

@@ -0,0 +1,113 @@
+import { Component, RectPath, Shape } from '@hatiolab/things-scene';
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import format from './libs/format';
+const NATURE = {
+    mutable: false,
+    resizable: true,
+    rotatable: true,
+    properties: [
+        {
+            type: 'number',
+            label: 'due',
+            name: 'due',
+            placeholder: 'timestamp'
+        },
+        {
+            type: 'string',
+            label: 'format-run',
+            name: 'format-run',
+            placeholder: 'hh:mm:ss'
+        },
+        {
+            type: 'string',
+            label: 'format-stop',
+            name: 'format-stop',
+            placeholder: '--:--:--'
+        },
+        {
+            type: 'color',
+            label: 'background-color',
+            name: 'backgroundColor',
+            property: 'backgroundColor'
+        }
+    ],
+    'value-property': 'due',
+    help: 'scene/component/duetimer'
+};
+export default class DueTimer extends RectPath(Shape) {
+    static get nature() {
+        return NATURE;
+    }
+    ready() {
+        if (!this.app.isViewMode) {
+            return;
+        }
+        var { due = 0 } = this.state;
+        this.timeout = Math.max(Math.round((due - Date.now()) / 1000), 0);
+    }
+    onchange(after) {
+        if ('due' in after) {
+            this.timeout = Math.max(Math.round((this.due - Date.now()) / 1000), 0);
+            this.counting();
+        }
+    }
+    counting() {
+        requestAnimationFrame(() => {
+            const countdown = this.countdown;
+            if (countdown > 0) {
+                this.set('data', format(countdown, this.getState('format-run')));
+                setTimeout(() => {
+                    this.counting();
+                }, 1000);
+            }
+            else {
+                this.set('data', this.getState('format-stop'));
+            }
+        });
+    }
+    render(context) {
+        var { top, left, height, width, backgroundColor = 'transparent' } = this.model;
+        // background의 색상
+        context.beginPath();
+        context.rect(left, top, width, height);
+        context.fillStyle = backgroundColor;
+        context.fill();
+        // value의 색상
+        context.beginPath();
+        var progress = (this.countdown / this.timeout) * 100;
+        if (!isNaN(progress)) {
+            progress = width - (width * progress) / 100;
+            progress = Math.max(Math.min(progress, width), 0);
+            context.rect(left, top, progress, height);
+            this.drawFill(context);
+            context.beginPath();
+        }
+        // stroke
+        context.rect(left, top, width, height);
+    }
+    postrender(context) {
+        this.drawStroke(context);
+        this.drawText(context);
+    }
+    get timeout() {
+        return Number(this.getState('timeout') || 0);
+    }
+    set timeout(timeout) {
+        this.setState('timeout', Number(timeout) || 0);
+    }
+    get due() {
+        return Number(this.getState('due') || 0);
+    }
+    set due(due) {
+        this.setState('due', due);
+    }
+    get countdown() {
+        const due = this.due;
+        const now = Date.now();
+        return Math.max(Math.round((due - now) / 1000), 0);
+    }
+}
+Component.register('duetimer', DueTimer);
+//# sourceMappingURL=duetimer.js.map

package/dist/duetimer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"duetimer.js","sourceRoot":"","sources":["../src/duetimer.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component, Properties, RectPath, Shape, error } from '@hatiolab/things-scene'\n\n/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\nimport format from './libs/format'\n\nconst NATURE = {\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  static 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.set('data', format(countdown, this.getState('format-run')))\n\n        setTimeout(() => {\n          this.counting()\n        }, 1000)\n      } else {\n        this.set('data', this.getState('format-stop'))\n      }\n    })\n  }\n\n  render(context: CanvasRenderingContext2D) {\n    var { top, left, height, width, backgroundColor = 'transparent' } = this.model\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"]}

package/dist/index.d.ts

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

package/dist/index.js

@@ -0,0 +1,4 @@
+import Timer from './timer';
+import DueTimer from './duetimer';
+export default [Timer, DueTimer];
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,SAAS,CAAA;AAC3B,OAAO,QAAQ,MAAM,YAAY,CAAA;AAEjC,eAAe,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAA","sourcesContent":["import Timer from './timer'\nimport DueTimer from './duetimer'\n\nexport default [Timer, DueTimer]\n"]}

package/dist/libs/format.d.ts

@@ -0,0 +1,7 @@
+/**
+ * 시간 표시 포맷을 맞추는 함수
+ *
+ * @param {Number} seconds seconds
+ * @param {string} format hh:mm:ss
+ */
+export default function format(seconds?: number, format?: string): string;

package/dist/libs/format.js

@@ -0,0 +1,42 @@
+/**
+ * 문자열 길이를 늘려주는 함수
+ *
+ * @param {String} i
+ * @param {Number} len
+ */
+function ii(i, len) {
+    var s = i + '';
+    len = len || 2;
+    while (s.length < len)
+        s = '0' + s;
+    return s;
+}
+/**
+ * 시간 표시 포맷을 맞추는 함수
+ *
+ * @param {Number} seconds seconds
+ * @param {string} format hh:mm:ss
+ */
+export default function format(seconds = 0, format = '') {
+    var h = 0, m = 0, s = 0;
+    var formated = '';
+    h = Math.floor(seconds / 3600);
+    formated = format.replace(/(^|[^\\])hh+/g, '$1' + ii(h));
+    formated = formated.replace(/(^|[^\\])h/g, '$1' + h);
+    if (format != formated) {
+        format = formated;
+        seconds %= 1440;
+    }
+    m = Math.floor(seconds / 60);
+    formated = format.replace(/(^|[^\\])mm+/g, '$1' + ii(m));
+    formated = formated.replace(/(^|[^\\])m/g, '$1' + m);
+    if (format != formated) {
+        format = formated;
+        seconds %= 60;
+    }
+    s = seconds;
+    formated = format.replace(/(^|[^\\])ss+/g, '$1' + ii(s));
+    formated = formated.replace(/(^|[^\\])s/g, '$1' + s);
+    return formated;
+}
+//# sourceMappingURL=format.js.map

package/dist/libs/format.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"format.js","sourceRoot":"","sources":["../../src/libs/format.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,SAAS,EAAE,CAAC,CAAS,EAAE,GAAY;IACjC,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,CAAA;IACd,GAAG,GAAG,GAAG,IAAI,CAAC,CAAA;IACd,OAAO,CAAC,CAAC,MAAM,GAAG,GAAG;QAAE,CAAC,GAAG,GAAG,GAAG,CAAC,CAAA;IAClC,OAAO,CAAC,CAAA;AACV,CAAC;AAED;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,OAAO,GAAG,CAAC,EAAE,MAAM,GAAG,EAAE;IACrD,IAAI,CAAC,GAAG,CAAC,EACP,CAAC,GAAG,CAAC,EACL,CAAC,GAAG,CAAC,CAAA;IACP,IAAI,QAAQ,GAAG,EAAE,CAAA;IAEjB,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,CAAA;IAC9B,QAAQ,GAAG,MAAM,CAAC,OAAO,CAAC,eAAe,EAAE,IAAI,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;IACxD,QAAQ,GAAG,QAAQ,CAAC,OAAO,CAAC,aAAa,EAAE,IAAI,GAAG,CAAC,CAAC,CAAA;IACpD,IAAI,MAAM,IAAI,QAAQ,EAAE;QACtB,MAAM,GAAG,QAAQ,CAAA;QACjB,OAAO,IAAI,IAAI,CAAA;KAChB;IAED,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,EAAE,CAAC,CAAA;IAC5B,QAAQ,GAAG,MAAM,CAAC,OAAO,CAAC,eAAe,EAAE,IAAI,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;IACxD,QAAQ,GAAG,QAAQ,CAAC,OAAO,CAAC,aAAa,EAAE,IAAI,GAAG,CAAC,CAAC,CAAA;IACpD,IAAI,MAAM,IAAI,QAAQ,EAAE;QACtB,MAAM,GAAG,QAAQ,CAAA;QACjB,OAAO,IAAI,EAAE,CAAA;KACd;IAED,CAAC,GAAG,OAAO,CAAA;IACX,QAAQ,GAAG,MAAM,CAAC,OAAO,CAAC,eAAe,EAAE,IAAI,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;IACxD,QAAQ,GAAG,QAAQ,CAAC,OAAO,CAAC,aAAa,EAAE,IAAI,GAAG,CAAC,CAAC,CAAA;IAEpD,OAAO,QAAQ,CAAA;AACjB,CAAC","sourcesContent":["/**\n * 문자열 길이를 늘려주는 함수\n *\n * @param {String} i\n * @param {Number} len\n */\nfunction ii(i: number, len?: number) {\n  var s = i + ''\n  len = len || 2\n  while (s.length < len) s = '0' + s\n  return s\n}\n\n/**\n * 시간 표시 포맷을 맞추는 함수\n *\n * @param {Number} seconds seconds\n * @param {string} format hh:mm:ss\n */\nexport default function format(seconds = 0, format = '') {\n  var h = 0,\n    m = 0,\n    s = 0\n  var formated = ''\n\n  h = Math.floor(seconds / 3600)\n  formated = format.replace(/(^|[^\\\\])hh+/g, '$1' + ii(h))\n  formated = formated.replace(/(^|[^\\\\])h/g, '$1' + h)\n  if (format != formated) {\n    format = formated\n    seconds %= 1440\n  }\n\n  m = Math.floor(seconds / 60)\n  formated = format.replace(/(^|[^\\\\])mm+/g, '$1' + ii(m))\n  formated = formated.replace(/(^|[^\\\\])m/g, '$1' + m)\n  if (format != formated) {\n    format = formated\n    seconds %= 60\n  }\n\n  s = seconds\n  formated = format.replace(/(^|[^\\\\])ss+/g, '$1' + ii(s))\n  formated = formated.replace(/(^|[^\\\\])s/g, '$1' + s)\n\n  return formated\n}\n"]}

package/dist/templates/duetimer.d.ts

@@ -0,0 +1,22 @@
+declare const _default: {
+    type: string;
+    description: string;
+    group: string;
+    icon: any;
+    model: {
+        type: string;
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+        strokeStyle: string;
+        text: string;
+        days: number;
+        hours: number;
+        minutes: number;
+        seconds: number;
+        'format-run': string;
+        'format-stop': string;
+    };
+};
+export default _default;

package/dist/templates/duetimer.js

@@ -0,0 +1,24 @@
+import icon from '../../assets/timer.png';
+export default {
+    type: 'timer',
+    description: 'timer',
+    group: 'etc',
+    /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */
+    icon,
+    model: {
+        type: 'timer',
+        left: 10,
+        top: 10,
+        width: 100,
+        height: 100,
+        strokeStyle: 'darkgray',
+        text: '#{data}',
+        days: 0,
+        hours: 0,
+        minutes: 0,
+        seconds: 0,
+        'format-run': 'mm:ss',
+        'format-stop': '--:--'
+    }
+};
+//# sourceMappingURL=duetimer.js.map

package/dist/templates/duetimer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"duetimer.js","sourceRoot":"","sources":["../../src/templates/duetimer.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,wBAAwB,CAAA;AAEzC,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":["import icon from '../../assets/timer.png'\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"]}

package/dist/templates/index.d.ts

@@ -0,0 +1,18 @@
+declare const _default: {
+    type: string;
+    description: string;
+    group: string;
+    icon: any;
+    model: {
+        type: string;
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+        strokeStyle: string;
+        text: string;
+        'format-run': string;
+        'format-stop': string;
+    };
+}[];
+export default _default;

package/dist/templates/index.js

@@ -0,0 +1,4 @@
+import timer from './timer';
+import duetimer from './duetimer';
+export default [timer, duetimer];
+//# sourceMappingURL=index.js.map

package/dist/templates/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/templates/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,SAAS,CAAA;AAC3B,OAAO,QAAQ,MAAM,YAAY,CAAA;AAEjC,eAAe,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAA","sourcesContent":["import timer from './timer'\nimport duetimer from './duetimer'\n\nexport default [timer, duetimer]\n"]}

package/dist/templates/timer.d.ts

@@ -0,0 +1,18 @@
+declare const _default: {
+    type: string;
+    description: string;
+    group: string;
+    icon: any;
+    model: {
+        type: string;
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+        strokeStyle: string;
+        text: string;
+        'format-run': string;
+        'format-stop': string;
+    };
+};
+export default _default;

package/dist/templates/timer.js

@@ -0,0 +1,20 @@
+import icon from '../../assets/duetimer.png';
+export default {
+    type: 'duetimer',
+    description: 'duetimer',
+    group: 'etc',
+    /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */
+    icon,
+    model: {
+        type: 'duetimer',
+        left: 10,
+        top: 10,
+        width: 100,
+        height: 100,
+        strokeStyle: 'darkgray',
+        text: '#{data}',
+        'format-run': 'mm:ss',
+        'format-stop': '--:--'
+    }
+};
+//# sourceMappingURL=timer.js.map

package/dist/templates/timer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timer.js","sourceRoot":"","sources":["../../src/templates/timer.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,2BAA2B,CAAA;AAE5C,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":["import icon from '../../assets/duetimer.png'\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"]}

package/dist/timer.d.ts

@@ -0,0 +1,34 @@
+import { Properties, Shape } from '@hatiolab/things-scene';
+declare const Timer_base: typeof Shape;
+export default class Timer extends Timer_base {
+    private _due?;
+    static get nature(): {
+        mutable: boolean;
+        resizable: boolean;
+        rotatable: boolean;
+        properties: ({
+            type: string;
+            label: string;
+            name: string;
+            placeholder: string;
+            property?: undefined;
+        } | {
+            type: string;
+            label: string;
+            name: string;
+            property: string;
+            placeholder?: undefined;
+        })[];
+        'value-property': string;
+        help: string;
+    };
+    ready(): void;
+    onchange(after: Properties): void;
+    counting(): void;
+    render(context: CanvasRenderingContext2D): void;
+    postrender(context: CanvasRenderingContext2D): void;
+    get timeout(): number;
+    set timeout(timeout: number);
+    get countdown(): number;
+}
+export {};

package/dist/timer.js

@@ -0,0 +1,129 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import { Component, RectPath, Shape } from '@hatiolab/things-scene';
+import format from './libs/format';
+const NATURE = {
+    mutable: false,
+    resizable: true,
+    rotatable: true,
+    properties: [
+        {
+            type: 'number',
+            label: 'days',
+            name: 'days',
+            placeholder: 'days'
+        },
+        {
+            type: 'number',
+            label: 'hours',
+            name: 'hours',
+            placeholder: 'hours'
+        },
+        {
+            type: 'number',
+            label: 'minutes',
+            name: 'minutes',
+            placeholder: 'minutes'
+        },
+        {
+            type: 'number',
+            label: 'seconds',
+            name: 'seconds',
+            placeholder: 'seconds'
+        },
+        {
+            type: 'string',
+            label: 'format-run',
+            name: 'format-run',
+            placeholder: 'hh:mm:ss'
+        },
+        {
+            type: 'string',
+            label: 'format-stop',
+            name: 'format-stop',
+            placeholder: '--:--:--'
+        },
+        {
+            type: 'color',
+            label: 'background-color',
+            name: 'backgroundColor',
+            property: 'backgroundColor'
+        }
+    ],
+    'value-property': 'timeout',
+    help: 'scene/component/timer'
+};
+export default class Timer extends RectPath(Shape) {
+    static get nature() {
+        return NATURE;
+    }
+    ready() {
+        if (!this.app.isViewMode) {
+            return;
+        }
+        var { days = 0, hours = 0, minutes = 0, seconds = 0 } = this.state;
+        this.timeout = days * 86400 + hours * 3600 + minutes * 60 + seconds;
+    }
+    onchange(after) {
+        if ('timeout' in after) {
+            this._due = Date.now() + this.timeout * 1000;
+            this.counting();
+        }
+    }
+    counting() {
+        requestAnimationFrame(() => {
+            const countdown = this.countdown;
+            if (countdown > 0) {
+                this.set('data', format(countdown, this.getState('format-run')));
+                setTimeout(() => {
+                    this.counting();
+                }, 1000);
+            }
+            else {
+                this.set('data', this.getState('format-stop'));
+            }
+        });
+    }
+    render(context) {
+        var { top, left, height, width, backgroundColor = 'transparent' } = this.model;
+        // background의 색상
+        context.beginPath();
+        context.rect(left, top, width, height);
+        context.fillStyle = backgroundColor;
+        context.fill();
+        // value의 색상
+        context.beginPath();
+        var progress = (this.countdown / this.timeout) * 100;
+        if (!isNaN(progress)) {
+            progress = width - (width * progress) / 100;
+            progress = Math.max(Math.min(progress, width), 0);
+            context.rect(left, top, progress, height);
+            this.drawFill(context);
+            context.beginPath();
+        }
+        // stroke
+        context.rect(left, top, width, height);
+    }
+    postrender(context) {
+        this.drawStroke(context);
+        this.drawText(context);
+    }
+    get timeout() {
+        return Number(this.getState('timeout') || 0);
+    }
+    set timeout(timeout) {
+        this.setState('timeout', Number(timeout) || 0);
+    }
+    get countdown() {
+        const timeout = this.timeout;
+        if (!timeout || timeout < 0) {
+            return 0;
+        }
+        const due = this._due || 0;
+        const now = Date.now();
+        return Math.max(Math.round((due - now) / 1000), 0);
+    }
+}
+Component.register('timer', Timer);
+//# sourceMappingURL=timer.js.map

package/dist/timer.js.map

@@ -0,0 +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, Properties, RectPath, Shape, error } from '@hatiolab/things-scene'\n\nimport format from './libs/format'\n\nconst NATURE = {\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  static 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.set('data', format(countdown, this.getState('format-run')))\n\n        setTimeout(() => {\n          this.counting()\n        }, 1000)\n      } else {\n        this.set('data', this.getState('format-stop'))\n      }\n    })\n  }\n\n  render(context: CanvasRenderingContext2D) {\n    var { top, left, height, width, backgroundColor = 'transparent' } = this.model\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"]}