diff --git a/packages/excalidraw/renderer/renderSnaps.ts b/packages/excalidraw/renderer/renderSnaps.ts index dd131f7792..2d54507e59 100644 --- a/packages/excalidraw/renderer/renderSnaps.ts +++ b/packages/excalidraw/renderer/renderSnaps.ts @@ -8,7 +8,6 @@ import type { InteractiveCanvasAppState } from "../types"; const SNAP_COLOR_LIGHT = "#ff6b6b"; const SNAP_COLOR_DARK = "#ff0000"; const SNAP_WIDTH = 1; -const SNAP_CROSS_SIZE = 2; export const renderSnaps = ( context: CanvasRenderingContext2D, @@ -19,8 +18,6 @@ export const renderSnaps = ( } // 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 = appState.theme === THEME.LIGHT || appState.zenModeEnabled ? SNAP_COLOR_LIGHT @@ -38,7 +35,7 @@ export const renderSnaps = ( context.lineWidth = snapWidth; context.strokeStyle = snapColor; - drawPointerSnapLine(snapLine, context, appState); + drawPointerSnapLine(snapLine, context); } else if (snapLine.type === "gap") { context.lineWidth = snapWidth; context.strokeStyle = snapColor; @@ -53,7 +50,7 @@ export const renderSnaps = ( } else if (snapLine.type === "points") { context.lineWidth = snapWidth; context.strokeStyle = snapColor; - drawPointsSnapLine(snapLine, context, appState); + drawPointsSnapLine(snapLine, context); } } @@ -63,50 +60,18 @@ export const renderSnaps = ( const drawPointsSnapLine = ( pointSnapLine: PointSnapLine, context: CanvasRenderingContext2D, - appState: InteractiveCanvasAppState, ) => { - if (!appState.zenModeEnabled) { - const firstPoint = pointSnapLine.points[0]; - const lastPoint = pointSnapLine.points[pointSnapLine.points.length - 1]; + const firstPoint = pointSnapLine.points[0]; + const lastPoint = pointSnapLine.points[pointSnapLine.points.length - 1]; - drawLine(firstPoint, lastPoint, context); - } - - for (const point of pointSnapLine.points) { - drawCross(point, appState, context); - } + drawLine(firstPoint, lastPoint, context); }; const drawPointerSnapLine = ( pointerSnapLine: PointerSnapLine, context: CanvasRenderingContext2D, - appState: InteractiveCanvasAppState, ) => { - drawCross(pointerSnapLine.points[0], appState, context); - if (!appState.zenModeEnabled) { - drawLine(pointerSnapLine.points[0], pointerSnapLine.points[1], context); - } -}; - -const drawCross = ( - [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(); + drawLine(pointerSnapLine.points[0], pointerSnapLine.points[1], context); }; const drawLine = (