highperfocused/bitmappery
1
0
Fork 0
mirror of https://github.com/igorski/bitmappery.git synced 2026-07-26 16:57:43 +02:00
Code Issues Packages Projects Releases Wiki Activity

Guides and selection lines now render at equal thickness across zoom levels

Browse Source
This commit is contained in:
Igor Zinken
2025-03-15 11:49:56 +01:00
parent b9843c3b43
commit c8b8826216
2 changed files with 7 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/rendering/canvas-elements/guide-renderer.ts
View File

@@ -1,7 +1,7 @@
/**
* The MIT License (MIT)
*
* Igor Zinken 2021-2022 - https://www.igorski.nl
* Igor Zinken 2021-2025 - https://www.igorski.nl
*
* Permission is hereby granted, free of charge, to any person obtaining a copy of
* this software and associated documentation files (the "Software"), to deal in
@@ -51,7 +51,7 @@ class GuideRenderer extends sprite {
this.drawPixelGrid = drawPixelGrid;
}
draw( ctx: CanvasRenderingContext2D, viewport: Viewport = null ): void {
draw( ctx: CanvasRenderingContext2D, viewport?: Viewport ): void {
/* grid */
@@ -85,6 +85,7 @@ class GuideRenderer extends sprite {
// we can snap the currently draggingSprite against its edge and center
const guides: Rectangle[] = getClosestSnappingPoints( this.canvas.draggingSprite, this.canvas.guides );
ctx.lineWidth = 1 / this.canvas.zoomFactor;
ctx.strokeStyle = "red";
for ( const { left, top, width, height } of guides ) {

7
src/rendering/canvas-elements/interaction-pane.ts
View File

@@ -396,7 +396,7 @@ class InteractionPane extends sprite {
update( _now: DOMHighResTimeStamp, framesSinceLastUpdate: number ): void {
if ( this._selectionClosed && this.getActiveDocument().activeSelection?.length ) {
this._dashOffset -= ( DASH_SPEED * framesSinceLastUpdate ); // advance the selection outline animation
this._dashOffset -= (( DASH_SPEED * this.canvas.zoomFactor ) * framesSinceLastUpdate ); // advance the selection outline animation
}
}
@@ -482,13 +482,14 @@ export default InteractionPane;
function drawSelectionShape( ctx: CanvasRenderingContext2D, zoomableCanvas: ZoomableCanvas, viewport: Viewport,
shape: Shape, currentPosition?: Point, dashOffset = 0 ): void {
const { zoomFactor } = zoomableCanvas;
ctx.save();
drawShapeOutline( ctx, zoomableCanvas, viewport, shape, "#000", currentPosition );
ctx.restore();
ctx.save();
ctx.setLineDash([ DASH_SIZE ]);
ctx.lineDashOffset = DASH_SIZE + dashOffset;
ctx.setLineDash([ DASH_SIZE / zoomFactor ]);
ctx.lineDashOffset = ( DASH_SIZE + dashOffset ) / zoomFactor;
drawShapeOutline( ctx, zoomableCanvas, viewport, shape, "#FFF", currentPosition );
ctx.restore();
}