bumbu/svg-pan-zoom

Issue with updateBBox().

Open

#175 opened on 2015年12月13日

GitHub で見る
 (2 comments) (0 reactions) (0 assignees)JavaScript (1,585 stars) (383 forks)batch import
bughelp wanted

説明

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?

コントリビューターガイド