bumbu/svg-pan-zoom

Issue with updateBBox().

Open

#175 建立於 2015年12月13日

在 GitHub 查看
 (2 留言) (0 反應) (0 負責人)JavaScript (1,585 star) (383 fork)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?

貢獻者指南