Map selection behaviour (#7811)

* Use https for openmaptiles fonts.

* Changed map selection behaviour: replace instead of adding them by default.

app/src/layouts/map/components/map.vue

@@ -147,7 +147,7 @@ export default defineComponent({
 				map.on('select.disable', () => (selectMode.value = false));
 				map.on('select.end', (event: MapLayerMouseEvent) => {
 					const ids = event.features?.map((f) => f.id);
-					emit('featureselect', ids);
+					emit('featureselect', { ids, replace: !event.alt });
 				});
 				map.on('moveend', (event) => {
 					if (!event.originalEvent) {
@@ -249,11 +249,12 @@ export default defineComponent({
 
 		function onFeatureClick(event: MapLayerMouseEvent) {
 			const feature = event.features?.[0];
+			const replace = !event.originalEvent.altKey;
 			if (feature && props.featureId) {
 				if (boxSelectControl.active()) {
-					emit('featureselect', [feature.id]);
+					emit('featureselect', { ids: [feature.id], replace });
 				} else {
-					emit('featureclick', feature.id);
+					emit('featureclick', { id: feature.id, replace });
 				}
 			}
 		}

app/src/layouts/map/index.ts

@@ -257,11 +257,24 @@ export default defineLayout<LayoutOptions, LayoutQuery>({
 			});
 		}
 
-		function updateSelection(selected: Array<string | number> | null) {
-			if (selected) {
-				selection.value = Array.from(new Set(selection.value.concat(selected)));
+		function setSelection(ids: Array<string | number>) {
+			selection.value = ids;
+		}
+
+		function pushSelection(ids: Array<string | number>) {
+			selection.value = Array.from(new Set(selection.value.concat(ids)));
+		}
+
+		function handleSelect({ ids, replace }: { ids: Array<string | number>; replace: boolean }) {
+			if (replace) setSelection(ids);
+			else pushSelection(ids);
+		}
+
+		function handleClick({ id, replace }: { id: string | number; replace: boolean }) {
+			if (props.selectMode) {
+				handleSelect({ ids: [id], replace });
 			} else {
-				selection.value = [];
+				router.push(`/collections/${collection.value}/${id}`);
 			}
 		}
 
@@ -269,14 +282,6 @@ export default defineLayout<LayoutOptions, LayoutQuery>({
 			return props.readonly ? null : primaryKeyField.value?.field ?? null;
 		});
 
-		function handleClick(key: number | string) {
-			if (props.selectMode) {
-				updateSelection([key]);
-			} else {
-				router.push(`/collections/${collection.value}/${key}`);
-			}
-		}
-
 		const showingCount = computed(() => {
 			if ((itemCount.value || 0) < (totalCount.value || 0)) {
 				if (itemCount.value === 1) {
@@ -316,12 +321,12 @@ export default defineLayout<LayoutOptions, LayoutQuery>({
 			geojsonError,
 			geometryOptions,
 			handleClick,
+			handleSelect,
 			geometryFormat,
 			geometryField,
 			cameraOptions,
 			autoLocationFilter,
 			clusterData,
-			updateSelection,
 			items,
 			loading,
 			error,

app/src/layouts/map/map.vue

@@ -12,7 +12,7 @@
 			:source="directusSource"
 			:layers="directusLayers"
 			@featureclick="handleClick"
-			@featureselect="updateSelection"
+			@featureselect="handleSelect"
 			@moveend="cameraOptionsWritable = $event"
 			@fitdata="removeLocationFilter"
 		/>
@@ -152,11 +152,11 @@ export default defineComponent({
 			required: true,
 		},
 		handleClick: {
-			type: Function as PropType<(key: number | string) => void>,
+			type: Function as PropType<(event: { id: string | number; replace: boolean }) => void>,
 			required: true,
 		},
-		updateSelection: {
-			type: Function as PropType<(selected: Array<string | number> | null) => void>,
+		handleSelect: {
+			type: Function as PropType<(event: { ids: Array<string | number>; replace: boolean }) => void>,
 			required: true,
 		},
 		cameraOptions: {

app/src/utils/geometry/controls.ts

@@ -73,7 +73,7 @@ export class BoxSelectControl {
 		this.unselectButton = new ButtonControl(options?.unselectButtonClass ?? 'ctrl-unselect', () => {
 			this.reset();
 			this.activate(false);
-			this.map!.fire('select.end');
+			this.map!.fire('select.end', { features: [] });
 		});
 		this.groupElement.appendChild(this.selectButton.element);
 		this.groupElement.appendChild(this.unselectButton.element);
@@ -126,7 +126,7 @@ export class BoxSelectControl {
 		if (event.key == 'Escape') {
 			this.reset();
 			this.activate(false);
-			this.map!.fire('select.end');
+			this.map!.fire('select.end', { features: [] });
 		}
 	}
 
@@ -169,12 +169,12 @@ export class BoxSelectControl {
 		this.updateBoxStyle({ transform, width, height });
 	}
 
-	onMouseUp(): void {
+	onMouseUp(event: MouseEvent): void {
 		this.reset();
 		const features = this.map!.queryRenderedFeatures([this.startPos!, this.lastPos!], {
 			layers: this.layers,
 		});
-		this.map!.fire('select.end', { features });
+		this.map!.fire('select.end', { features, alt: event.altKey });
 	}
 
 	reset(): void {