mirror/openseadragon
1
0
Fork 0
mirror of https://github.com/openseadragon/openseadragon.git synced 2024-11-21 20:56:09 +03:00
Code Issues Projects Releases Wiki Activity

Fixed: removeChild on Node

Browse Source 
The overlay.js code has been changed to apply a div wrapper to the overlay element as opposed to its innerHTML.
This commit is contained in:
Richard Benjamin Allen 2024-09-17 12:16:00 +01:00
parent a10b9086ab
commit 3b99665b32
2 changed files with 76 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/overlay.js
View File

@ -128,9 +128,22 @@
}; };
} }
this.elementWrapper = document.createElement('div');
this.element = options.element; this.element = options.element;
this.element.innerHTML = "<div>" + this.element.innerHTML + "</div>"; this.elementWrapper.appendChild(this.element);
this.style = options.element.style;
if (this.element.id) {
this.elementWrapper.id = "overlay-wrapper-" + this.element.id;
} else {
this.elementWrapper.id = "overlay-wrapper";
}
const overlayStyles = window.getComputedStyle(this.element);
for (let style of overlayStyles) {
this.elementWrapper.style[style] = overlayStyles.getPropertyValue(style);
}
this.style = this.elementWrapper.style;
this._init(options); this._init(options);
}; };
@ -197,7 +210,7 @@
* @function * @function
*/ */
destroy: function() { destroy: function() {
var element = this.element; var element = this.elementWrapper;
var style = this.style; var style = this.style;
if (element.parentNode) { if (element.parentNode) {
@ -242,7 +255,7 @@
* @param {Element} container * @param {Element} container
*/ */
drawHTML: function(container, viewport) { drawHTML: function(container, viewport) {
var element = this.element; var element = this.elementWrapper;
if (element.parentNode !== container) { if (element.parentNode !== container) {
//save the source parent for later if we need it //save the source parent for later if we need it
element.prevElementParent = element.parentNode; element.prevElementParent = element.parentNode;
@ -253,7 +266,7 @@
this.style.position = "absolute"; this.style.position = "absolute";
// this.size is used by overlays which don't get scaled in at // this.size is used by overlays which don't get scaled in at
// least one direction when this.checkResize is set to false. // least one direction when this.checkResize is set to false.
this.size = $.getElementSize(element); this.size = $.getElementSize(this.elementWrapper);
} }
var positionAndSize = this._getOverlayPositionAndSize(viewport); var positionAndSize = this._getOverlayPositionAndSize(viewport);
var position = positionAndSize.position; var position = positionAndSize.position;
@ -270,15 +283,17 @@
this.onDraw(position, size, this.element); this.onDraw(position, size, this.element);
} else { } else {
var style = this.style; var style = this.style;
var innerElement = element.firstChild; var innerStyle = this.element.style;
var innerStyle = innerElement.style; innerStyle.display = "block";
style.left = position.x + "px"; style.left = position.x + "px";
style.top = position.y + "px"; style.top = position.y + "px";
if (this.width !== null) { if (this.width !== null) {
style.width = size.x + "px"; style.width = size.x + "px";
innerStyle.width = size.x + "px";
} }
if (this.height !== null) { if (this.height !== null) {
style.height = size.y + "px"; style.height = size.y + "px";
innerStyle.height = size.y + "px";
} }
var transformOriginProp = $.getCssPropertyWithVendorPrefix( var transformOriginProp = $.getCssPropertyWithVendorPrefix(
'transformOrigin'); 'transformOrigin');
@ -303,7 +318,7 @@
style[transformProp] = ""; style[transformProp] = "";
} }
} }
style.display = 'block'; style.display = 'flex';
} }
}, },
@ -355,7 +370,7 @@
} }
if (this.checkResize && if (this.checkResize &&
(this.width === null || this.height === null)) { (this.width === null || this.height === null)) {
var eltSize = this.size = $.getElementSize(this.element); var eltSize = this.size = $.getElementSize(this.elementWrapper);
if (this.width === null) { if (this.width === null) {
width = eltSize.x; width = eltSize.x;
} }

83
test/modules/overlays.js
View File

@ -254,7 +254,7 @@
var expPosition = viewport.imageToViewerElementCoordinates( var expPosition = viewport.imageToViewerElementCoordinates(
new OpenSeadragon.Point(13, 120)); new OpenSeadragon.Point(13, 120));
var actPosition = $("#overlay").position(); var actPosition = $("#overlay-wrapper-overlay").position();
Util.assessNumericValue(assert, actPosition.left, expPosition.x, epsilon, Util.assessNumericValue(assert, actPosition.left, expPosition.x, epsilon,
"X position mismatch " + contextMessage); "X position mismatch " + contextMessage);
Util.assessNumericValue(assert, actPosition.top, expPosition.y, epsilon, Util.assessNumericValue(assert, actPosition.top, expPosition.y, epsilon,
@ -263,23 +263,23 @@
var zoom = viewport.viewportToImageZoom(viewport.getZoom(true)); var zoom = viewport.viewportToImageZoom(viewport.getZoom(true));
var expectedWidth = 124 * zoom; var expectedWidth = 124 * zoom;
var expectedHeight = 132 * zoom; var expectedHeight = 132 * zoom;
Util.assessNumericValue(assert, $("#overlay").width(), expectedWidth, epsilon, Util.assessNumericValue(assert, $("#overlay-wrapper-overlay").width(), expectedWidth, epsilon,
"Width mismatch " + contextMessage); "Width mismatch " + contextMessage);
Util.assessNumericValue(assert, $("#overlay").height(), expectedHeight, epsilon, Util.assessNumericValue(assert, $("#overlay-wrapper-overlay").height(), expectedHeight, epsilon,
"Height mismatch " + contextMessage); "Height mismatch " + contextMessage);
expPosition = viewport.imageToViewerElementCoordinates( expPosition = viewport.imageToViewerElementCoordinates(
new OpenSeadragon.Point(400, 500)); new OpenSeadragon.Point(400, 500));
actPosition = $("#fixed-overlay").position(); actPosition = $("#overlay-wrapper-fixed-overlay").position();
Util.assessNumericValue(assert, actPosition.left, expPosition.x, epsilon, Util.assessNumericValue(assert, actPosition.left, expPosition.x, epsilon,
"Fixed overlay X position mismatch " + contextMessage); "Fixed overlay X position mismatch " + contextMessage);
Util.assessNumericValue(assert, actPosition.top, expPosition.y, epsilon, Util.assessNumericValue(assert, actPosition.top, expPosition.y, epsilon,
"Fixed overlay Y position mismatch " + contextMessage); "Fixed overlay Y position mismatch " + contextMessage);
Util.assessNumericValue(assert, $("#fixed-overlay").width(), 70, epsilon, Util.assessNumericValue(assert, $("#overlay-wrapper-fixed-overlay").width(), 70, epsilon,
"Fixed overlay width mismatch " + contextMessage); "Fixed overlay width mismatch " + contextMessage);
Util.assessNumericValue(assert, $("#fixed-overlay").height(), 60, epsilon, Util.assessNumericValue(assert, $("#overlay-wrapper-fixed-overlay").height(), 60, epsilon,
"Fixed overlay height mismatch " + contextMessage); "Fixed overlay height mismatch " + contextMessage);
} }
@ -326,7 +326,7 @@
var expPosition = viewport.viewportToViewerElementCoordinates( var expPosition = viewport.viewportToViewerElementCoordinates(
new OpenSeadragon.Point(0.2, 0.1)); new OpenSeadragon.Point(0.2, 0.1));
var actPosition = $("#overlay").position(); var actPosition = $("#overlay-wrapper-overlay").position();
Util.assessNumericValue(assert, actPosition.left, expPosition.x, epsilon, Util.assessNumericValue(assert, actPosition.left, expPosition.x, epsilon,
"X position mismatch " + contextMessage); "X position mismatch " + contextMessage);
Util.assessNumericValue(assert, actPosition.top, expPosition.y, epsilon, Util.assessNumericValue(assert, actPosition.top, expPosition.y, epsilon,
@ -334,23 +334,23 @@
var expectedSize = viewport.deltaPixelsFromPoints( var expectedSize = viewport.deltaPixelsFromPoints(
new OpenSeadragon.Point(0.5, 0.1)); new OpenSeadragon.Point(0.5, 0.1));
Util.assessNumericValue(assert, $("#overlay").width(), expectedSize.x, epsilon, Util.assessNumericValue(assert, $("#overlay-wrapper-overlay").width(), expectedSize.x, epsilon,
"Width mismatch " + contextMessage); "Width mismatch " + contextMessage);
Util.assessNumericValue(assert, $("#overlay").height(), expectedSize.y, epsilon, Util.assessNumericValue(assert, $("#overlay-wrapper-overlay").height(), expectedSize.y, epsilon,
"Height mismatch " + contextMessage); "Height mismatch " + contextMessage);
expPosition = viewport.viewportToViewerElementCoordinates( expPosition = viewport.viewportToViewerElementCoordinates(
new OpenSeadragon.Point(0.5, 0.6)); new OpenSeadragon.Point(0.5, 0.6));
actPosition = $("#fixed-overlay").position(); actPosition = $("#overlay-wrapper-fixed-overlay").position();
Util.assessNumericValue(assert, actPosition.left, expPosition.x, epsilon, Util.assessNumericValue(assert, actPosition.left, expPosition.x, epsilon,
"Fixed overlay X position mismatch " + contextMessage); "Fixed overlay X position mismatch " + contextMessage);
Util.assessNumericValue(assert, actPosition.top, expPosition.y, epsilon, Util.assessNumericValue(assert, actPosition.top, expPosition.y, epsilon,
"Fixed overlay Y position mismatch " + contextMessage); "Fixed overlay Y position mismatch " + contextMessage);
Util.assessNumericValue(assert, $("#fixed-overlay").width(), 70, epsilon, Util.assessNumericValue(assert, $("#overlay-wrapper-fixed-overlay").width(), 70, epsilon,
"Fixed overlay width mismatch " + contextMessage); "Fixed overlay width mismatch " + contextMessage);
Util.assessNumericValue(assert, $("#fixed-overlay").height(), 60, epsilon, Util.assessNumericValue(assert, $("#overlay-wrapper-fixed-overlay").height(), 60, epsilon,
"Fixed overlay height mismatch " + contextMessage); "Fixed overlay height mismatch " + contextMessage);
} }
@ -402,7 +402,7 @@
var expPosition = viewport.viewportToViewerElementCoordinates( var expPosition = viewport.viewportToViewerElementCoordinates(
new OpenSeadragon.Point(0.2, 0.1)); new OpenSeadragon.Point(0.2, 0.1));
var actPosition = $("#overlay").position(); var actPosition = $("#overlay-wrapper-overlay").position();
Util.assessNumericValue(assert, actPosition.left, expPosition.x, epsilon, Util.assessNumericValue(assert, actPosition.left, expPosition.x, epsilon,
"X position mismatch " + contextMessage); "X position mismatch " + contextMessage);
Util.assessNumericValue(assert, actPosition.top, expPosition.y, epsilon, Util.assessNumericValue(assert, actPosition.top, expPosition.y, epsilon,
@ -415,7 +415,7 @@
var expPosition = viewport.viewportToViewerElementCoordinates( var expPosition = viewport.viewportToViewerElementCoordinates(
new OpenSeadragon.Point(0.5, 0.6)) new OpenSeadragon.Point(0.5, 0.6))
.plus(expectedOffset); .plus(expectedOffset);
var actPosition = $("#fixed-overlay").position(); var actPosition = $("#overlay-wrapper-fixed-overlay").position();
Util.assessNumericValue(assert, actPosition.left, expPosition.x, epsilon, Util.assessNumericValue(assert, actPosition.left, expPosition.x, epsilon,
"Fixed overlay X position mismatch " + contextMessage); "Fixed overlay X position mismatch " + contextMessage);
Util.assessNumericValue(assert, actPosition.top, expPosition.y, epsilon, Util.assessNumericValue(assert, actPosition.top, expPosition.y, epsilon,
@ -481,7 +481,7 @@
var expPosition = viewport.viewportToViewerElementCoordinates( var expPosition = viewport.viewportToViewerElementCoordinates(
new OpenSeadragon.Point(0.5, 0.6)) new OpenSeadragon.Point(0.5, 0.6))
.plus(expectedOffset); .plus(expectedOffset);
var actPosition = $("#fixed-overlay").position(); var actPosition = $("#overlay-wrapper-fixed-overlay").position();
Util.assessNumericValue(assert, actPosition.left, expPosition.x, epsilon, Util.assessNumericValue(assert, actPosition.left, expPosition.x, epsilon,
"Fixed overlay X position mismatch " + contextMessage); "Fixed overlay X position mismatch " + contextMessage);
Util.assessNumericValue(assert, actPosition.top, expPosition.y, epsilon, Util.assessNumericValue(assert, actPosition.top, expPosition.y, epsilon,
@ -492,8 +492,8 @@
checkFixedOverlayPosition(new OpenSeadragon.Point(-35, -30), checkFixedOverlayPosition(new OpenSeadragon.Point(-35, -30),
"with overlay of size 70,60."); "with overlay of size 70,60.");
$("#fixed-overlay").width(50); $("#overlay-wrapper-fixed-overlay").width(50);
$("#fixed-overlay").height(40); $("#overlay-wrapper-fixed-overlay").height(40);
// The resizing of the overlays is not detected by the viewer's loop. // The resizing of the overlays is not detected by the viewer's loop.
viewer.forceRedraw(); viewer.forceRedraw();
@ -503,8 +503,8 @@
"with overlay of size 50,40."); "with overlay of size 50,40.");
// Restore original size // Restore original size
$("#fixed-overlay").width(70); $("#overlay-wrapper-fixed-overlay").width(70);
$("#fixed-overlay").height(60); $("#overlay-wrapper-fixed-overlay").height(60);
done(); done();
}, 100); }, 100);
@ -536,7 +536,7 @@
var expPosition = viewport.viewportToViewerElementCoordinates( var expPosition = viewport.viewportToViewerElementCoordinates(
new OpenSeadragon.Point(0.5, 0.6)) new OpenSeadragon.Point(0.5, 0.6))
.plus(expectedOffset); .plus(expectedOffset);
var actPosition = $("#fixed-overlay").position(); var actPosition = $("#overlay-wrapper-fixed-overlay").position();
Util.assessNumericValue(assert, actPosition.left, expPosition.x, epsilon, Util.assessNumericValue(assert, actPosition.left, expPosition.x, epsilon,
"Fixed overlay X position mismatch " + contextMessage); "Fixed overlay X position mismatch " + contextMessage);
Util.assessNumericValue(assert, actPosition.top, expPosition.y, epsilon, Util.assessNumericValue(assert, actPosition.top, expPosition.y, epsilon,
@ -547,8 +547,8 @@
checkFixedOverlayPosition(new OpenSeadragon.Point(-35, -30), checkFixedOverlayPosition(new OpenSeadragon.Point(-35, -30),
"with overlay of size 70,60."); "with overlay of size 70,60.");
$("#fixed-overlay").width(50); $("#overlay-wrapper-fixed-overlay").width(50);
$("#fixed-overlay").height(40); $("#overlay-wrapper-fixed-overlay").height(40);
// The resizing of the overlays is not detected by the viewer's loop. // The resizing of the overlays is not detected by the viewer's loop.
viewer.forceRedraw(); viewer.forceRedraw();
@ -558,8 +558,8 @@
"with overlay of size 50,40."); "with overlay of size 50,40.");
// Restore original size // Restore original size
$("#fixed-overlay").width(70); $("#overlay-wrapper-fixed-overlay").width(70);
$("#fixed-overlay").height(60); $("#overlay-wrapper-fixed-overlay").height(60);
done(); done();
}, 100); }, 100);
@ -783,7 +783,7 @@
viewer.addOnceHandler('open', function() { viewer.addOnceHandler('open', function() {
var viewport = viewer.viewport; var viewport = viewer.viewport;
var $overlay = $("#fully-scaled-overlay"); var $overlay = $("#overlay-wrapper-fully-scaled-overlay");
var expectedSize = viewport.deltaPixelsFromPointsNoRotate( var expectedSize = viewport.deltaPixelsFromPointsNoRotate(
new OpenSeadragon.Point(1, 1)); new OpenSeadragon.Point(1, 1));
var expectedPosition = viewport.viewportToViewerElementCoordinates( var expectedPosition = viewport.viewportToViewerElementCoordinates(
@ -834,7 +834,7 @@
}); });
viewer.addOnceHandler('open', function() { viewer.addOnceHandler('open', function() {
var $overlay = $("#horizontally-scaled-overlay"); var $overlay = $("#overlay-wrapper-horizontally-scaled-overlay");
var notScaledWidth = 100; var notScaledWidth = 100;
var notScaledHeight = 100; var notScaledHeight = 100;
$overlay.get(0).style.height = notScaledHeight + "px"; $overlay.get(0).style.height = notScaledHeight + "px";
@ -897,7 +897,7 @@
}); });
viewer.addOnceHandler('open', function() { viewer.addOnceHandler('open', function() {
var $overlay = $("#vertically-scaled-overlay"); var $overlay = $("#overlay-wrapper-vertically-scaled-overlay");
var notScaledWidth = 100; var notScaledWidth = 100;
var notScaledHeight = 100; var notScaledHeight = 100;
$overlay.get(0).style.width = notScaledWidth + "px"; $overlay.get(0).style.width = notScaledWidth + "px";
@ -959,7 +959,7 @@
}); });
viewer.addOnceHandler('open', function() { viewer.addOnceHandler('open', function() {
var $overlay = $("#not-scaled-overlay"); var $overlay = $("#overlay-wrapper-not-scaled-overlay");
var notScaledWidth = 100; var notScaledWidth = 100;
var notScaledHeight = 100; var notScaledHeight = 100;
$overlay.get(0).style.width = notScaledWidth + "px"; $overlay.get(0).style.width = notScaledWidth + "px";
@ -1024,7 +1024,7 @@
viewer.addOnceHandler('open', function() { viewer.addOnceHandler('open', function() {
var viewport = viewer.viewport; var viewport = viewer.viewport;
var $overlay = $("#fully-scaled-overlay"); var $overlay = $("#overlay-wrapper-fully-scaled-overlay");
var expectedRect = viewport.viewportToViewerElementRectangle( var expectedRect = viewport.viewportToViewerElementRectangle(
new OpenSeadragon.Rect(0, 0, 1, 1)).getBoundingBox(); new OpenSeadragon.Rect(0, 0, 1, 1)).getBoundingBox();
var actualPosition = $overlay.position(); var actualPosition = $overlay.position();
@ -1060,6 +1060,28 @@
}); });
}); });
// ----------
QUnit.test('Remove Child from Overlay', function(assert){
var done = assert.async();
viewer = OpenSeadragon({
id: 'example-overlays',
prefixUrl: '/build/openseadragon/images/',
tileSources: '/test/data/testpattern.dzi'
});
viewer.addOnceHandler('open', function() {
var $overlay = document.createElement("div");
var something = document.createElement("p");
$overlay.appendChild(something);
viewer.addOverlay($overlay);
$overlay.removeChild(something);
something.innerHTML = '...';
assert.equal(something.innerHTML, '...');
done();
});
});
// ---------- // ----------
QUnit.test('Fully scaled overlay rotation mode EXACT', function(assert) { QUnit.test('Fully scaled overlay rotation mode EXACT', function(assert) {
var done = assert.async(); var done = assert.async();
@ -1082,8 +1104,7 @@
viewer.addOnceHandler('open', function() { viewer.addOnceHandler('open', function() {
var viewport = viewer.viewport; var viewport = viewer.viewport;
var $overlay = $("#overlay-wrapper-fully-scaled-overlay");
var $overlay = $("#fully-scaled-overlay");
var expectedSize = viewport.deltaPixelsFromPointsNoRotate( var expectedSize = viewport.deltaPixelsFromPointsNoRotate(
new OpenSeadragon.Point(1, 1)); new OpenSeadragon.Point(1, 1));
var expectedPosition = viewport.pixelFromPoint( var expectedPosition = viewport.pixelFromPoint(