Closed TimVanMourik closed 4 years ago
Thanks for your PR, I'll study it. It would be better to have a solution that doesn't break current users. What if we introduce a new prop called considerVieport? This give to users a way to selectevely chose if handle viewport or not. Moreover have you tested mouse events? Are click coordinates handled in the right way?
Sure, I'll rename the prop to withViewbox
!
Could you tell me what to test specifically? Whether the mouse panning behaviour is still correct? Or more than that?
I updated the PR to use the withViewBox
prop. If the viewbox is specified, the width and height are not used anymore because the viewbox also specifies width and height. Currently, there is no error or warning if that's the case. That could be included in viewer.js:619
, if desired.
Current behaviour is:
<ReactSVGPanZoom>
<svg
// width={1440}
// height={800}
withViewBox={`200, 100, 1400, 800`}
>
...
<svg>
</ReactSVGPanZoom>
I believe all events are updated correctly, fit to selection, zoom (on view center), and pan.
You can check out (a test deployment of) the application for which I'm using this component here: https://giraffe-tools-test.herokuapp.com/workflow/TimVanMourik/SomeGiraffeExample
This is already linking the update from this PR.
ping
Hi @TimVanMourik , thanks for your contribution and sorry for the delay. Here there're some change requests:
in order to reuse the standard name as defined in SVG RFC https://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute, please rename SVGViewBoxX and SVGViewBoxY with SVGMinX and SVGMinY
please move the ViewBox parser in a new file called utils/ViewBoxParser.js
https://github.com/chrvadala/react-svg-pan-zoom/blob/bfa20e9d9bbf86c38b7773e7280d55c934407f39/src/viewer.js#L106
replace the ViewBox parser with a RegExp compliant with the W3C specs
The value of the ‘viewBox’ attribute is a list of four numbers
, , and , separated by whitespace and/or a comma, https://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute
When written literally, a number is either an integer, or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits and optionally an exponent composed of "e" or "E" and an integer. It corresponds to the
production in the CSS Syntax Module [CSS3SYN]. As with integers, the first character of a number may be immediately preceded by - or + to indicate the number’s sign. https://www.w3.org/TR/css3-values/#numbers
withViewBox
again to viewBox
. Sorry for that, it wasn't clear before.Thanks for the review, @chrvadala! I fixed each of the four points in the respective commits.
pong
Sorry, this weekend I'm out... I should be able to work on it next week.. apologize for the delay
Released with version 3.3.0 @TimVanMourik and @kheyse-oqton Thanks for your work, I added you in contributors list
Nice, thanks! :D
This pull request is analogous to #88 by @kheyse-oqton but updated and merged with the latest version of this library. It facilitates the use of the
viewBox
property of the mainsvg
.FROM:
TO:
This centers the view of the main svg and the miniature around the specified viewBox.
The only obvious side effect for current users is that in the unlikely scenario that they have
viewBox
specified, the centering will be affected. This is an unlikely case, because would be an unused property in the current version of this component.