Attaches Tessera's DZI deep-zoom + multi-layer progressive-quality behavior to a Fresco viewer by id.
Tessera 0.2 is no longer a standalone viewer — it's a layer that
composes onto a <Fresco.viewer>. The Fresco viewer owns the OSD
instance, the nav overlay, animations, and viewport clamping; Tessera
contributes:
- A DZI source provider registered with Fresco (so any
.dzimanifest URL is treated as a tile pyramid) - A multi-layer source-swap that promotes / demotes through an
ordered
sourceslist as the user zooms in and out, with hysteresis to avoid flicker around the boundaries, and a bounds-preserving swap so the user never sees a jump to home
Usage
<Fresco.viewer id="photo" src={~p"/uploads/photo-medium.jpg"} />
<Tessera.layer
fresco_id="photo"
sources={[
%{url: ~p"/uploads/photo-medium.jpg", width: 1024},
%{url: ~p"/uploads/photo-large.jpg", width: 2560},
%{url: ~p"/dzi/photo.dzi"}
]}
/>Sources
An ordered list of low → high quality layers. Each entry is a map with:
:url(required) — the source URL (a plain image or a.dzimanifest):width(optional) — intrinsic pixel width. Tessera computes the zoom threshold past which this source is upscaled and swaps to the next one up. Omit for.dzisources — DZI's tile pyramid covers all zoom levels.
The viewer's initial state should match sources first entry (Fresco
opens with its own src; Tessera trusts the consumer to keep them in
sync). When zoom crosses each threshold, Tessera asks Fresco to swap
while preserving the user's viewport bounds.
Server-side helpers (unchanged from 0.1)
Tessera also ships the lazy DZI tile-generation API:
Tessera.generate/3— eager full-pyramid generatorTessera.generate_manifest/3— just the XML manifestTessera.generate_tile/4— one tile at a time, on demandTessera.Storagebehaviour +Tessera.Storage.Localdefault
These are unchanged from 0.1 — the breaking change in 0.2 is on the client side only.
Summary
Functions
Mounts a Tessera DZI / multi-layer layer onto a Fresco viewer.
Functions
Mounts a Tessera DZI / multi-layer layer onto a Fresco viewer.
The component renders a hidden <div phx-hook="TesseraLayer"> that's
invisible to users; it exists only to host the LiveView hook. The hook
looks up the named Fresco viewer via window.Fresco.onViewerReady/2
and attaches.
Attributes
fresco_id(:string) (required) - DOM id of the<Fresco.viewer>this layer attaches to.sources(:list) (required) - Ordered low → high quality layers; each a%{url, width}map. Width is optional for.dzisources. See moduledoc for details.id(:string) - Optional DOM id for the layer host element; defaults to"tessera-layer-<fresco_id>". Defaults tonil.Global attributes are accepted.