mirror/openseadragon
1
0
Fork 0
mirror of https://github.com/openseadragon/openseadragon.git synced 2024-11-25 14:46:10 +03:00
Code Issues Projects Releases Wiki Activity

move tile update logic back to TiledImage to keep drawing logic cleaner

Browse Source
This commit is contained in:
Tom 2023-03-13 15:56:04 -04:00
parent 641951aaed
commit ade59513df
8 changed files with 301 additions and 162 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

163
src/canvasdrawer.js
View File

@ -82,9 +82,8 @@ $.extend( $.CanvasDrawer.prototype, $.DrawerBase.prototype, /** @lends OpenSeadr
this._prepareNewFrame(); // prepare to draw a new frame this._prepareNewFrame(); // prepare to draw a new frame
tiledImages.forEach(function(tiledImage){ tiledImages.forEach(function(tiledImage){
if (tiledImage.opacity !== 0 || tiledImage._preload) { if (tiledImage.opacity !== 0 || tiledImage._preload) {
tiledImage._midDraw = true; // _this._updateViewportWithTiledImage(tiledImage);
_this._updateViewportWithTiledImage(tiledImage); _this._drawTiles(tiledImage);
tiledImage._midDraw = false;
} }
else { else {
tiledImage._needsDraw = false; tiledImage._needsDraw = false;
@ -189,102 +188,102 @@ $.extend( $.CanvasDrawer.prototype, $.DrawerBase.prototype, /** @lends OpenSeadr
/* Methods from TiledImage */ /* Methods from TiledImage */
/** // /**
* @private // * @private
* @inner // * @inner
* Handles drawing a single TiledImage to the canvas // * Handles drawing a single TiledImage to the canvas
* // *
*/ // */
_updateViewportWithTiledImage: function(tiledImage) { // _updateViewportWithTiledImage: function(tiledImage) {
var _this = this; // var _this = this;
tiledImage._needsDraw = false; // tiledImage._needsDraw = false;
tiledImage._tilesLoading = 0; // tiledImage._tilesLoading = 0;
tiledImage.loadingCoverage = {}; // tiledImage.loadingCoverage = {};
// Reset tile's internal drawn state // // Reset tile's internal drawn state
while (tiledImage.lastDrawn.length > 0) { // while (tiledImage.lastDrawn.length > 0) {
var tile = tiledImage.lastDrawn.pop(); // var tile = tiledImage.lastDrawn.pop();
tile.beingDrawn = false; // tile.beingDrawn = false;
} // }
var drawArea = tiledImage.getDrawArea(); // var drawArea = tiledImage.getDrawArea();
if(!drawArea){ // if(!drawArea){
return; // return;
} // }
function updateTile(info){ // function updateTile(info){
var tile = info.tile; // var tile = info.tile;
if(tile && tile.loaded){ // if(tile && tile.loaded){
var needsDraw = _this._blendTile( // var needsDraw = _this._blendTile(
tiledImage, // tiledImage,
tile, // tile,
tile.x, // tile.x,
tile.y, // tile.y,
info.level, // info.level,
info.levelOpacity, // info.levelOpacity,
info.currentTime // info.currentTime
); // );
if(needsDraw){ // if(needsDraw){
tiledImage._needsDraw = true; // tiledImage._needsDraw = true;
} // }
} // }
} // }
var infoArray = tiledImage.getTileInfoForDrawing(); // var infoArray = tiledImage.getTileInfoForDrawing();
infoArray.forEach(updateTile); // infoArray.forEach(updateTile);
this._drawTiles(tiledImage); // this._drawTiles(tiledImage);
}, // },
/** // /**
* @private // * @private
* @inner // * @inner
* Updates the opacity of a tile according to the time it has been on screen // * Updates the opacity of a tile according to the time it has been on screen
* to perform a fade-in. // * to perform a fade-in.
* Updates coverage once a tile is fully opaque. // * Updates coverage once a tile is fully opaque.
* Returns whether the fade-in has completed. // * Returns whether the fade-in has completed.
* // *
* @param {OpenSeadragon.Tile} tile // * @param {OpenSeadragon.Tile} tile
* @param {Number} x // * @param {Number} x
* @param {Number} y // * @param {Number} y
* @param {Number} level // * @param {Number} level
* @param {Number} levelOpacity // * @param {Number} levelOpacity
* @param {Number} currentTime // * @param {Number} currentTime
* @returns {Boolean} // * @returns {Boolean}
*/ // */
_blendTile: function( tiledImage, tile, x, y, level, levelOpacity, currentTime ){ // _blendTile: function( tiledImage, tile, x, y, level, levelOpacity, currentTime ){
var blendTimeMillis = 1000 * tiledImage.blendTime, // var blendTimeMillis = 1000 * tiledImage.blendTime,
deltaTime, // deltaTime,
opacity; // opacity;
if ( !tile.blendStart ) { // if ( !tile.blendStart ) {
tile.blendStart = currentTime; // tile.blendStart = currentTime;
} // }
deltaTime = currentTime - tile.blendStart; // deltaTime = currentTime - tile.blendStart;
opacity = blendTimeMillis ? Math.min( 1, deltaTime / ( blendTimeMillis ) ) : 1; // opacity = blendTimeMillis ? Math.min( 1, deltaTime / ( blendTimeMillis ) ) : 1;
if ( tiledImage.alwaysBlend ) { // if ( tiledImage.alwaysBlend ) {
opacity *= levelOpacity; // opacity *= levelOpacity;
} // }
tile.opacity = opacity; // tile.opacity = opacity;
tiledImage.lastDrawn.push( tile ); // tiledImage.lastDrawn.push( tile );
if ( opacity === 1 ) { // if ( opacity === 1 ) {
tiledImage._setCoverage( tiledImage.coverage, level, x, y, true ); // tiledImage._setCoverage( tiledImage.coverage, level, x, y, true );
tiledImage._hasOpaqueTile = true; // tiledImage._hasOpaqueTile = true;
} else if ( deltaTime < blendTimeMillis ) { // } else if ( deltaTime < blendTimeMillis ) {
return true; // return true;
} // }
return false; // return false;
}, // },
/** /**
* @private * @private

5
src/htmldrawer.js
View File

@ -73,9 +73,8 @@ $.extend( $.HTMLDrawer.prototype, $.DrawerBase.prototype, /** @lends OpenSeadrag
this._prepareNewFrame(); // prepare to draw a new frame this._prepareNewFrame(); // prepare to draw a new frame
tiledImages.forEach(function(tiledImage){ tiledImages.forEach(function(tiledImage){
if (tiledImage.opacity !== 0 || tiledImage._preload) { if (tiledImage.opacity !== 0 || tiledImage._preload) {
tiledImage._midDraw = true; // _this._updateViewportWithTiledImage(tiledImage);
_this._updateViewportWithTiledImage(tiledImage); _this._drawTiles(tiledImage);
tiledImage._midDraw = false;
} }
else { else {
tiledImage._needsDraw = false; tiledImage._needsDraw = false;

227
src/tiledimage.js
View File

@ -156,7 +156,6 @@ $.TiledImage = function( options ) {
loadingCoverage: {}, // A '3d' dictionary [level][x][y] --> Boolean; shows what areas are loaded or are being loaded/blended. loadingCoverage: {}, // A '3d' dictionary [level][x][y] --> Boolean; shows what areas are loaded or are being loaded/blended.
lastDrawn: [], // An unordered list of Tiles drawn last frame. lastDrawn: [], // An unordered list of Tiles drawn last frame.
lastResetTime: 0, // Last time for which the tiledImage was reset. lastResetTime: 0, // Last time for which the tiledImage was reset.
_midDraw: false, // Is the tiledImage currently updating the viewport?
_needsDraw: true, // Does the tiledImage need to update the viewport again? _needsDraw: true, // Does the tiledImage need to update the viewport again?
_hasOpaqueTile: false, // Do we have even one fully opaque tile? _hasOpaqueTile: false, // Do we have even one fully opaque tile?
_tilesLoading: 0, // The number of pending tile requests. _tilesLoading: 0, // The number of pending tile requests.
@ -291,8 +290,9 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
}, },
/** /**
* Updates the TiledImage's bounds, animating if needed. * Updates the TiledImage's bounds, animating if needed. Based on the new
* @returns {Boolean} Whether the TiledImage animated. * bounds, updates the levels and tiles to be drawn into the viewport.
* @returns {Boolean} Whether the TiledImage needs to be drawn.
*/ */
update: function() { update: function() {
var xUpdated = this._xSpring.update(); var xUpdated = this._xSpring.update();
@ -300,7 +300,8 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
var scaleUpdated = this._scaleSpring.update(); var scaleUpdated = this._scaleSpring.update();
var degreesUpdated = this._degreesSpring.update(); var degreesUpdated = this._degreesSpring.update();
this._updateTilesForViewport(); this._updateLevelsForViewport();
this._updateTilesInViewport();
if (xUpdated || yUpdated || scaleUpdated || degreesUpdated) { if (xUpdated || yUpdated || scaleUpdated || degreesUpdated) {
this._updateForScale(); this._updateForScale();
@ -312,6 +313,14 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
return false; return false;
}, },
/**
* Mark this TiledImage as having been drawn, so that it will only be drawn
* again if something changes about the image
*/
setDrawn: function(){
this._needsDraw = false;
},
/** /**
* Destroy the TiledImage (unload current loaded tiles). * Destroy the TiledImage (unload current loaded tiles).
*/ */
@ -897,7 +906,7 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
* @returns {Boolean} Whether the TiledImage should be flipped before rendering. * @returns {Boolean} Whether the TiledImage should be flipped before rendering.
*/ */
getFlip: function() { getFlip: function() {
return !!this.flipped; return this.flipped;
}, },
/** /**
@ -905,11 +914,26 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
* @fires OpenSeadragon.TiledImage.event:bounds-change * @fires OpenSeadragon.TiledImage.event:bounds-change
*/ */
setFlip: function(flip) { setFlip: function(flip) {
this.flipped = !!flip; this.flipped = flip;
},
get flipped(){
return this._flipped;
},
set flipped(flipped){
this._flipped = !!flipped;
this._needsDraw = true; this._needsDraw = true;
this._raiseBoundsChange(); this._raiseBoundsChange();
}, },
get debugMode(){
return this._debugMode;
},
set debugMode(debug){
this._debugMode = !!debug;
this._needsDraw = true;
},
/** /**
* @returns {Number} The TiledImage's current opacity. * @returns {Number} The TiledImage's current opacity.
*/ */
@ -922,11 +946,19 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
* @fires OpenSeadragon.TiledImage.event:opacity-change * @fires OpenSeadragon.TiledImage.event:opacity-change
*/ */
setOpacity: function(opacity) { setOpacity: function(opacity) {
this.opacity = opacity;
},
get opacity() {
return this._opacity;
},
set opacity(opacity) {
if (opacity === this.opacity) { if (opacity === this.opacity) {
return; return;
} }
this.opacity = opacity; this._opacity = opacity;
this._needsDraw = true; this._needsDraw = true;
/** /**
* Raised when the TiledImage's opacity is changed. * Raised when the TiledImage's opacity is changed.
@ -1008,6 +1040,14 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
return drawArea; return drawArea;
}, },
/**
*
* @returns {Array} Array of Tiles that make up the current view
*/
getTilesToDraw: function(){
return this._tilesToDraw;
},
/** /**
* Get the point around which this tiled image is rotated * Get the point around which this tiled image is rotated
* @private * @private
@ -1018,24 +1058,16 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
return this.getBoundsNoRotate(current).getCenter(); return this.getBoundsNoRotate(current).getCenter();
}, },
/** get compositeOperation(){
* @returns {String} The TiledImage's current compositeOperation. return this._compositeOperation;
*/
getCompositeOperation: function() {
return this.compositeOperation;
}, },
/** set compositeOperation(compositeOperation){
* @param {String} compositeOperation the tiled image should be drawn with this globalCompositeOperation.
* @fires OpenSeadragon.TiledImage.event:composite-operation-change if (compositeOperation === this._compositeOperation) {
*/
setCompositeOperation: function(compositeOperation) {
var _this = this;
if (compositeOperation === this.compositeOperation) {
return; return;
} }
this._compositeOperation = compositeOperation;
this.compositeOperation = compositeOperation;
this._needsDraw = true; this._needsDraw = true;
/** /**
* Raised when the TiledImage's opacity is changed. * Raised when the TiledImage's opacity is changed.
@ -1048,23 +1080,24 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
* @property {?Object} userData - Arbitrary subscriber-defined object. * @property {?Object} userData - Arbitrary subscriber-defined object.
*/ */
this.raiseEvent('composite-operation-change', { this.raiseEvent('composite-operation-change', {
compositeOperation: this.compositeOperation compositeOperation: this._compositeOperation
}); });
/** },
* Raised when a TiledImage's opacity is changed.
* @event composite-operation-change /**
* @memberOf OpenSeadragon.TiledImage * @returns {String} The TiledImage's current compositeOperation.
* @type {object} */
* @property {String} compositeOperation - The new compositeOperation value. getCompositeOperation: function() {
* @property {OpenSeadragon.Viewer} eventSource - A reference to the return this._compositeOperation;
* Viewer which raised the event. },
* @property {?Object} userData - Arbitrary subscriber-defined object.
*/ /**
this.viewer.raiseEvent('composite-operation-change', { * @param {String} compositeOperation the tiled image should be drawn with this globalCompositeOperation.
compositeOperation: _this.compositeOperation, * @fires OpenSeadragon.TiledImage.event:composite-operation-change
tiledImage: _this */
}); setCompositeOperation: function(compositeOperation) {
this.compositeOperation = compositeOperation; //invokes setter
}, },
// private // private
@ -1148,15 +1181,8 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
}; };
}, },
/**
*
* @returns {Array} Array of Tiles within the viewport which should be drawn
*/
getTileInfoForDrawing: function(){
return this._tilesToDraw;
},
_updateTilesForViewport: function(){ _updateLevelsForViewport: function(){
var levelsInterval = this._getLevelsInterval(); var levelsInterval = this._getLevelsInterval();
var lowestLevel = levelsInterval.lowestLevel; var lowestLevel = levelsInterval.lowestLevel;
var highestLevel = levelsInterval.highestLevel; var highestLevel = levelsInterval.highestLevel;
@ -1256,6 +1282,99 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
} else { } else {
this._setFullyLoaded(this._tilesLoading === 0); this._setFullyLoaded(this._tilesLoading === 0);
} }
// Update
},
/**
* @private
* @inner
* Update all tiles that contribute to the current view
*
*/
_updateTilesInViewport: function() {
var _this = this;
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;
}
function updateTile(info){
var tile = info.tile;
if(tile && tile.loaded){
var needsDraw = _this._blendTile(
tile,
tile.x,
tile.y,
info.level,
info.levelOpacity,
info.currentTime
);
if(needsDraw){
_this._needsDraw = true;
}
}
}
this._tilesToDraw.forEach(updateTile);
},
/**
* @private
* @inner
* Updates the opacity of a tile according to the time it has been on screen
* to perform a fade-in.
* Updates coverage once a tile is fully opaque.
* Returns whether the fade-in has completed.
*
* @param {OpenSeadragon.Tile} tile
* @param {Number} x
* @param {Number} y
* @param {Number} level
* @param {Number} levelOpacity
* @param {Number} currentTime
* @returns {Boolean}
*/
_blendTile: function(tile, x, y, level, levelOpacity, currentTime ){
var blendTimeMillis = 1000 * this.blendTime,
deltaTime,
opacity;
if ( !tile.blendStart ) {
tile.blendStart = currentTime;
}
deltaTime = currentTime - tile.blendStart;
opacity = blendTimeMillis ? Math.min( 1, deltaTime / ( blendTimeMillis ) ) : 1;
if ( this.alwaysBlend ) {
opacity *= levelOpacity;
}
tile.opacity = opacity;
this.lastDrawn.push( tile );
if ( opacity === 1 ) {
this._setCoverage( this.coverage, level, x, y, true );
this._hasOpaqueTile = true;
} else if ( deltaTime < blendTimeMillis ) {
return true;
}
return false;
}, },
/** /**
@ -1748,14 +1867,8 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
_this._setTileLoaded(tile, data, cutoff, tileRequest); _this._setTileLoaded(tile, data, cutoff, tileRequest);
}; };
// Check if we're mid-update; this can happen on IE8 because image load events for
// cached images happen immediately there finish();
if ( !this._midDraw ) {
finish();
} else {
// Wait until after the update, in case caching unloads any tiles
window.setTimeout( finish, 1);
}
}, },
/** /**
@ -1797,22 +1910,20 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
}); });
} }
/** /**
* Triggered when a tile has just been loaded in memory. That means that the * Triggered when a tile is loaded and pre-processing is compelete,
* image has been downloaded and can be modified before being drawn to the canvas. * and the tile is ready to draw.
* *
* @event tile-ready * @event tile-ready
* @memberof OpenSeadragon.Viewer * @memberof OpenSeadragon.Viewer
* @type {object} * @type {object}
* @property {*} data image data, the data sent to ImageJob.prototype.finish(), by default an Image object
* @property {OpenSeadragon.TiledImage} tiledImage - The tiled image of the loaded tile.
* @property {OpenSeadragon.Tile} tile - The tile which has been loaded. * @property {OpenSeadragon.Tile} tile - The tile which has been loaded.
* @property {OpenSeadragon.TiledImage} tiledImage - The tiled image of the loaded tile.
* @property {XMLHttpRequest} tileRequest - The AJAX request that loaded this tile (if applicable). * @property {XMLHttpRequest} tileRequest - The AJAX request that loaded this tile (if applicable).
*/ */
_this.viewer.raiseEvent("tile-ready", { _this.viewer.raiseEvent("tile-ready", {
tile: tile, tile: tile,
tiledImage: _this, tiledImage: _this,
tileRequest: tileRequest, tileRequest: tileRequest
data: data
}); });
_this._needsDraw = true; _this._needsDraw = true;
} }

2
src/viewer.js
View File

@ -432,7 +432,7 @@ $.Viewer = function( options ) {
} }
} else if(this.useCanvas && $.supportsCanvas) { } else if(this.useCanvas && $.supportsCanvas) {
this.drawer = new $.Drawer({ this.drawer = new $.CanvasDrawer({
viewer: this, viewer: this,
viewport: this.viewport, viewport: this.viewport,
element: this.canvas, element: this.canvas,

3
src/world.js
View File

@ -257,6 +257,9 @@ $.extend( $.World.prototype, $.EventSource.prototype, /** @lends OpenSeadragon.W
*/ */
draw: function() { draw: function() {
this.viewer.drawer.draw(this._items); this.viewer.drawer.draw(this._items);
this._items.forEach(function(item){
item.setDrawn();
});
this._needsDraw = false; this._needsDraw = false;
}, },

20
test/demo/threejsdrawer.js
View File

@ -7,6 +7,8 @@ export class ThreeJSDrawer extends OpenSeadragon.DrawerBase{
super(options); super(options);
let _this = this; let _this = this;
this._stats = options.stats; // optional input of stats.js object to enable performance testing
// this.viewer set by parent constructor // this.viewer set by parent constructor
// this.canvas set by parent constructor, created and appended to the viewer container element // this.canvas set by parent constructor, created and appended to the viewer container element
this._camera = null; this._camera = null;
@ -55,12 +57,16 @@ export class ThreeJSDrawer extends OpenSeadragon.DrawerBase{
this._setupRenderer(); this._setupRenderer();
} }
renderFrame(){ renderFrame(){
// this._stats && this._stats.begin();
if(this._animationFrame) { if(this._animationFrame) {
cancelAnimationFrame(this._animationFrame); cancelAnimationFrame(this._animationFrame);
} }
this._animationFrame = requestAnimationFrame(()=>this.render()); this._animationFrame = requestAnimationFrame(()=>this.render());
// this._stats && this._stats.end();
} }
render(){ render(){
// this._stats && this._stats.begin();
let numItems = this.viewer.world.getItemCount(); let numItems = this.viewer.world.getItemCount();
this._outputContext.clearRect(0, 0, this._outputCanvas.width, this._outputCanvas.height); this._outputContext.clearRect(0, 0, this._outputCanvas.width, this._outputCanvas.height);
//iterate over items to draw //iterate over items to draw
@ -94,6 +100,8 @@ export class ThreeJSDrawer extends OpenSeadragon.DrawerBase{
if(this._renderingContinuously){ if(this._renderingContinuously){
this.renderFrame(); this.renderFrame();
} }
// this._stats && this._stats.end();
// console.log(this._renderer.info.memory, this._renderer.info.render.triangles); // console.log(this._renderer.info.memory, this._renderer.info.render.triangles);
} }
renderContinuously(continuously){ renderContinuously(continuously){
@ -208,7 +216,7 @@ export class ThreeJSDrawer extends OpenSeadragon.DrawerBase{
this.viewer.addHandler("viewport-change", () => this._viewportChangeHandler()); this.viewer.addHandler("viewport-change", () => this._viewportChangeHandler());
this.viewer.addHandler("home", () => this._viewportChangeHandler()); this.viewer.addHandler("home", () => this._viewportChangeHandler());
this.viewer.addHandler("update-viewport", () => this.renderFrame()); this.viewer.addHandler("update-viewport", () => this.render());
this._viewportChangeHandler(); this._viewportChangeHandler();
} }
@ -341,6 +349,8 @@ export class ThreeJSDrawer extends OpenSeadragon.DrawerBase{
_updateTiledImageRendering(tiledImage, tile){ _updateTiledImageRendering(tiledImage, tile){
// this._stats && this._stats.begin();
let scene = this._tiledImageMap[tiledImage[this._uuid]]; let scene = this._tiledImageMap[tiledImage[this._uuid]];
let bounds = this._tileMap[tile.cacheKey].userData._tileBounds let bounds = this._tileMap[tile.cacheKey].userData._tileBounds
@ -367,6 +377,8 @@ export class ThreeJSDrawer extends OpenSeadragon.DrawerBase{
} }
} }
// this._stats && this._stats.end();
this.renderFrame(); this.renderFrame();
} }
@ -472,6 +484,7 @@ export class ThreeJSDrawer extends OpenSeadragon.DrawerBase{
} }
_viewportChangeHandler(){ _viewportChangeHandler(){
//this._stats && this._stats.begin();
let viewer = this.viewer; let viewer = this.viewer;
let viewerBounds = viewer.viewport.getBoundsNoRotate(true); let viewerBounds = viewer.viewport.getBoundsNoRotate(true);
@ -493,9 +506,8 @@ export class ThreeJSDrawer extends OpenSeadragon.DrawerBase{
let tiledImage = viewer.world.getItemAt(i); let tiledImage = viewer.world.getItemAt(i);
this._updateMeshIfNeeded(tiledImage); this._updateMeshIfNeeded(tiledImage);
} }
this.render();
this.renderFrame(); // this.renderFrame(); //this._stats && this._stats.end();
} }
_renderToClippingCanvas(item){ _renderToClippingCanvas(item){

1
test/demo/webgl.html
View File

@ -6,6 +6,7 @@
<script type="text/javascript" src='../lib/jquery-1.9.1.min.js'></script> <script type="text/javascript" src='../lib/jquery-1.9.1.min.js'></script>
<script type="text/javascript" src='../lib/jquery-ui-1.10.2/js/jquery-ui-1.10.2.min.js'></script> <script type="text/javascript" src='../lib/jquery-ui-1.10.2/js/jquery-ui-1.10.2.min.js'></script>
<link rel="stylesheet" href="../lib/jquery-ui-1.10.2/css/smoothness/jquery-ui-1.10.2.min.css"> <link rel="stylesheet" href="../lib/jquery-ui-1.10.2/css/smoothness/jquery-ui-1.10.2.min.css">
<!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/17/Stats.js"></script> -->
<!-- <script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script> --> <!-- <script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script> -->
<!-- <script type="importmap"> <!-- <script type="importmap">
{ {

42
test/demo/webgl.js
View File

@ -1,6 +1,6 @@
//imports //imports
import { ThreeJSDrawer } from './threejsdrawer.js'; import { ThreeJSDrawer } from './threejsdrawer.js';
import { default as Stats } from "https://cdnjs.cloudflare.com/ajax/libs/stats.js/17/Stats.js";
//globals //globals
// const canvas = document.querySelector('#three-canvas'); // const canvas = document.querySelector('#three-canvas');
const sources = { const sources = {
@ -18,6 +18,15 @@ const labels = {
bblue: 'Blue B', bblue: 'Blue B',
duomo: 'Duomo', duomo: 'Duomo',
} }
var stats = null;
// var stats = new Stats();
// stats.showPanel( 1 ); // 0: fps, 1: ms, 2: mb, 3+: custom
// document.body.appendChild( stats.dom );
//Double viewer setup for comparison - CanvasDrawer and ThreeJSDrawer
var viewer = window.viewer = OpenSeadragon({ var viewer = window.viewer = OpenSeadragon({
id: "contentDiv", id: "contentDiv",
prefixUrl: "../../build/openseadragon/images/", prefixUrl: "../../build/openseadragon/images/",
@ -28,11 +37,26 @@ var viewer = window.viewer = OpenSeadragon({
smoothTileEdgesMinZoom:1.1, smoothTileEdgesMinZoom:1.1,
crossOriginPolicy: 'Anonymous', crossOriginPolicy: 'Anonymous',
ajaxWithCredentials: false, ajaxWithCredentials: false,
useCanvas:false, useCanvas:true,
}); });
// let threeRenderer = window.threeRenderer = new ThreeJSDrawer({viewer, viewport: viewer.viewport, element:viewer.element});
// Mirror the interactive viewer with CanvasDrawer onto a separate canvas using ThreeJSDrawer
let threeRenderer = window.threeRenderer = new ThreeJSDrawer({viewer, viewport: viewer.viewport, element:viewer.element, stats: stats});
//make the test canvas mirror all changes to the viewer canvas
let viewerCanvas = viewer.drawer.canvas;
let canvas = threeRenderer.canvas;
let canvasContainer = $('#three-canvas-container').append(canvas);
viewer.addHandler("resize", function(){
canvasContainer[0].style.width = viewerCanvas.clientWidth+'px';
canvasContainer[0].style.height = viewerCanvas.clientHeight+'px';
// canvas.width = viewerCanvas.width;
// canvas.height = viewerCanvas.height;
});
// Single viewer showing how to use plugin Drawer via configuration
// Also shows sequence mode
var viewer2 = window.viewer2 = OpenSeadragon({ var viewer2 = window.viewer2 = OpenSeadragon({
id: "three-viewer", id: "three-viewer",
prefixUrl: "../../build/openseadragon/images/", prefixUrl: "../../build/openseadragon/images/",
@ -45,19 +69,9 @@ var viewer2 = window.viewer2 = OpenSeadragon({
ajaxWithCredentials: false ajaxWithCredentials: false
}); });
//make the test canvas mirror all changes to the viewer canvas
// let viewerCanvas = viewer.drawer.canvas;
// let canvas = threeRenderer.canvas;
// let canvasContainer = $('#three-canvas-container').append(canvas);
// viewer.addHandler("resize", function(){
// canvasContainer[0].style.width = viewerCanvas.clientWidth+'px';
// canvasContainer[0].style.height = viewerCanvas.clientHeight+'px';
// // canvas.width = viewerCanvas.width;
// // canvas.height = viewerCanvas.height;
// })
// viewer.addHandler("open", () => viewer.world.getItemAt(0).source.hasTransparency = function(){ return true; });
$('#three-viewer').resizable(true); $('#three-viewer').resizable(true);
$('#contentDiv').resizable(true); $('#contentDiv').resizable(true);
$('#image-picker').sortable({ $('#image-picker').sortable({