diff --git a/src/components/DockBuilder/DockBuilder.jsx b/src/components/DockBuilder/DockBuilder.jsx
index d92c7cc..72d059e 100644
--- a/src/components/DockBuilder/DockBuilder.jsx
+++ b/src/components/DockBuilder/DockBuilder.jsx
@@ -521,10 +521,49 @@ export const DockBuilder = () => {
}, [editorMemo]);
const onPrintScreen = useCallback(() => {
- // convert the canvas to a data url and download it.
- // TODO: Print screen
- // TODO: print screen without background image and background color, the background image should be white
- // TODO: after printing, the background image and background color should be restored
+ // Save current background
+ const originalBgColor = editorMemo.backgroundColor;
+ const originalBgImage = editorMemo.backgroundImage;
+
+ // Set background to white for printing
+ editorMemo.setBackgroundColor(
+ "#fff",
+ editorMemo.renderAll.bind(editorMemo)
+ );
+ editorMemo.setBackgroundImage(null, editorMemo.renderAll.bind(editorMemo));
+
+ // Give time for background to update
+ setTimeout(() => {
+ const dataUrl = editorMemo.toDataURL({
+ format: "png",
+ enableRetinaScaling: true,
+ });
+ const printWindow = window.open("", "_blank");
+ if (printWindow) {
+ printWindow.document.write(
+ 'Print Canvas
'
+ );
+ printWindow.document.close();
+ printWindow.focus();
+ printWindow.onload = function () {
+ printWindow.print();
+ printWindow.close();
+ };
+ }
+ // Restore original background
+ editorMemo.setBackgroundColor(
+ originalBgColor,
+ editorMemo.renderAll.bind(editorMemo)
+ );
+ if (originalBgImage) {
+ editorMemo.setBackgroundImage(
+ originalBgImage,
+ editorMemo.renderAll.bind(editorMemo)
+ );
+ }
+ }, 200);
}, [editorMemo]);
const CopySelection = () => {