fix: pixel coordinates not being correct [iOS Safari/Webkit] (bc9e49d4) · Commits · sc07 / Canvas · GitLab

packages/client/src/components/Toolbar/Palette.tsx

+72 −74

Original line number	Diff line number	Diff line
		@@ -101,11 +101,7 @@ const parseHexColor = (hex: string) => {
		const clamp = (value: number, min: number, max: number) =>
		Math.min(Math.max(value, min), max);

		const rgbToHsl = ({
		red,
		green,
		blue,
		}: ReturnType<typeof parseHexColor>) => {
		const rgbToHsl = ({ red, green, blue }: ReturnType<typeof parseHexColor>) => {
		const r = red / 255;
		const g = green / 255;
		const b = blue / 255;
		@@ -152,11 +148,7 @@ const getPaletteSymbolColor = (hex: string) => {
		return hslToCss(
		0,
		0,
		clamp(
		lightness > 0.52 ? lightness - 0.34 : lightness + 0.34,
		0.22,
		0.78,
		),
		clamp(lightness > 0.52 ? lightness - 0.34 : lightness + 0.34, 0.22, 0.78),
		);
		}

		@@ -332,10 +324,7 @@ export const Palette = () => {
		};

		const isCoordInCanvas = (x: number, y: number) =>
		x >= 0 &&
		y >= 0 &&
		x < config.canvas.size[0] &&
		y < config.canvas.size[1];
		x >= 0 && y >= 0 && x < config.canvas.size[0] && y < config.canvas.size[1];

		const getTemplatePixelColor = (clientX: number, clientY: number) => {
		const renderer = TemplateRenderer.instance;
		@@ -621,8 +610,8 @@ export const Palette = () => {
		<span>Pick Color</span>
		</div>
		<div className="mt-1 text-xs text-black/65 dark:text-white/65">
		{isMobile ? "Tap" : "Click"} on a pixel to copy its color
		to your brush.
		{isMobile ? "Tap" : "Click"} on a pixel to copy its color to
		your brush.
		</div>
		</div>
		{pickColorPreview && (
		@@ -713,7 +702,9 @@ export const Palette = () => {
		initial={{ y: "100%" }}
		onClick={(event) => event.stopPropagation()}
		role="dialog"
		transition={reduceMotion ? { duration: 0 } : PALETTE_LAYOUT_SPRING}
		transition={
		reduceMotion ? { duration: 0 } : PALETTE_LAYOUT_SPRING
		}
		>
		<div className="mobile-palette-sheet-header">
		<span>Choose Color</span>
		@@ -743,7 +734,10 @@ export const Palette = () => {
		>
		<PaletteColorSurface hex={color.hex} />
		{settings.get["palette.colors"] && (
		<span aria-hidden="true" className="pallete-color-number">
		<span
		aria-hidden="true"
		className="pallete-color-number"
		>
		{index}
		</span>
		)}
		@@ -757,7 +751,10 @@ export const Palette = () => {
		{hasActiveTemplate &&
		settings.get["template.pixelCounts"] &&
		needed > 0 && (
		<span aria-hidden="true" className="pallete-color-needed">
		<span
		aria-hidden="true"
		className="pallete-color-needed"
		>
		{needed}
		</span>
		)}
		@@ -954,8 +951,7 @@ export const Palette = () => {
		{hasMod && (
		<Button
		aria-pressed={Boolean(
		moderatorState.showMenu \|\|
		moderatorState.inspectUser,
		moderatorState.showMenu \|\| moderatorState.inspectUser,
		)}
		className="mobile-action-sheet-item"
		onPress={() => {
		@@ -1004,9 +1000,7 @@ export const Palette = () => {
		layoutDependency={selectedPaletteColor?.id ?? "none"}
		transition={paletteLayoutTransition}
		>
		<div
		className="mobile-palette-bar"
		>
		<div className="mobile-palette-bar">
		<button
		type="button"
		className="mobile-palette-current"
		@@ -1021,7 +1015,10 @@ export const Palette = () => {
		}}
		>
		{selectedPaletteColor ? (
		<span className="mobile-palette-current-swatch" aria-hidden="true">
		<span
		className="mobile-palette-current-swatch"
		aria-hidden="true"
		>
		<PaletteColorSurface hex={selectedPaletteColor.hex} />
		</span>
		) : (
		@@ -1139,7 +1136,8 @@ export const Palette = () => {
		delay={250}
		placement="top"
		classNames={{
		content: "canvas-overlay-card palette-tooltip px-2 py-1 text-xs",
		content:
		"canvas-overlay-card palette-tooltip px-2 py-1 text-xs",
		}}
		>
		<motion.button

packages/lib/package.json

+1 −1

Original line number	Diff line number	Diff line
		@@ -36,7 +36,7 @@
		"dist"
		],
		"scripts": {
		"build": "rolldown -c rolldown.config.ts && tsc"
		"build": "rm -rf dist && rolldown -c rolldown.config.ts && tsc"
		},
		"dependencies": {
		"eventemitter3": "^5.0.4"

packages/lib/src/renderer/PanZoom.ts

+16 −15

Original line number	Diff line number	Diff line
		@@ -319,6 +319,7 @@ export class PanZoom extends EventEmitter<PanZoomEvents> {
		// Pxls/resources/public/include/helpers.js
		let haveZoomRendering = false;
		let haveImageRendering = false;

		const webkitBased = navigator.userAgent.match(/AppleWebKit/i);
		const iOSSafari =
		navigator.userAgent.match(/(iPod\|iPhone\|iPad)/i) && webkitBased;
		@@ -328,23 +329,23 @@ export class PanZoom extends EventEmitter<PanZoomEvents> {
		const msEdge = navigator.userAgent.indexOf("Edge") > -1;
		// const possiblyMobile =
		// window.innerWidth < 768 && navigator.userAgent.includes("Mobile");

		if (iOSSafari) {
		const iOS =
		parseFloat(
		(
		"" +
		(/CPU.OS ([0-9_]{1,5})\|(CPU like).AppleWebKit.*Mobile/i.exec(
		navigator.userAgent,
		) \|\| [0, ""])[1]
		)
		.replace("undefined", "3_2")
		.replace("_", ".")
		.replace("_", ""),
		) \|\| false;
		// const iOS =
		// parseFloat(
		// (
		// "" +
		// (/CPU.OS ([0-9_]{1,5})\|(CPU like).AppleWebKit.*Mobile/i.exec(
		// navigator.userAgent,
		// ) \|\| [0, ""])[1]
		// )
		// .replace("undefined", "3_2")
		// .replace("_", ".")
		// .replace("_", ""),
		// ) \|\| false;
		haveImageRendering = false;
		if (iOS && iOS >= 11) {
		haveZoomRendering = true;
		}
		// previously we were checking for ios >= 11, then enabling zoom rendering
		// as of ios 26 (confirmed) or maybe before, this will cause pixel calculations to be incorrect
		} else if (desktopSafari) {
		haveImageRendering = false;
		haveZoomRendering = true;

yarn.lock

+1 −0

Original line number	Diff line number	Diff line
		@@ -8603,6 +8603,7 @@ __metadata:
		version: 0.0.0-use.local
		resolution: "@sc07-canvas/mod-webhook-consumer@workspace:packages/mod-webhook-consumer"
		dependencies:
		"@tsconfig/recommended": "npm:^1.0.13"
		"@types/express": "npm:^5.0.6"
		"@types/node": "npm:^26.1.1"
		body-parser: "npm:^2.3.0"