This file is a merged representation of a subset of the codebase, containing specifically included files, combined into a single document by Repomix. This section contains a summary of this file. This file contains a packed representation of a subset of the repository's contents that is considered the most important context. It is designed to be easily consumable by AI systems for analysis, code review, or other automated processes. The content is organized as follows: 1. This summary section 2. Repository information 3. Directory structure 4. Repository files (if enabled) 5. Multiple file entries, each consisting of: - File path as an attribute - Full contents of the file - This file should be treated as read-only. Any changes should be made to the original repository files, not this packed version. - When processing this file, use the file path to distinguish between different files in the repository. - Be aware that this file may contain sensitive information. Handle it with the same level of security as you would the original repository. - Some files may have been excluded based on .gitignore rules and Repomix's configuration - Binary files are not included in this packed representation. Please refer to the Repository Structure section for a complete list of file paths, including binary files - Only files matching these patterns are included: src/app/editor, src/components, src/app/api - Files matching patterns in .gitignore are excluded - Files matching default ignore patterns are excluded - Files are sorted by Git change count (files with more changes are at the bottom) src/ app/ api/ [[...route]]/ route.ts editor/ page.tsx components/ datatable/ filters.tsx index.tsx pagination.tsx search-filter.tsx types.ts rich-editor/ components/ bubble-menu/ link-bubble-menu.tsx image/ image-edit-block.tsx image-edit-dialog.tsx link/ link-edit-block.tsx link-edit-popover.tsx link-popover-block.tsx section/ five.tsx four.tsx one.tsx three.tsx two.tsx measured-container.tsx shortcut-key.tsx spinner.tsx toolbar-button.tsx toolbar-section.tsx extensions/ code-block-lowlight/ code-block-lowlight.ts index.ts color/ color.ts index.ts file-handler/ index.ts horizontal-rule/ horizontal-rule.ts index.ts image/ index.ts link/ index.ts link.ts reset-marks-on-enter/ index.ts reset-marks-on-enter.ts selection/ index.ts selection.ts unset-all-marks/ index.ts unset-all-marks.ts index.ts hooks/ use-container-size.ts use-minimal-tiptap.ts use-theme.ts use-throttle.ts styles/ partials/ code.css lists.css placeholder.css typography.css zoom.css index.css index.ts minimal-tiptap.tsx types.ts utils.ts skeletons/ form-skeletons.tsx table-skeleton.tsx ui/ accordion.tsx alert-dialog.tsx alert.tsx aspect-ratio.tsx avatar.tsx badge.tsx breadcrumb.tsx button.tsx calendar.tsx card.tsx carousel.tsx chart.tsx checkbox.tsx circular-progress.tsx collapsible.tsx combobox.tsx command.tsx context-menu.tsx copy-button.tsx datetime-picker.tsx delete-alert.tsx dialog.tsx drawer.tsx dropdown-menu.tsx form.tsx hover-card.tsx input-otp.tsx input.tsx label.tsx menubar.tsx multi-select.tsx navigation-menu.tsx number-input.tsx pagination.tsx password-input.tsx popover.tsx progress.tsx radio-group.tsx resizable.tsx scroll-area.tsx select.tsx separator.tsx sheet.tsx sidebar.tsx skeleton.tsx slider.tsx sonner.tsx switch.tsx table.tsx tabs.tsx tags-input.tsx testimonial-card.tsx textarea.tsx time-format.tsx toggle-group.tsx toggle.tsx tooltip.tsx analytics-tracker.tsx CanvasDateElement.tsx CanvasEditor.tsx This section contains the contents of the repository's files. import { LOCAL_MEDIA_PREFIX, LOCAL_UPLOAD_DIR } from '@/config/constants'; import aiRouter from '@/server/ai/ai-routes'; import authRouter from '@/server/auth/auth-routes'; import billingRouter from '@/server/billing/billing-routes'; import commonRouter from '@/server/common/common-routes'; import mediaRouter from '@/server/media/media-routes'; import planRouter from '@/server/plans/plan-routes'; import postRouter from '@/server/posts/post-routes'; import settingRouter from '@/server/settings/setting-routes'; import subscriptionRouter from '@/server/subscriptions/subscription-routes'; import userRouter from '@/server/users/user-routes'; import { Hono } from 'hono'; import { compress } from 'hono/compress'; import { cors } from 'hono/cors'; import { secureHeaders } from 'hono/secure-headers'; import { serveStatic } from 'hono/serve-static'; import { handle } from 'hono/vercel'; import httpStatus from 'http-status'; import path from 'path'; import APIError from '@/lib/api-error'; import { getFileByPath } from '@/lib/file'; // Create Hono app with base path /api const app = new Hono().basePath('/api'); // Enable compression, CORS, and secure headers app.use(compress()); app.use(cors()); app.use(secureHeaders()); // static files app.use( `/${LOCAL_MEDIA_PREFIX}/*`, serveStatic({ async getContent(p, c) { const fileName = p.split('/').pop(); if (!fileName) { return null; } const filePath = path.join(process.cwd(), LOCAL_UPLOAD_DIR, fileName); const file = await getFileByPath(filePath); if (!file) { return null; } c.header('Content-Type', file.mime); c.header('Cache-Control', 'public, max-age=31536000'); c.header('Content-Length', file.size.toString()); c.header('Content-Disposition', `attachment; filename="${fileName}"`); return c.body(file.data); }, }), ); // Define routes and error handling // eslint-disable-next-line @typescript-eslint/no-unused-vars const routes = app .route('/auth', authRouter) .route('/users', userRouter) .route('/settings', settingRouter) .route('/media', mediaRouter) .route('/posts', postRouter) .route('/plans', planRouter) .route('/billing', billingRouter) .route('/subscriptions', subscriptionRouter) .route('/ai', aiRouter) .route('/common', commonRouter) // Return 404 if route not found .notFound((c) => { return c.json( { message: 'Not found', code: httpStatus.NOT_FOUND, }, httpStatus.NOT_FOUND, ); }) // Handle errors .onError((err, c) => { if (err instanceof APIError) { return c.json( { message: err.message, code: err.code, }, err.code, ); } console.error(err); return c.json( { message: process.env.NODE_ENV === 'development' ? err.message : 'Internal server error', code: httpStatus.INTERNAL_SERVER_ERROR, }, httpStatus.INTERNAL_SERVER_ERROR, ); }); // Export handlers for all HTTP methods export const GET = handle(app); export const POST = handle(app); export const PUT = handle(app); export const PATCH = handle(app); export const OPTIONS = handle(app); export const DELETE = handle(app); // Type definition for routes export type ApiTypes = typeof routes; // src/app/editor/page.tsx 'use client'; import React, { useState, useEffect, useCallback, useRef } from 'react'; import { useSearchParams } from 'next/navigation'; import dynamic from 'next/dynamic'; import { Download, Type, Image as ImageIcon, Layout, Trash2, Undo2, Redo2, PlusSquare, RotateCw, ImageMinus, FlipHorizontal, FlipVertical, Layers, Square, Circle as CircleIcon, AlignCenter, AlignLeft, AlignRight, Bold, Italic, Underline, Sun, Contrast, Droplets, Sparkles, PanelLeft, X, Check, Ruler, ShoppingBag, Smartphone, Monitor } from 'lucide-react'; // Tipos inline type FilterType = 'none' | 'grayscale' | 'sepia'; type ElementType = 'product' | 'background' | 'text' | 'shape' | 'date' | 'image' | 'sticker' | null; interface TextElement { id: string; text: string; x: number; y: number; fontSize: number; fill: string; rotation: number; fontFamily: string; align: 'left' | 'center' | 'right'; opacity: number; blurRadius: number; shadowEnabled: boolean; shadowColor: string; shadowBlur: number; shadowOffsetX: number; shadowOffsetY: number; shadowOpacity: number; reflectionEnabled: boolean; flipX: number; flipY: number; filter: FilterType; textDecoration?: 'none' | 'underline' | 'line-through' | 'bold'; fontStyle?: 'normal' | 'italic'; stroke?: string; strokeWidth?: number; } interface ShapeElement { id: string; type: 'rect' | 'circle' | 'line'; x: number; y: number; width?: number; height?: number; radius?: number; fill?: string; stroke: string; strokeWidth: number; rotation: number; points?: number[]; opacity: number; blurRadius: number; shadowEnabled: boolean; shadowColor: string; shadowBlur: number; shadowOffsetX: number; shadowOffsetY: number; shadowOpacity: number; reflectionEnabled: boolean; flipX: number; flipY: number; filter: FilterType; } interface DateElement { id: string; text: string; format: string; x: number; y: number; fontSize: number; fill: string; rotation: number; fontFamily: string; opacity: number; blurRadius: number; shadowEnabled: boolean; shadowColor: string; shadowBlur: number; shadowOffsetX: number; shadowOffsetY: number; shadowOpacity: number; reflectionEnabled: boolean; flipX: number; flipY: number; filter: FilterType; } interface ImageElement { id: string; url: string; x: number; y: number; scaleX: number; scaleY: number; rotation: number; opacity: number; blurRadius: number; shadowEnabled: boolean; shadowColor: string; shadowBlur: number; shadowOffsetX: number; shadowOffsetY: number; shadowOpacity: number; reflectionEnabled: boolean; flipX: number; flipY: number; filter: FilterType; width?: number; height?: number; } interface StickerElement { id: string; type: 'PROMO' | 'OFERTA' | 'DESCUENTO' | 'NEW' | 'SALE' | 'VIP'; x: number; y: number; rotation: number; opacity: number; scaleX: number; scaleY: number; } interface CanvasState { productX: number; productY: number; productScale: number; productRotation: number; productOpacity: number; productBlurRadius: number; productShadowEnabled: boolean; productShadowColor: string; productShadowBlur: number; productShadowOffsetX: number; productShadowOffsetY: number; productShadowOpacity: number; productReflectionEnabled: boolean; productFlipX: number; productFlipY: number; productFilter: FilterType; backgroundOpacity: number; backgroundBlurRadius: number; backgroundShadowEnabled: boolean; backgroundShadowColor: string; backgroundShadowBlur: number; backgroundShadowOffsetX: number; backgroundShadowOffsetY: number; backgroundShadowOpacity: number; backgroundReflectionEnabled: boolean; backgroundFlipX: number; backgroundFlipY: number; backgroundFilter: FilterType; selectedPresetBackgroundUrl?: string; textElements: TextElement[]; shapeElements: ShapeElement[]; dateElement: DateElement | null; imageElements: ImageElement[]; stickerElements: StickerElement[]; canvasBackgroundColor: string; } interface DisplayBackground { id: string; url: string; isPremium: boolean; } // Constantes const DEFAULT_CANVAS_SIZE = 600; const MAX_HISTORY = 40; const BASE_EL = { rotation: 0, opacity: 1, blurRadius: 0, shadowEnabled: false, shadowColor: '#000000', shadowBlur: 10, shadowOffsetX: 4, shadowOffsetY: 4, shadowOpacity: 0.4, reflectionEnabled: false, flipX: 1, flipY: 1, filter: 'none' as FilterType, }; // Presets de tamaño const SIZE_PRESETS = [ { label: 'Instagram (1:1)', width: 1080, height: 1080 }, { label: 'Instagram Story', width: 1080, height: 1920 }, { label: 'Facebook Post', width: 940, height: 788 }, { label: 'Facebook Cover', width: 820, height: 312 }, { label: 'Producto (600x600)', width: 600, height: 600 }, ]; // Dynamic import const DynamicCanvasEditor = dynamic(() => import('@/components/CanvasEditor'), { ssr: false }); // Helpers function formatDate(date: Date, fmt: string): string { const opts: Intl.DateTimeFormatOptions = {}; if (fmt === 'DD/MM/YYYY') { opts.day = '2-digit'; opts.month = '2-digit'; opts.year = 'numeric'; } else if (fmt === 'MMMM DD, YYYY') { opts.month = 'long'; opts.day = 'numeric'; opts.year = 'numeric'; } else if (fmt === 'YYYY-MM-DD') { opts.year = 'numeric'; opts.month = '2-digit'; opts.day = '2-digit'; } else { opts.day = '2-digit'; opts.month = '2-digit'; opts.year = 'numeric'; } return new Intl.DateTimeFormat('es-ES', opts).format(date); } // Componentes UI const Slider: React.FC<{ label: string; value: number; min: number; max: number; step?: number; display?: string; onChange: (v: number) => void; onCommit?: () => void; }> = ({ label, value, min, max, step = 1, display, onChange, onCommit }) => (
{display ?? value}
onChange(Number(e.target.value))} onMouseUp={onCommit} onTouchEnd={onCommit} className="w-full h-1.5 rounded-full appearance-none cursor-pointer accent-blue-500 bg-gray-200" />
); const Toggle: React.FC<{ label: string; value: boolean; onChange: (v: boolean) => void }> = ({ label, value, onChange }) => (
{label}
); const SecHead: React.FC<{ title: string; icon?: React.ReactNode }> = ({ title, icon }) => (
{icon && {icon}}

{title}

); // Página Principal export default function EditorPage() { const searchParams = useSearchParams(); const initialUrl = searchParams.get('url') || ''; // Estado Canvas (Dimensiones) const [canvasWidth, setCanvasWidth] = useState(DEFAULT_CANVAS_SIZE); const [canvasHeight, setCanvasHeight] = useState(DEFAULT_CANVAS_SIZE); // Estado General const [konvaCanvas, setKonvaCanvas] = useState(null); const [canvasBackgroundColor, setCanvasBackgroundColor] = useState('#ffffff'); const [selectedCanvasElement, setSelectedCanvasElement] = useState('product'); const [selectedElementId, setSelectedElementId] = useState(null); const [showCenterGuides, setShowCenterGuides] = useState(true); // Producto const [productImageUrl, setProductImageUrl] = useState(initialUrl); const [productX, setProductX] = useState(DEFAULT_CANVAS_SIZE / 2); const [productY, setProductY] = useState(DEFAULT_CANVAS_SIZE / 2); const [productScale, setProductScale] = useState(1); const [productRotation, setProductRotation] = useState(0); const [productOpacity, setProductOpacity] = useState(1); const [productBlurRadius, setProductBlurRadius] = useState(0); const [productShadowEnabled, setProductShadowEnabled] = useState(false); const [productShadowColor, setProductShadowColor] = useState('#000000'); const [productShadowBlur, setProductShadowBlur] = useState(10); const [productShadowOffsetX, setProductShadowOffsetX] = useState(4); const [productShadowOffsetY, setProductShadowOffsetY] = useState(4); const [productShadowOpacity, setProductShadowOpacity] = useState(0.4); const [productReflectionEnabled, setProductReflectionEnabled] = useState(false); const [productFlipX, setProductFlipX] = useState(1); const [productFlipY, setProductFlipY] = useState(1); const [productFilter, setProductFilter] = useState('none'); const [hasProductBeenScaledManually, setHasProductBeenScaledManually] = useState(false); // Fondo const [selectedPresetBackgroundUrl, setSelectedPresetBackgroundUrl] = useState(undefined); const [backgroundOpacity, setBackgroundOpacity] = useState(1); const [backgroundBlurRadius, setBackgroundBlurRadius] = useState(0); const [backgroundShadowEnabled, setBackgroundShadowEnabled] = useState(false); const [backgroundShadowColor, setBackgroundShadowColor] = useState('#000000'); const [backgroundShadowBlur, setBackgroundShadowBlur] = useState(10); const [backgroundShadowOffsetX, setBackgroundShadowOffsetX] = useState(0); const [backgroundShadowOffsetY, setBackgroundShadowOffsetY] = useState(0); const [backgroundShadowOpacity, setBackgroundShadowOpacity] = useState(0.4); const [backgroundReflectionEnabled, setBackgroundReflectionEnabled] = useState(false); const [backgroundFlipX, setBackgroundFlipX] = useState(1); const [backgroundFlipY, setBackgroundFlipY] = useState(1); const [backgroundFilter, setBackgroundFilter] = useState('none'); // Elementos const [textElements, setTextElements] = useState([]); const [shapeElements, setShapeElements] = useState([]); const [dateElement, setDateElement] = useState(null); const [imageElements, setImageElements] = useState([]); const [stickerElements, setStickerElements] = useState([]); // Historia const [history, setHistory] = useState([]); const [historyPointer, setHistoryPointer] = useState(-1); // UI const [leftPanel, setLeftPanel] = useState<'backgrounds' | 'stickers' | 'sizes'>('backgrounds'); const [mobilePanel, setMobilePanel] = useState<'none' | 'left' | 'right'>('none'); const [isUserPremium] = useState(false); const [adminBackgrounds, setAdminBackgrounds] = useState([]); const [zOrderAction, setZOrderAction] = useState<{ type: 'up' | 'down' | 'top' | 'bottom'; id: string; elementType: Exclude; } | null>(null); const [imageToMoveToBottomId, setImageToMoveToBottomId] = useState(null); const productFileRef = useRef(null); const elementImageRef = useRef(null); const bgFileRef = useRef(null); // Fondos predefinidos const hardcodedBgs: DisplayBackground[] = [ { id: 'bg-1', url: 'https://images.unsplash.com/photo-1557682250-33bd709cbe85?w=700&q=80', isPremium: false }, { id: 'bg-2', url: 'https://images.unsplash.com/photo-1557682224-5b8590cd9ec5?w=700&q=80', isPremium: false }, { id: 'bg-3', url: 'https://images.unsplash.com/photo-1557682260-96773eb01377?w=700&q=80', isPremium: false }, { id: 'bg-4', url: 'https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=700&q=80', isPremium: false }, { id: 'bg-5', url: 'https://images.unsplash.com/photo-1579546929518-9e396f3cc809?w=700&q=80', isPremium: false }, { id: 'bg-6', url: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=700&q=80', isPremium: false }, { id: 'bg-7', url: 'https://images.unsplash.com/photo-1618005198919-d3d4b5a92ead?w=700&q=80', isPremium: true }, { id: 'bg-8', url: 'https://images.unsplash.com/photo-1565214975484-3cfa9e56f914?w=700&q=80', isPremium: true }, { id: 'c-1', url: '#1a1a2e', isPremium: false }, { id: 'c-2', url: '#f8f9fa', isPremium: false }, { id: 'c-3', url: '#e8f4f8', isPremium: false }, { id: 'c-4', url: '#fef9e7', isPremium: false }, { id: 'c-5', url: '#f3e5f5', isPremium: false }, { id: 'c-6', url: '#e8f5e9', isPremium: false }, ]; const allBgs = [...hardcodedBgs, ...adminBackgrounds]; // Cargar fondos del API useEffect(() => { fetch('/api/media?type=backgrounds&isUserPremium=' + isUserPremium) .then(r => r.ok ? r.json() : null) .then(data => { if (data?.docs) { setAdminBackgrounds(data.docs.map((m: any) => ({ id: m.id, url: m.url, isPremium: m.isPremium }))); } }) .catch(() => { }); }, [isUserPremium]); // Auto-escala del producto useEffect(() => { if (!productImageUrl || hasProductBeenScaledManually) return; const img = new window.Image(); img.onload = () => { const maxDim = Math.max(img.width, img.height); const target = Math.min(canvasWidth, canvasHeight) * 0.75; if (maxDim > target) setProductScale(target / maxDim); setProductX(canvasWidth / 2); setProductY(canvasHeight / 2); }; img.src = productImageUrl; }, [productImageUrl, hasProductBeenScaledManually, canvasWidth, canvasHeight]); // Historia const getCurrentState = useCallback((): CanvasState => ({ productX, productY, productScale, productRotation, productOpacity, productBlurRadius, productShadowEnabled, productShadowColor, productShadowBlur, productShadowOffsetX, productShadowOffsetY, productShadowOpacity, productReflectionEnabled, productFlipX, productFlipY, productFilter, backgroundOpacity, backgroundBlurRadius, backgroundShadowEnabled, backgroundShadowColor, backgroundShadowBlur, backgroundShadowOffsetX, backgroundShadowOffsetY, backgroundShadowOpacity, backgroundReflectionEnabled, backgroundFlipX, backgroundFlipY, backgroundFilter, selectedPresetBackgroundUrl, textElements: JSON.parse(JSON.stringify(textElements)), shapeElements: JSON.parse(JSON.stringify(shapeElements)), dateElement: dateElement ? JSON.parse(JSON.stringify(dateElement)) : null, imageElements: JSON.parse(JSON.stringify(imageElements)), stickerElements: JSON.parse(JSON.stringify(stickerElements)), canvasBackgroundColor, }), [ productX, productY, productScale, productRotation, productOpacity, productBlurRadius, productShadowEnabled, productShadowColor, productShadowBlur, productShadowOffsetX, productShadowOffsetY, productShadowOpacity, productReflectionEnabled, productFlipX, productFlipY, productFilter, backgroundOpacity, backgroundBlurRadius, backgroundShadowEnabled, backgroundShadowColor, backgroundShadowBlur, backgroundShadowOffsetX, backgroundShadowOffsetY, backgroundShadowOpacity, backgroundReflectionEnabled, backgroundFlipX, backgroundFlipY, backgroundFilter, selectedPresetBackgroundUrl, textElements, shapeElements, dateElement, imageElements, stickerElements, canvasBackgroundColor, ]); const saveState = useCallback(() => { const state = getCurrentState(); setHistory(prev => { const sliced = prev.slice(0, historyPointer + 1); if (sliced.length > 0 && JSON.stringify(sliced[sliced.length - 1]) === JSON.stringify(state)) return prev; const next = [...sliced, state].slice(-MAX_HISTORY); setHistoryPointer(next.length - 1); return next; }); }, [getCurrentState, historyPointer]); const onTransformEndCommit = useCallback(() => { if (selectedCanvasElement === 'product') setHasProductBeenScaledManually(true); saveState(); }, [selectedCanvasElement, saveState]); const applyState = useCallback((state: CanvasState) => { setProductX(state.productX); setProductY(state.productY); setProductScale(state.productScale); setProductRotation(state.productRotation); setProductOpacity(state.productOpacity); setProductBlurRadius(state.productBlurRadius); setProductShadowEnabled(state.productShadowEnabled); setProductShadowColor(state.productShadowColor); setProductShadowBlur(state.productShadowBlur); setProductShadowOffsetX(state.productShadowOffsetX); setProductShadowOffsetY(state.productShadowOffsetY); setProductShadowOpacity(state.productShadowOpacity); setProductReflectionEnabled(state.productReflectionEnabled); setProductFlipX(state.productFlipX); setProductFlipY(state.productFlipY); setProductFilter(state.productFilter); setBackgroundOpacity(state.backgroundOpacity); setBackgroundBlurRadius(state.backgroundBlurRadius); setBackgroundShadowEnabled(state.backgroundShadowEnabled); setBackgroundShadowColor(state.backgroundShadowColor); setBackgroundShadowBlur(state.backgroundShadowBlur); setBackgroundShadowOffsetX(state.backgroundShadowOffsetX); setBackgroundShadowOffsetY(state.backgroundShadowOffsetY); setBackgroundShadowOpacity(state.backgroundShadowOpacity); setBackgroundReflectionEnabled(state.backgroundReflectionEnabled); setBackgroundFlipX(state.backgroundFlipX); setBackgroundFlipY(state.backgroundFlipY); setBackgroundFilter(state.backgroundFilter); setSelectedPresetBackgroundUrl(state.selectedPresetBackgroundUrl); setTextElements(state.textElements); setShapeElements(state.shapeElements); setDateElement(state.dateElement); setImageElements(state.imageElements); setStickerElements(state.stickerElements); setCanvasBackgroundColor(state.canvasBackgroundColor); }, []); const handleUndo = useCallback(() => { if (historyPointer > 0) { const p = historyPointer - 1; setHistoryPointer(p); applyState(history[p]); } }, [history, historyPointer, applyState]); const handleRedo = useCallback(() => { if (historyPointer < history.length - 1) { const p = historyPointer + 1; setHistoryPointer(p); applyState(history[p]); } }, [history, historyPointer, applyState]); // Selección const handleElementSelect = useCallback((type: ElementType, id?: string) => { setSelectedCanvasElement(type); setSelectedElementId(id ?? null); if (id) setMobilePanel('right'); }, []); // Adds const handleAddText = useCallback(() => { const el: TextElement = { id: `text-${Date.now()}`, text: 'Tu texto aquí', x: canvasWidth / 2, y: canvasHeight / 2, fontSize: 32, fill: '#111111', fontFamily: 'Arial', align: 'center', ...BASE_EL, }; setTextElements(p => [...p, el]); handleElementSelect('text', el.id); onTransformEndCommit(); }, [handleElementSelect, onTransformEndCommit, canvasWidth, canvasHeight]); const handleAddRect = useCallback(() => { const el: ShapeElement = { id: `shape-${Date.now()}`, type: 'rect', x: canvasWidth / 2, y: canvasHeight / 2, width: 120, height: 80, fill: '#3b82f6', stroke: 'transparent', strokeWidth: 0, ...BASE_EL, }; setShapeElements(p => [...p, el]); handleElementSelect('shape', el.id); onTransformEndCommit(); }, [handleElementSelect, onTransformEndCommit, canvasWidth, canvasHeight]); const handleAddCircle = useCallback(() => { const el: ShapeElement = { id: `shape-${Date.now()}`, type: 'circle', x: canvasWidth / 2, y: canvasHeight / 2, radius: 60, fill: '#f59e0b', stroke: 'transparent', strokeWidth: 0, ...BASE_EL, }; setShapeElements(p => [...p, el]); handleElementSelect('shape', el.id); onTransformEndCommit(); }, [handleElementSelect, onTransformEndCommit, canvasWidth, canvasHeight]); const handleAddDate = useCallback(() => { const fmt = 'DD/MM/YYYY'; const el: DateElement = { id: `date-${Date.now()}`, text: formatDate(new Date(), fmt), format: fmt, x: canvasWidth / 2, y: canvasHeight / 2 + 80, fontSize: 22, fill: '#333333', fontFamily: 'Arial', ...BASE_EL, }; setDateElement(el); handleElementSelect('date', el.id); onTransformEndCommit(); }, [handleElementSelect, onTransformEndCommit, canvasWidth, canvasHeight]); const handleAddSticker = useCallback((type: 'PROMO' | 'OFERTA' | 'DESCUENTO' | 'NEW' | 'SALE' | 'VIP') => { const el: StickerElement = { id: `sticker-${Date.now()}`, type, x: canvasWidth / 2, y: canvasHeight / 2, rotation: 0, opacity: 1, scaleX: 1, scaleY: 1, }; setStickerElements(p => [...p, el]); handleElementSelect('sticker', el.id); onTransformEndCommit(); }, [handleElementSelect, onTransformEndCommit, canvasWidth, canvasHeight]); // Delete const handleDeleteElement = useCallback(() => { if (!selectedCanvasElement) return; if (selectedCanvasElement === 'text' && selectedElementId) setTextElements(p => p.filter(e => e.id !== selectedElementId)); else if (selectedCanvasElement === 'shape' && selectedElementId) setShapeElements(p => p.filter(e => e.id !== selectedElementId)); else if (selectedCanvasElement === 'date') setDateElement(null); else if (selectedCanvasElement === 'image' && selectedElementId) setImageElements(p => p.filter(e => e.id !== selectedElementId)); else if (selectedCanvasElement === 'sticker' && selectedElementId) setStickerElements(p => p.filter(e => e.id !== selectedElementId)); else if (selectedCanvasElement === 'background') { setSelectedPresetBackgroundUrl(undefined); setCanvasBackgroundColor('#ffffff'); } setSelectedCanvasElement(null); setSelectedElementId(null); onTransformEndCommit(); }, [selectedCanvasElement, selectedElementId, onTransformEndCommit]); // Duplicate const handleDuplicate = useCallback(() => { if (selectedCanvasElement === 'text' && selectedElementId) { const orig = textElements.find(e => e.id === selectedElementId); if (orig) { const el = { ...orig, id: `text-${Date.now()}`, x: orig.x + 20, y: orig.y + 20 }; setTextElements(p => [...p, el]); handleElementSelect('text', el.id); } } else if (selectedCanvasElement === 'shape' && selectedElementId) { const orig = shapeElements.find(e => e.id === selectedElementId); if (orig) { const el = { ...orig, id: `shape-${Date.now()}`, x: orig.x + 20, y: orig.y + 20 }; setShapeElements(p => [...p, el]); handleElementSelect('shape', el.id); } } else if (selectedCanvasElement === 'image' && selectedElementId) { const orig = imageElements.find(e => e.id === selectedElementId); if (orig) { const el = { ...orig, id: `image-${Date.now()}`, x: orig.x + 20, y: orig.y + 20 }; setImageElements(p => [...p, el]); handleElementSelect('image', el.id); } } else if (selectedCanvasElement === 'sticker' && selectedElementId) { const orig = stickerElements.find(e => e.id === selectedElementId); if (orig) { const el = { ...orig, id: `sticker-${Date.now()}`, x: orig.x + 20, y: orig.y + 20 }; setStickerElements(p => [...p, el]); handleElementSelect('sticker', el.id); } } onTransformEndCommit(); }, [selectedCanvasElement, selectedElementId, textElements, shapeElements, imageElements, stickerElements, handleElementSelect, onTransformEndCommit]); // Updates const updateText = useCallback((id: string, u: Partial) => { setTextElements(p => p.map(e => e.id === id ? { ...e, ...u } : e)); }, []); const updateShape = useCallback((id: string, u: Partial) => { setShapeElements(p => p.map(e => e.id === id ? { ...e, ...u } : e)); }, []); const updateDate = useCallback((u: Partial) => { setDateElement(p => p ? { ...p, ...u } : null); }, []); const updateImage = useCallback((id: string, u: Partial) => { setImageElements(p => p.map(e => e.id === id ? { ...e, ...u } : e)); }, []); const updateSticker = useCallback((id: string, u: Partial) => { setStickerElements(p => p.map(e => e.id === id ? { ...e, ...u } : e)); }, []); const handleImageAddedAndLoaded = useCallback(( id: string, scaleX: number, scaleY: number, x: number, y: number, w: number, h: number, ) => { setImageElements(p => p.map(e => e.id === id ? { ...e, x, y, scaleX, scaleY, width: w, height: h } : e )); onTransformEndCommit(); }, [onTransformEndCommit]); // Fondos const handleSelectBg = useCallback((bg: DisplayBackground) => { if (bg.isPremium && !isUserPremium) return; if (bg.url.startsWith('#')) { setCanvasBackgroundColor(bg.url); setSelectedPresetBackgroundUrl(undefined); } else { setSelectedPresetBackgroundUrl(bg.url); setCanvasBackgroundColor('#ffffff'); } setBackgroundOpacity(1); setBackgroundBlurRadius(0); setBackgroundShadowEnabled(false); setBackgroundReflectionEnabled(false); setBackgroundFlipX(1); setBackgroundFlipY(1); setBackgroundFilter('none'); setSelectedCanvasElement('background'); setSelectedElementId(null); onTransformEndCommit(); setMobilePanel('none'); }, [isUserPremium, onTransformEndCommit]); // Uploads const handleProductUpload = (e: React.ChangeEvent) => { if (!e.target.files?.[0]) return; const url = URL.createObjectURL(e.target.files[0]); setProductImageUrl(url); setProductX(canvasWidth / 2); setProductY(canvasHeight / 2); setProductScale(1); setProductRotation(0); setProductOpacity(1); setProductBlurRadius(0); setProductShadowEnabled(false); setProductFlipX(1); setProductFlipY(1); setProductFilter('none'); setHasProductBeenScaledManually(false); setSelectedCanvasElement('product'); setSelectedElementId(null); e.target.value = ''; }; const handleElementImageUpload = (e: React.ChangeEvent) => { if (!e.target.files?.[0]) return; const el: ImageElement = { id: `image-${Date.now()}`, url: URL.createObjectURL(e.target.files[0]), x: canvasWidth / 2, y: canvasHeight / 2, scaleX: 1, scaleY: 1, ...BASE_EL, }; setImageElements(p => [...p, el]); handleElementSelect('image', el.id); e.target.value = ''; }; const handleBgFileUpload = (e: React.ChangeEvent) => { if (!e.target.files?.[0]) return; const url = URL.createObjectURL(e.target.files[0]); setSelectedPresetBackgroundUrl(url); setCanvasBackgroundColor('#ffffff'); setSelectedCanvasElement('background'); setSelectedElementId(null); onTransformEndCommit(); e.target.value = ''; setMobilePanel('none'); }; // Flip const handleFlip = useCallback((axis: 'x' | 'y') => { const toggle = (v: number) => v * -1; const selText = textElements.find(e => e.id === selectedElementId); const selShape = shapeElements.find(e => e.id === selectedElementId); const selImage = imageElements.find(e => e.id === selectedElementId); const selSticker = stickerElements.find(e => e.id === selectedElementId); if (selectedCanvasElement === 'product') { if (axis === 'x') setProductFlipX(toggle); else setProductFlipY(toggle); } else if (selectedCanvasElement === 'background') { if (axis === 'x') setBackgroundFlipX(toggle); else setBackgroundFlipY(toggle); } else if (selectedCanvasElement === 'text' && selText) { updateText(selText.id, { flipX: axis === 'x' ? selText.flipX * -1 : selText.flipX, flipY: axis === 'y' ? selText.flipY * -1 : selText.flipY }); } else if (selectedCanvasElement === 'shape' && selShape) { updateShape(selShape.id, { flipX: axis === 'x' ? selShape.flipX * -1 : selShape.flipX, flipY: axis === 'y' ? selShape.flipY * -1 : selShape.flipY }); } else if (selectedCanvasElement === 'image' && selImage) { updateImage(selImage.id, { flipX: axis === 'x' ? selImage.flipX * -1 : selImage.flipX, flipY: axis === 'y' ? selImage.flipY * -1 : selImage.flipY }); } else if (selectedCanvasElement === 'sticker' && selSticker) { updateSticker(selSticker.id, { scaleX: axis === 'x' ? selSticker.scaleX * -1 : selSticker.scaleX, scaleY: axis === 'y' ? selSticker.scaleY * -1 : selSticker.scaleY }); } else if (selectedCanvasElement === 'date' && dateElement) { updateDate({ flipX: axis === 'x' ? dateElement.flipX * -1 : dateElement.flipX, flipY: axis === 'y' ? dateElement.flipY * -1 : dateElement.flipY }); } onTransformEndCommit(); }, [selectedCanvasElement, selectedElementId, textElements, shapeElements, imageElements, stickerElements, dateElement, updateText, updateShape, updateImage, updateSticker, updateDate, onTransformEndCommit]); // Filtro const handleFilter = useCallback((f: FilterType) => { if (selectedCanvasElement === 'product') setProductFilter(f); else if (selectedCanvasElement === 'background') setBackgroundFilter(f); else if (selectedCanvasElement === 'text' && selectedElementId) updateText(selectedElementId, { filter: f }); else if (selectedCanvasElement === 'shape' && selectedElementId) updateShape(selectedElementId, { filter: f }); else if (selectedCanvasElement === 'image' && selectedElementId) updateImage(selectedElementId, { filter: f }); else if (selectedCanvasElement === 'sticker' && selectedElementId) updateSticker(selectedElementId, { filter: f } as any); // Stickers no soportan filtros en este demo pero evitamos crash else if (selectedCanvasElement === 'date' && dateElement) updateDate({ filter: f }); onTransformEndCommit(); }, [selectedCanvasElement, selectedElementId, dateElement, updateText, updateShape, updateImage, updateSticker, updateDate, onTransformEndCommit]); // Z-order const handleZOrder = useCallback((type: 'up' | 'down' | 'top' | 'bottom') => { if (!selectedCanvasElement || selectedCanvasElement === 'background') return; const id = selectedCanvasElement === 'product' ? 'product' : selectedElementId; if (!id) return; setZOrderAction({ type, id, elementType: selectedCanvasElement as Exclude }); }, [selectedCanvasElement, selectedElementId]); const onZOrderActionComplete = useCallback(() => { setZOrderAction(null); saveState(); }, [saveState]); const onImageMovedToBottom = useCallback((id: string) => { if (id === imageToMoveToBottomId) setImageToMoveToBottomId(null); }, [imageToMoveToBottomId]); // Teclado useEffect(() => { const onKey = (e: KeyboardEvent) => { const tag = (document.activeElement as HTMLElement)?.tagName; if (tag === 'INPUT' || tag === 'TEXTAREA') return; if (e.key === 'Delete' || e.key === 'Backspace') handleDeleteElement(); if ((e.ctrlKey || e.metaKey) && !e.shiftKey && e.key === 'z') { e.preventDefault(); handleUndo(); } if ((e.ctrlKey || e.metaKey) && (e.key === 'y' || (e.shiftKey && e.key === 'z'))) { e.preventDefault(); handleRedo(); } if ((e.ctrlKey || e.metaKey) && e.key === 'd') { e.preventDefault(); handleDuplicate(); } }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [handleDeleteElement, handleUndo, handleRedo, handleDuplicate]); // Download const handleDownload = () => { if (!konvaCanvas) { alert('Editor no listo, intenta de nuevo.'); return; } try { const link = document.createElement('a'); link.href = konvaCanvas.toDataURL('image/png', 1.0); link.download = 'editta-design.png'; link.click(); } catch { alert('Error al descargar.'); } }; // Props del elemento activo const selText = textElements.find(e => e.id === selectedElementId); const selShape = shapeElements.find(e => e.id === selectedElementId); const selImage = imageElements.find(e => e.id === selectedElementId); const selSticker = stickerElements.find(e => e.id === selectedElementId); type EP = { opacity: number; blurRadius: number; shadowEnabled: boolean; shadowColor: string; shadowBlur: number; shadowOffsetX: number; shadowOffsetY: number; shadowOpacity: number; reflectionEnabled: boolean; filter: FilterType; setOpacity: (v: number) => void; setBlurRadius: (v: number) => void; setShadowEnabled: (v: boolean) => void; setShadowColor: (v: string) => void; setShadowBlur: (v: number) => void; setShadowOffsetX: (v: number) => void; setShadowOffsetY: (v: number) => void; setShadowOpacity: (v: number) => void; setReflectionEnabled: (v: boolean) => void; }; let ep: EP | null = null; if (selectedCanvasElement === 'product') { ep = { opacity: productOpacity, blurRadius: productBlurRadius, shadowEnabled: productShadowEnabled, shadowColor: productShadowColor, shadowBlur: productShadowBlur, shadowOffsetX: productShadowOffsetX, shadowOffsetY: productShadowOffsetY, shadowOpacity: productShadowOpacity, reflectionEnabled: productReflectionEnabled, filter: productFilter, setOpacity: setProductOpacity, setBlurRadius: setProductBlurRadius, setShadowEnabled: setProductShadowEnabled, setShadowColor: setProductShadowColor, setShadowBlur: setProductShadowBlur, setShadowOffsetX: setProductShadowOffsetX, setShadowOffsetY: setProductShadowOffsetY, setShadowOpacity: setProductShadowOpacity, setReflectionEnabled: setProductReflectionEnabled, }; } else if (selectedCanvasElement === 'background') { ep = { opacity: backgroundOpacity, blurRadius: backgroundBlurRadius, shadowEnabled: backgroundShadowEnabled, shadowColor: backgroundShadowColor, shadowBlur: backgroundShadowBlur, shadowOffsetX: backgroundShadowOffsetX, shadowOffsetY: backgroundShadowOffsetY, shadowOpacity: backgroundShadowOpacity, reflectionEnabled: backgroundReflectionEnabled, filter: backgroundFilter, setOpacity: setBackgroundOpacity, setBlurRadius: setBackgroundBlurRadius, setShadowEnabled: setBackgroundShadowEnabled, setShadowColor: setBackgroundShadowColor, setShadowBlur: setBackgroundShadowBlur, setShadowOffsetX: setBackgroundShadowOffsetX, setShadowOffsetY: setBackgroundShadowOffsetY, setShadowOpacity: setBackgroundShadowOpacity, setReflectionEnabled: setBackgroundReflectionEnabled, }; } else if (selectedCanvasElement === 'text' && selText) { ep = { opacity: selText.opacity, blurRadius: selText.blurRadius, shadowEnabled: selText.shadowEnabled, shadowColor: selText.shadowColor, shadowBlur: selText.shadowBlur, shadowOffsetX: selText.shadowOffsetX, shadowOffsetY: selText.shadowOffsetY, shadowOpacity: selText.shadowOpacity, reflectionEnabled: selText.reflectionEnabled, filter: selText.filter, setOpacity: v => updateText(selText.id, { opacity: v }), setBlurRadius: v => updateText(selText.id, { blurRadius: v }), setShadowEnabled: v => updateText(selText.id, { shadowEnabled: v }), setShadowColor: v => updateText(selText.id, { shadowColor: v }), setShadowBlur: v => updateText(selText.id, { shadowBlur: v }), setShadowOffsetX: v => updateText(selText.id, { shadowOffsetX: v }), setShadowOffsetY: v => updateText(selText.id, { shadowOffsetY: v }), setShadowOpacity: v => updateText(selText.id, { shadowOpacity: v }), setReflectionEnabled: v => updateText(selText.id, { reflectionEnabled: v }), }; } else if (selectedCanvasElement === 'shape' && selShape) { ep = { opacity: selShape.opacity, blurRadius: selShape.blurRadius, shadowEnabled: selShape.shadowEnabled, shadowColor: selShape.shadowColor, shadowBlur: selShape.shadowBlur, shadowOffsetX: selShape.shadowOffsetX, shadowOffsetY: selShape.shadowOffsetY, shadowOpacity: selShape.shadowOpacity, reflectionEnabled: selShape.reflectionEnabled, filter: selShape.filter, setOpacity: v => updateShape(selShape.id, { opacity: v }), setBlurRadius: v => updateShape(selShape.id, { blurRadius: v }), setShadowEnabled: v => updateShape(selShape.id, { shadowEnabled: v }), setShadowColor: v => updateShape(selShape.id, { shadowColor: v }), setShadowBlur: v => updateShape(selShape.id, { shadowBlur: v }), setShadowOffsetX: v => updateShape(selShape.id, { shadowOffsetX: v }), setShadowOffsetY: v => updateShape(selShape.id, { shadowOffsetY: v }), setShadowOpacity: v => updateShape(selShape.id, { shadowOpacity: v }), setReflectionEnabled: v => updateShape(selShape.id, { reflectionEnabled: v }), }; } else if (selectedCanvasElement === 'image' && selImage) { ep = { opacity: selImage.opacity, blurRadius: selImage.blurRadius, shadowEnabled: selImage.shadowEnabled, shadowColor: selImage.shadowColor, shadowBlur: selImage.shadowBlur, shadowOffsetX: selImage.shadowOffsetX, shadowOffsetY: selImage.shadowOffsetY, shadowOpacity: selImage.shadowOpacity, reflectionEnabled: selImage.reflectionEnabled, filter: selImage.filter, setOpacity: v => updateImage(selImage.id, { opacity: v }), setBlurRadius: v => updateImage(selImage.id, { blurRadius: v }), setShadowEnabled: v => updateImage(selImage.id, { shadowEnabled: v }), setShadowColor: v => updateImage(selImage.id, { shadowColor: v }), setShadowBlur: v => updateImage(selImage.id, { shadowBlur: v }), setShadowOffsetX: v => updateImage(selImage.id, { shadowOffsetX: v }), setShadowOffsetY: v => updateImage(selImage.id, { shadowOffsetY: v }), setShadowOpacity: v => updateImage(selImage.id, { shadowOpacity: v }), setReflectionEnabled: v => updateImage(selImage.id, { reflectionEnabled: v }), }; } else if (selectedCanvasElement === 'sticker' && selSticker) { ep = { opacity: selSticker.opacity, blurRadius: 0, // Stickers no tienen blur shadowEnabled: false, shadowColor: '#000000', shadowBlur: 0, shadowOffsetX: 0, shadowOffsetY: 0, shadowOpacity: 0, reflectionEnabled: false, filter: 'none', setOpacity: v => updateSticker(selSticker.id, { opacity: v }), setBlurRadius: () => { }, setShadowEnabled: () => { }, setShadowColor: () => { }, setShadowBlur: () => { }, setShadowOffsetX: () => { }, setShadowOffsetY: () => { }, setShadowOpacity: () => { }, setReflectionEnabled: () => { }, }; } else if (selectedCanvasElement === 'date' && dateElement) { ep = { opacity: dateElement.opacity, blurRadius: dateElement.blurRadius, shadowEnabled: dateElement.shadowEnabled, shadowColor: dateElement.shadowColor, shadowBlur: dateElement.shadowBlur, shadowOffsetX: dateElement.shadowOffsetX, shadowOffsetY: dateElement.shadowOffsetY, shadowOpacity: dateElement.shadowOpacity, reflectionEnabled: dateElement.reflectionEnabled, filter: dateElement.filter, setOpacity: v => updateDate({ opacity: v }), setBlurRadius: v => updateDate({ blurRadius: v }), setShadowEnabled: v => updateDate({ shadowEnabled: v }), setShadowColor: v => updateDate({ shadowColor: v }), setShadowBlur: v => updateDate({ shadowBlur: v }), setShadowOffsetX: v => updateDate({ shadowOffsetX: v }), setShadowOffsetY: v => updateDate({ shadowOffsetY: v }), setShadowOpacity: v => updateDate({ shadowOpacity: v }), setReflectionEnabled: v => updateDate({ reflectionEnabled: v }), }; } // Paneles de UI const PropertiesPanel = () => (
{!ep && (

Selecciona un elemento para editarlo

)} {selectedCanvasElement === 'text' && selText && (
} />