From 69297c01815723f8b4927c0cc808fcecccd85e92 Mon Sep 17 00:00:00 2001
From: Tom <tmpearce@gmail.com>
Date: Tue, 13 Dec 2022 16:49:23 -0500
Subject: [PATCH] Updated resize behavior

---
 src/viewer.js               |  40 +++++++++----
 test/demo/resizeviewer.html | 114 ++++++++++--------------------------
 2 files changed, 59 insertions(+), 95 deletions(-)

diff --git a/src/viewer.js b/src/viewer.js
index b7a1362f..4af8a714 100644
--- a/src/viewer.js
+++ b/src/viewer.js
@@ -204,6 +204,7 @@ $.Viewer = function( options ) {
         prevContainerSize: null,
         animating:         false,
         forceRedraw:       false,
+        needsResize:       false,
         mouseInside:       false,
         group:             null,
         // whether we should be continuously zooming
@@ -332,10 +333,9 @@ $.Viewer = function( options ) {
     this._origViewerResize = origViewerResize; //for testing logic changes
     if(window.ResizeObserver){
         this._autoResizePolling = false;
-
         this._resizeObserver = new ResizeObserver(function(){
             if(_this.autoResize){
-                _this._onViewerResize(_this, _getSafeElemSize(_this.container));
+                THIS[_this.hash].needsResize = true;
             }
         });
 
@@ -1702,8 +1702,8 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
     /**
      * Force the viewer to reset its size to match its container.
      */
-    forceImmediateResize: function() {
-        this._onViewerResize(this, _getSafeElemSize(this.container));
+    forceResize: function() {
+        THIS[this.hash].needsResize = true;
     },
 
     /**
@@ -3594,18 +3594,25 @@ function origViewerResize(viewer, containerSize){
 }
 function onViewerResize(viewer, containerSize){
     var viewport = viewer.viewport;
-    var resizeRatio = THIS[viewer.hash].prevContainerSize.x / containerSize.x;
     var zoom = viewport.getZoom();
     var center = viewport.getCenter();
     viewport.resize(containerSize, viewer.preserveImageSizeOnResize);
     viewport.panTo(center, true);
+    var resizeRatio;
     if (viewer.preserveImageSizeOnResize) {
-        viewport.zoomTo(zoom * resizeRatio, null, true);
+        resizeRatio = THIS[viewer.hash].prevContainerSize.x / containerSize.x;
+        // viewport.zoomTo(zoom * resizeRatio, null, true);
     } else {
-        viewport.zoomTo(zoom, null, true);
+        var o = new $.Point(0, 0);
+        var prevDiag = new $.Point(THIS[viewer.hash].prevContainerSize.x, THIS[viewer.hash].prevContainerSize.y).distanceTo(o);
+        var newDiag = new $.Point(containerSize.x, containerSize.y).distanceTo(o);
+        resizeRatio = newDiag / prevDiag * THIS[viewer.hash].prevContainerSize.x / containerSize.x;
+        // viewport.zoomTo(zoom, null, true);
     }
+    viewport.zoomTo(zoom * resizeRatio, null, true);
     THIS[viewer.hash].prevContainerSize = containerSize;
     THIS[viewer.hash].forceRedraw = true;
+    THIS[viewer.hash].needsResize = false;
 }
 function updateOnce( viewer ) {
 
@@ -3614,14 +3621,23 @@ function updateOnce( viewer ) {
     if (viewer._opening || !THIS[viewer.hash]) {
         return;
     }
-    if (viewer.autoResize && viewer._autoResizePolling){
-        var containerSize = _getSafeElemSize(viewer.container);
-        var prevContainerSize = THIS[viewer.hash].prevContainerSize;
-        if (!containerSize.equals(prevContainerSize)) {
-            viewer._onViewerResize(viewer, containerSize);
+    if (viewer.autoResize){
+        var containerSize;
+        if(viewer._autoResizePolling){
+            containerSize = _getSafeElemSize(viewer.container);
+            var prevContainerSize = THIS[viewer.hash].prevContainerSize;
+            if (!containerSize.equals(prevContainerSize)) {
+                THIS[viewer.hash].needsResize = true;
+            }
         }
+        if(THIS[viewer.hash].needsResize){
+            viewer._onViewerResize(viewer, containerSize || _getSafeElemSize(viewer.container));
+        }
+
     }
 
+
+
     var viewportChange = viewer.viewport.update();
     var animated = viewer.world.update() || viewportChange;
 
diff --git a/test/demo/resizeviewer.html b/test/demo/resizeviewer.html
index 9341feb7..74777552 100644
--- a/test/demo/resizeviewer.html
+++ b/test/demo/resizeviewer.html
@@ -4,6 +4,8 @@
     <title>OpenSeadragon Viewer Resizing Demo</title>
     <script type="text/javascript" src='../../build/openseadragon/openseadragon.js'></script>
     <script type="text/javascript" src='../lib/jquery-1.9.1.min.js'></script>
+    <script type="text/javascript" src='../lib/jquery-ui-1.10.2/js/jquery-ui-1.10.2.min.js'></script>
+    <link rel="stylesheet" href="../lib/jquery-ui-1.10.2/css/smoothness/jquery-ui-1.10.2.min.css">
     <style type="text/css">
 
       .outer-container{
@@ -135,51 +137,11 @@
                 <div>
                     <button>Resize with constant aspect ratio</button>
                 </div>
-            </div>
-
-        </div>
-        <div>
-            <div class="outer-container v2-container">
-                <div id="viewer2"></div>
-                <div class="sidebar">
-                    <div class="wide">Wide sidebar</div>
-                    <div class="narrow">Narrow sidebar</div>
-                </div>
-
-            </div>
-
-        </div>
-        <div>
-            <h3>Demo: Issues with styling the viewer element when an image is opened</h3>
-            <p>If a DOM/CSS operation is triggered by a viewer event (e.g. the 'page') event
-                for multi-page images, the timing of the viewer resizing itself (if autoResize=true)
-                can be inconsistent - sometimes before, sometimes after the image has finished loading
-                and the Viewport.goHome() call is generated. To ensure consistency, call viewer.forceResize()
-                after altering the page layout.
-            </p>
-            <p>Note: to see this in action most clearly, select the options for "preserveImageSizeOnResize: false"
-                and "Use polling" above.
-            </p>
-            <div class="options">
-                <div class="method force-resize-method selected" data-value="0">
-                    <pre>//pseudocode
-//container will change size
-setSidebarForImage();
-
-// image might not "open" at home
-// viewer.forceResize();
-                    </pre>
-                </div>
-                <div class="method force-resize-method" data-value="1">
-                    <pre>//pseudocode
-//container will change size
-setSidebarForImage();
-
-//image should always "open" at home
-viewer.forceResize();
-                    </pre>
+                <div>
+                    <button>Toggle resizable inner container</button>
                 </div>
             </div>
+
         </div>
     </div>
 
@@ -196,24 +158,10 @@ viewer.forceResize();
             constrainDuringPan:true,
         });
 
-
-        var viewer2 = window.v2 = OpenSeadragon({
-            id: "viewer2",
-            prefixUrl: "../../build/openseadragon/images/",
-            tileSources: ["../data/testpattern.dzi", "../data/iiif_2_0_sizes/info.json", "../data/iiif_3_0_tiled/info.json"],
-            sequenceMode:true,
-            minZoomImageRatio: 0,
-            maxZoomPixelRatio: 10,
-            visibilityRatio:1.0,
-            constrainDuringPan:true,
-        });
-        viewer2._tilesource = "../data/iiif_2_0_sizes/info.json";
-
-
         var _onViewerResize = viewer._onViewerResize;
         var _origViewerResize = viewer._origViewerResize;
 
-        updateViewers();
+        updateViewer();
 
 
 
@@ -228,45 +176,32 @@ viewer.forceResize();
                 case 'Resize width only': resizeWidth(this); break;
                 case 'Resize height only': resizeHeight(this); break;
                 case 'Resize with constant aspect ratio': resizeBoth(this); break;
+                case 'Toggle resizable inner container': toggleResizable(this); break;
             }
         });
 
 
-        // $('#update-viewer2').on('click',function(){
-        //     // updateViewer2();
-        // })
-        function updateViewers(){
-            viewer2._onViewerResize = viewer._onViewerResize = !!parseInt($('.logic-method.selected').data('value')) ? _onViewerResize : _origViewerResize;
+        function updateViewer(){
+            viewer._onViewerResize = !!parseInt($('.logic-method.selected').data('value')) ? _onViewerResize : _origViewerResize;
 
-            viewer2.preserveImageSizeOnResize = viewer.preserveImageSizeOnResize = !!parseInt($('.preserve-method.selected').data('value'));
+            viewer.preserveImageSizeOnResize = !!parseInt($('.preserve-method.selected').data('value'));
 
-            viewer2.autoResize = viewer.autoResize = !!parseInt($('.auto-method.selected').data('value'));
+            viewer.autoResize = !!parseInt($('.auto-method.selected').data('value'));
 
             var useResizeObserver=!!parseInt($('.listener-method.selected').data('value'));
             if(useResizeObserver){
                 if(viewer._resizeObserver && viewer._autoResizePolling){
                     viewer._resizeObserver.observe(viewer.container);
-                    viewer2._resizeObserver.observe(viewer2.container);
-                    viewer2._autoResizePolling = viewer._autoResizePolling = false;
+                    viewer._autoResizePolling = false;
                 }
             } else {
                 if(viewer._resizeObserver && !viewer._autoResizePolling){
                     viewer._resizeObserver.observe(viewer.container);
-                    viewer2._resizeObserver.unobserve(viewer2.container);
-                    viewer2._autoResizePolling = viewer._autoResizePolling = true;
+                    viewer._autoResizePolling = true;
                 }
             }
 
         }
-        let pageEvent = 0;
-        viewer2.addHandler("page", function(event) {
-            $('.v2-container').attr('data-index',''+event.page); //this can trigger a resize of the element via css
-            if(!!parseInt($('.force-resize-method.selected').data('value'))){
-                viewer2.forceResize();
-            }
-            // console.log('Page change #'+ ++pageEvent +' - going home');
-            // setTimeout(()=>viewer2.viewport.goHome(true));
-        });
 
         $('.logic-method').on('click',function(){
             $('.logic-method').removeClass('selected');
@@ -283,10 +218,6 @@ viewer.forceResize();
             $(this).addClass('selected');
         });
 
-        $('.force-resize-method').on('click',function(){
-            $('.force-resize-method').removeClass('selected');
-            $(this).addClass('selected');
-        });
 
         if(!window.ResizeObserver){
             $('.listener-method[data-value=1]').text('ResizeObserver not support in your browser').addClass('invalid');
@@ -296,7 +227,7 @@ viewer.forceResize();
             if(!$(this).hasClass('invalid')) $(this).addClass('selected');
         })
 
-        $('.method').on('click',updateViewers);
+        $('.method').on('click',updateViewer);
 
         var container = $('.inner-container');
         function resizeWidth(b){
@@ -333,6 +264,23 @@ viewer.forceResize();
                 $('#buttons button').prop('disabled', false);
             }
         }
+        function toggleResizable(b){
+            if(container.isResizable){
+                container.isResizable = false;
+                container.resizable('destroy');
+                container.width(800);
+                container.height(600);
+                $('#buttons button').prop('disabled', false);
+            } else {
+                container.isResizable = true;
+                // container.resizable({containment:"parent", maxWidth: 800, maxHeight: 600,});
+                container.resizable();
+                $('#buttons button').prop('disabled', true);
+                container.width(800);
+                container.height(600);
+                $(b).prop('disabled', false);
+            }
+        }
 
 
     </script>