@things-factory/figure-ui 10.1.127 → 10.1.128

package/client/modeller/editor.ts

@@ -163,6 +163,10 @@ export class FigureEditor extends LitElement {
     div[middle][hidden] {
       display: none;
     }
+    /* The preview, once made, stays standing out of sight too: its 3D scene is not made again each time it is asked for. */
+    figure-preview[hidden] {
+      display: none;
+    }
     ox-canvas-bar .status {
       padding: 0 8px;
       color: var(--md-sys-color-on-surface-variant);
@@ -640,7 +644,10 @@ export class FigureEditor extends LitElement {
     for (const inner of panel.querySelectorAll('figure-links')) folds.push(...(inner.shadowRoot?.querySelectorAll('details') ?? []))
     return folds
   }
+  /** The preview is made when first asked for, and kept (hidden) after that; it is taken down with the editor. */
+  private previewMounted = false
   protected willUpdate(_changed: PropertyValues) {
+    if (this.middle === 'preview') this.previewMounted = true
     const view = this.session?.read()
     if (view?.context !== this.lastContext) {
       this.lastContext = view?.context ?? null
@@ -2149,8 +2156,10 @@ export class FigureEditor extends LitElement {
           @duplicate-part=${(e: CustomEvent) => this.duplicatePart(e.detail.id)}
           @remove-part=${(e: CustomEvent) => this.removePart(e.detail.id)}
         ></figure-parts>
-        ${this.middle === 'preview'
+        ${this.previewMounted
           ? html`<figure-preview
+              ?hidden=${this.middle !== 'preview'}
+              .active=${this.middle === 'preview'}
               .asset=${asset}
               .context=${view.context ?? ''}
               .view=${this.view}

package/client/modeller/figure-preview.ts

@@ -173,6 +173,13 @@ export class FigurePreview extends localize(i18next)(LitElement) {
   @property({ attribute: false }) asset?: FigureAsset
   /** Which figure: the type it is registered under here is this one's own, never a real type a board uses. */
   @property() context = ''
+  /**
+   * In front. Once made, the preview stays standing behind the edit canvas, so coming back to it is not a new 3D scene
+   * (about 300 ms): out of sight it does not follow the figure, and when it is shown again it makes its content again
+   * inside the scene that stands if the figure changed meanwhile.
+   */
+  @property({ type: Boolean }) active = true
+  private stale = false
   @property({ attribute: false }) view: ViewSettings = DEFAULT_VIEW
 
   @query('div[stage]') private stage!: HTMLDivElement
@@ -306,6 +313,15 @@ export class FigurePreview extends localize(i18next)(LitElement) {
 
   willUpdate(changed: Map<string, unknown>) {
     if (!this.hasUpdated) return
+    if (!this.active) {
+      this.stale = true
+      return
+    }
+    if (this.stale || changed.has('active')) {
+      this.stale = false
+      this.standUp()
+      return
+    }
     if (changed.has('asset') || changed.has('context')) {
       this.standUp()
       return
@@ -319,7 +335,9 @@ export class FigurePreview extends localize(i18next)(LitElement) {
 
   firstUpdated() {
     this.standUp()
-    this.watcher = new ResizeObserver(() => this.scene?.resize?.())
+    this.watcher = new ResizeObserver(() => {
+      if (this.active) this.scene?.resize?.()
+    })
     this.watcher.observe(this)
   }
 

package/dist-client/modeller/editor.d.ts

@@ -113,6 +113,8 @@ export declare class FigureEditor extends LitElement {
     private restorePanelFor?;
     private propertiesPanel;
     private foldsOf;
+    /** The preview is made when first asked for, and kept (hidden) after that; it is taken down with the editor. */
+    private previewMounted;
     protected willUpdate(_changed: PropertyValues): void;
     /**
      * The selection moved off the part being edited. With nothing changed there the editor closes; with changes, the part

package/dist-client/modeller/editor.js

@@ -153,6 +153,8 @@ let FigureEditor = class FigureEditor extends LitElement {
           hide which part the panel speaks of. Another model starts clean.
         */
         this.panelMemory = new Map();
+        /** The preview is made when first asked for, and kept (hidden) after that; it is taken down with the editor. */
+        this.previewMounted = false;
         this.lastAnchors = {};
         /** To the release that exists: the history tab's release section, not a second one here. */
         this.goRelease = async () => {
@@ -236,6 +238,10 @@ let FigureEditor = class FigureEditor extends LitElement {
     div[middle][hidden] {
       display: none;
     }
+    /* The preview, once made, stays standing out of sight too: its 3D scene is not made again each time it is asked for. */
+    figure-preview[hidden] {
+      display: none;
+    }
     ox-canvas-bar .status {
       padding: 0 8px;
       color: var(--md-sys-color-on-surface-variant);
@@ -617,6 +623,8 @@ let FigureEditor = class FigureEditor extends LitElement {
         return folds;
     }
     willUpdate(_changed) {
+        if (this.middle === 'preview')
+            this.previewMounted = true;
         const view = this.session?.read();
         if (view?.context !== this.lastContext) {
             this.lastContext = view?.context ?? null;
@@ -2169,8 +2177,10 @@ let FigureEditor = class FigureEditor extends LitElement {
           @duplicate-part=${(e) => this.duplicatePart(e.detail.id)}
           @remove-part=${(e) => this.removePart(e.detail.id)}
         ></figure-parts>
-        ${this.middle === 'preview'
+        ${this.previewMounted
             ? html `<figure-preview
+              ?hidden=${this.middle !== 'preview'}
+              .active=${this.middle === 'preview'}
               .asset=${asset}
               .context=${view.context ?? ''}
               .view=${this.view}