added layer events

razorness · razorness · commit 5d104552ccbc · 2021-08-26T18:01:40.000+02:00
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "vue-maplibre-gl",
-	"version": "1.0.0-beta.18",
+	"version": "1.0.0-beta.19",
 	"description": "Vue 3 plugin for maplibre-gl",
 	"keywords": [
 		"vue",
diff --git a/src/components/layers/circle.layer.ts b/src/components/layers/circle.layer.ts
@@ -1,6 +1,6 @@
 import { CircleLayer, CircleLayout, CirclePaint } from 'maplibre-gl';
-import { genLayerOpts, Shared } from '@/components/layers/shared';
-import { createCommentVNode, defineComponent, inject, onBeforeUnmount, PropType, warn, watch } from 'vue';
+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 { getSourceRef } from '@/components/sources/shared';
 
@@ -20,22 +20,24 @@ export default defineComponent({
 			return;
 		}
 
-		const map       = inject(mapSymbol)!,
+		const ci        = getCurrentInstance()!,
+			  map       = inject(mapSymbol)!,
 			  isLoaded  = inject(isLoadedSymbol)!,
 			  cid       = inject(componentIdSymbol)!,
 			  sourceRef = getSourceRef(cid, props.source || sourceId);
 
 		watch([ isLoaded, sourceRef ], ([ il, src ]) => {
 			if (il && (src || src === undefined)) {
 				map.value.addLayer(genLayerOpts<CircleLayer>(props.layerId, 'circle', props, sourceId), props.before || undefined);
+				registerLayerEvents(map.value, props.layerId, ci.vnode);
 			}
 		}, { immediate: true });
 
 		onBeforeUnmount(() => {
-			if (isLoaded.value) map.value.removeLayer(props.layerId);
+			map.value.removeLayer(props.layerId);
+			unregisterLayerEvents(map.value, props.layerId, ci.vnode);
 		});
 
-
 	},
 	render() {
 		return createCommentVNode('Circle Layer');
diff --git a/src/components/layers/fill.layer.ts b/src/components/layers/fill.layer.ts
@@ -1,6 +1,6 @@
 import { FillLayer, FillLayout, FillPaint } from 'maplibre-gl';
-import { genLayerOpts, Shared } from '@/components/layers/shared';
-import { createCommentVNode, defineComponent, inject, onBeforeUnmount, PropType, warn, watch } from 'vue';
+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 { getSourceRef } from '@/components/sources/shared';
 
@@ -20,22 +20,26 @@ export default defineComponent({
 			return;
 		}
 
-		const map       = inject(mapSymbol)!,
+		const ci        = getCurrentInstance()!,
+			  map       = inject(mapSymbol)!,
 			  isLoaded  = inject(isLoadedSymbol)!,
 			  cid       = inject(componentIdSymbol)!,
 			  sourceRef = getSourceRef(cid, props.source || sourceId);
 
 		watch([ isLoaded, sourceRef ], ([ il, src ]) => {
 			if (il && (src || src === undefined)) {
 				map.value.addLayer(genLayerOpts<FillLayer>(props.layerId, 'fill', props, sourceId), props.before || undefined);
+				registerLayerEvents(map.value, props.layerId, ci.vnode);
 			}
 		}, { immediate: true });
 
 		onBeforeUnmount(() => {
-			if (isLoaded.value) map.value.removeLayer(props.layerId);
+			if (isLoaded.value) {
+				map.value.removeLayer(props.layerId);
+				unregisterLayerEvents(map.value, props.layerId, ci.vnode);
+			}
 		});
 
-
 	},
 	render() {
 		return createCommentVNode('Fill Layer');
diff --git a/src/components/layers/fillExtrusion.layer.ts b/src/components/layers/fillExtrusion.layer.ts
@@ -1,6 +1,6 @@
 import { FillExtrusionLayout, FillExtrusionPaint, LineLayer } from 'maplibre-gl';
-import { genLayerOpts, Shared } from '@/components/layers/shared';
-import { createCommentVNode, defineComponent, inject, onBeforeUnmount, PropType, warn, watch } from 'vue';
+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 { getSourceRef } from '@/components/sources/shared';
 
@@ -20,22 +20,26 @@ export default defineComponent({
 			return;
 		}
 
-		const map       = inject(mapSymbol)!,
+		const ci        = getCurrentInstance()!,
+			  map       = inject(mapSymbol)!,
 			  isLoaded  = inject(isLoadedSymbol)!,
 			  cid       = inject(componentIdSymbol)!,
 			  sourceRef = getSourceRef(cid, props.source || sourceId);
 
 		watch([ isLoaded, sourceRef ], ([ il, src ]) => {
 			if (il && (src || src === undefined)) {
 				map.value.addLayer(genLayerOpts<LineLayer>(props.layerId, 'fill-extrusion', props, sourceId), props.before || undefined);
+				registerLayerEvents(map.value, props.layerId, ci.vnode);
 			}
 		}, { immediate: true });
 
 		onBeforeUnmount(() => {
-			if (isLoaded.value) map.value.removeLayer(props.layerId);
+			if (isLoaded.value) {
+				map.value.removeLayer(props.layerId);
+				unregisterLayerEvents(map.value, props.layerId, ci.vnode);
+			}
 		});
 
-
 	},
 	render() {
 		return createCommentVNode('Fill Extrusion Layer');
diff --git a/src/components/layers/heatmap.layer.ts b/src/components/layers/heatmap.layer.ts
@@ -1,6 +1,6 @@
 import { HeatmapLayer, HeatmapLayout, HeatmapPaint } from 'maplibre-gl';
-import { genLayerOpts, Shared } from '@/components/layers/shared';
-import { createCommentVNode, defineComponent, inject, onBeforeUnmount, PropType, warn, watch } from 'vue';
+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 { getSourceRef } from '@/components/sources/shared';
 
@@ -20,22 +20,26 @@ export default defineComponent({
 			return;
 		}
 
-		const map       = inject(mapSymbol)!,
+		const ci        = getCurrentInstance()!,
+			  map       = inject(mapSymbol)!,
 			  isLoaded  = inject(isLoadedSymbol)!,
 			  cid       = inject(componentIdSymbol)!,
 			  sourceRef = getSourceRef(cid, props.source || sourceId);
 
 		watch([ isLoaded, sourceRef ], ([ il, src ]) => {
 			if (il && (src || src === undefined)) {
 				map.value.addLayer(genLayerOpts<HeatmapLayer>(props.layerId, 'heatmap', props, sourceId), props.before || undefined);
+				registerLayerEvents(map.value, props.layerId, ci.vnode);
 			}
 		}, { immediate: true });
 
 		onBeforeUnmount(() => {
-			if (isLoaded.value) map.value.removeLayer(props.layerId);
+			if (isLoaded.value) {
+				map.value.removeLayer(props.layerId);
+				unregisterLayerEvents(map.value, props.layerId, ci.vnode);
+			}
 		});
 
-
 	},
 	render() {
 		return createCommentVNode('Heatmap Layer');
diff --git a/src/components/layers/hillshade.layer.ts b/src/components/layers/hillshade.layer.ts
@@ -1,6 +1,6 @@
 import { HillshadeLayer, HillshadeLayout, HillshadePaint } from 'maplibre-gl';
-import { genLayerOpts, Shared } from '@/components/layers/shared';
-import { createCommentVNode, defineComponent, inject, onBeforeUnmount, PropType, warn, watch } from 'vue';
+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 { getSourceRef } from '@/components/sources/shared';
 
@@ -20,22 +20,26 @@ export default defineComponent({
 			return;
 		}
 
-		const map       = inject(mapSymbol)!,
+		const ci        = getCurrentInstance()!,
+			  map       = inject(mapSymbol)!,
 			  isLoaded  = inject(isLoadedSymbol)!,
 			  cid       = inject(componentIdSymbol)!,
 			  sourceRef = getSourceRef(cid, props.source || sourceId);
 
 		watch([ isLoaded, sourceRef ], ([ il, src ]) => {
 			if (il && (src || src === undefined)) {
 				map.value.addLayer(genLayerOpts<HillshadeLayer>(props.layerId, 'hillshade', props, sourceId), props.before || undefined);
+				registerLayerEvents(map.value, props.layerId, ci.vnode);
 			}
 		}, { immediate: true });
 
 		onBeforeUnmount(() => {
-			if (isLoaded.value) map.value.removeLayer(props.layerId);
+			if (isLoaded.value) {
+				map.value.removeLayer(props.layerId);
+				unregisterLayerEvents(map.value, props.layerId, ci.vnode);
+			}
 		});
 
-
 	},
 	render() {
 		return createCommentVNode('Hillshade Layer');
diff --git a/src/components/layers/line.layer.ts b/src/components/layers/line.layer.ts
@@ -41,7 +41,6 @@ export default defineComponent({
 			}
 		});
 
-
 	},
 	render() {
 		return createCommentVNode('Line Layer');
diff --git a/src/components/layers/raster.layer.ts b/src/components/layers/raster.layer.ts
@@ -1,6 +1,6 @@
 import { RasterLayer, RasterLayout, RasterPaint } from 'maplibre-gl';
-import { genLayerOpts, Shared } from '@/components/layers/shared';
-import { createCommentVNode, defineComponent, inject, onBeforeUnmount, PropType, warn, watch } from 'vue';
+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 { getSourceRef } from '@/components/sources/shared';
 
@@ -20,22 +20,26 @@ export default defineComponent({
 			return;
 		}
 
-		const map       = inject(mapSymbol)!,
+		const ci        = getCurrentInstance()!,
+			  map       = inject(mapSymbol)!,
 			  isLoaded  = inject(isLoadedSymbol)!,
 			  cid       = inject(componentIdSymbol)!,
 			  sourceRef = getSourceRef(cid, props.source || sourceId);
 
 		watch([ isLoaded, sourceRef ], ([ il, src ]) => {
 			if (il && (src || src === undefined)) {
 				map.value.addLayer(genLayerOpts<RasterLayer>(props.layerId, 'raster', props, sourceId), props.before || undefined);
+				registerLayerEvents(map.value, props.layerId, ci.vnode);
 			}
 		}, { immediate: true });
 
 		onBeforeUnmount(() => {
-			if (isLoaded.value) map.value.removeLayer(props.layerId);
+			if (isLoaded.value) {
+				map.value.removeLayer(props.layerId);
+				unregisterLayerEvents(map.value, props.layerId, ci.vnode);
+			}
 		});
 
-
 	},
 	render() {
 		return createCommentVNode('Raster Layer');
diff --git a/src/components/layers/smybol.layer.ts b/src/components/layers/smybol.layer.ts
@@ -1,6 +1,6 @@
 import { SymbolLayer, SymbolLayout, SymbolPaint } from 'maplibre-gl';
-import { genLayerOpts, Shared } from '@/components/layers/shared';
-import { createCommentVNode, defineComponent, inject, onBeforeUnmount, PropType, warn, watch } from 'vue';
+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 { getSourceRef } from '@/components/sources/shared';
 
@@ -20,22 +20,26 @@ export default defineComponent({
 			return;
 		}
 
-		const map       = inject(mapSymbol)!,
+		const ci        = getCurrentInstance()!,
+			  map       = inject(mapSymbol)!,
 			  isLoaded  = inject(isLoadedSymbol)!,
 			  cid       = inject(componentIdSymbol)!,
 			  sourceRef = getSourceRef(cid, props.source || sourceId);
 
 		watch([ isLoaded, sourceRef ], ([ il, src ]) => {
 			if (il && (src || src === undefined)) {
 				map.value.addLayer(genLayerOpts<SymbolLayer>(props.layerId, 'symbol', props, sourceId), props.before || undefined);
+				registerLayerEvents(map.value, props.layerId, ci.vnode);
 			}
 		}, { immediate: true });
 
 		onBeforeUnmount(() => {
-			if (isLoaded.value) map.value.removeLayer(props.layerId);
+			if (isLoaded.value) {
+				map.value.removeLayer(props.layerId);
+				unregisterLayerEvents(map.value, props.layerId, ci.vnode);
+			}
 		});
 
-
 	},
 	render() {
 		return createCommentVNode('Symbol Layer');

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "vue-maplibre-gl",`
`3`		`- "version": "1.0.0-beta.18",`
	`3`	`+ "version": "1.0.0-beta.19",`
`4`	`4`	`"description": "Vue 3 plugin for maplibre-gl",`
`5`	`5`	`"keywords": [`
`6`	`6`	`"vue",`
Original file line number	Diff line number	Diff line change
`@@ -41,7 +41,6 @@ export default defineComponent({`
`41`	`41`	`}`
`42`	`42`	`});`
`43`	`43`
`44`		`-`
`45`	`44`	`},`
`46`	`45`	`render() {`
`47`	`46`	`return createCommentVNode('Line Layer');`