@operato/scene-tab 1.1.5 → 1.1.14

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

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

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

@@ -0,0 +1,20 @@
+{
+    "keep": {
+        "days": true,
+        "amount": 2
+    },
+    "auditLog": "logs/.08636eb59927f12972f6774f5947c8507b3564c2-audit.json",
+    "files": [
+        {
+            "date": 1668305631867,
+            "name": "logs/application-2022-11-13-11.log",
+            "hash": "1a4fca34a06957f0bc9147bd1998aaea9986f560f3845b16e24ba2561354870c"
+        },
+        {
+            "date": 1668310621750,
+            "name": "logs/application-2022-11-13-12.log",
+            "hash": "a6e92b1ff5d1c59348091f85a4b8ce1ebea0994b1d64a91dae0e13226b57bbc5"
+        }
+    ],
+    "hashType": "sha256"
+}

package/logs/.5e5d741d8b7784a2fbad65eedc0fd46946aaf6f2-audit.json

@@ -0,0 +1,20 @@
+{
+    "keep": {
+        "days": true,
+        "amount": 14
+    },
+    "auditLog": "logs/.5e5d741d8b7784a2fbad65eedc0fd46946aaf6f2-audit.json",
+    "files": [
+        {
+            "date": 1668305632737,
+            "name": "logs/connections-2022-11-13-11.log",
+            "hash": "92b5a5784b7ecd0a635f48151736b7f4694661cb60da2f3356fc2c3763067370"
+        },
+        {
+            "date": 1668310623258,
+            "name": "logs/connections-2022-11-13-12.log",
+            "hash": "9827208d4a25978610634d4d0297f8b056db5eec06278d5b1baf16df63c4b684"
+        }
+    ],
+    "hashType": "sha256"
+}

package/logs/application-2022-11-13-11.log

@@ -0,0 +1,14 @@
+2022-11-13T11:13:52+09:00 info: File Storage is Ready.
+2022-11-13T11:13:52+09:00 error: oracledb module loading failed
+2022-11-13T11:14:05+09:00 info: File Storage is Ready.
+2022-11-13T11:14:05+09:00 error: oracledb module loading failed
+2022-11-13T11:14:06+09:00 info: Default DataSource established
+2022-11-13T11:14:06+09:00 info: Transaction DataSource established
+2022-11-13T11:14:07+09:00 info: 🚀 Server ready at http://0.0.0.0:3000/graphql
+2022-11-13T11:14:07+09:00 info: 🚀 Subscriptions ready at ws://0.0.0.0:3000/graphql
+2022-11-13T11:47:26+09:00 info: File Storage is Ready.
+2022-11-13T11:47:26+09:00 error: oracledb module loading failed
+2022-11-13T11:47:27+09:00 info: Default DataSource established
+2022-11-13T11:47:27+09:00 info: Transaction DataSource established
+2022-11-13T11:47:28+09:00 info: 🚀 Server ready at http://0.0.0.0:3000/graphql
+2022-11-13T11:47:28+09:00 info: 🚀 Subscriptions ready at ws://0.0.0.0:3000/graphql

package/logs/application-2022-11-13-12.log

@@ -0,0 +1,6 @@
+2022-11-13T12:37:02+09:00 info: File Storage is Ready.
+2022-11-13T12:37:03+09:00 error: oracledb module loading failed
+2022-11-13T12:37:04+09:00 info: Default DataSource established
+2022-11-13T12:37:04+09:00 info: Transaction DataSource established
+2022-11-13T12:37:04+09:00 info: 🚀 Server ready at http://0.0.0.0:3000/graphql
+2022-11-13T12:37:04+09:00 info: 🚀 Subscriptions ready at ws://0.0.0.0:3000/graphql

package/logs/connections-2022-11-13-11.log

@@ -0,0 +1,70 @@
+2022-11-13T11:14:07+09:00 info: Initializing ConnectionManager...
+2022-11-13T11:14:07+09:00 info: Connector 'echo-back-server' started to ready
+2022-11-13T11:14:07+09:00 info: Connector 'echo-back' started to ready
+2022-11-13T11:14:07+09:00 info: Connector 'http-connector' started to ready
+2022-11-13T11:14:07+09:00 info: Connector 'graphql-connector' started to ready
+2022-11-13T11:14:07+09:00 info: Connector 'sqlite-connector' started to ready
+2022-11-13T11:14:07+09:00 info: Connector 'postgresql-connector' started to ready
+2022-11-13T11:14:07+09:00 info: Connector 'mqtt-connector' started to ready
+2022-11-13T11:14:07+09:00 info: Connector 'mssql-connector' started to ready
+2022-11-13T11:14:07+09:00 info: Connector 'oracle-connector' started to ready
+2022-11-13T11:14:07+09:00 info: Connector 'mysql-connector' started to ready
+2022-11-13T11:14:07+09:00 info: Connector 'socket-server' started to ready
+2022-11-13T11:14:07+09:00 info: echo-back-servers are ready
+2022-11-13T11:14:07+09:00 info: echo-back connections are ready
+2022-11-13T11:14:07+09:00 info: http-connector connections are ready
+2022-11-13T11:14:07+09:00 info: graphql-connector connections are ready
+2022-11-13T11:14:07+09:00 info: sqlite-connector connections are ready
+2022-11-13T11:14:07+09:00 info: postgresql-connector connections are ready
+2022-11-13T11:14:07+09:00 info: mqtt-connector connections are ready
+2022-11-13T11:14:07+09:00 info: mssql-connector connections are ready
+2022-11-13T11:14:07+09:00 info: oracle-connector connections are ready
+2022-11-13T11:14:07+09:00 info: mysql-connector connections are ready
+2022-11-13T11:14:07+09:00 info: socket servers are ready
+2022-11-13T11:14:07+09:00 info: All connector for 'echo-back-server' ready
+2022-11-13T11:14:07+09:00 info: All connector for 'echo-back' ready
+2022-11-13T11:14:07+09:00 info: All connector for 'http-connector' ready
+2022-11-13T11:14:07+09:00 info: All connector for 'graphql-connector' ready
+2022-11-13T11:14:07+09:00 info: All connector for 'sqlite-connector' ready
+2022-11-13T11:14:07+09:00 info: All connector for 'postgresql-connector' ready
+2022-11-13T11:14:07+09:00 info: All connector for 'mqtt-connector' ready
+2022-11-13T11:14:07+09:00 info: All connector for 'mssql-connector' ready
+2022-11-13T11:14:07+09:00 info: All connector for 'oracle-connector' ready
+2022-11-13T11:14:07+09:00 info: All connector for 'mysql-connector' ready
+2022-11-13T11:14:07+09:00 info: All connector for 'socket-server' ready
+2022-11-13T11:14:07+09:00 info: ConnectionManager initialization done:
+2022-11-13T11:47:28+09:00 info: Initializing ConnectionManager...
+2022-11-13T11:47:28+09:00 info: Connector 'echo-back-server' started to ready
+2022-11-13T11:47:28+09:00 info: Connector 'echo-back' started to ready
+2022-11-13T11:47:28+09:00 info: Connector 'http-connector' started to ready
+2022-11-13T11:47:28+09:00 info: Connector 'graphql-connector' started to ready
+2022-11-13T11:47:28+09:00 info: Connector 'sqlite-connector' started to ready
+2022-11-13T11:47:28+09:00 info: Connector 'postgresql-connector' started to ready
+2022-11-13T11:47:28+09:00 info: Connector 'mqtt-connector' started to ready
+2022-11-13T11:47:28+09:00 info: Connector 'mssql-connector' started to ready
+2022-11-13T11:47:28+09:00 info: Connector 'oracle-connector' started to ready
+2022-11-13T11:47:28+09:00 info: Connector 'mysql-connector' started to ready
+2022-11-13T11:47:28+09:00 info: Connector 'socket-server' started to ready
+2022-11-13T11:47:28+09:00 info: echo-back-servers are ready
+2022-11-13T11:47:28+09:00 info: echo-back connections are ready
+2022-11-13T11:47:28+09:00 info: http-connector connections are ready
+2022-11-13T11:47:28+09:00 info: graphql-connector connections are ready
+2022-11-13T11:47:28+09:00 info: sqlite-connector connections are ready
+2022-11-13T11:47:28+09:00 info: postgresql-connector connections are ready
+2022-11-13T11:47:28+09:00 info: mqtt-connector connections are ready
+2022-11-13T11:47:28+09:00 info: mssql-connector connections are ready
+2022-11-13T11:47:28+09:00 info: oracle-connector connections are ready
+2022-11-13T11:47:28+09:00 info: mysql-connector connections are ready
+2022-11-13T11:47:28+09:00 info: socket servers are ready
+2022-11-13T11:47:28+09:00 info: All connector for 'echo-back-server' ready
+2022-11-13T11:47:28+09:00 info: All connector for 'echo-back' ready
+2022-11-13T11:47:28+09:00 info: All connector for 'http-connector' ready
+2022-11-13T11:47:28+09:00 info: All connector for 'graphql-connector' ready
+2022-11-13T11:47:28+09:00 info: All connector for 'sqlite-connector' ready
+2022-11-13T11:47:28+09:00 info: All connector for 'postgresql-connector' ready
+2022-11-13T11:47:28+09:00 info: All connector for 'mqtt-connector' ready
+2022-11-13T11:47:28+09:00 info: All connector for 'mssql-connector' ready
+2022-11-13T11:47:28+09:00 info: All connector for 'oracle-connector' ready
+2022-11-13T11:47:28+09:00 info: All connector for 'mysql-connector' ready
+2022-11-13T11:47:28+09:00 info: All connector for 'socket-server' ready
+2022-11-13T11:47:28+09:00 info: ConnectionManager initialization done:

package/logs/connections-2022-11-13-12.log

@@ -0,0 +1,35 @@
+2022-11-13T12:37:05+09:00 info: Initializing ConnectionManager...
+2022-11-13T12:37:05+09:00 info: Connector 'echo-back-server' started to ready
+2022-11-13T12:37:05+09:00 info: Connector 'echo-back' started to ready
+2022-11-13T12:37:05+09:00 info: Connector 'http-connector' started to ready
+2022-11-13T12:37:05+09:00 info: Connector 'graphql-connector' started to ready
+2022-11-13T12:37:05+09:00 info: Connector 'sqlite-connector' started to ready
+2022-11-13T12:37:05+09:00 info: Connector 'postgresql-connector' started to ready
+2022-11-13T12:37:05+09:00 info: Connector 'mqtt-connector' started to ready
+2022-11-13T12:37:05+09:00 info: Connector 'mssql-connector' started to ready
+2022-11-13T12:37:05+09:00 info: Connector 'oracle-connector' started to ready
+2022-11-13T12:37:05+09:00 info: Connector 'mysql-connector' started to ready
+2022-11-13T12:37:05+09:00 info: Connector 'socket-server' started to ready
+2022-11-13T12:37:05+09:00 info: echo-back-servers are ready
+2022-11-13T12:37:05+09:00 info: echo-back connections are ready
+2022-11-13T12:37:05+09:00 info: http-connector connections are ready
+2022-11-13T12:37:05+09:00 info: graphql-connector connections are ready
+2022-11-13T12:37:05+09:00 info: sqlite-connector connections are ready
+2022-11-13T12:37:05+09:00 info: postgresql-connector connections are ready
+2022-11-13T12:37:05+09:00 info: mqtt-connector connections are ready
+2022-11-13T12:37:05+09:00 info: mssql-connector connections are ready
+2022-11-13T12:37:05+09:00 info: oracle-connector connections are ready
+2022-11-13T12:37:05+09:00 info: mysql-connector connections are ready
+2022-11-13T12:37:05+09:00 info: socket servers are ready
+2022-11-13T12:37:05+09:00 info: All connector for 'echo-back-server' ready
+2022-11-13T12:37:05+09:00 info: All connector for 'echo-back' ready
+2022-11-13T12:37:05+09:00 info: All connector for 'http-connector' ready
+2022-11-13T12:37:05+09:00 info: All connector for 'graphql-connector' ready
+2022-11-13T12:37:05+09:00 info: All connector for 'sqlite-connector' ready
+2022-11-13T12:37:05+09:00 info: All connector for 'postgresql-connector' ready
+2022-11-13T12:37:05+09:00 info: All connector for 'mqtt-connector' ready
+2022-11-13T12:37:05+09:00 info: All connector for 'mssql-connector' ready
+2022-11-13T12:37:05+09:00 info: All connector for 'oracle-connector' ready
+2022-11-13T12:37:05+09:00 info: All connector for 'mysql-connector' ready
+2022-11-13T12:37:05+09:00 info: All connector for 'socket-server' ready
+2022-11-13T12:37:05+09:00 info: ConnectionManager initialization done:

package/package.json

@@ -3,7 +3,7 @@
   "description": "Tab style container for Things Scene",
   "license": "MIT",
   "author": "heartyoh",
-  "version": "1.1.5",
+  "version": "1.1.14",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "things-scene": true,
@@ -57,5 +57,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "412dd47dbdd764d4bf0e13ca423b35667e641784"
+  "gitHead": "19643cfbb5de4f874ae7d0374d264828c3b6ad74"
 }

package/src/index.ts

@@ -1,5 +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'

package/src/tab-button.ts

@@ -25,7 +25,7 @@ export default class TabButton extends RectPath(Component) {
 
   prerender(context: CanvasRenderingContext2D) {
     super.prerender(context)
-    let { fillStyle, activeFillStyle, activeLineColor, activeLineWidth, fontColor, activeFontColor } = this.model
+    let { fillStyle, activeFillStyle, activeLineColor, activeLineWidth, fontColor, activeFontColor } = this.state
 
     // backup style
     if (!this.hasOwnProperty('_fillStyle')) {
@@ -76,7 +76,7 @@ export default class TabButton extends RectPath(Component) {
   }
 
   onclick(e: MouseEvent) {
-    (this.parent as Tab).activeIndex = this.index
+    ;(this.parent as Tab).activeIndex = this.index
     this.parent.invalidate()
   }
 
@@ -90,7 +90,7 @@ export default class TabButton extends RectPath(Component) {
     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.parent as Tab).reference.getAt(this.index).set('text', after.text)
     }
 
     this.invalidate()

package/src/tab-card.ts

@@ -0,0 +1,76 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import { Component, ComponentNature, Container } from '@hatiolab/things-scene'
+
+import TabContainer from './tab-container'
+
+const NATURE: ComponentNature = {
+  mutable: false,
+  resizable: true,
+  rotatable: true,
+  properties: [
+    {
+      type: 'action',
+      label: 'remove',
+      name: 'remove',
+      property: {
+        icon: 'remove_circle',
+        action: function (tabCard: TabCard) {
+          let tabContainer = tabCard.parent as TabContainer
+          tabContainer.removeComponent(tabCard)
+          tabContainer.set('activeIndex', 0)
+        }
+      }
+    }
+  ]
+}
+
+export default class TabCard extends Container {
+  private _clickPoint?: Component
+
+  get hasTextProperty() {
+    return false
+  }
+
+  get showMoveHandle() {
+    return false
+  }
+
+  /*
+   * PATH 리스트를 직접 수정할 수 있는 지를 결정한다.
+   *
+   * 일반적으로 PATH는 바운드 생성을 위해서 논리적으로 생성되므로, 직접 수정하지 않는다.(return false)
+   * 그러나, 각 꼭지점들이 개별로 움직이는 다각형류는 path 라는 모델데이타를 가지므로, 직접수정이 가능할 수 있다.(return true)
+   *
+   * Immutable 컴포넌트의 형상을 바꾸는 방법은 바운드를 이용한 리사이즈나, 특별한 컨트롤을 통해서 가능하다.
+   */
+  get mutable() {
+    return false
+  }
+
+  /*
+   * BOUND를 통해서 리사이즈를 할 수 있는 지를 결정한다.
+   *
+   * 일반적으로 면적을 갖는 컴포넌트는 대체로 가능하다.(return true)
+   * 그러나, LINE 등 면적을 가지지않는 컴포넌트는 가능하지 않도록 정의한다.(return false)
+   */
+  get resizable() {
+    return false
+  }
+
+  /*
+   * 회전을 할 수 있는 지를 결정한다.
+   *
+   * 일반적으로 모든 컴포넌트는 가능하다.(return true)
+   */
+  get rotatable() {
+    return false
+  }
+
+  get nature() {
+    return NATURE
+  }
+}
+
+Component.register('tab-card', TabCard)

package/src/tab-container.ts

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