Is there a way so that I can keep the square but resize it in openlayers?

I got four different coordinates that is making a square in the openlayers map. But I want to know if it is possible that instead of breaking the square shape, is it possible to just grab one of the corners and resize (make bigger/smaller) the square?

My coordinates are as follows:

var x_1 = 28.0244307;
var y_1 = -25.8635238;

var x_2 = 28.0244307;
var y_2 = -25.8835238;

var x_3 = 28.0444307;
var y_3 = -25.8835238;

var x_4 = 28.0444307;
var y_4 = -25.8635238;

And then the code to resize it, but it is breaking the square shape:

var coords = [
                [x_1, y_1],
                [x_2, y_2],
                [x_3, y_3],
                [x_4, y_4],
                [x_1, y_1]
            ];

            var polygon = new ol.geom.Polygon([coords]);

            var feature = new ol.Feature(polygon);

            polygon.transform('EPSG:4326', 'EPSG:3857');

            var vectorSource = this.vectorSource;
            vectorSource.addFeature(feature);

            var select = new ol.interaction.Select();

            var modify = new ol.interaction.Modify({
                    features: select.getFeatures(),
                });

            var snap = new ol.interaction.Snap({
                source: vectorSource,
            });

            this.map.addInteraction(select);
            this.map.addInteraction(modify);
            this.map.addInteraction(snap);

Just create a polygon with your 4 points an use a GeometryFunction in your style to only display the points.
Then use ol-ext ol/interaction/Transform to modify the shape.