@umituz/web-canvas 1.2.1 → 1.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@umituz/web-canvas",
3
- "version": "1.2.1",
3
+ "version": "1.2.2",
4
4
  "description": "Comprehensive canvas and screenshot generation library with device frames, patterns, and PDF export",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",
@@ -1,7 +1,3 @@
1
- /**
2
- * Application Layer Index
3
- * Export all application services
4
- */
5
1
 
6
2
  export * from './services/ScreenshotStudioService';
7
3
  export * from './services/ReportService';
@@ -1,14 +1,9 @@
1
- /**
2
- * Report Service
3
- * PDF export and report generation service
4
- */
5
1
 
6
2
  import type { ReportData } from '../../domain/types/report.types';
7
3
  import type { PDFExportOptions, ExcelExportOptions } from '../../domain/types/report.types';
8
4
  import { writeXlsxBlob } from '../../infrastructure/services/minimalXlsx';
9
5
  import type { XlsxSheet } from '../../infrastructure/services/minimalXlsx';
10
6
 
11
- /** Flat records → header + value rows, matching json_to_sheet's shape. */
12
7
  function recordsToSheet(
13
8
  name: string,
14
9
  records: Record<string, string | number | boolean | null | undefined>[]
@@ -30,9 +25,6 @@ export class ReportService {
30
25
  return ReportService.instance;
31
26
  }
32
27
 
33
- /**
34
- * Export DOM element to PDF
35
- */
36
28
  async exportToPDF(
37
29
  elementId: string,
38
30
  options: PDFExportOptions = {}
@@ -60,9 +52,6 @@ export class ReportService {
60
52
  pdf.save(options.filename || 'report.pdf');
61
53
  }
62
54
 
63
- /**
64
- * Export canvas to PDF
65
- */
66
55
  async exportCanvasToPDF(
67
56
  canvas: HTMLCanvasElement,
68
57
  options: PDFExportOptions = {}
@@ -78,16 +67,12 @@ export class ReportService {
78
67
  pdf.save(options.filename || 'canvas-export.pdf');
79
68
  }
80
69
 
81
- /**
82
- * Export data to Excel
83
- */
84
70
  async exportToExcel(
85
71
  data: ReportData,
86
72
  options: ExcelExportOptions = {}
87
73
  ): Promise<void> {
88
74
  const JSZip = (await import('jszip')).default;
89
75
 
90
- // Group items by type
91
76
  const apps = data.items
92
77
  .filter((i) => i.type === 'app')
93
78
  .map((i) => ({ Name: i.name, ...i.metrics, ...i.details }));
@@ -109,7 +94,6 @@ export class ReportService {
109
94
  sheets.push(recordsToSheet('Posts', posts));
110
95
  }
111
96
 
112
- // Summary sheet
113
97
  if (options.includeSummary !== false) {
114
98
  const summary = [
115
99
  { Metric: 'Total Reach', Value: data.summary.totalReach },
@@ -142,9 +126,6 @@ export class ReportService {
142
126
  URL.revokeObjectURL(url);
143
127
  }
144
128
 
145
- /**
146
- * Export data to CSV
147
- */
148
129
  exportToCSV(
149
130
  data: ReportData,
150
131
  filename: string = 'report.csv',
@@ -170,9 +151,6 @@ export class ReportService {
170
151
  URL.revokeObjectURL(url);
171
152
  }
172
153
 
173
- /**
174
- * Export multiple elements to PDF
175
- */
176
154
  async exportMultipleToPDF(
177
155
  elementIds: string[],
178
156
  options: PDFExportOptions = {}
@@ -1,7 +1,3 @@
1
- /**
2
- * Screenshot Studio Service
3
- * High-level screenshot generation service
4
- */
5
1
 
6
2
  import type {
7
3
  ScreenshotContent,
@@ -28,9 +24,6 @@ export class ScreenshotStudioService {
28
24
  this.renderer = new ScreenshotRenderer();
29
25
  }
30
26
 
31
- /**
32
- * Generate screenshot
33
- */
34
27
  public async generateScreenshot(
35
28
  options: ScreenshotGenerationOptions
36
29
  ): Promise<ScreenshotMetadata> {
@@ -73,14 +66,10 @@ export class ScreenshotStudioService {
73
66
  };
74
67
  }
75
68
 
76
- /**
77
- * Generate batch screenshots
78
- */
79
69
  public async generateBatchScreenshots(
80
70
  deviceTypes: DeviceType[]
81
71
  ): Promise<ScreenshotMetadata[]> {
82
- // Process in parallel with concurrency control for better performance
83
- const BATCH_SIZE = 3; // Process 3 screenshots at a time to avoid memory issues
72
+ const BATCH_SIZE = 3;
84
73
 
85
74
  const results: ScreenshotMetadata[] = [];
86
75
 
@@ -96,9 +85,6 @@ export class ScreenshotStudioService {
96
85
  return results;
97
86
  }
98
87
 
99
- /**
100
- * Generate designed screenshot
101
- */
102
88
  public async generateDesignedScreenshot(
103
89
  content: ScreenshotContent,
104
90
  design: ScreenshotDesign
@@ -119,9 +105,6 @@ export class ScreenshotStudioService {
119
105
  };
120
106
  }
121
107
 
122
- /**
123
- * Export project as ZIP
124
- */
125
108
  public async exportProjectAsZip(
126
109
  project: ScreenshotProject
127
110
  ): Promise<Blob> {
@@ -133,7 +116,6 @@ export class ScreenshotStudioService {
133
116
  throw new Error('Failed to create folder in ZIP');
134
117
  }
135
118
 
136
- // Add metadata if enabled
137
119
  if (this.config.export?.includeMetadata) {
138
120
  const metadataText = `APP NAME: ${project.appMetadata.appName}
139
121
  SUBTITLE: ${project.appMetadata.subtitle}
@@ -147,7 +129,6 @@ ${project.appMetadata.whatsNew}`;
147
129
  folder.file('aso_metadata.txt', metadataText);
148
130
  }
149
131
 
150
- // Generate screenshots in parallel for better performance
151
132
  const screenshotPromises = project.screens.map((screen, index) =>
152
133
  this.generateDesignedScreenshot(screen, project.design)
153
134
  .then(screenshot => ({ screenshot, index }))
@@ -155,7 +136,6 @@ ${project.appMetadata.whatsNew}`;
155
136
 
156
137
  const screenshots = await Promise.all(screenshotPromises);
157
138
 
158
- // Add all screenshots to ZIP
159
139
  screenshots.forEach(({ screenshot, index }) => {
160
140
  const base64Data = screenshot.url.split(',')[1];
161
141
  folder.file(
@@ -168,9 +148,6 @@ ${project.appMetadata.whatsNew}`;
168
148
  return await zip.generateAsync({ type: 'blob' });
169
149
  }
170
150
 
171
- /**
172
- * Create project
173
- */
174
151
  public createProject(name: string): ScreenshotProject {
175
152
  return {
176
153
  id: this.generateId(),
@@ -193,9 +170,6 @@ ${project.appMetadata.whatsNew}`;
193
170
  };
194
171
  }
195
172
 
196
- /**
197
- * Get default design
198
- */
199
173
  private getDefaultDesign(): ScreenshotDesign {
200
174
  return {
201
175
  backgroundColor: '#6366f1',
@@ -232,9 +206,6 @@ ${project.appMetadata.whatsNew}`;
232
206
  };
233
207
  }
234
208
 
235
- /**
236
- * Get default screen
237
- */
238
209
  private getDefaultScreen(): ScreenshotContent {
239
210
  return {
240
211
  id: '1',
@@ -251,16 +222,11 @@ ${project.appMetadata.whatsNew}`;
251
222
  };
252
223
  }
253
224
 
254
- /**
255
- * Generate unique ID - optimized version
256
- */
257
225
  private generateId(): string {
258
- // Use more efficient ID generation with crypto if available
259
226
  if (typeof crypto !== 'undefined' && crypto.randomUUID) {
260
227
  return crypto.randomUUID();
261
228
  }
262
229
 
263
- // Fallback to timestamp + random for better uniqueness
264
230
  return `${Date.now().toString(36)}-${Math.random().toString(36).substring(2, 9)}`;
265
231
  }
266
232
  }
@@ -1,31 +1,15 @@
1
- /**
2
- * Canvas Configuration
3
- * Canvas operation configuration
4
- */
5
1
 
6
2
  import type { CanvasFormat, CanvasQuality } from '../types/canvas.types';
7
3
 
8
- /**
9
- * Canvas configuration
10
- */
11
4
  export interface CanvasConfig {
12
- /** Default export format */
13
5
  defaultFormat?: CanvasFormat;
14
- /** Default quality (0.0 - 1.0) */
15
6
  defaultQuality?: CanvasQuality;
16
- /** Maximum dimension (width or height) */
17
7
  maxDimension?: number;
18
- /** Scale factor for high-resolution exports */
19
8
  scale?: number;
20
- /** Default background color */
21
9
  backgroundColor?: string;
22
- /** Enable CORS for cross-origin images */
23
10
  useCORS?: boolean;
24
11
  }
25
12
 
26
- /**
27
- * Default canvas configuration
28
- */
29
13
  export const DEFAULT_CANVAS_CONFIG: CanvasConfig = {
30
14
  defaultFormat: 'png',
31
15
  defaultQuality: 0.9,
@@ -1,29 +1,14 @@
1
- /**
2
- * Device Configuration
3
- * Device frame configuration
4
- */
5
1
 
6
2
  import type { DeviceType } from '../types/screenshot.types';
7
3
 
8
- /**
9
- * Device configuration
10
- */
11
4
  export interface DeviceConfigOption {
12
- /** Available device types */
13
5
  devices: DeviceType[];
14
- /** Default device type */
15
6
  defaultDevice?: DeviceType;
16
- /** Show device frame */
17
7
  showFrame?: boolean;
18
- /** Frame color */
19
8
  frameColor?: string;
20
- /** Frame thickness in pixels */
21
9
  frameThickness?: number;
22
10
  }
23
11
 
24
- /**
25
- * Device dimensions presets
26
- */
27
12
  export const DEVICE_DIMENSIONS: Record<DeviceType, { width: number; height: number }> = {
28
13
  'iphone-15-pro': { width: 1290, height: 2796 },
29
14
  'iphone-15': { width: 1179, height: 2556 },
@@ -35,9 +20,6 @@ export const DEVICE_DIMENSIONS: Record<DeviceType, { width: number; height: numb
35
20
  'desktop': { width: 1920, height: 1080 },
36
21
  };
37
22
 
38
- /**
39
- * Default device configuration
40
- */
41
23
  export const DEFAULT_DEVICE_CONFIG: DeviceConfigOption = {
42
24
  devices: Object.keys(DEVICE_DIMENSIONS) as DeviceType[],
43
25
  defaultDevice: 'iphone-15-pro',
@@ -1,59 +1,30 @@
1
- /**
2
- * Screenshot Studio Configuration
3
- * Complete screenshot studio configuration
4
- */
5
1
 
6
2
  import type { CanvasConfig } from './CanvasConfig';
7
3
  import type { DeviceConfigOption } from './DeviceConfig';
8
4
  import type { ScreenshotFormat, Language } from '../types/screenshot.types';
9
5
 
10
- /**
11
- * Export configuration
12
- */
13
6
  export interface ExportConfig {
14
- /** Include ASO metadata in export */
15
7
  includeMetadata?: boolean;
16
- /** ZIP filename template */
17
8
  zipFilename?: string;
18
- /** Folder structure */
19
9
  folderStructure?: 'flat' | 'by-language' | 'by-device';
20
- /** Default export format */
21
10
  defaultFormat?: ScreenshotFormat;
22
11
  }
23
12
 
24
- /**
25
- * AI configuration
26
- */
27
13
  export interface AIConfig {
28
- /** Enable AI features */
29
14
  enabled?: boolean;
30
- /** AI provider */
31
15
  provider?: 'gemini' | 'openai' | 'anthropic';
32
- /** API key (if needed) */
33
16
  apiKey?: string;
34
17
  }
35
18
 
36
- /**
37
- * Screenshot studio configuration
38
- */
39
19
  export interface ScreenshotStudioConfig {
40
- /** Canvas configuration */
41
20
  canvas?: CanvasConfig;
42
- /** Device configuration */
43
21
  device?: DeviceConfigOption;
44
- /** Export configuration */
45
22
  export?: ExportConfig;
46
- /** AI configuration */
47
23
  ai?: AIConfig;
48
- /** Supported languages */
49
24
  languages?: Language[];
50
- /** Default language */
51
25
  defaultLanguage?: Language;
52
26
  }
53
27
 
54
- /**
55
- * Default screenshot studio configuration
56
- */
57
28
  export const DEFAULT_SCREENSHOT_STUDIO_CONFIG: ScreenshotStudioConfig = {
58
29
  canvas: {
59
30
  defaultFormat: 'png' as any,
@@ -1,7 +1,3 @@
1
- /**
2
- * Domain Config Index
3
- * Export all configuration interfaces and defaults
4
- */
5
1
 
6
2
  export * from './CanvasConfig';
7
3
  export * from './DeviceConfig';
@@ -1,7 +1,3 @@
1
- /**
2
- * Domain Layer Index
3
- * Export all domain types and configurations
4
- */
5
1
 
6
2
  export * from './types';
7
3
  export * from './config';
@@ -1,47 +1,22 @@
1
- /**
2
- * Canvas Types
3
- * Core canvas operation types
4
- */
5
1
 
6
- /**
7
- * Canvas format options
8
- */
9
2
  export type CanvasFormat = 'png' | 'jpeg' | 'webp';
10
3
 
11
- /**
12
- * Canvas render quality
13
- */
14
- export type CanvasQuality = number; // 0.0 to 1.0
4
+ export type CanvasQuality = number;
15
5
 
16
- /**
17
- * Canvas dimensions
18
- */
19
6
  export interface CanvasDimensions {
20
7
  width: number;
21
8
  height: number;
22
9
  }
23
10
 
24
- /**
25
- * Canvas position
26
- */
27
11
  export interface CanvasPosition {
28
12
  x: number;
29
13
  y: number;
30
14
  }
31
15
 
32
- /**
33
- * Canvas rectangle
34
- */
35
16
  export interface CanvasRect extends CanvasPosition, CanvasDimensions {}
36
17
 
37
- /**
38
- * Canvas color
39
- */
40
18
  export type CanvasColor = string;
41
19
 
42
- /**
43
- * Canvas context configuration
44
- */
45
20
  export interface CanvasContextConfig {
46
21
  fillStyle?: CanvasColor;
47
22
  strokeStyle?: CanvasColor;
@@ -54,9 +29,6 @@ export interface CanvasContextConfig {
54
29
  textBaseline?: CanvasTextBaseline;
55
30
  }
56
31
 
57
- /**
58
- * Canvas export options
59
- */
60
32
  export interface CanvasExportOptions {
61
33
  format?: CanvasFormat;
62
34
  quality?: CanvasQuality;
@@ -65,9 +37,6 @@ export interface CanvasExportOptions {
65
37
  useCORS?: boolean;
66
38
  }
67
39
 
68
- /**
69
- * Canvas result
70
- */
71
40
  export interface CanvasResult {
72
41
  blob: Blob;
73
42
  url: string;
@@ -76,9 +45,6 @@ export interface CanvasResult {
76
45
  size: number;
77
46
  }
78
47
 
79
- /**
80
- * Canvas operation callback
81
- */
82
48
  export type CanvasOperation<T> = (
83
49
  ctx: CanvasRenderingContext2D,
84
50
  dimensions: CanvasDimensions
@@ -1,7 +1,3 @@
1
- /**
2
- * Domain Types Index
3
- * Export all domain types
4
- */
5
1
 
6
2
  export * from './canvas.types';
7
3
  export * from './screenshot.types';
@@ -1,16 +1,6 @@
1
- /**
2
- * Report Types
3
- * PDF export and report generation types
4
- */
5
1
 
6
- /**
7
- * Report item type
8
- */
9
2
  export type ReportItemType = 'app' | 'campaign' | 'post';
10
3
 
11
- /**
12
- * Report item
13
- */
14
4
  export interface ReportItem {
15
5
  name: string;
16
6
  type: ReportItemType;
@@ -18,18 +8,12 @@ export interface ReportItem {
18
8
  details: Record<string, string | number | boolean | null | undefined>;
19
9
  }
20
10
 
21
- /**
22
- * Report summary
23
- */
24
11
  export interface ReportSummary {
25
12
  totalReach: number;
26
13
  totalEngagement: number;
27
14
  averageScore: number;
28
15
  }
29
16
 
30
- /**
31
- * Report data
32
- */
33
17
  export interface ReportData {
34
18
  title: string;
35
19
  dateRange: string;
@@ -37,14 +21,8 @@ export interface ReportData {
37
21
  summary: ReportSummary;
38
22
  }
39
23
 
40
- /**
41
- * Export format
42
- */
43
24
  export type ExportFormat = 'pdf' | 'excel' | 'csv';
44
25
 
45
- /**
46
- * PDF export options
47
- */
48
26
  export interface PDFExportOptions {
49
27
  filename?: string;
50
28
  scale?: number;
@@ -53,27 +31,18 @@ export interface PDFExportOptions {
53
31
  format?: 'a4' | 'letter' | 'legal';
54
32
  }
55
33
 
56
- /**
57
- * Excel export options
58
- */
59
34
  export interface ExcelExportOptions {
60
35
  filename?: string;
61
36
  sheetName?: string;
62
37
  includeSummary?: boolean;
63
38
  }
64
39
 
65
- /**
66
- * CSV export options
67
- */
68
40
  export interface CSVExportOptions {
69
41
  filename?: string;
70
42
  delimiter?: ',' | ';';
71
43
  includeHeaders?: boolean;
72
44
  }
73
45
 
74
- /**
75
- * Report export result
76
- */
77
46
  export interface ReportExportResult {
78
47
  format: ExportFormat;
79
48
  filename: string;
@@ -1,11 +1,4 @@
1
- /**
2
- * Screenshot Types
3
- * Screenshot generation and device frame types
4
- */
5
-
6
- /**
7
- * Device type
8
- */
1
+
9
2
  export type DeviceType =
10
3
  | 'iphone-15-pro'
11
4
  | 'iphone-15'
@@ -16,9 +9,6 @@ export type DeviceType =
16
9
  | 'android-tablet'
17
10
  | 'desktop';
18
11
 
19
- /**
20
- * Device type enum (for backward compatibility)
21
- */
22
12
  export const DeviceTypeEnum = {
23
13
  IPHONE_15_PRO: 'iphone-15-pro',
24
14
  IPHONE_15: 'iphone-15',
@@ -30,37 +20,22 @@ export const DeviceTypeEnum = {
30
20
  DESKTOP: 'desktop',
31
21
  } as const;
32
22
 
33
- /**
34
- * Frame style options
35
- */
36
23
  export type FrameStyle = 'realistic' | 'minimal' | 'none';
37
24
 
38
- /**
39
- * Frame style enum (for backward compatibility)
40
- */
41
25
  export const FrameStyleEnum = {
42
26
  REALISTIC: 'realistic',
43
27
  MINIMAL: 'minimal',
44
28
  NONE: 'none',
45
29
  } as const;
46
30
 
47
- /**
48
- * Layout style options
49
- */
50
31
  export type LayoutStyle = 'text-top' | 'text-bottom' | 'text-overlay';
51
32
 
52
- /**
53
- * Layout style enum (for backward compatibility)
54
- */
55
33
  export const LayoutStyleEnum = {
56
34
  TEXT_TOP: 'text-top',
57
35
  TEXT_BOTTOM: 'text-bottom',
58
36
  TEXT_OVERLAY: 'text-overlay',
59
37
  } as const;
60
38
 
61
- /**
62
- * Background pattern options
63
- */
64
39
  export type BackgroundPattern =
65
40
  | 'none'
66
41
  | 'dots'
@@ -69,9 +44,6 @@ export type BackgroundPattern =
69
44
  | 'waves'
70
45
  | 'checkers';
71
46
 
72
- /**
73
- * Background pattern enum (for backward compatibility)
74
- */
75
47
  export const BackgroundPatternEnum = {
76
48
  NONE: 'none',
77
49
  DOTS: 'dots',
@@ -81,37 +53,22 @@ export const BackgroundPatternEnum = {
81
53
  CHECKERS: 'checkers',
82
54
  } as const;
83
55
 
84
- /**
85
- * Screenshot format
86
- */
87
56
  export type ScreenshotFormat = 'png' | 'jpeg' | 'webp';
88
57
 
89
- /**
90
- * Screenshot format enum (for backward compatibility)
91
- */
92
58
  export const ScreenshotFormatEnum = {
93
59
  PNG: 'png',
94
60
  JPEG: 'jpeg',
95
61
  WEBP: 'webp',
96
62
  } as const;
97
63
 
98
- /**
99
- * Language code
100
- */
101
64
  export type Language = string;
102
65
 
103
- /**
104
- * Device dimensions
105
- */
106
66
  export interface DeviceDimensions {
107
67
  width: number;
108
68
  height: number;
109
69
  scale?: number;
110
70
  }
111
71
 
112
- /**
113
- * Device configuration
114
- */
115
72
  export interface DeviceConfig {
116
73
  type: DeviceType;
117
74
  name: string;
@@ -123,9 +80,6 @@ export interface DeviceConfig {
123
80
  frameThickness?: number;
124
81
  }
125
82
 
126
- /**
127
- * Screenshot content
128
- */
129
83
  export interface ScreenshotContent {
130
84
  id: string;
131
85
  title: string;
@@ -138,9 +92,6 @@ export interface ScreenshotContent {
138
92
  imageAnchorY?: number;
139
93
  }
140
94
 
141
- /**
142
- * Screenshot design
143
- */
144
95
  export interface ScreenshotDesign {
145
96
  backgroundColor: string;
146
97
  backgroundGradientEnd?: string | null;
@@ -175,9 +126,6 @@ export interface ScreenshotDesign {
175
126
  isPanoramic?: boolean;
176
127
  }
177
128
 
178
- /**
179
- * Screenshot metadata
180
- */
181
129
  export interface ScreenshotMetadata {
182
130
  id: string;
183
131
  deviceType: DeviceType;
@@ -188,9 +136,6 @@ export interface ScreenshotMetadata {
188
136
  url: string;
189
137
  }
190
138
 
191
- /**
192
- * Screenshot generation options
193
- */
194
139
  export interface ScreenshotGenerationOptions {
195
140
  deviceType: DeviceType;
196
141
  format?: ScreenshotFormat;
@@ -198,9 +143,6 @@ export interface ScreenshotGenerationOptions {
198
143
  customDimensions?: DeviceDimensions;
199
144
  }
200
145
 
201
- /**
202
- * Screenshot template
203
- */
204
146
  export interface ScreenshotTemplate {
205
147
  id: string;
206
148
  name: string;
@@ -209,9 +151,6 @@ export interface ScreenshotTemplate {
209
151
  thumbnail?: string;
210
152
  }
211
153
 
212
- /**
213
- * App Store metadata
214
- */
215
154
  export interface AppStoreMetadata {
216
155
  appName: string;
217
156
  subtitle: string;
@@ -221,9 +160,6 @@ export interface AppStoreMetadata {
221
160
  whatsNew: string;
222
161
  }
223
162
 
224
- /**
225
- * Screenshot project
226
- */
227
163
  export interface ScreenshotProject {
228
164
  id: string;
229
165
  name: string;