finished cleaning up Viewport methods

This commit is contained in:
thatcher 2012-01-04 19:45:47 -05:00
parent 21753e6800
commit 8f67eb6f14
2 changed files with 108 additions and 80 deletions

View File

@ -4003,8 +4003,10 @@ function finishLoadingImage( image, callback, successful, jobid ){
(function( $ ){ (function( $ ){
$.Viewport = function(containerSize, contentSize, config) { $.Viewport = function(containerSize, contentSize, config) {
this.zoomPoint = null; //TODO: this.config is something that should go away but currently the
// Drawer references the viewport.config
this.config = config; this.config = config;
this.zoomPoint = null;
this.containerSize = containerSize; this.containerSize = containerSize;
this.contentSize = contentSize; this.contentSize = contentSize;
this.contentAspect = contentSize.x / contentSize.y; this.contentAspect = contentSize.x / contentSize.y;
@ -4029,8 +4031,8 @@ $.Viewport = function(containerSize, contentSize, config) {
this.visibilityRatio = config.visibilityRatio; this.visibilityRatio = config.visibilityRatio;
this.wrapHorizontal = config.wrapHorizontal; this.wrapHorizontal = config.wrapHorizontal;
this.wrapVertical = config.wrapVertical; this.wrapVertical = config.wrapVertical;
this.homeBounds = new $.Rect(0, 0, 1, this.contentHeight); this.homeBounds = new $.Rect( 0, 0, 1, this.contentHeight );
this.goHome(true); this.goHome( true );
this.update(); this.update();
}; };
@ -4061,7 +4063,7 @@ $.Viewport.prototype = {
return new $.Point(this.containerSize.x, this.containerSize.y); return new $.Point(this.containerSize.x, this.containerSize.y);
}, },
getBounds: function(current) { getBounds: function( current ) {
var center = this.getCenter(current), var center = this.getCenter(current),
width = 1.0 / this.getZoom(current), width = 1.0 / this.getZoom(current),
height = width / this.getAspectRatio(); height = width / this.getAspectRatio();
@ -4074,7 +4076,7 @@ $.Viewport.prototype = {
); );
}, },
getCenter: function(current) { getCenter: function( current ) {
var centerCurrent = new $.Point( var centerCurrent = new $.Point(
this.centerSpringX.current.value, this.centerSpringX.current.value,
this.centerSpringY.current.value this.centerSpringY.current.value
@ -4121,8 +4123,8 @@ $.Viewport.prototype = {
return centerTarget.plus( deltaZoomPoints ); return centerTarget.plus( deltaZoomPoints );
}, },
getZoom: function(current) { getZoom: function( current ) {
if (current) { if ( current ) {
return this.zoomSpring.current.value; return this.zoomSpring.current.value;
} else { } else {
return this.zoomSpring.target.value; return this.zoomSpring.target.value;
@ -4130,52 +4132,64 @@ $.Viewport.prototype = {
}, },
applyConstraints: function(immediately) { applyConstraints: function( immediately ) {
var actualZoom = this.getZoom(); var actualZoom = this.getZoom(),
var constrainedZoom = Math.max(Math.min(actualZoom, this.getMaxZoom()), this.getMinZoom()); constrainedZoom = Math.max(
if (actualZoom != constrainedZoom) { Math.min( actualZoom, this.getMaxZoom() ),
this.zoomTo(constrainedZoom, this.zoomPoint, immediately); this.getMinZoom()
),
bounds,
horizontalThreshold,
verticalThreshold,
left,
right,
top,
bottom,
dx = 0,
dy = 0;
if ( actualZoom != constrainedZoom ) {
this.zoomTo( constrainedZoom, this.zoomPoint, immediately );
} }
var bounds = this.getBounds(); bounds = this.getBounds();
var visibilityRatio = this.visibilityRatio;
var horThres = visibilityRatio * bounds.width; horizontalThreshold = this.visibilityRatio * bounds.width;
var verThres = visibilityRatio * bounds.height; verticalThreshold = this.visibilityRatio * bounds.height;
var left = bounds.x + bounds.width; left = bounds.x + bounds.width;
var right = 1 - bounds.x; right = 1 - bounds.x;
var top = bounds.y + bounds.height; top = bounds.y + bounds.height;
var bottom = this.contentHeight - bounds.y; bottom = this.contentHeight - bounds.y;
var dx = 0;
if ( this.wrapHorizontal ) { if ( this.wrapHorizontal ) {
} else if (left < horThres) { //do nothing
dx = horThres - left; } else if ( left < horizontalThreshold ) {
} else if (right < horThres) { dx = horizontalThreshold - left;
dx = right - horThres; } else if ( right < horizontalThreshold ) {
dx = right - horizontalThreshold;
} }
var dy = 0;
if ( this.wrapVertical ) { if ( this.wrapVertical ) {
} else if (top < verThres) { //do nothing
dy = verThres - top; } else if ( top < verticalThreshold ) {
} else if (bottom < verThres) { dy = verticalThreshold - top;
dy = bottom - verThres; } else if ( bottom < verticalThreshold ) {
dy = bottom - verticalThreshold;
} }
if (dx || dy) { if ( dx || dy ) {
bounds.x += dx; bounds.x += dx;
bounds.y += dy; bounds.y += dy;
this.fitBounds(bounds, immediately); this.fitBounds( bounds, immediately );
} }
}, },
ensureVisible: function(immediately) { ensureVisible: function( immediately ) {
this.applyConstraints(immediately); this.applyConstraints( immediately );
}, },
fitBounds: function(bounds, immediately) { fitBounds: function( bounds, immediately ) {
var aspect = this.getAspectRatio(), var aspect = this.getAspectRatio(),
center = bounds.getCenter(), center = bounds.getCenter(),
newBounds = new $.Rect( newBounds = new $.Rect(
@ -4187,14 +4201,14 @@ $.Viewport.prototype = {
oldBounds, oldBounds,
oldZoom, oldZoom,
newZoom, newZoom,
refPoint; referencePoint;
if (newBounds.getAspectRatio() >= aspect) { if (newBounds.getAspectRatio() >= aspect) {
newBounds.height = bounds.width / aspect; newBounds.height = bounds.width / aspect;
newBounds.y = center.y - newBounds.height / 2; newBounds.y = center.y - newBounds.height / 2;
} else { } else {
newBounds.width = bounds.height * aspect; newBounds.width = bounds.height * aspect;
newBounds.x = center.x - newBounds.width / 2; newBounds.x = center.x - newBounds.width / 2;
} }
this.panTo(this.getCenter(true), true); this.panTo(this.getCenter(true), true);
@ -4208,7 +4222,7 @@ $.Viewport.prototype = {
return; return;
} }
refPoint = oldBounds.getTopLeft().times( referencePoint = oldBounds.getTopLeft().times(
this.containerSize.x / oldBounds.width this.containerSize.x / oldBounds.width
).minus( ).minus(
newBounds.getTopLeft().times( newBounds.getTopLeft().times(
@ -4220,7 +4234,7 @@ $.Viewport.prototype = {
); );
this.zoomTo( newZoom, refPoint, immediately ); this.zoomTo( newZoom, referencePoint, immediately );
}, },
goHome: function(immediately) { goHome: function(immediately) {

View File

@ -2,8 +2,10 @@
(function( $ ){ (function( $ ){
$.Viewport = function(containerSize, contentSize, config) { $.Viewport = function(containerSize, contentSize, config) {
this.zoomPoint = null; //TODO: this.config is something that should go away but currently the
// Drawer references the viewport.config
this.config = config; this.config = config;
this.zoomPoint = null;
this.containerSize = containerSize; this.containerSize = containerSize;
this.contentSize = contentSize; this.contentSize = contentSize;
this.contentAspect = contentSize.x / contentSize.y; this.contentAspect = contentSize.x / contentSize.y;
@ -28,8 +30,8 @@ $.Viewport = function(containerSize, contentSize, config) {
this.visibilityRatio = config.visibilityRatio; this.visibilityRatio = config.visibilityRatio;
this.wrapHorizontal = config.wrapHorizontal; this.wrapHorizontal = config.wrapHorizontal;
this.wrapVertical = config.wrapVertical; this.wrapVertical = config.wrapVertical;
this.homeBounds = new $.Rect(0, 0, 1, this.contentHeight); this.homeBounds = new $.Rect( 0, 0, 1, this.contentHeight );
this.goHome(true); this.goHome( true );
this.update(); this.update();
}; };
@ -60,7 +62,7 @@ $.Viewport.prototype = {
return new $.Point(this.containerSize.x, this.containerSize.y); return new $.Point(this.containerSize.x, this.containerSize.y);
}, },
getBounds: function(current) { getBounds: function( current ) {
var center = this.getCenter(current), var center = this.getCenter(current),
width = 1.0 / this.getZoom(current), width = 1.0 / this.getZoom(current),
height = width / this.getAspectRatio(); height = width / this.getAspectRatio();
@ -73,7 +75,7 @@ $.Viewport.prototype = {
); );
}, },
getCenter: function(current) { getCenter: function( current ) {
var centerCurrent = new $.Point( var centerCurrent = new $.Point(
this.centerSpringX.current.value, this.centerSpringX.current.value,
this.centerSpringY.current.value this.centerSpringY.current.value
@ -120,8 +122,8 @@ $.Viewport.prototype = {
return centerTarget.plus( deltaZoomPoints ); return centerTarget.plus( deltaZoomPoints );
}, },
getZoom: function(current) { getZoom: function( current ) {
if (current) { if ( current ) {
return this.zoomSpring.current.value; return this.zoomSpring.current.value;
} else { } else {
return this.zoomSpring.target.value; return this.zoomSpring.target.value;
@ -129,52 +131,64 @@ $.Viewport.prototype = {
}, },
applyConstraints: function(immediately) { applyConstraints: function( immediately ) {
var actualZoom = this.getZoom(); var actualZoom = this.getZoom(),
var constrainedZoom = Math.max(Math.min(actualZoom, this.getMaxZoom()), this.getMinZoom()); constrainedZoom = Math.max(
if (actualZoom != constrainedZoom) { Math.min( actualZoom, this.getMaxZoom() ),
this.zoomTo(constrainedZoom, this.zoomPoint, immediately); this.getMinZoom()
),
bounds,
horizontalThreshold,
verticalThreshold,
left,
right,
top,
bottom,
dx = 0,
dy = 0;
if ( actualZoom != constrainedZoom ) {
this.zoomTo( constrainedZoom, this.zoomPoint, immediately );
} }
var bounds = this.getBounds(); bounds = this.getBounds();
var visibilityRatio = this.visibilityRatio;
var horThres = visibilityRatio * bounds.width; horizontalThreshold = this.visibilityRatio * bounds.width;
var verThres = visibilityRatio * bounds.height; verticalThreshold = this.visibilityRatio * bounds.height;
var left = bounds.x + bounds.width; left = bounds.x + bounds.width;
var right = 1 - bounds.x; right = 1 - bounds.x;
var top = bounds.y + bounds.height; top = bounds.y + bounds.height;
var bottom = this.contentHeight - bounds.y; bottom = this.contentHeight - bounds.y;
var dx = 0;
if ( this.wrapHorizontal ) { if ( this.wrapHorizontal ) {
} else if (left < horThres) { //do nothing
dx = horThres - left; } else if ( left < horizontalThreshold ) {
} else if (right < horThres) { dx = horizontalThreshold - left;
dx = right - horThres; } else if ( right < horizontalThreshold ) {
dx = right - horizontalThreshold;
} }
var dy = 0;
if ( this.wrapVertical ) { if ( this.wrapVertical ) {
} else if (top < verThres) { //do nothing
dy = verThres - top; } else if ( top < verticalThreshold ) {
} else if (bottom < verThres) { dy = verticalThreshold - top;
dy = bottom - verThres; } else if ( bottom < verticalThreshold ) {
dy = bottom - verticalThreshold;
} }
if (dx || dy) { if ( dx || dy ) {
bounds.x += dx; bounds.x += dx;
bounds.y += dy; bounds.y += dy;
this.fitBounds(bounds, immediately); this.fitBounds( bounds, immediately );
} }
}, },
ensureVisible: function(immediately) { ensureVisible: function( immediately ) {
this.applyConstraints(immediately); this.applyConstraints( immediately );
}, },
fitBounds: function(bounds, immediately) { fitBounds: function( bounds, immediately ) {
var aspect = this.getAspectRatio(), var aspect = this.getAspectRatio(),
center = bounds.getCenter(), center = bounds.getCenter(),
newBounds = new $.Rect( newBounds = new $.Rect(
@ -186,14 +200,14 @@ $.Viewport.prototype = {
oldBounds, oldBounds,
oldZoom, oldZoom,
newZoom, newZoom,
refPoint; referencePoint;
if (newBounds.getAspectRatio() >= aspect) { if (newBounds.getAspectRatio() >= aspect) {
newBounds.height = bounds.width / aspect; newBounds.height = bounds.width / aspect;
newBounds.y = center.y - newBounds.height / 2; newBounds.y = center.y - newBounds.height / 2;
} else { } else {
newBounds.width = bounds.height * aspect; newBounds.width = bounds.height * aspect;
newBounds.x = center.x - newBounds.width / 2; newBounds.x = center.x - newBounds.width / 2;
} }
this.panTo(this.getCenter(true), true); this.panTo(this.getCenter(true), true);
@ -207,7 +221,7 @@ $.Viewport.prototype = {
return; return;
} }
refPoint = oldBounds.getTopLeft().times( referencePoint = oldBounds.getTopLeft().times(
this.containerSize.x / oldBounds.width this.containerSize.x / oldBounds.width
).minus( ).minus(
newBounds.getTopLeft().times( newBounds.getTopLeft().times(
@ -219,7 +233,7 @@ $.Viewport.prototype = {
); );
this.zoomTo( newZoom, refPoint, immediately ); this.zoomTo( newZoom, referencePoint, immediately );
}, },
goHome: function(immediately) { goHome: function(immediately) {