@operato/process 1.1.4 → 1.1.6

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

@@ -9,17 +9,15 @@ import '@operato/i18n/ox-i18n.js'
 import '@operato/help/ox-title-with-help.js'
 
 import { css, html } from 'lit'
-import { property } from 'lit/decorators.js'
+import { property, state } from 'lit/decorators.js'
 
 import { BOUNDS, Component, Properties } from '@hatiolab/things-scene'
-import { ScopedElementsMixin } from '@open-wc/scoped-elements'
 
 import { AbstractProperty } from '../abstract-property'
-import { PropertyShadow } from '../effects/property-shadow.js'
 import { PropertySharedStyle } from '../property-shared-style'
 import { BoxPaddingEditorStyles } from './box-padding-editor-styles'
 
-export class PropertyShapes extends ScopedElementsMixin(AbstractProperty) {
+export class PropertyShapes extends AbstractProperty {
   static styles = [
     PropertySharedStyle,
     BoxPaddingEditorStyles,
@@ -138,16 +136,12 @@ export class PropertyShapes extends ScopedElementsMixin(AbstractProperty) {
   @property({ type: Object }) bounds: BOUNDS | null = null
   @property({ type: Array }) selected: Component[] = []
 
+  @state() private _3dExpanded: boolean = false
+
   firstUpdated() {
     this.renderRoot.addEventListener('change', this._onValueChange.bind(this))
   }
 
-  static get scopedElements() {
-    return {
-      'process-property-shadow': PropertyShadow
-    }
-  }
-
   render() {
     const value = this.value || {}
 
@@ -160,18 +154,45 @@ export class PropertyShapes extends ScopedElementsMixin(AbstractProperty) {
                 <input value-key="id" .value=${value.id || ''} />
               `
             : html``}
+          ${this._isClassIdentifiable(this.selected)
+            ? html`
+                <label> <ox-i18n msgid="label.class">Class</ox-i18n> </label>
+                <input value-key="class" .value=${value.class || ''} />
+              `
+            : html``}
           ${this._hasTextProperty(this.selected)
             ? html`
                 <label> <ox-i18n msgid="label.text">Text</ox-i18n> </label>
                 <input value-key="text" .value=${value.text || ''} />
+                <label> <ox-i18n msgid="label.text-format">Text Format</ox-i18n> </label>
+                <input value-key="textFormat" .value=${value.textFormat || ''} list="format-list" />
+                <datalist id="format-list">
+                  <option value="#,###."></option>
+                  <option value="#,###.#"></option>
+                  <option value="#,###.0"></option>
+                  <option value="#,##0.#"></option>
+                  <option value="#,##0.0"></option>
+                  <option value="#,##0.0%"></option>
+                </datalist>
+              `
+            : html``}
+          ${this._hasProperties(this.selected)
+            ? html`
+                <div class="checkbox-row">
+                  <input id="checkbox-hidden" value-key="hidden" type="checkbox" .checked=${value.hidden} />
+                  <label for="checkbox-hidden"> <ox-i18n msgid="label.item-hidden">Item Hidden</ox-i18n> </label>
+
+                  <input id="checkbox-locked" value-key="locked" type="checkbox" .checked=${value.locked} />
+                  <label for="checkbox-locked"> <ox-i18n msgid="label.locked">Locked</ox-i18n> </label>
+                </div>
               `
             : html``}
         </div>
       </fieldset>
 
-      ${this.selected.length && this.selected[0].isRootModel()
+      ${!this._isLine(this.selected)
         ? html`
-            <fieldset class="icon-label unit">
+            <fieldset class="icon-label unit ratio">
               <legend>
                 <ox-title-with-help topic="process-modeller/shapes/size" msgid="label.size">size</ox-title-with-help>
               </legend>
@@ -181,20 +202,48 @@ export class PropertyShapes extends ScopedElementsMixin(AbstractProperty) {
                 <input type="number" value-key="bounds.width" .value=${this.bounds?.width} />
                 <label class="height"> <ox-i18n msgid="label.height">height</ox-i18n> </label>
                 <input type="number" value-key="bounds.height" .value=${this.bounds?.height} />
+
+                ${this.selected.length && this.selected[0].isRootModel()
+                  ? html``
+                  : html`
+                      <label class="rotate"> <ox-i18n msgid="label.rotate">rotate</ox-i18n> </label>
+                      <ox-input-angle value-key="rotation" .radian=${value.rotation}> </ox-input-angle>
+                    `}
               </div>
             </fieldset>
           `
-        : html`
-            <fieldset>
+        : html``}
+      ${this._is3dish(this.selected)
+        ? html`
+            <fieldset class="icon-label unit ratio" collapsable ?collapsed=${!this._3dExpanded}>
               <legend>
-                <ox-title-with-help topic="process-modeller/effects/shadow" msgid="label.shadow"
-                  >shadow</ox-title-with-help
+                <ox-title-with-help topic="process-modeller/shapes/3dish" msgid="label.3dish">3D</ox-title-with-help>
+                <mwc-icon
+                  @click=${(e: Event) => {
+                    this._3dExpanded = !this._3dExpanded
+                  }}
+                  >${this._3dExpanded ? 'expand_less' : 'expand_more'}</mwc-icon
                 >
               </legend>
 
-              <process-property-shadow value-key="shadow" .value=${value.shadow || {}}> </process-property-shadow>
+              <div class="property-grid">
+                <label class="zPos"> <ox-i18n msgid="label.z-pos">pos. Z</ox-i18n> </label>
+                <input type="number" value-key="zPos" .value=${value.zPos} />
+                <label class="depth"> <ox-i18n msgid="label.depth">depth</ox-i18n> </label>
+                <input type="number" value-key="depth" .value=${value.depth} />
+
+                <label class="rotationX"> <ox-i18n msgid="label.rotation-x">rot. X</ox-i18n> </label>
+                <ox-input-angle value-key="rotationX" .radian=${value.rotationX}> </ox-input-angle>
+
+                <label class="rotationY"> <ox-i18n msgid="label.rotation-y">rot. Y</ox-i18n> </label>
+                <ox-input-angle value-key="rotationY" .radian=${value.rotationY}> </ox-input-angle>
+
+                <label class="rotationZ"> <ox-i18n msgid="label.rotation-z">rot. Z</ox-i18n> </label>
+                <ox-input-angle value-key="rotation" .radian=${value.rotation}> </ox-input-angle>
+              </div>
             </fieldset>
-          `}
+          `
+        : html``}
       ${this._hasTextProperty(this.selected)
         ? html`
             <fieldset>
@@ -311,6 +360,12 @@ export class PropertyShapes extends ScopedElementsMixin(AbstractProperty) {
     return true
   }
 
+  _hasProperties(selected: Component[]) {
+    if (!selected || selected.length == 0 || (selected[0] && selected[0].isLayer && selected[0].isLayer())) return false
+
+    return true
+  }
+
   _isIdentifiable(selected: Component[]) {
     if (!selected || selected.length == 0 || selected.length > 1 || (selected[0].isLayer && selected[0].isLayer()))
       return false
@@ -318,9 +373,21 @@ export class PropertyShapes extends ScopedElementsMixin(AbstractProperty) {
     return true
   }
 
+  _isClassIdentifiable(selected: Component[]) {
+    if (!selected || (selected[0] && selected[0].isLayer())) return false
+
+    return true
+  }
+
   _isLine(selected: Component[]) {
     if (!selected || !(selected[0] && selected[0].isLine())) return false
 
     return true
   }
+
+  _is3dish(selected: Component[]) {
+    if (!selected || !(selected[0] && selected[0].is3dish())) return false
+
+    return true
+  }
 }