@things-factory/modeller-ui 5.0.0-alpha.3 → 5.0.0-alpha.6

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

@@ -1,376 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import '@material/mwc-icon'
-import '@polymer/paper-dropdown-menu/paper-dropdown-menu'
-import '@polymer/paper-item/paper-item'
-import '@operato/i18n/ox-i18n.js'
-import './things-editor-color'
-
-import { css, html, LitElement } from 'lit'
-
-/**
- * 테이블 셀의 좌,우,상,하 경계선의 스타일을 편집하는 컴포넌트이다.
- * Example:
- * <things-editor-table value=${border}>
- * </things-editor-table>
- */
-class ThingsEditorTable extends LitElement {
-  static get is() {
-    return 'things-editor-table'
-  }
-
-  static get properties() {
-    return {
-      borderWidth: Number,
-      borderColor: String,
-      borderStyle: String
-    }
-  }
-
-  static get styles() {
-    return [
-      css`
-        :host {
-          display: block;
-        }
-
-        fieldset {
-          border: none;
-          border-bottom: 1px solid #cfd8dc;
-          color: var(--primary-text-color);
-          font-size: 12px;
-          padding: 0 0 10px 0;
-          margin: 0 0 10px 0;
-        }
-
-        fieldset legend {
-          padding: 5px 0 0 5px;
-          font-size: 11px;
-          color: #e46c2e;
-          font-weight: bold;
-          text-transform: capitalize;
-        }
-
-        .icon-only-label {
-          background: url(/assets/images/icon-properties-label.png) no-repeat;
-          width: 30px;
-          height: 24px;
-        }
-
-        .property-grid {
-          display: grid;
-          grid-template-columns: repeat(10, 1fr);
-          grid-gap: 5px;
-          grid-auto-rows: minmax(24px, auto);
-          margin: 10px 0 0 0;
-        }
-
-        .property-grid > * {
-          line-height: 1.5;
-        }
-
-        #border-set > mwc-icon {
-          grid-column: span 2;
-          margin: 0 0 0 8px;
-          width: 32px;
-          height: 32px;
-        }
-
-        .property-grid > label {
-          grid-column: span 3;
-          text-align: right;
-          text-transform: capitalize;
-        }
-
-        .property-grid > label.icon-only-label {
-          grid-column: span 1;
-        }
-
-        .property-grid > things-editor-color,
-        .property-grid > input[type='number'] {
-          grid-column: span 4;
-          padding: 0;
-          margin: 0;
-        }
-
-        .property-grid > paper-dropdown-menu {
-          grid-column: span 7;
-          padding: 0;
-          margin: 0;
-        }
-
-        [table-event] {
-          position: relative;
-          background: url('/assets/images/icon-properties-table.png') no-repeat;
-          grid-column: span 2;
-          min-height: 65px;
-        }
-
-        [table-event] span {
-          position: absolute;
-          bottom: 0;
-          font-size: 0.9em;
-          line-height: 1.2;
-          text-transform: capitalize;
-          text-align: center;
-          vertical-align: bottom;
-        }
-
-        #merge-cells {
-          background-position: 50% 3px;
-        }
-
-        #split-cells {
-          background-position: 50% -97px;
-        }
-
-        #delete-row {
-          background-position: 50% -197px;
-        }
-
-        #delete-column {
-          background-position: 50% -297px;
-        }
-
-        #insert-above {
-          background-position: 50% -397px;
-        }
-
-        #insert-below {
-          background-position: 50% -497px;
-        }
-
-        #insert-left {
-          background-position: 50% -597px;
-        }
-
-        #insert-right {
-          background-position: 50% -697px;
-        }
-
-        #distribute-horizontal {
-          background-position: 50% -797px;
-        }
-
-        #distribute-vertical {
-          background-position: 50% -897px;
-        }
-
-        .line-type paper-item {
-          background: no-repeat url(/assets/images/icon-properties-line-type.png);
-          width: 80px;
-          min-height: 25px;
-        }
-        .line-type paper-item.solid {
-          background-position: 50% 12px;
-        }
-        .line-type paper-item.round-dot {
-          background-position: 50% -38px;
-        }
-        .line-type paper-item.square-dot {
-          background-position: 50% -88px;
-        }
-        .line-type paper-item.dash {
-          background-position: 50% -138px;
-        }
-        .line-type paper-item.dash-dot {
-          background-position: 50% -188px;
-        }
-        .line-type paper-item.long-dash {
-          background-position: 50% -238px;
-        }
-        .line-type paper-item.long-dash-dot {
-          background-position: 50% -288px;
-        }
-        .line-type paper-item.long-dash-dot-dot {
-          background-position: 50% -338px;
-        }
-      `
-    ]
-  }
-
-  constructor() {
-    super()
-
-    this.borderWidth = 1
-    this.borderColor = 'black'
-    this.borderStyle = 'solid'
-  }
-
-  firstUpdated() {
-    this.shadowRoot.querySelector('#border-fieldset').addEventListener('change', this._onClickType.bind(this))
-  }
-
-  render() {
-    return html`
-      <fieldset id="border-fieldset">
-        <legend><ox-i18n msgid="label.border-style">border style</ox-i18n></legend>
-
-        <div
-          id="border-set"
-          class="property-grid
-          border-style-btn"
-          @click=${e => this._onClickType(e)}
-        >
-          <mwc-icon data-value="out">border_outer</mwc-icon>
-          <mwc-icon data-value="in">border_inner</mwc-icon>
-          <mwc-icon data-value="all">border_all</mwc-icon>
-          <mwc-icon data-value="left">border_left</mwc-icon>
-          <mwc-icon data-value="center">border_vertical</mwc-icon>
-          <mwc-icon data-value="right">border_right</mwc-icon>
-          <mwc-icon data-value="top">border_top</mwc-icon>
-          <mwc-icon data-value="middle">border_horizontal</mwc-icon>
-          <mwc-icon data-value="bottom">border_bottom</mwc-icon>
-          <mwc-icon data-value="clear">border_clear</mwc-icon>
-        </div>
-
-        <div class="property-grid">
-          <label class="icon-only-label linewidth"> </label>
-          <input
-            type="number"
-            id="border-width"
-            @change=${e => (this.borderWidth = e.target.value)}
-            .value=${this.borderWidth}
-          />
-
-          <label class="icon-only-label color"> </label>
-          <things-editor-color
-            id="border-color"
-            @change=${e => (this.borderColor = e.target.value)}
-            .value=${this.borderColor}
-          >
-          </things-editor-color>
-
-          <label> <ox-i18n msgid="label.border-type">border type</ox-i18n> </label>
-          <paper-dropdown-menu no-label-float="true" class="line-type solid">
-            <!-- solid는 선택된 항목 보여주기위한 class로 하위 paper-item의 class와 동일하게 -->
-            <paper-listbox
-              id="border-style"
-              @iron-select=${e => (this.borderStyle = e.target.selected)}
-              slot="dropdown-content"
-              .selected=${this.borderStyle}
-              attr-for-selected="name"
-            >
-              <paper-item class="solid" name="solid"></paper-item>
-              <paper-item class="round-dot" name="round-dot"></paper-item>
-              <paper-item class="square-dot" name="square-dot"></paper-item>
-              <paper-item class="dash" name="dash"></paper-item>
-              <paper-item class="dash-dot" name="dash-dot"></paper-item>
-              <paper-item class="long-dash" name="long-dash"></paper-item>
-              <paper-item class="long-dash-dot" name="long-dash-dot"></paper-item>
-              <paper-item class="long-dash-dot-dot" name="long-dash-dot-dot"></paper-item>
-            </paper-listbox>
-          </paper-dropdown-menu>
-        </div>
-      </fieldset>
-
-      <fieldset id="cell-fieldset" @click=${e => this._onClickCell(e)}>
-        <div class="property-grid">
-          <div id="merge-cells" table-event><span>merge cells</span></div>
-          <div id="split-cells" table-event><span>split cells</span></div>
-          <div id="delete-row" table-event><span>delete row</span></div>
-          <div id="delete-column" table-event><span>delete column</span></div>
-          <div id="insert-above" table-event><span>insert above</span></div>
-          <div id="insert-below" table-event><span>insert below</span></div>
-          <div id="insert-left" table-event><span>insert left</span></div>
-          <div id="insert-right" table-event><span>insert right</span></div>
-          <div id="distribute-horizontal" table-event><span>distribute horizontal</span></div>
-          <div id="distribute-vertical" table-event><span>distribute vertical</span></div>
-        </div>
-      </fieldset>
-    `
-  }
-
-  _onClickCell(e) {
-    var target = e.target
-
-    const event = target?.closest('[table-event]')?.getAttribute('id')
-    if (!event) {
-      return
-    }
-
-    this.dispatchEvent(
-      new CustomEvent('i-need-selected', {
-        bubbles: 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
-            }
-          }
-        }
-      })
-    )
-
-    e.stopPropagation()
-  }
-
-  _onClickType(e) {
-    var target = e.target
-
-    const where = target?.closest('[data-value]')?.getAttribute('data-value')
-    if (!where) {
-      return
-    }
-
-    this.dispatchEvent(
-      new CustomEvent('i-need-selected', {
-        bubbles: true,
-        composed: true,
-        detail: {
-          callback: selected => {
-            const table = selected[0].parent
-
-            table.setCellsStyle(
-              selected,
-              {
-                strokeStyle: this.borderColor,
-                lineDash: this.borderStyle,
-                lineWidth: this.borderWidth
-              },
-              where
-            )
-          }
-        }
-      })
-    )
-
-    e.stopPropagation()
-  }
-}
-
-customElements.define(ThingsEditorTable.is, ThingsEditorTable)

package/client/editors/things-editor-value-map.js

@@ -1,290 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import { LitElement, html, css } from 'lit'
-
-import './things-editor-color'
-
-/**
-map value editor element
-
-Example:
-
-  <things-editor-value-map value=${map}
-                          keytype=${keytype}
-                          valuetype=${valuetype}>
-  </things-editor-value-map>
-*/
-export default class ThingsEditorValueMap extends LitElement {
-  static get is() {
-    return 'things-editor-value-map'
-  }
-
-  static get properties() {
-    return {
-      value: Object,
-      valuetype: String
-    }
-  }
-
-  static get styles() {
-    return [
-      css`
-        :host {
-          display: flex;
-          flex-direction: column;
-          align-content: center;
-
-          width: 100%;
-          overflow: hidden;
-          border: 1px solid #ccc;
-        }
-
-        div {
-          display: flex;
-          flex-flow: row nowrap;
-          align-items: center;
-
-          border-bottom: 1px solid #c0c0c0;
-        }
-
-        div:last-child {
-          border-bottom: none;
-        }
-
-        div > * {
-          min-width: 0px;
-          margin: 2px;
-          padding: 0;
-        }
-
-        button {
-          width: 20px;
-          text-align: center;
-        }
-
-        input,
-        things-editor-color {
-          flex: 1;
-        }
-
-        things-editor-color {
-          --things-editor-color-input-color: {
-            margin: 1px;
-          }
-          --things-editor-color-input-span: {
-            width: 10px;
-            height: 10px;
-          }
-        }
-
-        input[type='checkbox'] {
-          width: initial;
-        }
-      `
-    ]
-  }
-
-  constructor() {
-    super()
-    this.value = {}
-    this.valuetype = 'string'
-    this.keytype = 'string'
-  }
-
-  firstUpdated() {
-    this.renderRoot.addEventListener('change', this._onChange.bind(this))
-  }
-
-  render() {
-    return html`
-      ${this._toArray(this.value).map(
-        item => html`
-          <div data-record>
-            <input type="text" data-key placeholder="key" .value=${item.key} /> ${this.valuetype == 'boolean'
-              ? html` <input type="checkbox" data-value .checked=${item.value} data-value-type=${this.valuetype} /> `
-              : this.valuetype == 'color'
-              ? html` <things-editor-color data-value .value=${item.value} tabindex="-1"> </things-editor-color> `
-              : html`
-                  <input
-                    type="text"
-                    data-value
-                    placeholder="value"
-                    .value=${item.value}
-                    data-value-type=${this.valuetype}
-                  />
-                `} <button class="record-action" @click=${e => this._delete(e)} tabindex="-1">-</button>
-          </div>
-        `
-      )}
-
-      <div data-record-new>
-        <input type="text" data-key placeholder="key" value="" /> ${this.valuetype == 'boolean'
-          ? html` <input type="checkbox" data-value data-value-type=${this.valuetype} /> `
-          : this.valuetype == 'color'
-          ? html` <things-editor-color data-value value="" tabindex="-1" placeholder="value"> </things-editor-color> `
-          : html` <input type="text" data-value placeholder="value" value="" data-value-type=${this.valuetype} /> `}
-        <button class="record-action" @click=${e => this._add(e)} tabindex="-1">+</button>
-      </div>
-
-      <div data-record>
-        <input type="text" data-key data-default="" value="default" disabled /> ${this.valuetype == 'boolean'
-          ? html`
-              <input
-                type="checkbox"
-                data-value
-                .checked=${this.value && this.value.default}
-                data-value-type=${this.valuetype}
-              />
-            `
-          : this.valuetype == 'color'
-          ? html`
-              <things-editor-color
-                data-value
-                .value=${(this.value && this.value.default) || ''}
-                placeholder="value"
-                tabindex="-1"
-              >
-              </things-editor-color>
-            `
-          : html`
-              <input
-                type="text"
-                data-value
-                placeholder="value"
-                .value=${(this.value && this.value.default) || ''}
-                data-value-type=${this.valuetype}
-              />
-            `} <button class="record-action" @click=${e => this._sort(e)} tabindex="-1">&gt;</button>
-      </div>
-    `
-  }
-
-  _defaultValue(type) {
-    switch (type || this.valuetype) {
-      case 'color':
-        return '#000000'
-      case 'boolean':
-      case 'checkbox':
-        return false
-      default:
-        return ''
-    }
-  }
-
-  _onChange(e) {
-    if (this._changingNow) {
-      return
-    }
-
-    this._changingNow = true
-
-    var input = e.target
-    var value
-
-    if (input.type == 'checkbox') value = Boolean(input.checked)
-    else value = input.value
-
-    var div = input.parentElement
-
-    if (div.hasAttribute('data-record')) {
-      var dataList = div.querySelectorAll('[data-value]:not([hidden])')
-      for (var i = 0; i < dataList.length; i++)
-        if (dataList[i] !== input) dataList[i].value = value || this._defaultValue()
-    }
-
-    if (div.hasAttribute('data-record')) this._build()
-    else if (div.hasAttribute('data-record-new') && input.hasAttribute('data-value')) this._add()
-
-    this._changingNow = false
-  }
-
-  _build(includeNewRecord) {
-    if (includeNewRecord) var records = this.renderRoot.querySelectorAll('[data-record],[data-record-new]')
-    else var records = this.renderRoot.querySelectorAll('[data-record]')
-
-    var newmap = {}
-
-    for (var i = 0; i < records.length; i++) {
-      var record = records[i]
-
-      var key = record.querySelector('[data-key]').value
-      var inputs = record.querySelectorAll('[data-value]:not([style*="display: none"])')
-      if (!inputs || inputs.length == 0) continue
-
-      var input = inputs[inputs.length - 1]
-
-      var value
-
-      if (input.type == 'checkbox') value = Boolean(input.checked)
-      else value = input.value
-
-      if (key) newmap[key] = value || this._defaultValue()
-    }
-
-    this.value = newmap
-    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
-  }
-
-  /* default를 제외한 map아이템들을 template(dom-repeat)용 배열로 변환하는 함수 */
-  _toArray(map) {
-    var array = []
-
-    for (var key in map) {
-      if (key == 'default') continue
-      array.push({
-        key: key,
-        value: map[key]
-      })
-    }
-
-    return array
-  }
-
-  _sort(e) {
-    var sorter =
-      this.keytype === 'number'
-        ? function (a, b) {
-            return parseFloat(b.key) < parseFloat(a.key)
-          }
-        : function (a, b) {
-            return b.key < a.key
-          }
-
-    var map = this._toArray(this.value)
-      .sort(sorter)
-      .reduce(function (sum, i) {
-        sum[i.key] = i.value
-        return sum
-      }, {})
-
-    map.default = this.value.default
-
-    this.value = map
-    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
-  }
-
-  _add(e) {
-    this._build(true)
-
-    var inputs = this.renderRoot.querySelectorAll('[data-record-new] input:not([style*="display: none"])')
-
-    for (var i = 0; i < inputs.length; i++) {
-      let input = inputs[i]
-
-      if (input.type == 'checkbox') input.checked = false
-      else input.value = this._defaultValue(input.type)
-    }
-
-    inputs[0].focus()
-  }
-
-  _delete(e) {
-    var record = e.target.parentElement
-    record.querySelector('[data-key]').value = ''
-    this._build()
-  }
-}
-
-customElements.define(ThingsEditorValueMap.is, ThingsEditorValueMap)