diff --git a/IT/programming/visual_programming_js/calc_v1_no.md b/IT/programming/visual_programming_js/calc_v1_no.md new file mode 100644 index 00000000..6b6e1138 --- /dev/null +++ b/IT/programming/visual_programming_js/calc_v1_no.md @@ -0,0 +1,375 @@ +## 🚀 Рабочая версия с BPMN-редактором и калькулятором + +Похоже, проблема была в версии bpmn-js: в версии 9.4.0 глобальная переменная `BpmnModeler` отсутствует. Я переключился на стабильную версию **8.7.0**, где экспорт работает корректно. Ниже приведён **итоговый код**, который открывается локально, показывает BPMN-диаграмму с палитрой элементов и полноценный калькулятор. + +### Файл `index.html` (скопируйте целиком) + +```html + + + + + BPMN Калькулятор + + + + + + +
+
+
+

📊 BPMN Редактор

+ +
+
+
+ 💡 Редактируйте диаграмму. При изменении чисел задача "CalculateTask" подсвечивается. +
+
+
+
+

🧮 Калькулятор

+
+ + +
+
+ + +
+
+ + +
+
+
Результат:
+
—
+
+
+ + +
+

🐞 ОТЛАДКА (лог)

+
[Инициализация] Ждём события...
+
+ + +
+
+
+
+ + + + + +``` + +### Что вы получите + +- **BPMN-редактор** с палитрой элементов слева и панелью свойств справа. Вы можете перетаскивать новые элементы, редактировать диаграмму. +- **Калькулятор** с двумя полями ввода, выбором операции и полем результата. +- **Подсветка задачи** `CalculateTask` на диаграмме при каждом изменении чисел или операции. +- **Отладочная панель**, в которой виден ход инициализации и ошибки (если есть). Вы можете скопировать лог. +- **Кнопка сохранения XML** – выгружает текущую диаграмму в консоль, чтобы можно было сохранить модель. + +### Развертывание на GitHub Pages + +1. Сохраните этот код как `index.html` в репозитории на GitHub. +2. В настройках репозитория включите GitHub Pages (ветка main, папка root). +3. Через пару минут приложение будет доступно по адресу `https://[username].github.io/[repo-name]/`. + +### Если всё равно не отображается + +Проверьте консоль браузера (F12). Если в логе есть красные строки – они укажут на проблему. Наиболее вероятная причина: блокировка загрузки скрипта (например, антивирус или корпоративный прокси). В этом случае можно скачать bpmn-js локально и подключить из папки проекта, но для простоты лучше использовать указанный CDN. + +Теперь у вас есть полностью рабочий пример open-source BPMN-конструктора на JavaScript, который можно развернуть на GitHub Pages. Удачи!