@things-factory/figure-ui 10.1.270 → 10.1.272

package/tutorial/humanoid/lib.mjs

@@ -0,0 +1,197 @@
+/*
+ * The tutorial recorder's hands: it finds what a person would look for on the screen -- a button by its words or its
+ * title, a field by the words beside it -- and moves a drawn pointer there before it clicks or types, so a recording
+ * shows where the hand went. Nothing here reaches into the editor's state: every step is a click, a key or a drag.
+ */
+
+/** Everything on the page, shadow roots included, as the page's own function (run in the page). */
+export const PAGE_HELPERS = `
+window.__tut = {
+  all() {
+    const out = []
+    const walk = root => root.querySelectorAll('*').forEach(e => { out.push(e); if (e.shadowRoot) walk(e.shadowRoot) })
+    walk(document)
+    return out
+  },
+  visible(e) {
+    const b = e.getBoundingClientRect()
+    if (b.width <= 0 || b.height <= 0) return false
+    let n = e
+    while (n) {
+      if (n instanceof Element && getComputedStyle(n).visibility === 'hidden') return false
+      n = n.parentElement || (n.getRootNode && n.getRootNode().host)
+    }
+    return b.bottom > 0 && b.right > 0 && b.top < innerHeight && b.left < innerWidth
+  },
+  words(e) { return (e.textContent || '').replace(/\\s+/g, ' ').trim() },
+  /* Elements matching a CSS selector, visible, in page order. */
+  query(selector) { return this.all().filter(e => e.matches && e.matches(selector) && this.visible(e)) },
+  /* The visible element of the given tags whose words are exactly, or end with, the given words (icons come first). */
+  byWords(tags, words, { within } = {}) {
+    const box = within ? within.getBoundingClientRect() : null
+    return this.all().filter(e => tags.includes(e.tagName.toLowerCase()) && this.visible(e)).filter(e => {
+      const w = this.words(e)
+      if (!(w === words || w.endsWith(words))) return false
+      if (!box) return true
+      const b = e.getBoundingClientRect()
+      return b.top >= box.top - 1 && b.bottom <= box.bottom + 1
+    })
+  },
+  /* The field that stands after the given words: the first input or select after a label-like element with them. */
+  fieldAfter(words, nth = 0, { after } = {}) {
+    const all = this.all()
+    const labels = all.filter(e => ['span', 'label', 'strong', 'div'].includes(e.tagName.toLowerCase()) && e.children.length <= 1 && this.words(e) === words && this.visible(e))
+      .filter(e => !after || e.getBoundingClientRect().top > after)
+    for (const label of labels) {
+      const i = all.indexOf(label)
+      const fields = all.slice(i + 1).filter(e => ['input', 'select'].includes(e.tagName.toLowerCase()) && this.visible(e))
+      if (fields[nth]) return fields[nth]
+    }
+    return null
+  },
+  /* The first element matching a selector that has a size, scrolled to the middle of its pane when it stands out of view. */
+  bring(selector) {
+    const e = this.all().find(e => e.matches && e.matches(selector) && e.getBoundingClientRect().width > 0)
+    if (e && !this.visible(e)) e.scrollIntoView({ block: 'center' })
+    return e || null
+  },
+  /* A clip's section, brought into view by its name: its time and 「현재 자세 기록」 stand under it. */
+  clipTop(clip) {
+    const name = this.all().find(e => e.tagName === 'INPUT' && e.type !== 'number' && e.value === clip)
+    if (!name) return -1
+    name.scrollIntoView({ block: 'center' })
+    return name.getBoundingClientRect().top
+  },
+  /* Whether an element stands in the fastening dialog (its drawing, its chips, its buttons). */
+  inDialog(e) {
+    for (let n = e; n; n = n.parentElement || (n.getRootNode && n.getRootNode().host))
+      if (n.tagName === 'FIGURE-FASTEN-DIALOG') return true
+    return false
+  },
+  centre(e) {
+    if (!e) return null
+    e.scrollIntoView({ block: 'nearest', inline: 'nearest' })
+    const b = e.getBoundingClientRect()
+    return { x: b.left + b.width / 2, y: b.top + b.height / 2, w: b.width, h: b.height }
+  }
+}
+`
+
+/** The drawn pointer, the ring of a click and the caption under the screen: what a recording needs to be followed. */
+export const OVERLAY = `
+(() => {
+  if (document.getElementById('tut-overlay')) return
+  const style = document.createElement('style')
+  style.textContent = \`
+    #tut-pointer { position: fixed; z-index: 2147483647; width: 22px; height: 22px; margin: -2px 0 0 -2px; pointer-events: none;
+      background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 2l7 19 2.6-7.4L20 11z' fill='%23111' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E");
+      transition: left .35s ease, top .35s ease; left: 50%; top: 50% }
+    .tut-ring { position: fixed; z-index: 2147483646; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
+      border: 3px solid #0d8f86; pointer-events: none; animation: tut-ring .6s ease-out forwards }
+    @keyframes tut-ring { from { transform: scale(.4); opacity: 1 } to { transform: scale(1.4); opacity: 0 } }
+    #tut-caption { position: fixed; z-index: 2147483645; left: 50%; bottom: 18px; transform: translateX(-50%); max-width: 70%;
+      padding: 10px 18px; border-radius: 10px; background: rgba(16, 32, 43, .88); color: #fff; font: 600 17px/1.45 -apple-system, 'Apple SD Gothic Neo', sans-serif;
+      text-align: center; pointer-events: none; box-shadow: 0 6px 20px rgba(0,0,0,.25) }
+    #tut-caption:empty { display: none }
+    #tut-caption small { display: block; font-weight: 500; font-size: 13px; opacity: .8 }
+    #tut-chapter { position: fixed; z-index: 2147483645; left: 50%; top: 40%; transform: translate(-50%, -50%); padding: 22px 34px;
+      border-radius: 14px; background: rgba(16, 32, 43, .92); color: #fff; font: 700 28px/1.4 -apple-system, 'Apple SD Gothic Neo', sans-serif;
+      text-align: center; pointer-events: none }
+    #tut-chapter small { display: block; font-size: 16px; font-weight: 500; opacity: .85; margin-top: 6px }
+    #tut-chapter:empty { display: none }
+  \`
+  document.head.append(style)
+  const pointer = Object.assign(document.createElement('div'), { id: 'tut-pointer' })
+  const caption = Object.assign(document.createElement('div'), { id: 'tut-caption' })
+  const chapter = Object.assign(document.createElement('div'), { id: 'tut-chapter' })
+  const overlay = Object.assign(document.createElement('div'), { id: 'tut-overlay' })
+  document.body.append(overlay, pointer, caption, chapter)
+})()
+`
+
+const sleep = ms => new Promise(done => setTimeout(done, ms))
+
+/**
+ * The hands, bound to a page: each step finds its target the way a person would, moves the drawn pointer to it and acts
+ * with the real mouse and keyboard. `pace` stretches every pause, so the same steps record slower for a lesson.
+ */
+export function handsFor(page, { pace = 1 } = {}) {
+  const wait = ms => sleep(ms * pace)
+  const say = async (text, note = '') => {
+    await page.evaluate((t, n) => {
+      const c = document.getElementById('tut-caption')
+      c.textContent = t
+      if (n) c.append(Object.assign(document.createElement('small'), { textContent: n }))
+    }, text, note)
+  }
+  const title = async (text, note = '') => {
+    await page.evaluate((t, n) => {
+      const c = document.getElementById('tut-chapter')
+      c.textContent = t
+      if (n) c.append(Object.assign(document.createElement('small'), { textContent: n }))
+    }, text, note)
+    await wait(1800)
+    await page.evaluate(() => (document.getElementById('tut-chapter').textContent = ''))
+  }
+  const point = async (x, y) => {
+    await page.evaluate((px, py) => Object.assign(document.getElementById('tut-pointer').style, { left: px + 'px', top: py + 'px' }), x, y)
+    await page.mouse.move(x, y, { steps: 8 })
+    await wait(380)
+  }
+  const ring = (x, y) => page.evaluate((px, py) => {
+    const r = Object.assign(document.createElement('div'), { className: 'tut-ring' })
+    Object.assign(r.style, { left: px + 'px', top: py + 'px' })
+    document.body.append(r)
+    setTimeout(() => r.remove(), 700)
+  }, x, y)
+  /** The centre of what `find` (run in the page, given __tut) returns, or an error naming what was looked for. */
+  /* Found and standing still: a dialog that grows as it is filled moves its buttons, and a click aimed before it settled missed. */
+  const locate = async (what, find, ...args) => {
+    let last = null
+    for (let tries = 0; tries < 30; tries++) {
+      const at = await page.evaluate(new Function('args', `const t = window.__tut; return t.centre((${find})(t, ...args))`), args)
+      if (at && last && Math.abs(at.x - last.x) < 1 && Math.abs(at.y - last.y) < 1) return at
+      last = at
+      await sleep(120)
+    }
+    if (last) return last
+    throw Error(`not found on the screen: ${what}`)
+  }
+  const clickAt = async ({ x, y }, { clicks = 1 } = {}) => {
+    await point(x, y)
+    await ring(x, y)
+    await page.mouse.click(x, y, { clickCount: clicks })
+    await wait(450)
+  }
+  const click = async (what, find, ...args) => clickAt(await locate(what, find, ...args))
+  const typeInto = async (what, find, text, ...args) => typeKeyed(what, find, text, 'Enter', ...args)
+  /* In a dialog Enter applies the dialog: a field there is left by Tab. */
+  const typeInDialog = async (what, find, text, ...args) => typeKeyed(what, find, text, 'Tab', ...args)
+  const typeKeyed = async (what, find, text, key, ...args) => {
+    const at = await locate(what, find, ...args)
+    await clickAt(at, { clicks: 3 })
+    await page.keyboard.down('Meta')
+    await page.keyboard.press('KeyA')
+    await page.keyboard.up('Meta')
+    await page.keyboard.type(String(text), { delay: 60 * pace })
+    await page.keyboard.press(key)
+    await wait(350)
+  }
+  const drag = async (from, to) => {
+    await point(from.x, from.y)
+    await page.mouse.down()
+    await page.mouse.move(to.x, to.y, { steps: 18 })
+    await page.evaluate((px, py) => Object.assign(document.getElementById('tut-pointer').style, { left: px + 'px', top: py + 'px' }), to.x, to.y)
+    await page.mouse.up()
+    await wait(500)
+  }
+
+  /* What a person names on the screen. */
+  const button = words => click(`button 「${words}」`, (t, w) => t.byWords(['button'], w)[0], words)
+  const buttonTitled = title => click(`button titled 「${title}」`, (t, w) => t.query(`button[title="${w}"]`)[0], title)
+  const tab = name => click(`tab 「${name}」`, (t, w) => t.query(`button[tab][aria-label="${w}"]`)[0], name)
+  const field = (label, text, nth = 0) => typeInto(`field after 「${label}」`, (t, l, n) => t.fieldAfter(l, n), text, label, nth)
+  const chip = name => click(`chip 「${name}」`, (t, w) => t.byWords(['button', 'span', 'label'], w).find(e => e.closest('[open], dialog, ox-popup, figure-fasten-dialog') || true), name)
+
+  return { page, wait, say, title, point, click, clickAt, typeInto, typeInDialog, locate, drag, button, buttonTitled, tab, field, chip }
+}

package/tutorial/humanoid/record.mjs

@@ -0,0 +1,65 @@
+/*
+ * 휴머노이드 튜토리얼 녹화기: 모델러를 열고 장(章)마다 사람이 하는 그대로 따라 하며, 장마다 한 편의 영상(WebM)을 남긴다.
+ *
+ *   node tutorial/humanoid/record.mjs --url http://localhost:5179/?fresh --out ./tutorial-videos [--only 01-pelvis] [--no-video] [--pace 1.2]
+ *
+ * --url    모델러 페이지. 빈 피규어로 열리는 곳이어야 한다(로컬 개발 페이지는 ?fresh).
+ * --out    영상과 장마다 마지막 화면(PNG)을 둘 폴더.
+ * --only   한 장만(앞 장들은 영상 없이 먼저 따라 한다).
+ * --pace   쉬는 시간 배율 -- 강의용은 1.2~1.5.
+ *
+ * ffmpeg 이 PATH 에 있어야 영상이 남는다(puppeteer screencast).
+ */
+import { mkdirSync } from 'node:fs'
+import { join, resolve } from 'node:path'
+import puppeteer from 'puppeteer'
+import { handsFor, OVERLAY, PAGE_HELPERS } from './lib.mjs'
+import { chapters } from './chapters.mjs'
+
+const arg = (name, fallback) => {
+  const i = process.argv.indexOf(`--${name}`)
+  return i < 0 ? fallback : (process.argv[i + 1] ?? true)
+}
+const url = arg('url', 'http://localhost:5179/?fresh')
+const out = resolve(arg('out', './tutorial-videos'))
+const only = arg('only', '')
+const video = !process.argv.includes('--no-video')
+const pace = Number(arg('pace', 1))
+const headed = process.argv.includes('--headed')
+mkdirSync(out, { recursive: true })
+
+const browser = await puppeteer.launch({ headless: !headed, args: ['--no-sandbox', '--use-angle=swiftshader', '--enable-unsafe-swiftshader', '--window-size=1600,900'] })
+const page = await browser.newPage()
+await page.setViewport({ width: 1600, height: 900 })
+const errors = []
+page.on('pageerror', e => errors.push(String(e)))
+await page.goto(url, { waitUntil: 'networkidle0' })
+await new Promise(done => setTimeout(done, 2500))
+await page.evaluate(PAGE_HELPERS)
+await page.evaluate(OVERLAY)
+const h = handsFor(page, { pace })
+
+const index = only ? chapters.findIndex(c => c.id === only) : -1
+for (const [i, chapter] of chapters.entries()) {
+  const recording = video && (!only || i === index)
+  if (only && i > index) break
+  const started = Date.now()
+  const recorder = recording ? await page.screencast({ path: join(out, `${chapter.id}.webm`) }) : null
+  if (recording) await h.title(chapter.title, chapter.note)
+  try {
+    await chapter.run(recording ? h : handsFor(page, { pace: 0.2 }))
+  } catch (e) {
+    await page.screenshot({ path: join(out, `${chapter.id}-failed.png`) })
+    await recorder?.stop()
+    console.error(`✗ ${chapter.id}: ${e.message}`)
+    await browser.close()
+    process.exit(1)
+  }
+  await page.evaluate(() => document.querySelector('figure-editor')?.renderRoot?.querySelector('button[data-action="fit"]'))
+  await new Promise(done => setTimeout(done, 600))
+  await page.screenshot({ path: join(out, `${chapter.id}.png`) })
+  await recorder?.stop()
+  console.log(`✓ ${chapter.id} ${((Date.now() - started) / 1000).toFixed(1)}s${recording ? ' (영상)' : ''}`)
+}
+if (errors.length) console.log('page errors:', errors.slice(0, 5).join('\n'))
+await browser.close()