diff options
| author | Syncx <47534062+Syncxv@users.noreply.github.com> | 2023-06-28 06:41:19 +1000 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2023-06-27 22:41:19 +0200 |
| commit | 4fe284523444f5da8594dc42a2c8601a9c73b777 (patch) | |
| tree | f92429068923056c800fdf26e03cbddf4377ab2e /src | |
| parent | 5e71ed286e714bb98daad44c1badc16cde4f45d9 (diff) | |
| download | Vencord-4fe284523444f5da8594dc42a2c8601a9c73b777.tar.gz Vencord-4fe284523444f5da8594dc42a2c8601a9c73b777.tar.bz2 Vencord-4fe284523444f5da8594dc42a2c8601a9c73b777.zip | |
ImageZoom: add nearest neighbour (#1341)
Diffstat (limited to 'src')
| -rw-r--r-- | src/plugins/imageZoom/components/Magnifier.tsx | 2 | ||||
| -rw-r--r-- | src/plugins/imageZoom/index.tsx | 6 | ||||
| -rw-r--r-- | src/plugins/imageZoom/styles.css | 4 |
3 files changed, 11 insertions, 1 deletions
diff --git a/src/plugins/imageZoom/components/Magnifier.tsx b/src/plugins/imageZoom/components/Magnifier.tsx index 75bd2e1..4e5b667 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 d4adcdc..00c9eee 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 219bf6b..026eb5a 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; |