@operato/property-panel 9.0.0-beta.14

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

@@ -0,0 +1,77 @@
+/**
+ * @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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,407 @@
+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'
+
+const ICON_SHELL_INSPECTOR = new URL('../../../../icons/icon-shell-inspector.png', import.meta.url).href
+
+export class SceneInspector extends LitElement {
+  static styles = [
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        color: var(--scene-inspector-color);
+        --url-icon-shell-inspector: url(${unsafeCSS(ICON_SHELL_INSPECTOR)});
+      }
+
+      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);
+      }
+
+      .collapsed::before,
+      .extended::before,
+      .collapsespace::before {
+        background: var(--url-icon-shell-inspector) 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;
+      }
+    `
+  ]
+
+  @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>
+    `
+  }
+}