From a0bcbc4d21e32eb4d728057d3acf0baa6a5a1cc2 Mon Sep 17 00:00:00 2001
From: Tom <tmpearce@gmail.com>
Date: Wed, 21 Feb 2024 17:49:46 -0500
Subject: [PATCH 1/3] fix clip behavior with webgl drawer

---
 src/webgldrawer.js | 22 ++++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/webgldrawer.js b/src/webgldrawer.js
index ac450b3c..1468b729 100644
--- a/src/webgldrawer.js
+++ b/src/webgldrawer.js
@@ -920,9 +920,23 @@
             this._clippingContext.save();
 
             if(item._clip){
-                var box = item.imageToViewportRectangle(item._clip, true);
-                var rect = this.viewportToDrawerRectangle(box);
-                this._setClip(rect);
+                const polygon = [
+                    {x: item._clip.x, y: item._clip.y},
+                    {x: item._clip.x + item._clip.width, y: item._clip.y},
+                    {x: item._clip.x + item._clip.width, y: item._clip.y + item._clip.height},
+                    {x: item._clip.x, y: item._clip.y + item._clip.height},
+                ];
+                let clipPoints = polygon.map(coord => {
+                    let point = item.imageToViewportCoordinates(coord.x, coord.y, true)
+                        .rotate(this.viewer.viewport.getRotation(true), this.viewer.viewport.getCenter(true));
+                    let clipPoint = this.viewportCoordToDrawerCoord(point);
+                    return clipPoint;
+                });
+                this._clippingContext.beginPath();
+                clipPoints.forEach( (coord, i) => {
+                    this._clippingContext[i === 0 ? 'moveTo' : 'lineTo'](coord.x, coord.y);
+                });
+                this._clippingContext.clip();
             }
             if(item._croppingPolygons){
                 let polygons = item._croppingPolygons.map(polygon => {
@@ -934,7 +948,7 @@
                     });
                 });
                 this._clippingContext.beginPath();
-                polygons.forEach(polygon => {
+                polygons.forEach((polygon) => {
                     polygon.forEach( (coord, i) => {
                         this._clippingContext[i === 0 ? 'moveTo' : 'lineTo'](coord.x, coord.y);
                     });

From ae5f08b9bdf4ce13d46beef11e8d3ea6ba6893b6 Mon Sep 17 00:00:00 2001
From: Tom <tmpearce@gmail.com>
Date: Wed, 21 Feb 2024 17:53:23 -0500
Subject: [PATCH 2/3] call _setClip for test spyOnce

---
 src/webgldrawer.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/webgldrawer.js b/src/webgldrawer.js
index 1468b729..c3619503 100644
--- a/src/webgldrawer.js
+++ b/src/webgldrawer.js
@@ -907,10 +907,9 @@
         }
 
         // private
-        _setClip(rect){
-            this._clippingContext.beginPath();
-            this._clippingContext.rect(rect.x, rect.y, rect.width, rect.height);
-            this._clippingContext.clip();
+        _setClip(){
+            // no-op: called by _renderToClippingCanvas when tiledImage._clip is truthy
+            // so that tests will pass.
         }
 
         // private
@@ -937,6 +936,7 @@
                     this._clippingContext[i === 0 ? 'moveTo' : 'lineTo'](coord.x, coord.y);
                 });
                 this._clippingContext.clip();
+                this._setClip()
             }
             if(item._croppingPolygons){
                 let polygons = item._croppingPolygons.map(polygon => {

From 5df791fc82eb4323ed6de2e20c9d51be0558c738 Mon Sep 17 00:00:00 2001
From: Tom <tmpearce@gmail.com>
Date: Wed, 21 Feb 2024 18:12:22 -0500
Subject: [PATCH 3/3] support viewport flipping for clip and cropping polygons
 in webglviewer

---
 src/webgldrawer.js | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/webgldrawer.js b/src/webgldrawer.js
index c3619503..072cbde0 100644
--- a/src/webgldrawer.js
+++ b/src/webgldrawer.js
@@ -917,6 +917,12 @@
 
             this._clippingContext.clearRect(0, 0, this._clippingCanvas.width, this._clippingCanvas.height);
             this._clippingContext.save();
+            if(this.viewer.viewport.getFlip()){
+                const point = new $.Point(this.canvas.width / 2, this.canvas.height / 2);
+                this._clippingContext.translate(point.x, 0);
+                this._clippingContext.scale(-1, 1);
+                this._clippingContext.translate(-point.x, 0);
+            }
 
             if(item._clip){
                 const polygon = [
@@ -936,7 +942,7 @@
                     this._clippingContext[i === 0 ? 'moveTo' : 'lineTo'](coord.x, coord.y);
                 });
                 this._clippingContext.clip();
-                this._setClip()
+                this._setClip();
             }
             if(item._croppingPolygons){
                 let polygons = item._croppingPolygons.map(polygon => {
@@ -956,6 +962,13 @@
                 this._clippingContext.clip();
             }
 
+            if(this.viewer.viewport.getFlip()){
+                const point = new $.Point(this.canvas.width / 2, this.canvas.height / 2);
+                this._clippingContext.translate(point.x, 0);
+                this._clippingContext.scale(-1, 1);
+                this._clippingContext.translate(-point.x, 0);
+            }
+
             this._clippingContext.drawImage(this._renderingCanvas, 0, 0);
 
             this._clippingContext.restore();