Add the ability to zoom in and pan around the SVG diagram. #309
Conversation
|
@dirkgroot Would love to get your input on this early stage concept. |
…r height can be set.
|
Found a better SVG Zooming library that gives me the ability to zoom within the svg's container and add control buttons but lost the ability to require the control key to be held down to zoom with mouse. |
|
Still working on this functionality. I moved the Pan/Zoom version of the SVG to a modal. I was unhappy with how having it directly on the page was interfering with normal site usage as you couldn't;t scroll up/down the page when the mouse was over the svg area. I still need to figure out a good style for the 'zoom' button that surfaces the modal. For the modal itself I used the built in Bulma CSS's modal and their sample JS so that additional resources would not have to be added to the site. I also added a new property to the DSL to allow users to enable/disable this functionality. When disabled (default) the JS for the modal and pan/zoom are excluded from the generated html. @dirkgroot @jp7677 Any feedback? |
# Conflicts: # README.md # src/main/kotlin/nl/avisi/structurizr/site/generatr/site/model/PageViewModel.kt # src/main/kotlin/nl/avisi/structurizr/site/generatr/site/views/Page.kt
|
here is what I did for the positioning of the 'zoom/pan' button that opens the modal window. I split the caption on the diagram in to two lines, first for the diagram title and the second for the download links. When the Zoom feature is enabled the extra link is added to the list.
|
# Conflicts: # README.md # src/main/kotlin/nl/avisi/structurizr/site/generatr/site/SiteGenerator.kt # src/main/kotlin/nl/avisi/structurizr/site/generatr/site/views/Page.kt
# Conflicts: # src/test/kotlin/nl/avisi/structurizr/site/generatr/site/model/MarkdownToHtmlTest.kt
|
@jp7677 Much appreciated & I have setup the browser dependency as requested. |
Fixed a few errant whitespace issues.
Added the ability to zoom in on a part of a diagram.
Still to do : Add button(s) to control zoom under the sag, add button to reset to original size, add some sort of bounding box so that the zoomed element doesn't take over the full screen.