From 21753e68004509bfc70f8e7be088b5445af381ca Mon Sep 17 00:00:00 2001 From: thatcher Date: Wed, 4 Jan 2012 18:14:20 -0500 Subject: [PATCH] removed psuedo private accessors and properties in favor of direct access. cleaned up some formatting for readability --- openseadragon.js | 344 ++++++++++++++++++++++++++++------------------- src/spring.js | 65 +++++---- src/viewport.js | 279 ++++++++++++++++++++++++-------------- 3 files changed, 414 insertions(+), 274 deletions(-) diff --git a/openseadragon.js b/openseadragon.js index 7f5d57b8..abee23ba 100644 --- a/openseadragon.js +++ b/openseadragon.js @@ -3061,57 +3061,54 @@ $.Spring = function( options ) { this.current = { - point: typeof ( this.initial ) == "number" ? + value: typeof ( this.initial ) == "number" ? this.initial : 0, time: new Date().getTime() // always work in milliseconds - } + }; - this.startValue = this.current.point; - this.startTime = this.current.time; + this.start = { + value: this.current.value, + time: this.current.time + }; - this.targetValue = this.current.point; - this.targetTime = this.current.time; + this.target = { + value: this.current.value, + time: this.current.time + }; }; $.Spring.prototype = { - getCurrent: function() { - return this.current.point; + + resetTo: function( target ) { + this.target.value = target; + this.target.time = this.current.time; + this.start.value = this.target.value; + this.start.time = this.target.time; }, - getTarget: function() { - return this.targetValue; + springTo: function( target ) { + this.start.value = this.current.value; + this.start.time = this.current.time; + this.target.value = target; + this.target.time = this.start.time + 1000 * this.animationTime; }, - resetTo: function(target) { - this.targetValue = target; - this.targetTime = this.current.time; - this.startValue = this.targetValue; - this.startTime = this.targetTime; - }, - - springTo: function(target) { - this.startValue = this.current.point; - this.startTime = this.current.time; - this.targetValue = target; - this.targetTime = this.startTime + 1000 * this.animationTime; - }, - - shiftBy: function(delta) { - this.startValue += delta; - this.targetValue += delta; + shiftBy: function( delta ) { + this.start.value += delta; + this.target.value += delta; }, update: function() { - this.current.time = new Date().getTime(); - this.current.point = (this.current.time >= this.targetTime) ? - this.targetValue : - this.startValue + - (this.targetValue - this.startValue) * + this.current.time = new Date().getTime(); + this.current.value = (this.current.time >= this.target.time) ? + this.target.value : + this.start.value + + ( this.target.value - this.start.value ) * transform( this.springStiffness, - (this.current.time - this.startTime) / - (this.targetTime - this.startTime) + ( this.current.time - this.start.time ) / + ( this.target.time - this.start.time ) ); } } @@ -4008,60 +4005,92 @@ function finishLoadingImage( image, callback, successful, jobid ){ $.Viewport = function(containerSize, contentSize, config) { this.zoomPoint = null; this.config = config; - this._containerSize = containerSize; - this._contentSize = contentSize; - this._contentAspect = contentSize.x / contentSize.y; - this._contentHeight = contentSize.y / contentSize.x; - this._centerSpringX = new $.Spring(0, this.config); - this._centerSpringY = new $.Spring(0, this.config); - this._zoomSpring = new $.Spring(1, this.config); - this._homeBounds = new $.Rect(0, 0, 1, this._contentHeight); + this.containerSize = containerSize; + this.contentSize = contentSize; + this.contentAspect = contentSize.x / contentSize.y; + this.contentHeight = contentSize.y / contentSize.x; + this.centerSpringX = new $.Spring({ + initial: 0, + springStiffness: config.springStiffness, + animationTime: config.animationTime + }); + this.centerSpringY = new $.Spring({ + initial: 0, + springStiffness: config.springStiffness, + animationTime: config.animationTime + }); + this.zoomSpring = new $.Spring({ + initial: 1, + springStiffness: config.springStiffness, + animationTime: config.animationTime + }); + this.minZoomImageRatio = config.minZoomImageRatio; + this.maxZoomPixelRatio = config.maxZoomPixelRatio; + this.visibilityRatio = config.visibilityRatio; + this.wrapHorizontal = config.wrapHorizontal; + this.wrapVertical = config.wrapVertical; + this.homeBounds = new $.Rect(0, 0, 1, this.contentHeight); this.goHome(true); this.update(); }; $.Viewport.prototype = { - _getHomeZoom: function() { - var aspectFactor = this._contentAspect / this.getAspectRatio(); + getHomeZoom: function() { + var aspectFactor = this.contentAspect / this.getAspectRatio(); return (aspectFactor >= 1) ? 1 : aspectFactor; }, - _getMinZoom: function() { - var homeZoom = this._getHomeZoom(); - var zoom = this.config.minZoomImageRatio * homeZoom; + getMinZoom: function() { + var homeZoom = this.getHomeZoom() + zoom = this.minZoomImageRatio * homeZoom; return Math.min(zoom, homeZoom); }, - _getMaxZoom: function() { - var zoom = this._contentSize.x * this.config.maxZoomPixelRatio / this._containerSize.x; - return Math.max(zoom, this._getHomeZoom()); + getMaxZoom: function() { + var zoom = this.contentSize.x * + this.maxZoomPixelRatio / this.containerSize.x; + return Math.max(zoom, this.getHomeZoom()); }, + getAspectRatio: function() { - return this._containerSize.x / this._containerSize.y; + return this.containerSize.x / this.containerSize.y; }, + getContainerSize: function() { - return new $.Point(this._containerSize.x, this._containerSize.y); + return new $.Point(this.containerSize.x, this.containerSize.y); }, getBounds: function(current) { - var center = this.getCenter(current); - var width = 1.0 / this.getZoom(current); - var height = width / this.getAspectRatio(); + var center = this.getCenter(current), + width = 1.0 / this.getZoom(current), + height = width / this.getAspectRatio(); - return new $.Rect(center.x - width / 2.0, center.y - height / 2.0, - width, height); + return new $.Rect( + center.x - width / 2.0, + center.y - height / 2.0, + width, + height + ); }, getCenter: function(current) { var centerCurrent = new $.Point( - this._centerSpringX.getCurrent(), - this._centerSpringY.getCurrent() - ); - var centerTarget = new $.Point( - this._centerSpringX.getTarget(), - this._centerSpringY.getTarget() - ); + this.centerSpringX.current.value, + this.centerSpringY.current.value + ), + centerTarget = new $.Point( + this.centerSpringX.target.value, + this.centerSpringY.target.value + ), + oldZoomPixel, + zoom, + width, + height, + bounds, + newZoomPixel, + deltaZoomPixels, + deltaZoomPoints; if (current) { return centerCurrent; @@ -4069,39 +4098,47 @@ $.Viewport.prototype = { return centerTarget; } - var oldZoomPixel = this.pixelFromPoint(this.zoomPoint, true); + oldZoomPixel = this.pixelFromPoint(this.zoomPoint, true); - var zoom = this.getZoom(); - var width = 1.0 / zoom; - var height = width / this.getAspectRatio(); - var bounds = new $.Rect(centerCurrent.x - width / 2.0, - centerCurrent.y - height / 2.0, width, height); + zoom = this.getZoom(); + width = 1.0 / zoom; + height = width / this.getAspectRatio(); + bounds = new $.Rect( + centerCurrent.x - width / 2.0, + centerCurrent.y - height / 2.0, + width, + height + ); - var newZoomPixel = this.zoomPoint.minus(bounds.getTopLeft()).times(this._containerSize.x / bounds.width); - var deltaZoomPixels = newZoomPixel.minus(oldZoomPixel); - var deltaZoomPoints = deltaZoomPixels.divide(this._containerSize.x * zoom); + newZoomPixel = this.zoomPoint.minus( + bounds.getTopLeft() + ).times( + this.containerSize.x / bounds.width + ); + deltaZoomPixels = newZoomPixel.minus( oldZoomPixel ); + deltaZoomPoints = deltaZoomPixels.divide( this.containerSize.x * zoom ); - return centerTarget.plus(deltaZoomPoints); + return centerTarget.plus( deltaZoomPoints ); }, getZoom: function(current) { if (current) { - return this._zoomSpring.getCurrent(); + return this.zoomSpring.current.value; } else { - return this._zoomSpring.getTarget(); + return this.zoomSpring.target.value; } }, applyConstraints: function(immediately) { var actualZoom = this.getZoom(); - var constrainedZoom = Math.max(Math.min(actualZoom, this._getMaxZoom()), this._getMinZoom()); + var constrainedZoom = Math.max(Math.min(actualZoom, this.getMaxZoom()), this.getMinZoom()); if (actualZoom != constrainedZoom) { this.zoomTo(constrainedZoom, this.zoomPoint, immediately); } var bounds = this.getBounds(); - var visibilityRatio = this.config.visibilityRatio; + var visibilityRatio = this.visibilityRatio; var horThres = visibilityRatio * bounds.width; var verThres = visibilityRatio * bounds.height; @@ -4109,10 +4146,10 @@ $.Viewport.prototype = { var left = bounds.x + bounds.width; var right = 1 - bounds.x; var top = bounds.y + bounds.height; - var bottom = this._contentHeight - bounds.y; + var bottom = this.contentHeight - bounds.y; var dx = 0; - if (this.config.wrapHorizontal) { + if ( this.wrapHorizontal ) { } else if (left < horThres) { dx = horThres - left; } else if (right < horThres) { @@ -4120,7 +4157,7 @@ $.Viewport.prototype = { } var dy = 0; - if (this.config.wrapVertical) { + if ( this.wrapVertical ) { } else if (top < verThres) { dy = verThres - top; } else if (bottom < verThres) { @@ -4139,10 +4176,19 @@ $.Viewport.prototype = { }, fitBounds: function(bounds, immediately) { - var aspect = this.getAspectRatio(); - var center = bounds.getCenter(); + var aspect = this.getAspectRatio(), + center = bounds.getCenter(), + newBounds = new $.Rect( + bounds.x, + bounds.y, + bounds.width, + bounds.height + ), + oldBounds, + oldZoom, + newZoom, + refPoint; - var newBounds = new $.Rect(bounds.x, bounds.y, bounds.width, bounds.height); if (newBounds.getAspectRatio() >= aspect) { newBounds.height = bounds.width / aspect; newBounds.y = center.y - newBounds.height / 2; @@ -4154,78 +4200,86 @@ $.Viewport.prototype = { this.panTo(this.getCenter(true), true); this.zoomTo(this.getZoom(true), null, true); - var oldBounds = this.getBounds(); - var oldZoom = this.getZoom(); - - var newZoom = 1.0 / newBounds.width; + oldBounds = this.getBounds(); + oldZoom = this.getZoom(); + newZoom = 1.0 / newBounds.width; if (newZoom == oldZoom || newBounds.width == oldBounds.width) { - this.panTo(center, immediately); + this.panTo( center, immediately ); return; } - var refPoint = oldBounds.getTopLeft().times(this._containerSize.x / oldBounds.width).minus( - newBounds.getTopLeft().times(this._containerSize.x / newBounds.width)).divide( - this._containerSize.x / oldBounds.width - this._containerSize.x / newBounds.width); + refPoint = oldBounds.getTopLeft().times( + this.containerSize.x / oldBounds.width + ).minus( + newBounds.getTopLeft().times( + this.containerSize.x / newBounds.width + ) + ).divide( + this.containerSize.x / oldBounds.width - + this.containerSize.x / newBounds.width + ); - this.zoomTo(newZoom, refPoint, immediately); + this.zoomTo( newZoom, refPoint, immediately ); }, goHome: function(immediately) { var center = this.getCenter(); - if (this.config.wrapHorizontal) { + if ( this.wrapHorizontal ) { center.x = (1 + (center.x % 1)) % 1; - this._centerSpringX.resetTo(center.x); - this._centerSpringX.update(); + this.centerSpringX.resetTo(center.x); + this.centerSpringX.update(); } - if (this.config.wrapVertical) { - center.y = (this._contentHeight + (center.y % this._contentHeight)) % this._contentHeight; - this._centerSpringY.resetTo(center.y); - this._centerSpringY.update(); + if ( this.wrapVertical ) { + center.y = (this.contentHeight + (center.y % this.contentHeight)) % this.contentHeight; + this.centerSpringY.resetTo(center.y); + this.centerSpringY.update(); } - this.fitBounds(this._homeBounds, immediately); + this.fitBounds(this.homeBounds, immediately); }, panBy: function(delta, immediately) { - var center = new $.Point(this._centerSpringX.getTarget(), - this._centerSpringY.getTarget()); - this.panTo(center.plus(delta), immediately); + var center = new $.Point( + this.centerSpringX.target.value, + this.centerSpringY.target.value + ); + this.panTo( center.plus( delta ), immediately ); }, panTo: function(center, immediately) { if (immediately) { - this._centerSpringX.resetTo(center.x); - this._centerSpringY.resetTo(center.y); + this.centerSpringX.resetTo(center.x); + this.centerSpringY.resetTo(center.y); } else { - this._centerSpringX.springTo(center.x); - this._centerSpringY.springTo(center.y); + this.centerSpringX.springTo(center.x); + this.centerSpringY.springTo(center.y); } }, zoomBy: function(factor, refPoint, immediately) { - this.zoomTo(this._zoomSpring.getTarget() * factor, refPoint, immediately); + this.zoomTo(this.zoomSpring.target.value * factor, refPoint, immediately); }, zoomTo: function(zoom, refPoint, immediately) { if (immediately) { - this._zoomSpring.resetTo(zoom); + this.zoomSpring.resetTo(zoom); } else { - this._zoomSpring.springTo(zoom); + this.zoomSpring.springTo(zoom); } this.zoomPoint = refPoint instanceof $.Point ? refPoint : null; }, resize: function(newContainerSize, maintain) { - var oldBounds = this.getBounds(); - var newBounds = oldBounds; - var widthDeltaFactor = newContainerSize.x / this._containerSize.x; + var oldBounds = this.getBounds(), + newBounds = oldBounds, + widthDeltaFactor = newContainerSize.x / this.containerSize.x; - this._containerSize = new $.Point(newContainerSize.x, newContainerSize.y); + this.containerSize = new $.Point(newContainerSize.x, newContainerSize.y); if (maintain) { newBounds.width = oldBounds.width * widthDeltaFactor; @@ -4236,52 +4290,68 @@ $.Viewport.prototype = { }, update: function() { - var oldCenterX = this._centerSpringX.getCurrent(); - var oldCenterY = this._centerSpringY.getCurrent(); - var oldZoom = this._zoomSpring.getCurrent(); + var oldCenterX = this.centerSpringX.current.value, + oldCenterY = this.centerSpringY.current.value, + oldZoom = this.zoomSpring.current.value, + oldZoomPixel, + newZoomPixel, + deltaZoomPixels, + deltaZoomPoints; if (this.zoomPoint) { - var oldZoomPixel = this.pixelFromPoint(this.zoomPoint, true); + oldZoomPixel = this.pixelFromPoint(this.zoomPoint, true); } - this._zoomSpring.update(); + this.zoomSpring.update(); - if (this.zoomPoint && this._zoomSpring.getCurrent() != oldZoom) { - var newZoomPixel = this.pixelFromPoint(this.zoomPoint, true); - var deltaZoomPixels = newZoomPixel.minus(oldZoomPixel); - var deltaZoomPoints = this.deltaPointsFromPixels(deltaZoomPixels, true); + if (this.zoomPoint && this.zoomSpring.current.value != oldZoom) { + newZoomPixel = this.pixelFromPoint( this.zoomPoint, true ); + deltaZoomPixels = newZoomPixel.minus( oldZoomPixel); + deltaZoomPoints = this.deltaPointsFromPixels( deltaZoomPixels, true ); - this._centerSpringX.shiftBy(deltaZoomPoints.x); - this._centerSpringY.shiftBy(deltaZoomPoints.y); + this.centerSpringX.shiftBy( deltaZoomPoints.x ); + this.centerSpringY.shiftBy( deltaZoomPoints.y ); } else { this.zoomPoint = null; } - this._centerSpringX.update(); - this._centerSpringY.update(); + this.centerSpringX.update(); + this.centerSpringY.update(); - return this._centerSpringX.getCurrent() != oldCenterX || - this._centerSpringY.getCurrent() != oldCenterY || - this._zoomSpring.getCurrent() != oldZoom; + return this.centerSpringX.current.value != oldCenterX || + this.centerSpringY.current.value != oldCenterY || + this.zoomSpring.current.value != oldZoom; }, deltaPixelsFromPoints: function(deltaPoints, current) { - return deltaPoints.times(this._containerSize.x * this.getZoom(current)); + return deltaPoints.times( + this.containerSize.x * this.getZoom( current ) + ); }, deltaPointsFromPixels: function(deltaPixels, current) { - return deltaPixels.divide(this._containerSize.x * this.getZoom(current)); + return deltaPixels.divide( + this.containerSize.x * this.getZoom( current ) + ); }, pixelFromPoint: function(point, current) { - var bounds = this.getBounds(current); - return point.minus(bounds.getTopLeft()).times(this._containerSize.x / bounds.width); + var bounds = this.getBounds( current ); + return point.minus( + bounds.getTopLeft() + ).times( + this.containerSize.x / bounds.width + ); }, pointFromPixel: function(pixel, current) { - var bounds = this.getBounds(current); - return pixel.divide(this._containerSize.x / bounds.width).plus(bounds.getTopLeft()); + var bounds = this.getBounds( current ); + return pixel.divide( + this.containerSize.x / bounds.width + ).plus( + bounds.getTopLeft() + ); } }; diff --git a/src/spring.js b/src/spring.js index 5ff8dc80..54634333 100644 --- a/src/spring.js +++ b/src/spring.js @@ -24,57 +24,54 @@ $.Spring = function( options ) { this.current = { - point: typeof ( this.initial ) == "number" ? + value: typeof ( this.initial ) == "number" ? this.initial : 0, time: new Date().getTime() // always work in milliseconds - } + }; - this.startValue = this.current.point; - this.startTime = this.current.time; + this.start = { + value: this.current.value, + time: this.current.time + }; - this.targetValue = this.current.point; - this.targetTime = this.current.time; + this.target = { + value: this.current.value, + time: this.current.time + }; }; $.Spring.prototype = { - getCurrent: function() { - return this.current.point; + + resetTo: function( target ) { + this.target.value = target; + this.target.time = this.current.time; + this.start.value = this.target.value; + this.start.time = this.target.time; }, - getTarget: function() { - return this.targetValue; + springTo: function( target ) { + this.start.value = this.current.value; + this.start.time = this.current.time; + this.target.value = target; + this.target.time = this.start.time + 1000 * this.animationTime; }, - resetTo: function(target) { - this.targetValue = target; - this.targetTime = this.current.time; - this.startValue = this.targetValue; - this.startTime = this.targetTime; - }, - - springTo: function(target) { - this.startValue = this.current.point; - this.startTime = this.current.time; - this.targetValue = target; - this.targetTime = this.startTime + 1000 * this.animationTime; - }, - - shiftBy: function(delta) { - this.startValue += delta; - this.targetValue += delta; + shiftBy: function( delta ) { + this.start.value += delta; + this.target.value += delta; }, update: function() { - this.current.time = new Date().getTime(); - this.current.point = (this.current.time >= this.targetTime) ? - this.targetValue : - this.startValue + - (this.targetValue - this.startValue) * + this.current.time = new Date().getTime(); + this.current.value = (this.current.time >= this.target.time) ? + this.target.value : + this.start.value + + ( this.target.value - this.start.value ) * transform( this.springStiffness, - (this.current.time - this.startTime) / - (this.targetTime - this.startTime) + ( this.current.time - this.start.time ) / + ( this.target.time - this.start.time ) ); } } diff --git a/src/viewport.js b/src/viewport.js index 42530ace..6b9fccef 100644 --- a/src/viewport.js +++ b/src/viewport.js @@ -4,60 +4,92 @@ $.Viewport = function(containerSize, contentSize, config) { this.zoomPoint = null; this.config = config; - this._containerSize = containerSize; - this._contentSize = contentSize; - this._contentAspect = contentSize.x / contentSize.y; - this._contentHeight = contentSize.y / contentSize.x; - this._centerSpringX = new $.Spring(0, this.config); - this._centerSpringY = new $.Spring(0, this.config); - this._zoomSpring = new $.Spring(1, this.config); - this._homeBounds = new $.Rect(0, 0, 1, this._contentHeight); + this.containerSize = containerSize; + this.contentSize = contentSize; + this.contentAspect = contentSize.x / contentSize.y; + this.contentHeight = contentSize.y / contentSize.x; + this.centerSpringX = new $.Spring({ + initial: 0, + springStiffness: config.springStiffness, + animationTime: config.animationTime + }); + this.centerSpringY = new $.Spring({ + initial: 0, + springStiffness: config.springStiffness, + animationTime: config.animationTime + }); + this.zoomSpring = new $.Spring({ + initial: 1, + springStiffness: config.springStiffness, + animationTime: config.animationTime + }); + this.minZoomImageRatio = config.minZoomImageRatio; + this.maxZoomPixelRatio = config.maxZoomPixelRatio; + this.visibilityRatio = config.visibilityRatio; + this.wrapHorizontal = config.wrapHorizontal; + this.wrapVertical = config.wrapVertical; + this.homeBounds = new $.Rect(0, 0, 1, this.contentHeight); this.goHome(true); this.update(); }; $.Viewport.prototype = { - _getHomeZoom: function() { - var aspectFactor = this._contentAspect / this.getAspectRatio(); + getHomeZoom: function() { + var aspectFactor = this.contentAspect / this.getAspectRatio(); return (aspectFactor >= 1) ? 1 : aspectFactor; }, - _getMinZoom: function() { - var homeZoom = this._getHomeZoom(); - var zoom = this.config.minZoomImageRatio * homeZoom; + getMinZoom: function() { + var homeZoom = this.getHomeZoom() + zoom = this.minZoomImageRatio * homeZoom; return Math.min(zoom, homeZoom); }, - _getMaxZoom: function() { - var zoom = this._contentSize.x * this.config.maxZoomPixelRatio / this._containerSize.x; - return Math.max(zoom, this._getHomeZoom()); + getMaxZoom: function() { + var zoom = this.contentSize.x * + this.maxZoomPixelRatio / this.containerSize.x; + return Math.max(zoom, this.getHomeZoom()); }, + getAspectRatio: function() { - return this._containerSize.x / this._containerSize.y; + return this.containerSize.x / this.containerSize.y; }, + getContainerSize: function() { - return new $.Point(this._containerSize.x, this._containerSize.y); + return new $.Point(this.containerSize.x, this.containerSize.y); }, getBounds: function(current) { - var center = this.getCenter(current); - var width = 1.0 / this.getZoom(current); - var height = width / this.getAspectRatio(); + var center = this.getCenter(current), + width = 1.0 / this.getZoom(current), + height = width / this.getAspectRatio(); - return new $.Rect(center.x - width / 2.0, center.y - height / 2.0, - width, height); + return new $.Rect( + center.x - width / 2.0, + center.y - height / 2.0, + width, + height + ); }, getCenter: function(current) { var centerCurrent = new $.Point( - this._centerSpringX.getCurrent(), - this._centerSpringY.getCurrent() - ); - var centerTarget = new $.Point( - this._centerSpringX.getTarget(), - this._centerSpringY.getTarget() - ); + this.centerSpringX.current.value, + this.centerSpringY.current.value + ), + centerTarget = new $.Point( + this.centerSpringX.target.value, + this.centerSpringY.target.value + ), + oldZoomPixel, + zoom, + width, + height, + bounds, + newZoomPixel, + deltaZoomPixels, + deltaZoomPoints; if (current) { return centerCurrent; @@ -65,39 +97,47 @@ $.Viewport.prototype = { return centerTarget; } - var oldZoomPixel = this.pixelFromPoint(this.zoomPoint, true); + oldZoomPixel = this.pixelFromPoint(this.zoomPoint, true); - var zoom = this.getZoom(); - var width = 1.0 / zoom; - var height = width / this.getAspectRatio(); - var bounds = new $.Rect(centerCurrent.x - width / 2.0, - centerCurrent.y - height / 2.0, width, height); + zoom = this.getZoom(); + width = 1.0 / zoom; + height = width / this.getAspectRatio(); + bounds = new $.Rect( + centerCurrent.x - width / 2.0, + centerCurrent.y - height / 2.0, + width, + height + ); - var newZoomPixel = this.zoomPoint.minus(bounds.getTopLeft()).times(this._containerSize.x / bounds.width); - var deltaZoomPixels = newZoomPixel.minus(oldZoomPixel); - var deltaZoomPoints = deltaZoomPixels.divide(this._containerSize.x * zoom); + newZoomPixel = this.zoomPoint.minus( + bounds.getTopLeft() + ).times( + this.containerSize.x / bounds.width + ); + deltaZoomPixels = newZoomPixel.minus( oldZoomPixel ); + deltaZoomPoints = deltaZoomPixels.divide( this.containerSize.x * zoom ); - return centerTarget.plus(deltaZoomPoints); + return centerTarget.plus( deltaZoomPoints ); }, getZoom: function(current) { if (current) { - return this._zoomSpring.getCurrent(); + return this.zoomSpring.current.value; } else { - return this._zoomSpring.getTarget(); + return this.zoomSpring.target.value; } }, applyConstraints: function(immediately) { var actualZoom = this.getZoom(); - var constrainedZoom = Math.max(Math.min(actualZoom, this._getMaxZoom()), this._getMinZoom()); + var constrainedZoom = Math.max(Math.min(actualZoom, this.getMaxZoom()), this.getMinZoom()); if (actualZoom != constrainedZoom) { this.zoomTo(constrainedZoom, this.zoomPoint, immediately); } var bounds = this.getBounds(); - var visibilityRatio = this.config.visibilityRatio; + var visibilityRatio = this.visibilityRatio; var horThres = visibilityRatio * bounds.width; var verThres = visibilityRatio * bounds.height; @@ -105,10 +145,10 @@ $.Viewport.prototype = { var left = bounds.x + bounds.width; var right = 1 - bounds.x; var top = bounds.y + bounds.height; - var bottom = this._contentHeight - bounds.y; + var bottom = this.contentHeight - bounds.y; var dx = 0; - if (this.config.wrapHorizontal) { + if ( this.wrapHorizontal ) { } else if (left < horThres) { dx = horThres - left; } else if (right < horThres) { @@ -116,7 +156,7 @@ $.Viewport.prototype = { } var dy = 0; - if (this.config.wrapVertical) { + if ( this.wrapVertical ) { } else if (top < verThres) { dy = verThres - top; } else if (bottom < verThres) { @@ -135,10 +175,19 @@ $.Viewport.prototype = { }, fitBounds: function(bounds, immediately) { - var aspect = this.getAspectRatio(); - var center = bounds.getCenter(); + var aspect = this.getAspectRatio(), + center = bounds.getCenter(), + newBounds = new $.Rect( + bounds.x, + bounds.y, + bounds.width, + bounds.height + ), + oldBounds, + oldZoom, + newZoom, + refPoint; - var newBounds = new $.Rect(bounds.x, bounds.y, bounds.width, bounds.height); if (newBounds.getAspectRatio() >= aspect) { newBounds.height = bounds.width / aspect; newBounds.y = center.y - newBounds.height / 2; @@ -150,78 +199,86 @@ $.Viewport.prototype = { this.panTo(this.getCenter(true), true); this.zoomTo(this.getZoom(true), null, true); - var oldBounds = this.getBounds(); - var oldZoom = this.getZoom(); - - var newZoom = 1.0 / newBounds.width; + oldBounds = this.getBounds(); + oldZoom = this.getZoom(); + newZoom = 1.0 / newBounds.width; if (newZoom == oldZoom || newBounds.width == oldBounds.width) { - this.panTo(center, immediately); + this.panTo( center, immediately ); return; } - var refPoint = oldBounds.getTopLeft().times(this._containerSize.x / oldBounds.width).minus( - newBounds.getTopLeft().times(this._containerSize.x / newBounds.width)).divide( - this._containerSize.x / oldBounds.width - this._containerSize.x / newBounds.width); + refPoint = oldBounds.getTopLeft().times( + this.containerSize.x / oldBounds.width + ).minus( + newBounds.getTopLeft().times( + this.containerSize.x / newBounds.width + ) + ).divide( + this.containerSize.x / oldBounds.width - + this.containerSize.x / newBounds.width + ); - this.zoomTo(newZoom, refPoint, immediately); + this.zoomTo( newZoom, refPoint, immediately ); }, goHome: function(immediately) { var center = this.getCenter(); - if (this.config.wrapHorizontal) { + if ( this.wrapHorizontal ) { center.x = (1 + (center.x % 1)) % 1; - this._centerSpringX.resetTo(center.x); - this._centerSpringX.update(); + this.centerSpringX.resetTo(center.x); + this.centerSpringX.update(); } - if (this.config.wrapVertical) { - center.y = (this._contentHeight + (center.y % this._contentHeight)) % this._contentHeight; - this._centerSpringY.resetTo(center.y); - this._centerSpringY.update(); + if ( this.wrapVertical ) { + center.y = (this.contentHeight + (center.y % this.contentHeight)) % this.contentHeight; + this.centerSpringY.resetTo(center.y); + this.centerSpringY.update(); } - this.fitBounds(this._homeBounds, immediately); + this.fitBounds(this.homeBounds, immediately); }, panBy: function(delta, immediately) { - var center = new $.Point(this._centerSpringX.getTarget(), - this._centerSpringY.getTarget()); - this.panTo(center.plus(delta), immediately); + var center = new $.Point( + this.centerSpringX.target.value, + this.centerSpringY.target.value + ); + this.panTo( center.plus( delta ), immediately ); }, panTo: function(center, immediately) { if (immediately) { - this._centerSpringX.resetTo(center.x); - this._centerSpringY.resetTo(center.y); + this.centerSpringX.resetTo(center.x); + this.centerSpringY.resetTo(center.y); } else { - this._centerSpringX.springTo(center.x); - this._centerSpringY.springTo(center.y); + this.centerSpringX.springTo(center.x); + this.centerSpringY.springTo(center.y); } }, zoomBy: function(factor, refPoint, immediately) { - this.zoomTo(this._zoomSpring.getTarget() * factor, refPoint, immediately); + this.zoomTo(this.zoomSpring.target.value * factor, refPoint, immediately); }, zoomTo: function(zoom, refPoint, immediately) { if (immediately) { - this._zoomSpring.resetTo(zoom); + this.zoomSpring.resetTo(zoom); } else { - this._zoomSpring.springTo(zoom); + this.zoomSpring.springTo(zoom); } this.zoomPoint = refPoint instanceof $.Point ? refPoint : null; }, resize: function(newContainerSize, maintain) { - var oldBounds = this.getBounds(); - var newBounds = oldBounds; - var widthDeltaFactor = newContainerSize.x / this._containerSize.x; + var oldBounds = this.getBounds(), + newBounds = oldBounds, + widthDeltaFactor = newContainerSize.x / this.containerSize.x; - this._containerSize = new $.Point(newContainerSize.x, newContainerSize.y); + this.containerSize = new $.Point(newContainerSize.x, newContainerSize.y); if (maintain) { newBounds.width = oldBounds.width * widthDeltaFactor; @@ -232,52 +289,68 @@ $.Viewport.prototype = { }, update: function() { - var oldCenterX = this._centerSpringX.getCurrent(); - var oldCenterY = this._centerSpringY.getCurrent(); - var oldZoom = this._zoomSpring.getCurrent(); + var oldCenterX = this.centerSpringX.current.value, + oldCenterY = this.centerSpringY.current.value, + oldZoom = this.zoomSpring.current.value, + oldZoomPixel, + newZoomPixel, + deltaZoomPixels, + deltaZoomPoints; if (this.zoomPoint) { - var oldZoomPixel = this.pixelFromPoint(this.zoomPoint, true); + oldZoomPixel = this.pixelFromPoint(this.zoomPoint, true); } - this._zoomSpring.update(); + this.zoomSpring.update(); - if (this.zoomPoint && this._zoomSpring.getCurrent() != oldZoom) { - var newZoomPixel = this.pixelFromPoint(this.zoomPoint, true); - var deltaZoomPixels = newZoomPixel.minus(oldZoomPixel); - var deltaZoomPoints = this.deltaPointsFromPixels(deltaZoomPixels, true); + if (this.zoomPoint && this.zoomSpring.current.value != oldZoom) { + newZoomPixel = this.pixelFromPoint( this.zoomPoint, true ); + deltaZoomPixels = newZoomPixel.minus( oldZoomPixel); + deltaZoomPoints = this.deltaPointsFromPixels( deltaZoomPixels, true ); - this._centerSpringX.shiftBy(deltaZoomPoints.x); - this._centerSpringY.shiftBy(deltaZoomPoints.y); + this.centerSpringX.shiftBy( deltaZoomPoints.x ); + this.centerSpringY.shiftBy( deltaZoomPoints.y ); } else { this.zoomPoint = null; } - this._centerSpringX.update(); - this._centerSpringY.update(); + this.centerSpringX.update(); + this.centerSpringY.update(); - return this._centerSpringX.getCurrent() != oldCenterX || - this._centerSpringY.getCurrent() != oldCenterY || - this._zoomSpring.getCurrent() != oldZoom; + return this.centerSpringX.current.value != oldCenterX || + this.centerSpringY.current.value != oldCenterY || + this.zoomSpring.current.value != oldZoom; }, deltaPixelsFromPoints: function(deltaPoints, current) { - return deltaPoints.times(this._containerSize.x * this.getZoom(current)); + return deltaPoints.times( + this.containerSize.x * this.getZoom( current ) + ); }, deltaPointsFromPixels: function(deltaPixels, current) { - return deltaPixels.divide(this._containerSize.x * this.getZoom(current)); + return deltaPixels.divide( + this.containerSize.x * this.getZoom( current ) + ); }, pixelFromPoint: function(point, current) { - var bounds = this.getBounds(current); - return point.minus(bounds.getTopLeft()).times(this._containerSize.x / bounds.width); + var bounds = this.getBounds( current ); + return point.minus( + bounds.getTopLeft() + ).times( + this.containerSize.x / bounds.width + ); }, pointFromPixel: function(pixel, current) { - var bounds = this.getBounds(current); - return pixel.divide(this._containerSize.x / bounds.width).plus(bounds.getTopLeft()); + var bounds = this.getBounds( current ); + return pixel.divide( + this.containerSize.x / bounds.width + ).plus( + bounds.getTopLeft() + ); } };