npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

svelte-deep-zoom

v0.0.12

Published

![minified](https://img.shields.io/bundlephobia/min/svelte-deep-zoom/0.0.11?style=for-the-badge) ![minified + zipped](https://img.shields.io/bundlephobia/minzip/svelte-deep-zoom/0.0.11?style=for-the-badge)

Downloads

49

Readme

svelte-deep-zoom

minified minified + zipped

Svelte component to render interactive Deep Zoom images (tiled image pyramids). Similar to Open SeaDragon (fewer features, but smaller size). Supports foveation to prioritize tiles closest to focus point when zooming.

See Demo

Instructions

Install using your package manager of choice:

pnpm i svelte-deep-zoom

Import action into page, create options and pass to action.

Options include:

  • width & height in CSS pixels of item to render (will be centered and sized to fit canvas)
  • size size of tiles (default 256)
  • overlap tile overlap (default 0)
  • src a function to generate the URL for a tile given the pyramid level, col, and row of the tile
  • overlays an optional array of overlays to render over the tiles
  • concurrency concurrency limit for loading tiles (default 12). Set to 0 to disable
  • minTileZoom the minimum zoom level that a tile layer will render (default 0.8)
  • maxTileZoom the maximum zoom level that a tile layer will render (default 2.0)
  • opacityDuration the duration that a newly loaded tile will take to fade in (creates a "progressive JPEG" loading effect)

Overlays

Overlasys allow additional functionality to be added which is tree-shaken out if unused. In built overlays include:

  • Watermark pass the image src url in the constructor
  • Busy renders an animated busy spinner when tiles are loading
  • Debug renders tile borders and level / col / row information

Additional overlays that could be developed might include a mini-map to show where in the full image you are zoomed into.

Example

<script lang="ts">
  import { deepzoom } from 'svelte-deep-zoom'

  const options = {
    width: 13920,
    height: 10200,
    size: 254,
    overlap: 1,
    src(level: number, col: number, row: number) {
      return `https://openseadragon.github.io/example-images/duomo/duomo_files/${level}/${col}_${row}.jpg`
    }
  }
</script>

<canvas use:deepzoom={options} />

<style>
  canvas {
    width: 100%;
    height: 100%;
    user-select: none;
    touch-action: none;
    overscroll-behavior: none;
  }
</style>