@things-factory/modeller-ui 4.0.13 → 4.0.18

package/client/editors/things-editor-table.js

@@ -2,16 +2,14 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import { LitElement, html, css } from 'lit-element'
-
 import '@material/mwc-icon'
-
 import '@polymer/paper-dropdown-menu/paper-dropdown-menu'
 import '@polymer/paper-item/paper-item'
-
 import '@things-factory/i18n-base'
 import './things-editor-color'
 
+import { LitElement, css, html } from 'lit-element'
+
 /**
  * 테이블 셀의 좌,우,상,하 경계선의 스타일을 편집하는 컴포넌트이다.
  * Example:
@@ -288,14 +286,53 @@ class ThingsEditorTable extends LitElement {
   _onClickCell(e) {
     var target = e.target
 
-    while (target && !target.hasAttribute('table-event') && target !== this) target = target.parentElement
-
-    if (target === this || target === null) return
+    const event = target?.closest('[table-event]')?.getAttribute('id')
+    if (!event) {
+      return
+    }
 
     this.dispatchEvent(
-      new CustomEvent('table-' + target.id, {
+      new CustomEvent('i-need-selected', {
         bubbles: true,
-        composed: true
+        composed: true,
+        detail: {
+          callback: selected => {
+            const table = selected[0].parent
+
+            switch (event) {
+              case 'delete-row':
+                table.deleteRows(selected)
+                break
+              case 'delete-column':
+                table.deleteColumns(selected)
+                break
+              case 'insert-above':
+                table.insertCellsAbove(selected)
+                break
+              case 'insert-below':
+                table.insertCellsBelow(selected)
+                break
+              case 'insert-left':
+                table.insertCellsLeft(selected)
+                break
+              case 'insert-right':
+                table.insertCellsRight(selected)
+                break
+              case 'merge-cells':
+                table.mergeCells(selected)
+                break
+              case 'split-cells':
+                table.splitCells(selected)
+                break
+              case 'distribute-horizontal':
+                table.distributeHorizontal(selected)
+                break
+              case 'distribute-vertical':
+                table.distributeVertical(selected)
+                break
+            }
+          }
+        }
       })
     )
 
@@ -305,22 +342,10 @@ class ThingsEditorTable extends LitElement {
   _onClickType(e) {
     var target = e.target
 
-    while (target && !target.hasAttribute('data-value') && target !== this) target = target.parentElement
-
-    if (target === this || target === null) return
-
-    this.dispatchEvent(
-      new CustomEvent('table-cell-border-set', {
-        bubbles: true,
-        composed: true,
-        detail: {
-          type: target.getAttribute('data-value'),
-          borderWidth: this.borderWidth,
-          borderStyle: this.borderStyle,
-          borderColor: this.borderColor
-        }
-      })
-    )
+    const where = target?.closest('[data-value]')?.getAttribute('data-value')
+    if (!where) {
+      return
+    }
 
     this.dispatchEvent(
       new CustomEvent('i-need-selected', {
@@ -328,9 +353,17 @@ class ThingsEditorTable extends LitElement {
         composed: true,
         detail: {
           callback: selected => {
-            console.log(selected)
-            console.log(this.borderColor)
-            console.log(target)
+            const table = selected[0].parent
+
+            table.setCellsStyle(
+              selected,
+              {
+                strokeStyle: this.borderColor,
+                lineDash: this.borderStyle,
+                lineWidth: this.borderWidth
+              },
+              where
+            )
           }
         }
       })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@things-factory/modeller-ui",
-  "version": "4.0.13",
+  "version": "4.0.18",
   "main": "dist-server/index.js",
   "browser": "client/index.js",
   "things-factory": true,
@@ -29,7 +29,7 @@
     "@graphql-tools/url-loader": "^7.2.0",
     "@graphql-tools/wrap": "^8.1.1",
     "@material/mwc-icon": "^0.25.3",
-    "@operato/property-editor": "^0.2.43",
+    "@operato/property-editor": "^0.2.49",
     "@polymer/iron-flex-layout": "^3.0.1",
     "@polymer/iron-form-element-behavior": "^3.0.1",
     "@polymer/iron-resizable-behavior": "^3.0.1",
@@ -43,9 +43,9 @@
     "@polymer/paper-ripple": "^3.0.2",
     "@polymer/paper-slider": "^3.0.1",
     "@polymer/polymer": "^3.3.1",
-    "@things-factory/attachment-ui": "^4.0.13",
-    "@things-factory/font-ui": "^4.0.13",
-    "@things-factory/i18n-base": "^4.0.13",
+    "@things-factory/attachment-ui": "^4.0.18",
+    "@things-factory/font-ui": "^4.0.18",
+    "@things-factory/i18n-base": "^4.0.18",
     "ace-builds": "^1.4.11",
     "brace": "^0.11.1",
     "codemirror": "^5.59.1",
@@ -57,5 +57,5 @@
   "devDependencies": {
     "@types/codemirror": "^0.0.105"
   },
-  "gitHead": "a542fdd4e7c447c3b571fe91c92f5919561bdc2c"
+  "gitHead": "6fc54f287739a57d1926d84dc50baf36156880ba"
 }