Multi registrations

exact/exact/annotations/static/annotations/js/exact-browser-sync.js

@@ -31,6 +31,14 @@ class EXACTBrowserSync {
             event.userData.requestAllOpenImages();
         }, this);
 
+        viewer.addHandler("sync_NoRegistrationsFound", function (event) {
+
+            // Clear any stale registration UI left over from a previous image
+            $('#registration_selector').find('option:not([value=""])').remove();
+            $('#registration_selector').hide();
+            document.getElementById('registrationField').textContent = '';
+        }, this);
+
 
         viewer.addHandler("sync_TabAnnotationCreated", function (event) {
 
@@ -124,9 +132,9 @@ class EXACTBrowserSync {
             } else{
                 $("#open_registration_image_visibility").hide();
                 this.registration = undefined;
-                return 
+                return
             }
-            
+
         }
 
         this.openTabImageInformations[registration_pair.source_image.id] = registration_pair.source_image;
@@ -139,24 +147,45 @@ class EXACTBrowserSync {
         }
 
         this.registration = new EXACTRegistrationHandler(this.viewer, registration_pair, this);
+
+        // Keep the status-bar selector in sync
+        $("#registration_selector").val($("select#sync_browser_image").val());
     }
 
     initUiEvents() {
 
-        $('#search_browserimages_btn').click(this.requestAllOpenImages.bind(this)); 
+        $('#search_browserimages_btn').click(this.requestAllOpenImages.bind(this));
+
+        // Status-bar registration selector: mirrors sync_browser_image
+        $("#registration_selector").on("change", function() {
+            $("#sync_browser_image").val($(this).val()).trigger("change");
+        });
     }
 
     requestAllOpenImages() {
 
         // set all registration pairs at UI
         $('#sync_browser_image').empty();
+        $('#registration_selector').find('option:not([value=""])').remove();
         let image_list =  $('#sync_browser_image');
+        let reg_selector = $('#registration_selector');
 
         for (let registration_pair of Object.values(this.exact_registration_sync.registeredImagePairs)) {
             image_list.append(`<option style="background-color: green"
                                         data-image_id=${registration_pair.source_image.id}>
                                     ${registration_pair.source_image.name}
                                 </option>`);
+            reg_selector.append(`<option value="${registration_pair.source_image.name}"
+                                          data-image_id="${registration_pair.source_image.id}">
+                                     ${registration_pair.source_image.name}
+                                 </option>`);
+        }
+
+        // show the selector only when there are multiple registrations to choose from
+        if (Object.keys(this.exact_registration_sync.registeredImagePairs).length > 1) {
+            $('#registration_selector').show();
+        } else {
+            $('#registration_selector').hide();
         }
 
         // set all segmentation pairs at UI
@@ -171,7 +200,7 @@ class EXACTBrowserSync {
 
             var name1 = this.source_image.name.split('.').slice(0, -1).join('.');
             var name2 = imageName.split('.').slice(0, -1).join('.');
-        
+
             if (name1 === name2 && this.source_image.name !== imageName) {
                 image_list.append(`<option style="background-color: blue"
                                         data-image_id=${imageId}>
@@ -208,10 +237,10 @@ class EXACTBrowserSync {
 
     setImageInformation(event) {
 
-        if (!(event.data.imageInformation.id in this.openTabImageInformations) 
+        if (!(event.data.imageInformation.id in this.openTabImageInformations)
                 && !(event.data.imageInformation.name in this.exact_registration_sync.registeredImagePairs)) {
             this.openTabImageInformations[event.data.imageInformation.id] = event.data.imageInformation;
-        
+
             let image_list =  $('#sync_browser_image');
             image_list.append(`<option data-image_id=${event.data.imageInformation.id}>${event.data.imageInformation.name}</option>`);
 

exact/exact/annotations/static/annotations/js/exact-quad-tree.js

@@ -6,7 +6,6 @@ class EXACTRegistrationHandler {
         this.browser_sync = browser_sync;
         this.viewer = viewer;
         this.background_viewer = undefined;
-        this.show_registration = ("image_set" in registration_pair.source_image) ? registration_pair.source_image.image_set.show_registration : false;
 
         // Check if the OpenCv js is loaded
         this.check_opencv = undefined;
@@ -54,7 +53,7 @@ class EXACTRegistrationHandler {
             this.updateHomographyUI();
 
             // Load current registration 
-            if  (this.show_registration && $("#OverlayRegImage-enabled").prop("checked") == false) {
+            if  ($("#OverlayRegImage-enabled").prop("checked") == false) {
                 $("#OverlayRegImage-enabled").prop("checked", true);
 
                 this.enableOverlayRegImageSlider();
@@ -100,7 +99,14 @@ class EXACTRegistrationHandler {
              method=' (qt)';   
             }
 
-            document.getElementById('registrationField').textContent = 'Registered to: ' + this.registration_pair.source_image.name+method;
+            if ($('#registration_selector').is(':hidden')) {
+                document.getElementById('registrationField').textContent = 'Registered to: ' + this.registration_pair.source_image.name + method;
+            }
+            $("#registration_selector").val(this.registration_pair.source_image.name);
+            var self = this;
+            this.viewer.addHandler('animation', function() {
+            self.syncViewBackgroundForeground();
+            });
 
             this.background_viewer.addHandler("open", function (event) {
 
@@ -120,26 +126,37 @@ class EXACTRegistrationHandler {
 
     }
 
+
+
     syncViewBackgroundForeground () {
 
         if (this.background_viewer !== undefined) {
 
             let bounds = this.viewer.viewport.getBounds(true);
             let imageRect = this.viewer.viewport.viewportToImageRectangle(bounds);
-
-            let [xmin_trans, ymin_trans] = this.transformAffineInv(imageRect.x, imageRect.y);
-
+
+            // Transform all 4 corners of the current viewport into the overlay image space,
+            // then take the axis-aligned bounding box.  This is correct for any rotation or
+            // scale and avoids relying on OpenSeadragon's Rect.degrees handling, which
+            // behaves asymmetrically for +90° vs -90° viewer rotations.
+            let corners = [
+                this.transformAffineInv(imageRect.x,                  imageRect.y),
+                this.transformAffineInv(imageRect.x + imageRect.width, imageRect.y),
+                this.transformAffineInv(imageRect.x,                  imageRect.y + imageRect.height),
+                this.transformAffineInv(imageRect.x + imageRect.width, imageRect.y + imageRect.height),
+            ];
+            let xs = corners.map(c => c[0]);
+            let ys = corners.map(c => c[1]);
+            let x_min = Math.min(...xs), x_max = Math.max(...xs);
+            let y_min = Math.min(...ys), y_max = Math.max(...ys);
+
             this.background_viewer.viewport.setRotation(this.rotation_angle);
 
-            const vpRect = this.background_viewer.viewport.imageToViewportRectangle(new OpenSeadragon.Rect(
-                xmin_trans,
-                ymin_trans, 
-                imageRect.width * this.inv_mpp_x_scale,  
-                imageRect.height * this.inv_mpp_y_scale,  
-                -this.rotation_angle
-            ));
+            const vpRect = this.background_viewer.viewport.imageToViewportRectangle(
+                new OpenSeadragon.Rect(x_min, y_min, x_max - x_min, y_max - y_min)
+            );
 
-            this.background_viewer.viewport.fitBoundsWithConstraints(vpRect);
+            this.background_viewer.viewport.fitBoundsWithConstraints(vpRect, true);
         }
     }
 

exact/exact/annotations/static/annotations/js/exact-sync.js

@@ -50,25 +50,71 @@ class EXACTRegistrationSync {
 
     }
 
-    loadRegistrationInformation(url,context) {
+    loadRegistrationInformation(url, context) {
 
-        $.ajax(this.API_1_REGISTRATION_BASE_URL + url 
-            +'&fields=id,transformation_matrix,file,rotation_angle,inv_matrix,get_scale,get_inv_scale,source_image.name,source_image.id,target_image.name,target_image.id,source_image.image_set.show_registration'
+        $.ajax(this.API_1_REGISTRATION_BASE_URL + url
+            +'&fields=id,transformation_matrix,file,rotation_angle,inv_matrix,get_scale,get_inv_scale,source_image.name,source_image.id,target_image.name,target_image.id'
             +'&expand=target_image,source_image,source_image.image_set', {
             type: 'GET',
-            headers: this.gHeaders,
+            headers: context.gHeaders,
             dataType: 'json',
-            success: function (registrations, textStatus, jqXHR) {
+            success: function (registrations) {
 
                 for (let registration of registrations.results) {
-
                     context.registeredImagePairs[registration.source_image.name] = registration;
                 }
 
-                if (registrations.results.length > 0) {
-                    let reg = registrations.results[0]
-                    context.viewer.raiseEvent('sync_RegistrationLoaded', { reg });
-                }
+                // Also load registrations where the current image is the source,
+                // and present them as flipped pairs so the overlay works in both directions.
+                $.ajax(context.API_1_REGISTRATION_BASE_URL
+                    + '?source_image=' + context.imageInformation.id
+                    + '&fields=id,transformation_matrix,file,inv_matrix,get_scale,get_inv_scale,source_image.name,source_image.id,target_image.name,target_image.id'
+                    + '&expand=target_image,source_image,target_image.image_set', {
+                    type: 'GET',
+                    headers: context.gHeaders,
+                    dataType: 'json',
+                    success: function (inverseRegistrations) {
+
+                        for (let reg of inverseRegistrations.results) {
+                            // Only add if not already covered by a forward registration
+                            if (reg.target_image.name in context.registeredImagePairs) continue;
+
+                            const inv = reg.inv_matrix;
+                            context.registeredImagePairs[reg.target_image.name] = {
+                                id: reg.id,
+                                source_image: reg.target_image,  
+                                target_image: reg.source_image,
+                                transformation_matrix: reg.inv_matrix,
+                                inv_matrix: reg.transformation_matrix,
+                                get_scale: reg.get_inv_scale,
+                                get_inv_scale: reg.get_scale,
+                                rotation_angle: -Math.atan2(inv.t_01, inv.t_00) * 180 / Math.PI,
+                                file: null,
+                            };
+                        }
+
+                        if (Object.keys(context.registeredImagePairs).length > 0) {
+                            let reg = Object.values(context.registeredImagePairs)[0];
+                            context.viewer.raiseEvent('sync_RegistrationLoaded', { reg });
+                        } else {
+                            context.viewer.raiseEvent('sync_NoRegistrationsFound', {});
+                        }
+                    },
+                    error: function (request, status, error) {
+                        // Still raise the event if forward registrations were found
+                        if (Object.keys(context.registeredImagePairs).length > 0) {
+                            let reg = Object.values(context.registeredImagePairs)[0];
+                            context.viewer.raiseEvent('sync_RegistrationLoaded', { reg });
+                        } else {
+                            context.viewer.raiseEvent('sync_NoRegistrationsFound', {});
+                        }
+                        if (request.responseText !== undefined) {
+                            $.notify(request.responseText, { position: "bottom center", className: "error" });
+                        } else {
+                            $.notify(`Server ERR_CONNECTION_TIMED_OUT`, { position: "bottom center", className: "error" });
+                        }
+                    }
+                });
             },
             error: function (request, status, error) {
                 if (request.responseText !== undefined) {