From 6feed0a68e98064b504d9a22634e046672381b1a Mon Sep 17 00:00:00 2001
From: Tom <tmpearce@gmail.com>
Date: Sun, 9 Jul 2023 12:05:17 -0400
Subject: [PATCH] Add clipping to demo. Update documentation and remove
 commented code. Change from get type to getType().

---
 src/htmldrawer.js               |  2 +-
 src/spring.js                   |  5 ++---
 src/webgldrawer.js              |  5 ++---
 test/demo/drawercomparison.html |  2 +-
 test/demo/drawercomparison.js   | 10 +++++++---
 5 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/htmldrawer.js b/src/htmldrawer.js
index 6dd7084f..cf57c695 100644
--- a/src/htmldrawer.js
+++ b/src/htmldrawer.js
@@ -65,7 +65,7 @@ class HTMLDrawer extends $.DrawerBase{
         return true;
     }
 
-    get type(){
+    getType(){
         return 'html';
     }
 
diff --git a/src/spring.js b/src/spring.js
index b71df85f..a431d56f 100644
--- a/src/spring.js
+++ b/src/spring.js
@@ -206,7 +206,8 @@ $.Spring.prototype = {
 
     /**
      * @function
-     * @returns true if the value got updated, false otherwise
+     * @returns true if the spring is still updating its value, false if it is
+     * already at the target value.
      */
     update: function() {
         this.current.time  = $.now();
@@ -230,7 +231,6 @@ $.Spring.prototype = {
                     ( this.target.time - this.start.time )
                 );
 
-        // var oldValue = this.current.value;
         if (this._exponential) {
             this.current.value = Math.exp(currentValue);
         } else {
@@ -238,7 +238,6 @@ $.Spring.prototype = {
         }
 
         return currentValue !== targetValue;
-        // return oldValue !== this.current.value;
     },
 
     /**
diff --git a/src/webgldrawer.js b/src/webgldrawer.js
index d08e6e87..d634b260 100644
--- a/src/webgldrawer.js
+++ b/src/webgldrawer.js
@@ -234,8 +234,7 @@
         // Public API required by all Drawer implementations
 
         /**
-        * @returns {Boolean} returns true if canvas and webgl are supported and
-        * three.js has been exposed as a global variable named THREE
+        * @returns {Boolean} returns true if canvas and webgl are supported
         */
         static isSupported(){
             let canvasElement = document.createElement( 'canvas' );
@@ -248,7 +247,7 @@
             return !!( webglContext );
         }
 
-        get type(){
+        getType(){
             return 'webgl';
         }
 
diff --git a/test/demo/drawercomparison.html b/test/demo/drawercomparison.html
index 99c2b946..7c09a3c0 100644
--- a/test/demo/drawercomparison.html
+++ b/test/demo/drawercomparison.html
@@ -47,7 +47,7 @@
         }
         .option-grid{
             display: grid;
-            grid-template-columns: 7em 7em 10em 10em 10em;
+            grid-template-columns: 7em 7em 9em 9em 10em 9em;
             /* grid-template-columns: repeat(5, auto); */
         }
         .image-options input[type=number]{
diff --git a/test/demo/drawercomparison.js b/test/demo/drawercomparison.js
index a569419d..59bdd11b 100644
--- a/test/demo/drawercomparison.js
+++ b/test/demo/drawercomparison.js
@@ -171,14 +171,16 @@ function updateTiledImage(tiledImage, data, value, item){
             tiledImage.setFlip($(item).prop('checked'));
         } else if (field == 'cropped'){
             if( $(item).prop('checked') ){
-                let croppingPolygons = [ [{x:200, y:200}, {x:800, y:200}, {x:500, y:800}] ];
+                let scale = tiledImage.source.width;
+                let croppingPolygons = [ [{x:0.2*scale, y:0.2*scale}, {x:0.8*scale, y:0.2*scale}, {x:0.5*scale, y:0.8*scale}] ];
                 tiledImage.setCroppingPolygons(croppingPolygons);
             } else {
                 tiledImage.resetCroppingPolygons();
             }
         } else if (field == 'clipped'){
             if( $(item).prop('checked') ){
-                let clipRect = new OpenSeadragon.Rect(2000, 0, 3000, 4000);
+                let scale = tiledImage.source.width;
+                let clipRect = new OpenSeadragon.Rect(0.1*scale, 0.2*scale, 0.6*scale, 0.4*scale);
                 tiledImage.setClip(clipRect);
             } else {
                 tiledImage.setClip(null);
@@ -296,11 +298,13 @@ function makeImagePickerElement(key, label){
             <label>Width: <input type="number" value="1" data-image="" data-field="width" min="0"> </label>
             <label>Degrees: <input type="number" value="0" data-image="" data-field="degrees"> </label>
             <label>Opacity: <input type="number" value="1" data-image="" data-field="opacity" min="0" max="1" step="0.2"> </label>
+            <span></span>
             <label>Flipped: <input type="checkbox" data-image="" data-field="flipped"></label>
             <label>Cropped: <input type="checkbox" data-image="" data-field="cropped"></label>
+            <label>Clipped: <input type="checkbox" data-image="" data-field="clipped"></label>
             <label>Debug: <input type="checkbox" data-image="" data-field="debug"></label>
             <label>Composite: <select data-image="" data-field="composite"></select></label>
-            <label>Wrapping: <select data-image="" data-field="wrapping"></select></label>
+            <label>Wrap: <select data-image="" data-field="wrapping"></select></label>
         </div>
 
     </div>`.replaceAll('data-image=""', `data-image="${key}"`).replace('__title__', label));