mirror/openseadragon
1
0
Fork 0
mirror of https://github.com/openseadragon/openseadragon.git synced 2025-02-20 08:43:13 +03:00
Code Issues Projects Releases Wiki Activity

additional fixes to get tests to pass

Browse Source
This commit is contained in:
Tom 2023-06-08 12:10:55 -07:00
parent 354590a17a
commit 2e248baf91
10 changed files with 87 additions and 305 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/canvasdrawer.js
View File

@ -189,7 +189,7 @@ class CanvasDrawer extends $.DrawerBase{
*
*/
_drawTiles( tiledImage ) {
var lastDrawn = tiledImage.lastDrawn;
var lastDrawn = tiledImage.getTilesToDraw().map(info => info.tile);
if (tiledImage.opacity === 0 || (lastDrawn.length === 0 && !tiledImage.placeholderFillStyle)) {
return;
}
@ -277,7 +277,7 @@ class CanvasDrawer extends $.DrawerBase{
var box = tiledImage.imageToViewportRectangle(tiledImage._clip, true);
box = box.rotate(-tiledImage.getRotation(true), tiledImage._getRotationPoint(true));
var clipRect = this._viewportToDrawerRectangle(box);
var clipRect = this.viewportToDrawerRectangle(box);
if (sketchScale) {
clipRect = clipRect.times(sketchScale);
}
@ -316,7 +316,7 @@ class CanvasDrawer extends $.DrawerBase{
}
if ( tiledImage.placeholderFillStyle && tiledImage._hasOpaqueTile === false ) {
var placeholderRect = this._viewportToDrawerRectangle(tiledImage.getBounds(true));
var placeholderRect = this.viewportToDrawerRectangle(tiledImage.getBounds(true));
if (sketchScale) {
placeholderRect = placeholderRect.times(sketchScale);
}

243
src/drawerbase.js
View File

@ -203,17 +203,15 @@ class DrawerBase{
}
// Utility functions internal API
// Utility functions
/**
* @private
* @inner
* Scale from OpenSeadragon viewer rectangle to drawer rectangle
* (ignoring rotation)
* @param {OpenSeadragon.Rect} rectangle - The rectangle in viewport coordinate system.
* @returns {OpenSeadragon.Rect} Rectangle in drawer coordinate system.
*/
_viewportToDrawerRectangle(rectangle) {
viewportToDrawerRectangle(rectangle) {
var topLeft = this.viewport.pixelFromPointNoRotate(rectangle.getTopLeft(), true);
var size = this.viewport.deltaPixelsFromPointsNoRotate(rectangle.getSize(), true);
@ -226,8 +224,6 @@ class DrawerBase{
}
/**
* @private
* @inner
* This function converts the given point from to the drawer coordinate by
* multiplying it with the pixel density.
* This function does not take rotation into account, thus assuming provided
@ -235,7 +231,7 @@ class DrawerBase{
* @param {OpenSeadragon.Point} point - the pixel point to convert
* @returns {OpenSeadragon.Point} Point in drawer coordinate system.
*/
_viewportCoordToDrawerCoord(point) {
viewportCoordToDrawerCoord(point) {
var vpPoint = this.viewport.pixelFromPointNoRotate(point, true);
return new $.Point(
vpPoint.x * $.pixelDensityRatio,
@ -243,6 +239,9 @@ class DrawerBase{
);
}
// Internal utility functions
/**
* @private
* @inner
@ -262,236 +261,6 @@ class DrawerBase{
}
$.DrawerBase = DrawerBase;
// $.DrawerBase = function( options ) {
// $.console.assert( options.viewer, "[Drawer] options.viewer is required" );
// //backward compatibility for positional args while preferring more
// //idiomatic javascript options object as the only argument
// var args = arguments;
// if( !$.isPlainObject( options ) ){
// options = {
// source: args[ 0 ], // Reference to Viewer tile source.
// viewport: args[ 1 ], // Reference to Viewer viewport.
// element: args[ 2 ] // Parent element.
// };
// }
// $.console.assert( options.viewport, "[Drawer] options.viewport is required" );
// $.console.assert( options.element, "[Drawer] options.element is required" );
// if ( options.source ) {
// $.console.error( "[Drawer] options.source is no longer accepted; use TiledImage instead" );
// }
// this.viewer = options.viewer;
// this.viewport = options.viewport;
// this.debugGridColor = typeof options.debugGridColor === 'string' ? [options.debugGridColor] : options.debugGridColor || $.DEFAULT_SETTINGS.debugGridColor;
// if (options.opacity) {
// $.console.error( "[Drawer] options.opacity is no longer accepted; set the opacity on the TiledImage instead" );
// }
// this.useCanvas = $.supportsCanvas && ( this.viewer ? this.viewer.useCanvas : true );
// /**
// * The parent element of this Drawer instance, passed in when the Drawer was created.
// * The parent of {@link OpenSeadragon.DrawerBase#canvas}.
// * @member {Element} container
// * @memberof OpenSeadragon.DrawerBase#
// */
// this.container = $.getElement( options.element );
// /**
// * A <canvas> element if the browser supports them, otherwise a <div> element.
// * Child element of {@link OpenSeadragon.DrawerBase#container}.
// * @member {Element} canvas
// * @memberof OpenSeadragon.DrawerBase#
// */
// this.canvas = $.makeNeutralElement( this.useCanvas ? "canvas" : "div" );
// /**
// * @member {Element} element
// * @memberof OpenSeadragon.DrawerBase#
// * @deprecated Alias for {@link OpenSeadragon.DrawerBase#container}.
// */
// this.element = this.container;
// // TO DO: Does this need to be in DrawerBase, or only in Drawer implementations?
// // We force our container to ltr because our drawing math doesn't work in rtl.
// // This issue only affects our canvas renderer, but we do it always for consistency.
// // Note that this means overlays you want to be rtl need to be explicitly set to rtl.
// this.container.dir = 'ltr';
// if (this.useCanvas) {
// var viewportSize = this._calculateCanvasSize();
// this.canvas.width = viewportSize.x;
// this.canvas.height = viewportSize.y;
// }
// this.canvas.style.width = "100%";
// this.canvas.style.height = "100%";
// this.canvas.style.position = "absolute";
// $.setElementOpacity( this.canvas, this.opacity, true );
// // Allow pointer events to pass through the canvas element so implicit
// // pointer capture works on touch devices
// $.setElementPointerEventsNone( this.canvas );
// $.setElementTouchActionNone( this.canvas );
// // explicit left-align
// this.container.style.textAlign = "left";
// this.container.appendChild( this.canvas );
// this._checkForAPIOverrides();
// };
// /** @lends OpenSeadragon.DrawerBaseBase.prototype */
// $.DrawerBase.prototype = {
// // Drawer implementaions must define the next four methods. These are called
// // by core OSD and/or public APIs, and forcing overrides (even for nullop methods) makes the
// // behavior of the implementations explicitly clear in the code.
// // Whether these have been overridden by child classes is checked in the
// // constructor (via _checkForAPIOverrides).
// /**
// * @param tiledImage the TiledImage that is ready to be drawn
// */
// draw: function(tiledImage) {
// $.console.error('Drawer.draw must be implemented by child class');
// },
// /**
// * @returns {Boolean} True if rotation is supported.
// */
// canRotate: function() {
// $.console.error('Drawer.canRotate must be implemented by child class');
// },
// /**
// * Destroy the drawer (unload current loaded tiles)
// */
// destroy: function() {
// $.console.error('Drawer.destroy must be implemented by child class');
// },
// /**
// * Turns image smoothing on or off for this viewer. Note: Ignored in some (especially older) browsers that do not support this property.
// *
// * @function
// * @param {Boolean} [imageSmoothingEnabled] - Whether or not the image is
// * drawn smoothly on the canvas; see imageSmoothingEnabled in
// * {@link OpenSeadragon.Options} for more explanation.
// */
// setImageSmoothingEnabled: function(imageSmoothingEnabled){
// $.console.error('Drawer.setImageSmoothingEnabled must be implemented by child class');
// },
// /**
// * Optional public API to draw a rectangle (e.g. for debugging purposes)
// * Child classes can override this method if they wish to support this
// * @param {OpenSeadragon.Rect} rect
// */
// drawDebuggingRect: function(rect) {
// $.console.warn('[drawer].drawDebuggingRect is not implemented by this drawer');
// },
// // Deprecated functions
// clear: function(){
// $.console.warn('[drawer].clear() is deprecated. The drawer is responsible for clearing itself as needed before drawing tiles.');
// },
// // Private functions
// /**
// * @private
// * @inner
// * Ensures that child classes have provided implementations for public API methods
// * draw, canRotate, destroy, and setImageSmoothinEnabled. Throws an exception if the original
// * placeholder methods are still in place.
// */
// _checkForAPIOverrides: function(){
// if(this.draw === $.DrawerBase.prototype.draw){
// throw("[drawer].draw must be implemented by child class");
// }
// if(this.canRotate === $.DrawerBase.prototype.canRotate){
// throw("[drawer].canRotate must be implemented by child class");
// }
// if(this.destroy === $.DrawerBase.prototype.destroy){
// throw("[drawer].destroy must be implemented by child class");
// }
// if(this.setImageSmoothingEnabled === $.DrawerBase.prototype.setImageSmoothingEnabled){
// throw("[drawer].setImageSmoothingEnabled must be implemented by child class");
// }
// },
// // Utility functions internal API
// /**
// * @private
// * @inner
// * Scale from OpenSeadragon viewer rectangle to drawer rectangle
// * (ignoring rotation)
// * @param {OpenSeadragon.Rect} rectangle - The rectangle in viewport coordinate system.
// * @returns {OpenSeadragon.Rect} Rectangle in drawer coordinate system.
// */
// _viewportToDrawerRectangle: function(rectangle) {
// var topLeft = this.viewport.pixelFromPointNoRotate(rectangle.getTopLeft(), true);
// var size = this.viewport.deltaPixelsFromPointsNoRotate(rectangle.getSize(), true);
// return new $.Rect(
// topLeft.x * $.pixelDensityRatio,
// topLeft.y * $.pixelDensityRatio,
// size.x * $.pixelDensityRatio,
// size.y * $.pixelDensityRatio
// );
// },
// /**
// * @private
// * @inner
// * This function converts the given point from to the drawer coordinate by
// * multiplying it with the pixel density.
// * This function does not take rotation into account, thus assuming provided
// * point is at 0 degree.
// * @param {OpenSeadragon.Point} point - the pixel point to convert
// * @returns {OpenSeadragon.Point} Point in drawer coordinate system.
// */
// _viewportCoordToDrawerCoord: function(point) {
// var vpPoint = this.viewport.pixelFromPointNoRotate(point, true);
// return new $.Point(
// vpPoint.x * $.pixelDensityRatio,
// vpPoint.y * $.pixelDensityRatio
// );
// },
// /**
// * @private
// * @inner
// * Calculate width and height of the canvas based on viewport dimensions
// * and pixelDensityRatio
// * @returns {Dictionary} {x, y} size of the canvas
// */
// _calculateCanvasSize: function() {
// var pixelDensityRatio = $.pixelDensityRatio;
// var viewportSize = this.viewport.getContainerSize();
// return {
// // canvas width and height are integers
// x: Math.round(viewportSize.x * pixelDensityRatio),
// y: Math.round(viewportSize.y * pixelDensityRatio)
// };
// },
// };
// Object.defineProperty($.DrawerBase.prototype, "isOpenSeadragonDrawer", {
// get: function get() {
// return true;
// }
// });
}( OpenSeadragon ));

2
src/htmldrawer.js
View File

@ -146,7 +146,7 @@ class HTMLDrawer extends $.DrawerBase{
*
*/
_drawTiles( tiledImage ) {
var lastDrawn = tiledImage.lastDrawn;
var lastDrawn = tiledImage.getTilesToDraw().map(info => info.tile);
if (tiledImage.opacity === 0 || (lastDrawn.length === 0 && !tiledImage.placeholderFillStyle)) {
return;
}

1
src/navigator.js
View File

@ -310,6 +310,7 @@ $.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /*
this.viewport.resize( containerSize, true );
this.viewport.goHome(true);
this.oldContainerSize = containerSize;
this.world.update();
this.world.draw();
}
}

5
src/spring.js
View File

@ -230,14 +230,15 @@ $.Spring.prototype = {
( this.target.time - this.start.time )
);
var oldValue = this.current.value;
// var oldValue = this.current.value;
if (this._exponential) {
this.current.value = Math.exp(currentValue);
} else {
this.current.value = currentValue;
}
return oldValue !== this.current.value;
return currentValue !== targetValue;
// return oldValue !== this.current.value;
},
/**

49
src/tiledimage.js
View File

@ -306,8 +306,9 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
var scaleUpdated = this._scaleSpring.update();
var degreesUpdated = this._degreesSpring.update();
this._updateLevelsForViewport();
let fullyLoadedFlag = this._updateLevelsForViewport();
this._updateTilesInViewport();
this._setFullyLoaded(fullyLoadedFlag);
if (xUpdated || yUpdated || scaleUpdated || degreesUpdated) {
this._updateForScale();
@ -1271,7 +1272,7 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
};
},
// returns boolean flag of whether the image should be marked as fully loaded
_updateLevelsForViewport: function(){
var levelsInterval = this._getLevelsInterval();
var lowestLevel = levelsInterval.lowestLevel;
@ -1281,13 +1282,18 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
var drawArea = this.getDrawArea();
var currentTime = $.now();
// reset each tile's beingDrawn flag
this._tilesToDraw.forEach(tileinfo => {
tileinfo.tile.beingDrawn = false;
});
// clear the list of tiles to draw
this._tilesToDraw = [];
this._tilesLoading = 0;
this.loadingCoverage = {};
if(!drawArea){
this._needsDraw = false;
return;
return this._fullyLoaded;
}
// make a list of levels to use for the current zoom level
@ -1367,7 +1373,7 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
);
bestTile = result.best;
var tiles = result.tiles;
var tiles = result.tiles.filter(tile => tile.loaded);
var makeTileInfoObject = (function(level, levelOpacity, currentTime){
return function(tile){
return {
@ -1392,9 +1398,9 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
if (bestTile && !bestTile.context2D) {
this._loadTile(bestTile, currentTime);
this._needsDraw = true;
this._setFullyLoaded(false);
return false;
} else {
this._setFullyLoaded(this._tilesLoading === 0);
return this._tilesLoading === 0;
}
// Update
@ -1412,13 +1418,6 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
this._tilesLoading = 0;
this.loadingCoverage = {};
// Reset tile's internal drawn state
while (this.lastDrawn.length > 0) {
var tile = this.lastDrawn.pop();
tile.beingDrawn = false;
}
var drawArea = this.getDrawArea();
if(!drawArea){
return;
@ -1441,7 +1440,21 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
}
}
this._tilesToDraw.forEach(updateTile);
// Update each tile in the _tilesToDraw list. As the tiles are updated,
// the coverage provided is also updated. If a level provides coverage
// as part of this process, discard tiles from lower levels
let level = 0;
for(let i = 0; i < this._tilesToDraw.length; i++){
let tile = this._tilesToDraw[i];
updateTile(tile);
if(this._providesCoverage(this.coverage, tile.level)){
level = Math.max(level, tile.level);
// break;
}
}
if(level > 0){
this._tilesToDraw = this._tilesToDraw.filter(tile => tile.level >= level);
}
},
@ -1479,8 +1492,6 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
tile.opacity = opacity;
this.lastDrawn.push( tile );
if ( opacity === 1 ) {
this._setCoverage( this.coverage, level, x, y, true );
this._hasOpaqueTile = true;
@ -1708,7 +1719,8 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
if ( !tile.exists ) {
return {
best: best
best: best,
tile: tile
};
}
if (tile.loaded && tile.opacity === 1){
@ -1724,7 +1736,8 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
if ( !drawTile ) {
return {
best: best
best: best,
tile: tile
};
}

4
test/demo/threejsdrawer.js
View File

@ -397,7 +397,7 @@ export class ThreeJSDrawer extends OpenSeadragon.DrawerBase{
_updateMeshIfNeeded(tiledImage){
let tileContainer = this._tiledImageMap[tiledImage[this._uuid]].userData.tileContainer;
let scene = this._tiledImageMap[tiledImage[this._uuid]]
let level = Math.max(...tiledImage.getTilesToDraw().map(tile => tile.level));
let level = Math.max(0, ...tiledImage.getTilesToDraw().map(tile => tile.level));
if(scene.userData.currentLevel === level){
//we are already drawing the highest-resolution tiles, just return
@ -529,7 +529,7 @@ export class ThreeJSDrawer extends OpenSeadragon.DrawerBase{
if(item._clip){
var box = item.imageToViewportRectangle(item._clip, true);
var rect = this._viewportToDrawerRectangle(box);
var rect = this.viewportToDrawerRectangle(box);
this._clippingContext.beginPath();
this._clippingContext.rect(rect.x, rect.y, rect.width, rect.height);
this._clippingContext.clip();

12
test/modules/drawer.js
View File

@ -117,16 +117,8 @@
tileSources: '/test/data/testpattern.dzi'
});
viewer.world.addHandler('add-item', function() {
Util.testDeprecation(assert, viewer.drawer, 'addOverlay', viewer, 'addOverlay');
Util.testDeprecation(assert, viewer.drawer, 'updateOverlay', viewer, 'updateOverlay');
Util.testDeprecation(assert, viewer.drawer, 'removeOverlay', viewer, 'removeOverlay');
Util.testDeprecation(assert, viewer.drawer, 'clearOverlays', viewer, 'clearOverlays');
Util.testDeprecation(assert, viewer.drawer, 'needsUpdate', viewer.world, 'needsDraw');
Util.testDeprecation(assert, viewer.drawer, 'numTilesLoaded', viewer.tileCache, 'numTilesLoaded');
Util.testDeprecation(assert, viewer.drawer, 'reset', viewer.world, 'resetItems');
Util.testDeprecation(assert, viewer.drawer, 'update', viewer.world, 'draw');
Util.testDeprecation(assert, viewer.drawer, 'setOpacity', viewer.world.getItemAt(0), 'setOpacity');
Util.testDeprecation(assert, viewer.drawer, 'getOpacity', viewer.world.getItemAt(0), 'getOpacity');
// no current deprecated methods
assert.expect(0);
done();
});
});

68
test/modules/multi-image.js
View File

@ -221,44 +221,50 @@
viewer.addHandler('open', function() {
var firstImage = viewer.world.getItemAt(0);
firstImage.addHandler('fully-loaded-change', function() {
var imageData = viewer.drawer.context.getImageData(0, 0,
500 * density, 500 * density);
viewer.addOnceHandler('update-viewport', function(){
var imageData = viewer.drawer.context.getImageData(0, 0,
500 * density, 500 * density);
// Pixel 250,250 will be in the hole of the A
var expectedVal = getPixelValue(imageData, 250 * density, 250 * density);
// Pixel 250,250 will be in the hole of the A
var expectedVal = getPixelValue(imageData, 250 * density, 250 * density);
assert.notEqual(expectedVal.r, 0, 'Red channel should not be 0');
assert.notEqual(expectedVal.g, 0, 'Green channel should not be 0');
assert.notEqual(expectedVal.b, 0, 'Blue channel should not be 0');
assert.notEqual(expectedVal.a, 0, 'Alpha channel should not be 0');
assert.notEqual(expectedVal.r, 0, 'Red channel should not be 0');
assert.notEqual(expectedVal.g, 0, 'Green channel should not be 0');
assert.notEqual(expectedVal.b, 0, 'Blue channel should not be 0');
assert.notEqual(expectedVal.a, 0, 'Alpha channel should not be 0');
viewer.addSimpleImage({
url: '/test/data/A.png',
success: function() {
var secondImage = viewer.world.getItemAt(1);
secondImage.addHandler('fully-loaded-change', function() {
var imageData = viewer.drawer.context.getImageData(0, 0, 500 * density, 500 * density);
var actualVal = getPixelValue(imageData, 250 * density, 250 * density);
viewer.addSimpleImage({
url: '/test/data/A.png',
success: function() {
var secondImage = viewer.world.getItemAt(1);
secondImage.addHandler('fully-loaded-change', function() {
viewer.addOnceHandler('update-viewport',function(){
var imageData = viewer.drawer.context.getImageData(0, 0, 500 * density, 500 * density);
var actualVal = getPixelValue(imageData, 250 * density, 250 * density);
assert.equal(actualVal.r, expectedVal.r,
'Red channel should not change in transparent part of the A');
assert.equal(actualVal.g, expectedVal.g,
'Green channel should not change in transparent part of the A');
assert.equal(actualVal.b, expectedVal.b,
'Blue channel should not change in transparent part of the A');
assert.equal(actualVal.a, expectedVal.a,
'Alpha channel should not change in transparent part of the A');
assert.equal(actualVal.r, expectedVal.r,
'Red channel should not change in transparent part of the A');
assert.equal(actualVal.g, expectedVal.g,
'Green channel should not change in transparent part of the A');
assert.equal(actualVal.b, expectedVal.b,
'Blue channel should not change in transparent part of the A');
assert.equal(actualVal.a, expectedVal.a,
'Alpha channel should not change in transparent part of the A');
var onAVal = getPixelValue(imageData, 333 * density, 250 * density);
assert.equal(onAVal.r, 0, 'Red channel should be null on the A');
assert.equal(onAVal.g, 0, 'Green channel should be null on the A');
assert.equal(onAVal.b, 0, 'Blue channel should be null on the A');
assert.equal(onAVal.a, 255, 'Alpha channel should be 255 on the A');
var onAVal = getPixelValue(imageData, 333 * density, 250 * density);
assert.equal(onAVal.r, 0, 'Red channel should be null on the A');
assert.equal(onAVal.g, 0, 'Green channel should be null on the A');
assert.equal(onAVal.b, 0, 'Blue channel should be null on the A');
assert.equal(onAVal.a, 255, 'Alpha channel should be 255 on the A');
done();
});
}
done();
});
});
}
});
});
});
});

2
test/modules/world.js
View File

@ -159,7 +159,7 @@
handlerCount++;
});
viewer.world.draw();
viewer.world.update();
assert.equal(handlerCount, 1, 'correct number of handlers called');
done();