Create calc_v1a_no.md

2026-04-28 11:30:42 +00:00 · 2026-03-27 14:08:27 +03:00 · 2026-03-27 14:08:27 +03:00 · d863498c90
commit d863498c90
parent 805938ac4b
1 changed files with 362 additions and 0 deletions
--- a/IT/programming/visual_programming_js/calc_v1a_no.md
+++ b/IT/programming/visual_programming_js/calc_v1a_no.md
@ -0,0 +1,362 @@
+## ✅ Окончательное решение: BPMN-редактор на версии 3.4.0
+
+После экспериментов выяснилось, что в новых версиях bpmn-js (начиная с 7.x) глобальная переменная `BpmnModeler` отсутствует, так как библиотека перешла на ES-модули. Версия **3.4.0** создаёт глобальную переменную `BpmnModeler` и работает корректно в локальном файле и на GitHub Pages. Ниже приведён **полностью работающий код**, который:
+
+- отображает BPMN-редактор с палитрой элементов,
+- содержит калькулятор (два поля ввода, выбор операции, результат),
+- подсвечивает задачу `CalculateTask` на диаграмме при каждом расчёте,
+- включает отладочную панель с копированием лога,
+- не требует сервера и работает из одного HTML-файла.
+
+### 📁 Файл `index.html` (скопируйте целиком)
+
+```html
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8">
+    <title>BPMN Калькулятор</title>
+    <!-- Используем старую версию 3.4.0, где BpmnModeler доступен глобально -->
+    <link rel="stylesheet" href="https://unpkg.com/bpmn-js@3.4.0/dist/assets/diagram-js.css">
+    <link rel="stylesheet" href="https://unpkg.com/bpmn-js@3.4.0/dist/assets/bpmn-font/css/bpmn.css">
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body {
+            font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+            background: #f1f5f9;
+            padding: 20px;
+        }
+        .container {
+            display: flex;
+            gap: 20px;
+            height: calc(100vh - 40px);
+        }
+        .bpmn-editor {
+            flex: 2;
+            background: white;
+            border-radius: 12px;
+            display: flex;
+            flex-direction: column;
+            padding: 15px;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+        }
+        #canvas {
+            flex: 1;
+            background: #fff;
+            border: 1px solid #e2e8f0;
+            border-radius: 8px;
+            min-height: 0;
+        }
+        .right-panel {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+        }
+        .calculator {
+            background: white;
+            border-radius: 12px;
+            padding: 20px;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+        }
+        .debug-panel {
+            background: #1e293b;
+            color: #e2e8f0;
+            border-radius: 12px;
+            padding: 15px;
+            font-family: 'Courier New', monospace;
+            font-size: 12px;
+            overflow-y: auto;
+            max-height: 300px;
+        }
+        .debug-panel h3 { color: #facc15; margin-bottom: 10px; }
+        .debug-log { white-space: pre-wrap; }
+        .debug-buttons {
+            display: flex;
+            gap: 8px;
+            margin-top: 10px;
+        }
+        .debug-buttons button {
+            background: #334155;
+            color: white;
+            border: none;
+            padding: 4px 8px;
+            border-radius: 6px;
+            cursor: pointer;
+            font-size: 11px;
+        }
+        .form-group { margin-bottom: 15px; }
+        label { display: block; margin-bottom: 5px; font-weight: 600; }
+        input, select {
+            width: 100%;
+            padding: 8px;
+            border: 1px solid #cbd5e1;
+            border-radius: 6px;
+        }
+        .result {
+            background: linear-gradient(135deg, #3b82f6, #8b5cf6);
+            padding: 15px;
+            border-radius: 10px;
+            text-align: center;
+            margin-top: 15px;
+        }
+        .result-value { font-size: 28px; font-weight: bold; color: white; }
+        button { background: #10b981; color: white; border: none; padding: 6px 12px; border-radius: 6px; cursor: pointer; margin-top: 10px; }
+    </style>
+</head>
+<body>
+<div class="container">
+    <div class="bpmn-editor">
+        <div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
+            <h3>📊 BPMN Редактор</h3>
+            <button id="exportBtn">💾 Сохранить XML (в консоль)</button>
+        </div>
+        <div id="canvas"></div>
+        <div class="info" style="margin-top: 12px; font-size: 12px; color: #475569;">
+            💡 Редактируйте диаграмму. При изменении чисел задача "CalculateTask" подсвечивается.
+        </div>
+    </div>
+    <div class="right-panel">
+        <div class="calculator">
+            <h2>🧮 Калькулятор</h2>
+            <div class="form-group">
+                <label>Число A:</label>
+                <input type="number" id="num1" value="10" step="any">
+            </div>
+            <div class="form-group">
+                <label>Число B:</label>
+                <input type="number" id="num2" value="5" step="any">
+            </div>
+            <div class="form-group">
+                <label>Операция:</label>
+                <select id="operation">
+                    <option value="+">➕ Сложение (+)</option>
+                    <option value="-">➖ Вычитание (-)</option>
+                    <option value="*">✖️ Умножение (*)</option>
+                    <option value="/">➗ Деление (/)</option>
+                </select>
+            </div>
+            <div class="result">
+                <div class="result-label">Результат:</div>
+                <div class="result-value" id="result">—</div>
+            </div>
+        </div>
+        <div class="debug-panel">
+            <h3>🐞 ОТЛАДКА (лог)</h3>
+            <div id="debugLog" class="debug-log">[Инициализация] Ждём события...</div>
+            <div class="debug-buttons">
+                <button id="clearDebugBtn">🗑️ Очистить лог</button>
+                <button id="copyDebugBtn">📋 Копировать лог</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script src="https://unpkg.com/bpmn-js@3.4.0/dist/bpmn-modeler.development.js"></script>
+<script>
+    const debugDiv = document.getElementById('debugLog');
+    function log(msg, isErr = false) {
+        const time = new Date().toLocaleTimeString();
+        const prefix = isErr ? `[${time}] ❌ ` : `[${time}] ✅ `;
+        const span = document.createElement('div');
+        span.textContent = prefix + msg;
+        span.style.color = isErr ? '#f87171' : '#bbf0d0';
+        debugDiv.appendChild(span);
+        debugDiv.scrollTop = debugDiv.scrollHeight;
+        console.log(prefix + msg);
+    }
+
+    document.getElementById('clearDebugBtn').onclick = () => {
+        debugDiv.innerHTML = '';
+        log('Лог очищен');
+    };
+    document.getElementById('copyDebugBtn').onclick = async () => {
+        try {
+            await navigator.clipboard.writeText(debugDiv.innerText);
+            const btn = document.getElementById('copyDebugBtn');
+            const orig = btn.textContent;
+            btn.textContent = '✅ Скопировано!';
+            setTimeout(() => btn.textContent = orig, 1500);
+        } catch (e) {
+            log('Копирование не удалось: ' + e.message, true);
+        }
+    };
+
+    log('Страница загружена, версия bpmn-js 3.4.0');
+
+    // Проверяем наличие глобальной переменной
+    if (typeof BpmnModeler === 'undefined') {
+        log('BpmnModeler не определён! Проверьте загрузку скрипта.', true);
+        // Выводим все глобальные объекты, начинающиеся с 'Bpmn' для диагностики
+        const bpmnGlobals = Object.keys(window).filter(k => k.toLowerCase().startsWith('bpmn'));
+        if (bpmnGlobals.length) {
+            log(`Найдены глобальные объекты BPMN: ${bpmnGlobals.join(', ')}`);
+        } else {
+            log('Не найдено ни одного глобального объекта, начинающегося с "Bpmn"', true);
+        }
+    } else {
+        log('BpmnModeler найден в глобальной области');
+    }
+
+    const canvasDiv = document.getElementById('canvas');
+    if (!canvasDiv) {
+        log('Элемент #canvas не найден!', true);
+    } else {
+        log('Контейнер #canvas найден, создаём модельер...');
+        let modeler;
+        try {
+            modeler = new BpmnModeler({
+                container: '#canvas',
+                keyboard: { bindTo: window }
+            });
+            log('Модельер создан успешно');
+        } catch (err) {
+            log(`Ошибка при создании модельера: ${err.message}`, true);
+            console.error(err);
+            canvasDiv.innerHTML = '<div style="color:red;padding:20px;">❌ Ошибка инициализации BPMN редактора. Смотрите консоль.</div>';
+            throw err;
+        }
+
+        // BPMN-диаграмма с задачей CalculateTask
+        const bpmnXML = `<?xml version="1.0" encoding="UTF-8"?>
+<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL"
+             xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI"
+             xmlns:dc="http://www.omg.org/spec/DD/20100524/DC"
+             xmlns:di="http://www.omg.org/spec/DD/20100524/DI"
+             targetNamespace="http://bpmn.io/schema/bpmn">
+  <process id="CalculatorProcess" isExecutable="false">
+    <startEvent id="StartEvent" name="Старт" />
+    <serviceTask id="CalculateTask" name="Вычислить результат" />
+    <endEvent id="EndEvent" name="Конец" />
+    <sequenceFlow id="flow1" sourceRef="StartEvent" targetRef="CalculateTask" />
+    <sequenceFlow id="flow2" sourceRef="CalculateTask" targetRef="EndEvent" />
+  </process>
+  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
+    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="CalculatorProcess">
+      <bpmndi:BPMNShape id="StartEvent_di" bpmnElement="StartEvent">
+        <dc:Bounds x="80" y="150" width="36" height="36" />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="CalculateTask_di" bpmnElement="CalculateTask">
+        <dc:Bounds x="180" y="130" width="120" height="80" />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="EndEvent_di" bpmnElement="EndEvent">
+        <dc:Bounds x="350" y="150" width="36" height="36" />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNEdge id="flow1_di" bpmnElement="flow1">
+        <di:waypoint x="116" y="168" />
+        <di:waypoint x="180" y="170" />
+      </bpmndi:BPMNEdge>
+      <bpmndi:BPMNEdge id="flow2_di" bpmnElement="flow2">
+        <di:waypoint x="300" y="170" />
+        <di:waypoint x="350" y="168" />
+      </bpmndi:BPMNEdge>
+    </bpmndi:BPMNPlane>
+  </bpmndi:BPMNDiagram>
+</definitions>`;
+
+        log('Загружаем BPMN XML...');
+        modeler.importXML(bpmnXML, function(err) {
+            if (err) {
+                log(`Ошибка загрузки BPMN: ${err.message || err}`, true);
+                console.error(err);
+                canvasDiv.innerHTML = '<div style="color:red;padding:20px;">❌ Не удалось загрузить BPMN-диаграмму. Смотрите консоль.</div>';
+                return;
+            }
+            log('BPMN загружена успешно!');
+            const elementRegistry = modeler.get('elementRegistry');
+            const taskElem = elementRegistry.get('CalculateTask');
+            if (taskElem) {
+                const gfx = elementRegistry.getGraphics(taskElem);
+                if (gfx) gfx.setAttribute('data-task', 'CalculateTask');
+            }
+        });
+
+        document.getElementById('exportBtn').addEventListener('click', async () => {
+            try {
+                const { xml } = await modeler.saveXML({ format: true });
+                log('XML сохранён в консоль');
+                console.log(xml);
+                alert('XML скопирован в консоль (F12)');
+            } catch (err) {
+                log(`Ошибка сохранения: ${err.message}`, true);
+            }
+        });
+
+        // Калькулятор
+        function calculate(num1, num2, op) {
+            if (isNaN(num1) || isNaN(num2)) return "Ошибка: введите числа";
+            switch (op) {
+                case '+': return num1 + num2;
+                case '-': return num1 - num2;
+                case '*': return num1 * num2;
+                case '/': return num2 === 0 ? "Ошибка: деление на ноль" : num1 / num2;
+                default: return "Ошибка: неизвестная операция";
+            }
+        }
+
+        function updateResult() {
+            const num1 = parseFloat(document.getElementById('num1').value);
+            const num2 = parseFloat(document.getElementById('num2').value);
+            const op = document.getElementById('operation').value;
+            const res = calculate(num1, num2, op);
+            document.getElementById('result').textContent = typeof res === 'number' ? res.toFixed(4) : res;
+            // Подсветка задачи на диаграмме
+            if (modeler) {
+                try {
+                    const elementRegistry = modeler.get('elementRegistry');
+                    const task = elementRegistry.get('CalculateTask');
+                    if (task) {
+                        const gfx = elementRegistry.getGraphics(task);
+                        if (gfx) {
+                            gfx.style.transition = 'filter 0.2s';
+                            gfx.style.filter = 'drop-shadow(0 0 8px #3b82f6)';
+                            setTimeout(() => { if (gfx) gfx.style.filter = ''; }, 400);
+                        }
+                    }
+                } catch (e) {}
+            }
+        }
+
+        const num1El = document.getElementById('num1');
+        const num2El = document.getElementById('num2');
+        const opEl = document.getElementById('operation');
+        if (num1El && num2El && opEl) {
+            num1El.addEventListener('input', updateResult);
+            num2El.addEventListener('input', updateResult);
+            opEl.addEventListener('change', updateResult);
+            updateResult();
+            log('Калькулятор активирован');
+        } else {
+            log('Поля ввода не найдены!', true);
+        }
+    }
+</script>
+</body>
+</html>
+```
+
+### 🚀 Как использовать
+
+1. Скопируйте весь код в новый файл `index.html`.
+2. Откройте его в браузере (локально или через GitHub Pages).
+3. **Слева** вы увидите BPMN-редактор с палитрой элементов (можно перетаскивать новые элементы, редактировать).
+4. **Справа** – калькулятор. Меняйте числа или операцию – результат обновляется, а задача «Вычислить результат» на диаграмме подсвечивается.
+5. Кнопка «Сохранить XML» выводит текущую BPMN-модель в консоль.
+6. Отладочная панель показывает ход инициализации и позволяет скопировать лог.
+
+### 📦 Развёртывание на GitHub Pages
+
+1. Создайте репозиторий на GitHub.
+2. Загрузите `index.html` в корень репозитория.
+3. Перейдите в **Settings → Pages**, выберите ветку `main` и папку `/ (root)`. Нажмите Save.
+4. Через минуту ваше приложение будет доступно по адресу:  
+   `https://[username].github.io/[repository-name]/`.
+
+### ✅ Почему это работает
+
+- Используется **bpmn-js версии 3.4.0**, где глобальная переменная `BpmnModeler` гарантированно доступна.
+- Все ресурсы подключаются через HTTPS, что исключает проблемы CORS.
+- Редактор и калькулятор полностью независимы, но связаны через подсветку задачи.
+- Код написан на чистом HTML/JS без сборщиков и подходит для любого статического хостинга.
+
+Теперь у вас есть полноценный open-source BPMN-конструктор с no-code элементами, который работает в любом браузере и может быть развёрнут на GitHub Pages. Приятной работы!