Openlayers can't modify drawn features

Question

I would like to make a chance for modifying my features in OpenLayers. So far I can only drag them across the map, but I can't change their shapes at all when drawn.

In the picture above you can spot the blue dot, which just moves along the shape border but is not able to modify it.

I tried to modify my code by using this example:

https://openlayers.org/en/latest/examples/draw-and-modify-geodesic.html

and my piece of code looks like this:

var modifyInteraction = new ol.interaction.Modify({
 features: selectInteraction.getFeatures({
   if (modifyPoint[0] === center[0] && modifyPoint[1] === center[1]) {
    first = transform(polygon[0], projection, 'EPSG:4326');
    last = transform(
      polygon[(polygon.length - 1) / 2],
      projection,
      'EPSG:4326'
    );
     radius = getDistance(first, last) / 2;
   } else {
     first = transform(center, projection, 'EPSG:4326');
     last = transform(modifyPoint, projection, 'EPSG:4326');
     radius = getDistance(first, last);
   }
   const circle = circular(
    transform(center, projection, 'EPSG:4326'),
    radius,
    128
   );
   circle.transform('EPSG:4326', projection);
   geometries[0].setCoordinates(circle.getCoordinates());
   // save changes to be applied at the end of the interaction
   modifyGeometry.setGeometries(geometries);
  ),
});
var translateInteraction = new ol.interaction.Translate({
 features: selectInteraction.getFeatures()
});

var setActiveEditing = function(active) {
    selectInteraction.getFeatures().clear();
    selectInteraction.setActive(active);
    modifyInteraction.setActive(active);
    translateInteraction.setActive(active);
};
setActiveEditing(true);

and the full fiddle is available here:

https://jsfiddle.net/2yj1ae04/

How can I make these features editable after drawing them in OpenLayers Map?

UPDATE:

https://jsfiddle.net/bsqzc31j/

This is the code I used recently, it's exactly the same effect but no error:

https://jsfiddle.net/bsqzc31j/

var modifyInteraction = new ol.interaction.Modify({
  features: selectInteraction.getFeatures()
});

full situation:

http://test.mkrgeo-blog.com/

UPDATE:

I recently tried this code:

    var modifyInteraction = new ol.interaction.Modify({
    features: selectInteraction.getFeatures(),
    deleteCondition: function(event) {
    return ol.events.condition.shiftKeyOnly(event) &&
    ol.events.condition.singleClick(event);
    }
   });

which works on this map:

http://www.scgis.net/api/ol/v3.6.0/examples/draw-and-modify-features.html

but in my case is still the same.

It does work, when I completely remove/switch off the new ol.interaction.Translate({ However in this event i am unable to drag my features.

UPDATE III:

After aplying the codes from answer 1 I have situation like this: The feature still can't be modfied at all, so the codes defined in my ol.interaction.Modify() don't work:

 var modifyInteraction = new ol.interaction.Modify({
 features: selectInteraction.getFeatures(),
 deleteCondition: function(event) {
 return ol.events.condition.shiftKeyOnly(event) &&
    ol.events.condition.singleClick(event);
 }

});
 map.addInteraction(modifyInteraction);

where I defined both adding the new nodes and deleting existing ones by holding the Shift button.

In this situation, when I have the ol.interaction.Translate defined:

 var translateInteraction = new ol.interaction.Translate({
   condition: function (event) {
   return (
    ol.events.condition.primaryAction(event) &&
    ol.events.condition.platformModifierKeyOnly(event)
   );
   },
 features: selectInteraction.getFeatures(),

}); map.addInteraction(translateInteraction);

the edition of my features is simply blocked. I can drag them but I can't edit them. Since I hold the Alt button I can drag the blue dot away from the object, but nothing happens. Is there any way I can combine both ol.interaction.Modify({ and new ol.interaction.Translate({ together, making all these options listed below working>

• dragging object
• creating a new node
• deleting an existing node

I tried to do it by the holding Shift button:

 var dragFeature = function(evt){
   if(evt.keyCode == 16){
    var translateInteraction = new ol.interaction.Translate({
     features: selectInteraction.getFeatures(),
    });
  };

but I am getting an error:

Uncaught ReferenceError: translateInteraction is not defined

This means that the translateInteraction variable is not global anymore, because it has been created inside another variable.

Answer 1

In http://test.mkrgeo-blog.com/ there is a conflict between the Modify and Translate interactions as they use the same default condition. You could distinguish between them so Translate only accepts mouse action while the Ctrl key is pressed

  new ol.interaction.Translate({
    condition: function (event) {
      return (
        ol.events.condition.primaryAction(event) &&
        ol.events.condition.platformModifierKeyOnly(event)
      );
    },
    ...

and Modify does not work when Ctrl is pressed (but still allows Alt to delete vertices)

  new ol.interaction.Modify({
    condition: function (event) {
      return (
        ol.events.condition.primaryAction(event) &&
        !ol.events.condition.platformModifierKeyOnly(event)
      );
    },
    ...

Answer 2

I think maybe two things. 1. you are not targeting the correct source when you are trying to modify and 2. not adding modify interaction to the map. see example below.

const style // just an array of style objects 
const source = new VectorSource();
const vector = new VectorLayer({
    map:///map object
    source: source,
    style: style
})

const modify = new Modify({source: source});
map.addInteraction(modify);

//another way to get the selected item
const select = new Select({
    style:style,
    layers:vector,
})
select.on('select', (event)=> {
   this.selected = event.target.getFeatures().item(0);//global variable
})

//add this 
const translate = new Translate({
  features: select.getFeatures(),
});
map.addInteraction(translate);