bumbu/svg-pan-zoom

Issue with updateBBox().

Open

#175 opened on Dec 13, 2015

View on GitHub
 (2 comments) (0 reactions) (0 assignees)JavaScript (1,585 stars) (383 forks)batch import
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?

Contributor guide