mirror of
https://github.com/openseadragon/openseadragon.git
synced 2024-11-22 05:06:09 +03:00
fixing some work in progress for collections visualizations
This commit is contained in:
thatcher
parent
ae30208b36
commit
063bce8171
@ -3677,6 +3677,7 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
|
||||
contentSize: this.source.dimensions,
|
||||
springStiffness: this.springStiffness,
|
||||
animationTime: this.animationTime,
|
||||
showNavigator: false,
|
||||
minZoomImageRatio: 1,
|
||||
maxZoomPixelRatio: 1
|
||||
});
|
||||
@ -3731,14 +3732,14 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
|
||||
immediateRender: this.immediateRender,
|
||||
blendTime: this.blendTime,
|
||||
alwaysBlend: this.alwaysBlend,
|
||||
minPixelRatio: this.minPixelRatio,
|
||||
minPixelRatio: this.collectionMode ? 0 : this.minPixelRatio,
|
||||
timeout: this.timeout,
|
||||
debugMode: this.debugMode,
|
||||
debugGridColor: this.debugGridColor
|
||||
});
|
||||
|
||||
//Instantiate a navigator if configured
|
||||
if ( this.showNavigator && ! this.navigator ){
|
||||
if ( this.showNavigator && ! this.navigator && !this.collectionMode ){
|
||||
this.navigator = new $.Navigator({
|
||||
id: this.navigatorElement,
|
||||
position: this.navigatorPosition,
|
||||
@ -7675,35 +7676,48 @@ $.Tile.prototype = {
|
||||
}
|
||||
|
||||
if ( !this.element ) {
|
||||
this.element = $.makeNeutralElement("img");
|
||||
this.element.src = this.url;
|
||||
this.style = this.element.style;
|
||||
this.element = $.makeNeutralElement("img");
|
||||
this.element.src = this.url;
|
||||
|
||||
this.style = this.element.style;
|
||||
this.style.position = "absolute";
|
||||
this.style.msInterpolationMode = "nearest-neighbor";
|
||||
}
|
||||
|
||||
|
||||
if ( this.element.parentNode != container ) {
|
||||
container.appendChild( this.element );
|
||||
}
|
||||
|
||||
this.style.top = position.y + "px";
|
||||
this.style.left = position.x + "px";
|
||||
this.style.height = size.y + "px";
|
||||
this.style.width = size.x + "px";
|
||||
this.style.height = size.y + "px";
|
||||
this.style.width = size.x + "px";
|
||||
|
||||
//this.style.right = ( containerSize.x - position.x ) + "px";
|
||||
//this.style.bottom = ( containerSize.y - position.y ) + "px";
|
||||
|
||||
//when the entire container is filled by a single tile we need
|
||||
//some additional stickyness so when animating container size
|
||||
//the image stays fixed in position
|
||||
//this.element.style.width = ( size.x / containerSize.x ) * 100 + "%";
|
||||
//this.element.style.height = ( size.y / containerSize.y ) * 100 + "%";
|
||||
//EXPERIMENTAL - trying to figure out how to scale the container
|
||||
// content during animation of the container size.
|
||||
/*
|
||||
if ( !this.element ) {
|
||||
this.element = $.makeNeutralElement("div");
|
||||
this.image = $.makeNeutralElement("img");
|
||||
this.image.src = this.url;
|
||||
this.image.style.height = '100%';
|
||||
this.image.style.width = '100%';
|
||||
this.image.style.msInterpolationMode = "nearest-neighbor";
|
||||
this.element.appendChild( this.image );
|
||||
|
||||
this.style = this.element.style;
|
||||
this.style.position = "absolute";
|
||||
}
|
||||
this.style.right = "0px";
|
||||
this.style.bottom = "0px";
|
||||
if ( size.y == containerSize.y || size.x == containerSize.x ){
|
||||
this.style.right = position.x + "px";
|
||||
this.style.bottom = position.y + "px";
|
||||
}
|
||||
*/
|
||||
$.setElementOpacity( this.element, this.opacity );
|
||||
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
@ -7726,6 +7740,7 @@ $.Tile.prototype = {
|
||||
context.globalAlpha = this.opacity;
|
||||
|
||||
context.save();
|
||||
|
||||
if( context.globalAlpha == 1 && this.image.src.match('.png') ){
|
||||
|
||||
context.clearRect(
|
||||
@ -8569,12 +8584,17 @@ function getTile( x, y, level, tileSource, tilesMatrix, time, numTiles, normHeig
|
||||
|
||||
|
||||
function loadTile( drawer, tile, time ) {
|
||||
tile.loading = drawer.loadImage(
|
||||
tile.url,
|
||||
function( image ){
|
||||
onTileLoad( drawer, tile, time, image );
|
||||
}
|
||||
);
|
||||
if( drawer.viewport.collectionMode ){
|
||||
drawer.midUpdate = false;
|
||||
onTileLoad( drawer, tile, time );
|
||||
} else {
|
||||
tile.loading = drawer.loadImage(
|
||||
tile.url,
|
||||
function( image ){
|
||||
onTileLoad( drawer, tile, time, image );
|
||||
}
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
function onTileLoad( drawer, tile, time, image ) {
|
||||
@ -8594,7 +8614,7 @@ function onTileLoad( drawer, tile, time, image ) {
|
||||
if ( drawer.midUpdate ) {
|
||||
$.console.warn( "Tile load callback in middle of drawing routine." );
|
||||
return;
|
||||
} else if ( !image ) {
|
||||
} else if ( !image && !drawer.viewport.collectionMode ) {
|
||||
$.console.log( "Tile %s failed to load: %s", tile, tile.url );
|
||||
tile.exists = false;
|
||||
return;
|
||||
|
||||
@ -636,12 +636,17 @@ function getTile( x, y, level, tileSource, tilesMatrix, time, numTiles, normHeig
|
||||
|
||||
|
||||
function loadTile( drawer, tile, time ) {
|
||||
tile.loading = drawer.loadImage(
|
||||
tile.url,
|
||||
function( image ){
|
||||
onTileLoad( drawer, tile, time, image );
|
||||
}
|
||||
);
|
||||
if( drawer.viewport.collectionMode ){
|
||||
drawer.midUpdate = false;
|
||||
onTileLoad( drawer, tile, time );
|
||||
} else {
|
||||
tile.loading = drawer.loadImage(
|
||||
tile.url,
|
||||
function( image ){
|
||||
onTileLoad( drawer, tile, time, image );
|
||||
}
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
function onTileLoad( drawer, tile, time, image ) {
|
||||
@ -661,7 +666,7 @@ function onTileLoad( drawer, tile, time, image ) {
|
||||
if ( drawer.midUpdate ) {
|
||||
$.console.warn( "Tile load callback in middle of drawing routine." );
|
||||
return;
|
||||
} else if ( !image ) {
|
||||
} else if ( !image && !drawer.viewport.collectionMode ) {
|
||||
$.console.log( "Tile %s failed to load: %s", tile, tile.url );
|
||||
tile.exists = false;
|
||||
return;
|
||||
|
||||
42
src/tile.js
42
src/tile.js
@ -91,35 +91,48 @@ $.Tile.prototype = {
|
||||
}
|
||||
|
||||
if ( !this.element ) {
|
||||
this.element = $.makeNeutralElement("img");
|
||||
this.element.src = this.url;
|
||||
this.style = this.element.style;
|
||||
this.element = $.makeNeutralElement("img");
|
||||
this.element.src = this.url;
|
||||
|
||||
this.style = this.element.style;
|
||||
this.style.position = "absolute";
|
||||
this.style.msInterpolationMode = "nearest-neighbor";
|
||||
}
|
||||
|
||||
|
||||
if ( this.element.parentNode != container ) {
|
||||
container.appendChild( this.element );
|
||||
}
|
||||
|
||||
this.style.top = position.y + "px";
|
||||
this.style.left = position.x + "px";
|
||||
this.style.height = size.y + "px";
|
||||
this.style.width = size.x + "px";
|
||||
this.style.height = size.y + "px";
|
||||
this.style.width = size.x + "px";
|
||||
|
||||
//this.style.right = ( containerSize.x - position.x ) + "px";
|
||||
//this.style.bottom = ( containerSize.y - position.y ) + "px";
|
||||
|
||||
//when the entire container is filled by a single tile we need
|
||||
//some additional stickyness so when animating container size
|
||||
//the image stays fixed in position
|
||||
//this.element.style.width = ( size.x / containerSize.x ) * 100 + "%";
|
||||
//this.element.style.height = ( size.y / containerSize.y ) * 100 + "%";
|
||||
//EXPERIMENTAL - trying to figure out how to scale the container
|
||||
// content during animation of the container size.
|
||||
/*
|
||||
if ( !this.element ) {
|
||||
this.element = $.makeNeutralElement("div");
|
||||
this.image = $.makeNeutralElement("img");
|
||||
this.image.src = this.url;
|
||||
this.image.style.height = '100%';
|
||||
this.image.style.width = '100%';
|
||||
this.image.style.msInterpolationMode = "nearest-neighbor";
|
||||
this.element.appendChild( this.image );
|
||||
|
||||
this.style = this.element.style;
|
||||
this.style.position = "absolute";
|
||||
}
|
||||
this.style.right = "0px";
|
||||
this.style.bottom = "0px";
|
||||
if ( size.y == containerSize.y || size.x == containerSize.x ){
|
||||
this.style.right = position.x + "px";
|
||||
this.style.bottom = position.y + "px";
|
||||
}
|
||||
*/
|
||||
$.setElementOpacity( this.element, this.opacity );
|
||||
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
@ -142,6 +155,7 @@ $.Tile.prototype = {
|
||||
context.globalAlpha = this.opacity;
|
||||
|
||||
context.save();
|
||||
|
||||
if( context.globalAlpha == 1 && this.image.src.match('.png') ){
|
||||
|
||||
context.clearRect(
|
||||
|
||||
@ -371,6 +371,7 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
|
||||
contentSize: this.source.dimensions,
|
||||
springStiffness: this.springStiffness,
|
||||
animationTime: this.animationTime,
|
||||
showNavigator: false,
|
||||
minZoomImageRatio: 1,
|
||||
maxZoomPixelRatio: 1
|
||||
});
|
||||
@ -425,14 +426,14 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
|
||||
immediateRender: this.immediateRender,
|
||||
blendTime: this.blendTime,
|
||||
alwaysBlend: this.alwaysBlend,
|
||||
minPixelRatio: this.minPixelRatio,
|
||||
minPixelRatio: this.collectionMode ? 0 : this.minPixelRatio,
|
||||
timeout: this.timeout,
|
||||
debugMode: this.debugMode,
|
||||
debugGridColor: this.debugGridColor
|
||||
});
|
||||
|
||||
//Instantiate a navigator if configured
|
||||
if ( this.showNavigator && ! this.navigator ){
|
||||
if ( this.showNavigator && ! this.navigator && !this.collectionMode ){
|
||||
this.navigator = new $.Navigator({
|
||||
id: this.navigatorElement,
|
||||
position: this.navigatorPosition,
|
||||
|
||||
@ -45,17 +45,23 @@ OpenSeadragon({
|
||||
var viewer = OpenSeadragon({
|
||||
id: "example-tilesource-collection",
|
||||
prefixUrl: "/openseadragon/images/",
|
||||
//debugMode: true,
|
||||
showNavigator: false,
|
||||
minPixelRatio: 0.0,
|
||||
debugMode: false, //if you want to see the render grid
|
||||
|
||||
collectionMode: true,
|
||||
collectionRows: 1,
|
||||
collectionTileSize: 1024,
|
||||
collectionTileMargin: 256,
|
||||
|
||||
//collectionLayout: 'vertical',
|
||||
//panVertical: false,
|
||||
//panHorizontal: false,
|
||||
//defaultZoomLevel: 1,
|
||||
wrapHorizontal: true,
|
||||
|
||||
/*The wrap options can be fun to give a sense of infinite results*/
|
||||
//wrapHorizontal: true,
|
||||
//wrapVertical: true,
|
||||
|
||||
/*Tile sources can be mixed*/
|
||||
tileSources: [
|
||||
"/openseadragon/examples/images/pnp/ppmsca/05900/05954/05954.dzi",
|
||||
"/openseadragon/examples/images/pnp/ppmsca/05900/05954/05955.dzi",
|
||||
|
||||
@ -44,6 +44,7 @@
|
||||
id: "example-custom-tilesource",
|
||||
prefixUrl: "/openseadragon",
|
||||
navigatorSizeRatio: 0.25,
|
||||
wrapHorizontal: true,
|
||||
tileSources: {
|
||||
height: 512*256,
|
||||
width: 512*256,
|
||||
@ -91,7 +92,6 @@
|
||||
...
|
||||
showNavigator: false,
|
||||
blendTime: 0,
|
||||
alwaysBlend: false,
|
||||
wrapHorizontal: true,
|
||||
tileSources: {
|
||||
height: 1024*256,
|
||||
@ -119,7 +119,6 @@
|
||||
prefixUrl: "/openseadragon/images/",
|
||||
showNavigator: false,
|
||||
blendTime: 0,
|
||||
alwaysBlend: false,
|
||||
wrapHorizontal: true,
|
||||
tileSources: {
|
||||
height: 1024*256,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user