Optimized Minimap performance with useCallback and updated README.md document

Author: scar17off

README.md

@@ -16,15 +16,21 @@ This project is a web-based visual scripting environment that allows users to cr
   - HTTP Requests
   - JSON handling (Parse, Stringify)
   - Base64 encoding/decoding
-- Real-time code generation with customizable settings
-- Ability to run scripts with debugging support
-- Undo/Redo functionality
-- Canvas controls (zoom, pan)
-- Project management (save, load)
-- Export options (JSON, JavaScript, Image)
+- Real-time code generation with customizable settings:
+  - Strict mode toggle
+  - Semicolon usage toggle
+  - Const/Let declaration choice
+  - Comment generation toggle
+- Canvas controls:
+  - Zoom and pan functionality
+  - Grid toggle
+  - Minimap visualization
+  - Node rounding options
 - Theme customization (dark/light)
-- Grid and minimap visualization
-- Graph inspector panel
+- Project management:
+  - Save/Load functionality
+  - Export options (JSON, JavaScript, Image)
+- Graph inspector panel with real-time node configuration
 - Predefined example projects
 
 ## Installation
@@ -78,6 +84,9 @@ This project is a web-based visual scripting environment that allows users to cr
   - `GraphInspector.js`: Node properties panel
   - `MenuBar.js`: Application menu
   - `SettingsTab.js`: Configuration interface
+  - `ContextMenu.js`: Right-click menu
+  - `NodeContextMenu.js`: Node-specific context menu
+  - `Minimap.js`: Canvas overview
 - `src/examples.js`: Predefined example projects
 
 ## Contributing

src/components/Minimap.js

@@ -3,7 +3,7 @@ import React, { useRef, useEffect, useCallback } from 'react';
 const Minimap = ({ nodes, edges, camera, canvasSize, getNodeDimensions, nodeTypes }) => {
   const minimapRef = useRef(null);
 
-  const calculateBounds = (nodes, ctx) => {
+  const calculateBounds = useCallback((nodes, ctx) => {
     if (!nodes.length) return null;
 
     let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
@@ -21,9 +21,9 @@ const Minimap = ({ nodes, edges, camera, canvasSize, getNodeDimensions, nodeType
     });
 
     return minX === Infinity ? null : { minX, minY, maxX, maxY };
-  };
+  }, [getNodeDimensions]);
 
-  const drawEdge = (ctx, edge, nodes, scale, bounds) => {
+  const drawEdge = useCallback((ctx, edge, nodes, scale, bounds) => {
     const startNode = nodes.find(n => n.id === edge.start.nodeId);
     const endNode = nodes.find(n => n.id === edge.end.nodeId);
     if (!startNode || !endNode) return;
@@ -40,9 +40,9 @@ const Minimap = ({ nodes, edges, camera, canvasSize, getNodeDimensions, nodeType
     ctx.strokeStyle = '#666';
     ctx.lineWidth = 1;
     ctx.stroke();
-  };
+  }, [getNodeDimensions]);
 
-  const drawNode = (ctx, node, scale, bounds) => {
+  const drawNode = useCallback((ctx, node, scale, bounds) => {
     const { width, height } = getNodeDimensions(node, ctx);
     const nodeType = nodeTypes[node.type];
 
@@ -73,7 +73,7 @@ const Minimap = ({ nodes, edges, camera, canvasSize, getNodeDimensions, nodeType
       (node.x - bounds.minX + 5) * scale,
       (node.y - bounds.minY + 15) * scale
     );
-  };
+  }, [getNodeDimensions, nodeTypes]);
 
   const drawViewport = (ctx, camera, canvasSize, scale, bounds) => {
     const viewportWidth = canvasSize.width / camera.scale;
@@ -121,7 +121,7 @@ const Minimap = ({ nodes, edges, camera, canvasSize, getNodeDimensions, nodeType
     nodes.forEach(node => drawNode(minimapCtx, node, scale, bounds));
     drawViewport(minimapCtx, camera, canvasSize, scale, bounds);
 
-  }, [nodes, edges, camera, canvasSize, getNodeDimensions, nodeTypes]);
+  }, [nodes, edges, camera, canvasSize, calculateBounds, drawEdge, drawNode]);
 
   useEffect(() => {
     try {

src/components/NodeContextMenu.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import styles from './ContextMenu.module.css';
 
 const NodeContextMenu = ({ visible, x, y, camera, onAction }) => {
@@ -36,4 +36,4 @@ const NodeContextMenu = ({ visible, x, y, camera, onAction }) => {
   );
 };
 
-export default NodeContextMenu; 
+export default NodeContextMenu;