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

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

@@ -1,166 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import { LitElement, html, css } from 'lit'
-
-class ThingsEditorRangeInput extends LitElement {
-  static get is() {
-    return 'things-editor-range-input'
-  }
-
-  static get properties() {
-    return {
-      value: Number,
-      step: Number,
-      min: Number,
-      max: Number
-    }
-  }
-
-  static get styles() {
-    return [
-      css`
-        :host {
-          font-size: 16px;
-          display: flex;
-          align-items: center;
-          padding: 1px 0;
-
-          width: 100%;
-          user-select: text;
-        }
-
-        input[type='number'] {
-          width: 48px;
-          overflow: hidden;
-        }
-
-        input[type='number'] {
-          color: black;
-          border: none;
-          font-weight: 300;
-          background: white;
-          padding: 1px 2px;
-        }
-
-        input[type='range'] {
-          -webkit-appearance: none;
-          border: none;
-          outline: none;
-          width: 100%;
-          flex: 1;
-          height: 16px;
-          background-color: transparent;
-        }
-        input[type='range']::-webkit-slider-runnable-track {
-          width: 100%;
-          height: 1px;
-          background: black;
-          border: none;
-          border-radius: 5px;
-        }
-        input[type='range']::-webkit-slider-thumb {
-          -webkit-appearance: none;
-          border: none;
-          height: 10px;
-          width: 10px;
-          border-radius: 50%;
-          background: black;
-          margin-top: -5px;
-        }
-        input[type='range']:focus {
-          outline: none;
-        }
-        input[type='range']:focus::-webkit-slider-runnable-track {
-          background: black;
-        }
-
-        input[type='range']::-moz-range-track {
-          width: 100%;
-          height: 1px;
-          background: black;
-          border: none;
-          border-radius: 5px;
-        }
-        input[type='range']::-moz-range-thumb {
-          border: none;
-          height: 10px;
-          width: 10px;
-          border-radius: 50%;
-          background: black;
-        }
-
-        input[type='range']:-moz-focusring {
-          outline: 1px solid black;
-          outline-offset: -1px;
-        }
-
-        input[type='range']::-ms-track {
-          width: 100%;
-          height: 1px;
-          background: black;
-          border-radius: 10px;
-          color: transparent;
-          border: none;
-          outline: none;
-        }
-        input[type='range']::-ms-thumb {
-          height: 10px;
-          width: 10px;
-          border-radius: 50%;
-          background: black;
-          border: none;
-          outline: none;
-          margin-top: 2px;
-        }
-
-        input:focus {
-          outline: none;
-          opacity: 1;
-        }
-      `
-    ]
-  }
-
-  constructor() {
-    super()
-
-    this.step = 1
-    this.min = -100
-    this.max = 100
-    this.value = 0
-  }
-
-  render() {
-    return html`
-      <input
-        type="range"
-        .value=${this.value}
-        .step=${this.step}
-        .min=${this.min}
-        .max=${this.max}
-        @input=${e => {
-          e.stopPropagation()
-          this.value = e.target.value
-          this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
-        }}
-      />
-
-      <input
-        type="number"
-        .value=${this.value}
-        .step=${this.step}
-        .min=${this.min}
-        .max=${this.max}
-        @change=${e => {
-          e.stopPropagation()
-          this.value = e.target.value
-          this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
-        }}
-      />
-    `
-  }
-}
-
-customElements.define(ThingsEditorRangeInput.is, ThingsEditorRangeInput)

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

@@ -1,213 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-// TODO LitElement 로 변경 후 검증하지 않음.
-import { LitElement, html, css } from 'lit'
-
-import ace from 'brace'
-import 'brace/mode/javascript'
-import 'brace/theme/monokai'
-
-import 'ace-builds/src-min-noconflict/ace'
-import 'ace-builds/src-min-noconflict/mode-javascript'
-import 'ace-builds/src-min-noconflict/theme-monokai'
-
-/**
-ace-editor의 polymer element이다.
-
-Example:
-
-  <things-editor-script id="editor"
-                        value=${text}
-                        theme="ace/theme/monokai"
-                        mode="ace/mode/javascript">
-  </things-editor-script>
-*/
-
-export default class ThingsEditorScript extends LitElement {
-  static get is() {
-    return 'things-editor-script'
-  }
-
-  static get properties() {
-    return {
-      /**
-       * `value`는 에디터에서 작성중인 contents이다.
-       */
-      value: String,
-      theme: String,
-      mode: String,
-      fontsize: Number,
-      softtabs: String,
-      tabsize: Number,
-      readonly: Boolean,
-      wrapmode: Boolean,
-      editor: Object,
-      gutter: Boolean
-    }
-  }
-
-  static get styles() {
-    return [
-      css`
-        :host {
-          display: block;
-          position: relative;
-
-          width: 100%;
-          height: 100%;
-        }
-
-        #container {
-          width: 100%;
-          height: 100%;
-        }
-      `
-    ]
-  }
-  constructor() {
-    super()
-
-    this.value = ''
-    this.tabsize = 2
-    this.gutter = false
-  }
-
-  connectedCallback() {
-    super.connectedCallback()
-
-    this._attached = true
-
-    var self = this
-
-    if (!this.editor) {
-      this.editor = ace.edit(this.$.container, {
-        initialContent: this.value
-      })
-
-      if (!this.gutter) this.editor.renderer.setShowGutter(this.gutter)
-
-      // inject base editor styles
-      this._injectTheme('#ace_editor\\.css')
-      this._injectTheme('#ace-tm')
-
-      this.editor.getSession().on('change', function (event) {
-        self._changedOnThis = true
-        self.set('value', self.editor.getValue())
-        self._changedOnThis = false
-      })
-    }
-
-    // prevent to warning logs ..
-    this.editor.$blockScrolling = Infinity
-
-    // handle theme changes
-    this.editor.renderer.addEventListener('themeLoaded', this._onThemeLoaded.bind(this))
-
-    // initial attributes
-    this._configEditor()
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback()
-
-    this._attached = false
-  }
-
-  updated(change) {
-    change.has('value') && this._valueChanged(this.value)
-    change.keys().filter(key => key != 'value').length > 1 && this._configEditor()
-  }
-
-  render() {
-    return html` <div id="container"></div> `
-  }
-
-  _configEditor() {
-    if (!this.editor || !this._attached) return
-
-    var { theme, mode, fontsize, softtabs, tabsize, readonly, wrapmode } = this
-
-    this.editor.setTheme(theme)
-    this.editor.setFontSize(fontsize)
-    this.editor.setReadOnly(readonly)
-
-    this.editor.commands.addCommand({
-      name: 'fullscreen',
-      exec(editor) {
-        function _fullscreen_callback(e) {
-          editor.resize()
-
-          if (
-            !document.fullscreen &&
-            !document.mozFullScreen &&
-            !document.webkitIsFullScreen &&
-            !document.msFullscreenElement
-          ) {
-            ;['fullscreenchange', 'webkitfullscreenchange', 'MSFullscreenChange'].forEach(event =>
-              document.removeEventListener(event, _fullscreen_callback)
-            )
-          }
-        }
-
-        ;['fullscreenchange', 'webkitfullscreenchange', 'MSFullscreenChange'].forEach(event =>
-          document.addEventListener(event, _fullscreen_callback)
-        )
-
-        var container = editor.container
-
-        if (container.requestFullScreen) container.requestFullScreen()
-        else if (container.webkitRequestFullScreen) container.webkitRequestFullScreen()
-        else if (container.mozRequestFullScreen) container.mozRequestFullScreen()
-        else if (container.msRequestFullscreen) container.msRequestFullscreen()
-
-        editor.resize()
-      },
-      bindKey: { mac: 'cmd-enter|f11', win: 'ctrl-enter|f11' }
-    })
-
-    var session = this.editor.getSession()
-
-    session.setOption('useWorker', false)
-    session.setMode(mode)
-    session.setUseSoftTabs(softtabs)
-    tabsize && session.setTabSize(tabsize)
-    session.setUseWrapMode(wrapmode)
-  }
-
-  _valueChanged(value) {
-    if (this._changedOnThis) {
-      this.fire('change', value)
-      return
-    }
-
-    if (this.editor) this.editor.setValue(value == undefined ? '' : String(value))
-  }
-
-  _onThemeLoaded(e) {
-    var themeId = '#' + e.theme.cssClass
-    this._injectTheme(themeId)
-
-    // Workaround Chrome stable bug, force repaint
-    this.style.display = 'none'
-    this.offsetHeight
-    this.style.display = ''
-  }
-
-  // inject the style tag of a theme to the element
-  _injectTheme(themeId) {
-    var n = document.querySelector(themeId)
-    this.appendChild(this._cloneStyle(n))
-  }
-
-  //helper function to clone a style
-  _cloneStyle(style) {
-    var s = document.createElement('style')
-    s.id = style.id
-    s.textContent = style.textContent
-    return s
-  }
-}
-
-customElements.define(ThingsEditorScript.is, ThingsEditorScript)

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

@@ -1,107 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-// TODO LitElement 로 변경 후 검증하지 않음.
-import { html, css } from 'lit'
-
-export default class ThingsEditorStack extends LitElement {
-  static get is() {
-    return 'things-editor-stack'
-  }
-
-  static get properties() {
-    return {
-      /**
-       * `stack`은 stack에 의해 만들어진 층의 배열을 유지한다.
-       */
-      stack: Array,
-      /**
-       * `activeIndex`은 현재 active된 층의 인덱스를 유지한다.
-       */
-      activeIndex: Number
-    }
-  }
-
-  static get styles() {
-    return [
-      css`
-        :host {
-          display: block;
-        }
-
-        #add-floor {
-          width: 100%;
-          height: 20px;
-          background-color: blue;
-          color: white;
-        }
-
-        div {
-          background-color: blue;
-          width: calc(100% - 40px);
-          width: -webkit-calc(100% - 40px);
-          min-height: 20px;
-        }
-
-        div.active {
-          background-color: red;
-        }
-
-        div button {
-          position: absolute;
-          right: 10px;
-          width: 30px;
-          min-height: 20px;
-        }
-      `
-    ]
-  }
-
-  constructor() {
-    super()
-
-    this.stack = []
-    this.activeIndex = 0
-  }
-
-  render() {
-    return html`
-      <button id="add-floor" @click=${e => this._onClickAddFloor(e)}>+</button>
-
-      ${this.stack
-        .reverse()
-        .map(
-          (item, index) => html`
-            <div class="${index == this.activeIndex ? 'active' : ''}" @click=${e => this._onClickToActive(e)}>
-              ${item.name} <button @click=${e => this._onClickRemoveFloor(e)}>-</button>
-            </div>
-          `
-        )}
-    `
-  }
-
-  _onClickAddFloor(e) {
-    this.stack.push({ name: '' })
-  }
-
-  _onClickToActive(e) {
-    if (e.target.tagName != 'DIV') return
-
-    var model = e.model
-
-    this.activeIndex = this.stack.indexOf(model.item)
-  }
-
-  _onClickRemoveFloor(e) {
-    var model = e.model
-    var idx = this.stack.indexOf(model.item)
-
-    this.active.splice(idx, 1)
-
-    if (this.activeIndex >= this.stack.length && this.activeIndex > 0) this.activeIndex--
-    else this.activeIndex = 0
-  }
-}
-
-customElements.define(ThingsEditorStack.is, ThingsEditorStack)