@operato/scene-tab 1.2.62 → 1.2.76

package/CHANGELOG.md

@@ -3,6 +3,32 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.2.76](https://github.com/things-scene/operato-scene/compare/v1.2.75...v1.2.76) (2023-10-28)
+
+
+### :bug: Bug Fix
+
+* scene-tab ([592817b](https://github.com/things-scene/operato-scene/commit/592817baf5ec6db47bb4eafc3fc181245daeee7b))
+* scene-tab ([ad62f96](https://github.com/things-scene/operato-scene/commit/ad62f967b149eb5adf8f2e0714d79e8a9dc7186c))
+
+
+
+## [1.2.66](https://github.com/things-scene/operato-scene/compare/v1.2.65...v1.2.66) (2023-09-14)
+
+**Note:** Version bump only for package @operato/scene-tab
+
+
+
+
+
+## [1.2.65](https://github.com/things-scene/operato-scene/compare/v1.2.64...v1.2.65) (2023-09-14)
+
+**Note:** Version bump only for package @operato/scene-tab
+
+
+
+
+
 ## [1.2.62](https://github.com/things-scene/operato-scene/compare/v1.2.61...v1.2.62) (2023-09-11)
 
 **Note:** Version bump only for package @operato/scene-tab

package/dist/tab-container.js

@@ -50,18 +50,20 @@ export default class TabContainer extends Container {
         this.setState('layoutConfig', config);
     }
     get activeCard() {
-        return this.components[this.getState('layoutConfig').activeIndex];
+        return this.components[this.getState('layoutConfig').activeIndex || 0];
     }
     get activeIndex() {
-        return this.getState('activeIndex');
+        return this.getState('activeIndex') || 0;
     }
     set activeIndex(activeIndex) {
         this.setState('activeIndex', Number(activeIndex));
     }
     ready() {
         super.ready();
-        if (this.components.length == 0)
+        if (this.components.length == 0) {
             this.addCard();
+        }
+        this.data = this.state.activeIndex;
     }
     postrender(context) {
         if (!this.app.isViewMode && this._focused) {
@@ -112,6 +114,7 @@ export default class TabContainer extends Container {
                 ...this.layoutConfig,
                 activeIndex: after.activeIndex
             };
+            this.data = after.activeIndex;
         }
     }
     onmouseup(e) {

package/dist/tab-container.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab-container.js","sourceRoot":"","sources":["../src/tab-container.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\nimport { CardLayout, Component, ComponentNature, Container, Model, POINT, State } from '@hatiolab/things-scene'\n\nimport TabCard from './tab-card'\n\nconst LABEL_WIDTH = 25\nconst LABEL_HEIGHT = 25\n\nfunction rgba(r: number, g: number, b: number, a: number) {\n  return `rgba(${r}, ${g}, ${b}, ${a})`\n}\n\nconst NATURE: ComponentNature = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [\n    {\n      type: 'action',\n      label: 'add-card',\n      name: 'addCard',\n      property: {\n        icon: 'add_circle',\n        action: (tabContainer: TabContainer) => {\n          tabContainer.addCard()\n        }\n      }\n    },\n    {\n      type: 'number',\n      label: 'active index',\n      name: 'activeIndex'\n    }\n  ],\n  'value-property': 'activeIndex',\n  help: 'scene/component/tab-container'\n}\n\nexport default class TabContainer extends Container {\n  private _focused: boolean = false\n  private __down_point?: POINT\n\n  get nature() {\n    return NATURE\n  }\n\n  get layout() {\n    return CardLayout\n  }\n\n  get layoutConfig() {\n    return this.getState('layoutConfig')\n  }\n\n  set layoutConfig(config) {\n    this.setState('layoutConfig', config)\n  }\n\n  get activeCard(): TabCard {\n    return this.components[this.getState('layoutConfig').activeIndex] as TabCard\n  }\n\n  get activeIndex() {\n    return this.getState('activeIndex')\n  }\n\n  set activeIndex(activeIndex: number) {\n    this.setState('activeIndex', Number(activeIndex))\n  }\n\n  ready() {\n    super.ready()\n\n    if (this.components.length == 0) this.addCard()\n  }\n\n  postrender(context: CanvasRenderingContext2D) {\n    if (!this.app.isViewMode && this._focused) {\n      var { left, top, width, fillStyle } = this.state\n\n      // tabCard 선택 탭 그리기\n      for (let i = 0; i < this.components.length; i++) {\n        context.beginPath()\n\n        context.rect(left - LABEL_WIDTH, top + i * LABEL_HEIGHT, LABEL_WIDTH, LABEL_HEIGHT)\n\n        let color = 255 - ((20 * (i + 1)) % 255)\n        context.fillStyle = rgba(color, color, color, 1)\n        context.fill()\n\n        context.closePath()\n      }\n\n      context.beginPath()\n\n      context.moveTo(left, top)\n      context.lineTo(left - LABEL_WIDTH, top)\n      context.lineTo(left - LABEL_WIDTH, top + this.components.length * LABEL_HEIGHT)\n      context.lineTo(left, top + this.components.length * LABEL_HEIGHT)\n\n      context.strokeStyle = '#ccc'\n      context.stroke()\n\n      context.closePath()\n    }\n\n    super.postrender(context)\n  }\n\n  contains(x: number, y: number) {\n    var contains = super.contains(x, y)\n\n    if (this.app.isViewMode) return contains\n\n    var { left, top, width } = this.bounds\n    var h = LABEL_HEIGHT\n\n    contains =\n      contains ||\n      // card selector 영역에 포함되는지\n      (x < Math.max(left - LABEL_WIDTH, left) &&\n        x > Math.min(left - LABEL_WIDTH, left) &&\n        y < Math.max(top + h * this.size(), top) &&\n        y > Math.min(top + h * this.size(), top))\n\n    if (contains) this._focused = true\n    else this._focused = false\n\n    this.invalidate()\n    return contains\n  }\n\n  onchange(after: State) {\n    if ('activeIndex' in after) {\n      this.layoutConfig = {\n        ...this.layoutConfig,\n        activeIndex: after.activeIndex\n      }\n    }\n  }\n\n  onmouseup(e: MouseEvent) {\n    var down_point = this.__down_point\n    delete this.__down_point\n\n    if (!down_point || down_point.x != e.offsetX || down_point.y != e.offsetY) {\n      return\n    }\n\n    var point = this.transcoordC2S(e.offsetX, e.offsetY)\n\n    var { left, top } = this.state\n\n    var x = point.x - left\n    var y = point.y - top\n\n    if (x > 0) return\n\n    y /= LABEL_HEIGHT\n    y = Math.floor(y)\n\n    if (!this.layoutConfig) this.layoutConfig = {}\n\n    if (y >= this.components.length) return\n\n    // /* 생성 버튼이 클릭되면, 새로운 tabCard를 추가한다. */\n    // if(y == this.components.length) {\n    //   this.add(Model.compile({\n    //     type: 'tab-card',\n    //     width: 100,\n    //     height: 100\n    //   }))\n    // }\n    this.setState('activeIndex', y)\n  }\n\n  onmousedown(e: MouseEvent) {\n    this.__down_point = {\n      x: e.offsetX,\n      y: e.offsetY\n    }\n  }\n\n  addCard() {\n    const color = 255 - ((20 * (this.components.length + 1)) % 255)\n    const hex = color.toString(16)\n\n    const tabCard = Model.compile({\n      type: 'tab-card',\n      fillStyle: `#${hex}${hex}${hex}`,\n      top: 0,\n      left: 0,\n      width: 100,\n      height: 100\n    })\n\n    this.addComponent(tabCard)\n    this.setState('activeIndex', this.components.length - 1)\n  }\n}\n\nComponent.register('tab-container', TabContainer)\n"]}
+{"version":3,"file":"tab-container.js","sourceRoot":"","sources":["../src/tab-container.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\nimport { CardLayout, Component, ComponentNature, Container, Model, POINT, State } from '@hatiolab/things-scene'\n\nimport TabCard from './tab-card'\n\nconst LABEL_WIDTH = 25\nconst LABEL_HEIGHT = 25\n\nfunction rgba(r: number, g: number, b: number, a: number) {\n  return `rgba(${r}, ${g}, ${b}, ${a})`\n}\n\nconst NATURE: ComponentNature = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [\n    {\n      type: 'action',\n      label: 'add-card',\n      name: 'addCard',\n      property: {\n        icon: 'add_circle',\n        action: (tabContainer: TabContainer) => {\n          tabContainer.addCard()\n        }\n      }\n    },\n    {\n      type: 'number',\n      label: 'active index',\n      name: 'activeIndex'\n    }\n  ],\n  'value-property': 'activeIndex',\n  help: 'scene/component/tab-container'\n}\n\nexport default class TabContainer extends Container {\n  private _focused: boolean = false\n  private __down_point?: POINT\n\n  get nature() {\n    return NATURE\n  }\n\n  get layout() {\n    return CardLayout\n  }\n\n  get layoutConfig() {\n    return this.getState('layoutConfig')\n  }\n\n  set layoutConfig(config) {\n    this.setState('layoutConfig', config)\n  }\n\n  get activeCard(): TabCard {\n    return this.components[this.getState('layoutConfig').activeIndex || 0] as TabCard\n  }\n\n  get activeIndex() {\n    return this.getState('activeIndex') || 0\n  }\n\n  set activeIndex(activeIndex: number) {\n    this.setState('activeIndex', Number(activeIndex))\n  }\n\n  ready() {\n    super.ready()\n\n    if (this.components.length == 0) {\n      this.addCard()\n    }\n\n    this.data = this.state.activeIndex\n  }\n\n  postrender(context: CanvasRenderingContext2D) {\n    if (!this.app.isViewMode && this._focused) {\n      var { left, top, width, fillStyle } = this.state\n\n      // tabCard 선택 탭 그리기\n      for (let i = 0; i < this.components.length; i++) {\n        context.beginPath()\n\n        context.rect(left - LABEL_WIDTH, top + i * LABEL_HEIGHT, LABEL_WIDTH, LABEL_HEIGHT)\n\n        let color = 255 - ((20 * (i + 1)) % 255)\n        context.fillStyle = rgba(color, color, color, 1)\n        context.fill()\n\n        context.closePath()\n      }\n\n      context.beginPath()\n\n      context.moveTo(left, top)\n      context.lineTo(left - LABEL_WIDTH, top)\n      context.lineTo(left - LABEL_WIDTH, top + this.components.length * LABEL_HEIGHT)\n      context.lineTo(left, top + this.components.length * LABEL_HEIGHT)\n\n      context.strokeStyle = '#ccc'\n      context.stroke()\n\n      context.closePath()\n    }\n\n    super.postrender(context)\n  }\n\n  contains(x: number, y: number) {\n    var contains = super.contains(x, y)\n\n    if (this.app.isViewMode) return contains\n\n    var { left, top, width } = this.bounds\n    var h = LABEL_HEIGHT\n\n    contains =\n      contains ||\n      // card selector 영역에 포함되는지\n      (x < Math.max(left - LABEL_WIDTH, left) &&\n        x > Math.min(left - LABEL_WIDTH, left) &&\n        y < Math.max(top + h * this.size(), top) &&\n        y > Math.min(top + h * this.size(), top))\n\n    if (contains) this._focused = true\n    else this._focused = false\n\n    this.invalidate()\n    return contains\n  }\n\n  onchange(after: State) {\n    if ('activeIndex' in after) {\n      this.layoutConfig = {\n        ...this.layoutConfig,\n        activeIndex: after.activeIndex\n      }\n\n      this.data = after.activeIndex\n    }\n  }\n\n  onmouseup(e: MouseEvent) {\n    var down_point = this.__down_point\n    delete this.__down_point\n\n    if (!down_point || down_point.x != e.offsetX || down_point.y != e.offsetY) {\n      return\n    }\n\n    var point = this.transcoordC2S(e.offsetX, e.offsetY)\n\n    var { left, top } = this.state\n\n    var x = point.x - left\n    var y = point.y - top\n\n    if (x > 0) return\n\n    y /= LABEL_HEIGHT\n    y = Math.floor(y)\n\n    if (!this.layoutConfig) this.layoutConfig = {}\n\n    if (y >= this.components.length) return\n\n    // /* 생성 버튼이 클릭되면, 새로운 tabCard를 추가한다. */\n    // if(y == this.components.length) {\n    //   this.add(Model.compile({\n    //     type: 'tab-card',\n    //     width: 100,\n    //     height: 100\n    //   }))\n    // }\n    this.setState('activeIndex', y)\n  }\n\n  onmousedown(e: MouseEvent) {\n    this.__down_point = {\n      x: e.offsetX,\n      y: e.offsetY\n    }\n  }\n\n  addCard() {\n    const color = 255 - ((20 * (this.components.length + 1)) % 255)\n    const hex = color.toString(16)\n\n    const tabCard = Model.compile({\n      type: 'tab-card',\n      fillStyle: `#${hex}${hex}${hex}`,\n      top: 0,\n      left: 0,\n      width: 100,\n      height: 100\n    })\n\n    this.addComponent(tabCard)\n    this.setState('activeIndex', this.components.length - 1)\n  }\n}\n\nComponent.register('tab-container', TabContainer)\n"]}

package/dist/tab.d.ts

@@ -9,6 +9,7 @@ export default class Tab extends Container {
     private _reference;
     set reference(reference: any);
     set activeIndex(index: any);
+    ready(): void;
     render(context: CanvasRenderingContext2D): void;
     contains(x: number, y: number): boolean;
     dispose(): void;

package/dist/tab.js

@@ -57,7 +57,9 @@ const NATURE = {
             name: 'activeLineWidth',
             property: 'activeLineWidth'
         }
-    ]
+    ],
+    'value-property': 'activeIndex',
+    help: 'scene/component/tab'
 };
 export default class Tab extends Container {
     get layout() {
@@ -108,6 +110,11 @@ export default class Tab extends Container {
             this.reference.activeIndex = index;
         }
     }
+    ready() {
+        var _a;
+        super.ready();
+        this.data = ((_a = this.state) === null || _a === void 0 ? void 0 : _a.activeIndex) || 0;
+    }
     render(context) {
         super.render(context);
         if (this.reference) {
@@ -185,36 +192,10 @@ export default class Tab extends Container {
         this.activeIndex = this.state.activeIndex || 0;
     }
     setTabButtonsStyle(style) {
-        // var {
-        //   fillStyle,
-        //   activeFillStyle,
-        //   fontColor,
-        //   activeFontColor,
-        //   strokeStyle,
-        //   lineWidth = 0,
-        //   fontFamily,
-        //   fontSize,
-        //   lineHeight,
-        //   italic,
-        //   bold
-        // } = style
         var children = this.components;
         for (var i in children) {
             var tabBtn = children[i];
             tabBtn.set(style);
-            // tabBtn.set({
-            //   fillStyle: fillStyle,
-            //   activeFillStyle: activeFillStyle,
-            //   fontColor: fontColor,
-            //   activeFontColor: activeFontColor,
-            //   strokeStyle: strokeStyle,
-            //   lineWidth: lineWidth,
-            //   fontFamily: fontFamily,
-            //   fontSize: fontSize,
-            //   lineHeight: lineHeight,
-            //   italic: italic,
-            //   bold: bold
-            // })
         }
     }
     // reference가 변했을 때 (tab에 변화를 주기위해)
@@ -226,23 +207,13 @@ export default class Tab extends Container {
         // }
     }
     onchange(after, before) {
-        if (after.hasOwnProperty('reference')) {
+        if ('reference' in after) {
             this.reference = after.reference;
             this.invalidate();
         }
-        // if(after.hasOwnProperty("activeFillStyle")
-        //   || after.hasOwnProperty("activeFontColor")
-        //   || after.hasOwnProperty("fillStyle")
-        //   || after.hasOwnProperty("fontColor")
-        //   || after.hasOwnProperty("strokeStyle")
-        //   || after.hasOwnProperty("lineWidth")
-        //   || after.hasOwnProperty("fontFamily")
-        //   || after.hasOwnProperty("fontSize")
-        //   || after.hasOwnProperty("lineHeight")
-        //   || after.hasOwnProperty("italic")
-        //   || after.hasOwnProperty("bold")) {
-        //
-        // }
+        if ('activeIndex' in after) {
+            this.data = after.activeIndex;
+        }
         this.setTabButtonsStyle(after);
     }
 }

package/dist/tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab.js","sourceRoot":"","sources":["../src/tab.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\nimport {\n  Component,\n  ComponentNature,\n  Container,\n  LinearHorizontalLayout,\n  LinearVerticalLayout,\n  Model,\n  State,\n  Style\n} from '@hatiolab/things-scene'\n\nconst HANDLE_WIDTH = 25\nconst HANDLE_HEIGHT = 25\n\nfunction rgba(r: number, g: number, b: number, a: number) {\n  return `rgba(${r}, ${g}, ${b}, ${a})`\n}\n\nconst NATURE: ComponentNature = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [\n    {\n      type: 'id-input',\n      label: 'tab-reference',\n      name: 'reference',\n      property: {\n        component: (c: Component) => {\n          /* this means compare target component */\n          const ret = ['tab-container', 'indoor-map'].includes(c.model.type as string)\n          return ret\n        }\n      }\n    },\n    {\n      type: 'number',\n      label: 'tab-active-index',\n      name: 'activeIndex',\n      property: {\n        min: 0,\n        step: 1\n      }\n    },\n    {\n      type: 'color',\n      label: 'active-fill-style',\n      name: 'activeFillStyle',\n      property: 'activeFillStyle'\n    },\n    {\n      type: 'color',\n      label: 'active-font-color',\n      name: 'activeFontColor',\n      property: 'activeFontColor'\n    },\n    {\n      type: 'color',\n      label: 'active-line-color',\n      name: 'activeLineColor',\n      property: 'activeLineColor'\n    },\n    {\n      type: 'number',\n      label: 'active-line-width',\n      name: 'activeLineWidth',\n      property: 'activeLineWidth'\n    }\n  ]\n}\n\nexport default class Tab extends Container {\n  get layout() {\n    let { width, height } = this.state\n\n    if (width >= height) {\n      return LinearHorizontalLayout\n    } else {\n      return LinearVerticalLayout\n    }\n  }\n\n  get nature() {\n    return NATURE\n  }\n\n  // 컴포넌트를 임의로 추가 및 삭제할 수 있는 지를 지정하는 속성임.\n  get focusible() {\n    return false\n  }\n\n  get reference() {\n    var { reference } = this.state\n    if (!reference) {\n      return null\n    }\n\n    if (!this._reference) {\n      this._reference = this.root.findById(reference)\n      if (this._reference) this._reference.on('change', this.onRefChanged, this)\n    }\n\n    return this._reference\n  }\n\n  get labelHeight() {\n    var components = this.reference.components.length\n    var { height } = this.state\n\n    return (components > 0 && height / components) || height\n  }\n\n  get activeIndex() {\n    return this.getState('activeIndex')\n  }\n\n  private _reference: any\n\n  set reference(reference) {\n    if (this.reference) this.reference.off('change', this.onRefChanged, this)\n\n    this._reference = null\n    this.model.reference = reference\n  }\n\n  set activeIndex(index) {\n    this.setState('activeIndex', index)\n    if (this.reference) {\n      this.reference.activeIndex = index\n    }\n  }\n\n  render(context: CanvasRenderingContext2D) {\n    super.render(context)\n\n    if (this.reference) {\n      if (this.size() !== this.reference.size()) this.rebuildTabButtons()\n    } else {\n      // TODO reference 가 잘못되거나 안되어있다는 경고 의미로 뭔가 그려라..\n      var componentsLength = this.components.length\n      for (var i = componentsLength - 1; i >= 0; i--) {\n        var tabBtn = this.components[i]\n        this.removeComponent(tabBtn)\n      }\n    }\n  }\n\n  contains(x: number, y: number) {\n    if (!this.app.isEditMode) return super.contains(x, y)\n\n    if (super.contains(x, y)) return true\n\n    var { left, top, width } = this.bounds\n\n    var right = left + width\n\n    var h = HANDLE_HEIGHT\n\n    return (\n      x < Math.max(right + HANDLE_WIDTH, right) &&\n      x > Math.min(right + HANDLE_WIDTH, right) &&\n      y < Math.max(top + h, top) &&\n      y > Math.min(top + h, top)\n    )\n  }\n\n  dispose() {\n    if (this.reference) this.reference.off('change', this.onRefChanged, this)\n\n    super.dispose()\n  }\n\n  rebuildTabButtons() {\n    var {\n      tabIndex = 0,\n      left,\n      top,\n      width,\n      height,\n      fillStyle,\n      activeFillStyle,\n      activeLineColor,\n      activeLineWidth,\n      strokeStyle,\n      fontColor,\n      activeFontColor,\n      fontFamily,\n      fontSize,\n      lineHeight,\n      italic,\n      bold,\n      lineWidth = 0\n    } = this.state\n\n    var reference = this.reference\n    let children = []\n\n    let components = reference.components\n    let label_height = this.labelHeight\n\n    let componentsLength = this.components.length\n\n    for (var i = componentsLength - 1; i >= 0; i--) {\n      this.removeComponent(this.components[i])\n    }\n\n    for (let i = 0; i < components.length; i++) {\n      const componentType = components[i].model.type\n      if (componentType != 'tab-card' && componentType != 'floor') {\n        continue\n      }\n\n      let tabCardText = components[i].text || ''\n\n      children.push(\n        Model.compile({\n          type: 'tab-button',\n          index: i,\n          text: tabCardText || String(i + 1),\n          fillStyle: fillStyle || 'transparent',\n          activeFillStyle: activeFillStyle,\n          activeLineColor: activeLineColor,\n          activeLineWidth: activeLineWidth,\n          fontColor: fontColor,\n          activeFontColor: activeFontColor || fontColor,\n          fontFamily: fontFamily,\n          fontSize: fontSize,\n          lineHeight: lineHeight,\n          italic: italic,\n          bold: bold,\n          strokeStyle: strokeStyle,\n          lineWidth: lineWidth,\n          left: 0,\n          top: 0,\n          width: width,\n          height: height\n        })\n      )\n    }\n\n    this.add(children)\n\n    this.reflow()\n\n    this.activeIndex = this.state.activeIndex || 0\n  }\n\n  setTabButtonsStyle(style: Style) {\n    // var {\n    //   fillStyle,\n    //   activeFillStyle,\n    //   fontColor,\n    //   activeFontColor,\n    //   strokeStyle,\n    //   lineWidth = 0,\n    //   fontFamily,\n    //   fontSize,\n    //   lineHeight,\n    //   italic,\n    //   bold\n    // } = style\n\n    var children = this.components\n\n    for (var i in children) {\n      var tabBtn = children[i]\n      tabBtn.set(style)\n      // tabBtn.set({\n      //   fillStyle: fillStyle,\n      //   activeFillStyle: activeFillStyle,\n      //   fontColor: fontColor,\n      //   activeFontColor: activeFontColor,\n      //   strokeStyle: strokeStyle,\n      //   lineWidth: lineWidth,\n      //   fontFamily: fontFamily,\n      //   fontSize: fontSize,\n      //   lineHeight: lineHeight,\n      //   italic: italic,\n      //   bold: bold\n      // })\n    }\n  }\n\n  // reference가 변했을 때 (tab에 변화를 주기위해)\n  onRefChanged(after: any, before: any, hint: any) {\n    // let sourceIndex = hint.deliverer.indexOf(hint.origin)\n    // if(this.components[sourceIndex]) {\n    //   this.components[sourceIndex].set(after)\n    //   this.invalidate()\n    // }\n  }\n\n  onchange(after: State, before: State) {\n    if (after.hasOwnProperty('reference')) {\n      this.reference = after.reference\n      this.invalidate()\n    }\n\n    // if(after.hasOwnProperty(\"activeFillStyle\")\n    //   || after.hasOwnProperty(\"activeFontColor\")\n    //   || after.hasOwnProperty(\"fillStyle\")\n    //   || after.hasOwnProperty(\"fontColor\")\n    //   || after.hasOwnProperty(\"strokeStyle\")\n    //   || after.hasOwnProperty(\"lineWidth\")\n    //   || after.hasOwnProperty(\"fontFamily\")\n    //   || after.hasOwnProperty(\"fontSize\")\n    //   || after.hasOwnProperty(\"lineHeight\")\n    //   || after.hasOwnProperty(\"italic\")\n    //   || after.hasOwnProperty(\"bold\")) {\n    //\n    // }\n    this.setTabButtonsStyle(after)\n  }\n}\n\nComponent.register('tab', Tab)\n"]}
+{"version":3,"file":"tab.js","sourceRoot":"","sources":["../src/tab.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\nimport {\n  Component,\n  ComponentNature,\n  Container,\n  LinearHorizontalLayout,\n  LinearVerticalLayout,\n  Model,\n  State,\n  Style\n} from '@hatiolab/things-scene'\n\nconst HANDLE_WIDTH = 25\nconst HANDLE_HEIGHT = 25\n\nfunction rgba(r: number, g: number, b: number, a: number) {\n  return `rgba(${r}, ${g}, ${b}, ${a})`\n}\n\nconst NATURE: ComponentNature = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [\n    {\n      type: 'id-input',\n      label: 'tab-reference',\n      name: 'reference',\n      property: {\n        component: (c: Component) => {\n          /* this means compare target component */\n          const ret = ['tab-container', 'indoor-map'].includes(c.model.type as string)\n          return ret\n        }\n      }\n    },\n    {\n      type: 'number',\n      label: 'tab-active-index',\n      name: 'activeIndex',\n      property: {\n        min: 0,\n        step: 1\n      }\n    },\n    {\n      type: 'color',\n      label: 'active-fill-style',\n      name: 'activeFillStyle',\n      property: 'activeFillStyle'\n    },\n    {\n      type: 'color',\n      label: 'active-font-color',\n      name: 'activeFontColor',\n      property: 'activeFontColor'\n    },\n    {\n      type: 'color',\n      label: 'active-line-color',\n      name: 'activeLineColor',\n      property: 'activeLineColor'\n    },\n    {\n      type: 'number',\n      label: 'active-line-width',\n      name: 'activeLineWidth',\n      property: 'activeLineWidth'\n    }\n  ],\n  'value-property': 'activeIndex',\n  help: 'scene/component/tab'\n}\n\nexport default class Tab extends Container {\n  get layout() {\n    let { width, height } = this.state\n\n    if (width >= height) {\n      return LinearHorizontalLayout\n    } else {\n      return LinearVerticalLayout\n    }\n  }\n\n  get nature() {\n    return NATURE\n  }\n\n  // 컴포넌트를 임의로 추가 및 삭제할 수 있는 지를 지정하는 속성임.\n  get focusible() {\n    return false\n  }\n\n  get reference() {\n    var { reference } = this.state\n    if (!reference) {\n      return null\n    }\n\n    if (!this._reference) {\n      this._reference = this.root.findById(reference)\n      if (this._reference) this._reference.on('change', this.onRefChanged, this)\n    }\n\n    return this._reference\n  }\n\n  get labelHeight() {\n    var components = this.reference.components.length\n    var { height } = this.state\n\n    return (components > 0 && height / components) || height\n  }\n\n  get activeIndex() {\n    return this.getState('activeIndex')\n  }\n\n  private _reference: any\n\n  set reference(reference) {\n    if (this.reference) this.reference.off('change', this.onRefChanged, this)\n\n    this._reference = null\n    this.model.reference = reference\n  }\n\n  set activeIndex(index) {\n    this.setState('activeIndex', index)\n    if (this.reference) {\n      this.reference.activeIndex = index\n    }\n  }\n\n  ready() {\n    super.ready()\n\n    this.data = this.state?.activeIndex || 0\n  }\n\n  render(context: CanvasRenderingContext2D) {\n    super.render(context)\n\n    if (this.reference) {\n      if (this.size() !== this.reference.size()) this.rebuildTabButtons()\n    } else {\n      // TODO reference 가 잘못되거나 안되어있다는 경고 의미로 뭔가 그려라..\n      var componentsLength = this.components.length\n      for (var i = componentsLength - 1; i >= 0; i--) {\n        var tabBtn = this.components[i]\n        this.removeComponent(tabBtn)\n      }\n    }\n  }\n\n  contains(x: number, y: number) {\n    if (!this.app.isEditMode) return super.contains(x, y)\n\n    if (super.contains(x, y)) return true\n\n    var { left, top, width } = this.bounds\n\n    var right = left + width\n\n    var h = HANDLE_HEIGHT\n\n    return (\n      x < Math.max(right + HANDLE_WIDTH, right) &&\n      x > Math.min(right + HANDLE_WIDTH, right) &&\n      y < Math.max(top + h, top) &&\n      y > Math.min(top + h, top)\n    )\n  }\n\n  dispose() {\n    if (this.reference) this.reference.off('change', this.onRefChanged, this)\n\n    super.dispose()\n  }\n\n  rebuildTabButtons() {\n    var {\n      tabIndex = 0,\n      left,\n      top,\n      width,\n      height,\n      fillStyle,\n      activeFillStyle,\n      activeLineColor,\n      activeLineWidth,\n      strokeStyle,\n      fontColor,\n      activeFontColor,\n      fontFamily,\n      fontSize,\n      lineHeight,\n      italic,\n      bold,\n      lineWidth = 0\n    } = this.state\n\n    var reference = this.reference\n    let children = []\n\n    let components = reference.components\n    let label_height = this.labelHeight\n\n    let componentsLength = this.components.length\n\n    for (var i = componentsLength - 1; i >= 0; i--) {\n      this.removeComponent(this.components[i])\n    }\n\n    for (let i = 0; i < components.length; i++) {\n      const componentType = components[i].model.type\n      if (componentType != 'tab-card' && componentType != 'floor') {\n        continue\n      }\n\n      let tabCardText = components[i].text || ''\n\n      children.push(\n        Model.compile({\n          type: 'tab-button',\n          index: i,\n          text: tabCardText || String(i + 1),\n          fillStyle: fillStyle || 'transparent',\n          activeFillStyle: activeFillStyle,\n          activeLineColor: activeLineColor,\n          activeLineWidth: activeLineWidth,\n          fontColor: fontColor,\n          activeFontColor: activeFontColor || fontColor,\n          fontFamily: fontFamily,\n          fontSize: fontSize,\n          lineHeight: lineHeight,\n          italic: italic,\n          bold: bold,\n          strokeStyle: strokeStyle,\n          lineWidth: lineWidth,\n          left: 0,\n          top: 0,\n          width: width,\n          height: height\n        })\n      )\n    }\n\n    this.add(children)\n\n    this.reflow()\n\n    this.activeIndex = this.state.activeIndex || 0\n  }\n\n  setTabButtonsStyle(style: Style) {\n    var children = this.components\n\n    for (var i in children) {\n      var tabBtn = children[i]\n      tabBtn.set(style)\n    }\n  }\n\n  // reference가 변했을 때 (tab에 변화를 주기위해)\n  onRefChanged(after: any, before: any, hint: any) {\n    // let sourceIndex = hint.deliverer.indexOf(hint.origin)\n    // if(this.components[sourceIndex]) {\n    //   this.components[sourceIndex].set(after)\n    //   this.invalidate()\n    // }\n  }\n\n  onchange(after: State, before: State) {\n    if ('reference' in after) {\n      this.reference = after.reference\n      this.invalidate()\n    }\n\n    if ('activeIndex' in after) {\n      this.data = after.activeIndex\n    }\n\n    this.setTabButtonsStyle(after)\n  }\n}\n\nComponent.register('tab', Tab)\n"]}

package/helps/scene/component/tab-container.ja.md

@@ -0,0 +1,63 @@
+# タブコンテナ（tab-container）
+
+## プロパティ
+
+1. activeIndex（値プロパティ）
+
+- アクティブなカードの現在のゼロベースのインデックス。
+- この値が変更されると、このコンポーネントのデータも変更されます。
+
+## 例
+
+四角形コンポーネントにイベントをアタッチして、タブコンテナ（TabContainer）内のアクティブなカードを制御します。
+
+> - 四角形コンポーネントにクリックイベントをアタッチし、それをタブコンテナ（TabContainer）に渡します。
+> - タブコンテナ（TabContainer）の値プロパティを変更すると、タブカードが更新されます。
+
+![gif][gif-01]
+
+[gif-01]: ../images/tab-button-finish-01.gif
+
+1. 三つのレイヤーを持つタブコンテナ（TabContainer）を作成します。
+
+![タブ
+
+コンテナ（TabContainer）][tab-container-create]
+
+2. 識別のために各レイヤーにテキストを追加します。
+
+![タブコンテナ（TabContainer）][tab-container-text]
+
+3. タブコンテナ（TabContainer）の ID を 'indoor' に設定します。
+
+![タブコンテナ（TabContainer）][tab-container-id]
+
+4. ボタンイベントを追加します
+
+- 三つの四角形を描画し、'エフェクトパネル'から変数情報で 'indoor' を選択します。  
+  （変数情報にはデフォルトのイベントとコンポーネント ID のリストが表示されます。）  
+  ![ボタンイベント][button-02]
+
+- 各四角形に値をマップします。 （四角形をクリックすると、'indoor' ID を持つコンポーネントにデータ '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. タブコンテナ（TabContainer）の設定
+
+- タブコンテナ（TabContainer）コンポーネントのデータバインディング設定を以下の画像のように構成します。  
+  （データを受け取る際に値プロパティを変更します。）
+
+![ボタンイベント][tab-container-setting]
+
+6. 結果を確認します
+
+- すべての設定が完了すると、四角形をクリックするたびにタブコンテナ（TabContainer）がそのレイヤーを変更することが観察されます。
+  ![gif-01]
+
+[gif-01]: ../images/tab-button-finish-01.gif

package/helps/scene/component/tab-container.ko.md

@@ -2,7 +2,10 @@
 
 ## properties
 
-1. activeIndex (value-property) : 현재 활성 카드의 0 기반 인덱스
+1. activeIndex (value-property)
+
+- 현재 활성 카드의 0 기반 인덱스
+- 이 값이 바뀌면, 이 컴포넌트의 data도 이 값으로 변경된다.
 
 ## example
 

package/helps/scene/component/tab-container.md

@@ -1,61 +1,61 @@
-# tab-container
+# Tab Container (tab-container)
 
-## properties
+## Properties
 
-1. activeIndex (value-property) : the zero based index of current active card
+1. activeIndex (value-property)
 
-## example
+- The current zero-based index of the active card.
+- When this value changes, the data of this component also changes accordingly.
 
-Control the TabContainer layer by triggering events on the rectangular component
+## Example
 
-> -**Apply a click event to a square component and deliver it to TabContainers** -**If you change the value property of TabContainer, the TabCard will be changed.**
+Attach events to the rectangle components to control the active card in the Tab Container (TabContainer).
+
+> - **Attach a click event to the rectangle components and pass it to the Tab Container (TabContainer).**
+> - **Change the value property of the Tab Container (TabContainer), and the Tab Card will be updated.**
 
 ![gif][gif-01]
 
 [gif-01]: ../images/tab-button-finish-01.gif
 
-1. It creates TabContainer with three layers.
+1. Create a Tab Container (TabContainer) with three layers.
 
-![tab-container][tab-container-create]
+![Tab Container (TabContainer)][tab-container-create]
 
-2. Text is put in each layer for distinction.
+2. Add text to each layer for distinction.
 
-![tab-container][tab-container-text]
+![Tab Container (TabContainer)][tab-container-text]
 
-3. The ID of the TabContainer is designated as 'indoor'.
+3. Set the ID of the Tab Container (TabContainer) to 'indoor'.
 
-![tab-container][tab-container-id]
+![Tab Container (TabContainer)][tab-container-id]
 
-4. Add button event
+4. Add button events
 
-- 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]
+- Draw three rectangles and select 'indoor' in the variable information from the 'Effects Pane'.
+  (Variable information shows the default events and a list of component IDs.)
+  ![Button Events][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
+- Map values for each rectangle. (When you click a rectangle, it passes the data '0' to the component with the 'indoor' ID.)
+  - 1st layer - 0
+  - 2nd layer - 1
+  - 3rd layer - 2
 
-![buttonEvent][button-03]
+![Button Events][button-03]
 
 [button-02]: ../images/button-evnet-mapping-02.png
 [button-03]: ../images/button-evnet-mapping-03.png
 
-5. TabContainer setting
+5. Tab Container (TabContainer) Configuration
 
-- Set the data binding setting of the TabContainer component as shown in the figure below.
-  (Setting to change its value property when receiving data)
+- Configure the data binding settings of the Tab Container (TabContainer) component as shown in the image below.  
+  (Change its value property when receiving data.)
 
-![buttonEvent][tab-container-setting]
+![Button Events][tab-container-setting]
 
-6.  check result
+6. Check the Result
 
-- If all settings are complete, you can see that the TabContainer layer changes every time you click the square as shown below.
+- Once all the settings are completed, you can observe that **the Tab Container (TabContainer) changes its layer every time you click a rectangle**.
   ![gif-01]
 
 [gif-01]: ../images/tab-button-finish-01.gif
-[tab-container-create]: ../images/tab-container-create-01.png
-[tab-container-text]: ../images/tab-container-create-02.png
-[tab-container-id]: ../images/tab-container-create-03.png
-[tab-container-setting]: ../images/tab-container-setting-01.png

package/helps/scene/component/tab-container.ms.md

@@ -0,0 +1,61 @@
+# Bekas Tab (tab-container)
+
+## Ciri-ciri
+
+1. activeIndex (ciri-nilai)
+
+- Indeks semasa kad aktif berdasarkan sifar.
+- Apabila nilai ini berubah, data komponen ini juga berubah mengikutnya.
+
+## Contoh
+
+Sambungkan acara ke komponen segi empat untuk mengawal kad aktif dalam Bekas Tab (TabContainer).
+
+> - **Sambungkan acara klik ke komponen segi empat dan teruskan ke Bekas Tab (TabContainer).**
+> - **Ubah nilai ciri Tab Container (TabContainer), dan Kad Tab akan dikemaskini.**
+
+![gif][gif-01]
+
+[gif-01]: ../images/tab-button-finish-01.gif
+
+1. Cipta Bekas Tab (TabContainer) dengan tiga lapisan.
+
+![Bekas Tab (TabContainer)][tab-container-create]
+
+2. Tambahkan teks kepada setiap lapisan untuk membezakannya.
+
+![Bekas Tab (TabContainer)][tab-container-text]
+
+3. Tetapkan ID Bekas Tab (TabContainer) kepada 'indoor'.
+
+![Bekas Tab (TabContainer)][tab-container-id]
+
+4. Tambah acara butang
+
+- Lukis tiga segi empat dan pilih 'indoor' dalam maklumat pembolehubah dari 'Bahagian Kesan'.
+  (Maklumat pembolehubah menunjukkan acara asas dan senarai ID komponen.)
+  ![Acara Butang][button-02]
+
+- Peta nilai untuk setiap segi empat. (Apabila anda mengklik segi empat, ia akan menghantar data '0' kepada komponen dengan ID 'indoor'.)
+  - Lapisan 1 - 0
+  - Lapisan 2 - 1
+  - Lapisan 3 - 2
+
+![Acara Butang][button-03]
+
+[button-02]: ../images/button-evnet-mapping-02.png
+[button-03]: ../images/button-evnet-mapping-03.png
+
+5. Konfigurasi Bekas Tab (TabContainer)
+
+- Konfigurasikan tetapan pengikatan data komponen Bekas Tab (TabContainer) seperti yang ditunjukkan dalam imej di bawah.  
+  (Tukar ciri nilai ketika menerima data.)
+
+![Acara Butang][tab-container-setting]
+
+6. Periksa Keputusan
+
+- Setelah semua tetapan selesai, anda boleh mengamati bahawa **Bekas Tab Container (TabContainer) menukar lapisannya setiap kali anda mengklik segi empat**.
+  ![gif-01]
+
+[gif-01]: ../images/tab-button-finish-01.gif

package/helps/scene/component/tab-container.zh.md

@@ -1,63 +1,61 @@
-# tab-container
+# 标签容器（tab-container）
 
-## properties
+## 属性
 
-1. activeIndex (value-property) : 当前活动卡的零基索引
+1. activeIndex（值属性）
 
-## example
+- 当前活动卡片的从零开始的索引。
+- 当此值更改时，此组件的数据也会相应更改。
 
-通过触发矩形组件上的事件来控制室内层
+## 示例
 
-> - **将矩形组件的 click 事件传递到 TabContainer 组件**
-> - **更改 TabContainer 组件的 value 属性 TabCard 会发生变化**
+附加事件到矩形组件以控制标签容器（TabContainer）中的活动卡片。
+
+> - **将点击事件附加到矩形组件并传递给标签容器（TabContainer）。**
+> - **更改标签容器（TabContainer）的值属性，标签卡片将更新。**
 
 ![gif][gif-01]
 
 [gif-01]: ../images/tab-button-finish-01.gif
 
-1. 创建具有三层的 tab-container
+1. 创建一个具有三个层的标签容器（TabContainer）。
 
-![tab-container][tab-container-create]
+![标签容器（TabContainer）][tab-container-create]
 
-2. 为了区分为每层更改显示层数
+2. 为区分每个层添加文本。
 
-![tab-container][tab-container-text]
+![标签容器（TabContainer）][tab-container-text]
 
-3. 指定室内地图的 ID。
+3. 将标签容器（TabContainer）的 ID 设置为'indoor'。
 
-![tab-container][tab-container-id]
+![标签容器（TabContainer）][tab-container-id]
 
-4. 增加按钮
+4. 添加按钮事件
 
-   - 绘制 3 个矩形后，在“效果窗口”中的点击事件中 'indoor' 作为变量信息。
-     (在变量信息中，显示基本事件处理方法和组件的 ID 的列表。)  
-     ![buttonEvent][button-02]
+- 绘制三个矩形，然后从'效果面板'中选择'indoor'作为变量信息。  
+  （变量信息显示默认事件和组件 ID 列表。）  
+  ![按钮事件][button-02]
 
-   - 每个矩形的地图值。 （单击矩形时，数据“0”将传递到具有 'indoor' ID 的组件。）
-     - 1층 - 0
-     - 2층 - 1
-     - 3층 - 2
+- 为每个矩形映射值。 （当您点击矩形时，它将将数据'0'传递给具有'indoor' ID 的组件。）
+  - 第 1 层 - 0
+  - 第 2 层 - 1
+  - 第 3 层 - 2
 
-![buttonEvent][button-03]
+![按钮事件][button-03]
 
 [button-02]: ../images/button-evnet-mapping-02.png
 [button-03]: ../images/button-evnet-mapping-03.png
 
-5. tab-container 配置
-
-   - 如下图设置室内地图组件的数据绑定设置。
-     （设置为在接收数据时更改其 value 属性）
+5. 标签容器（TabContainer）配置
 
-   ![buttonEvent][tab-container-setting]
+- 将标签容器（TabContainer）组件的数据绑定设置配置如下图所示。  
+  （接收数据时更改其值属性。）
 
-6. 确认结果
+![按钮事件][tab-container-setting]
 
-   - 如果所有设置均已完成，则每次单击矩形时，都可以看到室内地图图层发生变化，如下所示。
-     ![gif-01]
+6. 检查结果
 
-   [gif-01]: ../images/tab-button-finish-01.gif
+- 一旦所有设置完成，您将观察到**每次单击矩形时，标签容器（TabContainer）都会更改其层**。
+  ![gif-01]
 
-[tab-container-create]: ../images/tab-container-create-01.png
-[tab-container-text]: ../images/tab-container-create-02.png
-[tab-container-id]: ../images/tab-container-create-03.png
-[tab-container-setting]: ../images/tab-container-setting-01.png
+[gif-01]: ../images/tab-button-finish-01.gif

package/helps/scene/component/tab.ja.md

@@ -0,0 +1,31 @@
+# タブコンポーネント（tab）
+
+ユーザーインタラクションを介してタブコンテナを制御するためのコンポーネントです。対象のタブコンテナのカードをボタンとして表現し、ユーザーがボタンをクリックすると、そのボタンに対応するカードがタブコンテナの前面に表示されます。
+
+## プロパティ
+
+1. タブ参照（reference）
+
+- このタブコンポーネントで制御する対象のタブコンテナを指定します。
+
+2. アクティブタブインデックス（activeIndex）
+
+- 現在アクティブなカードのゼロベースのインデックスです。
+- このコンポーネントの値プロパティとして、この値が変更されると、タブコンテナのアクティブなカードが変更されます。
+- このコンポーネントのデータ値もこの値に合わせて変更されます。
+
+3. アクティブタブ塗りつぶしスタイル（activeFillStyle）
+
+- アクティブなインデックスに対応するボタンに塗りつぶす色を指定します。
+
+4. アクティブタブフォントカラー（activeFontColor）
+
+- アクティブなインデックスに対応するボタンのテキスト色を指定します。
+
+5. アクティブタブボーダーカラー（activeLineColor）
+
+- アクティブなインデックスに対応するボタンの境界線の色を指定します。
+
+6. アクティブタブボーダー幅（activeLineWidth）
+
+- アクティブなインデックスに対応するボタンの境界線の幅を指定します。