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

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

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