Remove console spam (#1400)

* Remove console spam

* CSS Style

* Slight cleanup

---------

Co-authored-by: Keavon Chambers <keavon@keavon.com>

editor/src/messages/portfolio/portfolio_message_handler.rs

@@ -275,7 +275,6 @@ impl MessageHandler<PortfolioMessage, (&InputPreprocessorMessageHandler, &Prefer
 			}
 			PortfolioMessage::ImaginatePreferences => self.executor.update_imaginate_preferences(preferences.get_imaginate_preferences()),
 			PortfolioMessage::ImaginateServerHostname => {
-				debug!("setting imaginate persistent data");
 				self.persistent_data.imaginate.set_host_name(&preferences.imaginate_server_hostname);
 			}
 			PortfolioMessage::Import => {

editor/src/node_graph_executor.rs

@@ -222,7 +222,6 @@ impl NodeRuntime {
 			graphic_group.render_svg(&mut render, &render_params);
 			let [min, max] = bounds.unwrap_or_default();
 			render.format_svg(min, max);
-			debug!("SVG {}", render.svg);
 
 			if let Some(node_id) = node_path.get(node_path.len() - 2).copied() {
 				let graph_identifier = GraphIdentifier::new(layer_path.last().copied());
@@ -498,11 +497,10 @@ impl NodeGraphExecutor {
 				}
 			}
 			TaggedValue::Artboard(artboard) => {
-				debug!("{artboard:#?}");
+				warn!("Rendered graph produced artboard (which is not currently rendered): {artboard:#?}");
 				return Err("Artboard (see console)".to_string());
 			}
 			TaggedValue::GraphicGroup(graphic_group) => {
-				debug!("{graphic_group:#?}");
 				use graphene_core::renderer::{GraphicElementRendered, RenderParams, SvgRender};
 
 				// Setup rendering
@@ -521,8 +519,6 @@ impl NodeGraphExecutor {
 
 				// Send to frontend
 				responses.add(FrontendMessage::UpdateDocumentNodeRender { svg });
-
-				//return Err("Graphic group (see console)".to_string());
 			}
 			_ => {
 				return Err(format!("Invalid node graph output type: {:#?}", node_graph_output));

frontend/src/components/Editor.svelte

@@ -206,10 +206,10 @@
 				box-shadow: inset 0 0 0 1px var(--color-5-dullgray);
 				border: 2px solid transparent;
 				border-radius: 10px;
+			}
 
-				&:hover {
-					box-shadow: inset 0 0 0 1px var(--color-6-lowergray);
-				}
+			&:hover::-webkit-scrollbar-track {
+				box-shadow: inset 0 0 0 1px var(--color-6-lowergray);
 			}
 
 			&::-webkit-scrollbar-thumb {
@@ -218,10 +218,10 @@
 				border: 2px solid transparent;
 				border-radius: 10px;
 				margin: 2px;
+			}
 
-				&:hover {
-					background-color: var(--color-6-lowergray);
-				}
+			&:hover::-webkit-scrollbar-thumb {
+				background-color: var(--color-6-lowergray);
 			}
 
 			&::-webkit-scrollbar-corner {

frontend/src/components/layout/LayoutCol.svelte

@@ -23,6 +23,7 @@
 	}
 </script>
 
+<!-- Excluded events because these require `|passive` or `|nonpassive` modifiers. Use a <div> for these instead: `on:wheel`, `on:touchmove`, `on:touchstart` -->
 <div
 	class={`layout-col ${className} ${extraClasses}`.trim()}
 	class:scrollable-x={scrollableX}
@@ -53,7 +54,6 @@
 	on:mouseout
 	on:mouseup
 	on:select
-	on:wheel
 	on:drag
 	on:dragend
 	on:dragenter
@@ -63,8 +63,6 @@
 	on:drop
 	on:touchcancel
 	on:touchend
-	on:touchmove
-	on:touchstart
 	on:pointerover
 	on:pointerenter
 	on:pointerdown

frontend/src/components/layout/LayoutRow.svelte

@@ -23,6 +23,7 @@
 	}
 </script>
 
+<!-- Excluded events because these require `|passive` or `|nonpassive` modifiers. Use a <div> for these instead: `on:wheel`, `on:touchmove`, `on:touchstart` -->
 <div
 	class={`layout-row ${className} ${extraClasses}`.trim()}
 	class:scrollable-x={scrollableX}
@@ -53,7 +54,6 @@
 	on:mouseout
 	on:mouseup
 	on:select
-	on:wheel
 	on:drag
 	on:dragend
 	on:dragenter
@@ -63,8 +63,6 @@
 	on:drop
 	on:touchcancel
 	on:touchend
-	on:touchmove
-	on:touchstart
 	on:pointerover
 	on:pointerenter
 	on:pointerdown

frontend/src/components/panels/Document.svelte

@@ -40,9 +40,6 @@
 	const editor = getContext<Editor>("editor");
 	const document = getContext<DocumentState>("document");
 
-	// Graph view overlay
-	let graphViewOverlayOpen = false;
-
 	// Interactive text editing
 	let textInput: undefined | HTMLDivElement = undefined;
 	let showTextInput: boolean;
@@ -68,7 +65,6 @@
 	let nodeRenderSvg = "";
 	let artboardSvg = "";
 	let overlaysSvg = "";
-	let artworkTransform = "";
 
 	// Rasterized SVG viewport data, or none if it's not up-to-date
 	let rasterizedCanvas: HTMLCanvasElement | undefined = undefined;
@@ -338,11 +334,6 @@
 	}
 
 	onMount(() => {
-		// Show or hide the graph view overlay
-		editor.subscriptions.subscribeJsMessage(TriggerGraphViewOverlay, (triggerGraphViewOverlay) => {
-			graphViewOverlayOpen = triggerGraphViewOverlay.open;
-		});
-
 		// Update rendered SVGs
 		editor.subscriptions.subscribeJsMessage(UpdateDocumentArtwork, async (data) => {
 			await tick();
@@ -364,11 +355,6 @@
 
 			updateDocumentNodeRender(data.svg);
 		});
-		editor.subscriptions.subscribeJsMessage(UpdateDocumentTransform, async (data) => {
-			await tick();
-
-			updateDocumentTransform(data.transform);
-		});
 		editor.subscriptions.subscribeJsMessage(UpdateEyedropperSamplingState, async (data) => {
 			await tick();
 
@@ -436,8 +422,8 @@
 </script>
 
 <LayoutCol class="document">
-	<LayoutRow class="options-bar" classes={{ "for-graph": graphViewOverlayOpen }} scrollableX={true}>
-		{#if !graphViewOverlayOpen}
+	<LayoutRow class="options-bar" classes={{ "for-graph": $document.graphViewOverlayOpen }} scrollableX={true}>
+		{#if !$document.graphViewOverlayOpen}
 			<WidgetLayout layout={$document.documentModeLayout} />
 			<WidgetLayout layout={$document.toolOptionsLayout} />
 			<LayoutRow class="spacer" />
@@ -448,7 +434,7 @@
 	</LayoutRow>
 	<LayoutRow class="shelf-and-table">
 		<LayoutCol class="shelf">
-			{#if !graphViewOverlayOpen}
+			{#if !$document.graphViewOverlayOpen}
 				<LayoutCol class="tools" scrollableY={true}>
 					<WidgetLayout layout={$document.toolShelfLayout} />
 				</LayoutCol>
@@ -483,7 +469,7 @@
 							{@html artboardSvg}
 						</svg>
 						<svg class="artboards" style:width={canvasWidthCSS} style:height={canvasHeightCSS}>
-							<g id="transform-group" transform={artworkTransform}>
+							<g id="transform-group" transform={$document.artworkTransform}>
 								{@html nodeRenderSvg}
 							</g>
 						</svg>
@@ -499,7 +485,7 @@
 							{/if}
 						</div>
 					</div>
-					<div class="graph-view" class:open={graphViewOverlayOpen} style:--fade-artwork="80%" data-graph>
+					<div class="graph-view" class:open={$document.graphViewOverlayOpen} style:--fade-artwork="80%" data-graph>
 						<Graph />
 					</div>
 				</LayoutCol>

frontend/src/components/panels/LayerTree.svelte

@@ -450,7 +450,7 @@
 					border-radius: 2px;
 
 					&:hover {
-						background: var(--color-6-lowergray);
+						background: var(--color-5-dullgray);
 					}
 
 					&::after {
@@ -461,19 +461,11 @@
 						border-style: solid;
 						border-width: 3px 0 3px 6px;
 						border-color: transparent transparent transparent var(--color-e-nearwhite);
-
-						&:hover {
-							color: var(--color-f-white);
-						}
 					}
 
 					&.expanded::after {
 						border-width: 6px 3px 0 3px;
 						border-color: var(--color-e-nearwhite) transparent transparent transparent;
-
-						&:hover {
-							color: var(--color-f-white);
-						}
 					}
 				}
 
@@ -488,7 +480,6 @@
 
 					&.selected {
 						background: var(--color-5-dullgray);
-						color: var(--color-f-white);
 					}
 
 					.layer-type-icon {

frontend/src/components/views/Graph.svelte

@@ -5,7 +5,6 @@
 	import { UpdateNodeGraphSelection } from "@graphite/wasm-communication/messages";
 	import type { FrontendNodeLink, FrontendNodeType, FrontendNode } from "@graphite/wasm-communication/messages";
 	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
-	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
 	import TextButton from "@graphite/components/widgets/buttons/TextButton.svelte";
 	import TextInput from "@graphite/components/widgets/inputs/TextInput.svelte";
 	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
@@ -24,7 +23,7 @@
 
 	type LinkPath = { pathString: string; dataType: string; thick: boolean };
 
-	let graph: LayoutRow | undefined;
+	let graph: HTMLDivElement | undefined;
 	let nodesContainer: HTMLDivElement | undefined;
 	let nodeSearchInput: TextInput | undefined;
 
@@ -52,7 +51,7 @@
 	let appearRightOfMouse = false;
 
 	$: (() => {
-		const bounds = graph?.div()?.getBoundingClientRect();
+		const bounds = graph?.getBoundingClientRect();
 		if (!bounds) return;
 		const { width, height } = bounds;
 
@@ -239,7 +238,7 @@
 			let zoomFactor = 1 + Math.abs(scrollY) * WHEEL_RATE;
 			if (scrollY > 0) zoomFactor = 1 / zoomFactor;
 
-			const bounds = graph?.div()?.getBoundingClientRect();
+			const bounds = graph?.getBoundingClientRect();
 			if (!bounds) return;
 			const { x, y, width, height } = bounds;
 
@@ -286,7 +285,7 @@
 
 		// Create the add node popup on right click, then exit
 		if (rmb) {
-			const graphBounds = graph?.div()?.getBoundingClientRect();
+			const graphBounds = graph?.getBoundingClientRect();
 			if (!graphBounds) return;
 			nodeListLocation = {
 				x: Math.round(((e.clientX - graphBounds.x) / transform.scale - transform.x) / GRID_SIZE),
@@ -567,20 +566,18 @@
 	});
 </script>
 
-<LayoutRow
+<div
 	class="graph"
 	bind:this={graph}
-	on:wheel={scroll}
+	on:wheel|nonpassive={scroll}
 	on:pointerdown={pointerDown}
 	on:pointermove={pointerMove}
 	on:pointerup={pointerUp}
 	on:dblclick={doubleClick}
-	styles={{
-		"--grid-spacing": `${gridSpacing}px`,
-		"--grid-offset-x": `${transform.x * transform.scale}px`,
-		"--grid-offset-y": `${transform.y * transform.scale}px`,
-		"--dot-radius": `${dotRadius}px`,
-	}}
+	style:--grid-spacing={`${gridSpacing}px`}
+	style:--grid-offset-x={`${transform.x * transform.scale}px`}
+	style:--grid-offset-y={`${transform.y * transform.scale}px`}
+	style:--dot-radius={`${dotRadius}px`}
 >
 	<!-- Right click menu for adding nodes -->
 	{#if nodeListLocation}
@@ -595,7 +592,7 @@
 			}}
 		>
 			<TextInput placeholder="Search Nodes..." value={searchTerm} on:value={({ detail }) => (searchTerm = detail)} bind:this={nodeSearchInput} />
-			<div class="list-nodes" style={`height: ${ADD_NODE_MENU_HEIGHT}px;`} on:wheel|stopPropagation>
+			<div class="list-nodes" style={`height: ${ADD_NODE_MENU_HEIGHT}px;`} on:wheel|passive|stopPropagation>
 				{#each nodeCategories as nodeCategory}
 					<details style="display: flex; flex-direction: column;" open={nodeCategory[1].open}>
 						<summary>
@@ -802,12 +799,15 @@
 			</div>
 		{/each}
 	</div>
-</LayoutRow>
+</div>
 
 <style lang="scss" global>
 	.graph {
 		position: relative;
 		overflow: hidden;
+		display: flex;
+		flex-direction: row;
+		flex-grow: 1;
 
 		> img {
 			position: absolute;

frontend/src/components/widgets/buttons/TextButton.svelte

@@ -22,7 +22,7 @@
 	class:emphasized
 	class:disabled
 	class:sharp-right-corners={sharpRightCorners}
-	style:min-width={minWidth > 0 ? `${minWidth}px` : undefined}
+	style:min-width={minWidth > 0 ? `${minWidth}px` : ""}
 	title={tooltip}
 	data-emphasized={emphasized || undefined}
 	data-disabled={disabled || undefined}

frontend/src/components/widgets/groups/WidgetSection.svelte

@@ -93,10 +93,6 @@
 					background: var(--icon-expand-collapse-arrow-hover);
 				}
 
-				.text-label {
-					color: var(--color-f-white);
-				}
-
 				+ .body {
 					border: 1px solid var(--color-4-dimgray);
 				}

frontend/src/components/widgets/inputs/CheckboxInput.svelte

@@ -75,12 +75,12 @@
 				}
 			}
 
-			// Hovered
+			// Hovered while unchecked
 			&:hover .checkbox-box {
 				background: var(--color-6-lowergray);
 			}
 
-			// Disabled
+			// Disabled while unchecked
 			&.disabled .checkbox-box {
 				background: var(--color-4-dimgray);
 			}
@@ -96,12 +96,12 @@
 				}
 			}
 
-			// Hovered
+			// Hovered while checked
 			&:hover .checkbox-box {
 				background: var(--color-f-white);
 			}
 
-			// Hovered
+			// Disabled while checked
 			&.disabled .checkbox-box {
 				background: var(--color-8-uppergray);
 			}

frontend/src/components/widgets/inputs/CurveInput.svelte

@@ -200,11 +200,11 @@
 			{@const group = groups[selectedNodeIndex]}
 			{#each [0, 1] as i}
 				<path d={`M ${group.anchor[0]} ${1 - group.anchor[1]} L ${group.handles[i][0]} ${1 - group.handles[i][1]}`} class="handle-line" />
-				<circle cx={group.handles[i][0]} cy={1 - group.handles[i][1]} class="manipulator handle" on:pointerdown={(e) => handleManipulatorPointerDown(e, -i - 1)} />
+				<circle cx={group.handles[i][0]} cy={1 - group.handles[i][1]} class="manipulator handle" r="0.02" on:pointerdown={(e) => handleManipulatorPointerDown(e, -i - 1)} />
 			{/each}
 		{/if}
 		{#each groups as group, i}
-			<circle cx={group.anchor[0]} cy={1 - group.anchor[1]} class="manipulator" on:pointerdown={(e) => handleManipulatorPointerDown(e, i)} />
+			<circle cx={group.anchor[0]} cy={1 - group.anchor[1]} class="manipulator" r="0.02" on:pointerdown={(e) => handleManipulatorPointerDown(e, i)} />
 		{/each}
 	</svg>
 	<slot />
@@ -234,7 +234,6 @@
 			fill: var(--color-1-nearblack);
 			stroke: var(--color-e-nearwhite);
 			stroke-width: 0.01;
-			r: 0.02;
 
 			&:hover {
 				fill: var(--color-f-white);

frontend/src/components/widgets/inputs/DropdownInput.svelte

@@ -66,7 +66,7 @@
 	<LayoutRow
 		class="dropdown-box"
 		classes={{ disabled, open, "sharp-right-corners": sharpRightCorners }}
-		styles={{ minWidth: `${minWidth}px` }}
+		styles={{ "min-width": `${minWidth}px` }}
 		{tooltip}
 		on:click={() => !disabled && (open = true)}
 		on:blur={unFocusDropdownBox}

frontend/src/components/widgets/inputs/FontInput.svelte

@@ -109,7 +109,7 @@
 	<LayoutRow
 		class="dropdown-box"
 		classes={{ disabled, "sharp-right-corners": sharpRightCorners }}
-		styles={{ minWidth: `${minWidth}px` }}
+		styles={{ "min-width": `${minWidth}px` }}
 		{tooltip}
 		tabindex={disabled ? -1 : 0}
 		on:click={toggleOpen}

frontend/src/components/widgets/labels/TextLabel.svelte

@@ -28,7 +28,7 @@
 	class:italic
 	class:multiline
 	class:table-align={tableAlign}
-	style:min-width={minWidth > 0 ? `${minWidth}px` : undefined}
+	style:min-width={minWidth > 0 ? `${minWidth}px` : ""}
 	style={`${styleName} ${extraStyles}`.trim() || undefined}
 	title={tooltip}
 >

frontend/src/state-providers/document.ts

@@ -13,6 +13,8 @@ import {
 	UpdateWorkingColorsLayout,
 	UpdateGraphViewOverlayButtonLayout,
 	UpdateNodeGraphBarLayout,
+	UpdateDocumentTransform,
+	TriggerGraphViewOverlay,
 } from "@graphite/wasm-communication/messages";
 
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
@@ -26,6 +28,10 @@ export function createDocumentState(editor: Editor) {
 		graphViewOverlayButtonLayout: defaultWidgetLayout(),
 		workingColorsLayout: defaultWidgetLayout(),
 		nodeGraphBarLayout: defaultWidgetLayout(),
+		// Graph view overlay
+		graphViewOverlayOpen: false,
+		// CSS transform property to be applied to artwork
+		artworkTransform: "",
 	});
 	const { subscribe, update } = state;
 
@@ -100,6 +106,21 @@ export function createDocumentState(editor: Editor) {
 		// Request a resize event so the viewport gets measured now that the canvas is populated and positioned correctly
 		window.dispatchEvent(new CustomEvent("resize"));
 	});
+	editor.subscriptions.subscribeJsMessage(UpdateDocumentTransform, async (data) => {
+		await tick();
+
+		update((state) => {
+			state.artworkTransform = data.transform;
+			return state;
+		});
+	});
+	// Show or hide the graph view overlay
+	editor.subscriptions.subscribeJsMessage(TriggerGraphViewOverlay, (triggerGraphViewOverlay) => {
+		update((state) => {
+			state.graphViewOverlayOpen = triggerGraphViewOverlay.open;
+			return state;
+		});
+	});
 
 	return {
 		subscribe,