@operato/process 8.0.0-beta.0 → 8.0.0-beta.2

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

@@ -1,342 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import '@material/web/icon/icon.js'
-
-import { css, html, LitElement, PropertyValues } from 'lit'
-import { property } from 'lit/decorators.js'
-import deepClone from 'lodash-es/cloneDeep'
-
-import { BOUNDS, Component, Model, Scene } from '@hatiolab/things-scene'
-import { ScopedElementsMixin } from '@open-wc/scoped-elements'
-import { ScrollbarStyles } from '@operato/styles'
-
-import { PropertyDataBinding } from './data-binding/data-binding.js'
-import { PropertyEffects } from './effects/effects.js'
-import { PropertyShapes } from './shapes/shapes.js'
-import { PropertySpecific } from './specifics/specifics.js'
-import { PropertyStyles } from './styles/styles.js'
-import { SceneInspector } from './inspector/inspector'
-
-export class PropertySidebar extends ScopedElementsMixin(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, var(--md-sys-color-secondary-container));
-        user-select: none;
-
-        --input-padding: var(--spacing-small);
-        --label-font: var(--property-sidebar-fieldset-label);
-      }
-
-      [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;
-      }
-
-      [content] > :not([active]) {
-        display: none;
-      }
-
-      [hidden] {
-        display: none !important;
-      }
-    `
-  ]
-
-  @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 = 'specific'
-  @property({ type: Boolean }) collapsed: boolean = false
-  @property({ type: Array }) fonts: any[] = []
-  @property({ type: Array }) propertyEditor: any[] = []
-
-  @property({ type: Boolean, attribute: 'hide-data-binding' }) hideDataBinding: boolean = false
-  @property({ type: Boolean, attribute: 'hide-effect' }) hideEffect: boolean = false
-  @property({ type: Boolean, attribute: 'hide-inspector' }) hideInspector: boolean = false
-  @property({ type: Boolean, attribute: 'hide-shape' }) hideShape: boolean = false
-  @property({ type: Boolean, attribute: 'hide-style' }) hideStyle: boolean = false
-  @property({ type: Boolean, attribute: 'hide-specific' }) hideSpecific: boolean = false
-
-  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 {
-      'process-property-shape': PropertyShapes,
-      'process-property-style': PropertyStyles,
-      'process-property-effect': PropertyEffects,
-      'process-property-specific': PropertySpecific,
-      'process-property-data-binding': PropertyDataBinding,
-      'process-scene-inspector': SceneInspector
-    }
-  }
-
-  render() {
-    var tabName = this.tabName ? this.tabName : 'specific'
-
-    return html`
-      <div
-        tab
-        @click=${(e: MouseEvent) => {
-          this.tabName = (e.target as HTMLElement).getAttribute('name')
-        }}
-      >
-        <md-icon name="specific" ?selected=${tabName == 'specific'} ?hidden=${this.hideSpecific}>tune</md-icon>
-        <md-icon name="shape" ?selected=${tabName == 'shape'} ?hidden=${this.hideShape}>format_shapes</md-icon>
-        <md-icon name="style" ?selected=${tabName == 'style'} ?hidden=${this.hideStyle}>palette</md-icon>
-        <md-icon name="effect" ?selected=${tabName == 'effect'} ?hidden=${this.hideEffect}>movie_filter</md-icon>
-        <md-icon name="data-binding" ?selected=${tabName == 'data-binding'} ?hidden=${this.hideDataBinding}
-          >share</md-icon
-        >
-        <md-icon name="inspector" ?selected=${tabName == 'inspector'} ?hidden=${this.hideInspector}>visibility</md-icon>
-      </div>
-
-      <div content>
-        ${html`
-          ${{
-            specific: html`
-              <process-property-specific
-                .value=${this.model}
-                .scene=${this.scene}
-                .selected=${this.selected}
-                .props=${this.specificProps}
-                .propertyEditor=${this.propertyEditor}
-                ?active=${tabName == 'specific'}
-              >
-              </process-property-specific>
-            `,
-            shape: html`
-              <process-property-shape
-                .value=${this.model}
-                .bounds=${this.bounds}
-                .selected=${this.selected}
-                ?active=${tabName == 'shape'}
-              >
-              </process-property-shape>
-            `,
-            style: html`
-              <process-property-style
-                .value=${this.model}
-                .selected=${this.selected}
-                .fonts=${this.fonts}
-                ?active=${tabName == 'style'}
-              >
-              </process-property-style>
-            `,
-            effect: html`
-              <process-property-effect .value=${this.model} .scene=${this.scene} ?active=${tabName == 'effect'}>
-              </process-property-effect>
-            `,
-            'data-binding': html`
-              <process-property-data-binding
-                .scene=${this.scene}
-                .value=${this.model}
-                ?active=${tabName == 'data-binding'}
-              >
-              </process-property-data-binding>
-            `,
-            inspector: html`
-              <process-scene-inspector .scene=${this.scene} ?active=${tabName == 'inspector'}></process-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
-      }
-      this._setBounds(this.propertyTarget.bounds)
-    }
-  }
-
-  _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

@@ -1,94 +0,0 @@
-import { css } from 'lit'
-
-export const BoxPaddingEditorStyles = css`
-  .box-padding {
-    width: 100%;
-  }
-
-  .box-padding td {
-    background: var(--url-icon-properties-padding) 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;
-  }
-`