This commit is contained in:
dank074 2021-10-31 23:25:35 -05:00
parent b7f1a11acc
commit 20510ef057
5 changed files with 133 additions and 44 deletions

View File

@ -4,7 +4,7 @@
"camera.url": "https://nitro.nitrots.co/camera", "camera.url": "https://nitro.nitrots.co/camera",
"thumbnails.url": "https://nitro.nitrots.co/camera/thumbnail/%thumbnail%.png", "thumbnails.url": "https://nitro.nitrots.co/camera/thumbnail/%thumbnail%.png",
"url.prefix": "http://localhost:3000", "url.prefix": "http://localhost:3000",
"floorplan.tile.url": "${url.prefix}/floorplan-editor/tiles.json", "floorplan.tile.url": "${asset.url}/floorplan-editor/tiles.json",
"chat.viewer.height.percentage": 0.40, "chat.viewer.height.percentage": 0.40,
"widget.dimmer.colorwheel": false, "widget.dimmer.colorwheel": false,
"hotelview": { "hotelview": {

View File

@ -1,37 +1,70 @@
.nitro-floorplan-editor .nitro-floorplan-editor {
{
width: 760px; width: 760px;
height: 575px; height: 575px;
.editor-area .editor-area {
{
width: 100%; width: 100%;
height: 300px; height: 300px;
overflow-x: scroll; overflow-x: scroll;
} }
.set-tile .tile-options {
{
background-image: url('../../assets/images/floorplaneditor/icon-tile-set.png'); .tile-option {
width: 50px;
height: 50px;
&.set-tile {
background-image: url("../../assets/images/floorplaneditor/icon-tile-set.png");
} }
.unset-tile &.unset-tile {
{ background-image: url("../../assets/images/floorplaneditor/icon-tile-unset.png");
background-image: url('../../assets/images/floorplaneditor/icon-tile-unset.png');
} }
.increase-height &.increase-height {
{ background-image: url("../../assets/images/floorplaneditor/icon-tile-up.png");
background-image: url('../../assets/images/floorplaneditor/icon-tile-up.png');
} }
.decrease-height &.decrease-height {
{ background-image: url("../../assets/images/floorplaneditor/icon-tile-down.png");
background-image: url('../../assets/images/floorplaneditor/icon-tile-down.png');
} }
.set-door &.set-door {
{ background-image: url("../../assets/images/floorplaneditor/icon-door.png");
background-image: url('../../assets/images/floorplaneditor/icon-door.png'); }
}
}
.visualization-options {
.option {
width: 85px;
height: 50px;
&.door-direction-0 {
background-image: url("../../assets/images/floorplaneditor/door-direction-0.png");
}
&.door-direction-1 {
background-image: url("../../assets/images/floorplaneditor/door-direction-1.png");
}
&.door-direction-2 {
background-image: url("../../assets/images/floorplaneditor/door-direction-2.png");
}
&.door-direction-3 {
background-image: url("../../assets/images/floorplaneditor/door-direction-3.png");
}
&.door-direction-4 {
background-image: url("../../assets/images/floorplaneditor/door-direction-4.png");
}
&.door-direction-5 {
background-image: url("../../assets/images/floorplaneditor/door-direction-5.png");
}
&.door-direction-6 {
background-image: url("../../assets/images/floorplaneditor/door-direction-6.png");
}
&.door-direction-7 {
background-image: url("../../assets/images/floorplaneditor/door-direction-7.png");
}
}
} }
} }

View File

@ -89,12 +89,8 @@ export const FloorplanEditorView: FC<{}> = props =>
{isVisible && {isVisible &&
<NitroCardView className="nitro-floorplan-editor"> <NitroCardView className="nitro-floorplan-editor">
<NitroCardHeaderView headerText={LocalizeText('floor.plan.editor.title')} onCloseClick={() => setIsVisible(false)} /> <NitroCardHeaderView headerText={LocalizeText('floor.plan.editor.title')} onCloseClick={() => setIsVisible(false)} />
<NitroCardContentView> <NitroCardContentView className="text-black">
<div className="row">
<div className="col">
<FloorplanOptionsView /> <FloorplanOptionsView />
</div>
</div>
<div className="row"> <div className="row">
<div className="col"> <div className="col">
<FloorplanCanvasView /> <FloorplanCanvasView />
@ -102,12 +98,12 @@ export const FloorplanEditorView: FC<{}> = props =>
</div> </div>
<div className="row justify-content-between mt-2"> <div className="row justify-content-between mt-2">
<div className="btn-group col-auto"> <div className="btn-group col-auto">
<button className="btn btn-primary">Revert changes</button> <button className="btn btn-primary">{LocalizeText('floor.plan.editor.reload')}</button>
</div> </div>
<div className="btn-group col-auto" role="group" aria-label="First group"> <div className="btn-group col-auto" role="group" aria-label="First group">
<button className="btn btn-primary">Show Preview</button> <button className="btn btn-primary">{LocalizeText('floor.plan.editor.preview')}</button>
<button className="btn btn-primary">Import/Export</button> <button className="btn btn-primary">{LocalizeText('floor.plan.editor.import.export')}</button>
<button className="btn btn-primary" onClick={saveFloorChanges}>Save</button> <button className="btn btn-primary" onClick={saveFloorChanges}>{LocalizeText('floor.plan.editor.save')}</button>
</div> </div>
</div> </div>
</NitroCardContentView> </NitroCardContentView>

View File

@ -400,6 +400,11 @@ export class FloorplanEditor extends PixiApplicationProxy
this._doorLocation = value; this._doorLocation = value;
} }
public get actionSettings(): ActionSettings
{
return this._actionSettings;
}
public static get instance(): FloorplanEditor public static get instance(): FloorplanEditor
{ {
if(!FloorplanEditor._instance) if(!FloorplanEditor._instance)

View File

@ -1,20 +1,75 @@
import { FC } from 'react'; import { FC, useCallback, useState } from 'react';
import { LocalizeText } from '../../../api';
import { NitroCardGridItemView, NitroCardGridView } from '../../../layout'; import { NitroCardGridItemView, NitroCardGridView } from '../../../layout';
import { FloorAction } from '../common/Constants';
import { FloorplanEditor } from '../common/FloorplanEditor';
import { useFloorplanEditorContext } from '../context/FloorplanEditorContext'; import { useFloorplanEditorContext } from '../context/FloorplanEditorContext';
export const FloorplanOptionsView: FC<{}> = props => export const FloorplanOptionsView: FC<{}> = props =>
{ {
const { floorplanSettings = null, setFloorplanSettings = null } = useFloorplanEditorContext(); const { floorplanSettings = null, setFloorplanSettings = null } = useFloorplanEditorContext();
const [ floorAction, setFloorAction ] = useState(FloorAction.SET);
const selectAction = useCallback((action: number) =>
{
setFloorAction(action);
FloorplanEditor.instance.actionSettings.currentAction = action;
}, []);
const changeDoorDirection = useCallback(() =>
{
const settings = Object.assign({}, floorplanSettings);
if(settings.entryPointDir < 7)
{
++settings.entryPointDir;
}
else
{
settings.entryPointDir = 0;
}
setFloorplanSettings(settings);
}, [floorplanSettings, setFloorplanSettings]);
const onWallHeightChange = useCallback((value: number) =>
{
if(value > 16) value = 16;
if(value < 0) value = 0;
const settings = Object.assign({}, floorplanSettings);
settings.wallHeight = value;
setFloorplanSettings(settings);
}, [floorplanSettings, setFloorplanSettings]);
return ( return (
<> <>
<NitroCardGridView columns={5}> <div className="row justify-content-between mb-1">
<NitroCardGridItemView className="set-tile" /> <div className="col-6">
<NitroCardGridItemView className="unset-tile" /> <label>{LocalizeText('floor.plan.editor.draw.mode')}</label>
<NitroCardGridItemView className="increase-height" /> <NitroCardGridView className="tile-options">
<NitroCardGridItemView className="decrease-height" /> <NitroCardGridItemView itemActive={floorAction === FloorAction.SET} onClick={() => selectAction(FloorAction.SET)} className="tile-option set-tile" />
<NitroCardGridItemView className="set-door" /> <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> </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>
</> </>
); );
} }