@operato/scene-tab 0.0.22

package/dist/tab.js

@@ -0,0 +1,256 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import { Component, Container, LinearHorizontalLayout, LinearVerticalLayout, Model } from '@hatiolab/things-scene';
+const HANDLE_WIDTH = 25;
+const HANDLE_HEIGHT = 25;
+function rgba(r, g, b, a) {
+    return `rgba(${r}, ${g}, ${b}, ${a})`;
+}
+const NATURE = {
+    mutable: false,
+    resizable: true,
+    rotatable: true,
+    properties: [
+        {
+            type: 'id-input',
+            label: 'tab-reference',
+            name: 'reference',
+            property: {
+                component: 'indoor-map'
+            }
+        },
+        {
+            type: 'number',
+            label: 'tab-active-index',
+            name: 'activeIndex',
+            property: {
+                min: 0,
+                step: 1
+            }
+        },
+        {
+            type: 'color',
+            label: 'active-fill-style',
+            name: 'activeFillStyle',
+            property: 'activeFillStyle'
+        },
+        {
+            type: 'color',
+            label: 'active-font-color',
+            name: 'activeFontColor',
+            property: 'activeFontColor'
+        },
+        {
+            type: 'color',
+            label: 'active-line-color',
+            name: 'activeLineColor',
+            property: 'activeLineColor'
+        },
+        {
+            type: 'number',
+            label: 'active-line-width',
+            name: 'activeLineWidth',
+            property: 'activeLineWidth'
+        }
+    ]
+};
+export default class Tab extends Container {
+    get layout() {
+        let { width, height } = this.model;
+        if (width >= height) {
+            return LinearHorizontalLayout;
+        }
+        else {
+            return LinearVerticalLayout;
+        }
+    }
+    get nature() {
+        return NATURE;
+    }
+    // 컴포넌트를 임의로 추가 및 삭제할 수 있는 지를 지정하는 속성임.
+    get focusible() {
+        return false;
+    }
+    get reference() {
+        var { reference } = this.model;
+        if (!reference)
+            return null;
+        if (!this._reference) {
+            this._reference = this.root.findById(reference);
+            if (this._reference)
+                this._reference.on('change', this.onRefChanged, this);
+        }
+        return this._reference;
+    }
+    get labelHeight() {
+        var components = this.reference.components.length;
+        var height = this.model.height;
+        return (components > 0 && height / components) || height;
+    }
+    get activeIndex() {
+        return this.get('activeIndex');
+    }
+    set reference(reference) {
+        if (this.reference)
+            this.reference.off('change', this.onRefChanged, this);
+        this._reference = null;
+        this.model.reference = reference;
+    }
+    set activeIndex(index) {
+        this.set('activeIndex', index);
+        if (this.reference) {
+            this.reference.activeIndex = index;
+        }
+    }
+    render(context) {
+        super.render(context);
+        if (this.reference) {
+            if (this.size() !== this.reference.size())
+                this.rebuildTabButtons();
+        }
+        else {
+            // TODO reference 가 잘못되거나 안되어있다는 경고 의미로 뭔가 그려라..
+            var componentsLength = this.components.length;
+            for (var i = componentsLength - 1; i >= 0; i--) {
+                var tabBtn = this.components[i];
+                this.removeComponent(tabBtn);
+            }
+        }
+    }
+    postrender(context) {
+        super.postrender(context);
+        if (!this.app.isEditMode)
+            return;
+        var { left, top, width, fillStyle } = this.model;
+        // 이동 핸들 그리기
+        context.beginPath();
+        context.rect(left + width, top, HANDLE_WIDTH, HANDLE_HEIGHT);
+        let color = 255 - (20 % 255);
+        context.fillStyle = rgba(color, color, color, 1);
+        context.fill();
+        context.closePath();
+    }
+    contains(x, y) {
+        if (!this.app.isEditMode)
+            return super.contains(x, y);
+        if (super.contains(x, y))
+            return true;
+        var { left, top, width } = this.bounds;
+        var right = left + width;
+        var h = HANDLE_HEIGHT;
+        return (x < Math.max(right + HANDLE_WIDTH, right) &&
+            x > Math.min(right + HANDLE_WIDTH, right) &&
+            y < Math.max(top + h, top) &&
+            y > Math.min(top + h, top));
+    }
+    dispose() {
+        if (this.reference)
+            this.reference.off('change', this.onRefChanged, this);
+        super.dispose();
+    }
+    rebuildTabButtons() {
+        var { tabIndex = 0, left, top, width, height, fillStyle, activeFillStyle, activeLineColor, activeLineWidth, strokeStyle, fontColor, activeFontColor, fontFamily, fontSize, lineHeight, italic, bold, lineWidth = 0 } = this.model;
+        var reference = this.reference;
+        let children = [];
+        let components = reference.components;
+        let label_height = this.labelHeight;
+        let componentsLength = this.components.length;
+        for (var i = componentsLength - 1; i >= 0; i--) {
+            this.removeComponent(this.components[i]);
+        }
+        for (let i = 0; i < components.length; i++) {
+            if (components[i].model.type != 'floor')
+                continue;
+            let floorText = components[i].text || '';
+            children.push(Model.compile({
+                type: 'tab-button',
+                index: i,
+                text: floorText || String(i + 1),
+                fillStyle: fillStyle || 'transparent',
+                activeFillStyle: activeFillStyle,
+                activeLineColor: activeLineColor,
+                activeLineWidth: activeLineWidth,
+                fontColor: fontColor,
+                activeFontColor: activeFontColor || fontColor,
+                fontFamily: fontFamily,
+                fontSize: fontSize,
+                lineHeight: lineHeight,
+                italic: italic,
+                bold: bold,
+                strokeStyle: strokeStyle,
+                lineWidth: lineWidth,
+                left: 0,
+                top: 0,
+                width: width,
+                height: height
+            }));
+        }
+        this.add(children);
+        this.reflow();
+        this.activeIndex = this.model.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에 변화를 주기위해)
+    onRefChanged(after, before, hint) {
+        // let sourceIndex = hint.deliverer.indexOf(hint.origin)
+        // if(this.components[sourceIndex]) {
+        //   this.components[sourceIndex].set(after)
+        //   this.invalidate()
+        // }
+    }
+    onchange(after, before) {
+        if (after.hasOwnProperty('reference')) {
+            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")) {
+        //
+        // }
+        this.setTabButtonsStyle(after);
+    }
+}
+Component.register('tab', Tab);
+//# sourceMappingURL=tab.js.map

package/dist/tab.js.map

@@ -0,0 +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  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 = {\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: 'indoor-map'\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.model\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.model\n    if (!reference) return null\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.model.height\n\n    return (components > 0 && height / components) || height\n  }\n\n  get activeIndex() {\n    return this.get('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.set('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  postrender(context: CanvasRenderingContext2D) {\n    super.postrender(context)\n\n    if (!this.app.isEditMode) return\n\n    var { left, top, width, fillStyle } = this.model\n\n    // 이동 핸들 그리기\n    context.beginPath()\n\n    context.rect(left + width, top, HANDLE_WIDTH, HANDLE_HEIGHT)\n\n    let color = 255 - (20 % 255)\n    context.fillStyle = rgba(color, color, color, 1)\n    context.fill()\n\n    context.closePath()\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.model\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      if (components[i].model.type != 'floor') continue\n\n      let floorText = components[i].text || ''\n\n      children.push(\n        Model.compile({\n          type: 'tab-button',\n          index: i,\n          text: floorText || 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.model.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"]}

package/dist/templates/index.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;
+        fillStyle: string;
+        activeFillStyle: string;
+        strokeStyle: string;
+        fontColor: string;
+    };
+    about: string;
+}[];
+export default _default;

package/dist/templates/index.js

@@ -0,0 +1,3 @@
+import tab from './tab';
+export default [tab];
+//# 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,GAAG,MAAM,OAAO,CAAA;AAEvB,eAAe,CAAC,GAAG,CAAC,CAAA","sourcesContent":["import tab from './tab'\n\nexport default [tab]\n"]}

package/dist/templates/tab.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;
+        fillStyle: string;
+        activeFillStyle: string;
+        strokeStyle: string;
+        fontColor: string;
+    };
+    about: string;
+};
+export default _default;

package/dist/templates/tab.js

@@ -0,0 +1,21 @@
+import icon from '../../assets/tab.png';
+export default {
+    type: 'tab',
+    description: 'container tab',
+    group: 'container' /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */,
+    icon,
+    model: {
+        type: 'tab',
+        left: 100,
+        top: 100,
+        width: 100,
+        height: 400,
+        lineWidth: 5,
+        fillStyle: 'navy',
+        activeFillStyle: 'red',
+        strokeStyle: 'white',
+        fontColor: 'white'
+    },
+    about: '/helps/scene/component/tab.md'
+};
+//# sourceMappingURL=tab.js.map

package/dist/templates/tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab.js","sourceRoot":"","sources":["../../src/templates/tab.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,sBAAsB,CAAA;AAEvC,eAAe;IACb,IAAI,EAAE,KAAK;IACX,WAAW,EAAE,eAAe;IAC5B,KAAK,EAAE,WAAW,CAAC,gGAAgG;IACnH,IAAI;IACJ,KAAK,EAAE;QACL,IAAI,EAAE,KAAK;QACX,IAAI,EAAE,GAAG;QACT,GAAG,EAAE,GAAG;QACR,KAAK,EAAE,GAAG;QACV,MAAM,EAAE,GAAG;QACX,SAAS,EAAE,CAAC;QACZ,SAAS,EAAE,MAAM;QACjB,eAAe,EAAE,KAAK;QACtB,WAAW,EAAE,OAAO;QACpB,SAAS,EAAE,OAAO;KACnB;IACD,KAAK,EAAE,+BAA+B;CACvC,CAAA","sourcesContent":["import icon from '../../assets/tab.png'\n\nexport default {\n  type: 'tab',\n  description: 'container tab',\n  group: 'container' /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */,\n  icon,\n  model: {\n    type: 'tab',\n    left: 100,\n    top: 100,\n    width: 100,\n    height: 400,\n    lineWidth: 5,\n    fillStyle: 'navy',\n    activeFillStyle: 'red',\n    strokeStyle: 'white',\n    fontColor: 'white'\n  },\n  about: '/helps/scene/component/tab.md'\n}\n"]}

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

@@ -0,0 +1,14 @@
+# tab[ko]
+
+![Container][Container-04]  
+탭
+
+
+- Category : Container
+
+[Container-04]: ../images/container-04.png
+
+
+## properties
+
+### 

package/helps/scene/component/tab.md

@@ -0,0 +1,13 @@
+# tab[en]
+
+![Container][Container-04]  
+Tab
+
+
+- Category : Container
+
+[Container-04]: ../images/container-04.png
+
+## properties
+
+### 

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

@@ -0,0 +1,13 @@
+# tab[zh]
+![Container][Container-04]  
+标签
+
+
+- 类型：集装箱
+
+[Container-04]: ../images/container-04.png
+
+
+## properties
+
+### 

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@operato/scene-tab",
+  "description": "Tab style container for Things Scene",
+  "license": "MIT",
+  "author": "heartyoh",
+  "version": "0.0.22",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "things-scene": true,
+  "publishConfig": {
+    "access": "public",
+    "@oprato:registry": "https://registry.npmjs.org"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/things-scene/operato-scene.git",
+    "directory": "packages/tab"
+  },
+  "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.28"
+  },
+  "devDependencies": {
+    "@hatiolab/prettier-config": "^1.0.0",
+    "@operato/board": "^0.2.49",
+    "@things-factory/builder": "^4.0.17",
+    "@things-factory/operato-board": "^4.0.17",
+    "@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": "7e822f1e624ce53025a7e960578ad43b100b3f01"
+}

package/src/index.ts

@@ -0,0 +1,4 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+export { default as Tab } from './tab'

package/src/tab-button.ts

@@ -0,0 +1,100 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import { Component, RectPath, State } from '@hatiolab/things-scene'
+
+import Tab from './tab'
+
+export default class TabButton extends RectPath(Component) {
+  get index() {
+    return this.model.index
+  }
+
+  get activated() {
+    return (this.parent as Tab).activeIndex === this.index
+  }
+
+  removed(parent: Tab) {
+    this.dispose()
+  }
+
+  private _fillStyle?: string
+  private _fontColor?: string
+  private _strokeStyle?: string
+  private _lineWidth?: string
+
+  prerender(context: CanvasRenderingContext2D) {
+    super.prerender(context)
+    let { fillStyle, activeFillStyle, activeLineColor, activeLineWidth, fontColor, activeFontColor } = this.model
+
+    // backup style
+    if (!this.hasOwnProperty('_fillStyle')) {
+      this._fillStyle = fillStyle
+    }
+    if (!this.hasOwnProperty('_fontColor')) {
+      this._fontColor = fontColor
+    }
+
+    if (this.activated) {
+      this.model.fillStyle = activeFillStyle
+      this.model.fontColor = activeFontColor
+      this.model.strokeStyle = activeLineColor
+      this.model.lineWidth = activeLineWidth
+    } else {
+      this.model.fillStyle = this._fillStyle
+      this.model.fontColor = this._fontColor
+      this.model.strokeStyle = this._strokeStyle
+      this.model.lineWidth = this._lineWidth
+    }
+  }
+
+  render(context: CanvasRenderingContext2D) {
+    var { left = 0, top = 0, width, height } = this.bounds
+
+    // 컨테이너의 바운드를 표현한다.(컨테이너의 기본 그리기 기능)
+    context.beginPath()
+
+    context.rect(left, top, width, height)
+
+    this.drawFill(context)
+    this.drawStroke(context)
+  }
+
+  postrender(context: CanvasRenderingContext2D) {
+    super.postrender(context)
+
+    // restore style
+    this.model.fillStyle = this._fillStyle
+    this.model.fontColor = this._fontColor
+    this.model.strokeStyle = this._strokeStyle
+    this.model.lineWidth = this._lineWidth
+
+    delete this._fillStyle
+    delete this._fontColor
+    delete this._strokeStyle
+    delete this._lineWidth
+  }
+
+  onclick(e: MouseEvent) {
+    (this.parent as Tab).activeIndex = this.index
+    this.parent.invalidate()
+  }
+
+  onchange(after: State) {
+    if (after.hasOwnProperty('fillStyle')) this._fillStyle = after.fillStyle
+
+    if (after.hasOwnProperty('fontColor')) this._fontColor = after.fontColor
+
+    if (after.hasOwnProperty('strokeStyle')) this._fontColor = after.fontColor
+
+    if (after.hasOwnProperty('lineWidth')) this._fontColor = after.fontColor
+
+    if (after.hasOwnProperty('text')) {
+      (this.parent as Tab).reference.getAt(this.index).set('text', after.text)
+    }
+
+    this.invalidate()
+  }
+}
+
+Component.register('tab-button', TabButton)