WIP switch to injecting one ref per function (d9cf01fc) · Commits · school / Capstone Design / 02 / vue-leaflet

src/components/LControlLayers.vue

+4 −4

Original line number	Diff line number	Diff line
		<script>
		import { onMounted, ref, inject } from "vue";
		import { onMounted, ref } from "vue";
		import { props, setup as controlSetup } from "../functions/controlLayers";
		import { propsBinder } from "../utils.js";
		import { injectLeafletMethod, propsBinder } from "../utils.js";

		export default {
		name: "LControlLayers",
		@@ -9,7 +9,7 @@ export default {
		setup(props) {
		const leafletRef = ref({});

		const lMethods = inject("leafLetMethods");
		const registerLayerControl = injectLeafletMethod("registerLayerControl");
		const { options, methods } = controlSetup(props, leafletRef);
		onMounted(async () => {
		const { control, setOptions } = await import(
		@@ -19,7 +19,7 @@ export default {
		leafletRef.value = control.layers(null, null, options);
		propsBinder(methods, leafletRef.value, props, setOptions);

		lMethods.registerLayerControl({
		registerLayerControl({
		...props,
		...methods,
		leafletObject: leafletRef.value,

+12 −12

Original line number	Diff line number	Diff line
		@@ -5,20 +5,15 @@
		</template>

		<script>
		import {
		onMounted,
		onBeforeUnmount,
		computed,
		provide,
		reactive,
		ref,
		} from "vue";
		import { onMounted, onBeforeUnmount, computed, reactive, ref } from "vue";
		import {
		remapEvents,
		propsBinder,
		debounce,
		resetWebpackIcon,
		generatePlaceholderMethods,
		provideLeafletMethods,
		updateLeafletMethod,
		} from "../utils.js";

		export default {
		@@ -175,7 +170,8 @@ export default {
		"registerLayerControl",
		]);

		provide("leafLetMethods", schematics);
		console.log("Providing placeholder addLayer");
		provideLeafletMethods(schematics);

		const eventHandlers = {
		moveEndHandler() {
		@@ -335,9 +331,13 @@ export default {
		},
		};

		schematics.addLayer = methods.addLayer;
		schematics.removeLayer = methods.removeLayer;
		schematics.registerLayerControl = methods.registerLayerControl;
		console.log("Reassigning addLayer");
		updateLeafletMethod(schematics.addLayer, methods.addLayer);
		updateLeafletMethod(schematics.removeLayer, methods.removeLayer);
		updateLeafletMethod(
		schematics.registerLayerControl,
		methods.registerLayerControl
		);

		blueprint.leafletRef = map(root.value, options);

+7 −4

Original line number	Diff line number	Diff line
		<script>
		import { onMounted, ref, inject, h } from "vue";
		import { onMounted, ref, h } from "vue";
		import {
		remapEvents,
		propsBinder,
		debounce,
		generatePlaceholderMethods,
		injectLeafletMethod,
		updateLeafletMethod,
		} from "../utils.js";
		import { props, setup as markerSetup } from "../functions/marker";

		@@ -20,7 +22,8 @@ export default {

		const schematics = generatePlaceholderMethods(["latLng"]);

		const lMethods = inject("leafLetMethods");
		console.log("Injecting addLayer to LMarker");
		const addLayer = injectLeafletMethod("addLayer");
		const { options, methods } = markerSetup(
		props,
		leafletRef,
		@@ -32,7 +35,7 @@ export default {
		const { marker, DomEvent, latLng, setOptions } = await import(
		"leaflet/dist/leaflet-src.esm"
		);
		schematics.latLng = latLng;
		updateLeafletMethod(schematics.latLng, latLng);

		leafletRef.value = marker(props.latLng, options);

		@@ -41,7 +44,7 @@ export default {

		leafletRef.value.on("move", debounce(methods.latLngSync, 100));
		propsBinder(methods, leafletRef.value, props, setOptions);
		lMethods.addLayer({
		addLayer({
		...props,
		...methods,
		leafletObject: leafletRef.value,

+5 −4

Original line number	Diff line number	Diff line
		<script>
		import { onMounted, ref, inject } from "vue";
		import { remapEvents, propsBinder } from "../utils.js";
		import { onMounted, ref } from "vue";
		import { remapEvents, propsBinder, injectLeafletMethod } from "../utils.js";
		import { props, setup as tileLayerSetup } from "../functions/tileLayer";

		export default {
		props,
		setup(props, context) {
		const leafletRef = ref({});
		const lMethods = inject("leafLetMethods");
		console.log("injecting addLayer to LTileLayer");
		const addLayer = injectLeafletMethod("addLayer");

		const { options, methods } = tileLayerSetup(props, leafletRef);

		@@ -21,7 +22,7 @@ export default {
		DomEvent.on(leafletRef.value, listeners);

		propsBinder(methods, leafletRef.value, props, setOptions);
		lMethods.addLayer({
		addLayer({
		...props,
		...methods,
		leafletObject: leafletRef.value,

+5 −10

Original line number	Diff line number	Diff line
		<script>
		import { onMounted, ref, inject, h } from "vue";
		import { propsBinder, remapEvents } from "../utils.js";
		import { onMounted, ref, h } from "vue";
		import { injectLeafletMethod, propsBinder, remapEvents } from "../utils.js";
		import { setup as tooltipSetup, props } from "../functions/tooltip";

		/**
		@@ -13,13 +13,8 @@ export default {
		const leafletRef = ref({});
		const root = ref(null);

		const lMethods = inject("leafLetMethods");
		const { options, methods } = tooltipSetup(
		props,
		leafletRef,
		context,
		lMethods
		);
		const bindTooltip = injectLeafletMethod("bindTooltip");
		const { options, methods } = tooltipSetup(props, leafletRef, context);

		onMounted(async () => {
		const { tooltip, DomEvent, setOptions } = await import(
		@@ -32,7 +27,7 @@ export default {
		const listeners = remapEvents(context.attrs);
		DomEvent.on(leafletRef.value, listeners);
		leafletRef.value.setContent(props.content \|\| root.value);
		lMethods.bindTooltip({ leafletObject: leafletRef.value });
		bindTooltip({ leafletObject: leafletRef.value });
		});
		return { root };
		},