changes

public/ui-config.json

@@ -4,7 +4,7 @@
     "camera.url": "https://nitro.nitrots.co/camera",
     "thumbnails.url": "https://nitro.nitrots.co/camera/thumbnail/%thumbnail%.png",
     "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,
     "widget.dimmer.colorwheel": false,
     "hotelview": {

src/views/floorplan-editor/FloorplanEditorView.scss

@@ -1,37 +1,70 @@
-.nitro-floorplan-editor
+.nitro-floorplan-editor {
-{
     width: 760px;
     height: 575px;
 
-    .editor-area
+    .editor-area {
-    {
         width: 100%;
         height: 300px;
         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");
+            }
+        }
     }
 }

src/views/floorplan-editor/FloorplanEditorView.tsx

@@ -89,12 +89,8 @@ export const FloorplanEditorView: FC<{}> = props =>
             {isVisible &&
                 <NitroCardView className="nitro-floorplan-editor">
                     <NitroCardHeaderView headerText={LocalizeText('floor.plan.editor.title')} onCloseClick={() => setIsVisible(false)} />
-                    <NitroCardContentView>
+                    <NitroCardContentView className="text-black">
-                        <div className="row">
-                            <div className="col">
                         <FloorplanOptionsView />
-                            </div>
-                        </div>
                         <div className="row">
                             <div className="col">
                                 <FloorplanCanvasView />
@@ -102,12 +98,12 @@ export const FloorplanEditorView: FC<{}> = props =>
                         </div>
                         <div className="row justify-content-between mt-2">
                             <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 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>
                     </NitroCardContentView>

src/views/floorplan-editor/common/FloorplanEditor.ts

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

src/views/floorplan-editor/views/FloorplanOptionsView.tsx

@@ -1,20 +1,75 @@
-import { FC } from 'react';
+import { FC, useCallback, useState } from 'react';
+import { LocalizeText } from '../../../api';
 import { NitroCardGridItemView, NitroCardGridView } from '../../../layout';
+import { FloorAction } from '../common/Constants';
+import { FloorplanEditor } from '../common/FloorplanEditor';
 import { useFloorplanEditorContext } from '../context/FloorplanEditorContext';
 
 export const FloorplanOptionsView: FC<{}> = props =>
 {
     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 (
         <>
-        <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>
+            </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>
         </>
     );
 }