Clickable Object Mouse Event

by aaronamran

HTML

<script src="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraphcore.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraph.css">
<div id="jxgbox" class="jxgbox">
</div>

CSS

#jxgbox{max-width:500px;max-height:calc(100vh - 2em);aspect-ratio:1}

JavaScript

const board = JXG.JSXGraph.initBoard('jxgbox', {
  boundingbox: [-0.85, 12, 12, -0.85],
  axis: true,
  keepaspectratio: true,
  showCopyright: false
});

// Get board unitX so we can precisely place the number in center of the circle
var brdUnitX = board.unitX,
  sign = '',
  selec = '',
  select,
  circArr = [],
  radius = 1,
  offSet = -radius * brdUnitX;

// Create one select tag; add to board and remove where necessary
var selectTag = '<select id="nameinput">';
for (i = -8; i < 9; i++) {
  if (Math.sign(i) == 1) {
    sign = '+'
  } else {
    sign = ''
  }
  // This meant you couldn't set back to 0, so commented out
  // selec = (i === 0) ? "selected" : '';//' + selec + '
  selectTag += '<option value="' + sign + i + '">' + sign + i + '</option>';
}
selectTag += '</select>';

/* // Create 8 circles; add them to circArr array
// Our circle has thick stroke so "up" works correctly
for (i = 0; i < 9; i++) {
  var x = 1.5 + 4 * (i % 3);
  var y = 2 + 3.5*Math.floor(i/3);
  circArr.push(board.create('circle', [
    [x, y], radius
  ], {
    id: 'circ' + i, // Assign an id so we can identify it later
    name: '0',
    withLabel: true,
    strokeWidth: 30,
    strokeOpacity: 0.5,
    label: {
      position: 'top',
      offset: [-3, offSet]
    }
  })); */
  
  
  // Create 1 circle; add them to circArr array
// Our circle has thick stroke so "up" works correctly
  for (i = 0; i < 1; i++) {
  var x = 1.5 + 4 * (i % 3);
  var y = 2 + 3.5*Math.floor(i/3);
  circArr.push(board.create('circle', [
    [x, y], radius
  ], {
    id: 'circ' + i, // Assign an id so we can identify it later
    name: '0',
    withLabel: true,
	  strokeWidth: 30,
    strokeOpacity: 0.5,
    label: {
      position: 'top',
      offset: [-3, offSet]
    }
  }));

  circArr[i].on('up', function(evt) {
    // Should be something like "jxgbox_circ6"
    console.log(evt.srcElement.id)
    
    // Need to know which circle to change number for
    // Only works for clicking on outer edge of...