JSFiddle - React, Tailwind, and code Playground

by aaronamran

HTML

<script src="https://jsxgraph.org/distrib/jsxgraphcore.js"></script>

JavaScript

// Start of jsfiddle header.
var mode = "jsfiddle";
var divid = "jxgbox";
var fbd_names = "fbd_names";
var stateRef = "data";
var initstring = document.getElementById("init").innerHTML;
const centeredLabelStyle = {
  size: 0,
  showInfobox: false,
  label: {
    offset: [0, 0],
    anchorX: 'middle',
    anchorY: 'middle'
  }
};


class Rectangles {
  constructor(containerId) {
    this.board = JXG.JSXGraph.initBoard(containerId, {
      boundingbox: [-10, 10, 10, -10],
      axis: true
    });
    this.coordinates = [];
    this.radius = 1;
    this.rectangles = [];
  }

  addCoordinate(x, y) {
    this.coordinates.push({ x, y });
  }

  setRadius(radius) {
    this.radius = radius;
  }

  createRectangles() {
    if (this.coordinates.length % 2 !== 0) {
      console.error("The number of coordinates should be even.");
      return;
    }

    for (let i = 0; i < this.coordinates.length; i += 2) {
      const p1 = this.coordinates[i];
      const p2 = this.coordinates[i + 1];

      const curve = this.board.create("curve", [
        [p1.x - this.radius, p1.y],
        [p1.x, p1.y + this.radius],
        [p1.x + this.radius, p1.y],
        [p1.x, p1.y - this.radius],
        [p1.x - this.radius, p1.y]
      ]);
      this.rectangles.push(curve);
      curve.updateCurve();

      const width = Math.abs(p2.x - p1.x);
      const height = Math.abs(p2.y - p1.y);
      curve.setAttribute({
        width: width,
        height: height,
        visible: true,
        fillColor: 'blue'
      });
    }

    // Perform curve union if there are intersecting rectangles
    const union = this.board.create("curve.union", this.rectangles);

    // Hide original rectangles and show the union
    this.rectangles.forEach(rect => rect.hide());
    union.show();
  }
}


const rectangles = new Rectangles("jsxgraph-container");

// Assume the user has entered an even number of coordinates and a radius value
rectangles.addCoordinate(1, 1);
rectangles.addCoordinate(4,...