@things-factory/figure-ui 10.1.147 → 10.1.149

package/test/browser/parts-page.js

@@ -0,0 +1,120 @@
+/*
+ * The page `parts.check.mjs` drives: the editor of `editing-page.js`, with the figures the parts list needs -- three
+ * boxes in a row, a frame with a leaf fastened to it, a rounded box -- and what a person sees of the list: its rows,
+ * their buttons, the palette, the copies the canvas shows selected.
+ * Only reading: every change the check makes goes through the mouse and the keyboard.
+ */
+import './editing-page.js'
+import { addFigureBox, applyFigureAuthoring, createFigureAsset, serializeFigureAsset } from '@hatiolab/figure-model'
+
+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
+}
+
+Object.assign(window.figures, {
+  /* Three boxes side by side on the floor. */
+  three: () => {
+    let a = figure('Three')
+    for (const [id, x] of [['a', -600], ['b', 0], ['c', 600]]) a = addFigureBox(a, { id, size: { x: 400, y: 400, z: 400 }, position: { x, y: 200, z: 0 } })
+    return serializeFigureAsset(a)
+  },
+  /* A frame with a leaf fastened on its top: taking the frame away lets the leaf go. */
+  fastened: () => {
+    let a = figure('Fastened')
+    a = addFigureBox(a, { id: 'frame', size: { x: 1600, y: 100, z: 150 }, position: { x: 0, y: 50, z: 0 } })
+    a = addFigureBox(a, { id: 'leaf', size: { x: 1400, y: 1000, z: 40 }, position: { x: 0, y: 600, z: 0 } })
+    return serializeFigureAsset(applyFigureAuthoring(a, { kind: 'attach', part: 'leaf', face: 'bottom', to: { part: 'frame', face: 'top' } }))
+  },
+  /* A box with rounded corners: made from the box, still called what it is. */
+  rounded: () => {
+    let a = figure('Rounded')
+    a = addFigureBox(a, { id: 'tray', size: { x: 600, y: 200, z: 400 }, position: { x: 0, y: 100, z: 0 } })
+    return serializeFigureAsset(applyFigureAuthoring(a, { kind: 'set-section-corner', part: 'tray', corner: 40 }))
+  }
+})
+
+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
+}
+function centreOf(element) {
+  element.scrollIntoView({ block: 'center' })
+  const box = element.getBoundingClientRect()
+  return { x: box.left + box.width / 2, y: box.top + box.height / 2 }
+}
+const panel = () => deep('figure-parts')[0]
+const canvas = () => deep('figure-canvas')[0]
+const rowOf = id => [...panel().shadowRoot.querySelectorAll('li')].find(li => li.querySelector('span[label]')?.getAttribute('title') === id)
+
+window.parts = {
+  /** The list's rows as a person reads them: the name shown, its icon, whether it is selected or hidden. */
+  rows() {
+    return [...panel().shadowRoot.querySelectorAll('li')]
+      .filter(li => li.querySelector('span[label]'))
+      .map(li => ({
+        id: li.querySelector('span[label]').getAttribute('title'),
+        shown: li.querySelector('span[label]').childNodes[0]?.textContent.trim(),
+        icon: [...li.querySelectorAll(':scope > md-icon')].map(i => i.textContent.trim())[0],
+        selected: li.hasAttribute('selected'),
+        hidden: li.hasAttribute('off')
+      }))
+  },
+  /** The page point of a row's name (a click on it selects the part). */
+  row(id) {
+    const li = rowOf(id)
+    return li ? centreOf(li.querySelector('span[label]')) : null
+  },
+  /** The page point of a row's eye. */
+  eye(id) {
+    const b = rowOf(id)?.querySelector('button[eye]')
+    return b ? centreOf(b) : null
+  },
+  /** The page point of the selected row's operation (`move-part-up`, `duplicate-part`, ...). */
+  op(name) {
+    const b = panel().shadowRoot.querySelector(`li[selected] button[op="${name}"]`)
+    return b ? { ...centreOf(b), disabled: b.disabled } : null
+  },
+  /** The palette's shape buttons: what each says (keys: no translations are loaded) and whether it can be pressed. */
+  palette() {
+    return [...panel().shadowRoot.querySelectorAll('div[palette] button[shape]')].map(b => ({ label: b.querySelector('span').textContent.trim(), disabled: b.disabled, ...centreOf(b) }))
+  },
+  /** The detail level choice in the list's head. */
+  levelChoice() {
+    const select = panel().shadowRoot.querySelector('select')
+    return select ? centreOf(select) : null
+  },
+  /** How the selected row lays out: its name and its buttons, as boxes. */
+  selectedRowBoxes() {
+    const li = panel().shadowRoot.querySelector('li[selected]')
+    if (!li) return null
+    li.scrollIntoView({ block: 'center' })
+    const box = e => {
+      const r = e.getBoundingClientRect()
+      return { left: r.left, right: r.right, top: r.top, bottom: r.bottom }
+    }
+    return { row: box(li), name: box(li.querySelector('span[label]')), ops: box(li.querySelector('div[ops]')) }
+  },
+  /** The list made this wide (the start pane narrowed by the author). */
+  narrow(px) {
+    panel().style.width = px ? `${px}px` : ''
+  },
+  /** The names of the drawn parts the canvas holds selected now. */
+  canvasSelected() {
+    return (canvas().scene.root.root.selected ?? []).map(c => c.state.name)
+  },
+  /** The names of the parts the canvas draws now. */
+  drawn() {
+    return canvas().scene.root.components.map(c => c.state.name).filter(n => !n.startsWith('__'))
+  }
+}

package/test/browser/parts.check.mjs

@@ -0,0 +1,328 @@
+/*
+ * The parts list and what hangs on it, in a real browser: every button the list shows does what it says, as one step
+ * of the session; hiding is the workbench's, not the figure's; what a removal lets go of or is refused for is told
+ * through the app's notices; the narrow list keeps the selected row's buttons in sight; the palette offers the
+ * starting shapes and locks at the detail level's limit; a row is one part, selected whole, its pitch one value; the
+ * long explanations open from their 「?」.
+ *
+ * Run:  node --test test/browser/parts.check.mjs
+ */
+import { test, describe, before, after } from 'node:test'
+import assert from 'node:assert/strict'
+
+import { buildPage } from './build.mjs'
+import { openPage } from './serve.mjs'
+
+const sleep = ms => new Promise(done => setTimeout(done, ms))
+
+let opened
+before(async () => {
+  opened = await openPage(await buildPage('parts-page.js'))
+})
+after(async () => {
+  await opened?.close()
+})
+
+const page = () => opened.page
+const read = (fn, ...args) => page().evaluate(fn, ...args)
+const state = () => read(() => probe.state())
+const revision = async () => (await state()).revision
+const rows = () => read(() => parts.rows())
+const ids = async () => (await rows()).map(r => r.id)
+const UNDO = ['Control', 'KeyZ']
+
+/** Waits until `check` holds, reading again every 50 ms; fails with `what` after `ms`. */
+async function until(check, what, ms = 3000) {
+  for (const end = Date.now() + ms; Date.now() < end; await sleep(50)) if (await check()) return
+  assert.fail(`waited for ${what}`)
+}
+
+/** Mounts one of the harness's figures (`rollers`) or one of the page's, and waits for it to be drawn. */
+async function mount(kind, figure) {
+  await read((kind, figure) => harness.mount(kind, figure ? figures[figure]() : null), kind, figure)
+  await until(
+    () =>
+      read(() => {
+        /* Not drawn yet is not an error: until the canvas stands, reading it throws. */
+        try {
+          return probe.ids().some(id => !!probe.partOnPage(id))
+        } catch {
+          return false
+        }
+      }),
+    'the figure drawn',
+    10000
+  )
+  await sleep(800)
+  await read(() => editing.told())
+}
+
+async function click(point, what = 'a point') {
+  assert.ok(point, `nothing on the page to click: ${what}`)
+  await page().mouse.click(point.x, point.y)
+  await sleep(300)
+}
+const pick = async id => {
+  await click(await read(id => parts.row(id), id), `the row ${id}`)
+  assert.equal((await state()).selected, id, `${id} is picked from the list`)
+}
+async function press(...keys) {
+  await read(() => {
+    const deepest = root => (root.activeElement?.shadowRoot ? deepest(root.activeElement.shadowRoot) : root.activeElement)
+    deepest(document)?.blur?.()
+  })
+  for (const key of keys.slice(0, -1)) await page().keyboard.down(key)
+  await page().keyboard.press(keys.at(-1))
+  for (const key of keys.slice(0, -1).reverse()) await page().keyboard.up(key)
+  await sleep(400)
+}
+async function tab(name) {
+  await click(await read(name => probe.tab(name), `figure.label.tab-short-${name}`), `the ${name} tab`)
+}
+
+describe('the parts list: each button does what it says, one step of the session each', () => {
+  before(() => mount('box', 'three'))
+
+  test('a row picked is the part selected, on the list and on the canvas', async () => {
+    await pick('b')
+    assert.deepEqual((await rows()).filter(r => r.selected).map(r => r.id), ['b'])
+    assert.deepEqual(await read(() => parts.canvasSelected()), ['b'])
+  })
+
+  test('moved up: the order changes in one step, and one undo puts it back', async () => {
+    const before = await revision()
+    await click(await read(() => parts.op('move-part-up')), 'move up')
+    assert.deepEqual(await ids(), ['b', 'a', 'c'])
+    assert.equal(await revision(), before + 1)
+    await press(...UNDO)
+    assert.deepEqual(await ids(), ['a', 'b', 'c'])
+  })
+
+  test('moved down: the same, the other way', async () => {
+    await pick('b')
+    const before = await revision()
+    await click(await read(() => parts.op('move-part-down')), 'move down')
+    assert.deepEqual(await ids(), ['a', 'c', 'b'])
+    assert.equal(await revision(), before + 1)
+    await press(...UNDO)
+    assert.deepEqual(await ids(), ['a', 'b', 'c'])
+  })
+
+  test('duplicated: a new row in one step, and the copy is the part selected', async () => {
+    await pick('b')
+    const before = await revision()
+    await click(await read(() => parts.op('duplicate-part')), 'duplicate')
+    const now = await ids()
+    assert.equal(now.length, 4, now.join())
+    const copy = now.find(id => !['a', 'b', 'c'].includes(id))
+    assert.equal((await state()).selected, copy)
+    assert.equal(await revision(), before + 1)
+  })
+
+  test('removed: the row goes in one step', async () => {
+    const copy = (await state()).selected
+    const before = await revision()
+    await click(await read(() => parts.op('remove-part')), 'remove')
+    assert.deepEqual(await ids(), ['a', 'b', 'c'])
+    assert.ok(!(await read(() => probe.ids())).includes(copy))
+    assert.equal(await revision(), before + 1)
+  })
+
+  test('a shape from the palette is a new part in one step, selected', async () => {
+    const before = await revision()
+    const box = (await read(() => parts.palette())).find(b => b.label === 'figure.label.primitive-cube')
+    await click(box, 'the palette box')
+    const now = await ids()
+    assert.equal(now.length, 4, now.join())
+    assert.equal((await state()).selected, now.find(id => !['a', 'b', 'c'].includes(id)))
+    assert.equal(await revision(), before + 1)
+    await press(...UNDO)
+    assert.deepEqual(await ids(), ['a', 'b', 'c'])
+  })
+})
+
+describe('hidden on the workbench: off the canvas, not out of the figure, and let go when another figure opens', () => {
+  before(() => mount('box', 'three'))
+
+  test('a row\'s eye takes its part off the canvas and back, writing nothing', async () => {
+    const before = await revision()
+    await click(await read(() => parts.eye('a')), 'the eye of a')
+    await until(async () => !(await read(() => parts.drawn())).includes('a'), 'a taken off the canvas')
+    assert.equal((await rows()).find(r => r.id === 'a').hidden, true)
+    assert.ok((await read(() => probe.ids())).includes('a'), 'still in the figure')
+    assert.equal(await revision(), before, 'nothing written')
+    await click(await read(() => parts.eye('a')), 'the eye of a')
+    await until(async () => (await read(() => parts.drawn())).includes('a'), 'a drawn again')
+  })
+
+  test('the list head\'s eye hides every part, and shows them again', async () => {
+    await click(await read(() => editing.at('button[eye][all]', 'figure-parts')), 'hide all')
+    await until(async () => (await read(() => parts.drawn())).length === 0, 'nothing drawn')
+    await click(await read(() => editing.at('button[eye][all]', 'figure-parts')), 'show all')
+    await until(async () => (await read(() => parts.drawn())).length === 3, 'all three drawn')
+  })
+
+  test('another figure opened in the same editor starts with nothing hidden', async () => {
+    await click(await read(() => parts.eye('a')), 'the eye of a')
+    await until(async () => !(await read(() => parts.drawn())).includes('a'), 'a taken off the canvas')
+    await read(async () => {
+      const editor = document.querySelector('figure-editor')
+      await editor.session.open('another')
+      editor.revision = editor.revision + 1
+      await editor.updateComplete
+    })
+    await until(async () => (await read(() => parts.drawn())).includes('a'), 'a drawn in the figure opened next')
+    assert.equal((await rows()).find(r => r.id === 'a').hidden, false)
+  })
+})
+
+describe('a removal is told: what it let go of as a notice, a refusal as an error', () => {
+  test('the frame removed: the leaf fastened to it stays, and the notice names what was let go', async () => {
+    await mount('box', 'fastened')
+    await pick('frame')
+    await click(await read(() => parts.op('remove-part')), 'remove')
+    assert.deepEqual(await ids(), ['leaf'])
+    const told = await read(() => editing.told())
+    assert.equal(told.length, 1, JSON.stringify(told))
+    assert.equal(told[0].level, 'info')
+    assert.match(told[0].message, /^figure\.text\.removal-/)
+  })
+
+  test('a part the row is carried on is refused, said as an error the author closes, and nothing is removed', async () => {
+    await mount('rollers')
+    const before = await revision()
+    await pick('roller')
+    await click(await read(() => parts.op('remove-part')), 'remove')
+    assert.ok((await ids()).includes('roller'), 'still there')
+    assert.equal(await revision(), before)
+    const told = await read(() => editing.told())
+    assert.equal(told.length, 1, JSON.stringify(told))
+    assert.equal(told[0].level, 'error')
+    assert.match(told[0].message, /^figure\.text\./, 'in words, not the kernel\'s sentence')
+  })
+})
+
+describe('the list narrowed: the selected row keeps its name and its buttons in sight', () => {
+  before(() => mount('box', 'three'))
+  after(() => read(() => parts.narrow(0)))
+
+  test('wide, the buttons stand beside the name; under 200 px they go to a line of their own, inside the row', async () => {
+    await pick('b')
+    await read(() => parts.narrow(320))
+    await sleep(200)
+    let at = await read(() => parts.selectedRowBoxes())
+    assert.ok(at.ops.top < at.name.bottom, `beside the name: ${JSON.stringify(at)}`)
+    await read(() => parts.narrow(180))
+    await sleep(200)
+    at = await read(() => parts.selectedRowBoxes())
+    assert.ok(at.ops.top >= at.name.bottom - 1, `under the name: ${JSON.stringify(at)}`)
+    assert.ok(at.ops.right <= at.row.right + 1 && at.name.right <= at.row.right + 1, `inside the row: ${JSON.stringify(at)}`)
+  })
+})
+
+describe('the palette: the starting shapes, locked at the detail level\'s limit', () => {
+  test('nine starting shapes, in order; a rounded box or a drum is made from the box', async () => {
+    await mount('box', 'three')
+    assert.deepEqual(
+      (await read(() => parts.palette())).map(b => b.label),
+      ['cube', 'cylinder', 'sphere', 'frustum', 'polygon', 'pyramid', 'plate', 'wall', 'portal'].map(k => `figure.label.primitive-${k}`)
+    )
+  })
+
+  test('at the level\'s part limit every shape is locked; with no level, none is', async () => {
+    await mount('box', 'three')
+    const choice = await read(() => parts.levelChoice())
+    await read(() => {
+      const select = [...document.querySelector('figure-editor').renderRoot.querySelector('figure-parts').shadowRoot.querySelectorAll('select')][0]
+      select.value = 'S'
+      select.dispatchEvent(new Event('change', { bubbles: true }))
+    })
+    assert.ok(choice, 'the level is chosen in the list head')
+    await until(async () => (await read(() => parts.palette())).every(b => b.disabled), 'the palette locked at S (three parts)')
+    await press(...UNDO)
+    await until(async () => (await read(() => parts.palette())).every(b => !b.disabled), 'the palette open again')
+  })
+
+  test('a box with rounded corners is listed with its own icon', async () => {
+    await mount('box', 'rounded')
+    assert.equal((await rows()).find(r => r.id === 'tray').icon, 'crop_square')
+  })
+})
+
+describe('a row is one part: selected whole, its pitch one value set by the row (2026-09-24)', () => {
+  before(() => mount('rollers'))
+
+  test('the roller picked: every copy of it is selected on the canvas, and nothing else', async () => {
+    await pick('roller')
+    const copies = (await read(() => probe.ids())).filter(id => /^\["roller\.repeat",\d+,"roller\./.test(id))
+    assert.ok(copies.length > 1, copies.join())
+    assert.deepEqual((await read(() => parts.canvasSelected())).sort(), copies.sort())
+  })
+
+  test('the pitch is offered once, and typed it is one step that sets the row again', async () => {
+    await pick('roller')
+    await tab('properties')
+    const fields = await read(() => editing.propertyInputs())
+    assert.equal(fields.filter(label => /pitch|repeat/i.test(label ?? '')).length, 1, fields.join())
+    const label = fields.find(label => /pitch|repeat/i.test(label ?? ''))
+    const rollers = async () => (await read(() => probe.ids())).filter(id => /^\["roller\.repeat",\d+,"roller\./.test(id)).length
+    const copiesBefore = await rollers()
+    const before = await revision()
+    const at = await read(label => probe.labelled(label), label)
+    await page().mouse.click(at.x, at.y, { clickCount: 3 })
+    await page().keyboard.type('400')
+    await page().keyboard.press('Enter')
+    await sleep(500)
+    assert.equal(await revision(), before + 1, 'one step')
+    const copiesAfter = await rollers()
+    assert.ok(copiesAfter < copiesBefore, `a wider pitch makes fewer copies on the same length: ${copiesBefore} -> ${copiesAfter}`)
+    assert.equal(Number(await read(label => editing.fieldValue(label), label)), 400, 'the field shows the pitch the row holds')
+  })
+})
+
+describe('the long explanations open from their 「?」 beside the title, closed until asked', () => {
+  test('motion, place, fastening and clips: each shut, opened by its 「?」, shut again', async () => {
+    await mount('box', 'doors')
+    await pick('left')
+    const seen = new Set()
+    for (const name of ['properties', 'capability', 'motion']) {
+      await tab(name)
+      const helps = await read(() =>
+        [...document.querySelector('figure-editor').renderRoot.querySelectorAll('figure-links, figure-clips')].flatMap((element, host) =>
+          [...element.shadowRoot.querySelectorAll('button[help]')].map((b, i) => ({ host, i, seen: b.getClientRects().length > 0 })).filter(b => b.seen)
+        )
+      )
+      for (const { host, i } of helps) {
+        const hint = () =>
+          read(
+            (host, i) => {
+              const b = document.querySelector('figure-editor').renderRoot.querySelectorAll('figure-links, figure-clips')[host].shadowRoot.querySelectorAll('button[help]')[i]
+              return [...b.closest('section').querySelectorAll(':scope > p[hint]')].map(p => p.textContent.trim())
+            },
+            host,
+            i
+          )
+        const button = () =>
+          read(
+            (host, i) => {
+              const b = document.querySelector('figure-editor').renderRoot.querySelectorAll('figure-links, figure-clips')[host].shadowRoot.querySelectorAll('button[help]')[i]
+              b.scrollIntoView({ block: 'center' })
+              const r = b.getBoundingClientRect()
+              return { x: r.left + r.width / 2, y: r.top + r.height / 2 }
+            },
+            host,
+            i
+          )
+        const shut = await hint()
+        await click(await button(), 'the ?')
+        const said = (await hint()).filter(text => !shut.includes(text))
+        assert.equal(said.length, 1, `${host} ${i}: one explanation opened (${said.join(', ')})`)
+        assert.ok(!shut.includes(said[0]), `${host} ${i}: shut until asked`)
+        seen.add(said[0])
+        await click(await button(), 'the ?')
+        assert.deepEqual(await hint(), shut, `${host} ${i}: shut again`)
+      }
+    }
+    for (const key of ['figure.text.motion-explained', 'figure.text.place-explained', 'figure.text.fastening-explained', 'figure.text.clips-explained']) assert.ok(seen.has(key), `${key} among ${[...seen].join(', ')}`)
+  })
+})

package/test/browser/places-mesh-page.js

@@ -0,0 +1,36 @@
+/*
+ * The page `places-mesh.check.mjs` drives: the modeller's editor with popups drawn as the layout draws them
+ * (`section-page.js`) and the readings of `links-page.js`, a server for GLB uploads answered in memory, and the client
+ * bootstrap as the app runs it. Only reading here, apart from the answer the server is told to give.
+ */
+import './section-page.js'
+import './links-page.js'
+import { client } from '@operato/graphql'
+import { figureMeshUrlOf } from '@hatiolab/things-scene'
+import bootstrap from 'figure-ui-client/bootstrap.js'
+
+/* The uploads the editor sent, and what the server answers the next one: the read GLB, or a refusal in its words. */
+const uploads = []
+let next = null
+client.mutate = async ({ mutation, variables }) => {
+  const field = mutation.definitions.find(d => d.kind === 'OperationDefinition').selectionSet.selections[0].name.value
+  if (field !== 'uploadFigureMesh') return { data: { [field]: null } }
+  uploads.push({ name: variables.file.name, size: variables.file.size })
+  return next.refused ? { errors: [{ message: next.refused }] } : { data: { uploadFigureMesh: next.upload } }
+}
+
+window.meshServer = {
+  answer(answer) {
+    next = answer
+  },
+  uploads() {
+    return uploads
+  }
+}
+
+/** Where things-scene fetches a mesh file once the app has bootstrapped, at an address of the page's. */
+window.meshUrlAt = path => {
+  history.replaceState(null, '', path)
+  bootstrap()
+  return figureMeshUrlOf('c'.repeat(64))
+}