Fix the Eyedropper tool (#1440)

* Fix eyedropper

* Remove dead code

---------

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

editor/src/messages/frontend/frontend_message.rs

@@ -179,9 +179,6 @@ pub enum FrontendMessage {
 		size: (f64, f64),
 		multiplier: (f64, f64),
 	},
-	UpdateDocumentTransform {
-		transform: String,
-	},
 	UpdateEyedropperSamplingState {
 		#[serde(rename = "mousePosition")]
 		mouse_position: Option<(f64, f64)>,

editor/src/messages/portfolio/document/document_message_handler.rs

@@ -880,7 +880,6 @@ impl MessageHandler<DocumentMessage, (u64, &InputPreprocessorMessageHandler, &Pe
 			UpdateDocumentTransform { transform } => {
 				self.document_legacy.metadata.document_to_viewport = transform;
 				let transform = graphene_core::renderer::format_transform_matrix(transform);
-				responses.add(FrontendMessage::UpdateDocumentTransform { transform });
 				responses.add(DocumentMessage::RenderRulers);
 				responses.add(DocumentMessage::RenderScrollbars);
 				responses.add(NodeGraphMessage::RunDocumentGraph);

frontend/src/components/panels/Document.svelte

@@ -19,8 +19,6 @@
 		UpdateEyedropperSamplingState,
 		UpdateMouseCursor,
 		UpdateDocumentNodeRender,
-		UpdateDocumentTransform,
-		TriggerGraphViewOverlay,
 	} from "@graphite/wasm-communication/messages";
 
 	import EyedropperPreview, { ZOOM_WINDOW_DIMENSIONS } from "@graphite/components/floating-menus/EyedropperPreview.svelte";
@@ -157,11 +155,6 @@
 		rasterizedCanvas = undefined;
 	}
 
-	export function updateDocumentTransform(transform: string) {
-		artworkTransform = transform;
-		rasterizedCanvas = undefined;
-	}
-
 	export async function updateEyedropperSamplingState(mousePosition: XY | undefined, colorPrimary: string, colorSecondary: string): Promise<[number, number, number] | undefined> {
 		if (mousePosition === undefined) {
 			cursorEyedropper = false;
@@ -180,11 +173,10 @@
 
 		const outsideArtboardsColor = getComputedStyle(window.document.documentElement).getPropertyValue("--color-2-mildblack");
 		const outsideArtboards = `<rect x="0" y="0" width="100%" height="100%" fill="${outsideArtboardsColor}" />`;
-		const artboards = artboardSvg;
+
-		const artwork = `<g id="transform-group" transform="${artworkTransform}">${nodeRenderSvg}</g>`;
 		const svg = `
-				<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}">${outsideArtboards}${artboards}${artwork}</svg>
+			<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}">${outsideArtboards}${artboardSvg}${nodeRenderSvg}</svg>
-				`.trim();
+			`.trim();
 
 		if (!rasterizedCanvas) {
 			rasterizedCanvas = await rasterizeSVGCanvas(svg, width * dpiFactor, height * dpiFactor, "image/png");

frontend/src/state-providers/document.ts

@@ -13,7 +13,6 @@ import {
 	UpdateWorkingColorsLayout,
 	UpdateGraphViewOverlayButtonLayout,
 	UpdateNodeGraphBarLayout,
-	UpdateDocumentTransform,
 	TriggerGraphViewOverlay,
 } from "@graphite/wasm-communication/messages";
 
@@ -30,8 +29,6 @@ export function createDocumentState(editor: Editor) {
 		nodeGraphBarLayout: defaultWidgetLayout(),
 		// Graph view overlay
 		graphViewOverlayOpen: false,
-		// CSS transform property to be applied to artwork
-		artworkTransform: "",
 	});
 	const { subscribe, update } = state;
 
@@ -106,14 +103,6 @@ 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) => {

frontend/src/wasm-communication/messages.ts

@@ -452,10 +452,6 @@ export class UpdateDocumentNodeRender extends JsMessage {
 	readonly svg!: string;
 }
 
-export class UpdateDocumentTransform extends JsMessage {
-	readonly transform!: string;
-}
-
 export class UpdateDocumentScrollbars extends JsMessage {
 	@TupleToVec2
 	readonly position!: XY;
@@ -1428,7 +1424,6 @@ export const messageMakers: Record<string, MessageMaker> = {
 	UpdateDocumentOverlays,
 	UpdateDocumentRulers,
 	UpdateDocumentScrollbars,
-	UpdateDocumentTransform,
 	UpdateEyedropperSamplingState,
 	UpdateGraphViewOverlayButtonLayout,
 	UpdateImageData,