neo/algoritm-space
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: drakonwidget diagram now renders with visible theme

Browse Source
This commit is contained in:
neo committed 2026-06-23 19:16:32 +05:00
1 parent 22d901ccda
commit 76c5b7bfe2
1 file changed
+42 -24
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+42 -24
View File
@@ -240,7 +240,6 @@ button { font-family: inherit; cursor: pointer; border: none; background: none;
/* Hero diagram — DrakonWidget container */ /* Hero diagram — DrakonWidget container */
.hero-diagram { .hero-diagram {
position: relative; position: relative;
background: var(--white);
border-radius: var(--radius-xl); border-radius: var(--radius-xl);
border: 1px solid var(--border); border: 1px solid var(--border);
padding: 40px 24px 24px; padding: 40px 24px 24px;
@@ -249,6 +248,7 @@ button { font-family: inherit; cursor: pointer; border: none; background: none;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: var(--bg);
} }
.hero-diagram-label { .hero-diagram-label {
@@ -1298,15 +1298,15 @@ var drakonDiagram = {
// Theme customization for light theme (correct drakonwidget field names) // Theme customization for light theme (correct drakonwidget field names)
var drakonTheme = { var drakonTheme = {
background: '#ffffff', background: '#e8f4f8',
iconBack: '#ffffff', iconBack: '#ffffff',
lines: '#9ca3af', lines: '#111827',
iconBorder: '#d1d5db', iconBorder: '#374151',
backText: '#111827', backText: '#111827',
color: '#111827', color: '#111827',
internalLine: '#111827', internalLine: '#374151',
lineWidth: 1.5, lineWidth: 3,
borderWidth: 1.5, borderWidth: 3,
shadowColor: '', shadowColor: '',
shadowBlur: 0, shadowBlur: 0,
shadowOffsetX: 0, shadowOffsetX: 0,
@@ -1317,45 +1317,63 @@ var drakonTheme = {
candyBorder: '#16a34a', candyBorder: '#16a34a',
valFill: '#f59e0b', valFill: '#f59e0b',
valBorder: '#92400e', valBorder: '#92400e',
scrollBar: '#e5e7eb', scrollBar: '#d1d5db',
scrollBarHover: '#d1d5db', scrollBarHover: '#9ca3af',
commentBack: '#f3f4f6', commentBack: '#f3f4f6',
icons: { icons: {
branch: { iconBack: '#16a34a', font: '11px Inter, sans-serif' }, branch: { iconBack: '#16a34a', font: '12px Inter, sans-serif' },
header: { font: '14px Inter, sans-serif' } header: { font: '16px Inter, sans-serif' }
} }
}; };
// Initialize on load // Initialize on load
window.addEventListener('load', function() { window.addEventListener('load', function() {
var canvasContainer = document.getElementById('drakon-canvas'); 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) // 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 */ }, startEditContent: function() { /* read-only — no edit */ },
showContextMenu: function() { /* read-only */ }, showContextMenu: function() { /* read-only */ },
canSelect: false, canSelect: false,
maxWidth: 480, maxWidth: 480,
canvasBackground: '#e8f4f8',
canvasBorder: '#d1d5db',
canvasPadding: 20,
theme: drakonTheme theme: drakonTheme
}); });
console.log('Widget render called');
// Set the diagram content // 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 // Append the widget's container (with canvas) to our #drakon-canvas element
if (widget.container) { if (window._drakonWidget.container) {
canvasContainer.appendChild(widget.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 containerWidth = canvasContainer.clientWidth;
var scaleX = containerWidth / 480; var scaleX = (containerWidth - 10) / 480;
widget.container.style.position = 'relative'; window._drakonWidget.container.style.position = 'relative';
widget.container.style.left = '50%'; window._drakonWidget.container.style.left = '50%';
widget.container.style.transform = 'translateX(-50%) scale(' + scaleX + ')'; window._drakonWidget.container.style.transform = 'translateX(-50%) scale(' + scaleX + ')';
widget.container.style.width = (480 * scaleX) + 'px'; window._drakonWidget.container.style.width = (480 * scaleX) + 'px';
widget.container.style.height = (360 * scaleX) + 'px'; window._drakonWidget.container.style.height = (360 * scaleX) + 'px';
widget.container.style.overflow = 'visible'; window._drakonWidget.container.style.overflow = 'visible';
window._drakonWidget.container.style.marginTop = '10px';
} }
}); });