mirrors/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2025-08-04 05:18:19 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Fix image flickering while Imaginate layers generate

Browse source
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
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 { 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 { type Editor } from "@/wasm-communication/editor";
import {
@ -75,9 +75,7 @@ export function createPortfolioState(editor: Editor) {
// Rasterize the SVG to an image file
image = await rasterizeSVG(baseImage.svg, baseImage.size[0], baseImage.size[1], "image/png");
const blobURL = URL.createObjectURL(image);
editor.instance.setImaginateBlobURL(documentId, layerPath, blobURL, baseImage.size[0], baseImage.size[1]);
preloadAndSetImaginateBlobURL(editor, image, documentId, layerPath, baseImage.size[0], baseImage.size[1]);
}
imaginateGenerate(parameters, image, hostname, refreshFrequency, documentId, layerPath, editor);
@ -94,9 +92,12 @@ export function createPortfolioState(editor: Editor) {
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) => {

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

@ -73,8 +73,7 @@ export async function imaginateGenerate(
editor.instance.setImaginateGeneratingStatus(documentId, layerPath, percent, newStatus);
// Send the backend a blob URL for the final image
const blobURL = URL.createObjectURL(blob);
editor.instance.setImaginateBlobURL(documentId, layerPath, blobURL, parameters.resolution.x, parameters.resolution.y);
preloadAndSetImaginateBlobURL(editor, blob, documentId, layerPath, parameters.resolution.x, parameters.resolution.y);
// Send the backend the blob data to be stored persistently in the layer
const u8Array = new Uint8Array(await blob.arrayBuffer());
@ -112,6 +111,17 @@ export async function imaginateCheckConnection(hostname: string, editor: Editor)
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
function abortAndResetGenerating(): void {
@ -148,8 +158,7 @@ function scheduleNextPollingUpdate(
const [blob, percentComplete] = await pollImage(hostname);
if (terminated) return;
const blobURL = URL.createObjectURL(blob);
editor.instance.setImaginateBlobURL(documentId, layerPath, blobURL, resolution.x, resolution.y);
preloadAndSetImaginateBlobURL(editor, blob, documentId, layerPath, resolution.x, resolution.y);
editor.instance.setImaginateGeneratingStatus(documentId, layerPath, percentComplete, "Generating");
scheduleNextPollingUpdate(interval, nextTimeoutBegan, 0, editor, hostname, documentId, layerPath, resolution);