From 1091603955f11db7ec5fb900b5d540e90aa83ba0 Mon Sep 17 00:00:00 2001
From: kettek <kts@kettek.net>
Date: Wed, 8 Jan 2025 22:33:36 -0800
Subject: [PATCH] Add experimental 3D clipping view

---
 frontend/src/App.svelte                    |  9 +++++++++
 frontend/src/components/3d/ClipView.svelte | 17 ++++++++++++++++
 frontend/src/components/3d/Scene.svelte    | 23 +++++++++++++++-------
 frontend/src/sections/Clip3D.svelte        | 16 +++++++++++++++
 frontend/src/stores/editor3d.ts            | 16 +++++++++++++++
 5 files changed, 74 insertions(+), 7 deletions(-)
 create mode 100644 frontend/src/components/3d/ClipView.svelte
 create mode 100644 frontend/src/sections/Clip3D.svelte

diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte
index edb0ef4..96abc7b 100644
--- a/frontend/src/App.svelte
+++ b/frontend/src/App.svelte
@@ -65,6 +65,7 @@
   import PalettePopup from './components/PalettePopup.svelte'
   import FileUnsaved from './components/FileUnsaved.svelte'
   import FilesUnsaved from './components/FilesUnsaved.svelte'
+  import Clip3D from './sections/Clip3D.svelte'
 
   let is3D: boolean = true
 
@@ -148,6 +149,8 @@
   let savingFileIndex: number = -1
   let showUnsavedFilesModal: boolean = false
 
+  let show3DClipView: boolean = false
+
   function selectFile(file: LoadedFile, index: number, id: number) {
     if (index < 0 || index >= fileStates.length()) return
 
@@ -643,6 +646,7 @@
     <OverflowMenu size="sm">
       <div slot="menu">Windows</div>
       <OverflowMenuItem text="Preview" on:click={() => (showPreview = true)} />
+      <OverflowMenuItem text="3D Clip View" on:click={() => (show3DClipView = true)} />
       <OverflowMenuItem hasDivider>
         <Checkbox on:click={(e) => e.stopPropagation()} bind:checked={$editor2DSettings.minifiedLeftPanel} labelText="Minified Palettes Panel" />
       </OverflowMenuItem>
@@ -881,6 +885,11 @@
         <StackPreview shronked={previewUseMini} />
       </FloatingPanel>
     {/if}
+    {#if show3DClipView}
+      <FloatingPanel label="3D Clip View" noPadding bind:open={show3DClipView} id="3d-clip-view">
+        <Clip3D />
+      </FloatingPanel>
+    {/if}
     {#if is3D && showRotate && $toolSettings.current === toolVoxelBoxSelection}
       <FloatingPanel label="3D Resize" noPadding bind:open={showRotate} id="3d-resize">
         <Selection3D />
diff --git a/frontend/src/components/3d/ClipView.svelte b/frontend/src/components/3d/ClipView.svelte
new file mode 100644
index 0000000..9f30b30
--- /dev/null
+++ b/frontend/src/components/3d/ClipView.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { T } from '@threlte/core'
+  import { BoxGeometry, EdgesGeometry } from 'three'
+
+  export let offset: [number, number, number] = [0, 0, 0]
+  export let x: number = 0
+  export let y: number = 0
+  export let z: number = 0
+  export let w: number = 1
+  export let h: number = 1
+  export let d: number = 1
+</script>
+
+<T.LineSegments position={[x + offset[0] + (w + 1) / 2, y + offset[1] + (h + 1) / 2, z + offset[2] + (d + 1) / 2]} geometry={new EdgesGeometry(new BoxGeometry(w, h, d))}>
+  <T.EdgesGeometry args={[new BoxGeometry(w + 1, h + 1, d + 1)]} />
+  <T.LineBasicMaterial />
+</T.LineSegments>
diff --git a/frontend/src/components/3d/Scene.svelte b/frontend/src/components/3d/Scene.svelte
index 756ba3f..074ae49 100644
--- a/frontend/src/components/3d/Scene.svelte
+++ b/frontend/src/components/3d/Scene.svelte
@@ -24,6 +24,7 @@
   import { isKeyActive } from '../Shortcuts.svelte'
   import OptimizedRender from './OptimizedRender.svelte'
   import Point from './Point.svelte'
+  import ClipView from './ClipView.svelte'
 
   export let file: LoadedFile
   export let palette: Palette | undefined
@@ -426,13 +427,17 @@
 {#if $file.frame}
   <T.Group>
     {#each $file.frame.slices as slice, y}
-      {#each $file.canvas.getPixels(slice.x, slice.y, $file.frameWidth, $file.frameHeight) as pixel, index}
-        {#if pixel !== 0}
-          {@const x = index % $file.frameWidth}
-          {@const z = Math.floor(index / $file.frameWidth)}
-          <Voxel hoverScale={$editor3DSettings.hoverScale} hideTransparent={$editor3DSettings.hideTransparent} ignoreAlpha={$editor3DSettings.ignoreAlpha} position={[x, y, z]} offset={[-$file.frameWidth / 2, 0, -$file.frameHeight / 2]} color={$palette ? $palette.swatches[pixel] : $file.canvas.getPaletteColor(pixel)} on:hover={onVoxelHover} on:move={onVoxelMove} on:leave={onVoxelLeave} on:click={onVoxelClick} ignoreEvents={cursorGrabbed} />
-        {/if}
-      {/each}
+      {#if !$editor3DSettings.useClipping || (y >= $editor3DSettings.clipY && y <= $editor3DSettings.clipY + $editor3DSettings.clipH)}
+        {#each $file.canvas.getPixels(slice.x, slice.y, $file.frameWidth, $file.frameHeight) as pixel, index}
+          {#if pixel !== 0}
+            {@const x = index % $file.frameWidth}
+            {@const z = Math.floor(index / $file.frameWidth)}
+            {#if !$editor3DSettings.useClipping || (x >= $editor3DSettings.clipX && x <= $editor3DSettings.clipX + $editor3DSettings.clipW && z >= $editor3DSettings.clipZ && z <= $editor3DSettings.clipZ + $editor3DSettings.clipD)}
+              <Voxel hoverScale={$editor3DSettings.hoverScale} hideTransparent={$editor3DSettings.hideTransparent} ignoreAlpha={$editor3DSettings.ignoreAlpha} position={[x, y, z]} offset={[-$file.frameWidth / 2, 0, -$file.frameHeight / 2]} color={$palette ? $palette.swatches[pixel] : $file.canvas.getPaletteColor(pixel)} on:hover={onVoxelHover} on:move={onVoxelMove} on:leave={onVoxelLeave} on:click={onVoxelClick} ignoreEvents={cursorGrabbed} />
+            {/if}
+          {/if}
+        {/each}
+      {/if}
     {/each}
   </T.Group>
 {/if}
@@ -468,6 +473,10 @@
   <T.MeshBasicMaterial transparent={true} opacity={0.2} color={0xff0000} side={THREE.DoubleSide} />
 </T.Mesh>
 
+{#if $editor3DSettings.useClipping}
+  <ClipView x={$editor3DSettings.clipX} y={$editor3DSettings.clipY} z={$editor3DSettings.clipZ} w={$editor3DSettings.clipW} h={$editor3DSettings.clipH} d={$editor3DSettings.clipD} offset={[-$file.frameWidth / 2, 0, -$file.frameHeight / 2]} />
+{/if}
+
 {#if $toolSettings.current === toolVoxelCursor || $toolSettings.current === toolVoxelBoxSelection || pasting.length > 0}
   <Cursor position={$file.threeDCursor1} on:move={onCursorChange} on:grab={onCursorGrab} on:release={onCursorRelease} offset={[-$file.frameWidth / 2 + xOffset, 0, -$file.frameHeight / 2 + yOffset]} />
 {/if}
diff --git a/frontend/src/sections/Clip3D.svelte b/frontend/src/sections/Clip3D.svelte
new file mode 100644
index 0000000..a8d1014
--- /dev/null
+++ b/frontend/src/sections/Clip3D.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { Checkbox } from 'carbon-components-svelte'
+  import { editor3DSettings } from '../stores/editor3d'
+  import Input from '../components/common/Input.svelte'
+</script>
+
+<main>
+  <Checkbox labelText="Clip View" bind:checked={$editor3DSettings.useClipping}></Checkbox>
+  <Input labelWidth="3" label="X" type="number" size="small" width={4} showSpinner bind:value={$editor3DSettings.clipX} />
+  <Input labelWidth="3" label="Y" type="number" size="small" width={4} showSpinner bind:value={$editor3DSettings.clipY} />
+  <Input labelWidth="3" label="Z" type="number" size="small" width={4} showSpinner bind:value={$editor3DSettings.clipZ} />
+  <hr />
+  <Input labelWidth="3" label="H" type="number" size="small" width={4} showSpinner bind:value={$editor3DSettings.clipH} />
+  <Input labelWidth="3" label="W" type="number" size="small" width={4} showSpinner bind:value={$editor3DSettings.clipW} />
+  <Input labelWidth="3" label="D" type="number" size="small" width={4} showSpinner bind:value={$editor3DSettings.clipD} />
+</main>
diff --git a/frontend/src/stores/editor3d.ts b/frontend/src/stores/editor3d.ts
index 389a567..c1b3900 100644
--- a/frontend/src/stores/editor3d.ts
+++ b/frontend/src/stores/editor3d.ts
@@ -19,6 +19,14 @@ type Editor3DSettings = {
   showCursor: boolean
   // Voxels
   hoverScale: boolean
+  // Clipping
+  useClipping: boolean
+  clipX: number
+  clipY: number
+  clipZ: number
+  clipW: number
+  clipH: number
+  clipD: number
 }
 
 export const editor3DSettings = makeLocalStorageStore<Editor3DSettings>('editor3d', {
@@ -40,4 +48,12 @@ export const editor3DSettings = makeLocalStorageStore<Editor3DSettings>('editor3
   showCursor: true,
   // Voxels
   hoverScale: true,
+  // Clipping
+  useClipping: false,
+  clipX: 0,
+  clipY: 0,
+  clipZ: 0,
+  clipW: 0,
+  clipH: 0,
+  clipD: 0,
 })