Add pan offset

ivmartel · Feb 7, 2025 · 662a60f · 662a60f
1 parent 5e13cd5
commit 662a60f
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 23 deletions.
diff --git a/src/gui/drawLayer.js b/src/gui/drawLayer.js
@@ -123,6 +123,13 @@ export class DrawLayer {
    */
   #zoomOffset = {x: 0, y: 0};
 
+  /**
+   * The pan offset.
+   *
+   * @type {Scalar2D}
+   */
+  #panOffset = {x: 0, y: 0};
+
   /**
    * The flip offset.
    *
@@ -454,20 +461,15 @@ export class DrawLayer {
    * @param {Scalar3D} newOffset The offset as {x,y,z}.
    */
   setOffset(newOffset) {
-    const planeNewOffset =
+    const newPanOffset =
       this.#planeHelper.getPlaneOffsetFromOffset3D(newOffset);
+    const offset = this.#konvaStage.offset();
     this.#konvaStage.offset({
-      x: planeNewOffset.x +
-        this.#viewOffset.x +
-        this.#baseOffset.x +
-        this.#zoomOffset.x +
-        this.#flipOffset.x,
-      y: planeNewOffset.y +
-        this.#viewOffset.y +
-        this.#baseOffset.y +
-        this.#zoomOffset.y +
-        this.#flipOffset.y
+      x: offset.x - this.#panOffset.x + newPanOffset.x,
+      y: offset.y - this.#panOffset.y + newPanOffset.y
     });
+    this.#panOffset = newPanOffset;
+
   }
 
   /**

diff --git a/src/gui/viewLayer.js b/src/gui/viewLayer.js
@@ -113,7 +113,7 @@ export class ViewLayer {
   #flipScale = {x: 1, y: 1, z: 1};
 
   /**
-   * The layer offset.
+   * The full layer offset: sum of all other offsets.
    *
    * @type {Scalar2D}
    */
@@ -140,6 +140,13 @@ export class ViewLayer {
    */
   #zoomOffset = {x: 0, y: 0};
 
+  /**
+   * The pan offset.
+   *
+   * @type {Scalar2D}
+   */
+  #panOffset = {x: 0, y: 0};
+
   /**
    * The flip offset.
    *
@@ -607,19 +614,12 @@ export class ViewLayer {
    */
   setOffset(newOffset) {
     const helper = this.#viewController.getPlaneHelper();
-    const planeNewOffset = helper.getPlaneOffsetFromOffset3D(newOffset);
+    const newPanOffset = helper.getPlaneOffsetFromOffset3D(newOffset);
     this.#offset = {
-      x: planeNewOffset.x +
-        this.#viewOffset.x +
-        this.#baseOffset.x +
-        this.#zoomOffset.x +
-        this.#flipOffset.x,
-      y: planeNewOffset.y +
-        this.#viewOffset.y +
-        this.#baseOffset.y +
-        this.#zoomOffset.y +
-        this.#flipOffset.y
+      x: this.#offset.x - this.#panOffset.x + newPanOffset.x,
+      y: this.#offset.y - this.#panOffset.y + newPanOffset.y
     };
+    this.#panOffset = newPanOffset;
   }
 
   /**