From 728a5716e6c85db58832ff3a81bc882c5b1898c0 Mon Sep 17 00:00:00 2001 From: MinHo Lim Date: Fri, 30 May 2025 15:17:29 +0900 Subject: [PATCH 01/12] fix viewport url --- README.md | 2 +- README_KR.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 01497344..cf983b73 100644 --- a/README.md +++ b/README.md @@ -129,7 +129,7 @@ Customize the rendering behavior using the following options: ``` - `viewport` - - `Viewport options` ([Docs](https://pixi-viewport.github.io/pixi-viewport/jsdoc/Viewport.html#Viewport)) + - `Viewport options` ([Docs](https://viewport.pixijs.io/jsdoc/Viewport.html)) - `plugins` - Plugins to enhance or modify the viewport's behavior. You can add new plugins or disable default ones. Default: diff --git a/README_KR.md b/README_KR.md index b5fc4efb..66bbbdd9 100644 --- a/README_KR.md +++ b/README_KR.md @@ -130,7 +130,7 @@ await patchmap.init(el, { ``` - `viewport` - - `Viewport options` ([Docs](https://pixi-viewport.github.io/pixi-viewport/jsdoc/Viewport.html#Viewport)) + - `Viewport options` ([Docs](https://viewport.pixijs.io/jsdoc/Viewport.html)) - `plugins` - Viewport의 동작을 향상시키거나 수정하는 플러그인입니다. 새로운 플러그인을 추가하거나 기본 플러그인을 비활성화할 수 있습니다. Default: From 9e622b7aac1759b215b79c7928a737b7b87b6b62 Mon Sep 17 00:00:00 2001 From: MinHo Lim Date: Fri, 30 May 2025 15:17:41 +0900 Subject: [PATCH 02/12] fix typo --- README.md | 2 +- README_KR.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index cf983b73..6e93b064 100644 --- a/README.md +++ b/README.md @@ -197,7 +197,7 @@ const data = [ borderColor: 'primary.dark', radius: 4, }, - } + }, { type: 'icon', asset: 'loading', size: 16 } ] }] diff --git a/README_KR.md b/README_KR.md index 66bbbdd9..ad0c11ce 100644 --- a/README_KR.md +++ b/README_KR.md @@ -197,7 +197,7 @@ const data = [ borderColor: 'primary.dark', radius: 4, }, - } + }, { type: 'icon', texture: 'loading', size: 16 } ] }] From 3f936b58720082d4a01399ded78c142a1907541a Mon Sep 17 00:00:00 2001 From: MinHo Lim Date: Fri, 30 May 2025 15:19:58 +0900 Subject: [PATCH 03/12] add basic usage url --- README.md | 2 +- README_KR.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 6e93b064..10881fda 100644 --- a/README.md +++ b/README.md @@ -51,7 +51,7 @@ npm install @conalog/patch-map ``` ### Usage -Here's a quick example to get you started: +Here's a quick example to get you started: [Example](https://codesandbox.io/p/sandbox/yvjrpx) ```js (async () => { import { Patchmap } from '@conalog/patch-map'; diff --git a/README_KR.md b/README_KR.md index ad0c11ce..d0cd73b8 100644 --- a/README_KR.md +++ b/README_KR.md @@ -51,7 +51,7 @@ npm install @conalog/patch-map ``` ### 기본 예제 -시작하는 데 도움이 되는 간단한 예제입니다: +시작하는 데 도움이 되는 간단한 예제입니다: [예제](https://codesandbox.io/p/sandbox/yvjrpx) ```js (async () => { import { Patchmap } from '@conalog/patch-map'; From 8f13afae4f0638171392f33c7292715ea02988c7 Mon Sep 17 00:00:00 2001 From: MinHo Lim Date: Fri, 30 May 2025 15:29:01 +0900 Subject: [PATCH 04/12] fix data.d.ts --- src/display/data-schema/data.d.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/display/data-schema/data.d.ts b/src/display/data-schema/data.d.ts index ae2e16ce..d8cf7498 100644 --- a/src/display/data-schema/data.d.ts +++ b/src/display/data-schema/data.d.ts @@ -93,7 +93,7 @@ export type components = export interface BackgroundComponent extends BaseObject { type: 'background'; show?: boolean; // default: true - texture: string | TextureStyle; + texture: TextureStyle; } /** @@ -102,10 +102,10 @@ export interface BackgroundComponent extends BaseObject { export interface BarComponent extends BaseObject { type: 'bar'; show?: boolean; // default: true - texture: string | TextureStyle; + texture: TextureStyle; placement?: Placement; // default: 'bottom' - margin?: string; // default: '0' + margin?: string; // default: '0', ('4 2', '2 1 3 4') percentWidth?: number; // default: 1 (0~1) percentHeight?: number; // default: 1 (0~1) animation?: boolean; // default: true @@ -118,10 +118,10 @@ export interface BarComponent extends BaseObject { export interface IconComponent extends BaseObject { type: 'icon'; show?: boolean; // default: true - asset: string; + asset: string; // object, inverter, combiner, edge, device, loading, warning, wifi, etc. placement?: Placement; // default: 'center' - margin?: string; // default: '0' + margin?: string; // default: '0', ('4 2', '2 1 3 4') size: number; // 0 or higher } @@ -133,7 +133,7 @@ export interface TextComponent extends BaseObject { show?: boolean; // default: true placement?: Placement; // default: 'center' - margin?: string; // default: '0' + margin?: string; // default: '0', ('4 2', '2 1 3 4') text?: string; // default: '' style?: Record; split?: number; // default: 0 From ef975be2864a4d7a692ba0c649c7e3a3d5f5f006 Mon Sep 17 00:00:00 2001 From: MinHo Lim Date: Fri, 30 May 2025 15:34:22 +0900 Subject: [PATCH 05/12] fix package description --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 19bd8709..0abae1f5 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "type": "module", "name": "@conalog/patch-map", "version": "0.1.9", - "description": "본 라이브러리는 `pixijs` 라이브러리를 이용하여 PATCH 서비스의 요구사항에 맞는 PATCH MAP을 제공하고자 함", + "description": "This library utilizes pixi.js to provide a PATCH MAP tailored to the requirements of the PATCH service.", "license": "MIT", "author": "Conalog", "keywords": [], From a32cd3ee2f4cae53097683ff6a96cbd8ebe921a2 Mon Sep 17 00:00:00 2001 From: MinHo Lim Date: Fri, 30 May 2025 15:37:33 +0900 Subject: [PATCH 06/12] fix --- README.md | 7 ++++--- README_KR.md | 7 ++++--- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 10881fda..a4ba4cb8 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,12 @@ # PATCH MAP English | [한국어](./README_KR.md) -PATCH MAP is an optimized canvas library built on pixijs and pixi-viewport, tailored to meet the requirements of PATCH services. +PATCH MAP is an optimized canvas library built on pixi.js and pixi-viewport, tailored to meet the requirements of PATCH services. It enables flexible and fast creation of 2D content. +Therefore, it is necessary to learn about the following two libraries. -- **[PixiJS](https://github.com/pixijs/pixijs)** -- **[Pixi-Viewport](https://github.com/pixi-viewport/pixi-viewport)** +- **[pixi.js](https://github.com/pixijs/pixijs)** +- **[pixi-viewport](https://github.com/pixi-viewport/pixi-viewport)**
diff --git a/README_KR.md b/README_KR.md index d0cd73b8..fcad53d7 100644 --- a/README_KR.md +++ b/README_KR.md @@ -1,11 +1,12 @@ # PATCH MAP [English](./README.md) | 한국어 -PATCH MAP은 PATCH 서비스의 요구 사항을 충족시키기 위해 `pixijs`와 `pixi-viewport`를 기반으로 최적화된 캔버스 라이브러리입니다. +PATCH MAP은 PATCH 서비스의 요구 사항을 충족시키기 위해 `pixi.js`와 `pixi-viewport`를 기반으로 최적화된 캔버스 라이브러리입니다. 유연하고 빠른 2D 콘텐츠 생성을 가능하게 합니다. +그러므로, 아래 두 라이브러리에 대한 학습이 필요합니다. -- **[PixiJS](https://github.com/pixijs/pixijs)** -- **[Pixi-Viewport](https://github.com/pixi-viewport/pixi-viewport)** +- **[pixi.js](https://github.com/pixijs/pixijs)** +- **[pixi-viewport](https://github.com/pixi-viewport/pixi-viewport)**
From 134e99c6dc21c29d433b6a2246a0c3743c7b6dd9 Mon Sep 17 00:00:00 2001 From: MinHo Lim Date: Fri, 30 May 2025 15:38:55 +0900 Subject: [PATCH 07/12] fix --- README.md | 2 ++ README_KR.md | 2 ++ 2 files changed, 4 insertions(+) diff --git a/README.md b/README.md index a4ba4cb8..d309fbc7 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,9 @@ English | [한국어](./README_KR.md) PATCH MAP is an optimized canvas library built on pixi.js and pixi-viewport, tailored to meet the requirements of PATCH services. +
It enables flexible and fast creation of 2D content. +
Therefore, it is necessary to learn about the following two libraries. - **[pixi.js](https://github.com/pixijs/pixijs)** diff --git a/README_KR.md b/README_KR.md index fcad53d7..45b9375b 100644 --- a/README_KR.md +++ b/README_KR.md @@ -2,7 +2,9 @@ [English](./README.md) | 한국어 PATCH MAP은 PATCH 서비스의 요구 사항을 충족시키기 위해 `pixi.js`와 `pixi-viewport`를 기반으로 최적화된 캔버스 라이브러리입니다. +
유연하고 빠른 2D 콘텐츠 생성을 가능하게 합니다. +
그러므로, 아래 두 라이브러리에 대한 학습이 필요합니다. - **[pixi.js](https://github.com/pixijs/pixijs)** From 209647cfbac5411fd787349ff945c21256e17349 Mon Sep 17 00:00:00 2001 From: MinHo Lim Date: Fri, 30 May 2025 15:41:33 +0900 Subject: [PATCH 08/12] fix --- README.md | 4 +--- README_KR.md | 4 +--- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index d309fbc7..1bf51005 100644 --- a/README.md +++ b/README.md @@ -3,9 +3,7 @@ English | [한국어](./README_KR.md) PATCH MAP is an optimized canvas library built on pixi.js and pixi-viewport, tailored to meet the requirements of PATCH services.
-It enables flexible and fast creation of 2D content. -
-Therefore, it is necessary to learn about the following two libraries. +Therefore, to use this, an understanding of the following two libraries is essential. - **[pixi.js](https://github.com/pixijs/pixijs)** - **[pixi-viewport](https://github.com/pixi-viewport/pixi-viewport)** diff --git a/README_KR.md b/README_KR.md index 45b9375b..b62490d9 100644 --- a/README_KR.md +++ b/README_KR.md @@ -3,9 +3,7 @@ PATCH MAP은 PATCH 서비스의 요구 사항을 충족시키기 위해 `pixi.js`와 `pixi-viewport`를 기반으로 최적화된 캔버스 라이브러리입니다.
-유연하고 빠른 2D 콘텐츠 생성을 가능하게 합니다. -
-그러므로, 아래 두 라이브러리에 대한 학습이 필요합니다. +따라서 이를 사용하기 위해서는 아래 두 라이브러리에 대한 이해가 필수적입니다. - **[pixi.js](https://github.com/pixijs/pixijs)** - **[pixi-viewport](https://github.com/pixi-viewport/pixi-viewport)** From ad01a613bd1ac415bbb05437d36131eaae05baf3 Mon Sep 17 00:00:00 2001 From: MinHo Lim Date: Fri, 30 May 2025 15:43:36 +0900 Subject: [PATCH 09/12] fix --- README.md | 6 +++--- README_KR.md | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 1bf51005..1dba75f1 100644 --- a/README.md +++ b/README.md @@ -78,8 +78,8 @@ Here's a quick example to get you started: [Example](https://codesandbox.io/p/sa borderWidth: 2, borderColor: 'primary.dark', radius: 4, - }, - } + } + }, { type: 'icon', asset: 'loading', size: 16 } ] }] @@ -197,7 +197,7 @@ const data = [ borderWidth: 2, borderColor: 'primary.dark', radius: 4, - }, + } }, { type: 'icon', asset: 'loading', size: 16 } ] diff --git a/README_KR.md b/README_KR.md index b62490d9..aea43419 100644 --- a/README_KR.md +++ b/README_KR.md @@ -78,8 +78,8 @@ npm install @conalog/patch-map borderWidth: 2, borderColor: 'primary.dark', radius: 4, - }, - } + } + }, { type: 'icon', asset: 'loading', size: 16 } ] }] @@ -197,7 +197,7 @@ const data = [ borderWidth: 2, borderColor: 'primary.dark', radius: 4, - }, + } }, { type: 'icon', texture: 'loading', size: 16 } ] From 91966da99afdb01a2b507033097f88f9f53f4194 Mon Sep 17 00:00:00 2001 From: MinHo Lim Date: Fri, 30 May 2025 15:45:19 +0900 Subject: [PATCH 10/12] fix --- README.md | 4 ++-- README_KR.md | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 1dba75f1..758c6db3 100644 --- a/README.md +++ b/README.md @@ -117,7 +117,7 @@ await patchmap.init(el, { Customize the rendering behavior using the following options: - `app` - - `PixiJS Application options` ([Docs](https://pixijs.download/release/docs/app.ApplicationOptions.html)) + - `pixi.js Application options` ([Docs](https://pixijs.download/release/docs/app.ApplicationOptions.html)) Default: ```js @@ -332,7 +332,7 @@ patchmap.viewport.plugin.remove('mouse-edges');
### `asset` -- Refer to [pixiJS Assets](https://pixijs.download/release/docs/assets.Assets.html) for information about assets. +- Refer to [pixi.js Assets](https://pixijs.download/release/docs/assets.Assets.html) for information about assets.
diff --git a/README_KR.md b/README_KR.md index aea43419..c52cd093 100644 --- a/README_KR.md +++ b/README_KR.md @@ -118,7 +118,7 @@ await patchmap.init(el, { 렌더링 동작을 사용자 정의하려면 다음 옵션을 사용하세요: - `app` - - `PixiJS Application options` ([Docs](https://pixijs.download/release/docs/app.ApplicationOptions.html)) + - `pixi.js Application options` ([Docs](https://pixijs.download/release/docs/app.ApplicationOptions.html)) Default: ```js @@ -332,7 +332,7 @@ patchmap.viewport.plugin.remove('mouse-edges'); ### `asset` -- asset에 대한 내용은 [pixiJS Assets](https://pixijs.download/release/docs/assets.Assets.html)를 참조하세요. +- asset에 대한 내용은 [pixi.js Assets](https://pixijs.download/release/docs/assets.Assets.html)를 참조하세요.
From 036add99fbfd1889a9672d26e4d83b3b2916401a Mon Sep 17 00:00:00 2001 From: MinHo Lim Date: Fri, 30 May 2025 15:50:56 +0900 Subject: [PATCH 11/12] add cdn --- README.md | 8 +++++++- README_KR.md | 8 +++++++- 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 758c6db3..e60d3225 100644 --- a/README.md +++ b/README.md @@ -46,11 +46,17 @@ Therefore, to use this, an understanding of the following two libraries is essen ## 🚀 Getting Started ### Install -Install `@conalog/patch-map` using npm: +#### NPM ```sh npm install @conalog/patch-map ``` +#### CDN +```html + + +``` + ### Usage Here's a quick example to get you started: [Example](https://codesandbox.io/p/sandbox/yvjrpx) ```js diff --git a/README_KR.md b/README_KR.md index c52cd093..f6efb254 100644 --- a/README_KR.md +++ b/README_KR.md @@ -46,11 +46,17 @@ PATCH MAP은 PATCH 서비스의 요구 사항을 충족시키기 위해 `pixi.js ## 🚀 시작하기 ### 설치 -npm을 이용한 `@conalog/patch-map` 설치: +#### NPM ```sh npm install @conalog/patch-map ``` +#### CDN +```html + + +``` + ### 기본 예제 시작하는 데 도움이 되는 간단한 예제입니다: [예제](https://codesandbox.io/p/sandbox/yvjrpx) ```js From 542458c6a511d0b522d5566b91c6c3190a9d667b Mon Sep 17 00:00:00 2001 From: MinHo Lim Date: Fri, 30 May 2025 15:52:28 +0900 Subject: [PATCH 12/12] fix usage --- README.md | 70 +++++++++++++++++++++++++--------------------------- README_KR.md | 70 +++++++++++++++++++++++++--------------------------- 2 files changed, 68 insertions(+), 72 deletions(-) diff --git a/README.md b/README.md index e60d3225..84ee0957 100644 --- a/README.md +++ b/README.md @@ -60,44 +60,42 @@ npm install @conalog/patch-map ### Usage Here's a quick example to get you started: [Example](https://codesandbox.io/p/sandbox/yvjrpx) ```js -(async () => { - import { Patchmap } from '@conalog/patch-map'; - - const data = [ - { - type: 'group', - id: 'group-id-1', - label: 'group-label-1', - items: [{ - type: 'grid', - id: 'grid-1', - label: 'grid-label-1', - cells: [ [1, 0, 1], [1, 1, 1] ], - position: { x: 0, y: 0 }, - itemSize: { width: 40, height: 80 }, - components: [ - { - type: 'background', - texture: { - type: 'rect', - fill: 'white', - borderWidth: 2, - borderColor: 'primary.dark', - radius: 4, - } - }, - { type: 'icon', asset: 'loading', size: 16 } - ] - }] - } - ]; +import { Patchmap } from '@conalog/patch-map'; - const patchmap = new Patchmap(); +const data = [ + { + type: 'group', + id: 'group-id-1', + label: 'group-label-1', + items: [{ + type: 'grid', + id: 'grid-1', + label: 'grid-label-1', + cells: [ [1, 0, 1], [1, 1, 1] ], + position: { x: 0, y: 0 }, + itemSize: { width: 40, height: 80 }, + components: [ + { + type: 'background', + texture: { + type: 'rect', + fill: 'white', + borderWidth: 2, + borderColor: 'primary.dark', + radius: 4, + } + }, + { type: 'icon', asset: 'loading', size: 16 } + ] + }] + } +]; - await patchmap.init(document.body); - - patchmap.draw(data); -})() +const patchmap = new Patchmap(); + +await patchmap.init(document.body); + +patchmap.draw(data); ```
diff --git a/README_KR.md b/README_KR.md index f6efb254..a7c6a2f2 100644 --- a/README_KR.md +++ b/README_KR.md @@ -60,44 +60,42 @@ npm install @conalog/patch-map ### 기본 예제 시작하는 데 도움이 되는 간단한 예제입니다: [예제](https://codesandbox.io/p/sandbox/yvjrpx) ```js -(async () => { - import { Patchmap } from '@conalog/patch-map'; - - const data = [ - { - type: 'group', - id: 'group-id-1', - label: 'group-label-1', - items: [{ - type: 'grid', - id: 'grid-1', - label: 'grid-label-1', - cells: [ [1, 0, 1], [1, 1, 1] ], - position: { x: 0, y: 0 }, - itemSize: { width: 40, height: 80 }, - components: [ - { - type: 'background', - texture: { - type: 'rect', - fill: 'white', - borderWidth: 2, - borderColor: 'primary.dark', - radius: 4, - } - }, - { type: 'icon', asset: 'loading', size: 16 } - ] - }] - } - ]; +import { Patchmap } from '@conalog/patch-map'; + +const data = [ + { + type: 'group', + id: 'group-id-1', + label: 'group-label-1', + items: [{ + type: 'grid', + id: 'grid-1', + label: 'grid-label-1', + cells: [ [1, 0, 1], [1, 1, 1] ], + position: { x: 0, y: 0 }, + itemSize: { width: 40, height: 80 }, + components: [ + { + type: 'background', + texture: { + type: 'rect', + fill: 'white', + borderWidth: 2, + borderColor: 'primary.dark', + radius: 4, + } + }, + { type: 'icon', asset: 'loading', size: 16 } + ] + }] + } +]; - const patchmap = new Patchmap(); +const patchmap = new Patchmap(); - await patchmap.init(document.body); - - patchmap.draw(data); -})() +await patchmap.init(document.body); + +patchmap.draw(data); ```