Commit ced8d933 authored by Michael Underwood's avatar Michael Underwood
Browse files

WIP looking at alternative to using leafletMethods

parent aaf521fe

src/components/LIcon.vue

+13 −6
Original line number Diff line number Diff line 
<script>

import { onMounted, reactive, ref } from "vue";

import { onMounted, reactive, ref, inject } from "vue";

import { props, setup as iconSetup } from "../functions/icon";

import { generatePlaceholderMethods } from "../utils";



/**

 * Icon component, lets you add and custom icons to the map
@@ -10,11 +11,15 @@ export default { 
  props,

  setup(props, context) {

    const leafletRef = ref({});

    const schematics = reactive({

      DomEvent: () => undefined,

      divIcon: () => undefined,

      icon: () => undefined,

    });

    const schematics = generatePlaceholderMethods([

      "DomEvent",

      "divIcon",

      "icon",

    ]);



    const setIcon = inject("setIcon");

    const canSetParentHtml = inject("canSetParentHtml");

    const setParentHtml = inject("setParentHtml");



    onMounted(async () => {

      const { DomEvent, divIcon, icon } = await import(
@@ -23,6 +28,8 @@ export default { 
      schematics.DomEvent = DomEvent;

      schematics.divIcon = divIcon;

      schematics.icon = icon;



      leafletRef.value = 

    });

  },

};

src/components/LMarker.vue

+4 −0
Original line number Diff line number Diff line
@@ -35,6 +35,10 @@ export default { 


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



      schematics.canSetParentHtml = () => !!leafletRef.value.getElement();

      schematics.setParentHtml = (html) =>

        (leafletRef.value.getElement().innerHTML = html);



      const listeners = remapEvents(context.attrs);

      DomEvent.on(leafletRef.value, listeners);

src/functions/icon.js

+11 −5
Original line number Diff line number Diff line
@@ -69,10 +69,16 @@ export const props = { 
};



export const setup = (props, mapRef, context, leafletMethods) => {

  const recreationNeeded = ref(false);

  const swapHtmlNeeded = ref(false);

  let recreationNeeded = false;

  let htmlSwapNeeded = false;

  let iconObject = undefined;

  const options = {

    ...props,

  };



  const createIcon = () => {};

  const createIcon = () => {

    if (htmlSwapNeeded && !recreationNeeded && iconObject)

  };



  const methods = {

    scheduleCreateIcon() {
@@ -81,12 +87,12 @@ export const setup = (props, mapRef, context, leafletMethods) => { 
    },



    scheduleHtmlSwap() {

      swapHtmlNeeded.value = true;

      htmlSwapNeeded.value = true;

      nextTick(createIcon);

    },



    createIcon,

  };



  return { methods };

  return { options, methods };

};