panera
v0.0.10
Published
A Svelte library for panning and zooming in SVG, Canvas and HTML.
Readme
panera
A Svelte library for panning and zooming in SVG, Canvas and HTML.
Install
pnpm add paneraPeer requirement: svelte ^4 || ^5
Example
<script>
import { Panera, Svg } from 'panera';
let width = 800,
height = 300;
let pan;
function reset() {
pan.reset();
}
function to() {
pan.to({ x: 80, y: 40, width: 200, height: 120 }, { duration: 600 });
}
</script>
<button on:click={reset}>Reset</button> <button on:click={to}>Zoom to rect</button>
<Panera bind:this={pan} {width} {height}>
<Svg>
<rect fill="tomato" x="80" y="40" width="200" height="120" />
</Svg>
</Panera>API
- Provider:
<Panera /> - Layers:
<Svg />,<Canvas />,<Html /> - Control via
bind:this:to(),reset(),interpolate(),getView(),getBox()
<Panera /> props
width?: number | null— container width in pixels (required for fits)height?: number | null- container height in pixels (required for fits)duration?: number— default 1000 ms (used byto()&reset())easing?: (t:number)=>number— defaultcubicInOutbound?: boolean— clamp view inside container (defaulttrue)debugBox?: boolean— overlay a non-scaling red debug rect (defaultfalse)debugZoom?: boolean— disable zooming, helpful in conjuction withdebugBox(defaultfalse)
Methods (via bind:this)
reset(opts?)opts = { duration?: number, easing?: (t)=>number, debugBox?, debugZoom? }Reset the view back to k=1, x=0, y=0.to(rect, opts?)rect = {x, y, width, height}opts = { duration?, easing?, bound?, debugBox?, debugZoom? }Tweens to the fitted view of the rectangle.interpolate(a, b, opts?)a = { x, y, width, height }, b = { x, y, width, height }opts = { t?: number, easing?: (t)=>number, bound?, debugBox?, debugZoom? }Instant scrub (no tween). Fits both a and b, then blends view using t (after easing).getView(): Readable<{ k:number, x:number, y:number }>A Svelte store reflecting the current view.getBox(): Readable<{ x:number, y:number, width:number, height: number }>A Svelte store reflecting the current bounding box.
Layers
<Svg>Renders a<svg>withviewBoxand a<g>that applies:transform="scale(k) translate(x, y)". Debug rect usesvector-effect="non-scaling-stroke".<Canvas>DPR-aware canvas; appliesscale(k)thentranslate(x, y). Prop:render(ctx, {k, x, y}, {width, height, dpr}) => void<Html>Absolutely-positioned HTML that follows the same transform via CSS:transform: scale(k) translate(xpx, ypx); transform-origin: 0 0;Place children withposition:absolute; left/topin object coordinates.
Development
pnpm format # prettier
pnpm lint # prettier check + eslint
pnpm test # vitest unit tests
pnpm prepack # build library to dist/ (svelte-package + publint)
pnpm storybook # run the local storybook page
pnpm pack # output a tarballLicense
MIT