82 lines
2.3 KiB
TypeScript
82 lines
2.3 KiB
TypeScript
|
import React, { useState } from "react";
|
||
|
|
import InputRange from "../../../ui/inputs/InputRange";
|
||
|
|
import InputToggle from "../../../ui/inputs/InputToggle";
|
||
|
|
import { AI_Icon } from "../../../icons/ExportCommonIcons";
|
||
|
|
import LabeledButton from "../../../ui/inputs/LabledButton";
|
||
|
|
|
||
|
|
const GlobalProperties: React.FC = () => {
|
||
|
|
const [limitDistance, setLimitDistance] = useState(false);
|
||
|
|
const [distance, setDistance] = useState<number>(5);
|
||
|
|
|
||
|
|
const [limitGridDistance, setLimitGridDistance] = useState(false);
|
||
|
|
const [gridDistance, setGridDistance] = useState<number>(5);
|
||
|
|
|
||
|
|
function optimizeScene() {
|
||
|
|
setLimitDistance(true);
|
||
|
|
setDistance(5);
|
||
|
|
}
|
||
|
|
|
||
|
|
function updateDistance(value: number) {
|
||
|
|
setDistance(value);
|
||
|
|
}
|
||
|
|
|
||
|
|
function updateGridDistance(value: number) {
|
||
|
|
setGridDistance(value);
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="global-properties-container">
|
||
|
|
<div className="header">Environment</div>
|
||
|
|
<div className="optimize-button" onClick={optimizeScene}>
|
||
|
|
<AI_Icon />
|
||
|
|
Optimize
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="split"></div>
|
||
|
|
|
||
|
|
<InputToggle inputKey="1" label="Roof Visibility" />
|
||
|
|
<InputToggle inputKey="2" label="Wall Visibility" />
|
||
|
|
<InputToggle inputKey="3" label="Shadows Visibility" />
|
||
|
|
<LabeledButton label="Reset Camera" onClick={() => {}} value="Reset"/>
|
||
|
|
|
||
|
|
<div className="split"></div>
|
||
|
|
|
||
|
|
<InputToggle
|
||
|
|
inputKey="4"
|
||
|
|
label="Limit Render Distance"
|
||
|
|
value={limitDistance}
|
||
|
|
onClick={() => {
|
||
|
|
setLimitDistance(!limitDistance);
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
<InputRange
|
||
|
|
label="Distance"
|
||
|
|
disabled={!limitDistance}
|
||
|
|
value={distance}
|
||
|
|
key={"5"}
|
||
|
|
onChange={(value: number) => updateDistance(value)}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<div className="split"></div>
|
||
|
|
|
||
|
|
<InputToggle
|
||
|
|
inputKey="6"
|
||
|
|
label="Display Grid"
|
||
|
|
value={limitGridDistance}
|
||
|
|
onClick={() => {
|
||
|
|
setLimitGridDistance(!limitGridDistance);
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
<InputRange
|
||
|
|
label="Tile Distance"
|
||
|
|
disabled={!limitGridDistance}
|
||
|
|
value={gridDistance}
|
||
|
|
key={"7"}
|
||
|
|
onChange={(value: number) => updateGridDistance(value)}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default GlobalProperties;
|