search

bumbu / svg-pan-zoom

JavaScript library that enables panning and zooming of an SVG in an HTML document, with mouse events or custom JavaScript hooks
https://github.com/ariutta/svg-pan-zoom#demos
BSD 2-Clause "Simplified" License
1.76k stars 389 forks source link

Zoom to fit the selection #401

Closed leoheck closed 3 years ago

leoheck commented 3 years ago

Hey @ariutta, quick question. Is it possible to make zoom fit the selection? Do you have any examples of this?

wassfila commented 3 years ago

There is already a function to zoom on the dbl clicked area enabled with the parameter dblClickZoomEnabled: true Is that what you're looking for ? Cause I don't think you can select the text in the SVG no ? Or maybe you'd like to give a text as argument and have the SVG zoom into it ? Cause that's actually what I developed here, and even with a CSS transition zoom and animated svg morphology filter to highlight the text https://www.homesmartmesh.com/docs/microcontrollers/nrf52/thread_sensortag/?svg=nrf52-sensor-tag&text=VEML6030

leoheck commented 3 years ago

Hey @wassfila, what I wanted to do is to fit the zoom, by drawing an are with the mouse. Something like zoom to fit the selection.

wassfila commented 3 years ago

I see, then actually you might have to collect the mouse down and mouse up yourself and then take it from there to identify the zoom center and ratio. You might have to deal with inconsistent aspect ratio of the selection not matching that of the viewport, so you could arbitrarily stick to the width, height or average. I'm not aware that the library can do that out of the box, but maybe others know more. Would collecting mouse down and mouse up be feasible for you, and would you want to add a drawing of darker or highlight of the selected area ? Cause that's slowly becoming a tool dev which probably was not the scope of this but would be a cool feature. Also it's either me or I don't understand how could the user draw a selection if mouse down and pan result in pan so can't actually perform a selection, or is that for the case of disabled pan only ?

leoheck commented 3 years ago

I will take your route then. Since you said it has to be used with a server I am going to find one to give it a try. Oh, I remember that in the past I was using this with a webserver created in python.