@things-factory/figure-ui 10.1.146 → 10.1.149

package/test/browser/section-page.js

@@ -0,0 +1,256 @@
+/*
+ * The page the section check drives: the modeller page's editor (`modeller-page.js`), with the figures the section
+ * editor, the section panel, the inside's drawing, the fastening drawing and the face choice are tried on, and what the
+ * check reads of them. Only reading here: every change the check makes goes through the mouse and the keyboard.
+ */
+import './modeller-page.js'
+import { html, render } from 'lit'
+import { setOpenPopupImplementation } from '@operato/popup'
+import { addFigureBox, addFigurePrimitive, applyFigureAuthoring, createFigureAsset, serializeFigureAsset } from '@hatiolab/figure-model'
+
+/*
+ * Popups drawn as the layout draws them -- an overlay of their own in the body, the result given when it leaves -- for
+ * the section editor's close question: the page has no layout to append it to.
+ */
+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} .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
+})
+
+const PALETTE = { 'palette.dark': '#2b2b2b', 'palette.neutral': '#9a9a9a', 'palette.primary': '#477b9e', 'palette.accent': '#f79c40', 'palette.light': '#dddddd' }
+
+function figure(name) {
+  const a = createFigureAsset(name)
+  a.palette = { ...a.palette, ...PALETTE }
+  return a
+}
+
+const TRIANGLE = [{ x: -300, z: -200 }, { x: 300, z: -200 }, { x: 0, z: 250 }]
+const polygon = (a, id, points) => addFigurePrimitive(a, { id, kind: 'polygon', dimensions: { height: 200 }, points, position: { x: 0, y: 100, z: 0 } })
+/** A box set beside the part being edited, for picking another part. */
+const beside = a => addFigureBox(a, { id: 'block', size: { x: 200, y: 200, z: 200 }, position: { x: 900, y: 100, z: 0 } })
+
+const FIGURES = {
+  /* A drawn section of four points, and a box beside it. */
+  quad: () => beside(polygon(figure('Quad'), 'wedge', [{ x: -300, z: -200 }, { x: 300, z: -200 }, { x: 300, z: 250 }, { x: -300, z: 250 }])),
+  wedge: () => polygon(figure('Wedge'), 'wedge', TRIANGLE),
+  /* The triangle with a plate on its top: its end cannot be drawn to one point while the plate stands there (A5-1). */
+  'capped-wedge': () => {
+    const a = addFigureBox(polygon(figure('Capped'), 'wedge', TRIANGLE), { id: 'cap', size: { x: 100, y: 20, z: 100 }, position: { x: 0, y: 0, z: 0 } })
+    return applyFigureAuthoring(a, { kind: 'attach', part: 'cap', face: 'bottom', to: { part: 'wedge', face: 'top' } })
+  },
+  pyramid: () => applyFigureAuthoring(polygon(figure('Pyramid'), 'wedge', TRIANGLE), { kind: 'set-section', part: 'wedge', apex: { x: 0, z: 0 } }),
+  /* A box standing on the floor: a length change keeps its bottom. */
+  'floor-box': () => applyFigureAuthoring(addFigureBox(figure('Floor'), { id: 'box', size: { x: 400, y: 200, z: 300 }, position: { x: 0, y: 100, z: 0 } }), { kind: 'set-placement', placement: 'floor' }),
+  /* A box whose sizes follow the figure's: none of them is its own to set. */
+  follows: () => applyFigureAuthoring(addFigureBox(figure('Follows'), { id: 'box', size: { x: 400, y: 400, z: 400 }, position: { x: 0, y: 200, z: 0 } }), { kind: 'follow-size', part: 'box' }),
+  /* A tray: 40 mm walls, a 30 mm floor, open on top; and a box beside it. */
+  tray: () =>
+    beside(applyFigureAuthoring(addFigureBox(figure('Tray'), { id: 'tray', size: { x: 400, y: 200, z: 300 }, position: { x: 0, y: 100, z: 0 } }), {
+      kind: 'set-cavity',
+      part: 'tray',
+      cavity: { wall: 40, start: { closed: 30 }, end: 'open' }
+    })),
+  /* A shallow tray, 20 mm deep inside 30: the handles of the two walls across it would stand on each other. */
+  'shallow-tray': () =>
+    applyFigureAuthoring(addFigureBox(figure('Shallow'), { id: 'tray', size: { x: 400, y: 200, z: 30 }, position: { x: 0, y: 100, z: 0 } }), {
+      kind: 'set-cavity',
+      part: 'tray',
+      cavity: { wall: 5, start: { closed: 10 }, end: 'open' }
+    }),
+  /* A tote on the floor with a divider standing on its inside floor, and a box beside it (ADR-0100 A8). */
+  tote: () => {
+    let a = addFigureBox(figure('Tote'), { id: 'bin', size: { x: 600, y: 300, z: 400 }, position: { x: 0, y: 150, z: 0 } })
+    a = applyFigureAuthoring(a, { kind: 'attach', part: 'bin', face: 'bottom', to: { plane: 'mounting-plane' } })
+    a = applyFigureAuthoring(a, { kind: 'set-cavity', part: 'bin', cavity: { wall: 10, start: { closed: 15 }, end: 'open' } })
+    a = addFigureBox(a, { id: 'divider', size: { x: 10, y: 200, z: 380 }, position: { x: 0, y: 0, z: 0 } })
+    return beside(applyFigureAuthoring(a, { kind: 'attach', part: 'divider', face: 'bottom', to: { part: 'bin', face: 'inside-bottom' } }))
+  }
+}
+
+/** Every element matching `selector`, through every shadow root. */
+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
+}
+
+const words = element => element?.textContent?.replace(/\s+/g, ' ').trim() ?? ''
+
+/**
+ * The first element matching `selector` (through shadow roots), inside the first `within` when given, whose text is
+ * `text` (or holds it, with `has`), or whose aria-label is `label`; `index` picks among several.
+ */
+window.findDeep = (selector, { within, text, has, label, index = 0 } = {}) => {
+  const roots = within ? deep(within).map(host => host.shadowRoot ?? host) : [document]
+  const all = roots.flatMap(root => deep(selector, root))
+  const fit = all.filter(
+    e => (text === undefined || words(e) === text) && (has === undefined || words(e).includes(has)) && (label === undefined || e.getAttribute('aria-label') === label)
+  )
+  return fit[index] ?? null
+}
+
+const editor = () => document.querySelector('figure-editor')
+const canvas = () => deep('figure-canvas')[0]
+const shapeWords = shape => {
+  if (!shape) return null
+  const drawn = shape.extrusion ?? shape.loft
+  return {
+    section: drawn ? JSON.parse(JSON.stringify(drawn.section)) : null,
+    apex: shape.loft?.apex ?? null,
+    length: drawn ? Math.round(drawn.end - drawn.start) : null,
+    cavity: shape.cavity ? JSON.parse(JSON.stringify({ wall: shape.cavity.wall, start: shape.cavity.start, end: shape.cavity.end })) : null
+  }
+}
+const box = element => {
+  const r = element.getBoundingClientRect()
+  return { left: r.left, top: r.top, right: r.right, bottom: r.bottom, width: r.width, height: r.height }
+}
+
+Object.assign(window.probe, {
+  /** A part's section, length and inside as the canvas draws it now -- a value in hand included. */
+  drawnShape(id) {
+    return shapeWords(canvas()?.parts?.find(p => p.id === id)?.shape)
+  },
+  /** A part's section, length and inside as the figure holds it. */
+  heldShape(id) {
+    return shapeWords(editor().session.read().geometry.find(g => g.id === id)?.shape)
+  },
+  /** The section editor as a person sees it; null when it is not open. */
+  sectionEditor() {
+    const host = deep('figure-section-editor')[0]
+    if (!host) return null
+    const root = host.shadowRoot
+    const caption = root.querySelector('div[caption]')
+    const buttons = [...root.querySelectorAll('footer button')]
+    const shown = e => !!e && getComputedStyle(e).display !== 'none'
+    const length = root.querySelector('div[sizes] label[mm]')
+    const apex = root.querySelector('label[apex]')
+    return {
+      caption: words(caption),
+      lastValid: !!caption?.hasAttribute('last-valid'),
+      stale: !!root.querySelector('footer span[grow][stale]'),
+      apply: { disabled: buttons.at(-1)?.disabled ?? null, text: words(buttons.at(-1)) },
+      points: root.querySelectorAll('ol[points] li').length,
+      issues: [...root.querySelectorAll('ul[issues] li')].map(words),
+      note: words(root.querySelector('small[role=status]')),
+      length: length ? { label: words(length.querySelector('span')), disabled: length.querySelector('input').disabled, note: words(length.querySelector('small')) } : null,
+      apex: apex ? { checked: apex.querySelector('input').checked, disabled: apex.querySelector('input').disabled, words: words(apex.querySelector('small')) } : null,
+      narrow: host.hasAttribute('narrow'),
+      show: host.getAttribute('show'),
+      tabs: shown(root.querySelector('nav[tabs]')),
+      body: shown(root.querySelector('div[body]')),
+      host: box(host),
+      room: box(host.parentElement),
+      bodyBox: box(root.querySelector('div[body]')),
+      footer: buttons.map(box),
+      faceMapping: !!root.querySelector('figure-face-mapping'),
+      cavityDrawing: !!root.querySelector('figure-cavity-drawing')
+    }
+  },
+  /** The close question, while it is asked: its words and its buttons. */
+  closeChoice() {
+    const host = deep('figure-section-close-choice')[0]
+    if (!host?.isConnected) return null
+    return { words: [...host.shadowRoot.querySelectorAll('p')].map(words), buttons: deep('md-text-button, md-filled-button', host.shadowRoot).map(words) }
+  },
+  /** The section panel as a person sees it: its words, its own number fields, and what it holds. */
+  sectionPanel() {
+    const host = deep('figure-section-panel')[0]
+    if (!host) return null
+    const root = host.shadowRoot
+    return {
+      edit: !!root.querySelector('button[act]'),
+      text: words(root),
+      inputs: [...root.querySelectorAll('input[type=number]')].map(i => ({ id: i.id, value: i.value })),
+      cavityToggle: !!root.querySelector('label[toggle] input'),
+      cavityDrawing: !!root.querySelector('figure-cavity-drawing'),
+      faceMapping: !!root.querySelector('figure-face-mapping')
+    }
+  },
+  /** The inside's drawing in `within`: its refusal, an open number field, its walls' handles and numbers. */
+  cavityDrawing(within = 'figure-section-panel') {
+    const host = window.findDeep('figure-cavity-drawing', { within })
+    if (!host) return null
+    const root = host.shadowRoot
+    const top = root.querySelector('svg')
+    return {
+      refusal: words(root.querySelector('small[refusal]')),
+      typing: root.querySelector('input') ? { label: root.querySelector('input').getAttribute('aria-label'), focused: root.activeElement === root.querySelector('input') } : null,
+      section: box(top.querySelector('rect, ellipse')),
+      walls: Object.fromEntries([...top.querySelectorAll('g[wall]')].map(g => [g.getAttribute('wall'), { handle: box(g.querySelector('rect')), number: box(g.querySelector('text')) }])),
+      ends: Object.fromEntries([...root.querySelectorAll('g[end]')].map(g => [g.getAttribute('end'), { text: words(g.querySelector('text')), typed: g.querySelector('text').hasAttribute('typed') }]))
+    }
+  },
+  /** The fastening drawing as a person sees it: the ways offered and the one on, the faces of the target. */
+  fastenDrawing() {
+    const host = deep('figure-fasten-drawing')[0]
+    if (!host) return null
+    const root = host.shadowRoot
+    return {
+      modes: [...root.querySelectorAll('button[mode]')].map(b => b.getAttribute('mode')),
+      on: root.querySelector('button[mode][on]')?.getAttribute('mode') ?? null
+    }
+  },
+  /** The labels before the fastening form's lists, and what each holds. */
+  fastenForm() {
+    return deep('select')
+      .filter(s => s.previousElementSibling)
+      .map(s => ({ label: words(s.previousElementSibling), value: s.value, options: [...s.options].map(o => ({ value: o.value, text: words(o) })) }))
+  },
+  /** The page point of one of a part's buttons in the parts list (`remove-part`, ...). */
+  partOp(id, op) {
+    const label = deep('span[label]').find(s => s.getAttribute('title') === id)
+    let row = label
+    while (row && !row.querySelector?.(`button[op="${op}"]`)) row = row.parentElement
+    const button = row?.querySelector(`button[op="${op}"]`)
+    if (!button) return null
+    button.scrollIntoView({ block: 'center' })
+    const r = button.getBoundingClientRect()
+    return { x: r.left + r.width / 2, y: r.top + r.height / 2 }
+  },
+  /** Where the keys go: the focused element and the focused ones inside it, through shadow roots, by tag. */
+  activePath() {
+    const path = []
+    for (let e = document.activeElement; e; e = e.shadowRoot?.activeElement) path.push(e.tagName)
+    return path
+  },
+  /** The fastening a part has, as the figure holds it. */
+  fastening(part) {
+    return (JSON.parse(editor().session.source()).joints ?? []).find(j => j.body1.part === part) ?? null
+  },
+  /** The face choice, wherever it stands: its rows and whether apply is open. */
+  faceMapping() {
+    const host = deep('figure-face-mapping')[0]
+    if (!host) return null
+    const root = host.shadowRoot
+    return { rows: root.querySelectorAll('select').length, apply: { disabled: root.querySelector('button[act]').disabled } }
+  }
+})
+
+window.sectionHarness = {
+  /** Mounts one of the figures above, or one of the modeller page's own (`arm`, `door`, `rollers`). */
+  mount(name) {
+    return FIGURES[name] ? window.harness.mount('box', serializeFigureAsset(FIGURES[name]())) : window.harness.mount(name)
+  }
+}