prepare 1.1.5

Author: Yann Leflour

doc/setup-preview-url.md

@@ -15,6 +15,11 @@
 
 - The preview url should accept a `filePath` query parameter
 - The preview page, should load the Component from the `filePath` query parameter dynamically and render it
+- The preview page should be able to take a screenshot of itself and send it back
+  - It should listen for a `message` event in the shape of `{ action: 'take-screenshot', shapeid: string }`
+  - It should respond using `window.parent.postMessage({ screenshot: data, shapeid: event.data.shapeid }, '*');`
+  - If the screenshot is not sent back, after a timeout, a blank element will be rendered instead
+  - See the [sveltekit instructions](./setup-preview-url/sveltekit.md) for an example
 - The preview page should have hot reloading / live reload enabled
 - The preview url should be added to `ui-sketcher.previewUrl` in settings.json without any query parameters (e.g. `http://localhost:3000/preview`)
 

doc/setup-preview-url/sveltekit.md

@@ -10,15 +10,61 @@
 File path: `src/routes/(preview)/preview/+page.svelte`
 
 ```svelte
+<script context="module" lang="ts">
+  declare const html2canvas: (element: HTMLElement, options?: any) => Promise<HTMLCanvasElement>;
+</script>
+
 <script lang="ts">
+  import { onMount } from 'svelte';
   import { page } from '$app/stores';
 
   $: componentPath = '../../../../' + $page.url.searchParams.get('filePath');
   $: componentPromise = componentPath
     ? import(/* @vite-ignore */ componentPath).then((data) => data.default)
     : null;
+
+  onMount(() => {
+    console.debug('Listening for screenshot requests');
+    window.addEventListener(
+      'message',
+      function (event) {
+        if (event.data.action === 'take-screenshot' && event.data.shapeid) {
+          html2canvas(document.body, {
+            useCors: true,
+            foreignObjectRendering: true,
+            allowTaint: true,
+          })
+            .then(function (canvas) {
+              const data = canvas.toDataURL('image/png');
+              // console.debug('Sending screenshot to parent', data);
+              window.parent.postMessage({ screenshot: data, shapeid: event.data.shapeid }, '*');
+            })
+            .catch((e) => {
+              console.error(e);
+            });
+        }
+      },
+      false,
+    );
+
+    // and prevent the user from pinch-zooming into the iframe
+    document.body.addEventListener(
+      'wheel',
+      (e) => {
+        if (!e.ctrlKey) return;
+        e.preventDefault();
+      },
+      { passive: false },
+    );
+  });
 </script>
 
+<svelte:head>
+  <script
+    src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"
+  ></script>
+</svelte:head>
+
 {#await componentPromise}
   <h1>Loading...</h1>
 {:then Component}
@@ -27,4 +73,5 @@ File path: `src/routes/(preview)/preview/+page.svelte`
   <h1>Error loading component</h1>
   <pre>{error.message}</pre>
 {/await}
+
 ```

ui-sketcher-extension/CHANGELOG.md

@@ -1,31 +1,38 @@
 # Change Log
 
-## [1.1.4] - 2023-26-09
+## [1.1.5] - 2023-11-28
+
+### Changed
+
+- Preview now requires the page to handle a window event and respond with a base64 screenshot. Please make sure to check the preview URL setup guide
+- The generated screenshot will now be included in the rendered result
+
+## [1.1.4] - 2023-11-26
 
 ### Fixed
 
 - Error when closing the panel manually and closing the file after
 
-## [1.1.3] - 2023-23-09
+## [1.1.3] - 2023-11-23
 
 ### Fixed
 
 - Allow pasting images from clipboard
 - Allow embeddings from urls
 
-## [1.1.2] - 2023-22-09
+## [1.1.2] - 2023-11-22
 
 ### Fixed
 
 - Prevent panel unmount from deleting the extension's state
 
-## [1.1.1] - 2023-22-09
+## [1.1.1] - 2023-11-22
 
 ### Added
 
 - Preview iframe can now be interacted with
 
-## [1.1.0] - 2023-22-09
+## [1.1.0] - 2023-11-22
 
 ### Added
 
@@ -51,7 +58,7 @@
 
 - `ui-sketcher.includeFileInPrompt` setting
 
-## [1.0.5] - 2023-21-09
+## [1.0.5] - 2023-11-21
 
 ### Added
 

ui-sketcher-extension/package.json

@@ -20,7 +20,7 @@
     "url": "https://github.com/pAIrprogio/vscode-ui-sketcher"
   },
   "license": "MIT",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "icon": "images/icon.png",
   "engines": {
     "vscode": "^1.84.0"

ui-sketcher-extension/src/ui-sketcher-webview.ts

@@ -160,6 +160,7 @@ export class UiSketcherWebview {
     switch (message.command) {
       case "tldraw:export":
         const { base64, imageTexts } = message.payload;
+        // vscode.env.clipboard.writeText(base64); // Copies base64 to clipboard for debugging
         await this.createCompletion(base64, imageTexts);
         return;
       default:

ui-sketcher-webview/src/PreviewShape.tsx

@@ -46,10 +46,12 @@ export class PreviewShapeUtil extends BaseBoxShapeUtil<PreviewShape> {
     _ctx: SvgExportContext
   ): SVGElement | Promise<SVGElement> {
     const g = document.createElementNS("http://www.w3.org/2000/svg", "g");
-    // while screenshot is the same as the old one, keep waiting for a new one
-    return new Promise((resolve, _) => {
-      if (window === undefined) return resolve(g);
 
+    if (!this.iframeRef.current?.contentWindow) return g;
+
+    const contentWindow = this.iframeRef.current.contentWindow;
+
+    return new Promise((resolve, _) => {
       const windowListener = (event: MessageEvent) => {
         if (event.data.screenshot && event.data?.shapeid === shape.id) {
           const image = document.createElementNS(
@@ -61,8 +63,8 @@ export class PreviewShapeUtil extends BaseBoxShapeUtil<PreviewShape> {
             "href",
             event.data.screenshot
           );
-          image.setAttribute("width", shape.props.w.toString());
-          image.setAttribute("height", shape.props.h.toString());
+          image.setAttribute("width", (shape.props.w * 2).toString());
+          image.setAttribute("height", (shape.props.h * 2).toString());
           g.appendChild(image);
           window.removeEventListener("message", windowListener);
           clearTimeout(timeOut);
@@ -77,14 +79,10 @@ export class PreviewShapeUtil extends BaseBoxShapeUtil<PreviewShape> {
       window.addEventListener("message", windowListener);
       //request new screenshot
 
-      if (this.iframeRef.current?.contentWindow) {
-        this.iframeRef.current.contentWindow.postMessage(
-          { action: "take-screenshot", shapeid: shape.id },
-          "*"
-        );
-      } else {
-        console.log("iframe not found or not accessible");
-      }
+      contentWindow.postMessage(
+        { action: "take-screenshot", shapeid: shape.id },
+        "*"
+      );
     });
   }