@operato/scene-tab 9.0.0-beta.0 → 9.0.0-beta.2

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { default as TabCard } from './tab-card';
-export { default as TabContainer } from './tab-container';
-export { default as Tab } from './tab';
-export { default as TabButton } from './tab-button';
+export { default as TabCard } from './tab-card.js';
+export { default as TabContainer } from './tab-container.js';
+export { default as Tab } from './tab.js';
+export { default as TabButton } from './tab-button.js';

package/dist/index.js

@@ -1,8 +1,8 @@
 /*
  * Copyright © HatioLab Inc. All rights reserved.
  */
-export { default as TabCard } from './tab-card';
-export { default as TabContainer } from './tab-container';
-export { default as Tab } from './tab';
-export { default as TabButton } from './tab-button';
+export { default as TabCard } from './tab-card.js';
+export { default as TabContainer } from './tab-container.js';
+export { default as Tab } from './tab.js';
+export { default as TabButton } from './tab-button.js';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,YAAY,CAAA;AAC/C,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,iBAAiB,CAAA;AACzD,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,cAAc,CAAA","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nexport { default as TabCard } from './tab-card'\nexport { default as TabContainer } from './tab-container'\nexport { default as Tab } from './tab'\nexport { default as TabButton } from './tab-button'\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,eAAe,CAAA;AAClD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAA;AAC5D,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,UAAU,CAAA;AACzC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,iBAAiB,CAAA","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nexport { default as TabCard } from './tab-card.js'\nexport { default as TabContainer } from './tab-container.js'\nexport { default as Tab } from './tab.js'\nexport { default as TabButton } from './tab-button.js'\n"]}

package/dist/tab-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab-button.js","sourceRoot":"","sources":["../src/tab-button.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\nimport { Component, RectPath, State } from '@hatiolab/things-scene'\n\nimport Tab from './tab'\n\nexport default class TabButton extends RectPath(Component) {\n  get index() {\n    return (this.parent as Tab).indexOf(this)\n  }\n\n  get activated() {\n    return (this.parent as Tab).activeIndex === this.index\n  }\n\n  private _fillStyle?: string\n  private _fontColor?: string\n  private _strokeStyle?: string\n  private _lineWidth?: string\n\n  prerender(context: CanvasRenderingContext2D) {\n    super.prerender(context)\n\n    let { activeFillStyle, activeLineColor, activeLineWidth, activeFontColor } = this.state\n\n    if (this.activated) {\n      this.model.fillStyle = activeFillStyle\n      this.model.fontColor = activeFontColor\n      this.model.strokeStyle = activeLineColor\n      this.model.lineWidth = activeLineWidth\n    } else {\n      this.model.fillStyle = this._fillStyle\n      this.model.fontColor = this._fontColor\n      this.model.strokeStyle = this._strokeStyle\n      this.model.lineWidth = this._lineWidth\n    }\n  }\n\n  render(context: CanvasRenderingContext2D) {\n    var { left = 0, top = 0, width, height } = this.bounds\n\n    context.beginPath()\n\n    context.rect(left, top, width, height)\n\n    this.drawFill(context)\n    this.drawStroke(context)\n  }\n\n  onclick(e: MouseEvent) {\n    ;(this.parent as Tab).activeIndex = this.index\n    this.parent.invalidate()\n  }\n\n  setStylesFromParent(style: State) {\n    if ('fillStyle' in style) this._fillStyle = style.fillStyle\n    if ('fontColor' in style) this._fontColor = style.fontColor\n    if ('strokeStyle' in style) this._strokeStyle = style.strokeStyle\n    if ('lineWidth' in style) this._lineWidth = style.lineWidth\n\n    this.set(style)\n  }\n\n  onchange(after: State) {\n    if ('text' in after) {\n      ;(this.parent as Tab).reference?.getAt(this.index).setState('text', after.text)\n    }\n\n    this.invalidate()\n  }\n}\n\nComponent.register('tab-button', TabButton)\n"]}
+{"version":3,"file":"tab-button.js","sourceRoot":"","sources":["../src/tab-button.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\nimport { Component, RectPath, State } from '@hatiolab/things-scene'\n\nimport Tab from './tab.js'\n\nexport default class TabButton extends RectPath(Component) {\n  get index() {\n    return (this.parent as Tab).indexOf(this)\n  }\n\n  get activated() {\n    return (this.parent as Tab).activeIndex === this.index\n  }\n\n  private _fillStyle?: string\n  private _fontColor?: string\n  private _strokeStyle?: string\n  private _lineWidth?: string\n\n  prerender(context: CanvasRenderingContext2D) {\n    super.prerender(context)\n\n    let { activeFillStyle, activeLineColor, activeLineWidth, activeFontColor } = this.state\n\n    if (this.activated) {\n      this.model.fillStyle = activeFillStyle\n      this.model.fontColor = activeFontColor\n      this.model.strokeStyle = activeLineColor\n      this.model.lineWidth = activeLineWidth\n    } else {\n      this.model.fillStyle = this._fillStyle\n      this.model.fontColor = this._fontColor\n      this.model.strokeStyle = this._strokeStyle\n      this.model.lineWidth = this._lineWidth\n    }\n  }\n\n  render(context: CanvasRenderingContext2D) {\n    var { left = 0, top = 0, width, height } = this.bounds\n\n    context.beginPath()\n\n    context.rect(left, top, width, height)\n\n    this.drawFill(context)\n    this.drawStroke(context)\n  }\n\n  onclick(e: MouseEvent) {\n    ;(this.parent as Tab).activeIndex = this.index\n    this.parent.invalidate()\n  }\n\n  setStylesFromParent(style: State) {\n    if ('fillStyle' in style) this._fillStyle = style.fillStyle\n    if ('fontColor' in style) this._fontColor = style.fontColor\n    if ('strokeStyle' in style) this._strokeStyle = style.strokeStyle\n    if ('lineWidth' in style) this._lineWidth = style.lineWidth\n\n    this.set(style)\n  }\n\n  onchange(after: State) {\n    if ('text' in after) {\n      ;(this.parent as Tab).reference?.getAt(this.index).setState('text', after.text)\n    }\n\n    this.invalidate()\n  }\n}\n\nComponent.register('tab-button', TabButton)\n"]}

package/dist/tab-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab-card.js","sourceRoot":"","sources":["../src/tab-card.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,SAAS,EAAmB,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAI9E,MAAM,MAAM,GAAoB;IAC9B,OAAO,EAAE,KAAK;IACd,SAAS,EAAE,IAAI;IACf,SAAS,EAAE,IAAI;IACf,UAAU,EAAE;QACV;YACE,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE,QAAQ;YACf,IAAI,EAAE,QAAQ;YACd,QAAQ,EAAE;gBACR,IAAI,EAAE,eAAe;gBACrB,MAAM,EAAE,UAAU,OAAgB;oBAChC,IAAI,YAAY,GAAG,OAAO,CAAC,MAAsB,CAAA;oBACjD,YAAY,CAAC,eAAe,CAAC,OAAO,CAAC,CAAA;oBACrC,YAAY,CAAC,GAAG,CAAC,aAAa,EAAE,CAAC,CAAC,CAAA;gBACpC,CAAC;aACF;SACF;KACF;CACF,CAAA;AAED,MAAM,CAAC,OAAO,OAAO,OAAQ,SAAQ,SAAS;IAG5C,IAAI,eAAe;QACjB,OAAO,KAAK,CAAA;IACd,CAAC;IAED,IAAI,cAAc;QAChB,OAAO,KAAK,CAAA;IACd,CAAC;IAED;;;;;;;OAOG;IACH,IAAI,OAAO;QACT,OAAO,KAAK,CAAA;IACd,CAAC;IAED;;;;;OAKG;IACH,IAAI,SAAS;QACX,OAAO,KAAK,CAAA;IACd,CAAC;IAED;;;;OAIG;IACH,IAAI,SAAS;QACX,OAAO,KAAK,CAAA;IACd,CAAC;IAED,IAAI,MAAM;QACR,OAAO,MAAM,CAAA;IACf,CAAC;CACF;AAED,SAAS,CAAC,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAC,CAAA","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\nimport { Component, ComponentNature, Container } from '@hatiolab/things-scene'\n\nimport TabContainer from './tab-container'\n\nconst NATURE: ComponentNature = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [\n    {\n      type: 'action',\n      label: 'remove',\n      name: 'remove',\n      property: {\n        icon: 'remove_circle',\n        action: function (tabCard: TabCard) {\n          let tabContainer = tabCard.parent as TabContainer\n          tabContainer.removeComponent(tabCard)\n          tabContainer.set('activeIndex', 0)\n        }\n      }\n    }\n  ]\n}\n\nexport default class TabCard extends Container {\n  private _clickPoint?: Component\n\n  get hasTextProperty() {\n    return false\n  }\n\n  get showMoveHandle() {\n    return false\n  }\n\n  /*\n   * PATH 리스트를 직접 수정할 수 있는 지를 결정한다.\n   *\n   * 일반적으로 PATH는 바운드 생성을 위해서 논리적으로 생성되므로, 직접 수정하지 않는다.(return false)\n   * 그러나, 각 꼭지점들이 개별로 움직이는 다각형류는 path 라는 모델데이타를 가지므로, 직접수정이 가능할 수 있다.(return true)\n   *\n   * Immutable 컴포넌트의 형상을 바꾸는 방법은 바운드를 이용한 리사이즈나, 특별한 컨트롤을 통해서 가능하다.\n   */\n  get mutable() {\n    return false\n  }\n\n  /*\n   * BOUND를 통해서 리사이즈를 할 수 있는 지를 결정한다.\n   *\n   * 일반적으로 면적을 갖는 컴포넌트는 대체로 가능하다.(return true)\n   * 그러나, LINE 등 면적을 가지지않는 컴포넌트는 가능하지 않도록 정의한다.(return false)\n   */\n  get resizable() {\n    return false\n  }\n\n  /*\n   * 회전을 할 수 있는 지를 결정한다.\n   *\n   * 일반적으로 모든 컴포넌트는 가능하다.(return true)\n   */\n  get rotatable() {\n    return false\n  }\n\n  get nature() {\n    return NATURE\n  }\n}\n\nComponent.register('tab-card', TabCard)\n"]}
+{"version":3,"file":"tab-card.js","sourceRoot":"","sources":["../src/tab-card.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,SAAS,EAAmB,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAI9E,MAAM,MAAM,GAAoB;IAC9B,OAAO,EAAE,KAAK;IACd,SAAS,EAAE,IAAI;IACf,SAAS,EAAE,IAAI;IACf,UAAU,EAAE;QACV;YACE,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE,QAAQ;YACf,IAAI,EAAE,QAAQ;YACd,QAAQ,EAAE;gBACR,IAAI,EAAE,eAAe;gBACrB,MAAM,EAAE,UAAU,OAAgB;oBAChC,IAAI,YAAY,GAAG,OAAO,CAAC,MAAsB,CAAA;oBACjD,YAAY,CAAC,eAAe,CAAC,OAAO,CAAC,CAAA;oBACrC,YAAY,CAAC,GAAG,CAAC,aAAa,EAAE,CAAC,CAAC,CAAA;gBACpC,CAAC;aACF;SACF;KACF;CACF,CAAA;AAED,MAAM,CAAC,OAAO,OAAO,OAAQ,SAAQ,SAAS;IAG5C,IAAI,eAAe;QACjB,OAAO,KAAK,CAAA;IACd,CAAC;IAED,IAAI,cAAc;QAChB,OAAO,KAAK,CAAA;IACd,CAAC;IAED;;;;;;;OAOG;IACH,IAAI,OAAO;QACT,OAAO,KAAK,CAAA;IACd,CAAC;IAED;;;;;OAKG;IACH,IAAI,SAAS;QACX,OAAO,KAAK,CAAA;IACd,CAAC;IAED;;;;OAIG;IACH,IAAI,SAAS;QACX,OAAO,KAAK,CAAA;IACd,CAAC;IAED,IAAI,MAAM;QACR,OAAO,MAAM,CAAA;IACf,CAAC;CACF;AAED,SAAS,CAAC,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAC,CAAA","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\nimport { Component, ComponentNature, Container } from '@hatiolab/things-scene'\n\nimport TabContainer from './tab-container.js'\n\nconst NATURE: ComponentNature = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [\n    {\n      type: 'action',\n      label: 'remove',\n      name: 'remove',\n      property: {\n        icon: 'remove_circle',\n        action: function (tabCard: TabCard) {\n          let tabContainer = tabCard.parent as TabContainer\n          tabContainer.removeComponent(tabCard)\n          tabContainer.set('activeIndex', 0)\n        }\n      }\n    }\n  ]\n}\n\nexport default class TabCard extends Container {\n  private _clickPoint?: Component\n\n  get hasTextProperty() {\n    return false\n  }\n\n  get showMoveHandle() {\n    return false\n  }\n\n  /*\n   * PATH 리스트를 직접 수정할 수 있는 지를 결정한다.\n   *\n   * 일반적으로 PATH는 바운드 생성을 위해서 논리적으로 생성되므로, 직접 수정하지 않는다.(return false)\n   * 그러나, 각 꼭지점들이 개별로 움직이는 다각형류는 path 라는 모델데이타를 가지므로, 직접수정이 가능할 수 있다.(return true)\n   *\n   * Immutable 컴포넌트의 형상을 바꾸는 방법은 바운드를 이용한 리사이즈나, 특별한 컨트롤을 통해서 가능하다.\n   */\n  get mutable() {\n    return false\n  }\n\n  /*\n   * BOUND를 통해서 리사이즈를 할 수 있는 지를 결정한다.\n   *\n   * 일반적으로 면적을 갖는 컴포넌트는 대체로 가능하다.(return true)\n   * 그러나, LINE 등 면적을 가지지않는 컴포넌트는 가능하지 않도록 정의한다.(return false)\n   */\n  get resizable() {\n    return false\n  }\n\n  /*\n   * 회전을 할 수 있는 지를 결정한다.\n   *\n   * 일반적으로 모든 컴포넌트는 가능하다.(return true)\n   */\n  get rotatable() {\n    return false\n  }\n\n  get nature() {\n    return NATURE\n  }\n}\n\nComponent.register('tab-card', TabCard)\n"]}

package/dist/tab-container.d.ts

@@ -1,5 +1,5 @@
 import { ComponentNature, Container, State } from '@hatiolab/things-scene';
-import TabCard from './tab-card';
+import TabCard from './tab-card.js';
 export default class TabContainer extends Container {
     private _focused;
     private __down_point?;

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 || 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"]}
+{"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.js'\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.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'\nimport TabButton from './tab-button'\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  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      // this._reference?.on('change', this.onRefChanged, this)\n    }\n\n    return this._reference\n  }\n\n  get activeIndex() {\n    return this.getState('activeIndex')\n  }\n\n  private _reference: any\n\n  set reference(reference) {\n    // 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    this.setTabButtonsStyle(this.state)\n  }\n\n  render(context: CanvasRenderingContext2D) {\n    super.render(context)\n\n    if (this.reference) {\n      if (this.size() !== this.reference.size()) {\n        this.rebuildTabButtons()\n      }\n    } else {\n      // TODO reference 가 잘못되거나 안되어있다는 경고 의미로 뭔가 그려라..\n      var componentsLength = this.components.length\n\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) {\n      return super.contains(x, y)\n    }\n\n    if (super.contains(x, y)) {\n      return true\n    }\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  // this.reference?.off('change', this.onRefChanged, this)\n\n  // super.dispose()\n  // }\n\n  rebuildTabButtons() {\n    var {\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\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          activeFontColor: activeFontColor || fontColor,\n          fontColor: 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    const toCopy = {} as any\n\n    if ('fillStyle' in style) toCopy.fillStyle = style.fillStyle\n    if ('fontColor' in style) toCopy.fontColor = style.fontColor\n    if ('strokeStyle' in style) toCopy.strokeStyle = style.strokeStyle\n    if ('lineWidth' in style) toCopy.lineWidth = style.lineWidth\n\n    if ('activeFillStyle' in style) toCopy.activeFillStyle = style.activeFillStyle\n    if ('activeFontColor' in style) toCopy.activeFontColor = style.activeFontColor\n    if ('activeLineWidth' in style) toCopy.activeLineWidth = style.activeLineWidth\n    if ('activeLineColor' in style) toCopy.activeLineColor = style.activeLineColor\n\n    var children = this.components\n\n    for (var i in children) {\n      var tabBtn = children[i]\n      ;(tabBtn as TabButton).setStylesFromParent(toCopy)\n    }\n  }\n\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"]}
+{"version":3,"file":"tab.js","sourceRoot":"","sources":["../src/tab.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EACL,SAAS,EAET,SAAS,EACT,sBAAsB,EACtB,oBAAoB,EACpB,KAAK,EAGN,MAAM,wBAAwB,CAAA;AAG/B,MAAM,YAAY,GAAG,EAAE,CAAA;AACvB,MAAM,aAAa,GAAG,EAAE,CAAA;AAExB,SAAS,IAAI,CAAC,CAAS,EAAE,CAAS,EAAE,CAAS,EAAE,CAAS;IACtD,OAAO,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAA;AACvC,CAAC;AAED,MAAM,MAAM,GAAoB;IAC9B,OAAO,EAAE,KAAK;IACd,SAAS,EAAE,IAAI;IACf,SAAS,EAAE,IAAI;IACf,UAAU,EAAE;QACV;YACE,IAAI,EAAE,UAAU;YAChB,KAAK,EAAE,eAAe;YACtB,IAAI,EAAE,WAAW;YACjB,QAAQ,EAAE;gBACR,SAAS,EAAE,CAAC,CAAY,EAAE,EAAE;oBAC1B,yCAAyC;oBACzC,MAAM,GAAG,GAAG,CAAC,eAAe,EAAE,YAAY,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,IAAc,CAAC,CAAA;oBAC5E,OAAO,GAAG,CAAA;gBACZ,CAAC;aACF;SACF;QACD;YACE,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE,kBAAkB;YACzB,IAAI,EAAE,aAAa;YACnB,QAAQ,EAAE;gBACR,GAAG,EAAE,CAAC;gBACN,IAAI,EAAE,CAAC;aACR;SACF;QACD;YACE,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,mBAAmB;YAC1B,IAAI,EAAE,iBAAiB;YACvB,QAAQ,EAAE,iBAAiB;SAC5B;QACD;YACE,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,mBAAmB;YAC1B,IAAI,EAAE,iBAAiB;YACvB,QAAQ,EAAE,iBAAiB;SAC5B;QACD;YACE,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,mBAAmB;YAC1B,IAAI,EAAE,iBAAiB;YACvB,QAAQ,EAAE,iBAAiB;SAC5B;QACD;YACE,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE,mBAAmB;YAC1B,IAAI,EAAE,iBAAiB;YACvB,QAAQ,EAAE,iBAAiB;SAC5B;KACF;IACD,gBAAgB,EAAE,aAAa;IAC/B,IAAI,EAAE,qBAAqB;CAC5B,CAAA;AAED,MAAM,CAAC,OAAO,OAAO,GAAI,SAAQ,SAAS;IACxC,IAAI,MAAM;QACR,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,KAAK,CAAA;QAElC,IAAI,KAAK,IAAI,MAAM,EAAE,CAAC;YACpB,OAAO,sBAAsB,CAAA;QAC/B,CAAC;aAAM,CAAC;YACN,OAAO,oBAAoB,CAAA;QAC7B,CAAC;IACH,CAAC;IAED,IAAI,MAAM;QACR,OAAO,MAAM,CAAA;IACf,CAAC;IAED,IAAI,SAAS;QACX,OAAO,KAAK,CAAA;IACd,CAAC;IAED,IAAI,SAAS;QACX,IAAI,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,KAAK,CAAA;QAC9B,IAAI,CAAC,SAAS,EAAE,CAAC;YACf,OAAO,IAAI,CAAA;QACb,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;YACrB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAA;YAC/C,yDAAyD;QAC3D,CAAC;QAED,OAAO,IAAI,CAAC,UAAU,CAAA;IACxB,CAAC;IAED,IAAI,WAAW;QACb,OAAO,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAA;IACrC,CAAC;IAID,IAAI,SAAS,CAAC,SAAS;QACrB,yDAAyD;QAEzD,IAAI,CAAC,UAAU,GAAG,IAAI,CAAA;QACtB,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,SAAS,CAAA;IAClC,CAAC;IAED,IAAI,WAAW,CAAC,KAAK;QACnB,IAAI,CAAC,QAAQ,CAAC,aAAa,EAAE,KAAK,CAAC,CAAA;QACnC,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,IAAI,CAAC,SAAS,CAAC,WAAW,GAAG,KAAK,CAAA;QACpC,CAAC;IACH,CAAC;IAED,KAAK;;QACH,KAAK,CAAC,KAAK,EAAE,CAAA;QAEb,IAAI,CAAC,IAAI,GAAG,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,WAAW,KAAI,CAAC,CAAA;QAExC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;IACrC,CAAC;IAED,MAAM,CAAC,OAAiC;QACtC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;QAErB,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,IAAI,IAAI,CAAC,IAAI,EAAE,KAAK,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,EAAE,CAAC;gBAC1C,IAAI,CAAC,iBAAiB,EAAE,CAAA;YAC1B,CAAC;QACH,CAAC;aAAM,CAAC;YACN,gDAAgD;YAChD,IAAI,gBAAgB,GAAG,IAAI,CAAC,UAAU,CAAC,MAAM,CAAA;YAE7C,KAAK,IAAI,CAAC,GAAG,gBAAgB,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC;gBAC/C,IAAI,MAAM,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAA;gBAC/B,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAA;YAC9B,CAAC;QACH,CAAC;IACH,CAAC;IAED,QAAQ,CAAC,CAAS,EAAE,CAAS;QAC3B,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,UAAU,EAAE,CAAC;YACzB,OAAO,KAAK,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;QAC7B,CAAC;QAED,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;YACzB,OAAO,IAAI,CAAA;QACb,CAAC;QAED,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,MAAM,CAAA;QAEtC,IAAI,KAAK,GAAG,IAAI,GAAG,KAAK,CAAA;QAExB,IAAI,CAAC,GAAG,aAAa,CAAA;QAErB,OAAO,CACL,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,YAAY,EAAE,KAAK,CAAC;YACzC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,YAAY,EAAE,KAAK,CAAC;YACzC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC,EAAE,GAAG,CAAC;YAC1B,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC,EAAE,GAAG,CAAC,CAC3B,CAAA;IACH,CAAC;IAED,cAAc;IACd,yDAAyD;IAEzD,kBAAkB;IAClB,IAAI;IAEJ,iBAAiB;QACf,IAAI,EACF,KAAK,EACL,MAAM,EACN,SAAS,EACT,eAAe,EACf,eAAe,EACf,eAAe,EACf,WAAW,EACX,SAAS,EACT,eAAe,EACf,UAAU,EACV,QAAQ,EACR,UAAU,EACV,MAAM,EACN,IAAI,EACJ,SAAS,GAAG,CAAC,EACd,GAAG,IAAI,CAAC,KAAK,CAAA;QAEd,IAAI,SAAS,GAAG,IAAI,CAAC,SAAS,CAAA;QAC9B,IAAI,QAAQ,GAAG,EAAE,CAAA;QAEjB,IAAI,UAAU,GAAG,SAAS,CAAC,UAAU,CAAA;QAErC,IAAI,gBAAgB,GAAG,IAAI,CAAC,UAAU,CAAC,MAAM,CAAA;QAE7C,KAAK,IAAI,CAAC,GAAG,gBAAgB,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC;YAC/C,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAA;QAC1C,CAAC;QAED,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,UAAU,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YAC3C,MAAM,aAAa,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAA;YAC9C,IAAI,aAAa,IAAI,UAAU,IAAI,aAAa,IAAI,OAAO,EAAE,CAAC;gBAC5D,SAAQ;YACV,CAAC;YAED,IAAI,WAAW,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,IAAI,IAAI,EAAE,CAAA;YAE1C,QAAQ,CAAC,IAAI,CACX,KAAK,CAAC,OAAO,CAAC;gBACZ,IAAI,EAAE,YAAY;gBAClB,KAAK,EAAE,CAAC;gBACR,IAAI,EAAE,WAAW,IAAI,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC;gBAClC,SAAS,EAAE,SAAS,IAAI,aAAa;gBACrC,eAAe,EAAE,eAAe;gBAChC,eAAe,EAAE,eAAe;gBAChC,eAAe,EAAE,eAAe;gBAChC,eAAe,EAAE,eAAe,IAAI,SAAS;gBAC7C,SAAS,EAAE,SAAS;gBACpB,UAAU,EAAE,UAAU;gBACtB,QAAQ,EAAE,QAAQ;gBAClB,UAAU,EAAE,UAAU;gBACtB,MAAM,EAAE,MAAM;gBACd,IAAI,EAAE,IAAI;gBACV,WAAW,EAAE,WAAW;gBACxB,SAAS,EAAE,SAAS;gBACpB,IAAI,EAAE,CAAC;gBACP,GAAG,EAAE,CAAC;gBACN,KAAK,EAAE,KAAK;gBACZ,MAAM,EAAE,MAAM;aACf,CAAC,CACH,CAAA;QACH,CAAC;QAED,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAA;QAElB,IAAI,CAAC,MAAM,EAAE,CAAA;QAEb,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,IAAI,CAAC,CAAA;IAChD,CAAC;IAED,kBAAkB,CAAC,KAAY;QAC7B,MAAM,MAAM,GAAG,EAAS,CAAA;QAExB,IAAI,WAAW,IAAI,KAAK;YAAE,MAAM,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,CAAA;QAC5D,IAAI,WAAW,IAAI,KAAK;YAAE,MAAM,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,CAAA;QAC5D,IAAI,aAAa,IAAI,KAAK;YAAE,MAAM,CAAC,WAAW,GAAG,KAAK,CAAC,WAAW,CAAA;QAClE,IAAI,WAAW,IAAI,KAAK;YAAE,MAAM,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,CAAA;QAE5D,IAAI,iBAAiB,IAAI,KAAK;YAAE,MAAM,CAAC,eAAe,GAAG,KAAK,CAAC,eAAe,CAAA;QAC9E,IAAI,iBAAiB,IAAI,KAAK;YAAE,MAAM,CAAC,eAAe,GAAG,KAAK,CAAC,eAAe,CAAA;QAC9E,IAAI,iBAAiB,IAAI,KAAK;YAAE,MAAM,CAAC,eAAe,GAAG,KAAK,CAAC,eAAe,CAAA;QAC9E,IAAI,iBAAiB,IAAI,KAAK;YAAE,MAAM,CAAC,eAAe,GAAG,KAAK,CAAC,eAAe,CAAA;QAE9E,IAAI,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAA;QAE9B,KAAK,IAAI,CAAC,IAAI,QAAQ,EAAE,CAAC;YACvB,IAAI,MAAM,GAAG,QAAQ,CAAC,CAAC,CAAC,CACvB;YAAC,MAAoB,CAAC,mBAAmB,CAAC,MAAM,CAAC,CAAA;QACpD,CAAC;IACH,CAAC;IAED,qDAAqD;IACrD,0DAA0D;IAC1D,wCAAwC;IACxC,8CAA8C;IAC9C,wBAAwB;IACxB,MAAM;IACN,IAAI;IAEJ,QAAQ,CAAC,KAAY,EAAE,MAAa;QAClC,IAAI,WAAW,IAAI,KAAK,EAAE,CAAC;YACzB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,CAAA;YAChC,IAAI,CAAC,UAAU,EAAE,CAAA;QACnB,CAAC;QAED,IAAI,aAAa,IAAI,KAAK,EAAE,CAAC;YAC3B,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,WAAW,CAAA;QAC/B,CAAC;QAED,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAA;IAChC,CAAC;CACF;AAED,SAAS,CAAC,QAAQ,CAAC,KAAK,EAAE,GAAG,CAAC,CAAA","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'\nimport TabButton from './tab-button.js'\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  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      // this._reference?.on('change', this.onRefChanged, this)\n    }\n\n    return this._reference\n  }\n\n  get activeIndex() {\n    return this.getState('activeIndex')\n  }\n\n  private _reference: any\n\n  set reference(reference) {\n    // 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    this.setTabButtonsStyle(this.state)\n  }\n\n  render(context: CanvasRenderingContext2D) {\n    super.render(context)\n\n    if (this.reference) {\n      if (this.size() !== this.reference.size()) {\n        this.rebuildTabButtons()\n      }\n    } else {\n      // TODO reference 가 잘못되거나 안되어있다는 경고 의미로 뭔가 그려라..\n      var componentsLength = this.components.length\n\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) {\n      return super.contains(x, y)\n    }\n\n    if (super.contains(x, y)) {\n      return true\n    }\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  // this.reference?.off('change', this.onRefChanged, this)\n\n  // super.dispose()\n  // }\n\n  rebuildTabButtons() {\n    var {\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\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          activeFontColor: activeFontColor || fontColor,\n          fontColor: 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    const toCopy = {} as any\n\n    if ('fillStyle' in style) toCopy.fillStyle = style.fillStyle\n    if ('fontColor' in style) toCopy.fontColor = style.fontColor\n    if ('strokeStyle' in style) toCopy.strokeStyle = style.strokeStyle\n    if ('lineWidth' in style) toCopy.lineWidth = style.lineWidth\n\n    if ('activeFillStyle' in style) toCopy.activeFillStyle = style.activeFillStyle\n    if ('activeFontColor' in style) toCopy.activeFontColor = style.activeFontColor\n    if ('activeLineWidth' in style) toCopy.activeLineWidth = style.activeLineWidth\n    if ('activeLineColor' in style) toCopy.activeLineColor = style.activeLineColor\n\n    var children = this.components\n\n    for (var i in children) {\n      var tabBtn = children[i]\n      ;(tabBtn as TabButton).setStylesFromParent(toCopy)\n    }\n  }\n\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/dist/templates/index.js

@@ -1,4 +1,4 @@
-import TabContainer from './tab-container';
-import Tab from './tab';
+import TabContainer from './tab-container.js';
+import Tab from './tab.js';
 export default [TabContainer, Tab];
 //# sourceMappingURL=index.js.map

package/dist/templates/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/templates/index.ts"],"names":[],"mappings":"AAAA,OAAO,YAAY,MAAM,iBAAiB,CAAA;AAC1C,OAAO,GAAG,MAAM,OAAO,CAAA;AAEvB,eAAe,CAAC,YAAY,EAAE,GAAG,CAAC,CAAA","sourcesContent":["import TabContainer from './tab-container'\nimport Tab from './tab'\n\nexport default [TabContainer, Tab]\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/templates/index.ts"],"names":[],"mappings":"AAAA,OAAO,YAAY,MAAM,oBAAoB,CAAA;AAC7C,OAAO,GAAG,MAAM,UAAU,CAAA;AAE1B,eAAe,CAAC,YAAY,EAAE,GAAG,CAAC,CAAA","sourcesContent":["import TabContainer from './tab-container.js'\nimport Tab from './tab.js'\n\nexport default [TabContainer, Tab]\n"]}

package/package.json

@@ -2,7 +2,8 @@
   "name": "@operato/scene-tab",
   "description": "Tab style container for Things Scene",
   "author": "heartyoh",
-  "version": "9.0.0-beta.0",
+  "version": "9.0.0-beta.2",
+  "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "license": "MIT",
@@ -31,8 +32,8 @@
   },
   "devDependencies": {
     "@hatiolab/prettier-config": "^1.0.0",
-    "@things-factory/builder": "^8.0.0-beta",
-    "@things-factory/operato-board": "^8.0.0-beta",
+    "@things-factory/builder": "^9.0.0-beta",
+    "@things-factory/operato-board": "^9.0.0-beta",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
     "@web/dev-server": "^0.1.28",
@@ -57,5 +58,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "87f7a74e8b66f6cc6f19b9c75a7c9a03637ab7ac"
+  "gitHead": "69866123dfa29ef31089a5862be17832449fae1f"
 }