@things-factory/figure-ui 10.1.147 → 10.1.150

package/test/browser/product-page.js

@@ -0,0 +1,276 @@
+/*
+ * The page a browser check drives when what it checks is the modeller page itself (`figure-modeller-page`): the page
+ * the shell mounts, with its editor, properties, verdict and history, over a server in memory. Nothing is sent: the
+ * GraphQL client the product's own calls go through answers from the rows below, and every call is recorded so a
+ * check can read what the page asked for.
+ *
+ * What the shell does around a page is stood in for here, no more: popups are drawn where the layout would draw them,
+ * an address the product navigates to is routed to the page (and to the store's route, which the detail dock reads),
+ * the detail viewpart is drawn when the store shows it, and notices are kept.
+ */
+import 'figure-ui-client/index.js'
+import 'figure-ui-client/pages/figure-modeller-page.js'
+import 'figure-ui-client/modeller/figure-history-panel.js'
+import { openFigureDetail } from 'figure-ui-client/viewparts/figure-detail-dock.js'
+import { pendNewFigure } from 'figure-ui-client/modeller/ai-proposal.js'
+import { thumbnailHashOf } from 'figure-ui-client/modeller/thumbnail-hash.js'
+import { client } from '@operato/graphql'
+import { i18next } from '@operato/i18n'
+import { store } from '@operato/shell'
+import { setOpenPopupImplementation } from '@operato/popup'
+import '@operato/popup/ox-floating-overlay.js'
+import { html, render } from 'lit'
+import { addFigureBox, applyFigureAuthoring, createFigureAsset, editFigurePart, serializeFigureAsset } from '@hatiolab/figure-model'
+
+const PALETTE = { 'palette.dark': '#2b2b2b', 'palette.neutral': '#9a9a9a', 'palette.primary': '#477b9e', 'palette.accent': '#f79c40', 'palette.light': '#dddddd' }
+
+export function boxSource(name = 'Probe') {
+  const asset = createFigureAsset(name)
+  asset.palette = { ...asset.palette, ...PALETTE }
+  return serializeFigureAsset(addFigureBox(asset, { id: 'box', size: { x: 400, y: 400, z: 400 }, position: { x: 0, y: 200, z: 0 } }))
+}
+
+/* A door whose leaf swings on a clip: a proposal that takes the leaf away would stop the clip. */
+export function doorSource() {
+  let a = createFigureAsset('Door')
+  a.palette = { ...a.palette, ...PALETTE }
+  a = addFigureBox(a, { id: 'frame', size: { x: 1000, y: 100, z: 200 }, position: { x: 0, y: 50, z: 0 } })
+  a = addFigureBox(a, { id: 'leaf', size: { x: 900, y: 1800, z: 40 }, position: { x: 0, y: 1000, z: 0 } })
+  a = applyFigureAuthoring(a, { kind: 'attach', part: 'leaf', face: 'bottom', to: { part: 'frame', face: 'top' } })
+  const j = a.joints.find(k => k.body1.part === 'leaf')
+  a = applyFigureAuthoring(a, { kind: 'set-joint', joint: { ...j, type: 'revolute', axis: 'Y', state: { id: 'open' } } })
+  a = editFigurePart(a, { kind: 'set-driver', state: 'open', clip: 'swing', duration: 2, keys: [{ seconds: 0, value: 0 }, { seconds: 2, value: 80 }] })
+  return serializeFigureAsset(a)
+}
+
+/*
+  No translations are loaded, so a text is its key. The values put into a text are kept after it, so a check can read
+  them too: `figure.text.revert-with-unsaved {"version":"2"}`.
+*/
+const translate = i18next.t.bind(i18next)
+i18next.t = (key, options) => {
+  const text = translate(key, options)
+  const values = options && typeof options === 'object' ? Object.fromEntries(Object.entries(options).filter(([, v]) => typeof v === 'string' || typeof v === 'number')) : {}
+  return Object.keys(values).length ? `${text} ${JSON.stringify(values)}` : text
+}
+
+/* The rows the server holds, by id. */
+const rows = new Map()
+/* Every call the page made: the top field asked for and its variables. */
+const calls = []
+/* Answers a check wants instead of the server's: field -> function(variables) returning data or throwing. */
+const overrides = new Map()
+let made = 0
+
+function row(id) {
+  const found = rows.get(id)
+  if (!found) throw Object.assign(Error(`no figure ${id}`), { graphQLErrors: [{ message: `no figure ${id}`, extensions: { code: 'NOT_FOUND' } }] })
+  return found
+}
+
+const answers = {
+  figure: ({ id }) => ({ __typename: 'Figure', properties: null, tags: null, category: null, description: null, score: null, triangles: null, groups: null, thumbnailUpdatedAt: null, updatedAt: null, updater: null, thumbnailHash: null, ...row(id) }),
+  figureTypeNames: () => [...rows.values()].map(r => r.type),
+  saveFigure: async ({ id, source, type, creationId, thumbnail }) => {
+    const saved = id ? row(id) : { id: creationId ?? `made-${++made}`, namespace: null, type: type ?? `figure-${made}`, state: 'draft', version: 0 }
+    /* The picture is kept by the hash of its bytes, as the server keeps it (ADR-0104 decision 6). */
+    Object.assign(saved, { source, name: JSON.parse(source).name, state: 'draft' }, thumbnail === undefined ? {} : { thumbnailHash: await thumbnailHashOf(thumbnail) })
+    rows.set(saved.id, saved)
+    return { __typename: 'FigureSaveResult', figure: { __typename: 'Figure', ...saved }, id: saved.id, source: saved.source, applied: [] }
+  },
+  updateFigure: ({ id, patch }) => {
+    const changed = Object.assign(row(id), patch)
+    return { __typename: 'FigureSaveResult', figure: { __typename: 'Figure', ...changed } }
+  },
+  releaseFigure: ({ id }) => {
+    const released = Object.assign(row(id), { state: 'released', version: (row(id).version ?? 0) + 1 })
+    return { __typename: 'Figure', id, version: released.version, state: 'released', updatedAt: null }
+  },
+  figureRecipeTemplates: () => [],
+  figureProposalOutcome: () => [],
+  figureReplacedDrafts: () => [],
+  figureVersions: () => [],
+  figureReleased: () => null,
+  inspectFigure: () => ({ __typename: 'FigureInspection', blocked: false, findings: [], instances: 1 }),
+  inspectFigureDraft: () => ({ __typename: 'FigureInspection', blocked: false, findings: [], instances: 1 })
+}
+
+function fieldOf(document) {
+  const operation = document.definitions.find(d => d.kind === 'OperationDefinition')
+  return operation.selectionSet.selections[0].name.value
+}
+
+async function answer(document, variables = {}) {
+  const field = fieldOf(document)
+  calls.push({ field, variables })
+  const respond = overrides.get(field) ?? answers[field]
+  if (!respond) return { data: { [field]: null } }
+  return { data: { [field]: await respond(variables) } }
+}
+
+client.query = ({ query, variables }) => answer(query, variables)
+client.mutate = ({ mutation, variables }) => answer(mutation, variables)
+
+/* Every element the selector finds, through shadow roots; `host >>> inner` is inner in the shadow root of each host. */
+function deep(selector, root = document) {
+  const [first, ...inner] = selector.split(' >>> ')
+  let found = everywhere(first, root)
+  for (const step of inner) found = found.flatMap(element => [...(element.shadowRoot?.querySelectorAll(step) ?? [])])
+  return found
+}
+function everywhere(selector, root) {
+  const found = [...root.querySelectorAll(selector)]
+  for (const element of root.querySelectorAll('*')) if (element.shadowRoot) found.push(...everywhere(selector, element.shadowRoot))
+  return found
+}
+
+/* Popups, drawn as the layout draws them: an overlay of their own in the body, the result given when it leaves. */
+let popups = 0
+setOpenPopupImplementation((template, options = {}) => {
+  const name = `$popup-${popups++}`
+  const fragment = document.createDocumentFragment()
+  render(html`<ox-floating-overlay id=${name} name=${name} .backdrop=${!!options.backdrop} .hovering=${options.hovering} .title=${options.title || ''} .size=${options.size || 'small'} .historical=${false}>${template}</ox-floating-overlay>`, fragment)
+  document.body.appendChild(fragment)
+  const handle = {
+    name,
+    close: () => {
+      const popup = document.getElementById(name)
+      if (!popup) return false
+      popup.close()
+      return true
+    },
+    closed: false
+  }
+  document.addEventListener('overlay-closed', function listener(e) {
+    if (e.detail !== name) return
+    document.removeEventListener('overlay-closed', listener)
+    handle.closed = true
+    handle.onclosed && handle.onclosed()
+  })
+  return handle
+})
+
+/* Notices the product raised (`notify`), as the snack bar would show them. */
+const notices = []
+document.addEventListener('notify', e => notices.push({ level: e.detail.level, message: e.detail.message }))
+
+/*
+  The shell's router, for what the product navigates to: the store's route follows the address, and the modeller page
+  is told the figure the address names. Each navigation is kept, with whether the detail preview was still shown then.
+*/
+const navigations = []
+const detailShown = () => !!store.getState().layout?.viewparts?.['figure-detail']?.show
+function route() {
+  const [, page = '', resourceId] = location.pathname.match(/^\/([^/]*)\/?([^/]*)/) ?? []
+  store.dispatch({ type: 'UPDATE_PAGE', page, resourceId: resourceId || undefined, params: {} })
+  const element = page === 'figure-modeller' ? document.querySelector('figure-modeller-page') : null
+  if (element) element.lifecycle = { ...(element.lifecycle ?? {}), resourceId: resourceId || undefined }
+}
+window.addEventListener('popstate', () => {
+  navigations.push({ path: location.pathname, entries: history.length, detailShown: detailShown() })
+  route()
+})
+
+/* The aside bar's part: the detail viewpart drawn while the store shows it. */
+const aside = document.createElement('div')
+aside.setAttribute('aside', '')
+store.subscribe(() => {
+  const part = store.getState().layout?.viewparts?.['figure-detail']
+  if (part?.show && !aside.isConnected) document.body.appendChild(aside)
+  render(part?.show ? part.template : html``, aside)
+})
+
+/* The app's own base: an address the product navigates to (`figure-modeller/a`) is read from the root. */
+const base = document.createElement('base')
+base.href = '/'
+document.head.appendChild(base)
+
+const page = () => document.querySelector('figure-modeller-page')
+
+/* Where the shell puts a page: its main area, a row the page fills (@operato/shell app-style). */
+const shell = document.createElement('main')
+shell.style.cssText = 'flex: 1; display: flex; flex-direction: row; overflow: hidden; min-width: 0'
+const fill = document.createElement('style')
+fill.textContent = 'main > * { flex: 1; }'
+document.head.appendChild(fill)
+
+window.product = {
+  boxSource,
+  doorSource,
+  page,
+  deep,
+  calls: () => calls.map(c => ({ ...c })),
+  forget: () => {
+    calls.length = 0
+    notices.length = 0
+    navigations.length = 0
+  },
+  rows: () => [...rows.values()].map(r => ({ ...r })),
+  notices: () => notices.map(n => ({ ...n })),
+  navigations: () => navigations.map(n => ({ ...n })),
+  /** What the session behind the page holds now. */
+  view: () => {
+    const element = page()
+    const view = element?.session.read()
+    return view && { id: view.id, name: view.name, dirty: !!view.dirty, revision: view.revision, context: view.context, source: element.session.source() }
+  },
+  /** The shell's record of the page: the context it was last told (title, the rail's menu). */
+  context: () => {
+    const { title, menu } = store.getState().route?.context ?? {}
+    return { title, menu }
+  },
+  route: () => ({ page: store.getState().route?.page, resourceId: store.getState().route?.resourceId }),
+  /** The shell moved to a page (an address the product did not navigate to itself). */
+  goTo(path) {
+    history.pushState({}, '', path)
+    route()
+  },
+  /** A row on the server, as a figure saved earlier. */
+  seed(figure) {
+    rows.set(figure.id, { namespace: null, state: 'draft', version: 0, name: JSON.parse(figure.source).name, ...figure })
+  },
+  /** What the server in memory answers to this field, as it would without an `answer` of the check's. */
+  server: (field, variables) => answers[field](variables),
+  /** The server answers this field so from now on (a function of the variables; throw to refuse). */
+  answer(field, respond) {
+    if (respond) overrides.set(field, respond)
+    else overrides.delete(field)
+  },
+  /** The shell's part: the page made active on an address (`resourceId`, or none for a new figure). */
+  async open(resourceId) {
+    let element = page()
+    if (!element) {
+      element = document.createElement('figure-modeller-page')
+      element.setAttribute('active', '')
+      shell.replaceChildren(element)
+      document.body.replaceChildren(shell)
+    }
+    history.replaceState({}, '', resourceId ? `/figure-modeller/${resourceId}` : '/figure-modeller')
+    store.dispatch({ type: 'UPDATE_PAGE', page: 'figure-modeller', resourceId, params: {} })
+    element.lifecycle = { ...(element.lifecycle ?? {}), resourceId }
+    element.active = true
+    await element.updateComplete
+    return element
+  },
+  async leave() {
+    const element = page()
+    element.active = false
+    await element.updateComplete
+  },
+  /** A history panel of its own, beside the page, given these properties. */
+  async panel(properties) {
+    document.querySelector('figure-history-panel[alone]')?.remove()
+    const panel = Object.assign(document.createElement('figure-history-panel'), properties)
+    panel.setAttribute('alone', '')
+    document.body.appendChild(panel)
+    await panel.updateComplete
+    return panel
+  },
+  /** The catalogue's preview of a figure, as a card opens it. */
+  openDetail: id => openFigureDetail({ id }),
+  detailShown,
+  /** The dock's handler opened a new figure for these steps (`figure-assistant.ts`). */
+  pendNewFigure: (steps, key) => pendNewFigure(steps, key).then(r => (window.product.pended = r)),
+  pended: undefined
+}
+window.harness = window.product

package/test/browser/screen-page.js

@@ -0,0 +1,112 @@
+/*
+ * The page the screen check drives (`screen.check.mjs`): the editor harness (`modeller-page.js`, kept here as
+ * `window.editorHarness` -- the modeller page's harness takes `window.harness` after it), the figures the check opens,
+ * and what the app shows that is not in the editor: its notices, the card's picture, the scene's registered figures.
+ */
+import './modeller-page.js'
+import { captureFigureThumbnail } from 'figure-ui-client/modeller/thumbnail.js'
+import { drawableFigureParts } from 'figure-ui-client/modeller/renderer.js'
+import { previewTypeOf } from 'figure-ui-client/modeller/preview-model.js'
+import { figureReportOf } from 'figure-ui-client/modeller/maturity.js'
+import { hasFigure } from '@hatiolab/things-scene'
+import {
+  addFigureBox,
+  addFigurePrimitive,
+  applyFigureAuthoring,
+  compileFigureAsset,
+  createFigureAsset,
+  editFigurePart,
+  robotArmFigure,
+  serializeFigureAsset
+} from '@hatiolab/figure-model'
+
+window.editorHarness = window.harness
+
+const PALETTE = { 'palette.dark': '#2b2b2b', 'palette.neutral': '#9a9a9a', 'palette.primary': '#477b9e', 'palette.accent': '#f79c40', 'palette.light': '#dddddd' }
+
+function named(name) {
+  const asset = createFigureAsset(name)
+  asset.palette = { ...asset.palette, ...PALETTE }
+  return asset
+}
+const cube = (id, x, extra = {}) => ({ id, size: { x: 400, y: 400, z: 400 }, position: { x, y: 200, z: 0 }, ...extra })
+
+/** The figures the check opens, as saved text. */
+const FIGURES = {
+  /* A new figure: nothing in it yet. */
+  empty: () => named('New figure'),
+  /* Two boxes in two colours: two draw groups. */
+  two: () => {
+    let a = addFigureBox(named('Two'), cube('left', -300))
+    a = addFigureBox(a, cube('right', 300))
+    return editFigurePart(a, { kind: 'set-material', target: 'right', material: { token: 'palette.accent' } })
+  },
+  /* Two boxes of two transparent glasses: past the transparent limit, graded D. */
+  glass: () => {
+    const a = named('Glass')
+    a.palette = { ...a.palette, 'glass.a': '#88aacc', 'glass.b': '#aaccee' }
+    const b = addFigureBox(a, cube('a', -300, { material: { token: 'glass.a', transparent: true } }))
+    return addFigureBox(b, cube('b', 300, { material: { token: 'glass.b', transparent: true } }))
+  },
+  /* A figure hung from the ceiling, its box under it. */
+  ceiling: () => applyFigureAuthoring(addFigureBox(named('Hung'), { id: 'box', size: { x: 400, y: 400, z: 400 }, position: { x: 0, y: -200, z: 0 } }), { kind: 'set-placement', placement: 'ceiling' }),
+  /* A drum: a palette part whose sizes are its own fields. */
+  drum: () => addFigurePrimitive(named('Drum'), { id: 'drum', kind: 'cylinder', dimensions: { radius: 200, length: 500 }, position: { x: 0, y: 250, z: 0 } }),
+  /* A lighting tower that follows its height only: the wider variants ask a width it does not declare. */
+  tower: () => {
+    let a = addFigureBox(named('Tower'), { id: 'mast', size: { x: 200, y: 2000, z: 300 }, position: { x: 0, y: 0, z: 0 } })
+    a = applyFigureAuthoring(a, { kind: 'attach', part: 'mast', face: 'bottom', to: { plane: 'mounting-plane' } })
+    return applyFigureAuthoring(a, { kind: 'declare-instance-size', range: { x: { min: 200, max: 200 }, y: { min: 1000, max: 3000 }, z: { min: 300, max: 300 } } })
+  },
+  /* The robot arm with a clip that turns its base: controls and a clip in the preview. */
+  'arm-clip': () => editFigurePart(robotArmFigure(), { kind: 'set-driver', state: 'j1-base', clip: 'cycle', duration: 4, keys: [{ seconds: 0, value: 0 }, { seconds: 4, value: 60 }] })
+}
+
+/** A figure by name, as saved text. */
+window.figureText = name => serializeFigureAsset(FIGURES[name]())
+
+function deep(selector, root = document) {
+  const found = [...root.querySelectorAll(selector)]
+  for (const element of root.querySelectorAll('*')) if (element.shadowRoot) found.push(...deep(selector, element.shadowRoot))
+  return found
+}
+
+/** An element's own words, without its children's (a heading beside its help button, a label beside its unit). */
+const ownText = element => [...(element?.childNodes ?? [])].filter(n => n.nodeType === Node.TEXT_NODE).map(n => n.textContent).join('').trim()
+
+/* The app's notices (`notify` from @operato/layout), as the shell would show them. */
+const told = []
+document.addEventListener('notify', e => told.push(e.detail))
+
+window.screenCheck = {
+  deep,
+  /** The editor: the harness's, or the one the modeller page draws. */
+  editor: () => document.querySelector('figure-editor') ?? deep('figure-editor')[0],
+  ownText,
+  /** The side panel shown now: the one the tab that is on shows. */
+  shownPanel: () => [...window.screenCheck.editor().shadowRoot.querySelectorAll('aside > div[panel]')].find(p => !p.hasAttribute('off')),
+  /** A control of the view tab, by the words beside it (the i18n key). */
+  setting: key => deep('label', deep('figure-settings')[0].shadowRoot).find(l => l.querySelector('span')?.textContent.trim().startsWith(key)),
+  /** A control of the preview's own, by the name it shows: a state's id, or a clip's. */
+  previewControl: name => [...deep('figure-preview')[0].shadowRoot.querySelectorAll('div[clips] label')].find(l => ownText(l.querySelector('span')) === name),
+  told: () => told.map(n => ({ level: n.level, message: n.message })),
+  forgetTold: () => (told.length = 0),
+  /** Whether the scene has a figure registered under a type. */
+  registered: type => hasFigure(type),
+  previewTypeOf,
+  /** The report the verdict tab measures, for the figure the editor holds. */
+  capacityNow: () => figureReportOf(window.screenCheck.editor().session.revisionNow().asset)?.capacity.instances,
+  /** The card's picture of a figure (saved text), as a save takes it. */
+  async picture(text) {
+    const asset = JSON.parse(text)
+    const evaluation = compileFigureAsset(asset).evaluate()
+    return await captureFigureThumbnail(drawableFigureParts(evaluation.geometry), evaluation.palette ?? asset.palette ?? {})
+  },
+  /** An image's size, from its data URL. */
+  async imageSize(url) {
+    const image = new Image()
+    image.src = url
+    await image.decode()
+    return [image.naturalWidth, image.naturalHeight]
+  }
+}

package/test/browser/screen-product-page.js

@@ -0,0 +1,62 @@
+/*
+ * The screen check's page with the modeller page beside the editor: `screen-page.js` first (the editor harness is kept
+ * as `window.editorHarness`), then the modeller page over a server in memory (`product-page.js`, `window.product`).
+ * Built with the assistant dock's stand-in (`assistant-stand-in.js`).
+ *
+ * Added here: what the page sent the server, as documents (the fields each question asks for), and the verdict tab and
+ * the release history mounted alone over a figure, as the modeller page mounts them, for the rows that are theirs.
+ */
+import './screen-page.js'
+import './product-page.js'
+import 'figure-ui-client/modeller/figure-verdict.js'
+import 'figure-ui-client/modeller/figure-history-panel.js'
+import { createFigureProductSession } from 'figure-ui-client/modeller/product-session.js'
+import { client } from '@operato/graphql'
+
+/* Each question's document, by its top field, as the page sent it. */
+const documents = new Map()
+const answer = client.query
+client.query = options => {
+  const operation = options.query.definitions.find(d => d.kind === 'OperationDefinition')
+  documents.set(operation.selectionSet.selections[0].name.value, operation.selectionSet.selections[0])
+  return answer(options)
+}
+
+/** The fields a selection asks for, nested, in order: `a b { c d }`. */
+function fieldsOf(selection) {
+  const inner = selection.selectionSet?.selections ?? []
+  return inner.map(one => (one.selectionSet ? `${one.name.value} { ${fieldsOf(one)} }` : one.name.value)).join(' ')
+}
+
+/** A release finding as the server words it: its message is its code, so the check can tell them apart. */
+const finding = (code, blocking = true) => ({ __typename: 'FigureGateFinding', code, message: code, why: null, how: null, at: null, blocking })
+
+window.alone = {
+  /** The fields the page asked for in its last question of this name. */
+  fieldsAsked: field => (documents.has(field) ? fieldsOf(documents.get(field)) : null),
+  finding,
+  /**
+   * The verdict tab over a figure (saved text), its id, and the findings the server answers for it -- as the modeller
+   * page mounts it in the editor's verdict slot. Also the release history over the same id, when asked.
+   */
+  async mount(text, { figureId, findings = [], history = false } = {}) {
+    const inspection = { __typename: 'FigureInspection', blocked: findings.some(f => f.blocking), findings }
+    window.product.answer('inspectFigureDraft', () => inspection)
+    window.product.answer('inspectFigure', () => inspection)
+    const session = createFigureProductSession({ load: async id => ({ id, source: text }), save: async request => ({ id: request.id ?? 'probe', source: request.source }) })
+    await session.open(figureId ?? 'probe')
+    const verdict = document.createElement('figure-verdict')
+    verdict.figureId = figureId
+    verdict.revision = session.revisionNow()
+    const shown = [verdict]
+    if (history) {
+      const panel = document.createElement('figure-history-panel')
+      panel.figureId = figureId
+      panel.dirty = false
+      shown.push(panel)
+    }
+    document.body.replaceChildren(...shown)
+    window.alone.verdict = verdict
+    await verdict.updateComplete
+  }
+}