Select Points

HTML

<script src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph,css"></script>
<script src="http://jsxgraph.uni-bayreuth.de/~michael/jsxgraph-nightly/jsxgraphcore.js"></script>
<button id="clearbtn">Clear Selection</button>
<div id="box"></div>

CSS

#box {
    width:500px;
    height:500px;
    margin: 0 4em 1em 0;
    float: left;
}

JavaScript

var xmin = -10;
var ymin = -10;
var xmax = 10;
var ymax = 10;
// get size of board in pixels for conversions
var width = $('#box').width();
var height = $('#box').height();
var V = [];
var E = [];
var polyPoints = [], polygon, group;

//initialize boards
JXG.Options.point.snapToGrid = true;
JXG.Options.axis.ticks.majorHeight = -1;
JXG.Options.axis.ticks.insertTicks = false;
JXG.Options.axis.ticks.ticksDistance = 1;
var board = JXG.JSXGraph.initBoard('box', {
    boundingbox: [xmin, ymax,
                xmax, ymin],
    axis: true
});


//styles
var pointStyle = {
    fillColor: 'red',
    strokeColor: 'red'
}
var selectedStyle = {
    fillColor: 'green',
    strokeColor: 'green'
}
var highlightedStyle = {
    fillColor: 'yellow',
    strokeColor: 'black'
}
var rectPointStyle = {
    face: 'o',
    size: 2,
    strokeColor: 'green',
    fillColor: 'green',
    fillOpacity: 0.3,
    strokeOpacity: 0.3
}
var rectStyle = {
    strokeWidth: 1,
    borders: {strokeColor: 'green'},
    strokeOpacity: .3,
    fillOpacity: 0.05
}


for (var i = 0; i < 4; i++) {
    V[i] = {};
}

V[0].pt = board.create('point', [0, 0]);
V[1].pt = board.create('point', [1, 3]);
V[2].pt = board.create('point', [3, 2]);
V[3].pt = board.create('point', [-2, 2]);

group = board.create('group', []);


for (var i = 0; i < 4; i++) {

    JXG.addEvent(V[i].pt.rendNode, 'mousedown', function(e) {
        isSelectMode = false;

    }, V[i]);

    V[i].pt.on('up', (function() {
        isSelectMode = true;
    }));
}



//selection UI
var isSelectMode = true;
var selecting = false;

function clearSelection() {
    for (var i = 0; i < selectedPts.length; i++) {
        selectedPts[i].pt.setAttribute(pointStyle);
    }
    selectedPts = [];
    polyPoints = [];
    board.removeObject(polygon);
    group.ungroup();

}

function startSelection() {
    isSelectMode = true;
}

var rectStart, rectEnd, rectCorner1, rectCorner2, rect;
var getMouseCoords = function(e) {
    var cPos =...