From 5b2c6d7ed9448ff431e3857074bf8afffcdd9687 Mon Sep 17 00:00:00 2001
From: Tom <tmpearce@gmail.com>
Date: Fri, 9 Feb 2024 15:06:52 -0500
Subject: [PATCH] add support for placeholderFillStyle to webgl drawer. fix
 spring logic to avoid getting stuck updating due to floating point math.
 update tilesource-swap demo.

---
 src/spring.js                  | 32 +++++++++++++++++---------------
 src/webgldrawer.js             | 28 ++++++++++++++++++++++++++++
 test/demo/tilesource-swap.html | 17 ++++++++---------
 3 files changed, 53 insertions(+), 24 deletions(-)

diff --git a/src/spring.js b/src/spring.js
index f65f076e..77162188 100644
--- a/src/spring.js
+++ b/src/spring.js
@@ -212,7 +212,7 @@ $.Spring.prototype = {
     update: function() {
         this.current.time  = $.now();
 
-        var startValue, targetValue;
+        let startValue, targetValue;
         if (this._exponential) {
             startValue = this.start._logValue;
             targetValue = this.target._logValue;
@@ -221,23 +221,25 @@ $.Spring.prototype = {
             targetValue = this.target.value;
         }
 
-        var currentValue = (this.current.time >= this.target.time) ?
-            targetValue :
-            startValue +
-                ( targetValue - startValue ) *
-                transform(
-                    this.springStiffness,
-                    ( this.current.time - this.start.time ) /
-                    ( this.target.time - this.start.time )
-                );
-
-        if (this._exponential) {
-            this.current.value = Math.exp(currentValue);
+        if(this.current.time >= this.target.time){
+            this.current.value = this.target.value;
         } else {
-            this.current.value = currentValue;
+            let currentValue = startValue +
+                    ( targetValue - startValue ) *
+                    transform(
+                        this.springStiffness,
+                        ( this.current.time - this.start.time ) /
+                        ( this.target.time - this.start.time )
+                    );
+
+            if (this._exponential) {
+                this.current.value = Math.exp(currentValue);
+            } else {
+                this.current.value = currentValue;
+            }
         }
 
-        return currentValue !== targetValue;
+        return this.current.value !== this.target.value;
     },
 
     /**
diff --git a/src/webgldrawer.js b/src/webgldrawer.js
index bf40266d..67834f4c 100644
--- a/src/webgldrawer.js
+++ b/src/webgldrawer.js
@@ -239,6 +239,10 @@
 
                 let tilesToDraw = tiledImage.getTilesToDraw();
 
+                if ( tiledImage.placeholderFillStyle && tiledImage._hasOpaqueTile === false ) {
+                     this._drawPlaceholder(tiledImage);
+                }
+
                 if(tilesToDraw.length === 0 || tiledImage.getOpacity() === 0){
                     return;
                 }
@@ -1077,6 +1081,30 @@
             context.restore();
         }
 
+        _drawPlaceholder(tiledImage){
+
+            const bounds = tiledImage.getBounds(true);
+            const rect = this.viewportToDrawerRectangle(tiledImage.getBounds(true));
+            const context = this._outputContext;
+
+            let fillStyle;
+            if ( typeof tiledImage.placeholderFillStyle === "function" ) {
+                fillStyle = tiledImage.placeholderFillStyle(tiledImage, context);
+            }
+            else {
+                fillStyle = tiledImage.placeholderFillStyle;
+            }
+
+            context.save();
+            context.fillStyle = fillStyle;
+            context.translate(rect.x, rect.y);
+            context.rotate(Math.PI / 180 * bounds.degrees);
+            context.translate(-rect.x, -rect.y);
+            context.fillRect(rect.x, rect.y, rect.width, rect.height);
+            context.restore();
+
+        }
+
         // private
         _restoreRotationChanges() {
             var context = this._outputContext;
diff --git a/test/demo/tilesource-swap.html b/test/demo/tilesource-swap.html
index 5b1f6dee..f5fbc084 100644
--- a/test/demo/tilesource-swap.html
+++ b/test/demo/tilesource-swap.html
@@ -32,17 +32,18 @@
                 type: 'legacy-image-pyramid',
                 levels: [
                     {
-                        url: 'http://openseadragon.github.io/example-images/duomo/duomo_files/8/0_0.jpg',
+                        url: 'https://openseadragon.github.io/example-images/duomo/duomo_files/8/0_0.jpg',
                         width: 218,
                         height: 160
                     }
-                ]
+                ],
+                degrees: 30,
             };
 
             var duomo = {
                 Image: {
                     xmlns: 'http://schemas.microsoft.com/deepzoom/2008',
-                    Url: 'http://openseadragon.github.io/example-images/duomo/duomo_files/',
+                    Url: 'https://openseadragon.github.io/example-images/duomo/duomo_files/',
                     Format: 'jpg',
                     Overlap: '2',
                     TileSize: '256',
@@ -59,10 +60,11 @@
                 tileSources: duomoStandin,
                 minZoomImageRatio: 0.1,
                 defaultZoomLevel: 0.1,
-                zoomPerClick: 1
+                zoomPerClick: 1,
+                crossOriginPolicy: 'Anonymous'
             });
 
-            viewer.addHandler('canvas-click', function(event) {
+            viewer.addOnceHandler('canvas-click', function(event) {
                 if (event.quick) {
                     var standin = viewer.world.getItemAt(0);
                     var standinBounds = standin.getBounds();
@@ -76,13 +78,10 @@
                         index: 0, // Add the new image below the stand-in.
                         success: function(event) {
                             var fullImage = event.item;
-
-                            // The changeover will look better if we wait for the first tile to be drawn.
+                            // The changeover will look better if we wait for the first draw after the changeover.
                             var tileDrawnHandler = function(event) {
-                                if (event.tiledImage === fullImage) {
                                     viewer.removeHandler('update-viewport', tileDrawnHandler);
                                     viewer.world.removeItem(standin);
-                                }
                             };
 
                             viewer.addHandler('update-viewport', tileDrawnHandler);