From c8b882621635ffbfc2d45a99df40c22ef4bf4948 Mon Sep 17 00:00:00 2001
From: Igor Zinken <730069+igorski@users.noreply.github.com>
Date: Sat, 15 Mar 2025 11:49:56 +0100
Subject: [PATCH] Guides and selection lines now render at equal thickness
 across zoom levels

---
 src/rendering/canvas-elements/guide-renderer.ts   | 5 +++--
 src/rendering/canvas-elements/interaction-pane.ts | 7 ++++---
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/rendering/canvas-elements/guide-renderer.ts b/src/rendering/canvas-elements/guide-renderer.ts
index 1a295a5..43684ca 100644
--- a/src/rendering/canvas-elements/guide-renderer.ts
+++ b/src/rendering/canvas-elements/guide-renderer.ts
@@ -1,7 +1,7 @@
 /**
  * The MIT License (MIT)
  *
- * Igor Zinken 2021-2022 - https://www.igorski.nl
+ * Igor Zinken 2021-2025 - https://www.igorski.nl
  *
  * Permission is hereby granted, free of charge, to any person obtaining a copy of
  * this software and associated documentation files (the "Software"), to deal in
@@ -51,7 +51,7 @@ class GuideRenderer extends sprite  {
         this.drawPixelGrid = drawPixelGrid;
     }
 
-    draw( ctx: CanvasRenderingContext2D, viewport: Viewport = null ): void {
+    draw( ctx: CanvasRenderingContext2D, viewport?: Viewport ): void {
 
         /* grid */
 
@@ -85,6 +85,7 @@ class GuideRenderer extends sprite  {
 
         // we can snap the currently draggingSprite against its edge and center
         const guides: Rectangle[] = getClosestSnappingPoints( this.canvas.draggingSprite, this.canvas.guides );
+        ctx.lineWidth   = 1 / this.canvas.zoomFactor;
         ctx.strokeStyle = "red";
 
         for ( const { left, top, width, height } of guides ) {
diff --git a/src/rendering/canvas-elements/interaction-pane.ts b/src/rendering/canvas-elements/interaction-pane.ts
index 6b9cf56..6c1bc61 100644
--- a/src/rendering/canvas-elements/interaction-pane.ts
+++ b/src/rendering/canvas-elements/interaction-pane.ts
@@ -396,7 +396,7 @@ class InteractionPane extends sprite {
 
     update( _now: DOMHighResTimeStamp, framesSinceLastUpdate: number ): void {
         if ( this._selectionClosed && this.getActiveDocument().activeSelection?.length ) {
-            this._dashOffset -= ( DASH_SPEED * framesSinceLastUpdate ); // advance the selection outline animation
+            this._dashOffset -= (( DASH_SPEED * this.canvas.zoomFactor ) * framesSinceLastUpdate ); // advance the selection outline animation
         }
     }
 
@@ -482,13 +482,14 @@ export default InteractionPane;
 
 function drawSelectionShape( ctx: CanvasRenderingContext2D, zoomableCanvas: ZoomableCanvas, viewport: Viewport,
                              shape: Shape, currentPosition?: Point, dashOffset = 0 ): void {
+    const { zoomFactor } = zoomableCanvas;
     ctx.save();
     drawShapeOutline( ctx, zoomableCanvas, viewport, shape, "#000", currentPosition );
     ctx.restore();
 
     ctx.save();
-    ctx.setLineDash([ DASH_SIZE ]);
-    ctx.lineDashOffset = DASH_SIZE + dashOffset;    
+    ctx.setLineDash([ DASH_SIZE / zoomFactor ]);
+    ctx.lineDashOffset = ( DASH_SIZE + dashOffset ) / zoomFactor;   
     drawShapeOutline( ctx, zoomableCanvas, viewport, shape, "#FFF", currentPosition );
     ctx.restore();
 }