JSFiddle - React, Tailwind, and code Playground

by migerh

HTML

<script src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
<link rel="stylesheet" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css">
<div id="jsxgbox" class="jxgbox" style="width:500px; height:500px;"></div

JavaScript

var p = [];
var counter =0;
var lastPoly;

interior = function (points) {
	//takes 2 points and higlights what is considered the interior of the building
    'use strict';
    counter = counter === undefined ? 0 : ++counter; //variable for creating unique polygon ids
    var p1 = points[0],
		p2 = points[1],
		p3, p4, p, d = 0.7;

	var BGx = function () {
		return - d * (p2.Y() - p1.Y()) / p2.Dist(p1);
	};
	var BGy = function () {
		return d * (p2.X() - p1.X()) / p2.Dist(p1);
	};
	var label = {
		r: function () {
				var deg; // rotation angle
				if (p2.X() !== p1.X()) {
					deg = Math.atan((p2.Y() - p1.Y()) / (p2.X() - p1.X()));
				} else {
					deg = Math.PI / 2;
				}
				return deg;
			},
		x: function () {
				return p.label.content.coords.usrCoords[1];
			},
		y: function () {
				return p.label.content.coords.usrCoords[2];
		}
	}

	var tr = board.create('transform',[BGx, BGy], {type: 'translate'});
	p3 = board.create('point', [p1, tr], {visible: false});
	p4 = board.create('point', [p2, tr], {visible: false});

  if (lastPoly) {
    lastPoly.label.content.setProperty({needsRegularUpdate: false});
  }
  
	lastPoly = p = board.create('polygon',[p1,p2,p4,p3],{
		withLines:false,
		fillcolor: '#111',
		fillOpacity: 0.6,
		withLabel: true,
		id: "poly" + counter,
		name: function () {
			return p1.Dist(p2).toFixed(2) + 'm';
		}
	});
		var tRot = board.create('transform', [label.r, label.x, label.y], {type: 'rotate'});
		tRot.bindTo(p.label.content);
//		board.update();
	return p;
};


var getMouseCoords = function(e) {
        var cPos = board.getCoordsTopLeftCorner(e),
            absPos = JXG.getPosition(e),
            dx = absPos[0]-cPos[0],
            dy = absPos[1]-cPos[1];
 
        return new JXG.Coords(JXG.COORDS_BY_SCREEN, [dx, dy], board);
    },
    up = function(e) {
        var canCreate = true,
            coords = getMouseCoords(e),
            el;
      
      p.push( board.create('point', [coords.usrCoords[1], coords.usrCoords[2]]));
     ...