trafficlunar/blockmatic
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: change thickness of cursor and selection with scale

Browse source
This commit is contained in:
trafficlunar 2025-10-08 17:30:45 +01:00
parent 2501adebd2
commit 7a115e751d
3 changed files with 8 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/canvas/Canvas.tsx
View file

@ -527,8 +527,8 @@ function Canvas() {
<pixiContainer x={coords.x} y={coords.y} scale={scale}>
{settings.canvasBorder && <CanvasBorder canvasSize={canvasSize} isDark={isDark} />}
<Cursor mouseCoords={mouseCoords} radius={radius} isDark={isDark} />
<Selection selection={selectionCoords} isDark={isDark} />
<Cursor mouseCoords={mouseCoords} radius={radius} isDark={isDark} scale={scale} />
<Selection selection={selectionCoords} isDark={isDark} scale={scale} />
</pixiContainer>
{settings.grid && (

5
src/components/canvas/Cursor.tsx
View file

@ -2,9 +2,10 @@ interface Props {
mouseCoords: Position;
radius: number;
isDark: boolean;
scale: number;
}
function Cursor({ mouseCoords, radius, isDark }: Props) {
function Cursor({ mouseCoords, radius, isDark, scale }: Props) {
const isOddRadius = radius % 2 !== 0;
const halfSize = Math.floor(radius / 2);
@ -18,7 +19,7 @@ function Cursor({ mouseCoords, radius, isDark }: Props) {
draw={(g) => {
g.clear();
g.rect(0, 0, size, size);
g.stroke({ width: 1, color: isDark ? 0xffffff : 0x000000, alignment: 1 });
g.stroke({ width: 2 / scale, color: isDark ? 0xffffff : 0x000000, alignment: 0 });
}}
/>
);

5
src/components/canvas/Selection.tsx
View file

@ -1,12 +1,13 @@
interface Props {
selection: CoordinateArray;
isDark: boolean;
scale: number;
}
const DASH_LENGTH = 8;
const GAP_LENGTH = 5;
function Selection({ selection, isDark }: Props) {
function Selection({ selection, isDark, scale }: Props) {
return (
<pixiGraphics
draw={(g) => {
@ -62,7 +63,7 @@ function Selection({ selection, isDark }: Props) {
});
// Render the lines
g.stroke({ width: 2, color: isDark ? 0xffffff : 0x000000, alignment: 0 });
g.stroke({ width: 2 / scale, color: isDark ? 0xffffff : 0x000000, alignment: 0 });
}}
/>
);