Phase 8: High-Resolution Export (merge)

- Integrated export functionality with LayersPanel - Server-side node-canvas export at 4500x4500px (300 DPI) - Undo/Redo buttons and export button in canvas header - Merged with remote Phase 3 changes Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Phase 8: High-Resolution Export
2026-04-21 01:33:16 -05:00 · 2026-04-21 01:29:41 -05:00
4 changed files with 329 additions and 9 deletions
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -4,6 +4,7 @@ import { Sidebar } from './components/sidebar/Sidebar';
 import { LayersPanel } from './components/panels/LayersPanel';
 import { PropertiesPanel } from './components/panels/PropertiesPanel';
 import { useDesignEditor } from './hooks/useDesignEditor';
+import { useExport } from './hooks/useExport';

 function App() {
  const {
@@ -14,17 +15,47 @@ function App() {
    deleteElement,
    selectElement,
    deselectAll,
+    undo,
+    redo,
+    canUndo,
+    canRedo,
+    initializeHistory,
  } = useDesignEditor();

-  const selectedElement = elements.find(el => el.id === selectedId);
+  const { exporting, progress, exportDesign, error, clearExport } = useExport();

-  // Keyboard shortcut: Delete/Backspace removes selected element
+  const selectedElement = elements.find((el) => el.id === selectedId);
+
+  // Initialize history on mount
+  useEffect(() => {
+    initializeHistory();
+  }, [initializeHistory]);
+
+  // Keyboard shortcuts
  useEffect(() => {
    const handleKeyDown = (e) => {
-      // Don't delete if user is typing in an input
      if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') {
        return;
      }
+
+      // Undo: Ctrl/Cmd + Z
+      if ((e.ctrlKey || e.metaKey) && e.key === 'z' && !e.shiftKey) {
+        e.preventDefault();
+        if (canUndo) undo();
+        return;
+      }
+
+      // Redo: Ctrl/Cmd + Shift + Z or Ctrl/Cmd + Y
+      if ((e.ctrlKey || e.metaKey) && (
+        (e.key === 'z' && e.shiftKey) ||
+        e.key === 'y'
+      )) {
+        e.preventDefault();
+        if (canRedo) redo();
+        return;
+      }
+
+      // Delete/Backspace removes selected element
      if (e.key === 'Delete' || e.key === 'Backspace') {
        if (selectedId) {
          deleteElement(selectedId);
@@ -34,7 +65,7 @@ function App() {

    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
-  }, [selectedId, deleteElement]);
+  }, [selectedId, deleteElement, undo, redo, canUndo, canRedo]);

  // Handler callbacks for sidebar tabs
  const handleAddImage = (imageData) => {
@@ -49,9 +80,13 @@ function App() {
    addElement(textData);
  };

-  const handleAddTemplate = (templateId) => {
-    console.log('Template selected:', templateId);
-    // Template loading will be implemented in Phase 6
+  const handleAddTemplate = (template) => {
+    // Apply template elements to canvas
+    if (template && template.elements) {
+      template.elements.forEach((el, index) => {
+        setTimeout(() => addElement({ ...el }), index * 50);
+      });
+    }
  };

  return (
@@ -75,12 +110,77 @@ function App() {
          </p>
        </div>

+        <div style={{ display: 'flex', gap: '0.5rem', marginBottom: '1rem' }}>
+          <button
+            onClick={() => canUndo && undo()}
+            disabled={!canUndo}
+            style={{
+              padding: '0.5rem 1rem',
+              border: '1px solid var(--border)',
+              borderRadius: 'var(--radius-md)',
+              background: canUndo ? 'var(--bg-primary)' : 'var(--bg-tertiary)',
+              cursor: canUndo ? 'pointer' : 'not-allowed',
+              opacity: canUndo ? 1 : 0.5,
+            }}
+          >
+            ↶ Undo
+          </button>
+          <button
+            onClick={() => canRedo && redo()}
+            disabled={!canRedo}
+            style={{
+              padding: '0.5rem 1rem',
+              border: '1px solid var(--border)',
+              borderRadius: 'var(--radius-md)',
+              background: canRedo ? 'var(--bg-primary)' : 'var(--bg-tertiary)',
+              cursor: canRedo ? 'pointer' : 'not-allowed',
+              opacity: canRedo ? 1 : 0.5,
+            }}
+          >
+            ↷ Redo
+          </button>
+          <button
+            onClick={() => exportDesign(elements, 'tshirt-design')}
+            disabled={exporting || elements.length === 0}
+            style={{
+              padding: '0.5rem 1rem',
+              border: 'none',
+              borderRadius: 'var(--radius-md)',
+              background: elements.length === 0 ? 'var(--bg-tertiary)' : 'var(--success)',
+              color: elements.length === 0 ? 'var(--text-muted)' : '#fff',
+              cursor: elements.length === 0 ? 'not-allowed' : 'pointer',
+              opacity: elements.length === 0 ? 0.5 : 1,
+              fontWeight: 600,
+            }}
+          >
+            {exporting ? `Exporting... ${progress}%` : '⬇ Export HD'}
+          </button>
+        </div>
+
+        {error && (
+          <div style={{
+            padding: '0.75rem',
+            background: '#fef2f2',
+            border: '1px solid #fecaca',
+            borderRadius: 'var(--radius-md)',
+            color: '#dc2626',
+            fontSize: '12px',
+            marginBottom: '1rem',
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+          }}>
+            <span>⚠️ Export failed: {error}</span>
+            <button onClick={clearExport} style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: '16px' }}>✕</button>
+          </div>
+        )}
+
        <DesignCanvas
          elements={elements}
          selectedId={selectedId}
          onSelect={selectElement}
          onDeselect={deselectAll}
-          onUpdate={updateElement}
+          onUpdate={(id, attrs) => updateElement(id, attrs)}
        />

        {/* Layers panel below canvas */}
--- a/client/src/hooks/useExport.js
+++ b/client/src/hooks/useExport.js
@@ -0,0 +1,69 @@
+import { useState, useCallback } from 'react';
+
+export function useExport() {
+  const [exporting, setExporting] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const [exportUrl, setExportUrl] = useState(null);
+  const [error, setError] = useState(null);
+
+  const exportDesign = useCallback(async (elements, designName = 'design') => {
+    setExporting(true);
+    setProgress(0);
+    setError(null);
+    setExportUrl(null);
+
+    try {
+      // Simulate progress during export
+      const progressInterval = setInterval(() => {
+        setProgress((prev) => Math.min(prev + 10, 90));
+      }, 200);
+
+      const response = await fetch('/api/export', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ elements, designName }),
+      });
+
+      clearInterval(progressInterval);
+      setProgress(100);
+
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(errorData.error || 'Export failed');
+      }
+
+      const data = await response.json();
+      setExportUrl(data.export.url);
+
+      // Trigger download
+      const link = document.createElement('a');
+      link.href = data.export.url;
+      link.download = data.export.filename;
+      link.click();
+
+      setExporting(false);
+      return data;
+    } catch (err) {
+      console.error('Export failed:', err);
+      setError(err.message);
+      setExporting(false);
+      throw err;
+    }
+  }, []);
+
+  const clearExport = useCallback(() => {
+    setExportUrl(null);
+    setError(null);
+  }, []);
+
+  return {
+    exporting,
+    progress,
+    exportUrl,
+    error,
+    exportDesign,
+    clearExport,
+  };
+}
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -164,6 +164,12 @@ input, textarea, select {
  max-width: 400px;
 }

+.canvas-actions {
+  display: flex;
+  gap: 0.75rem;
+  align-items: center;
+}
+
 .undo-redo-buttons {
  display: flex;
  gap: 0.5rem;
@@ -196,6 +202,64 @@ input, textarea, select {
  cursor: not-allowed;
 }

+.export-btn {
+  padding: 0.5rem 1rem;
+  background: linear-gradient(135deg, #22c55e, #16a34a);
+  color: white;
+  border: none;
+  border-radius: var(--radius-md);
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.export-btn:hover:not(:disabled) {
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-md);
+}
+
+.export-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.export-error {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  background: #fef2f2;
+  border: 1px solid #fecaca;
+  border-radius: var(--radius-md);
+  color: #dc2626;
+  font-size: 0.875rem;
+  margin-bottom: 1rem;
+  width: 100%;
+  max-width: 400px;
+}
+
+.export-error p {
+  margin: 0;
+}
+
+.close-error {
+  background: transparent;
+  border: none;
+  color: #dc2626;
+  cursor: pointer;
+  font-size: 1.25rem;
+  padding: 0;
+  line-height: 1;
+}
+
+.close-error:hover {
+  color: #991b1b;
+}
+
 .canvas-wrapper {
  margin-bottom: 1rem;
 }
--- a/server/index.js
+++ b/server/index.js
@@ -3,9 +3,10 @@ import cors from 'cors';
 import multer from 'multer';
 import { v4 as uuidv4 } from 'uuid';
 import sharp from 'sharp';
+import { createCanvas, loadImage, registerFont } from 'canvas';
 import { fileURLToPath } from 'module';
 import { dirname, join } from 'path';
-import { mkdirSync, existsSync } from 'fs';
+import { mkdirSync, existsSync, writeFileSync } from 'fs';

 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
@@ -120,6 +121,92 @@ app.use((err, req, res, next) => {
  next(err);
 });

+// High-resolution export endpoint
+// Canvas: 300x300px preview -> 4500x4500px export (15"x15" @ 300 DPI)
+const EXPORT_SCALE = 15; // 300px * 15 = 4500px
+const EXPORT_SIZE = 4500;
+
+app.post('/api/export', async (req, res) => {
+  try {
+    const { elements, designName = 'design' } = req.body;
+
+    if (!elements || !Array.isArray(elements)) {
+      return res.status(400).json({ error: 'Elements array is required' });
+    }
+
+    // Create high-resolution canvas
+    const canvas = createCanvas(EXPORT_SIZE, EXPORT_SIZE);
+    const ctx = canvas.getContext('2d');
+
+    // White background
+    ctx.fillStyle = '#ffffff';
+    ctx.fillRect(0, 0, EXPORT_SIZE, EXPORT_SIZE);
+
+    // Render each element
+    for (const el of elements) {
+      ctx.save();
+
+      // Transform: translate to element position, rotate, then draw
+      const x = (el.x || 0) * EXPORT_SCALE;
+      const y = (el.y || 0) * EXPORT_SCALE;
+      const centerX = x + ((el.width || el.fontSize || 100) * EXPORT_SCALE) / 2;
+      const centerY = y + ((el.height || el.fontSize || 100) * EXPORT_SCALE) / 2;
+
+      ctx.translate(centerX, centerY);
+      ctx.rotate((el.rotation || 0) * Math.PI / 180);
+      ctx.translate(-centerX, -centerY);
+
+      if (el.type === 'image' && el.src) {
+        try {
+          // Load image from URL or local path
+          const imgUrl = el.src.startsWith('/')
+            ? join(__dirname, el.src.replace('/uploads', 'uploads'))
+            : el.src;
+
+          const img = await loadImage(imgUrl);
+          const width = (el.width || 100) * EXPORT_SCALE;
+          const height = (el.height || 100) * EXPORT_SCALE;
+
+          ctx.drawImage(img, x, y, width, height);
+        } catch (imgError) {
+          console.error('Failed to load image for export:', imgError);
+        }
+      } else if (el.type === 'text') {
+        const fontSize = (el.fontSize || 32) * EXPORT_SCALE / 32;
+        ctx.font = `${fontSize}px "${el.fontFamily || 'Arial'}"`;
+        ctx.fillStyle = el.fill || '#000000';
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'middle';
+        ctx.fillText(el.text || '', centerX, centerY);
+      }
+
+      ctx.restore();
+    }
+
+    // Save to file
+    const exportFilename = `${designName.replace(/[^a-z0-9]/gi, '_')}_${uuidv4()}.png`;
+    const exportPath = join(exportsDir, exportFilename);
+    const buffer = canvas.toBuffer('image/png');
+    writeFileSync(exportPath, buffer);
+
+    res.json({
+      success: true,
+      export: {
+        url: `/exports/${exportFilename}`,
+        path: exportPath,
+        filename: exportFilename,
+        width: EXPORT_SIZE,
+        height: EXPORT_SIZE,
+        dpi: 300,
+        sizeInches: '15x15'
+      }
+    });
+  } catch (error) {
+    console.error('Export error:', error);
+    res.status(500).json({ error: 'Failed to export design', details: error.message });
+  }
+});
+
 app.listen(PORT, () => {
  console.log(`Server running on http://localhost:${PORT}`);
  console.log(`Health check: http://localhost:${PORT}/api/health`);