From a1660e1ccbd18c8b1b7d7303ea25f7a14a2d7858 Mon Sep 17 00:00:00 2001
From: Anton Lavrenov <lavrton@gmail.com>
Date: Fri, 5 Jan 2024 10:55:28 -0500
Subject: [PATCH] fix filters work. close #1697

---
 src/Node.ts                  |  9 ++++++---
 test/manual/Pixelate-test.ts | 24 ++++++++++++++++++++++--
 test/unit/Node-cache-test.ts |  2 +-
 3 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/src/Node.ts b/src/Node.ts
index ae4ac02e9..85deed311 100644
--- a/src/Node.ts
+++ b/src/Node.ts
@@ -343,10 +343,13 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
       return;
     }
 
-    // let's just add 1 pixel extra,
     // because using Math.floor on x, y position may shift drawing
-    width += offset * 2 + 1;
-    height += offset * 2 + 1;
+    // to avoid shift we need to increase size
+    // but we better to avoid it, for better filters flows
+    const extraPaddingX = Math.abs(Math.round(rect.x) - x) > 0.5 ? 1 : 0;
+    const extraPaddingY = Math.abs(Math.round(rect.y) - y) > 0.5 ? 1 : 0;
+    width += offset * 2 + extraPaddingX;
+    height += offset * 2 + extraPaddingY;
 
     x -= offset;
     y -= offset;
diff --git a/test/manual/Pixelate-test.ts b/test/manual/Pixelate-test.ts
index cb22ea303..a8a9dc416 100644
--- a/test/manual/Pixelate-test.ts
+++ b/test/manual/Pixelate-test.ts
@@ -1,6 +1,5 @@
-import { assert } from 'chai';
-
 import { addStage, Konva, loadImage } from '../unit/test-utils';
+import { cloneAndCompareLayer } from '../unit/test-utils';
 
 describe('Pixelate', function () {
   // ======================================================
@@ -42,4 +41,25 @@ describe('Pixelate', function () {
       done();
     });
   });
+
+  it('make sure we have no extra transparent pixels', function (done) {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    Konva.Image.fromURL(
+      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGUAAABmCAYAAADS6F9hAAAAAXNSR0IArs4c6QAAAXJJREFUeF7t1cEJADAMw8B2/6Fd6BT3UCYQEiZ3205HGbhFoXp8mKJ4TYoCNilKUUQDIFM/pSigARCppRQFNAAitZSigAZApJZSFNAAiNRSigIaAJFaSlFAAyBSSykKaABEailFAQ2ASC2lKKABEKmlFAU0ACK1lKKABkCkllIU0ACI1FKKAhoAkVpKUUADIFJLKQpoAERqKUUBDYBILaUooAEQqaUUBTQAIrWUooAGQKSWUhTQAIjUUooCGgCRWkpRQAMgUkspCmgARGopRQENgEgtpSigARCppRQFNAAitZSigAZApJZSFNAAiNRSigIaAJFaSlFAAyBSSykKaABEailFAQ2ASC2lKKABEKmlFAU0ACK1lKKABkCkllIU0ACI1FKKAhoAkVpKUUADIFJLKQpoAERqKUUBDYBILaUooAEQqaUUBTQAIrWUooAGQKSWUhTQAIjUUooCGgCRWkpRQAMgUkspCmgARGopRQENgEgPgGOW3jCsp3sAAAAASUVORK5CYII=',
+      function (image) {
+        layer.add(image);
+
+        image.cache();
+        image.filters([Konva.Filters.Pixelate]);
+        image.pixelSize(4);
+        layer.draw();
+        cloneAndCompareLayer(layer);
+
+        done();
+      }
+    );
+  });
 });
diff --git a/test/unit/Node-cache-test.ts b/test/unit/Node-cache-test.ts
index 1fbf759c6..687a1c5ad 100644
--- a/test/unit/Node-cache-test.ts
+++ b/test/unit/Node-cache-test.ts
@@ -1469,7 +1469,7 @@ describe('Caching', function () {
     layer.draw();
     assert.equal(
       circle._cache.get('canvas').filter.width,
-      21 * circle._cache.get('canvas').filter.pixelRatio
+      20 * circle._cache.get('canvas').filter.pixelRatio
     );
     circle.filters([]);
     // TODO: should we clear cache canvas?