From 286ccee62e6fc473d840be905af26a45b2923d10 Mon Sep 17 00:00:00 2001
From: HF <hf@pixelplanet.fun>
Date: Mon, 5 Feb 2024 00:49:05 +0100
Subject: [PATCH] care about canvas the template is on

---
 src/controls/PixelPainterControls.js |  3 ++-
 src/ui/Renderer2D.js                 |  2 +-
 src/ui/render2Delements.js           |  8 +++++---
 src/ui/templateLoader.js             | 10 ++++++----
 4 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/controls/PixelPainterControls.js b/src/controls/PixelPainterControls.js
index 63e7c648..e4722409 100644
--- a/src/controls/PixelPainterControls.js
+++ b/src/controls/PixelPainterControls.js
@@ -415,7 +415,8 @@ class PixelPainterControls {
       return renderer.getColorIndexOfPixel(...cell, true);
     }
     if (state.gui.holdPaint === HOLD_PAINT.OVERLAY) {
-      const rgb = templateLoader.getColorOfPixel(...cell);
+      const { canvasId } = state.canvas;
+      const rgb = templateLoader.getColorOfPixel(canvasId, ...cell);
       if (!rgb) {
         return null;
       }
diff --git a/src/ui/Renderer2D.js b/src/ui/Renderer2D.js
index 644ab974..9b3a4f6d 100644
--- a/src/ui/Renderer2D.js
+++ b/src/ui/Renderer2D.js
@@ -557,7 +557,7 @@ class Renderer2D extends Renderer {
     if (viewscale >= 5 && state.templates.ovEnabled
       && state.templates.oSmallPxls
     ) {
-      renderSmallPOverlay(viewport, _view, viewscale);
+      renderSmallPOverlay(state, viewport, _view, viewscale);
     }
 
     if (showGrid && viewscale >= 8) {
diff --git a/src/ui/render2Delements.js b/src/ui/render2Delements.js
index 8c85ab72..9e5a9900 100644
--- a/src/ui/render2Delements.js
+++ b/src/ui/render2Delements.js
@@ -114,7 +114,7 @@ export function renderOverlay(
   scaleThreshold,
 ) {
   if (!templateLoader.ready) return;
-  const { canvasSize } = state.canvas;
+  const { canvasSize, canvasId } = state.canvas;
   // world coordinates of center of center chunk
   const [x, y] = centerChunk
     .map((z) => z * TILE_SIZE / tiledScale
@@ -123,7 +123,7 @@ export function renderOverlay(
   const horizontalRadius = width / 2 / scale;
   const verticalRadius = height / 2 / scale;
   const templates = templateLoader.getTemplatesInView(
-    x, y, horizontalRadius, verticalRadius,
+    canvasId, x, y, horizontalRadius, verticalRadius,
   );
 
   if (!templates.length) return;
@@ -154,17 +154,19 @@ export function renderOverlay(
  * high scale values
  */
 export function renderSmallPOverlay(
+  state,
   $viewport,
   view,
   scale,
 ) {
   if (!templateLoader.ready) return;
+  const { canvasId } = state.canvas;
   const [x, y] = view;
   const { width, height } = $viewport;
   const horizontalRadius = width / 2 / scale;
   const verticalRadius = height / 2 / scale;
   const templates = templateLoader.getTemplatesInView(
-    x, y, horizontalRadius, verticalRadius,
+    canvasId, x, y, horizontalRadius, verticalRadius,
   );
 
   if (!templates.length) return;
diff --git a/src/ui/templateLoader.js b/src/ui/templateLoader.js
index 35c5e218..02449c51 100644
--- a/src/ui/templateLoader.js
+++ b/src/ui/templateLoader.js
@@ -79,10 +79,11 @@ class TemplateLoader {
     return null;
   }
 
-  getColorOfPixel(x, y) {
+  getColorOfPixel(canvasId, x, y) {
     const templatesInView = this.#store.getState().templates.list
       .filter((template) => (
-        template.enabled && template.x < x && template.y < y
+        template.enabled && template.canvasId === canvasId
+      && template.x < x && template.y < y
       && template.x + template.width > x
       && template.y + template.height > y
       ));
@@ -101,14 +102,15 @@ class TemplateLoader {
     return null;
   }
 
-  getTemplatesInView(x, y, horizontalRadius, verticalRadius) {
+  getTemplatesInView(canvasId, x, y, horizontalRadius, verticalRadius) {
     const topX = x - horizontalRadius;
     const topY = y - verticalRadius;
     const bottomX = x + horizontalRadius;
     const bottomY = y + verticalRadius;
 
     return this.#store.getState().templates.list.filter((template) => (
-      template.enabled && template.x < bottomX && template.y < bottomY
+      template.enabled && template.canvasId === canvasId
+      && template.x < bottomX && template.y < bottomY
       && template.x + template.width > topX
       && template.y + template.height > topY
     ));