@operato/board 1.4.36 → 1.4.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/board",
-  "version": "1.4.36",
+  "version": "1.4.37",
   "description": "Webcomponent for board following open-wc recommendations",
   "author": "heartyoh",
   "main": "dist/src/index.js",
@@ -148,5 +148,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "6ee63479eb63ac9f99644a0318fbd92c07aef81b"
+  "gitHead": "aaf6dbbf793ff79a1739db07e2356598baa22770"
 }

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

@@ -214,10 +214,12 @@ export class PropertySidebar extends ScopedElementsMixin(LitElement) {
   }
 
   _onChangedByScene() {
-    if (this.propertyTarget)
+    if (this.propertyTarget) {
       this.model = {
         ...this.propertyTarget.model
       }
+      this._setBounds(this.propertyTarget.bounds)
+    }
   }
 
   _setPropertyTargetAsDefault() {

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

@@ -10,6 +10,7 @@ import '@operato/help/ox-title-with-help.js'
 
 import { css, html } from 'lit'
 import { property, state } from 'lit/decorators.js'
+import { keyed } from 'lit/directives/keyed.js'
 
 import { BOUNDS, Component, Properties } from '@hatiolab/things-scene'
 
@@ -144,6 +145,7 @@ export class PropertyShapes extends AbstractProperty {
 
   render() {
     const value = this.value || {}
+    const { width, height } = this.bounds || {}
 
     return html`
       <fieldset>
@@ -191,27 +193,30 @@ export class PropertyShapes extends AbstractProperty {
       </fieldset>
 
       ${!this._isLine(this.selected)
-        ? html`
-            <fieldset class="icon-label unit ratio">
-              <legend>
-                <ox-title-with-help topic="board-modeller/shapes/size" msgid="label.size">size</ox-title-with-help>
-              </legend>
-
-              <div class="property-grid">
-                <label class="width"> <ox-i18n msgid="label.width">width</ox-i18n> </label>
-                <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" .value=${value.rotation}> </ox-input-angle>
-                    `}
-              </div>
-            </fieldset>
-          `
+        ? keyed(
+            this.selected,
+            html`
+              <fieldset class="icon-label unit ratio">
+                <legend>
+                  <ox-title-with-help topic="board-modeller/shapes/size" msgid="label.size">size</ox-title-with-help>
+                </legend>
+
+                <div class="property-grid">
+                  <label class="width"> <ox-i18n msgid="label.width">width</ox-i18n> </label>
+                  <input type="number" value-key="bounds.width" .value=${String(width)} />
+                  <label class="height"> <ox-i18n msgid="label.height">height</ox-i18n> </label>
+                  <input type="number" value-key="bounds.height" .value=${String(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" .value=${value.rotation}> </ox-input-angle>
+                      `}
+                </div>
+              </fieldset>
+            `
+          )
         : html``}
       ${this._is3dish(this.selected)
         ? html`