mirror of
https://github.com/duckietm/Nitro-V3.git
synced 2026-06-20 07:26:19 +00:00
🆙 Init V3
This commit is contained in:
DuckieTM
@@ -0,0 +1,184 @@
|
||||
import { FC, useState } from 'react';
|
||||
import { FaCaretLeft, FaCaretRight } from 'react-icons/fa';
|
||||
import ReactSlider from 'react-slider';
|
||||
import { LocalizeText } from '../../../api';
|
||||
import { Column, Flex, Grid, LayoutGridItem, Text } from '../../../common';
|
||||
import { useFloorplanEditorContext } from '../FloorplanEditorContext';
|
||||
import { COLORMAP, FloorAction } from '../common/Constants';
|
||||
import { FloorplanEditor } from '../common/FloorplanEditor';
|
||||
|
||||
const MIN_WALL_HEIGHT: number = 0;
|
||||
const MAX_WALL_HEIGHT: number = 16;
|
||||
|
||||
const MIN_FLOOR_HEIGHT: number = 0;
|
||||
const MAX_FLOOR_HEIGHT: number = 26;
|
||||
|
||||
export const FloorplanOptionsView: FC<{}> = props => {
|
||||
const { visualizationSettings = null, setVisualizationSettings = null } = useFloorplanEditorContext();
|
||||
const [floorAction, setFloorAction] = useState(FloorAction.SET);
|
||||
const [floorHeight, setFloorHeight] = useState(0);
|
||||
const [isSquareSelectMode, setIsSquareSelectMode] = useState(false);
|
||||
|
||||
const selectAction = (action: number) => {
|
||||
setFloorAction(action);
|
||||
FloorplanEditor.instance.actionSettings.currentAction = action;
|
||||
};
|
||||
|
||||
const toggleSquareSelectMode = () => {
|
||||
setIsSquareSelectMode(prev => {
|
||||
const newValue = !prev;
|
||||
FloorplanEditor.instance.setSquareSelectMode(newValue);
|
||||
return newValue;
|
||||
});
|
||||
};
|
||||
|
||||
const changeDoorDirection = () => {
|
||||
setVisualizationSettings(prevValue => {
|
||||
const newValue = { ...prevValue };
|
||||
newValue.entryPointDir = newValue.entryPointDir < 7 ? newValue.entryPointDir + 1 : 0;
|
||||
return newValue;
|
||||
});
|
||||
};
|
||||
|
||||
const onFloorHeightChange = (value: number) => {
|
||||
if (isNaN(value) || value <= 0) value = 0;
|
||||
if (value > MAX_FLOOR_HEIGHT) value = MAX_FLOOR_HEIGHT;
|
||||
setFloorHeight(value);
|
||||
FloorplanEditor.instance.actionSettings.currentHeight = value.toString(36);
|
||||
};
|
||||
|
||||
const onFloorThicknessChange = (value: number) => {
|
||||
setVisualizationSettings(prevValue => ({
|
||||
...prevValue,
|
||||
thicknessFloor: value,
|
||||
}));
|
||||
};
|
||||
|
||||
const onWallThicknessChange = (value: number) => {
|
||||
setVisualizationSettings(prevValue => ({
|
||||
...prevValue,
|
||||
thicknessWall: value,
|
||||
}));
|
||||
};
|
||||
|
||||
const onWallHeightChange = (value: number) => {
|
||||
if (isNaN(value) || value <= 0) value = MIN_WALL_HEIGHT;
|
||||
if (value > MAX_WALL_HEIGHT) value = MAX_WALL_HEIGHT;
|
||||
setVisualizationSettings(prevValue => ({
|
||||
...prevValue,
|
||||
wallHeight: value,
|
||||
}));
|
||||
};
|
||||
|
||||
const increaseWallHeight = () => {
|
||||
onWallHeightChange(Math.min(visualizationSettings.wallHeight + 1, MAX_WALL_HEIGHT));
|
||||
};
|
||||
|
||||
const decreaseWallHeight = () => {
|
||||
onWallHeightChange(Math.max(visualizationSettings.wallHeight - 1, MIN_WALL_HEIGHT));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col">
|
||||
<Grid>
|
||||
<Column gap={1} size={5}>
|
||||
<Text bold>{LocalizeText('floor.plan.editor.draw.mode')}</Text>
|
||||
<Flex gap={3}>
|
||||
<div className="flex gap-1">
|
||||
<LayoutGridItem itemActive={floorAction === FloorAction.SET} onClick={() => selectAction(FloorAction.SET)}>
|
||||
<i className="nitro-icon icon-set-tile" />
|
||||
</LayoutGridItem>
|
||||
<LayoutGridItem itemActive={floorAction === FloorAction.UNSET} onClick={() => selectAction(FloorAction.UNSET)}>
|
||||
<i className="nitro-icon icon-unset-tile" />
|
||||
</LayoutGridItem>
|
||||
</div>
|
||||
<div className="flex gap-1">
|
||||
<LayoutGridItem itemActive={floorAction === FloorAction.UP} onClick={() => selectAction(FloorAction.UP)}>
|
||||
<i className="nitro-icon icon-increase-height" />
|
||||
</LayoutGridItem>
|
||||
<LayoutGridItem itemActive={floorAction === FloorAction.DOWN} onClick={() => selectAction(FloorAction.DOWN)}>
|
||||
<i className="nitro-icon icon-decrease-height" />
|
||||
</LayoutGridItem>
|
||||
<LayoutGridItem itemActive={floorAction === FloorAction.DOOR} onClick={() => selectAction(FloorAction.DOOR)}>
|
||||
<i className="nitro-icon icon-set-door" />
|
||||
</LayoutGridItem>
|
||||
<LayoutGridItem onClick={() => FloorplanEditor.instance.toggleSelectAll()}>
|
||||
<i className={`nitro-icon ${floorAction === FloorAction.UNSET ? 'icon-set-deselect' : 'icon-set-select'}`} />
|
||||
</LayoutGridItem>
|
||||
<LayoutGridItem itemActive={isSquareSelectMode} onClick={toggleSquareSelectMode}>
|
||||
<i className={`nitro-icon ${isSquareSelectMode ? 'icon-set-active-squaresselect' : 'icon-set-squaresselect'}`} />
|
||||
</LayoutGridItem>
|
||||
</div>
|
||||
</Flex>
|
||||
</Column>
|
||||
<Column alignItems="center" size={4}>
|
||||
<Text bold>{LocalizeText('floor.plan.editor.enter.direction')}</Text>
|
||||
<i
|
||||
className={`nitro-icon icon-door-direction-${visualizationSettings.entryPointDir} cursor-pointer`}
|
||||
onClick={changeDoorDirection}
|
||||
/>
|
||||
</Column>
|
||||
<Column size={3}>
|
||||
<Text bold>{LocalizeText('floor.editor.wall.height')}</Text>
|
||||
<div className="flex items-center gap-1">
|
||||
<FaCaretLeft className="cursor-pointer fa-icon" onClick={decreaseWallHeight} />
|
||||
<input
|
||||
className="min-h-[calc(1.5em+.5rem+2px)] px-[.5rem] py-[.25rem] rounded-[.2rem] form-control-sm quantity-input"
|
||||
type="number"
|
||||
value={visualizationSettings.wallHeight}
|
||||
onChange={event => onWallHeightChange(event.target.valueAsNumber)}
|
||||
/>
|
||||
<FaCaretRight className="cursor-pointer fa-icon" onClick={increaseWallHeight} />
|
||||
</div>
|
||||
</Column>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Column size={6}>
|
||||
<Text bold>{LocalizeText('floor.plan.editor.tile.height')}: {floorHeight}</Text>
|
||||
<ReactSlider
|
||||
className="nitro-slider"
|
||||
max={MAX_FLOOR_HEIGHT}
|
||||
min={MIN_FLOOR_HEIGHT}
|
||||
renderThumb={({ key, style, ...rest }, state) => (
|
||||
<div
|
||||
key={key} // Explicitly pass key directly
|
||||
style={{ backgroundColor: `#${COLORMAP[state.valueNow.toString(33)]}`, ...style }}
|
||||
{...rest}
|
||||
>
|
||||
{state.valueNow}
|
||||
</div>
|
||||
)}
|
||||
step={1}
|
||||
value={floorHeight}
|
||||
onChange={value => onFloorHeightChange(value)}
|
||||
/>
|
||||
</Column>
|
||||
<Column size={6}>
|
||||
<Text bold>{LocalizeText('floor.plan.editor.room.options')}</Text>
|
||||
<Flex className="items-center">
|
||||
<select
|
||||
className="min-h-[calc(1.5em+.5rem+2px)] px-[.5rem] py-[.25rem] rounded-[.2rem] form-control-sm"
|
||||
value={visualizationSettings.thicknessWall}
|
||||
onChange={event => onWallThicknessChange(parseInt(event.target.value))}
|
||||
>
|
||||
<option value={0}>{LocalizeText('navigator.roomsettings.wall_thickness.thinnest')}</option>
|
||||
<option value={1}>{LocalizeText('navigator.roomsettings.wall_thickness.thin')}</option>
|
||||
<option value={2}>{LocalizeText('navigator.roomsettings.wall_thickness.normal')}</option>
|
||||
<option value={3}>{LocalizeText('navigator.roomsettings.wall_thickness.thick')}</option>
|
||||
</select>
|
||||
<select
|
||||
className="min-h-[calc(1.5em+.5rem+2px)] px-[.5rem] py-[.25rem] rounded-[.2rem] form-control-sm"
|
||||
value={visualizationSettings.thicknessFloor}
|
||||
onChange={event => onFloorThicknessChange(parseInt(event.target.value))}
|
||||
>
|
||||
<option value={0}>{LocalizeText('navigator.roomsettings.floor_thickness.thinnest')}</option>
|
||||
<option value={1}>{LocalizeText('navigator.roomsettings.floor_thickness.thin')}</option>
|
||||
<option value={2}>{LocalizeText('navigator.roomsettings.floor_thickness.normal')}</option>
|
||||
<option value={3}>{LocalizeText('navigator.roomsettings.floor_thickness.thick')}</option>
|
||||
</select>
|
||||
</Flex>
|
||||
</Column>
|
||||
</Grid>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user