How to limit drawing inside existing polygon using OpenLayers

Question

Little intro: I want to limit drawing inside existing polygons using snap interaction on restriction layer.

I implemented condition on draw interaction that checks if the features of restrictive source are available and if they are then enable drawing inside it.

It works fine but it is a bit too restrictive. (e.g. if I want to draw polygon on the existing borders or I want to draw inside polygon using existing borders ).

Example below:

new Draw({
  condition: (e) => {
    let coords = e.coordinate
    let features = restrictionSource.getFeaturesAtCoordinate(coords);
    if (features.length > 0) {
      return true;
    } else {
      return false;
    }
  },
  type: "Polygon",
  source: vectorDrawLayer.getSource(),
  style: styleDuringDraw
});

I detected some strange behavior while drawing inside restrictive polygon. On some edges I can click, on others I can't.

In live example below:

https://stackblitz.com/edit/js-txi1es

I can't start drawing from the inside edge of the bottom right corner (and top corner as well) where snap interaction for some reason doesn't work. I have case where I need to draw polygon area that uses whole area of restrictive polygon but I'can't do that because my approach is a bit to restrictive.

I'm wondering if any different approach is available or recommended in this type of cases.

Answer 1

First problem your polygon isn't closed properly which means the snap isn't working on one edge:

  'coordinates': [[[-5e6, -1e6], [-4e6, 1e6], [-3e6, -1e6], [-5e6, -1e6]]]

The snap snaps to a pixel and it seems the coordinate in that event sometimes isn't exactly on the feature, so this test should be more reliable

let features = olMap.getFeaturesAtPixel(e.pixel, { layerFilter: function(layer) { return layer === restrictionLayer; }});
if (features && features.length > 0) {