@yoamigo.com/core 0.1.9 → 0.1.11
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/dist/index.js +44 -7
- package/dist/lib.js +44 -7
- package/package.json +2 -2
package/dist/index.js
CHANGED
|
@@ -198,6 +198,9 @@ var BuilderSelectionManager = class {
|
|
|
198
198
|
case "CLEAR_SELECTIONS":
|
|
199
199
|
this.clearAllSelections();
|
|
200
200
|
break;
|
|
201
|
+
case "REQUEST_SCREENSHOT":
|
|
202
|
+
this.captureFullPageScreenshot();
|
|
203
|
+
break;
|
|
201
204
|
case "REQUEST_REGION_SCREENSHOT":
|
|
202
205
|
if (data.region) {
|
|
203
206
|
this.captureRegionScreenshot(data.region);
|
|
@@ -572,6 +575,41 @@ var BuilderSelectionManager = class {
|
|
|
572
575
|
container.style.height = `${rect.height}px`;
|
|
573
576
|
});
|
|
574
577
|
};
|
|
578
|
+
/**
|
|
579
|
+
* Capture a full-page screenshot for loading placeholder
|
|
580
|
+
* Uses html2canvas to render the page at reduced quality for smaller file size
|
|
581
|
+
*/
|
|
582
|
+
async captureFullPageScreenshot() {
|
|
583
|
+
try {
|
|
584
|
+
console.log("[BuilderSelection] Capturing full-page screenshot");
|
|
585
|
+
const html2canvas = (await import("html2canvas-pro")).default;
|
|
586
|
+
const overlays = document.querySelectorAll(".builder-selection-container, #builder-hover-overlay");
|
|
587
|
+
overlays.forEach((el) => {
|
|
588
|
+
;
|
|
589
|
+
el.style.display = "none";
|
|
590
|
+
});
|
|
591
|
+
const canvas = await html2canvas(document.body, {
|
|
592
|
+
scale: 0.5,
|
|
593
|
+
// Lower resolution for placeholder
|
|
594
|
+
logging: false,
|
|
595
|
+
useCORS: true,
|
|
596
|
+
allowTaint: true,
|
|
597
|
+
backgroundColor: null
|
|
598
|
+
});
|
|
599
|
+
overlays.forEach((el) => {
|
|
600
|
+
;
|
|
601
|
+
el.style.display = "";
|
|
602
|
+
});
|
|
603
|
+
const dataUrl = canvas.toDataURL("image/jpeg", 0.6);
|
|
604
|
+
console.log("[BuilderSelection] Full-page screenshot captured, size:", dataUrl.length);
|
|
605
|
+
this.sendToParent({
|
|
606
|
+
type: "SCREENSHOT_READY",
|
|
607
|
+
dataUrl
|
|
608
|
+
});
|
|
609
|
+
} catch (error) {
|
|
610
|
+
console.error("[BuilderSelection] Full-page screenshot failed:", error);
|
|
611
|
+
}
|
|
612
|
+
}
|
|
575
613
|
/**
|
|
576
614
|
* Capture a region of the page as a screenshot
|
|
577
615
|
* Uses html2canvas to render the page and then crops to the specified region
|
|
@@ -579,14 +617,14 @@ var BuilderSelectionManager = class {
|
|
|
579
617
|
async captureRegionScreenshot(region) {
|
|
580
618
|
try {
|
|
581
619
|
console.log("[BuilderSelection] Capturing region screenshot:", region);
|
|
582
|
-
const html2canvas = (await import("html2canvas")).default;
|
|
620
|
+
const html2canvas = (await import("html2canvas-pro")).default;
|
|
583
621
|
const overlays = document.querySelectorAll(".builder-selection-container, #builder-hover-overlay");
|
|
584
622
|
overlays.forEach((el) => {
|
|
585
623
|
;
|
|
586
624
|
el.style.display = "none";
|
|
587
625
|
});
|
|
588
626
|
const canvas = await html2canvas(document.body, {
|
|
589
|
-
scale:
|
|
627
|
+
scale: 1,
|
|
590
628
|
logging: false,
|
|
591
629
|
useCORS: true,
|
|
592
630
|
allowTaint: true,
|
|
@@ -597,12 +635,11 @@ var BuilderSelectionManager = class {
|
|
|
597
635
|
;
|
|
598
636
|
el.style.display = "";
|
|
599
637
|
});
|
|
600
|
-
const scale = window.devicePixelRatio || 1;
|
|
601
638
|
const scaledRegion = {
|
|
602
|
-
x: Math.round(region.x
|
|
603
|
-
y: Math.round(region.y
|
|
604
|
-
width: Math.round(region.width
|
|
605
|
-
height: Math.round(region.height
|
|
639
|
+
x: Math.round(region.x),
|
|
640
|
+
y: Math.round(region.y),
|
|
641
|
+
width: Math.round(region.width),
|
|
642
|
+
height: Math.round(region.height)
|
|
606
643
|
};
|
|
607
644
|
const croppedCanvas = document.createElement("canvas");
|
|
608
645
|
croppedCanvas.width = scaledRegion.width;
|
package/dist/lib.js
CHANGED
|
@@ -157,6 +157,9 @@ var BuilderSelectionManager = class {
|
|
|
157
157
|
case "CLEAR_SELECTIONS":
|
|
158
158
|
this.clearAllSelections();
|
|
159
159
|
break;
|
|
160
|
+
case "REQUEST_SCREENSHOT":
|
|
161
|
+
this.captureFullPageScreenshot();
|
|
162
|
+
break;
|
|
160
163
|
case "REQUEST_REGION_SCREENSHOT":
|
|
161
164
|
if (data.region) {
|
|
162
165
|
this.captureRegionScreenshot(data.region);
|
|
@@ -531,6 +534,41 @@ var BuilderSelectionManager = class {
|
|
|
531
534
|
container.style.height = `${rect.height}px`;
|
|
532
535
|
});
|
|
533
536
|
};
|
|
537
|
+
/**
|
|
538
|
+
* Capture a full-page screenshot for loading placeholder
|
|
539
|
+
* Uses html2canvas to render the page at reduced quality for smaller file size
|
|
540
|
+
*/
|
|
541
|
+
async captureFullPageScreenshot() {
|
|
542
|
+
try {
|
|
543
|
+
console.log("[BuilderSelection] Capturing full-page screenshot");
|
|
544
|
+
const html2canvas = (await import("html2canvas-pro")).default;
|
|
545
|
+
const overlays = document.querySelectorAll(".builder-selection-container, #builder-hover-overlay");
|
|
546
|
+
overlays.forEach((el) => {
|
|
547
|
+
;
|
|
548
|
+
el.style.display = "none";
|
|
549
|
+
});
|
|
550
|
+
const canvas = await html2canvas(document.body, {
|
|
551
|
+
scale: 0.5,
|
|
552
|
+
// Lower resolution for placeholder
|
|
553
|
+
logging: false,
|
|
554
|
+
useCORS: true,
|
|
555
|
+
allowTaint: true,
|
|
556
|
+
backgroundColor: null
|
|
557
|
+
});
|
|
558
|
+
overlays.forEach((el) => {
|
|
559
|
+
;
|
|
560
|
+
el.style.display = "";
|
|
561
|
+
});
|
|
562
|
+
const dataUrl = canvas.toDataURL("image/jpeg", 0.6);
|
|
563
|
+
console.log("[BuilderSelection] Full-page screenshot captured, size:", dataUrl.length);
|
|
564
|
+
this.sendToParent({
|
|
565
|
+
type: "SCREENSHOT_READY",
|
|
566
|
+
dataUrl
|
|
567
|
+
});
|
|
568
|
+
} catch (error) {
|
|
569
|
+
console.error("[BuilderSelection] Full-page screenshot failed:", error);
|
|
570
|
+
}
|
|
571
|
+
}
|
|
534
572
|
/**
|
|
535
573
|
* Capture a region of the page as a screenshot
|
|
536
574
|
* Uses html2canvas to render the page and then crops to the specified region
|
|
@@ -538,14 +576,14 @@ var BuilderSelectionManager = class {
|
|
|
538
576
|
async captureRegionScreenshot(region) {
|
|
539
577
|
try {
|
|
540
578
|
console.log("[BuilderSelection] Capturing region screenshot:", region);
|
|
541
|
-
const html2canvas = (await import("html2canvas")).default;
|
|
579
|
+
const html2canvas = (await import("html2canvas-pro")).default;
|
|
542
580
|
const overlays = document.querySelectorAll(".builder-selection-container, #builder-hover-overlay");
|
|
543
581
|
overlays.forEach((el) => {
|
|
544
582
|
;
|
|
545
583
|
el.style.display = "none";
|
|
546
584
|
});
|
|
547
585
|
const canvas = await html2canvas(document.body, {
|
|
548
|
-
scale:
|
|
586
|
+
scale: 1,
|
|
549
587
|
logging: false,
|
|
550
588
|
useCORS: true,
|
|
551
589
|
allowTaint: true,
|
|
@@ -556,12 +594,11 @@ var BuilderSelectionManager = class {
|
|
|
556
594
|
;
|
|
557
595
|
el.style.display = "";
|
|
558
596
|
});
|
|
559
|
-
const scale = window.devicePixelRatio || 1;
|
|
560
597
|
const scaledRegion = {
|
|
561
|
-
x: Math.round(region.x
|
|
562
|
-
y: Math.round(region.y
|
|
563
|
-
width: Math.round(region.width
|
|
564
|
-
height: Math.round(region.height
|
|
598
|
+
x: Math.round(region.x),
|
|
599
|
+
y: Math.round(region.y),
|
|
600
|
+
width: Math.round(region.width),
|
|
601
|
+
height: Math.round(region.height)
|
|
565
602
|
};
|
|
566
603
|
const croppedCanvas = document.createElement("canvas");
|
|
567
604
|
croppedCanvas.width = scaledRegion.width;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@yoamigo.com/core",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.11",
|
|
4
4
|
"description": "Core components, router, and utilities for YoAmigo templates",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "SEE LICENSE IN LICENSE",
|
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
},
|
|
64
64
|
"dependencies": {
|
|
65
65
|
"clsx": "^2.1.1",
|
|
66
|
-
"html2canvas": "^1.
|
|
66
|
+
"html2canvas-pro": "^1.6.1",
|
|
67
67
|
"preact": "^10.27.2",
|
|
68
68
|
"wouter": "^3.8.0"
|
|
69
69
|
},
|