From ca3d18fb2cab60075d2bfb471d7e5f4f18df296c Mon Sep 17 00:00:00 2001
From: Jan-Henrik Bruhn <jan-henrik.bruhn@offis.de>
Date: Sat, 13 Dec 2025 13:54:04 +0100
Subject: [PATCH] feature: Add center pattern button to canvas controls
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 src/components/PatternCanvas.tsx | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/components/PatternCanvas.tsx b/src/components/PatternCanvas.tsx
index e7367ed..e47b035 100644
--- a/src/components/PatternCanvas.tsx
+++ b/src/components/PatternCanvas.tsx
@@ -4,7 +4,7 @@ import { useMachineStore } from '../stores/useMachineStore';
 import { usePatternStore } from '../stores/usePatternStore';
 import { Stage, Layer, Group } from 'react-konva';
 import Konva from 'konva';
-import { PlusIcon, MinusIcon, ArrowPathIcon, LockClosedIcon, PhotoIcon } from '@heroicons/react/24/solid';
+import { PlusIcon, MinusIcon, ArrowPathIcon, LockClosedIcon, PhotoIcon, ArrowsPointingInIcon } from '@heroicons/react/24/solid';
 import type { PesPatternData } from '../utils/pystitchConverter';
 import { calculateInitialScale } from '../utils/konvaRenderers';
 import { Grid, Origin, Hoop, Stitches, PatternBounds, CurrentPosition } from './KonvaComponents';
@@ -191,6 +191,17 @@ export function PatternCanvas() {
     setStagePos({ x: containerSize.width / 2, y: containerSize.height / 2 });
   }, [containerSize]);
 
+  const handleCenterPattern = useCallback(() => {
+    if (!pesData) return;
+
+    const { bounds } = pesData;
+    const centerOffsetX = -(bounds.minX + bounds.maxX) / 2;
+    const centerOffsetY = -(bounds.minY + bounds.maxY) / 2;
+
+    setLocalPatternOffset({ x: centerOffsetX, y: centerOffsetY });
+    setPatternOffset(centerOffsetX, centerOffsetY);
+  }, [pesData, setPatternOffset]);
+
   // Pattern drag handlers
   const handlePatternDragEnd = useCallback((e: Konva.KonvaEventObject<DragEvent>) => {
     const newOffset = {
@@ -377,6 +388,9 @@ export function PatternCanvas() {
 
             {/* Zoom Controls Overlay */}
             <div className="absolute bottom-2 sm:bottom-5 right-2 sm:right-5 flex gap-1.5 sm:gap-2 items-center bg-white/95 dark:bg-gray-800/95 backdrop-blur-sm px-2 sm:px-3 py-1.5 sm:py-2 rounded-lg shadow-lg z-10">
+              <button className="w-7 h-7 sm:w-8 sm:h-8 p-1 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 rounded cursor-pointer transition-all flex items-center justify-center hover:bg-blue-600 hover:text-white hover:border-blue-600 dark:hover:border-blue-600 hover:shadow-md hover:shadow-blue-600/30 disabled:opacity-50 disabled:cursor-not-allowed" onClick={handleCenterPattern} disabled={!pesData || patternUploaded || isUploading} title="Center Pattern in Hoop">
+                <ArrowsPointingInIcon className="w-4 h-4 sm:w-5 sm:h-5 dark:text-gray-200" />
+              </button>
               <button className="w-7 h-7 sm:w-8 sm:h-8 p-1 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 rounded cursor-pointer transition-all flex items-center justify-center hover:bg-blue-600 hover:text-white hover:border-blue-600 dark:hover:border-blue-600 hover:shadow-md hover:shadow-blue-600/30 disabled:opacity-50 disabled:cursor-not-allowed" onClick={handleZoomIn} title="Zoom In">
                 <PlusIcon className="w-4 h-4 sm:w-5 sm:h-5 dark:text-gray-200" />
               </button>