JSFiddle - React, Tailwind, and code Playground

by markusleth

HTML

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.4.min.js"></script>
Hold down mouse button and move to select shapes:
<div id="container"></div>

JavaScript

var newShape = null;
  var mx1 = 0;
  var my1 = 0;

  var mx2 = 0;
  var my2 = 0;
  var selecting = false;

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

  var mainLayer = new Kinetic.Layer();
  var dragLayer = new Kinetic.Layer();
  var bgLayer = new Kinetic.Layer();

  stage.add(mainLayer);
  stage.add(dragLayer);
  stage.add(bgLayer);

  for (var t = 0; t < 5; t++) {
      for (var tt = 0; tt < 5; tt++) {
          var shape = new Kinetic.Rect({
              x: 30 + (t * 100),
              y: 30 + (tt * 50),
              width: 80,
              height: 40,
              fill: 'green',
              name: 'selectable',
              stroke: 'black',
              strokeWidth: 2,
              draggable: true
          });
          mainLayer.add(shape);
      }
      var cir = new Kinetic.Circle({
              x: 60 + (t * 100),
              y: 300,
              radius: 20,
              name: 'selectable',
              fill: 'green',
              stroke: 'black',
              strokeWidth: 2,
              draggable: true
      });
      mainLayer.add(cir);
  }

  var bgrect = new Kinetic.Rect({
      x: 0,
      y: 0,
      width: 600,
      height: 400,
  });
  bgLayer.add(bgrect);

  var selectRect = new Kinetic.Rect({
      x: 10,
      y: 10,
      width: 1,
      height: 1,
      fill: 'gray',
      stroke: 'black',
      strokeWidth: 1,
      opacity: 0.5,
      name: "select"
  });
  dragLayer.add(selectRect);
  dragLayer.draw();
  mainLayer.draw();
  bgLayer.draw();

  stage.on('mousedown', function () {
      selecting = true;
      var mousePos = stage.getMousePosition();
      mx1 = mousePos.x;
      my1 = mousePos.y;
      selectRect.setX(mx1);
      selectRect.setY(my1);
      selectRect.setWidth(1);
      selectRect.setHeight(1);
      selectRect.show();
      dragLayer.drawScene();
  });


  stage.on("mousemove touchmove", function () {
      if (selecting) {
          var...