JSFiddle - React, Tailwind, and code Playground

by Michał Oręziak

HTML

<button id="add">Add layer</button>
<div id="contextMenu">
<fieldset><label for="">R</label><input type="range"></fieldset>
<fieldset><label for="">G</label><input type="range"></fieldset>
<fieldset><label for="">B</label><input type="range"></fieldset>
<fieldset><label for="">A</label><input type="range"></fieldset>
<fieldset><label for="">layer</label><input type="number" id="zindexInput"></fieldset>
</div>

SCSS

$layerSize: 200px;
.layer {
  width: $layerSize;
  height: $layerSize;
  border-radius: 50%;
  display:inline-block;
  background:#f00;
}
#contextMenu{
z-index:10000;
  background:#fff;
  position:absolute;
  display:none;
}

JavaScript

const addBtn = document.getElementById('add');
const body = document.querySelector('body');
const contextMenuEl = document.getElementById('contextMenu');
const zindexInput = document.getElementById('zindexInput');
let lastLayerId = 0;
let target;
function fadeIn(el, speed) {
  if (!speed)
    speed = 1;
  el.style.opacity = 0;

  function tick() {
    el.style.opacity = +el.style.opacity + speed / 100;
    if (+el.style.opacity < 1) {
      (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16)
    }
  };
  tick();
}
function showMenu(event) {
event.preventDefault();
 contextMenuEl.style.left = event.clientX+'px';
   contextMenuEl.style.top = event.clientY+'px';
   contextMenuEl.style.display = 'block';
   target = event.target;
}

//document.addEventListener("contextmenu", showMenu);

function addLayer() {

  let newLayer = document.createElement('div');
  newLayer.className = 'layer';
  newLayer.id = "layer"+lastLayerId.toString();
  body.appendChild(newLayer);
  lastLayerId++;
  newLayer.addEventListener("contextmenu", showMenu);
  fadeIn(newLayer);
  
}
addBtn.addEventListener("click", addLayer);
document.addEventListener("click", function(){
contextMenuEl.style.display = "none";
});
zindexInput.addEventListener("input", changeParameters);
function changeParameters(){
target
}