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

Integrate the node graph as a Node Graph Frame layer type (#812)

Browse source 
* Add node graph frame tool

* Add a brighten

* Use the node graph

* Fix topological_sort

* Update UI

* Add icons for the tool and layer type

* Avoid serde & use bitmaps to improve performance

* Allow serialising a node graph

* Fix missing ..Default::default()

* Fix incorrect comments

* Cache node graph output image

* Suppress no-cycle import warning

Co-authored-by: Keavon Chambers <keavon@keavon.com>
This commit is contained in:
0HyperCube 2022-11-05 21:38:14 +00:00 • committed by Keavon Chambers
parent 1462d2b662
commit 18507b78ac
33 changed files with 1018 additions and 258 deletions
Download patch file Download diff file Expand all files Collapse all files

7
frontend/assets/icon-16px-solid/node-nodes.svg Normal file
View file

@ -0,0 +1,7 @@
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<polygon points="3,1 1,1 0,1 0,2 0,4 1,4 1,2 3,2" />
<polygon points="15,1 13,1 13,2 15,2 15,4 16,4 16,2 16,1" />
<polygon points="1,14 1,12 0,12 0,14 0,15 1,15 3,15 3,14" />
<polygon points="15,12 15,14 13,14 13,15 15,15 16,15 16,14 16,12" />
<path d="M11,7h2c0.5,0,1-0.5,1-1V4c0-0.5-0.5-1-1-1h-2c-0.5,0-1,0.5-1,1v0.5L9.8,4.5C9.1,4.8,8.6,5.3,7.9,5.8C7.1,6.5,6.3,7.2,5,7.5V7c0-0.5-0.5-1-1-1H2C1.5,6,1,6.5,1,7v2c0,0.5,0.5,1,1,1h2c0.5,0,1-0.5,1-1V8.5c1.3,0.3,2.1,1,2.9,1.7c0.6,0.5,1.2,1,1.9,1.3l0.2,0.1V12c0,0.5,0.5,1,1,1h2c0.5,0,1-0.5,1-1v-2c0-0.5-0.5-1-1-1h-2c-0.5,0-1,0.5-1,1v0.5c-0.5-0.2-0.9-0.6-1.4-1C8,9,7.4,8.4,6.5,8C7.4,7.6,8,7,8.6,6.5c0.5-0.4,0.9-0.8,1.4-1V6C10,6.5,10.5,7,11,7z" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 763 B

6
frontend/assets/icon-24px-two-tone/raster-nodes-tool.svg Normal file
View file

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path class="color-raster" d="M23,18c0,1.1-0.9,2-2,2h-4c-1.1,0-2-0.9-2-2v-2c0-1.1,0.9-2,2-2h4c1.1,0,2,0.9,2,2V18z" />
<path class="color-raster" d="M23,8c0,1.1-0.9,2-2,2h-4c-1.1,0-2-0.9-2-2V6c0-1.1,0.9-2,2-2h4c1.1,0,2,0.9,2,2V8z" />
<path class="color-raster" d="M9,13c0,1.1-0.9,2-2,2H3c-1.1,0-2-0.9-2-2v-2c0-1.1,0.9-2,2-2h4c1.1,0,2,0.9,2,2V13z" />
<path class="color-solid" d="M12.9,9.3c0.2-1,0.4-1.6,1.1-1.8v-1l-0.1,0c-1.5,0.3-1.7,1.6-2,2.6c-0.3,1.2-0.5,2.1-1.9,2.4v1c1.5,0.2,1.7,1.2,1.9,2.4c0.2,1,0.5,2.3,2,2.6l0.1,0v-1c-0.7-0.2-0.9-0.8-1.1-1.8c-0.2-0.9-0.4-2-1.4-2.7C12.5,11.3,12.7,10.2,12.9,9.3z" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 677 B

11
frontend/src/state-providers/portfolio.ts
View file

@ -3,7 +3,7 @@ import { reactive, readonly } from "vue";
import { downloadFileText, downloadFileBlob, upload } from "@/utility-functions/files";
import { imaginateGenerate, imaginateCheckConnection, imaginateTerminate, preloadAndSetImaginateBlobURL } from "@/utility-functions/imaginate";
import { rasterizeSVG } from "@/utility-functions/rasterization";
import { rasterizeSVG, rasterizeSVGCanvas } from "@/utility-functions/rasterization";
import { type Editor } from "@/wasm-communication/editor";
import {
type FrontendDocumentDetails,
@ -14,6 +14,7 @@ import {
TriggerImaginateGenerate,
TriggerImaginateTerminate,
TriggerImaginateCheckServerStatus,
TriggerNodeGraphFrameGenerate,
UpdateActiveDocument,
UpdateOpenDocumentsList,
UpdateImageData,
@ -100,6 +101,14 @@ export function createPortfolioState(editor: Editor) {
editor.instance.setImageBlobURL(updateImageData.documentId, element.path, blobURL, image.naturalWidth, image.naturalHeight);
});
});
editor.subscriptions.subscribeJsMessage(TriggerNodeGraphFrameGenerate, async (triggerNodeGraphFrameGenerate) => {
const { documentId, layerPath, svg, size } = triggerNodeGraphFrameGenerate;
// Rasterize the SVG to an image file
const imageData = (await rasterizeSVGCanvas(svg, size[0], size[1])).getContext("2d")?.getImageData(0, 0, size[0], size[1]);
if (imageData) editor.instance.processNodeGraphFrame(documentId, layerPath, new Uint8Array(imageData.data), imageData.width, imageData.height);
});
editor.subscriptions.subscribeJsMessage(TriggerRevokeBlobUrl, async (triggerRevokeBlobUrl) => {
URL.revokeObjectURL(triggerRevokeBlobUrl.url);
});

4
frontend/src/utility-functions/icons.ts
View file

@ -112,6 +112,7 @@ import NodeImaginate from "@/../assets/icon-16px-solid/node-imaginate.svg";
import NodeMagicWand from "@/../assets/icon-16px-solid/node-magic-wand.svg";
import NodeMask from "@/../assets/icon-16px-solid/node-mask.svg";
import NodeMotionBlur from "@/../assets/icon-16px-solid/node-motion-blur.svg";
import NodeNodes from "@/../assets/icon-16px-solid/node-nodes.svg";
import NodeOutput from "@/../assets/icon-16px-solid/node-output.svg";
import NodeShape from "@/../assets/icon-16px-solid/node-shape.svg";
import NodeText from "@/../assets/icon-16px-solid/node-text.svg";
@ -168,6 +169,7 @@ const SOLID_16PX = {
NodeMagicWand: { component: NodeMagicWand, size: 16 },
NodeMask: { component: NodeMask, size: 16 },
NodeMotionBlur: { component: NodeMotionBlur, size: 16 },
NodeNodes: { component: NodeNodes, size: 16 },
NodeOutput: { component: NodeOutput, size: 16 },
NodeShape: { component: NodeShape, size: 16 },
NodeText: { component: NodeText, size: 16 },
@ -228,6 +230,7 @@ import RasterCloneTool from "@/../assets/icon-24px-two-tone/raster-clone-tool.sv
import RasterDetailTool from "@/../assets/icon-24px-two-tone/raster-detail-tool.svg";
import RasterHealTool from "@/../assets/icon-24px-two-tone/raster-heal-tool.svg";
import RasterImaginateTool from "@/../assets/icon-24px-two-tone/raster-imaginate-tool.svg";
import RasterNodesTool from "@/../assets/icon-24px-two-tone/raster-nodes-tool.svg";
import RasterPatchTool from "@/../assets/icon-24px-two-tone/raster-patch-tool.svg";
import RasterRelightTool from "@/../assets/icon-24px-two-tone/raster-relight-tool.svg";
import VectorEllipseTool from "@/../assets/icon-24px-two-tone/vector-ellipse-tool.svg";
@ -248,6 +251,7 @@ const TWO_TONE_24PX = {
GeneralNavigateTool: { component: GeneralNavigateTool, size: 24 },
GeneralSelectTool: { component: GeneralSelectTool, size: 24 },
RasterImaginateTool: { component: RasterImaginateTool, size: 24 },
RasterNodesTool: { component: RasterNodesTool, size: 24 },
RasterBrushTool: { component: RasterBrushTool, size: 24 },
RasterCloneTool: { component: RasterCloneTool, size: 24 },
RasterDetailTool: { component: RasterDetailTool, size: 24 },

16
frontend/src/wasm-communication/editor.ts
View file

@ -9,6 +9,20 @@ export type Editor = Readonly<ReturnType<typeof createEditor>>;
// `wasmImport` starts uninitialized because its initialization needs to occur asynchronously, and thus needs to occur by manually calling and awaiting `initWasm()`
let wasmImport: WasmRawInstance | undefined;
let editorInstance: WasmEditorInstance | undefined;
export async function updateImage(path: BigUint64Array, mime: string, imageData: Uint8Array, documentId: bigint): Promise<void> {
const blob = new Blob([imageData], { type: mime });
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();
editorInstance?.setImageBlobURL(documentId, path, blobURL, image.naturalWidth, image.naturalHeight);
}
// Should be called asynchronously before `createEditor()`
export async function initWasm(): Promise<void> {
@ -16,6 +30,7 @@ export async function initWasm(): Promise<void> {
if (wasmImport !== undefined) return;
// Import the WASM module JS bindings and wrap them in the panic proxy
// eslint-disable-next-line import/no-cycle
wasmImport = await import("@/../wasm/pkg").then(panicProxy);
// Provide a random starter seed which must occur after initializing the WASM module, since WASM can't generate its own random numbers
@ -36,6 +51,7 @@ export function createEditor() {
// We pass along the first two arguments then add our own `raw` and `instance` context for the last two arguments
subscriptions.handleJsMessage(messageType, messageData, raw, instance);
});
editorInstance = instance;
// Subscriptions: Allows subscribing to messages in JS that are sent from the WASM backend
const subscriptions: SubscriptionRouter = createSubscriptionRouter();

14
frontend/src/wasm-communication/messages.ts
View file

@ -514,6 +514,16 @@ export class TriggerImaginateTerminate extends JsMessage {
readonly hostname!: string;
}
export class TriggerNodeGraphFrameGenerate extends JsMessage {
readonly documentId!: bigint;
readonly layerPath!: BigUint64Array;
readonly svg!: string;
readonly size!: [number, number];
}
export class TriggerRefreshBoundsOfViewports extends JsMessage {}
export class TriggerRevokeBlobUrl extends JsMessage {
@ -641,7 +651,7 @@ export class LayerMetadata {
selected!: boolean;
}
export type LayerType = "Imaginate" | "Folder" | "Image" | "Shape" | "Text";
export type LayerType = "Imaginate" | "NodeGraphFrame" | "Folder" | "Image" | "Shape" | "Text";
export type LayerTypeData = {
name: string;
@ -651,6 +661,7 @@ export type LayerTypeData = {
export function layerTypeData(layerType: LayerType): LayerTypeData | undefined {
const entries: Record<string, LayerTypeData> = {
Imaginate: { name: "Imaginate", icon: "NodeImaginate" },
NodeGraphFrame: { name: "Node Graph Frame", icon: "NodeNodes" },
Folder: { name: "Folder", icon: "NodeFolder" },
Image: { name: "Image", icon: "NodeImage" },
Shape: { name: "Shape", icon: "NodeShape" },
@ -1218,6 +1229,7 @@ export const messageMakers: Record<string, MessageMaker> = {
TriggerImaginateCheckServerStatus,
TriggerImaginateGenerate,
TriggerImaginateTerminate,
TriggerNodeGraphFrameGenerate,
TriggerFileDownload,
TriggerFontLoad,
TriggerImport,

27
frontend/wasm/src/editor_api.rs
View file

@ -28,6 +28,13 @@ pub fn set_random_seed(seed: u64) {
editor::application::set_uuid_seed(seed);
}
/// We directly interface with the updateImage JS function for massively increased performance over serializing and deserializing.
/// This avoids creating a json with a list millions of numbers long.
#[wasm_bindgen(module = "@/wasm-communication/editor")]
extern "C" {
fn updateImage(path: Vec<u64>, mime: String, imageData: Vec<u8>, document_id: u64);
}
/// Provides a handle to access the raw WASM memory
#[wasm_bindgen(js_name = wasmMemory)]
pub fn wasm_memory() -> JsValue {
@ -90,6 +97,14 @@ impl JsEditorHandle {
// Sends a FrontendMessage to JavaScript
fn send_frontend_message_to_js(&self, message: FrontendMessage) {
// Special case for update image data to avoid serialization times.
if let FrontendMessage::UpdateImageData { document_id, image_data } = message {
for image in image_data {
updateImage(image.path, image.mime, image.image_data, document_id);
}
return;
}
let message_type = message.to_discriminant().local_name();
let serializer = serde_wasm_bindgen::Serializer::new().serialize_large_number_types_as_bigints(true);
@ -512,6 +527,18 @@ impl JsEditorHandle {
self.dispatch(message);
}
/// Sends the blob URL generated by JS to the Imaginate layer in the respective document
#[wasm_bindgen(js_name = processNodeGraphFrame)]
pub fn process_node_graph_frame(&self, document_id: u64, layer_path: Vec<LayerId>, image_data: Vec<u8>, width: u32, height: u32) {
let message = PortfolioMessage::ProcessNodeGraphFrame {
document_id,
layer_path,
image_data,
size: (width, height),
};
self.dispatch(message);
}
/// Pastes an image
#[wasm_bindgen(js_name = pasteImage)]
pub fn paste_image(&self, mime: String, image_data: Vec<u8>, mouse_x: Option<f64>, mouse_y: Option<f64>) {