bughelp wanted
Description
Hello!
It seems updateBBox() method does not work correctly when the left-top point of the SVG bounds is not (0, 0). For example, in the following sample
<svg id="test" width="600" height="250">
<rect x="30" y="30" width="100" height="100" fill="red"></rect>
</svg>
<button id="btn">Button</button>
<script>
var panZoom;
$(function () {
panZoom = svgPanZoom($('#test')[0], {
zoomEnabled: true,
panEnabled: true,
fit: true,
center: true
});
});
$('#btn').click(function () {
panZoom.updateBBox();
panZoom.fit();
panZoom.center();
});
</script>
when we click a button, the red square jumps right and down.
The updateBBox() calls viewport.recacheViewBox() which is defined as
ShadowViewport.prototype.recacheViewBox = function() {
var boundingClientRect = this.viewport.getBoundingClientRect()
, viewBoxWidth = boundingClientRect.width / this.getZoom()
, viewBoxHeight = boundingClientRect.height / this.getZoom()
// Cache viewbox
this.viewBox.x = 0
this.viewBox.y = 0
this.viewBox.width = viewBoxWidth
this.viewBox.height = viewBoxHeight
}
So, here we lose viewBox.x and .y information. IMHO, it should be
ShadowViewport.prototype.recacheViewBox = function() {
var bBox = this.viewport.getBBox();
this.viewBox.x = bBox.x;
this.viewBox.y = bBox.y;
this.viewBox.width = bBox.width;
this.viewBox.height = bBox.height;
}
What do you think?