marcel/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-10-23 16:04:33 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: Bind to frame when frame-bound object hidden part is approached

Browse Source
This commit is contained in:
Mark Tolmacs
2025-10-21 18:28:44 +02:00
parent 7e10773ecf
commit 12c67386cf
2 changed files with 41 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/element/src/binding.ts
View File

@@ -596,15 +596,15 @@ export const getBindingStrategyForDraggingBindingElementEndpoints = (
return {
start: startDragged
? {
mode: "inside",
element: hoveredElement,
mode: "orbit",
element: enclosingFrame,
focusPoint: globalPoint,
}
: start,
end: endDragged
? {
mode: "inside",
element: hoveredElement,
mode: "orbit",
element: enclosingFrame,
focusPoint: globalPoint,
}
: end,

69
packages/excalidraw/renderer/interactiveScene.ts
View File

@@ -409,44 +409,49 @@ const renderBindingHighlightForBindableElement = (
const radius = 0.5 * (Math.min(element.width, element.height) / 2);
// Draw center snap area
context.save();
context.translate(element.x + appState.scrollX, element.y + appState.scrollY);
if (!isFrameLikeElement(element)) {
context.save();
context.translate(
element.x + appState.scrollX,
element.y + appState.scrollY,
);
const PROGRESS_RATIO = (1 / BIND_MODE_TIMEOUT) * remainingTime;
const PROGRESS_RATIO = (1 / BIND_MODE_TIMEOUT) * remainingTime;
context.strokeStyle = "rgba(0, 0, 0, 0.2)";
context.lineWidth = 1 / appState.zoom.value;
context.setLineDash([4 / appState.zoom.value, 4 / appState.zoom.value]);
context.lineDashOffset = (-PROGRESS_RATIO * 10) / appState.zoom.value;
context.strokeStyle = "rgba(0, 0, 0, 0.2)";
context.lineWidth = 1 / appState.zoom.value;
context.setLineDash([4 / appState.zoom.value, 4 / appState.zoom.value]);
context.lineDashOffset = (-PROGRESS_RATIO * 10) / appState.zoom.value;
context.beginPath();
context.ellipse(
element.width / 2,
element.height / 2,
radius,
radius,
0,
0,
2 * Math.PI,
);
context.stroke();
context.beginPath();
context.ellipse(
element.width / 2,
element.height / 2,
radius,
radius,
0,
0,
2 * Math.PI,
);
context.stroke();
// context.strokeStyle = "transparent";
context.fillStyle = "rgba(0, 0, 0, 0.04)";
context.beginPath();
context.ellipse(
element.width / 2,
element.height / 2,
radius * (1 - opacity),
radius * (1 - opacity),
0,
0,
2 * Math.PI,
);
// context.strokeStyle = "transparent";
context.fillStyle = "rgba(0, 0, 0, 0.04)";
context.beginPath();
context.ellipse(
element.width / 2,
element.height / 2,
radius * (1 - opacity),
radius * (1 - opacity),
0,
0,
2 * Math.PI,
);
context.fill();
context.fill();
context.restore();
context.restore();
}
return {
runtime: (state?.runtime ?? 0) + deltaTime,