gilles/excalidraw
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(snaps): remove point markers from snaplines

Browse Source
This commit is contained in:
Ryan Di
2026-05-11 17:13:00 +10:00
parent 2dfcc6f0ce
commit 708048ec61
1 changed files with 6 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/excalidraw/renderer/renderSnaps.ts
+6 -41
View File
@@ -8,7 +8,6 @@ import type { InteractiveCanvasAppState } from "../types";
const SNAP_COLOR_LIGHT = "#ff6b6b"; const SNAP_COLOR_LIGHT = "#ff6b6b";
const SNAP_COLOR_DARK = "#ff0000"; const SNAP_COLOR_DARK = "#ff0000";
const SNAP_WIDTH = 1; const SNAP_WIDTH = 1;
const SNAP_CROSS_SIZE = 2;
export const renderSnaps = ( export const renderSnaps = (
context: CanvasRenderingContext2D, context: CanvasRenderingContext2D,
@@ -19,8 +18,6 @@ export const renderSnaps = (
} }
// in dark mode, we need to adjust the color to account for color inversion. // in dark mode, we need to adjust the color to account for color inversion.
// Don't change if zen mode, because we draw only crosses, we want the
// colors to be more visible
const snapColor = const snapColor =
appState.theme === THEME.LIGHT || appState.zenModeEnabled appState.theme === THEME.LIGHT || appState.zenModeEnabled
? SNAP_COLOR_LIGHT ? SNAP_COLOR_LIGHT
@@ -38,7 +35,7 @@ export const renderSnaps = (
context.lineWidth = snapWidth; context.lineWidth = snapWidth;
context.strokeStyle = snapColor; context.strokeStyle = snapColor;
drawPointerSnapLine(snapLine, context, appState); drawPointerSnapLine(snapLine, context);
} else if (snapLine.type === "gap") { } else if (snapLine.type === "gap") {
context.lineWidth = snapWidth; context.lineWidth = snapWidth;
context.strokeStyle = snapColor; context.strokeStyle = snapColor;
@@ -53,7 +50,7 @@ export const renderSnaps = (
} else if (snapLine.type === "points") { } else if (snapLine.type === "points") {
context.lineWidth = snapWidth; context.lineWidth = snapWidth;
context.strokeStyle = snapColor; context.strokeStyle = snapColor;
drawPointsSnapLine(snapLine, context, appState); drawPointsSnapLine(snapLine, context);
} }
} }
@@ -63,50 +60,18 @@ export const renderSnaps = (
const drawPointsSnapLine = ( const drawPointsSnapLine = (
pointSnapLine: PointSnapLine, pointSnapLine: PointSnapLine,
context: CanvasRenderingContext2D, context: CanvasRenderingContext2D,
appState: InteractiveCanvasAppState,
) => { ) => {
if (!appState.zenModeEnabled) { const firstPoint = pointSnapLine.points[0];
const firstPoint = pointSnapLine.points[0]; const lastPoint = pointSnapLine.points[pointSnapLine.points.length - 1];
const lastPoint = pointSnapLine.points[pointSnapLine.points.length - 1];
drawLine(firstPoint, lastPoint, context); drawLine(firstPoint, lastPoint, context);
}
for (const point of pointSnapLine.points) {
drawCross(point, appState, context);
}
}; };
const drawPointerSnapLine = ( const drawPointerSnapLine = (
pointerSnapLine: PointerSnapLine, pointerSnapLine: PointerSnapLine,
context: CanvasRenderingContext2D, context: CanvasRenderingContext2D,
appState: InteractiveCanvasAppState,
) => { ) => {
drawCross(pointerSnapLine.points[0], appState, context); drawLine(pointerSnapLine.points[0], pointerSnapLine.points[1], context);
if (!appState.zenModeEnabled) {
drawLine(pointerSnapLine.points[0], pointerSnapLine.points[1], context);
}
};
const drawCross = <Point extends LocalPoint | GlobalPoint>(
[x, y]: Point,
appState: InteractiveCanvasAppState,
context: CanvasRenderingContext2D,
) => {
context.save();
const size =
(appState.zenModeEnabled ? SNAP_CROSS_SIZE * 1.5 : SNAP_CROSS_SIZE) /
appState.zoom.value;
context.beginPath();
context.moveTo(x - size, y - size);
context.lineTo(x + size, y + size);
context.moveTo(x + size, y - size);
context.lineTo(x - size, y + size);
context.stroke();
context.restore();
}; };
const drawLine = <Point extends LocalPoint | GlobalPoint>( const drawLine = <Point extends LocalPoint | GlobalPoint>(