From fd48e7f2e74c8540ef816385fa0f2216fec9cc1a Mon Sep 17 00:00:00 2001 From: Luke McFarlane Date: Tue, 13 Aug 2024 16:26:57 +1000 Subject: [PATCH 1/3] Created react DOM icon/button/styling, updated map component to use custom control Signed-off-by: Luke McFarlane --- app/src/App.css | 21 +++++++++++ .../components/map/center-control-icon.tsx | 22 ++++++++++++ app/src/gui/components/map/center-control.tsx | 35 +++++++++++++++++++ app/src/gui/fields/maps/MapWrapper.tsx | 3 ++ 4 files changed, 81 insertions(+) create mode 100644 app/src/gui/components/map/center-control-icon.tsx create mode 100644 app/src/gui/components/map/center-control.tsx diff --git a/app/src/App.css b/app/src/App.css index ca0fe3c41..df4dd4d7c 100644 --- a/app/src/App.css +++ b/app/src/App.css @@ -25,3 +25,24 @@ background-color: #e0e0e0; font-weight:700 } + +.ol-center-button { + padding: 1px; + display: flex; + justify-content: center; + align-items: center; + background-color: rgb(23 23 23); + border-radius: 6px; +} + +.ol-center-box { + position: absolute; + right: 12px; + bottom: 128px; + background-color: white; + border-radius: 6px; + display: flex; + flex-direction: column; + gap: 12px; + padding: 12px; +} \ No newline at end of file diff --git a/app/src/gui/components/map/center-control-icon.tsx b/app/src/gui/components/map/center-control-icon.tsx new file mode 100644 index 000000000..bbd8386d6 --- /dev/null +++ b/app/src/gui/components/map/center-control-icon.tsx @@ -0,0 +1,22 @@ +/** + * Creates an SVG icon for the center control button. + * + * @returns {SVGSVGElement} - The SVG element representing the center control icon. + */ +export const CenterControlIcon = () => { + const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); + svg.setAttribute('width', '24'); + svg.setAttribute('height', '24'); + svg.setAttribute('viewBox', '0 0 24 24'); + + const path = document.createElementNS('http://www.w3.org/2000/svg', 'path'); + path.setAttribute( + 'd', + 'M12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm8.94-3c-.46-4.17-3.77-7.48-7.94-7.94V1h-2v2.06C6.83 3.52 3.52 6.83 3.06 11H1v2h2.06c.46 4.17 3.77 7.48 7.94 7.94V23h2v-2.06c4.17-.46 7.48-3.77 7.94-7.94H23v-2h-2.06zM12 19c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z' + ); + path.setAttribute('fill', '#ffffff'); + + svg.appendChild(path); + + return svg; +}; diff --git a/app/src/gui/components/map/center-control.tsx b/app/src/gui/components/map/center-control.tsx new file mode 100644 index 000000000..f06527bfd --- /dev/null +++ b/app/src/gui/components/map/center-control.tsx @@ -0,0 +1,35 @@ +import {Control} from 'ol/control'; +import {Coordinate} from 'ol/coordinate'; +import {View} from 'ol'; +import {CenterControlIcon} from './center-control-icon'; + +/** + * Creates a custom control button that centers the map view to a specified coordinate. + * + * @param {View} view - The map view instance to be controlled. + * @param {Coordinate} center - The coordinate to which the map view should be centered. + * @returns {Control} - The custom control instance. + */ +export const createCenterControl = ( + view: View, + center: Coordinate +): Control => { + const button = document.createElement('button'); + button.className = 'ol-center-button'; + + button.appendChild(CenterControlIcon()); + + const handleClick = () => { + view.setCenter(center); + }; + + button.addEventListener('click', handleClick); + + const element = document.createElement('div'); + element.className = 'ol-center-box'; + element.appendChild(button); + + return new Control({ + element: element, + }); +}; diff --git a/app/src/gui/fields/maps/MapWrapper.tsx b/app/src/gui/fields/maps/MapWrapper.tsx index 58a8a782a..dc74fc639 100644 --- a/app/src/gui/fields/maps/MapWrapper.tsx +++ b/app/src/gui/fields/maps/MapWrapper.tsx @@ -64,6 +64,7 @@ interface MapProps extends ButtonProps { import {AppBar, Dialog, IconButton, Toolbar, Typography} from '@mui/material'; import Feature from 'ol/Feature'; import {Geometry} from 'ol/geom'; +import {createCenterControl} from '../../components/map/center-control'; const styles = { mapContainer: { @@ -134,6 +135,8 @@ function MapWrapper(props: MapProps) { controls: [], }); + theMap.addControl(createCenterControl(theMap.getView(), center)); + theMap.getView().setCenter(center); return theMap; From 867c317ef86ba895bba6c5575400e556442ceebb Mon Sep 17 00:00:00 2001 From: Peter Baker Date: Thu, 15 Aug 2024 08:16:51 +1000 Subject: [PATCH 2/3] making node modules purge script executable Signed-off-by: Peter Baker --- purge.sh | 0 1 file changed, 0 insertions(+), 0 deletions(-) mode change 100644 => 100755 purge.sh diff --git a/purge.sh b/purge.sh old mode 100644 new mode 100755 From 80c9226423329a1eec92d3bca703ce459e386213 Mon Sep 17 00:00:00 2001 From: Luke McFarlane Date: Thu, 15 Aug 2024 15:13:50 +1000 Subject: [PATCH 3/3] Moved svg into separate file, generalised function for creating dom icons, updated button Signed-off-by: Luke McFarlane --- .../components/map/center-control-icon.tsx | 22 ------------- app/src/gui/components/map/center-control.tsx | 12 +++++-- app/src/gui/components/map/dom-icon.tsx | 32 +++++++++++++++++++ app/src/target.svg | 5 +++ 4 files changed, 47 insertions(+), 24 deletions(-) delete mode 100644 app/src/gui/components/map/center-control-icon.tsx create mode 100644 app/src/gui/components/map/dom-icon.tsx create mode 100644 app/src/target.svg diff --git a/app/src/gui/components/map/center-control-icon.tsx b/app/src/gui/components/map/center-control-icon.tsx deleted file mode 100644 index bbd8386d6..000000000 --- a/app/src/gui/components/map/center-control-icon.tsx +++ /dev/null @@ -1,22 +0,0 @@ -/** - * Creates an SVG icon for the center control button. - * - * @returns {SVGSVGElement} - The SVG element representing the center control icon. - */ -export const CenterControlIcon = () => { - const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); - svg.setAttribute('width', '24'); - svg.setAttribute('height', '24'); - svg.setAttribute('viewBox', '0 0 24 24'); - - const path = document.createElementNS('http://www.w3.org/2000/svg', 'path'); - path.setAttribute( - 'd', - 'M12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm8.94-3c-.46-4.17-3.77-7.48-7.94-7.94V1h-2v2.06C6.83 3.52 3.52 6.83 3.06 11H1v2h2.06c.46 4.17 3.77 7.48 7.94 7.94V23h2v-2.06c4.17-.46 7.48-3.77 7.94-7.94H23v-2h-2.06zM12 19c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z' - ); - path.setAttribute('fill', '#ffffff'); - - svg.appendChild(path); - - return svg; -}; diff --git a/app/src/gui/components/map/center-control.tsx b/app/src/gui/components/map/center-control.tsx index f06527bfd..1fefb5ae1 100644 --- a/app/src/gui/components/map/center-control.tsx +++ b/app/src/gui/components/map/center-control.tsx @@ -1,7 +1,8 @@ import {Control} from 'ol/control'; import {Coordinate} from 'ol/coordinate'; import {View} from 'ol'; -import {CenterControlIcon} from './center-control-icon'; +import {CreateDomIcon} from './dom-icon'; +import src from '../../../target.svg'; /** * Creates a custom control button that centers the map view to a specified coordinate. @@ -17,7 +18,14 @@ export const createCenterControl = ( const button = document.createElement('button'); button.className = 'ol-center-button'; - button.appendChild(CenterControlIcon()); + button.appendChild( + CreateDomIcon({ + src, + width: 24, + height: 24, + alt: 'Center map', + }) + ); const handleClick = () => { view.setCenter(center); diff --git a/app/src/gui/components/map/dom-icon.tsx b/app/src/gui/components/map/dom-icon.tsx new file mode 100644 index 000000000..4961d4c91 --- /dev/null +++ b/app/src/gui/components/map/dom-icon.tsx @@ -0,0 +1,32 @@ +interface CenterControlIconProps { + src: string; + width: number; + height: number; + alt: string; +} + +/** + * Creates a DOM image element with the specified properties. + * + * @param {CenterControlIconProps} props - The properties for the image element. + * @param {string} props.src - The source URL of the image. + * @param {number} props.width - The width of the image in pixels. + * @param {number} props.height - The height of the image in pixels. + * @param {string} props.alt - The alternative text for the image. + * @returns {HTMLImageElement} - The created image element. + */ +export const CreateDomIcon = ({ + src, + width, + height, + alt, +}: CenterControlIconProps) => { + const img = document.createElement('img'); + + img.width = width; + img.height = height; + img.src = src; + img.alt = alt; + + return img; +}; diff --git a/app/src/target.svg b/app/src/target.svg new file mode 100644 index 000000000..ea0c2ed43 --- /dev/null +++ b/app/src/target.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file