From 5593943f4b9dd248dca4b0be3f48701608943242 Mon Sep 17 00:00:00 2001
From: Steven Lambert <2433219+straker@users.noreply.github.com>
Date: Wed, 25 Jan 2023 23:11:45 -0700
Subject: [PATCH] fix(tileEngine): prevent negative sx/sy when map size is
 smaller than canvas size (#342)

* fix(tileEngine): prevent negative sx/sy when map size is smaller than canvas size

* typo

* fix permutation test
---
 src/tileEngine.js            |  6 ++--
 test/unit/tileEngine.spec.js | 68 ++++++++++++++++++++++++++++++++++++
 2 files changed, 72 insertions(+), 2 deletions(-)

diff --git a/src/tileEngine.js b/src/tileEngine.js
index 7b634e45..183e0c47 100644
--- a/src/tileEngine.js
+++ b/src/tileEngine.js
@@ -251,11 +251,13 @@ class TileEngine {
   // region, otherwise. Firefox and Safari won't draw it.
   // @see http://stackoverflow.com/questions/19338032/canvas-indexsizeerror-index-or-size-is-negative-or-greater-than-the-allowed-a
   set sx(value) {
-    this._sx = clamp(0, this.mapwidth - getCanvas().width, value);
+    let max = Math.max(0, this.mapwidth - getCanvas().width);
+    this._sx = clamp(0, max, value);
   }
 
   set sy(value) {
-    this._sy = clamp(0, this.mapheight - getCanvas().height, value);
+    let max = Math.max(0, this.mapheight - getCanvas().height);
+    this._sy = clamp(0, max, value);
   }
 
   set objects(value) {
diff --git a/test/unit/tileEngine.spec.js b/test/unit/tileEngine.spec.js
index 54d09ac6..5787fa67 100644
--- a/test/unit/tileEngine.spec.js
+++ b/test/unit/tileEngine.spec.js
@@ -170,6 +170,74 @@ describe(
       });
     });
 
+    // --------------------------------------------------
+    // tileEngine.sx/sy
+    // --------------------------------------------------
+    describe('sx/sy', () => {
+      let tileEngine;
+      beforeEach(() => {
+        tileEngine = TileEngine({
+          tilewidth: 10,
+          tileheight: 10,
+          width: 70,
+          height: 70,
+          tilesets: [
+            {
+              image: new Image()
+            }
+          ],
+          layers: [
+            {
+              name: 'test',
+              data: [0, 0, 1, 0, 0]
+            }
+          ]
+        });
+      });
+
+      if (testContext.TILEENGINE_CAMERA) {
+        it('should set sx and sy', () => {
+          tileEngine.sx = 10;
+          tileEngine.sy = 20;
+
+          expect(tileEngine.sx).to.equal(10);
+          expect(tileEngine.sy).to.equal(20);
+        });
+
+        it('should clamp to min of 0', () => {
+          tileEngine.sx = -10;
+          tileEngine.sy = -20;
+
+          expect(tileEngine.sx).to.equal(0);
+          expect(tileEngine.sy).to.equal(0);
+        });
+
+        it('should clamp to max of canvas', () => {
+          tileEngine.sx = 1000;
+          tileEngine.sy = 2000;
+
+          expect(tileEngine.sx).to.equal(100);
+          expect(tileEngine.sy).to.equal(100);
+        });
+
+        it('should clamp to 0 if map size is smaller than canvas', () => {
+          tileEngine.mapwidth = 500;
+          tileEngine.mapheight = 400;
+          tileEngine.sx = 10;
+          tileEngine.sy = 20;
+
+          expect(tileEngine.sx).to.equal(0);
+          expect(tileEngine.sy).to.equal(0);
+        });
+      }
+      else {
+        it('should not have sx and sy properties', () => {
+          expect(tileEngine.sx).to.not.exist;
+          expect(tileEngine.sy).to.not.exist;
+        });
+      }
+    });
+
     // --------------------------------------------------
     // tileEngine.render
     // --------------------------------------------------