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

package/client/editors/things-editor-3dish.js

@@ -1,164 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import '@operato/i18n/ox-i18n.js'
-import './things-editor-angle-input'
-
-import { css, html, LitElement } from 'lit'
-
-class ThingsEditor3Dish extends LitElement {
-  static get is() {
-    return 'things-editor-3dish'
-  }
-
-  static get properties() {
-    return {
-      dimension: Object,
-      /*
-       * translate는 고유한 html element의 attribute이므로, property는 translatex로 한다.
-       */
-      translatex: Object,
-      rotate: Object,
-      scale: Object
-    }
-  }
-
-  static get styles() {
-    // FIXME grid-template-columns: repeat(4, 1fr); 이 왜 작동하지 않는지..
-    return [
-      css`
-        :host {
-          display: grid;
-          /* grid-template-columns: repeat(4, 1fr); */
-          grid-template-columns: 60px 60px 60px 60px;
-          grid-gap: 5px;
-          grid-auto-rows: minmax(24px, auto);
-        }
-
-        :host > * {
-          grid-column: span 1;
-        }
-
-        label {
-          text-align: right;
-        }
-
-        span {
-          text-align: center;
-        }
-      `
-    ]
-  }
-
-  firstUpdated() {
-    this.shadowRoot.addEventListener('change', this._onChange.bind(this))
-  }
-
-  _onChange(e) {
-    var element = e.target
-    var id = element.id
-    var prop = id.substr(1)
-    var value = Number(element.value)
-
-    switch (element.tagName) {
-      case 'THINGS-EDITOR-ANGLE-INPUT':
-        value = element.radian || 0
-        break
-    }
-
-    switch (id) {
-      case 'tx':
-      case 'ty':
-      case 'tz':
-        this.dispatchEvent(
-          new CustomEvent('translate-changed', {
-            bubbles: true,
-            composed: true,
-            detail: {
-              value: {
-                ...this.translatex,
-                [prop]: value
-              }
-            }
-          })
-        )
-
-        break
-      case 'rx':
-      case 'ry':
-      case 'rz':
-        this.dispatchEvent(
-          new CustomEvent('rotate-changed', {
-            bubbles: true,
-            composed: true,
-            detail: {
-              value: {
-                ...this.rotate,
-                [prop]: value
-              }
-            }
-          })
-        )
-
-        break
-      case 'sx':
-      case 'sy':
-      case 'sz':
-        this.dispatchEvent(
-          new CustomEvent('scale-changed', {
-            bubbles: true,
-            composed: true,
-            detail: {
-              value: {
-                ...this.scale,
-                [prop]: value
-              }
-            }
-          })
-        )
-
-        break
-
-      default:
-        // dimension
-        this.dispatchEvent(
-          new CustomEvent('dimension-changed', {
-            bubbles: true,
-            composed: true,
-            detail: {
-              value: {
-                ...this.dimension,
-                [prop]: value
-              }
-            }
-          })
-        )
-    }
-  }
-
-  render() {
-    return html`
-      <span></span> <span><ox-i18n msgid="label.x-axes"></ox-i18n></span>
-      <span><ox-i18n msgid="label.y-axes"></ox-i18n></span>
-      <span><ox-i18n msgid="label.z-axes"></ox-i18n></span>
-
-      <label><ox-i18n msgid="label.dimension"></ox-i18n></label>
-      <input type="number" id="dwidth" .value=${this.dimension && this.dimension.width} />
-      <input type="number" id="dheight" .value=${this.dimension && this.dimension.height} />
-      <input type="number" id="ddepth" .value=${this.dimension && this.dimension.depth} />
-
-      <label><ox-i18n msgid="label.translate"></ox-i18n></label>
-      <input type="number" id="tx" .value=${this.translatex && this.translatex.x} />
-      <input type="number" id="ty" .value=${this.translatex && this.translatex.y} />
-      <input type="number" id="tz" .value=${this.translatex && this.translatex.z} />
-
-      <label><ox-i18n msgid="label.rotate"></ox-i18n></label>
-      <things-editor-angle-input id="rx" .radian=${this.rotate && this.rotate.x}></things-editor-angle-input>
-      <things-editor-angle-input id="ry" .radian=${this.rotate && this.rotate.y}></things-editor-angle-input>
-      <things-editor-angle-input id="rz" .radian=${this.rotate && this.rotate.z}></things-editor-angle-input>
-    `
-  }
-}
-
-customElements.define(ThingsEditor3Dish.is, ThingsEditor3Dish)

package/client/editors/things-editor-angle-input.js

@@ -1,69 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import { LitElement, html, css } from 'lit'
-
-class ThingsEditorAngleInput extends LitElement {
-  static get is() {
-    return 'things-editor-angle-input'
-  }
-
-  static get properties() {
-    return {
-      radian: Number
-    }
-  }
-
-  static get styles() {
-    return [
-      css`
-        :host {
-          display: inline-block;
-        }
-
-        input {
-          width: 100%;
-          height: 100%;
-          box-sizing: border-box;
-          border: 1px solid rgba(0, 0, 0, 0.2);
-        }
-      `
-    ]
-  }
-
-  render() {
-    return html`
-      <input
-        type="number"
-        .value=${this._toDegree(this.radian)}
-        @change="${e => this._onChangeValue(e)}"
-        .placeholder=${this.placeholder}
-      />
-    `
-  }
-
-  get placeholder() {
-    return this.getAttribute('placeholder') || '0°'
-  }
-
-  get input() {
-    return this.shadowRoot.querySelector('input')
-  }
-
-  _onChangeValue(e) {
-    this.radian = this._toRadian(this.input.value)
-
-    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
-  }
-
-  _toDegree(radian) {
-    return Math.round(((radian || 0) * 180) / Math.PI)
-  }
-
-  _toRadian(degree) {
-    return isNaN(Number(degree)) ? undefined : Number(degree) * (Math.PI / 180)
-  }
-}
-
-customElements.define(ThingsEditorAngleInput.is, ThingsEditorAngleInput)

package/client/editors/things-editor-attachment-selector.js

@@ -1,110 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import '@material/mwc-icon'
-import '@things-factory/attachment-ui'
-
-import { css, html, LitElement } from 'lit'
-
-import { i18next } from '@operato/i18n'
-import { openPopup } from '@operato/layout'
-
-export default class ThingsEditorAttachmentSelector extends LitElement {
-  static get properties() {
-    return {
-      value: String,
-      properties: Object
-    }
-  }
-
-  static get styles() {
-    return [
-      css`
-        :host {
-          position: relative;
-          display: inline-block;
-        }
-
-        input[type='text'] {
-          box-sizing: border-box;
-          width: 100%;
-          height: 100%;
-          border: 1px solid rgba(0, 0, 0, 0.2);
-        }
-
-        mwc-icon {
-          position: absolute;
-          top: 0;
-          right: 3px;
-        }
-      `
-    ]
-  }
-
-  render() {
-    return html`
-      <input id="text" type="text" .value=${this.value || ''} @change=${e => this._onInputChanged(e)} />
-
-      <mwc-icon @click=${e => this.openSelector(e)}>${this.getIconByCategory()}</mwc-icon>
-    `
-  }
-
-  getIconByCategory() {
-    var { category } = this.properties || {}
-    switch (category) {
-      case 'audio':
-        return 'library_music'
-      case 'video':
-        return 'video_library'
-      case 'image':
-        return 'image'
-      case 'text':
-      case 'application':
-      default:
-        return 'attachment'
-    }
-  }
-
-  _onInputChanged(e) {
-    this.value = e.target.value
-    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
-  }
-
-  openSelector() {
-    if (this.popup) {
-      delete this.popup
-    }
-
-    /*
-     * 기존 설정된 이미지가 선택된 상태가 되게 하기 위해서는 selector에 value를 전달해줄 필요가 있음.
-     * 주의. value는 object일 수도 있고, string일 수도 있다.
-     * string인 경우에는 해당 보드의 id로 해석한다.
-     */
-    var value = this.value || {}
-    var { category = 'application' } = this.properties || {}
-
-    var template = html`
-      <attachment-selector
-        .creatable=${true}
-        .category="${category}"
-        @attachment-selected=${async e => {
-          var attachment = e.detail.attachment
-          this.value = `/attachment/${attachment.path}`
-
-          this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
-
-          this.popup && this.popup.close()
-        }}
-      ></attachment-selector>
-    `
-
-    this.popup = openPopup(template, {
-      backdrop: true,
-      size: 'large',
-      title: i18next.t('title.select attachment')
-    })
-  }
-}
-
-customElements.define('things-editor-attachment-selector', ThingsEditorAttachmentSelector)

package/client/editors/things-editor-buttons-radio.js

@@ -1,93 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import { LitElement, html, css } from 'lit'
-
-/**
-여러 버튼 중에서 하나만 눌리거나, 모두 눌리지 않은 상태만을 갖는 라디오 형태의 버튼이다.
-
-Example:
-
-  <things-editor-buttons-radio @change=${e => this._onChange(e)} value=${value}>
-    <div data-value="top"></div>
-    <div data-value="middle"></div>
-    <div data-value="bottom"></div>
-  </things-editor-buttons-radio>
-*/
-class ThingsEditorButtonsRadio extends LitElement {
-  static get is() {
-    return 'things-editor-buttons-radio'
-  }
-
-  static get properties() {
-    return {
-      /**
-       * `value`는 버튼의 눌린 상태를 값으로 갖는 속성이다.
-       */
-      value: Object,
-      mandatory: Boolean
-    }
-  }
-
-  static get styles() {
-    return [
-      css`
-        :host {
-          display: inline-block;
-        }
-      `
-    ]
-  }
-
-  updated(changes) {
-    changes.has('value') && this._onValueChanged(this.value)
-  }
-
-  render() {
-    return html` <slot @click=${e => this._onTapButton(e)}></slot> `
-  }
-
-  get buttons() {
-    return Array.from(this.querySelectorAll('*'))
-  }
-
-  _onValueChanged(value) {
-    this.buttons.forEach(button => {
-      if (value === button.getAttribute('data-value')) {
-        button.setAttribute('active', '')
-      } else {
-        button.removeAttribute('active')
-      }
-    })
-  }
-
-  _onTapButton(e) {
-    var target = e.target
-
-    while (!target.hasAttribute('data-value') && target !== this) target = target.parentElement
-
-    if (target === this) return
-
-    var old = this.value
-
-    if (!this.mandatory) {
-      if (!target.getAttribute('active')) {
-        this.value = target.getAttribute('data-value')
-        target.setAttribute('active', '')
-      } else {
-        this.value = null
-        target.removeAttribute('active')
-      }
-    } else {
-      this.value = target.getAttribute('data-value')
-      target.setAttribute('active', '')
-    }
-
-    if (old !== this.value) {
-      this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
-    }
-  }
-}
-
-customElements.define(ThingsEditorButtonsRadio.is, ThingsEditorButtonsRadio)

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

@@ -1,152 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import { LitElement, html, css, unsafeCSS } from 'lit'
-
-import CodeMirrorStyle from '!!text-loader!codemirror/lib/codemirror.css'
-import FullScreenStyle from '!!text-loader!codemirror/addon/display/fullscreen.css'
-import NightThemeStyle from '!!text-loader!codemirror/theme/night.css'
-
-import CodeMirror from 'codemirror'
-import 'codemirror/mode/javascript/javascript'
-import 'codemirror/mode/python/python'
-import 'codemirror/addon/display/fullscreen'
-import 'codemirror/addon/display/autorefresh'
-
-import { ScrollbarStyles } from '@things-factory/styles'
-
-/**
-WEB Component for code-mirror code editor.
-
-Example:
-
-  <things-editor-code .value=${text} mode=${mode} tab-size="4" tab-as-space="true">
-  </things-editor-code>
-*/
-export default class ThingsEditorCode extends LitElement {
-  static get is() {
-    return 'things-editor-code'
-  }
-
-  static get properties() {
-    return {
-      /**
-       * `value`는 에디터에서 작성중인 contents이다.
-       */
-      value: String,
-      mode: String,
-      tabSize: {
-        attribute: 'tab-size'
-      },
-      tabAsSpace: {
-        attribute: 'tab-as-space'
-      }
-    }
-  }
-
-  static get styles() {
-    return [
-      ScrollbarStyles,
-      css`
-        ${unsafeCSS(CodeMirrorStyle)}
-        ${unsafeCSS(FullScreenStyle)}
-        ${unsafeCSS(NightThemeStyle)}
-      `,
-      css`
-        :host {
-          display: block;
-          position: relative;
-        }
-
-        textarea {
-          display: block;
-          height: 100%;
-          width: 100%;
-          resize: none;
-          font-size: 16px;
-          line-height: 20px;
-          border: 0px;
-          padding: 0px;
-        }
-      `
-    ]
-  }
-
-  updated(change) {
-    this._outside_changing = true
-    if (change.has('value') && this.editor && !this._self_changing) {
-      this.editor.setValue(this.value === undefined ? '' : String(this.value))
-      this.editor.refresh()
-    }
-    this._outside_changing = false
-  }
-
-  render() {
-    return html` <textarea></textarea> `
-  }
-
-  get editor() {
-    if (!this._editor) {
-      let textarea = this.shadowRoot.querySelector('textarea')
-      let mode = this.mode || 'javascript'
-      let tabSize = Number(this.tabSize) || 2
-      let indentUnit = tabSize
-      let lint = this.lint
-      let hintOptions = this.hintOptions
-      let tabAsSpace = (this.tabAsSpace || 'false').toLowerCase() == 'true'
-      let tabCallback = tabAsSpace
-        ? function (cm) {
-            var spaces = Array(cm.getOption('indentUnit') + 1).join(' ')
-            cm.replaceSelection(spaces, 'end', '+input')
-          }
-        : null
-      if (textarea) {
-        this._editor = CodeMirror.fromTextArea(textarea, {
-          value: this.value,
-          mode,
-          lint,
-          hintOptions,
-          tabSize,
-          indentUnit,
-          lineNumbers: false,
-          showCursorWhenSelecting: true,
-          theme: 'night',
-          extraKeys: {
-            F11: function (cm) {
-              cm.setOption('fullScreen', !cm.getOption('fullScreen'))
-            },
-            Esc: function (cm) {
-              cm.setOption('fullScreen', !cm.getOption('fullScreen'))
-            },
-            // https://github.com/codemirror/CodeMirror/issues/988#issuecomment-37095621
-            Tab: tabCallback
-          },
-          autoRefresh: {
-            delay: 500
-          }
-        })
-
-        this._editor.on('blur', e => {
-          if (!this._changed) return
-
-          this.value = e.getValue()
-          this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
-        })
-
-        this._editor.on('change', async e => {
-          this._self_changing = true
-
-          this._changed = true
-
-          await this.renderComplete
-          this._self_changing = false
-        })
-      }
-    }
-
-    return this._editor
-  }
-}
-
-customElements.define(ThingsEditorCode.is, ThingsEditorCode)