Build the node graph frontend with placeholder graph info (#581)

* Build the node graph frontend

* Graph pan and zoom

* Graph's dot grid now pans/zooms also

* Interactive horisontal to vertical curves

* Data types and zooming on wires

* Icon definitions code beautification

* Add a visibility toggle

Co-authored-by: 0hypercube <[email protected]>

Author: Keavon

editor/src/communication/dispatcher.rs

@@ -4,6 +4,7 @@ use crate::input::{InputMapperMessageHandler, InputPreprocessorMessageHandler};
 use crate::layout::layout_message_handler::LayoutMessageHandler;
 use crate::message_prelude::*;
 use crate::viewport_tools::tool_message_handler::ToolMessageHandler;
+use crate::workspace::WorkspaceMessageHandler;
 
 use std::collections::VecDeque;
 
@@ -27,6 +28,7 @@ struct DispatcherMessageHandlers {
 	layout_message_handler: LayoutMessageHandler,
 	portfolio_message_handler: PortfolioMessageHandler,
 	tool_message_handler: ToolMessageHandler,
+	workspace_message_handler: WorkspaceMessageHandler,
 }
 
 /// For optimization, these are messages guaranteed to be redundant when repeated.
@@ -40,7 +42,7 @@ const SIDE_EFFECT_FREE_MESSAGES: &[MessageDiscriminant] = &[
 	))),
 	MessageDiscriminant::Portfolio(PortfolioMessageDiscriminant::Document(DocumentMessageDiscriminant::FolderChanged)),
 	MessageDiscriminant::Frontend(FrontendMessageDiscriminant::UpdateDocumentLayer),
-	MessageDiscriminant::Frontend(FrontendMessageDiscriminant::DisplayDocumentLayerTreeStructure),
+	MessageDiscriminant::Frontend(FrontendMessageDiscriminant::UpdateDocumentLayerTreeStructure),
 	MessageDiscriminant::Frontend(FrontendMessageDiscriminant::UpdateOpenDocumentsList),
 	MessageDiscriminant::Tool(ToolMessageDiscriminant::DocumentIsDirty),
 ];
@@ -113,6 +115,11 @@ impl Dispatcher {
 						&mut self.message_queue,
 					);
 				}
+				Workspace(message) => {
+					self.message_handlers
+						.workspace_message_handler
+						.process_action(message, &self.message_handlers.input_preprocessor_message_handler, &mut self.message_queue);
+				}
 
 				#[remain::unsorted]
 				PopulateBuildMetadata { new } => self.build_metadata = new,

editor/src/communication/message.rs

@@ -39,6 +39,8 @@ pub enum Message {
 	Portfolio(PortfolioMessage),
 	#[child]
 	Tool(ToolMessage),
+	#[child]
+	Workspace(WorkspaceMessage),
 
 	#[remain::unsorted]
 	PopulateBuildMetadata { new: BuildMetadata },

editor/src/document/document_message_handler.rs

@@ -846,7 +846,7 @@ impl MessageHandler<DocumentMessage, &InputPreprocessorMessageHandler> for Docum
 			DocumentHistoryForward => self.redo(responses).unwrap_or_else(|e| log::warn!("{}", e)),
 			DocumentStructureChanged => {
 				let data_buffer: RawBuffer = self.serialize_root().into();
-				responses.push_back(FrontendMessage::DisplayDocumentLayerTreeStructure { data_buffer }.into())
+				responses.push_back(FrontendMessage::UpdateDocumentLayerTreeStructure { data_buffer }.into())
 			}
 			DuplicateSelectedLayers => {
 				self.backup(responses);

editor/src/frontend/frontend_message.rs

@@ -16,7 +16,6 @@ pub enum FrontendMessage {
 	DisplayDialog { icon: String },
 	DisplayDialogDismiss,
 	DisplayDialogPanic { panic_info: String, title: String, description: String },
-	DisplayDocumentLayerTreeStructure { data_buffer: RawBuffer },
 	DisplayEditableTextbox { text: String, line_width: Option<f64>, font_size: f64, color: Color },
 	DisplayRemoveEditableTextbox,
 
@@ -43,12 +42,14 @@ pub enum FrontendMessage {
 	UpdateDocumentArtwork { svg: String },
 	UpdateDocumentBarLayout { layout_target: LayoutTarget, layout: SubLayout },
 	UpdateDocumentLayer { data: LayerPanelEntry },
+	UpdateDocumentLayerTreeStructure { data_buffer: RawBuffer },
 	UpdateDocumentOverlays { svg: String },
 	UpdateDocumentRulers { origin: (f64, f64), spacing: f64, interval: f64 },
 	UpdateDocumentScrollbars { position: (f64, f64), size: (f64, f64), multiplier: (f64, f64) },
 	UpdateImageData { image_data: Vec<FrontendImageData> },
 	UpdateInputHints { hint_data: HintData },
 	UpdateMouseCursor { cursor: MouseCursorIcon },
+	UpdateNodeGraphVisibility { visible: bool },
 	UpdateOpenDocumentsList { open_documents: Vec<FrontendDocumentDetails> },
 	UpdatePropertyPanelOptionsLayout { layout_target: LayoutTarget, layout: SubLayout },
 	UpdatePropertyPanelSectionsLayout { layout_target: LayoutTarget, layout: SubLayout },

editor/src/lib.rs

@@ -11,6 +11,7 @@ pub mod global;
 pub mod input;
 pub mod layout;
 pub mod viewport_tools;
+pub mod workspace;
 
 #[doc(inline)]
 pub use graphene::color::Color;
@@ -89,6 +90,7 @@ pub mod message_prelude {
 	pub use crate::viewport_tools::tools::shape_tool::{ShapeToolMessage, ShapeToolMessageDiscriminant};
 	pub use crate::viewport_tools::tools::spline_tool::{SplineToolMessage, SplineToolMessageDiscriminant};
 	pub use crate::viewport_tools::tools::text_tool::{TextMessage, TextMessageDiscriminant};
+	pub use crate::workspace::{WorkspaceMessage, WorkspaceMessageDiscriminant};
 	pub use graphite_proc_macros::*;
 
 	pub use std::collections::VecDeque;

editor/src/workspace/mod.rs

@@ -0,0 +1,7 @@
+mod workspace_message;
+mod workspace_message_handler;
+
+#[doc(inline)]
+pub use workspace_message::{WorkspaceMessage, WorkspaceMessageDiscriminant};
+#[doc(inline)]
+pub use workspace_message_handler::WorkspaceMessageHandler;

editor/src/workspace/workspace_message.rs

@@ -0,0 +1,11 @@
+use crate::message_prelude::*;
+
+use serde::{Deserialize, Serialize};
+
+#[remain::sorted]
+#[impl_message(Message, Workspace)]
+#[derive(PartialEq, Clone, Debug, Serialize, Deserialize)]
+pub enum WorkspaceMessage {
+	// Messages
+	NodeGraphToggleVisibility,
+}

editor/src/workspace/workspace_message_handler.rs

@@ -0,0 +1,29 @@
+use crate::input::InputPreprocessorMessageHandler;
+use crate::message_prelude::*;
+
+#[derive(Debug, Clone, Default)]
+pub struct WorkspaceMessageHandler {
+	node_graph_visible: bool,
+}
+
+impl MessageHandler<WorkspaceMessage, &InputPreprocessorMessageHandler> for WorkspaceMessageHandler {
+	#[remain::check]
+	fn process_action(&mut self, message: WorkspaceMessage, _ipp: &InputPreprocessorMessageHandler, responses: &mut VecDeque<Message>) {
+		use WorkspaceMessage::*;
+
+		#[remain::sorted]
+		match message {
+			// Messages
+			NodeGraphToggleVisibility => {
+				self.node_graph_visible = !self.node_graph_visible;
+				responses.push_back(FrontendMessage::UpdateNodeGraphVisibility { visible: self.node_graph_visible }.into());
+			}
+		}
+	}
+
+	fn actions(&self) -> ActionList {
+		actions!(WorkspaceMessageDiscriminant;
+			NodeGraphToggleVisibility,
+		)
+	}
+}

frontend/assets/16px-solid/node-blur.svg

@@ -70,8 +70,12 @@
 	--color-data-general-rgb: 197, 197, 197;
 	--color-data-vector: #65bbe5;
 	--color-data-vector-rgb: 101, 187, 229;
+	--color-data-vector-dim: #4b778c;
+	--color-data-vector-dim-rgb: 75, 119, 140;
 	--color-data-raster: #e4bb72;
 	--color-data-raster-rgb: 228, 187, 114;
+	--color-data-raster-dim: #8b7752;
+	--color-data-raster-dim-rgb: 139, 119, 82;
 	--color-data-mask: #8d85c7;
 	--color-data-mask-rgb: 141, 133, 199;
 	--color-data-unused1: #d6536e;
@@ -258,9 +262,10 @@ import { createAutoSaveManager } from "@/lifetime/auto-save";
 import { initErrorHandling } from "@/lifetime/errors";
 import { createInputManager, InputManager } from "@/lifetime/input";
 import { createDialogState, DialogState } from "@/state/dialog";
-import { createDocumentsState, DocumentsState } from "@/state/documents";
 import { createFullscreenState, FullscreenState } from "@/state/fullscreen";
+import { createPortfolioState, PortfolioState } from "@/state/portfolio";
 import { createEditorState, EditorState } from "@/state/wasm-loader";
+import { createWorkspaceState, WorkspaceState } from "@/state/workspace";
 
 import LayoutCol from "@/components/layout/LayoutCol.vue";
 import LayoutRow from "@/components/layout/LayoutRow.vue";
@@ -270,7 +275,8 @@ import MainWindow from "@/components/window/MainWindow.vue";
 declare module "@vue/runtime-core" {
 	interface ComponentCustomProperties {
 		dialog: DialogState;
-		documents: DocumentsState;
+		portfolio: PortfolioState;
+		workspace: WorkspaceState;
 		fullscreen: FullscreenState;
 		editor: EditorState;
 		// This must be set to optional because there is a time in the lifecycle of the component where inputManager is undefined.
@@ -284,7 +290,8 @@ export default defineComponent({
 		return {
 			editor: this.editor,
 			dialog: this.dialog,
-			documents: this.documents,
+			portfolio: this.portfolio,
+			workspace: this.workspace,
 			fullscreen: this.fullscreen,
 			inputManager: this.inputManager,
 		};
@@ -295,15 +302,17 @@ export default defineComponent({
 
 		// Initialize other stateful Vue systems
 		const dialog = createDialogState(editor);
-		const documents = createDocumentsState(editor);
+		const portfolio = createPortfolioState(editor);
+		const workspace = createWorkspaceState(editor);
 		const fullscreen = createFullscreenState();
 		initErrorHandling(editor, dialog);
-		createAutoSaveManager(editor, documents);
+		createAutoSaveManager(editor, portfolio);
 
 		return {
 			editor,
 			dialog,
-			documents,
+			portfolio,
+			workspace,
 			fullscreen,
 			showUnsupportedModal: !("BigInt64Array" in window),
 			inputManager: undefined as undefined | InputManager,
@@ -315,7 +324,7 @@ export default defineComponent({
 		},
 	},
 	mounted() {
-		this.inputManager = createInputManager(this.editor, this.$el.parentElement, this.dialog, this.documents, this.fullscreen);
+		this.inputManager = createInputManager(this.editor, this.$el.parentElement, this.dialog, this.portfolio, this.fullscreen);
 	},
 	beforeUnmount() {
 		this.inputManager?.removeListeners();

frontend/assets/16px-solid/node-brushwork.svg

@@ -1,5 +1,5 @@
 <template>
-	<LayoutCol class="layer-tree-panel">
+	<LayoutCol class="layer-tree">
 		<LayoutRow class="options-bar">
 			<DropdownInput
 				v-model:selectedIndex="blendModeSelectedIndex"
@@ -32,7 +32,7 @@
 			<IconButton :action="createEmptyFolder" :icon="'NodeFolder'" title="New Folder (Ctrl+Shift+N)" :size="24" />
 			<IconButton :action="deleteSelectedLayers" :icon="'Trash'" title="Delete Selected (Del)" :size="24" />
 		</LayoutRow>
-		<LayoutRow class="layer-tree" :scrollableY="true">
+		<LayoutRow class="layer-tree-rows" :scrollableY="true">
 			<LayoutCol class="list" ref="layerTreeList" @click="() => deselectAllLayers()" @dragover="(e) => draggable && updateInsertLine(e)" @dragend="() => draggable && drop()">
 				<LayoutRow
 					class="layer-row"
@@ -70,10 +70,10 @@
 						:title="`${listing.entry.name}\n${devMode ? 'Layer Path: ' + listing.entry.path.join(' / ') : ''}`.trim() || null"
 					>
 						<LayoutRow class="layer-type-icon">
-							<IconLabel v-if="listing.entry.layer_type === 'Folder'" :icon="'NodeFolder'" title="Folder" />
-							<IconLabel v-else-if="listing.entry.layer_type === 'Image'" :icon="'NodeImage'" title="Image" />
-							<IconLabel v-else-if="listing.entry.layer_type === 'Shape'" :icon="'NodeShape'" title="Shape" />
-							<IconLabel v-else-if="listing.entry.layer_type === 'Text'" :icon="'NodeText'" title="Path" />
+							<IconLabel v-if="listing.entry.layer_type === 'Folder'" :icon="'NodeFolder'" :style="'node'" title="Folder" />
+							<IconLabel v-else-if="listing.entry.layer_type === 'Image'" :icon="'NodeImage'" :style="'node'" title="Image" />
+							<IconLabel v-else-if="listing.entry.layer_type === 'Shape'" :icon="'NodeShape'" :style="'node'" title="Shape" />
+							<IconLabel v-else-if="listing.entry.layer_type === 'Text'" :icon="'NodeText'" :style="'node'" title="Path" />
 						</LayoutRow>
 						<LayoutRow class="layer-name" @dblclick="() => onEditLayerName(listing)">
 							<input
@@ -98,7 +98,7 @@
 </template>
 
 <style lang="scss">
-.layer-tree-panel {
+.layer-tree {
 	min-height: 0;
 
 	.options-bar {
@@ -117,7 +117,7 @@
 		}
 	}
 
-	.layer-tree {
+	.layer-tree-rows {
 		margin-top: 4px;
 		// Crop away the 1px border below the bottom layer entry when it uses the full space of this panel
 		margin-bottom: -1px;
@@ -202,12 +202,6 @@
 				.layer-type-icon {
 					flex: 0 0 auto;
 					margin: 0 4px;
-
-					.icon-label {
-						border-radius: 2px;
-						background: var(--color-node-background);
-						fill: var(--color-node-icon);
-					}
 				}
 
 				.layer-name {
@@ -289,7 +283,7 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 
-import { BlendMode, DisplayDocumentLayerTreeStructure, UpdateDocumentLayer, LayerPanelEntry } from "@/dispatcher/js-messages";
+import { BlendMode, UpdateDocumentLayerTreeStructure, UpdateDocumentLayer, LayerPanelEntry } from "@/dispatcher/js-messages";
 
 import LayoutCol from "@/components/layout/LayoutCol.vue";
 import LayoutRow from "@/components/layout/LayoutRow.vue";
@@ -573,14 +567,14 @@ export default defineComponent({
 		},
 	},
 	mounted() {
-		this.editor.dispatcher.subscribeJsMessage(DisplayDocumentLayerTreeStructure, (displayDocumentLayerTreeStructure) => {
+		this.editor.dispatcher.subscribeJsMessage(UpdateDocumentLayerTreeStructure, (updateDocumentLayerTreeStructure) => {
 			const layerWithNameBeingEdited = this.layers.find((layer: LayerListingInfo) => layer.editingName);
 			const layerPathWithNameBeingEdited = layerWithNameBeingEdited?.entry.path;
 			const layerIdWithNameBeingEdited = layerPathWithNameBeingEdited?.slice(-1)[0];
 			const path = [] as bigint[];
 			this.layers = [] as LayerListingInfo[];
 
-			const recurse = (folder: DisplayDocumentLayerTreeStructure, layers: LayerListingInfo[], cache: Map<string, LayerPanelEntry>): void => {
+			const recurse = (folder: UpdateDocumentLayerTreeStructure, layers: LayerListingInfo[], cache: Map<string, LayerPanelEntry>): void => {
 				folder.children.forEach((item, index) => {
 					// TODO: fix toString
 					const layerId = BigInt(item.layerId.toString());
@@ -603,7 +597,7 @@ export default defineComponent({
 				});
 			};
 
-			recurse(displayDocumentLayerTreeStructure, this.layers, this.layerCache);
+			recurse(updateDocumentLayerTreeStructure, this.layers, this.layerCache);
 		});
 
 		this.editor.dispatcher.subscribeJsMessage(UpdateDocumentLayer, (updateDocumentLayer) => {