LAYOUT_EXPORT_GUIDE.md

# Layout Export Guide

This guide shows you how to use the browser console to capture your canvas objects and convert them into layout definitions for `layouts.ts`.

## Quick Start

1. **Design your layout** in the canvas by adding objects (text, images, Huggys, rectangles)
2. **Position and style** everything exactly how you want it
3. **Open browser console** (F12 or Ctrl+Shift+I)
4. **Run export command** to get the layout code

## Console Commands

When the app loads, a global `exportCanvas` object is available with the following methods:

### 1. View All Objects

```javascript
exportCanvas.log()
```

This will display:
- Total object count
- Object types summary
- Detailed view of each object with properties
- Ready-to-copy layout definition code

**Example output:**
```
📐 Canvas Objects Export
Total objects: 4
Object types: text, image, image, rect
🔍 Individual Objects
  1. TEXT: title-text
     Position: {x: 550, y: 81.58}
     Size: {width: 852, height: 140}
     ...
```

### 2. Export as Layout Definition

```javascript
exportCanvas.asLayout('myNewLayout', 'My New Layout', '/assets/layouts/myNewLayout_thumbnail.png')
```

**Parameters:**
- `id`: Unique layout identifier (camelCase, e.g., 'myNewLayout')
- `name`: Display name shown in UI (e.g., 'My New Layout')
- `thumbnail`: Path to layout thumbnail image

**Output:**
Ready-to-paste TypeScript code for `layouts.ts`:

```typescript
myNewLayout: {
  id: 'myNewLayout',
  name: 'My New Layout',
  thumbnail: '/assets/layouts/myNewLayout_thumbnail.png',
  objects: [
    {
      id: 'title-text',
      type: 'text',
      x: 550,
      y: 81.58,
      width: 852,
      height: 140,
      rotation: 0,
      zIndex: 1,
      text: 'Pretty Short Title',
      fontSize: 111.43,
      fontFamily: 'Inter',
      fill: '#8a97ba',
      bold: true,
      italic: false,
      align: 'center',
      isFixedSize: true,
      offsetX: 426,
    },
    // ... more objects
  ],
},
```

### 3. Export as JSON

```javascript
exportCanvas.asJSON()
```

Exports objects as JSON format (useful for debugging or external processing).

### 4. Get Raw Objects Array

```javascript
exportCanvas.objects()
```

Returns the raw JavaScript objects array.

### 5. Get Canvas Info

```javascript
exportCanvas.info()
```

Shows current canvas state:
```javascript
{
  objectCount: 4,
  canvasSize: 'x',
  dimensions: { width: 1200, height: 675 },
  bgColor: 'light',
  selectedIds: ['title-text']
}
```

## Step-by-Step: Creating a New Layout

### Step 1: Design Your Layout

1. Open the app at `http://localhost:3001`
2. Add objects to canvas (text, images, Huggys)
3. Position, rotate, and style them as needed
4. Make note of which canvas size you're using (X, LinkedIn, or HF)

### Step 2: Export Object Data

Open browser console and run:

```javascript
exportCanvas.log()
```

Review the output to verify all objects are correct.

### Step 3: Generate Layout Code

Run:

```javascript
exportCanvas.asLayout('myLayout', 'My Layout', '/assets/layouts/myLayout_thumbnail.png')
```

**Copy the output** from the console.

### Step 4: Create Layout Thumbnail

1. Export your layout as PNG using the Export button
2. Save it to `public/assets/layouts/myLayout_thumbnail.png`
3. Or take a screenshot and crop it to ~200x100px

### Step 5: Add to layouts.ts

1. Open `src/data/layouts.ts`
2. Find the `LAYOUTS` object
3. Paste your copied layout code
4. Verify the thumbnail path matches your file

**Example:**

```typescript
export const LAYOUTS: Record<string, Layout> = {
  // ... existing layouts

  myLayout: {
    id: 'myLayout',
    name: 'My Layout',
    thumbnail: '/assets/layouts/myLayout_thumbnail.png',
    objects: [
      // ... your objects
    ],
  },
};
```

### Step 6: Update Layout Selector

1. Open `src/components/Sidebar/LayoutSelector.tsx`
2. Add your new layout to the grid:

```tsx
<button
  onClick={() => onSelectLayout('myLayout')}
  className="hover:bg-[#f0f2f4] transition-colors duration-150"
>
  <img
    src="/assets/layouts/myLayout_thumbnail.png"
    alt="My Layout"
    className="w-full h-full object-cover"
  />
</button>
```

### Step 7: Test Your Layout

1. Refresh the app
2. Click Layout button in sidebar
3. Select your new layout
4. Verify all objects load correctly

## Tips & Best Practices

### Object IDs
- Use descriptive IDs: `'title-text'`, `'logo-image'`, `'background-rect'`
- Avoid generic IDs like `'text-1'`, `'image-2'`
- IDs help with debugging and maintenance

### Text Objects
- Always set `isFixedSize: true` for layout text objects
- Use `offsetX` and `offsetY` for proper centering
- Set explicit `width` and `height` to prevent clipping

### Image Objects
- Save images to `public/assets/layouts/`
- Use relative paths: `/assets/layouts/image.png`
- Consider file size (optimize images before adding)

### Z-Index
- Start from 1 (0 is reserved for background)
- Higher z-index = front layer
- Check stacking order visually before exporting

### Rotation
- Rotation is in degrees (0-360)
- 0° = no rotation, 90° = vertical, 180° = upside down
- Be careful with rotated text (may need larger bounding box)

### Alignment
- Text alignment: `'left'`, `'center'`, `'right'`
- For centered text, set `align: 'center'` and `offsetX: width/2`
- For centered positioning: `x = canvasWidth/2`, `offsetX = width/2`

## Troubleshooting

### Objects Not Showing in Export
**Problem:** Some objects missing from `exportCanvas.log()` output.

**Solution:** Make sure all objects are on canvas (not in editing mode). Refresh the page and try again.

### Text Clipping After Loading Layout
**Problem:** Text gets cut off at edges.

**Solution:** Increase `width` and `height` of text objects. Use `exportCanvas.log()` to check actual dimensions.

### Wrong Positioning After Loading
**Problem:** Objects appear in wrong positions.

**Solution:** Check if you're using the correct canvas size. Layouts are canvas-size specific.

### offsetX/offsetY Confusion
**Problem:** Text or images positioned incorrectly.

**Solution:**
- `offsetX` shifts the object LEFT (positive value = more left)
- `offsetY` shifts the object UP (positive value = more up)
- For center alignment: `offsetX = width/2`, `offsetY = height/2`

## Advanced: Modifying Object Data

After exporting, you can manually adjust values:

```typescript
// Original export
{
  x: 123.456,
  y: 234.567,
  // ...
}

// Rounded for cleaner code
{
  x: 123,
  y: 235,
  // ...
}
```

### Common Adjustments
- Round positions to integers for simplicity
- Adjust text dimensions if clipping occurs
- Fine-tune rotation angles
- Update fill colors for consistency
- Add/remove `offsetX`/`offsetY` as needed

## Example Workflow

```javascript
// 1. Check current canvas state
exportCanvas.info()

// 2. View all objects in detail
exportCanvas.log()

// 3. Export as layout definition
exportCanvas.asLayout('coolLayout', 'Cool Layout', '/assets/layouts/cool_thumbnail.png')

// 4. Copy output and paste into layouts.ts

// 5. Test and iterate!
```

## Quick Reference

| Command | Purpose |
|---------|---------|
| `exportCanvas.log()` | View all objects with details |
| `exportCanvas.asLayout(id, name, thumbnail)` | Export as layout code |
| `exportCanvas.asJSON()` | Export as JSON |
| `exportCanvas.objects()` | Get raw objects array |
| `exportCanvas.info()` | Show canvas state |

---

**Need help?** Check the existing layouts in `src/data/layouts.ts` for examples.