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 the purpose of 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)

touch

true or false: enable or disable touch support (default true)

jailToViewport

true or false: only allow drag and pan of the object in the viewport boundaries (default false)

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

paper.zpd('toggle')

paper.zpd('toggle');
paper.zpd('toggle', function (err, state) { console.log(state); }); // return current enable state

By default, zpd is enabled, but you can toggle or set its activation using this function. (Useful to toggle mouse event (zpd))

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 and you!

Reference

svgpan raphael-zpd svg-pan-zoom