@things-factory/board-ui 4.0.10 → 4.0.14

package/client/board-modeller/property-sidebar/effects/property-shadow.js

@@ -1,122 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import { LitElement, html, css } from 'lit-element'
-
-import '@things-factory/i18n-base'
-import '@things-factory/modeller-ui/client/editors/things-editor-color'
-import { convert } from './value-converter'
-
-/**
- * 컴포넌트의 그림자 속성을 편집하는 element
- *
- * Example:
- *  <property-shadow
- *    @change="${e => { this.shadow = e.target.value }}"
- *    value="${this.shadow}"
- *  ></property-shadow>
- */
-
-export default class PropertyShadow extends LitElement {
-  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;
-        }
-
-        * {
-          align-self: stretch;
-        }
-
-        label {
-          grid-column: span 3;
-          text-align: right;
-          text-transform: capitalize;
-
-          align-self: center;
-        }
-
-        input[type='number'],
-        things-editor-color {
-          grid-column: span 7;
-        }
-        input[type='number'] {
-          border: var(--property-sidebar-fieldset-border);
-        }
-
-        .icon-only-label {
-          grid-column: span 3;
-          background: url(/assets/images/icon-properties-label.png) no-repeat;
-          float: left;
-          margin: 0;
-          align-self: stretch;
-        }
-
-        .icon-only-label.color {
-          background-position: 100% -500px;
-        }
-      `
-    ]
-  }
-
-  constructor() {
-    super()
-
-    this.value = {}
-  }
-
-  firstUpdated() {
-    this.shadowRoot.addEventListener('change', this._onValueChange.bind(this))
-  }
-
-  render() {
-    return html`
-      <label> <i18n-msg msgid="label.shadowOffsetX">offset-X</i18n-msg> </label>
-
-      <input type="number" value-key="left" .value=${this.value.left} />
-
-      <label> <i18n-msg msgid="label.shadowOffsetY">offset-Y</i18n-msg> </label>
-
-      <input type="number" value-key="top" .value=${this.value.top} />
-
-      <label> <i18n-msg msgid="label.shadowSize">Size</i18n-msg> </label>
-
-      <input type="number" value-key="blurSize" .value=${this.value.blurSize} />
-
-      <label class="icon-only-label color"></label>
-
-      <things-editor-color value-key="color" .value=${this.value.color}> </things-editor-color>
-    `
-  }
-
-  _onValueChange(e) {
-    var element = e.target
-    var key = element.getAttribute('value-key')
-
-    if (!key) {
-      return
-    }
-
-    this.value = {
-      ...this.value,
-      [key]: convert(element)
-    }
-
-    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
-  }
-}
-
-customElements.define('property-shadow', PropertyShadow)

package/client/board-modeller/property-sidebar/effects/value-converter.js

@@ -1,26 +0,0 @@
-export function convert(element) {
-  switch (element.tagName) {
-    case 'THINGS-EDITOR-ANGLE-INPUT':
-      return Number(element.radian) || 0
-
-    case 'INPUT':
-      switch (element.type) {
-        case 'checkbox':
-          return element.checked
-        case 'number':
-          return Number(element.value) || 0
-        case 'text':
-          return String(element.value)
-      }
-      break
-
-    case 'PAPER-BUTTON':
-      return element.active
-
-    case 'PAPER-LISTBOX':
-      return element.selected
-
-    default:
-      return element.value
-  }
-}

package/client/board-modeller/property-sidebar/inspector/inspector.js

@@ -1,338 +0,0 @@
-import { LitElement, html, css } from 'lit-element'
-import Sortable from 'sortablejs'
-
-export default class SceneInspector extends LitElement {
-  constructor() {
-    super()
-  }
-
-  static get properties() {
-    return {
-      scene: Object
-    }
-  }
-
-  static get styles() {
-    return [
-      css`
-        :host {
-          color: var(--scene-inspector-color);
-        }
-
-        .component {
-          display: block;
-          overflow: hidden;
-          border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-          font-size: 14px;
-        }
-
-        .component[selected] {
-          background-color: var(--scene-inspector-selected-background-color);
-          border-top: var(--scene-inspector-selected-border);
-          border-bottom: var(--scene-inspector-selected-border);
-        }
-        [selected] .type {
-          font-weight: bold;
-        }
-
-        span,
-        i {
-          display: inline-block;
-        }
-
-        span.type {
-          text-overflow: ellipses;
-        }
-
-        span.name {
-          background-color: var(--scene-inspector-name-background-color);
-          border-radius: var(--border-radius);
-          padding: 0 4px;
-          color: #fff;
-          font-size: 0.8em;
-        }
-
-        .eye {
-          margin: 0 0 0 5px;
-          vertical-align: middle;
-          opacity: 0.7;
-          font-size: 1.1em;
-          color: var(--scene-inspector-eye-icon-color);
-        }
-
-        .collapsed::before,
-        .extended::before,
-        .collapsespace::before {
-          background: url(/assets/images/icon-shell-inspector.png) no-repeat;
-          width: 16px;
-          height: 18px;
-          display: inline-block;
-          content: '';
-          opacity: 0.6;
-        }
-
-        .collapsed::before {
-          background-position: 100% -195px;
-        }
-
-        .extended::before {
-          background-position: 100% -295px;
-        }
-
-        .collapsespace::before {
-          background-position: 100% -395px;
-          opacity: 0.9;
-          width: 16px;
-        }
-        .collapsed,
-        .extended,
-        .collapsespace {
-          border-left: 1px dotted rgba(0, 0, 0, 0.1);
-        }
-
-        pre {
-          display: inline;
-        }
-      `
-    ]
-  }
-
-  render() {
-    return html`
-      ${!this.scene ? html`` : this.renderComponent(this.scene.root, 0)}
-    `
-  }
-
-  firstUpdated() {
-    dispatchEvent(new Event('resize'))
-    this.shadowRoot.addEventListener('click', this.onclick.bind(this))
-    this.shadowRoot.addEventListener('dblclick', this.ondblclick.bind(this))
-  }
-
-  updated(change) {
-    if (change.has('scene')) {
-      let oldScene = change.get('scene')
-
-      if (oldScene) {
-        oldScene.off('selected')
-        oldScene.off('execute')
-        oldScene.off('undo')
-        oldScene.off('redo')
-
-        delete this.extendedMap
-      }
-
-      if (this.scene && this.scene.root) {
-        // root 는 기본상태가 extended 되도록 하기위해서임.
-        this.extendedMap.set(this.scene.root, true)
-
-        this.scene.on('selected', (after, before) => {
-          let selected = after
-
-          selected.forEach(component => {
-            let parent = component.parent
-            while (parent && !this.extendedMap.get(parent)) {
-              this.extendedMap.set(parent, true)
-              parent = parent.parent
-            }
-          })
-
-          this.requestUpdate()
-        })
-
-        this.scene.on('execute', (after, before) => {
-          this.requestUpdate()
-        })
-
-        this.scene.on('undo', (after, before) => {
-          this.extendedMap.set(this.scene.root, true)
-          this.requestUpdate()
-        })
-
-        this.scene.on('redo', (after, before) => {
-          this.extendedMap.set(this.scene.root, true)
-          this.requestUpdate()
-        })
-      }
-    }
-
-    this.updateComplete.then(() => {
-      this.shadowRoot.querySelectorAll('[sortable]').forEach(sortable => {
-        new Sortable(sortable, this.sortableConfig)
-      })
-    })
-  }
-
-  sortableConfig = {
-    group: 'inspector',
-    animation: 150,
-    draggable: '.component',
-    swapThreshold: 1,
-    onSort: this.onSort.bind(this)
-  }
-
-  onSort(e) {
-    if (!this.scene) return
-
-    var component = e.item.component
-    var to_container = e.to.component
-    var to_index = e.newIndex - 1
-
-    this.scene.move(component, to_container, to_index)
-
-    this.show = false
-    this.updateComplete.then(() => {
-      this.show = true
-    })
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback()
-
-    delete this.scene
-    delete this._extendedMap
-  }
-
-  onclick(e) {
-    e.stopPropagation()
-
-    var targetElement = e.target
-    var classList = targetElement.classList
-    var component
-
-    while (!component && targetElement) {
-      component = targetElement.component
-
-      if (component) break
-
-      targetElement = targetElement.parentNode
-
-      if (!targetElement || targetElement === this.shadowRoot) break
-    }
-
-    if (component) {
-      if (classList.contains('eye')) {
-        this.toggleHidden(component)
-      } else if (classList.contains('extended') || classList.contains('collapsed')) {
-        this.toggleExtended(component)
-      }
-
-      this.selectComponent(component)
-    } else {
-      if (classList.contains('inspector')) {
-        this.show = !this.show
-        this.style.height = this.show ? '100%' : ''
-      }
-    }
-
-    this.requestUpdate()
-  }
-
-  ondblclick(e) {
-    e.stopPropagation()
-
-    var targetElement = e.target
-    var component
-
-    while (!component && targetElement) {
-      component = targetElement.component
-
-      if (component) break
-
-      targetElement = targetElement.parentNode
-
-      if (!targetElement || targetElement === this.shadowRoot) break
-    }
-
-    if (component && component.isContainer()) {
-      this.toggleExtended(component)
-    }
-
-    this.requestUpdate()
-  }
-
-  get extendedMap() {
-    if (!this._extendedMap) {
-      this._extendedMap = new WeakMap()
-    }
-
-    return this._extendedMap
-  }
-
-  getNodeHandleClass(component) {
-    if (component.isContainer() && component.components.length > 0) {
-      return !!this.extendedMap.get(component) ? 'extended' : 'collapsed'
-    } else {
-      return 'collapsespace'
-    }
-  }
-
-  isExtended(component) {
-    return !!this.extendedMap.get(component)
-  }
-
-  toggleExtended(component) {
-    var extended = this.isExtended(component)
-
-    if (extended) {
-      this.extendedMap.delete(component)
-    } else {
-      this.extendedMap.set(component, !extended)
-    }
-
-    this.requestUpdate()
-  }
-
-  toggleHidden(component) {
-    component.set('hidden', !component.hidden)
-
-    this.requestUpdate()
-  }
-
-  selectComponent(component) {
-    this.scene.selected = [component]
-
-    this.requestUpdate()
-  }
-
-  renderComponent(component, depth) {
-    if (!component) {
-      return html``
-    }
-
-    var children = component.components || []
-    var extended = this.isExtended(component) ? children : []
-
-    return html`
-      <div
-        class="component"
-        ?selected=${(this.scene.selected || []).indexOf(component) > -1}
-        .component=${component}
-        ?sortable=${component.isContainer()}
-      >
-        <span>
-          ${depth > 0
-            ? html`
-                <mwc-icon class="eye">${component.get('hidden') ? 'visibility_off' : 'visibility'}</mwc-icon>
-                <pre>${' '.repeat(depth)}</pre>
-              `
-            : html`
-                <pre>${' '.repeat(depth + 2)}</pre>
-              `}
-
-          <span class=${this.getNodeHandleClass(component)}> </span>
-
-          <span class="type">${depth == 0 ? 'ROOT' : component.get('type')}</span> ${component.get('id')
-            ? html`
-                <span class="name">#${component.get('id')}</span>
-              `
-            : html``}
-        </span>
-
-        ${extended.map(child => this.renderComponent(child, depth + 1))}
-      </div>
-    `
-  }
-}
-
-customElements.define('scene-inspector', SceneInspector)

package/client/board-modeller/property-sidebar/property-shared-style.js

@@ -1,132 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import { css } from 'lit-element'
-
-export const PropertySharedStyle = css`
-  fieldset {
-    border: none;
-    margin: 4px;
-    padding: 9px 4px 9px 4px;
-    border-bottom: var(--property-sidebar-fieldset-border);
-    color: var(--property-sidebar-fieldset-legend-color);
-    font: var(--property-sidebar-fieldset-label);
-  }
-
-  fieldset legend {
-    padding: 5px 0 0 5px;
-    color: var(--property-sidebar-fieldset-legend-color);
-    font: var(--property-sidebar-fieldset-legend);
-    text-transform: capitalize;
-  }
-
-  select,
-  input {
-    border: var(--property-sidebar-fieldset-border);
-  }
-
-  /* property grid */
-  .property-grid {
-    display: grid;
-    grid-template-columns: repeat(10, 1fr);
-    grid-gap: 5px;
-    grid-auto-rows: minmax(24px, auto);
-    align-items: center;
-  }
-
-  .property-grid > * {
-    width: 100%;
-    box-sizing: border-box;
-  }
-
-  .property-grid > label {
-    grid-column: span 3;
-    text-align: right;
-    text-transform: capitalize;
-    line-height: 2;
-  }
-
-  .property-grid > input,
-  .property-grid > table,
-  .property-grid > select,
-  .property-grid > things-editor-angle-input,
-  .property-grid > things-editor-buttons-radio,
-  .property-grid > things-editor-color,
-  [custom-editor] {
-    grid-column: span 7;
-    align-self: stretch;
-  }
-
-  .property-grid > .checkbox-row {
-    grid-column: span 10;
-  }
-
-  .property-grid > .property-full-label {
-    grid-column: span 3;
-    text-align: right;
-    text-transform: capitalize;
-  }
-
-  .property-grid > .property-half-label {
-    grid-column: span 1;
-  }
-
-  .property-grid > .property-full-input {
-    grid-column: span 7;
-  }
-
-  .property-grid > .property-half-input {
-    grid-column: span 4;
-  }
-
-  /* checkbox-row */
-  .checkbox-row {
-    display: grid;
-    grid-template-columns: repeat(10, 1fr);
-    grid-gap: 5px;
-    grid-auto-rows: minmax(24px, auto);
-    align-items: center;
-  }
-
-  .checkbox-row > input {
-    grid-column: 4 / 5;
-  }
-
-  .checkbox-row > label {
-    grid-column: span 6;
-    text-align: left;
-  }
-
-  /* image resources */
-  .icon-only-label {
-    grid-column: span 1;
-
-    background: url(/assets/images/icon-properties-label.png) no-repeat;
-    float: left;
-    margin: 0;
-    align-self: stretch;
-  }
-
-  .icon-only-label.color {
-    background-position: 100% -500px;
-  }
-  .icon-only-label.font-size {
-    background-position: 100% -594px;
-  }
-  .icon-only-label.leading {
-    background-position: 100% -696px;
-  }
-  .icon-only-label.hscale {
-    background-position: 100% -296px;
-  }
-  .icon-only-label.vscale {
-    background-position: 100% -396px;
-  }
-  .icon-only-label.linewidth {
-    background-position: 100% -894px;
-  }
-  .icon-only-label.lineHeight {
-    background-position: 100% -995px;
-  }
-`