@weasel-js/core 1.8.0 → 1.9.0

package/dist/features/poseRun/usePoseRun.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePoseRun.js","names":["EMPTY","usePoseRun","optsRef","useLatest","opts","state","useRef","running","frame","mounted","loop","useVisibleRaf","syncState","useCallback","pinnedNow","pinned","id","overrides","entry","commit","scene","moved","previews","pose","dropPreviewOverrides","halt","tick","poses","syncPreviewOverrides","done","useEffect","useMemo"],"sources":["../../../src/features/poseRun/usePoseRun.ts"],"sourcesContent":["/**\n * A pose run: poses published per frame, committed once.\n *\n * The frames go to `scene.overrides` — the ephemeral table a drag publishes to,\n * which `effectivePose`, the derived-geometry lookup and the pick source\n * already read. So an edge follows a node the run is moving with nothing added,\n * and the whole run lands as one undo entry when it settles.\n *\n * It knows nothing about layout. Each frame it asks `step` for poses and\n * whether it is finished; a relaxation, an eased transition to a target, and a\n * scrubbed timeline are all the same shape to it.\n *\n * **A node another gesture owns is pinned, not driven.** The run publishes\n * entries it holds by reference, so an override it did not put there belongs to\n * somebody else — a drag, a resize. It never writes that id, never commits it,\n * and hands it to `step` as pinned so the producer can hold its neighbors\n * against it.\n */\nimport { useCallback, useEffect, useMemo, useRef } from 'react';\nimport { useLatest } from '@weasel-js/react';\nimport { useVisibleRaf } from '../../scheduling/useVisibleRaf';\nimport {\n  dropPreviewOverrides,\n  syncPreviewOverrides,\n} from '../../interactions/actions/previewOverrides';\nimport type { NodeId, Scene } from '../../core/scene/types';\n\n/** What a producer is told before it is asked for a frame. */\nexport interface PoseRunCtx<TPose> {\n  /** Nodes another gesture is moving, and the pose each is drawn at. The run\n   *  will not write these, so a producer holds them fixed. */\n  pinned: ReadonlyMap<NodeId, TPose>;\n  /** Frames this run has produced, starting at 0. */\n  frame: number;\n}\n\n/** One frame of a run. */\nexport interface PoseRunStep<TPose> {\n  /** Where the nodes it drives are this frame — the whole picture, not a\n   *  delta. An id the frame omits stops being published, which is how a node\n   *  leaves the run's hands: a producer that drops a grabbed box and its rows\n   *  from one frame has released them by the next. */\n  poses: Iterable<readonly [NodeId, TPose]>;\n  /** Whether the run is finished. The frame is published either way, and a\n   *  finished run commits. */\n  done: boolean;\n}\n\n/** Options for `usePoseRun`. Read fresh each frame, so they may change mid-run. */\nexport interface UsePoseRunOptions<TPose> {\n  scene: Scene<unknown, string, TPose>;\n  /** Called once per frame while running, for that frame's poses. */\n  step: (ctx: PoseRunCtx<TPose>) => PoseRunStep<TPose>;\n  /** The undo entry's name. Default `'Layout'`. */\n  label?: string;\n  /** How many nodes the commit wrote. Fires after the ops land. */\n  onCommit?: (moved: number) => void;\n  /** Clock injection, for tests. Defaults to `requestAnimationFrame`. */\n  requestFrame?: (cb: (t: number) => void) => number;\n  cancelFrame?: (handle: number) => void;\n}\n\n/** Controls for a pose run. Stable for the life of the component. */\nexport interface PoseRun {\n  /** Begin a new run, counting frames from 0. Idempotent while running. */\n  start(): void;\n  /** Finish now: commit what is published, then drop the overrides. */\n  stop(): void;\n  /** Abandon: drop the overrides and write nothing, like a canceled drag. */\n  cancel(): void;\n  isRunning(): boolean;\n}\n\nconst EMPTY: ReadonlyMap<NodeId, unknown> = new Map<NodeId, unknown>();\n\n/**\n * Drive node poses frame by frame through `scene.overrides`, committing them as\n * one undo entry when `step` reports done or `stop` is called. Idle until\n * `start`; unmounting abandons the run without writing.\n */\nexport function usePoseRun<TPose>(opts: UsePoseRunOptions<TPose>): PoseRun {\n  const optsRef = useLatest(opts);\n\n  /** This frame's poses, and the entries published for them. Held by\n   *  reference so a frame mutates in place rather than re-notifying per node. */\n  const state = useRef({\n    previews: new Map<NodeId, unknown>(),\n    overrideEntries: new Map<NodeId, { pose: unknown }>(),\n  });\n  const running = useRef(false);\n  const frame = useRef(0);\n  const mounted = useRef(true);\n\n  // The gate defaults an absent clock to `requestAnimationFrame` itself, so\n  // these pass straight through rather than being defaulted twice.\n  const loop = useVisibleRaf(() => { tick(); }, {\n    requestFrame: opts.requestFrame,\n    cancelFrame: opts.cancelFrame,\n  });\n\n  /** The scene as the previous frame left it, for `syncPreviewOverrides`. */\n  const syncState = useCallback((): {\n    scene: Scene<unknown, string, unknown>;\n    previews: Map<NodeId, unknown>;\n    overrideEntries: Map<NodeId, { pose: unknown }>;\n  } => ({\n    scene: optsRef.current.scene as Scene<unknown, string, unknown>,\n    previews: state.current.previews,\n    overrideEntries: state.current.overrideEntries,\n  }), [optsRef]);\n\n  /** Overrides somebody else published, and the pose each carries. */\n  const pinnedNow = (): ReadonlyMap<NodeId, TPose> => {\n    const { overrides } = optsRef.current.scene;\n    let pinned: Map<NodeId, TPose> | undefined;\n    for (const id of overrides.ids()) {\n      const entry = overrides.get(id);\n      if (entry === undefined || entry === state.current.overrideEntries.get(id)) continue;\n      if (entry.pose === undefined) continue;\n      (pinned ??= new Map()).set(id, entry.pose);\n    }\n    return pinned ?? (EMPTY as ReadonlyMap<NodeId, TPose>);\n  };\n\n  const commit = (): void => {\n    const { previews } = state.current;\n    const scene = optsRef.current.scene;\n    let moved = 0;\n    if (previews.size > 0) {\n      scene.batch(optsRef.current.label ?? 'Layout', () => {\n        for (const [id, pose] of previews) {\n          if (scene.get(id) === undefined) continue;\n          scene.setPose(id, pose as TPose);\n          moved++;\n        }\n      });\n    }\n    // After the ops land: dropping first leaves a window in which the scene\n    // answers with the pre-run pose.\n    dropPreviewOverrides(syncState());\n    previews.clear();\n    optsRef.current.onCommit?.(moved);\n  };\n\n  const halt = (): void => {\n    running.current = false;\n    loop.cancel();\n  };\n\n  const tick = (): void => {\n    if (!mounted.current || !running.current) return;\n    const pinned = pinnedNow();\n    const { poses, done } = optsRef.current.step({ pinned, frame: frame.current });\n    frame.current++;\n    // Each frame replaces the last: an id this one omits — a node just\n    // grabbed, or a row under one — stops being published, rather than being\n    // held at a pose from before the press while the gesture carries it\n    // somewhere else.\n    state.current.previews.clear();\n    for (const [id, pose] of poses) {\n      if (pinned.has(id)) continue;\n      state.current.previews.set(id, pose);\n    }\n    syncPreviewOverrides(syncState());\n    if (done) {\n      halt();\n      commit();\n      return;\n    }\n    loop.request();\n  };\n\n  useEffect(() => {\n    mounted.current = true;\n    const { previews } = state.current;\n    return () => {\n      mounted.current = false;\n      loop.cancel();\n      // Teardown is not a decision: an unmounted run abandons its frames\n      // rather than writing them.\n      dropPreviewOverrides(syncState());\n      previews.clear();\n    };\n  }, [loop, syncState]);\n\n  return useMemo<PoseRun>(() => ({\n    start() {\n      if (running.current || !mounted.current) return;\n      running.current = true;\n      frame.current = 0;\n      loop.request();\n    },\n    stop() {\n      if (!running.current) return;\n      halt();\n      commit();\n    },\n    cancel() {\n      halt();\n      dropPreviewOverrides(syncState());\n      state.current.previews.clear();\n    },\n    isRunning: () => running.current,\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }), [loop]);\n}\n"],"mappings":";;;;;AAyEA,IAAMA,oBAAsC,IAAI,IAAqB;AAOrE,SAAgBC,EAAkB,GAAyC;CACzE,IAAMC,IAAUC,EAAUC,CAAI,GAIxBC,IAAQC,EAAO;EACnB,0BAAU,IAAI,IAAqB;EACnC,iCAAiB,IAAI,IAA+B;CACtD,CAAC,GACKC,IAAUD,EAAO,EAAK,GACtBE,IAAQF,EAAO,CAAC,GAChBG,IAAUH,EAAO,EAAI,GAIrBI,IAAOC,QAAoB;EAAE,EAAK;CAAG,GAAG;EAC5C,cAAcP,EAAK;EACnB,aAAaA,EAAK;CACpB,CAAC,GAGKQ,IAAYC,SAIZ;EACJ,OAAOX,EAAQ,QAAQ;EACvB,UAAUG,EAAM,QAAQ;EACxB,iBAAiBA,EAAM,QAAQ;CACjC,IAAI,CAACH,CAAO,CAAC,GAGPY,UAA8C;EAClD,IAAM,EAAE,iBAAcZ,EAAQ,QAAQ,OAClCa;EACJ,KAAK,IAAMC,KAAMC,EAAU,IAAI,GAAG;GAChC,IAAMC,IAAQD,EAAU,IAAID,CAAE;GAC9B,AAAIE,MAAU,KAAA,KAAaA,MAAUb,EAAM,QAAQ,gBAAgB,IAAIW,CAAE,KACrEE,EAAM,SAAS,KAAA,MAClB,sBAAW,IAAI,IAAI,EAAA,CAAG,IAAIF,GAAIE,EAAM,IAAI;EAC3C;EACA,OAAOH,KAAWf;CACpB,GAEMmB,UAAqB;EACzB,IAAM,EAAE,gBAAad,EAAM,SACrBe,IAAQlB,EAAQ,QAAQ,OAC1BmB,IAAQ;EAcZ,AAbIC,EAAS,OAAO,KAClBF,EAAM,MAAMlB,EAAQ,QAAQ,SAAS,gBAAgB;GACnD,KAAK,IAAM,CAACc,GAAIO,MAASD,GACvB,AAAIF,EAAM,IAAIJ,CAAE,MAAM,KAAA,MACtBI,EAAM,QAAQJ,GAAIO,CAAa,GAC/B;EAEJ,CAAC,GAIHC,EAAqBZ,EAAU,CAAC,GAChCU,EAAS,MAAM,GACfpB,EAAQ,QAAQ,WAAWmB,CAAK;CAClC,GAEMI,UAAmB;EAEvB,AADA,EAAQ,UAAU,IAClBf,EAAK,OAAO;CACd,GAEMgB,UAAmB;EACvB,IAAI,CAACjB,EAAQ,WAAW,CAACF,EAAQ,SAAS;EAC1C,IAAMQ,IAASD,EAAU,GACnB,EAAE,UAAO,YAASZ,EAAQ,QAAQ,KAAK;GAAE;GAAQ,OAAOM,EAAM;EAAQ,CAAC;EAM7E,AALA,EAAM,WAKNH,EAAM,QAAQ,SAAS,MAAM;EAC7B,KAAK,IAAM,CAACW,GAAIO,MAASI,GACvB,AAAIZ,EAAO,IAAIC,CAAE,KACjBX,EAAM,QAAQ,SAAS,IAAIW,GAAIO,CAAI;EAGrC,IADAK,EAAqBhB,EAAU,CAAC,GAC5BiB,GAAM;GAER,AADAJ,EAAK,GACLN,EAAO;GACP;EACF;EACA,EAAK,QAAQ;CACf;CAeA,OAbAW,QAAgB;EACd,EAAQ,UAAU;EAClB,IAAM,EAAE,gBAAazB,EAAM;EAC3B,aAAa;GAMX,AALA,EAAQ,UAAU,IAClBK,EAAK,OAAO,GAGZc,EAAqBZ,EAAU,CAAC,GAChCU,EAAS,MAAM;EACjB;CACF,GAAG,CAACZ,GAAME,CAAS,CAAC,GAEbmB,SAAwB;EAC7B,QAAQ;GACN,AAAI,GAAQ,WAAYtB,EAAQ,YAChC,EAAQ,UAAU,IAClB,EAAM,UAAU,GAChBC,EAAK,QAAQ;EACf;EACA,OAAO;GACL,AAAKH,EAAQ,YACbkB,EAAK,GACLN,EAAO;EACT;EACA,SAAS;GAGP,AAFAM,EAAK,GACLD,EAAqBZ,EAAU,CAAC,GAChCP,EAAM,QAAQ,SAAS,MAAM;EAC/B;EACA,iBAAiBE,EAAQ;CAE3B,IAAI,CAACG,CAAI,CAAC;AACZ"}
+{"version":3,"file":"usePoseRun.js","names":["EMPTY","usePoseRun","optsRef","useLatest","opts","state","useRef","running","frame","mounted","loop","useVisibleRaf","syncState","useCallback","pinnedNow","pinned","id","overrides","entry","commit","scene","moved","previews","pose","dropPreviewOverrides","halt","tick","poses","syncPreviewOverrides","done","useEffect","useMemo"],"sources":["../../../src/features/poseRun/usePoseRun.ts"],"sourcesContent":["/**\n * A pose run: poses published per frame, committed once.\n *\n * The frames go to `scene.overrides` — the ephemeral table a drag publishes to,\n * which `effectivePose`, the derived-geometry lookup and the pick source\n * already read. So an edge follows a node the run is moving with nothing added,\n * and the whole run lands as one undo entry when it settles.\n *\n * It knows nothing about layout. Each frame it asks `step` for poses and\n * whether it is finished; a relaxation, an eased transition to a target, and a\n * scrubbed timeline are all the same shape to it.\n *\n * **A node another gesture owns is pinned, not driven.** The run publishes\n * entries it holds by reference, so an override it did not put there belongs to\n * somebody else — a drag, a resize. It never writes that id, never commits it,\n * and hands it to `step` as pinned so the producer can hold its neighbors\n * against it.\n */\nimport { useCallback, useEffect, useMemo, useRef } from 'react';\nimport { useLatest } from '@weasel-js/react';\nimport { useVisibleRaf } from '../../scheduling/useVisibleRaf';\nimport {\n  dropPreviewOverrides,\n  syncPreviewOverrides,\n} from '../../interactions/actions/previewOverrides';\nimport type { NodeId, Scene } from '../../core/scene/types';\n\n/** What a producer is told before it is asked for a frame. */\nexport interface PoseRunCtx<TPose> {\n  /** Nodes another gesture is moving, and the pose each is drawn at. The run\n   *  will not write these, so a producer holds them fixed. */\n  pinned: ReadonlyMap<NodeId, TPose>;\n  /** Frames this run has produced, starting at 0. */\n  frame: number;\n}\n\n/** One frame of a run. */\nexport interface PoseRunStep<TPose> {\n  /** Where the nodes it drives are this frame — the whole picture, not a\n   *  delta. An id the frame omits stops being published, which is how a node\n   *  leaves the run's hands: a producer that drops a grabbed box and its rows\n   *  from one frame has released them by the next. */\n  poses: Iterable<readonly [NodeId, TPose]>;\n  /** Whether the run is finished. The frame is published either way, and a\n   *  finished run commits. */\n  done: boolean;\n}\n\n/** Options for `usePoseRun`. Read fresh each frame, so they may change mid-run. */\nexport interface UsePoseRunOptions<TPose> {\n  scene: Scene<unknown, string, TPose>;\n  /** Called once per frame while running, for that frame's poses. */\n  step: (ctx: PoseRunCtx<TPose>) => PoseRunStep<TPose>;\n  /** The undo entry's name. Default `'Layout'`. */\n  label?: string;\n  /** How many nodes the commit wrote. Fires after the ops land. */\n  onCommit?: (moved: number) => void;\n  /** Clock injection, for tests. Defaults to `requestAnimationFrame`. */\n  requestFrame?: (cb: (t: number) => void) => number;\n  cancelFrame?: (handle: number) => void;\n}\n\n/** Controls for a pose run. Stable for the life of the component. */\nexport interface PoseRun {\n  /** Begin a new run, counting frames from 0. Idempotent while running. */\n  start(): void;\n  /** Finish now: commit what is published, then drop the overrides. */\n  stop(): void;\n  /** Abandon: drop the overrides and write nothing, like a canceled drag. */\n  cancel(): void;\n  isRunning(): boolean;\n}\n\nconst EMPTY: ReadonlyMap<NodeId, unknown> = new Map<NodeId, unknown>();\n\n/**\n * Drive node poses frame by frame through `scene.overrides`, committing them as\n * one undo entry when `step` reports done or `stop` is called. Idle until\n * `start`; unmounting abandons the run without writing.\n */\nexport function usePoseRun<TPose>(opts: UsePoseRunOptions<TPose>): PoseRun {\n  const optsRef = useLatest(opts);\n\n  /** This frame's poses, and the entries published for them. Held by\n   *  reference so a frame mutates in place rather than re-notifying per node. */\n  const state = useRef({\n    previews: new Map<NodeId, unknown>(),\n    overrideEntries: new Map<NodeId, { pose: unknown }>(),\n  });\n  const running = useRef(false);\n  const frame = useRef(0);\n  const mounted = useRef(true);\n\n  // The gate defaults an absent clock to `requestAnimationFrame` itself, so\n  // these pass straight through rather than being defaulted twice.\n  const loop = useVisibleRaf(() => { tick(); }, {\n    requestFrame: opts.requestFrame,\n    cancelFrame: opts.cancelFrame,\n  });\n\n  /** The scene as the previous frame left it, for `syncPreviewOverrides`. */\n  const syncState = useCallback((): {\n    scene: Scene<unknown, string, unknown>;\n    previews: Map<NodeId, unknown>;\n    overrideEntries: Map<NodeId, { pose: unknown }>;\n  } => ({\n    scene: optsRef.current.scene,\n    previews: state.current.previews,\n    overrideEntries: state.current.overrideEntries,\n  }), [optsRef]);\n\n  /** Overrides somebody else published, and the pose each carries. */\n  const pinnedNow = (): ReadonlyMap<NodeId, TPose> => {\n    const { overrides } = optsRef.current.scene;\n    let pinned: Map<NodeId, TPose> | undefined;\n    for (const id of overrides.ids()) {\n      const entry = overrides.get(id);\n      if (entry === undefined || entry === state.current.overrideEntries.get(id)) continue;\n      if (entry.pose === undefined) continue;\n      (pinned ??= new Map()).set(id, entry.pose);\n    }\n    return pinned ?? (EMPTY as ReadonlyMap<NodeId, TPose>);\n  };\n\n  const commit = (): void => {\n    const { previews } = state.current;\n    const scene = optsRef.current.scene;\n    let moved = 0;\n    if (previews.size > 0) {\n      scene.batch(optsRef.current.label ?? 'Layout', () => {\n        for (const [id, pose] of previews) {\n          if (scene.get(id) === undefined) continue;\n          scene.setPose(id, pose as TPose);\n          moved++;\n        }\n      });\n    }\n    // After the ops land: dropping first leaves a window in which the scene\n    // answers with the pre-run pose.\n    dropPreviewOverrides(syncState());\n    previews.clear();\n    optsRef.current.onCommit?.(moved);\n  };\n\n  const halt = (): void => {\n    running.current = false;\n    loop.cancel();\n  };\n\n  const tick = (): void => {\n    if (!mounted.current || !running.current) return;\n    const pinned = pinnedNow();\n    const { poses, done } = optsRef.current.step({ pinned, frame: frame.current });\n    frame.current++;\n    // Each frame replaces the last: an id this one omits — a node just\n    // grabbed, or a row under one — stops being published, rather than being\n    // held at a pose from before the press while the gesture carries it\n    // somewhere else.\n    state.current.previews.clear();\n    for (const [id, pose] of poses) {\n      if (pinned.has(id)) continue;\n      state.current.previews.set(id, pose);\n    }\n    syncPreviewOverrides(syncState());\n    if (done) {\n      halt();\n      commit();\n      return;\n    }\n    loop.request();\n  };\n\n  useEffect(() => {\n    mounted.current = true;\n    const { previews } = state.current;\n    return () => {\n      mounted.current = false;\n      loop.cancel();\n      // Teardown is not a decision: an unmounted run abandons its frames\n      // rather than writing them.\n      dropPreviewOverrides(syncState());\n      previews.clear();\n    };\n  }, [loop, syncState]);\n\n  return useMemo<PoseRun>(() => ({\n    start() {\n      if (running.current || !mounted.current) return;\n      running.current = true;\n      frame.current = 0;\n      loop.request();\n    },\n    stop() {\n      if (!running.current) return;\n      halt();\n      commit();\n    },\n    cancel() {\n      halt();\n      dropPreviewOverrides(syncState());\n      state.current.previews.clear();\n    },\n    isRunning: () => running.current,\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }), [loop]);\n}\n"],"mappings":";;;;;AAyEA,IAAMA,oBAAsC,IAAI,IAAqB;AAOrE,SAAgBC,EAAkB,GAAyC;CACzE,IAAMC,IAAUC,EAAUC,CAAI,GAIxBC,IAAQC,EAAO;EACnB,0BAAU,IAAI,IAAqB;EACnC,iCAAiB,IAAI,IAA+B;CACtD,CAAC,GACKC,IAAUD,EAAO,EAAK,GACtBE,IAAQF,EAAO,CAAC,GAChBG,IAAUH,EAAO,EAAI,GAIrBI,IAAOC,QAAoB;EAAE,EAAK;CAAG,GAAG;EAC5C,cAAcP,EAAK;EACnB,aAAaA,EAAK;CACpB,CAAC,GAGKQ,IAAYC,SAIZ;EACJ,OAAOX,EAAQ,QAAQ;EACvB,UAAUG,EAAM,QAAQ;EACxB,iBAAiBA,EAAM,QAAQ;CACjC,IAAI,CAACH,CAAO,CAAC,GAGPY,UAA8C;EAClD,IAAM,EAAE,iBAAcZ,EAAQ,QAAQ,OAClCa;EACJ,KAAK,IAAMC,KAAMC,EAAU,IAAI,GAAG;GAChC,IAAMC,IAAQD,EAAU,IAAID,CAAE;GAC9B,AAAIE,MAAU,KAAA,KAAaA,MAAUb,EAAM,QAAQ,gBAAgB,IAAIW,CAAE,KACrEE,EAAM,SAAS,KAAA,MAClB,sBAAW,IAAI,IAAI,EAAA,CAAG,IAAIF,GAAIE,EAAM,IAAI;EAC3C;EACA,OAAOH,KAAWf;CACpB,GAEMmB,UAAqB;EACzB,IAAM,EAAE,gBAAad,EAAM,SACrBe,IAAQlB,EAAQ,QAAQ,OAC1BmB,IAAQ;EAcZ,AAbIC,EAAS,OAAO,KAClBF,EAAM,MAAMlB,EAAQ,QAAQ,SAAS,gBAAgB;GACnD,KAAK,IAAM,CAACc,GAAIO,MAASD,GACvB,AAAIF,EAAM,IAAIJ,CAAE,MAAM,KAAA,MACtBI,EAAM,QAAQJ,GAAIO,CAAa,GAC/B;EAEJ,CAAC,GAIHC,EAAqBZ,EAAU,CAAC,GAChCU,EAAS,MAAM,GACfpB,EAAQ,QAAQ,WAAWmB,CAAK;CAClC,GAEMI,UAAmB;EAEvB,AADA,EAAQ,UAAU,IAClBf,EAAK,OAAO;CACd,GAEMgB,UAAmB;EACvB,IAAI,CAACjB,EAAQ,WAAW,CAACF,EAAQ,SAAS;EAC1C,IAAMQ,IAASD,EAAU,GACnB,EAAE,UAAO,YAASZ,EAAQ,QAAQ,KAAK;GAAE;GAAQ,OAAOM,EAAM;EAAQ,CAAC;EAM7E,AALA,EAAM,WAKNH,EAAM,QAAQ,SAAS,MAAM;EAC7B,KAAK,IAAM,CAACW,GAAIO,MAASI,GACvB,AAAIZ,EAAO,IAAIC,CAAE,KACjBX,EAAM,QAAQ,SAAS,IAAIW,GAAIO,CAAI;EAGrC,IADAK,EAAqBhB,EAAU,CAAC,GAC5BiB,GAAM;GAER,AADAJ,EAAK,GACLN,EAAO;GACP;EACF;EACA,EAAK,QAAQ;CACf;CAeA,OAbAW,QAAgB;EACd,EAAQ,UAAU;EAClB,IAAM,EAAE,gBAAazB,EAAM;EAC3B,aAAa;GAMX,AALA,EAAQ,UAAU,IAClBK,EAAK,OAAO,GAGZc,EAAqBZ,EAAU,CAAC,GAChCU,EAAS,MAAM;EACjB;CACF,GAAG,CAACZ,GAAME,CAAS,CAAC,GAEbmB,SAAwB;EAC7B,QAAQ;GACN,AAAI,GAAQ,WAAYtB,EAAQ,YAChC,EAAQ,UAAU,IAClB,EAAM,UAAU,GAChBC,EAAK,QAAQ;EACf;EACA,OAAO;GACL,AAAKH,EAAQ,YACbkB,EAAK,GACLN,EAAO;EACT;EACA,SAAS;GAGP,AAFAM,EAAK,GACLD,EAAqBZ,EAAU,CAAC,GAChCP,EAAM,QAAQ,SAAS,MAAM;EAC/B;EACA,iBAAiBE,EAAQ;CAE3B,IAAI,CAACG,CAAI,CAAC;AACZ"}

package/dist/features/text/useTextEdit.js

@@ -3,12 +3,12 @@ import { SMALL_CAPS_SCALE_PROPERTY as t, appendOverlayText as n, charOffsetToDom
 import { applyStyleToRange as c, patchRangeStyle as l, runsCarryStyling as u, styleAtRange as d, supersededKey as f } from "./runs/rangeStyle.js";
 import { nodeHasFlag as p, setFlagOverRange as m, unboldPatch as h } from "./runs/flagRange.js";
 import { rangeWeight as g } from "./runs/effectiveRangeStyle.js";
-import { cssFontFamily as _, cssFontFamilyLoading as v } from "@weasel-js/font";
-import { fontString as y, layoutTextPose as b, numericWeight as x, resolveAlign as S, resolveTextStyle as C, runsToPlainText as w, scriptMetricsFor as T, smallCapsScaleFor as E, verticalAlignOffset as D } from "@weasel-js/text";
-import { useCallback as O, useEffect as k, useRef as A, useState as j } from "react";
-import { useLatest as M } from "@weasel-js/react";
+import { cssFontFamily as _, cssFontFamilyLoading as v, isCanvasFont as y } from "@weasel-js/font";
+import { fontString as b, layoutTextPose as x, numericWeight as S, resolveAlign as C, resolveTextStyle as w, runsToPlainText as T, scriptMetricsFor as E, smallCapsScaleFor as D, verticalAlignOffset as O } from "@weasel-js/text";
+import { useCallback as k, useEffect as A, useRef as j, useState as M } from "react";
+import { useLatest as N } from "@weasel-js/react";
 //#region src/features/text/useTextEdit.ts
-var N = [
+var P = [
 	{
 		key: "b",
 		shift: !1,
@@ -39,21 +39,21 @@ var N = [
 		shift: !0,
 		toggle: "sub"
 	}
-], P = {
+], F = {
 	"+": "=",
 	_: "-"
 };
 function ee(e) {
 	if (!e.metaKey && !e.ctrlKey) return null;
-	let t = e.key.toLowerCase(), n = P[t] ?? t;
-	return N.find((t) => t.key === n && t.shift === e.shiftKey)?.toggle ?? null;
+	let t = e.key.toLowerCase(), n = F[t] ?? t;
+	return P.find((t) => t.key === n && t.shift === e.shiftKey)?.toggle ?? null;
 }
-function F(e, t, n) {
+function I(e, t, n) {
 	if (t === "super" || t === "sub") return { script: e.script === t ? void 0 : t };
 	let r = t === "bold" ? g(e, n).bold === !0 : e[t] === !0 || p(n, t);
 	return { [t]: !r };
 }
-function I(e, t) {
+function L(e, t) {
 	return t > 0 ? d(e, t - 1, t) : d(e, 0, 1);
 }
 function te(e, t, n) {
@@ -74,7 +74,7 @@ function te(e, t, n) {
 	}
 	return a || r.push(n), c(r, 0, 0, {});
 }
-function L(e, t) {
+function R(e, t) {
 	let n = document.activeElement;
 	if (n === e || e.contains(n) || n instanceof HTMLInputElement || n instanceof HTMLTextAreaElement || n instanceof HTMLElement && n.isContentEditable || n instanceof Element && n.closest("[role=\"dialog\"]") !== null) return;
 	e.focus();
@@ -97,14 +97,14 @@ function ne(e, t, n) {
 	let s = document.createRange();
 	s.setStartAfter(a), s.collapse(!0), o.removeAllRanges(), o.addRange(s);
 }
-var R = Object.freeze({});
+var z = Object.freeze({});
 function re(e, t) {
 	let n = { ...e }, r = f(t);
 	r !== void 0 && delete n[r];
 	for (let [e, r] of Object.entries(t)) r === void 0 || r === !1 ? delete n[e] : n[e] = r;
 	return n;
 }
-function z(e) {
+function B(e) {
 	let t = window.getSelection();
 	if (!t || t.rangeCount === 0) return null;
 	let n = t.getRangeAt(0);
@@ -118,7 +118,7 @@ function z(e) {
 		end: r
 	};
 }
-function B(e, t, n, i, a) {
+function V(e, t, n, i, a) {
 	let o = document.activeElement, c = o !== e && !e.contains(o) && (o instanceof HTMLInputElement || o instanceof HTMLTextAreaElement || o instanceof HTMLElement && o.isContentEditable);
 	if (s(t, e, a), c) return;
 	let l = r(e, n), u = r(e, i), d = window.getSelection();
@@ -138,43 +138,43 @@ function ie(e) {
 function ae(e, t) {
 	return e === null || t === null ? e === t : e.start === t.start && e.end === t.end;
 }
-var V = 100;
-function H(t) {
-	let i = M(t), [f, g] = j(null), _ = M(f), v = A(null), y = A(C(void 0)), b = A(() => {}), x = e(() => {
+var H = 100;
+function U(t) {
+	let i = N(t), [f, g] = M(null), _ = N(f), v = j(null), y = j(w(void 0)), b = j(() => {}), x = e(() => {
 		b.current();
-	}), S = A("all"), [T, E] = j(null), [D, N] = j(null), [P, H] = j(R), U = A(R), W = A(null), G = O((e, t) => {
+	}), S = j("all"), [C, E] = M(null), [D, O] = M(null), [P, F] = M(z), U = j(z), W = j(null), G = k((e, t) => {
 		let n = Object.keys(e).length === 0;
-		U.current = n ? R : e, W.current = n ? null : t, H(U.current);
-	}, []), K = O(() => {
-		W.current !== null && (U.current = R, W.current = null, H(R));
-	}, []), q = A(null), J = O((e, t) => {
+		U.current = n ? z : e, W.current = n ? null : t, F(U.current);
+	}, []), K = k(() => {
+		W.current !== null && (U.current = z, W.current = null, F(z));
+	}, []), q = j(null), J = k((e, t) => {
 		let n = t.start === t.end;
 		W.current !== null && !(n && t.start === W.current) && K(), q.current = t, E((e) => ae(e, t) ? e : t);
 		let r = a(e);
-		N(n ? I(r, t.start) : d(r, t.start, t.end));
-	}, [K]), Y = O(() => {
+		O(n ? L(r, t.start) : d(r, t.start, t.end));
+	}, [K]), Y = k(() => {
 		let e = v.current;
 		if (!e) return;
-		let t = z(e);
+		let t = B(e);
 		t !== null && J(e, t);
-	}, [J]), pe = O(() => {
-		q.current = null, E(null), N(null), K();
-	}, [K]), X = O(() => {
+	}, [J]), pe = k(() => {
+		q.current = null, E(null), O(null), K();
+	}, [K]), X = k(() => {
 		g(null);
-	}, []), Z = O(() => {
+	}, []), Z = k(() => {
 		let e = f, t = v.current;
 		if (e == null || !t) {
 			g(null);
 			return;
 		}
 		let n = i.current.getRuns?.(e), r = i.current.setRuns, o = ie(a(t)), s = n != null && n.length > 0;
-		i.current.setText(e, w(o)), r && (s || u(o)) && r(e, o), g(null);
-	}, [f, i]), me = O((e, t) => {
+		i.current.setText(e, T(o)), r && (s || u(o)) && r(e, o), g(null);
+	}, [f, i]), me = k((e, t) => {
 		S.current = t?.caret ?? "all", g(e);
-	}, []), he = O((e) => f === e, [f]), Q = O((e) => {
+	}, []), he = k((e) => f === e, [f]), Q = k((e) => {
 		let t = v.current;
 		if (!t || Object.keys(e).length === 0) return;
-		let n = z(t) ?? q.current;
+		let n = B(t) ?? q.current;
 		if (!n) return;
 		let r = _.current, o = i.current.setStyle, s = a(t);
 		e.bold === !1 && !("fontWeight" in e) && r !== null && (e = {
@@ -184,41 +184,41 @@ function H(t) {
 		let l = r !== null && o ? Object.keys(e).find((t) => t !== "bold" && e[t] === !1 && p(i.current.getStyle(r) ?? {}, t)) : void 0;
 		if (l !== void 0 && r !== null && o) {
 			let a = i.current.getStyle(r) ?? {}, c = m(s, a, n.start, n.end, l, !1);
-			o(r, c.style), B(t, c.runs, n.start, n.end, y.current), J(t, n), n.start === n.end && G({
+			o(r, c.style), V(t, c.runs, n.start, n.end, y.current), J(t, n), n.start === n.end && G({
 				...U.current,
 				[l]: !1
-			}, n.start), L(t, n);
+			}, n.start), R(t, n);
 			let u = { ...e };
 			delete u[l], Object.keys(u).length > 0 && Q(u);
 			return;
 		}
 		if (n.start === n.end) {
-			G(re(U.current, e), n.start), L(t, n);
+			G(re(U.current, e), n.start), R(t, n);
 			return;
 		}
-		B(t, c(s, n.start, n.end, e), n.start, n.end, y.current), L(t, n), J(t, n);
+		V(t, c(s, n.start, n.end, e), n.start, n.end, y.current), R(t, n), J(t, n);
 	}, [
 		J,
 		G,
 		_,
 		i
-	]), $ = O((e) => {
+	]), $ = k((e) => {
 		let t = v.current;
 		if (!t) return;
-		let n = z(t) ?? q.current;
+		let n = B(t) ?? q.current;
 		if (!n) return;
-		let r = a(t), o = _.current, s = (o === null ? void 0 : i.current.getStyle(o)) ?? {}, c = n.start === n.end ? l(I(r, n.start), U.current) : d(r, n.start, n.end);
-		Q(F(c, e, s));
+		let r = a(t), o = _.current, s = (o === null ? void 0 : i.current.getStyle(o)) ?? {}, c = n.start === n.end ? l(L(r, n.start), U.current) : d(r, n.start, n.end);
+		Q(I(c, e, s));
 	}, [
 		Q,
 		_,
 		i
 	]);
-	return k(() => {
+	return A(() => {
 		if (f == null) return;
 		let { container: e, getText: t, getStyle: c, getPaint: l } = i.current;
 		if (!e) return;
-		let u = C(c(f), l?.(f)), d = document.createElement("div"), p = `weasel-text-edit-${++oe}`;
+		let u = w(c(f), l?.(f)), d = document.createElement("div"), p = `weasel-text-edit-${++oe}`;
 		d.classList.add(p), d.setAttribute("contenteditable", "true"), d.spellcheck = !1, y.current = u;
 		let m = i.current.getRuns?.(f);
 		m && m.length > 0 ? s(m, d, u) : u.fontVariantCaps === "small-caps" ? s([{ text: t(f) }], d, u) : n(d, t(f)), ue(d, u);
@@ -226,14 +226,14 @@ function H(t) {
 		h && (d.style.opacity = "0");
 		let g = de(p, u), _ = le();
 		_.appendChild(d), e.appendChild(_), v.current = d;
-		let w = () => {
+		let C = () => {
 			let e = i.current.getClipRect?.() ?? null;
 			fe(d, _, i.current.getScreenPose(f), e, u);
 		};
-		w();
+		C();
 		let T = h !== null, E = () => {
-			T && (T = !1, clearTimeout(D), w(), d.style.opacity = "");
-		}, D = T ? setTimeout(E, i.current.fontHold ?? V) : void 0;
+			T && (T = !1, clearTimeout(D), C(), d.style.opacity = "");
+		}, D = T ? setTimeout(E, i.current.fontHold ?? H) : void 0;
 		h?.then(E);
 		let O = document.createRange(), k = S.current;
 		k === "all" ? O.selectNodeContents(d) : ce(d, O, k), d.focus();
@@ -257,14 +257,14 @@ function H(t) {
 			if (e.inputType !== "insertText" || !e.data) return;
 			let t = U.current;
 			if (Object.keys(t).length > 0) {
-				let n = z(d) ?? q.current;
+				let n = B(d) ?? q.current;
 				if (!n || n.start !== n.end) return;
 				e.preventDefault();
 				let r = te(a(d), n.start, {
 					...t,
 					text: e.data
 				}), i = n.start + e.data.length;
-				B(d, r, i, i, y.current), ne(d, r, i), K(), J(d, {
+				V(d, r, i, i, y.current), ne(d, r, i), K(), J(d, {
 					start: i,
 					end: i
 				});
@@ -284,14 +284,14 @@ function H(t) {
 			P();
 		}, P = (e) => {
 			if (e instanceof InputEvent && e.isComposing) return;
-			let t = z(d);
+			let t = B(d);
 			if (!o(d) || !t) return;
 			let n = r(d, t.start), i = r(d, t.end), a = window.getSelection();
 			if (!n || !i || !a) return;
 			let s = document.createRange();
 			s.setStart(n.node, n.offset), s.setEnd(i.node, i.offset), a.removeAllRanges(), a.addRange(s);
 		}, F = (e) => {
-			P(e), w();
+			P(e), C();
 		}, I = (e) => {
 			let t = e.target;
 			if (!(t instanceof Node) || d.contains(t)) return;
@@ -299,7 +299,7 @@ function H(t) {
 			n && t instanceof Element && n(t) || Z();
 		};
 		return d.addEventListener("keydown", j), d.addEventListener("blur", M), d.addEventListener("input", F), d.addEventListener("beforeinput", N), document.addEventListener("pointerdown", I, !0), document.addEventListener("selectionchange", Y), b.current = () => {
-			w(), x.request();
+			C(), x.request();
 		}, x.request(), () => {
 			T = !1, clearTimeout(D), x.cancel(), b.current = () => {}, d.removeEventListener("keydown", j), d.removeEventListener("blur", M), d.removeEventListener("input", F), d.removeEventListener("beforeinput", N), document.removeEventListener("pointerdown", I, !0), document.removeEventListener("selectionchange", Y), _.remove(), g?.remove(), v.current = null, pe();
 		};
@@ -320,7 +320,7 @@ function H(t) {
 		cancelEdit: X,
 		commit: Z,
 		isEditing: he,
-		selection: T,
+		selection: C,
 		rangeStyle: D,
 		pendingStyle: P,
 		applyStyleToSelection: Q,
@@ -330,7 +330,7 @@ function H(t) {
 var oe = 0;
 function se(e, t) {
 	let n = [v(e.fontFamily, {
-		weight: x(e.fontWeight),
+		weight: S(e.fontWeight),
 		style: e.fontStyle
 	}), ...t.filter((e) => e.fontFamily != null).map((e) => v(e.fontFamily, {
 		weight: e.fontWeight ?? (e.bold ? 700 : void 0),
@@ -357,34 +357,34 @@ function le() {
 function ue(e, n) {
 	e.style.position = "absolute", e.style.pointerEvents = "auto", e.style.boxSizing = "border-box", e.style.margin = "0", e.style.padding = "0", e.style.border = "0", e.style.outline = "none", e.style.background = "transparent", e.style.color = n.fill !== null && "color" in n.fill ? n.fill.color : "#000", e.style.caretColor = n.caretColor;
 	let r = _(n.fontFamily, {
-		weight: x(n.fontWeight),
+		weight: S(n.fontWeight),
 		style: n.fontStyle
 	});
-	e.style.font = y({
+	e.style.font = b({
 		...n,
 		fontFamily: r
-	}), e.style.lineHeight = String(n.lineHeight);
-	let i = S(n.align, n.direction);
+	}), e.style.textRendering = y(n.fontFamily) ? "" : "geometricPrecision", e.style.lineHeight = String(n.lineHeight);
+	let i = C(n.align, n.direction);
 	e.style.textAlign = n.align === "justify" ? "justify" : i, e.style.setProperty("text-align-last", n.align === "justify" ? i : "");
 	let a = [];
-	n.underline && a.push("underline"), n.strikethrough && a.push("line-through"), n.overline && a.push("overline"), e.style.textDecoration = a.length > 0 ? a.join(" ") : "none", e.style.textTransform = n.textTransform, e.style.fontVariant = n.fontVariantCaps, e.style.setProperty(t, n.fontVariantCaps === "small-caps" ? String(E(n.fontFamily, x(n.fontWeight), n.fontStyle)) : ""), e.style.whiteSpace = n.wrap ? "pre-wrap" : "pre", e.style.overflowWrap = "normal", e.style.wordBreak = "normal";
+	n.underline && a.push("underline"), n.strikethrough && a.push("line-through"), n.overline && a.push("overline"), e.style.textDecoration = a.length > 0 ? a.join(" ") : "none", e.style.textTransform = n.textTransform, e.style.fontVariant = n.fontVariantCaps, e.style.setProperty(t, n.fontVariantCaps === "small-caps" ? String(D(n.fontFamily, S(n.fontWeight), n.fontStyle)) : ""), e.style.whiteSpace = n.wrap ? "pre-wrap" : "pre", e.style.overflowWrap = "normal", e.style.wordBreak = "normal";
 }
 function de(e, t) {
 	if (t.selectionBackground == null && t.selectionColor == null) return null;
 	let n = document.createElement("style"), r = [];
 	return t.selectionBackground != null && r.push(`background: ${t.selectionBackground};`), t.selectionColor != null && r.push(`color: ${t.selectionColor};`), n.textContent = `.${e}::selection { ${r.join(" ")} }`, document.head.appendChild(n), n;
 }
-var U = {
+var W = {
 	left: 0,
 	center: .5,
 	right: 1
 };
-function W(e, t, n = 0) {
-	let r = D(e.verticalAlign, e.height, t);
+function G(e, t, n = 0) {
+	let r = O(e.verticalAlign, e.height, t);
 	return e.y + (r + n) * (e.zoom ?? 1);
 }
-function G(e, t, n, r) {
-	let i = b({
+function K(e, t, n, r) {
+	let i = x({
 		x: 0,
 		y: 0,
 		width: n.width,
@@ -398,23 +398,24 @@ function G(e, t, n, r) {
 			lineHeight: r,
 			script: t.script
 		}
-	}).laid.lines[0]?.baselineY ?? 0, a = q(e);
+	}).laid.lines[0]?.baselineY ?? 0, a = J(e);
 	return i > 0 && a > 0 ? i - a : 0;
 }
-var K = /* @__PURE__ */ new Map();
-function q(e) {
+var q = /* @__PURE__ */ new Map();
+function J(e) {
 	let t = e.parentElement;
 	if (!t) return 0;
-	let { fontFamily: n, fontWeight: r, fontStyle: i, fontSize: a, lineHeight: o } = e.style, s = [
+	let { fontFamily: n, fontWeight: r, fontStyle: i, fontSize: a, lineHeight: o, textRendering: s } = e.style, c = [
 		n,
 		r,
 		i,
 		a,
-		o
-	].join("|"), c = K.get(s);
-	if (c !== void 0) return c;
-	let l = document.createElement("div");
-	Object.assign(l.style, {
+		o,
+		s
+	].join("|"), l = q.get(c);
+	if (l !== void 0) return l;
+	let u = document.createElement("div");
+	Object.assign(u.style, {
 		position: "absolute",
 		left: "0",
 		top: "0",
@@ -428,17 +429,18 @@ function q(e) {
 		fontWeight: r,
 		fontStyle: i,
 		fontSize: a,
-		lineHeight: o
+		lineHeight: o,
+		textRendering: s
 	});
-	let u = document.createElement("span");
-	Object.assign(u.style, {
+	let d = document.createElement("span");
+	Object.assign(d.style, {
 		display: "inline-block",
 		width: "0",
 		height: "0",
 		verticalAlign: "baseline"
-	}), l.appendChild(u), t.appendChild(l);
-	let d = l.getBoundingClientRect(), f = d.width / 100, p = f > 0 ? (u.getBoundingClientRect().top - d.top) / f : 0;
-	return l.remove(), p > 0 && document.fonts?.status !== "loading" && (K.size >= 64 && K.clear(), K.set(s, p)), p;
+	}), u.appendChild(d), t.appendChild(u);
+	let f = u.getBoundingClientRect(), p = f.width / 100, m = p > 0 ? (d.getBoundingClientRect().top - f.top) / p : 0;
+	return u.remove(), m > 0 && document.fonts?.status !== "loading" && (q.size >= 64 && q.clear(), q.set(c, m)), m;
 }
 function fe(e, t, n, r, i) {
 	if (!n) {
@@ -446,20 +448,20 @@ function fe(e, t, n, r, i) {
 		return;
 	}
 	t.style.overflow = r ? "clip" : "visible", t.style.left = `${r?.x ?? 0}px`, t.style.top = `${r?.y ?? 0}px`, t.style.width = `${r?.width ?? 0}px`, t.style.height = `${r?.height ?? 0}px`, e.style.display = "";
-	let a = i.wrap ? 0 : U[S(i.align, i.direction)];
+	let a = i.wrap ? 0 : W[C(i.align, i.direction)];
 	e.style.left = `${n.x + n.width * (n.zoom ?? 1) * a - (r?.x ?? 0)}px`, e.style.width = i.wrap ? `${n.width}px` : "max-content", e.style.minWidth = i.wrap ? "" : `${n.width}px`;
-	let o = i.script ? T(i.fontFamily, x(i.fontWeight), i.fontStyle)[i.script] : void 0, s = n.lineHeight ?? i.lineHeight;
+	let o = i.script ? E(i.fontFamily, S(i.fontWeight), i.fontStyle)[i.script] : void 0, s = n.lineHeight ?? i.lineHeight;
 	e.style.fontSize = `${n.fontSize * (o?.size ?? 1)}px`, e.style.lineHeight = o ? `${n.fontSize * s}px` : String(s);
 	let c = n.verticalAlign !== void 0 && n.verticalAlign !== "top";
 	e.style.minHeight = c ? "" : `${n.height}px`;
-	let l = G(e, i, n, s) - (o?.shift ?? 0) * n.fontSize;
-	e.style.top = `${W(n, c ? e.offsetHeight : n.height, l) - (r?.y ?? 0)}px`, e.style.transformOrigin = "0 0";
+	let l = K(e, i, n, s) - (o?.shift ?? 0) * n.fontSize;
+	e.style.top = `${G(n, c ? e.offsetHeight : n.height, l) - (r?.y ?? 0)}px`, e.style.transformOrigin = "0 0";
 	let u = [];
 	n.zoom !== void 0 && n.zoom !== 1 && u.push(`scale(${n.zoom})`), a !== 0 && u.push(`translateX(${-a * 100}%)`), e.style.transform = u.length > 0 ? u.join(" ") : "none";
 	let d = n.zoom === void 0 && i.fontSize > 0 ? n.fontSize / i.fontSize : 1;
 	e.style.letterSpacing = `${i.letterSpacing * d}px`;
 }
 //#endregion
-export { V as TEXT_EDIT_FONT_HOLD, G as baselineDrop, W as overlayTop, H as useTextEdit };
+export { H as TEXT_EDIT_FONT_HOLD, K as baselineDrop, G as overlayTop, U as useTextEdit };
 
 //# sourceMappingURL=useTextEdit.js.map