Update static/canvas.js

static/canvas.js

@@ -1,5 +1,20 @@
-// Initialization
-const width = window.innerWidth - 400; // Subtract sidebar width
+// static/js/canvas.js
+
+// --- Configuration ---
+const CONFIG = {
+    // Only render nodes within this padding of the viewport
+    viewportPadding: 200, 
+    // Throttle scroll events to run only every 16ms (60fps)
+    throttleMs: 16,
+    // Visual settings
+    nodeWidth: 200,
+    nodeHeight: 50,
+    indentWidth: 60,
+    rowHeight: 80
+};
+
+// --- Setup Stage ---
+const width = window.innerWidth - 400; // Adjust for sidebar
 const height = window.innerHeight;
 
 const stage = new Konva.Stage({
@@ -12,16 +27,85 @@ const stage = new Konva.Stage({
 const layer = new Konva.Layer();
 stage.add(layer);
 
-// State
-let scale = 1;
+// Global State
+let allNodes = [];      // Array of { group, x, y, visible }
+let sourceLines = [];   // Cached source code lines
+let isTicking = false;  // For throttling
+
+// --- 1. Optimization Core: Viewport Culling ---
+function updateVisibleNodes() {
+    isTicking = false;
+    
+    // Get the visible viewport in "World Coordinates" (accounting for zoom/pan)
+    const scale = stage.scaleX();
+    const stageX = stage.x();
+    const stageY = stage.y();
+
+    // The logic: Invert the transform to find what part of the world is visible
+    const viewX = -(stageX / scale) - CONFIG.viewportPadding;
+    const viewY = -(stageY / scale) - CONFIG.viewportPadding;
+    const viewW = (stage.width() / scale) + (CONFIG.viewportPadding * 2);
+    const viewH = (stage.height() / scale) + (CONFIG.viewportPadding * 2);
+
+    const viewRight = viewX + viewW;
+    const viewBottom = viewY + viewH;
+
+    // Batch updates to prevent multiple redraws
+    let nodesChanged = false;
+
+    // Fast loop (standard for-loop is faster than .forEach for massive arrays)
+    for (let i = 0; i < allNodes.length; i++) {
+        const node = allNodes[i];
+        
+        // Simple Bounding Box Collision Check
+        const isVisible = (
+            node.x < viewRight && 
+            node.x + CONFIG.nodeWidth > viewX && 
+            node.y < viewBottom && 
+            node.y + CONFIG.nodeHeight > viewY
+        );
+
+        // Only touch the DOM/Konva object if state changes (Save CPU)
+        if (node.visible !== isVisible) {
+            node.group.visible(isVisible);
+            node.visible = isVisible;
+            nodesChanged = true;
+        }
+    }
+
+    if (nodesChanged) {
+        // layer.batchDraw() is more efficient than layer.draw()
+        layer.batchDraw();
+    }
+}
+
+// Request Animation Frame Wrapper (Throttling)
+function requestUpdate() {
+    if (!isTicking) {
+        requestAnimationFrame(updateVisibleNodes);
+        isTicking = true;
+    }
+}
+
+// Bind optimization to interactions
+stage.on('dragmove', requestUpdate);
+stage.on('wheel', (e) => {
+    // ... (Zoom logic below) ...
+    // After zoom, we must update visibility
+    requestUpdate(); 
+});
+
+
+// --- 2. Standard Logic (Zoom & Draw) ---
 
-// Zoom Handler
+// Zoom Logic
 stage.on('wheel', (e) => {
     e.evt.preventDefault();
     const oldScale = stage.scaleX();
     const pointer = stage.getPointerPosition();
     const scaleBy = 1.05;
     const newScale = e.evt.deltaY > 0 ? oldScale / scaleBy : oldScale * scaleBy;
+    
     stage.scale({ x: newScale, y: newScale });
     
     const newPos = {
@@ -35,20 +119,13 @@ stage.on('wheel', (e) => {
 window.addEventListener('resize', () => {
     stage.width(window.innerWidth - 400);
     stage.height(window.innerHeight);
+    requestUpdate();
 });
 
-// Logger
-function log(msg, type='info') {
-    const consoleBody = document.getElementById('logOutput');
-    const color = type === 'error' ? '#ff7675' : '#55efc4';
-    consoleBody.innerHTML += `<div style="color:${color}">> ${msg}</div>`;
-    consoleBody.scrollTop = consoleBody.scrollHeight;
-}
-
-// API Calls
+// API Listener
 document.getElementById('btnVisualize').addEventListener('click', () => {
     const code = document.getElementById('codeInput').value;
-    log('Parsing code structure...');
+    log('Parsing...');
     
     fetch('/parse', {
         method: 'POST',
@@ -57,124 +134,111 @@ document.getElementById('btnVisualize').addEventListener('click', () => {
     })
     .then(res => res.json())
     .then(data => {
-        if(data.error) {
-            log(data.error, 'error');
-        } else {
-            // PASS 'code' HERE so we can slice it later
-            drawGraph(data, code); 
-            log(`Graph generated: ${data.nodes.length} nodes.`);
-        }
-    })
-    .catch(err => log('Network error', 'error'));
-});
-
-
-document.getElementById('btnDataset').addEventListener('click', () => {
-    const code = document.getElementById('codeInput').value;
-    log('Generating vector dataset entry...');
-    
-    fetch('/add_to_dataset', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ code: code })
-    })
-    .then(res => res.json())
-    .then(data => {
-        if(data.status === 'success') {
-            log(`Dataset updated. ID: ${data.entry_id}`);
-        } else {
-            log(data.message, 'error');
+        if(data.error) log(data.error, 'error');
+        else {
+            drawGraph(data, code);
+            log(`Graph: ${data.nodes.length} nodes`);
         }
     });
 });
 
-// Drawing Logic
 function drawGraph(data, fullSourceCode) {
+    // Cleanup old memory
     layer.destroyChildren();
+    allNodes = []; 
     
-    if (data.nodes.length === 0) return;
-
-    // OPTIMIZATION: Split code once into lines for O(1) access
-    const sourceLines = fullSourceCode.split('\n');
+    // Cache source lines
+    sourceLines = fullSourceCode.split('\n');
 
     const nodeMap = {};
-    const X_OFFSET = 100;
-    const Y_START = 50;
-    const INDENT_WIDTH = 60;
-    const ROW_HEIGHT = 80;
-
-    const colors = {
-        'function': '#a29bfe', 'class': '#e84393', 'if': '#fab1a0',
-        'for': '#fdcb6e', 'while': '#fdcb6e', 'return': '#55efc4',
-        'assigned_variable': '#74b9ff', 'import': '#b2bec3'
-    };
-
+    
+    // --- Batch Create Nodes ---
     data.nodes.forEach((node, index) => {
-        // Use short keys: node.lvl instead of node.level
-        const x = X_OFFSET + (node.lvl * INDENT_WIDTH);
-        const y = Y_START + (index * ROW_HEIGHT);
+        const x = 100 + (node.lvl * CONFIG.indentWidth);
+        const y = 50 + (index * CONFIG.rowHeight);
+
+        // Styling
+        const colors = {
+            'function': '#a29bfe', 'class': '#e84393', 'if': '#fab1a0',
+            'for': '#fdcb6e', 'while': '#fdcb6e', 'return': '#55efc4',
+            'assigned_variable': '#74b9ff', 'import': '#b2bec3'
+        };
 
-        const group = new Konva.Group({ x: x, y: y, draggable: false });
+        const group = new Konva.Group({ 
+            x: x, 
+            y: y,
+            // Optimization: Stop this group from catching mouse events if not needed
+            listening: true 
+        });
 
         const rect = new Konva.Rect({
-            width: 200, height: 50,
+            width: CONFIG.nodeWidth, 
+            height: CONFIG.nodeHeight,
             fill: '#2d3436',
             stroke: colors[node.type] || '#636e72',
-            strokeWidth: 2, cornerRadius: 8,
-            shadowColor: 'black', shadowBlur: 10, shadowOpacity: 0.3
+            strokeWidth: 2, 
+            cornerRadius: 8,
+            shadowColor: 'black', 
+            shadowBlur: 10, 
+            shadowOpacity: 0.3,
+            // Optimization: Perfect bounding box for hit detection
+            hitStrokeWidth: 0
         });
 
         const text = new Konva.Text({
             x: 10, y: 10,
-            text: node.lbl, // Use short key: lbl
+            text: node.lbl,
             fontSize: 14, fontFamily: 'JetBrains Mono', fill: '#fff',
-            width: 180, ellipsis: true
+            width: 180, ellipsis: true,
+            // Optimization: Text doesn't need to listen to clicks, the Group/Rect handles it
+            listening: false 
         });
 
         const vecText = new Konva.Text({
             x: 10, y: 32,
-            text: `V:[${node.vec[0]}, ${node.vec[2]}...]`, // Use short key: vec
-            fontSize: 10, fontFamily: 'JetBrains Mono', fill: '#636e72'
+            text: `V:[${node.vec[0]}, ${node.vec[2]}...]`,
+            fontSize: 10, fontFamily: 'JetBrains Mono', fill: '#636e72',
+            listening: false
         });
 
         group.add(rect);
         group.add(text);
         group.add(vecText);
         
-        // OPTIMIZATION: Reconstruct source on click
+        // Interaction
         group.on('click', () => {
-            // AST line numbers are 1-based, array is 0-based
-            const startLine = node.loc[0] - 1;
-            const endLine = node.loc[1];
-            
-            // Slice the specific lines from the main array
-            const snippet = sourceLines.slice(startLine, endLine).join('\n');
-            log(`Node Source:\n${snippet}`);
+            const start = node.loc[0] - 1;
+            const end = node.loc[1];
+            const snippet = sourceLines.slice(start, end).join('\n');
+            log(`Source:\n${snippet}`);
         });
 
-        // Hover effects
-        group.on('mouseover', () => { document.body.style.cursor = 'pointer'; rect.fill('#353b48'); layer.draw(); });
-        group.on('mouseout', () => { document.body.style.cursor = 'default'; rect.fill('#2d3436'); layer.draw(); });
+        // Hover
+        group.on('mouseover', () => { document.body.style.cursor = 'pointer'; rect.fill('#353b48'); layer.batchDraw(); });
+        group.on('mouseout', () => { document.body.style.cursor = 'default'; rect.fill('#2d3436'); layer.batchDraw(); });
 
         layer.add(group);
+        
+        // Save Reference for Culling Logic
         nodeMap[node.id] = { x, y };
+        allNodes.push({
+            group: group,
+            x: x,
+            y: y,
+            visible: true
+        });
     });
 
     // Draw Connections
+    // Optimization: Draw connections on a generic "listening: false" shape to avoid hit-detection overhead
     data.connections.forEach(conn => {
-        // Use short keys: f (from), t (to)
-        const fromNode = nodeMap[conn.f];
-        const toNode = nodeMap[conn.t];
-
-        if (fromNode && toNode) {
-            const startX = fromNode.x + 20;
-            const startY = fromNode.y + 50;
-            const endX = toNode.x + 20;
-            const endY = toNode.y;
-
+        const f = nodeMap[conn.f];
+        const t = nodeMap[conn.t];
+        if (f && t) {
             const line = new Konva.Line({
-                points: [startX, startY, startX, endY - 10, endX, endY - 10, endX, endY],
-                stroke: '#636e72', strokeWidth: 2, tension: 0.2, opacity: 0.6
+                points: [f.x+20, f.y+50, f.x+20, t.y-10, t.x+20, t.y-10, t.x+20, t.y],
+                stroke: '#636e72', strokeWidth: 2, tension: 0.2, opacity: 0.5,
+                listening: false // Critical: Don't calculate mouse hits for lines
             });
             layer.add(line);
             line.moveToBottom();
@@ -182,13 +246,15 @@ function drawGraph(data, fullSourceCode) {
     });
 
     layer.batchDraw();
-    
-    if (data.nodes.length > 0) {
-        stage.x(50);
-        stage.y(50);
-    }
+    // Initial cull calculation
+    updateVisibleNodes();
 }
 
-
-// Initial Call
-setTimeout(() => document.getElementById('btnVisualize').click(), 500);
+function log(msg, type='info') {
+    const consoleBody = document.getElementById('logOutput');
+    const color = type === 'error' ? '#ff7675' : '#55efc4';
+    if(consoleBody) {
+        consoleBody.innerHTML += `<div style="color:${color}">> ${msg}</div>`;
+        consoleBody.scrollTop = consoleBody.scrollHeight;
+    }
+}