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

package/src/property-panel/effects/property-event.ts

@@ -1,73 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import '@operato/help/ox-title-with-help.js'
-
-import { html, LitElement } from 'lit'
-import { property } from 'lit/decorators.js'
-
-import { Properties, Scene } from '@hatiolab/things-scene'
-import { ScopedElementsMixin } from '@open-wc/scoped-elements'
-import { PropertyGridStyles } from '@operato/styles/property-grid-styles.js'
-
-import { PropertyEventHover } from './property-event-hover.js'
-import { PropertyEventTap } from './property-event-tap.js'
-import { convert } from './value-converter.js'
-
-export class PropertyEvent extends ScopedElementsMixin(LitElement) {
-  static styles = [PropertyGridStyles]
-
-  @property({ type: Object }) value?: Properties
-  @property({ type: Object }) scene?: Scene
-
-  firstUpdated() {
-    this.renderRoot.addEventListener('change', this.onValueChange.bind(this))
-  }
-
-  static get scopedElements() {
-    return {
-      'property-event-hover': PropertyEventHover,
-      'property-event-tap': PropertyEventTap
-    }
-  }
-
-  render() {
-    const value = this.value || {}
-
-    return html`
-      <fieldset>
-        <legend>
-          <ox-title-with-help msgid="label.hover-event" topic="board-modeller/effects/hover-event"></ox-title-with-help>
-        </legend>
-
-        <property-event-hover value-key="hover" .scene=${this.scene} .value=${value.hover || {}}>
-        </property-event-hover>
-      </fieldset>
-
-      <fieldset>
-        <legend>
-          <ox-title-with-help msgid="label.tap-event" topic="board-modeller/effects/tap-event"></ox-title-with-help>
-        </legend>
-
-        <property-event-tap value-key="tap" .scene=${this.scene} .value=${value.tap || {}}> </property-event-tap>
-      </fieldset>
-    `
-  }
-
-  onValueChange(e: Event) {
-    var element = e.target as HTMLElement
-    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 }))
-  }
-}

package/src/property-panel/effects/property-shadow.ts

@@ -1,77 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import '@operato/i18n/ox-i18n.js'
-import '@operato/input/ox-input-color.js'
-
-import { css, html, LitElement } from 'lit'
-import { property } from 'lit/decorators.js'
-
-import { Properties } from '@hatiolab/things-scene'
-import { PropertyGridStyles } from '@operato/styles/property-grid-styles.js'
-
-import { convert } from './value-converter.js'
-
-/**
- * 컴포넌트의 그림자 속성을 편집하는 element
- *
- * Example:
- *  <property-shadow
- *    @change="${e => { this.shadow = e.target.value }}"
- *    value="${this.shadow}"
- *  ></property-shadow>
- */
-
-export class PropertyShadow extends LitElement {
-  static styles = [
-    PropertyGridStyles,
-    css`
-      :host {
-        display: flex;
-      }
-    `
-  ]
-
-  @property({ type: Object }) value?: Properties
-
-  firstUpdated() {
-    this.renderRoot.addEventListener('change', this.onValueChange.bind(this))
-  }
-
-  render() {
-    const value = this.value || {}
-
-    return html`
-      <div class="property-grid">
-        <label> <ox-i18n msgid="label.shadowOffsetX">offset-X</ox-i18n> </label>
-        <input type="number" value-key="left" .value=${value.left} />
-
-        <label> <ox-i18n msgid="label.shadowOffsetY">offset-Y</ox-i18n> </label>
-        <input type="number" value-key="top" .value=${value.top} />
-
-        <label> <ox-i18n msgid="label.shadowSize">Size</ox-i18n> </label>
-        <input type="number" value-key="blurSize" .value=${value.blurSize} />
-
-        <label class="icon-only-label color"><md-icon>format_color_fill</md-icon></label>
-        <ox-input-color value-key="color" .value=${value.color}> </ox-input-color>
-      </div>
-    `
-  }
-
-  onValueChange(e: Event) {
-    var element = e.target as HTMLElement
-    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 }))
-  }
-}

package/src/property-panel/effects/value-converter.ts

@@ -1,17 +0,0 @@
-export function convert(element: any) {
-  switch (element.tagName) {
-    case 'INPUT':
-      switch (element.type) {
-        case 'checkbox':
-          return element.checked
-        case 'number':
-          return Number(element.value) || 0
-        case 'text':
-          return String(element.value)
-      }
-      break
-
-    default:
-      return element.value
-  }
-}

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

@@ -1,376 +0,0 @@
-import '@operato/input/ox-input-search.js'
-
-import { css, html, unsafeCSS, LitElement, PropertyValues, TemplateResult } from 'lit'
-import { property, state } from 'lit/decorators.js'
-
-// TODO test Sortable
-// import Sortable from 'sortablejs'
-import { i18next } from '@operato/i18n'
-
-import { Component, Container, Scene } from '@hatiolab/things-scene'
-import { InspectorStyles } from '@operato/styles/inspector-styles.js'
-
-export class SceneInspector extends LitElement {
-  static styles = [
-    InspectorStyles,
-    css`
-      :host {
-        display: flex;
-        flex-direction: column;
-
-        color: var(--scene-inspector-color);
-      }
-
-      ox-input-search {
-        --input-search-padding: 3px;
-        --input-search-focus-border-bottom: none;
-        --input-search-font: normal 16px var(--theme-font);
-
-        border-radius: 999px;
-        box-sizing: border-box;
-        border: 1px solid var(--md-sys-color-on-secondary-container);
-        padding: 0 10px;
-        margin: 5px;
-      }
-
-      div[result] {
-        flex: 1;
-
-        display: flex;
-        flex-direction: column;
-
-        overflow-y: auto;
-      }
-
-      .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);
-      }
-
-      pre {
-        display: inline;
-      }
-    `
-  ]
-
-  @property({ type: Object }) scene?: Scene
-
-  @state() private searchText: string = ''
-
-  private _extendedMap: any
-  private show: boolean = false
-  private count: number = -1
-
-  disconnectScene(scene?: Scene) {
-    if (scene) {
-      scene.off('selected', undefined, this)
-      scene.off('execute', undefined, this)
-      scene.off('undo', undefined, this)
-      scene.off('redo', undefined, this)
-    }
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback()
-
-    this.disconnectScene(this.scene)
-    delete this._extendedMap
-  }
-
-  render() {
-    this.count = 0
-
-    return html`
-      <ox-input-search
-        .placeholder=${i18next.t('text.search with type, id or tag')}
-        autofocus
-        @change=${(e: Event) => (this.searchText = ((e.target as HTMLInputElement).value || '').toLowerCase())}
-      ></ox-input-search>
-
-      <div result>${!this.scene ? html`` : this.renderComponent(this.scene.root, 0)}</div>
-    `
-  }
-
-  firstUpdated() {
-    dispatchEvent(new Event('resize'))
-
-    this.renderRoot.addEventListener('click', this._onclick.bind(this) as EventListener)
-    this.renderRoot.addEventListener('dblclick', this._ondblclick.bind(this) as EventListener)
-  }
-
-  refresh() {
-    let selected = this.scene?.selected || []
-
-    selected.forEach(component => {
-      let parent = component.parent
-      while (parent && !this.extendedMap.get(parent)) {
-        this.extendedMap.set(parent, true)
-        parent = parent.parent
-      }
-    })
-
-    this.requestUpdate()
-  }
-
-  updated(change: PropertyValues<this>) {
-    if (change.has('scene')) {
-      let oldScene = change.get('scene') as Scene
-
-      if (oldScene) {
-        this.disconnectScene(oldScene)
-        delete this._extendedMap
-      }
-
-      if (this.scene && this.scene.root) {
-        this.scene.on('selected', this.refresh, this)
-        this.scene.on('execute', this.refresh, this)
-        this.scene.on('undo', this.refresh, this)
-        this.scene.on('redo', this.refresh, this)
-
-        this.refresh()
-      }
-    }
-
-    // TODO test Sortable
-    // this.updateComplete.then(() => {
-    //   this.renderRoot.querySelectorAll('[sortable]').forEach(sortable => {
-    //     new Sortable(sortable as HTMLElement, this.sortableConfig)
-    //   })
-    // })
-  }
-
-  // TODO test Sortable
-  // sortableConfig: Sortable.Options = {
-  //   group: 'inspector',
-  //   animation: 150,
-  //   draggable: '.component',
-  //   swapThreshold: 1,
-  //   onSort: this.onSort.bind(this)
-  // }
-
-  // TODO test Sortable
-  // onSort(e: Sortable.SortableEvent) {
-  //   if (!this.scene) return
-
-  //   var component = (e.item as HTMLElement & { component: Component }).component
-  //   var to_container = (e.to as HTMLElement & { component: Component }).component as Container
-  //   var to_index = e.newIndex! - 1
-
-  //   this.scene.move(component, to_container, to_index)
-
-  //   this.show = false
-  //   this.updateComplete.then(() => {
-  //     this.show = true
-  //   })
-  // }
-
-  _onclick(e: MouseEvent) {
-    e.stopPropagation()
-
-    var targetElement = e.target as HTMLElement & { component: Component }
-    var classList = targetElement.classList
-    var component
-
-    while (!component && targetElement) {
-      component = targetElement.component
-
-      if (component) break
-
-      targetElement = targetElement.parentNode as HTMLElement & { component: Component }
-
-      if (!targetElement || targetElement === this.renderRoot) break
-    }
-
-    if (component) {
-      if (classList.contains('eye')) {
-        this.toggleHidden(component)
-      } else if (classList.contains('extended') || classList.contains('collapsed')) {
-        this.toggleExtended(component)
-      }
-
-      this.selectComponent(component, e.shiftKey)
-    } else {
-      if (classList.contains('inspector')) {
-        this.show = !this.show
-        this.style.height = this.show ? '100%' : ''
-      }
-    }
-
-    this.requestUpdate()
-  }
-
-  _ondblclick(e: MouseEvent) {
-    e.stopPropagation()
-
-    var targetElement = e.target as HTMLElement & { component: Component }
-    var component
-
-    while (!component && targetElement) {
-      component = targetElement.component
-
-      if (component) break
-
-      targetElement = targetElement.parentNode as HTMLElement & { component: Component }
-
-      if (!targetElement || targetElement === this.renderRoot) break
-    }
-
-    if (component && component.isContainer()) {
-      this.toggleExtended(component)
-    }
-
-    this.requestUpdate()
-  }
-
-  get extendedMap() {
-    if (!this._extendedMap) {
-      this._extendedMap = new WeakMap()
-    }
-
-    return this._extendedMap
-  }
-
-  getNodeHandleClass(component: Component) {
-    if (component.isContainer() && (component as Container).components.length > 0) {
-      return !!this.extendedMap.get(component) ? 'extended' : 'collapsed'
-    } else {
-      return 'collapsespace'
-    }
-  }
-
-  isExtended(component: Component) {
-    return !!this.extendedMap.get(component)
-  }
-
-  toggleExtended(component: Component) {
-    var extended = this.isExtended(component)
-
-    if (extended) {
-      this.extendedMap.delete(component)
-    } else {
-      this.extendedMap.set(component, !extended)
-    }
-
-    this.requestUpdate()
-  }
-
-  toggleHidden(component: Component) {
-    component.set('hidden', !component.hidden)
-
-    this.requestUpdate()
-  }
-
-  selectComponent(component: Component, append: boolean = false) {
-    const selected = this.scene!.selected
-
-    if (append) {
-      const idx = selected.findIndex(s => s === component)
-      if (idx != -1) {
-        selected.splice(idx, 1)
-        this.scene!.selected = [...selected]
-      } else {
-        this.scene!.selected = [...selected, component]
-      }
-    } else {
-      this.scene!.selected = [component]
-    }
-
-    component.trigger('reactionreset')
-    component.trigger('reaction')
-
-    this.requestUpdate()
-  }
-
-  shouldBeShown(component: Component, counting: boolean = false): boolean {
-    const { type, name, id, tag } = component.state
-    const found =
-      !this.searchText || `${type} ${name || ''} ${id || ''} ${tag || ''}`.toLowerCase().search(this.searchText) > -1
-
-    if (counting && found) {
-      this.count++
-    }
-
-    const foundChildren = ((component as Container).components || []).filter((child: Component) =>
-      this.shouldBeShown(child, counting)
-    ).length
-
-    return !!(found || foundChildren > 0)
-  }
-
-  renderComponent(component: Component, depth: number): TemplateResult {
-    if (!component) {
-      return html``
-    }
-
-    if (!this.shouldBeShown(component, depth == 0)) {
-      return html``
-    }
-
-    const children = (component.isContainer() && (component as Container).components) || []
-    const extended = this.isExtended(component) ? children.filter(child => this.shouldBeShown(child)) : []
-    const { type, id, tag, class: clazz } = component.state
-
-    const name = (id ? `#${id}` : '') + (tag ? `@${tag}` : '') + (clazz ? `.(${clazz})` : '')
-
-    return html`
-      <div
-        class="component"
-        ?selected=${(this.scene?.selected || []).indexOf(component) > -1}
-        .component=${component}
-        ?sortable=${component.isContainer()}
-      >
-        <span>
-          ${depth > 0
-            ? html`
-                <md-icon class="eye">${component.get('hidden') ? 'visibility_off' : 'visibility'}</md-icon>
-                <pre>${' '.repeat(depth)}</pre>
-              `
-            : html` <pre>${' '.repeat(depth + 2)}</pre> `}
-
-          <span class=${this.getNodeHandleClass(component)}> </span>
-
-          <span class="type">${depth == 0 ? html`ROOT(count: ${this.count})` : type}</span>
-          ${name ? html` <span class="name">${name}</span> ` : html``}
-        </span>
-
-        ${extended.map(child => this.renderComponent(child, depth + 1))}
-      </div>
-    `
-  }
-}