Upload 8 files

src/views/InstructorView.js

@@ -184,7 +184,10 @@ export async function renderInstructorView() {
             </div>
             
             <!-- Canvas Layer -->
-            <canvas id="annotation-canvas" class="absolute inset-0 z-10 touch-none cursor-crosshair"></canvas>
+            <canvas id="annotation-canvas" class="absolute inset-0 z-10 touch-none cursor-none"></canvas>
+            
+            <!-- Custom Tool Cursor -->
+            <div id="tool-cursor" class="absolute hidden rounded-full pointer-events-none z-50 transform -translate-x-1/2 -translate-y-1/2 transition-all duration-75 linear will-change-transform shadow-sm border border-white/50"></div>
         </div>
     </div>
 
@@ -1180,8 +1183,20 @@ ${item.prompt}
         resize();
         window.addEventListener('resize', resize);
 
-        // Init Size UI
+        // Init Size UI & Cursor
         updateSizeBtnUI();
+        updateCursorStyle();
+
+        // Cursor Logic
+        const cursor = document.getElementById('tool-cursor');
+
+        canvas.addEventListener('mouseenter', () => cursor.classList.remove('hidden'));
+        canvas.addEventListener('mouseleave', () => cursor.classList.add('hidden'));
+        canvas.addEventListener('mousemove', (e) => {
+            const { x, y } = getPos(e);
+            cursor.style.left = `${x}px`;
+            cursor.style.top = `${y}px`;
+        });
 
         // Drawing Events
         const start = (e) => {
@@ -1243,14 +1258,36 @@ ${item.prompt}
             currentMode = 'source-over';
             currentPenColor = color;
         }
+        updateCursorStyle();
     };
 
     // Size Handler
     window.setPenSize = (size, btn) => {
         currentLineWidth = size;
         updateSizeBtnUI();
+        updateCursorStyle();
     };
 
+    function updateCursorStyle() {
+        const cursor = document.getElementById('tool-cursor');
+        if (!cursor) return;
+
+        // Size
+        cursor.style.width = `${currentLineWidth}px`;
+        cursor.style.height = `${currentLineWidth}px`;
+
+        // Color
+        if (currentMode === 'destination-out') {
+            // Eraser: White solid
+            cursor.style.backgroundColor = 'white';
+            cursor.style.borderColor = '#999';
+        } else {
+            // Pen: Tool color
+            cursor.style.backgroundColor = currentPenColor;
+            cursor.style.borderColor = 'rgba(255,255,255,0.8)';
+        }
+    }
+
     function updateSizeBtnUI() {
         document.querySelectorAll('.size-btn').forEach(b => {
             if (parseInt(b.dataset.size) === currentLineWidth) {