@operato/scene-indoor-map 0.0.16

package/dist/rack.js

@@ -0,0 +1,84 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import { Component, RectPath } from '@hatiolab/things-scene';
+const NATURE = {
+    mutable: false,
+    resizable: true,
+    rotatable: true,
+    properties: [{
+            type: 'number',
+            label: 'depth',
+            name: 'depth',
+            property: 'depth'
+        }, {
+            type: 'number',
+            label: 'shelves',
+            name: 'shelves',
+            property: 'shelves'
+        }, {
+            type: 'string',
+            label: 'location-pattern',
+            name: 'locPattern',
+            placeholder: '{z}{s}-{u}-{sh}',
+            property: 'locPattern'
+        }, {
+            type: 'string',
+            label: 'zone',
+            name: 'zone',
+            property: 'zone'
+        }, {
+            type: 'string',
+            label: 'section',
+            name: 'section',
+            property: 'section'
+        }, {
+            type: 'string',
+            label: 'unit',
+            name: 'unit',
+            property: 'unit'
+        }, {
+            type: 'string',
+            label: 'shelf-pattern',
+            name: 'shelfPattern',
+            placeholder: '#',
+            property: 'shelfPattern'
+        }],
+    help: 'scene/component/rack'
+};
+export default class Rack extends RectPath(Component) {
+    is3dish() {
+        return true;
+    }
+    draw(context) {
+        var { left, top, width, height, strokeStyle, lineWidth, fillStyle, alpha = 1, } = this.model;
+        context.beginPath();
+        context.rect(left, top, width, height);
+        context.strokeStyle = strokeStyle;
+        context.lineWidth = lineWidth;
+        context.globalAlpha = alpha * 0.4;
+        context.stroke();
+        context.beginPath();
+        context.rect(left + width * 0.15, top + height * 0.15, width * 0.7, height * 0.7);
+        context.fillStyle = fillStyle;
+        context.globalAlpha = alpha * 0.5;
+        context.fill();
+        context.beginPath();
+        context.moveTo(left, top);
+        context.lineTo(left + width, top + height);
+        context.moveTo(left, top + height);
+        context.lineTo(left + width, top);
+        context.strokeStyle = strokeStyle;
+        context.lineWidth = lineWidth;
+        context.globalAlpha = alpha * 0.4;
+        context.stroke();
+    }
+    get nature() {
+        return NATURE;
+    }
+    get hasTextProperty() {
+        return false;
+    }
+}
+Component.register('rack', Rack);
+//# sourceMappingURL=rack.js.map

package/dist/rack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rack.js","sourceRoot":"","sources":["../src/rack.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\nimport { Component, RectPath } from '@hatiolab/things-scene';\n\nconst NATURE = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [{\n    type: 'number',\n    label: 'depth',\n    name: 'depth',\n    property: 'depth'\n  }, {\n    type: 'number',\n    label: 'shelves',\n    name: 'shelves',\n    property: 'shelves'\n  }, {\n    type: 'string',\n    label: 'location-pattern',\n    name: 'locPattern',\n    placeholder: '{z}{s}-{u}-{sh}',\n    property: 'locPattern'\n  }, {\n    type: 'string',\n    label: 'zone',\n    name: 'zone',\n    property: 'zone'\n  }, {\n    type: 'string',\n    label: 'section',\n    name: 'section',\n    property: 'section'\n  }, {\n    type: 'string',\n    label: 'unit',\n    name: 'unit',\n    property: 'unit'\n  }, {\n    type: 'string',\n    label: 'shelf-pattern',\n    name: 'shelfPattern',\n    placeholder: '#',\n    property: 'shelfPattern'\n  }],\n  help: 'scene/component/rack'\n}\n\nexport default class Rack extends RectPath(Component) {\n\n  is3dish() {\n    return true\n  }\n\n  draw(context: CanvasRenderingContext2D) {\n\n    var {\n      left,\n      top,\n      width,\n      height,\n      strokeStyle,\n      lineWidth,\n      fillStyle,\n      alpha = 1,\n    } = this.model;\n\n    context.beginPath()\n    context.rect(left, top, width, height)\n    context.strokeStyle = strokeStyle\n    context.lineWidth = lineWidth\n    context.globalAlpha = alpha * 0.4\n    context.stroke()\n\n    context.beginPath()\n    context.rect(left + width * 0.15, top + height * 0.15, width * 0.7, height * 0.7)\n    context.fillStyle = fillStyle\n    context.globalAlpha = alpha * 0.5\n    context.fill()\n\n    context.beginPath()\n    context.moveTo(left, top)\n    context.lineTo(left + width, top + height)\n    context.moveTo(left, top + height)\n    context.lineTo(left + width, top)\n    context.strokeStyle = strokeStyle\n    context.lineWidth = lineWidth\n    context.globalAlpha = alpha * 0.4\n    context.stroke()\n  }\n\n  get nature() {\n    return NATURE\n  }\n\n  get hasTextProperty() {\n    return false;\n  }\n\n}\n\nComponent.register('rack', Rack)\n"]}

package/dist/templates/beacon.d.ts

@@ -0,0 +1,15 @@
+declare const _default: {
+    type: string;
+    description: string;
+    group: string;
+    icon: any;
+    model: {
+        type: string;
+        left: number;
+        top: number;
+        zPos: number;
+        width: number;
+        height: number;
+    };
+};
+export default _default;

package/dist/templates/beacon.js

@@ -0,0 +1,16 @@
+import icon from '../../assets/beacon.png';
+export default {
+    type: 'beacon',
+    description: 'beacon',
+    group: 'IoT',
+    icon,
+    model: {
+        type: 'beacon',
+        left: 100,
+        top: 100,
+        zPos: 0,
+        width: 100,
+        height: 100
+    }
+};
+//# sourceMappingURL=beacon.js.map

package/dist/templates/beacon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"beacon.js","sourceRoot":"","sources":["../../src/templates/beacon.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,yBAAyB,CAAC;AAE3C,eAAe;IACb,IAAI,EAAE,QAAQ;IACd,WAAW,EAAE,QAAQ;IACrB,KAAK,EAAE,KAAK;IACZ,IAAI;IACJ,KAAK,EAAE;QACL,IAAI,EAAE,QAAQ;QACd,IAAI,EAAE,GAAG;QACT,GAAG,EAAE,GAAG;QACR,IAAI,EAAE,CAAC;QACP,KAAK,EAAE,GAAG;QACV,MAAM,EAAE,GAAG;KACZ;CACF,CAAA","sourcesContent":["import icon from '../../assets/beacon.png';\n\nexport default {\n  type: 'beacon',\n  description: 'beacon',\n  group: 'IoT', /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */\n  icon,\n  model: {\n    type: 'beacon',\n    left: 100,\n    top: 100,\n    zPos: 0,\n    width: 100,\n    height: 100\n  }\n}\n"]}

package/dist/templates/camera.d.ts

@@ -0,0 +1,20 @@
+declare const _default: {
+    type: string;
+    description: string;
+    group: string;
+    icon: any;
+    model: {
+        type: string;
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+        lineWidth: number;
+        strokeStyle: string;
+        fillStyle: string;
+        yaw: number;
+        pitch: number;
+        roll: number;
+    };
+};
+export default _default;

package/dist/templates/camera.js

@@ -0,0 +1,21 @@
+import icon from '../../assets/no-image.png';
+export default {
+    type: 'camera',
+    description: 'camera',
+    group: 'IoT',
+    icon,
+    model: {
+        type: 'camera',
+        left: 100,
+        top: 100,
+        width: 600,
+        height: 400,
+        lineWidth: 1,
+        strokeStyle: 'black',
+        fillStyle: 'yellow',
+        yaw: 0.2,
+        pitch: 0.2,
+        roll: 0.2
+    }
+};
+//# sourceMappingURL=camera.js.map

package/dist/templates/camera.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"camera.js","sourceRoot":"","sources":["../../src/templates/camera.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,2BAA2B,CAAC;AAE7C,eAAe;IACb,IAAI,EAAE,QAAQ;IACd,WAAW,EAAE,QAAQ;IACrB,KAAK,EAAE,KAAK;IACZ,IAAI;IACJ,KAAK,EAAE;QACL,IAAI,EAAE,QAAQ;QACd,IAAI,EAAE,GAAG;QACT,GAAG,EAAE,GAAG;QACR,KAAK,EAAE,GAAG;QACV,MAAM,EAAE,GAAG;QACX,SAAS,EAAE,CAAC;QACZ,WAAW,EAAE,OAAO;QACpB,SAAS,EAAE,QAAQ;QACnB,GAAG,EAAE,GAAG;QACR,KAAK,EAAE,GAAG;QACV,IAAI,EAAE,GAAG;KACV;CACF,CAAA","sourcesContent":["import icon from '../../assets/no-image.png';\n\nexport default {\n  type: 'camera',\n  description: 'camera',\n  group: 'IoT', /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */\n  icon,\n  model: {\n    type: 'camera',\n    left: 100,\n    top: 100,\n    width: 600,\n    height: 400,\n    lineWidth: 1,\n    strokeStyle: 'black',\n    fillStyle: 'yellow',\n    yaw: 0.2,\n    pitch: 0.2,\n    roll: 0.2\n  }\n}\n"]}

package/dist/templates/index.d.ts

@@ -0,0 +1,36 @@
+declare const _default: ({
+    type: string;
+    description: string;
+    group: string;
+    icon: any;
+    model: {
+        type: string;
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+        fontSize: number;
+        lineWidth: number;
+    };
+} | {
+    type: string;
+    description: string;
+    group: string;
+    icon: any;
+    model: {
+        type: string;
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+        depth: number;
+        shelves: number;
+        locPattern: string;
+        shelfPattern: string;
+        fillStyle: string;
+        strokeStyle: string;
+        lineWidth: number;
+        alpha: number;
+    };
+})[];
+export default _default;

package/dist/templates/index.js

@@ -0,0 +1,4 @@
+import indoorMap from './indoor-map';
+import rack from './rack';
+export default [indoorMap, rack];
+//# 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,SAAS,MAAM,cAAc,CAAA;AACpC,OAAO,IAAI,MAAM,QAAQ,CAAA;AAEzB,eAAe,CAAC,SAAS,EAAE,IAAI,CAAC,CAAA","sourcesContent":["import indoorMap from './indoor-map'\nimport rack from './rack'\n\nexport default [indoorMap, rack]\n"]}

package/dist/templates/indoor-map.d.ts

@@ -0,0 +1,16 @@
+declare const _default: {
+    type: string;
+    description: string;
+    group: string;
+    icon: any;
+    model: {
+        type: string;
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+        fontSize: number;
+        lineWidth: number;
+    };
+};
+export default _default;

package/dist/templates/indoor-map.js

@@ -0,0 +1,17 @@
+import icon from '../../assets/indoor-map.png';
+export default {
+    type: 'indoor map',
+    description: 'indoor map',
+    group: 'container' /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */,
+    icon,
+    model: {
+        type: 'indoor-map',
+        left: 100,
+        top: 100,
+        width: 200,
+        height: 200,
+        fontSize: 80,
+        lineWidth: 1
+    }
+};
+//# sourceMappingURL=indoor-map.js.map

package/dist/templates/indoor-map.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"indoor-map.js","sourceRoot":"","sources":["../../src/templates/indoor-map.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,6BAA6B,CAAC;AAE/C,eAAe;IACb,IAAI,EAAE,YAAY;IAClB,WAAW,EAAE,YAAY;IACzB,KAAK,EACH,WAAW,CAAC,gGAAgG;IAC9G,IAAI;IACJ,KAAK,EAAE;QACL,IAAI,EAAE,YAAY;QAClB,IAAI,EAAE,GAAG;QACT,GAAG,EAAE,GAAG;QACR,KAAK,EAAE,GAAG;QACV,MAAM,EAAE,GAAG;QACX,QAAQ,EAAE,EAAE;QACZ,SAAS,EAAE,CAAC;KACb;CACF,CAAA","sourcesContent":["import icon from '../../assets/indoor-map.png';\n\nexport default {\n  type: 'indoor map',\n  description: 'indoor map',\n  group:\n    'container' /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */,\n  icon,\n  model: {\n    type: 'indoor-map',\n    left: 100,\n    top: 100,\n    width: 200,\n    height: 200,\n    fontSize: 80,\n    lineWidth: 1\n  }\n}\n"]}

package/dist/templates/rack.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;
+        depth: number;
+        shelves: number;
+        locPattern: string;
+        shelfPattern: string;
+        fillStyle: string;
+        strokeStyle: string;
+        lineWidth: number;
+        alpha: number;
+    };
+};
+export default _default;

package/dist/templates/rack.js

@@ -0,0 +1,23 @@
+import icon from '../../assets/rack.png';
+export default {
+    type: 'rack',
+    description: 'rack in warehouse',
+    group: 'warehouse',
+    icon,
+    model: {
+        type: 'rack',
+        left: 100,
+        top: 100,
+        width: 100,
+        height: 100,
+        depth: 100,
+        shelves: 1,
+        locPattern: '{z}{s}-{u}-{sh}',
+        shelfPattern: '#',
+        fillStyle: '#ffffff',
+        strokeStyle: '#999',
+        lineWidth: 1,
+        alpha: 1
+    }
+};
+//# sourceMappingURL=rack.js.map

package/dist/templates/rack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rack.js","sourceRoot":"","sources":["../../src/templates/rack.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,uBAAuB,CAAC;AAEzC,eAAe;IACb,IAAI,EAAE,MAAM;IACZ,WAAW,EAAE,mBAAmB;IAChC,KAAK,EAAE,WAAW;IAClB,IAAI;IACJ,KAAK,EAAE;QACL,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,GAAG;QACT,GAAG,EAAE,GAAG;QACR,KAAK,EAAE,GAAG;QACV,MAAM,EAAE,GAAG;QACX,KAAK,EAAE,GAAG;QACV,OAAO,EAAE,CAAC;QACV,UAAU,EAAE,iBAAiB;QAC7B,YAAY,EAAE,GAAG;QACjB,SAAS,EAAE,SAAS;QACpB,WAAW,EAAE,MAAM;QACnB,SAAS,EAAE,CAAC;QACZ,KAAK,EAAE,CAAC;KACT;CACF,CAAA","sourcesContent":["import icon from '../../assets/rack.png';\n\nexport default {\n  type: 'rack',\n  description: 'rack in warehouse',\n  group: 'warehouse', /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */\n  icon,\n  model: {\n    type: 'rack',\n    left: 100,\n    top: 100,\n    width: 100,\n    height: 100,\n    depth: 100,\n    shelves: 1,\n    locPattern: '{z}{s}-{u}-{sh}',\n    shelfPattern: '#',\n    fillStyle: '#ffffff',\n    strokeStyle: '#999',\n    lineWidth: 1,\n    alpha: 1\n  }\n}\n"]}

package/helps/scene/component/indoor-map.ko.md

@@ -0,0 +1,65 @@
+# indoor-map
+
+## example
+
+사각형 컴포넌트에 이벤트를 걸어 인도어 층을 제어
+> - **사각형 컴포넌트에 click이벤트를 걸어 Indoor에 전달**  
+> - **Indoor의 value속성을 바꿔주면 Floor가 변경된다.**  
+
+![gif][gif-01]  
+
+
+[gif-01]: ../images/indoor-button-finish-01.gif
+
+1. 3개의 층을 가진 Indoor를 생성한다.
+
+![인도어][indoor-create]  
+
+2. 구별을 위해 층마다 텍스트를 넣었다.
+
+![인도어][indoor-text]  
+
+
+3. 인도어맵의 아이디를 'indoor'로 지정한다.
+
+![인도어][indoor-id]  
+
+4. 버튼 이벤트 추가
+- 사각형 3개를 그린 후, '효과 창'에서 변수정보에 indoor를 선택한다.  
+(변수 정보에는 기본 이벤트와 컴포넌트들의 아이디 리스트가 나온다.)   
+![버튼이벤트][button-02]
+
+- 각 사각형마다 값을 매핑한다. (사각형을 클릭할 시, indoor 아이디를 가진 컴포넌트에 '0'이란 데이터를 넘겨주게 된다.)
+  - 1층 - 0
+  - 2층 - 1
+  - 3층 - 2  
+
+![버튼이벤트][button-03]  
+
+
+[button-02]: ../images/button-evnet-mapping-02.png
+
+[button-03]: ../images/button-evnet-mapping-03.png
+
+5. indoor map 설정
+
+- 인도어맵 컴포넌트의 데이터 바인딩 설정을 아래의 그림과 같이 설정한다.  
+(데이터를 받을때 자신의 value 속성을 같이 바꿔주는 설정) 
+
+![버튼이벤트][indoor-setting]
+
+6.  결과 확인
+  - 모든 설정이 완료되었다면 아래와 같이 **사각형을 클릭할 때마다 인도어 맵의 층이 바뀌는 것**을 확인할 수 있다.
+  ![gif-01]
+
+[gif-01]: ../images/indoor-button-finish-01.gif
+
+
+
+[indoor-create]: ../images/indoor-create-01.png
+
+[indoor-text]: ../images/indoor-create-02.png
+
+[indoor-id]: ../images/indoor-create-03.png
+
+[indoor-setting]: ../images/indoor-setting-01.png

package/helps/scene/component/indoor-map.md

@@ -0,0 +1,65 @@
+# indoor-map
+
+## example
+
+Control the indoor layer by triggering events on the rectangular component
+>-**Apply a click event to a square component and deliver it to indoors**
+>-**If you change the value property of Indoor, the Floor will be changed.**
+
+![gif][gif-01]  
+
+
+[gif-01]: ../images/indoor-button-finish-01.gif
+
+1. It creates indoor with three layers.
+
+![indoor][indoor-create]  
+
+2. Text is put in each layer for distinction.
+
+![indoor][indoor-text]  
+
+
+3. The ID of the indoor map is designated as'indoor'.
+
+![indoor][indoor-id]  
+
+4. Add button event
+- After drawing 3 squares, select indoor as the variable information in the'effect window'.
+(In the variable information, a list of IDs of basic events and components is shown.)  
+![buttonEvent][button-02]
+
+- Map values for each square. (When clicking the square, data of '0' is passed to the component with the indoor ID.)
+  - 1layer - 0
+  - 2layer - 1
+  - 3layer - 2  
+
+![buttonEvent][button-03]  
+
+
+[button-02]: ../images/button-evnet-mapping-02.png
+
+[button-03]: ../images/button-evnet-mapping-03.png
+
+5. indoor map setting
+
+- Set the data binding setting of the indoor map component as shown in the figure below.
+(Setting to change its value property when receiving data)
+
+![buttonEvent][indoor-setting]
+
+6.  check result
+  - If all settings are complete, you can see that the indoor map layer changes every time you click the square as shown below.
+  ![gif-01]
+
+[gif-01]: ../images/indoor-button-finish-01.gif
+
+
+
+[indoor-create]: ../images/indoor-create-01.png
+
+[indoor-text]: ../images/indoor-create-02.png
+
+[indoor-id]: ../images/indoor-create-03.png
+
+[indoor-setting]: ../images/indoor-setting-01.png

package/helps/scene/component/indoor-map.zh.md

@@ -0,0 +1,65 @@
+# indoor-map
+
+## example
+
+通过触发矩形组件上的事件来控制室内层
+> - **将矩形组件的click事件传递到Indoor组件**  
+> - **更改Indoor组件的value属性Floor会发生变化**  
+
+![gif][gif-01]  
+
+
+[gif-01]: ../images/indoor-button-finish-01.gif
+
+1. 创建具有三层的indoor map
+
+  ![indoor][indoor-create]  
+
+2. 为了区分为每层更改显示层数
+
+  ![indoor][indoor-text]  
+
+
+3. 指定室内地图的ID。
+
+  ![indoor][indoor-id]  
+
+4. 增加按钮
+   - 绘制3个矩形后，在“效果窗口”中的点击事件中indoor作为变量信息。
+   (在变量信息中，显示基本事件处理方法和组件的ID的列表。)   
+   ![buttonEvent][button-02]
+
+   - 每个矩形的地图值。 （单击矩形时，数据“0”将传递到具有室内ID的组件。）
+     - 1층 - 0
+     - 2층 - 1
+     - 3층 - 2  
+
+  ![buttonEvent][button-03]  
+
+
+  [button-02]: ../images/button-evnet-mapping-02.png
+
+  [button-03]: ../images/button-evnet-mapping-03.png
+
+5. indoor map配置
+
+   - 如下图设置室内地图组件的数据绑定设置。
+    （设置为在接收数据时更改其value属性）
+
+   ![buttonEvent][indoor-setting]
+
+6.  确认结果
+    - 如果所有设置均已完成，则每次单击矩形时，都可以看到室内地图图层发生变化，如下所示。
+    ![gif-01]
+
+    [gif-01]: ../images/indoor-button-finish-01.gif
+
+
+
+[indoor-create]: ../images/indoor-create-01.png
+
+[indoor-text]: ../images/indoor-create-02.png
+
+[indoor-id]: ../images/indoor-create-03.png
+
+[indoor-setting]: ../images/indoor-setting-01.png

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

@@ -0,0 +1,17 @@
+# rack
+
+창고용 랙을 표현할 때 사용하는 컴포넌트. 높이와 층을 적용할 수 있으며 랙과 층마다 고유 ID를 부여할 수 있다.
+
+## properties
+
+1. Depth(Number) - 3D 모델링으로 전환되었을 때, 한 층의 높이
+2. Shelves(Number) - 3D 모델링으로 전환되었을 때, 층의 개수
+3. Location Pattern(String) - 랙의 위치 및 층에 고유한 ID를 부여할 때 정의하는 패턴. {}안에 Z(Zone), S(Selection), U(Unit), Sh(Shelf)의 패턴을 정의한다.
+4. Zone(String) - 패턴에 적용 될 Zone의 값
+5. Selection(String) - 패턴에 적용 될 Selection 값
+6. Unit(String) - 패턴에 적용 될 Unit 값
+7. Shelf Pattern(String) - 패턴에 적용 될 Shelf Pattern 값  
+   \# - 층의 숫자가 동적으로 적용  
+   0 - 층의 숫자가 0의 갯수대로 자릿수 고정(ex. 0 = 0~9 / 00 = 00~99)
+
+

package/helps/scene/component/rack.md

@@ -0,0 +1,15 @@
+# rack
+
+The component which is used to display warehouse rack. It can apply the height and layer, and can give a unique ID number in each rack and layer.
+
+## Properties
+
+1. Depth(Number) - The height of one layer when converted to 3D modeling.
+2. Shelves(Number) - The number of layer when converted to 3D modeling.
+3. Location Pattern(String) - The pattern which is defined when give a unique ID number in the location and layer of rack. Define the pattern of Z(Zone), S(Selection), U(Unit), Sh(Shelf) in {}.
+4. Zone(String) - The value of Zone which will be applied to the pattern.
+5. Selection(String) - The selection value which will be applied to the pattern.
+6. Unit(String) - The Unit value which will be applied to the pattern.
+7. Shelf Pattern(String) - The value of Shelf Pattern which will be applied to the pattern.  
+   \# - Dynamically apply the number of layer.  
+   0 - Fix the number of digits of layers according to the number of 0. (ex. 0 = 0~9 / 00 = 00~99)

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

@@ -0,0 +1,16 @@
+# rack
+
+被用于显示库架时的组件。可以适用高度和层，并且可以在各个支架和层，赋予固有的ID。
+
+
+## properties
+
+1. 深度(Depth) - 当转换为3D建模时，一层的高度。
+2. 站位高度(Shelves) - 当转换为3D建模时，层的数量。
+3. 位置模式(Location Pattern) - 被定义在为支架的位置以及层赋予固有的ID时的模式。在{}中，定义Z(区域)、S(部分)、U(单位)、Sh(货架)的模式。
+4. 区域(Zone) - 将会被适用于模式的区域的值。
+5. 部分(Selection) - 将会被适用于模式的部分值。
+6. 单位(Unit) - 将会被适用于模式的单位值。
+7. 架子模式(Shelf Pattern) - 将会被适用于模式的架子模式值。  
+   \# - 动态适用层的数字。  
+   0 - 根据0个数，固定层的位数。(ex. 0 = 0~9 / 00 = 00~99)

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@operato/scene-indoor-map",
+  "version": "0.0.16",
+  "description": "Indoor Map component for things-scene.",
+  "license": "MIT",
+  "author": "heartyoh",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "things-scene": true,
+  "publishConfig": {
+    "access": "public",
+    "@operato:registry": "https://registry.npmjs.org"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/things-scene/operato-scene.git",
+    "directory": "packages/indoor-map"
+  },
+  "scripts": {
+    "serve": "tsc && things-factory-dev",
+    "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
+    "build": "tsc",
+    "prepublish": "tsc",
+    "lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
+    "format": "eslint --ext .ts,.html . --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore",
+    "migration": "things-factory-migration"
+  },
+  "dependencies": {
+    "@hatiolab/things-scene": "^2.7.25"
+  },
+  "devDependencies": {
+    "@hatiolab/prettier-config": "^1.0.0",
+    "@operato/board": "^0.2.44",
+    "@things-factory/builder": "^4.0.12",
+    "@things-factory/operato-board": "^4.0.12",
+    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/parser": "^4.33.0",
+    "@web/dev-server": "^0.1.28",
+    "concurrently": "^5.3.0",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.3.0",
+    "husky": "^4.3.8",
+    "lint-staged": "^10.5.4",
+    "prettier": "^2.4.1",
+    "tslib": "^2.3.1",
+    "typescript": "^4.5.2"
+  },
+  "prettier": "@hatiolab/prettier-config",
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.ts": [
+      "eslint --fix",
+      "prettier --write"
+    ]
+  },
+  "gitHead": "29382f4c11826d2e6514c545ab4d7b4d2f3bbf0d"
+}