From f5d73910cef412e11f6bc7f1e0ef4a21d8907c59 Mon Sep 17 00:00:00 2001
From: George Satellite <lunaerxs@gmail.com>
Date: Wed, 15 Nov 2023 00:06:50 +0200
Subject: [PATCH 1/4] Inversion

---
 .../Generator/CanvasSection/CanvasSection.tsx | 27 ++++++++++++++++++-
 .../CanvasSection/utils/drawInvert.ts         | 19 +++++++++++++
 2 files changed, 45 insertions(+), 1 deletion(-)
 create mode 100644 src/components/pages/Generator/CanvasSection/utils/drawInvert.ts

diff --git a/src/components/pages/Generator/CanvasSection/CanvasSection.tsx b/src/components/pages/Generator/CanvasSection/CanvasSection.tsx
index 043153a..82ed5b6 100644
--- a/src/components/pages/Generator/CanvasSection/CanvasSection.tsx
+++ b/src/components/pages/Generator/CanvasSection/CanvasSection.tsx
@@ -7,9 +7,10 @@ import {SectionTitle} from '../SectionTitle';
 import {saveImage} from './utils/saveImage';
 import {draw} from './utils/draw';
 import {Switch} from '@/components/ui/Switch';
+import {getCanvasDimensions} from './utils/getCanvasDimensions';
 import {clearCanvas} from './utils/clearCanvas';
 import {drawNormal} from './utils/drawNormal';
-import {getCanvasDimensions} from './utils/getCanvasDimensions';
+import {drawInvert} from './utils/drawInvert';
 
 export function CanvasSection() {
   const [is8k, setIs8k] = useState<boolean>(false);
@@ -129,6 +130,24 @@ export function CanvasSection() {
     setIs8k(is8k);
   };
 
+  const invert = () => {
+    const renderTimeStartMs: number = performance.now();
+    setIsRendering(true);
+    setIsNormalPreview(false);
+
+    const updateCanvas = () => {
+      const ctx2d = getCtx2d(canvasRef);
+      drawInvert(ctx2d);
+    };
+
+    // Put a small timeout to allow the UI to update before canvas takes the main thread over
+    setTimeout(() => {
+      updateCanvas();
+      setIsRendering(false);
+      setRenderTimeMs(performance.now() - renderTimeStartMs);
+    }, 20);
+  };
+
   const toggleNormalPreview = () => {
     const isNormalPreviewNew = !isNormalPreview;
     const renderTimeStartMs: number = performance.now();
@@ -197,6 +216,12 @@ export function CanvasSection() {
         </Button>
       </div>
       <div className='flex flex-wrap gap-1 pt-2'>
+        <Button
+          disabled={isPristine || isRendering || isNormalPreview}
+          onClick={invert}
+        >
+          Invert
+        </Button>
         <Button
           disabled={isPristine || isRendering}
           onClick={toggleNormalPreview}
diff --git a/src/components/pages/Generator/CanvasSection/utils/drawInvert.ts b/src/components/pages/Generator/CanvasSection/utils/drawInvert.ts
new file mode 100644
index 0000000..3a122c0
--- /dev/null
+++ b/src/components/pages/Generator/CanvasSection/utils/drawInvert.ts
@@ -0,0 +1,19 @@
+import {getCanvasDimensions} from './getCanvasDimensions';
+
+/**
+ * Inverts canvas.
+ */
+export const drawInvert = (ctx2d: CanvasRenderingContext2D): void => {
+  const {w, h} = getCanvasDimensions(ctx2d);
+
+  const imageData = ctx2d.getImageData(0, 0, w, h);
+  const {data} = imageData;
+
+  for (let i = 0; i < data.length; i += 4) {
+    data[i] = 255 - data[i];
+    data[i + 1] = 255 - data[i + 1];
+    data[i + 2] = 255 - data[i + 2];
+  }
+
+  ctx2d.putImageData(imageData, 0, 0);
+};

From 23708e946258571f62f153f814cd3930581b0e26 Mon Sep 17 00:00:00 2001
From: George Satellite <lunaerxs@gmail.com>
Date: Wed, 15 Nov 2023 00:13:19 +0200
Subject: [PATCH 2/4] drawNormal: simplify

---
 .../Generator/CanvasSection/CanvasSection.tsx   |  2 +-
 .../Generator/CanvasSection/utils/drawInvert.ts |  3 ---
 .../Generator/CanvasSection/utils/drawNormal.ts | 17 +++--------------
 3 files changed, 4 insertions(+), 18 deletions(-)

diff --git a/src/components/pages/Generator/CanvasSection/CanvasSection.tsx b/src/components/pages/Generator/CanvasSection/CanvasSection.tsx
index 82ed5b6..95936aa 100644
--- a/src/components/pages/Generator/CanvasSection/CanvasSection.tsx
+++ b/src/components/pages/Generator/CanvasSection/CanvasSection.tsx
@@ -159,7 +159,7 @@ export function CanvasSection() {
       if (isNormalPreviewNew) {
         // Draw normal preview
         canvasOriginalPreviewDataUrl.current = ctx2d.canvas.toDataURL();
-        drawNormal({ctx2d, ctx2dNormal: ctx2d});
+        drawNormal(ctx2d);
       } else {
         // Restore original preview
         const dataUrl = canvasOriginalPreviewDataUrl.current;
diff --git a/src/components/pages/Generator/CanvasSection/utils/drawInvert.ts b/src/components/pages/Generator/CanvasSection/utils/drawInvert.ts
index 3a122c0..fc7bcae 100644
--- a/src/components/pages/Generator/CanvasSection/utils/drawInvert.ts
+++ b/src/components/pages/Generator/CanvasSection/utils/drawInvert.ts
@@ -1,8 +1,5 @@
 import {getCanvasDimensions} from './getCanvasDimensions';
 
-/**
- * Inverts canvas.
- */
 export const drawInvert = (ctx2d: CanvasRenderingContext2D): void => {
   const {w, h} = getCanvasDimensions(ctx2d);
 
diff --git a/src/components/pages/Generator/CanvasSection/utils/drawNormal.ts b/src/components/pages/Generator/CanvasSection/utils/drawNormal.ts
index 62a5073..0b7fecd 100644
--- a/src/components/pages/Generator/CanvasSection/utils/drawNormal.ts
+++ b/src/components/pages/Generator/CanvasSection/utils/drawNormal.ts
@@ -1,21 +1,10 @@
 import {getCanvasDimensions} from './getCanvasDimensions';
 
-/**
- * Draws the normal map.
- * - "ctx2d" is the canvas context to read from.
- * - "ctx2dNormal" is the canvas context to write to.
- */
-export const drawNormal = ({
-  ctx2d,
-  ctx2dNormal,
-}: {
-  ctx2d: CanvasRenderingContext2D;
-  ctx2dNormal: CanvasRenderingContext2D;
-}): void => {
+export const drawNormal = (ctx2d: CanvasRenderingContext2D): void => {
   const {w, h} = getCanvasDimensions(ctx2d);
 
   const source = ctx2d.getImageData(0, 0, w, h);
-  const destination = ctx2dNormal.createImageData(w, h);
+  const destination = ctx2d.createImageData(w, h);
 
   for (let i = 0, l = w * h * 4; i < l; i += 4) {
     let x1;
@@ -51,5 +40,5 @@ export const drawNormal = ({
     destination.data[i + 3] = 255;
   }
 
-  ctx2dNormal.putImageData(destination, 0, 0);
+  ctx2d.putImageData(destination, 0, 0);
 };

From 333b6a6b8cf1bc6d150117cc910a29921a904f0a Mon Sep 17 00:00:00 2001
From: George Satellite <lunaerxs@gmail.com>
Date: Wed, 15 Nov 2023 00:13:46 +0200
Subject: [PATCH 3/4] v0.0.1-alpha.4

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index f80121b..58d3bff 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "displacementx",
-  "version": "0.0.1-alpha.3",
+  "version": "0.0.1-alpha.4",
   "scripts": {
     "dev": "next dev",
     "build": "next build",

From e3af26d69a6864c857babaa74ab67844234959d7 Mon Sep 17 00:00:00 2001
From: George Satellite <lunaerxs@gmail.com>
Date: Wed, 15 Nov 2023 00:30:59 +0200
Subject: [PATCH 4/4] Download: include res + datetime in file name

---
 .../Generator/CanvasSection/CanvasSection.tsx    | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/components/pages/Generator/CanvasSection/CanvasSection.tsx b/src/components/pages/Generator/CanvasSection/CanvasSection.tsx
index 95936aa..618277a 100644
--- a/src/components/pages/Generator/CanvasSection/CanvasSection.tsx
+++ b/src/components/pages/Generator/CanvasSection/CanvasSection.tsx
@@ -116,7 +116,21 @@ export function CanvasSection() {
     const canvas = canvasRef.current;
     if (!canvas) return;
 
-    saveImage({canvas, fileName: 'displacementx-gen'});
+    const dateTimeString = (): string => {
+      const now = new Date();
+      const y = now.getFullYear();
+      const m = String(now.getMonth() + 1).padStart(2, '0'); // Months are zero-based
+      const d = String(now.getDate()).padStart(2, '0');
+      const hh = String(now.getHours()).padStart(2, '0');
+      const mm = String(now.getMinutes()).padStart(2, '0');
+      const ss = String(now.getSeconds()).padStart(2, '0');
+      return `${y}-${m}-${d}-${hh}${mm}${ss}`;
+    };
+
+    saveImage({
+      canvas,
+      fileName: `DisplacementX_${width}x${height}_${dateTimeString()}`,
+    });
   };
 
   const onIs8kChange = (is8k: boolean) => {