1
2export interface MockupState {
3 uploadedImage: string | null;
4 selectedFrame: string;
5 backgroundColor: string;
6 backgroundType: 'solid' | 'gradient' | 'pattern';
7 backgroundImage?: string;
8 gradientDirection: string;
9 gradientColors: string[];
10 pattern: string;
11 imagePosition: {
12 x: number;
13 y: number;
14 scale: number;
15 };
16 devicePosition: {
17 x: number;
18 y: number;
19 scale: number;
20 rotation: number;
21 };
22 aspectRatio: string;
23 rotation3D: {
24 rotateX: number;
25 rotateY: number;
26 rotateZ: number;
27 skew: number;
28 };
29 imageBorder: {
30 width: number;
31 color: string;
32 radius: number;
33 shadow: string;
34 enabled: boolean;
35 };
36}
37
38export interface DeviceFrame {
39 id: string;
40 name: string;
41 type: 'phone' | 'laptop' | 'tablet' | 'desktop';
42 colors: string[];
43 dimensions: {
44 width: number;
45 height: number;
46 screenWidth: number;
47 screenHeight: number;
48 screenX: number;
49 screenY: number;
50 };
51 recommendedResolution?: string;
52}
53
54// Additional types for CanvasContext compatibility
55export interface CanvasObject {
56 id: string;
57 type: string;
58 position: { x: number; y: number };
59 size: { width: number; height: number };
60}
61
62export interface CanvasState {
63 objects: CanvasObject[];
64 selectedObjects: string[];
65 history: any[];
66 historyIndex: number;
67 canvasSize: { width: number; height: number };
68 backgroundColor: string;
69 deviceFrame: string;
70}