From 4fe284523444f5da8594dc42a2c8601a9c73b777 Mon Sep 17 00:00:00 2001
From: Syncx <47534062+Syncxv@users.noreply.github.com>
Date: Wed, 28 Jun 2023 06:41:19 +1000
Subject: [PATCH] ImageZoom: add nearest neighbour (#1341)

---
 src/plugins/imageZoom/components/Magnifier.tsx | 2 +-
 src/plugins/imageZoom/index.tsx                | 6 ++++++
 src/plugins/imageZoom/styles.css               | 4 ++++
 3 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/plugins/imageZoom/components/Magnifier.tsx b/src/plugins/imageZoom/components/Magnifier.tsx
index 75bd2e10..4e5b6679 100644
--- a/src/plugins/imageZoom/components/Magnifier.tsx
+++ b/src/plugins/imageZoom/components/Magnifier.tsx
@@ -156,7 +156,7 @@ export const Magnifier: React.FC<MagnifierProps> = ({ instance, size: initialSiz
 
     return (
         <div
-            className="vc-imgzoom-lens"
+            className={`vc-imgzoom-lens ${settings.store.nearestNeighbour ? "nearest-neighbor" : ""}`}
             style={{
                 opacity,
                 width: size.current + "px",
diff --git a/src/plugins/imageZoom/index.tsx b/src/plugins/imageZoom/index.tsx
index d4adcdca..00c9eee5 100644
--- a/src/plugins/imageZoom/index.tsx
+++ b/src/plugins/imageZoom/index.tsx
@@ -50,6 +50,12 @@ export const settings = definePluginSettings({
         default: true,
     },
 
+    nearestNeighbour: {
+        type: OptionType.BOOLEAN,
+        description: "Use Nearest Neighbour Interpolation when scaling images",
+        default: false,
+    },
+
     zoom: {
         description: "Zoom of the lens",
         type: OptionType.SLIDER,
diff --git a/src/plugins/imageZoom/styles.css b/src/plugins/imageZoom/styles.css
index 219bf6bf..026eb5a8 100644
--- a/src/plugins/imageZoom/styles.css
+++ b/src/plugins/imageZoom/styles.css
@@ -11,6 +11,10 @@
     pointer-events: none;
 }
 
+.vc-imgzoom-lens.nearest-neighbor > img {
+    image-rendering: pixelated; /* https://googlechrome.github.io/samples/image-rendering-pixelated/index.html */
+}
+
 /* make the carousel take up less space so we can click the backdrop and exit out of it */
 [class|="carouselModal"] {
     height: fit-content;