From ac5658424ec1a9676cff9e643e2bdabdcd7c3690 Mon Sep 17 00:00:00 2001 From: andreicristian97 <46008622+andreicristian97@users.noreply.github.com> Date: Thu, 18 Apr 2024 18:02:16 +0000 Subject: [PATCH 1/5] Adjust size of defauly map base polygon --- frontend/src/features/maps/routes/MapCreateForm.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/frontend/src/features/maps/routes/MapCreateForm.tsx b/frontend/src/features/maps/routes/MapCreateForm.tsx index 6f918a94f..db6e73de2 100644 --- a/frontend/src/features/maps/routes/MapCreateForm.tsx +++ b/frontend/src/features/maps/routes/MapCreateForm.tsx @@ -129,11 +129,11 @@ export default function MapCreateForm() { geometry: { rings: [ [ - { x: -5_000.0, y: -5_000.0 }, - { x: -5_000.0, y: 5_000.0 }, - { x: 5_000.0, y: 5_000.0 }, - { x: 5_000.0, y: -5_000.0 }, - { x: -5_000.0, y: -5_000.0 }, + { x: -500.0, y: -500.0 }, + { x: -500.0, y: 500.0 }, + { x: 500.0, y: 500.0 }, + { x: 500.0, y: -500.0 }, + { x: -500.0, y: -500.0 }, ], ], srid: 4326, From 6b03f65705163f411cb2a17c97593dde93c29a37 Mon Sep 17 00:00:00 2001 From: andreicristian97 <46008622+andreicristian97@users.noreply.github.com> Date: Thu, 18 Apr 2024 18:03:15 +0000 Subject: [PATCH 2/5] Adjust position of initial view to have it centered on 0, 0. Note: to analyse a better calculation solution (currently hardcoded values of widgets) --- .../src/features/map_planning/components/BaseStage.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/frontend/src/features/map_planning/components/BaseStage.tsx b/frontend/src/features/map_planning/components/BaseStage.tsx index dd99e8012..58d548e5c 100644 --- a/frontend/src/features/map_planning/components/BaseStage.tsx +++ b/frontend/src/features/map_planning/components/BaseStage.tsx @@ -62,8 +62,8 @@ export const BaseStage = ({ // Represents the state of the stage const [stage, setStage] = useState({ scale: 1, - x: 0, - y: 0, + x: Math.floor((window.innerWidth - 600) / 2), + y: Math.floor((window.innerHeight - 64 - 135) / 2), }); // Represents the state of the current selection rectangle @@ -97,8 +97,8 @@ export const BaseStage = ({ useEffect(() => { if (viewRect.width !== 0 || viewRect.height !== 0) return; updateViewRect({ - x: 0, - y: 0, + x: Math.floor((window.innerWidth - 600) / 2), + y: Math.floor((window.innerHeight - 64 - 135) / 2), width: Math.floor(window.innerWidth / stage.scale), height: Math.floor(window.innerHeight / stage.scale), }); From af451cd18b73109fd8e3dc6f6eff8f4862a0c13b Mon Sep 17 00:00:00 2001 From: andreicristian97 <46008622+andreicristian97@users.noreply.github.com> Date: Thu, 18 Apr 2024 19:32:53 +0000 Subject: [PATCH 3/5] 1113 Comment explaining calculation for default view --- .../src/features/map_planning/components/BaseStage.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/frontend/src/features/map_planning/components/BaseStage.tsx b/frontend/src/features/map_planning/components/BaseStage.tsx index 58d548e5c..22a09a1c3 100644 --- a/frontend/src/features/map_planning/components/BaseStage.tsx +++ b/frontend/src/features/map_planning/components/BaseStage.tsx @@ -62,8 +62,9 @@ export const BaseStage = ({ // Represents the state of the stage const [stage, setStage] = useState({ scale: 1, - x: Math.floor((window.innerWidth - 600) / 2), - y: Math.floor((window.innerHeight - 64 - 135) / 2), + // make 0,0 the center of the visible map + x: Math.floor((window.innerWidth - 300 - 300) / 2), // 300px is default width of each toolbar + y: Math.floor((window.innerHeight - 64 - 133) / 2), // 64px is height of navbar, 133px is height of timeline }); // Represents the state of the current selection rectangle @@ -97,8 +98,9 @@ export const BaseStage = ({ useEffect(() => { if (viewRect.width !== 0 || viewRect.height !== 0) return; updateViewRect({ - x: Math.floor((window.innerWidth - 600) / 2), - y: Math.floor((window.innerHeight - 64 - 135) / 2), + // make 0,0 the center of the visible map + x: Math.floor((window.innerWidth - 300 - 300) / 2), // 300px is default width of each toolbar + y: Math.floor((window.innerHeight - 64 - 133) / 2), // 64px is height of navbar, 133px is height of timeline width: Math.floor(window.innerWidth / stage.scale), height: Math.floor(window.innerHeight / stage.scale), }); From 110cef1ca23a7e9c522f476e83c7b9ca973a13cf Mon Sep 17 00:00:00 2001 From: andreicristian97 <46008622+andreicristian97@users.noreply.github.com> Date: Sun, 21 Apr 2024 17:05:48 +0000 Subject: [PATCH 4/5] Add comment to describe code changes, add changelog --- doc/changelog.md | 2 +- .../map_planning/components/BaseStage.tsx | 19 +++++++++++++++---- 2 files changed, 16 insertions(+), 5 deletions(-) diff --git a/doc/changelog.md b/doc/changelog.md index 08db20a38..65d20b2cc 100644 --- a/doc/changelog.md +++ b/doc/changelog.md @@ -11,7 +11,7 @@ Syntax: `- short text describing the change _(Your Name)_` - Added Meeting Agenda&Notes for 15.04.2024 9:00 _(Markus Raab, Daniel)_ - _()_ - _()_ -- _()_ +- Adjusted size and positon of initial view of map, as well as default map polygon, to have entire map in view by default _(Andrei Dinu)_ - _()_ - _()_ - _()_ diff --git a/frontend/src/features/map_planning/components/BaseStage.tsx b/frontend/src/features/map_planning/components/BaseStage.tsx index 22a09a1c3..bc8babee2 100644 --- a/frontend/src/features/map_planning/components/BaseStage.tsx +++ b/frontend/src/features/map_planning/components/BaseStage.tsx @@ -62,7 +62,15 @@ export const BaseStage = ({ // Represents the state of the stage const [stage, setStage] = useState({ scale: 1, - // make 0,0 the center of the visible map + /** + * Make 0,0 the center of the visible map + * We need the coordinates of the top left corent of the map. For this, it is enough to calculate the actual width and height of the visible part of the map + * We use inner width/height as base for the calcilation, from which we need to subtract some values regarding the visible elements or widgets + * For width, we subtract twice the default width of the Toolbar element (currently hardcoded on init to 300px) + * For height, we subtract the height of the navbar (64px, coning from height h-16 equaling 4rems), and height of Timeline (harder to specify origin of value, + * as it is a result of multiple style rules, total is 133px). + * Values are right now hardcoded as we don't have a better way to get those, should be changed if Toolbars or other elements change! + * */ x: Math.floor((window.innerWidth - 300 - 300) / 2), // 300px is default width of each toolbar y: Math.floor((window.innerHeight - 64 - 133) / 2), // 64px is height of navbar, 133px is height of timeline }); @@ -98,9 +106,12 @@ export const BaseStage = ({ useEffect(() => { if (viewRect.width !== 0 || viewRect.height !== 0) return; updateViewRect({ - // make 0,0 the center of the visible map - x: Math.floor((window.innerWidth - 300 - 300) / 2), // 300px is default width of each toolbar - y: Math.floor((window.innerHeight - 64 - 133) / 2), // 64px is height of navbar, 133px is height of timeline + /** + * We also need to set the original viewRect if not already defined. + * See rules from above (stage) for explanation of used values. + */ + x: Math.floor((window.innerWidth - 300 - 300) / 2), + y: Math.floor((window.innerHeight - 64 - 133) / 2), width: Math.floor(window.innerWidth / stage.scale), height: Math.floor(window.innerHeight / stage.scale), }); From 6e14793c00a44d90de9fa100f393cadf85c47128 Mon Sep 17 00:00:00 2001 From: andreicristian97 <46008622+andreicristian97@users.noreply.github.com> Date: Sun, 21 Apr 2024 17:41:32 +0000 Subject: [PATCH 5/5] Change approach to use containerref for real size values --- .../map_planning/components/BaseStage.tsx | 26 +++++++------------ 1 file changed, 9 insertions(+), 17 deletions(-) diff --git a/frontend/src/features/map_planning/components/BaseStage.tsx b/frontend/src/features/map_planning/components/BaseStage.tsx index bc8babee2..725ad47f4 100644 --- a/frontend/src/features/map_planning/components/BaseStage.tsx +++ b/frontend/src/features/map_planning/components/BaseStage.tsx @@ -62,17 +62,8 @@ export const BaseStage = ({ // Represents the state of the stage const [stage, setStage] = useState({ scale: 1, - /** - * Make 0,0 the center of the visible map - * We need the coordinates of the top left corent of the map. For this, it is enough to calculate the actual width and height of the visible part of the map - * We use inner width/height as base for the calcilation, from which we need to subtract some values regarding the visible elements or widgets - * For width, we subtract twice the default width of the Toolbar element (currently hardcoded on init to 300px) - * For height, we subtract the height of the navbar (64px, coning from height h-16 equaling 4rems), and height of Timeline (harder to specify origin of value, - * as it is a result of multiple style rules, total is 133px). - * Values are right now hardcoded as we don't have a better way to get those, should be changed if Toolbars or other elements change! - * */ - x: Math.floor((window.innerWidth - 300 - 300) / 2), // 300px is default width of each toolbar - y: Math.floor((window.innerHeight - 64 - 133) / 2), // 64px is height of navbar, 133px is height of timeline + x: 0, + y: 0, }); // Represents the state of the current selection rectangle @@ -105,13 +96,14 @@ export const BaseStage = ({ const viewRect = useMapStore((store) => store.untrackedState.editorViewRect); useEffect(() => { if (viewRect.width !== 0 || viewRect.height !== 0) return; + // If we don't have a view or height set, set the initial stage and view rectangle to be centered on coordinates (0,0) + + stage.x = Math.floor((containerRef.current?.offsetWidth ?? 0) / 2); + stage.y = Math.floor((containerRef.current?.offsetHeight ?? 0) / 2); + updateViewRect({ - /** - * We also need to set the original viewRect if not already defined. - * See rules from above (stage) for explanation of used values. - */ - x: Math.floor((window.innerWidth - 300 - 300) / 2), - y: Math.floor((window.innerHeight - 64 - 133) / 2), + x: Math.floor((containerRef.current?.offsetWidth ?? 0) / 2), + y: Math.floor((containerRef.current?.offsetHeight ?? 0) / 2), width: Math.floor(window.innerWidth / stage.scale), height: Math.floor(window.innerHeight / stage.scale), });