JSFiddle - React, Tailwind, and code Playground

by projeqht

HTML

<div id="container"></div>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.6.0.min.js"></script>

CSS

#container {
    width:1000px;
    height:2500px;
    border:1px solid #000;
}

JavaScript

var stage = new Kinetic.Stage({
    container: 'container',
    width: 1000,
    height: 2500
});

var layer = new Kinetic.Layer({
    draggable: true
});
var imageLayer = new Kinetic.Layer();

var x = 0;
var y = 0;

for (var i = 0; i < 100; i++) {
    for (var j = 0; j < 40; j++) {
        x = j * 50;
        var rect = new Kinetic.Rect({
            x: x,
            y: y,
            width: 48,
            height: 48,
            fill: get_random_color(),
            stroke: 'black',
            strokeWidth: 1
        });

        rect.on('click', function () {
            alert('Rect');
        });

        layer.add(rect);
    }
    y += 50;
}
stage.add(layer);
stage.add(imageLayer);

var ox, oy;

layer.on('mousedown', function () {
    var mousePos = stage.getMousePosition();
    ox = mousePos.x;
    oy = mousePos.y;
});

layer.on('dragstart', function () {
    var ex, ey, dx, dy;

    if (!imageLayer.getChildren().length) {
        layer.toImage({
            callback: function (img) {
                var image = new Kinetic.Image({
                    image: img,
                    x: 0,
                    y: 0,
                    fill:'#000' //Added Black Fill so that it's obvious we're dragging an Image
                });

                image.on('click', function () {
                    alert('image');
                });

                image.on('mouseup', function () {
                    var mousePos = stage.getMousePosition();
                    ex = mousePos.x;
                    ey = mousePos.y
                    dx = ex - ox;
                    dy = ey - oy;
                    layer.setX(layer.getX() + dx);
                    layer.setY(layer.getY() + dy);
                    layer.show();
                    layer.draw();
                    imageLayer.hide();
                    console.log('image mouseup');
                });
                layer.hide();
                imageLayer.add(image);
               ...