@operato/scene-clock 7.0.1 → 7.0.11

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.0.11](https://github.com/things-scene/operato-scene/compare/v7.0.10...v7.0.11) (2024-07-17)
+
+
+### :bug: Bug Fix
+
+* clock-text 분단위 설정시 시간 리프레시되지 않는 문제 ([8f9059a](https://github.com/things-scene/operato-scene/commit/8f9059a798003e3e4de6b244f6c85a0f2fe6061c))
+* translation for clock ([9592138](https://github.com/things-scene/operato-scene/commit/9592138e9512d29950cbe06bd073267b21264598))
+
+
+
 ## [7.0.1](https://github.com/things-scene/operato-scene/compare/v7.0.0...v7.0.1) (2024-06-30)
 
 

package/dist/clock-text.d.ts

@@ -6,8 +6,8 @@ export default class ClockText extends Text {
     private _raf?;
     is3dish(): boolean;
     get nature(): ComponentNature;
-    render(ctx: CanvasRenderingContext2D): void;
-    _timer(): void;
+    ready(): void;
+    timing(): void;
     _getTimeStamp(): string;
     dispose(): void;
 }

package/dist/clock-text.js

@@ -63,17 +63,17 @@ export default class ClockText extends Text {
     get nature() {
         return NATURE;
     }
-    render(ctx) {
-        super.render(ctx);
+    ready() {
+        this.timing();
+    }
+    timing() {
         this._raf = requestAnimationFrame(() => {
             setTimeout(() => {
-                this._timer();
+                this.setState('data', this._getTimeStamp());
+                this.timing();
             }, 1000);
         });
     }
-    _timer() {
-        this.setState('data', this._getTimeStamp());
-    }
     _getTimeStamp() {
         var d = dayjs();
         var utc = this.getState('utc');

package/dist/clock-text.js.map

@@ -1 +1 @@
-{"version":3,"file":"clock-text.js","sourceRoot":"","sources":["../src/clock-text.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport 'dayjs/esm/locale/ko'\nimport 'dayjs/esm/locale/zh-cn'\nimport 'dayjs/esm/locale/ja'\n\nimport dayjs from 'dayjs/esm/index'\nimport utc from 'dayjs/esm/plugin/utc'\n\nimport { Component, ComponentNature, Text } from '@hatiolab/things-scene'\n\ndayjs.extend(utc)\n\nconst NATURE: ComponentNature = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [\n    {\n      type: 'string',\n      label: 'time-format',\n      name: 'timeFormat'\n    },\n    {\n      type: 'checkbox',\n      label: 'is-local-time',\n      name: 'localTime'\n    },\n    {\n      type: 'number',\n      label: 'utc',\n      name: 'utc'\n    },\n    {\n      type: 'select',\n      label: 'week-language',\n      name: 'weekLanguage',\n      property: {\n        options: [\n          {\n            display: 'English',\n            value: 'en'\n          },\n          {\n            display: 'Korean',\n            value: 'ko'\n          },\n          {\n            display: 'Chinese',\n            value: 'zh-cn'\n          },\n          {\n            display: 'Japanese',\n            value: 'ja'\n          }\n        ]\n      }\n    }\n  ],\n  help: 'scene/component/clock-text'\n}\n\nexport default class ClockText extends Text {\n  private _raf?: number\n\n  is3dish() {\n    return false\n  }\n\n  get nature() {\n    return NATURE\n  }\n\n  render(ctx: CanvasRenderingContext2D) {\n    super.render(ctx)\n\n    this._raf = requestAnimationFrame(() => {\n      setTimeout(() => {\n        this._timer()\n      }, 1000)\n    })\n  }\n\n  _timer() {\n    this.setState('data', this._getTimeStamp())\n  }\n\n  _getTimeStamp() {\n    var d = dayjs()\n\n    var utc = this.getState('utc')\n    var formatStr = this.getState('timeFormat') || 'YYYY-MM-DD HH:mm:ss'\n    var week_lang = this.getState('weekLanguage')\n    if (!this.getState('weekLanguage')) {\n      week_lang = 'en'\n    }\n    if (this.getState('localTime')) {\n      return d.local().locale(week_lang).format(formatStr)\n    } else {\n      return d.utc().utcOffset(Number(utc)).locale(week_lang).format(formatStr)\n    }\n  }\n\n  dispose() {\n    super.dispose()\n    this._raf !== undefined && cancelAnimationFrame(this._raf)\n  }\n}\n\nComponent.register('clock-text', ClockText)\n"]}
+{"version":3,"file":"clock-text.js","sourceRoot":"","sources":["../src/clock-text.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport 'dayjs/esm/locale/ko'\nimport 'dayjs/esm/locale/zh-cn'\nimport 'dayjs/esm/locale/ja'\n\nimport dayjs from 'dayjs/esm/index'\nimport utc from 'dayjs/esm/plugin/utc'\n\nimport { Component, ComponentNature, Text } from '@hatiolab/things-scene'\n\ndayjs.extend(utc)\n\nconst NATURE: ComponentNature = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [\n    {\n      type: 'string',\n      label: 'time-format',\n      name: 'timeFormat'\n    },\n    {\n      type: 'checkbox',\n      label: 'is-local-time',\n      name: 'localTime'\n    },\n    {\n      type: 'number',\n      label: 'utc',\n      name: 'utc'\n    },\n    {\n      type: 'select',\n      label: 'week-language',\n      name: 'weekLanguage',\n      property: {\n        options: [\n          {\n            display: 'English',\n            value: 'en'\n          },\n          {\n            display: 'Korean',\n            value: 'ko'\n          },\n          {\n            display: 'Chinese',\n            value: 'zh-cn'\n          },\n          {\n            display: 'Japanese',\n            value: 'ja'\n          }\n        ]\n      }\n    }\n  ],\n  help: 'scene/component/clock-text'\n}\n\nexport default class ClockText extends Text {\n  private _raf?: number\n\n  is3dish() {\n    return false\n  }\n\n  get nature() {\n    return NATURE\n  }\n\n  ready() {\n    this.timing()\n  }\n\n  timing() {\n    this._raf = requestAnimationFrame(() => {\n      setTimeout(() => {\n        this.setState('data', this._getTimeStamp())\n\n        this.timing()\n      }, 1000)\n    })\n  }\n\n  _getTimeStamp() {\n    var d = dayjs()\n\n    var utc = this.getState('utc')\n    var formatStr = this.getState('timeFormat') || 'YYYY-MM-DD HH:mm:ss'\n    var week_lang = this.getState('weekLanguage')\n    if (!this.getState('weekLanguage')) {\n      week_lang = 'en'\n    }\n    if (this.getState('localTime')) {\n      return d.local().locale(week_lang).format(formatStr)\n    } else {\n      return d.utc().utcOffset(Number(utc)).locale(week_lang).format(formatStr)\n    }\n  }\n\n  dispose() {\n    super.dispose()\n    this._raf !== undefined && cancelAnimationFrame(this._raf)\n  }\n}\n\nComponent.register('clock-text', ClockText)\n"]}

package/helps/scene/component/analog-clock.ja.md

@@ -0,0 +1,6 @@
+# クロック
+
+![コンポーネント-アナログ時計][clock-analog-01]  
+アナログ時計
+
+[clock-analog-01]: ../images/clock-analog-01.png

package/helps/scene/component/analog-clock.ko.md

@@ -1,6 +1,6 @@
-# clock[ko]
+# clock
+
 ![컴포넌트-아날로그시계][clock-analog-01]  
 아날로그 시계
 
-
 [clock-analog-01]: ../images/clock-analog-01.png

package/helps/scene/component/analog-clock.md

@@ -1,8 +1,7 @@
-# clock[en]
+# clock
 
-![Component-Analog clock][clock-analog-01] 
+![Component-Analog clock][clock-analog-01]
 
 Analog clock
 
-
 [clock-analog-01]: ../images/clock-analog-01.png

package/helps/scene/component/analog-clock.ms.md

@@ -0,0 +1,6 @@
+# Jam
+
+![komponen-jam analog][clock-analog-01]  
+Jam analog
+
+[clock-analog-01]: ../images/clock-analog-01.png

package/helps/scene/component/analog-clock.zh.md

@@ -1,6 +1,6 @@
-# clock[zh]
+# clock
+
 ![组件-模拟时钟][clock-analog-01]  
 模拟时钟
 
-
-[clock-analog-01]: ../images/clock-analog-01.png
+[clock-analog-01]: ../images/clock-analog-01.png

package/helps/scene/component/clock-text.ja.md

@@ -0,0 +1,57 @@
+# クロックテキストコンポーネント
+
+テキスト形式の時計を表示するコンポーネントです。さまざまな時間形式と設定をサポートします。
+
+## プロパティ
+
+1. **time-format(YYYY-MM-DD HH:mm:ss)** - 時間形式を指定します。
+2. **is-local-time(checkbox)** - ローカル時間を使用するかどうかを設定します。デフォルトではチェックされています。
+3. **utc** - 協定世界時を設定します。 `is-local-time` をオフにして指定する必要があります。
+4. **week-language** - 曜日言語を設定します。英語（デフォルト）、韓国語、中国語、日本語から選択できます。
+
+![コンポーネント-テキストクロック][clock-text-01]
+
+## プロパティ適用結果
+
+1. **time-format** プロパティの適用結果：
+   ![テキストクロック-time-format適用結果][clock-text-02]
+
+2. **is-local-time** プロパティの適用結果：
+   ![テキストクロック-is-local-time適用結果][clock-text-03]
+
+3. **utc** プロパティの適用結果：
+   ![テキストクロック-utc適用結果][clock-text-04]
+
+## さまざまな時間形式のサンプル
+
+1. **YYYY-MM-DD HH:mm:ss**
+
+   - 例: 2024-07-17 13:45:30
+
+2. **DD-MM-YYYY HH:mm:ss**
+
+   - 例: 17-07-2024 13:45:30
+
+3. **MM/DD/YYYY hh:mm A**
+
+   - 例: 2024/07/17 01:45 PM
+
+4. **dddd, MMMM D, YYYY h:mm:ss A**
+
+   - 例: 水曜日, 2024 年 7 月 17 日 1:45:30 PM
+
+5. **YYYY.MM.DD HH:mm:ss**
+
+   - 例: 2024.07.17 13:45:30
+
+6. **HH:mm:ss**
+
+   - 例: 13:45:30
+
+7. **hh:mm:ss A**
+   - 例: 01:45:30 PM
+
+[clock-text-01]: ../images/clock-text-01.png
+[clock-text-02]: ../images/clock-text-02.png
+[clock-text-03]: ../images/clock-text-03.png
+[clock-text-04]: ../images/clock-text-04.png

package/helps/scene/component/clock-text.ko.md

@@ -0,0 +1,57 @@
+# Clock Text Component
+
+텍스트 형식의 시계를 보여주는 컴포넌트입니다. 다양한 시간 포맷과 설정을 지원합니다.
+
+## 속성
+
+1. **time-format(YYYY-MM-DD HH:mm:ss)** - 시간 형식을 지정합니다.
+2. **is-local-time(checkbox)** - 현지 시간을 사용할지 여부를 설정합니다. 기본적으로 체크되어 있습니다.
+3. **utc** - 협정세계시를 설정합니다. `is-local-time`을 체크 해제하고 지정해야 합니다.
+4. **week-language** - 요일 언어를 설정합니다. 영어(기본값), 한국어, 중국어, 일본어 중 선택할 수 있습니다.
+
+![컴포넌트-텍스트시계][clock-text-01]
+
+## 속성 적용 결과
+
+1. **time-format** 속성 적용 결과:
+   ![텍스트시계-time-format적용결과][clock-text-02]
+
+2. **is-local-time** 속성 적용 결과:
+   ![텍스트시계-is-local-time적용결과][clock-text-03]
+
+3. **utc** 속성 적용 결과:
+   ![텍스트시계-utc적용결과][clock-text-04]
+
+## 다양한 시간 포맷 샘플
+
+1. **YYYY-MM-DD HH:mm:ss**
+
+   - 예시: 2024-07-17 13:45:30
+
+2. **DD-MM-YYYY HH:mm:ss**
+
+   - 예시: 17-07-2024 13:45:30
+
+3. **MM/DD/YYYY hh:mm A**
+
+   - 예시: 07/17/2024 01:45 PM
+
+4. **dddd, MMMM D, YYYY h:mm:ss A**
+
+   - 예시: Wednesday, July 17, 2024 1:45:30 PM
+
+5. **YYYY.MM.DD HH:mm:ss**
+
+   - 예시: 2024.07.17 13:45:30
+
+6. **HH:mm:ss**
+
+   - 예시: 13:45:30
+
+7. **hh:mm:ss A**
+   - 예시: 01:45:30 PM
+
+[clock-text-01]: ../images/clock-text-01.png
+[clock-text-02]: ../images/clock-text-02.png
+[clock-text-03]: ../images/clock-text-03.png
+[clock-text-04]: ../images/clock-text-04.png

package/helps/scene/component/clock-text.md

@@ -0,0 +1,57 @@
+# Clock Text Component
+
+A component that displays a clock in text format. It supports various time formats and settings.
+
+## Properties
+
+1. **time-format(YYYY-MM-DD HH:mm:ss)** - specify the time format.
+2. **is-local-time(checkbox)** - set whether to use local time. checked by default.
+3. **utc** - set coordinated universal time. uncheck `is-local-time` and specify.
+4. **week-language** - set the day of the week language. choose from English (default), Korean, Chinese, or Japanese.
+
+![component-text-clock][clock-text-01]
+
+## Result of Applying Properties
+
+1. Result of applying the **time-format** property:
+   ![text-clock-time-format-result][clock-text-02]
+
+2. Result of applying the **is-local-time** property:
+   ![text-clock-is-local-time-result][clock-text-03]
+
+3. Result of applying the **utc** property:
+   ![text-clock-utc-result][clock-text-04]
+
+## Various Time Format Samples
+
+1. **YYYY-MM-DD HH:mm:ss**
+
+   - Example: 2024-07-17 13:45:30
+
+2. **DD-MM-YYYY HH:mm:ss**
+
+   - Example: 17-07-2024 13:45:30
+
+3. **MM/DD/YYYY hh:mm A**
+
+   - Example: 07/17/2024 01:45 PM
+
+4. **dddd, MMMM D, YYYY h:mm:ss A**
+
+   - Example: Wednesday, July 17, 2024 1:45:30 PM
+
+5. **YYYY.MM.DD HH:mm:ss**
+
+   - Example: 2024.07.17 13:45:30
+
+6. **HH:mm:ss**
+
+   - Example: 13:45:30
+
+7. **hh:mm:ss A**
+   - Example: 01:45:30 PM
+
+[clock-text-01]: ../images/clock-text-01.png
+[clock-text-02]: ../images/clock-text-02.png
+[clock-text-03]: ../images/clock-text-03.png
+[clock-text-04]: ../images/clock-text-04.png

package/helps/scene/component/clock-text.ms.md

@@ -0,0 +1,57 @@
+# Komponen Teks Jam
+
+Komponen yang menunjukkan jam dalam format teks. Menyokong pelbagai format masa dan tetapan.
+
+## Properti
+
+1. **time-format(YYYY-MM-DD HH:mm:ss)** - tentukan format masa.
+2. **is-local-time(checkbox)** - tetapkan sama ada untuk menggunakan masa tempatan. ditandakan secara lalai.
+3. **utc** - tetapkan waktu sejagat yang diselaraskan. nyahpilih `is-local-time` dan tentukan.
+4. **week-language** - tetapkan bahasa hari dalam seminggu. pilih daripada bahasa Inggeris (lalai), Korea, Cina, atau Jepun.
+
+![komponen-teks-jam][clock-text-01]
+
+## Hasil Menerapkan Properti
+
+1. Hasil menerapkan properti **time-format**:
+   ![teks-jam-time-format-hasil][clock-text-02]
+
+2. Hasil menerapkan properti **is-local-time**:
+   ![teks-jam-is-local-time-hasil][clock-text-03]
+
+3. Hasil menerapkan properti **utc**:
+   ![teks-jam-utc-hasil][clock-text-04]
+
+## Pelbagai Sampel Format Masa
+
+1. **YYYY-MM-DD HH:mm:ss**
+
+   - Contoh: 2024-07-17 13:45:30
+
+2. **DD-MM-YYYY HH:mm:ss**
+
+   - Contoh: 17-07-2024 13:45:30
+
+3. **MM/DD/YYYY hh:mm A**
+
+   - Contoh: 07/17/2024 01:45 PM
+
+4. **dddd, MMMM D, YYYY h:mm:ss A**
+
+   - Contoh: Rabu, 17 Julai 2024 1:45:30 PM
+
+5. **YYYY.MM.DD HH:mm:ss**
+
+   - Contoh: 2024.07.17 13:45:30
+
+6. **HH:mm:ss**
+
+   - Contoh: 13:45:30
+
+7. **hh:mm:ss A**
+   - Contoh: 01:45:30 PM
+
+[clock-text-01]: ../images/clock-text-01.png
+[clock-text-02]: ../images/clock-text-02.png
+[clock-text-03]: ../images/clock-text-03.png
+[clock-text-04]: ../images/clock-text-04.png

package/helps/scene/component/clock-text.zh.md

@@ -0,0 +1,57 @@
+# 时钟文本组件
+
+显示文本格式时钟的组件。支持各种时间格式和设置。
+
+## 属性
+
+1. **time-format(YYYY-MM-DD HH:mm:ss)** - 指定时间格式。
+2. **is-local-time(checkbox)** - 设置是否使用当地时间。默认勾选。
+3. **utc** - 设置协调世界时。取消勾选 `is-local-time` 并指定。
+4. **week-language** - 设置星期语言。可以选择英语（默认）、韩语、中文或日语。
+
+![组件-文本时钟][clock-text-01]
+
+## 应用属性的结果
+
+1. 应用 **time-format** 属性的结果：
+   ![文本时钟-time-format应用结果][clock-text-02]
+
+2. 应用 **is-local-time** 属性的结果：
+   ![文本时钟-is-local-time应用结果][clock-text-03]
+
+3. 应用 **utc** 属性的结果：
+   ![文本时钟-utc应用结果][clock-text-04]
+
+## 各种时间格式示例
+
+1. **YYYY-MM-DD HH:mm:ss**
+
+   - 例子: 2024-07-17 13:45:30
+
+2. **DD-MM-YYYY HH:mm:ss**
+
+   - 例子: 17-07-2024 13:45:30
+
+3. **MM/DD/YYYY hh:mm A**
+
+   - 例子: 07/17/2024 01:45 PM
+
+4. **dddd, MMMM D, YYYY h:mm:ss A**
+
+   - 例子: 星期三, 2024 年 7 月 17 日 下午 1:45:30
+
+5. **YYYY.MM.DD HH:mm:ss**
+
+   - 例子: 2024.07.17 13:45:30
+
+6. **HH:mm:ss**
+
+   - 例子: 13:45:30
+
+7. **hh:mm:ss A**
+   - 例子: 01:45:30 PM
+
+[clock-text-01]: ../images/clock-text-01.png
+[clock-text-02]: ../images/clock-text-02.png
+[clock-text-03]: ../images/clock-text-03.png
+[clock-text-04]: ../images/clock-text-04.png

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/scene-clock",
   "description": "Clock component for things-scene",
   "author": "heartyoh",
-  "version": "7.0.1",
+  "version": "7.0.11",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "license": "MIT",
@@ -58,5 +58,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "575a4ccdeb952a605c9a6f65a389906e73a71013"
+  "gitHead": "e4f4eee73d747840034974f2263101e7ac64b96c"
 }