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
63 lines
2 KiB
JavaScript
63 lines
2 KiB
JavaScript
'use strict';
|
|
|
|
/*@
|
|
Ox.MapMarkerImage <f> MapMarkerImage Object
|
|
(options) -> <o> google.maps.MarkerImage
|
|
options <o> Options object
|
|
color <a|[255, 0, 0]> marker color
|
|
mode <s|normal> can be: normal, selected, editing
|
|
size <n|16> size
|
|
type <s|place> can be: place, result, rectangle
|
|
@*/
|
|
|
|
Ox.MapMarkerImage = (function() {
|
|
|
|
var cache = {};
|
|
|
|
return function(options) {
|
|
|
|
options = Ox.extend({
|
|
color: [255, 0, 0],
|
|
mode: 'normal', // normal, selected, editing
|
|
rectangle: false,
|
|
size: 16,
|
|
type: 'place' // place, result
|
|
}, options);
|
|
|
|
var index = [
|
|
options.type, options.mode, options.size, options.color.join(',')
|
|
].join(';'),
|
|
themeData = Ox.Theme.getThemeData();
|
|
|
|
if (!cache[index]) {
|
|
var color = options.rectangle ? [255, 255, 255, 1]
|
|
: options.color.concat(
|
|
[options.type == 'place' ? 0.75 : 0.25]
|
|
),
|
|
border = (
|
|
options.mode == 'normal' ? themeData.mapPlaceBorder
|
|
: options.mode == 'selected' ? themeData.mapPlaceSelectedBorder
|
|
: themeData.mapPlaceEditingBorder
|
|
).concat([options.type == 'result' ? 0.5 : 1]),
|
|
c = Ox.canvas(options.size, options.size),
|
|
image,
|
|
r = options.size / 2;
|
|
c.context.fillStyle = 'rgba(' + color.join(', ') + ')';
|
|
c.context.arc(r, r, r - 2, 0, 360);
|
|
c.context.fill();
|
|
c.context.beginPath();
|
|
c.context.lineWidth = 2;
|
|
c.context.strokeStyle = 'rgba(' + border.join(', ') + ')';
|
|
c.context.arc(r, r, r - 1, 0, 360);
|
|
c.context.stroke();
|
|
cache[index] = document.createElement('img')
|
|
cache[index].src = c.canvas.toDataURL()
|
|
cache[index].width = options.size
|
|
cache[index].height = options.size
|
|
}
|
|
|
|
return cache[index];
|
|
|
|
}
|
|
|
|
}());
|