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="jxgbox"></div>

CSS

#jxgbox {
    width: 500px;
    height: 500px;
}

JavaScript

var board = JXG.JSXGraph.initBoard('jxgbox', {
    boundingbox: [-2, 5, 5, -2],
    axis: false,
    grid: false
});

// build the triangle
var A = board.create('point', [0, 0]);
var B = board.create('point', [4, 0]);
var C = board.create('point', [3, 3]);

var pol = board.create('polygon', [A, B, C], {hasInnerPoints: true});

// some helper data and transformations
var angle = JXG.Math.Geometry.rad(B, A, C);
var dist = B.Dist(A);
var scale = C.Dist(A) / dist;
var Aold = A.coords.usrCoords;

var t1 = board.create('transform', [
    function () {
        return -A.X();
    },
    function () {
        return -A.Y();
    }
], {type: 'translation'});
var s = board.create('transform', [scale, scale], {type: 'scale'});
var r = board.create('transform', [angle], {type: 'rotate'});
var t2 = board.create('transform', [
    function () {
        return A.X();
    },
    function () {
        return A.Y();
    }
], {type: 'translation'});
var t = t1.melt(s).melt(r).melt(t2);

updateB = function () {
    var d = B.Dist(A);
    
    B.moveTo([
        A.X() + dist / d * (B.X() - A.X()),
        A.Y() + dist / d * (B.Y() - A.Y())
    ]);
};

updateC = function () {
    var b = B.coords.usrCoords,
        c = JXG.Math.matVecMult(t.matrix, b);

    C.moveTo(c);
};

A.on('drag', function () {
    updateB();
    updateC();
});

B.on('drag', function () {
    updateB();
    updateC();
});

C.on('drag', function () {
    updateC();
});