How to access and call the methods for zooming

[mickey58github]

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]

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();
}

[mickey58github]

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]

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]

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]

About of $refs