JSFiddle - React, Tailwind, and code Playground

by JasonMore

JavaScript

var paper = Raphael(10, 50, 600, 800);
var path = paper.path("M189.25,73.25L190,73L192,70L195,65L197,60L200,53L204,48L207,43L209,40L210,38L211,38L213,38L214,39L215,41L216,43L216,45L217,45L218,46L219,49L219,50L219,51L220,52L220,53L221,55L222,56");

var box = paper.rect(path.getBBox().x, path.getBBox().y, 50, 50);
box.attr({
    "stroke": "#87CEFA",
    "fill-opacity": 0.1,
    "fill": "#87CEFA"
});

var resizer = paper.circle(path.getBBox().x + 50, path.getBBox().y + 50, 5);
resizer.attr({
    "fill": "white",
    "cursor": "nw-resize"
});
resizer.drag(moveScale, startScale, endScale);
resizer.pair = [box, path];
resizer.scaleX = 1;
resizer.scaleY = 1;

function startScale() {
    var box = this.pair[0];
    bBox = box.getBBox();
    this.previewBox = box.clone();
    this.previewBox.attr({
        "stroke": "#6633FF",
        "fill": "none"
    });
    this.previewBox.ow = bBox.width;
    this.previewBox.oh = bBox.height;

    this.centerX = box.getBBox().x;
    this.centerY = box.getBBox().y;
}

function moveScale(dx, dy) {
    var scaleX = (this.previewBox.ow + dx) / (this.previewBox.ow);
    var scaleY = (this.previewBox.oh + dy) / (this.previewBox.oh);
    this.previewBox.scale(scaleX, scaleY, this.centerX, this.centerY);
}

function endScale() {
    var bBox = this.previewBox.getBBox();
    resizer.scaleX *= bBox.width / this.previewBox.ow;
    resizer.scaleY *= bBox.height / this.previewBox.oh;
    this.pair[0].scale(resizer.scaleX, resizer.scaleY, this.centerX, this.centerY);

    this.pair[1].scale(resizer.scaleX, resizer.scaleY, this.centerX, this.centerY);

    this.attr({
        cx: bBox.x + bBox.width,
        cy: bBox.y + bBox.height
    });

    this.previewBox.remove();

}