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}> <pixiContainer x={coords.x} y={coords.y} scale={scale}>
{settings.canvasBorder && <CanvasBorder canvasSize={canvasSize} isDark={isDark} />} {settings.canvasBorder && <CanvasBorder canvasSize={canvasSize} isDark={isDark} />}
<Cursor mouseCoords={mouseCoords} radius={radius} isDark={isDark} /> <Cursor mouseCoords={mouseCoords} radius={radius} isDark={isDark} scale={scale} />
<Selection selection={selectionCoords} isDark={isDark} /> <Selection selection={selectionCoords} isDark={isDark} scale={scale} />
</pixiContainer> </pixiContainer>
{settings.grid && ( {settings.grid && (

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

@ -2,9 +2,10 @@ interface Props {
mouseCoords: Position; mouseCoords: Position;
radius: number; radius: number;
isDark: boolean; isDark: boolean;
scale: number;
} }
function Cursor({ mouseCoords, radius, isDark }: Props) { function Cursor({ mouseCoords, radius, isDark, scale }: Props) {
const isOddRadius = radius % 2 !== 0; const isOddRadius = radius % 2 !== 0;
const halfSize = Math.floor(radius / 2); const halfSize = Math.floor(radius / 2);
@ -18,7 +19,7 @@ function Cursor({ mouseCoords, radius, isDark }: Props) {
draw={(g) => { draw={(g) => {
g.clear(); g.clear();
g.rect(0, 0, size, size); 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 { interface Props {
selection: CoordinateArray; selection: CoordinateArray;
isDark: boolean; isDark: boolean;
scale: number;
} }
const DASH_LENGTH = 8; const DASH_LENGTH = 8;
const GAP_LENGTH = 5; const GAP_LENGTH = 5;
function Selection({ selection, isDark }: Props) { function Selection({ selection, isDark, scale }: Props) {
return ( return (
<pixiGraphics <pixiGraphics
draw={(g) => { draw={(g) => {
@ -62,7 +63,7 @@ function Selection({ selection, isDark }: Props) {
}); });
// Render the lines // Render the lines
g.stroke({ width: 2, color: isDark ? 0xffffff : 0x000000, alignment: 0 }); g.stroke({ width: 2 / scale, color: isDark ? 0xffffff : 0x000000, alignment: 0 });
}} }}
/> />
); );