Open
Conversation
Contributor
There was a problem hiding this comment.
Pull request overview
Adds a new polygon-drawing/editing capability for the client map, analogous in usage to the existing bounding-box drawing wrapper (wraps a map component and injects DeckGL layers + handlers).
Changes:
- Introduces
PolygonDrawingwrapper component with UI controls for start/stop and clear. - Adds DeckGL layer factory to render vertices, an open path while drawing, and a filled polygon once closed.
- Adds click/hover/drag logic helpers and supporting event-info / coordinate types.
Reviewed changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| src/client/map/PolygonDrawing/_logic/polygonDrawingTypes.ts | Defines polygon coordinate/event types used by handlers. |
| src/client/map/PolygonDrawing/_logic/onPolygonHover.ts | Updates hover state when cursor is over a vertex. |
| src/client/map/PolygonDrawing/_logic/onPolygonDrag.ts | Updates a vertex coordinate while dragging. |
| src/client/map/PolygonDrawing/_logic/onPolygonClick.ts | Adds vertices on click and closes polygon when clicking the first vertex. |
| src/client/map/PolygonDrawing/_layers/polygonLayer.ts | Creates Scatterplot/Path/Polygon DeckGL layers for drawing/editing visualization. |
| src/client/map/PolygonDrawing/PolygonDrawing.tsx | Wraps a map component, injects layers and interaction handlers, and renders control buttons. |
| src/client/map/PolygonDrawing/ControlButtons.tsx | Renders Mantine-based controls for drawing/editing and clearing. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 10 out of 10 changed files in this pull request and generated 4 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+1
to
+15
| export type PolygonCoordinate = [number, number]; | ||
| export type PolygonCoordinates = PolygonCoordinate[]; | ||
| export type DrawingMode = 'polygon' | 'circle'; | ||
|
|
||
| export interface PolygonDragInfo { | ||
| object: any; | ||
| coordinate: PolygonCoordinate; | ||
| index: number; | ||
| } | ||
|
|
||
| export interface PolygonClickInfo { | ||
| coordinate: PolygonCoordinate; | ||
| object?: any; | ||
| layer?: any; | ||
| index?: number; |
Comment on lines
+14
to
+22
| const { layer, index } = info; | ||
|
|
||
| // Check if the hovered object belongs to the 'vertex-layer' and has a valid index | ||
| if (layer && layer.id === 'vertex-layer' && typeof index === 'number' && index >= 0) { | ||
| setIsHoveringPoint(true); | ||
| setHoveredPointIndex(index); | ||
| } else { | ||
| setIsHoveringPoint(false); | ||
| setHoveredPointIndex(null); |
Comment on lines
+117
to
+127
| new PathLayer({ | ||
| id: 'circle-radius-line', | ||
| data: [{ path: polygonCoordinates }], | ||
| getPath: (_data: any) => _data.path, | ||
| getColor: [0, 0, 0, 100], | ||
| widthMinPixels: 1, | ||
| pickable: false, | ||
| dashJustified: true, | ||
| getDashArray: [5, 5], | ||
| extensions: [], | ||
| }) |
Comment on lines
+236
to
+237
| onClickExternal?.(event); // drawing/external handler has priority | ||
| onClick(event); // internal selection logic |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pull request introduces a new, reusable polygon and circle drawing/editing component for map interfaces. The implementation supports both polygon and circle drawing modes, provides interactive controls, and separates core logic for clarity and extensibility. The changes are modular, with clear separation between UI controls, event handling, drawing logic, and deck.gl layer generation.
Key changes include:
New Polygon/Circle Drawing Component
PolygonDrawingcomponent, which wraps a map component to enable interactive polygon and circle drawing and editing. It manages drawing state, handles user interactions, and injects appropriate deck.gl layers and event handlers into the map. (PolygonDrawing.tsx)ControlButtonsUI component, giving users controls for toggling drawing/editing, clearing shapes, and switching between polygon and circle modes. (ControlButtons.tsx)Drawing Logic & Event Handling
onPolygonClick(handles adding points and closing polygons/circles),onPolygonDrag(handles vertex dragging and circle resizing), andonPolygonHover(handles vertex hover state for UI feedback). (onPolygonClick.ts,onPolygonDrag.ts,onPolygonHover.ts) [1] [2] [3]polygonDrawingTypes.ts)Map Visualization
polygonLayer, which dynamically creates layers for polygons, circles, vertices, and interactive elements based on the current drawing state and mode. (polygonLayer.ts)References: