@things-factory/figure-ui 10.1.121 → 10.1.122

package/client/viewparts/figure-detail-dock.ts

@@ -3,6 +3,7 @@ import { customElement, property, state } from 'lit/decorators.js'
 import { i18next, localize } from '@operato/i18n'
 import { appendViewpart, UPDATE_VIEWPART, VIEWPART_POSITION, VIEWPART_LEVEL } from '@operato/layout'
 import { navigate, store } from '@operato/shell'
+import { ScrollbarStyles } from '@operato/styles'
 import { ASSISTANT_DOCK_VIEWPART } from '@things-factory/ai-assistant/dist-client/components/assistant-dock.js'
 import { figureCostOf, parseFigureAsset, type FigureAsset } from '@hatiolab/figure-model'
 import { capacityFrom } from '../modeller/scene-budget.js'
@@ -17,10 +18,10 @@ export interface FigureDetailRecord {
   released?: { version: number; source: string }
 }
 
-/** Catalogue details outlive the page; choosing a size or a pose has no write path. */
+/** Catalogue details stay while the catalogue is shown; choosing a size or a pose has no write path. */
 @customElement('figure-detail-dock')
 export class FigureDetailDock extends localize(i18next)(LitElement) {
-  static styles = css`
+  static styles = [ScrollbarStyles, css`
     :host { display: flex; flex-direction: column; width: 440px; max-width: 100vw; height: 100%; min-height: 0;
       color: var(--md-sys-color-on-surface); background: var(--md-sys-color-surface); border-left: 1px solid var(--md-sys-color-outline-variant); font-size: 13px; }
     header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--md-sys-color-outline-variant); }
@@ -40,7 +41,7 @@ export class FigureDetailDock extends localize(i18next)(LitElement) {
     @media (max-width: 1439.98px) {
       :host { position: fixed; inset: var(--figure-detail-top, 44px) 0 0 auto; height: calc(100dvh - var(--figure-detail-top, 44px)); z-index: 11; box-shadow: -4px 0 16px rgb(0 0 0 / 20%); }
     }
-  `
+  `]
   @property({ attribute: false }) load: (id: string) => Promise<FigureDetailRecord> = async id => {
     const [saved, released] = await Promise.all([fetchFigure(id), fetchReleasedFigure(id)])
     if (!saved?.source) throw Error(i18next.t('figure.text.detail-no-source'))
@@ -97,9 +98,9 @@ export class FigureDetailDock extends localize(i18next)(LitElement) {
     window.addEventListener('resize', this.place)
     window.addEventListener('popstate', this.place)
     this.unsubscribe = store.subscribe(() => {
-      const state = store.getState() as { layout?: { viewparts?: Record<string, { show?: boolean }> } }
+      const state = store.getState() as { layout?: { viewparts?: Record<string, { show?: boolean }> }; route?: { page?: string } }
       const parts = state.layout?.viewparts
-      if (parts?.[ASSISTANT_DOCK_VIEWPART]?.show && parts?.[VIEWPART]?.show) hideDetail()
+      if (parts?.[VIEWPART]?.show && (parts?.[ASSISTANT_DOCK_VIEWPART]?.show || leftOpeningPage(openedOn, state.route?.page))) hideDetail()
       else requestAnimationFrame(this.place)
     })
     this.place()
@@ -156,8 +157,9 @@ export class FigureDetailDock extends localize(i18next)(LitElement) {
           </section>` : nothing}
       </div>
       <footer><button ?disabled=${!saved} @click=${() => {
+        // The modeller shows the figure itself; a preview of it beside the editor only covers the work.
+        hideDetail()
         navigate(modellerPathOf(saved))
-        requestAnimationFrame(() => requestAnimationFrame(this.place))
       }}>${i18next.t('figure.button.detail-edit')}</button></footer>`
   }
 }
@@ -173,6 +175,11 @@ function visibleBar(root: Document | ShadowRoot): Element | undefined {
 }
 
 let dock: FigureDetailDock | undefined
+/** The page the preview was opened on; the preview belongs to that page and closes when the shell leaves it. */
+let openedOn: string | undefined
+export function leftOpeningPage(opened: string | undefined, current: string | undefined) {
+  return opened !== undefined && current !== opened
+}
 function hideDetail() {
   store.dispatch({ type: UPDATE_VIEWPART, name: VIEWPART, override: { show: false } })
 }
@@ -180,6 +187,7 @@ export function openFigureDetail(figure: Figure) {
   if (!dock) {
     dock = document.createElement('figure-detail-dock') as FigureDetailDock
   }
+  openedOn = (store.getState() as { route?: { page?: string } }).route?.page
   store.dispatch({ type: UPDATE_VIEWPART, name: ASSISTANT_DOCK_VIEWPART, override: { show: false } })
   appendViewpart({ name: VIEWPART, position: VIEWPART_POSITION.ASIDEBAR,
     viewpart: { show: true, persistent: true, level: VIEWPART_LEVEL.TOPMOST, template: html`${dock}` } })