JSFiddle - React, Tailwind, and code Playground

by lytrax

HTML

<script src="https://cdn.jsdelivr.net/npm/interactjs@latest/dist/interact.min.js"></script>


<svg id="mysvg">
</svg>

CSS

svg {
  width: 100%;
  height: 240px;
  
  -ms-touch-action: none;
      touch-action: none;
      box-sizing: border-box;
}
body { margin: 0px }
#mysvg { 
   margin-top: 12px; 
   margin-left: 12px; 
}

JavaScript

var svg = document.getElementById('mysvg');

// draw vertical lines
var gridSize = 20;
for (var i=0;i < 100;i++){
    var line = document.createElementNS("http://www.w3.org/2000/svg", "line");    
    svg.appendChild(line);
    line.setAttribute("x1", (i + 1) * gridSize)
    line.setAttribute("y1", 0)
    line.setAttribute("x2", (i + 1) * gridSize)
    line.setAttribute("y2", 500)
    line.setAttribute("stroke-width", 1)
    line.setAttribute("stroke", 'gray');
}
        
// draw vertical lines
for (var i=0;i < 100;i++){
    var line = document.createElementNS("http://www.w3.org/2000/svg", "line");    
    svg.appendChild(line);
   line.setAttribute("x1", 0)
   line.setAttribute("y1", (i + 1) * gridSize)
   line.setAttribute("x2", 2000)
   line.setAttribute("y2", (i + 1) * gridSize)
   line.setAttribute("stroke-width", 1)
   line.setAttribute("stroke", 'gray');
}

var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
svg.appendChild(rect);
rect.setAttribute('x', 90);
rect.setAttribute('y', 90);
rect.setAttribute('width', 100);
rect.setAttribute('height', 100);
rect.setAttribute('class', 'resize-me');
rect.setAttribute('stroke-width', 2);
rect.setAttribute('stroke', 'black');
rect.setAttribute('fill', 'orange');

interact('.resize-me')
    .resizable({
        edges: { left: true, right: true, bottom: true, top: true },
        margin: 3,
        modifiers: [
          interact.modifiers.snap({
            targets: [
              interact.snappers.grid({
                x: 20,
                y: 20,
                offset: { x: 12, y: 12 }
              }),
            ]
          })
        ]
    })
    .on('resizemove', function(event) {
        var target = event.target;
        var x = (parseFloat(target.getAttribute('endx')) || 0)
        var y = (parseFloat(target.getAttribute('endy')) || 0)

        target.setAttribute('width', event.rect.width);
        target.setAttribute('height', event.rect.height);

        x +=...