From 0a79ebbdf98c2371a610250993737da392654911 Mon Sep 17 00:00:00 2001
From: neo <397763@gmail.com>
Date: Tue, 23 Jun 2026 17:35:17 +0500
Subject: [PATCH] feat: SVG DRAKON diagram + light theme (raketa.com style)
---
index.html | 271 +++++++++++++++++++++--------------------------------
1 file changed, 108 insertions(+), 163 deletions(-)
diff --git a/index.html b/index.html
index e5f8cb8..17a4408 100644
--- a/index.html
+++ b/index.html
@@ -8,8 +8,6 @@
-
-
@@ -938,7 +936,104 @@ button { font-family: inherit; cursor: pointer; border: none; background: none;
Пример: наш процесс
-
+
+
+
@@ -1352,157 +1447,7 @@ document.querySelectorAll('a[href^="#"]').forEach((a) => {
});
});
-// ============================================
-// DRAKON DIAGRAM — DrakonWidget (view mode)
-// ============================================
-// DrakonWidget node types: end, action, question, branch, insertion, address,
-// select, case, loopbegin, loopend, parbegin, parend, duration
-// Flow direction: entry branch (branchId:0) → ... → end (terminator)
-
-function initDrakonDiagram() {
- // Business process diagram — client onboarding flow
- var diagram = {
- name: "Наш процесс",
- items: {
- // Entry point (arrow icon)
- "1": {
- type: "branch",
- branchId: 0,
- one: "2"
- },
- // Step 1
- "2": {
- type: "action",
- one: "3",
- content: "Брифинг клиента"
- },
- // Step 2
- "3": {
- type: "action",
- one: "4",
- content: "Аудит процессов"
- },
- // Decision
- "4": {
- type: "question",
- one: "5",
- no: "6",
- content: "Понятно?"
- },
- // Yes path — proceed
- "5": {
- type: "action",
- one: "7",
- content: "Создание схем ДРАКОН"
- },
- // No path — clarify
- "6": {
- type: "action",
- one: "7",
- content: "Уточняем процесс"
- },
- // Merge
- "7": {
- type: "action",
- one: "8",
- content: "Согласование"
- },
- // End — terminator
- "8": {
- type: "end"
- }
- }
- };
-
- // Minimal view-only configuration
- var config = {
- startEditContent: function () { /* read-only */ },
- showContextMenu: function () { /* read-only */ },
- canSelect: false,
- maxWidth: 320,
- theme: {
- lineWidth: 2,
- borderWidth: 0,
- background: "#ffffff",
- iconBorder: "#d1d5db",
- iconBack: "#ffffff",
- iconRadius: 6,
- shadowBlur: 4,
- shadowColor: "rgba(0, 0, 0, 0.06)",
- color: "#111827",
- lines: "#6b7280",
- backText: "#16a34a",
- font: "14px Inter, sans-serif",
- headerFont: "bold 15px Inter, sans-serif",
- yes: "Да",
- no: "Нет"
- }
- };
-
- // View-only edit sender
- var sender = {
- stop: function () { },
- pushEdit: function () { /* read-only */ }
- };
-
- // Build widget
- var drakonCanvas = document.getElementById('drakon-canvas');
- var drakon = createDrakonWidget();
- var WIDGET_W = 560;
- var WIDGET_H = 420;
-
- function rebuildWidget() {
- drakonCanvas.innerHTML = '';
- var widgetEl = drakon.render(WIDGET_W, WIDGET_H, config);
- drakonCanvas.appendChild(widgetEl);
- }
-
- // Initial render
- rebuildWidget();
-
- // Load diagram
- drakon.setDiagram(
- 'business-process',
- diagram,
- sender,
- false // readOnly
- );
-
- // Redraw after layout pass
- setTimeout(function () {
- rebuildWidget();
- drakon.setDiagram(
- 'business-process',
- diagram,
- sender,
- false
- );
- }, 200);
-
- // Handle resize
- var resizeObserver = new ResizeObserver(function () {
- rebuildWidget();
- drakon.setDiagram(
- 'business-process',
- diagram,
- sender,
- false
- );
- });
- resizeObserver.observe(drakonCanvas);
-}
-
-// Initialize on load
-if (typeof createDrakonWidget === 'function') {
- initDrakonDiagram();
-} else {
- // Fallback if CDN is slow
- window.addEventListener('load', function () {
- if (typeof createDrakonWidget === 'function') {
- initDrakonDiagram();
- }
- });
-}
+// Initialize on load — animations and smooth scroll