@operato/scene-table 0.0.17

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

@@ -0,0 +1,68 @@
+# table
+
+여러개의 데이터를 테이블의 형태로 표현할 때 사용하는 컴포넌트.
+
+- Category : Table
+- 속성(테이블) :
+1. Row & Column(Number) - 행과 열의 개수를 조절
+![Table-행열 갯수][table-02]
+1. Cell Width & Height - 테이블의 빨간 핸들러를 마우스로 드래그하면 각 셀마다 크기를 조절할 수 있다.  
+![Table-행열의 크기][table-03]
+
+- 속성(셀) :
+1. Border Style - 선택된 셀의 테두리의 굵기 및 색상을 변경. 스타일 값을 입력 후 ![Table-셀 스타일 종류][table-04] 중 적용할 셀의 버튼을 누른다.
+![Table-셀 스타일][table-05]
+1. Border Type - 선택 된 셀의 선의 종류를 변경. 테두리 종류를 선택 후 ![Table-셀 스타일 종류][table-04] 중 적용할 셀의 버튼을 누른다.  
+__(!!셀의 테두리와 테이블의 테두리는 서로 다르게 적용)__
+1. Merge Cells - 선택된 셀을 병합(붙어있는 셀만 적용)
+1. Split Cells - 셀의 병합을 해제
+1. Delete Row - 선택된 행을 삭제
+![Table-셀 행 삭제][table-06]
+1. Delete Column - 선택된 열을 삭제
+![Table-셀 열 삭제][table-07]
+1. Insert Above - 선택된 셀의 위쪽에 새로운 셀 삽입
+![Table-셀 위쪽 삽입][table-08]
+1. Insert Below - 선택된 셀의 아래쪽에 새로운 셀 삽입
+![Table-셀 아래쪽 삽입][table-09]
+1. Insert Left - 선택된 셀의 왼쪽에 새로운 셀 삽입
+![Table-셀 왼쪽 삽입][table-10]
+1. Insert Right - 선택된 셀의 오른쪽에 새로운 셀 삽입
+![Table-셀 오른쪽 삽입][table-11]
+1. Distribute Horizontal - 선택된 열들의 넓이를 같게
+![Table-셀 넓이 같게][table-12]
+1. Distribute Vertical - 선택된 행들의 높이를 같게
+![Table-셀 높이 같게][table-13]
+1. Data Key - 테이블에 데이터를 매핑할 때 데이터 헤더의 필드명. DataKey는 열이 위치하는 번호가 아닌 반드시 필드명으로 입력한다.
+1. Data Index - 테이블에 데이터를 매핑할 때 데이터 행의 위치. DataIndex는 헤더를 제외한 데이터의 시작번호를 0으로 한다.  
+![Table-데이터 예시][table-14]  
+위 사진과 같은 데이터가 왔을시 Date의 '01-03'의 데이터를 표시한다면 DataKey = Date, DataIndex = 2를 입력한다.
+
+
+
+[table-01]: ../images/table-01.png
+
+[table-02]: ../images/table-02.png
+
+[table-03]: ../images/table-03.png
+
+[table-04]: ../images/table-04.png
+
+[table-05]: ../images/table-05.png
+
+[table-06]: ../images/table-06.png
+
+[table-07]: ../images/table-07.png
+
+[table-08]: ../images/table-08.png
+
+[table-09]: ../images/table-09.png
+
+[table-10]: ../images/table-10.png
+
+[table-11]: ../images/table-11.png
+
+[table-12]: ../images/table-12.png
+
+[table-13]: ../images/table-13.png
+
+[table-14]: ../images/table-14.png

package/helps/scene/component/table.md

@@ -0,0 +1,68 @@
+# table
+
+The component which is used to display several data in the form of table.
+
+- Category : Table
+- Property(Table):
+1. Row & Column(Number) - Adjust the number of rows and columns.
+![Table-The number of rows and columns][table-02]
+1. Cell Width & Height - If drag the red handler of table with mouse, you can adjust the size of each cell.
+![Table-The size of rows and columns][table-03]
+
+- Property(Cell):
+1. Border Style - Change the thickness and color of border of the selected cell. After enter the style value, type the button of cell in which will apply it among ![Table-셀 스타일 종류][table-04].
+![Table-Cell style][table-05]
+1. Border Type - Change the type of line of the selected cell. After select the border type, type the button of cell in which will apply it among ![Table-셀 스타일 종류][table-04].  
+__(!!Apply cell border and table border differently.)__
+1. Merge Cells - Merge the selected cells. (Apply to the neighboring cells only)
+1. Split Cells - Unmerge the cells.
+1. Delete Row - Delete the selected row.
+![Table-Delete the cell row][table-06]
+1. Delete Column - Delete the selected column.
+![Table-Delete the cell column][table-07]
+1. Insert Above - Insert a new cell on the top of the selected cell.
+![Table-Insert on the top of cell][table-08]
+1. Insert Below - Insert a new cell on the bottom of the selected cell.
+![Table-Insert on the bottom of cell][table-09]
+1. Insert Left - Insert a new cell on the left of the selected cell.
+![Table-Insert on the left of cell][table-10]
+1. Insert Right - Insert a new cell on the right of the selected cell.
+![Table-Insert on the right of cell][table-11]
+1. Distribute Horizontally - Make the width of the selected columns be the same.
+![Table-Make the cell width the same][table-12]
+1. Distribute Vertically - Make the height of the selected rows the same.
+![Table-Make the cell height the same][table-13]
+1. Data Key - The field name of data header when mapping the data in table. DataKey must be entered as the field name rather than the number of column.
+1. Data Index - The location of data row when mapping the data in table. DataIndex makes the start number of data except the header as 0.  
+![Table-데이터 예시][table-14]  
+When receive the data as in the above image, if want to display the data of ‘01-03’ of Date, you can enter DataKey = Date, DataIndex = 2.
+
+
+
+[table-01]: ../images/table-01.png
+
+[table-02]: ../images/table-02.png
+
+[table-03]: ../images/table-03.png
+
+[table-04]: ../images/table-04.png
+
+[table-05]: ../images/table-05.png
+
+[table-06]: ../images/table-06.png
+
+[table-07]: ../images/table-07.png
+
+[table-08]: ../images/table-08.png
+
+[table-09]: ../images/table-09.png
+
+[table-10]: ../images/table-10.png
+
+[table-11]: ../images/table-11.png
+
+[table-12]: ../images/table-12.png
+
+[table-13]: ../images/table-13.png
+
+[table-14]: ../images/table-14.png

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

@@ -0,0 +1,68 @@
+# table
+
+被用于用表格显示多个数据时的组件。
+
+- 类型：表格
+- 属性（表格）：
+1. Row & Column(Number) - 调整行和列的数量。
+![Table-行和列的数量][table-02]
+1. Cell Width & Height - 如果用鼠标拖动表格的红色句柄，就可以调整各个单元格的大小。
+![Table-行和列的大小][table-03]
+
+- 属性（单元格）：
+1. Border Style - 变更所选单元格的边框厚度以及颜色。输入样式值之后，输入![Table-单元格样式类型][table-04]中将要适用的单元格的按钮。
+![Table-单元格样式][table-05]
+1. Border Type - 变更所选单元格的线的类型。选择边框类型之后， 输入![Table-单元格样式类型][table-04]将要适用的单元格的按钮。  
+__(!!适用不同的单元格边框和表格边框。)__
+1. Merge Cells - 合并所选单元格（只适用于邻近的单元格。）
+1. Split Cells - 解除单元格的合并。
+1. Delete Row - 删除所选行。
+![Table-删除单元格的行][table-06]
+1. Delete Column - 删除所选列。
+![Table-删除单元格的列][table-07]
+1. Insert Above - 在所选单元格的上方，插入新的单元格。
+![Table-插入单元格上方][table-08]
+1. Insert Below - 在所选单元格的下方，插入新的单元格。
+![Table-插入单元格下方][table-09]
+1. Insert Left - 在所选单元格的左侧，插入新的单元格。
+![Table-插入单元格左侧][table-10]
+1. Insert Right - 在所选单元格的右侧，插入新的单元格。
+![Table-插入单元格右侧][table-11]
+1. Distribute Horizontal - 统一所选列的宽度。
+![Table-统一单元格宽度][table-12]
+1. Distribute Vertical - 统一所选行的高度。
+![Table-统一单元格高度][table-13]
+1. Data Key - 当在表格匹配数据时，数据标题的字段名称。一定要用非列所位置的号码的、字段名称输入Data Key。
+1. Data Index - 当在表格匹配数据时，数据行的位置。DataIndex以除标题的、数据的起始号码为0。  
+![Table-数据例题][table-14]  
+当收到如上述图片的数据时，如果想要显示Date的‘01-03’的数据，可以输入DataKey = Date，DataIndex = 2。
+
+
+
+[table-01]: ../images/table-01.png
+
+[table-02]: ../images/table-02.png
+
+[table-03]: ../images/table-03.png
+
+[table-04]: ../images/table-04.png
+
+[table-05]: ../images/table-05.png
+
+[table-06]: ../images/table-06.png
+
+[table-07]: ../images/table-07.png
+
+[table-08]: ../images/table-08.png
+
+[table-09]: ../images/table-09.png
+
+[table-10]: ../images/table-10.png
+
+[table-11]: ../images/table-11.png
+
+[table-12]: ../images/table-12.png
+
+[table-13]: ../images/table-13.png
+
+[table-14]: ../images/table-14.png

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@operato/scene-table",
+  "description": "Things Scene Table Component.",
+  "version": "0.0.17",
+  "license": "MIT",
+  "author": "heartyoh",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "things-scene": true,
+  "publishConfig": {
+    "access": "public",
+    "@operato:registry": "https://registry.npmjs.org"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/things-scene/operato-scene.git",
+    "directory": "packages/table"
+  },
+  "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.26"
+  },
+  "devDependencies": {
+    "@hatiolab/prettier-config": "^1.0.0",
+    "@operato/board": "^0.2.45",
+    "@things-factory/builder": "^4.0.12",
+    "@things-factory/operato-board": "^4.0.12",
+    "@types/chart.js": "2.9.34",
+    "@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": "73c1f297d63e6a7c92516c206bcce3f5310c77ee"
+}

package/src/data-list/data-cell.ts

@@ -0,0 +1,66 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import { Component, RectPath, Style } from '@hatiolab/things-scene'
+
+import { Table } from '..'
+
+const NATURE = {
+  mutable: false,
+  resizable: true,
+  rotatable: true,
+  properties: [
+    {
+      type: 'editor-table',
+      label: '',
+      name: '',
+      property: {
+        merge: false,
+        split: false
+      }
+    }
+  ],
+  help: 'scene/component/data-cell'
+}
+
+export default class DataCell extends RectPath(Component) {
+  get nature() {
+    return NATURE
+  }
+
+  _drawBorder(context: CanvasRenderingContext2D, x: number, y: number, to_x: number, to_y: number, style: Style) {
+    if (style && style.strokeStyle && style.lineWidth && style.lineDash) {
+      context.beginPath()
+      context.moveTo(x, y)
+      context.lineTo(to_x, to_y)
+      Component.drawStroke(context, style)
+    }
+  }
+
+  _draw(context: CanvasRenderingContext2D) {
+    var { left, top, width, height } = this.bounds
+
+    var border = this.model.border || {}
+
+    // Cell 채우기.
+    context.beginPath()
+    context.lineWidth = 0
+    context.rect(left, top, width, height)
+    this.drawFill(context)
+
+    // Border 그리기
+    var parent = this.parent as Table
+    var idx = parent.components.indexOf(this)
+    var columns = parent.columns || 1
+
+    this._drawBorder(context, left, top, left + width, top, border.top)
+    this._drawBorder(context, left, top + height, left, top, border.left)
+    if ((idx + 1) % columns == 0) {
+      /* if this filed is right most, draw right side border. */
+      this._drawBorder(context, left + width, top, left + width, top + height, border.right)
+    }
+    this._drawBorder(context, left + width, top + height, left, top + height, border.bottom)
+  }
+}
+
+Component.register('data-cell', DataCell)

package/src/data-list/data-list-layout.ts

@@ -0,0 +1,113 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import { Component, Container, Layout } from '@hatiolab/things-scene'
+
+import DataCell from './data-cell'
+import DataList from './data-list'
+
+var DataListLayout = {
+  reflow: function(container: Container) {
+    var layoutConfig = container.get('layoutConfig')
+
+    var columns = (layoutConfig && layoutConfig.columns) || container.get('columns')
+    var rows = (layoutConfig && layoutConfig.rows) || container.get('rows')
+    var widths = (layoutConfig && layoutConfig.widths) || container.get('widths')
+    var heights = (layoutConfig && layoutConfig.heights) || container.get('heights')
+    var { offset = { x: 0, y: 0 } } = container.state
+
+    var widths_sum = widths ? widths.filter((width: number, i: number) => i < columns).reduce((sum: number, width: number) => sum + width, 0) : columns
+    var heights_sum = heights ? heights.filter((height: number, i: number) => i < rows).reduce((sum: number, height: number) => sum + height, 0) : rows
+
+    var inside = container.textBounds
+    var paddingLeft = container.get('paddingLeft') || 0
+    var paddingTop = container.get('paddingTop') || 0
+
+    var width_unit = inside.width / widths_sum
+    var height_unit = inside.height / heights_sum
+
+    var x = offset.x
+    var y = offset.y
+    var components = container.components
+
+    components.forEach((component, idx) => {
+      let w = widths ? widths[idx % columns] : 1
+      let h = heights ? heights[0] : 1
+
+      let left = paddingLeft + x
+      let top = paddingTop + y
+      let width = width_unit * w
+      let height = height_unit * h
+
+      component.bounds = {
+        left,
+        top,
+        width,
+        height
+      }
+      component.set('rotation', 0)
+
+      if (idx % columns == columns - 1) {
+        x = 0
+        y += h * height_unit
+      } else {
+        x += w * width_unit
+      }
+    })
+  },
+
+  capturables: function(container: Container) {
+    return container.components
+  },
+
+  drawables: function(container: Container) {
+    return container.components
+  },
+
+  isStuck: function(component: Component) {
+    return true
+  },
+
+  /*
+   * 레이아웃별로, 키보드 방향키 등을 사용해서 네비게이션 할 수 있는 기능을 제공할 수 있다.
+   * 하나의 컴포넌트만 선택되어있고, 키보드 이벤트가 발생했을 때 호출되게 된다.
+   * keyNavigate 메쏘드가 정의되어 있지 않으면, 'Tab' 키에 대한 네비게이션만 작동한다.
+   * 'Tab'키에 의한 네비게이션은 모든 레이아웃에 공통으로 적용된다.
+   */
+  keyNavigate: function(container: Container, component: Component, e: KeyboardEvent) {
+    var layoutConfig = container.get('layoutConfig')
+
+    var columns = (layoutConfig && layoutConfig.columns) || container.get('columns')
+    var rows = (layoutConfig && layoutConfig.rows) || container.get('rows')
+
+    var { row, column } = (container as DataList).getRowColumn(component as DataCell)
+
+    switch (e.code) {
+      case 'ArrowUp':
+        if (row > 0) return container.getAt((row - 1) * columns + column)
+        break
+      case 'ArrowDown':
+        if (row < rows - 1) return container.getAt((row + 1) * columns + column)
+        break
+      case 'ArrowRight':
+        if (column < columns - 1) return container.getAt(row * columns + column + 1)
+        break
+      case 'ArrowLeft':
+        if (column > 0) return container.getAt(row * columns + column - 1)
+        break
+      default:
+        return component
+    }
+  },
+
+  /*
+   * 하위 컴포넌트를 영역으로 선택하는 경우에, 바운드에 join만 되어도 선택된 것으로 판단하도록 한다.
+   * joinType이 false이거나, 정의되어있지 않으면, 바운드에 포함되어야 선택된 것으로 판단한다.
+   */
+  joinType: true
+}
+
+Layout.register('data-list', DataListLayout)
+
+export default DataListLayout