Remake Eyedropper tool to sample pixel colors from viewport canvas (#801)

* Remake Eyedropper tool to sample pixel colors from viewport canvas * Bug fixes * Reorder export buttons * Remove the larger primary/secondary ring * Add aborting with Escape
2026-09-19 02:48:12 +08:00 · 2022-10-21 01:50:02 -07:00
parent fe1a03fac7
commit 58a53a995d
17 changed files with 454 additions and 131 deletions
--- a/frontend/src/components/floating-menus/EyedropperPreview.vue
+++ b/frontend/src/components/floating-menus/EyedropperPreview.vue
@@ -0,0 +1,125 @@
+<template>
+	<FloatingMenu
+		:open="true"
+		class="eyedropper-preview"
+		:type="'Cursor'"
+		:style="{ '--ring-color-primary': primaryColor, '--ring-color-secondary': secondaryColor, '--ring-color-choice': colorChoice }"
+	>
+		<div class="ring">
+			<div class="canvas-container">
+				<canvas ref="zoomPreviewCanvas"></canvas>
+				<div class="pixel-outline"></div>
+			</div>
+		</div>
+	</FloatingMenu>
+</template>
+
+<style lang="scss">
+.eyedropper-preview {
+	pointer-events: none;
+
+	.ring {
+		transform: translate(0, -50%) rotate(45deg);
+		position: relative;
+		background: var(--ring-color-choice);
+		padding: 16px;
+		border: 8px solid;
+		border-radius: 50%;
+		border-top-color: var(--ring-color-primary);
+		border-left-color: var(--ring-color-primary);
+		border-bottom-color: var(--ring-color-secondary);
+		border-right-color: var(--ring-color-secondary);
+		box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
+
+		.canvas-container {
+			transform: rotate(-45deg);
+
+			canvas {
+				width: 110px;
+				height: 110px;
+				border-radius: 50%;
+				image-rendering: pixelated;
+			}
+
+			&::after {
+				content: "";
+				position: absolute;
+				top: 0;
+				left: 0;
+				width: 100%;
+				height: 100%;
+				border-radius: 50%;
+				box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.25);
+			}
+
+			.pixel-outline {
+				position: absolute;
+				left: 50%;
+				top: 50%;
+				transform: translate(-50%, -50%);
+				--outline-width: 2;
+				margin-top: calc(-1px * (var(--outline-width) / 2));
+				width: calc(10px - (var(--outline-width) * 1px));
+				height: calc(10px - var(--outline-width) * 1px);
+				border: calc(var(--outline-width) * 1px) solid var(--color-0-black);
+			}
+		}
+	}
+}
+</style>
+
+<script lang="ts">
+import { defineComponent, type PropType } from "vue";
+
+import FloatingMenu from "@/components/floating-menus/FloatingMenu.vue";
+
+// Should be equal to the width and height of the canvas in the CSS above
+const ZOOM_WINDOW_DIMENSIONS_EXPANDED = 110;
+// SHould be equal to the width and height of the `.pixel-outline` div in the CSS above, and should be evenly divisible into the number above
+const UPSCALE_FACTOR = 10;
+
+export const ZOOM_WINDOW_DIMENSIONS = ZOOM_WINDOW_DIMENSIONS_EXPANDED / UPSCALE_FACTOR;
+
+const temporaryCanvas = document.createElement("canvas");
+
+export default defineComponent({
+	props: {
+		imageData: { type: Object as PropType<ImageData> },
+		colorChoice: { type: String as PropType<string>, required: true },
+		primaryColor: { type: String as PropType<string>, required: true },
+		secondaryColor: { type: String as PropType<string>, required: true },
+	},
+	mounted() {
+		this.displayImageDataPreview(this.imageData);
+	},
+	watch: {
+		imageData(imageData: ImageData | undefined) {
+			this.displayImageDataPreview(imageData);
+		},
+	},
+	methods: {
+		displayImageDataPreview(imageData: ImageData | undefined) {
+			const canvas = this.$refs.zoomPreviewCanvas as HTMLCanvasElement;
+			canvas.width = ZOOM_WINDOW_DIMENSIONS;
+			canvas.height = ZOOM_WINDOW_DIMENSIONS;
+			const context = canvas.getContext("2d");
+
+			temporaryCanvas.width = ZOOM_WINDOW_DIMENSIONS;
+			temporaryCanvas.height = ZOOM_WINDOW_DIMENSIONS;
+			const temporaryContext = temporaryCanvas.getContext("2d");
+
+			if (!imageData || !context || !temporaryContext) return;
+
+			temporaryContext.putImageData(imageData, 0, 0, 0, 0, ZOOM_WINDOW_DIMENSIONS, ZOOM_WINDOW_DIMENSIONS);
+
+			context.fillStyle = "black";
+			context.fillRect(0, 0, ZOOM_WINDOW_DIMENSIONS, ZOOM_WINDOW_DIMENSIONS);
+
+			context.drawImage(temporaryCanvas, 0, 0);
+		},
+	},
+	components: {
+		FloatingMenu,
+	},
+});
+</script>
--- a/frontend/src/components/floating-menus/FloatingMenu.vue
+++ b/frontend/src/components/floating-menus/FloatingMenu.vue
@@ -110,6 +110,13 @@
 		--floating-menu-content-border-radius: 4px;
 	}

+	&.cursor .floating-menu-container .floating-menu-content {
+		background: none;
+		box-shadow: none;
+		border-radius: 0;
+		padding: 0;
+	}
+
 	&.center {
 		justify-content: center;
 		align-items: center;
@@ -180,7 +187,7 @@ import { defineComponent, nextTick, type PropType } from "vue";
 import LayoutCol from "@/components/layout/LayoutCol.vue";

 export type MenuDirection = "Top" | "Bottom" | "Left" | "Right" | "TopLeft" | "TopRight" | "BottomLeft" | "BottomRight" | "Center";
-export type MenuType = "Popover" | "Dropdown" | "Dialog";
+export type MenuType = "Popover" | "Dropdown" | "Dialog" | "Cursor";

 const POINTER_STRAY_DISTANCE = 100;

@@ -235,6 +242,8 @@ export default defineComponent({
 			this.minWidthParentWidth = entries[0].contentRect.width;
 		},
 		positionAndStyleFloatingMenu() {
+			if (this.type === "Cursor") return;
+
 			const workspace = document.querySelector("[data-workspace]");
 			const floatingMenuContainer = this.$refs.floatingMenuContainer as HTMLElement;
 			const floatingMenuContentComponent = this.$refs.floatingMenuContent as typeof LayoutCol;
--- a/frontend/src/components/panels/Document.vue
+++ b/frontend/src/components/panels/Document.vue
@@ -28,25 +28,25 @@
 					<LayoutCol class="bar-area">
 						<CanvasRuler :origin="rulerOrigin.y" :majorMarkSpacing="rulerSpacing" :numberInterval="rulerInterval" :direction="'Vertical'" ref="rulerVertical" />
 					</LayoutCol>
-					<LayoutCol class="canvas-area">
-						<div
-							class="canvas"
-							:style="{ cursor: canvasCursor }"
-							@pointerdown="(e: PointerEvent) => canvasPointerDown(e)"
-							@dragover="(e) => e.preventDefault()"
-							@drop="(e) => pasteFile(e)"
-							ref="canvas"
-							data-canvas
-						>
-							<svg class="artboards" v-html="artboardSvg" :style="{ width: canvasSvgWidth, height: canvasSvgHeight }"></svg>
+					<LayoutCol class="canvas-area" :style="{ cursor: canvasCursor }">
+						<EyedropperPreview
+							v-if="cursorEyedropper"
+							:colorChoice="cursorEyedropperPreviewColorChoice"
+							:primaryColor="cursorEyedropperPreviewColorPrimary"
+							:secondaryColor="cursorEyedropperPreviewColorSecondary"
+							:imageData="cursorEyedropperPreviewImageData"
+							:style="{ left: cursorLeft + 'px', top: cursorTop + 'px' }"
+						/>
+						<div class="canvas" @pointerdown="(e: PointerEvent) => canvasPointerDown(e)" @dragover="(e) => e.preventDefault()" @drop="(e) => pasteFile(e)" ref="canvas" data-canvas>
+							<svg class="artboards" v-html="artboardSvg" :style="{ width: canvasWidthCSS, height: canvasHeightCSS }"></svg>
 							<svg
 								class="artwork"
 								xmlns="http://www.w3.org/2000/svg"
 								xmlns:xlink="http://www.w3.org/1999/xlink"
 								v-html="artworkSvg"
-								:style="{ width: canvasSvgWidth, height: canvasSvgHeight }"
+								:style="{ width: canvasWidthCSS, height: canvasHeightCSS }"
 							></svg>
-							<svg class="overlays" v-html="overlaysSvg" :style="{ width: canvasSvgWidth, height: canvasSvgHeight }"></svg>
+							<svg class="overlays" v-html="overlaysSvg" :style="{ width: canvasWidthCSS, height: canvasHeightCSS }"></svg>
 						</div>
 					</LayoutCol>
 					<LayoutCol class="bar-area">
@@ -149,6 +149,7 @@

 			.canvas-area {
 				flex: 1 1 100%;
+				position: relative;
 			}

 			.bar-area {
@@ -224,6 +225,7 @@
 import { defineComponent, nextTick } from "vue";

 import { textInputCleanup } from "@/utility-functions/keyboard-entry";
+import { rasterizeSVGCanvas } from "@/utility-functions/rasterization";
 import {
 	defaultWidgetLayout,
 	type DisplayEditableTextbox,
@@ -236,6 +238,7 @@ import {
 	type XY,
 } from "@/wasm-communication/messages";

+import EyedropperPreview, { ZOOM_WINDOW_DIMENSIONS } from "@/components/floating-menus/EyedropperPreview.vue";
 import LayoutCol from "@/components/layout/LayoutCol.vue";
 import LayoutRow from "@/components/layout/LayoutRow.vue";
 import CanvasRuler from "@/components/widgets/metrics/CanvasRuler.vue";
@@ -244,6 +247,64 @@ import WidgetLayout from "@/components/widgets/WidgetLayout.vue";

 export default defineComponent({
 	inject: ["editor", "panels"],
+	data() {
+		const scrollbarPos: XY = { x: 0.5, y: 0.5 };
+		const scrollbarSize: XY = { x: 0.5, y: 0.5 };
+		const scrollbarMultiplier: XY = { x: 0, y: 0 };
+
+		const rulerOrigin: XY = { x: 0, y: 0 };
+
+		return {
+			// Interactive text editing
+			textInput: undefined as undefined | HTMLDivElement,
+
+			// CSS properties
+			canvasSvgWidth: undefined as number | undefined,
+			canvasSvgHeight: undefined as number | undefined,
+			canvasCursor: "default" as MouseCursorIcon,
+
+			// Scrollbars
+			scrollbarPos,
+			scrollbarSize,
+			scrollbarMultiplier,
+
+			// Rulers
+			rulerOrigin,
+			rulerSpacing: 100 as number,
+			rulerInterval: 100 as number,
+
+			// Rendered SVG viewport data
+			artworkSvg: "" as string,
+			artboardSvg: "" as string,
+			overlaysSvg: "" as string,
+
+			// Rasterized SVG viewport data, or none if it's not up-to-date
+			rasterizedCanvas: undefined as HTMLCanvasElement | undefined,
+			rasterizedContext: undefined as CanvasRenderingContext2D | undefined,
+
+			// Cursor position for cursor floating menus like the Eyedropper tool zoom
+			cursorLeft: 0,
+			cursorTop: 0,
+			cursorEyedropper: false,
+			cursorEyedropperPreviewImageData: undefined as ImageData | undefined,
+			cursorEyedropperPreviewColorChoice: "",
+			cursorEyedropperPreviewColorPrimary: "",
+			cursorEyedropperPreviewColorSecondary: "",
+
+			// Layouts
+			documentModeLayout: defaultWidgetLayout(),
+			toolOptionsLayout: defaultWidgetLayout(),
+			documentBarLayout: defaultWidgetLayout(),
+			toolShelfLayout: defaultWidgetLayout(),
+			workingColorsLayout: defaultWidgetLayout(),
+		};
+	},
+	mounted() {
+		this.panels.registerPanel("Document", this);
+
+		// Once this component is mounted, we want to resend the document bounds to the backend via the resize event handler which does that
+		window.dispatchEvent(new Event("resize"));
+	},
 	methods: {
 		pasteFile(e: DragEvent) {
 			const { dataTransfer } = e;
@@ -288,6 +349,7 @@ export default defineComponent({
 		// Update rendered SVGs
 		async updateDocumentArtwork(svg: string) {
 			this.artworkSvg = svg;
+			this.rasterizedCanvas = undefined;

 			await nextTick();

@@ -321,6 +383,57 @@ export default defineComponent({
 		},
 		updateDocumentArtboards(svg: string) {
 			this.artboardSvg = svg;
+			this.rasterizedCanvas = undefined;
+		},
+		async updateEyedropperSamplingState(mousePosition: XY | undefined, colorPrimary: string, colorSecondary: string): Promise<[number, number, number] | undefined> {
+			if (mousePosition === undefined) {
+				this.cursorEyedropper = false;
+				return undefined;
+			}
+			this.cursorEyedropper = true;
+
+			if (this.canvasSvgWidth === undefined || this.canvasSvgHeight === undefined) return undefined;
+
+			this.cursorLeft = mousePosition.x;
+			this.cursorTop = mousePosition.y;
+
+			// This works nearly perfectly, but sometimes at odd DPI scale factors like 1.25, the anti-aliasing color can yield slightly incorrect colors (potential room for future improvement)
+			const dpiFactor = window.devicePixelRatio;
+			const [width, height] = [this.canvasSvgWidth, this.canvasSvgHeight];
+
+			const outsideArtboardsColor = getComputedStyle(document.documentElement).getPropertyValue("--color-2-mildblack");
+			const outsideArtboards = `<rect x="0" y="0" width="100%" height="100%" fill="${outsideArtboardsColor}" />`;
+			const artboards = this.artboardSvg;
+			const artwork = this.artworkSvg;
+			const svg = `
+				<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}">${outsideArtboards}${artboards}${artwork}</svg>
+				`.trim();
+
+			if (!this.rasterizedCanvas) {
+				this.rasterizedCanvas = await rasterizeSVGCanvas(svg, width * dpiFactor, height * dpiFactor, "image/png");
+				this.rasterizedContext = this.rasterizedCanvas.getContext("2d") || undefined;
+			}
+			if (!this.rasterizedContext) return undefined;
+
+			const rgbToHex = (r: number, g: number, b: number): string => `#${[r, g, b].map((x) => x.toString(16).padStart(2, "0")).join("")}`;
+
+			const pixel = this.rasterizedContext.getImageData(mousePosition.x * dpiFactor, mousePosition.y * dpiFactor, 1, 1).data;
+			const hex = rgbToHex(pixel[0], pixel[1], pixel[2]);
+			const rgb: [number, number, number] = [pixel[0] / 255, pixel[1] / 255, pixel[2] / 255];
+
+			this.cursorEyedropperPreviewColorChoice = hex;
+			this.cursorEyedropperPreviewColorPrimary = colorPrimary;
+			this.cursorEyedropperPreviewColorSecondary = colorSecondary;
+
+			const previewRegion = this.rasterizedContext.getImageData(
+				mousePosition.x * dpiFactor - (ZOOM_WINDOW_DIMENSIONS - 1) / 2,
+				mousePosition.y * dpiFactor - (ZOOM_WINDOW_DIMENSIONS - 1) / 2,
+				ZOOM_WINDOW_DIMENSIONS,
+				ZOOM_WINDOW_DIMENSIONS
+			);
+			this.cursorEyedropperPreviewImageData = previewRegion;
+
+			return rgb;
 		},
 		// Update scrollbars and rulers
 		updateDocumentScrollbars(position: XY, size: XY, multiplier: XY) {
@@ -383,12 +496,11 @@ export default defineComponent({
 		// Resize elements to render the new viewport size
 		viewportResize() {
 			// Resize the canvas
-			// Width and height are rounded up to the nearest even number because resizing is centered, and dividing an odd number by 2 for centering causes antialiasing
 			const canvas = this.$refs.canvas as HTMLElement;
 			const width = Math.ceil(parseFloat(getComputedStyle(canvas).width));
 			const height = Math.ceil(parseFloat(getComputedStyle(canvas).height));
-			this.canvasSvgWidth = `${width % 2 === 1 ? width + 1 : width}px`;
-			this.canvasSvgHeight = `${height % 2 === 1 ? height + 1 : height}px`;
+			this.canvasSvgWidth = width;
+			this.canvasSvgHeight = height;

 			// Resize the rulers
 			const rulerHorizontal = this.$refs.rulerHorizontal as typeof CanvasRuler;
@@ -396,51 +508,22 @@ export default defineComponent({
 			rulerHorizontal?.resize();
 			rulerVertical?.resize();
 		},
+		canvasDimensionCSS(dimension: number | undefined): string {
+			// Temporary placeholder until the first actual value is populated
+			// This at least gets close to the correct value but an actual number is required to prevent CSS from causing non-integer sizing making the SVG render with anti-aliasing
+			if (dimension === undefined) return "100%";
+
+			// Dimension is rounded up to the nearest even number because resizing is centered, and dividing an odd number by 2 for centering causes antialiasing
+			return `${dimension % 2 === 1 ? dimension + 1 : dimension}px`;
+		},
 	},
-	mounted() {
-		this.panels.registerPanel("Document", this);
-
-		// Once this component is mounted, we want to resend the document bounds to the backend via the resize event handler which does that
-		window.dispatchEvent(new Event("resize"));
-	},
-	data() {
-		const scrollbarPos: XY = { x: 0.5, y: 0.5 };
-		const scrollbarSize: XY = { x: 0.5, y: 0.5 };
-		const scrollbarMultiplier: XY = { x: 0, y: 0 };
-
-		const rulerOrigin: XY = { x: 0, y: 0 };
-
-		return {
-			// Interactive text editing
-			textInput: undefined as undefined | HTMLDivElement,
-
-			// CSS properties
-			canvasSvgWidth: "100%" as string,
-			canvasSvgHeight: "100%" as string,
-			canvasCursor: "default" as MouseCursorIcon,
-
-			// Scrollbars
-			scrollbarPos,
-			scrollbarSize,
-			scrollbarMultiplier,
-
-			// Rulers
-			rulerOrigin,
-			rulerSpacing: 100 as number,
-			rulerInterval: 100 as number,
-
-			// Rendered SVG viewport data
-			artworkSvg: "" as string,
-			artboardSvg: "" as string,
-			overlaysSvg: "" as string,
-
-			// Layouts
-			documentModeLayout: defaultWidgetLayout(),
-			toolOptionsLayout: defaultWidgetLayout(),
-			documentBarLayout: defaultWidgetLayout(),
-			toolShelfLayout: defaultWidgetLayout(),
-			workingColorsLayout: defaultWidgetLayout(),
-		};
+	computed: {
+		canvasWidthCSS(): string {
+			return this.canvasDimensionCSS(this.canvasSvgWidth);
+		},
+		canvasHeightCSS(): string {
+			return this.canvasDimensionCSS(this.canvasSvgHeight);
+		},
 	},
 	components: {
 		CanvasRuler,
@@ -448,6 +531,7 @@ export default defineComponent({
 		LayoutRow,
 		PersistentScrollbar,
 		WidgetLayout,
+		EyedropperPreview,
 	},
 });
 </script>