From 76c5b7bfe21159e1f977282ff3ece8ff3601124a Mon Sep 17 00:00:00 2001
From: neo <397763@gmail.com>
Date: Tue, 23 Jun 2026 19:16:32 +0500
Subject: [PATCH] fix: drakonwidget diagram now renders with visible theme

---
 index.html | 66 ++++++++++++++++++++++++++++++++++--------------------
 1 file changed, 42 insertions(+), 24 deletions(-)

diff --git a/index.html b/index.html
index 8ae07c2..ab0c389 100644
--- a/index.html
+++ b/index.html
@@ -240,7 +240,6 @@ button { font-family: inherit; cursor: pointer; border: none; background: none;
 /* Hero diagram — DrakonWidget container */
 .hero-diagram {
   position: relative;
-  background: var(--white);
   border-radius: var(--radius-xl);
   border: 1px solid var(--border);
   padding: 40px 24px 24px;
@@ -249,6 +248,7 @@ button { font-family: inherit; cursor: pointer; border: none; background: none;
   display: flex;
   align-items: center;
   justify-content: center;
+  background: var(--bg);
 }
 
 .hero-diagram-label {
@@ -1298,15 +1298,15 @@ var drakonDiagram = {
 
 // Theme customization for light theme (correct drakonwidget field names)
 var drakonTheme = {
-  background: '#ffffff',
+  background: '#e8f4f8',
   iconBack: '#ffffff',
-  lines: '#9ca3af',
-  iconBorder: '#d1d5db',
+  lines: '#111827',
+  iconBorder: '#374151',
   backText: '#111827',
   color: '#111827',
-  internalLine: '#111827',
-  lineWidth: 1.5,
-  borderWidth: 1.5,
+  internalLine: '#374151',
+  lineWidth: 3,
+  borderWidth: 3,
   shadowColor: '',
   shadowBlur: 0,
   shadowOffsetX: 0,
@@ -1317,45 +1317,63 @@ var drakonTheme = {
   candyBorder: '#16a34a',
   valFill: '#f59e0b',
   valBorder: '#92400e',
-  scrollBar: '#e5e7eb',
-  scrollBarHover: '#d1d5db',
+  scrollBar: '#d1d5db',
+  scrollBarHover: '#9ca3af',
   commentBack: '#f3f4f6',
   icons: {
-    branch: { iconBack: '#16a34a', font: '11px Inter, sans-serif' },
-    header: { font: '14px Inter, sans-serif' }
+    branch: { iconBack: '#16a34a', font: '12px Inter, sans-serif' },
+    header: { font: '16px Inter, sans-serif' }
   }
 };
 
 // Initialize on load
 window.addEventListener('load', function() {
   var canvasContainer = document.getElementById('drakon-canvas');
-  var widget = createDrakonWidget();
+  window._drakonWidget = createDrakonWidget();
+  console.log('Widget created:', !!window._drakonWidget);
 
   // Set up canvas with explicit dimensions matching container (480x360 fits in ~486px container)
-  widget.render(480, 360, {
+  window._drakonWidget.render(480, 360, {
     startEditContent: function() { /* read-only — no edit */ },
     showContextMenu: function() { /* read-only */ },
     canSelect: false,
     maxWidth: 480,
+    canvasBackground: '#e8f4f8',
+    canvasBorder: '#d1d5db',
+    canvasPadding: 20,
     theme: drakonTheme
   });
+  console.log('Widget render called');
 
   // Set the diagram content
-  widget.setDiagram('business-process', drakonDiagram, null, true);
+  var result = window._drakonWidget.setDiagram('business-process', drakonDiagram, null, true);
+  console.log('Set diagram result:', result);
+  result.then(function() {
+    console.log('Diagram loaded successfully');
+    // Force redraw
+    if (window._drakonWidget && window._drakonWidget.redraw) {
+      window._drakonWidget.redraw();
+      console.log('Redraw called');
+    }
+  }).catch(function(err) {
+    console.error('Failed to load diagram:', err);
+  });
 
   // Append the widget's container (with canvas) to our #drakon-canvas element
-  if (widget.container) {
-    canvasContainer.appendChild(widget.container);
+  if (window._drakonWidget.container) {
+    canvasContainer.appendChild(window._drakonWidget.container);
+    console.log('Widget container appended');
     
-    // Scale the container to fit the parent (480px canvas -> fit in ~486px container)
+    // Scale the container to fill the parent (480px canvas -> fill ~486px container)
     var containerWidth = canvasContainer.clientWidth;
-    var scaleX = containerWidth / 480;
-    widget.container.style.position = 'relative';
-    widget.container.style.left = '50%';
-    widget.container.style.transform = 'translateX(-50%) scale(' + scaleX + ')';
-    widget.container.style.width = (480 * scaleX) + 'px';
-    widget.container.style.height = (360 * scaleX) + 'px';
-    widget.container.style.overflow = 'visible';
+    var scaleX = (containerWidth - 10) / 480;
+    window._drakonWidget.container.style.position = 'relative';
+    window._drakonWidget.container.style.left = '50%';
+    window._drakonWidget.container.style.transform = 'translateX(-50%) scale(' + scaleX + ')';
+    window._drakonWidget.container.style.width = (480 * scaleX) + 'px';
+    window._drakonWidget.container.style.height = (360 * scaleX) + 'px';
+    window._drakonWidget.container.style.overflow = 'visible';
+    window._drakonWidget.container.style.marginTop = '10px';
   }
 });