docs: include CDN information and links to examples

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.
-It enables flexible and fast creation of 2D content.
+PATCH MAP is an optimized canvas library built on pixi.js and pixi-viewport, tailored to meet the requirements of PATCH services.
+<br/>
+Therefore, to use this, an understanding of the following two libraries is essential.
 
-- **[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)**  
 
 <br/>
 
@@ -45,52 +46,56 @@ It enables flexible and fast creation of 2D content.
 ## 🚀 Getting Started
 
 ### Install
-Install `@conalog/patch-map` using npm:
+#### NPM
 ```sh
 npm install @conalog/patch-map
 ```
 
+#### CDN
+```html
+<script src="https://cdn.jsdelivr.net/npm/pixi.js@8.9.2/dist/pixi.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@conalog/patch-map@v0.1.9/dist/index.umd.js"></script>
+```
+
 ### 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';
-
-  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,
-            },
+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 }
-        ]
-      }]
-    }
-  ];
+        },
+        { 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);
 ```
 
 <br/>
@@ -116,7 +121,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
@@ -129,7 +134,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:
@@ -196,8 +201,8 @@ const data = [
             borderWidth: 2,
             borderColor: 'primary.dark',
             radius: 4,
-          },
-        }
+          }
+        },
         { type: 'icon', asset: 'loading', size: 16 }
       ]
     }]
@@ -331,7 +336,7 @@ patchmap.viewport.plugin.remove('mouse-edges');
 <br/>
 
 ### `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.
 
 <br/>
 

README_KR.md

@@ -1,11 +1,12 @@
 # PATCH MAP
 [English](./README.md) | 한국어
 
-PATCH MAP은 PATCH 서비스의 요구 사항을 충족시키기 위해 `pixijs`와 `pixi-viewport`를 기반으로 최적화된 캔버스 라이브러리입니다.
-유연하고 빠른 2D 콘텐츠 생성을 가능하게 합니다.
+PATCH MAP은 PATCH 서비스의 요구 사항을 충족시키기 위해 `pixi.js`와 `pixi-viewport`를 기반으로 최적화된 캔버스 라이브러리입니다.
+<br/>
+따라서 이를 사용하기 위해서는 아래 두 라이브러리에 대한 이해가 필수적입니다.
 
-- **[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)**  
 
 <br/>
 
@@ -45,52 +46,56 @@ PATCH MAP은 PATCH 서비스의 요구 사항을 충족시키기 위해 `pixijs`
 ## 🚀 시작하기
 
 ### 설치
-npm을 이용한 `@conalog/patch-map` 설치:
+#### NPM
 ```sh
 npm install @conalog/patch-map
 ```
 
+#### CDN
+```html
+<script src="https://cdn.jsdelivr.net/npm/pixi.js@8.9.2/dist/pixi.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@conalog/patch-map@v0.1.9/dist/index.umd.js"></script>
+```
+
 ### 기본 예제
-시작하는 데 도움이 되는 간단한 예제입니다:
+시작하는 데 도움이 되는 간단한 예제입니다: [예제](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,
-            },
+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 }
-        ]
-      }]
-    }
-  ];
+        },
+        { 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);
 ```
 
 <br/>
@@ -117,7 +122,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
@@ -130,7 +135,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:
@@ -196,8 +201,8 @@ const data = [
             borderWidth: 2,
             borderColor: 'primary.dark',
             radius: 4,
-          },
-        }
+          }
+        },
         { type: 'icon', texture: 'loading', size: 16 }
       ]
     }]
@@ -331,7 +336,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)를 참조하세요.
 
 <br/>
 

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": [],

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<string, unknown>;
   split?: number; // default: 0