steven/gpx.studio
1
0
Fork 0
mirror of https://github.com/gpxstudio/gpx.studio.git synced 2026-03-14 08:42:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

centralized map layer event listener for better performance

Browse Source
This commit is contained in:
vcoppe
2026-01-31 12:57:08 +01:00
parent d13e7e7a0a
commit 0ab3b77db8
11 changed files with 408 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
website/src/lib/components/toolbar/tools/routing/routing-controls.ts
View File

@@ -94,7 +94,8 @@ export class RoutingControls {
add() {
const map_ = get(map);
if (!map_) {
const layerEventManager = map.layerEventManager;
if (!map_ || !layerEventManager) {
return;
}
@@ -102,8 +103,8 @@ export class RoutingControls {
map_.on('move', this.toggleAnchorsForZoomLevelAndBoundsBinded);
map_.on('click', this.appendAnchorBinded);
map_.on('mousemove', this.fileId, this.showTemporaryAnchorBinded);
map_.on('click', this.fileId, stopPropagation);
layerEventManager.on('mousemove', this.fileId, this.showTemporaryAnchorBinded);
layerEventManager.on('click', this.fileId, stopPropagation);
this.fileUnsubscribe = this.file.subscribe(this.updateControls.bind(this));
}
@@ -152,20 +153,18 @@ export class RoutingControls {
remove() {
const map_ = get(map);
if (!map_) {
return;
}
const layerEventManager = map.layerEventManager;
this.active = false;
for (let anchor of this.anchors) {
anchor.marker.remove();
}
map_.off('move', this.toggleAnchorsForZoomLevelAndBoundsBinded);
map_.off('click', this.appendAnchorBinded);
map_.off('mousemove', this.fileId, this.showTemporaryAnchorBinded);
map_.off('click', this.fileId, stopPropagation);
map_.off('mousemove', this.updateTemporaryAnchorBinded);
map_?.off('move', this.toggleAnchorsForZoomLevelAndBoundsBinded);
map_?.off('click', this.appendAnchorBinded);
layerEventManager?.off('mousemove', this.fileId, this.showTemporaryAnchorBinded);
layerEventManager?.off('click', this.fileId, stopPropagation);
map_?.off('mousemove', this.updateTemporaryAnchorBinded);
this.temporaryAnchor.marker.remove();
this.fileUnsubscribe();

2
website/src/lib/components/toolbar/tools/scissors/Scissors.svelte
View File

@@ -36,7 +36,7 @@
onMount(() => {
if ($map) {
splitControls = new SplitControls($map);
splitControls = new SplitControls($map, map.layerEventManager!);
}
});

25
website/src/lib/components/toolbar/tools/scissors/split-controls.ts
View File

@@ -10,17 +10,20 @@ import { fileActions } from '$lib/logic/file-actions';
import { mapCursor, MapCursorState } from '$lib/logic/map-cursor';
import type { GeoJSONSource } from 'maplibre-gl';
import { ANCHOR_LAYER_KEY } from '$lib/components/map/style';
import type { MapLayerEventManager } from '$lib/components/map/map-layer-event-manager';
export class SplitControls {
map: maplibregl.Map;
layerEventManager: MapLayerEventManager;
unsubscribes: Function[] = [];
layerOnMouseEnterBinded: (e: any) => void = this.layerOnMouseEnter.bind(this);
layerOnMouseLeaveBinded: () => void = this.layerOnMouseLeave.bind(this);
layerOnClickBinded: (e: any) => void = this.layerOnClick.bind(this);
constructor(map: maplibregl.Map) {
constructor(map: maplibregl.Map, layerEventManager: MapLayerEventManager) {
this.map = map;
this.layerEventManager = layerEventManager;
if (!this.map.hasImage('split-control')) {
let icon = new Image(100, 100);
@@ -125,9 +128,17 @@ export class SplitControls {
ANCHOR_LAYER_KEY.interactions
);
this.map.on('mouseenter', 'split-controls', this.layerOnMouseEnterBinded);
this.map.on('mouseleave', 'split-controls', this.layerOnMouseLeaveBinded);
this.map.on('click', 'split-controls', this.layerOnClickBinded);
this.layerEventManager.on(
'mouseenter',
'split-controls',
this.layerOnMouseEnterBinded
);
this.layerEventManager.on(
'mouseleave',
'split-controls',
this.layerOnMouseLeaveBinded
);
this.layerEventManager.on('click', 'split-controls', this.layerOnClickBinded);
}
} catch (e) {
// No reliable way to check if the map is ready to add sources and layers
@@ -135,9 +146,9 @@ export class SplitControls {
}
remove() {
this.map.off('mouseenter', 'split-controls', this.layerOnMouseEnterBinded);
this.map.off('mouseleave', 'split-controls', this.layerOnMouseLeaveBinded);
this.map.off('click', 'split-controls', this.layerOnClickBinded);
this.layerEventManager.off('mouseenter', 'split-controls', this.layerOnMouseEnterBinded);
this.layerEventManager.off('mouseleave', 'split-controls', this.layerOnMouseLeaveBinded);
this.layerEventManager.off('click', 'split-controls', this.layerOnClickBinded);
try {
if (this.map.getLayer('split-controls')) {