@operato/board 0.2.44 → 0.2.48

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

@@ -0,0 +1,327 @@
+import { Component, Container, Properties, Scene } from '@hatiolab/things-scene'
+import { LitElement, PropertyValues, TemplateResult, css, html } from 'lit'
+import { customElement, property } from 'lit/decorators'
+
+import Sortable from 'sortablejs'
+
+@customElement('scene-inspector')
+export default class SceneInspector extends LitElement {
+  static styles = [
+    css`
+      :host {
+        color: var(--scene-inspector-color);
+      }
+
+      .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: url(/assets/images/icon-shell-inspector.png) 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
+
+  private _extendedMap: any
+  private show: boolean = false
+
+  render() {
+    return html` ${!this.scene ? html`` : this.renderComponent(this.scene.root, 0)} `
+  }
+
+  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)
+  }
+
+  updated(change: PropertyValues<this>) {
+    if (change.has('scene')) {
+      let oldScene = change.get('scene') as Scene
+
+      if (oldScene) {
+        oldScene.off('selected')
+        oldScene.off('execute')
+        oldScene.off('undo')
+        oldScene.off('redo')
+
+        delete this._extendedMap
+      }
+
+      if (this.scene && this.scene.root) {
+        // root 는 기본상태가 extended 되도록 하기위해서임.
+        this.extendedMap.set(this.scene.root, true)
+
+        this.scene.on('selected', (after: Component[], before: Component[]) => {
+          let selected = after
+
+          selected.forEach(component => {
+            let parent = component.parent
+            while (parent && !this.extendedMap.get(parent)) {
+              this.extendedMap.set(parent, true)
+              parent = parent.parent
+            }
+          })
+
+          this.requestUpdate()
+        })
+
+        this.scene.on('execute', () => {
+          this.requestUpdate()
+        })
+
+        this.scene.on('undo', () => {
+          this.extendedMap.set(this.scene!.root, true)
+          this.requestUpdate()
+        })
+
+        this.scene.on('redo', () => {
+          this.extendedMap.set(this.scene!.root, true)
+          this.requestUpdate()
+        })
+      }
+    }
+
+    this.updateComplete.then(() => {
+      this.renderRoot.querySelectorAll('[sortable]').forEach(sortable => {
+        new Sortable(sortable as HTMLElement, this.sortableConfig)
+      })
+    })
+  }
+
+  sortableConfig: Sortable.Options = {
+    group: 'inspector',
+    animation: 150,
+    draggable: '.component',
+    swapThreshold: 1,
+    onSort: this.onSort.bind(this)
+  }
+
+  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
+    })
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback()
+
+    delete this.scene
+    delete this._extendedMap
+  }
+
+  _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)
+    } 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) {
+    this.scene!.selected = [component]
+
+    this.requestUpdate()
+  }
+
+  renderComponent(component: Component, depth: number): TemplateResult {
+    if (!component) {
+      return html``
+    }
+
+    var children = (component.isContainer() && (component as Container).components) || []
+    var extended = this.isExtended(component) ? children : []
+
+    return html`
+      <div
+        class="component"
+        ?selected=${(this.scene?.selected || []).indexOf(component) > -1}
+        .component=${component}
+        ?sortable=${component.isContainer()}
+      >
+        <span>
+          ${depth > 0
+            ? html`
+                <mwc-icon class="eye">${component.get('hidden') ? 'visibility_off' : 'visibility'}</mwc-icon>
+                <pre>${' '.repeat(depth)}</pre>
+              `
+            : html` <pre>${' '.repeat(depth + 2)}</pre> `}
+
+          <span class=${this.getNodeHandleClass(component)}> </span>
+
+          <span class="type">${depth == 0 ? 'ROOT' : component.get('type')}</span> ${component.get('id')
+            ? html` <span class="name">#${component.get('id')}</span> `
+            : html``}
+        </span>
+
+        ${extended.map(child => this.renderComponent(child, depth + 1))}
+      </div>
+    `
+  }
+}

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

@@ -0,0 +1,132 @@
+/**
+ * @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);
+  }
+
+  /* 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 > things-editor-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: url(/assets/images/icon-properties-label.png) 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;
+  }
+`