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

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

@@ -1,152 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import { LitElement, html, css, unsafeCSS } from 'lit'
-
-import './things-editor-code'
-
-/**
-WEB Component for code-mirror based data editor.
-
-Example:
-
-  <things-editor-data value=${text}>
-  </things-editor-data>
-*/
-export default class ThingsEditorData extends LitElement {
-  static get is() {
-    return 'things-editor-data'
-  }
-
-  static get properties() {
-    return {
-      /**
-       * `value`는 에디터에서 작성중인 contents이다.
-       */
-      value: Object
-    }
-  }
-
-  static get styles() {
-    return [
-      css`
-        :host {
-          display: flex;
-          flex-direction: column;
-          position: relative;
-        }
-
-        div[datatype] {
-          display: flex;
-          align-items: center;
-          padding: 2px;
-          background-color: rgba(0, 0, 0, 0.08);
-          font-size: small;
-        }
-
-        div[datatype] mwc-icon {
-          margin-left: auto;
-        }
-
-        things-editor-code {
-          flex: 1;
-          max-width: 260px;
-          overflow: auto;
-        }
-      `
-    ]
-  }
-
-  render() {
-    return html`
-      <div datatype>
-        <input type="radio"
-          name="data-type"
-          data-value="string"
-          .checked=${typeof this.value == 'string'}
-          @click=${e => this._setDataType('string')}
-        >string</input>
-        <input type="radio"
-          name="data-type"
-          data-value="number"
-          .checked=${typeof this.value == 'number'}
-          @click=${e => this._setDataType('number')}
-        >number</input>
-        <input type="radio"
-          name="data-type"
-          data-value="object"
-          .checked=${typeof this.value == 'object'}
-          @click=${e => this._setDataType('object')}
-        >object</input>
-        <mwc-icon @click=${e => this._clearData()} title="delete">delete_forever</mwc-icon>
-      </div>
-
-      <things-editor-code .value=${this._getData(this.value)} editor> </things-editor-code>
-    `
-  }
-
-  firstUpdated() {
-    this.renderRoot.addEventListener('change', e => {
-      e.stopPropagation()
-      if (e.target.hasAttribute('editor')) {
-        this.value = e.target.value
-      }
-
-      const type = this.renderRoot.querySelector('input[name=data-type]:checked')?.getAttribute('data-value')
-      this._setDataType(type)
-    })
-  }
-
-  udpated(changes) {
-    if (changes.has('value')) {
-      this.value = this._getData(this.value)
-    }
-  }
-
-  _setDataType(type) {
-    if (typeof this.value !== type) {
-      var value = this.value
-
-      try {
-        switch (type) {
-          case 'string':
-            this.value = String(value || '')
-            break
-          case 'number':
-            if (!isNaN(value)) {
-              this.value = Number(value)
-            }
-            break
-          case 'object':
-            this.value = eval('(' + value + ')')
-            break
-        }
-      } catch (e) {
-        console.log(e)
-      }
-    }
-
-    this._onAfterValueChange()
-  }
-
-  _clearData() {
-    this.value = undefined
-    this._onAfterValueChange()
-  }
-
-  _getData(data) {
-    return typeof data !== 'object' ? data || '' : JSON.stringify(data, null, 1)
-  }
-
-  _onAfterValueChange() {
-    this.dispatchEvent(
-      new CustomEvent('change', {
-        bubbles: true,
-        composed: true
-      })
-    )
-  }
-}
-
-customElements.define(ThingsEditorData.is, ThingsEditorData)

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

@@ -1,335 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import '@operato/i18n/ox-i18n.js'
-import '@polymer/paper-dropdown-menu/paper-dropdown-menu'
-import '@polymer/paper-listbox/paper-listbox'
-import '@polymer/paper-item/paper-item'
-import './things-editor-angle-input'
-import './things-editor-color-stops'
-
-import { css, html, LitElement } from 'lit'
-
-export default class ThingsEditorGradient extends LitElement {
-  constructor() {
-    super()
-
-    this.value = {}
-  }
-
-  static get is() {
-    return 'things-editor-gradient'
-  }
-
-  static get properties() {
-    return {
-      value: Object
-    }
-  }
-
-  static get styles() {
-    return [
-      css`
-        :host {
-          display: grid;
-
-          grid-template-columns: repeat(10, 1fr);
-          grid-gap: 5px;
-          grid-auto-rows: minmax(24px, auto);
-
-          align-items: center;
-        }
-
-        :host > * {
-          align-self: stretch;
-        }
-
-        :host > label {
-          grid-column: span 2;
-          text-align: right;
-          text-transform: capitalize;
-          align-self: center;
-        }
-
-        :host > .icon-only-label {
-          grid-column: span 1;
-        }
-
-        :host > input,
-        :host > [editors] {
-          grid-column: span 8;
-        }
-
-        :host > select {
-          grid-column: span 4;
-          height: 100%;
-          border: 1px solid rgba(0, 0, 0, 0.2);
-        }
-
-        :host > things-editor-angle-input {
-          grid-column: span 3;
-        }
-
-        things-editor-color-stops {
-          grid-column: span 10;
-        }
-
-        .host > input[type='checkbox'] {
-          grid-column: 3 / 4;
-        }
-
-        .host > input[type='checkbox'] ~ label {
-          grid-column: span 7;
-          text-align: left;
-        }
-
-        [editors] > :not([active-selector]) {
-          display: none;
-        }
-
-        [gradient-direction] {
-          overflow: hidden;
-          max-width: 210px;
-        }
-
-        [gradient-direction] paper-item {
-          background: url(/assets/images/icon-editor-gradient-direction.png) 50% 0 no-repeat;
-          min-height: 32px;
-          padding: 3px 5px;
-          width: 30px;
-          float: left;
-        }
-
-        [gradient-direction] [name='lefttop-to-rightbottom'] {
-          background-position: 50% 4px;
-        }
-
-        [gradient-direction] [name='left-top'] {
-          background-position: 50% 4px;
-        }
-
-        [gradient-direction] [name='top-to-bottom'] {
-          background-position: 50% -46px;
-        }
-
-        [gradient-direction] [name='righttop-to-leftbottom'] {
-          background-position: 50% -96px;
-        }
-
-        [gradient-direction] [name='right-top'] {
-          background-position: 50% -96px;
-        }
-
-        [gradient-direction] [name='right-to-left'] {
-          background-position: 50% -146px;
-        }
-
-        [gradient-direction] [name='rightbottom-to-lefttop'] {
-          background-position: 50% -196px;
-        }
-
-        [gradient-direction] [name='right-bottom'] {
-          background-position: 50% -196px;
-        }
-
-        [gradient-direction] [name='bottom-to-top'] {
-          background-position: 50% -246px;
-        }
-
-        [gradient-direction] [name='leftbottom-to-righttop'] {
-          background-position: 50% -296px;
-        }
-
-        [gradient-direction] [name='left-bottom'] {
-          background-position: 50% -296px;
-        }
-
-        [gradient-direction] [name='left-to-right'] {
-          background-position: 50% -346px;
-        }
-
-        [gradient-direction] [name='center-to-corner'] {
-          background-position: 50% -396px;
-        }
-
-        [gradient-direction] [name='center'] {
-          background-position: 50% -396px;
-        }
-
-        [gradient-direction] paper-item[focused] {
-          background-color: rgba(255, 246, 143, 0.5);
-        }
-
-        .icon-only-label {
-          top: 0 !important;
-          width: 30px !important;
-          height: 24px;
-          background: url(/assets/images/icon-properties-label.png) no-repeat;
-        }
-
-        .icon-only-label.color {
-          background-position: 70% -198px;
-        }
-      `
-    ]
-  }
-
-  firstUpdated() {
-    this.shadowRoot.addEventListener('change', this._onChange.bind(this))
-  }
-
-  _onChange(e) {
-    var element = e.target
-    var key = element.getAttribute('value-key')
-
-    if (!key) {
-      return
-    }
-
-    var value
-
-    switch (element.tagName) {
-      case 'THINGS-EDITOR-ANGLE-INPUT':
-        value = Number(element.radian) || 0
-        break
-
-      case 'INPUT':
-        switch (element.type) {
-          case 'checkbox':
-            value = element.checked
-            break
-          case 'number':
-            value = Number(element.value) || 0
-            break
-          case 'text':
-            value = String(element.value)
-        }
-        break
-
-      case 'PAPER-BUTTON':
-        value = element.active
-        break
-
-      case 'PAPER-LISTBOX':
-        value = element.selected
-        break
-
-      default:
-        value = element.value
-        break
-    }
-
-    if (key == 'direction') {
-      key = 'rotation'
-      value = this._convertDirectionToRotation(value)
-    }
-
-    this.value = {
-      ...this.value,
-      [key]: value
-    }
-
-    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
-  }
-
-  render() {
-    var selector = (this.value && this.value.type) || 'linear'
-
-    return html`
-      <label> <ox-i18n msgid="label.type">type</ox-i18n> </label>
-      <select value-key="type" .value=${(this.value && this.value.type) || 'linear'}>
-        <option>linear</option>
-        <option>radial</option>
-      </select>
-
-      <label class="icon-only-label color"></label>
-      <things-editor-angle-input value-key="rotation" .radian=${(this.value && this.value.rotation) || 0}>
-      </things-editor-angle-input>
-
-      <label> <ox-i18n msgid="label.direction">direction</ox-i18n> </label>
-      <div editors>
-        <paper-dropdown-menu no-label-float="true" ?active-selector=${selector == 'linear'}>
-          <paper-listbox
-            @selected-changed="${e => this._onChange(e)}"
-            value-key="direction"
-            slot="dropdown-content"
-            gradient-direction
-            .selected=${(this.value && this.value.direction) || 'left-to-right'}
-            attr-for-selected="name"
-          >
-            <paper-item name="lefttop-to-rightbottom"></paper-item>
-            <paper-item name="top-to-bottom"></paper-item>
-            <paper-item name="righttop-to-leftbottom"></paper-item>
-            <paper-item name="right-to-left"></paper-item>
-            <paper-item name="rightbottom-to-lefttop"></paper-item>
-            <paper-item name="bottom-to-top"></paper-item>
-            <paper-item name="leftbottom-to-righttop"></paper-item>
-            <paper-item name="left-to-right"></paper-item>
-            <paper-item name="center-to-corner"></paper-item>
-          </paper-listbox>
-        </paper-dropdown-menu>
-
-        <paper-dropdown-menu no-label-float="true" ?active-selector=${selector == 'radial'}>
-          <paper-listbox
-            @selected-changed="${e => this._onChange(e)}"
-            value-key="center"
-            slot="dropdown-content"
-            gradient-direction
-            .selected=${(this.value && this.value.center) || 'center'}
-            attr-for-selected="name"
-          >
-            <paper-item name="center"></paper-item>
-            <paper-item name="left-top"></paper-item>
-            <paper-item name="right-top"></paper-item>
-            <paper-item name="right-bottom"></paper-item>
-            <paper-item name="left-bottom"></paper-item>
-          </paper-listbox>
-        </paper-dropdown-menu>
-      </div>
-
-      <things-editor-color-stops
-        value-key="colorStops"
-        type="gradient"
-        .value=${(this.value && this.value.colorStops) || {}}
-      >
-      </things-editor-color-stops>
-    `
-  }
-
-  _convertDirectionToRotation(direction) {
-    var rotation
-    switch (direction) {
-      case 'lefttop-to-rightbottom':
-        rotation = 45
-        break
-      case 'top-to-bottom':
-        rotation = 90
-        break
-      case 'righttop-to-leftbottom':
-        rotation = 135
-        break
-      case 'right-to-left':
-        rotation = 180
-        break
-      case 'rightbottom-to-lefttop':
-        rotation = 215
-        break
-      case 'bottom-to-top':
-        rotation = 270
-        break
-      case 'leftbottom-to-righttop':
-        rotation = 315
-        break
-      case 'left-to-right':
-        rotation = 0
-        break
-      default:
-        return
-    }
-
-    return (rotation / 360) * Math.PI * 2
-  }
-}
-
-customElements.define(ThingsEditorGradient.is, ThingsEditorGradient)

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

@@ -1,173 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import 'codemirror/addon/display/fullscreen'
-import 'codemirror/addon/display/autorefresh'
-import 'codemirror/addon/hint/show-hint'
-import 'codemirror/addon/lint/lint'
-import 'codemirror-graphql/hint'
-import 'codemirror-graphql/lint'
-import 'codemirror-graphql/mode'
-
-import { GRAPHQL_URI, client } from '@things-factory/shell'
-import { LitElement, css, html, unsafeCSS } from 'lit'
-import { introspectSchema, wrapSchema } from '@graphql-tools/wrap'
-
-import CodeMirror from 'codemirror'
-import CodeMirrorStyle from '!!text-loader!codemirror/lib/codemirror.css'
-import FullScreenStyle from '!!text-loader!codemirror/addon/display/fullscreen.css'
-import LintStyle from '!!text-loader!codemirror/addon/lint/lint.css'
-import NightThemeStyle from '!!text-loader!codemirror/theme/night.css'
-import ShowHintStyle from '!!text-loader!codemirror/addon/hint/show-hint.css'
-import { fetch } from 'cross-fetch'
-import { print } from 'graphql'
-
-/**
-WEB Component for code-mirror graphql editor.
-
-Example:
-
-  <things-editor-graphql value=${text} link=${link}>
-  </things-editor-graphql>
-*/
-export default class ThingsEditorGraphql extends LitElement {
-  static get is() {
-    return 'things-editor-graphql'
-  }
-
-  static get properties() {
-    return {
-      /**
-       * `value`는 에디터에서 작성중인 contents이다.
-       */
-      value: String,
-      link: String
-    }
-  }
-
-  static get styles() {
-    return [
-      css`
-        ${unsafeCSS(CodeMirrorStyle)}
-        ${unsafeCSS(FullScreenStyle)}
-        ${unsafeCSS(NightThemeStyle)}
-        ${unsafeCSS(LintStyle)}
-        ${unsafeCSS(ShowHintStyle)}
-      `,
-      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;
-        }
-      `
-    ]
-  }
-
-  async updated(change) {
-    this._outside_changing = true
-    if ((!this._editor || change.has('value') || change.has('link')) && !this._self_changing) {
-      if (change.has('link')) {
-        this._editor = null
-      }
-      ;(await this.getEditor()).setValue(this.value === undefined ? '' : String(this.value))
-      // ;(await this.getEditor()).refresh()
-    }
-    this._outside_changing = false
-  }
-
-  render() {
-    return html` <textarea></textarea> `
-  }
-
-  async getSchema() {
-    const executor = async ({ document, variables }) => {
-      const query = print(document)
-      const uri = this.link || GRAPHQL_URI
-
-      const fetchResult = await fetch(uri, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({ query, variables })
-      })
-      return fetchResult.json()
-    }
-
-    return await wrapSchema({
-      schema: await introspectSchema(executor),
-      executor
-    })
-  }
-
-  async getEditor() {
-    if (!this._editor) {
-      try {
-        var schema = await this.getSchema()
-      } catch (err) {
-        console.error(err)
-      }
-
-      let textarea = this.shadowRoot.querySelector('textarea')
-      if (textarea) {
-        this._editor = CodeMirror.fromTextArea(textarea, {
-          value: this.value,
-          mode: 'graphql',
-          lint: {
-            schema
-          },
-          hintOptions: {
-            schema
-          },
-          tabSize: 2,
-          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'))
-            }
-          },
-          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(ThingsEditorGraphql.is, ThingsEditorGraphql)