JSFiddle - React, Tailwind, and code Playground

by migerh

HTML

<link rel="stylesheet" href="http://eucbeniki.sio.si/scripts/jsxgraph.css">
<script src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
<div id="jxgbox" class="jxgbox" style="width:500px; height:500px; margin-left:auto; margin-right:auto;"></div>

JavaScript

brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-15, 20, 15, -10], keepaspectratio:true, axis: true});

p1 = brd.create('point',[0,0]);

p2 = brd.create('point',[5,5], {myProp: true});
p3 = brd.create('point',[-5,-5]);
p4 = brd.create('point',[-10,10], {myProp: true});
sector = brd.create('sector',[p1,p2,p3],{hasInnerPoints:true,fixed:false,
                                         withLabel:true,name:function(){return p1.Dist(p2);}});
sector.label.setAttribute({visible:false});
sector.on('over', function () {
    this.label.setAttribute({visible:true});
});
sector.on('out', function () {
    this.label.setAttribute({visible:false});
});
curve = brd.create('curve',JXG.Math.Numerics.bezier([p1,p2,p3,p4]),{hasInnerPoints:true, myProp: true});

brd.select({myProp: true}).setAttribute({color: 'pink'});