lecodes-viewer 0.19.2 → 0.20.2

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "lecodes-viewer",
-  "version": "0.19.2",
+  "version": "0.20.2",
   "main": "src/createViewer.ts",
   "dependencies": {
-    "lecodes-renderer": "0.19.2",
+    "lecodes-renderer": "0.20.2",
     "ogl": "^1.0.11",
-    "lecodes-viewer-lite": "0.19.2"
+    "lecodes-viewer-lite": "0.20.2"
   },
   "scripts": {
     "dev": "vite",
@@ -25,6 +25,10 @@
   "type": "module",
   "files": [
     "src",
+    "!src/assets/*.mp4",
+    "!src/assets/*.png",
+    "!src/assets/*.svg",
+    "!src/assets/neutral_ibl256.ktx",
     "dist-embed",
     "embed.html",
     "README.md"

package/src/createViewer.ts

@@ -18,6 +18,8 @@ export { getBuffer } from './utils/fetch'
 export { decodeKtx2Image, isKtx2Bytes } from 'lecodes-viewer-lite/src/gl/decoders'
 export type { CreatorMethods, EngineMode, Host, HostOptions, Run, RunOptions, UIFactory } from './host'
 export type { PreviewError, MappedFrame } from './sourcemapError'
+// The render tree the canvas UI hands back (`_creatorUI.renderTree()`) — the embedder's verify gates walk it.
+export type { RenderNode } from 'lecodes-renderer'
 export { createCanvasUIRenderer } from './ui/mountCanvasUI'
 export { createBareUI } from './ui/createBareUI'
 export type { SafeAreaEdge, SafeAreaSpec } from './ui/safeAreaSpec'

package/src/host.ts

@@ -13,6 +13,7 @@ import { createCanvasHost } from './canvas/createCanvasHost'
 import { putBuffer, getBuffer } from './utils/fetch'
 import { createNavHostBridge } from 'lecodes-viewer-lite/src/gl/core/navBridge'
 import { createInputHost } from "lecodes-viewer-lite/src/utils/input"
+import { registerWebPlugins } from "lecodes-viewer-lite/src/plugins"
 import { createUtils } from './utils/createUtils'
 import { ensureFontsLoaded, loadBootFonts, type BootFont } from './utils/fonts'
 import type { SafeAreaSpec } from './ui/safeAreaSpec'
@@ -217,6 +218,8 @@ export const createHost = async (root: HTMLElement, options: HostOptions = {}) =
   }
 
   const _creatorUI = options.ui ? await options.ui(root, canvasHost) : undefined
+  // The web twins of the first-party NativeView plugins (camera, map) — shared with the lite host.
+  registerWebPlugins(_creatorUI)
   const _creatorUtils = createUtils({ launchUrl: options.launchUrl, onOrientation: options.onOrientation })
   _creatorUI?._setCreator(_creator)
   // Before the ResizeObserver's initial fire, so the first applied layout already has the insets.

package/src/ui/nativeViewSystem.ts

@@ -1,91 +1,2 @@
-// NativeView on the web host (docs/navigation-presentable-plan.md — registerView + the
-// call/event channel + the "native" layout node). The embedding app registers DOM factories:
-//
-//   host._creatorUI._registerView("map", (params, channel) => {
-//     const el = document.createElement("div")
-//     return { el, call: (method, args) => {...}, destroy: () => {...} }
-//   })
-//
-// One SDK NativeView instance = one live DOM instance (keyed by its _viewId), reused across
-// embed/fullscreen/pager mounts — that reuse IS the promotion semantics. An unregistered
-// name renders a labeled placeholder so a bundle stays inspectable on hosts without the plugin.
-
-export type WebViewChannel = { emit(event: string, data?: any): void }
-export type WebViewInstanceHandle = {
-  el: HTMLElement
-  call?(method: string, args: any[]): any | Promise<any>
-  destroy?(): void
-}
-export type WebViewFactory = (params: any, channel: WebViewChannel) => WebViewInstanceHandle
-
-// The SDK-side NativeView element/descriptor surface the system needs (see sdk NativeView.ts).
-type SdkNativeView = {
-  viewName: string
-  params: any
-  _viewId: number
-  _emitViewEvent(event: string, dataJson?: string): void
-}
-
-export const createNativeViewSystem = () => {
-  const factories = new Map<string, WebViewFactory>()
-  const instances = new Map<number, WebViewInstanceHandle>()
-
-  const registerView = (name: string, factory: WebViewFactory) => { factories.set(name, factory) }
-  const isViewSupported = (name: string) => factories.has(name)
-
-  const placeholder = (name: string): WebViewInstanceHandle => {
-    const el = document.createElement("div")
-    el.style.cssText = "display:flex;align-items:center;justify-content:center;background:#333;color:#999;font:12px sans-serif"
-    el.textContent = `NativeView("${name}") — no web factory registered`
-    return { el }
-  }
-
-  /** Resolve (or lazily create) the live instance for an SDK NativeView. */
-  const ensureInstance = (view: SdkNativeView): WebViewInstanceHandle => {
-    let instance = instances.get(view._viewId)
-    if (!instance) {
-      const factory = factories.get(view.viewName)
-      instance = factory
-        ? factory(view.params, { emit: (event, data) => view._emitViewEvent(event, data === undefined ? undefined : JSON.stringify(data)) })
-        : placeholder(view.viewName)
-      instances.set(view._viewId, instance)
-    }
-    return instance
-  }
-
-  /** The `_creatorUI.viewCall` bridge — JSON in/out, promise-friendly. */
-  const viewCall = (viewId: number, method: string, args: string, onComplete: (result?: string) => void, onError: (err: string) => void) => {
-    const instance = instances.get(viewId)
-    if (!instance?.call) {
-      onError(`NativeView call "${method}": no live instance or no call handler (viewId ${viewId})`)
-      return
-    }
-    try {
-      Promise.resolve(instance.call(method, JSON.parse(args))).then(
-        (result) => onComplete(result === undefined ? undefined : JSON.stringify(result)),
-        (e) => onError(e instanceof Error ? e.message : String(e)),
-      )
-    } catch (e) {
-      onError(e instanceof Error ? e.message : String(e))
-    }
-  }
-
-  /** Mount the live instance into a layout cell (the "native" node's DOM element). A view lives
-   *  in ONE place: mounting here steals it from wherever it was (promotion works the same way
-   *  in reverse — openView steals it from the cell, close returns it via re-mount). */
-  const mountInto = (view: SdkNativeView, cell: HTMLElement) => {
-    const { el } = ensureInstance(view)
-    el.style.position = "absolute"
-    el.style.inset = "0"
-    cell.appendChild(el)
-  }
-
-  const destroy = () => {
-    for (const i of instances.values()) i.destroy?.()
-    instances.clear()
-  }
-
-  return { registerView, isViewSupported, ensureInstance, viewCall, mountInto, destroy }
-}
-
-export type NativeViewSystem = ReturnType<typeof createNativeViewSystem>
+// Moved to viewer-lite (the NativeView registry + channel are shared by both web hosts); re-export shim.
+export * from "lecodes-viewer-lite/src/ui/nativeViewSystem"

package/src/ui/presentPlayer.ts

@@ -1,156 +1,2 @@
-// Destination transition player (docs/navigation-presentable-plan.md, phase 2 — web reference).
-// Named transitions are predefined TransitionSpecs; both shapes play through element.animate(),
-// so a custom spec from the SDK needs no extra machinery.
-//
-// The static rule (mirrors the Android SurfaceView constraint so apps feel the same): a side
-// marked `static` (the scene canvas) never animates — only the screen side moves. Screens are
-// position:absolute so they always paint above the in-flow canvas, which makes the degradations
-// coherent: entering a scene slides the old screen away to reveal it; leaving a scene slides the
-// new screen in over it.
-
-export type SpecTransform = { x?: number | string, y?: number | string, scale?: number, opacity?: number }
-export type TransitionSpecLike = {
-  duration?: number
-  easing?: [number, number, number, number]
-  incoming?: { from?: SpecTransform }
-  outgoing?: { to?: SpecTransform }
-  dim?: number
-  onTop?: "incoming" | "outgoing"
-}
-
-const STACK_EASING: [number, number, number, number] = [0.2, 0, 0, 1]
-
-const NAMED: Record<string, TransitionSpecLike> = {
-  "none": {},
-  "fade": { duration: 280, incoming: { from: { opacity: 0 } } },
-  "slide-from-right": { duration: 400, incoming: { from: { x: "100%" } }, outgoing: { to: { x: "-30%" } } },
-  "slide-from-left": { duration: 400, incoming: { from: { x: "-100%" } }, outgoing: { to: { x: "30%" } } },
-  "slide-from-top": { duration: 400, incoming: { from: { y: "-100%" } }, outgoing: { to: { y: "30%" } } },
-  "slide-from-bottom": { duration: 400, incoming: { from: { y: "100%" } }, outgoing: { to: { y: "-30%" } } },
-  "zoom": { duration: 400, easing: [0.33, 1.2, 0.62, 1], incoming: { from: { scale: 0.985 } } },
-  "zoom-in": { duration: 400, easing: [0.33, 1.2, 0.62, 1], incoming: { from: { scale: 1.08, opacity: 0 } }, onTop: "incoming" },
-  "zoom-out": { duration: 420, outgoing: { to: { scale: 0.92, opacity: 0 } }, onTop: "outgoing" },
-  "push": { duration: 350, easing: STACK_EASING, incoming: { from: { x: "100%" } }, outgoing: { to: { x: "-25%" } }, dim: 0.3, onTop: "incoming" },
-  "pop": { duration: 350, easing: STACK_EASING, incoming: { from: { x: "-25%" } }, outgoing: { to: { x: "100%" } }, dim: 0.3, onTop: "outgoing" },
-}
-
-const toTransform = (t: SpecTransform): string => {
-  const parts: string[] = []
-  if (t.x !== undefined || t.y !== undefined) {
-    const px = (v: number | string | undefined) => v === undefined ? "0px" : typeof v === "number" ? v + "px" : v
-    parts.push(`translate(${px(t.x)}, ${px(t.y)})`)
-  }
-  if (t.scale !== undefined) parts.push(`scale(${t.scale})`)
-  return parts.length > 0 ? parts.join(" ") : "none"
-}
-
-const poseKeyframe = (t: SpecTransform): Keyframe => {
-  const kf: Keyframe = { transform: toTransform(t) }
-  if (t.opacity !== undefined) kf.opacity = t.opacity
-  return kf
-}
-const IDENTITY: Keyframe = { transform: "none", opacity: 1 }
-
-// The exit pose for an outgoing side when the incoming one is static (a scene): mirror the
-// incoming entry so the reveal keeps the transition's direction (push's 100%-from-right becomes
-// a full slide-out to the left); pure opacity entries become a fade-out.
-const mirrorExit = (from: SpecTransform): SpecTransform => {
-  const neg = (v: number | string | undefined) =>
-    v === undefined ? undefined : typeof v === "number" ? -v : v.startsWith("-") ? v.slice(1) : "-" + v
-  const out: SpecTransform = {}
-  if (from.x !== undefined) out.x = neg(from.x)
-  if (from.y !== undefined) out.y = neg(from.y)
-  if (from.scale !== undefined) out.scale = 2 - from.scale
-  if (from.opacity !== undefined || Object.keys(out).length === 0) out.opacity = 0
-  return out
-}
-
-type Side = { el: HTMLElement, static?: boolean }
-
-export const createPresentPlayer = (container: HTMLElement) => {
-  let finishActive: (() => void) | null = null
-
-  /** Play `transition` between the mounted `incoming` and the still-mounted `outgoing`; calls
-   *  `onDone` exactly once (after the animation, or immediately for none/unsupported) — the
-   *  caller physically unmounts the outgoing side there. A new play() snaps the previous
-   *  transition to its end first. */
-  const play = (opts: {
-    incoming?: Side
-    outgoing?: Side
-    transition: string | TransitionSpecLike | null | undefined
-    onDone: () => void
-  }) => {
-    finishActive?.()
-
-    const spec = typeof opts.transition === "string" ? NAMED[opts.transition] : opts.transition ?? undefined
-    const inSide = opts.incoming && !opts.incoming.static ? opts.incoming.el : null
-    const outSide = opts.outgoing && !opts.outgoing.static ? opts.outgoing.el : null
-
-    let inFrom = spec?.incoming?.from
-    let outTo = spec?.outgoing?.to
-
-    // Static-side degradations (see header). A poseless spec ("none") stays instant — the
-    // degradations only reshape transitions that actually wanted to move something.
-    if (opts.incoming?.static && outSide && (spec?.incoming || spec?.outgoing)) {
-      // The incoming scene can't animate: unless this is an exit-shaped transition (onTop:
-      // "outgoing" — pop/zoom-out already fully remove the old side), the outgoing screen leaves
-      // by the mirror of the entry it was supposed to be covered by.
-      if (spec?.onTop !== "outgoing") outTo = inFrom ? mirrorExit(inFrom) : (outTo ?? { opacity: 0 })
-      inFrom = undefined
-    }
-    if (opts.outgoing?.static && inSide && !inFrom && spec && Object.keys(spec).length > 0) {
-      inFrom = { opacity: 0 }   // something must move; fade the screen in over the scene
-    }
-
-    const hasWork = (inSide && inFrom) || (outSide && outTo)
-    if (!spec || !hasWork || typeof (inSide ?? outSide)?.animate !== "function") {
-      opts.onDone()
-      return
-    }
-
-    const duration = spec.duration ?? 300
-    const easing = spec.easing ? `cubic-bezier(${spec.easing.join(",")})` : "cubic-bezier(0.25, 0.1, 0.25, 1)"
-    const animations: Animation[] = []
-
-    // z-order for the duration of the transition (screens only — the static canvas stays in
-    // flow at the bottom). Dim sits between the two.
-    const onTop = spec.onTop ?? "incoming"
-    const topEl = onTop === "incoming" ? inSide : outSide
-    const bottomEl = onTop === "incoming" ? outSide : inSide
-    if (topEl) topEl.style.zIndex = "3"
-    if (bottomEl) bottomEl.style.zIndex = "1"
-
-    let dimEl: HTMLElement | null = null
-    if (spec.dim && spec.dim > 0) {
-      dimEl = document.createElement("div")
-      dimEl.style.cssText = "position:absolute;inset:0;background:#000;pointer-events:none;z-index:2"
-      container.appendChild(dimEl)
-      // Entering (push): the under layer darkens; exiting (pop): it un-darkens.
-      const [a, b] = onTop === "incoming" ? [0, spec.dim] : [spec.dim, 0]
-      animations.push(dimEl.animate([{ opacity: a }, { opacity: b }], { duration, easing }))
-    }
-
-    if (inSide && inFrom) {
-      animations.push(inSide.animate([poseKeyframe(inFrom), IDENTITY], { duration, easing }))
-    }
-    if (outSide && outTo) {
-      animations.push(outSide.animate([IDENTITY, poseKeyframe(outTo)], { duration, easing, fill: "forwards" }))
-    }
-
-    let done = false
-    const cleanup = () => {
-      if (done) return
-      done = true
-      finishActive = null
-      for (const a of animations) a.cancel()   // drops fill:forwards so a detached-not-freed screen restores clean
-      if (topEl) topEl.style.zIndex = ""
-      if (bottomEl) bottomEl.style.zIndex = ""
-      dimEl?.remove()
-      opts.onDone()
-    }
-    finishActive = cleanup
-    Promise.all(animations.map(a => a.finished)).then(cleanup, cleanup)
-  }
-
-  return { play, finish: () => finishActive?.() }
-}
+// Moved to viewer-lite (both web hosts play the same destination transitions); re-export shim.
+export * from "lecodes-viewer-lite/src/ui/presentPlayer"

package/src/utils/imageNode.ts

@@ -99,6 +99,11 @@ function configureImageSrc(host: ImageHost, el: HTMLElement, src: ImageSrc, tint
       ;(el as any)._canvasSurface = surfaceId
       el.removeAttribute("data-viewbox")
       el.src = host.canvasHost?.surfaceToDataUrl(surfaceId) ?? ""
+    } else if (typeof src === "object" && "scene2d" in src) {
+      // UIImage(scene2d): a live 2D scene drawn into the box — desktop only so far (parity
+      // ui-scene2d-image); a blank box here rather than a bogus blob url.
+      el.removeAttribute("data-viewbox")
+      el.removeAttribute("src")
     } else {
       el.removeAttribute("data-viewbox")
       el.src = typeof src === "object" ? getUrl(src._id) : src

package/src/viewer/createViewer.ts

@@ -440,6 +440,17 @@ export const createViewer = async (canvas: HTMLCanvasElement, options: ViewerOpt
     // Screen inputs are logical px; scale to backing px for the native (viewport-space) pick.
     raycastView: (offsetX: number, offsetY: number) => module._raycastView(offsetX * resFactor, offsetY * resFactor),
     setCulling: module._setCulling,
+    // Draw order / per-instance depth state (Mesh.renderPriority, Material.depthTest / depthWrite) —
+    // only once the wasm carries the exports; the SDK feature-detects them.
+    setRenderPriority: module._setRenderPriority,
+    setMaterialDepthTest: module._setMaterialDepthTest ? (id: number, on: boolean) => module._setMaterialDepthTest(id, on ? 1 : 0) : undefined,
+    setMaterialDepthWrite: module._setMaterialDepthWrite ? (id: number, on: boolean) => module._setMaterialDepthWrite(id, on ? 1 : 0) : undefined,
+    setMaterialCulling: module._setMaterialCulling,
+    setMaterialStencil: module._setMaterialStencil
+      ? (id: number, write: boolean, test: number, ref: number, onPass: number, onFail: number, onDepthFail: number, readMask: number, writeMask: number) =>
+        module._setMaterialStencil(id, write ? 1 : 0, test, ref, onPass, onFail, onDepthFail, readMask, writeMask)
+      : undefined,
+    setSceneStencil: module._setSceneStencil ? (sceneId: number, on: boolean) => module._setSceneStencil(sceneId, on ? 1 : 0) : undefined,
     setGlbCulling: module._setGlbCulling,
     // Culling default for animated GLBs (Model.load): only once the wasm carries the export — an older
     // binary leaves the SDK on the always-draw default (see bridges.d.ts).
@@ -615,7 +626,7 @@ export const createViewer = async (canvas: HTMLCanvasElement, options: ViewerOpt
     createMaterial: (systemId: number) => {
       return module._createMaterialInstance(compileMaterial(systemId))
     },
-    setMesh(entityId: number, materialId: number, vertices: Float32Array, normals: Float32Array, indices: Uint16Array, uv: Float32Array, meshType: number, uv1?: Float32Array) {
+    setMesh(entityId: number, materialId: number, vertices: Float32Array, normals: Float32Array, indices: Uint16Array, uv: Float32Array, meshType: number, uv1?: Float32Array, colors?: Uint8Array) {
       const ptrVertices = module._malloc(vertices.byteLength)
       const ptrNormals = module._malloc(normals.byteLength)
       const ptrIndices = module._malloc(indices.byteLength)
@@ -625,6 +636,15 @@ export const createViewer = async (canvas: HTMLCanvasElement, options: ViewerOpt
       module.HEAPU16.set(indices, ptrIndices/2)
       module.HEAPF32.set(uv, ptrUv/4)
 
+      // the vertex colours ride the newest export (createMeshC); a wasm without it draws white
+      if (colors && module._createMeshC) {
+        const ptrUv1 = uv1 ? module._malloc(uv1.byteLength) : 0
+        if (uv1 && ptrUv1) module.HEAPF32.set(uv1, ptrUv1 / 4)
+        const ptrColors = module._malloc(colors.byteLength)
+        module.HEAPU8.set(colors, ptrColors)
+        module._createMeshC(entityId, materialId, ptrVertices, ptrNormals, ptrIndices, ptrUv, vertices.length / 3, indices.length, meshType, ptrUv1, ptrColors)
+        return
+      }
       // the lightmap UV set rides the newer export; a wasm without it duplicates uv into UV1
       if (uv1 && module._createMeshEx) {
         const ptrUv1 = module._malloc(uv1.byteLength)
@@ -832,7 +852,11 @@ export const createViewer = async (canvas: HTMLCanvasElement, options: ViewerOpt
       return out
     },
     getGlbClipSet: (entityId: number) => module._getGlbClipSet(entityId),
-    sliceClip: (clipSetId: number, clip: number, start: number, end: number) => module._sliceClip(clipSetId, clip, start, end),
+    deriveClip: (clipSetId: number, clip: number, mirror: boolean, start: number, end: number) => {
+      if (typeof module._deriveClip === "function") return module._deriveClip(clipSetId, clip, mirror ? 1 : 0, start, end)
+      if (mirror) { console.warn("creator-gl: this wasm cannot mirror clips — rebuild it"); return 0 }   // a wasm from before 2026-09-06
+      return module._sliceClip(clipSetId, clip, start < 0 ? 0 : start, end < 0 ? 1e9 : end)
+    },
     destroyClipSet: (clipSetId: number) => module._destroyClipSet(clipSetId),
     animatorCreate: (entityId: number) => module._animatorCreate(entityId),
     animatorDestroy: (animatorId: number) => module._animatorDestroy(animatorId),