@operato/board 0.2.43 → 0.2.47

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

@@ -0,0 +1,308 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import '@material/mwc-icon'
+import './shapes/shapes'
+import './styles/styles'
+import './effects/effects'
+import './specifics/specifics'
+import './data-binding/data-binding'
+import './inspector/inspector'
+
+import { BOUNDS, Component, Model, Scene } from '@hatiolab/things-scene'
+import { LitElement, PropertyValues, css, html } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
+import { ScrollbarStyles } from '@operato/styles'
+import deepClone from 'lodash/cloneDeep'
+
+@customElement('property-sidebar')
+class PropertySidebar extends LitElement {
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        border-left: 1px solid var(--paper-blue-grey-100);
+        width: 270px;
+        display: flex;
+        flex-direction: column;
+        background-color: var(--property-sidebar-background-color);
+        user-select: none;
+      }
+
+      [tab] {
+        display: flex;
+        background-color: rgba(0, 0, 0, 0.08);
+        opacity: 0.85;
+      }
+
+      [tab] mwc-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);
+        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;
+      }
+
+      [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)
+  }
+
+  render() {
+    var tabName = this.tabName ? this.tabName : 'shape'
+
+    return html`
+      <div
+        tab
+        @click=${(e: MouseEvent) => {
+          this.tabName = (e.target as HTMLElement).getAttribute('name')
+        }}
+      >
+        <mwc-icon name="shape" ?selected=${tabName == 'shape'}>format_shapes</mwc-icon>
+        <mwc-icon name="style" ?selected=${tabName == 'style'}>palette</mwc-icon>
+        <mwc-icon name="effect" ?selected=${tabName == 'effect'}>movie_filter</mwc-icon>
+        <mwc-icon name="specific" ?selected=${tabName == 'specific'}>tune</mwc-icon>
+        <mwc-icon name="data-binding" ?selected=${tabName == 'data-binding'}>share</mwc-icon>
+        <mwc-icon name="inspector" ?selected=${tabName == 'inspector'}>visibility</mwc-icon>
+      </div>
+
+      <div content>
+        ${html`
+          ${{
+            shape: html`
+              <property-shape
+                .value=${this.model}
+                .bounds=${this.bounds}
+                .selected=${this.selected}
+                ?active=${tabName == 'shape'}
+              >
+              </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>
+    `
+  }
+
+  _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)))
+    }
+  }
+
+  _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
+          }
+        })
+      })
+    }
+  }
+
+  _onChangedByScene() {
+    if (this.propertyTarget)
+      this.model = {
+        ...this.propertyTarget.model
+      }
+  }
+
+  _setPropertyTargetAsDefault() {
+    if (!this.scene) {
+      this._setPropertyTarget(null)
+      this.specificProps = []
+      this.model = null
+      this.bounds = {}
+    } else {
+      this.scene.select('model-layer')
+    }
+  }
+
+  _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'))
+    }
+  }
+
+  async _onSceneChanged() {
+    await this.updateComplete
+
+    if (this.scene) this.selected = this.scene.select('model-layer')
+  }
+
+  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 = {}
+    }
+  }
+
+  _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
+  }
+
+  _setBounds(bounds: BOUNDS) {
+    this.bounds = {
+      left: bounds.left,
+      top: bounds.top,
+      width: Math.round(bounds.width),
+      height: Math.round(bounds.height)
+    }
+  }
+}

package/src/modeller/property-sidebar/shapes/box-padding-editor-styles.ts

@@ -0,0 +1,94 @@
+import { css } from 'lit'
+
+export const BoxPaddingEditorStyles = css`
+  .box-padding {
+    width: 100%;
+  }
+
+  .box-padding td {
+    background: url(/assets/images/icon-properties-padding.png) 50% 0 no-repeat;
+  }
+
+  .box-padding tr:nth-child(1),
+  .box-padding tr:nth-child(3) {
+    height: 20px;
+  }
+
+  .box-padding tr td:nth-child(1),
+  .box-padding tr td:nth-child(3) {
+    width: 18px;
+  }
+
+  .box-padding .slide1 {
+    background-position: 0 0;
+  }
+
+  .box-padding .slide2 {
+    background-position: 50% -40px;
+    background-color: rgba(69, 46, 41, 0.2);
+  }
+
+  .box-padding .slide3 {
+    background-position: 100% -440px;
+  }
+
+  .box-padding .slide4 {
+    background-position: 0 -360px;
+    background-color: rgba(69, 46, 41, 0.2);
+  }
+
+  .box-padding .slide5 {
+    background: none;
+    text-align: center;
+  }
+
+  .box-padding .slide6 {
+    background-position: 100% -160px;
+    background-color: rgba(69, 46, 41, 0.2);
+  }
+
+  .box-padding .slide7 {
+    background-position: 0 100%;
+  }
+
+  .box-padding .slide8 {
+    background-position: 50% -320px;
+    background-color: rgba(69, 46, 41, 0.2);
+  }
+
+  .box-padding .slide9 {
+    background-position: 0 0px;
+  }
+
+  .box-padding input {
+    background-color: transparent;
+    width: 35px;
+    margin: 0px;
+    padding: 0px;
+    clear: both;
+    float: initial;
+    border: 1px solid #fff;
+    border-width: 0 0 1px 0;
+    text-align: right;
+    font-size: 14px;
+  }
+
+  .slide5 input:nth-child(1),
+  .slide5 input:nth-child(4) {
+    display: block;
+    margin: auto;
+  }
+
+  .slide5 input:nth-child(2) {
+    float: left;
+  }
+
+  .slide5 input:nth-child(3) {
+    float: right;
+    margin-top: -25px;
+  }
+
+  .slide5 input:nth-child(4) {
+    margin-top: -5px;
+  }
+`