JSFiddle - React, Tailwind, and code Playground

by migerh

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jsxgraph/0.97/jsxgraphcore.js"></script>
<link rel="stylesheet" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css">
<div id="jxgbox" style="width: 500px; height: 500px;"></div>
<input type="button" value="remove last Segment" onclick="removeSegmentt();">

JavaScript

var brd = JXG.JSXGraph.initBoard('jxgbox', {
    boundingbox: [-10, 10, 10, -10],
    keepaspectratio: true,
    axis: true,
    grid: true
});
var p = [],
    pp = [],
    line = [],
    // Let's define the handler before and assign all points
    // the same handler
    downHandler = function () {
        brd.suspendUpdate();
        // We should use a per point index.
        // up/down/move/drag handlers are executed in the context
        // of the element that is interacted with, hence this refers
        // to the point we currently click on.
        this.myColorIndex = (this.myColorIndex + 1) % colors.length;
        this.setAttribute({
            color: colors[this.myColorIndex]
        });
        brd.unsuspendUpdate();
    };
p.push(brd.create('point', [-4, 3]));
p.push(brd.create('point', [-3, 0]));
p.push(brd.create('point', [1, -3]));
p.push(brd.create('point', [3, 2]));
p.push(brd.create('point', [5, 2]));

for (i = 0; i < p.length - 1; i++) {
    line.push = brd.create('segment', [p[i], p[i + 1]]);
}
var index = 0,
    index2 = 0,
    index3 = 0,
    colors = ['green', 'blue', 'pink'];

// initialize the index
p[p.length - 1].myColorIndex = 0;
p[p.length - 1].on('down', downHandler);

removeSegmentt = function () {
    if (p.length > 1) {
        brd.removeObject(p[p.length - 1]);
        p.splice(p.length - 1, 1);
    }
    
    // initialize the downHandler
    p[p.length - 1].myColorIndex = 0;
    p[p.length - 1].on('down', downHandler);
    brd.update();
};