JSFiddle - React, Tailwind, and code Playground

by velo_ninja

HTML

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Wiring Diagram Editor</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        #canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>

<h1>Wiring Diagram Editor</h1>

<!-- Simple toolbar for components -->
<div id="toolbar">
    <button id="add-wire">Add Wire</button>
    <button id="add-component">Add Component</button>
    <select id="component-type">
        <option value="resistor">Resistor</option>
        <option value="capacitor">Capacitor</option>
        <option value="inductor">Inductor</option>
    </select>
</div>

<!-- Canvas for drawing the diagram -->
<div id="canvas" style="width: 800px; height: 600px;"></div>

<!-- Simple component palette -->
<div id="component-palette">
    <div class="component" draggable="true" data-type="resistor">R</div>
    <div class="component" draggable="true" data-type="capacitor">C</div>
    <div class="component" draggable="true" data-type="inductor">L</div>
</div>

<script>
    // Basic example of handling drag and drop for components
    document.addEventListener("DOMContentLoaded", function() {
        const componentPalette = document.getElementById('component-palette');
        const canvas = document.getElementById('canvas');

        componentPalette.addEventListener('dragstart', (e) => {
            e.dataTransfer.setData('text', e.target.getAttribute('data-type'));
        });

        canvas.addEventListener('dragover', (e) => {
            e.preventDefault();
        });

        canvas.addEventListener('drop', (e) => {
            e.preventDefault();
            const componentType = e.dataTransfer.getData('text');
            const component = document.createElement('div');
            component.textContent =...