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

Revert weird tiledImage check - tests worked now also without. Add generic drawerswitcher utility for demos.

Browse Source
This commit is contained in:
Aiosa 2024-02-08 13:11:10 +01:00
parent a97fe34d74
commit cae6ec6bee
4 changed files with 88 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/tiledimage.js
View File

@ -1826,7 +1826,7 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
if ( tile.loading ) {
// the tile is already in the download queue
this._tilesLoading++;
} else if (!tile.loaded && !loadingCoverage) {
} else if (!loadingCoverage) {
// add tile to best tiles to load only when not loaded already
best = this._compareTiles( best, tile, this.maxTilesPerFrame );
}

9
test/demo/filtering-plugin/demo.js
View File

@ -127,13 +127,20 @@ class SpinnerSlider {
}
const switcher = new DrawerSwitcher();
switcher.addDrawerOption("drawer");
$("#title-drawer").html(switcher.activeName("drawer"));
switcher.render("#title-banner");
const viewer = window.viewer = new OpenSeadragon({
id: 'openseadragon',
prefixUrl: '/build/openseadragon/images/',
tileSources: 'https://openseadragon.github.io/example-images/highsmith/highsmith.dzi',
crossOriginPolicy: 'Anonymous'
crossOriginPolicy: 'Anonymous',
drawer: switcher.activeImplementation("drawer"),
});
// Prevent Caman from caching the canvas because without this:
// 1. We have a memory leak
// 2. Non-caman filters in between 2 camans filters get ignored.

5
test/demo/filtering-plugin/index.html
View File

@ -27,13 +27,14 @@
<!-- Local -->
<link rel="stylesheet" href="style.css">
<script src="plugin.js"></script>
<script src="/test/helpers/drawer-switcher.js"></script>
<!-- Thirdparty -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/camanjs/4.1.2/caman.full.min.js"></script>
</head>
<body>
<section class="home home-title">
<h1>OpenSeadragon filtering plugin demo.</h1>
<section class="home home-title" id="title-banner">
<h1>OpenSeadragon filtering plugin demo: <span id="title-drawer"></span></h1>
<p>You might want to check the plugin repository to see if the plugin code is up to date.</p>
</section>

76
test/helpers/drawer-switcher.js Normal file
View File

@ -0,0 +1,76 @@
/**
* Ability to switch between different drawers.
* Usage: with two viewers, we would do
*
* const switcher = new DrawerSwitcher();
* switcher.addDrawerOption("drawer_left", "Select drawer for the left viewer", "canvas");
* switcher.addDrawerOption("drawer_right", "Select drawer for the right viewer", "webgl");
* const viewer1 = window.viewer1 = new OpenSeadragon({
* id: 'openseadragon',
* ...
* drawer:switcher.activeImplementation("drawer_left"),
* });
* $("#my-title-for-left-drawer").html(`Viewer using drawer ${switcher.activeName("drawer_left")}`);
* $("#container").html(switcher.render());
* // OR switcher.render("#container")
* // ..do the same for the second viewer
*/
class DrawerSwitcher {
url = new URL(window.location.href);
drawers = {
canvas: "Context2d drawer (default in OSD &lt;= 4.1.0)",
webgl: "New WebGL drawer"
};
_data = {}
addDrawerOption(urlQueryName, title="Select drawer:", defaultDrawerImplementation="canvas") {
const drawer = this.url.searchParams.get(urlQueryName) || defaultDrawerImplementation;
if (!this.drawers[drawer]) throw "Unsupported drawer implementation: " + drawer;
let context = this._data[urlQueryName] = {
query: urlQueryName,
implementation: drawer,
title: title
};
}
activeName(urlQueryName) {
return this.drawers[this.activeImplementation(urlQueryName)];
}
activeImplementation(urlQueryName) {
return this._data[urlQueryName].implementation;
}
_getFormData(useNewline=true) {
return Object.values(this._data).map(ctx => `${ctx.title}&nbsp;
<select name="${ctx.query}">
${Object.entries(this.drawers).map(([k, v]) => {
const selected = ctx.implementation === k ? "selected" : "";
return `<option value="${k}" ${selected}>${v}</option>`;
}).join("\n")}
</select>`).join(useNewline ? "<br>" : "");
}
_preserveOtherSeachParams() {
let res = [], registered = Object.keys(this._data);
for (let [k, v] of this.url.searchParams.entries()) {
if (!registered.includes(k)) {
res.push(`<input name="${k}" type="hidden" value=${v} />`);
}
}
return res.join('\n');
}
render(selector, useNewline=undefined) {
useNewline = typeof useNewline === "boolean" ? useNewline : Object.keys(this._data).length > 1;
const html = `<div>
<form method="get">
${this._preserveOtherSeachParams()}
${this._getFormData()}${useNewline ? "<br>":""}<button>Submit</button>
</form>
</div>`;
if (selector) $(selector).append(html);
return html;
}
}