JSFiddle - React, Tailwind, and code Playground

by kiksy

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/konva/2.5.1/konva.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container"></div>

JavaScript

var last_position = {};

  var DrawEachSquare = function(block) {

    var rect = new Konva.Rect({
      x: block.x,
      y: block.y,
      width: block.w,
      height: block.h,
      fill: block.background,
      stroke: 'black',
      strokeWidth: 4
    });


    rect.on('mousedown', function() {
      this.fill("green");
    });

    layer.add(rect);



  }

  var DrawEachSquareBinPacked = function(blocks) {


    for (var n = 0; n < blocks.length; n++) {
      var block = blocks[n];



      DrawEachSquare(block);

    }
  }

  var addSquares = function(objectNumber) {

    DrawEachSquareBinPacked(objectNumber);

  }



  function getBlockData(stage) {;

    layer = new Konva.Layer({
      width: 1000,
      height: 1000
    });

    var blocks = [
    {
        w: 150,
        h: 150,
        background: "red",
        title: "",
        text: "",
        url: "",
        x: 0,
        y: 0
      },
      {
        w: 150,
        h: 150,
        background: "blue",
        title: "",
        text: "",
        url: "",
        x: 150,
        y: 0
      },
      {
        w: 150,
        h: 150,
        background: "green",
        title: "",
        text: "",
        url: "",
        x: 300,
        y: 0
      },
      {
        w: 150,
        h: 150,
        background: "yello",
        title: "",
        text: "",
        url: "",
        x: 450,
        y: 0
      },
      
      
       {
        w: 150,
        h: 150,
        background: "red",
        title: "",
        text: "",
        url: "",
        x: 0,
        y: 150
      },
      {
        w: 150,
        h: 150,
        background: "blue",
        title: "",
        text: "",
        url: "",
        x: 150,
        y: 150
      },
      {
        w: 150,
        h: 150,
        background: "pink",
        title: "",
        text: "",
        url: "",
        x: 300,
        y: 150
      },
      {
        w: 150,
        h: 150,
        background: "yellow",
        title: "",
       ...