@operato/property-panel 9.0.0-beta.14

package/src/ox-property-panel.ts

@@ -0,0 +1,347 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import '@material/web/icon/icon.js'
+
+import { css, html, LitElement, PropertyValues } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import deepClone from 'lodash-es/cloneDeep.js'
+
+import { BOUNDS, Component, Model, Scene } from '@hatiolab/things-scene'
+import { ScopedElementsMixin } from '@open-wc/scoped-elements'
+import { ScrollbarStyles } from '@operato/styles'
+
+import { PropertyDataBinding } from './property-panel/data-binding/data-binding.js'
+import { PropertyEffects } from './property-panel/effects/effects.js'
+import { SceneInspector } from './property-panel/inspector/inspector.js'
+import { PropertyShapes } from './property-panel/shapes/shapes.js'
+// import { PropertySpecific } from './property-panel/specifics/specifics.js'
+import { PropertyStyles } from './property-panel/styles/styles.js'
+
+@customElement('ox-property-panel')
+export class OxPropertyPanel extends ScopedElementsMixin(LitElement) {
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        border-left: 1px solid var(--md-sys-color-border, #ccc);
+        width: 270px;
+        display: flex;
+        flex-direction: column;
+        background-color: var(--property-sidebar-background-color, var(--md-sys-color-secondary-container));
+        color: var(--property-sidebar-color, var(--md-sys-color-on-secondary-container));
+        user-select: none;
+
+        --input-padding: var(--spacing-small);
+        --label-font: var(--property-sidebar-fieldset-label, roboto);
+      }
+
+      [tab] {
+        display: flex;
+        background-color: rgba(0, 0, 0, 0.08);
+        opacity: 0.85;
+      }
+
+      [tab] md-icon {
+        flex: 1;
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        color: var(--property-sidebar-tab-icon-color);
+        height: 40px;
+      }
+
+      [tab] [selected] {
+        background-color: var(--property-sidebar-background-color, var(--md-sys-color-secondary-container));
+        border-left: 1px solid rgba(255, 255, 255, 0.5);
+        border-right: 1px solid rgba(0, 0, 0, 0.15);
+        opacity: 1;
+      }
+
+      [content] {
+        flex: 1;
+
+        overflow: hidden;
+        overflow-y: auto;
+
+        --md-icon-size: 22px;
+      }
+
+      [content] > :not([active]) {
+        display: none;
+      }
+    `
+  ]
+
+  @property({ type: Object }) scene: Scene | null = null
+  @property({ type: Object }) bounds: any = {}
+  @property({ type: Object }) model: Model | null = {}
+  @property({ type: Array }) selected: Component[] = []
+  @property({ type: Array }) specificProps: any
+  @property({ type: String }) tabName: string | null = 'shape'
+  @property({ type: Boolean }) collapsed: boolean = false
+  @property({ type: Array }) fonts: any[] = []
+  @property({ type: Array }) propertyEditor: any[] = []
+
+  propertyTarget: Component | null = null
+
+  firstUpdated() {
+    this.renderRoot.addEventListener('property-change', this.onPropertyChanged.bind(this) as EventListener)
+    this.renderRoot.addEventListener('bounds-change', this.onBoundsChanged.bind(this) as EventListener)
+  }
+
+  updated(change: PropertyValues<this>) {
+    change.has('scene') && this.onSceneChanged()
+    change.has('selected') && this.onSelectedChanged(this.selected)
+    change.has('collapsed') && this.onCollapsed(this.collapsed)
+  }
+
+  static get scopedElements() {
+    return {
+      'property-shape': PropertyShapes,
+      'property-style': PropertyStyles,
+      'property-effect': PropertyEffects,
+      // 'property-specific': PropertySpecific,
+      'property-data-binding': PropertyDataBinding,
+      'scene-inspector': SceneInspector
+    }
+  }
+
+  render() {
+    var tabName = this.tabName ? this.tabName : 'shape'
+
+    return html`
+      <div
+        tab
+        @click=${(e: MouseEvent) => {
+          this.tabName = (e.target as HTMLElement).getAttribute('name')
+        }}
+      >
+        <md-icon name="shape" ?selected=${tabName == 'shape'}>format_shapes</md-icon>
+        <md-icon name="style" ?selected=${tabName == 'style'}>palette</md-icon>
+        <md-icon name="effect" ?selected=${tabName == 'effect'}>movie_filter</md-icon>
+        <md-icon name="specific" ?selected=${tabName == 'specific'}>tune</md-icon>
+        <md-icon name="data-binding" ?selected=${tabName == 'data-binding'}>share</md-icon>
+        <md-icon name="inspector" ?selected=${tabName == 'inspector'}>visibility</md-icon>
+      </div>
+
+      <div content>
+        ${html`
+          ${{
+            shape: html`
+              <property-shape
+                .value=${this.model}
+                .bounds=${this.bounds}
+                .selected=${this.selected}
+                ?active=${tabName == 'shape'}
+                ?is-line=${this.isLine(this.selected)}
+              >
+              </property-shape>
+            `,
+            style: html`
+              <property-style
+                .value=${this.model}
+                .selected=${this.selected}
+                .fonts=${this.fonts}
+                ?active=${tabName == 'style'}
+              >
+              </property-style>
+            `,
+            effect: html`
+              <property-effect .value=${this.model} .scene=${this.scene} ?active=${tabName == 'effect'}>
+              </property-effect>
+            `,
+            specific: html`
+              <property-specific
+                .value=${this.model}
+                .scene=${this.scene}
+                .selected=${this.selected}
+                .props=${this.specificProps}
+                .propertyEditor=${this.propertyEditor}
+                ?active=${tabName == 'specific'}
+              >
+              </property-specific>
+            `,
+            'data-binding': html`
+              <property-data-binding .scene=${this.scene} .value=${this.model} ?active=${tabName == 'data-binding'}>
+              </property-data-binding>
+            `,
+            inspector: html`
+              <scene-inspector .scene=${this.scene} ?active=${tabName == 'inspector'}></scene-inspector>
+            `
+          }[this.tabName!]}
+        `}
+      </div>
+    `
+  }
+
+  private onPropertyChanged(e: CustomEvent) {
+    var detail = e.detail
+
+    if (this.propertyTarget) {
+      /* 단일 컴포넌트의 경우에 적용 */
+      this.scene && this.scene.undoableChange(() => this.propertyTarget!.set(detail))
+    } else {
+      /* 여러 컴포넌트의 경우에 적용 */
+      this.scene && this.scene.undoableChange(() => this.selected.forEach(component => component.set(detail)))
+    }
+  }
+
+  private onBoundsChanged(e: CustomEvent) {
+    var detail = e.detail
+
+    if (!this.scene) {
+      return
+    }
+
+    if (this.propertyTarget) {
+      /* 단일 컴포넌트의 경우에 적용 */
+      this.scene.undoableChange(() => {
+        this.propertyTarget!.bounds = {
+          ...this.propertyTarget!.bounds,
+          ...detail
+        }
+      })
+    } else {
+      /* 여러 컴포넌트의 경우에 적용 */
+      this.scene.undoableChange(() => {
+        this.selected.forEach(component => {
+          component.bounds = {
+            ...component.bounds,
+            ...detail
+          }
+        })
+      })
+    }
+  }
+
+  private onChangedByScene() {
+    if (this.propertyTarget) {
+      this.model = {
+        ...this.propertyTarget.model
+      }
+      this.setBounds(this.propertyTarget.bounds)
+    }
+  }
+
+  private setPropertyTargetAsDefault() {
+    if (!this.scene) {
+      this.setPropertyTarget(null)
+      this.specificProps = []
+      this.model = null
+      this.bounds = {}
+    } else {
+      this.scene.select('model-layer')
+    }
+  }
+
+  private onCollapsed(collapsed: boolean) {
+    !collapsed && (this.style.display = '')
+
+    this.animate(
+      collapsed
+        ? [
+            { transform: 'translateX(0)', opacity: 1, easing: 'ease-in' },
+            { transform: 'translateX(100%)', opacity: 1 }
+          ]
+        : [
+            { transform: 'translateX(100%)', opacity: 1 },
+            { transform: 'translateX(0)', opacity: 1, easing: 'ease-out' }
+          ],
+      {
+        duration: 500
+      }
+    ).onfinish = () => {
+      collapsed && (this.style.display = 'none')
+      dispatchEvent(new Event('resize'))
+    }
+  }
+
+  private async onSceneChanged() {
+    await this.updateComplete
+
+    if (this.scene) this.selected = this.scene.select('model-layer')
+  }
+
+  private async onSelectedChanged(after: Component[]) {
+    await this.updateComplete
+
+    if (after.length == 1) {
+      this.setPropertyTarget(after[0])
+      // 컴포넌트 특성 속성(specific properties)을 먼저 바꾸고, 모델을 바꾸어준다.
+      // 컴포넌트 속성에 따라 UI 컴포넌트가 준비되고, 이후에 모델값을 보여주도록 하기 위해서이다.
+      this.specificProps = deepClone(this.propertyTarget!.nature.properties)
+      this.model = {
+        ...this.propertyTarget!.model
+      }
+      this.setBounds(this.propertyTarget!.bounds)
+    } else if (after.length == 0) {
+      // 선택이 안된 경우
+
+      this.setPropertyTargetAsDefault()
+    } else {
+      // 다중 선택된 경우
+
+      var type = after[0].model.type
+      for (let i = 1; i < after.length; i++) {
+        if (after[i].model.type != type) {
+          type = undefined
+          break
+        }
+      }
+
+      this.setPropertyTarget(null)
+
+      if (type) this.specificProps = deepClone(after[0].nature.properties)
+      else this.specificProps = null
+
+      this.model = {
+        type: type,
+        alpha: 1
+      }
+      this.bounds = {}
+    }
+  }
+
+  private setPropertyTarget(newTarget: Component | null) {
+    var oldTarget = this.propertyTarget
+
+    if (oldTarget) {
+      oldTarget.off('change', this.onChangedByScene, this)
+    }
+    if (newTarget) {
+      newTarget.on('change', this.onChangedByScene, this)
+    }
+
+    this.propertyTarget = newTarget
+  }
+
+  private setBounds(bounds: BOUNDS) {
+    this.bounds = {
+      left: bounds.left,
+      top: bounds.top,
+      width: Math.round(bounds.width),
+      height: Math.round(bounds.height)
+    }
+  }
+
+  private isLine(selected: Component[]) {
+    var isLine = false
+
+    for (var i = 0; i < selected.length; i++) {
+      var comp = selected[i]
+
+      if (!comp.isLine || !comp.isLine()) {
+        isLine = false
+        return isLine
+      }
+
+      isLine = true
+    }
+
+    return isLine
+  }
+}

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

@@ -0,0 +1,67 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import { LitElement } from 'lit'
+
+export class AbstractProperty extends LitElement {
+  firstUpdated() {
+    this.renderRoot.addEventListener('change', this.onValueChange.bind(this))
+  }
+
+  protected onValueChange(e: Event) {
+    var element = e.target as HTMLElement
+    var key = element.getAttribute('value-key')
+
+    if (!key) {
+      return
+    }
+
+    var value = this.getValueFromEventTarget(element)
+
+    this.onAfterValueChange(key, value)
+  }
+
+  protected getValueFromEventTarget(element: HTMLElement) {
+    var value
+
+    switch (element.tagName) {
+      case 'INPUT':
+        switch ((element as any).type) {
+          case 'checkbox':
+            value = (element as any).checked
+            break
+          case 'number':
+            value = Number((element as any).valueAsNumber)
+            break
+          case 'text':
+            value = String((element as any).value)
+        }
+        break
+
+      case 'MD-ICON':
+        value = (element as any).hasAttribute('active')
+        break
+
+      default:
+        value = (element as any).value
+        break
+    }
+
+    return value
+  }
+
+  protected onAfterValueChange(key: string, value: any) {
+    console.log('property change', key, value)
+
+    this.dispatchEvent(
+      new CustomEvent('property-change', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          [key]: value
+        }
+      })
+    )
+  }
+}