_corners is undefined

[AlexeyHabarov]

Hello. Please explain this behavior. What mistakes do I make.

Scope:

import "leaflet";
import "leaflet-toolbar";
import "leaflet-distortableimage";
import "leaflet-distortableimage/dist/vendor.js";
import "./styles.css";
import "leaflet/dist/leaflet.css";
import "leaflet-toolbar/dist/leaflet.toolbar.css";
import "leaflet-distortableimage/dist/leaflet.distortableimage.css";

import PlanImage from "../../../../Downloads/Stage_Plans_155_8bd04203-148f-4332-b82a-297afd3be66f.jpeg";

const map = L.map("app", {
  center: [50.0, 10.0],
  zoom: 3,
  scrollWheelZoom: true,
});

L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
  attribution: '&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
}).addTo(map);

let img = null;

document.getElementById("toggle").addEventListener("click", () => {
  img = new L.distortableImageOverlay(PlanImage, {
    rotation: {
      deg: 90,
    },
    mode: "lock",
  }).addTo(map);

  img.on('load', () => {
    console.log(img);   // _corners: (4) [LatLng, LatLng, LatLng, LatLng]
    console.log(img._corners);   // undefined
    img.setCorners({
      0: new L.latLng(51.52, -0.14),
      1: new L.latLng(51.52, -0.1),
      2: new L.latLng(51.5, -0.14),
      3: new L.latLng(51.5, -0.1),
    });
  })
});

Description: How can i get/set corners by click button. When i use img.setCorners i get an error.

DistortableImageOverlay.js:243 Uncaught TypeError: Cannot set properties of undefined (setting '0')
    at NewClass.setCorners (DistortableImageOverlay.js:243:7)
    at NewClass.<anonymous> (index.js:40:9)
    at NewClass.fire (Events.js:190:11)

[welcome[bot]]

Thanks for opening your first issue here! Please follow the issue template to help us help you 👍🎉😄 If you have screenshots to share demonstrating the issue, that's really helpful! 📸 You can make a gif too!

[SashaLifashkin]

I had the same problem. As far as I understand the _corners are filled when the image is added to the page. Based on this, I decided to do the following and then I can get _corners:

L.DomEvent.on(img.getElement(), 'load', () => { console.log(img._corners); // _corners: (4) [LatLng, LatLng, LatLng, LatLng] })