Fix/when no render mode (#74)

* fix: fixed bug when render button is removed. add default hidden mode if no render buttom.

* doc: delete selected feature control if no feature is selected.

.changeset/shiny-wasps-sell.md

@@ -0,0 +1,5 @@
+---
+'@watergis/maplibre-gl-terradraw': patch
+---
+
+fix: fixed bug when render button is removed. add default hidden mode if no render buttom.

src/lib/MaplibreTerradrawControl.ts

@@ -1,5 +1,5 @@
 import type { ControlPosition, IControl, Map } from 'maplibre-gl';
-import { TerraDraw, TerraDrawMapLibreGLAdapter } from 'terra-draw';
+import { TerraDraw, TerraDrawMapLibreGLAdapter, TerraDrawRenderMode } from 'terra-draw';
 import type { ControlOptions, TerradrawMode, TerradrawModeClass } from './interfaces/index.js';
 import { defaultControlOptions } from './constants/defaultControlOptions.js';
 import { getDefaultModeOptions } from './constants/getDefaultModeOptions.js';
@@ -16,6 +16,8 @@ export class MaplibreTerradrawControl implements IControl {
 	private terradraw?: TerraDraw;
 	private options: ControlOptions = defaultControlOptions;
 
+	private defaultMode = 'render';
+
 	/**
 	 * Constructor
 	 * @param options Plugin control options
@@ -69,6 +71,17 @@ export class MaplibreTerradrawControl implements IControl {
 			}
 		});
 
+		// if no render button is specified, it add hidden render mode
+		if (!this.options?.modes?.includes('render')) {
+			modes.push(
+				new TerraDrawRenderMode({
+					modeName: 'default',
+					styles: {}
+				})
+			);
+			this.defaultMode = 'default';
+		}
+
 		this.isExpanded = this.options.open === true;
 
 		this.terradraw = new TerraDraw({
@@ -83,6 +96,7 @@ export class MaplibreTerradrawControl implements IControl {
 		this.controlContainer.classList.add(`maplibregl-ctrl-group`);
 
 		modes.forEach((m: TerradrawModeClass) => {
+			if (m.mode === 'default') return;
 			this.addTerradrawButton(m.mode as TerradrawMode);
 		});
 
@@ -175,7 +189,7 @@ export class MaplibreTerradrawControl implements IControl {
 			if (!item) continue;
 			item.classList.remove('active');
 		}
-		this.terradraw?.setMode('render');
+		this.terradraw?.setMode(this.defaultMode);
 	}
 
 	/**
@@ -228,7 +242,7 @@ export class MaplibreTerradrawControl implements IControl {
 					if (selected.length > 0) {
 						// if feature is selected, delete only selected feature
 						const currentMode = this.terradraw.getMode();
-						this.terradraw.setMode('render');
+						this.terradraw.setMode(this.defaultMode);
 						const ids = selected.map((f) => f.id);
 						this.terradraw.removeFeatures(ids);
 						this.terradraw.setMode(currentMode);

src/routes/demo/+page.svelte

@@ -65,6 +65,14 @@
 			const feature = snapshot?.find((feature) => feature.id === id);
 			selectedFeature = JSON.stringify(feature, null, 4);
 		});
+
+		drawInstance?.on('change', () => {
+			const snapshot = drawInstance.getSnapshot();
+			const selectedFeatures = snapshot.filter((f) => f.properties.selected === true);
+			if (selectedFeatures.length === 0) {
+				selectedFeature = '';
+			}
+		});
 	});
 </script>