From 9e68e0495bcfa1c4dca99bca3e261875903eb5fa Mon Sep 17 00:00:00 2001
From: Misode <misoloo64@gmail.com>
Date: Mon, 12 Jun 2023 03:25:35 +0200
Subject: [PATCH] Add offset input field to density previews

---
 .../components/previews/DensityFunctionPreview.tsx  | 13 +++++++++----
 src/locales/en.json                                 |  1 +
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/app/components/previews/DensityFunctionPreview.tsx b/src/app/components/previews/DensityFunctionPreview.tsx
index f93b30af..6f57af2c 100644
--- a/src/app/components/previews/DensityFunctionPreview.tsx
+++ b/src/app/components/previews/DensityFunctionPreview.tsx
@@ -41,6 +41,7 @@ export const DensityFunctionPreview = ({ data, shown }: PreviewProps) => {
 	const imageData = useRef<ImageData>()
 	const ctx = useRef<CanvasRenderingContext2D>()
 	const [focused, setFocused] = useState<string[]>([])
+	const [offset, setOffset] = useState<number>(0)
 	const [colormap, setColormap] = useState<ColormapType>(Store.getColormap() ?? 'viridis')
 
 	const onSetup2D = useCallback((canvas: HTMLCanvasElement) => {
@@ -59,7 +60,7 @@ export const DensityFunctionPreview = ({ data, shown }: PreviewProps) => {
 		const colorPicker = (t: number) => colormapFn(t <= 0.5 ? t - 0.08 : t + 0.08)
 		let limit = 0.01
 		iterateWorld2D(imageData.current, transform, (x, y) => {
-			const density = df.compute(topDown ? { x, y: 0, z: y } : { x, y, z: 0 })
+			const density = df.compute(topDown ? { x, y: offset, z: y } : { x, y, z: offset })
 			limit = Math.max(limit, Math.min(1, Math.abs(density)))
 			return density
 		}, (density) => {
@@ -67,16 +68,16 @@ export const DensityFunctionPreview = ({ data, shown }: PreviewProps) => {
 			return [color[0] * 256, color[1] * 256, color[2] * 256]
 		})
 		ctx.current.putImageData(imageData.current, 0, 0)
-	}, [mode, df, colormap])
+	}, [mode, df, offset, colormap])
 	const onHover2D = useCallback((pos: [number, number] | undefined) => {
 		if (!pos || !df) {
 			setFocused([])
 		} else {
 			const [x, y] = pos
-			const output = df.compute(topDown ? { x, y: 0, z: -y } : { x: x, y: -y, z: 0 })
+			const output = df.compute(topDown ? { x, y: offset, z: -y } : { x: x, y: -y, z: offset })
 			setFocused([output.toPrecision(3), `X=${x} ${topDown ? 'Z' : 'Y'}=${-y}`])
 		}
-	}, [mode, df])
+	}, [mode, df, offset])
 
 	// === 3D ===
 	const renderer = useRef<VoxelRenderer | undefined>(undefined)
@@ -125,6 +126,10 @@ export const DensityFunctionPreview = ({ data, shown }: PreviewProps) => {
 			</> : <>
 				<ColormapSelector value={colormap} onChange={setColormap} />
 			</>}
+			{!voxelMode && <div class="btn btn-input" onClick={e => e.stopPropagation()}>
+				<span>{locale(topDown ? 'y' : 'z')}</span>
+				<NumberInput value={offset} onChange={setOffset} />
+			</div>}
 			<BtnMenu icon="package">
 				{MODES.map(m => <Btn label={locale(`mode.${m}`)} active={mode == m} onClick={() => setMode(m)} />)}
 			</BtnMenu>
diff --git a/src/locales/en.json b/src/locales/en.json
index 664ca374..44fe933b 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -266,6 +266,7 @@
   "worldgen/world_preset": "World Preset",
   "worldgen/flat_level_generator_preset": "Flat World Preset",
   "y": "Y",
+  "z": "Z",
   "zoom_in": "Zoom in",
   "zoom_in_limit": "Cannot zoom in further\n1 pixel = 4 blocks",
   "zoom_out": "Zoom out"