Add feature to map on single click

Question

I want to have an interaction with the map where I add the polygon which I already know the geometry and is based on a single coordinate which is the center (click location), so with a single click I want to add this polygon (a circle really).

I can't seem to be able to just do this with a single click. I have to double click for the feature to finish.

I also want to see the polygon on my mouse location before the single click to save the feature.

        value = "Circle";
        
        geometryFunction = (coordinates, geometry) => {
            var center = coordinates[0];
            var radius = 50 * 1852;
            /** radius = meters
            ** center = lonLat
            */
            const steps = 128;
            const polygonData = [];
            for (let i = 0; i < steps; i++) {
                polygonData.push(
                    fromLonLat(getDestination(toLonLat(center), radius, (i * -360) / steps))
                );
            }
            polygonData.push(polygonData[0]);
            geometry =  new Polygon([polygonData]);
            console.log("geom");
            
            return geometry;
        };

        var draw = new Draw({
            source: layer.getSource(),
            type: value,
            geometryFunction: geometryFunction,
            style: new Style({
                stroke: new Stroke({
                    color: '#F5F5F5',
                    width: 1.5
                }),
                fill: new Fill({
                    color: 'rgba(224, 230, 233, 0.1)'
                })
            })
        });

        map.addInteraction(draw);

Answer 1

A Circle draw type needs two clicks, one for the center and another to set the radius. For a single click use a Point draw type. You can then produce a circle when the point has been drawn. Openlayers also has a built-in method https://openlayers.org/en/latest/apidoc/module-ol_geom_Polygon.html#.circular to produce circular polygons.

    var draw = new Draw({
        source: layer.getSource(),
        type: 'Point', 
        style: new Style({
            geometry: function(feature){
                var geometry = feature.getGeometry();
                var radius = 50 * 1852;
                var polygon = circular(toLonLat(geometry.getCoordinates()), radius, 128);
                return polygon.transform('EPSG:4326', 'EPSG:3857');
            },
            stroke: new Stroke({
                color: '#F5F5F5',
                width: 1.5
            }),
            fill: new Fill({
                color: 'rgba(224, 230, 233, 0.1)'
            })
        })
    });

    draw.on('drawend', function(event){
        var center = event.feature.getGeometry().getCoordinates();
        var radius = 50 * 1852;
        var polygon = circular(toLonLat(center), radius, 128);
        event.feature.setGeometry(polygon.transform('EPSG:4326', 'EPSG:3857'));
    }

    map.addInteraction(draw);