@operato/board 0.2.44 → 0.2.48

package/src/modeller/property-sidebar/shapes/shapes.ts

@@ -0,0 +1,409 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import '@operato/input/dist/src/ox-input-angle'
+import '@operato/input/dist/src/ox-buttons-radio'
+import '@material/mwc-icon'
+
+import { css, html } from 'lit'
+import { customElement, property, state } from 'lit/decorators'
+
+import { BOUNDS, Component, Properties } from '@hatiolab/things-scene'
+
+import { AbstractProperty } from '../abstract-property'
+import { PropertySharedStyle } from '../property-shared-style'
+import { BoxPaddingEditorStyles } from './box-padding-editor-styles'
+
+@customElement('property-shape')
+class PropertyShapes extends AbstractProperty {
+  static styles = [
+    PropertySharedStyle,
+    BoxPaddingEditorStyles,
+    css`
+      fieldset[collapsable] legend {
+        box-sizing: border-box;
+        width: 100%;
+      }
+
+      fieldset[collapsable] legend mwc-icon {
+        float: right;
+        font-size: medium;
+        margin: 0;
+        cursor: pointer;
+      }
+
+      fieldset[collapsable][collapsed] > :not(legend) {
+        display: none;
+      }
+    `,
+    css`
+      .icon-label label {
+        background: url(/assets/images/icon-properties-label.png) 7px -900px no-repeat;
+      }
+
+      .icon-label label.width {
+        background-position: 7px -96px;
+      }
+
+      .icon-label label.height {
+        background-position: 7px 4px;
+      }
+
+      .icon-label label.rotate {
+        background-position: 7px -198px;
+      }
+
+      .icon-label label.twidth {
+        background-position: 7px -296px;
+      }
+
+      .icon-label label.theight {
+        background-position: 7px -396px;
+      }
+
+      .icon-label label.zPos {
+        background-position: 5px -1098px;
+      }
+
+      .icon-label label.depth {
+        background-position: 5px -1198px;
+      }
+
+      .icon-label label.rotationX {
+        background-position: 5px -1296px;
+      }
+
+      .icon-label label.rotationY {
+        background-position: 5px -1396px;
+      }
+
+      .icon-label label.rotationZ {
+        background-position: 5px -1496px;
+      }
+
+      ox-buttons-radio > * {
+        width: 30px;
+        height: 25px;
+        min-width: initial;
+        margin: 0 4px 0 0;
+        padding: 0;
+        border-radius: 0;
+        display: inline-block;
+        border-bottom: 2px solid #fff;
+      }
+
+      ox-buttons-radio div {
+        background: url(/assets/images/icon-properties.png) no-repeat;
+      }
+
+      ox-buttons-radio div[data-value='left'] {
+        background-position: 50% 3px;
+      }
+
+      ox-buttons-radio div[data-value='center'] {
+        background-position: 50% -47px;
+      }
+
+      ox-buttons-radio div[data-value='right'] {
+        background-position: 50% -97px;
+      }
+
+      ox-buttons-radio div[data-value='justify'] {
+        background-position: 50% -147px;
+      }
+
+      ox-buttons-radio div[data-value='top'] {
+        background-position: 50% -197px;
+      }
+
+      ox-buttons-radio div[data-value='middle'] {
+        background-position: 50% -193px;
+      }
+
+      ox-buttons-radio div[data-value='bottom'] {
+        background-position: 50% -188px;
+      }
+
+      ox-buttons-radio div[active] {
+        border-color: #f2471c;
+      }
+    `
+  ]
+
+  @property({ type: Object }) value?: Properties
+  @property({ type: Object }) bounds: BOUNDS | null = null
+  @property({ type: Array }) selected: Component[] = []
+
+  @state() private _3dExpanded: boolean = false
+
+  firstUpdated() {
+    this.renderRoot.addEventListener('change', this._onValueChange.bind(this))
+  }
+
+  render() {
+    const value = this.value || {}
+
+    return html`
+      <fieldset>
+        <div class="property-grid">
+          ${this._isIdentifiable(this.selected)
+            ? html`
+                <label> <i18n-msg msgid="label.id">ID</i18n-msg> </label>
+                <input value-key="id" .value=${value.id || ''} />
+              `
+            : html``}
+          ${this._isClassIdentifiable(this.selected)
+            ? html`
+                <label> <i18n-msg msgid="label.class">Class</i18n-msg> </label>
+                <input value-key="class" .value=${value.class || ''} />
+              `
+            : html``}
+          ${this._hasTextProperty(this.selected)
+            ? html`
+                <label> <i18n-msg msgid="label.text">Text</i18n-msg> </label>
+                <input value-key="text" .value=${value.text || ''} />
+                <label> <i18n-msg msgid="label.text-format">Text Format</i18n-msg> </label>
+                <input value-key="textFormat" .value=${value.textFormat || ''} list="format-list" />
+                <datalist id="format-list">
+                  <option value="#,###."></option>
+                  <option value="#,###.#"></option>
+                  <option value="#,###.0"></option>
+                  <option value="#,##0.#"></option>
+                  <option value="#,##0.0"></option>
+                  <option value="#,##0.0%"></option>
+                </datalist>
+              `
+            : html``}
+          ${this._hasProperties(this.selected)
+            ? html`
+                <div class="checkbox-row">
+                  <input id="checkbox-hidden" value-key="hidden" type="checkbox" .checked=${value.hidden} />
+                  <label for="checkbox-hidden"> <i18n-msg msgid="label.item-hidden">Item Hidden</i18n-msg> </label>
+
+                  <input id="checkbox-locked" value-key="locked" type="checkbox" .checked=${value.locked} />
+                  <label for="checkbox-locked"> <i18n-msg msgid="label.locked">Locked</i18n-msg> </label>
+                </div>
+              `
+            : html``}
+        </div>
+      </fieldset>
+
+      ${!this._isLine(this.selected)
+        ? html`
+            <fieldset class="icon-label unit ratio">
+              <legend>
+                <title-with-help topic="board-modeller/shapes/size" msgid="label.size">size</title-with-help>
+              </legend>
+
+              <div class="property-grid">
+                <label class="width"> <i18n-msg msgid="label.width">width</i18n-msg> </label>
+                <input type="number" value-key="bounds.width" .value=${this.bounds?.width} />
+                <label class="height"> <i18n-msg msgid="label.height">height</i18n-msg> </label>
+                <input type="number" value-key="bounds.height" .value=${this.bounds?.height} />
+
+                ${this.selected.length && this.selected[0].isRootModel()
+                  ? html``
+                  : html`
+                      <label class="rotate"> <i18n-msg msgid="label.rotate">rotate</i18n-msg> </label>
+                      <ox-input-angle value-key="rotation" .radian=${value.rotation}> </ox-input-angle>
+                    `}
+              </div>
+            </fieldset>
+          `
+        : html``}
+      ${this._is3dish(this.selected)
+        ? html`
+            <fieldset class="icon-label unit ratio" collapsable ?collapsed=${!this._3dExpanded}>
+              <legend>
+                <title-with-help topic="board-modeller/shapes/3dish" msgid="label.3dish">3D</title-with-help>
+                <mwc-icon
+                  @click=${(e: Event) => {
+                    this._3dExpanded = !this._3dExpanded
+                  }}
+                  >${this._3dExpanded ? 'expand_less' : 'expand_more'}</mwc-icon
+                >
+              </legend>
+
+              <div class="property-grid">
+                <label class="zPos"> <i18n-msg msgid="label.z-pos">pos. Z</i18n-msg> </label>
+                <input type="number" value-key="zPos" .value=${value.zPos} />
+                <label class="depth"> <i18n-msg msgid="label.depth">depth</i18n-msg> </label>
+                <input type="number" value-key="depth" .value=${value.depth} />
+
+                <label class="rotationX"> <i18n-msg msgid="label.rotation-x">rot. X</i18n-msg> </label>
+                <ox-input-angle value-key="rotationX" .radian=${value.rotationX}> </ox-input-angle>
+
+                <label class="rotationY"> <i18n-msg msgid="label.rotation-y">rot. Y</i18n-msg> </label>
+                <ox-input-angle value-key="rotationY" .radian=${value.rotationY}> </ox-input-angle>
+
+                <label class="rotationZ"> <i18n-msg msgid="label.rotation-z">rot. Z</i18n-msg> </label>
+                <ox-input-angle value-key="rotation" .radian=${value.rotation}> </ox-input-angle>
+              </div>
+            </fieldset>
+          `
+        : html``}
+      ${this._hasTextProperty(this.selected)
+        ? html`
+            <fieldset>
+              <legend>
+                <title-with-help topic="board-modeller/shapes/text-box" msgid="label.text-box"
+                  >text box</title-with-help
+                >
+              </legend>
+
+              <div class="property-grid">
+                <label> <i18n-msg msgid="label.horizontal">horizontal</i18n-msg> </label>
+                <ox-buttons-radio value-key="textAlign" .value=${value.textAlign}>
+                  <div data-value="left"></div>
+                  <div data-value="center"></div>
+                  <div data-value="right"></div>
+                  <div data-value="justify"></div>
+                </ox-buttons-radio>
+
+                <label> <i18n-msg msgid="label.vertical">vertical</i18n-msg> </label>
+                <ox-buttons-radio value-key="textBaseline" .value=${value.textBaseline}>
+                  <div data-value="top"></div>
+                  <div data-value="middle"></div>
+                  <div data-value="bottom"></div>
+                </ox-buttons-radio>
+
+                <div class="checkbox-row">
+                  <input id="checkbox-textwrap" type="checkbox" value-key="textWrap" .checked=${value.textWrap} />
+                  <label for="checkbox-textwrap"> <i18n-msg msgid="label.text-wrap">Text Wrap</i18n-msg> </label>
+                </div>
+
+                <label> <i18n-msg msgid="label.padding">padding</i18n-msg> </label>
+                <table class="box-padding">
+                  <tr>
+                    <td class="slide1"></td>
+                    <td class="slide2"></td>
+                    <td class="slide3"></td>
+                  </tr>
+                  <tr>
+                    <td class="slide4"></td>
+                    <td class="slide5">
+                      <input type="number" value-key="paddingTop" .value=${value.paddingTop} />
+                      <input type="number" value-key="paddingLeft" .value=${value.paddingLeft} />
+                      <input type="number" value-key="paddingRight" .value=${value.paddingRight} />
+                      <input type="number" value-key="paddingBottom" .value=${value.paddingBottom} />
+                    </td>
+                    <td class="slide6"></td>
+                  </tr>
+                  <tr>
+                    <td class="slide7"></td>
+                    <td class="slide8"></td>
+                    <td class="slide9"></td>
+                  </tr>
+                </table>
+              </div>
+            </fieldset>
+          `
+        : html``}
+      ${this.selected.length && this.selected[0].isRootModel()
+        ? html`
+            <fieldset class="icon-label">
+              <legend>
+                <title-with-help topic="board-modeller/shapes/viewer-option" msgid="label.viewer-option"
+                  >Viewer Option</title-with-help
+                >
+              </legend>
+
+              <div class="property-grid">
+                <label><i18n-msg msgid="label.fit">Fit</i18n-msg></label>
+                <select value-key="fitMode" .value=${value.fitMode || 'ratio'}>
+                  <option value="none">none</option>
+                  <option value="ratio" selected>ratio</option>
+                  <option value="both">both</option>
+                  <option value="width">width</option>
+                  <option value="height">height</option>
+                </select>
+              </div>
+            </fieldset>
+            <fieldset class="icon-label">
+              <legend>
+                <title-with-help topic="board-modeller/shapes/print-option" msgid="label.label-print"
+                  >Print Option</title-with-help
+                >
+              </legend>
+
+              <div class="property-grid">
+                <label class="rotate"><i18n-msg msgid="label.label-rotation">Label Rotation</i18n-msg></label>
+                <select value-key="labelRotation" .value=${value.labelRotation || 'N'}>
+                  <option value="N" selected>0°</option>
+                  <option value="B">90°</option>
+                  <option value="I">180°</option>
+                  <option value="R">270°</option>
+                </select>
+              </div>
+            </fieldset>
+          `
+        : html``}
+    `
+  }
+
+  _onValueChange(e: Event) {
+    var element = e.target as HTMLElement
+    var key = element.getAttribute('value-key')
+
+    if (!key) {
+      return
+    }
+
+    var value = this._getValueFromEventTarget(element)
+
+    if (key.indexOf('bounds.') == 0) {
+      if (isNaN(value)) return
+      this.dispatchEvent(
+        new CustomEvent('bounds-change', {
+          bubbles: true,
+          composed: true,
+          detail: {
+            [key.substr(7)]: value
+          }
+        })
+      )
+    } else {
+      this._onAfterValueChange(key, value)
+    }
+  }
+
+  _hasTextProperty(selected: Component[]) {
+    for (let i = 0; i < selected.length; i++) {
+      if (!selected[i].hasTextProperty) return false
+    }
+
+    return true
+  }
+
+  _hasProperties(selected: Component[]) {
+    if (!selected || selected.length == 0 || (selected[0] && selected[0].isLayer && selected[0].isLayer())) return false
+
+    return true
+  }
+
+  _isIdentifiable(selected: Component[]) {
+    if (!selected || selected.length == 0 || selected.length > 1 || (selected[0].isLayer && selected[0].isLayer()))
+      return false
+
+    return true
+  }
+
+  _isClassIdentifiable(selected: Component[]) {
+    if (!selected || (selected[0] && selected[0].isLayer())) return false
+
+    return true
+  }
+
+  _isLine(selected: Component[]) {
+    if (!selected || !(selected[0] && selected[0].isLine())) return false
+
+    return true
+  }
+
+  _is3dish(selected: Component[]) {
+    if (!selected || !(selected[0] && selected[0].is3dish())) return false
+
+    return true
+  }
+}

package/src/modeller/property-sidebar/specifics/specific-properties-builder.ts

@@ -0,0 +1,135 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import '@things-factory/modeller-ui/client/editors/things-editor-property'
+
+import { LitElement, PropertyValues } from 'lit'
+import { customElement, property } from 'lit/decorators'
+
+import { OxPropertyEditor } from '@operato/property-editor'
+import { Properties } from '@hatiolab/things-scene'
+
+/**
+모든 에디터들은 change 이벤트를 지원해야 한다. 또한, 모든 에디터들은 value속성에 값을 가져야 한다.
+
+Example:
+
+    <specific-properties-builder value="{{value}}">
+      <label>Center X</label>
+      <input type="number" .value="${value.cx}">
+      <label>Width</label>
+      <input type="number" .value="${value.width}">
+    </specific-properties-builder>
+*/
+
+const DEFAULT_VALUE = {
+  legend: '',
+  number: 0,
+  angle: 0,
+  string: '',
+  password: '',
+  textarea: '',
+  checkbox: false,
+  select: '',
+  color: '#000000',
+  'solidcolor-stops': null,
+  'gradientcolor-stops': null,
+  'gltf-selector': '',
+  'image-selector': '',
+  multiplecolor: null,
+  editortable: null,
+  imageselector: '',
+  options: null,
+  date: null
+}
+
+function convertValue(type: string, value: any) {
+  var converted = String(value).trim() == '' ? undefined : value
+  switch (type) {
+    case 'number':
+    case 'angle':
+      converted = parseFloat(value)
+      converted = converted == NaN ? undefined : converted
+      break
+  }
+
+  return converted
+}
+
+@customElement('specific-properties-builder')
+class SpecificPropertiesBuilder extends LitElement {
+  @property({ type: Object }) value: any
+  @property({ type: Array }) props: any[] = []
+  @property({ type: Object }) propertyEditor: any
+
+  firstUpdated() {
+    this.renderRoot.addEventListener('change', this._onValueChanged.bind(this))
+  }
+
+  updated(changes: PropertyValues<this>) {
+    changes.has('props') && this._onPropsChanged(this.props)
+    changes.has('value') && this._setValues()
+  }
+
+  _onPropsChanged(props: any[]) {
+    this.renderRoot.textContent = ''
+    ;(props || []).forEach(prop => {
+      let elementType = OxPropertyEditor.getEditor(prop.type)
+      if (!elementType) {
+        console.warn('Property Editor not defined', prop.type)
+        return
+      }
+      let element = document.createElement(elementType) as OxPropertyEditor
+
+      element.label = prop.label
+      element.type = prop.type
+      element.placeholder = prop.placeholder
+      element.setAttribute('name', prop.name)
+
+      if (prop.observe) {
+        element.observe = prop.observe
+      }
+      element.property = prop.property
+      element.setAttribute('property-editor', 'true')
+
+      this.renderRoot.appendChild(element)
+    })
+  }
+
+  _setValues() {
+    this.value &&
+      Array.from(this.renderRoot.querySelectorAll('[name]')).forEach((prop: Properties) => {
+        let name = prop.getAttribute('name')
+        var convertedValue = convertValue(prop.type, this.value[name])
+        if (convertedValue == undefined) convertedValue = (DEFAULT_VALUE as any)[prop.type]
+        prop.value = convertedValue
+        prop.observe && prop.observe.call(prop, prop.value)
+      })
+  }
+
+  _onValueChanged(e: Event) {
+    e.stopPropagation()
+    var target = e.target as Element
+
+    const prop = target.closest('[property-editor]') as OxPropertyEditor
+
+    var name = prop.getAttribute('name')
+    if (!name) {
+      return
+    }
+
+    this.value[name] = prop.value
+    this._setValues()
+
+    this.dispatchEvent(
+      new CustomEvent('property-change', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          [name]: prop.value
+        }
+      })
+    )
+  }
+}

package/src/modeller/property-sidebar/specifics/specifics.ts

@@ -0,0 +1,72 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import '@things-factory/help'
+import './specific-properties-builder'
+
+import { Component, Scene } from '@hatiolab/things-scene'
+import { LitElement, css, html } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
+import { PropertySharedStyle } from '../property-shared-style'
+
+@customElement('property-specific')
+class PropertySpecific extends LitElement {
+  static styles = [
+    PropertySharedStyle,
+    css`
+      label {
+        display: block;
+        margin: 10px;
+
+        text-align: right;
+        font: bold 14px var(--theme-font);
+        color: var(--primary-color);
+        text-transform: capitalize;
+      }
+    `
+  ]
+
+  @property({ type: Object }) value: any
+  @property({ type: Object }) scene: Scene | null = null
+  @property({ type: Array }) selected: Component[] = []
+  @property({ type: Array }) props: any[] = []
+  @property({ type: Array }) propertyEditor: any[] = []
+
+  private boundINeedSelected: any = this._onINeedSelected.bind(this)
+
+  connectedCallback() {
+    super.connectedCallback()
+
+    this.addEventListener('i-need-selected', this.boundINeedSelected)
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback()
+
+    this.removeEventListener('i-need-selected', this.boundINeedSelected)
+  }
+
+  render() {
+    const selected = this.selected && this.selected[0]
+    const value = this.value || {}
+
+    return html`
+      <label>${value.type}<help-icon .topic=${selected?.nature?.help}></help-icon></label>
+
+      <specific-properties-builder .value=${value} .props=${this.props} .propertyEditor=${this.propertyEditor}>
+      </specific-properties-builder>
+    `
+  }
+
+  _onINeedSelected(e: CustomEvent) {
+    e.stopPropagation()
+
+    var { callback } = e.detail
+
+    this.scene!.undoableChange(() => {
+      callback.call(null, this.selected)
+    })
+  }
+}