zoom/pan/drag plugin

[Tan Huei]

Hi all,

I have created zoom/pan/drag plugin for snap.svg call snap.svg.zpd

https://github.com/huei90/snap.svg.zpd

Hope everyone can help me test on it

[Ian]

Useful thanks, maybe worth noting that the zoom/pan doesn't seem to work in Opera (the original doesn't either, so not something you've done).

[aniary8]

Hi, Tan, That is great work.Thank you. Why don't you make a jsbin or jsfiddle example for people to play with it in different systems and browsers?

Cheers,

Allan

[Tan Huei]

Ok Sure

Wait for me.

[Volkan Unsal]

Great plugin! Just what I was looking for. I wonder if it can work for svg elements already on the page. For example, I tried this and it didn't work:

elem = Snap("#elem")

elem.zpd()

[Volkan Unsal]

Just to clarify, the #elem was the group element <g>. When I tried it with an <svg> element, it did work.

[Tan Huei]

Yes, you should try on <svg> element.

we need to zpd all the element inside in <svg>

[Tan Huei]

Hi aniary8

Here's the quick DEMO link 

http://plnkr.co/edit/fCPCkT?p=preview

[aniary8]

Thank you Tan, That is awesome! I tried that on mac osx system with safari, chrome, opera and firefox and works on all of them!

[Shawn Kuan]

Hi, Tan, I tried on iPad use safira, it doesn't work at all, but on desktop it works

[Tan Huei]

Well I will try to implement this on iOS mobile device.

Also,

I have upgrade many features in these days.

Please welcome to use it and give me some issue back.

[faiz....@gmail.com]

Thanks a lot Tan.

It seems it is easier to use transformation matrix to do these things.

[Tan Huei]

Great =)

[Kim Hovorka]

Hello Tan,

I am attempting use snap.svg.js and snap.svg.zpd.js for the first time as of yesterday
and there appears to be a problem with snap.svg.zpd.js in that only the elements that already
exist inside the <svg> tag will zoom and pan. If I dynamically added an element to snap.svg
those elements are created buy not within the <g> tag and so don't pan and zoom. How do you
make that work?

Thanks,
Kim H.

[gr...@livebreathedigital.com]

Hi Kim,

I believe if you do

paper.zpd('reinit')

after you add elements it will pick them up.

if that doesn't work

paper.zpd('destroy');
paper.zpd('init');

cheers

Greg

[Kim Hovorka]

Greg,

Thanks, the second option appears to work, but it does show me another issue now.
If I click on one of the elements I added to move it everything moves. So I suppose Zoom/Pan has to be disabled temporarily?

Thanks,
Kim

[gr...@livebreathedigital.com]

That is a problem i'm having right now as well.

you can set paper.zpd({'drag'}) and that makes all elements individually draggable.  A major floor with this is that if one of you elements covers the snap object i.e. a background image then you can never drag everything together unless you destroy it again and re init.

@Tan - is there a way to set the drag:true on a subset of elements inside the svg object?  Right now i'm adding listeners to each element, killing zpd on mousedown and init zpd on mouse up.  doesn't seem like the most efficient method though.

[Kim Hovorka]

One, other issue is that when I do the

    paper.zpd('destroy');
    paper.zpd('init');

zoom level is back out to a larger size and I need to keep the same zoom level
when adding an element.

Kim

[gr...@livebreathedigital.com]

Hi Kim,

That's an issue i'm going to run into shortly soon.

post your question here https://github.com/huei90/snap.svg.zpd

they seem to reply quicker on there.

G

[gr...@livebreathedigital.com]

document.getElementById('snapsvg-zpd-'+paper.id).appendChild(paper.circle(10,10,10).node);

this will add to your current zpd.

You will not need to init and destroy anymore.

[Tan Huei]

Thanks @greg and @Kim

I saw your issues on github, I will try to fix them ASAP.

If you can help me on giving me PR, that's will be the best =)

[Filipe Torres]

Hi Tan,

snap.svg.zpd has a forum to ask, discuss and learn to use this plugin?

[Tan Huei]

Hi @Filipe Thanks for reaching the idea.

We don't have a forum yet but you can open an issue on github (https://github.com/huei90/snap.svg.zpd). =)

[Tan Huei]

Hi @all I have updated the version to 0.0.10 which fix lot of bugs issues. hmmm....

[Philippe Carret]

Hi Tan,

Thanks for your plugin.

I've just one case that doesn't seems to work for me.:

I load a file like written below on a "<g>", all is ok since I'm trying to move an object, 

The drag of loaded object and the panning of the view seems to be uncompatible.

Is there a workaround ?

And finally : what is the way of setting options in the plugin ?

    <body>

          <script>

            var paper = Snap(15000,9000);

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

            paper.zpd();

            Snap.load("../data/exemple1-0.svg", function (f) {

                var g = f.select("g");

                paper.select("g").append(g);

                g.drag(); // <<< HERE IS THE PROBLEM

            });

        </script>

    </body>

[Tan Huei]

HI @Philippe 

Snap.load('xxxx.svg', function () {

// load zpd after snap loaded

paper.zpd();

});

[Tan Huei]

Hi all,

I have created a logo design proposal, hope getting your idea and any suggestion.

https://github.com/huei90/snap.svg.zpd/issues/46

[Vijay Kathad]

This is really a great plugin...thank you very much for sharing this.

I wanted to rotate an individual objects that are in SVG(paper) instead of rotating whole svg. How can I achieve that?

Thanks

[Tan Huei]

Unfortunately, It can't be done by using snap.svg.zpd, it's target on the whole svg for current version.