snap.svg.zpd


A zoom/pan/drag plugin for Snap.svg

This is an an adaptation of Andrea Leofreddi's SVGPan library, version 1.2.2, for use as a Snap.svg plugin.

This usually use on present view only. Not for Storing or Modifying the paper.

DEMO DEMO2 DEMO3

In the Wild

Drop me an issue/PR for the showcase

Install

$ bower install snap.svg.zpd --save

$ npm install snap.svg.zpd --save

How The Plugin Works

The plugin will put all child elements in the svg into a group-element and apply the "global transformations" to this group - like zooming, panning or rotating the whole canvas.

When dragging is enabled, the respective transformations will be applied directly to the element that is under the mouse-cursor.

Svg manipulations after applying the plugin should take part inside of the zpd group. I.e. if you would like to add a new element that should inherit zooming and panning, you should not add it directly to the svg, but to the zpd-group within.

Usage

Include snap.svg.zpd.js after snap.svg.js

<script src="snap.svg.js"></script>
<script src="snap.svg.zpd.js"></script>

Writing the script

var paper = Snap();
var bigCircle = paper.circle(150, 150, 100);
paper.zpd();

// with options and callback
paper.zpd(options, function (err, paper) {
    console.log(paper);
});

// with callback
paper.zpd(function (err, paper) {
    console.log(paper);
});

options

zoom

true or false: enable or disable zooming (default true)

pan

true or false: enable or disable panning (default true)

drag

true or false: enable or disable dragging (default false)

zoomScale

number: Zoom sensitivity (default 0.2)

zoomThreshold

array: min and max zoom level threshold [min, max] (default null)

onPan

• function: callback function that is called when panning occurs, the parameters are the overall x- and y-translation and an object with information on the content overlapping with the SVG viewport borders at top, left, bottom and right

constrainPan

One of the following:

• true: enable pan constraints with default behavior (default false - disables pan constraints)
• object: fixed min and max translations in x- and y-direction (properties dxMin, dxMax, dyMin and dyMax should be set)
• function: a custom function that takes the content width, the content height, the viewport with and the viewport height and returns an object as described above

More

paper.zpd('destroy')

paper.zpd('destroy');

Destroy all the zpd elements, events and nodes

paper.zpd('save')

paper.zpd('save');
// => return SVGMatrix {a:0.6787972450256348,b:0,c:0,d:0.6787972450256348,e:159.63783264160156,f:12.84811782836914}

paper.zpd('save', function (err, data) {
    console.log(data);
    // => return SVGMatrix {a:0.6787972450256348,b:0,c:0,d:0.6787972450256348,e:159.63783264160156,f:12.84811782836914}
});

return current <g> transform attribute (matrix) - only in pan,zoom, not for drag now

paper.zpd({ load: SVGMatrix {}})

paper.zpd({ load: {a:0.6787972450256348,b:0,c:0,d:0.6787972450256348,e:159.63783264160156,f:12.84811782836914}});

set the initial <g> transform matrix

paper.zpd('origin')

paper.zpd('origin');

back to the origin location

zoomTo

paper.zoomTo(1.5, 3000, mina.bounce, function (err, paper) {
    console.log(paper);
});

zoom (must > 0), interval (ms optional), mina (optional), callback (optional)

panTo

paper.panTo('-1'); // go left -1 x location
paper.panTo('+0', '-1'); // go up -1 y location
paper.panTo(100,100); // go to location (x, y) (100, 100)
paper.panTo(100, 100, 3000, mina.bounce, function (err, paper) {
    console.log(paper);
});

x, y (can be number or string with + -), interval (ms optional), mina (optional), callback (optional)

rotate

paper.rotate(15);
paper.panTo(a, x, y, mina.bounce, function (err, paper) {
    console.log(paper);
});

a (rotate degree) x, y (original point), interval (ms optional), mina (optional), callback (optional)

Experimental: Edit

to add an element to the transformation matrix. select the group that contains the matrix

canvas = Snap.select('#snapsvg-zpd-'+paper.id);

create an element and add

canvas.add(element);

understanding the matrix

Basic concepts of matrix

to get the current matrix

paper.zpd('save');

return

SVGMatrix {
    a: zoom,
    b: 0,
    c: 0,
    d: zoom,
    e: offset X,
    f: offset Y
}

if you need to map one point, for example event.click (x, y)

matrix X = (original X + offsetX) / zoom
matrix Y = (original Y + offsetY) / zoom

Contributor List

Huei Tan
Ramon Saccilotto

Reference

svgpan
raphael-zpd
svg-pan-zoom