smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Scale binding highlight to cover the entire binding area

Browse source
This commit is contained in:
Mark Tolmacs 2025-04-22 19:02:26 +02:00
parent 7f23f37a01
commit 8f6a81c58e
No known key found for this signature in database
2 changed files with 11 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

25
packages/element/src/binding.ts
View file

@ -107,7 +107,7 @@ export const isBindingEnabled = (appState: AppState): boolean => {
};
export const FIXED_BINDING_DISTANCE = 5;
export const BINDING_HIGHLIGHT_THICKNESS = 10;
const BINDING_HIGHLIGHT_THICKNESS = 10;
export const BINDING_HIGHLIGHT_OFFSET = 4;
const getNonDeletedElements = (
@ -446,22 +446,13 @@ export const maybeBindLinearElement = (
const normalizePointBinding = (
binding: { focus: number; gap: number },
hoveredElement: ExcalidrawBindableElement,
) => {
let gap = binding.gap;
const maxGap = maxBindingGap(
hoveredElement,
hoveredElement.width,
hoveredElement.height,
);
if (gap > maxGap) {
gap = BINDING_HIGHLIGHT_THICKNESS + BINDING_HIGHLIGHT_OFFSET;
}
return {
...binding,
gap,
};
};
) => ({
...binding,
gap: Math.min(
binding.gap,
maxBindingGap(hoveredElement, hoveredElement.width, hoveredElement.height),
),
});
export const bindLinearElement = (
linearElement: NonDeleted<ExcalidrawLinearElement>,

6
packages/excalidraw/renderer/interactiveScene.ts
View file

@ -17,7 +17,6 @@ import {
import {
BINDING_HIGHLIGHT_OFFSET,
BINDING_HIGHLIGHT_THICKNESS,
maxBindingGap,
} from "@excalidraw/element/binding";
import { LinearElementEditor } from "@excalidraw/element/linearElementEditor";
@ -262,8 +261,9 @@ const renderBindingHighlightForBindableElement = (
context.strokeStyle = "rgba(0,0,0,.05)";
// When zooming out, make line width greater for visibility
const zoomValue = zoom.value < 1 ? zoom.value : 1;
context.lineWidth = BINDING_HIGHLIGHT_THICKNESS / zoomValue;
context.lineWidth =
maxBindingGap(element, element.width, element.height, zoom) -
BINDING_HIGHLIGHT_OFFSET;
// To ensure the binding highlight doesn't overlap the element itself
const padding = context.lineWidth / 2 + BINDING_HIGHLIGHT_OFFSET;