Upload 8 files

src/views/InstructorView.js

@@ -140,18 +140,36 @@ export async function renderInstructorView() {
                     👀 隱藏姓名
                  </button>
                  <!-- Pen Tools -->
-                 <button class="annotation-tool p-2 rounded-full hover:bg-gray-700 transition-colors ring-2 ring-transparent focus:outline-none" data-color="#ef4444" onclick="setPenColor('#ef4444', this)">
+                 <button class="annotation-tool ring-white p-2 rounded-full hover:bg-gray-700 transition-colors ring-2 focus:outline-none" data-tool="pen" data-color="#ef4444" onclick="setPenTool('pen', '#ef4444', this)">
                     <div class="w-4 h-4 rounded-full bg-red-500"></div>
                  </button>
-                 <button class="annotation-tool p-2 rounded-full hover:bg-gray-700 transition-colors ring-2 ring-transparent focus:outline-none" data-color="#3b82f6" onclick="setPenColor('#3b82f6', this)">
+                 <button class="annotation-tool p-2 rounded-full hover:bg-gray-700 transition-colors ring-2 ring-transparent focus:outline-none" data-tool="pen" data-color="#3b82f6" onclick="setPenTool('pen', '#3b82f6', this)">
                     <div class="w-4 h-4 rounded-full bg-blue-500"></div>
                  </button>
-                 <button class="annotation-tool p-2 rounded-full hover:bg-gray-700 transition-colors ring-2 ring-transparent focus:outline-none" data-color="#22c55e" onclick="setPenColor('#eab308', this)">
+                 <button class="annotation-tool p-2 rounded-full hover:bg-gray-700 transition-colors ring-2 ring-transparent focus:outline-none" data-tool="pen" data-color="#eab308" onclick="setPenTool('pen', '#eab308', this)">
                     <div class="w-4 h-4 rounded-full bg-yellow-500"></div>
                  </button>
+                 
                  <div class="w-px h-6 bg-gray-600 mx-2"></div>
+                 
+                 <!-- Eraser -->
+                 <button class="annotation-tool p-2 rounded-full hover:bg-gray-700 transition-colors ring-2 ring-transparent focus:outline-none" data-tool="eraser" onclick="setPenTool('eraser', null, this)" title="橡皮擦">
+                    <span class="text-sm">🧽</span>
+                 </button>
+
+                 <div class="w-px h-6 bg-gray-600 mx-2"></div>
+
+                 <!-- Size Selector -->
+                 <div class="flex items-center space-x-1 bg-gray-800 rounded p-0.5">
+                    <button class="size-btn px-2 py-0.5 text-xs text-gray-400 hover:text-white rounded hover:bg-gray-700" onclick="setPenSize(3, this)" data-size="3">S</button>
+                    <button class="size-btn px-2 py-0.5 text-xs text-gray-400 hover:text-white rounded hover:bg-gray-700" onclick="setPenSize(8, this)" data-size="8">M</button>
+                    <button class="size-btn px-2 py-0.5 text-xs text-gray-400 hover:text-white rounded hover:bg-gray-700" onclick="setPenSize(16, this)" data-size="16">L</button>
+                 </div>
+
+                 <div class="w-px h-6 bg-gray-600 mx-2"></div>
+                 
                  <button onclick="clearCanvas()" class="text-gray-400 hover:text-white text-sm font-bold px-2">
-                    清除 (Clear)
+                    清除
                  </button>
             </div>
 
@@ -1135,10 +1153,12 @@ ${item.prompt}
         clearCanvas();
     };
 
-    // --- Phase 3: Annotation Tools ---
+    // --- Phase 3 & 6: Annotation Tools ---
     let canvas, ctx;
     let isDrawing = false;
     let currentPenColor = '#ef4444'; // Red default
+    let currentLineWidth = 3;
+    let currentMode = 'source-over'; // 'source-over' (Pen) or 'destination-out' (Eraser)
 
     window.setupCanvas = () => {
         canvas = document.getElementById('annotation-canvas');
@@ -1154,15 +1174,25 @@ ${item.prompt}
             ctx.lineCap = 'round';
             ctx.lineJoin = 'round';
             ctx.strokeStyle = currentPenColor;
-            ctx.lineWidth = 3;
+            ctx.lineWidth = currentLineWidth;
+            ctx.globalCompositeOperation = currentMode;
         };
         resize();
         window.addEventListener('resize', resize);
 
+        // Init Size UI
+        updateSizeBtnUI();
+
         // Drawing Events
         const start = (e) => {
             isDrawing = true;
             ctx.beginPath();
+
+            // Re-apply settings (state might change)
+            ctx.globalCompositeOperation = currentMode;
+            ctx.strokeStyle = currentPenColor;
+            ctx.lineWidth = currentLineWidth;
+
             const { x, y } = getPos(e);
             ctx.moveTo(x, y);
         };
@@ -1197,10 +1227,8 @@ ${item.prompt}
         };
     }
 
-    window.setPenColor = (color, btn) => {
-        currentPenColor = color;
-        if (ctx) ctx.strokeStyle = color;
-
+    // Unified Tool Handler
+    window.setPenTool = (tool, color, btn) => {
         // UI Update
         document.querySelectorAll('.annotation-tool').forEach(b => {
             b.classList.remove('ring-white');
@@ -1208,8 +1236,33 @@ ${item.prompt}
         });
         btn.classList.remove('ring-transparent');
         btn.classList.add('ring-white');
+
+        if (tool === 'eraser') {
+            currentMode = 'destination-out';
+        } else {
+            currentMode = 'source-over';
+            currentPenColor = color;
+        }
+    };
+
+    // Size Handler
+    window.setPenSize = (size, btn) => {
+        currentLineWidth = size;
+        updateSizeBtnUI();
     };
 
+    function updateSizeBtnUI() {
+        document.querySelectorAll('.size-btn').forEach(b => {
+            if (parseInt(b.dataset.size) === currentLineWidth) {
+                b.classList.add('bg-gray-600', 'text-white');
+                b.classList.remove('text-gray-400', 'hover:bg-gray-700');
+            } else {
+                b.classList.remove('bg-gray-600', 'text-white');
+                b.classList.add('text-gray-400', 'hover:bg-gray-700');
+            }
+        });
+    }
+
     window.clearCanvas = () => {
         if (canvas && ctx) {
             ctx.clearRect(0, 0, canvas.width, canvas.height);