fix: LOW issues #37-#50 — remove mock data, type auth functions, ImageElement interface, remove dead code, implement zoom/format/search, cleanup

frontend/src/components/CanvasArea.tsx

@@ -15,7 +15,7 @@ const CanvasArea: React.FC<CanvasAreaProps> = ({
   cursorPos, viewMode, onViewChange, gridEnabled, orthoEnabled, snapEnabled,
   polarEnabled,
   activeTool, elements, layers, activeLayerId, onElementCreated, onElementsDeleted, onElementsModified, onCursorMoved, onToolStateChanged,
-  onToggleGrid, onToggleOrtho, onToggleSnap, onZoomIn, onZoomOut, onZoomFit, onTextEdit, onCommandTrigger, blocks, onBlockDrop, onSelectionChange, selectedTemplate, bgConfig, remoteCursors,
+  onToggleGrid, onToggleOrtho, onToggleSnap, onZoomIn, onZoomOut, onZoomFit, onTextEdit, onCommandTrigger, blocks, onBlockDrop, onSelectionChange, selectedTemplate, bgConfig, remoteCursors, zoomCommand,
 }) => {
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const zoomPanRef = useRef<ZoomPanController | null>(null);
@@ -254,6 +254,30 @@ const CanvasArea: React.FC<CanvasAreaProps> = ({
     onZoomFit();
   };
 
+  // Handle zoom commands from App (ribbon/menu actions)
+  useEffect(() => {
+    if (!zoomCommand) return;
+    const zoomPan = zoomPanRef.current;
+    const canvas = canvasRef.current;
+    if (!zoomPan || !canvas) return;
+    switch (zoomCommand) {
+      case 'in':
+        zoomPan.zoomAt(canvas.width / 2, canvas.height / 2, 1.2);
+        break;
+      case 'out':
+        zoomPan.zoomAt(canvas.width / 2, canvas.height / 2, 0.8);
+        break;
+      case 'fit':
+        zoomPan.zoomFit(elements);
+        break;
+      case '100':
+        zoomPan.reset();
+        break;
+    }
+    renderEngineRef.current?.render();
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [zoomCommand]);
+
   return (
     <section className="canvas-area" id="canvas-area" aria-label="CAD Zeichenfläche">
       <div className="canvas-coords" role="status" aria-live="polite">