84 lines
2.4 KiB
TypeScript
84 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
Accordion,
|
|
Button,
|
|
Checkbox,
|
|
Label,
|
|
TextInput,
|
|
ToggleSwitch,
|
|
} from "flowbite-react";
|
|
import { useContext, useState } from "react";
|
|
|
|
import {
|
|
MapSceneContext,
|
|
MapSceneContextType,
|
|
} from "../providers/map-scene-provider";
|
|
import { Mesh, MeshStandardMaterial } from "three";
|
|
|
|
export function Form() {
|
|
const [enabled, setEnabled] = useState<boolean>(true);
|
|
const { mapScene } = useContext(MapSceneContext) as MapSceneContextType;
|
|
|
|
function handleChange() {
|
|
if (!mapScene) return;
|
|
|
|
mapScene.toggleClippingBox();
|
|
setEnabled(!enabled);
|
|
}
|
|
|
|
function handleCheckboxChange(name: string) {
|
|
if (!mapScene) return;
|
|
|
|
const mesh = mapScene.model.getObjectByName(name);
|
|
if (mesh) {
|
|
mesh.visible = !mesh.visible;
|
|
}
|
|
}
|
|
|
|
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}
|
|
/>
|
|
<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>
|
|
</Accordion>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|