اجعل هذا الغراف اكثر ديناميكا وتحكم ومعلومات

math-visualizer.html

@@ -26,10 +26,24 @@
                     <label class="block text-gray-700 mb-2">Enter function (e.g., sin(x), x^2):</label>
                     <input type="text" id="functionInput" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent" value="sin(x)">
                 </div>
-                <div class="h-64">
+                <div class="h-64 relative">
                     <canvas id="functionGraph"></canvas>
+                    <div class="absolute top-4 right-4 flex space-x-2">
+                        <button id="zoomIn" class="bg-white p-2 rounded-full shadow hover:bg-gray-100">
+                            <i data-feather="zoom-in"></i>
+                        </button>
+                        <button id="zoomOut" class="bg-white p-2 rounded-full shadow hover:bg-gray-100">
+                            <i data-feather="zoom-out"></i>
+                        </button>
+                        <button id="resetView" class="bg-white p-2 rounded-full shadow hover:bg-gray-100">
+                            <i data-feather="refresh-cw"></i>
+                        </button>
+                    </div>
+                    <div id="coordinatesDisplay" class="absolute bottom-4 left-4 bg-white/80 px-3 py-1 rounded-lg text-sm shadow">
+                        x: 0, y: 0
+                    </div>
                 </div>
-            </div>
+</div>
 
             <div class="bg-white p-6 rounded-xl shadow-lg">
                 <h2 class="text-2xl font-bold text-gray-800 mb-4">Geometry Playground</h2>

math-visualizer.js

@@ -1,7 +1,8 @@
 document.addEventListener('DOMContentLoaded', () => {
-    // Function Graph Visualization
+    // Function Graph Visualization with enhanced controls
     const functionCtx = document.getElementById('functionGraph').getContext('2d');
-    const algebraCtx = document.getElementById('algebraGraph').getContext('2d');
+    let xMin = -10, xMax = 10, yMin = -5, yMax = 5;
+const algebraCtx = document.getElementById('algebraGraph').getContext('2d');
     
     // Initialize function graph
     const functionGraph = new Chart(functionCtx, {
@@ -18,22 +19,76 @@ document.addEventListener('DOMContentLoaded', () => {
         },
         options: {
             responsive: true,
+            maintainAspectRatio: false,
             scales: {
                 x: {
                     type: 'linear',
                     position: 'center',
-                    min: -10,
-                    max: 10
+                    min: xMin,
+                    max: xMax,
+                    title: {
+                        display: true,
+                        text: 'x-axis',
+                        font: {
+                            weight: 'bold'
+                        }
+                    },
+                    grid: {
+                        color: (ctx) => ctx.tick.value === 0 ? '#000' : 'rgba(0, 0, 0, 0.1)'
+                    }
                 },
                 y: {
                     type: 'linear',
                     position: 'center',
-                    min: -5,
-                    max: 5
+                    min: yMin,
+                    max: yMax,
+                    title: {
+                        display: true,
+                        text: 'y-axis',
+                        font: {
+                            weight: 'bold'
+                        }
+                    },
+                    grid: {
+                        color: (ctx) => ctx.tick.value === 0 ? '#000' : 'rgba(0, 0, 0, 0.1)'
+                    }
+                }
+            },
+            plugins: {
+                tooltip: {
+                    mode: 'nearest',
+                    intersect: false,
+                    callbacks: {
+                        label: (context) => {
+                            return `f(${context.parsed.x.toFixed(2)}) = ${context.parsed.y.toFixed(2)}`;
+                        }
+                    }
+                },
+                legend: {
+                    display: false
+                },
+                zoom: {
+                    pan: {
+                        enabled: true,
+                        mode: 'xy'
+                    },
+                    zoom: {
+                        wheel: {
+                            enabled: true
+                        },
+                        pinch: {
+                            enabled: true
+                        },
+                        mode: 'xy'
+                    }
                 }
+            },
+            interaction: {
+                mode: 'nearest',
+                intersect: false
             }
         }
-    });
+});
 
     // Initialize algebra graph
     const algebraGraph = new Chart(algebraCtx, {
@@ -65,26 +120,72 @@ document.addEventListener('DOMContentLoaded', () => {
             }
         }
     });
+    // Add zoom and pan controls
+    document.getElementById('zoomIn').addEventListener('click', () => {
+        xMin *= 0.8;
+        xMax *= 0.8;
+        yMin *= 0.8;
+        yMax *= 0.8;
+        updateGraphScale();
+    });
+
+    document.getElementById('zoomOut').addEventListener('click', () => {
+        xMin *= 1.2;
+        xMax *= 1.2;
+        yMin *= 1.2;
+        yMax *= 1.2;
+        updateGraphScale();
+    });
+
+    document.getElementById('resetView').addEventListener('click', () => {
+        xMin = -10; xMax = 10;
+        yMin = -5; yMax = 5;
+        updateGraphScale();
+    });
+
+    function updateGraphScale() {
+        functionGraph.options.scales.x.min = xMin;
+        functionGraph.options.scales.x.max = xMax;
+        functionGraph.options.scales.y.min = yMin;
+        functionGraph.options.scales.y.max = yMax;
+        functionGraph.update();
+    }
 
     // Update function graph when input changes
     document.getElementById('functionInput').addEventListener('input', function() {
         updateFunctionGraph();
     });
 
+    // Mouse move coordinates display
+    const coordDisplay = document.getElementById('coordinatesDisplay');
+    document.getElementById('functionGraph').addEventListener('mousemove', (e) => {
+        const rect = e.target.getBoundingClientRect();
+        const x = xMin + (xMax - xMin) * (e.clientX - rect.left) / rect.width;
+        const y = yMax - (yMax - yMin) * (e.clientY - rect.top) / rect.height;
+        coordDisplay.textContent = `x: ${x.toFixed(2)}, y: ${y.toFixed(2)}`;
+    });
     function updateFunctionGraph() {
         const func = document.getElementById('functionInput').value;
         const data = [];
+        let isValid = true;
         
-        for (let x = -10; x <= 10; x += 0.1) {
+        for (let x = xMin; x <= xMax; x += (xMax - xMin)/200) {
             try {
                 const y = math.evaluate(func, {x: x});
-                data.push({x: x, y: y});
+                if (!isNaN(y) && isFinite(y)) {
+                    data.push({x: x, y: y});
+                } else {
+                    isValid = false;
+                }
             } catch (e) {
                 console.error("Error evaluating function:", e);
+                isValid = false;
             }
         }
         
-        functionGraph.data.datasets[0].data = data;
+        // Update line color based on validity
+        functionGraph.data.datasets[0].borderColor = isValid ? '#7c3aed' : '#ef4444';
+functionGraph.data.datasets[0].data = data;
         functionGraph.update();
     }
 

style.css

@@ -22,6 +22,14 @@ body {
 ::-webkit-scrollbar-thumb:hover {
     background: #555;
 }
+/* Graph tooltip styles */
+.chartjs-tooltip {
+    background: rgba(0, 0, 0, 0.7) !important;
+    border-radius: 4px !important;
+    color: white !important;
+    padding: 8px 12px !important;
+    pointer-events: none !important;
+}
 
 /* Animation classes */
 .fade-in {