fuhtho/3d-viewer
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Finish slicing box and UI

Browse source
This commit is contained in:
Fuhrmann 2025-03-07 10:09:38 +01:00
parent 8227b4141a
commit 213537508c
19 changed files with 965 additions and 1361 deletions
Download patch file Download diff file Expand all files Collapse all files

207
app/components/Form.tsx
View file

@ -1,36 +1,123 @@
"use client";
import {
Accordion,
Button,
Checkbox,
Label,
TextInput,
ToggleSwitch,
} from "flowbite-react";
import { useContext, useState } from "react";
import { ReactNode, useContext, useRef, useState } from "react";
import {
MapSceneContext,
MapSceneContextType,
} from "../providers/map-scene-provider";
SceneViewContext,
SceneViewContextType,
} from "../providers/scene-view-provider";
import { Mesh, MeshStandardMaterial } from "three";
function Toggle({
title,
onChange,
defaultChecked,
}: {
title: string;
onChange: () => void;
defaultChecked?: boolean;
}) {
return (
<label className="inline-flex items-center cursor-pointer">
<input
type="checkbox"
value=""
className="sr-only peer"
onChange={onChange}
defaultChecked={defaultChecked ? true : false}
/>
<div className="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600 dark:peer-checked:bg-blue-600"></div>
<span className="ms-3 text-sm font-medium text-gray-900 dark:text-gray-300">
{title}
</span>
</label>
);
}
function Accordion({
children,
title,
}: {
children?: ReactNode;
title: string;
}) {
const [expanded, setExpanded] = useState<boolean>(true);
const accordionBodyRef = useRef<HTMLDivElement>(null);
function handleClick() {
if (!accordionBodyRef.current) return;
accordionBodyRef.current.classList.toggle("hidden");
setExpanded(!expanded);
}
return (
<div>
<h2 id="accordion-collapse-heading-1">
<button
type="button"
className="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-gray-500 border border-b-0 border-gray-200 rounded-t-xl focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 gap-3 hover:cursor-pointer"
data-accordion-target="#accordion-collapse-body-1"
aria-expanded={expanded ? "true" : "false"}
aria-controls="accordion-collapse-body-1"
onClick={handleClick}
>
<span>{title}</span>
<svg
data-accordion-icon
className="w-3 h-3 rotate-180 shrink-0"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 10 6"
>
<path
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M9 5 5 1 1 5"
/>
</svg>
</button>
</h2>
<div
id="accordion-collapse-body-1"
ref={accordionBodyRef}
aria-labelledby="accordion-collapse-heading-1"
>
<div className="p-5 border border-gray-200 dark:border-gray-700 dark:bg-gray-900">
{children}
</div>
</div>
</div>
);
}
export function Form() {
const [enabled, setEnabled] = useState<boolean>(true);
const { mapScene } = useContext(MapSceneContext) as MapSceneContextType;
const { sceneView } = useContext(SceneViewContext) as SceneViewContextType;
function handleChange() {
if (!mapScene) return;
if (!sceneView) return;
mapScene.toggleClippingBox();
setEnabled(!enabled);
sceneView.toggleClippingBox();
}
function handleChangeCG() {
if (!sceneView) return;
sceneView.toggleCoordinateGrid();
}
function handleChangeWireframe() {
if (!sceneView) return;
sceneView.toggleWireFrame();
}
function handleCheckboxChange(name: string) {
if (!mapScene) return;
if (!sceneView) return;
const mesh = mapScene.model.getObjectByName(name);
const mesh = sceneView.model.getObjectByName(name);
if (mesh) {
mesh.visible = !mesh.visible;
}
@ -39,44 +126,52 @@ export function Form() {
return (
<div className="w-full flex flex-col gap-2 overflow-y-auto">
<div className="w-full flex flex-col gap-3 p-4 border border-gray-200 rounded shadow">
<ToggleSwitch
checked={enabled}
label="Toggle Slicing Box"
onChange={handleChange}
<Toggle title="Slicing Box" onChange={handleChange} />
<Toggle
title="Coordinate grid"
onChange={handleChangeCG}
defaultChecked
/>
<Accordion>
<Accordion.Panel>
<Accordion.Title>Layers</Accordion.Title>
<Accordion.Content>
<div className="mt-2">
{mapScene?.model.children.map((child) => {
const key = `toggle-visibility-${child.name}`;
const color = `#${(
(child as Mesh).material as MeshStandardMaterial
).color.getHexString()}`;
return (
<div key={key} className="flex items-center ml-2">
<span
className="inline-block w-4 h-4"
style={{
backgroundColor: color,
}}
></span>
<Checkbox
id={key}
defaultChecked
onChange={() => handleCheckboxChange(child.name)}
className="ml-2"
/>
<Label htmlFor={key} className="ml-2">
{child.name}
</Label>
</div>
);
})}
</div>
</Accordion.Content>
</Accordion.Panel>
<Toggle title="Wireframe" onChange={handleChangeWireframe} />
<Accordion title="Layers">
{
<div className="flex flex-col gap-2">
{sceneView?.model.children.map((child) => {
const key = `toggle-visibility-${child.name}`;
const color = `#${(
(child as Mesh).material as MeshStandardMaterial
).color.getHexString()}`;
const visible = (child as Mesh).visible;
return (
<div
key={key}
className="flex items-center justify-start gap-2.5 border-b border-gray-200 py-1"
>
<span
className="inline-block w-5 h-5 flex-none rounded"
style={{
backgroundColor: color,
}}
></span>
<input
id={key}
type="checkbox"
onChange={() => handleCheckboxChange(child.name)}
className="hover:cursor-pointer"
defaultChecked={visible ? true : false}
/>
<label
htmlFor={key}
className="antialiased font-light text-gray-700"
>
{child.name}
</label>
</div>
);
})}
</div>
}
</Accordion>
</div>
</div>