mirror of
https://github.com/duckietm/Nitro-V3.git
synced 2026-06-19 23:16:21 +00:00
🆙 Start working on floorplan
This commit is contained in:
duckietm
@@ -2,10 +2,10 @@ 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 { Column, Flex, LayoutGridItem, Text } from '../../../common';
|
||||
import { COLORMAP, FloorAction } from '@nitrots/nitro-renderer';
|
||||
import { FloorplanEditor } from '@nitrots/nitro-renderer';
|
||||
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;
|
||||
@@ -13,172 +13,197 @@ 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);
|
||||
export const FloorplanOptionsView: FC<{}> = props =>
|
||||
{
|
||||
const { visualizationSettings = null, setVisualizationSettings = null } = useFloorplanEditorContext();
|
||||
const [ floorAction, setFloorAction ] = useState(FloorAction.SET);
|
||||
const [ floorHeight, setFloorHeight ] = useState(0);
|
||||
const [ isSquareSelectMode, setSquareSelectMode ] = useState(false);
|
||||
|
||||
const selectAction = (action: number) =>
|
||||
{
|
||||
setFloorAction(action);
|
||||
|
||||
const selectAction = (action: number) => {
|
||||
setFloorAction(action);
|
||||
FloorplanEditor.instance.actionSettings.currentAction = 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 toggleSquareSelectMode = () =>
|
||||
{
|
||||
const nextValue = FloorplanEditor.instance.toggleSquareSelectMode();
|
||||
|
||||
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);
|
||||
};
|
||||
setSquareSelectMode(nextValue);
|
||||
}
|
||||
|
||||
const onFloorThicknessChange = (value: number) => {
|
||||
setVisualizationSettings(prevValue => ({
|
||||
...prevValue,
|
||||
thicknessFloor: value,
|
||||
}));
|
||||
};
|
||||
const changeDoorDirection = () =>
|
||||
{
|
||||
setVisualizationSettings(prevValue =>
|
||||
{
|
||||
const newValue = { ...prevValue };
|
||||
|
||||
const onWallThicknessChange = (value: number) => {
|
||||
setVisualizationSettings(prevValue => ({
|
||||
...prevValue,
|
||||
thicknessWall: value,
|
||||
}));
|
||||
};
|
||||
if(newValue.entryPointDir < 7)
|
||||
{
|
||||
++newValue.entryPointDir;
|
||||
}
|
||||
else
|
||||
{
|
||||
newValue.entryPointDir = 0;
|
||||
}
|
||||
|
||||
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,
|
||||
}));
|
||||
};
|
||||
return newValue;
|
||||
});
|
||||
}
|
||||
|
||||
const increaseWallHeight = () => {
|
||||
onWallHeightChange(Math.min(visualizationSettings.wallHeight + 1, MAX_WALL_HEIGHT));
|
||||
};
|
||||
const onFloorHeightChange = (value: number) =>
|
||||
{
|
||||
if(isNaN(value) || (value <= 0)) value = 0;
|
||||
|
||||
const decreaseWallHeight = () => {
|
||||
onWallHeightChange(Math.max(visualizationSettings.wallHeight - 1, MIN_WALL_HEIGHT));
|
||||
};
|
||||
if(value > 26) value = 26;
|
||||
|
||||
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>
|
||||
setFloorHeight(value);
|
||||
|
||||
FloorplanEditor.instance.actionSettings.currentHeight = value.toString(36);
|
||||
}
|
||||
|
||||
const onFloorThicknessChange = (value: number) =>
|
||||
{
|
||||
setVisualizationSettings(prevValue =>
|
||||
{
|
||||
const newValue = { ...prevValue };
|
||||
|
||||
newValue.thicknessFloor = value;
|
||||
|
||||
return newValue;
|
||||
});
|
||||
}
|
||||
|
||||
const onWallThicknessChange = (value: number) =>
|
||||
{
|
||||
setVisualizationSettings(prevValue =>
|
||||
{
|
||||
const newValue = { ...prevValue };
|
||||
|
||||
newValue.thicknessWall = value;
|
||||
|
||||
return newValue;
|
||||
});
|
||||
}
|
||||
|
||||
const onWallHeightChange = (value: number) =>
|
||||
{
|
||||
if(isNaN(value) || (value <= 0)) value = MIN_WALL_HEIGHT;
|
||||
|
||||
if(value > MAX_WALL_HEIGHT) value = MAX_WALL_HEIGHT;
|
||||
|
||||
setVisualizationSettings(prevValue =>
|
||||
{
|
||||
const newValue = { ...prevValue };
|
||||
|
||||
newValue.wallHeight = value;
|
||||
|
||||
return newValue;
|
||||
});
|
||||
}
|
||||
|
||||
const increaseWallHeight = () =>
|
||||
{
|
||||
let height = (visualizationSettings.wallHeight + 1);
|
||||
|
||||
if(height > MAX_WALL_HEIGHT) height = MAX_WALL_HEIGHT;
|
||||
|
||||
onWallHeightChange(height);
|
||||
}
|
||||
|
||||
const decreaseWallHeight = () =>
|
||||
{
|
||||
let height = (visualizationSettings.wallHeight - 1);
|
||||
|
||||
if(height <= 0) height = MIN_WALL_HEIGHT;
|
||||
|
||||
onWallHeightChange(height);
|
||||
}
|
||||
|
||||
return (
|
||||
<Column>
|
||||
<Flex gap={ 1 }>
|
||||
<Column size={ 5 } gap={ 1 }>
|
||||
<Text bold>{ LocalizeText('floor.plan.editor.draw.mode') }</Text>
|
||||
<Flex gap={ 3 }>
|
||||
<Flex gap={ 1 }>
|
||||
<LayoutGridItem itemActive={ (floorAction === FloorAction.SET) } onClick={ event => selectAction(FloorAction.SET) }>
|
||||
<i className="nitro-icon icon-set-tile" />
|
||||
</LayoutGridItem>
|
||||
<LayoutGridItem itemActive={ (floorAction === FloorAction.UNSET) } onClick={ event => selectAction(FloorAction.UNSET) }>
|
||||
<i className="nitro-icon icon-unset-tile" />
|
||||
</LayoutGridItem>
|
||||
</Flex>
|
||||
<Flex gap={ 1 }>
|
||||
<LayoutGridItem itemActive={ (floorAction === FloorAction.UP) } onClick={ event => selectAction(FloorAction.UP) }>
|
||||
<i className="nitro-icon icon-increase-height" />
|
||||
</LayoutGridItem>
|
||||
<LayoutGridItem itemActive={ (floorAction === FloorAction.DOWN) } onClick={ event => selectAction(FloorAction.DOWN) }>
|
||||
<i className="nitro-icon icon-decrease-height" />
|
||||
</LayoutGridItem>
|
||||
</Flex>
|
||||
<LayoutGridItem itemActive={ (floorAction === FloorAction.DOOR) } onClick={ event => selectAction(FloorAction.DOOR) }>
|
||||
<i className="nitro-icon icon-set-door" />
|
||||
</LayoutGridItem>
|
||||
<LayoutGridItem onClick={ event => 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>
|
||||
</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>
|
||||
<Flex alignItems="center" gap={ 1 }>
|
||||
<FaCaretLeft className="cursor-pointer fa-icon" onClick={ decreaseWallHeight } />
|
||||
<input type="number" className="form-control form-control-sm quantity-input" value={ visualizationSettings.wallHeight } onChange={ event => onWallHeightChange(event.target.valueAsNumber) } />
|
||||
<FaCaretRight className="cursor-pointer fa-icon" onClick={ increaseWallHeight } />
|
||||
</Flex>
|
||||
</Column>
|
||||
</Flex>
|
||||
<Flex gap={ 1 }>
|
||||
<Column size={ 6 }>
|
||||
<Text bold>{ LocalizeText('floor.plan.editor.tile.height') }: { floorHeight }</Text>
|
||||
<ReactSlider
|
||||
className="nitro-slider"
|
||||
min={ MIN_FLOOR_HEIGHT }
|
||||
max={ MAX_FLOOR_HEIGHT }
|
||||
step={ 1 }
|
||||
value={ floorHeight }
|
||||
onChange={ event => onFloorHeightChange(event) }
|
||||
renderThumb={ (props, state) =>
|
||||
{
|
||||
const { key, style, ...rest } = (props as Record<string, any>);
|
||||
|
||||
return <div key={ key } style={ { backgroundColor: `#${ COLORMAP[state.valueNow.toString(33)] }`, ...style } } { ...rest }>{ state.valueNow }</div>;
|
||||
} } />
|
||||
</Column>
|
||||
<Column size={ 6 }>
|
||||
<Text bold>{ LocalizeText('floor.plan.editor.room.options') }</Text>
|
||||
<Flex className="align-items-center">
|
||||
<select className="form-control 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="form-control 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>
|
||||
</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