This is a follow-up as the last issue was closed for whatever reason.
I have gotten things working more completely, however, there is an
issue that once I load a svg file I can now edit the graphics on it that
currently exist. However, if I add a new element then all the old elements
get locked and so I can't edit them any further. I can only edit the new elements.
I need to know how to allow editing of all elements in this situation.

There is a follow up to that in that I would like to lock just a couple elements
so they are not moveable, but, remain clickable to allow some editing.

I do appreciate any help on this.
Not trying to be a pain but need some help with this working.

Kim H.

I can't seem to get paper.zpd({ load: svgMatrix }) to work
paper.zpd('save') works fine

as title.

I have been using snap.svg and snap.svg.zpd for not to long a time now
and can add various elements to my root svg element. That includes
loading other svg elements in to the root svg and so these elements
are svg tags themselves, which appears to be fine. The issue I have is
that I need to be able to drag these svg elements around inside the
root svg element. They do display on the screen fine as stated but I
am not successfully moving them around when then are clicked on.
The code I am using to load the svg files is Snap.load() and perhaps
that is the issue is there a s.load for snap.svg.zpd that I should be using.
I have not discovered it if there is? I am using s.image to load an image file
and I can move it around with the mouse.

I appreciate any help or example on how to do this properly.

Kim H.

I'm wondering how to name new functions or settings to limit directions of panning.

For example I'd like to enable horizontal or vertical panning only.

Any suggestions?

Hello Sir,

consider the following features which which i found in the net.

1. autofit
2. autocenter
3. resize svg to container
4. touch support

see this link as a reference : http://ariutta.github.io/svg-pan-zoom/demo/resize.html
also, look at this link for mobile support : http://www.mapplic.com/plugin/

I have came across quite odd situation. When I add SVG element in the container somewhere in the web page zooming in and out does not work properly. When I set absolute positioning of SVG element having it in the left and top most corner of the browser window (left: 0; top: 0) everything works as it should.

The problem also persist in all plugins DEMO pages - when you add some top-margin to the svg elements on the page, you will see what I mean when you zoom in / out.

Is there any workaround or is this behaviour fixed in new beta version?

Hi,
I'm trying to do something pretty basic but, think I'm either being a noob or missing a trick.

I have an SVG with ZDP activated, when a click click occurs on the SVG I wan't to draw a circle at the mouses x and y coordinates. What I have so far is pretty straight forward, it takes the mouses screen coordinates, and SVG's position offsets to calculate mouse location with the SVG.

I have tried a bunch of ways of trying to do this but all of them end up with the circle being drawn offset by varying amounts (depending on zoom and pan) from the actual cursor location.

Any ideas would be much appreciated.

Cheers
Chris

Hello,

I want to try and make this clear to understand hopefully not lengthy.
What I need to do is to select and SVG element (say a rect) with the mouse and without
knowing what type of svg element it is to scale or rotate the selected element in place.
I can use jQuery to get the element Id or class and that helps me to know if I have say
a rect or an image element. I will mostly work with image elements in this case. So I
need to then know how to I guess clone the image element with snap.svg or use the existing
element in snap to rotate and/or scale the size of the image using a transform. I am not
having success with this. If anyone would be will to share code on how to dynamically do that
for an SVG element I would be thankful. The other issue with this would be that I will be opening
exising SVG files and need to do the rotating and scaling. Just another consideration why this
needs to be dynamic.

Thank you all.
Kim

at least have zoom min/max limit

I'd like to have multiple instances for zpd in the same page but when i do this they both silently fail. no errors...

Has anyone tried this before?

Hi guys. I created a paper and loaded and external svg. Applied the plugin, works great.

Now, if i try to draw something on the paper, two things:

1. does not respect the paper's coordinates.
2. When panning, the new element does not follows the loaded SVG.

I bet 1 and 2 are related. Perhaps i'm missing something and i'm not implementing correctly the plugin.

I get undefined is not a function if I make the Snap() a div:

<div id="snappy"></div>

var $snappy = $("#snappy"),
    mapSnap = Snap("#snappy");

$snappy.html("");
Snap.load("http://huei90.github.io/snap.svg.zpd/lib/malaysia.svg", function (f) {
    mapSnap.append(f);
    mapSnap.zpd(); //<--- undefined is not a function
});

I was going to do a jsfiddle example but it won't load the image cross origin :(

Here is a quick workaround that should work in all browsers targeted by Snap.svg (IE 9+), though I cannot test it in IE. It is partly inspired by ThreeDubMedia's jquery.event.drag, which has a well though event code.

var zpdElement;
paper.zpd(function(err, _zpdElement) {
    zpdElement = _zpdElement;
});

/* Add the following instruction in snap.svg.zpd.js, line 264 (the mouseup handler):
     if(zpdElement.data.mouseupTime === -1) zpdElement.data.mouseupTime = Date.now();
   Add the following instruction in snap.svg.zpd.js, line 313 (the mousemove handler):
     if(zpdElement.data.state) zpdElement.data.mouseupTime = -1;
   The first records the time of the mouseup event, but only if the mouse has moved.
   The second uses -1 as a flag to tell that the mouse was moved during the "click".
*/

window.addEventListener("click", function(e) {
    // If mouseup just happened (within 5 ms), cancel the click event:
    if(e.timeStamp - zpdElement.data.mouseupTime < 5) {
        e.preventDefault();
        e.stopPropagation();
        e.stopImmediatePropagation();
        return false;
    }
}, true);   // true makes the handler acts during the capture phase !

I have come accross a very specific issue. I have a website where I have 3 different SVGs (meaning 3 different DOM elements), one under each other.
When I activate pan and zoom it seems to be working fine. But deactivating zoom (only pan set to true) seems to move the origin points of the two svgs that were off-centered when the page loaded. I have seen this behaviour on IE and Firefox, it works fine on Chrome.

I explain: when you first load the page, SVG number 1 is the "most-centered" on the view port. This svg will have normal center coordinates. However the two others won't. I made two buttons for zooming in and out. Zooming on the first one zooms to it's center, but zooming on the two others will misplace them to the bottom (sometimes even getting them out of view)
The same way, if you scroll to center the 2nd one and refresh, same problem happens, but this time the 2nd SVG will zoom normally.

SVG-images can be made responsively by using the viewBox attribute and setting it to the size of the svg content. The svg-element will then fit the content to the width its container.

Unfortunately, the snap.svg.zpd-library does currently not work as intended in this case, as it does not factor in the transformation already applied to the svg-element through the viewBox.

I am currently creating a new version of the library that will incorporate this functionality. There might though be some breaking api-changes.

Please stay tuned for more.. A beta-release can be expected next week.

Hi
on iexplorer 11 (on windows 7) the zoom in/ou using the mouse does not work.

Is a iexplorer issue or snap.svz.zpd ?

regards,

when i load zpd in chrome/opera/firefox wheel events are longer being handled by zpd...

superficial assessment is that the test in _setupHandlers is taking the 'mobile' path when it should take the 'desktop' path.

workaround is to change the 'if mobile then if desktop' structure into separate independent tests, e.g. if mobile and then independently if desktop... same change also applies to _tearDownHandlers.

Some how need someone help on building the UI to replace these buttons.

Is this possible? I'm displaying a tooltip for elements and because it doesn't scale/move with the svg, I'd like to dismiss it when those events are fired. At the moment I'm using a mousewheel jquery plugin on the svg element, but I'd like a fix for panning as well. Thanks

Hi there

I love your zpd-library. It provides some great functionality and is exactly what I was looking for to handle svg panning and zooming. However, there seems to be a strange bug with removing the mousewheel event handler when running the 'destroy' function.

The code seems to be correct, but somehow the handler does not get removed from the element (tested it on my mac on chrome, safari and firefox).

It would be great, if you had any ideas to fix the problem.

The formula for converting a point at the end of the readme is misleading in that it doesn't take into account any rotation that may be applied to the matrix. I think it would be better to at least clarify this, but even better, include the true matrix calculation formula as such:

// where mat is SVGTransform matrix obtained by paper.zpd('save') and pt is [x,y]
function pointThroughMatrix(mat, pt){
    x = mat.a*pt[0] + mat.c*pt[1] + mat.e ;
    y = mat.b*pt[0] + mat.d*pt[1] + mat.f;
    return [x,y];
}

Hope this can be integrated for more power

with a svg inside a div with fixed width , height, the pan on iexplorer (11) is strange, because the svg draw overlaps the element window;

I'm getting undefined function when I try to use zpd with an external SVG:

    var s = Snap( "#canvas" );
    Snap.load( "svg/example.svg", svg_loaded );

    function svg_loaded( data ){

        // returns 'undefined function'
        s.zpd();

        // ... do stuff
    }

Hi there,

I think that _getEventPoint() should instead use offsetX and offsetY. The reason being that in my case, I'm not using Snap/SVG fullscreen like in your demos, but instead I have a little "SVG Window" within my overall UI. In that case, the zooming in/out doesn't work right with clientX/clientY.

I tried changing to offsetX and offsetY and it works great for me. What do you think?

When I click on Zoom 1x or 2x or the third option (I can't remember what it is), nothing happens.

Hello,

I am trying to open an svg file that I saved out of snap.svg and I can save and load the file.
However, I can't do anything with it. I use the following s = Snap('#svg2');
to create the s variable. then at some poing I use s = '' or s = undefined (I tried both)
then I remove the entire SVG section and of course all content using jQuery, then I load the svg
file and add the content where it should be and it displays perfectly. However, I get a message
that s is null even after using s = Snap('#svg2') again to reintialize the variable after the
contect has successfully loaded.

Here is the code block:
s = undefined;
$('#svg2').remove();
$('#workspace').load("uploads/test.svg");
var s = Snap("#svg2");
s.zpd('init');
s.zpd({ drag: false });

I don't know how to resolved this and be able to continue working with the file I loaded in so
Snap.svg.

All help is appreciated as I really need to have this working asap.

Kim H.

I want only some elements to be draggeable. So I use Snap.svg's element.drag(). But this conflicts with the drag and pan functions from zpd.

Here is a quick workaround which prevent zpd from seeing the mousedown event when the element is managed by Snap.svg dragging code:

// Prevent zpd during a Snap.svg drag:
eve.on("snap.drag.start", function(x, y, e) {
    e.stopPropagation();
});

Note: eve is Snap.svg's integrated event library.

Color Symbolism

GREEN: Green is the color of nature. It symbolizes growth, harmony, freshness, and fertility. (Link Symbolism)

color: rgb(158, 236, 137)

Font Style

Google Font

1. Fredericka the Great
2. Waiting for the Sunrise
3. Reenie Beaniel
4. Gloria Hallelujah
5. Amatic SC
6. Berkshire Swash

<link href='http://fonts.googleapis.com/css?family=Fredericka+the+Great|Waiting+for+the+Sunrise|Reenie+Beanie|Gloria+Hallelujah|Amatic+SC|Berkshire+Swash' rel='stylesheet' type='text/css'>
<style>
.fredericka {
      font-family: 'Fredericka the Great', cursive;
    }

    .waiting {
      font-family: 'Waiting for the Sunrise', cursive;
    }

    .reenie {
      font-family: 'Reenie Beanie', cursive;
    }

    .gloria {
      font-family: 'Gloria Hallelujah', cursive;
    }

    .amatic {
      font-family: 'Amatic SC', cursive;
    }

    .berkshire {
      font-family: 'Berkshire Swash', cursive;
    }
</style>

Arrow Symbol

https://en.wikipedia.org/wiki/Arrow_(symbol)

⤮ arrow

color: rgb(134, 183, 128)

Example

@tikiatua
I found there are some issues.
https://github.com/huei90/snap.svg.zpd/blob/master/snap.svg.zpd.js#L465

If i get paper.zpd({drag: true}); first, then what if I'm going to disable the drag by using paper.zpd({drag: false});

In this case it doesn't disable on the second called.

Then I have to paper.zpd('destroy') first to reinitialize them.

The most recent version of chrome (48.0.2564.97) removes zpdElement.node.getTransformToElement which is used when creating edges.

Therefore using snap.svg.zpd in this latest beta version of Chrome throws errors like:
TypeError: zpdElement.node.getTransformToElement is not a function(…)

How best to fix this in snap.svg.zpd?

This warning has been printed on chrome 48.

'SVGElement.offsetParent' is deprecated and will be removed in M50, around April 2016. See https://www.chromestatus.com/features/5724912467574784 for more details.

When you use destroy in IE it doesn't remove the zpd.

this isn't a huge problem for most users but i discovered it as i need to destroy and immediately re load the zpd and it just takes the children from the original zpd and puts them inside a nested zpd which has the same ID.

<zpd id="my-zpd-uuid">
    <zpd  id="my-zpd-uuid">
         ...child nodes
    </zpd>
</zpd>

the reason this happens is because internet explorer doesn't understand parentElement in the _removeNodeKeepChildren function. I discovered a fix, replace parentElement with parentNode which is below.

/**
 * remove node parent but keep children
 */
var _removeNodeKeepChildren = function removeNodeKeepChildren(node) {
  if (!node.parentNode) {
    return;
  }
  while (node.firstChild) {
    node.parentNode.insertBefore(node.firstChild, node);
  }
  node.parentNode.removeChild(node);
};

cheers

Greg

Current zoomTo doesn't focus on center

I need the zoomTo origin from the center.

@tikiatua How do you think?

Hi,

when i use bower install snap.svg.zpd --save to install this plugin I get code still using obj.offsetParent to figure out the point where the mouseevent occured for zooming.

 var _findPos = function findPos(obj) {
           var curleft = curtop = 0;
           if (obj.offsetParent) {
               do {
                   curleft += obj.offsetLeft;
                   curtop += obj.offsetTop;
               } while(obj = obj.offsetParent);
           }
           return [curleft,curtop];
        };

This does return undefined in my usecase and therefore zooming is calculated to absolute coordinates and not to relative element coordinates.

I have never used bower before, so this might be expected behavior. If it is, what must i do to get the version here on github via console using bower?

@tikiatua Here's we talk about the stable version v0.1.0
which push to commit to branch beta_v0.1.0

In your threshold code, you refuse values that exceed the threshold:

if (matrix.d >= threshold[1]) {
  return;
}

This code can cause problems if:

• the mousewheel increases the zoom with large steps. For example: start=0, step=30, max=59. You will never get close to 59, you will be limited to 30.
• if I programmatically directly modify the transform attribute to apply a zoom that goes over the threshold, then I cannot zoom back with the mousewheel, it will be completely blocked.
• if you rotate the view, then matrix.d will not be your zoom factor anymore, which makes all your computations wrong. See matrix descriptions in: http://www.w3.org/TR/SVG/coords.html#EstablishingANewUserSpace

Here is a function to zoom to the bounding box of an element:

// Inspired by https://gist.github.com/mbostock/4699541
var zoomToBBox = function(elem) {
        var width = svg.node.clientWidth,
            height = svg.node.clientHeight,
            minScale = zpdElement.options.zoomThreshold[0],
            maxScale = zpdElement.options.zoomThreshold[1],
            filling = 0.9,
            bbox = elem.getBBox(),
            dx = bbox.x2 - bbox.x,
            dy = bbox.y2 - bbox.y,
            x = (bbox.x + bbox.x2) / 2,
            y = (bbox.y + bbox.y2) / 2,
            realScale = filling / Math.max(dx / width, dy / height),
            scale = Math.min(Math.max(realScale, minScale), maxScale),
            translateX = width / 2 - scale * x,
            translateY = height / 2 - scale * y,
            m = Snap.matrix(scale, 0, 0, scale, translateX, translateY);
        zpd.animate({ transform: m }, 400, mina.easeout);
    };

Notes:

• filling = 0.9: the bounding box takes at most 90% of the screen.
• doesn't account for undefined zoomThresholds.

Hello, can i zoom to specified element in svg?

Thanks
Jirka

I am currently investigating the root of the problem. But the refactored version has a memory leak issue. It is probably due to an object with circular references that is used in a mouse-event-handler closure.

Will have to do some further work on that.. Please stay tuned

Add the following code after application of zpd in demo to observe this bug:

paper.attr('style', "postion:absolute; top:300px; left:300px");

Is there a way to only enable drag on a subset of elements?

I want to have a background image that covers the whole snap object but i also need to put other elements on top which needs to be dragged independently.

Unfortunately if i set drag true and i have a background image covering the whole element it means that wherever i click zpd thinks i want to drag the bg image.

thanks

Apologies if this is really obvious or the wrong place to ask - but I've been struggling for the last few minutes on zooming and panning at the same time. It's a simple concept, let's take http://huei90.github.io/snap.svg.zpd/demo2.html as an example.

Currently you can zoom on a point with your mouse wheel, but I want to be able to click on a country and have it zoom to that country.

if I use zoomTo it's just going to an arbitrary point. Using panTo at the same time doesn't work.

I am assuming you could set a new 'center' of the zoom before zoomTo happens?

Source code says the plugin is BSD licensed. Would be nice to mention that in the README as well.

dlmanning/snap-zoompan#1 (comment)

Hello,

is there any way to retrieve the zoom coefficient on mouseWheel ? Or, in other terms, is there any way to attach an event listener to be called on each zoom (from call to zoomTo or mouseWheel action) ?

Thanks in advance,

Regards,

Can i pass offset position of SVG document to zpd events?

Or could Snap handle this?

my event.pageX in not the same as X of SVG, this effect that zoom point is not on mouse but on the right for this offset.x

I use it on https://github.com/mitjajez/SONCE/

The paper.zoomTo() function resets the view to near the top left of the view. You could fix it by using the same algorithm that for the mousewheel, by simulating the mouse pointer at the center of the view. Use svg.node.clientWidth / 2 to get the zoom center.