@operato/property-panel 9.2.0 → 10.0.0-beta.1

package/src/property-panel/shapes/shapes.ts

@@ -1,379 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import '@operato/input/ox-input-angle.js'
-import '@operato/input/ox-buttons-radio.js'
-import '@material/web/icon/icon.js'
-import '@operato/i18n/ox-i18n.js'
-import '@operato/help/ox-title-with-help.js'
-
-import { css, html } from 'lit'
-import { property, state } from 'lit/decorators.js'
-import { keyed } from 'lit/directives/keyed.js'
-
-import { BOUNDS, Component, Properties } from '@hatiolab/things-scene'
-import { PropertyGridStyles } from '@operato/styles/property-grid-styles.js'
-import { BoxPaddingEditorStyles } from '@operato/styles/box-padding-editor-styles.js'
-
-import { AbstractProperty } from '../abstract-property.js'
-
-export class PropertyShapes extends AbstractProperty {
-  static styles = [PropertyGridStyles, BoxPaddingEditorStyles]
-
-  @property({ type: Object }) value?: Properties
-  @property({ type: Object }) bounds: BOUNDS | null = null
-  @property({ type: Array }) selected: Component[] = []
-
-  @state() private _3dExpanded: boolean = false
-  @state() private _positionExpanded: boolean = false
-
-  firstUpdated() {
-    this.renderRoot.addEventListener('change', this.onValueChange.bind(this))
-  }
-
-  render() {
-    const value = this.value || {}
-    const { width, height } = this.bounds || {}
-
-    return html`
-      <fieldset>
-        <div class="property-grid">
-          ${this._isIdentifiable(this.selected)
-            ? html`
-                <label> <ox-i18n msgid="label.id">ID</ox-i18n> </label>
-                <input value-key="id" .value=${value.id || ''} />
-              `
-            : html``}
-          ${this._isClassIdentifiable(this.selected)
-            ? html`
-                <label> <ox-i18n msgid="label.class">Class</ox-i18n> </label>
-                <input value-key="class" .value=${value.class || ''} />
-              `
-            : html``}
-          ${this._hasTextProperty(this.selected)
-            ? html`
-                <label> <ox-i18n msgid="label.text">Text</ox-i18n> </label>
-                <input value-key="text" .value=${value.text || ''} />
-                <label> <ox-i18n msgid="label.text-format">Text Format</ox-i18n> </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`
-                <input id="checkbox-hidden" value-key="hidden" type="checkbox" .checked=${value.hidden} />
-                <label for="checkbox-hidden"> <ox-i18n msgid="label.item-hidden">Item Hidden</ox-i18n> </label>
-
-                <input id="checkbox-locked" value-key="locked" type="checkbox" .checked=${value.locked} />
-                <label for="checkbox-locked"> <ox-i18n msgid="label.locked">Locked</ox-i18n> </label>
-              `
-            : html``}
-        </div>
-      </fieldset>
-
-      ${!this._isLine(this.selected)
-        ? keyed(
-            this.selected,
-            html`
-              <fieldset class="icon-label">
-                <legend>
-                  <ox-title-with-help topic="board-modeller/shapes/size" msgid="label.size">size</ox-title-with-help>
-                </legend>
-
-                <div class="property-grid">
-                  <label> <md-icon>arrow_range</md-icon><ox-i18n msgid="label.width">width</ox-i18n> </label>
-                  <input type="number" value-key="bounds.width" .value=${String(width)} />
-                  <label> <md-icon>height</md-icon><ox-i18n msgid="label.height">height</ox-i18n> </label>
-                  <input type="number" value-key="bounds.height" .value=${String(height)} />
-
-                  ${this.selected.length && this.selected[0].isRootModel()
-                    ? html``
-                    : html`
-                        <label class="rotate">
-                          <md-icon>rotate_90_degrees_cw</md-icon><ox-i18n msgid="label.rotate">rotate</ox-i18n>
-                        </label>
-                        <ox-input-angle value-key="rotation" .value=${value.rotation}> </ox-input-angle>
-                      `}
-                </div>
-              </fieldset>
-            `
-          )
-        : html``}
-      ${this._isPositionable(this.selected)
-        ? keyed(
-            this.selected,
-            html`
-              <fieldset class="icon-label" collapsable ?collapsed=${!this._positionExpanded}>
-                <legend
-                  @click=${(e: Event) => {
-                    this._positionExpanded = !this._positionExpanded
-                  }}
-                >
-                  <ox-title-with-help topic="board-modeller/shapes/position" msgid="label.position"
-                    >position</ox-title-with-help
-                  >
-                  <md-icon>${this._positionExpanded ? 'expand_less' : 'expand_more'}</md-icon>
-                </legend>
-
-                <div class="property-grid">
-                  <label>Position</label>
-                  <select value-key="position" .value=${value.position}>
-                    <option value="">&nbsp;</option>
-                    <option value="static">static</option>
-                    <option value="relative">relative</option>
-                    <option value="absolute">absolute</option>
-                    <option value="fixed">fixed</option>
-                    <option value="sticky">sticky</option>
-                  </select>
-
-                  <label>Origin</label>
-                  <select value-key="origin" .value=${value.origin}>
-                    <option value="">&nbsp;</option>
-                    <option value="left-top">left-top</option>
-                    <option value="center-top">center-top</option>
-                    <option value="right-top">right-top</option>
-                    <option value="left-middle">left-middle</option>
-                    <option value="center-middle">center-middle</option>
-                    <option value="right-middle">right-middle</option>
-                    <option value="left-bottom">left-bottom</option>
-                    <option value="center-bottom">center-bottom</option>
-                    <option value="right-bottom">right-bottom</option>
-                  </select>
-
-                  <label> <ox-i18n msgid="label.offset-x">offset-X</ox-i18n> </label>
-                  <input type="number" value-key="offsetX" .value=${String(value.offsetX ?? '')} />
-                  <label> <ox-i18n msgid="label.offset-y">offset-Y</ox-i18n> </label>
-                  <input type="number" value-key="offsetY" .value=${String(value.offsetY ?? '')} />
-                </div>
-              </fieldset>
-            `
-          )
-        : html``}
-      ${this._is3dish(this.selected)
-        ? html`
-            <fieldset class="icon-label" collapsable ?collapsed=${!this._3dExpanded}>
-              <legend
-                @click=${(e: Event) => {
-                  this._3dExpanded = !this._3dExpanded
-                }}
-              >
-                <ox-title-with-help topic="board-modeller/shapes/3dish" msgid="label.3dish">3D</ox-title-with-help>
-                <md-icon>${this._3dExpanded ? 'expand_less' : 'expand_more'}</md-icon>
-              </legend>
-
-              <div class="property-grid">
-                <label class="zPos"> <ox-i18n msgid="label.z-pos">pos. Z</ox-i18n> </label>
-                <input type="number" value-key="zPos" .value=${value.zPos} />
-                <label class="depth"> <ox-i18n msgid="label.depth">depth</ox-i18n> </label>
-                <input type="number" value-key="depth" .value=${value.depth} />
-
-                <label class="rotationX"> <ox-i18n msgid="label.rotation-x">rot. X</ox-i18n> </label>
-                <ox-input-angle value-key="rotationX" .value=${value.rotationX}> </ox-input-angle>
-
-                <label class="rotationY"> <ox-i18n msgid="label.rotation-y">rot. Y</ox-i18n> </label>
-                <ox-input-angle value-key="rotationY" .value=${value.rotationY}> </ox-input-angle>
-
-                <label class="rotationZ"> <ox-i18n msgid="label.rotation-z">rot. Z</ox-i18n> </label>
-                <ox-input-angle value-key="rotation" .value=${value.rotation}> </ox-input-angle>
-              </div>
-            </fieldset>
-          `
-        : html``}
-      ${this._hasTextProperty(this.selected)
-        ? html`
-            <fieldset>
-              <legend>
-                <ox-title-with-help topic="board-modeller/shapes/text-box" msgid="label.text-box"
-                  >text box</ox-title-with-help
-                >
-              </legend>
-
-              <div class="property-grid">
-                <label> <ox-i18n msgid="label.horizontal">horizontal</ox-i18n> </label>
-                <ox-buttons-radio value-key="textAlign" .value=${value.textAlign}>
-                  <md-icon data-value="left">format_align_left</md-icon>
-                  <md-icon data-value="center">format_align_center</md-icon>
-                  <md-icon data-value="right">format_align_right</md-icon>
-                  <md-icon data-value="justify">format_align_justify</md-icon>
-                </ox-buttons-radio>
-
-                <label> <ox-i18n msgid="label.vertical">vertical</ox-i18n> </label>
-                <ox-buttons-radio value-key="textBaseline" .value=${value.textBaseline}>
-                  <md-icon data-value="top">align_vertical_top</md-icon>
-                  <md-icon data-value="middle">align_vertical_center</md-icon>
-                  <md-icon data-value="bottom">align_vertical_bottom</md-icon>
-                </ox-buttons-radio>
-
-                <input
-                  id="checkbox-support-markdown"
-                  type="checkbox"
-                  value-key="supportMarkdown"
-                  .checked=${value.supportMarkdown}
-                />
-                <label for="checkbox-support-markdown">
-                  <ox-i18n msgid="label.support-markdown">Support Markdown</ox-i18n>
-                </label>
-
-                <input id="checkbox-textwrap" type="checkbox" value-key="textWrap" .checked=${value.textWrap} />
-                <label for="checkbox-textwrap"> <ox-i18n msgid="label.text-wrap">Text Wrap</ox-i18n> </label>
-
-                ${!value.textWrap
-                  ? html` <label for="checkbox-textOverflow">
-                        <ox-i18n msgid="label.text-overflow">Text Overflow</ox-i18n>
-                      </label>
-                      <select value-key="textOverflow" .value=${value.textOverflow || ''}>
-                        <option value="" selected>none</option>
-                        <option value="ellipsis">ellipsis</option>
-                        <option value="clip">clip</option>
-                      </select>`
-                  : ''}
-
-                <label> <ox-i18n msgid="label.padding">padding</ox-i18n> </label>
-                <table class="box-padding custom-editor">
-                  <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 || 0} />
-                      <input type="number" value-key="paddingLeft" .value=${value.paddingLeft || 0} />
-                      <input type="number" value-key="paddingRight" .value=${value.paddingRight || 0} />
-                      <input type="number" value-key="paddingBottom" .value=${value.paddingBottom || 0} />
-                    </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>
-                <ox-title-with-help topic="board-modeller/shapes/viewer-option" msgid="label.viewer-option"
-                  >Viewer Option</ox-title-with-help
-                >
-              </legend>
-
-              <div class="property-grid">
-                <label><ox-i18n msgid="label.fit">Fit</ox-i18n></label>
-                <select value-key="fitMode" .value=${value.fitMode || 'ratio'}>
-                  <option value="none">none</option>
-                  <option value="center">center</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>
-                <ox-title-with-help topic="board-modeller/shapes/print-option" msgid="label.label-print"
-                  >Print Option</ox-title-with-help
-                >
-              </legend>
-
-              <div class="property-grid">
-                <label class="rotate"><ox-i18n msgid="label.label-rotation">Label Rotation</ox-i18n></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
-  }
-
-  _isPositionable(selected: Component[]) {
-    if (!selected || !(selected[0] && selected[0].isPositionable())) return false
-
-    return true
-  }
-}

package/src/property-panel/specifics/specific-properties-builder.ts

@@ -1,160 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import '@operato/app/property-editor.js' /* for registering property editors */
-
-import { html, LitElement, PropertyValues } from 'lit'
-import { property } from 'lit/decorators.js'
-
-import { CSSStyles, OxPropertyEditor, PropertySpec } from '@operato/property-editor'
-
-/**
-모든 에디터들은 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, // should be undefined
-  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 = isNaN(converted) ? undefined : converted
-      break
-  }
-
-  return converted
-}
-
-export class SpecificPropertiesBuilder extends LitElement {
-  @property({ type: Object }) value: { [name: string]: any } = {}
-  @property({ type: Array }) props?: PropertySpec[]
-  @property({ type: Object }) propertyEditor: any
-
-  render() {
-    return html`<slot></slot>`
-  }
-
-  firstUpdated() {
-    this.addEventListener('change', this.onValueChanged.bind(this))
-  }
-
-  updated(changes: PropertyValues<this>) {
-    changes.has('props') && this.onPropsChanged(this.props || [])
-    changes.has('value') && this.setValues()
-  }
-
-  private onPropsChanged(props: PropertySpec[]) {
-    const specs = this.props || []
-
-    this.textContent = ''
-    specs.forEach((spec: PropertySpec) => {
-      const { label, type, placeholder, name, observe, property, editor, quantifier, defaultValue, disabled, styles } =
-        spec
-
-      const elementType = OxPropertyEditor.getEditor(type)
-      if (!elementType) {
-        console.warn('Property Editor not defined', type)
-        return
-      }
-      const element = document.createElement(elementType) as OxPropertyEditor
-
-      element.label = label
-      element.type = type
-      element.placeholder = placeholder
-      element.name = name
-      element.setAttribute('name', name)
-
-      if (observe) {
-        element.observeHandler = observe
-      }
-      element.property = property
-      element.editor = editor
-      element.quantifier = quantifier
-      element.defaultValue = defaultValue
-      element.setAttribute('property-editor', 'true')
-      element.disabled = disabled
-
-      if (styles) {
-        Object.keys(styles).forEach((key: string) => {
-          element.style[key as keyof CSSStyles] = styles[key as keyof CSSStyles]
-        })
-      }
-
-      this.appendChild(element)
-    })
-  }
-
-  private setValues() {
-    this.value &&
-      Array.from(this.querySelectorAll('[name]')).forEach((prop: { [name: string]: any }) => {
-        let name = prop.getAttribute('name')
-        if (!name) {
-          return
-        }
-        var convertedValue = convertValue(prop.type, this.value[name])
-        if (convertedValue === undefined) {
-          convertedValue = (DEFAULT_VALUE as any)[prop.type]
-        }
-        prop.value = convertedValue
-        prop.observe.call(prop, prop.value)
-      })
-  }
-
-  private 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
-
-    prop.observe(prop.value)
-    this.setValues()
-
-    this.dispatchEvent(
-      new CustomEvent('property-change', {
-        bubbles: true,
-        composed: true,
-        detail: {
-          [name]: prop.value
-        }
-      })
-    )
-  }
-}

package/src/property-panel/specifics/specifics.ts

@@ -1,81 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import '@operato/help/ox-help-icon.js'
-
-import { css, html, LitElement } from 'lit'
-import { property } from 'lit/decorators.js'
-
-import { Component, Scene } from '@hatiolab/things-scene'
-import { ScopedElementsMixin } from '@open-wc/scoped-elements'
-
-import { i18next } from '@operato/i18n'
-import { PropertyGridStyles } from '@operato/styles/property-grid-styles.js'
-
-import { SpecificPropertiesBuilder } from './specific-properties-builder.js'
-
-export class PropertySpecific extends ScopedElementsMixin(LitElement) {
-  static styles = [
-    PropertyGridStyles,
-    css`
-      label {
-        display: flex;
-        margin: 10px;
-        text-align: right;
-        font: bold 14px var(--theme-font);
-        color: var(--md-sys-color-on-primary-container);
-        text-transform: capitalize;
-        align-items: center;
-      }
-    `
-  ]
-
-  @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)
-  }
-  static get scopedElements() {
-    return {
-      'specific-properties-builder': SpecificPropertiesBuilder
-    }
-  }
-  render() {
-    const selected = this.selected && this.selected[0]
-    const value = this.value || {}
-
-    return html`
-      <label
-        >${i18next.t(`component.${value.type}`)}<ox-help-icon .topic=${selected?.nature?.help}></ox-help-icon
-      ></label>
-
-      <specific-properties-builder .value=${value} .props=${this.props} .propertyEditor=${this.propertyEditor}>
-      </specific-properties-builder>
-    `
-  }
-
-  private onINeedSelected(e: CustomEvent) {
-    e.stopPropagation()
-
-    var { callback } = e.detail
-
-    this.scene!.undoableChange(() => {
-      callback.call(null, this.selected)
-    })
-  }
-}