Ku6epXBOCTuK/easy-png-tools2
1
0
Fork 0
mirror of https://github.com/Ku6epXBOCTuK/easy-png-tools.git synced 2026-09-14 21:46:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

style: fix formatting via prettier

Browse Source
This commit is contained in:
Ku6epXBOCTuK
2026-08-28 14:29:54 +05:00
parent 10278981ba
commit ada96b3534
124 changed files with 8211 additions and 5662 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/lib/components/Preview.svelte
+39 -16
View File
@@ -1,7 +1,7 @@
<script lang="ts">
import { rgbToHex } from '$lib/core/color';
import type { PixelImage } from '$lib/core/types';
import PipetteLoupe from './tool/PipetteLoupe.svelte';
import { rgbToHex } from "$lib/core/color";
import type { PixelImage } from "$lib/core/types";
import PipetteLoupe from "./tool/PipetteLoupe.svelte";
interface Props {
image: PixelImage | null;
@@ -12,27 +12,42 @@
let { image, pipetteActive = false, onPickColor }: Props = $props();
let canvas = $state<HTMLCanvasElement | undefined>();
let hover = $state<{ clientX: number; clientY: number; px: number; py: number; hex: string } | null>(
null
);
let hover = $state<{
clientX: number;
clientY: number;
px: number;
py: number;
hex: string;
} | null>(null);
$effect(() => {
if (!canvas || !image) return;
canvas.width = image.width;
canvas.height = image.height;
const ctx = canvas.getContext('2d');
const ctx = canvas.getContext("2d");
if (!ctx) return;
ctx.putImageData(new ImageData(image.data, image.width, image.height), 0, 0);
ctx.putImageData(
new ImageData(image.data, image.width, image.height),
0,
0,
);
});
function pixelAt(event: MouseEvent): { px: number; py: number; hex: string } | null {
function pixelAt(
event: MouseEvent,
): { px: number; py: number; hex: string } | null {
if (!canvas || !image) return null;
const rect = canvas.getBoundingClientRect();
if (rect.width === 0 || rect.height === 0) return null;
const px = Math.floor((event.clientX - rect.left) * (canvas.width / rect.width));
const py = Math.floor((event.clientY - rect.top) * (canvas.height / rect.height));
if (px < 0 || py < 0 || px >= canvas.width || py >= canvas.height) return null;
const ctx = canvas.getContext('2d');
const px = Math.floor(
(event.clientX - rect.left) * (canvas.width / rect.width),
);
const py = Math.floor(
(event.clientY - rect.top) * (canvas.height / rect.height),
);
if (px < 0 || py < 0 || px >= canvas.width || py >= canvas.height)
return null;
const ctx = canvas.getContext("2d");
if (!ctx) return null;
const [r, g, b] = ctx.getImageData(px, py, 1, 1).data;
return { px, py, hex: rgbToHex(r, g, b) };
@@ -53,7 +68,13 @@
}
const pixel = pixelAt(event);
hover = pixel
? { clientX: event.clientX, clientY: event.clientY, px: pixel.px, py: pixel.py, hex: pixel.hex }
? {
clientX: event.clientX,
clientY: event.clientY,
px: pixel.px,
py: pixel.py,
hex: pixel.hex,
}
: null;
}
@@ -90,8 +111,10 @@
display: block;
max-width: 100%;
max-height: 32rem;
background:
repeating-conic-gradient(var(--check-a) 0% 25%, var(--check-b) 0% 50%);
background: repeating-conic-gradient(
var(--check-a) 0% 25%,
var(--check-b) 0% 50%
);
background-size: 16px 16px;
border: 1px solid var(--border);
}