Fixes to MaplibreGL Rectangle editing #361

Merged

j merged 1 commit from sanj/oxjs:maplibre-fix-editing into maplibre

2025-08-11 15:02:20 +00:00

sanj commented

2025-08-09 12:32:32 +00:00

Collaborator

AI Generated summary of changes:

Core Issues Fixed:

MapLibre GL Event Compatibility: Fixed drag event handlers in MapMarker.js and MapRectangleMarker.js to use marker.getLngLat() instead of accessing e.lngLat properties that don't exist in MapLibre GL.
Rectangle Handle Visibility: Replaced Ox.MapMarkerImage() with DOM elements for corner handles since MapLibre GL expects DOM elements, not image objects.
Handle Positioning: Limited corner markers to only the 4 corners (ne, nw, se, sw) instead of all 8 positions (including edges).
Visual Rectangle Updates: Added that.rectangle.setBounds() call in MapRectangle update method so the visual rectangle updates when handles are dragged.
Click Event Conflicts: Fixed map click handler to detect rectangle clicks and avoid deselecting rectangles when clicked for editing.
Place Editable Property: Added editable: true as default in MapPlace constructor.

Files Modified:

MapPlace.js: Added editable: true default
MapRectangle.js:
- Limited markers to 4 corners only
- Added rectangle bounds update in update() method
MapRectangleMarker.js:
- Created proper DOM elements for handles
- Fixed MapLibre GL drag event handling
- Improved event cleanup
MapMarker.js: Fixed MapLibre GL drag event handling
MapMarkerImage.js: Fixed rectangle marker color (kept for backward compatibility)
Map.js: Added rectangle click detection to prevent conflicts

Result:

Rectangle editing now works completely:

Click rectangle → shows 4 corner handles
Drag handles → resizes rectangle in real-time
No console errors
Proper event handling

Human written TODOs:

Investigate why editing only works for newly added places but not existing places after reloading page (on MapEditor example)

cc @j

### AI Generated summary of changes: Core Issues Fixed: 1. MapLibre GL Event Compatibility: Fixed drag event handlers in MapMarker.js and MapRectangleMarker.js to use marker.getLngLat() instead of accessing e.lngLat properties that don't exist in MapLibre GL. 2. Rectangle Handle Visibility: Replaced Ox.MapMarkerImage() with DOM elements for corner handles since MapLibre GL expects DOM elements, not image objects. 3. Handle Positioning: Limited corner markers to only the 4 corners (ne, nw, se, sw) instead of all 8 positions (including edges). 4. Visual Rectangle Updates: Added that.rectangle.setBounds() call in MapRectangle update method so the visual rectangle updates when handles are dragged. 5. Click Event Conflicts: Fixed map click handler to detect rectangle clicks and avoid deselecting rectangles when clicked for editing. 6. Place Editable Property: Added editable: true as default in MapPlace constructor. Files Modified: - MapPlace.js: Added editable: true default - MapRectangle.js: - Limited markers to 4 corners only - Added rectangle bounds update in update() method - MapRectangleMarker.js: - Created proper DOM elements for handles - Fixed MapLibre GL drag event handling - Improved event cleanup - MapMarker.js: Fixed MapLibre GL drag event handling - MapMarkerImage.js: Fixed rectangle marker color (kept for backward compatibility) - Map.js: Added rectangle click detection to prevent conflicts Result: Rectangle editing now works completely: - Click rectangle → shows 4 corner handles - Drag handles → resizes rectangle in real-time - No console errors - Proper event handling ### Human written TODOs: - Investigate why editing only works for newly added places but not existing places after reloading page (on MapEditor example) cc @j

sanj added 1 commit

2025-08-09 12:32:33 +00:00

Here's what we've accomplished to fix MapLibre GL rectangle editing: a0b1e0eab4

Core Issues Fixed:

1. MapLibre GL Event Compatibility: Fixed drag event handlers in MapMarker.js and MapRectangleMarker.js to use marker.getLngLat() instead of accessing e.lngLat properties that don't exist in MapLibre GL.
2. Rectangle Handle Visibility: Replaced Ox.MapMarkerImage() with proper DOM elements for corner handles since MapLibre GL expects DOM elements, not image objects.
3. Handle Positioning: Limited corner markers to only the 4 corners (ne, nw, se, sw) instead of all 8 positions (including edges).
4. Visual Rectangle Updates: Added that.rectangle.setBounds() call in MapRectangle update method so the visual rectangle updates when handles are dragged.
5. Click Event Conflicts: Fixed map click handler to detect rectangle clicks and avoid deselecting rectangles when clicked for editing.
6. Place Editable Property: Added editable: true as default in MapPlace constructor.

Files Modified:

- MapPlace.js: Added editable: true default
- MapRectangle.js:
- Limited markers to 4 corners only
- Added rectangle bounds update in update() method
- MapRectangleMarker.js:
- Created proper DOM elements for handles
- Fixed MapLibre GL drag event handling
- Improved event cleanup
- MapMarker.js: Fixed MapLibre GL drag event handling
- MapMarkerImage.js: Fixed rectangle marker color (kept for backward compatibility)
- Map.js: Added rectangle click detection to prevent conflicts

Result:

Rectangle editing now works completely:
- Click rectangle → shows 4 corner handles
- Drag handles → resizes rectangle in real-time
- No console errors
- Proper event handling