@operato/scene-tab 1.1.8 → 1.1.15

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.8",
+  "version": "1.1.15",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "things-scene": true,
@@ -31,8 +31,8 @@
   },
   "devDependencies": {
     "@hatiolab/prettier-config": "^1.0.0",
-    "@things-factory/builder": "^6.0.0-alpha.0",
-    "@things-factory/operato-board": "^6.0.0-alpha.0",
+    "@things-factory/builder": "^6.0.0-zeta.0",
+    "@things-factory/operato-board": "^6.0.0-zeta.0",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
     "@web/dev-server": "^0.1.28",
@@ -57,5 +57,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "69c2b91e518f119fe5ecc0406902709edea110b3"
+  "gitHead": "0a162cf5aec001a92274259a2833cec351d1ad67"
 }

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-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)

package/src/tab.ts

@@ -29,7 +29,11 @@ const NATURE: ComponentNature = {
       label: 'tab-reference',
       name: 'reference',
       property: {
-        component: 'indoor-map'
+        component: (c: Component) => {
+          /* this means compare target component */
+          const ret = ['tab-container', 'indoor-map'].includes(c.model.type as string)
+          return ret
+        }
       }
     },
     {
@@ -147,7 +151,7 @@ export default class Tab extends Container {
   postrender(context: CanvasRenderingContext2D) {
     super.postrender(context)
 
-    if (!this.app.isEditMode) return
+    // if (!this.app.isEditMode) return
 
     var { left, top, width, fillStyle } = this.state
 
@@ -223,15 +227,15 @@ export default class Tab extends Container {
     }
 
     for (let i = 0; i < components.length; i++) {
-      if (components[i].model.type != 'floor') continue
+      if (components[i].model.type != 'tab-card') continue
 
-      let floorText = components[i].text || ''
+      let tabCardText = components[i].text || ''
 
       children.push(
         Model.compile({
           type: 'tab-button',
           index: i,
-          text: floorText || String(i + 1),
+          text: tabCardText || String(i + 1),
           fillStyle: fillStyle || 'transparent',
           activeFillStyle: activeFillStyle,
           activeLineColor: activeLineColor,

package/src/templates/index.ts

@@ -1,3 +1,4 @@
-import tab from './tab'
+import TabContainer from './tab-container'
+import Tab from './tab'
 
-export default [tab]
+export default [TabContainer, Tab]

package/src/templates/tab-container.ts

@@ -0,0 +1,17 @@
+const icon = new URL('../../icons/tab-container.png', import.meta.url).href
+
+export default {
+  type: 'tab-container',
+  description: 'tab container(card layout)',
+  group: 'container' /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */,
+  icon,
+  model: {
+    type: 'tab-container',
+    left: 100,
+    top: 100,
+    width: 200,
+    height: 200,
+    fontSize: 80,
+    lineWidth: 1
+  }
+}

package/src/templates/tab.ts

@@ -2,7 +2,7 @@ const icon = new URL('../../icons/tab.png', import.meta.url).href
 
 export default {
   type: 'tab',
-  description: 'container tab',
+  description: 'tab-container control tab',
   group: 'container' /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */,
   icon,
   model: {
@@ -16,6 +16,5 @@ export default {
     activeFillStyle: 'red',
     strokeStyle: 'white',
     fontColor: 'white'
-  },
-  about: '/helps/scene/component/tab.md'
+  }
 }

package/things-scene.config.js

@@ -1,5 +1,5 @@
-import templates from './dist/templates';
+import templates from './dist/templates'
 
 export default {
   templates
-};
+}

package/translations/en.json

@@ -0,0 +1,4 @@
+{
+  "label.active index": "active index",
+  "label.add-card": "add card"
+}

package/translations/ko.json

@@ -0,0 +1,4 @@
+{
+  "label.active index": "활성 페이지",
+  "label.add-card": "카드 추가"
+}

package/translations/ms.json

@@ -0,0 +1,4 @@
+{
+  "label.active index": "[ms] active index",
+  "label.add-card": "[ms] add card"
+}

package/translations/zh.json

@@ -0,0 +1,4 @@
+{
+  "label.active index": "[zh] active index",
+  "label.add-card": "[zh] add card"
+}