Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to access and call the methods for zooming #1

Open
mickey58github opened this issue May 5, 2021 · 5 comments
Open

How to access and call the methods for zooming #1

mickey58github opened this issue May 5, 2021 · 5 comments
Assignees
Labels
enhancement New feature or request

Comments

@mickey58github
Copy link

Hi, your Vue diagram editor is an excellent piece of work!
I would like to call the methods for zooming from a button in my code. I have installed your vue-diagram-editor NPM package and it works fine. Your API docs refers to the methods of package "svg-pan-zoom", but it remains unclear to me how I can invoke those methods. Could you update your API doc or paste here an example how to access this other package and call those zooming methods, like zoom() or zoomBy()?
Thanks, Michael

@max-kut
Copy link
Owner

max-kut commented May 11, 2021

Hi @mickey58github. I apologize for the delay.
Indeed, not all the mods from the "svg-pan-zoom" library have been proxied yet.
I will try to add them in the future. While you can do this hack:

if (this.$refs.diagram.$refs.diagram.spz) {
    this.$refs.diagram.$refs.diagram.spz.zoom();
}

@max-kut max-kut added the enhancement New feature or request label May 11, 2021
@max-kut max-kut self-assigned this May 11, 2021
@mickey58github
Copy link
Author

Hi, @max-kut - thanks for taking care of my question. I'll try this out - though my experience is that code that relies on $refs is sometimes unreliable, especially during initial loading of a page/component, when the $refs get assigned in some rather mysterious order and timing ;-)

@max-kut
Copy link
Owner

max-kut commented May 11, 2021

I totally agree. I think you can expand the condition a little (it's still a hack):

if (this.$refs.diagram && this.$refs.diagram.$refs.diagram &&  this.$refs.diagram.$refs.diagram.spz) {
    this.$refs.diagram.$refs.diagram.spz.zoom();
}

@mickey58github
Copy link
Author

Thanks. Honestly, I don't understand yet what these nested $refs do, like .$refs.diagram.$refs.diagram - can you elaborate on that a bit'?

@max-kut
Copy link
Owner

max-kut commented May 12, 2021

About of $refs

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants