i am currently working on a project where a user should be able to edit zones (= polygons). I have created a class Zone which extends L.Polygon so I can create zones and add them to the map. The editing of a specific instance of Zone is triggered by a button, which rund the following code: specificZone.editable.enable() This works so far and looks like this:

The problem I have, is that when dragging the edit points around, one corner point always behaves like an edge point: So it splits the corner like this:

The other points behave as intended. I hope this was somewhat understandable outlined. I am thankful for any kind of help. Have a nice day :)

Kind regards Luca

Edit:

My map gets created as follows:

A Vue Component Map.vue creates an instance of CustomMap.ts:

    const customMap = new CustomMap(
      document.getElementById("mapcontainer") as HTMLElement,
      mapUrl,
      mapParams.getData()
    );

the mapUrl is the place where the map is stored and the mapParams are previously loaded from a server

In the constructor of CustomMap.ts a L.DrawMap gets created, then the map gets added to the map as an instance of CustomImageOverlay which creates a L.imageOverlay. After that the L.FeatureGroup for the CustomZone(s) gets created.

        this.map = L.map(el, {
            crs: L.CRS.Simple,
            center: [0, 0],
            zoom: 4,
            minZoom: 2,
            maxZoom: 7,
            dragging: true,
            maxBoundsViscosity: 0.5,
            maxBounds: mapBounds,
            zoomSnap: 0.25,
            zoomDelta: 0.25,
            attributionControl: false
        });

        this.imageOverlay = new CustomImageOverlay(
          mapUrl,
          mapBounds.getNorthEast(),
          mapBounds.getSouthWest(),
          {
            opacity: 0.5,
            interactive: true,
            zIndex: -1
          },
          this.map
        );

        this.map.addLayer(this.imageOverlay.getLayer());

        // Create a group for zones and add it to map
        const zoneGroup = new L.FeatureGroup();
        zoneGroup.addTo(this.map);
       
        // init drawers
        this.polygonDrawer = new L.Draw.Polygon(this.map);

        // Layers to show/hide
        const overlayLayers: L.Control.LayersObject = {
            Zones: zoneGroup,
        };
        // Create Layer Control with the previous options
        const layerControl = new L.Control.Layers(base, overlayLayers);
        // Add to map
        layerControl.addTo(this.map);

The CustomZone is created and added to the feature group and map.

In the constructor of the customZone the actual polygon gets created by super(latlng, options)

I hope this code gives you better insight :)