@operato/process 1.1.1

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

@@ -0,0 +1,136 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import { css } from 'lit'
+
+export const PropertySharedStyle = css`
+  fieldset {
+    border: none;
+    margin: 4px;
+    padding: 9px 4px 9px 4px;
+    border-bottom: var(--property-sidebar-fieldset-border);
+    color: var(--property-sidebar-fieldset-legend-color);
+    font: var(--property-sidebar-fieldset-label);
+  }
+
+  fieldset legend {
+    padding: 5px 0 0 5px;
+    color: var(--property-sidebar-fieldset-legend-color);
+    font: var(--property-sidebar-fieldset-legend);
+    text-transform: capitalize;
+  }
+
+  select,
+  input {
+    border: var(--property-sidebar-fieldset-border);
+  }
+
+  ox-input-data {
+    height: 300px;
+  }
+
+  /* property grid */
+  .property-grid {
+    display: grid;
+    grid-template-columns: repeat(10, 1fr);
+    grid-gap: 5px;
+    grid-auto-rows: minmax(24px, auto);
+    align-items: center;
+  }
+
+  .property-grid > * {
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  .property-grid > label {
+    grid-column: span 3;
+    text-align: right;
+    text-transform: capitalize;
+    line-height: 2;
+  }
+
+  .property-grid > input,
+  .property-grid > table,
+  .property-grid > select,
+  .property-grid > ox-input-angle,
+  .property-grid > ox-buttons-radio,
+  .property-grid > ox-input-color,
+  [custom-editor] {
+    grid-column: span 7;
+    align-self: stretch;
+  }
+
+  .property-grid > .checkbox-row {
+    grid-column: span 10;
+  }
+
+  .property-grid > .property-full-label {
+    grid-column: span 3;
+    text-align: right;
+    text-transform: capitalize;
+  }
+
+  .property-grid > .property-half-label {
+    grid-column: span 1;
+  }
+
+  .property-grid > .property-full-input {
+    grid-column: span 7;
+  }
+
+  .property-grid > .property-half-input {
+    grid-column: span 4;
+  }
+
+  /* checkbox-row */
+  .checkbox-row {
+    display: grid;
+    grid-template-columns: repeat(10, 1fr);
+    grid-gap: 5px;
+    grid-auto-rows: minmax(24px, auto);
+    align-items: center;
+  }
+
+  .checkbox-row > input {
+    grid-column: 4 / 5;
+  }
+
+  .checkbox-row > label {
+    grid-column: span 6;
+    text-align: left;
+  }
+
+  /* image resources */
+  .icon-only-label {
+    grid-column: span 1;
+
+    background: var(--url-icon-properties-label) no-repeat;
+    float: left;
+    margin: 0;
+    align-self: stretch;
+  }
+
+  .icon-only-label.color {
+    background-position: 100% -500px;
+  }
+  .icon-only-label.font-size {
+    background-position: 100% -594px;
+  }
+  .icon-only-label.leading {
+    background-position: 100% -696px;
+  }
+  .icon-only-label.hscale {
+    background-position: 100% -296px;
+  }
+  .icon-only-label.vscale {
+    background-position: 100% -396px;
+  }
+  .icon-only-label.linewidth {
+    background-position: 100% -894px;
+  }
+  .icon-only-label.lineHeight {
+    background-position: 100% -995px;
+  }
+`

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

@@ -0,0 +1,308 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import '@material/mwc-icon'
+
+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 { 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);
+        user-select: none;
+        --input-padding: var(--padding-narrow);
+        --label-font: var(--property-sidebar-fieldset-label);
+      }
+
+      [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 = 'specific'
+  @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 {
+      'process-property-shape': PropertyShapes,
+      'process-property-style': PropertyStyles,
+      'process-property-specific': PropertySpecific,
+      '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')
+        }}
+      >
+        <mwc-icon name="specific" ?selected=${tabName == 'specific'}>tune</mwc-icon>
+        <mwc-icon name="shape" ?selected=${tabName == 'shape'}>format_shapes</mwc-icon>
+        <mwc-icon name="style" ?selected=${tabName == 'style'}>palette</mwc-icon>
+        <mwc-icon name="inspector" ?selected=${tabName == 'inspector'}>visibility</mwc-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>
+            `,
+            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
+      }
+  }
+
+  _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: 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;
+  }
+`