more robust reactivity for sources

razorness · Feb 12, 2024 · e5e190d · e5e190d
1 parent ad0d836
commit e5e190d
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 30 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "vue-maplibre-gl",
-	"version": "3.1.2-alpha.2",
+	"version": "3.1.2",
 	"description": "Vue 3 plugin for maplibre-gl",
 	"keywords": [
 		"vue",

diff --git a/src/App.vue b/src/App.vue
@@ -25,9 +25,9 @@
 
 				<mgl-marker :coordinates="markerCoordinates" color="#cc0000" :scale="0.5"/>
 
-				<mgl-geo-json-source source-id="geojson" :data="geoJsonSource.data">
+				<mgl-geo-json-source source-id="geojson" :data="geojsonSource.data">
 					<mgl-line-layer
-						v-if="geoJsonSource.show"
+						v-if="geojsonSource.show"
 						layer-id="geojson"
 						:layout="layout"
 						:paint="paint"
@@ -146,9 +146,8 @@
 				  showCustomControl = ref(true),
 				  loaded            = ref(0),
 				  markerCoordinates = ref<LngLatLike>([ 13.377507, 52.516267 ]),
-				  geoJsonSource     = ref({
-					  show: true,
-					  data: <FeatureCollection<LineString>>{
+				  geojsonSource     = {
+					  data: ref<FeatureCollection<LineString>>({
 						  type    : 'FeatureCollection',
 						  features: [
 							  {
@@ -163,17 +162,18 @@
 								  }
 							  }
 						  ]
-					  }
-				  });
+					  }),
+					  show: ref(true)
+				  };
 
 			watch(() => map.isLoaded, () => (console.log('IS LOADED', map)), { immediate: true });
 			watch(() => map.isMounted, (v: boolean) => (console.log('IS MOUNTED', v)), { immediate: true });
 
 			onMounted(() => {
 				setTimeout(() => (markerCoordinates.value = [ 13.377507, 42.516267 ]), 5000);
 				setInterval(() => {
-					if (geoJsonSource.value.data.features[ 0 ].geometry.coordinates.length >= lineString.length) {
-						geoJsonSource.value.data = <FeatureCollection<LineString>>{
+					if (geojsonSource.data.value.features[ 0 ].geometry.coordinates.length >= lineString.length) {
+						geojsonSource.data.value = <FeatureCollection<LineString>>{
 							type    : 'FeatureCollection',
 							features: [
 								{
@@ -190,7 +190,7 @@
 							]
 						};
 					} else {
-						geoJsonSource.value.data = <FeatureCollection<LineString>>{
+						geojsonSource.data.value = <FeatureCollection<LineString>>{
 							type    : 'FeatureCollection',
 							features: [
 								{
@@ -199,8 +199,8 @@
 									geometry  : {
 										type       : 'LineString',
 										coordinates: [
-											...geoJsonSource.value.data.features[ 0 ].geometry.coordinates,
-											lineString[ geoJsonSource.value.data.features[ 0 ].geometry.coordinates.length ]
+											...geojsonSource.data.value.features[ 0 ].geometry.coordinates,
+											lineString[ geojsonSource.data.value.features[ 0 ].geometry.coordinates.length ]
 										]
 									}
 								}
@@ -226,7 +226,8 @@
 			}
 
 			return {
-				showCustomControl, loaded, map, mapVersion, markerCoordinates, geoJsonSource, onLoad, onMouseenter, setLanguage,
+				showCustomControl, loaded, map, mapVersion, markerCoordinates, geojsonSource, onLoad, onMouseenter, setLanguage,
+				geojsonSourceData         : geojsonSource.data,
 				isZooming                 : ref(false),
 				controlPosition           : ref(Position.TOP_LEFT),
 				showMap                   : ref(true),

diff --git a/src/lib/components/sources/canvas.source.ts b/src/lib/components/sources/canvas.source.ts
@@ -1,4 +1,4 @@
-import { createCommentVNode, defineComponent, inject, type PropType, provide, type SlotsType, watch } from 'vue';
+import { createCommentVNode, defineComponent, inject, isRef, type PropType, provide, type SlotsType, watch } from 'vue';
 import { AllSourceOptions, componentIdSymbol, sourceIdSymbol, sourceLayerRegistry } from '@/lib/types';
 import type { CanvasSource, CanvasSourceSpecification, Coordinates } from 'maplibre-gl';
 import { SourceLayerRegistry } from '@/lib/lib/sourceLayer.registry';
@@ -34,9 +34,11 @@ export default /*#__PURE__*/ defineComponent({
 
 		useSource<CanvasSourceSpecification>(source, props, 'canvas', sourceOpts, registry);
 
-		watch(() => props.coordinates, v => {
-			if (v) {
-				source.value?.setCoordinates(v);
+		watch(isRef(props.coordinates) ? props.coordinates : () => props.coordinates, v => {
+			if (isRef(v) && v.value) {
+				source.value?.setCoordinates(v.value as Coordinates);
+			} else if (v) {
+				source.value?.setCoordinates(v as Coordinates);
 			}
 		}, { immediate: true });
 

diff --git a/src/lib/components/sources/geojson.source.ts b/src/lib/components/sources/geojson.source.ts
@@ -59,7 +59,6 @@ export default /*#__PURE__*/ defineComponent({
 		useSource<GeoJSONSourceOptions>(source, props, 'geojson', sourceOpts, registry);
 
 		watch(isRef(props.data) ? props.data : () => props.data, v => {
-			console.log('GEOJSON SOURCE', isRef(props.data), isRef(props.data) ? props.data.value : props.data);
 			source.value?.setData(isRef(v) ? (v.value || { type: 'FeatureCollection', features: [] }) : (v as any || {
 				type: 'FeatureCollection', features: []
 			}));

diff --git a/src/lib/components/sources/image.source.ts b/src/lib/components/sources/image.source.ts
@@ -1,4 +1,4 @@
-import { createCommentVNode, defineComponent, inject, type PropType, provide, type SlotsType, watch } from 'vue';
+import { createCommentVNode, defineComponent, inject, isRef, type PropType, provide, type SlotsType, watch } from 'vue';
 import { AllSourceOptions, componentIdSymbol, sourceIdSymbol, sourceLayerRegistry } from '@/lib/types';
 import type { Coordinates, ImageSource, ImageSourceSpecification } from 'maplibre-gl';
 import { SourceLayerRegistry } from '@/lib/lib/sourceLayer.registry';
@@ -32,9 +32,11 @@ export default /*#__PURE__*/ defineComponent({
 
 		useSource<ImageSourceSpecification>(source, props, 'image', sourceOpts, registry);
 
-		watch(() => props.coordinates, v => {
-			if (v) {
-				source.value?.setCoordinates(v);
+		watch(isRef(props.coordinates) ? props.coordinates : () => props.coordinates, v => {
+			if (isRef(v) && v.value) {
+				source.value?.setCoordinates(v.value as Coordinates);
+			} else if (v) {
+				source.value?.setCoordinates(v as Coordinates);
 			}
 		}, { immediate: true });
 

diff --git a/src/lib/components/sources/vector.source.ts b/src/lib/components/sources/vector.source.ts
@@ -1,4 +1,4 @@
-import { createCommentVNode, defineComponent, inject, type PropType, provide, type SlotsType, watch } from 'vue';
+import { createCommentVNode, defineComponent, inject, isRef, type PropType, provide, type SlotsType, watch } from 'vue';
 import { AllSourceOptions, componentIdSymbol, sourceIdSymbol, sourceLayerRegistry } from '@/lib/types';
 import type { PromoteIdSpecification, VectorSourceSpecification, VectorTileSource } from 'maplibre-gl';
 import { SourceLayerRegistry } from '@/lib/lib/sourceLayer.registry';
@@ -46,8 +46,20 @@ export default /*#__PURE__*/ defineComponent({
 
 		useSource<VectorSourceSpecification>(source, props, 'vector', sourceOpts, registry);
 
-		watch(() => props.tiles, v => source.value?.setTiles(v || []), { immediate: true });
-		watch(() => props.url, v => source.value?.setUrl(v || ''), { immediate: true });
+		watch(isRef(props.tiles) ? props.tiles : () => props.tiles, v => {
+			if (isRef(v)) {
+				source.value?.setTiles(v.value as string[] || [])
+			} else {
+				source.value?.setTiles(v as string[] || [])
+			}
+		}, { immediate: true });
+		watch(isRef(props.url) ? props.url: () => props.url, v => {
+			if (isRef(v)) {
+				source.value?.setUrl(v.value as string || '')
+			} else {
+				source.value?.setUrl(v as string || '')
+			}
+		}, { immediate: true });
 
 		return () => [
 			createCommentVNode('Vector Source'),

diff --git a/src/lib/components/sources/video.source.ts b/src/lib/components/sources/video.source.ts
@@ -1,4 +1,4 @@
-import { createCommentVNode, defineComponent, inject, type PropType, provide, type SlotsType, watch } from 'vue';
+import { createCommentVNode, defineComponent, inject, isRef, type PropType, provide, type SlotsType, watch } from 'vue';
 import { AllSourceOptions, componentIdSymbol, sourceIdSymbol, sourceLayerRegistry } from '@/lib/types';
 import type { Coordinates, VideoSource, VideoSourceSpecification } from 'maplibre-gl';
 import { SourceLayerRegistry } from '@/lib/lib/sourceLayer.registry';
@@ -32,9 +32,11 @@ export default /*#__PURE__*/ defineComponent({
 
 		useSource<VideoSourceSpecification>(source, props, 'video', sourceOpts, registry);
 
-		watch(() => props.coordinates, v => {
-			if (v) {
-				source.value?.setCoordinates(v);
+		watch(isRef(props.coordinates) ? props.coordinates : () => props.coordinates, v => {
+			if (isRef(v) && v.value) {
+				source.value?.setCoordinates(v.value as Coordinates);
+			} else if (v) {
+				source.value?.setCoordinates(v as Coordinates);
 			}
 		}, { immediate: true });