bumbu/svg-pan-zoom

Issue with updateBBox().

Open

#175 创建于 2015年12月13日

在 GitHub 查看
 (2 评论) (0 反应) (0 负责人)JavaScript (383 fork)batch import
bughelp wanted

仓库指标

Star
 (1,585 star)
PR 合并指标
 (30 天内没有已合并 PR)

描述

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?

贡献者指南