JSFiddle - React, Tailwind, and code Playground

by louisremi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r14/Stats.min.js"></script>
<div id='container'>
</div>

JavaScript

/**
 * This example uses a hidden canvas to demonstrate a technique for
 * simulating DOM click events while rendering to a canvas. 
 *
 * The basic technique is to render your visual markers twice, the second
 * time on a hidden canvas where each marker gets a unique color. We can then
 * look up that color to get back to the data in question.
 *
 * Open your web console and click on the squares to see their original
 * indices in the data array.
 */

var stats = new Stats();
stats.setMode( 0 ); // 0: fps, 1: ms, 2: mb

// align top-left
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';

document.body.appendChild( stats.domElement );

var width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
height = height / 2;

var mainCanvas = document.createElement("canvas");

var pointer;
var GREY = 'RGBA(105, 105, 105, 0.8)';
var lastPickedNode = {};

var data = [];

// A dictionary to lookup nodes by color used in the hidden canvas.
// Note: if you use this code somewhere else, remember that you may need
// to clean up references to objects stored here if the objects are otherwised
// removed/deleted from your vis.
var colToNode = {};

mainCanvas.setAttribute('width',  width);
mainCanvas.setAttribute('height', height);

var container = document.querySelector("#container");
container.appendChild(mainCanvas);

var controls = {
  count:100,
  showHiddenCanvas: false,
  animateHiddenCanvas: false,
  lastClickedIndex: -1
};
var gui = new dat.GUI();
var countController = gui.add(controls, 'count', 0, 20000).step(100);
countController.onChange(function(value) {
  data = makeData(value);
});

var lastClicked = gui.add(controls, 'lastClickedIndex');

/*
    Generate the data.
   */
function makeData(count) {
  data = [];
  for(var i = 0; i < count; i++) {
    var obj = {
      x: Math.random() * (width...