From 23c011d57e2ab70bcc23d40162f667072e449855 Mon Sep 17 00:00:00 2001 From: Thomas Low Date: Fri, 27 Sep 2024 13:22:33 +0200 Subject: [PATCH 01/43] Refactor detail view Javascript. Update OpenLayers to v6.14.1. Fix issue #5796. --- .../forms/dataeditor/GalleryPanel.java | 2 +- .../webapp/WEB-INF/resources/css/kitodo.css | 4 + .../WEB-INF/resources/js/metadata_editor.js | 4 +- .../webapp/WEB-INF/resources/js/ol_custom.js | 583 ++++++++++++------ .../webapp/WEB-INF/resources/js/resize.js | 7 +- .../metadataEditor/dialogs/pagination.xhtml | 2 +- .../includes/metadataEditor/gallery.xhtml | 6 +- .../metadataEditor/logicalStructure.xhtml | 4 +- .../metadataEditor/physicalStructure.xhtml | 4 +- pom.xml | 2 +- 10 files changed, 409 insertions(+), 209 deletions(-) diff --git a/Kitodo/src/main/java/org/kitodo/production/forms/dataeditor/GalleryPanel.java b/Kitodo/src/main/java/org/kitodo/production/forms/dataeditor/GalleryPanel.java index 3d09eb0bfb3..ada4f3655ee 100644 --- a/Kitodo/src/main/java/org/kitodo/production/forms/dataeditor/GalleryPanel.java +++ b/Kitodo/src/main/java/org/kitodo/production/forms/dataeditor/GalleryPanel.java @@ -859,7 +859,7 @@ private void selectMedia(String physicalDivisionOrder, String stripeIndex, Strin String scrollScripts = "scrollToSelectedTreeNode();scrollToSelectedPaginationRow();"; if (GalleryViewMode.PREVIEW.equals(galleryViewMode)) { PrimeFaces.current().executeScript( - "checkScrollPosition();initializeImage();metadataEditor.gallery.mediaView.update();" + scrollScripts); + "checkScrollPosition();metadataEditor.detailMap.update();metadataEditor.gallery.mediaView.update();" + scrollScripts); } else { PrimeFaces.current().executeScript(scrollScripts); } diff --git a/Kitodo/src/main/webapp/WEB-INF/resources/css/kitodo.css b/Kitodo/src/main/webapp/WEB-INF/resources/css/kitodo.css index a5e3a0e66e3..42a7d695a0c 100644 --- a/Kitodo/src/main/webapp/WEB-INF/resources/css/kitodo.css +++ b/Kitodo/src/main/webapp/WEB-INF/resources/css/kitodo.css @@ -3242,6 +3242,9 @@ Column content left: 16px; position: absolute; top: 16px; + display: flex; + flex-direction: column; + align-items: start; } #map .ol-overlaycontainer-stopevent > .ol-zoom.ol-unselectable.ol-control { @@ -3263,6 +3266,7 @@ Column content } #map .ol-control { + display: inline-block; background: transparent; padding: 0; position: static; diff --git a/Kitodo/src/main/webapp/WEB-INF/resources/js/metadata_editor.js b/Kitodo/src/main/webapp/WEB-INF/resources/js/metadata_editor.js index ccd10ae33c0..4cd4f57e078 100644 --- a/Kitodo/src/main/webapp/WEB-INF/resources/js/metadata_editor.js +++ b/Kitodo/src/main/webapp/WEB-INF/resources/js/metadata_editor.js @@ -14,7 +14,7 @@ /*eslint new-cap: ["error", { "capIsNewExceptionPattern": "^PF" }]*/ /*eslint complexity: ["error", 10]*/ -var metadataEditor = {}; +var metadataEditor = metadataEditor || {}; metadataEditor.metadataTree = { @@ -1147,7 +1147,7 @@ metadataEditor.shortcuts = { case "PREVIEW": initialize(); scrollToSelectedThumbnail(); - changeToMapView(); + metadataEditor.detailMap.update(); break; } } diff --git a/Kitodo/src/main/webapp/WEB-INF/resources/js/ol_custom.js b/Kitodo/src/main/webapp/WEB-INF/resources/js/ol_custom.js index 049d0f7da75..dee541b733c 100644 --- a/Kitodo/src/main/webapp/WEB-INF/resources/js/ol_custom.js +++ b/Kitodo/src/main/webapp/WEB-INF/resources/js/ol_custom.js @@ -11,244 +11,441 @@ /* globals ol */ // jshint unused:false -// Kitodo namespace -var kitodo = {}; -kitodo.map = null; - /** - * @param {Object=} options Custom control options for Kitodo in OpenLayers - * @extends {ol.control.Rotate} - * @constructor + * Abstract class describing a custom control button for the OpenLayers map. */ -kitodo.RotateLeftControl = function(options = {}) { - var buttonLeft = document.createElement('button'); - buttonLeft.innerHTML = ""; - buttonLeft.setAttribute("type", "button"); - buttonLeft.setAttribute("title", "Rotate left"); +class CustomControl extends ol.control.Control { + + /** + * Initializes a custom control button with various options. + * + * @param {object} options the custom control options (className, icon, title, other OpenLayer options) + */ + constructor(options) { + const className = options.className; + const icon = options.icon; + const title = options.title; + + const button = document.createElement('button'); + button.innerHTML = ""; + button.setAttribute("type", "button"); + button.setAttribute("title", title); + + const element = document.createElement('div'); + element.className = className + ' ol-unselectable ol-control ol-rotate'; + element.appendChild(button); + + super({ + element: element, + target: options.target + }); + + button.addEventListener('click', this.handleClick.bind(this), false); + } + + /** + * Abstract method that handles a click event on the button. + * + * @param {MouseEvent} event the click event + */ + handleClick(event) { + // not implemented + } +}; - var this_ = this; +/** + * Custom control that rotates the image 90 degrees to the left. + */ +class RotateLeftControl extends CustomControl { + + constructor(options) { + super(Object.assign(options || {}, { + className: "rotate-left", + icon: "fa-undo", + title: "Rotate left", + })); + } - var handleRotateLeft = function() { - var view = this_.getMap().getView(); + handleClick() { + const view = this.getMap().getView(); view.animate({ rotation: view.getRotation() - (90 * (Math.PI / 180)), duration: 100 }); - }; - - buttonLeft.addEventListener('click', handleRotateLeft, false); - - var elementLeft = document.createElement('div'); - elementLeft.className = 'rotate-left ol-unselectable ol-control ol-rotate'; - elementLeft.appendChild(buttonLeft); - - ol.control.Control.call(this, { - element: elementLeft, - target: options.target - }); + } }; /** - * @param {Object=} options Custom control options for Kitodo in OpenLayers - * @extends {ol.control.Rotate} - * @constructor + * Custom control that rotates the image 90 degrees to the right. */ -kitodo.RotateRightControl = function(options = {}) { - var buttonRight = document.createElement('button'); - buttonRight.innerHTML = ""; - buttonRight.setAttribute("type", "button"); - buttonRight.setAttribute("title", "Rotate right"); - - var this_ = this; +class RotateRightControl extends CustomControl { + + constructor(options) { + super(Object.assign(options || {}, { + className: "rotate-right", + icon: "fa-repeat", + title: "Rotate right", + })); + } - var handleRotateRight = function() { - var view = this_.getMap().getView(); + handleClick() { + const view = this.getMap().getView(); view.animate({ - rotation: view.getRotation() + (90 * (Math.PI / 180)), + rotation: view.getRotation() + (90 * (Math.PI / 180)), duration: 100 }); - }; - - buttonRight.addEventListener('click', handleRotateRight, false); - - var elementRight = document.createElement('div'); - elementRight.className = 'rotate-right ol-unselectable ol-control ol-rotate'; - elementRight.appendChild(buttonRight); - - ol.control.Control.call(this, { - element: elementRight, - target: options.target, - duration: 250 - }); + } }; -function resetNorth() { - if (kitodo.map) { - let view = kitodo.map.getView(); - view.animate({ +/** + * Custom control that rotates the image back to default. + */ +class RotateNorthControl extends CustomControl { + + constructor(options) { + super(Object.assign(options || {}, { + className: "rotate-north", + icon: "fa-compass", + title: "Reset orientation", + })); + } + + handleClick() { + this.getMap().getView().animate({ rotation: 0, - duration: 0 + duration: 100 }); } -} +}; /** - * @param {Object=} options Custom control options for Kitodo in OpenLayers - * @extends {ol.control.Rotate} - * @constructor + * Custom control that scales the image back to default. */ -kitodo.ResetNorthControl = function(options = {}) { - let buttonResetNorth = document.createElement("button"); - buttonResetNorth.innerHTML = ""; - buttonResetNorth.setAttribute("type", "button"); - buttonResetNorth.setAttribute("title", "Reset orientation"); - - buttonResetNorth.addEventListener("click", resetNorth, false); - - let elementResetNorth = document.createElement("div"); - elementResetNorth.className = "ol-rotate ol-unselectable ol-control"; /*ol-rotate-reset*/ - elementResetNorth.appendChild(buttonResetNorth); - - ol.control.Control.call(this, { - element: elementResetNorth, - target: options.target, - duration: 250 - }); +class ResetZoomControl extends CustomControl { + + /** The image dimensions as OpenLayers extent */ + #extent; + + /** + * Initialize a custom control button that scales the image back to its default position. + * + * @param {object} options containing the extent (Array) describing the image dimensions + */ + constructor(options) { + super(Object.assign(options, { + className: "reset-zoom", + icon: "fa-expand", + title: "Reset zoom", + })); + this.#extent = options.extent; + } + + handleClick() { + this.getMap().getView().fit(this.#extent, {}); + } }; -ol.inherits(kitodo.RotateLeftControl, ol.control.Rotate); -ol.inherits(kitodo.RotateRightControl, ol.control.Rotate); -ol.inherits(kitodo.ResetNorthControl, ol.control.Rotate); +/** + * Class managing OpenLayers detail map showing images. + */ +class KitodoDetailMap { + + /** + * Remember position, rotation and zoom level such that a new OpenLayers map can be + * initialized with the same position, rotation and zoom level when new images are selected. + */ + #last_view = { + center: null, + zoom: null, + rotation: null, + }; + + /** + * Image properties of the image that is currently shown in OpenLayers. Object with properties + * dimensions (width, height) and path (url). + */ + #image = { + dimensions: null, + path: null, + }; -function random(length) { - var text = ""; - var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; + /** + * The OpenLayers maps instance + */ + #map = null; - for (var i = 0; i < length; i++) { - text += possible.charAt(Math.floor(Math.random() * possible.length)); + /** + * Initialize a new Kitodo detail map + */ + constructor() { + this.registerResizeEvent(); } - return text; -} + /** + * Debounces various event handlers to improve performance, e.g. when resizing. + * + * @param {function} func the function to be debounced + * @param {number} timeout the timeout in milliseconds + * + * @returns {function} the debounced function + */ + static makeDebounced(func, timeout = 100) { + let timer = null; + return function () { + clearTimeout(timer); + timer = setTimeout(func, timeout); + }; + } -function createProjection(extent) { - return new ol.proj.Projection({ - code: 'kitodo-image', - units: 'pixels', - extent: extent - }); -} + /** + * Generate a random string of [a-zA-Z0-9]. + * + * @param {number} length the length of the string to be generated + * @returns the string of random characters + */ + static randomUUID(length) { + const possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; + + let text = ""; + for (let i = 0; i < length; i++) { + text += possible.charAt(Math.floor(Math.random() * possible.length)); + } + + return text; + } -function createSource(extent, imagePath, projection) { - return new ol.source.ImageStatic({ - url: imagePath, - projection: projection, - imageExtent: extent - }); -} + /** + * Create an OpenLayers projection given the image extent. + * + * @param {Array} extent the extent describing the image dimensions + * @returns {ol.proj.Projection} the OpenLayers projection + */ + createProjection(extent) { + return new ol.proj.Projection({ + code: 'kitodo-image', + units: 'pixels', + extent: extent + }); + } -function hideCanvas() { - let map = document.querySelector("#map canvas"); - let loadingIcon = document.querySelector("#map > .fa-spinner"); - if (map) { - map.style.opacity = 0; - loadingIcon.style.opacity = 1; + /** + * Create an OpenLayers source object for the image. + * + * @param {Array} extent the extent describing the image dimensions + * @param {string} path the path (url) of the image + * @param {ol.proj.Projection} projection the OpenLayers projection used to map the image to the canvas + * @returns {ol.source.ImageStatic} the OpenLayers image source object + */ + createSource(extent, path, projection) { + return new ol.source.ImageStatic({ + url: path, + projection: projection, + imageExtent: extent, + interpolate: true + }); } -} -function showCanvas() { - let map = document.querySelector("#map canvas"); - let loadingIcon = document.querySelector("#map > .fa-spinner"); - if (map) { - map.style.opacity = 1; - loadingIcon.style.opacity = 0; + /** + * Hide the map canvas (while the image is loading) + */ + hideCanvas() { + let canvas = document.querySelector("#map canvas"); + let loadingIcon = document.querySelector("#map > .fa-spinner"); + if (canvas) { + canvas.style.opacity = 0; + loadingIcon.style.opacity = 1; + } + } + + /** + * Show the map canvas (as soon as the image has finished loading) + */ + showCanvas() { + let canvas = document.querySelector("#map canvas"); + let loadingIcon = document.querySelector("#map > .fa-spinner"); + if (canvas) { + canvas.style.opacity = 1; + loadingIcon.style.opacity = 0; + } } -} -function initializeMap(imageDimensions, imagePath) { - // Map image coordinates to map coordinates to be able to use image extent in pixels. - let extent = [0, 0, imageDimensions[0], imageDimensions[1]]; - let projection = createProjection(extent); - - kitodo.map = new ol.Map({ - controls: ol.control.defaults({ - attributionOptions: { - collapsible: false - }, - zoomOptions: { - delta: 3 - }, - rotate: false - }).extend([ - new kitodo.RotateRightControl(), - new kitodo.RotateLeftControl(), - new kitodo.ResetNorthControl() - ]), - layers: [ - new ol.layer.Image({ - source: createSource(extent, imagePath, projection) - }) - ], - target: 'map', - view: new ol.View({ - projection: projection, - center: ol.extent.getCenter(extent), - zoomFactor: 1.1 - }) - }); - kitodo.map.getView().fit(extent, {}); - kitodo.map.on("rendercomplete", function () { - showCanvas(); - }); -} + /** + * Handler that is called as soon as the image was completely loaded + * @param {*} image the jQuery image dom element + */ + onImageLoad(image) { + this.#image = { + dimensions: [image.width(), image.height()], + path: image[0].src, + }; + this.initializeOpenLayersMap(); + } -function updateMap(imageDimensions, imagePath) { - // Map image coordinates to map coordinates to be able to use image extent in pixels. - let extent = [0, 0, imageDimensions[0], imageDimensions[1]]; - let projection = createProjection(extent); + /** + * Register the load event for the current image. + */ + registerImageLoadEvent() { + this.hideCanvas(); + let image = $("#imagePreviewForm\\:mediaPreviewGraphicImage"); + if (image.length > 0) { + image.on("load", this.onImageLoad.bind(this, image)); + image[0].src = image[0].src.replace(/&uuid=[a-z0-9]+/i, "") + "&uuid=" + KitodoDetailMap.randomUUID(8); + } + } - kitodo.map.getLayers().getArray()[0].setSource(createSource(extent, imagePath, projection)); - kitodo.map.getView().setCenter(ol.extent.getCenter(extent)); - kitodo.map.getView().getProjection().setExtent(extent); - kitodo.map.getView().fit(extent, {}); -} + /** + * Return extent array containg image dimensions. + * + * @param {Array} dimensions dimensions in pixel as [width, height] + * @returns {Array} the extent array + */ + createImageExtent(dimensions) { + return [0, 0, dimensions[0], dimensions[1]]; + } + + /** + * Creates the OpenLayers map object as soon as the image as been loaded. + */ + initializeOpenLayersMap() { + // Map image coordinates to map coordinates to be able to use image extent in pixels. + const extent = this.createImageExtent(this.#image.dimensions); + const projection = this.createProjection(extent); + + if (this.#map) { + // make last OpenLayers map forget canvas target + // (triggers OpenLayers cleanup code and allows garbage collection) + this.#map.setTarget(null); + } -function addListener(element) { - element.on("load", function () { - if (kitodo.map && $("#map .ol-viewport").length) { - updateMap([element.width(), element.height()], element[0].src); - } else { - initializeMap([element.width(), element.height()], element[0].src); + // initialize new OpenLayers map + this.#map = new ol.Map({ + controls: ol.control.defaults({ + attributionOptions: { + collapsible: false + }, + zoomOptions: { + delta: 3 // zoom delta when clicking zoom buttons + }, + rotate: false + }).extend([ + new RotateLeftControl(), + new RotateRightControl(), + new RotateNorthControl(), + new ResetZoomControl({extent: extent}) + ]), + interactions: ol.interaction.defaults({ + zoomDelta: 5, // zoom delta when using mouse wheel + zoomDuration: 100, + }), + layers: [ + new ol.layer.Image({ + source: this.createSource(extent, this.#image.path, projection) + }) + ], + target: 'map', + view: new ol.View({ + projection: projection, + center: this.unnormalizeCenter(this.#last_view.center, extent), + zoom: this.#last_view.zoom, + rotation: this.#last_view.rotation, + zoomFactor: 1.1, + extent: extent, + constrainOnlyCenter: true, + smoothExtentConstraint: true, + showFullExtent: true + }) + }); + if (this.#last_view.center == null) { + // fit image to current viewport unless previous zoom and center position is known + this.#map.getView().fit(extent, {}); } - }); -} + // register various events to make sure that previous view is remembered + this.#map.on("rendercomplete", KitodoDetailMap.makeDebounced(this.onRenderComplete.bind(this))); + this.#map.on("change", KitodoDetailMap.makeDebounced(this.saveCurrentView.bind(this))); + this.#map.on("postrender", KitodoDetailMap.makeDebounced(this.saveCurrentView.bind(this))); + } -function initializeImage() { - resetNorth(); - hideCanvas(); - let image = $("#imagePreviewForm\\:mediaPreviewGraphicImage"); - if (image.length > 0) { - addListener(image); - image[0].src = image[0].src.replace(/&uuid=[a-z0-9]+/i, "") + "&uuid=" + random(8); + /** + * Return unnormalized center coordinates in case previous center is known (not null). Otherwise + * center is calculated from the image extent containing image dimensions. + * + * @param {Array} center the normalized center coordinates [0..1, 0..1] + * @returns {Array} unnormalized center + */ + unnormalizeCenter(center) { + if (center !== null) { + return [ + center[0] * this.#image.dimensions[0], + center[1] * this.#image.dimensions[1], + ] + } + return ol.extent.getCenter(this.createImageExtent(this.#image.dimensions)); } -} -function changeToMapView() { - initializeImage(); - showCanvas(); - if (kitodo.map) { - kitodo.map.handleTargetChanged_(); + /** + * Normalizes the center coordinates from [0..width, 0..height] to [0..1, 0..1] such + * that images with different dimensions are visualized at the same relative position + * in the viewport. + * + * @param {Array} center the current center coordinates as reported by OpenLayers + * @returns {Array} the normalized center coordinates + */ + normalizeCenter(center) { + return [ + center[0] / this.#image.dimensions[0], + center[1] / this.#image.dimensions[1], + ]; + } + + /** + * Remembers current view properties (center, zoom rotation) such that the OpenLayers + * map can be initialized with the same parameters when selecting another image. + */ + saveCurrentView() { + this.#last_view = { + center: this.normalizeCenter(this.#map.getView().getCenter()), + zoom: this.#map.getView().getZoom(), + rotation: this.#map.getView().getRotation(), + }; + } + + /** + * Is called by OpenLayers whenever a canvas rendering has finished. Unless debounced, this + * event is triggered potentially at 60fps. + */ + onRenderComplete() { + this.showCanvas(); + this.saveCurrentView(); + } + + /** + * Registers the resize event for the meta data editor column, such that the image can be + * repositioned appropriately. + */ + registerResizeEvent() { + // reload map if container was resized + $('#thirdColumnWrapper').on('resize', KitodoDetailMap.makeDebounced(this.onResize.bind(this))); } -} -// reload map if container was resized -$('#thirdColumnWrapper').on('resize', function () { - if (kitodo.map) { - // FIXME: This causes lags. It should only be executed *once* after resize. - kitodo.map.updateSize(); + /** + * Is called when a resize event has happened. Unless debounced, this event is triggered potentially + * at 60fps. + */ + onResize() { + if (this.#map) { + this.#map.updateSize(); + } + } + + /** + * Reloads the image. Is called when the detail view is activated, or a new image was selected. + */ + update() { + this.registerImageLoadEvent(); } -}); +} + +// register detail map class with the metadataEditor namespace +var metadataEditor = metadataEditor || {}; +metadataEditor.detailMap = new KitodoDetailMap(); -$(document).ready(function () { - initializeImage(); -}); diff --git a/Kitodo/src/main/webapp/WEB-INF/resources/js/resize.js b/Kitodo/src/main/webapp/WEB-INF/resources/js/resize.js index 208bb40dcc1..747d6129d20 100644 --- a/Kitodo/src/main/webapp/WEB-INF/resources/js/resize.js +++ b/Kitodo/src/main/webapp/WEB-INF/resources/js/resize.js @@ -397,6 +397,7 @@ function toggleThirdColumn() { secondColumn.animate({width: wrapper.width() - firstColumn.width() - COLLAPSED_COL_WIDTH - 2 * SEPARATOR_WIDTH}); } } else { + metadataEditor.detailMap.update(); var neededWidth = thirdColumnWidth - COLLAPSED_COL_WIDTH - (secondColumn.width() - secondColumn.data('min-width')); if (secondColumn.hasClass(COLLAPSED)) { firstColumn.animate({width: wrapper.width() - COLLAPSED_COL_WIDTH - thirdColumnWidth - 2 * SEPARATOR_WIDTH}); @@ -522,16 +523,14 @@ function updateMetadataEditorView(showMetadataColumn) { } expandThirdColumn(); scrollToSelectedThumbnail(); - initializeImage(); + metadataEditor.detailMap.update(); metadataEditor.gallery.mediaView.update(); scrollToSelectedTreeNode(); scrollToSelectedPaginationRow(); } function resizeMap() { - if (kitodo.map) { - kitodo.map.updateSize(); - } + metadataEditor.detailMap.onResize(); } function saveLayout() { diff --git a/Kitodo/src/main/webapp/WEB-INF/templates/includes/metadataEditor/dialogs/pagination.xhtml b/Kitodo/src/main/webapp/WEB-INF/templates/includes/metadataEditor/dialogs/pagination.xhtml index 3b45179b4ac..aca83ac8064 100644 --- a/Kitodo/src/main/webapp/WEB-INF/templates/includes/metadataEditor/dialogs/pagination.xhtml +++ b/Kitodo/src/main/webapp/WEB-INF/templates/includes/metadataEditor/dialogs/pagination.xhtml @@ -47,7 +47,7 @@ showCheckbox="true"> diff --git a/Kitodo/src/main/webapp/WEB-INF/templates/includes/metadataEditor/gallery.xhtml b/Kitodo/src/main/webapp/WEB-INF/templates/includes/metadataEditor/gallery.xhtml index 963816c6116..51ae120ad9c 100644 --- a/Kitodo/src/main/webapp/WEB-INF/templates/includes/metadataEditor/gallery.xhtml +++ b/Kitodo/src/main/webapp/WEB-INF/templates/includes/metadataEditor/gallery.xhtml @@ -65,7 +65,7 @@ @@ -290,8 +290,8 @@ galleryWrapperPanel"/> - - + + diff --git a/Kitodo/src/main/webapp/WEB-INF/templates/includes/metadataEditor/logicalStructure.xhtml b/Kitodo/src/main/webapp/WEB-INF/templates/includes/metadataEditor/logicalStructure.xhtml index 4406dbc9572..4b2e5408122 100644 --- a/Kitodo/src/main/webapp/WEB-INF/templates/includes/metadataEditor/logicalStructure.xhtml +++ b/Kitodo/src/main/webapp/WEB-INF/templates/includes/metadataEditor/logicalStructure.xhtml @@ -72,7 +72,7 @@ listener="#{DataEditorForm.structurePanel.treeLogicalSelect}" oncomplete="scrollToSelectedThumbnail(); scrollToSelectedPaginationRow(); - changeToMapView(); + metadataEditor.detailMap.update(); metadataEditor.gallery.mediaView.update(); expandMetadata('logical-metadata-tab');" update="galleryHeadingWrapper @@ -87,7 +87,7 @@ onstart="$('#contextMenuLogicalTree .ui-menuitem').addClass('ui-state-disabled')" oncomplete="scrollToSelectedThumbnail(); scrollToSelectedPaginationRow(); - changeToMapView(); + metadataEditor.detailMap.update(); metadataEditor.gallery.mediaView.update(); PF('contextMenuLogicalTree').show(currentEvent)" update="@(.stripe) diff --git a/Kitodo/src/main/webapp/WEB-INF/templates/includes/metadataEditor/physicalStructure.xhtml b/Kitodo/src/main/webapp/WEB-INF/templates/includes/metadataEditor/physicalStructure.xhtml index fa03940d930..6998518509d 100644 --- a/Kitodo/src/main/webapp/WEB-INF/templates/includes/metadataEditor/physicalStructure.xhtml +++ b/Kitodo/src/main/webapp/WEB-INF/templates/includes/metadataEditor/physicalStructure.xhtml @@ -34,7 +34,7 @@ listener="#{DataEditorForm.structurePanel.treePhysicalSelect}" oncomplete="scrollToSelectedThumbnail(); scrollToSelectedPaginationRow(); - initializeImage(); + metadataEditor.detailMap.update(); metadataEditor.gallery.mediaView.update(); expandMetadata('physical-metadata-tab');" update="galleryHeadingWrapper @@ -44,7 +44,7 @@ div:nth-child(2) .thumbnail-container"; + private static final Double EPSILON = 0.001; + + private static int processId = -1; + + /** + * Prepare tests by inserting dummy processes into database and index for sub-folders of test metadata resources. + * @throws DAOException when saving of dummy or test processes fails. + * @throws DataException when retrieving test project for test processes fails. + * @throws IOException when copying test metadata or image files fails. + */ + @BeforeAll + public static void prepare() throws DAOException, DataException, IOException { + MockDatabase.insertFoldersForSecondProject(); + processId = MockDatabase.insertTestProcessIntoSecondProject(PROCESS_TITLE); + ProcessTestUtils.copyTestFiles(processId, TEST_RENAME_MEDIA_FILE); + } + + /** + * Tests whether the image preview is shown when a user clicks on the image preview button. + * @throws Exception when something fails + */ + @Test + public void imageVisibleTest() throws Exception { + login("kowal"); + Pages.getProcessesPage().goTo().editMetadata(PROCESS_TITLE); + + // check detail view is not yet visible + assertEquals(0, findElementsByCSS(OPEN_LAYERS_CANVAS_SELECTOR).size()); + + // open detail view + Pages.getMetadataEditorPage().openDetailView(); + + // check it is visible now + pollAssertTrue(() -> findElementsByCSS(OPEN_LAYERS_CANVAS_SELECTOR).get(0).isDisplayed()); + } + + /** + * Tests whether the zoom buttons of the image preview (zoom in, out, reset) work as intended. + * @throws Exception when something fails + */ + @Test + public void zoomLevelTest() throws Exception { + login("kowal"); + + // open detail view and wait for openlayers canvas + Pages.getProcessesPage().goTo().editMetadata(PROCESS_TITLE); + Pages.getMetadataEditorPage().openDetailView(); + pollAssertTrue(() -> findElementsByCSS(OPEN_LAYERS_CANVAS_SELECTOR).get(0).isDisplayed()); + + // remember initial zoom + Double initialZoom = getOpenLayersZoom(); + assertTrue(initialZoom > 0); + + // zoom in, and check zoom increases + findElementsByCSS(OPEN_LAYERS_ZOOM_IN_SELECTOR).get(0).click(); + pollAssertTrue(() -> !isOpenLayersAnimating()); + assertTrue(() -> getOpenLayersZoom() > initialZoom); + + // zoom out, and check zoom returns to initial zoom level + findElementsByCSS(OPEN_LAYERS_ZOOM_OUT_SELECTOR).get(0).click(); + pollAssertTrue(() -> !isOpenLayersAnimating()); + assertTrue(() -> Math.abs(getOpenLayersZoom() - initialZoom) < EPSILON); + + // zoom in, and reset zoom, check zoom returns to initial zoom level + findElementsByCSS(OPEN_LAYERS_ZOOM_IN_SELECTOR).get(0).click(); + pollAssertTrue(() -> !isOpenLayersAnimating()); + findElementsByCSS(OPEN_LAYERS_ZOOM_RESET_SELECTOR).get(0).click(); + pollAssertTrue(() -> !isOpenLayersAnimating()); + assertTrue(() -> Math.abs(getOpenLayersZoom() - initialZoom) < EPSILON); + } + + /** + * Tests whether the rotation buttons of the image preview (rotation left, right, north) work as intended. + * @throws Exception when something fails + */ + @Test + public void rotationTest() throws Exception { + login("kowal"); + + // open detail view and wait for openlayers canvas + Pages.getProcessesPage().goTo().editMetadata(PROCESS_TITLE); + Pages.getMetadataEditorPage().openDetailView(); + pollAssertTrue(() -> findElementsByCSS(OPEN_LAYERS_CANVAS_SELECTOR).get(0).isDisplayed()); + + // check initial rotation is zero + assertTrue(Math.abs(getOpenLayersRotation()) < EPSILON); + + // rotate left and check rotation is decreasing + findElementsByCSS(OPEN_LAYERS_ROTATE_LEFT_SELECTOR).get(0).click(); + pollAssertTrue(() -> !isOpenLayersAnimating()); + assertTrue(() -> getOpenLayersRotation() < 0.0); + + // rotate back, and check rotation returns to zero + findElementsByCSS(OPEN_LAYERS_ROTATE_RIGHT_SELECTOR).get(0).click(); + pollAssertTrue(() -> !isOpenLayersAnimating()); + assertTrue(() -> Math.abs(getOpenLayersRotation()) < EPSILON); + + // rotate left and reset to north, check rotation returns to zero + findElementsByCSS(OPEN_LAYERS_ROTATE_LEFT_SELECTOR).get(0).click(); + pollAssertTrue(() -> !isOpenLayersAnimating()); + findElementsByCSS(OPEN_LAYERS_ROTATE_NORTH_SELECTOR).get(0).click(); + pollAssertTrue(() -> !isOpenLayersAnimating()); + assertTrue(() -> Math.abs(getOpenLayersRotation()) < EPSILON); + } + + /** + * Tests that both zoom level and rotation persists when a user clicks on another image + * (which causes OpenLayers to be loaded again). + * @throws Exception when something fails + */ + @Test + public void viewPersistsImageChange() throws Exception { + login("kowal"); + + // open detail view and wait for openlayers canvas + Pages.getProcessesPage().goTo().editMetadata(PROCESS_TITLE); + Pages.getMetadataEditorPage().openDetailView(); + pollAssertTrue(() -> findElementsByCSS(OPEN_LAYERS_CANVAS_SELECTOR).get(0).isDisplayed()); + + // remember initial zoom, rotation + Double initialZoom = getOpenLayersZoom(); + Double initialRotation = getOpenLayersRotation(); + + // rotate left and zoom in + findElementsByCSS(OPEN_LAYERS_ROTATE_LEFT_SELECTOR).get(0).click(); + findElementsByCSS(OPEN_LAYERS_ZOOM_IN_SELECTOR).get(0).click(); + pollAssertTrue(() -> !isOpenLayersAnimating()); + + // remember changed zoom, rotation + Double changedZoom = getOpenLayersZoom(); + Double changedRotation = getOpenLayersRotation(); + + // verify zoom and rotation was applied + assertTrue(Math.abs(initialZoom - changedZoom) > 0); + assertTrue(Math.abs(initialRotation - changedRotation) > 0); + + // change to second image + findElementsByCSS(SECOND_THUMBNAIL_SELECTOR).get(0).click(); + + // wait until second image has been loaded + pollAssertTrue( + () -> "Bild 1, Seite -".equals( + findElementsByCSS(GALLERY_HEADING_WRAPPER_SELECTOR).get(0).getText().strip() + ) + ); + + // wait until OpenLayers canvas is available + pollAssertTrue(() -> findElementsByCSS(OPEN_LAYERS_CANVAS_SELECTOR).get(0).isDisplayed()); + + // check that rotation and zoom was correctly applied to next image (and is not reset) + assertTrue(Math.abs(getOpenLayersZoom() - changedZoom) < EPSILON); + assertTrue(Math.abs(getOpenLayersRotation() - changedRotation) < EPSILON); + } + + /** + * Close metadata editor and logout after every test. + * @throws Exception when page navigation fails + */ + @AfterEach + public void closeEditorAndLogout() throws Exception { + Pages.getMetadataEditorPage().closeEditor(); + Pages.getTopNavigation().logout(); + } + + /** + * Cleanup test environment by removing temporal dummy processes from database and index. + * @throws DAOException when dummy process cannot be removed from database + * @throws CustomResponseException when dummy process cannot be removed from index + * @throws DataException when dummy process cannot be removed from index + * @throws IOException when deleting test files fails. + */ + @AfterAll + public static void cleanup() throws DAOException, CustomResponseException, DataException, IOException { + ProcessService.deleteProcess(processId); + } + + private void login(String username) throws InstantiationException, IllegalAccessException, InterruptedException { + User metadataUser = ServiceManager.getUserService().getByLogin(username); + Pages.getLoginPage().goTo().performLogin(metadataUser); + } + + private List findElementsByCSS(String css) { + return Browser.getDriver().findElements(By.cssSelector(css)); + } + + private void pollAssertTrue(Callable conditionEvaluator) throws Exception { + await().ignoreExceptions().pollInterval(100, TimeUnit.MILLISECONDS).atMost(3, TimeUnit.SECONDS) + .until(conditionEvaluator); + } + + private Boolean isOpenLayersAnimating() { + return (Boolean)Browser.getDriver().executeScript("return metadataEditor.detailMap.getAnimating()"); + } + + private Double getOpenLayersZoom() { + Object result = Browser.getDriver().executeScript("return metadataEditor.detailMap.getZoom()"); + return ((Number)result).doubleValue(); + } + + private Double getOpenLayersRotation() { + Object result = Browser.getDriver().executeScript("return metadataEditor.detailMap.getRotation()"); + return ((Number)result).doubleValue(); + } + +} diff --git a/Kitodo/src/test/java/org/kitodo/selenium/testframework/pages/MetadataEditorPage.java b/Kitodo/src/test/java/org/kitodo/selenium/testframework/pages/MetadataEditorPage.java index e6284c17a9d..131830957e6 100644 --- a/Kitodo/src/test/java/org/kitodo/selenium/testframework/pages/MetadataEditorPage.java +++ b/Kitodo/src/test/java/org/kitodo/selenium/testframework/pages/MetadataEditorPage.java @@ -78,6 +78,9 @@ public class MetadataEditorPage extends Page { @FindBy(id = "renamingMediaResultForm:okSuccess") private WebElement okButtonRenameMediaFiles; + @FindBy(id = "imagePreviewForm:previewButton") + private WebElement imagePreviewButton; + public MetadataEditorPage() { super("metadataEditor.jsf"); } @@ -222,4 +225,12 @@ public long getNumberOfDisplayedStructureElements() { return Browser.getDriver().findElements(By.cssSelector(".ui-treenode")).stream().filter(WebElement::isDisplayed) .count(); } + + /** + * Open detail view by clicking on image preview button. + */ + public void openDetailView() { + imagePreviewButton.click(); + } + } From 54362a14a024ce4945e82fa2922ab0bd7833dad5 Mon Sep 17 00:00:00 2001 From: Thomas Low Date: Tue, 1 Oct 2024 12:37:55 +0200 Subject: [PATCH 05/43] Add missing semicolons. --- Kitodo/src/main/webapp/WEB-INF/resources/js/ol_custom.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Kitodo/src/main/webapp/WEB-INF/resources/js/ol_custom.js b/Kitodo/src/main/webapp/WEB-INF/resources/js/ol_custom.js index 369dca897c1..69e9a63eb73 100644 --- a/Kitodo/src/main/webapp/WEB-INF/resources/js/ol_custom.js +++ b/Kitodo/src/main/webapp/WEB-INF/resources/js/ol_custom.js @@ -434,7 +434,7 @@ class KitodoDetailMap { */ getZoom() { if (this.#map) { - return this.#map.getView().getZoom() + return this.#map.getView().getZoom(); } return -1; } @@ -456,7 +456,7 @@ class KitodoDetailMap { */ getRotation() { if (this.#map) { - return this.#map.getView().getRotation() + return this.#map.getView().getRotation(); } return 0; } From c7931181b3b06a842801e3f282fe112844543c0c Mon Sep 17 00:00:00 2001 From: Thomas Low Date: Tue, 8 Oct 2024 11:56:35 +0000 Subject: [PATCH 06/43] Allow to link page to next logical structure independent of hierarchy level. --- .../forms/dataeditor/StructurePanel.java | 125 +++++++++++++++--- 1 file changed, 103 insertions(+), 22 deletions(-) diff --git a/Kitodo/src/main/java/org/kitodo/production/forms/dataeditor/StructurePanel.java b/Kitodo/src/main/java/org/kitodo/production/forms/dataeditor/StructurePanel.java index 74887942d25..fa44e75eb55 100644 --- a/Kitodo/src/main/java/org/kitodo/production/forms/dataeditor/StructurePanel.java +++ b/Kitodo/src/main/java/org/kitodo/production/forms/dataeditor/StructurePanel.java @@ -1659,7 +1659,7 @@ private boolean physicalNodeStateUnknown(HashMap expa } private LogicalDivision getTreeNodeStructuralElement(TreeNode treeNode) { - if (treeNode.getData() instanceof StructureTreeNode) { + if (Objects.nonNull(treeNode) && treeNode.getData() instanceof StructureTreeNode) { StructureTreeNode structureTreeNode = (StructureTreeNode) treeNode.getData(); if (structureTreeNode.getDataObject() instanceof LogicalDivision) { return (LogicalDivision) structureTreeNode.getDataObject(); @@ -1669,7 +1669,7 @@ private LogicalDivision getTreeNodeStructuralElement(TreeNode treeNode) { } private PhysicalDivision getTreeNodePhysicalDivision(TreeNode treeNode) { - if (treeNode.getData() instanceof StructureTreeNode) { + if (Objects.nonNull(treeNode) && treeNode.getData() instanceof StructureTreeNode) { StructureTreeNode structureTreeNode = (StructureTreeNode) treeNode.getData(); if (structureTreeNode.getDataObject() instanceof PhysicalDivision) { return (PhysicalDivision) structureTreeNode.getDataObject(); @@ -1678,6 +1678,16 @@ private PhysicalDivision getTreeNodePhysicalDivision(TreeNode treeNode) { return null; } + private View getTreeNodeView(TreeNode treeNode) { + if (Objects.nonNull(treeNode) && treeNode.getData() instanceof StructureTreeNode) { + StructureTreeNode structureTreeNode = (StructureTreeNode) treeNode.getData(); + if (structureTreeNode.getDataObject() instanceof View) { + return (View) structureTreeNode.getDataObject(); + } + } + return null; + } + /** * Get List of PhysicalDivisions assigned to multiple LogicalDivisions. * @@ -1740,28 +1750,101 @@ public boolean isAssignedSeveralTimes() { } /** - * Check if the selected Node's PhysicalDivision can be assigned to the next logical element in addition to the current assignment. + * Find the next logical structure node that can be used to create a new link to the currently selected node. + * The node needs to be the last node amongst its siblings. + * + * @param node the tree node of the currently selected physical devision node + * @return the next logical tree node + */ + private TreeNode findNextLogicalNodeForViewAssignment(TreeNode node) { + if (Objects.isNull(getTreeNodeView(node))) { + // node is not a view + return null; + } + + List viewSiblings = node.getParent().getChildren(); + if (viewSiblings.indexOf(node) != viewSiblings.size() - 1) { + // view is not last view amongst siblings + return null; + } + + // pseudo-recursively find next logical node + return findNextLogicalNodeForViewAssignmentRecursive(node.getParent()); + } + + /** + * Find the next logical structure node that can be used to create a link by pseudo-recursively iterating over + * logical parent and logical children nodes. + * + * @param node the tree node of the logical division + * @return the tree node of the next logical division + */ + private TreeNode findNextLogicalNodeForViewAssignmentRecursive(TreeNode node) { + TreeNode current = node; + + while (Objects.nonNull(current)) { + if (Objects.isNull(getTreeNodeStructuralElement(current))) { + // node is not a logical node + return null; + } + + // check whether next sibling is a logical node as well + List currentSiblings = current.getParent().getChildren(); + int currentIndex = currentSiblings.indexOf(current); + + if (currentSiblings.size() > currentIndex + 1) { + TreeNode nextSibling = currentSiblings.get(currentIndex + 1); + if(Objects.isNull(getTreeNodeStructuralElement(nextSibling))) { + // next sibling is not a logical node + return null; + } + + // next sibling is a logical node and potential valid result, unless there are children + TreeNode nextLogical = nextSibling; + + // check sibling has children (with first child being another logical node) + while (!nextLogical.getChildren().isEmpty()) { + TreeNode firstChild = nextLogical.getChildren().get(0); + if(Objects.isNull(getTreeNodeStructuralElement(firstChild))) { + // first child is not a logical node + return nextLogical; + } + // iterate to child node + nextLogical = firstChild; + } + return nextLogical; + } + + // node is last amongst siblings + // iterate to parent node + current = current.getParent(); + } + return null; + } + + /** + * Check if the selected Node's PhysicalDivision can be assigned to the next logical element in addition to the + * current assignment. + * * @return {@code true} if the PhysicalDivision can be assigned to the next LogicalDivision */ public boolean isAssignableSeveralTimes() { - if (Objects.nonNull(selectedLogicalNode) && selectedLogicalNode.getData() instanceof StructureTreeNode) { - StructureTreeNode structureTreeNode = (StructureTreeNode) selectedLogicalNode.getData(); - if (structureTreeNode.getDataObject() instanceof View) { - List logicalNodeSiblings = selectedLogicalNode.getParent().getParent().getChildren(); - int logicalNodeIndex = logicalNodeSiblings.indexOf(selectedLogicalNode.getParent()); - List viewSiblings = selectedLogicalNode.getParent().getChildren(); - // check for selected node's positions and siblings after selected node's parent - if (viewSiblings.indexOf(selectedLogicalNode) == viewSiblings.size() - 1 - && logicalNodeSiblings.size() > logicalNodeIndex + 1) { - TreeNode nextSibling = logicalNodeSiblings.get(logicalNodeIndex + 1); - if (nextSibling.getData() instanceof StructureTreeNode) { - StructureTreeNode structureTreeNodeSibling = (StructureTreeNode) nextSibling.getData(); - return structureTreeNodeSibling.getDataObject() instanceof LogicalDivision; + TreeNode nextLogical = findNextLogicalNodeForViewAssignment(selectedLogicalNode); + if (Objects.nonNull(nextLogical)) { + // check whether first child is already view of current node (too avoid adding views multiple times) + if (!nextLogical.getChildren().isEmpty()) { + TreeNode childNode = nextLogical.getChildren().get(0); + View childNodeView = getTreeNodeView(childNode); + View selectedView = getTreeNodeView(selectedLogicalNode); + if (Objects.nonNull(childNodeView) && Objects.nonNull(selectedView)) { + if (childNodeView.equals(selectedView)) { + // first child is already a view for the currently selected node + return false; } } } + return true; } - return false; } @@ -1769,14 +1852,12 @@ public boolean isAssignableSeveralTimes() { * Assign selected Node's PhysicalDivision to the next LogicalDivision. */ public void assign() { - if (isAssignableSeveralTimes()) { + TreeNode nextLogical = findNextLogicalNodeForViewAssignment(selectedLogicalNode); + if (Objects.nonNull(nextLogical)) { View view = (View) ((StructureTreeNode) selectedLogicalNode.getData()).getDataObject(); View viewToAssign = new View(); viewToAssign.setPhysicalDivision(view.getPhysicalDivision()); - List logicalNodeSiblings = selectedLogicalNode.getParent().getParent().getChildren(); - int logicalNodeIndex = logicalNodeSiblings.indexOf(selectedLogicalNode.getParent()); - TreeNode nextSibling = logicalNodeSiblings.get(logicalNodeIndex + 1); - StructureTreeNode structureTreeNodeSibling = (StructureTreeNode) nextSibling.getData(); + StructureTreeNode structureTreeNodeSibling = (StructureTreeNode) nextLogical.getData(); LogicalDivision logicalDivision = (LogicalDivision) structureTreeNodeSibling.getDataObject(); dataEditor.assignView(logicalDivision, viewToAssign, 0); severalAssignments.add(viewToAssign.getPhysicalDivision()); From dcc8d3bd4888cef10ff2b4642406a8cacfbc84cc Mon Sep 17 00:00:00 2001 From: Thomas Low Date: Tue, 8 Oct 2024 12:16:21 +0000 Subject: [PATCH 07/43] Fix checkstyle issues in StructurePanel. --- .../kitodo/production/forms/dataeditor/StructurePanel.java | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Kitodo/src/main/java/org/kitodo/production/forms/dataeditor/StructurePanel.java b/Kitodo/src/main/java/org/kitodo/production/forms/dataeditor/StructurePanel.java index fa44e75eb55..00a66c5c9f1 100644 --- a/Kitodo/src/main/java/org/kitodo/production/forms/dataeditor/StructurePanel.java +++ b/Kitodo/src/main/java/org/kitodo/production/forms/dataeditor/StructurePanel.java @@ -1794,7 +1794,7 @@ private TreeNode findNextLogicalNodeForViewAssignmentRecursive(TreeNode node) { if (currentSiblings.size() > currentIndex + 1) { TreeNode nextSibling = currentSiblings.get(currentIndex + 1); - if(Objects.isNull(getTreeNodeStructuralElement(nextSibling))) { + if (Objects.isNull(getTreeNodeStructuralElement(nextSibling))) { // next sibling is not a logical node return null; } @@ -1805,7 +1805,7 @@ private TreeNode findNextLogicalNodeForViewAssignmentRecursive(TreeNode node) { // check sibling has children (with first child being another logical node) while (!nextLogical.getChildren().isEmpty()) { TreeNode firstChild = nextLogical.getChildren().get(0); - if(Objects.isNull(getTreeNodeStructuralElement(firstChild))) { + if (Objects.isNull(getTreeNodeStructuralElement(firstChild))) { // first child is not a logical node return nextLogical; } From e849fa34d73251078dc074e4deb7cd085d69630b Mon Sep 17 00:00:00 2001 From: Thomas Low Date: Mon, 14 Oct 2024 11:27:08 +0000 Subject: [PATCH 08/43] Add selenium test for linking a page to the following division. --- .../java/org/kitodo/selenium/MetadataST.java | 55 +++++++++++ .../pages/MetadataEditorPage.java | 49 ++++++++++ .../testLinkPageToNextDivisionMeta.xml | 95 +++++++++++++++++++ 3 files changed, 199 insertions(+) create mode 100644 Kitodo/src/test/resources/metadata/metadataFiles/testLinkPageToNextDivisionMeta.xml diff --git a/Kitodo/src/test/java/org/kitodo/selenium/MetadataST.java b/Kitodo/src/test/java/org/kitodo/selenium/MetadataST.java index 031fc461cb4..e20f3e11a28 100644 --- a/Kitodo/src/test/java/org/kitodo/selenium/MetadataST.java +++ b/Kitodo/src/test/java/org/kitodo/selenium/MetadataST.java @@ -40,6 +40,7 @@ import org.kitodo.selenium.testframework.BaseTestSelenium; import org.kitodo.selenium.testframework.Browser; import org.kitodo.selenium.testframework.Pages; +import org.kitodo.selenium.testframework.pages.MetadataEditorPage; import org.kitodo.test.utils.ProcessTestUtils; import org.openqa.selenium.By; import org.openqa.selenium.WebElement; @@ -55,15 +56,18 @@ public class MetadataST extends BaseTestSelenium { private static final String TEST_MEDIA_REFERENCES_FILE = "testUpdatedMediaReferencesMeta.xml"; private static final String TEST_METADATA_LOCK_FILE = "testMetadataLockMeta.xml"; private static final String TEST_RENAME_MEDIA_FILE = "testRenameMediaMeta.xml"; + private static final String TEST_LINK_PAGE_TO_NEXT_DIVISION_MEDIA_FILE = "testLinkPageToNextDivisionMeta.xml"; private static int mediaReferencesProcessId = -1; private static int metadataLockProcessId = -1; private static int parentProcessId = -1; private static int renamingMediaProcessId = -1; private static int dragndropProcessId = -1; private static int createStructureProcessId = -1; + private static int linkPageToNextDivisionProcessId = -1; private static final String PARENT_PROCESS_TITLE = "Parent process"; private static final String FIRST_CHILD_PROCESS_TITLE = "First child process"; private static final String SECOND_CHILD_PROCESS_TITLE = "Second child process"; + private static final String LINK_PAGE_TO_NEXT_DIVISION_PROCESS_TITLE = "Link page to next division"; private static final String TEST_PARENT_PROCESS_METADATA_FILE = "testParentProcessMeta.xml"; private static final String FIRST_CHILD_ID = "FIRST_CHILD_ID"; private static final String SECOND_CHILD_ID = "SECOND_CHILD_ID"; @@ -102,6 +106,11 @@ private static void prepareCreateStructureProcess() throws DAOException, DataExc copyTestFilesForCreateStructure(); } + private static void prepareLinkPageToNextDivision() throws DAOException, DataException, IOException { + linkPageToNextDivisionProcessId = MockDatabase.insertTestProcessIntoSecondProject(LINK_PAGE_TO_NEXT_DIVISION_PROCESS_TITLE); + ProcessTestUtils.copyTestFiles(linkPageToNextDivisionProcessId, TEST_LINK_PAGE_TO_NEXT_DIVISION_MEDIA_FILE); + } + /** * Prepare tests by inserting dummy processes into database and index for sub-folders of test metadata resources. * @throws DAOException when saving of dummy or test processes fails. @@ -117,6 +126,7 @@ public static void prepare() throws DAOException, DataException, IOException { prepareMediaRenamingProcess(); prepareDragNDropProcess(); prepareCreateStructureProcess(); + prepareLinkPageToNextDivision(); } /** @@ -353,6 +363,50 @@ public void showPhysicalPageNumberBelowThumbnailTest() throws Exception { assertFalse(Browser.getDriver().findElements(By.cssSelector(".thumbnail-banner")).isEmpty()); } + @Test + public void linkPageToNextDivision() throws Exception { + login("kowal"); + + // open metadata editor + Pages.getProcessesPage().goTo().editMetadata(LINK_PAGE_TO_NEXT_DIVISION_PROCESS_TITLE); + + MetadataEditorPage metaDataEditor = Pages.getMetadataEditorPage(); + + // wait until structure tree is shown + await().ignoreExceptions().pollDelay(100, TimeUnit.MILLISECONDS).atMost(5, TimeUnit.SECONDS) + .until(metaDataEditor::isLogicalTreeVisible); + + // check page "2" is not marked as "linked" + assertFalse(metaDataEditor.isStructureTreeNodeAssignedSeveralTimes("0_0_0_0")); + + // open context menu for page "2" + metaDataEditor.openContextMenuForStructureTreeNode("0_0_0_0"); + + // click on 2nd menu entry "assign to next element" + metaDataEditor.clickStructureTreeContextMenuEntry(2); + + // verify page "2" is now marked as "linked" + assertTrue(metaDataEditor.isStructureTreeNodeAssignedSeveralTimes("0_0_0_0")); + + // verify linked page "2" was created at correct tree position + assertTrue(metaDataEditor.isStructureTreeNodeAssignedSeveralTimes("0_1_0_0")); + + // check page "3" was moved to be 2nd sibling + assertFalse(metaDataEditor.isStructureTreeNodeAssignedSeveralTimes("0_1_0_1")); + + // open context menu for linked page "2" + metaDataEditor.openContextMenuForStructureTreeNode("0_1_0_0"); + + // click on 2nd menu entry "remove assignment" + metaDataEditor.clickStructureTreeContextMenuEntry(2); + + // check page "2" is not marked as "linked" any more + assertFalse(metaDataEditor.isStructureTreeNodeAssignedSeveralTimes("0_0_0_0")); + + // check page "3" is now only child of folder again + assertTrue(Browser.getDriver().findElements(By.cssSelector("#logicalTree\\:0_1_0_1")).isEmpty()); + } + /** * Close metadata editor and logout after every test. * @throws Exception when page navigation fails @@ -380,6 +434,7 @@ public static void cleanup() throws DAOException, CustomResponseException, DataE ProcessService.deleteProcess(renamingMediaProcessId); ProcessService.deleteProcess(dragndropProcessId); ProcessService.deleteProcess(createStructureProcessId); + ProcessService.deleteProcess(linkPageToNextDivisionProcessId); } private void login(String username) throws InstantiationException, IllegalAccessException, InterruptedException { diff --git a/Kitodo/src/test/java/org/kitodo/selenium/testframework/pages/MetadataEditorPage.java b/Kitodo/src/test/java/org/kitodo/selenium/testframework/pages/MetadataEditorPage.java index e6284c17a9d..e19834fc122 100644 --- a/Kitodo/src/test/java/org/kitodo/selenium/testframework/pages/MetadataEditorPage.java +++ b/Kitodo/src/test/java/org/kitodo/selenium/testframework/pages/MetadataEditorPage.java @@ -78,6 +78,9 @@ public class MetadataEditorPage extends Page { @FindBy(id = "renamingMediaResultForm:okSuccess") private WebElement okButtonRenameMediaFiles; + @FindBy(id = "contextMenuLogicalTree") + private WebElement contextMenuLogicalTree; + public MetadataEditorPage() { super("metadataEditor.jsf"); } @@ -91,6 +94,10 @@ public boolean isStructureTreeFormVisible() { return structureTreeForm.isDisplayed(); } + public boolean isLogicalTreeVisible() { + return logicalTree.isDisplayed(); + } + /** * Gets numberOfScans. * @@ -222,4 +229,46 @@ public long getNumberOfDisplayedStructureElements() { return Browser.getDriver().findElements(By.cssSelector(".ui-treenode")).stream().filter(WebElement::isDisplayed) .count(); } + + /** + * Open context menu (right click) for specific structure tree node. + * + * @param nodeId the tree node id describing the node in the tree (e.g., "0_1_0_1") + */ + public void openContextMenuForStructureTreeNode(String nodeId) { + WebElement treeNode = Browser.getDriver().findElement(By.cssSelector( + "#logicalTree\\:" + nodeId + " .ui-treenode-content" + )); + new Actions(Browser.getDriver()).contextClick(treeNode).build().perform(); + await().ignoreExceptions().pollDelay(100, TimeUnit.MILLISECONDS).atMost(5, TimeUnit.SECONDS).until( + () -> contextMenuLogicalTree.isDisplayed() + ); + } + + /** + * Click on a menu entry in the structure tree context menu. + * + * @param menuEntry the menu entry index (starting with 1) + */ + public void clickStructureTreeContextMenuEntry(int menuEntry) { + // click on menu entry + contextMenuLogicalTree.findElement(By.cssSelector( + ".ui-menuitem:nth-child(" + menuEntry + ") .ui-menuitem-link" + )).click(); + // wait for context menu to disappear + await().ignoreExceptions().pollDelay(100, TimeUnit.MILLISECONDS).atMost(5, TimeUnit.SECONDS) + .until(() -> !contextMenuLogicalTree.isDisplayed()); + } + + /** + * Check if a structure tree node is marked as "assigned several times". + * + * @param nodeId the tree node id describing the node in the tree (e.g., "0_1_0_1") + * @return true if "assigned several times" + */ + public Boolean isStructureTreeNodeAssignedSeveralTimes(String nodeId) { + return !Browser.getDriver().findElements(By.cssSelector( + "#logicalTree\\:" + nodeId + " .assigned-several-times" + )).isEmpty(); + } } diff --git a/Kitodo/src/test/resources/metadata/metadataFiles/testLinkPageToNextDivisionMeta.xml b/Kitodo/src/test/resources/metadata/metadataFiles/testLinkPageToNextDivisionMeta.xml new file mode 100644 index 00000000000..efd4575d043 --- /dev/null +++ b/Kitodo/src/test/resources/metadata/metadataFiles/testLinkPageToNextDivisionMeta.xml @@ -0,0 +1,95 @@ + + + + + 12 + + + + + + Test link page to next division + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From 709180bfba04e2dbedd068b3c49b1d740fb4e463 Mon Sep 17 00:00:00 2001 From: Thomas Low Date: Sun, 20 Oct 2024 11:17:07 +0000 Subject: [PATCH 09/43] Allow to open page in new window showing media detail preview. --- .../forms/dataeditor/ExternalView.java | 40 +++++++++ .../resources/messages/messages_de.properties | 1 + .../resources/messages/messages_en.properties | 1 + .../resources/messages/messages_es.properties | 2 + .../webapp/WEB-INF/resources/css/kitodo.css | 23 +++++ .../includes/metadataEditor/gallery.xhtml | 11 +++ .../metadataEditor/logicalStructure.xhtml | 11 +++ .../src/main/webapp/pages/externalView.xhtml | 90 +++++++++++++++++++ 8 files changed, 179 insertions(+) create mode 100644 Kitodo/src/main/java/org/kitodo/production/forms/dataeditor/ExternalView.java create mode 100644 Kitodo/src/main/webapp/pages/externalView.xhtml diff --git a/Kitodo/src/main/java/org/kitodo/production/forms/dataeditor/ExternalView.java b/Kitodo/src/main/java/org/kitodo/production/forms/dataeditor/ExternalView.java new file mode 100644 index 00000000000..559a3e82774 --- /dev/null +++ b/Kitodo/src/main/java/org/kitodo/production/forms/dataeditor/ExternalView.java @@ -0,0 +1,40 @@ +/* + * (c) Kitodo. Key to digital objects e. V. + * + * This file is part of the Kitodo project. + * + * It is licensed under GNU General Public License version 3 or later. + * + * For the full copyright and license information, please read the + * GPL3-License.txt file that was distributed with this source code. + */ + +package org.kitodo.production.forms.dataeditor; + +import java.util.Objects; + +import javax.enterprise.context.RequestScoped; +import javax.inject.Named; + +/** + * Bean that is used in externalView.xhtml. + */ +@Named("ExternalView") +@RequestScoped +public class ExternalView { + + /** + * Return the shortened ID of the media by removing leading zeros. + * + * @param id the long id of the media file as string + * @return the shortened id of the media file + */ + public static String convertToShortId(String id) { + if (Objects.nonNull(id)) { + return id.replaceFirst("^0+(?!$)", ""); + } else { + return "-"; + } + } + +} diff --git a/Kitodo/src/main/resources/messages/messages_de.properties b/Kitodo/src/main/resources/messages/messages_de.properties index 1dd2fbc31c8..5d933d7d451 100644 --- a/Kitodo/src/main/resources/messages/messages_de.properties +++ b/Kitodo/src/main/resources/messages/messages_de.properties @@ -1197,6 +1197,7 @@ validator={0}-Bilder validieren value=Wert video=Video view=Anzeigen +viewPageInNewWindow=Seite in neuem Browser-Fenster öffnen visible=Sichtbar volume=Band of=von diff --git a/Kitodo/src/main/resources/messages/messages_en.properties b/Kitodo/src/main/resources/messages/messages_en.properties index ffaabc80ab9..ee02599e3fa 100644 --- a/Kitodo/src/main/resources/messages/messages_en.properties +++ b/Kitodo/src/main/resources/messages/messages_en.properties @@ -1198,6 +1198,7 @@ validator=Validate {0} images value=Value video=Video view=View +viewPageInNewWindow=View page in new browser window visible=Visible volume=volume of=of diff --git a/Kitodo/src/main/resources/messages/messages_es.properties b/Kitodo/src/main/resources/messages/messages_es.properties index 32deac1a1b6..f222c67dd90 100644 --- a/Kitodo/src/main/resources/messages/messages_es.properties +++ b/Kitodo/src/main/resources/messages/messages_es.properties @@ -1198,6 +1198,8 @@ validator=Validar {0}-imágenes value=Valor video=Video view=Ver +# please check google translation below and remove comment if translation is acceptable +viewPageInNewWindow=Ver página en una nueva ventana del navegador visible=Visible volume=Banda of=Desde diff --git a/Kitodo/src/main/webapp/WEB-INF/resources/css/kitodo.css b/Kitodo/src/main/webapp/WEB-INF/resources/css/kitodo.css index 0af10140564..576bd3a347c 100644 --- a/Kitodo/src/main/webapp/WEB-INF/resources/css/kitodo.css +++ b/Kitodo/src/main/webapp/WEB-INF/resources/css/kitodo.css @@ -3697,6 +3697,29 @@ kbd { padding: 0 var(--default-half-size); } +#externalViewTitle { + color: var(--pure-white); + line-height: 1.5em; +} + +#externalViewPanel { + margin: auto 16px; +} + +#externalViewPanel, #externalViewPanel_content { + padding: 0; + height: 100%; + overflow: hidden; +} + +#externalViewPanel #imagePreviewForm\:mediaDetailMediaContainer { + height: 100%; +} + +#externalViewPanel video { + max-height: 90%; +} + /*---------------------------------------------------------------------- Workflow Editor ----------------------------------------------------------------------*/ diff --git a/Kitodo/src/main/webapp/WEB-INF/templates/includes/metadataEditor/gallery.xhtml b/Kitodo/src/main/webapp/WEB-INF/templates/includes/metadataEditor/gallery.xhtml index 963816c6116..b8576f5b9ea 100644 --- a/Kitodo/src/main/webapp/WEB-INF/templates/includes/metadataEditor/gallery.xhtml +++ b/Kitodo/src/main/webapp/WEB-INF/templates/includes/metadataEditor/gallery.xhtml @@ -249,6 +249,17 @@ paginationForm:paginationWrapperPanel metadataAccordion:logicalMetadataWrapperPanel galleryWrapperPanel"/> + + + + + + + + + + + +
diff --git a/Kitodo/src/main/webapp/pages/externalView.xhtml b/Kitodo/src/main/webapp/pages/externalView.xhtml new file mode 100644 index 00000000000..2edabc9bc45 --- /dev/null +++ b/Kitodo/src/main/webapp/pages/externalView.xhtml @@ -0,0 +1,90 @@ + + + + + + + + + + + + + + + + +

+ + + + + + +

+ + + + + + + + + + + + + + + + + + + + + + + + +
+