JSFiddle - React, Tailwind, and code Playground

by YOUNY zhu

HTML

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script>
<h4>Click circle to toggle resizing mode</h4>
<h4>If resizing(green), dragging circle will resize rect</h4>
<h4>If not resizing(red), dragging circle will drag rect</h4>
<div id="container"></div>

CSS

body {
    padding:20px;
}
#container {
    border:solid 1px #ccc;
    margin-top: 10px;
    width:350px;
    height:350px;
}

JavaScript

var stage = new Kinetic.Stage({
    container: 'container',
    width: 350,
    height: 350
});
var layer = new Kinetic.Layer();
layer.setDraggable(true);
stage.add(layer);

var rect = new Kinetic.Rect({
    x: 50,
    y: 50,
    width: 100,
    height: 100,
    fill: 'blue',
    strokeWidth: 4,
    draggable: false
});
layer.add(rect);

var circle1 = new Kinetic.Circle({
    x: 150,
    y: 150,
    radius: 10,
    fill: 'red',
    stroke: 'black',
    strokeWidth: 4,
    draggable: false
});
circle1.isResizing = false;
circle1.on("click", function (e) {
    // toggle resizing true/false
    var isResizing = !this.isResizing;
    this.setDraggable(isResizing);
    layer.setDraggable(!isResizing);
    this.setFill((isResizing ? "green" : "red"));
    this.isResizing = isResizing;
    layer.draw();
});
circle1.on("dragmove", function () {
    if (this.isResizing) {
        var pos = this.getPosition();
        var x = pos.x;
        var y = pos.y;
        var rectX = rect.getX();
        var rectY = rect.getY();
        rect.setSize(x - rectX, y - rectY);
        layer.draw();
    }
});
layer.add(circle1);
layer.draw();