JSFiddle - React, Tailwind, and code Playground

by Lazaro Contreras

HTML

<svg id="svg" width="500" height="500">
</svg>

CSS

ckt-comp {
  position: absolute;
  display: inline-block;
  width: 50px;
  height: 50px;
  margin: 10px;
  user-select: none;
}

ckt-comp div{
  display: block;
  width: 50px;
  height: 40px;
  position: relative;
}

ckt-comp.inc div {
  background: gray;
}

ckt-comp.act div {
  background: green;
}

ckt-comp.ro div {
  top: 5px;
  transform: rotate(90deg);
}

polyline{
    fill: none;
    stroke: black;
    stroke-width: 4;
}

JavaScript

//CLASE COMPONENTE
class Componente extends HTMLElement {
  constructor(nombre) {
    super();
    this.nombre = nombre;
    this._x = 0;
    this._y = 0;
    this._valor = null;
    this._activo = true;
    this._rotado = false;
    this._entrada = [];
    this._salida = [];
    this.className = nombre + " act nro";
  }

  get posicion() {
    return [this._x, this._y];
  }

  set posicion(p) {
    this._x = p[0];
    this._y = p[1];
  }

  get valor() {
    return this._valor;
  }

  set valor(v) {
    this._valor = v;
  }

  get activo() {
    return this._activo;
  }

  set activo(v) {
    this._activo = v;
    if (v) {
      this.className = this.className.replace("inc", "act");
    } else {
      this.className = this.className.replace("act", "inc");
    }
  }

  get rotado() {
    return this._rotado;
  }

  set rotado(v) {
    this._rotado = v;
    if (v) {
      this.className = this.className.replace("nro", "ro");
    } else {
      this.className = this.className.replace("ro", "nro");
    }
  }

  get entrada() {
    return this._entrada;
  }

  set entrada(obj) {
    this._entrada.push(obj);
    if (obj.salida[obj.salida.length - 1] != this) {
      obj.salida = this;
    }
  }

  reEntrada() {
    this._entrada = [];
  }

  get salida() {
    return this._salida;
  }

  set salida(obj) {
    this._salida.push(obj);
    if (obj.entrada[obj.entrada.length - 1] != this) {
      obj.entrada = this;
    }
  }

  reSalida() {
    this._salida = [];
  }

  print() {
    console.log({
      nombre: this.nombre,
      valor: this._valor,
      posicion: [this._x, this._y],
      activo: this._activo,
      rotado: this._rotado,
      entrada: this._entrada,
      salida: this._salida
    });
  }

  init() {
    var div = document.createElement("div");
    div.innerText = this.nombre + "\n" + this._valor;
    this.appendChild(div);
    document.body.appendChild(this);
    this.printComp();
  }
  
  update(){
  	this.style.left = this._x + "px";
   ...