-
Notifications
You must be signed in to change notification settings - Fork 39
feat(plugin): Drawing Navbar plugin #2950
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(plugin): Drawing Navbar plugin #2950
Conversation
554e3e7
to
57f3fde
Compare
bca5969
to
bd47a6c
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Reviewed 3 of 29 files at r1, 12 of 25 files at r2, 17 of 17 files at r3, 1 of 1 files at r4, all commit messages.
Reviewable status: all files reviewed, 12 unresolved discussions (waiting on @DamonU2 and @jolevesq)
packages/geoview-drawer/src/index-footer.tsx
line 37 at r3 (raw file):
// The callback used to redraw the GeoCharts in the GeoChartPanel callbackRedraw?: () => void;
Same comment as in index.tsx. Remove it?
packages/geoview-drawer/src/index-footer.tsx
line 118 at r3 (raw file):
export default DrawerPlugin; // Keep a reference to the Drawer Plugin as part of the geoviewPlugins property stored in the window object
Here you don't store it in geoviewPlugins like in index.tsx, normal?
packages/geoview-core/src/api/plugin/navbar-plugin.ts
line 19 at r3 (raw file):
export abstract class NavBarPlugin extends AbstractPlugin { // Store the created button panel object reactRoot?: Root;
It seems there's no need for a reactRoot for a NavBarPlugin, because they seem to be created inside the dom tree. Remove this attribute?
packages/geoview-drawer/src/buttons/style.tsx
line 67 at r3 (raw file):
<ListItem sx={{ mb: 2 }}> <Typography variant="subtitle2">{getLocalizedMessage(displayLanguage, 'drawer.fillColour')}</Typography> <input type="color" value={style.fillColor} onChange={(e) => handleFillColorChange(e)} />
Minor detail. Here, you don't need to grab "e" in a callback. You can write it straight like: onChange={handleFillColorChange}
. The "e" should be sent to your callback handler automatically.
Same for other 2 handlers below of course.
packages/geoview-drawer/src/index.tsx
line 27 at r3 (raw file):
* Create a class for the plugin instance */ class DrawerPlugin extends NavBarPlugin {
Nice rebasing work that needed to be done here probably on the overrides? 👍
packages/geoview-drawer/src/index.tsx
line 120 at r3 (raw file):
} override onAdd(): void {
Can probably remove the override onAdd()
altogether, if not doing anything other than calling the super. You can keep it too, but maybe write a reason why, because it's technically not necessary.
packages/geoview-drawer/src/index.tsx
line 128 at r3 (raw file):
* Handles when a redraw callback has been provided by GeoChartPanel */ handleProvideCallbackRedraw(callbackRedraw: () => void): void {
This function seems to have been copied from GeoChart maybe? Is it really used for the Drawer? Remove it and remove the callbackRedraw attribute (this.callbackRedraw)? That was something very specific for GeoChart, because of the Chart.js component that needed to have the dom visible to draw the Chart and was conflicting with react timings. I'm guessing not necessary here, but could be wrong.
packages/geoview-core/src/api/event-processors/event-processor-children/drawer-event-processor.ts
line 120 at r3 (raw file):
// Get the map viewer instance const viewer = MapEventProcessor.getMapViewer(mapId); if (!viewer) return;
Maybe throw exceptions in those 2 cases when a drawerState isn't defined or when the mapViewer can't be found? For the latter we already have a specific exception for that: MapViewerNotFoundError
.
Here and in a couple other places in this file.
packages/geoview-core/src/api/event-processors/event-processor-children/drawer-event-processor.ts
line 133 at r3 (raw file):
// Initialize drawing interaction const draw = viewer.initDrawInteractions(`draw-${currentGeomType}`, currentGeomType, currentStyle);
Nice reusing of the draw interactions from the MapViewer.
packages/geoview-drawer/src/buttons/geometry-picker.tsx
line 64 at r3 (raw file):
tooltipPlacement="left" size="small" onClick={() => handleGeometrySelect('Point')}
This is most likely fine as-is, but you could make it ever better / more performant.
You could create a handleGeometrySelectPoint
(with a useCallback) and in that handler do the call the say handleGeometrySelect('Point'). That way the rendering section would only be onClick={handleGeometrySelectPoint}
.
The reason for all this is that having: onClick={() => handleGeometrySelect('Point')}
means that a new callback is created on every render of the component and assigned to the onClick. With the other approach, the same function is recycled on every render.
Same comment in the 3 other places in the render below of course.
Not a priority.
packages/geoview-drawer/src/draw-panel-footer.tsx
line 17 at r3 (raw file):
}; // type ConfigProps = {
Do a quick code cleanup here and the logger line up top?
packages/geoview-core/src/core/stores/store-interface-and-intial-values/drawer-state.ts
line 412 at r3 (raw file):
export const useDrawerStoreActions = (): DrawerActions => useStore(useGeoViewStore(), (state) => state.drawerState.actions); export const useDrawerIsDrawing = (): boolean => useStore(useGeoViewStore(), (state) => state.drawerState.actions.getIsDrawing());
I didn't know you could return a "function outcome" to a useStore callback like what you're doing here ...actions.getIsDrawing()
!
That actually works? 😮 Interesting!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Reviewed 1 of 29 files at r1, 4 of 25 files at r2, 3 of 17 files at r3, 1 of 1 files at r4, all commit messages.
Reviewable status: all files reviewed, 21 unresolved discussions (waiting on @DamonU2 and @MatthewMuehlhauserNRCan)
packages/geoview-core/src/api/config/types/map-schema-types.ts
line 92 at r4 (raw file):
| 'geochart' | 'guide' | 'drawer';
Same here for footer and core
rush.json
line 46 at r4 (raw file):
}, { "packageName": "geoview-drawer",
Should we call this geoview-drawing and drawing plugin?
packages/geoview-core/src/core/stores/geoview-store.ts
line 91 at r4 (raw file):
if (config.navBar?.includes('drawer')) { set({ drawerState: initializeDrawerState(set, get) }); get().drawerState.setDefaultConfigValues(config);
Config default is not set like the other plugin?
packages/geoview-core/src/api/event-processors/event-processor-children/drawer-event-processor.ts
line 214 at r4 (raw file):
* @param {string} mapId The map ID */ public static toggleDrawing(mapId: string): void {
Do we need toggle, should we have only start and stop?
packages/geoview-core/src/api/event-processors/event-processor-children/drawer-event-processor.ts
line 238 at r4 (raw file):
if (!viewer) return; const typesToEdit = geomTypes || ['Point', 'LineString', 'Polygon', 'Circle'];
These default value and maybe other. Can they be derived directly from the drawing default config?
packages/geoview-core/src/api/event-processors/event-processor-children/drawer-event-processor.ts
line 308 at r4 (raw file):
* @param geomTypes Array of geometry types to toggle editing */ public static toggleEditing(mapId: string, geomTypes?: string[]): void {
Same as above, do we need toggle?
packages/geoview-core/src/api/event-processors/event-processor-children/drawer-event-processor.ts
line 358 at r4 (raw file):
* @param mapId The map ID */ public static changeGeomType(mapId: string): void {
There is o geomType in the function parameter?
packages/geoview-core/src/api/config/types/config-validation-schema.json
line 148 at r4 (raw file):
"time-slider", "geochart", "drawer"
Does it need to be in footer?
packages/geoview-core/src/api/config/types/config-validation-schema.json
line 349 at r4 (raw file):
"enum": [ "swiper", "drawer"
Should not be in core as it is for map package
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Reviewable status: all files reviewed, 22 unresolved discussions (waiting on @DamonU2 and @MatthewMuehlhauserNRCan)
packages/geoview-core/src/core/stores/store-interface-and-intial-values/drawer-state.ts
line 29 at r4 (raw file):
}; type TypeCorePackagesConfig = {
Should it br TypeNavBatPAckageConfig?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Reviewed 1 of 25 files at r2, 1 of 17 files at r3.
Reviewable status: all files reviewed, 24 unresolved discussions (waiting on @DamonU2 and @MatthewMuehlhauserNRCan)
packages/geoview-drawer/package.json
line 20 at r4 (raw file):
}, "peerDependencies": { "geoview-core": "workspace:~1.0.0",
Will need to be ^2.0.0
packages/geoview-drawer/package.json
line 22 at r4 (raw file):
"geoview-core": "workspace:~1.0.0", "react": "^18.3.1", "react-dom": "^18.3.1"
miss "zustand": "~5.0.0"
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Reviewed 5 of 25 files at r2, 10 of 17 files at r3.
Reviewable status: all files reviewed, 27 unresolved discussions (waiting on @DamonU2 and @MatthewMuehlhauserNRCan)
packages/geoview-drawer/src/draw-panel-footer.tsx
line 33 at r4 (raw file):
const config = { style: { fillColor: '#ffcc33',
I see default value in many files... can we regroup in the default package config?
packages/geoview-drawer/src/draw-panel-footer.tsx
line 41 at r4 (raw file):
const { cgpv } = window as TypeWindow; // const { useTheme } = cgpv.ui;
dead code and 2 line below
packages/geoview-drawer/src/measurement-styles.css
line 2 at r4 (raw file):
/* Measurement tooltip styles */ .ol-tooltip {
Does this ol style will conflict with other ol-tooltip we may have?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Reviewable status: 18 of 32 files reviewed, 26 unresolved discussions (waiting on @Alex-NRCan, @DamonU2, and @jolevesq)
rush.json
line 46 at r4 (raw file):
Previously, jolevesq (Johann Levesque) wrote…
Should we call this geoview-drawing and drawing plugin?
I went back and forth on this one between geoview-draw, geoview-drawing, and geoview-drawer. I landed on drawer because it followed the naming of other plugins (time-slider, swiper) and I thought it would be less likely to have any unintended naming overlaps with other packages in OL or even in the viewer itself.
packages/geoview-core/src/api/config/types/config-validation-schema.json
line 148 at r4 (raw file):
Previously, jolevesq (Johann Levesque) wrote…
Does it need to be in footer?
No, it was at first, but I can remove it.
packages/geoview-core/src/api/config/types/config-validation-schema.json
line 349 at r4 (raw file):
Previously, jolevesq (Johann Levesque) wrote…
Should not be in core as it is for map package
Done.
packages/geoview-core/src/api/config/types/map-schema-types.ts
line 92 at r4 (raw file):
Previously, jolevesq (Johann Levesque) wrote…
Same here for footer and core
Done.
packages/geoview-core/src/api/event-processors/event-processor-children/drawer-event-processor.ts
line 120 at r3 (raw file):
Previously, Alex-NRCan (Alex) wrote…
Maybe throw exceptions in those 2 cases when a drawerState isn't defined or when the mapViewer can't be found? For the latter we already have a specific exception for that:
MapViewerNotFoundError
.Here and in a couple other places in this file.
Done.
packages/geoview-core/src/api/event-processors/event-processor-children/drawer-event-processor.ts
line 133 at r3 (raw file):
Previously, Alex-NRCan (Alex) wrote…
Nice reusing of the draw interactions from the MapViewer.
Done.
packages/geoview-core/src/api/plugin/navbar-plugin.ts
line 19 at r3 (raw file):
Previously, Alex-NRCan (Alex) wrote…
It seems there's no need for a reactRoot for a NavBarPlugin, because they seem to be created inside the dom tree. Remove this attribute?
Done.
packages/geoview-core/src/core/stores/geoview-store.ts
line 91 at r4 (raw file):
Previously, jolevesq (Johann Levesque) wrote…
Config default is not set like the other plugin?
I did it similar to the time-slider because I'm setting the initial values from the config.
packages/geoview-core/src/core/stores/store-interface-and-intial-values/drawer-state.ts
line 412 at r3 (raw file):
Previously, Alex-NRCan (Alex) wrote…
I didn't know you could return a "function outcome" to a useStore callback like what you're doing here
...actions.getIsDrawing()
!
That actually works? 😮 Interesting!
Lol. I wasn't sure if it was allowed or not, but it was working, so I went with it expecting that I may need to change some things.
packages/geoview-drawer/package.json
line 20 at r4 (raw file):
Previously, jolevesq (Johann Levesque) wrote…
Will need to be ^2.0.0
Done.
packages/geoview-drawer/package.json
line 22 at r4 (raw file):
Previously, jolevesq (Johann Levesque) wrote…
miss "zustand": "~5.0.0"
Done.
packages/geoview-drawer/src/draw-panel-footer.tsx
line 17 at r3 (raw file):
Previously, Alex-NRCan (Alex) wrote…
Do a quick code cleanup here and the logger line up top?
Right, there are the three footer files (index-footer, draw-panel-footer, and drawer-style) which are from my initial pass at the plugin, before switching to the navbar version. It's possible they may be used in the future if we want to also support a more built out draw plugin (although, this would likely end up in the app-bar anyway), but at the moment it's kind of just there. The entire drawer-state didn't exist at this point and it was all handled locally in this file, so it would likely need a lot of updates besides just this. It may be worth just deleting these three files?
packages/geoview-drawer/src/index.tsx
line 27 at r3 (raw file):
Previously, Alex-NRCan (Alex) wrote…
Nice rebasing work that needed to be done here probably on the overrides? 👍
It wasn't too bad and I was mostly able to just copy from the other plugins.
packages/geoview-drawer/src/index.tsx
line 120 at r3 (raw file):
Previously, Alex-NRCan (Alex) wrote…
Can probably remove the
override onAdd()
altogether, if not doing anything other than calling the super. You can keep it too, but maybe write a reason why, because it's technically not necessary.
Done.
packages/geoview-drawer/src/index.tsx
line 128 at r3 (raw file):
Previously, Alex-NRCan (Alex) wrote…
This function seems to have been copied from GeoChart maybe? Is it really used for the Drawer? Remove it and remove the callbackRedraw attribute (this.callbackRedraw)? That was something very specific for GeoChart, because of the Chart.js component that needed to have the dom visible to draw the Chart and was conflicting with react timings. I'm guessing not necessary here, but could be wrong.
Yes, good catch.
packages/geoview-drawer/src/index-footer.tsx
line 37 at r3 (raw file):
Previously, Alex-NRCan (Alex) wrote…
Same comment as in index.tsx. Remove it?
Done
packages/geoview-drawer/src/index-footer.tsx
line 118 at r3 (raw file):
Previously, Alex-NRCan (Alex) wrote…
Here you don't store it in geoviewPlugins like in index.tsx, normal?
Same as previous comment, these files were from the footerbar version of the plugin, and are no longer used, but kept just for reference if we decide to create a more built out version of the draw plugin. Will likely need major updates if used again.
packages/geoview-drawer/src/measurement-styles.css
line 2 at r4 (raw file):
Previously, jolevesq (Johann Levesque) wrote…
Does this ol style will conflict with other ol-tooltip we may have?
Done. Made it specific to the drawer plugin
packages/geoview-drawer/src/buttons/geometry-picker.tsx
line 64 at r3 (raw file):
Previously, Alex-NRCan (Alex) wrote…
This is most likely fine as-is, but you could make it ever better / more performant.
You could create ahandleGeometrySelectPoint
(with a useCallback) and in that handler do the call the say handleGeometrySelect('Point'). That way the rendering section would only beonClick={handleGeometrySelectPoint}
.The reason for all this is that having:
onClick={() => handleGeometrySelect('Point')}
means that a new callback is created on every render of the component and assigned to the onClick. With the other approach, the same function is recycled on every render.Same comment in the 3 other places in the render below of course.
Not a priority.
Done
packages/geoview-drawer/src/buttons/style.tsx
line 67 at r3 (raw file):
Previously, Alex-NRCan (Alex) wrote…
Minor detail. Here, you don't need to grab "e" in a callback. You can write it straight like:
onChange={handleFillColorChange}
. The "e" should be sent to your callback handler automatically.Same for other 2 handlers below of course.
Done
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Reviewable status: 18 of 32 files reviewed, 26 unresolved discussions (waiting on @Alex-NRCan, @DamonU2, and @MatthewMuehlhauserNRCan)
packages/geoview-core/src/api/config/types/config-validation-schema.json
line 148 at r4 (raw file):
Previously, MatthewMuehlhauserNRCan wrote…
No, it was at first, but I can remove it.
I think we should remove it, your nav bar is super clean
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Reviewed 2 of 17 files at r3, 2 of 14 files at r5.
Reviewable status: 20 of 32 files reviewed, 21 unresolved discussions (waiting on @Alex-NRCan, @DamonU2, and @MatthewMuehlhauserNRCan)
packages/geoview-core/src/api/event-processors/event-processor-children/drawer-event-processor.ts
line 214 at r4 (raw file):
Previously, jolevesq (Johann Levesque) wrote…
Do we need toggle, should we have only start and stop?
I see why we have toggling... it is ok
packages/geoview-drawer/src/index-footer.tsx
line 118 at r3 (raw file):
Previously, MatthewMuehlhauserNRCan wrote…
Same as previous comment, these files were from the footerbar version of the plugin, and are no longer used, but kept just for reference if we decide to create a more built out version of the draw plugin. Will likely need major updates if used again.
I think we should remove all footer reference
packages/geoview-drawer/src/drawer-style.ts
line 1 at r4 (raw file):
export const footerSxClasses = {
Should we call something else then footer?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Reviewed 1 of 14 files at r5.
Reviewable status: 21 of 32 files reviewed, 20 unresolved discussions (waiting on @Alex-NRCan, @DamonU2, and @MatthewMuehlhauserNRCan)
rush.json
line 46 at r4 (raw file):
Previously, MatthewMuehlhauserNRCan wrote…
I went back and forth on this one between geoview-draw, geoview-drawing, and geoview-drawer. I landed on drawer because it followed the naming of other plugins (time-slider, swiper) and I thought it would be less likely to have any unintended naming overlaps with other packages in OL or even in the viewer itself.
Perfect we keep drawer
197a12e
to
30a3f03
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Reviewable status: 21 of 32 files reviewed, 20 unresolved discussions (waiting on @Alex-NRCan, @DamonU2, and @jolevesq)
rush.json
line 46 at r4 (raw file):
Previously, jolevesq (Johann Levesque) wrote…
Perfect we keep drawer
Done.
packages/geoview-core/src/api/config/types/config-validation-schema.json
line 148 at r4 (raw file):
Previously, jolevesq (Johann Levesque) wrote…
I think we should remove it, your nav bar is super clean
Done.
packages/geoview-core/src/api/event-processors/event-processor-children/drawer-event-processor.ts
line 214 at r4 (raw file):
Previously, jolevesq (Johann Levesque) wrote…
I see why we have toggling... it is ok
It could, but it's a single button toggling the draw state, so that logic would likely have to live somewhere else.
packages/geoview-core/src/api/event-processors/event-processor-children/drawer-event-processor.ts
line 238 at r4 (raw file):
Previously, jolevesq (Johann Levesque) wrote…
These default value and maybe other. Can they be derived directly from the drawing default config?
Done.
packages/geoview-core/src/api/event-processors/event-processor-children/drawer-event-processor.ts
line 308 at r4 (raw file):
Previously, jolevesq (Johann Levesque) wrote…
Same as above, do we need toggle?
Same as other toggle. Both start and stop are handled by the same button, so the toggle holds the logic for deciding which to do.
packages/geoview-core/src/api/event-processors/event-processor-children/drawer-event-processor.ts
line 358 at r4 (raw file):
Previously, jolevesq (Johann Levesque) wrote…
There is o geomType in the function parameter?
Yeah, this is a badly named function. At this point, the geometry in the state has already been updated and this is just refreshing the drawing instance with the new geometry and the edit instances are stopped and restarted in case the layer group hadn't been created yet (draw-point, draw-linestring, draw-polygon, draw-circle).
packages/geoview-core/src/core/stores/store-interface-and-intial-values/drawer-state.ts
line 29 at r4 (raw file):
Previously, jolevesq (Johann Levesque) wrote…
Should it br TypeNavBatPAckageConfig?
Done.
packages/geoview-drawer/src/draw-panel-footer.tsx
line 33 at r4 (raw file):
Previously, jolevesq (Johann Levesque) wrote…
I see default value in many files... can we regroup in the default package config?
Removed footer files
packages/geoview-drawer/src/draw-panel-footer.tsx
line 41 at r4 (raw file):
Previously, jolevesq (Johann Levesque) wrote…
dead code and 2 line below
Removed footer files
packages/geoview-drawer/src/drawer-style.ts
line 1 at r4 (raw file):
Previously, jolevesq (Johann Levesque) wrote…
Should we call something else then footer?
Removed file as it's only for the footer
packages/geoview-drawer/src/index-footer.tsx
line 37 at r3 (raw file):
Previously, MatthewMuehlhauserNRCan wrote…
Done
Removed footer files
packages/geoview-drawer/src/index-footer.tsx
line 118 at r3 (raw file):
Previously, jolevesq (Johann Levesque) wrote…
I think we should remove all footer reference
Done.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Reviewed 7 of 25 files at r2, 9 of 17 files at r3, 1 of 1 files at r4, 13 of 14 files at r5, 9 of 9 files at r6, all commit messages.
Reviewable status: all files reviewed, 21 unresolved discussions (waiting on @Alex-NRCan and @jolevesq)
packages/geoview-core/src/core/stores/store-interface-and-intial-values/drawer-state.ts
line 11 at r5 (raw file):
import { DrawerEventProcessor } from '@/api/event-processors/event-processor-children/drawer-event-processor'; // GV Important: See notes in header of MapEventProcessor file for information on the paradigm to apply when working with DrawerEve ntProcessor vs DrawerState
Remove space in DrawerEve ntProcessor
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Reviewable status: 31 of 32 files reviewed, 21 unresolved discussions (waiting on @Alex-NRCan, @DamonU2, and @jolevesq)
packages/geoview-core/src/core/stores/store-interface-and-intial-values/drawer-state.ts
line 11 at r5 (raw file):
Previously, DamonU2 (Damon Ulmi) wrote…
Remove space in DrawerEve ntProcessor
Done.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Reviewed 1 of 1 files at r7, all commit messages.
Reviewable status: all files reviewed, 20 unresolved discussions (waiting on @Alex-NRCan and @jolevesq)
8abd62a
into
Canadian-Geospatial-Platform:develop
Description
Created a new NavBar Plugin and created a Drawer plugin that uses it. The drawing plugin currently only allows 4 geometry types [Point, LineString, Polygon, Circle] and can be selected in the change geometry panel. Editing vertices and adding vertices is supported. Measurements for Lines (Length) and Polygons / Circles (Area) can be toggled on and off. Features can also be cleared from the map.
Fixes # 2337, 2823
Type of change
How Has This Been Tested?
Host update 2025-06-23 11:20am
Drawer Plugin Navigator
Checklist:
I have made corresponding changes to the documentationI have added tests that prove my fix is effective or that my feature worksNew and existing unit tests pass locally with my changesThis change is