refactor: Remove offsetX/offsetY from text objects for more reliable positioning

Breaking change: Simplifies text positioning by removing offsetX/offsetY properties
and relying on Konva's built-in alignment instead.

Changes:
- Remove offsetX and offsetY from TextObject type definition
- Update all layouts to use proper x/y positioning without offsets
- Remove offset handling from Canvas.tsx (group snapping, single snapping, transforms, textarea positioning)
- Remove offset rendering from TextEditable.tsx
- Update layoutExporter.ts to export fontWeight instead of offsets

Benefits:
- Eliminates complex offset scaling during transformations
- Reduces multiple sources of truth for positioning
- Makes text transformations more predictable and reliable
- Simplifies codebase maintenance

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

Co-Authored-By: Claude <[email protected]>

src/components/Canvas/Canvas.tsx

@@ -322,11 +322,9 @@ export default function Canvas({
             const nodeHeight = selectedNode.height();
             const nodeX = selectedNode.x();
             const nodeY = selectedNode.y();
-            const offsetX = (selectedNode as any).attrs.offsetX || 0;
-            const offsetY = (selectedNode as any).attrs.offsetY || 0;
 
-            const left = nodeX - offsetX;
-            const top = nodeY - offsetY;
+            const left = nodeX;
+            const top = nodeY;
             const right = left + nodeWidth;
             const bottom = top + nodeHeight;
 
@@ -391,11 +389,9 @@ export default function Canvas({
         const nodeX = node.x();
         const nodeY = node.y();
 
-        // Calculate object center position (accounting for offsetX/offsetY if present)
-        const offsetX = (node as any).attrs.offsetX || 0;
-        const offsetY = (node as any).attrs.offsetY || 0;
-        const objectCenterX = nodeX + (nodeWidth / 2) - offsetX;
-        const objectCenterY = nodeY + (nodeHeight / 2) - offsetY;
+        // Calculate object center position
+        const objectCenterX = nodeX + (nodeWidth / 2);
+        const objectCenterY = nodeY + (nodeHeight / 2);
 
         let snappedX = nodeX;
         let snappedY = nodeY;
@@ -413,14 +409,14 @@ export default function Canvas({
         // Check horizontal center snapping
         // If Shift is pressed and moving vertically, don't snap horizontally
         if (Math.abs(objectCenterX - centerX) < snapThreshold && (!shiftPressed || isHorizontalMovement)) {
-          snappedX = centerX - (nodeWidth / 2) + offsetX;
+          snappedX = centerX - (nodeWidth / 2);
           showVerticalGuide = true;
         }
 
         // Check vertical center snapping
         // If Shift is pressed and moving horizontally, don't snap vertically
         if (Math.abs(objectCenterY - centerY) < snapThreshold && (!shiftPressed || !isHorizontalMovement)) {
-          snappedY = centerY - (nodeHeight / 2) + offsetY;
+          snappedY = centerY - (nodeHeight / 2);
           showHorizontalGuide = true;
         }
 
@@ -516,21 +512,15 @@ export default function Canvas({
                 rotation: objNode.rotation()
               };
 
-              // Handle text objects: scale fontSize and preserve offsets
+              // Handle text objects: scale fontSize
               if (obj.type === 'text') {
                 const scaleFactor = Math.min(nodeScaleX, nodeScaleY);
                 const newFontSize = Math.max(10, obj.fontSize * scaleFactor);
 
-                // Scale offsetX and offsetY if they exist
-                const scaledOffsetX = obj.offsetX ? obj.offsetX * nodeScaleX : undefined;
-                const scaledOffsetY = obj.offsetY ? obj.offsetY * nodeScaleY : undefined;
-
                 return {
                   ...updated,
                   fontSize: newFontSize,
-                  isFixedSize: true,
-                  offsetX: scaledOffsetX,
-                  offsetY: scaledOffsetY
+                  isFixedSize: true
                 };
               }
               return updated;
@@ -564,16 +554,10 @@ export default function Canvas({
             const scaleFactor = Math.min(scaleX, scaleY);
             const newFontSize = Math.max(10, obj.fontSize * scaleFactor);
 
-            // Scale offsetX and offsetY if they exist
-            const scaledOffsetX = obj.offsetX ? obj.offsetX * scaleX : undefined;
-            const scaledOffsetY = obj.offsetY ? obj.offsetY * scaleY : undefined;
-
             return {
               ...updated,
               fontSize: newFontSize,
-              isFixedSize: true,
-              offsetX: scaledOffsetX,
-              offsetY: scaledOffsetY
+              isFixedSize: true
             };
           }
           return updated;
@@ -695,13 +679,9 @@ export default function Canvas({
     const container = stage.container();
     const containerRect = container.getBoundingClientRect();
 
-    // Account for offsetX and offsetY when positioning textarea
-    const offsetX = editingText.offsetX || 0;
-    const offsetY = editingText.offsetY || 0;
-
     return {
-      top: containerRect.top + editingText.y - offsetY,
-      left: containerRect.left + editingText.x - offsetX
+      top: containerRect.top + editingText.y,
+      left: containerRect.left + editingText.x
     };
   };
 

src/components/Canvas/TextEditable.tsx

@@ -125,8 +125,6 @@ export default function TextEditable({
       y={object.y}
       width={object.width}
       height={object.height}
-      offsetX={object.offsetX || 0}
-      offsetY={object.offsetY || 0}
       text={object.text}
       fontSize={displayFontSize}
       fontFamily={object.fontFamily}

src/data/layouts.ts

@@ -52,7 +52,7 @@ export const LAYOUTS: Record<string, Layout> = {
       {
         id: 'title-text',
         type: 'text',
-        x: 550,
+        x: 124,
         y: 81.58,
         width: 945.2583618164062,
         height: 140,
@@ -65,7 +65,6 @@ export const LAYOUTS: Record<string, Layout> = {
         bold: true,
         italic: false,
         align: 'center',
-        offsetX: 426,
       },
       {
         id: 'logo-placeholder',
@@ -131,7 +130,7 @@ export const LAYOUTS: Record<string, Layout> = {
       {
         id: 'description-text',
         type: 'text',
-        x: 600,
+        x: 92.5,
         y: 503.48,
         width: 1015,
         height: 107,
@@ -145,7 +144,6 @@ export const LAYOUTS: Record<string, Layout> = {
         italic: false,
         align: 'center',
         isFixedSize: true,
-        offsetX: 507.5,
       },
       {
         id: 'singing-huggy',
@@ -181,7 +179,7 @@ export const LAYOUTS: Record<string, Layout> = {
       {
         id: 'title-text',
         type: 'text',
-        x: 559.4214782714844,
+        x: 237.9214782714844,
         y: 329.67,
         width: 724.1570434570312,
         height: 115.93,
@@ -195,13 +193,12 @@ export const LAYOUTS: Record<string, Layout> = {
         italic: false,
         align: 'center',
         isFixedSize: true,
-        offsetX: 321.5,
         fontWeight: 'black',
       },
       {
         id: 'subtitle-text',
         type: 'text',
-        x: 590.1729888916016,
+        x: 379.6729888916016,
         y: 441.535,
         width: 440.6540222167969,
         height: 63.93,
@@ -215,7 +212,6 @@ export const LAYOUTS: Record<string, Layout> = {
         italic: false,
         align: 'center',
         isFixedSize: true,
-        offsetX: 210.5,
       },
     ],
   },

src/types/canvas.types.ts

@@ -45,8 +45,6 @@ export interface TextObject extends CanvasObjectBase {
   bold: boolean;
   italic: boolean;
   align?: 'left' | 'center' | 'right';
-  offsetX?: number; // Horizontal offset for centering or custom positioning
-  offsetY?: number; // Vertical offset for centering or custom positioning
   isFixedSize?: boolean; // Track if text box size is fixed (Stage 2) or growing (Stage 1)
   isEditing?: boolean; // Track if text is currently being edited
   fontWeight?: 'normal' | 'bold' | 'black'; // Track font weight variation (normal = 400, bold = 700, black = 900)

src/utils/layoutExporter.ts

@@ -39,8 +39,7 @@ export function exportCanvasAsLayout(
       lines.push(`${indent}  italic: ${obj.italic},`);
       if (obj.align) lines.push(`${indent}  align: '${obj.align}',`);
       if (obj.isFixedSize) lines.push(`${indent}  isFixedSize: ${obj.isFixedSize},`);
-      if (obj.offsetX !== undefined) lines.push(`${indent}  offsetX: ${obj.offsetX},`);
-      if (obj.offsetY !== undefined) lines.push(`${indent}  offsetY: ${obj.offsetY},`);
+      if (obj.fontWeight && obj.fontWeight !== 'normal') lines.push(`${indent}  fontWeight: '${obj.fontWeight}',`);
     } else if (obj.type === 'image' || obj.type === 'huggy') {
       lines.push(`${indent}  src: '${obj.src}',`);
       lines.push(`${indent}  name: '${obj.name || 'Untitled'}',`);
@@ -88,10 +87,7 @@ export function logCanvasObjects(objects: CanvasObject[]): void {
       console.log('Text:', obj.text);
       console.log('Font:', `${obj.fontSize}px ${obj.fontFamily}`);
       console.log('Color:', obj.fill);
-      console.log('Styles:', { bold: obj.bold, italic: obj.italic });
-      if (obj.offsetX !== undefined || obj.offsetY !== undefined) {
-        console.log('Offset:', { offsetX: obj.offsetX, offsetY: obj.offsetY });
-      }
+      console.log('Styles:', { bold: obj.bold, italic: obj.italic, fontWeight: obj.fontWeight });
     } else if (obj.type === 'image' || obj.type === 'huggy') {
       console.log('Source:', obj.src);
       console.log('Name:', obj.name);