Spaces:
Sleeping
Sleeping
File size: 4,253 Bytes
1fc30ae 98ba57c 1fc30ae 5bd52ac 1fc30ae |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 |
var viewer = OpenSeadragon({
id: "wsi-canvas",
prefixUrl: "./node_modules/openseadragon/build/openseadragon/images/",
zoomPerScroll: 2,
zoomPerClick: 1,
showNavigator: true,
showHomeControl: false,
showFullPageControl: false,
showZoomControl: false,
minZoomLevel: 0.25,
maxZoomLevel: 40,
tileSources: {
Image: {
xmlns: "http://schemas.microsoft.com/deepzoom/2008",
Url: "./A05_files/",
Format: "jpeg",
Overlap: "0",
TileSize: "256",
Size: {
Height: 42625,
Width: 51553
}
},
overlays: [],
},
});
viewer.innerTracker.keyHandler = null;
var anno = OpenSeadragon.Annotorious(viewer);
Annotorious.SelectorPack(anno);
const toolbar = new Annotorious.Toolbar(anno, document.getElementById('annotation-toolbar'));
viewer.addControl(document.getElementById("annotation-toolbar"), { anchor: OpenSeadragon.ControlAnchor.TOP_LEFT });
document.getElementById('annotation-toolbar').addEventListener('click', function (event) {
event.preventDefault();
});
// Listen for annotation creation event
anno.on('createAnnotation', function (annotation) {
// Create a new div element for the annotation
var annotationItem = document.createElement('div');
annotationItem.className = 'annotation-item';
annotationItem.dataset.annotationId = annotation.id;
// Add annotation details to the item
annotationItem.innerHTML = `${annotation.body[0].value}`;
// Add click event to make the annotation active
annotationItem.addEventListener('click', function () {
anno.selectAnnotation(annotation.id);
});
// Append the annotation item to the annotations list in the sidebar
document.getElementById('annotations-list').appendChild(annotationItem);
});
// Listen for annotation deletion event
anno.on('deleteAnnotation', function (annotation) {
// Find the corresponding annotation item in the sidebar
var annotationItems = document.querySelectorAll('.annotation-item');
annotationItems.forEach(function (item) {
if (item.dataset.annotationId === annotation.id) {
item.remove();
}
});
});
// Disable panning when polygon tool is active
anno.on('startSelection', function (event) {
if (event.tool === 'polygon') {
viewer.setMouseNavEnabled(false);
}
});
// Re-enable panning when polygon tool is deactivated
anno.on('cancelSelection', function (event) {
if (event.tool === 'polygon') {
viewer.setMouseNavEnabled(true);
}
});
anno.on('createAnnotation', function (event) {
if (event.tool === 'polygon') {
viewer.setMouseNavEnabled(true);
}
});
// Add a listener to the viewer to update the position and zoom info
var positionEl = document.querySelectorAll('.sidebar-right .position')[0];
var zoomEl = document.querySelectorAll('.sidebar-right .zoom')[0];
// Default values
positionEl.innerHTML = 'Web:<br> (NA) <br><br>Viewport:<br> (NA) <br><br>Image:<br> (NA)';
zoomEl.innerHTML = 'Zoom:<br> NA <br><br>Image Zoom:<br> NA';
var updateZoom = function () {
var zoom = viewer.viewport.getZoom(true);
var imageZoom = viewer.viewport.viewportToImageZoom(zoom);
zoomEl.innerHTML = 'Zoom:<br>' + (Math.round(zoom * 100) / 100) +
'<br><br>Image Zoom:<br>' + (Math.round(imageZoom * 100) / 100);
}
viewer.addHandler('open', function () {
var tracker = new OpenSeadragon.MouseTracker({
element: viewer.container,
moveHandler: function (event) {
var webPoint = event.position;
var viewportPoint = viewer.viewport.pointFromPixel(webPoint);
var imagePoint = viewer.viewport.viewportToImageCoordinates(viewportPoint);
var zoom = viewer.viewport.getZoom(true);
var imageZoom = viewer.viewport.viewportToImageZoom(zoom);
positionEl.innerHTML = 'Web:<br>' + webPoint.toString() +
'<br><br>Viewport:<br>' + viewportPoint.toString() +
'<br><br>Image:<br>' + imagePoint.toString();
updateZoom();
}
});
tracker.setTracking(true);
viewer.addHandler('animation', updateZoom);
});
|