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

@avcs/svgpanzoom

v2.0.7

Published

A Javascript plugin to pan and zoom SVG images either programatically or through mouse/touch events

Downloads

32

Readme

SVG Pan & Zoom v2

A Javascript plugin to pan and zoom SVG images either programatically or through mouse/touch events

Installation

As npm module

npm install @avcs/svgpanzoom --save

As bower component

bower install avcs-svgpanzoom --save

As standalone JavaScript plugin

<script type="text/javascript" src="@avcs/svgpanzoom/dist/SVGPanZoom.js"></script>

Live Demo

Available at https://avcs.pro/svgpanzoom.

Project forked

This project uses jquery-svg-pan-zoom project as base and improves on it.

Features

  • Programmatically manipulate the SVG viewBox
  • Mouse and touch events to pan the SVG viewBox
  • Mousewheel and pinch events for zooming the SVG viewBox
  • Animate pan and zoom actions
  • Zooming keeps the cursor over the same coordinates relative to the image (A.K.A. GoogleMaps-like zoom)

Dependencies

  • SVG-enabled browser (does not work with SVG work-arounds that use Flash)

The viewBox

The viewBox is an attribute of SVG images that defines the area of the SVG that is visible, it is defined by 4 numbers: X, Y, Width, Height. These numbers together specify the visible area. This plugin works by manipulating these four numbers.

Examples Reducing X value pans the SVG to left. By reducing Width and Height we can zoom in to the SVG.

Usage

var SVGPanZoom= new SVGPanZoom(SVGElement, options)

The returned SVGPanZoom instance contains all options inside options property, these can be overwritten at any time directly, for example to disable mouseWheel events simply:

SVGPanZoom.options.zoom.events.mouseWheel= false

The SVGPanZoom instance also has methods for manipulating the viewBox programmatically. For example:

SVGPanZoom.zoomIn()

Options

Default values are inside ().

Options: {
    /* the initial viewBox,
     * if null or undefined will try to use the viewBox set in the svg tag.
     * Also accepts string in the format "X Y Width Height"
     ***/
    initialViewBox: Object {
        x: Number (0), // the top-left corner X coordinate
        y: Number (0), // the top-left corner Y coordinate
        width: Number (1000), // the width of the viewBox
        height: Number (1000) // the height of the viewBox
    } (null),

    // Time(milliseconds) to use for animations. Set 0 to remove the animation
    animationTime: Number (200),

    /* ViewBox Limits in percentage
        * Number (15) (all directions)
        * String "Number Number" (15 15) (horizontal vertical)
        ***/
    limits: String (15),

    /* DOMElement(container) to which all the events are attached
     * If null events will be attached to SVG element itself
     * Useful when your own touch and mouse events are interfering with the events of plugin
     ***/
    eventMagnet: DOMElement (null),

    // Zoom Params, set false to disable zoom
    zoom: {
        // Zoom Factor, viewBox values are multiplied or divided based on this factor to zoom on each step
        // Formula: ZoomOut => newWidth = width / (1 + factor), ZoomIn => newWidth = width * (1 + factor)
        factor: Number (0.25),
        // Zoom Limits
        // minZoom:0.1 => zoom out up to 0.1x
        minZoom: Number (0.1),
        // maxZoom:5 => zoom in upto 5x
        maxZoom: Number (5),
        // Event related flags
        events: {
            // enable mouse wheel zooming events
            mouseWheel: Boolean (true),
            // enable double-click zooming events
            doubleClick: Boolean (true),
            // enable pinch zooming events
            pinch: Boolean (true)
        },
        // onZoom callback, multiplier = current multiplier
        callback: Function (function(multiplier) {})
    },
    // Pan Params, set false to disable pan
    pan: {
        // Pan Factor, this factor is added to or substracted from viewBox values to pan
        factor: Number (100),
        // Event related flags
        events: {
            // enable drag to PAN the SVG events
            drag: Boolean (true),
            // e.which value for the mouse button you want to use for dragging
            dragMouseButton : Number (1), 
            // cursor to use while dragging
            dragCursor: String ("move")
        },
        // onPan callback, coordinates = {x: x, y: y}
        callback: Function (function(coordinates) {})
    }
}

Methods

Pan Methods

SVGPanZoom.panLeft([amount, animationTime])
SVGPanZoom.panRight([amount, animationTime])
SVGPanZoom.panUp([amount, animationTime])
SVGPanZoom.panDown([amount, animationTime])

Pans the SVG in the specified direction.

amount [Number] optional PAN distance, defaults to options.panFactor.

animationTime [Number] optional Animation duration, defaults to options.animationTime.

Zoom Methods

SVGPanZoom.zoomIn([focalPoint, amount, animationTime])
SVGPanZoom.zoomOut([focalPoint, amount, animationTime])

Zooms the SVG in or out.

focalPoint [Object {x: Number,y: Number}] optional This point should be relative to SVG co-ordinate system, defaults to center of current viewBox. This point will remain at the same place after zooming.

amount [Number] optional Zoom factor, defaults to options.zoomFactor.

animationTime [Number] optional Animation duration, defaults to options.animationTime.

reset

SVGPanZoom.reset()

Resets the SVG to options.initialViewBox values.

getViewBox

SVGPanZoom.getViewBox()

Returns the viewbox in this format:

{
    x: Number
    y: Number
    width: Number
    height: Number
}

setViewBox

SVGPanZoom.setViewBox(x, y, width, height, animationTime, callback)

Changes the viewBox to the specified coordinates. Will respect the options.limits adapting the viewBox if needed (moving or reducing it to fit into options.limits

x [Number] the new x coodinate of the top-left corner

y [Number] the new y coodinate of the top-left corner

width [Number] the new width of the viewBox

height [Number] the new height of the viewBox

animationTime [Number] optional Animation duration, defaults to options.animationTime.

setCenter

SVGPanZoom.setCenter(x, y, animationTime)

Sets the center of the SVG.

x [Number] the new x coodinate of the center

y [Number] the new y coodinate of the center

animationTime [Number] optional Animation duration, defaults to options.animationTime.

Notes:

  • This plugin does not create any controls (like arrows to move the image) on top of the SVG. These controls are simple to create manually and they can programmatically call the methods to move the image.
  • Do not manipulate the SVG viewBox attribute manually, use SVGPanZoom.setViewBox() instead