cirrects kayer and source deconstruction

razorness · Sep 15, 2021 · 500704e · 500704e
1 parent 111caa7
commit 500704e
Show file tree

Hide file tree

Showing 21 changed files with 164 additions and 100 deletions.
diff --git a/dev/serve.vue b/dev/serve.vue
@@ -1,40 +1,43 @@
 <template>
 	<div>
-		<mgl-map
-			ref="map"
-			height="400px" width="800px"
-			style="margin-bottom: 20px"
-			:center="center"
-			:zoom="zoom"
-			:attribution-control="false"
-			@map:load="onLoad"
-			@map:zoomstart="isZooming = true"
-			@map:zoomend="isZooming = false"
-		>
-			<mgl-frame-rate-control/>
-			<mgl-fullscreen-control/>
-			<mgl-attribution-control/>
-			<mgl-navigation-control/>
-			<mgl-scale-control/>
-			<mgl-geolocation-control/>
-			<mgl-custom-control v-if="showCustomControl" position="top-left" :no-classes="!useClasses">
-				<mgl-button type="mdi" :path="buttonIcon" style="color: deepskyblue"/>
-			</mgl-custom-control>
-			<mgl-style-switch-control :map-styles="mapStyles" :position="controlPosition"/>
+		<div style="height: 400px; width: 800px">
+			<mgl-map
+				v-if="showMap"
+				ref="map"
+				height="400px" width="800px"
+				style="margin-bottom: 20px"
+				:center="center"
+				:zoom="zoom"
+				:attribution-control="false"
+				@map:load="onLoad"
+				@map:zoomstart="isZooming = true"
+				@map:zoomend="isZooming = false"
+			>
+				<mgl-frame-rate-control/>
+				<mgl-fullscreen-control/>
+				<mgl-attribution-control/>
+				<mgl-navigation-control/>
+				<mgl-scale-control/>
+				<mgl-geolocation-control/>
+				<mgl-custom-control v-if="showCustomControl" position="top-left" :no-classes="!useClasses">
+					<mgl-button type="mdi" :path="buttonIcon" style="color: deepskyblue"/>
+				</mgl-custom-control>
+				<mgl-style-switch-control :map-styles="mapStyles" :position="controlPosition"/>
 
-			<mgl-marker :coordinates="markerCoordinates" color="#cc0000" :scale="0.5"/>
+				<mgl-marker :coordinates="markerCoordinates" color="#cc0000" :scale="0.5"/>
 
-			<mgl-geo-json-source source-id="geojson" :data="geoJsonSource.data">
-				<mgl-line-layer
-					v-if="geoJsonSource.show"
-					layer-id="geojson"
-					:layout="geoJsonSource.layout"
-					:paint="geoJsonSource.paint"
-					@mouseenter="onMouseenter"
-				/>
-			</mgl-geo-json-source>
+				<mgl-geo-json-source source-id="geojson" :data="geoJsonSource.data">
+					<mgl-line-layer
+						v-if="geoJsonSource.show"
+						layer-id="geojson"
+						:layout="geoJsonSource.layout"
+						:paint="geoJsonSource.paint"
+						@mouseenter="onMouseenter"
+					/>
+				</mgl-geo-json-source>
 
-		</mgl-map>
+			</mgl-map>
+		</div>
 		Loaded Count: {{ loaded }}<br>
 		Is Zooming: {{ isZooming }}<br>
 		<div>
@@ -60,6 +63,10 @@
 			<input type="checkbox" v-model="showCustomControl" id="showcustom">
 			<label for="showcustom">Show Custom Control</label>
 		</div>
+		<div>
+			<input type="checkbox" v-model="showMap" id="showmap">
+			<label for="showmap">Show Map</label>
+		</div>
 	</div>
 </template>
 
@@ -87,6 +94,7 @@
 				loaded           : ref(0),
 				isZooming        : false,
 				controlPosition  : ref('top-left'),
+				showMap          : ref(true),
 				center           : [ 10.288107, 49.405078 ],
 				zoom             : 3,
 				useClasses       : true,

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "vue-maplibre-gl",
-	"version": "1.0.0-beta.20",
+	"version": "1.0.0-beta.21",
 	"description": "Vue 3 plugin for maplibre-gl",
 	"keywords": [
 		"vue",
@@ -84,7 +84,7 @@
 		"sass": "^1.39.2",
 		"sass-loader": "^10.2.0",
 		"ttypescript": "^1.5.12",
-		"typescript": "^4.4.2",
+		"typescript": "^4.4.3",
 		"vue": "^3.0.5",
 		"vue-cli-plugin-webpack-bundle-analyzer": "^4.0.0"
 	},

diff --git a/src/components/layers/background.layer.ts b/src/components/layers/background.layer.ts
@@ -1,7 +1,7 @@
 import { BackgroundLayer, BackgroundLayout, BackgroundPaint } from 'maplibre-gl';
 import { genLayerOpts, Shared } from '@/components/layers/shared';
-import { createCommentVNode, defineComponent, inject, onBeforeUnmount, PropType, warn, watch } from 'vue';
-import { componentIdSymbol, isLoadedSymbol, mapSymbol, sourceIdSymbol } from '@/components/types';
+import { createCommentVNode, defineComponent, inject, PropType, warn, watch } from 'vue';
+import { componentIdSymbol, isLoadedSymbol, mapSymbol, sourceIdSymbol, sourceLayerRegistry } from '@/components/types';
 import { getSourceRef } from '@/components/sources/shared';
 
 export default defineComponent({
@@ -23,6 +23,7 @@ export default defineComponent({
 		const map       = inject(mapSymbol)!,
 			  isLoaded  = inject(isLoadedSymbol)!,
 			  cid       = inject(componentIdSymbol)!,
+			  registry  = inject(sourceLayerRegistry)!,
 			  sourceRef = getSourceRef(cid, props.source || sourceId);
 
 		watch([ isLoaded, sourceRef ], ([ il, src ]) => {
@@ -31,8 +32,10 @@ export default defineComponent({
 			}
 		}, { immediate: true });
 
-		onBeforeUnmount(() => {
-			if (isLoaded.value) map.value.removeLayer(props.layerId);
+		registry.addUnmountHandler(() => {
+			if (isLoaded.value) {
+				map.value.removeLayer(props.layerId);
+			}
 		});
 
 

diff --git a/src/components/layers/circle.layer.ts b/src/components/layers/circle.layer.ts
@@ -1,7 +1,7 @@
 import { CircleLayer, CircleLayout, CirclePaint } from 'maplibre-gl';
 import { genLayerOpts, registerLayerEvents, Shared, unregisterLayerEvents } from '@/components/layers/shared';
-import { createCommentVNode, defineComponent, getCurrentInstance, inject, onBeforeUnmount, PropType, warn, watch } from 'vue';
-import { componentIdSymbol, isLoadedSymbol, mapSymbol, sourceIdSymbol } from '@/components/types';
+import { createCommentVNode, defineComponent, getCurrentInstance, inject, PropType, warn, watch } from 'vue';
+import { componentIdSymbol, isLoadedSymbol, mapSymbol, sourceIdSymbol, sourceLayerRegistry } from '@/components/types';
 import { getSourceRef } from '@/components/sources/shared';
 
 export default defineComponent({
@@ -24,6 +24,7 @@ export default defineComponent({
 			  map       = inject(mapSymbol)!,
 			  isLoaded  = inject(isLoadedSymbol)!,
 			  cid       = inject(componentIdSymbol)!,
+			  registry  = inject(sourceLayerRegistry)!,
 			  sourceRef = getSourceRef(cid, props.source || sourceId);
 
 		watch([ isLoaded, sourceRef ], ([ il, src ]) => {
@@ -33,9 +34,11 @@ export default defineComponent({
 			}
 		}, { immediate: true });
 
-		onBeforeUnmount(() => {
-			map.value.removeLayer(props.layerId);
-			unregisterLayerEvents(map.value, props.layerId, ci.vnode);
+		registry.addUnmountHandler(() => {
+			if (isLoaded.value) {
+				unregisterLayerEvents(map.value, props.layerId, ci.vnode);
+				map.value.removeLayer(props.layerId);
+			}
 		});
 
 	},

diff --git a/src/components/layers/fill.layer.ts b/src/components/layers/fill.layer.ts
@@ -1,7 +1,7 @@
 import { FillLayer, FillLayout, FillPaint } from 'maplibre-gl';
 import { genLayerOpts, registerLayerEvents, Shared, unregisterLayerEvents } from '@/components/layers/shared';
-import { createCommentVNode, defineComponent, getCurrentInstance, inject, onBeforeUnmount, PropType, warn, watch } from 'vue';
-import { componentIdSymbol, isLoadedSymbol, mapSymbol, sourceIdSymbol } from '@/components/types';
+import { createCommentVNode, defineComponent, getCurrentInstance, inject, PropType, warn, watch } from 'vue';
+import { componentIdSymbol, isLoadedSymbol, mapSymbol, sourceIdSymbol, sourceLayerRegistry } from '@/components/types';
 import { getSourceRef } from '@/components/sources/shared';
 
 export default defineComponent({
@@ -24,6 +24,7 @@ export default defineComponent({
 			  map       = inject(mapSymbol)!,
 			  isLoaded  = inject(isLoadedSymbol)!,
 			  cid       = inject(componentIdSymbol)!,
+			  registry  = inject(sourceLayerRegistry)!,
 			  sourceRef = getSourceRef(cid, props.source || sourceId);
 
 		watch([ isLoaded, sourceRef ], ([ il, src ]) => {
@@ -33,10 +34,10 @@ export default defineComponent({
 			}
 		}, { immediate: true });
 
-		onBeforeUnmount(() => {
+		registry.addUnmountHandler(() => {
 			if (isLoaded.value) {
-				map.value.removeLayer(props.layerId);
 				unregisterLayerEvents(map.value, props.layerId, ci.vnode);
+				map.value.removeLayer(props.layerId);
 			}
 		});
 

diff --git a/src/components/layers/fillExtrusion.layer.ts b/src/components/layers/fillExtrusion.layer.ts
@@ -1,7 +1,7 @@
 import { FillExtrusionLayout, FillExtrusionPaint, LineLayer } from 'maplibre-gl';
 import { genLayerOpts, registerLayerEvents, Shared, unregisterLayerEvents } from '@/components/layers/shared';
-import { createCommentVNode, defineComponent, getCurrentInstance, inject, onBeforeUnmount, PropType, warn, watch } from 'vue';
-import { componentIdSymbol, isLoadedSymbol, mapSymbol, sourceIdSymbol } from '@/components/types';
+import { createCommentVNode, defineComponent, getCurrentInstance, inject, PropType, warn, watch } from 'vue';
+import { componentIdSymbol, isLoadedSymbol, mapSymbol, sourceIdSymbol, sourceLayerRegistry } from '@/components/types';
 import { getSourceRef } from '@/components/sources/shared';
 
 export default defineComponent({
@@ -24,6 +24,7 @@ export default defineComponent({
 			  map       = inject(mapSymbol)!,
 			  isLoaded  = inject(isLoadedSymbol)!,
 			  cid       = inject(componentIdSymbol)!,
+			  registry  = inject(sourceLayerRegistry)!,
 			  sourceRef = getSourceRef(cid, props.source || sourceId);
 
 		watch([ isLoaded, sourceRef ], ([ il, src ]) => {
@@ -33,10 +34,10 @@ export default defineComponent({
 			}
 		}, { immediate: true });
 
-		onBeforeUnmount(() => {
+		registry.addUnmountHandler(() => {
 			if (isLoaded.value) {
-				map.value.removeLayer(props.layerId);
 				unregisterLayerEvents(map.value, props.layerId, ci.vnode);
+				map.value.removeLayer(props.layerId);
 			}
 		});
 

diff --git a/src/components/layers/heatmap.layer.ts b/src/components/layers/heatmap.layer.ts
@@ -1,7 +1,7 @@
 import { HeatmapLayer, HeatmapLayout, HeatmapPaint } from 'maplibre-gl';
 import { genLayerOpts, registerLayerEvents, Shared, unregisterLayerEvents } from '@/components/layers/shared';
-import { createCommentVNode, defineComponent, getCurrentInstance, inject, onBeforeUnmount, PropType, warn, watch } from 'vue';
-import { componentIdSymbol, isLoadedSymbol, mapSymbol, sourceIdSymbol } from '@/components/types';
+import { createCommentVNode, defineComponent, getCurrentInstance, inject, PropType, warn, watch } from 'vue';
+import { componentIdSymbol, isLoadedSymbol, mapSymbol, sourceIdSymbol, sourceLayerRegistry } from '@/components/types';
 import { getSourceRef } from '@/components/sources/shared';
 
 export default defineComponent({
@@ -24,6 +24,7 @@ export default defineComponent({
 			  map       = inject(mapSymbol)!,
 			  isLoaded  = inject(isLoadedSymbol)!,
 			  cid       = inject(componentIdSymbol)!,
+			  registry  = inject(sourceLayerRegistry)!,
 			  sourceRef = getSourceRef(cid, props.source || sourceId);
 
 		watch([ isLoaded, sourceRef ], ([ il, src ]) => {
@@ -33,10 +34,10 @@ export default defineComponent({
 			}
 		}, { immediate: true });
 
-		onBeforeUnmount(() => {
+		registry.addUnmountHandler(() => {
 			if (isLoaded.value) {
-				map.value.removeLayer(props.layerId);
 				unregisterLayerEvents(map.value, props.layerId, ci.vnode);
+				map.value.removeLayer(props.layerId);
 			}
 		});
 

diff --git a/src/components/layers/hillshade.layer.ts b/src/components/layers/hillshade.layer.ts
@@ -1,7 +1,7 @@
 import { HillshadeLayer, HillshadeLayout, HillshadePaint } from 'maplibre-gl';
 import { genLayerOpts, registerLayerEvents, Shared, unregisterLayerEvents } from '@/components/layers/shared';
-import { createCommentVNode, defineComponent, getCurrentInstance, inject, onBeforeUnmount, PropType, warn, watch } from 'vue';
-import { componentIdSymbol, isLoadedSymbol, mapSymbol, sourceIdSymbol } from '@/components/types';
+import { createCommentVNode, defineComponent, getCurrentInstance, inject, PropType, warn, watch } from 'vue';
+import { componentIdSymbol, isLoadedSymbol, mapSymbol, sourceIdSymbol, sourceLayerRegistry } from '@/components/types';
 import { getSourceRef } from '@/components/sources/shared';
 
 export default defineComponent({
@@ -24,6 +24,7 @@ export default defineComponent({
 			  map       = inject(mapSymbol)!,
 			  isLoaded  = inject(isLoadedSymbol)!,
 			  cid       = inject(componentIdSymbol)!,
+			  registry  = inject(sourceLayerRegistry)!,
 			  sourceRef = getSourceRef(cid, props.source || sourceId);
 
 		watch([ isLoaded, sourceRef ], ([ il, src ]) => {
@@ -33,10 +34,10 @@ export default defineComponent({
 			}
 		}, { immediate: true });
 
-		onBeforeUnmount(() => {
+		registry.addUnmountHandler(() => {
 			if (isLoaded.value) {
-				map.value.removeLayer(props.layerId);
 				unregisterLayerEvents(map.value, props.layerId, ci.vnode);
+				map.value.removeLayer(props.layerId);
 			}
 		});
 

diff --git a/src/components/layers/line.layer.ts b/src/components/layers/line.layer.ts
@@ -1,7 +1,7 @@
 import { LineLayer, LineLayout, LinePaint } from 'maplibre-gl';
 import { genLayerOpts, registerLayerEvents, Shared, unregisterLayerEvents } from '@/components/layers/shared';
-import { createCommentVNode, defineComponent, getCurrentInstance, inject, onBeforeUnmount, PropType, warn, watch } from 'vue';
-import { componentIdSymbol, isLoadedSymbol, mapSymbol, sourceIdSymbol } from '@/components/types';
+import { createCommentVNode, defineComponent, getCurrentInstance, inject, PropType, warn, watch } from 'vue';
+import { componentIdSymbol, isLoadedSymbol, mapSymbol, sourceIdSymbol, sourceLayerRegistry } from '@/components/types';
 import { getSourceRef } from '@/components/sources/shared';
 
 export default defineComponent({
@@ -24,6 +24,7 @@ export default defineComponent({
 			  map       = inject(mapSymbol)!,
 			  isLoaded  = inject(isLoadedSymbol)!,
 			  cid       = inject(componentIdSymbol)!,
+			  registry  = inject(sourceLayerRegistry)!,
 			  sourceRef = getSourceRef(cid, props.source || sourceId);
 
 		watch([ isLoaded, sourceRef ], ([ il, src ]) => {
@@ -33,11 +34,10 @@ export default defineComponent({
 			}
 		}, { immediate: true });
 
-
-		onBeforeUnmount(() => {
+		registry.addUnmountHandler(() => {
 			if (isLoaded.value) {
-				map.value.removeLayer(props.layerId);
 				unregisterLayerEvents(map.value, props.layerId, ci.vnode);
+				map.value.removeLayer(props.layerId);
 			}
 		});
 

diff --git a/src/components/layers/raster.layer.ts b/src/components/layers/raster.layer.ts
@@ -1,7 +1,7 @@
 import { RasterLayer, RasterLayout, RasterPaint } from 'maplibre-gl';
 import { genLayerOpts, registerLayerEvents, Shared, unregisterLayerEvents } from '@/components/layers/shared';
-import { createCommentVNode, defineComponent, getCurrentInstance, inject, onBeforeUnmount, PropType, warn, watch } from 'vue';
-import { componentIdSymbol, isLoadedSymbol, mapSymbol, sourceIdSymbol } from '@/components/types';
+import { createCommentVNode, defineComponent, getCurrentInstance, inject, PropType, warn, watch } from 'vue';
+import { componentIdSymbol, isLoadedSymbol, mapSymbol, sourceIdSymbol, sourceLayerRegistry } from '@/components/types';
 import { getSourceRef } from '@/components/sources/shared';
 
 export default defineComponent({
@@ -24,6 +24,7 @@ export default defineComponent({
 			  map       = inject(mapSymbol)!,
 			  isLoaded  = inject(isLoadedSymbol)!,
 			  cid       = inject(componentIdSymbol)!,
+			  registry  = inject(sourceLayerRegistry)!,
 			  sourceRef = getSourceRef(cid, props.source || sourceId);
 
 		watch([ isLoaded, sourceRef ], ([ il, src ]) => {
@@ -33,10 +34,10 @@ export default defineComponent({
 			}
 		}, { immediate: true });
 
-		onBeforeUnmount(() => {
+		registry.addUnmountHandler(() => {
 			if (isLoaded.value) {
-				map.value.removeLayer(props.layerId);
 				unregisterLayerEvents(map.value, props.layerId, ci.vnode);
+				map.value.removeLayer(props.layerId);
 			}
 		});
 

diff --git a/src/components/layers/smybol.layer.ts b/src/components/layers/smybol.layer.ts
@@ -1,7 +1,7 @@
 import { SymbolLayer, SymbolLayout, SymbolPaint } from 'maplibre-gl';
 import { genLayerOpts, registerLayerEvents, Shared, unregisterLayerEvents } from '@/components/layers/shared';
-import { createCommentVNode, defineComponent, getCurrentInstance, inject, onBeforeUnmount, PropType, warn, watch } from 'vue';
-import { componentIdSymbol, isLoadedSymbol, mapSymbol, sourceIdSymbol } from '@/components/types';
+import { createCommentVNode, defineComponent, getCurrentInstance, inject, PropType, warn, watch } from 'vue';
+import { componentIdSymbol, isLoadedSymbol, mapSymbol, sourceIdSymbol, sourceLayerRegistry } from '@/components/types';
 import { getSourceRef } from '@/components/sources/shared';
 
 export default defineComponent({
@@ -24,6 +24,7 @@ export default defineComponent({
 			  map       = inject(mapSymbol)!,
 			  isLoaded  = inject(isLoadedSymbol)!,
 			  cid       = inject(componentIdSymbol)!,
+			  registry  = inject(sourceLayerRegistry)!,
 			  sourceRef = getSourceRef(cid, props.source || sourceId);
 
 		watch([ isLoaded, sourceRef ], ([ il, src ]) => {
@@ -33,10 +34,10 @@ export default defineComponent({
 			}
 		}, { immediate: true });
 
-		onBeforeUnmount(() => {
+		registry.addUnmountHandler(() => {
 			if (isLoaded.value) {
-				map.value.removeLayer(props.layerId);
 				unregisterLayerEvents(map.value, props.layerId, ci.vnode);
+				map.value.removeLayer(props.layerId);
 			}
 		});