Add clipping to demo. Update documentation and remove commented code. Change from get type to getType().

src/htmldrawer.js

@@ -65,7 +65,7 @@ class HTMLDrawer extends $.DrawerBase{
         return true;
     }
 
-    get type(){
+    getType(){
         return 'html';
     }
 

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;
     },
 
     /**

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
+        * @returns {Boolean} returns true if canvas and webgl are supported
-        * three.js has been exposed as a global variable named THREE
         */
         static isSupported(){
             let canvasElement = document.createElement( 'canvas' );
@@ -248,7 +247,7 @@
             return !!( webglContext );
         }
 
-        get type(){
+        getType(){
             return 'webgl';
         }
 

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]{

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));