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

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

@@ -1,85 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import { LitElement, html, css } from 'lit'
-
-class ThingsEditorId extends LitElement {
-  static get is() {
-    return 'things-editor-id'
-  }
-
-  static get properties() {
-    return {
-      value: String,
-      property: Object,
-      _ids: Array
-    }
-  }
-
-  static get styles() {
-    return [
-      css`
-        :host {
-          position: relative;
-          display: inline-flex;
-          align-items: center;
-          justify-content: flex-end;
-        }
-
-        input {
-          width: 100%;
-          height: 100%;
-          box-sizing: border-box;
-          border: 1px solid rgba(0, 0, 0, 0.2);
-        }
-      `
-    ]
-  }
-
-  render() {
-    return html`
-      <input
-        id="text"
-        type="text"
-        .value=${this.value || ''}
-        @focusin=${e => this._onInputFocused(e)}
-        @change=${e => this._onInputChanged(e)}
-        .placeholder=${this.getAttribute('placeholder') || ''}
-        list="ids"
-      />
-      <datalist id="ids">${this._ids.map(id => html` <option value=${id}></option> `)}</datalist>
-    `
-  }
-
-  connectedCallback() {
-    super.connectedCallback()
-
-    this._ids = []
-  }
-
-  _onInputFocused(e) {
-    this._ids = []
-    var { component } = this.property || {}
-
-    document.dispatchEvent(
-      new CustomEvent('get-all-scene-component-ids', {
-        detail: {
-          component,
-          callback: ids => {
-            this._ids = ids
-          }
-        }
-      })
-    )
-  }
-
-  _onInputChanged(e) {
-    e.stopPropagation()
-    this.value = e.target.value
-
-    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
-  }
-}
-
-customElements.define(ThingsEditorId.is, ThingsEditorId)

package/client/editors/things-editor-multiple-color.js

@@ -1,132 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-// TODO LitElement 로 변경 후 검증하지 않음.
-import { LitElement, html, css } from 'lit'
-
-import './things-editor-color'
-
-/**
-색상 배열을 편집하는 컴포넌트이다.
-
-새로운 색상을 추가하고자 할 때는 `+` 버튼을 클릭한다.<br />
-색상을 제거하고자 할 때는 `-` 버튼을 클릭한다.<br />
-
-Example:
-
-    <things-editor-multiple-color values=${values}>
-    </things-editor-multiple-color>
-*/
-
-export default class ThingsEditorMultipleColor extends LitElement {
-  static get is() {
-    return 'things-editor-multiple-color'
-  }
-
-  static get properties() {
-    return {
-      values: Array
-    }
-  }
-
-  static get styles() {
-    return [
-      css`
-        :host {
-          display: inline-block;
-        }
-
-        #colors-container > div {
-          display: grid;
-          grid-template-columns: 22px 1fr 22px;
-          grid-gap: 5px;
-          align-items: center;
-          justify-content: left;
-        }
-
-        things-editor-color {
-          height: 25px;
-          width: 100%;
-        }
-
-        input[type='button'] {
-          width: 22px;
-          height: 25px;
-          border: 1px solid rgba(0, 0, 0, 0.15);
-          padding-top: 0px;
-          padding-bottom: 2px;
-          background-color: #f1f2f4;
-          color: #8f9192;
-          font-size: 16px;
-        }
-      `
-    ]
-  }
-
-  constructor() {
-    super()
-
-    this.values = []
-  }
-
-  firstUpdated() {
-    this.shadowRoot.addEventListener('change', this._onValueChanged.bind(this))
-  }
-
-  // TODO style for things-editor-color
-  render() {
-    return html`
-      <div id="colors-container">
-        ${(this.values || []).map(
-          (item, index) => html`
-            <div>
-              <input type="button" value="+" @click="${e => this._appendEditorColor(e)}" data-index=${index} />
-
-              <things-editor-color .value=${item}> </things-editor-color>
-
-              ${(this.values || []).length > 1
-                ? html`
-                    <input type="button" value="-" @click=${e => this._removeEditorColor(e)} data-index=${index} />
-                  `
-                : html``}
-            </div>
-          `
-        )}
-      </div>
-    `
-  }
-
-  _onValueChanged(e) {
-    this.values = this._getheringValues()
-  }
-
-  _appendEditorColor(e) {
-    this.values = [...this.values, 'black']
-
-    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
-  }
-
-  _removeEditorColor(e) {
-    var values = []
-    for (var i = 0; i < this.values.length; i++) {
-      if (i == e.target.dataset.index) continue
-      else values.push(this.values[i])
-    }
-
-    this.values = values
-    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
-  }
-
-  _getheringValues() {
-    var colorsContainer = this.shadowRoot.querySelector('#colors-container')
-    var values = []
-    Array.from(colorsContainer.querySelectorAll('things-editor-color')).forEach(c => {
-      values.push(c.value)
-    })
-
-    return values
-  }
-}
-
-customElements.define(ThingsEditorMultipleColor.is, ThingsEditorMultipleColor)

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

@@ -1,155 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-// TODO LitElement 로 변경 후 검증하지 않음.
-import { LitElement, html, css } from 'lit'
-
-export default class ThingsEditorOptions extends LitElement {
-  static get is() {
-    return 'things-editor-options'
-  }
-
-  static get properties() {
-    return {
-      options: Array
-    }
-  }
-
-  static get styles() {
-    return [
-      css`
-        div {
-          display: grid;
-          grid-template-columns: repeat(10, 1fr);
-          grid-gap: 5px;
-          grid-auto-rows: minmax(24px, auto);
-        }
-
-        input[data-text] {
-          grid-column: span 5;
-        }
-
-        input[data-value] {
-          grid-column: span 4;
-        }
-
-        button {
-          grid-column: span 1;
-        }
-      `
-    ]
-  }
-
-  constructor() {
-    super()
-
-    this.options = []
-  }
-
-  firstUpdated() {
-    this.shadowRoot.addEventListener('change', this._onChange.bind(this))
-  }
-
-  render() {
-    return html`
-      ${(this.options || []).map(
-        item => html`
-          <div data-record="">
-            <input type="text" data-text="" placeholder="text" .value=${item.text} />
-            <input type="text" data-value="" placeholder="value" .value=${item.value} />
-            <button class="record-action" @click=${e => this._delete(e)} tabindex="-1">-</button>
-          </div>
-        `
-      )}
-
-      <div data-record-new="">
-        <input type="text" data-text="" placeholder="text" value="" />
-        <input type="text" data-value="" placeholder="value" value="" @change=${e => this._add(e)} />
-        <button class="record-action" @click=${e => this._add(e)} tabindex="-1">+</button>
-      </div>
-    `
-  }
-
-  _onChange(e) {
-    if (this._changingNow) return
-
-    this._changingNow = true
-
-    var input = e.target
-    var 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 || ''
-    }
-
-    if (div.hasAttribute('data-record')) this._build(true)
-    else if (div.hasAttribute('data-record-new') && input.hasAttribute('data-value')) this._add()
-
-    e.stopPropagation()
-
-    this._changingNow = false
-  }
-
-  _build(includeNewRecord) {
-    if (includeNewRecord) var records = this.shadowRoot.querySelectorAll('[data-record],[data-record-new]')
-    else var records = this.shadowRoot.querySelectorAll('[data-record]')
-
-    var newoptions = []
-
-    for (var i = 0; i < records.length; i++) {
-      var record = records[i]
-
-      var text = record.querySelector('[data-text]').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 = input.value
-
-      if (text) newoptions.push({ text: text, value: value || text })
-    }
-
-    this.options = newoptions
-    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
-  }
-
-  _sort(e) {
-    var sorter = function (a, b) {
-      return b.text < a.text
-    }
-
-    this.options = this._toArray(this.options)
-      .sort(sorter)
-      .reduce(function (sum, i) {
-        sum[i.text] = i.value
-        return sum
-      }, {})
-
-    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
-  }
-
-  _add(e) {
-    this._build(true)
-
-    var inputs = this.shadowRoot.querySelectorAll('[data-record-new] input:not([style*="display: none"])')
-
-    for (var i = 0; i < inputs.length; i++) {
-      let input = inputs[i]
-      input.value = ''
-    }
-
-    inputs[0].focus()
-  }
-
-  _delete(e) {
-    var record = e.target.parentElement
-    record.querySelector('[data-text]').value = ''
-    this._build()
-  }
-}
-
-customElements.define(ThingsEditorOptions.is, ThingsEditorOptions)

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

@@ -1,161 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import '@operato/i18n/ox-i18n.js'
-import './things-editor-attachment-selector'
-
-import { css, html, LitElement } from 'lit'
-
-/**
- * 컴포넌트의 fill pattern을 편집하는 element
- *
- * Example:
- *  <things-editor-pattern
- *    @change="${e => { this.pattern = e.target.value }}"
- *    .value=${this.pattern}"
- *  ></things-editor-pattern>
- */
-
-export default class ThingsEditorPattern extends LitElement {
-  static get is() {
-    return 'things-editor-pattern'
-  }
-
-  static get properties() {
-    return {
-      value: Object
-    }
-  }
-
-  static get styles() {
-    return [
-      css`
-        :host,
-        .grid-10 {
-          display: grid;
-          grid-template-columns: repeat(10, 1fr);
-          grid-gap: 5px;
-          grid-auto-rows: minmax(24px, auto);
-
-          align-items: center;
-        }
-
-        * {
-          align-self: stretch;
-        }
-
-        label {
-          grid-column: span 2;
-          text-align: right;
-          text-transform: capitalize;
-
-          align-self: center;
-        }
-
-        .grid-10 {
-          grid-column: span 10;
-        }
-
-        select,
-        input,
-        [custom-editor] {
-          grid-column: span 8;
-        }
-
-        select {
-          height: 100%;
-          border: 1px solid rgba(0, 0, 0, 0.2);
-        }
-
-        input[type='checkbox'] {
-          grid-column: 3 / 4;
-          align-self: center;
-        }
-
-        input[type='checkbox'] ~ label {
-          grid-column: span 7;
-          text-align: left;
-        }
-
-        .grid-10 > input[type='number'] {
-          grid-column: span 3;
-          border: 1px solid rgba(0, 0, 0, 0.2);
-        }
-
-        .grid-10 > label {
-          grid-column: span 2;
-          text-align: right;
-        }
-      `
-    ]
-  }
-
-  render() {
-    return html`
-      <label> <ox-i18n msgid="label.image" auto="">image</ox-i18n> </label>
-
-      <things-editor-attachment-selector
-        value-key="image"
-        .value=${(this.value && this.value.image) || ''}
-        custom-editor
-      ></things-editor-attachment-selector>
-
-      <label> <ox-i18n msgid="label.align" auto="">align</ox-i18n> </label>
-
-      <select value-key="align" class="select-content" .value=${this.value && this.value.align}>
-        <option value="left-top">Left Top</option>
-        <option value="top">Top</option>
-        <option value="right-top">Right Top</option>
-        <option value="left">Left</option>
-        <option value="center">Center</option>
-        <option value="right">Right</option>
-        <option value="left-bottom">Left Bottom</option>
-        <option value="bottom">Bottom</option>
-        <option value="right-bottom">Right Bottom</option>
-      </select>
-
-      <div class="grid-10">
-        <label> <ox-i18n msgid="label.offset-x" auto="">offsetX</ox-i18n> </label>
-        <input type="number" value-key="offsetX" .value=${this.value && this.value.offsetX} />
-
-        <label> <ox-i18n msgid="label.offset-y" auto="">offsetY</ox-i18n> </label>
-        <input type="number" value-key="offsetY" .value=${this.value && this.value.offsetY} />
-
-        <label> <ox-i18n msgid="label.width" auto="">width</ox-i18n> </label>
-        <input type="number" value-key="width" .value=${this.value && this.value.width} />
-
-        <label> <ox-i18n msgid="label.height" auto="">height</ox-i18n> </label>
-        <input type="number" value-key="height" .value=${this.value && this.value.height} />
-      </div>
-
-      <div class="grid-10">
-        <input value-key="fitPattern" type="checkbox" .checked=${this.value && this.value.fitPattern} required />
-        <label> <ox-i18n msgid="label.fit" auto="">Fit</ox-i18n> </label>
-      </div>
-    `
-  }
-
-  firstUpdated() {
-    this.shadowRoot.addEventListener('change', this._onChange.bind(this))
-  }
-
-  _onChange(e) {
-    var element = e.target
-    var key = element.getAttribute('value-key')
-    var value = element.value
-
-    if (key == 'fitPattern') {
-      value = element.checked
-    }
-
-    this.value = {
-      ...this.value,
-      [key]: value
-    }
-
-    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
-  }
-}
-
-customElements.define(ThingsEditorPattern.is, ThingsEditorPattern)

package/client/editors/things-editor-property-styles.js

@@ -1,71 +0,0 @@
-import { css } from 'lit'
-
-export const ThingsEditorPropertyStyles = css`
-  :host {
-    margin: 5px;
-
-    display: grid;
-    grid-template-columns: repeat(10, 1fr);
-    grid-gap: 5px;
-
-    align-items: center;
-
-    color: var(--property-sidebar-fieldset-legend-color);
-  }
-
-  :host > * {
-    box-sizing: border-box;
-
-    grid-column: span 7;
-    order: 2;
-
-    align-self: stretch;
-  }
-
-  :host > label {
-    grid-column: span 3;
-    order: 1;
-
-    text-align: right;
-
-    font-size: 0.8em;
-    line-height: 2;
-    text-transform: capitalize;
-
-    align-self: center;
-  }
-
-  :host > input[type='checkbox'] ~ label {
-    grid-column: span 6;
-    order: 2;
-
-    text-align: left;
-  }
-
-  :host > select,
-  :host > input[type='text'],
-  :host > input[type='number'] {
-    border: 1px solid rgba(0, 0, 0, 0.2);
-  }
-
-  :host > legend {
-    grid-column: 1 / -1;
-
-    display: inline-block;
-
-    text-align: left;
-    text-transform: capitalize;
-  }
-
-  :host > [fullwidth] {
-    grid-column: 1 / -1;
-  }
-
-  :host > input[type='checkbox'] {
-    grid-column: span 4;
-    order: 1;
-
-    justify-self: end;
-    align-self: center;
-  }
-`