Elektro Schaltplan

by RavilG

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Elektronik-Simulator</title>
  </head>

  <body>
    <div id="Bauelemente">
      <svg id="resistor" class="list electrical_element draggable tap-target">
      </svg>

      <svg id="inductor" class="list electrical_element draggable tap-target" style="left: 4em;">
      </svg>

      <svg id="capacitor" class="list electrical_element draggable tap-target" style="left: 7.5em;">
      </svg>
      &nbsp;
    </div>
    <div id="Elemente-Schaltplan">
    </div>
    <canvas id="Schaltplan" class="dropzone" width="800" height="600" style="box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),0 10px 10px -5px rgba(0, 0, 0, 0.04); margin-left: 5px; font-family:Verdana;font-size:12px;border: 1px solid #eb9c5c"></canvas>

    <div>
      <label for="valueInput">Wert:</label>
      <input type="text" id="valueInput" placeholder="Wert eingeben">
      <span id="unitText">Einheit</span>
    </div>

    <button id="rotateBtn">Drehen</button>
    <button id="deleteBtn">Löschen</button>
    <button id="resizeBtn">Dimensionieren</button>
    <button id="connect">Verbinden</button>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/interact.min.js"></script>

  </body>

</html>

CSS

.electrical_element {
  
  flex-direction: column;
  justify-content: center;
  width: 3em;
  height: 1em;
  position: absolute;
  box-sizing: border-box;
  border-radius: 10%;
  background-color: #29e;
  box-Shadow: 1px 1px 1px #888;
  cursor: pointer;
  touch-action: none;
  user-select: none;

  transition: all 0.1s;
}

.tap-target.tapped {
  background-color: #f40;
}

.tap-target.large {
  transform: scale(1.25);
}

.rotate {
  transform: rotate(180deg);
}

JavaScript

var currentTarget = null;
var connectionMode = false;
document.querySelector('#Schaltplan').addEventListener('pointerdown', UntapAll);

document.querySelector('#connect').addEventListener('click', function() {connectionMode= true});

interact('.draggable').draggable({
  listeners: {
    move: function(event) {
      var target = event.target;
      if (target.classList.contains('list')) {

        CopyElement(event.target);
        target.style.position = 'absolute';
        document.getElementById('Elemente-Schaltplan').appendChild(target);
      }

      var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
      var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;

      // translate the element
      target.style.transform = 'translate(' + x + 'px, ' + y + 'px)';

      // update the position attributes
      target.setAttribute('data-x', x);
      target.setAttribute('data-y', y);
    }
  }
});
interact('.tap-target')
  .on('down', function(event) {
    if (!connectionMode) {
      UntapAll();
      event.currentTarget.classList.toggle('tapped');
      event.preventDefault();
    } else {
    	currentTarget = document.querySelector(' .tapped');
      ConnectElements(currentTarget, event.currentTarget)
    }

  });
interact('.dropzone').dropzone({
  accept: '.draggable',
  overlap: 0.75,

  ondropactivate: function(event) {
    event.target.classList.add('drop-active');
  },
  ondragenter: function(event) {
    var draggableElement = event.relatedTarget;
    var dropzoneElement = event.target;

    dropzoneElement.classList.add('drop-target');
    draggableElement.classList.add('can-drop');
  },
  ondragleave: function(event) {
    event.target.classList.remove('drop-target');
    event.relatedTarget.classList.remove('can-drop');
  },
  ondrop: function(event) {
    event.relatedTarget.textContent = 'Dropped';
  },
  ondropdeactivate: function(event) {
    event.target.classList.remove('drop-active');
   ...