mirror of
https://github.com/billsonnn/nitro-react.git
synced 2025-02-17 01:12:37 +01:00
add import/export
This commit is contained in:
dank074
parent
c85113dd2c
commit
ee060670dc
@ -5,6 +5,17 @@
|
||||
.editor-area {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
min-height: 300px;
|
||||
overflow-x: scroll;
|
||||
}
|
||||
|
||||
.color {
|
||||
height: 50px;
|
||||
width: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.floorplan-import-export {
|
||||
width: 500px;
|
||||
height: 475px;
|
||||
}
|
||||
|
||||
@ -1,20 +1,29 @@
|
||||
import { FloorHeightMapEvent, RoomVisualizationSettingsEvent, UpdateFloorPropertiesMessageComposer } from '@nitrots/nitro-renderer';
|
||||
import { FloorHeightMapEvent, NitroPoint, RoomVisualizationSettingsEvent, UpdateFloorPropertiesMessageComposer } from '@nitrots/nitro-renderer';
|
||||
import { FC, useCallback, useEffect, useState } from 'react';
|
||||
import { LocalizeText } from '../../api';
|
||||
import { FloorplanEditorEvent } from '../../events/floorplan-editor/FloorplanEditorEvent';
|
||||
import { CreateMessageHook, SendMessageHook, useUiEvent } from '../../hooks';
|
||||
import { NitroCardContentView, NitroCardHeaderView, NitroCardView, NitroLayoutGrid, NitroLayoutGridColumn } from '../../layout';
|
||||
import { NitroCardContentView, NitroCardHeaderView, NitroCardView, NitroLayoutFlex, NitroLayoutGrid, NitroLayoutGridColumn } from '../../layout';
|
||||
import { FloorplanEditor } from './common/FloorplanEditor';
|
||||
import { convertNumbersForSaving, convertSettingToNumber } from './common/Utils';
|
||||
import { FloorplanEditorContextProvider } from './context/FloorplanEditorContext';
|
||||
import { IFloorplanSettings, initialFloorplanSettings } from './context/FloorplanEditorContext.types';
|
||||
import { IFloorplanSettings, initialFloorplanSettings, IVisualizationSettings } from './context/FloorplanEditorContext.types';
|
||||
import { FloorplanCanvasView } from './views/FloorplanCanvasView';
|
||||
import { FloorplanImportExportView } from './views/FloorplanImportExportView';
|
||||
import { FloorplanOptionsView } from './views/FloorplanOptionsView';
|
||||
|
||||
export const FloorplanEditorView: FC<{}> = props =>
|
||||
{
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
const [floorplanSettings, setFloorplanSettings ] = useState<IFloorplanSettings>(initialFloorplanSettings);
|
||||
const [ importExportVisible, setImportExportVisible ] = useState(false);
|
||||
const [originalFloorplanSettings, setOriginalFloorplanSettings] = useState<IFloorplanSettings>(initialFloorplanSettings);
|
||||
const [visualizationSettings, setVisualizationSettings] = useState<IVisualizationSettings>(
|
||||
{
|
||||
entryPointDir: 2,
|
||||
wallHeight: -1,
|
||||
thicknessWall: 1,
|
||||
thicknessFloor: 1
|
||||
});
|
||||
|
||||
const onFloorplanEditorEvent = useCallback((event: FloorplanEditorEvent) =>
|
||||
{
|
||||
@ -47,11 +56,16 @@ export const FloorplanEditorView: FC<{}> = props =>
|
||||
|
||||
if(!parser) return;
|
||||
|
||||
const settings = Object.assign({}, floorplanSettings);
|
||||
const settings = Object.assign({}, originalFloorplanSettings);
|
||||
settings.tilemap = parser.model;
|
||||
settings.wallHeight = parser.wallHeight + 1;
|
||||
setFloorplanSettings(settings);
|
||||
}, [floorplanSettings]);
|
||||
setOriginalFloorplanSettings(settings);
|
||||
|
||||
const vSettings = Object.assign({}, visualizationSettings);
|
||||
vSettings.wallHeight = parser.wallHeight + 1;
|
||||
setVisualizationSettings(vSettings);
|
||||
|
||||
}, [originalFloorplanSettings, visualizationSettings]);
|
||||
|
||||
CreateMessageHook(FloorHeightMapEvent, onFloorHeightMapEvent);
|
||||
|
||||
@ -61,12 +75,17 @@ export const FloorplanEditorView: FC<{}> = props =>
|
||||
|
||||
if(!parser) return;
|
||||
|
||||
const settings = Object.assign({}, floorplanSettings);
|
||||
settings.thicknessFloor = convertSettingToNumber(parser.thicknessFloor)
|
||||
const settings = Object.assign({}, originalFloorplanSettings);
|
||||
settings.thicknessFloor = convertSettingToNumber(parser.thicknessFloor);
|
||||
settings.thicknessWall = convertSettingToNumber(parser.thicknessWall);
|
||||
|
||||
setFloorplanSettings(settings);
|
||||
}, [floorplanSettings]);
|
||||
setOriginalFloorplanSettings(settings);
|
||||
|
||||
const vSettings = Object.assign({}, visualizationSettings);
|
||||
vSettings.thicknessFloor = convertSettingToNumber(parser.thicknessFloor);
|
||||
vSettings.thicknessWall = convertSettingToNumber(parser.thicknessWall);
|
||||
setVisualizationSettings(vSettings);
|
||||
}, [originalFloorplanSettings, visualizationSettings]);
|
||||
|
||||
CreateMessageHook(RoomVisualizationSettingsEvent, onRoomVisualizationSettingsEvent);
|
||||
|
||||
@ -74,42 +93,53 @@ export const FloorplanEditorView: FC<{}> = props =>
|
||||
{
|
||||
SendMessageHook(new UpdateFloorPropertiesMessageComposer(
|
||||
FloorplanEditor.instance.getCurrentTilemapString(),
|
||||
floorplanSettings.entryPoint[0],
|
||||
floorplanSettings.entryPoint[1],
|
||||
floorplanSettings.entryPointDir,
|
||||
convertNumbersForSaving(floorplanSettings.thicknessWall),
|
||||
convertNumbersForSaving(floorplanSettings.thicknessFloor),
|
||||
floorplanSettings.wallHeight - 1
|
||||
FloorplanEditor.instance.doorLocation.x,
|
||||
FloorplanEditor.instance.doorLocation.y,
|
||||
visualizationSettings.entryPointDir,
|
||||
convertNumbersForSaving(visualizationSettings.thicknessWall),
|
||||
convertNumbersForSaving(visualizationSettings.thicknessFloor),
|
||||
visualizationSettings.wallHeight - 1
|
||||
));
|
||||
}, [floorplanSettings.entryPoint, floorplanSettings.entryPointDir, floorplanSettings.thicknessFloor, floorplanSettings.thicknessWall, floorplanSettings.wallHeight]);
|
||||
}, [visualizationSettings.entryPointDir, visualizationSettings.thicknessFloor, visualizationSettings.thicknessWall, visualizationSettings.wallHeight]);
|
||||
|
||||
const revertChanges = useCallback(() =>
|
||||
{
|
||||
setVisualizationSettings({ wallHeight: originalFloorplanSettings.wallHeight, thicknessWall: originalFloorplanSettings.thicknessWall, thicknessFloor: originalFloorplanSettings.thicknessFloor, entryPointDir: originalFloorplanSettings.entryPointDir });
|
||||
|
||||
FloorplanEditor.instance.doorLocation = new NitroPoint(originalFloorplanSettings.entryPoint[0], originalFloorplanSettings.entryPoint[1]);
|
||||
FloorplanEditor.instance.setTilemap(originalFloorplanSettings.tilemap, originalFloorplanSettings.reservedTiles);
|
||||
FloorplanEditor.instance.renderTiles();
|
||||
}, [originalFloorplanSettings.entryPoint, originalFloorplanSettings.entryPointDir, originalFloorplanSettings.reservedTiles, originalFloorplanSettings.thicknessFloor, originalFloorplanSettings.thicknessWall, originalFloorplanSettings.tilemap, originalFloorplanSettings.wallHeight])
|
||||
|
||||
return (
|
||||
<>
|
||||
<FloorplanEditorContextProvider value={ { floorplanSettings, setFloorplanSettings } }>
|
||||
{isVisible &&
|
||||
<NitroCardView className="nitro-floorplan-editor">
|
||||
<NitroCardHeaderView headerText={LocalizeText('floor.plan.editor.title')} onCloseClick={() => setIsVisible(false)} />
|
||||
<NitroCardContentView>
|
||||
<NitroLayoutGrid>
|
||||
<NitroLayoutGridColumn size={ 12 }>
|
||||
<FloorplanOptionsView />
|
||||
<FloorplanCanvasView />
|
||||
</NitroLayoutGridColumn>
|
||||
</NitroLayoutGrid>
|
||||
{/* <div className="row justify-content-between mt-2">
|
||||
<div className="btn-group col-auto">
|
||||
<button className="btn btn-primary">{LocalizeText('floor.plan.editor.reload')}</button>
|
||||
</div>
|
||||
<div className="btn-group col-auto" role="group" aria-label="First group">
|
||||
<button className="btn btn-primary">{LocalizeText('floor.plan.editor.preview')}</button>
|
||||
<button className="btn btn-primary">{LocalizeText('floor.plan.editor.import.export')}</button>
|
||||
<button className="btn btn-primary" onClick={saveFloorChanges}>{LocalizeText('floor.plan.editor.save')}</button>
|
||||
</div>
|
||||
</div> */}
|
||||
</NitroCardContentView>
|
||||
</NitroCardView>
|
||||
}
|
||||
</FloorplanEditorContextProvider>
|
||||
<FloorplanEditorContextProvider value={{ originalFloorplanSettings: originalFloorplanSettings, setOriginalFloorplanSettings: setOriginalFloorplanSettings, visualizationSettings: visualizationSettings, setVisualizationSettings: setVisualizationSettings }}>
|
||||
{isVisible && <>
|
||||
<NitroCardView className="nitro-floorplan-editor">
|
||||
<NitroCardHeaderView headerText={LocalizeText('floor.plan.editor.title')} onCloseClick={() => setIsVisible(false)} />
|
||||
<NitroCardContentView>
|
||||
<NitroLayoutGrid>
|
||||
<NitroLayoutGridColumn size={12}>
|
||||
<FloorplanOptionsView />
|
||||
<FloorplanCanvasView />
|
||||
<NitroLayoutFlex className="justify-content-between">
|
||||
<div className="btn-group">
|
||||
<button className="btn btn-primary" onClick={revertChanges}>{LocalizeText('floor.plan.editor.reload')}</button>
|
||||
</div>
|
||||
<div className="btn-group">
|
||||
<button className="btn btn-primary" disabled={true}>{LocalizeText('floor.plan.editor.preview')}</button>
|
||||
<button className="btn btn-primary" onClick={ () => setImportExportVisible(true) }>{LocalizeText('floor.plan.editor.import.export')}</button>
|
||||
<button className="btn btn-primary" onClick={saveFloorChanges}>{LocalizeText('floor.plan.editor.save')}</button>
|
||||
</div>
|
||||
</NitroLayoutFlex>
|
||||
</NitroLayoutGridColumn>
|
||||
</NitroLayoutGrid>
|
||||
</NitroCardContentView>
|
||||
</NitroCardView>
|
||||
{importExportVisible && <FloorplanImportExportView onCloseClick={ () => setImportExportVisible(false)}/>}
|
||||
</>
|
||||
}
|
||||
</FloorplanEditorContextProvider>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -11,3 +11,34 @@ export class FloorAction
|
||||
public static readonly SET = 3;
|
||||
public static readonly UNSET = 4;
|
||||
}
|
||||
|
||||
export const COLORMAP: object = {
|
||||
'x': '101010',
|
||||
'0': '0065ff',
|
||||
'1': '0091ff',
|
||||
'2': '00bcff',
|
||||
'3': '00e8ff',
|
||||
'4': '00ffea',
|
||||
'5': '00ffbf',
|
||||
'6': '00ff93',
|
||||
'7': '00ff68',
|
||||
'8': '00ff3d',
|
||||
'9': '19ff00',
|
||||
'a': '44ff00',
|
||||
'b': '70ff00',
|
||||
'c': '9bff00',
|
||||
'd': 'f2ff00',
|
||||
'e': 'ffe000',
|
||||
'f': 'ffb500',
|
||||
'g': 'ff8900',
|
||||
'h': 'ff5e00',
|
||||
'i': 'ff3200',
|
||||
'j': 'ff0700',
|
||||
'k': 'ff0023',
|
||||
'l': 'ff007a',
|
||||
'm': 'ff00a5',
|
||||
'n': 'ff00d1',
|
||||
'o': 'ff00fc',
|
||||
'p': 'd600ff',
|
||||
'q': 'aa00ff'
|
||||
};
|
||||
|
||||
@ -2,8 +2,10 @@ import { createContext, FC, useContext } from 'react';
|
||||
import { FloorplanEditorContextProps, IFloorplanEditorContext } from './FloorplanEditorContext.types';
|
||||
|
||||
const FloorplanEditorContext = createContext<IFloorplanEditorContext>({
|
||||
floorplanSettings: null,
|
||||
setFloorplanSettings: null
|
||||
originalFloorplanSettings: null,
|
||||
setOriginalFloorplanSettings: null,
|
||||
visualizationSettings: null,
|
||||
setVisualizationSettings: null
|
||||
});
|
||||
|
||||
export const FloorplanEditorContextProvider: FC<FloorplanEditorContextProps> = props =>
|
||||
|
||||
@ -2,14 +2,19 @@ import { ProviderProps } from 'react';
|
||||
|
||||
export interface IFloorplanEditorContext
|
||||
{
|
||||
floorplanSettings: IFloorplanSettings;
|
||||
setFloorplanSettings: React.Dispatch<React.SetStateAction<IFloorplanSettings>>;
|
||||
originalFloorplanSettings: IFloorplanSettings;
|
||||
setOriginalFloorplanSettings: React.Dispatch<React.SetStateAction<IFloorplanSettings>>;
|
||||
visualizationSettings: IVisualizationSettings;
|
||||
setVisualizationSettings: React.Dispatch<React.SetStateAction<IVisualizationSettings>>;
|
||||
}
|
||||
|
||||
export interface IFloorplanSettings {
|
||||
export interface IFloorplanSettings extends IVisualizationSettings {
|
||||
tilemap: string;
|
||||
reservedTiles: boolean[][];
|
||||
entryPoint: [number, number];
|
||||
}
|
||||
|
||||
export interface IVisualizationSettings {
|
||||
entryPointDir: number;
|
||||
wallHeight: number;
|
||||
thicknessWall: number;
|
||||
|
||||
@ -6,7 +6,7 @@ import { useFloorplanEditorContext } from '../context/FloorplanEditorContext';
|
||||
|
||||
export const FloorplanCanvasView: FC<{}> = props =>
|
||||
{
|
||||
const { floorplanSettings = null, setFloorplanSettings = null } = useFloorplanEditorContext();
|
||||
const { originalFloorplanSettings = null, setOriginalFloorplanSettings = null, visualizationSettings = null, setVisualizationSettings = null } = useFloorplanEditorContext();
|
||||
const [ occupiedTilesReceived , setOccupiedTilesReceived ] = useState(false);
|
||||
const [ entryTileReceived, setEntryTileReceived ] = useState(false);
|
||||
const elementRef = useRef<HTMLDivElement>(null);
|
||||
@ -21,8 +21,9 @@ export const FloorplanCanvasView: FC<{}> = props =>
|
||||
return ( () =>
|
||||
{
|
||||
FloorplanEditor.instance.clear();
|
||||
setVisualizationSettings( prev => {return { wallHeight: originalFloorplanSettings.wallHeight, thicknessWall: originalFloorplanSettings.thicknessWall, thicknessFloor: originalFloorplanSettings.thicknessFloor, entryPointDir: prev.entryPointDir } });
|
||||
});
|
||||
}, []);
|
||||
}, [originalFloorplanSettings.thicknessFloor, originalFloorplanSettings.thicknessWall, originalFloorplanSettings.wallHeight, setVisualizationSettings]);
|
||||
|
||||
const onRoomOccupiedTilesMessageEvent = useCallback((event: RoomOccupiedTilesMessageEvent) =>
|
||||
{
|
||||
@ -30,16 +31,16 @@ export const FloorplanCanvasView: FC<{}> = props =>
|
||||
|
||||
if(!parser) return;
|
||||
|
||||
const settings = Object.assign({}, floorplanSettings);
|
||||
const settings = Object.assign({}, originalFloorplanSettings);
|
||||
settings.reservedTiles = parser.blockedTilesMap;
|
||||
setFloorplanSettings(settings);
|
||||
setOriginalFloorplanSettings(settings);
|
||||
|
||||
FloorplanEditor.instance.setTilemap(floorplanSettings.tilemap, parser.blockedTilesMap);
|
||||
FloorplanEditor.instance.setTilemap(originalFloorplanSettings.tilemap, parser.blockedTilesMap);
|
||||
|
||||
setOccupiedTilesReceived(true);
|
||||
|
||||
elementRef.current.scrollTo(FloorplanEditor.instance.view.width / 3, 0);
|
||||
}, [floorplanSettings, setFloorplanSettings]);
|
||||
}, [originalFloorplanSettings, setOriginalFloorplanSettings]);
|
||||
|
||||
CreateMessageHook(RoomOccupiedTilesMessageEvent, onRoomOccupiedTilesMessageEvent);
|
||||
|
||||
@ -49,14 +50,18 @@ export const FloorplanCanvasView: FC<{}> = props =>
|
||||
|
||||
if(!parser) return;
|
||||
|
||||
const settings = Object.assign({}, floorplanSettings);
|
||||
const settings = Object.assign({}, originalFloorplanSettings);
|
||||
settings.entryPoint = [parser.x, parser.y];
|
||||
settings.entryPointDir = parser.direction;
|
||||
setFloorplanSettings(settings);
|
||||
setOriginalFloorplanSettings(settings);
|
||||
|
||||
const vSettings = Object.assign({}, visualizationSettings);
|
||||
vSettings.entryPointDir = parser.direction;
|
||||
setVisualizationSettings(vSettings);
|
||||
|
||||
FloorplanEditor.instance.doorLocation = new NitroPoint(settings.entryPoint[0], settings.entryPoint[1]);
|
||||
FloorplanEditor.instance.doorLocation = new NitroPoint(parser.x, parser.y);
|
||||
setEntryTileReceived(true);
|
||||
}, [floorplanSettings, setFloorplanSettings]);
|
||||
}, [originalFloorplanSettings, setOriginalFloorplanSettings, setVisualizationSettings, visualizationSettings]);
|
||||
|
||||
CreateMessageHook(RoomEntryTileMessageEvent, onRoomEntryTileMessageEvent);
|
||||
|
||||
|
||||
@ -0,0 +1,68 @@
|
||||
import { UpdateFloorPropertiesMessageComposer } from '@nitrots/nitro-renderer';
|
||||
import { FC, useCallback, useEffect, useState } from 'react';
|
||||
import { LocalizeText } from '../../../api';
|
||||
import { SendMessageHook } from '../../../hooks';
|
||||
import { NitroCardContentView, NitroCardHeaderView, NitroCardView, NitroLayoutFlex, NitroLayoutGridColumn } from '../../../layout';
|
||||
import { convertNumbersForSaving } from '../common/Utils';
|
||||
import { useFloorplanEditorContext } from '../context/FloorplanEditorContext';
|
||||
|
||||
export const FloorplanImportExportView: FC<FloorplanImportExportViewProps> = props =>
|
||||
{
|
||||
const { originalFloorplanSettings = null, setOriginalFloorplanSettings = null } = useFloorplanEditorContext();
|
||||
|
||||
const { onCloseClick = null } = props;
|
||||
const [ map, setMap ] = useState<string>('');
|
||||
|
||||
const convertMapToString = useCallback((map: string) =>
|
||||
{
|
||||
return map.replace(/\r\n|\r|\n/g, '\n').toLowerCase();
|
||||
}, []);
|
||||
|
||||
const revertChanges= useCallback(() =>
|
||||
{
|
||||
setMap(convertMapToString(originalFloorplanSettings.tilemap));
|
||||
}, [convertMapToString, originalFloorplanSettings.tilemap]);
|
||||
|
||||
const saveFloorChanges = useCallback(() =>
|
||||
{
|
||||
SendMessageHook(new UpdateFloorPropertiesMessageComposer(
|
||||
map.split('\n').join('\r'),
|
||||
originalFloorplanSettings.entryPoint[0],
|
||||
originalFloorplanSettings.entryPoint[1],
|
||||
originalFloorplanSettings.entryPointDir,
|
||||
convertNumbersForSaving(originalFloorplanSettings.thicknessWall),
|
||||
convertNumbersForSaving(originalFloorplanSettings.thicknessFloor),
|
||||
originalFloorplanSettings.wallHeight - 1
|
||||
));
|
||||
}, [map, originalFloorplanSettings.entryPoint, originalFloorplanSettings.entryPointDir, originalFloorplanSettings.thicknessFloor, originalFloorplanSettings.thicknessWall, originalFloorplanSettings.wallHeight]);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
revertChanges();
|
||||
}, [revertChanges]);
|
||||
|
||||
return (
|
||||
<NitroCardView simple={true} className="floorplan-import-export">
|
||||
<NitroCardHeaderView headerText={LocalizeText('floor.plan.editor.import.export')} onCloseClick={ onCloseClick } />
|
||||
<NitroCardContentView>
|
||||
<NitroLayoutGridColumn size={ 12 } className="h-100">
|
||||
<textarea className="h-100" value={map} onChange={ event => setMap(event.target.value) }></textarea>
|
||||
<NitroLayoutFlex className="justify-content-between">
|
||||
<div className="btn-group">
|
||||
<button className="btn btn-primary" onClick={revertChanges}>{LocalizeText('floor.plan.editor.revert.to.last.received.map')}</button>
|
||||
</div>
|
||||
<div className="btn-group">
|
||||
<button className="btn btn-primary" onClick={saveFloorChanges}>{LocalizeText('floor.plan.editor.save')}</button>
|
||||
</div>
|
||||
</NitroLayoutFlex>
|
||||
</NitroLayoutGridColumn>
|
||||
|
||||
</NitroCardContentView>
|
||||
</NitroCardView>
|
||||
)
|
||||
}
|
||||
|
||||
export interface FloorplanImportExportViewProps
|
||||
{
|
||||
onCloseClick(): void;
|
||||
}
|
||||
@ -1,18 +1,23 @@
|
||||
import { FC, useCallback, useState } from 'react';
|
||||
import ReactSlider from 'react-slider';
|
||||
import { LocalizeText } from '../../../api';
|
||||
import { NitroCardGridItemView, NitroCardGridView, NitroLayoutFlex, NitroLayoutFlexColumn, NitroLayoutGrid, NitroLayoutGridColumn } from '../../../layout';
|
||||
import { NitroLayoutBase } from '../../../layout/base';
|
||||
import { FloorAction } from '../common/Constants';
|
||||
import { COLORMAP, FloorAction } from '../common/Constants';
|
||||
import { FloorplanEditor } from '../common/FloorplanEditor';
|
||||
import { useFloorplanEditorContext } from '../context/FloorplanEditorContext';
|
||||
|
||||
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 { floorplanSettings = null, setFloorplanSettings = null } = useFloorplanEditorContext();
|
||||
const { visualizationSettings = null, setVisualizationSettings = null } = useFloorplanEditorContext();
|
||||
const [ floorAction, setFloorAction ] = useState(FloorAction.SET);
|
||||
const [ floorHeight, setFloorHeight ] = useState(0);
|
||||
|
||||
const selectAction = useCallback((action: number) =>
|
||||
{
|
||||
@ -22,7 +27,7 @@ export const FloorplanOptionsView: FC<{}> = props =>
|
||||
|
||||
const changeDoorDirection = useCallback(() =>
|
||||
{
|
||||
setFloorplanSettings(prevValue =>
|
||||
setVisualizationSettings(prevValue =>
|
||||
{
|
||||
const newValue = Object.assign({}, prevValue);
|
||||
|
||||
@ -37,7 +42,40 @@ export const FloorplanOptionsView: FC<{}> = props =>
|
||||
|
||||
return newValue;
|
||||
});
|
||||
}, [ setFloorplanSettings ]);
|
||||
}, [ setVisualizationSettings ]);
|
||||
|
||||
const onFloorHeightChange = useCallback((value: number) =>
|
||||
{
|
||||
if(isNaN(value) || (value <= 0)) value = 0;
|
||||
|
||||
if(value > 26) value = 26;
|
||||
|
||||
setFloorHeight(value);
|
||||
|
||||
FloorplanEditor.instance.actionSettings.currentHeight = value.toString(36);
|
||||
}, []);
|
||||
|
||||
const onFloorThicknessChange = useCallback((value: number) =>
|
||||
{
|
||||
setVisualizationSettings(prevValue =>
|
||||
{
|
||||
const newValue = Object.assign({}, prevValue);
|
||||
newValue.thicknessFloor = value;
|
||||
|
||||
return newValue;
|
||||
});
|
||||
}, [setVisualizationSettings]);
|
||||
|
||||
const onWallThicknessChange = useCallback((value: number) =>
|
||||
{
|
||||
setVisualizationSettings(prevValue =>
|
||||
{
|
||||
const newValue = Object.assign({}, prevValue);
|
||||
newValue.thicknessWall = value;
|
||||
|
||||
return newValue;
|
||||
});
|
||||
}, [setVisualizationSettings]);
|
||||
|
||||
const onWallHeightChange = useCallback((value: number) =>
|
||||
{
|
||||
@ -45,7 +83,7 @@ export const FloorplanOptionsView: FC<{}> = props =>
|
||||
|
||||
if(value > MAX_WALL_HEIGHT) value = MAX_WALL_HEIGHT;
|
||||
|
||||
setFloorplanSettings(prevValue =>
|
||||
setVisualizationSettings(prevValue =>
|
||||
{
|
||||
const newValue = Object.assign({}, prevValue);
|
||||
|
||||
@ -53,11 +91,11 @@ export const FloorplanOptionsView: FC<{}> = props =>
|
||||
|
||||
return newValue;
|
||||
});
|
||||
}, [ setFloorplanSettings ]);
|
||||
}, [ setVisualizationSettings ]);
|
||||
|
||||
function increaseWallHeight(): void
|
||||
{
|
||||
let height = (floorplanSettings.wallHeight + 1);
|
||||
let height = (visualizationSettings.wallHeight + 1);
|
||||
|
||||
if(height > MAX_WALL_HEIGHT) height = MAX_WALL_HEIGHT;
|
||||
|
||||
@ -66,7 +104,7 @@ export const FloorplanOptionsView: FC<{}> = props =>
|
||||
|
||||
function decreaseWallHeight(): void
|
||||
{
|
||||
let height = (floorplanSettings.wallHeight - 1);
|
||||
let height = (visualizationSettings.wallHeight - 1);
|
||||
|
||||
if(height <= 0) height = MIN_WALL_HEIGHT;
|
||||
|
||||
@ -97,10 +135,10 @@ export const FloorplanOptionsView: FC<{}> = props =>
|
||||
</NitroCardGridView>
|
||||
</NitroLayoutFlexColumn>
|
||||
</NitroLayoutGridColumn>
|
||||
<NitroLayoutGridColumn className="align-items-center" size={ 3 }>
|
||||
<NitroLayoutGridColumn className="align-items-center overflow-hidden" size={ 4 }>
|
||||
<NitroLayoutFlexColumn gap={ 2 } overflow="hidden">
|
||||
<NitroLayoutBase className="flex-shrink-0 fw-bold text-black text-truncate">{ LocalizeText('floor.plan.editor.enter.direction') }</NitroLayoutBase>
|
||||
<i className={ `icon icon-door-direction-${ floorplanSettings.entryPointDir } cursor-pointer` } onClick={ changeDoorDirection } />
|
||||
<i className={ `icon icon-door-direction-${ visualizationSettings.entryPointDir } cursor-pointer` } onClick={ changeDoorDirection } />
|
||||
</NitroLayoutFlexColumn>
|
||||
</NitroLayoutGridColumn>
|
||||
<NitroLayoutGridColumn className="align-items-center" size={ 3 }>
|
||||
@ -108,41 +146,43 @@ export const FloorplanOptionsView: FC<{}> = props =>
|
||||
<NitroLayoutBase className="flex-shrink-0 fw-bold text-black text-truncate">{ LocalizeText('floor.editor.wall.height') }</NitroLayoutBase>
|
||||
<NitroLayoutFlex className="align-items-center">
|
||||
<i className="fas fa-caret-left cursor-pointer me-1 text-black" onClick={ decreaseWallHeight } />
|
||||
<input type="number" className="form-control form-control-sm quantity-input" value={ floorplanSettings.wallHeight } onChange={ event => onWallHeightChange(event.target.valueAsNumber)} />
|
||||
<input type="number" className="form-control form-control-sm quantity-input" value={ visualizationSettings.wallHeight } onChange={ event => onWallHeightChange(event.target.valueAsNumber)} />
|
||||
<i className="fas fa-caret-right cursor-pointer ms-1 text-black" onClick={ increaseWallHeight } />
|
||||
</NitroLayoutFlex>
|
||||
</NitroLayoutFlexColumn>
|
||||
</NitroLayoutGridColumn>
|
||||
<NitroLayoutGridColumn size={ 5 }>
|
||||
<NitroLayoutFlexColumn gap={ 2 } overflow="hidden">
|
||||
<NitroLayoutBase className="flex-shrink-0 fw-bold text-black text-truncate">{ LocalizeText('floor.plan.editor.tile.height') }: { floorHeight }</NitroLayoutBase>
|
||||
<ReactSlider
|
||||
className="nitro-slider"
|
||||
min={ MIN_FLOOR_HEIGHT }
|
||||
max={ MAX_FLOOR_HEIGHT }
|
||||
step={ 1 }
|
||||
value={ floorHeight }
|
||||
onChange={ event => onFloorHeightChange(event) }
|
||||
renderThumb={ ({ style, ...rest }, state) => <div style={ { backgroundColor: `#${Object.entries(COLORMAP)[state.valueNow + 1][1]}`, ...style } } { ...rest }>{ state.valueNow }</div> } />
|
||||
</NitroLayoutFlexColumn>
|
||||
</NitroLayoutGridColumn>
|
||||
<NitroLayoutGridColumn size={5}>
|
||||
<NitroLayoutFlexColumn gap={ 2 } overflow="hidden">
|
||||
<NitroLayoutBase className="flex-shrink-0 fw-bold text-black text-truncate">{ LocalizeText('floor.plan.editor.room.options') }</NitroLayoutBase>
|
||||
<NitroLayoutFlex 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>
|
||||
</NitroLayoutFlex>
|
||||
</NitroLayoutFlexColumn>
|
||||
</NitroLayoutGridColumn>
|
||||
</NitroLayoutGrid>
|
||||
// <NitroLayoutButton variant="primary" size="sm" onClick={ changeDoorDirection }>
|
||||
// <i className={ `icon icon-door-direction-${ floorplanSettings.entryPointDir }` } />
|
||||
// </NitroLayoutButton>
|
||||
// <>
|
||||
// <div className="row justify-content-between mb-1">
|
||||
// <div className="col-6">
|
||||
// <label>{LocalizeText('floor.plan.editor.draw.mode')}</label>
|
||||
// <NitroCardGridView className="tile-options">
|
||||
// <NitroCardGridItemView itemActive={floorAction === FloorAction.SET} onClick={() => selectAction(FloorAction.SET)} className="tile-option set-tile" />
|
||||
// <NitroCardGridItemView itemActive={floorAction === FloorAction.UNSET} onClick={() => selectAction(FloorAction.UNSET)} className="tile-option unset-tile" />
|
||||
// <NitroCardGridItemView itemActive={floorAction === FloorAction.UP} onClick={() => selectAction(FloorAction.UP)} className="tile-option increase-height" />
|
||||
// <NitroCardGridItemView itemActive={floorAction === FloorAction.DOWN} onClick={() => selectAction(FloorAction.DOWN)} className="tile-option decrease-height" />
|
||||
// <NitroCardGridItemView itemActive={floorAction === FloorAction.DOOR} onClick={() => selectAction(FloorAction.DOOR)} className="tile-option set-door" />
|
||||
// </NitroCardGridView>
|
||||
// </div>
|
||||
// <div className="col-6">
|
||||
// <div className="d-flex w-100 gap-4">
|
||||
// <label>{LocalizeText('floor.plan.editor.enter.direction')}</label>
|
||||
// <label>{LocalizeText('floor.editor.wall.height')}</label>
|
||||
// </div>
|
||||
// <div className="d-flex w-100 gap-4 visualization-options">
|
||||
// <NitroCardGridItemView className={`option door-direction-${floorplanSettings.entryPointDir}`} onClick={changeDoorDirection}/>
|
||||
// <NitroCardGridItemView className="option"><input type="number" max={16} min={0} step={1} value={floorplanSettings.wallHeight} onChange={event => onWallHeightChange(event.target.valueAsNumber)} id="wallHeight"/></NitroCardGridItemView>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// <div className="row justify-content-between mb-1">
|
||||
|
||||
// </div>
|
||||
// </>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user