bumbu/svg-pan-zoom

Issue with updateBBox().

Open

#175 aperta il 13 dic 2015

Vedi su GitHub
 (2 commenti) (0 reazioni) (0 assegnatari)JavaScript (383 fork)batch import
bughelp wanted

Metriche repository

Star
 (1585 star)
Metriche merge PR
 (Nessuna PR mergiata in 30 g)

Descrizione

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?

Guida contributor