How do we remove the markerobject from target?

[aruprakshit]

Hi,

I think I met an edge which I don't find any solutions yet. I have a gallery where I add the marker object to the presently viewed image when it appears, but the problem here is that, I get lot of markers to be created on top of each other, due to which the ok or cancel button doesn't hide on click on them until the number of time attached gets clicked. Is there anyway we can remove the marker object from the target before we attach it, so that the target always have only one fresh one attached. I have created one demo here https://codesandbox.io/s/marker-js-2-all-defaults-demo-forked-bl5tp0?file=/src/index.js

import "./styles.css";
import * as markerjs2 from "markerjs2";

function showMarkerArea(target) {
  const markerArea = new markerjs2.MarkerArea(target);

  markerArea.addEventListener(
    "render",
    (event) => (target.src = event.dataUrl)
  );
  markerArea.show();
}

const sampleImage = document.getElementById("sampleImage");
sampleImage.addEventListener("click", () => {
  // showMarkerArea(sampleImage);

  [1, 2, 3].forEach(() => {
    showMarkerArea(sampleImage);
  });
});

[ailon]

I'm not sure I understand what you are trying to achieve. Why do you create multiple MarkerArea objects on top of each other? In case you need to do this for some reason (which I don't understand), you can call markerArea.close() on the previous instance before creating a new one. If this is not what you are after, then please provide some additional details to help me understand the use-case.

[aruprakshit]

@ailon I have a gallery of images, and when I go traverse through them, I use the image and atttach the marker object. First image is fine, and then when I go to the second and click on the image the marker displays. I then need to click on the OK/cancel button twice to disappear it.

import * as markerjs2 from "markerjs2";

module.exports = exports =
  function (elmPorts) {
    elmPorts.sendImgElRef.subscribe(function handleSendImgElRefMessage (input) {
      const inputObj = JSON.parse(input)
      const imgEl = document.querySelectorAll('.attachMarker .' + inputObj.nodeClass)[0];
      console.log('imgEl', imgEl)

      const handleClick = (e) => {
        console.log('imgEl finder', e.target)
        showMarkerArea(e.target, inputObj, elmPorts);
      }
      
      if (imgEl) {
        console.log('Here!!')
        imgEl.addEventListener("click", handleClick);
      }
      
    })
  }

  function showMarkerArea(target, inputObj, ports) {
    let  maState;
    const markerArea = new markerjs2.MarkerArea(target);
    markerArea.targetRoot = target.parentElement;
    markerArea.renderAtNaturalSize = true;
    markerArea.renderMarkersOnly = false;
    // markerArea.settings.displayMode = 'popup';
    markerArea.addEventListener(
      "render",
      (event) => {
        target.src = event.dataUrl
        // save the state of MarkerArea
        maState = event.state;
        invokePortsByAttachmentType(inputObj['attachment'], event.dataUrl, ports)
      }
    );
    markerArea.show();

    // if previous state is present - restore it
    if (maState) {
      markerArea.restoreState(maState);
    }
  }

  function invokePortsByAttachmentType(attachment, dataUrl, ports) {
    if (attachment.attachableType == "Vessel") {
      ports.sendNewVesselImageBlob.send(
        JSON.stringify(Object.assign({}, attachment, {file: dataUrl}))
      )
    } else if (attachment.attachableType == "VesselClass") {
      ports.sendNewVesselClassImageBlob.send(
        JSON.stringify(Object.assign({}, attachment, {file: dataUrl}))
      )
    } else if (attachment.attachableType == "InspectorTool::Inspection") {
      ports.sendNewInspectionImageBlob.send(
        JSON.stringify(Object.assign({}, attachment, {file: dataUrl}))
      )
    } else if (attachment.attachableType == "InspectorTool::InspectionComponent") {
      ports.sendNewInspectionComponentImageBlob.send(
        JSON.stringify(Object.assign({}, attachment, {file: dataUrl}))
      )
    }
  }

This is the actual code. In the above demo I have shown the behaviour I am facing with the loop. Because I thought of replicating it easier that way. How do I verify that coming image has the object in it or not, before I close.

Please let me know if I need to provide more informations on it.

[aruprakshit]

@ailon I created a small app to reproduce it. Please check https://codesandbox.io/s/marker-js-2-all-defaults-demo-forked-f3f29i?file=/src/index.js

Click on any image, let it open. Now click on the image to open the marker. Close the marker by clicking on the close icon. Now open another image from the gallery, do click on the image, and let the marker comes. Now you see you need to click on the close icon twice to go it away. Do it on the third image, now you need 3 clicks to close the marker. Same for Save button.

Hope it helps to tell the issue clearly and more lively.

[aruprakshit]

@ailon Could you please check this issue?

[ailon]

I'm sorry, I don't understand what the "issue" with marker.js is here. You open a new marker area without closing the old one. So obviously this is what happens. Just close the previous marker area before opening a new one.

[aruprakshit]

@ailon Thanks for your reply.

I hope you checked my codesandbox example demo.

I assume clicking on save/cancel(X) button close it automatically. Because when I click on them, I see the marker hides. Again when I open it on another image, previous all + new one opened on top of each other. So if my understading of auto close not right, could you point to me official doc example where I can see which events I need to capture to close it programatically?

[ailon]

@aruprakshit I checked your demo. What I see is that you are adding a new event listener to the expandImg on every click on the thumbnail. So with every consequent image selection you have more and more click event handlers on it and create marker.js instances more and more times in a row - hence your issue. As I said - not related to marker.js at all, as far as I can tell.