jess
/
Graphite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix image flickering while Imaginate layers generate

This commit is contained in:
Keavon Chambers 2022-10-24 20:40:06 -07:00
parent d2e23d6b15
commit c3fbc4eac9
2 changed files with 20 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/src/state-providers/portfolio.ts
View File

@ -2,7 +2,7 @@
import { reactive, readonly } from "vue"; import { reactive, readonly } from "vue";
import { downloadFileText, downloadFileBlob, upload } from "@/utility-functions/files"; import { downloadFileText, downloadFileBlob, upload } from "@/utility-functions/files";
import { imaginateGenerate, imaginateCheckConnection, imaginateTerminate } from "@/utility-functions/imaginate"; import { imaginateGenerate, imaginateCheckConnection, imaginateTerminate, preloadAndSetImaginateBlobURL } from "@/utility-functions/imaginate";
import { rasterizeSVG } from "@/utility-functions/rasterization"; import { rasterizeSVG } from "@/utility-functions/rasterization";
import { type Editor } from "@/wasm-communication/editor"; import { type Editor } from "@/wasm-communication/editor";
import { import {
@ -75,9 +75,7 @@ export function createPortfolioState(editor: Editor) {
// Rasterize the SVG to an image file // Rasterize the SVG to an image file
image = await rasterizeSVG(baseImage.svg, baseImage.size[0], baseImage.size[1], "image/png"); image = await rasterizeSVG(baseImage.svg, baseImage.size[0], baseImage.size[1], "image/png");
const blobURL = URL.createObjectURL(image); preloadAndSetImaginateBlobURL(editor, image, documentId, layerPath, baseImage.size[0], baseImage.size[1]);
editor.instance.setImaginateBlobURL(documentId, layerPath, blobURL, baseImage.size[0], baseImage.size[1]);
} }
imaginateGenerate(parameters, image, hostname, refreshFrequency, documentId, layerPath, editor); imaginateGenerate(parameters, image, hostname, refreshFrequency, documentId, layerPath, editor);
@ -94,9 +92,12 @@ export function createPortfolioState(editor: Editor) {
const blobURL = URL.createObjectURL(blob); const blobURL = URL.createObjectURL(blob);
const image = await createImageBitmap(blob); // Pre-decode the image so it is ready to be drawn instantly once it's placed into the viewport SVG
const image = new Image();
image.src = blobURL;
await image.decode();
editor.instance.setImageBlobURL(updateImageData.documentId, element.path, blobURL, image.width, image.height); editor.instance.setImageBlobURL(updateImageData.documentId, element.path, blobURL, image.naturalWidth, image.naturalHeight);
}); });
}); });
editor.subscriptions.subscribeJsMessage(TriggerRevokeBlobUrl, async (triggerRevokeBlobUrl) => { editor.subscriptions.subscribeJsMessage(TriggerRevokeBlobUrl, async (triggerRevokeBlobUrl) => {

17
frontend/src/utility-functions/imaginate.ts
View File

@ -73,8 +73,7 @@ export async function imaginateGenerate(
editor.instance.setImaginateGeneratingStatus(documentId, layerPath, percent, newStatus); editor.instance.setImaginateGeneratingStatus(documentId, layerPath, percent, newStatus);
// Send the backend a blob URL for the final image // Send the backend a blob URL for the final image
const blobURL = URL.createObjectURL(blob); preloadAndSetImaginateBlobURL(editor, blob, documentId, layerPath, parameters.resolution.x, parameters.resolution.y);
editor.instance.setImaginateBlobURL(documentId, layerPath, blobURL, parameters.resolution.x, parameters.resolution.y);
// Send the backend the blob data to be stored persistently in the layer // Send the backend the blob data to be stored persistently in the layer
const u8Array = new Uint8Array(await blob.arrayBuffer()); const u8Array = new Uint8Array(await blob.arrayBuffer());
@ -112,6 +111,17 @@ export async function imaginateCheckConnection(hostname: string, editor: Editor)
editor.instance.setImaginateServerStatus(serverReached); editor.instance.setImaginateServerStatus(serverReached);
} }
export async function preloadAndSetImaginateBlobURL(editor: Editor, blob: Blob, documentId: bigint, layerPath: BigUint64Array, width: number, height: number): Promise<void> {
const blobURL = URL.createObjectURL(blob);
// Pre-decode the image so it is ready to be drawn instantly once it's placed into the viewport SVG
const image = new Image();
image.src = blobURL;
await image.decode();
editor.instance.setImaginateBlobURL(documentId, layerPath, blobURL, width, height);
}
// ABORTING AND RESETTING HELPERS // ABORTING AND RESETTING HELPERS
function abortAndResetGenerating(): void { function abortAndResetGenerating(): void {
@ -148,8 +158,7 @@ function scheduleNextPollingUpdate(
const [blob, percentComplete] = await pollImage(hostname); const [blob, percentComplete] = await pollImage(hostname);
if (terminated) return; if (terminated) return;
const blobURL = URL.createObjectURL(blob); preloadAndSetImaginateBlobURL(editor, blob, documentId, layerPath, resolution.x, resolution.y);
editor.instance.setImaginateBlobURL(documentId, layerPath, blobURL, resolution.x, resolution.y);
editor.instance.setImaginateGeneratingStatus(documentId, layerPath, percentComplete, "Generating"); editor.instance.setImaginateGeneratingStatus(documentId, layerPath, percentComplete, "Generating");
scheduleNextPollingUpdate(interval, nextTimeoutBegan, 0, editor, hostname, documentId, layerPath, resolution); scheduleNextPollingUpdate(interval, nextTimeoutBegan, 0, editor, hostname, documentId, layerPath, resolution);