lecodes-viewer 0.19.0

package/src/utils/imageNode.ts

@@ -0,0 +1,260 @@
+import { getUrl } from "./fetch"
+import {
+  ImageSrc,
+  isSvgSrc,
+  svgSrcTint,
+  convertSvgToDataUri,
+  applySvgMask,
+  clearSvgMask,
+  extractViewBox,
+} from "./svg"
+
+export type ImageHost = {
+  nodeMap: Map<number, HTMLElement>
+  weakMap: WeakMap<HTMLElement, number>
+  module: any
+  recalc(): void
+  recalcImmediately(): void
+  /** Resolve a baked `_creatorCanvas` surface (UIImage(canvas)) to a data-uri for the <img>. */
+  canvasHost?: { surfaceToDataUrl(surfaceId: number): string | null }
+}
+
+// Replaces the element's tag in place, preserving layout state and re-pointing the maps.
+// No-op (returns the same element) when the tag already matches.
+export function swapElementTag(host: ImageHost, el: HTMLElement, tag: "img" | "div"): HTMLElement {
+  if (el.tagName.toLowerCase() === tag) return el
+
+  const next = document.createElement(tag)
+  next.setAttribute("style", el.getAttribute("style") ?? "")
+  for (const attr of ["data-measured", "data-using-padding", "data-using-scroll", "data-viewbox"]) {
+    if (el.hasAttribute(attr)) {
+      const v = el.getAttribute(attr)!
+      next.setAttribute(attr, v)
+    }
+  }
+
+  const id = host.weakMap.get(el)!
+  host.weakMap.delete(el)
+  host.weakMap.set(next, id)
+  host.nodeMap.set(id, next)
+
+  el.replaceWith(next)
+  return next
+}
+
+// node-based entry (creation path) — unchanged call sites
+export function configureImage(host: ImageHost, node: any, el: HTMLElement): void {
+  // A sourceRect stashed on the node (set before mount, while _id == 0) is applied here: the
+  // element was already created as a crop <div> by createNodeElement, so just paint + crop it.
+  const rect = node._sourceRect as [number, number, number, number] | undefined
+  if (rect) {
+    configureImageSourceRect(el, node._src as ImageSrc, rect)
+    return
+  }
+  // Effective tint: an explicit style-level tintColor wins; otherwise the SvgSource's own tintColor.
+  const tint = (node._style?.tintColor as string | undefined) ?? svgSrcTint(node._src as ImageSrc)
+  configureImageSrc(host, el, node._src as ImageSrc, tint)
+}
+
+// Runtime: image node's src changed (via updateNode). Re-derives the masked/unmasked
+// category from the NEW src + the tint currently reflected in the DOM element, swaps the
+// tag if the category flips, and reconfigures. No node object needed.
+export function updateImageSrc(host: ImageHost, current: HTMLElement, src: ImageSrc): void {
+  // The effective tint: the NEW source's own tintColor takes priority (swapping between two
+  // source-tinted SvgSources), else the tint already on the element — a masked <div> carries it as
+  // backgroundColor (from a style tint or a previous source tint), a plain <img> has none.
+  const currentTint = current instanceof HTMLDivElement ? current.style.backgroundColor : ""
+  const tint = svgSrcTint(src) ?? currentTint
+
+  const wantsDiv = isSvgSrc(src) && !!tint
+  const el = swapElementTag(host, current, wantsDiv ? "div" : "img")
+  configureImageSrc(host, el, src, tint)
+  host.recalc()
+}
+
+// core: works from raw src + tint, no node
+function configureImageSrc(host: ImageHost, el: HTMLElement, src: ImageSrc, tint: string | undefined): void {
+  // Forget any prior canvas binding; the canvasSurface branch below re-sets it. Keeps
+  // refreshCanvasSurface from repainting a node whose src has since moved off the canvas.
+  ;(el as any)._canvasSurface = undefined
+
+  if (el instanceof HTMLImageElement) {
+    clearSvgMask(el)
+    el.referrerPolicy = "no-referrer"
+    el.crossOrigin = "anonymous"
+    el.addEventListener("load", () => {
+      if (!el.hasAttribute("data-measured")) return
+      host.module._markNodeDirty(host.weakMap.get(el)!)
+      host.recalcImmediately()
+    }, { once: true })
+
+    if (isSvgSrc(src)) {
+      el.src = convertSvgToDataUri(src.svg)
+      const vb = extractViewBox(src.svg)
+      if (vb) el.setAttribute("data-viewbox", vb)
+    } else if (typeof src === "object" && "canvasSurface" in src) {
+      // UIImage(canvas): a baked _creatorCanvas surface → a data-uri the <img> can load. Remember
+      // the surface id so a later canvas.update() (refreshCanvasSurface) can repaint this node.
+      const surfaceId = (src as { canvasSurface: number }).canvasSurface
+      ;(el as any)._canvasSurface = surfaceId
+      el.removeAttribute("data-viewbox")
+      el.src = host.canvasHost?.surfaceToDataUrl(surfaceId) ?? ""
+    } else {
+      el.removeAttribute("data-viewbox")
+      el.src = typeof src === "object" ? getUrl(src._id) : src
+    }
+    return
+  }
+
+  if (isSvgSrc(src) && tint) {
+    applySvgMask(el, src.svg, tint)
+    if (el.hasAttribute("data-measured")) {
+      host.module._markNodeDirty(host.weakMap.get(el)!)
+      host.recalcImmediately()
+    }
+  }
+}
+
+// Render only a sub-rectangle (x, y, w, h, in texture pixels) of an image's source texture —
+// the atlas / spritesheet primitive. Mirrors tintSvgImage: swap the <img> for a <div> and
+// paint the atlas as a background-image, then scale + offset it so the sub-rect fills the box.
+// (We use background-image rather than object-view-box because it works in every browser.)
+//
+// The rect is stashed on the element so measure can read w/h as the intrinsic size (one
+// frame, not the whole atlas). The natural atlas size is needed for the offset/scale math and
+// is read from the loaded <img>, or probed if the atlas hasn't loaded yet.
+export function setImageSourceRect(host: ImageHost, nodeId: number, x: number, y: number, w: number, h: number): void {
+  const el = host.nodeMap.get(nodeId)
+  if (!el) return
+
+  const prev = (el as any)._sourceRect as [number, number, number, number] | undefined
+  ;(el as any)._sourceRect = [x, y, w, h]
+
+  if (el instanceof HTMLImageElement) {
+    // First crop on this node (rect set after mount): swap <img> → background-image <div>.
+    // The old <img> may already hold the decoded natural size — pass it to skip the probe.
+    const div = swapElementTag(host, el, "div")
+    ;(div as any)._sourceRect = [x, y, w, h]   // swapElementTag copies attributes, not fields
+    paintCropDiv(div, el.src, el)
+  } else {
+    // Subsequent crop (animation hot path): the crop <div> is already set up, just restyle.
+    applySourceRectCrop(el)
+  }
+
+  // The frame w/h are the intrinsic size. First rect, or any w/h change → intrinsic size
+  // changed → relayout. A position-only change (x/y differ, w/h same) is the animation hot
+  // path: draw-only, no recalc.
+  if (!prev || prev[2] !== w || prev[3] !== h) {
+    host.module._markNodeDirty(nodeId)
+    host.recalc()
+  }
+}
+
+// Mount path: a sourceRect was set before the node was attached (setSourceRect while _id == 0)
+// and stashed on the node. createNodeElement already made the element a <div>, so there is no
+// <img> to swap — just paint + crop. No relayout here: this runs during tree construction, the
+// element's _sourceRect is in place before the initial layout pass measures it.
+export function configureImageSourceRect(el: HTMLElement, src: ImageSrc, rect: [number, number, number, number]): void {
+  ;(el as any)._sourceRect = rect
+  const url = typeof src === "object" ? getUrl((src as any)._id) : src
+  paintCropDiv(el, url, null)
+}
+
+// Paint the atlas as the element's background-image and crop it. The natural atlas size is
+// needed for the offset/scale math: read it from `loadedImg` when it is already decoded,
+// otherwise probe the url. The background is painted only once the size is known and the crop
+// is applied in the same synchronous block — so the first paint is already cropped, never a
+// flash of the full uncropped atlas. The frame size (and thus layout) is known without the
+// bitmap, so only the visual crop waits. The probe closes over `el`, which is stable after
+// this point (no further tag swap), and reads the live _sourceRect so a crop changed before
+// the probe resolves still lands correctly.
+function paintCropDiv(el: HTMLElement, url: string, loadedImg: HTMLImageElement | null): void {
+  el.style.backgroundRepeat = "no-repeat"
+
+  if (loadedImg && loadedImg.naturalWidth > 0) {
+    ;(el as any)._atlasSize = [loadedImg.naturalWidth, loadedImg.naturalHeight]
+    el.style.backgroundImage = `url("${url}")`
+    applySourceRectCrop(el)
+    return
+  }
+  const probe = new Image()
+  probe.crossOrigin = "anonymous"
+  probe.referrerPolicy = "no-referrer"
+  probe.addEventListener("load", () => {
+    ;(el as any)._atlasSize = [probe.naturalWidth, probe.naturalHeight]
+    el.style.backgroundImage = `url("${url}")`
+    applySourceRectCrop(el)
+  }, { once: true })
+  probe.src = url
+}
+
+// Scale the atlas so the sub-rect exactly fills the box, then offset so the sub-rect's
+// top-left aligns to the box's top-left. Both are expressed as percentages so they are
+// independent of the (layout-driven) box size — set once, no recompute on resize.
+//   background-size %      is relative to the box: NW/w*100% makes one frame == box width.
+//   background-position %  aligns the p% point of image to the p% point of box, which works
+//                          out to x/(NW-w)*100% for the frame's left edge (full-span → 0).
+function applySourceRectCrop(el: HTMLElement): void {
+  const rect = (el as any)._sourceRect as [number, number, number, number] | undefined
+  const atlas = (el as any)._atlasSize as [number, number] | undefined
+  if (!rect || !atlas) return   // natural atlas size not known yet (probe still pending)
+
+  const [x, y, w, h] = rect
+  const [NW, NH] = atlas
+
+  el.style.backgroundSize = `${NW / w * 100}% ${NH / h * 100}%`
+  el.style.backgroundPosition =
+    `${NW === w ? 0 : x / (NW - w) * 100}% ${NH === h ? 0 : y / (NH - h) * 100}%`
+}
+
+// Canvas.update() → repaint every UIImage(canvas) node bound to this baked surface with the
+// re-rasterized pixels. Draw-only, no relayout: the surface keeps its id and size across an
+// update (a resize goes through a full `src` re-assign instead), so only the <img> bitmap
+// changes. A canvasSurface src is never svg/tinted, so the node is always a plain <img>.
+export function refreshCanvasSurface(host: ImageHost, surfaceId: number): void {
+  const url = host.canvasHost?.surfaceToDataUrl(surfaceId)
+  if (!url) return
+  for (const el of host.nodeMap.values()) {
+    if ((el as any)._canvasSurface === surfaceId && el instanceof HTMLImageElement) el.src = url
+  }
+}
+
+export function tintSvgImage(host: ImageHost, nodeId: number, tint: string): void {
+  const current = host.nodeMap.get(nodeId)
+  if (!current || !(current instanceof HTMLImageElement)) return
+  const dataUri = current.src // already data:image/svg+xml;base64,...
+  const div = swapElementTag(host, current, "div")
+  const s = div.style as any
+  s.webkitMaskImage = s.maskImage = `url("${dataUri}")`
+  s.webkitMaskRepeat = s.maskRepeat = "no-repeat"
+  s.webkitMaskPosition = s.maskPosition = "center"
+  if (!s.maskSize) s.webkitMaskSize = s.maskSize = "contain"
+  div.style.backgroundColor = tint
+  // data-viewbox already copied by swapElementTag — measure stays correct
+  host.recalc()
+}
+
+// tintColor reset (a PRESENCE prop: no tint = the image's original colors). Reverses
+// tintSvgImage: the svg data-uri lives in the mask — swap the masked <div> back to a plain
+// <img> loading it, and drop the mask + tint fill. A node tinted while still an <img>
+// (non-svg src) only carried a backgroundColor, so clearing that is the whole reset.
+export function untintSvgImage(host: ImageHost, nodeId: number): void {
+  const el = host.nodeMap.get(nodeId)
+  if (!el) return
+  const s = el.style as any
+  const mask: string = s.maskImage || s.webkitMaskImage || ""
+  if (el instanceof HTMLDivElement && mask) {
+    const src = /url\("(.*)"\)/.exec(mask)?.[1]
+    const img = swapElementTag(host, el, "img") as HTMLImageElement
+    const is = img.style as any
+    is.webkitMaskImage = is.maskImage = ""
+    is.webkitMaskRepeat = is.maskRepeat = ""
+    is.webkitMaskPosition = is.maskPosition = ""
+    is.webkitMaskSize = is.maskSize = ""
+    img.style.backgroundColor = ""
+    if (src) img.src = src
+    host.recalc()
+  } else {
+    el.style.backgroundColor = ""
+  }
+}

package/src/utils/openFilePicker.ts

@@ -0,0 +1,2 @@
+// Moved to viewer-lite; re-export shim.
+export * from "lecodes-viewer-lite/src/utils/openFilePicker"

package/src/utils/svg.ts

@@ -0,0 +1,2 @@
+// Moved to viewer-lite; re-export shim.
+export * from "lecodes-viewer-lite/src/utils/svg"

package/src/utils/videoNode.ts

@@ -0,0 +1,2 @@
+// Moved to viewer-lite; re-export shim.
+export * from "lecodes-viewer-lite/src/utils/videoNode"

package/src/utils/ws.ts

@@ -0,0 +1,2 @@
+// Moved to viewer-lite; re-export shim.
+export * from "lecodes-viewer-lite/src/utils/ws"