улучши мой код добавь новые механизмы, рабочие поле ввиде платы макетки <!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Расширенный эмулятор электронных схем</title>
    <!-- Подключаем jsPlumb -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jsPlumb/2.15.6/js/jsplumb.min.js"></script>
    <!-- Подключаем Font Awesome для иконок -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
    <style>
        /* Стили для интерфейса */
        body {
            margin: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            display: flex;
            flex-direction: column;
            height: 100vh;
            overflow: hidden;
        }

        #top-bar {
            height: 50px;
            background-color: #2c3e50;
            color: #ecf0f1;
            display: flex;
            align-items: center;
            padding: 0 20px;
            box-sizing: border-box;
        }

        #top-bar button {
            margin-right: 10px;
            padding: 8px 12px;
            background-color: #34495e;
            border: none;
            color: #ecf0f1;
            cursor: pointer;
            border-radius: 5px;
            transition: background-color 0.2s;
        }

        #top-bar button:hover {
            background-color: #3b5998;
        }

        #content {
            flex-grow: 1;
            display: flex;
            overflow: hidden;
        }

        #left-panel {
            width: 250px;
            background-color: #ecf0f1;
            overflow-y: auto;
            padding: 20px;
            box-sizing: border-box;
            border-right: 1px solid #bdc3c7;
        }

        #left-panel h3 {
            margin-top: 0;
            text-align: center;
        }

        .component-item {
            width: 100%;
            padding: 10px;
            background-color: #bdc3c7;
            border: 1px solid #95a5a6;
            margin-bottom: 10px;
            cursor: move;
            text-align: center;
            user-select: none;
            transition: background-color 0.2s;
            border-radius: 5px;
        }

        .component-item:hover {
            background-color: #a0a0a0;
        }

        .component-item i {
            margin-right: 5px;
        }

        #workspace {
            flex-grow: 1;
            position: relative;
            background-color: #f5f5f5;
            overflow: hidden;
        }

        .component {
            width: 120px;
            min-height: 60px;
            background-color: #fff;
            border: 1px solid #7f8c8d;
            position: absolute;
            text-align: center;
            padding: 10px;
            cursor: move;
            user-select: none;
            box-sizing: border-box;
            border-radius: 5px;
            transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
        }

        .component:hover {
            transform: scale(1.05);
            box-shadow: 0 0 10px rgba(0,0,0,0.2);
        }

        .component-icon {
            font-size: 24px;
            margin-bottom: 5px;
        }

        /* Стили для различных типов компонентов */
        .component.power { background-color: #e74c3c; color: #fff; }
        .component.ground { background-color: #2c3e50; color: #fff; }
        .component.lamp { background-color: #f1c40f; }
        .component.light_sensor { background-color: #27ae60; color: #fff; }
        .component.diode { background-color: #9b59b6; color: #fff; }
        .component.resistor { background-color: #f39c12; }
        .component.and { background-color: #3498db; color: #fff; }
        .component.or { background-color: #2980b9; color: #fff; }
        .component.not { background-color: #8e44ad; color: #fff; }
        .component.transistor { background-color: #34495e; color: #fff; }
        .component.capacitor { background-color: #7f8c8d; color: #fff; }
        .component.button { background-color: #e67e22; color: #fff; }
        .component.potentiometer { background-color: #16a085; color: #fff; }
        .component.distance_sensor { background-color: #1abc9c; color: #fff; }
        .component.rgb_led { background-color: #c0392b; color: #fff; }
        .component.speaker { background-color: #2ecc71; color: #fff; }
        .component.humidity_sensor { background-color: #2980b9; color: #fff; }
        .component.gas_sensor { background-color: #d35400; color: #fff; }
        .component.display { background-color: #7f8c8d; color: #fff; }
        .component.keypad { background-color: #9b59b6; color: #fff; }
        .component.relay { background-color: #34495e; color: #fff; }
        .component.dc_motor { background-color: #e74c3c; color: #fff; }
        .component.servo_motor { background-color: #27ae60; color: #fff; }
        .component.xor { background-color: #8e44ad; color: #fff; }
        .component.nand { background-color: #c0392b; color: #fff; }
        .component.nor { background-color: #f39c12; color: #fff; }
        .component.pwm_generator { background-color: #16a085; color: #fff; }
        .component.voltage_meter { background-color: #d35400; color: #fff; }
        .component.sound_sensor { background-color: #1abc9c; color: #fff; }
        .component.temperature_sensor { background-color: #e67e22; color: #fff; }
        .component.microcontroller { background-color: #2c3e50; color: #fff; }

        .endpoint {
            width: 12px;
            height: 12px;
            background-color: #34495e;
            border-radius: 50%;
            position: absolute;
            cursor: pointer;
            transition: background-color 0.2s;
        }

        .endpoint:hover {
            background-color: #1abc9c;
        }

        .endpoint.input {
            left: -6px;
            top: 50%;
            transform: translateY(-50%);
        }

        .endpoint.output {
            right: -6px;
            top: 50%;
            transform: translateY(-50%);
        }

        /* Расположение входных точек для компонентов с несколькими входами */
        .endpoint.input.multiple {
            position: absolute;
            left: -6px;
            transform: none;
        }

        /* Стили для модального окна */
        .modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.6);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
        }

        .modal-content {
            background-color: #fff;
            padding: 20px 30px;
            border-radius: 10px;
            width: 400px;
            max-width: 90%;
            box-sizing: border-box;
        }

        .modal-content h3 {
            margin-top: 0;
            text-align: center;
        }

        .modal-content label {
            display: block;
            margin-top: 15px;
            font-weight: bold;
        }

        .modal-content input {
            width: 100%;
            padding: 8px;
            margin-top: 5px;
            box-sizing: border-box;
            border-radius: 5px;
            border: 1px solid #bdc3c7;
        }

        .modal-content button {
            margin-top: 20px;
            padding: 10px;
            width: 100%;
            font-size: 16px;
            background-color: #2980b9;
            color: #fff;
            border: none;
            cursor: pointer;
            border-radius: 5px;
            transition: background-color 0.2s;
        }

        .modal-content button:hover {
            background-color: #3498db;
        }

        /* Анимация сигналов */
        .signal-flow {
            stroke-dasharray: 5,5;
            animation: dash 1s linear infinite;
        }

        @keyframes dash {
            to {
                stroke-dashoffset: 1000;
            }
        }

        /* Tooltip для отображения параметров */
        .tooltip {
            position: absolute;
            background-color: #333;
            color: #fff;
            padding: 5px 8px;
            border-radius: 5px;
            font-size: 12px;
            display: none;
            z-index: 100;
        }

    </style>
</head>
<body>

<div id="top-bar">
    <button id="save-button"><i class="fas fa-save"></i> Сохранить схему</button>
    <button id="load-button"><i class="fas fa-folder-open"></i> Загрузить схему</button>
    <button id="run-button"><i class="fas fa-play"></i> Запустить симуляцию</button>
    <span style="flex-grow: 1;"></span>
    <span id="status">Готово</span>
</div>

<div id="content">
    <div id="left-panel">
        <h3>Компоненты</h3>
        <div class="component-item" data-type="power"><i class="fas fa-plug"></i> Источник питания</div>
        <div class="component-item" data-type="ground"><i class="fas fa-bolt"></i> Земля</div>
        <div class="component-item" data-type="lamp"><i class="fas fa-lightbulb"></i> Лампа</div>
        <div class="component-item" data-type="button"><i class="fas fa-hand-pointer"></i> Кнопка</div>
        <div class="component-item" data-type="potentiometer"><i class="fas fa-sliders-h"></i> Потенциометр</div>
        <div class="component-item" data-type="distance_sensor"><i class="fas fa-ruler"></i> Датчик расстояния</div>
        <div class="component-item" data-type="rgb_led"><i class="fas fa-lightbulb"></i> RGB LED</div>
        <div class="component-item" data-type="speaker"><i class="fas fa-volume-up"></i> Динамик</div>
        <div class="component-item" data-type="humidity_sensor"><i class="fas fa-water"></i> Датчик влажности</div>
        <div class="component-item" data-type="gas_sensor"><i class="fas fa-cloud"></i> Датчик газа</div>
        <div class="component-item" data-type="display"><i class="fas fa-tv"></i> Дисплей</div>
        <div class="component-item" data-type="keypad"><i class="fas fa-keyboard"></i> Клавиатура</div>
        <div class="component-item" data-type="relay"><i class="fas fa-toggle-on"></i> Реле</div>
        <div class="component-item" data-type="dc_motor"><i class="fas fa-fan"></i> DC Мотор</div>
        <div class="component-item" data-type="servo_motor"><i class="fas fa-cogs"></i> Сервопривод</div>
        <div class="component-item" data-type="sound_sensor"><i class="fas fa-microphone"></i> Датчик звука</div>
        <div class="component-item" data-type="temperature_sensor"><i class="fas fa-thermometer-half"></i> Датчик температуры</div>
        <div class="component-item" data-type="microcontroller"><i class="fas fa-microchip"></i> Микроконтроллер</div>
        <div class="component-item" data-type="and"><i class="fas fa-code-branch"></i> AND</div>
        <div class="component-item" data-type="or"><i class="fas fa-random"></i> OR</div>
        <div class="component-item" data-type="not"><i class="fas fa-exclamation"></i> NOT</div>
        <div class="component-item" data-type="xor"><i class="fas fa-exchange-alt"></i> XOR</div>
        <div class="component-item" data-type="nand"><i class="fas fa-ban"></i> NAND</div>
        <div class="component-item" data-type="nor"><i class="fas fa-minus-circle"></i> NOR</div>
        <div class="component-item" data-type="pwm_generator"><i class="fas fa-signal"></i> PWM Генератор</div>
        <div class="component-item" data-type="voltage_meter"><i class="fas fa-battery-full"></i> Индикатор напряжения</div>
        <!-- Добавьте другие компоненты по необходимости -->
    </div>

    <div id="workspace">
        <!-- Рабочая область для элементов -->
        <div class="tooltip" id="tooltip"></div>
    </div>
</div>

<script>
    // Инициализация jsPlumb
    jsPlumb.ready(function () {
        const instance = jsPlumb.getInstance({
            // Настройка соединений
            Connector: ["Bezier", { curviness: 50 }],
            PaintStyle: { strokeWidth: 2, stroke: "#34495e" },
            EndpointStyle: { radius: 6, fill: "#34495e" },
            HoverPaintStyle: { stroke: "#1abc9c" },
            EndpointHoverStyle: { fill: "#1abc9c" },
            DragOptions: { cursor: 'pointer', zIndex: 2000 },
            ConnectionOverlays: [
                ["Arrow", { location: 1, width: 10, length: 10 }]
            ],
            Container: "workspace"
        });

        const workspace = document.getElementById('workspace');
        const components = document.querySelectorAll('.component-item');
        const tooltip = document.getElementById('tooltip');
        const status = document.getElementById('status');

        // Перетаскивание компонентов на рабочую область
        components.forEach(comp => {
            comp.addEventListener('dragstart', dragStart);
            comp.setAttribute('draggable', 'true');
        });

        workspace.addEventListener('dragover', dragOver);
        workspace.addEventListener('drop', drop);

        function dragStart(e) {
            e.dataTransfer.setData('text/plain', e.target.dataset.type);
        }

        function dragOver(e) {
            e.preventDefault();
        }

        function drop(e) {
            e.preventDefault();
            const type = e.dataTransfer.getData('text/plain');
            const rect = workspace.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;
            createComponent(type, x, y);
        }

        let componentId = 0;
        let compMap = {};

        function createComponent(type, x, y) {
            const id = 'component_' + componentId++;
            const elem = document.createElement('div');
            elem.classList.add('component', type);
            elem.setAttribute('id', id);
            elem.dataset.type = type;
            elem.style.left = x + 'px';
            elem.style.top = y + 'px';

            // Иконка компонента
            const icon = document.createElement('i');
            icon.classList.add('component-icon');
            switch (type) {
                case 'power': icon.classList.add('fas', 'fa-plug'); break;
                case 'ground': icon.classList.add('fas', 'fa-bolt'); break;
                case 'lamp': icon.classList.add('fas', 'fa-lightbulb'); break;
                case 'button': icon.classList.add('fas', 'fa-hand-pointer'); break;
                case 'potentiometer': icon.classList.add('fas', 'fa-sliders-h'); break;
                case 'distance_sensor': icon.classList.add('fas', 'fa-ruler'); break;
                case 'rgb_led': icon.classList.add('fas', 'fa-lightbulb'); break;
                case 'speaker': icon.classList.add('fas', 'fa-volume-up'); break;
                case 'humidity_sensor': icon.classList.add('fas', 'fa-water'); break;
                case 'gas_sensor': icon.classList.add('fas', 'fa-cloud'); break;
                case 'display': icon.classList.add('fas', 'fa-tv'); break;
                case 'keypad': icon.classList.add('fas', 'fa-keyboard'); break;
                case 'relay': icon.classList.add('fas', 'fa-toggle-on'); break;
                case 'dc_motor': icon.classList.add('fas', 'fa-fan'); break;
                case 'servo_motor': icon.classList.add('fas', 'fa-cogs'); break;
                case 'sound_sensor': icon.classList.add('fas', 'fa-microphone'); break;
                case 'temperature_sensor': icon.classList.add('fas', 'fa-thermometer-half'); break;
                case 'microcontroller': icon.classList.add('fas', 'fa-microchip'); break;
                case 'diode': icon.classList.add('fas', 'fa-circle-notch'); break;
                case 'resistor': icon.classList.add('fas', 'fa-wave-square'); break;
                case 'transistor': icon.classList.add('fas', 'fa-microchip'); break;
                case 'capacitor': icon.classList.add('fas', 'fa-battery-half'); break;
                case 'and': icon.classList.add('fas', 'fa-code-branch'); break;
                case 'or': icon.classList.add('fas', 'fa-random'); break;
                case 'not': icon.classList.add('fas', 'fa-exclamation'); break;
                case 'xor': icon.classList.add('fas', 'fa-exchange-alt'); break;
                case 'nand': icon.classList.add('fas', 'fa-ban'); break;
                case 'nor': icon.classList.add('fas', 'fa-minus-circle'); break;
                case 'pwm_generator': icon.classList.add('fas', 'fa-signal'); break;
                case 'voltage_meter': icon.classList.add('fas', 'fa-battery-full'); break;
                default: icon.classList.add('fas', 'fa-question');
            }
            elem.appendChild(icon);

            // Название компонента
            const name = document.createElement('div');
            name.classList.add('component-name');
            name.innerText = getComponentName(type);
            elem.appendChild(name);

            // Добавляем элемент в рабочую область
            workspace.appendChild(elem);

            // Добавляем в карту компонентов
            compMap[id] = {
                id: id,
                type: type,
                inputs: [],
                outputs: [],
                value: null,
                elem: elem,
                properties: {} // Для хранения дополнительных свойств
            };

            // Определяем точки подключения
            setupEndpoints(elem, type);

            // Подключаем drag&drop перемещение
            instance.draggable(elem, {
                containment: true
            });

            // Открытие настроек по двойному клику
            elem.addEventListener('dblclick', () => {
                openSettings(compMap[id]);
            });

            // Показ параметров при наведении
            elem.addEventListener('mouseenter', (e) => {
                showTooltip(e, compMap[id]);
            });

            elem.addEventListener('mousemove', (e) => {
                updateTooltipPosition(e);
            });

            elem.addEventListener('mouseleave', hideTooltip);
        }

        function setupEndpoints(elem, type) {
            const inputOnlyComponents = ['lamp', 'diode', 'light_sensor', 'resistor', 'transistor', 'capacitor', 'speaker', 'rgb_led', 'dc_motor', 'servo_motor', 'display', 'relay', 'voltage_meter'];
            const outputOnlyComponents = ['power', 'button', 'potentiometer', 'distance_sensor', 'humidity_sensor', 'gas_sensor', 'keypad', 'sound_sensor', 'temperature_sensor', 'pwm_generator'];
            const noConnectionComponents = ['ground', 'microcontroller'];

            if (!noConnectionComponents.includes(type)) {
                if (!outputOnlyComponents.includes(type)) {
                    // Добавляем входы
                    let inputs = 1;
                    let inputPositions = [];

                    switch (type) {
                        case 'and':
                        case 'or':
                        case 'xor':
                        case 'nand':
                        case 'nor':
                            inputs = 2;
                            inputPositions = [30, 50];
                            break;
                        case 'not':
                            inputs = 1;
                            inputPositions = [40];
                            break;
                        case 'transistor':
                            inputs = 2; // База и коллектор
                            inputPositions = [30, 50];
                            break;
                        case 'capacitor':
                        case 'relay':
                            inputs = 2;
                            inputPositions = [30, 50];
                            break;
                        default:
                            inputs = 1;
                            inputPositions = [40];
                    }

                    for (let i = 0; i < inputs; i++) {
                        const input = document.createElement('div');
                        input.classList.add('endpoint', 'input', 'multiple');
                        input.style.top = inputPositions[i] + 'px';
                        elem.appendChild(input);
                        instance.addEndpoint(elem, {
                            anchors: ["Left", { faces: ["left"] }],
                            uuid: elem.id + "_in" + i
                        }, targetEndpoint);
                    }
                }

                if (!inputOnlyComponents.includes(type)) {
                    // Выход
                    const output = document.createElement('div');
                    output.classList.add('endpoint', 'output');
                    elem.appendChild(output);
                    instance.addEndpoint(elem, {
                        anchors: "Right",
                        uuid: elem.id + "_out"
                    }, sourceEndpoint);
                }
            }
        }

        // Настройки точек подключения
        const sourceEndpoint = {
            endpoint: "Dot",
            paintStyle: { fill: "#1abc9c", radius: 6 },
            isSource: true,
            connectorStyle: { stroke: "#34495e", strokeWidth: 2 },
            hoverPaintStyle: { fill: "#1abc9c" },
            connectorHoverStyle: { stroke: "#1abc9c" },
            connectorOverlays: [["Custom", {
                create: function () {
                    return document.createElement("div");
                },
                location: 0.5,
                id: "signalOverlay"
            }]],
            maxConnections: -1
        };

        const targetEndpoint = {
            endpoint: "Dot",
            paintStyle: { fill: "#1abc9c", radius: 6 },
            isTarget: true,
            hoverPaintStyle: { fill: "#1abc9c" },
            maxConnections: -1
        };

        // Обработка кнопки "Запустить симуляцию"
        const runButton = document.getElementById('run-button');
        runButton.addEventListener('click', runSimulation);

        // Кнопки сохранения и загрузки схем
        const saveButton = document.getElementById('save-button');
        const loadButton = document.getElementById('load-button');
        saveButton.addEventListener('click', saveScheme);
        loadButton.addEventListener('click', loadScheme);

        function runSimulation() {
            // Сбрасываем значения компонентов
            for (let compId in compMap) {
                compMap[compId].value = null;
            }

            // Собираем соединения
            const connections = instance.getAllConnections();
            // Сбрасываем входы и выходы компонентов
            for (let compId in compMap) {
                compMap[compId].inputs = [];
                compMap[compId].outputs = [];
            }
            connections.forEach(conn => {
                const sourceEndpointUuid = conn.endpoints[0].getUuid();
                const targetEndpointUuid = conn.endpoints[1].getUuid();

                const sourceId = conn.sourceId;
                const targetId = conn.targetId;

                compMap[targetId].inputs.push({
                    source: compMap[sourceId],
                    endpointUuid: targetEndpointUuid
                });
                compMap[sourceId].outputs.push({
                    target: compMap[targetId],
                    endpointUuid: sourceEndpointUuid
                });
            });

            // Вычисляем значения компонентов
            for (let compId in compMap) {
                computeValue(compMap[compId]);
            }

            // Обновляем визуальное отображение компонентов
            updateComponentDisplay();
        }

        function computeValue(comp) {
            if (comp.value !== null) {
                return comp.value;
            }

            let inputValues = [];
            for (let i = 0; i < comp.inputs.length; i++) {
                const inputComp = comp.inputs[i].source;
                const val = computeValue(inputComp);
                inputValues.push(val);
            }

            let result = null;

            switch (comp.type) {
                case 'power':
                    result = comp.properties.voltage || 5; // По умолчанию 5В
                    break;
                case 'ground':
                    result = 0; // Земля - 0В
                    break;
                case 'resistor':
                    result = inputValues[0]; // Передаем сигнал дальше (для простоты)
                    break;
                case 'lamp':
                    // Мощность лампы влияет на общий уровень освещенности
                    comp.value = inputValues[0] ? (comp.properties.power || 0) : 0;
                    result = comp.value;
                    break;
                case 'light_sensor':
                    // Суммируем освещенность от всех ламп с учётом расстояний и сравниваем с порогом
                    let totalLight = calculateTotalLight(comp);
                    let threshold = comp.properties.threshold || 0;
                    result = totalLight >= threshold ? 1 : 0;
                    break;
                case 'diode':
                    result = inputValues[0] || 0;
                    break;
                case 'transistor':
                    // Упрощенная модель транзистора
                    let baseSignal = inputValues[0];
                    let collectorSignal = inputValues[1];
                    result = baseSignal ? collectorSignal : 0;
                    break;
                case 'capacitor':
                    // Упрощенная модель конденсатора: передает сигнал после задержки
                    if (inputValues[0]) {
                        setTimeout(() => {
                            comp.value = inputValues[0];
                            updateComponentDisplay(); // Обновляем отображение после задержки
                        }, comp.properties.delay || 1000);
                        result = 0;
                    } else {
                        result = 0;
                    }
                    break;
                case 'and':
                    result = inputValues.every(v => v) ? 1 : 0;
                    break;
                case 'or':
                    result = inputValues.some(v => v) ? 1 : 0;
                    break;
                case 'not':
                    result = inputValues[0] ? 0 : 1;
                    break;
                case 'xor':
                    result = inputValues[0] !== inputValues[1] ? 1 : 0;
                    break;
                case 'nand':
                    result = inputValues.every(v => v) ? 0 : 1;
                    break;
                case 'nor':
                    result = inputValues.some(v => v) ? 0 : 1;
                    break;
                case 'button':
                    result = comp.properties.isPressed ? 1 : 0;
                    break;
                case 'potentiometer':
                    result = comp.properties.value || 0;
                    break;
                case 'distance_sensor':
                case 'humidity_sensor':
                case 'gas_sensor':
                case 'sound_sensor':
                case 'temperature_sensor':
                    result = comp.properties.value || 0;
                    break;
                case 'pwm_generator':
                    result = comp.properties.dutyCycle || 50; // Значение ШИМ
                    break;
                case 'relay':
                    result = inputValues[0] ? inputValues[1] : 0;
                    break;
                case 'dc_motor':
                case 'servo_motor':
                case 'speaker':
                case 'rgb_led':
                case 'display':
                case 'voltage_meter':
                    result = inputValues[0] || 0;
                    break;
                case 'microcontroller':
                    // Для простоты считаем, что микроконтроллер передает сигнал на выход
                    result = inputValues[0] || 0;
                    break;
                default:
                    result = inputValues[0] || 0;
            }

            comp.value = result;
            return result;
        }

        function updateComponentDisplay() {
            for (let compId in compMap) {
                const comp = compMap[compId];
                const val = comp.value;

                switch (comp.type) {
                    case 'lamp':
                        if (val) {
                            comp.elem.style.backgroundColor = '#f9e79f'; // Светлее при включении
                            comp.elem.style.boxShadow = '0 0 15px #f1c40f';
                        } else {
                            comp.elem.style.backgroundColor = '#f1c40f';
                            comp.elem.style.boxShadow = 'none';
                        }
                        break;
                    case 'light_sensor':
                        if (val) {
                            comp.elem.style.backgroundColor = '#2ecc71';
                            comp.elem.style.boxShadow = '0 0 10px #27ae60';
                        } else {
                            comp.elem.style.backgroundColor = '#27ae60';
                            comp.elem.style.boxShadow = 'none';
                        }
                        break;
                    case 'diode':
                        if (val) {
                            comp.elem.style.backgroundColor = '#e056fd';
                            comp.elem.style.boxShadow = '0 0 10px #9b59b6';
                        } else {
                            comp.elem.style.backgroundColor = '#9b59b6';
                            comp.elem.style.boxShadow = 'none';
                        }
                        break;
                    case 'transistor':
                        if (val) {
                            comp.elem.style.backgroundColor = '#2c3e50';
                            comp.elem.style.boxShadow = '0 0 10px #34495e';
                        } else {
                            comp.elem.style.backgroundColor = '#34495e';
                            comp.elem.style.boxShadow = 'none';
                        }
                        break;
                    case 'capacitor':
                        if (val) {
                            comp.elem.style.backgroundColor = '#95a5a6';
                            comp.elem.style.boxShadow = '0 0 10px #7f8c8d';
                        } else {
                            comp.elem.style.backgroundColor = '#7f8c8d';
                            comp.elem.style.boxShadow = 'none';
                        }
                        break;
                    case 'button':
                        if (comp.properties.isPressed) {
                            comp.elem.style.backgroundColor = '#d35400';
                        } else {
                            comp.elem.style.backgroundColor = '#e67e22';
                        }
                        break;
                    case 'potentiometer':
                        comp.elem.style.backgroundColor = `rgba(22, 160, 133, ${comp.properties.value / 100})`;
                        break;
                    case 'rgb_led':
                        comp.elem.style.backgroundColor = `rgb(${comp.properties.red || 0}, ${comp.properties.green || 0}, ${comp.properties.blue || 0})`;
                        break;
                    case 'servo_motor':
                        // Визуальное отображение угла поворота
                        comp.elem.style.transform = `rotate(${comp.properties.angle || 0}deg)`;
                        break;
                    case 'dc_motor':
                        if (val) {
                            comp.elem.style.animation = 'spin 1s linear infinite';
                        } else {
                            comp.elem.style.animation = 'none';
                        }
                        break;
                    // Добавьте обновление отображения для других компонентов
                    default:
                        // Для остальных компонентов можно добавить обновление отображения при необходимости
                        break;
                }
            }
        }

        // Анимация для двигателя
        const style = document.createElement('style');
        style.innerHTML = `
            @keyframes spin {
                from { transform: rotate(0deg); }
                to { transform: rotate(360deg); }
            }
        `;
        document.head.appendChild(style);

        // Расчет общей освещенности от всех ламп с учетом расстояния до датчика
        function calculateTotalLight(sensorComp) {
            let totalLight = 0;
            for (let compId in compMap) {
                const comp = compMap[compId];
                if (comp.type === 'lamp') {
                    let power = comp.properties.power || 0;
                    let isOn = comp.value;
                    if (isOn) {
                        // Расчет расстояния между лампой и датчиком
                        let dx = comp.elem.offsetLeft - sensorComp.elem.offsetLeft;
                        let dy = comp.elem.offsetTop - sensorComp.elem.offsetTop;
                        let distance = Math.sqrt(dx * dx + dy * dy);

                        // Избежание деления на ноль
                        distance = Math.max(distance, 10);

                        // Освещенность уменьшается с расстоянием (обратная квадратичная зависимость)
                        let illumination = power / (distance * distance);
                        totalLight += illumination;
                    }
                }
            }
            return totalLight;
        }

        // Окно настроек компонентов
        function openSettings(comp) {
            const modal = document.createElement('div');
            modal.classList.add('modal');

            const content = document.createElement('div');
            content.classList.add('modal-content');

            const title = document.createElement('h3');
            title.innerText = `Настройки: ${getComponentName(comp.type)}`;
            content.appendChild(title);

            // Поля настроек в зависимости от типа компонента
            switch (comp.type) {
                case 'power':
                    content.appendChild(createInputField('Напряжение (В):', 'voltage', comp.properties.voltage || 5));
                    break;
                case 'lamp':
                    content.appendChild(createInputField('Мощность (Вт):', 'power', comp.properties.power || 0));
                    break;
                case 'resistor':
                    content.appendChild(createInputField('Сопротивление (Ω):', 'resistance', comp.properties.resistance || 0));
                    break;
                case 'transistor':
                    content.appendChild(createInputField('Усиление (hFE):', 'hfe', comp.properties.hfe || 100));
                    break;
                case 'capacitor':
                    content.appendChild(createInputField('Емкость (Ф):', 'capacitance', comp.properties.capacitance || 0.000001));
                    content.appendChild(createInputField('Задержка (мс):', 'delay', comp.properties.delay || 1000));
                    break;
                case 'light_sensor':
                    content.appendChild(createInputField('Порог срабатывания:', 'threshold', comp.properties.threshold || 0));
                    break;
                case 'button':
                    const isPressed = document.createElement('label');
                    isPressed.innerText = 'Нажата:';

                    const checkbox = document.createElement('input');
                    checkbox.type = 'checkbox';
                    checkbox.name = 'isPressed';
                    checkbox.checked = comp.properties.isPressed || false;

                    isPressed.appendChild(checkbox);
                    content.appendChild(isPressed);

                    checkbox.addEventListener('change', () => {
                        comp.properties.isPressed = checkbox.checked;
                        runSimulation(); // Обновляем симуляцию при изменении состояния кнопки
                    });
                    break;
                case 'potentiometer':
                    content.appendChild(createInputField('Значение:', 'value', comp.properties.value || 0));
                    break;
                case 'rgb_led':
                    content.appendChild(createInputField('Красный (0-255):', 'red', comp.properties.red || 0));
                    content.appendChild(createInputField('Зеленый (0-255):', 'green', comp.properties.green || 0));
                    content.appendChild(createInputField('Синий (0-255):', 'blue', comp.properties.blue || 0));
                    break;
                case 'servo_motor':
                    content.appendChild(createInputField('Угол поворота (0-180):', 'angle', comp.properties.angle || 0));
                    break;
                case 'dc_motor':
                    // Может быть добавлена настройка скорости вращения
                    content.appendChild(createInputField('Скорость:', 'speed', comp.properties.speed || 0));
                    break;
                case 'pwm_generator':
                    content.appendChild(createInputField('Скл. заполнения (%):', 'dutyCycle', comp.properties.dutyCycle || 50));
                    break;
                // Добавьте другие настройки для компонентов при необходимости
            }

            // Функция динамического обновления параметров
            const inputs = content.querySelectorAll('input[type="number"]');
            inputs.forEach(input => {
                input.addEventListener('input', () => {
                    comp.properties[input.name] = parseFloat(input.value);
                    runSimulation(); // Перезапуск симуляции при изменении параметров
                });
            });

            const closeBtn = document.createElement('button');
            closeBtn.innerText = 'Закрыть';
            content.appendChild(closeBtn);

            modal.appendChild(content);
            document.body.appendChild(modal);

            closeBtn.addEventListener('click', () => {
                document.body.removeChild(modal);
            });

            modal.addEventListener('click', (e) => {
                if (e.target === modal) {
                    document.body.removeChild(modal);
                }
            });
        }

        function createInputField(labelText, name, value) {
            const label = document.createElement('label');
            label.innerText = labelText;

            const input = document.createElement('input');
            input.type = 'number';
            input.name = name;
            input.value = value;

            label.appendChild(input);
            return label;
        }

        function getComponentName(type) {
            switch (type) {
                case 'power':
                    return 'Источник питания';
                case 'ground':
                    return 'Земля';
                case 'lamp':
                    return 'Лампа';
                case 'light_sensor':
                    return 'Световой датчик';
                case 'diode':
                    return 'Диод';
                case 'resistor':
                    return 'Резистор';
                case 'transistor':
                    return 'Транзистор';
                case 'capacitor':
                    return 'Конденсатор';
                case 'and':
                    return 'Логическое И (AND)';
                case 'or':
                    return 'Логическое ИЛИ (OR)';
                case 'not':
                    return 'Логическое НЕ (NOT)';
                case 'button':
                    return 'Кнопка';
                case 'potentiometer':
                    return 'Потенциометр';
                case 'distance_sensor':
                    return 'Датчик расстояния';
                case 'rgb_led':
                    return 'RGB LED';
                case 'speaker':
                    return 'Динамик';
                case 'humidity_sensor':
                    return 'Датчик влажности';
                case 'gas_sensor':
                    return 'Датчик газа';
                case 'display':
                    return 'Дисплей';
                case 'keypad':
                    return 'Клавиатура';
                case 'relay':
                    return 'Реле';
                case 'dc_motor':
                    return 'DC Мотор';
                case 'servo_motor':
                    return 'Сервопривод';
                case 'sound_sensor':
                    return 'Датчик звука';
                case 'temperature_sensor':
                    return 'Датчик температуры';
                case 'microcontroller':
                    return 'Микроконтроллер';
                case 'xor':
                    return 'Логическое XOR';
                case 'nand':
                    return 'Логическое NAND';
                case 'nor':
                    return 'Логическое NOR';
                case 'pwm_generator':
                    return 'PWM Генератор';
                case 'voltage_meter':
                    return 'Индикатор напряжения';
                default:
                    return type.toUpperCase();
            }
        }

        // Функции для отображения подсказки
        function showTooltip(e, comp) {
            const rect = workspace.getBoundingClientRect();
            const x = e.clientX - rect.left + 10;
            const y = e.clientY - rect.top + 10;

            tooltip.style.left = x + 'px';
            tooltip.style.top = y + 'px';
            tooltip.style.display = 'block';

            let info = `Тип: ${getComponentName(comp.type)}`;
            for (let prop in comp.properties) {
                info += `<br>${prop}: ${comp.properties[prop]}`;
            }
            tooltip.innerHTML = info;
        }

        function updateTooltipPosition(e) {
            const rect = workspace.getBoundingClientRect();
            const x = e.clientX - rect.left + 10;
            const y = e.clientY - rect.top + 10;

            tooltip.style.left = x + 'px';
            tooltip.style.top = y + 'px';
        }

        function hideTooltip() {
            tooltip.style.display = 'none';
        }

        // Функции сохранения и загрузки схем
        function saveScheme() {
            const data = {
                components: [],
                connections: []
            };

            // Сохраняем данные компонентов
            for (let compId in compMap) {
                const comp = compMap[compId];
                data.components.push({
                    id: comp.id,
                    type: comp.type,
                    x: comp.elem.offsetLeft,
                    y: comp.elem.offsetTop,
                    properties: comp.properties
                });
            }

            // Сохраняем данные соединений
            const connections = instance.getAllConnections();
            connections.forEach(conn => {
                data.connections.push({
                    sourceId: conn.sourceId,
                    targetId: conn.targetId,
                    sourceEndpointUuid: conn.endpoints[0].getUuid(),
                    targetEndpointUuid: conn.endpoints[1].getUuid()
                });
            });

            const jsonData = JSON.stringify(data);

            const blob = new Blob([jsonData], { type: "application/json" });
            const url = URL.createObjectURL(blob);

            const a = document.createElement('a');
            a.href = url;
            a.download = 'scheme.json';
            a.click();

            URL.revokeObjectURL(url);
            status.innerText = 'Схема сохранена';
        }

        function loadScheme() {
            const input = document.createElement('input');
            input.type = 'file';
            input.accept = 'application/json';

            input.onchange = e => {
                const file = e.target.files[0];
                const reader = new FileReader();
                reader.onload = event => {
                    const data = JSON.parse(event.target.result);
                    loadComponents(data);
                    status.innerText = 'Схема загружена';
                };
                reader.readAsText(file);
            };

            input.click();
        }

        function loadComponents(data) {
            // Очищаем рабочую область
            for (let compId in compMap) {
                const comp = compMap[compId];
                instance.removeAllEndpoints(comp.elem);
                workspace.removeChild(comp.elem);
            }
            compMap = {};
            componentId = 0;
            instance.deleteEveryConnection();

            // Восстанавливаем компоненты
            data.components.forEach(compData => {
                createComponent(compData.type, compData.x, compData.y);
                const comp = compMap[compData.id];
                comp.properties = compData.properties;
                comp.id = compData.id;
                comp.elem.setAttribute('id', compData.id);
                if (componentId <= parseInt(compData.id.split('_')[1])) {
                    componentId = parseInt(compData.id.split('_')[1]) + 1;
                }
            });

            // Восстанавливаем соединения
            data.connections.forEach(connData => {
                const source = document.getElementById(connData.sourceId);
                const target = document.getElementById(connData.targetId);
                instance.connect({
                    source: source,
                    target: target,
                    uuids: [connData.sourceEndpointUuid, connData.targetEndpointUuid]
                });
            });

            runSimulation();
        }
    });
</script>

</body>
</html>