From 6144d2c3b8d631a8d7ae46a1870ca1ea6c95350c Mon Sep 17 00:00:00 2001 From: duckietm Date: Fri, 7 Mar 2025 10:27:29 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=8D=BA=20Release=20of=20the=20FloorEditor?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Zoom in / out - A button for full grid select / deselect - Drag to select tiles or deselect tiles --- .../icon-active-squaresselect.png | Bin 0 -> 3092 bytes .../images/floorplaneditor/icon-deselect.png | Bin 0 -> 1918 bytes .../floorplaneditor/icon-squaresselect.png | Bin 0 -> 3196 bytes src/assets/styles/icons.scss | 18 +++++ .../floorplan-editor/FloorplanEditorView.scss | 2 +- .../views/FloorplanCanvasView.tsx | 12 +++- .../views/FloorplanOptionsView.tsx | 66 ++++++++++-------- 7 files changed, 68 insertions(+), 30 deletions(-) create mode 100644 src/assets/images/floorplaneditor/icon-active-squaresselect.png create mode 100644 src/assets/images/floorplaneditor/icon-deselect.png create mode 100644 src/assets/images/floorplaneditor/icon-squaresselect.png diff --git a/src/assets/images/floorplaneditor/icon-active-squaresselect.png b/src/assets/images/floorplaneditor/icon-active-squaresselect.png new file mode 100644 index 0000000000000000000000000000000000000000..ea9d9f7e873423165990e3de4ecb558e6a69a8ea GIT binary patch literal 3092 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 Fe*l~7W~KlD literal 0 HcmV?d00001 diff --git a/src/assets/images/floorplaneditor/icon-squaresselect.png b/src/assets/images/floorplaneditor/icon-squaresselect.png new file mode 100644 index 0000000000000000000000000000000000000000..351098a3a5fb4a7b5d435c01f0e1d5eb00776a9c GIT binary patch literal 3196 zcmbVP3piA1A3s`!$}P2`tT8D{b1~!6j2X9PiZa$^YEWd%9AnDNnP!F=_e-e{Vdc^) zmzau8NKqJDtS(E1qD{I`EhR;(NdlOMgsuJPAXus_JLwV0LbC;$;e^(RV0GTCL@OzM%vjTNKzt9zyrlhgp?P|7ZIgo@EK)_&e7#t1-BT%9+zL+UR@kMLCGEhJfOUM<7 zxey;Q!^jMPLd0Yw?CO^oc!GIazGyB_aKnt(86aQSRVB3eIVWo`jTVTwUA z5?0L;g~h{?(Xj*~4pz*c@XeB`)O!{Bs{sI$0fno_$ z2s&`!EdFIVVPNMmGyCvM9GHI(adz%s_UuyWLy?1~ByBHE!gy)|p4Qx`y^s6zL2rB{;Hau+?J?krB>`JjwH>0jS zU3hNyFHm;$owY1Kzm!BCvoC7-;yq}+s}Du|%r|8Muy0FtGNapG)x4zU86~6YS%JDu zYRq^7=D`CeV-256=#b1m?6#qV9B#!=Xo+6$QNn}Bk=l!#wrp=7nOwdq*8Msyg;t>( zRTZLVQ^RkX938Rhi>xJ*JF<+H_6;uQgCN~eAnJ%*HAzj z*XvNZldmHlO=x(SVXuSK>iT4_v#zGMsXj)jVd!~Lf@i^4ZgyT?7|*!zModA&8^G>B zk}hV~m4!EC-|wy~dU~%ijS-h~R>peXFKphJlw#;nX>V#VempKN&SCpaTWziGuJ+u| zjz)m&#K6Fi_Jwcq^iy7$Fas%v&orf8yxJisRR*va(ug3oASMRdQ}Fl+?_P7_y6Vzk zNpQ;vvr?hZ`sJhUq|V(q?ez3REtHy>qil*JsD3B4jPQe@m;1(KSK5D=w$G`qw_RW*NEA^5G!c>H~86C(q)% zDW1@y?brQ@85yZ%^4k4d^{uTLK(G~l`Itk_{etDk?!SH!Mj(vc-v%CdeGi;Wf3f_w zsJ`+eUOzF+HOQbbsv!DXsZ*H$w?OB2B_q4!w({|j>PzXycdRNi)0T$@!RQD$OdETgsl8;Ztc-@B|MjPAg81KS9UEDP~ zy2oquumqD@o%*pYU&Wu~U{nC4_H!5{L= zx`Z}0&0*zO%-O7@+m_zNos37Q{*xrYt9Ao#1=amvk?94CwWqJ?$9J-%alQ!&7fzl( zW&`v(rFf)QT3z%$eWk_us0u*LYfXMzBbin)+^4!s5cp1ZULJIqWQ;4)0rqB1|5zLN zwi`m1R2*M=QxR&e#SZFb*9JtWlpbA}#Qg3NEo*u3F>3v#UNq2o-;~1!!2;rE-_n(U z>37gSPG-nF4Q&$JUdnwo|8N&?*Fxj9_234w63lsk+b&;A*5`=fs1D)#qX%AI%urhS zB#0y;wupDmc4ypja`bnTg^ro?(J4N=VXd1VtdG4=aF#U$Y7wVO0OIsN#< zie!U2AXe+p>xg!<930q^QgykBBklE zOY6kByu0s{tp!m=VBm2ptI%A@ZC5td@fU&0wBdoyp3{uA>()grI--#8@EyPWn0EEY z9bq3^^J-RES8NB8+L!Xov{WB?>#0OcrX6^BsPy;N5e>IPnnQ0oH#uL|*b5*ib{n4r z6uQA**rPJte9fgxlXQ|PK2J`%y0|ZJv^R~7Wv;yPp)gd?n%wxH{^w%7$BojhM|~q& zwo;c}G8pTQzcpwToN3!iEWX0i3(q)WBK=gj_MzuDz@C_^p}MssQ>epGUenJr+qkF+ z+djxuC_b&u_Y2%f%5PWKNUf6C91pBG~K@Remsqd#s4?rurgzY = props => FloorplanEditor.instance.zoomOut(); }; + // Handler for resetting zoom to original level (1.0) + const handleResetZoom = () => { + FloorplanEditor.instance._zoomLevel = 1.0; // Reset to default zoom + FloorplanEditor.instance.adjustCanvasSize(); + FloorplanEditor.instance.renderTiles(); + }; + useEffect(() => { return () => @@ -187,6 +194,9 @@ export const FloorplanCanvasView: FC = props => + diff --git a/src/components/floorplan-editor/views/FloorplanOptionsView.tsx b/src/components/floorplan-editor/views/FloorplanOptionsView.tsx index bb59d37..59d36da 100644 --- a/src/components/floorplan-editor/views/FloorplanOptionsView.tsx +++ b/src/components/floorplan-editor/views/FloorplanOptionsView.tsx @@ -1,4 +1,4 @@ -import { FC, useState } from 'react'; +import { FC, useState, useEffect } from 'react'; import { FaCaretLeft, FaCaretRight } from 'react-icons/fa'; import { LocalizeText } from '../../../api'; import { Column, Flex, LayoutGridItem, Slider, Text } from '../../../common'; @@ -17,14 +17,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(FloorplanEditor.instance.squareSelectMode); + + useEffect(() => + { + setIsSquareSelectMode(FloorplanEditor.instance.squareSelectMode); + }, []); + const selectAction = (action: number) => { setFloorAction(action); - FloorplanEditor.instance.actionSettings.currentAction = action; } + const toggleSquareSelectMode = () => + { + const newMode = !FloorplanEditor.instance.squareSelectMode; + FloorplanEditor.instance.setSquareSelectMode(newMode); + setIsSquareSelectMode(newMode); + } + const changeDoorDirection = () => { setVisualizationSettings(prevValue => @@ -47,11 +59,8 @@ export const FloorplanOptionsView: FC<{}> = props => const onFloorHeightChange = (value: number) => { if(isNaN(value) || (value <= 0)) value = 0; - if(value > 26) value = 26; - setFloorHeight(value); - FloorplanEditor.instance.actionSettings.currentHeight = value.toString(36); } @@ -60,9 +69,7 @@ export const FloorplanOptionsView: FC<{}> = props => setVisualizationSettings(prevValue => { const newValue = { ...prevValue }; - newValue.thicknessFloor = value; - return newValue; }); } @@ -72,9 +79,7 @@ export const FloorplanOptionsView: FC<{}> = props => setVisualizationSettings(prevValue => { const newValue = { ...prevValue }; - newValue.thicknessWall = value; - return newValue; }); } @@ -82,15 +87,11 @@ export const FloorplanOptionsView: FC<{}> = props => 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; }); } @@ -98,18 +99,14 @@ export const FloorplanOptionsView: FC<{}> = props => 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); } @@ -134,15 +131,19 @@ export const FloorplanOptionsView: FC<{}> = props => selectAction(FloorAction.DOWN) }> - selectAction(FloorAction.DOOR) }> - - - FloorplanEditor.instance.toggleSelectAll() }> - - - { FloorplanEditor.instance.setSquareSelectMode(!FloorplanEditor.instance.squareSelectMode);} }> - - + selectAction(FloorAction.DOOR) }> + + + FloorplanEditor.instance.toggleSelectAll() }> + + + + + + @@ -167,7 +168,16 @@ export const FloorplanOptionsView: FC<{}> = props => step={ 1 } value={ floorHeight } onChange={ event => onFloorHeightChange(event) } - renderThumb={ ({ style, ...rest }, state) =>
{ state.valueNow }
} /> + renderThumb={ ({ style, key, ...rest }, state) => ( +
+ {state.valueNow} +
+ )} + /> { LocalizeText('floor.plan.editor.room.options') }