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

render highlight on the outside

Browse Source
This commit is contained in:
dwelle
2025-09-14 13:41:32 +02:00
parent f6978ae162
commit 4d8a1b29f6
1 changed files with 44 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -196,6 +196,8 @@ const renderBindingHighlightForBindableElement = (
appState: InteractiveCanvasAppState, appState: InteractiveCanvasAppState,
renderConfig: InteractiveCanvasRenderConfig, renderConfig: InteractiveCanvasRenderConfig,
) => { ) => {
const offset = element.strokeWidth / 2;
switch (element.type) { switch (element.type) {
case "magicframe": case "magicframe":
case "frame": case "frame":
@@ -238,8 +240,8 @@ const renderBindingHighlightForBindableElement = (
context.translate(-cx, -cy); context.translate(-cx, -cy);
context.translate( context.translate(
element.x + appState.scrollX, element.x + appState.scrollX - offset,
element.y + appState.scrollY, element.y + appState.scrollY - offset,
); );
context.lineWidth = Math.max( context.lineWidth = Math.max(
@@ -253,10 +255,10 @@ const renderBindingHighlightForBindableElement = (
case "ellipse": case "ellipse":
context.beginPath(); context.beginPath();
context.ellipse( context.ellipse(
element.width / 2, (element.width + offset * 2) / 2,
element.height / 2, (element.height + offset * 2) / 2,
element.width / 2, (element.width + offset * 2) / 2,
element.height / 2, (element.height + offset * 2) / 2,
0, 0,
0, 0,
2 * Math.PI, 2 * Math.PI,
@@ -266,18 +268,21 @@ const renderBindingHighlightForBindableElement = (
break; break;
case "diamond": case "diamond":
{ {
const [segments, curves] = deconstructDiamondElement(element); const [segments, curves] = deconstructDiamondElement(
element,
offset,
);
// Draw each line segment individually // Draw each line segment individually
segments.forEach((segment) => { segments.forEach((segment) => {
context.beginPath(); context.beginPath();
context.moveTo( context.moveTo(
segment[0][0] - element.x, segment[0][0] - element.x + offset,
segment[0][1] - element.y, segment[0][1] - element.y + offset,
); );
context.lineTo( context.lineTo(
segment[1][0] - element.x, segment[1][0] - element.x + offset,
segment[1][1] - element.y, segment[1][1] - element.y + offset,
); );
context.stroke(); context.stroke();
}); });
@@ -286,14 +291,17 @@ const renderBindingHighlightForBindableElement = (
curves.forEach((curve) => { curves.forEach((curve) => {
const [start, control1, control2, end] = curve; const [start, control1, control2, end] = curve;
context.beginPath(); context.beginPath();
context.moveTo(start[0] - element.x, start[1] - element.y); context.moveTo(
start[0] - element.x + offset,
start[1] - element.y + offset,
);
context.bezierCurveTo( context.bezierCurveTo(
control1[0] - element.x, control1[0] - element.x + offset,
control1[1] - element.y, control1[1] - element.y + offset,
control2[0] - element.x, control2[0] - element.x + offset,
control2[1] - element.y, control2[1] - element.y + offset,
end[0] - element.x, end[0] - element.x + offset,
end[1] - element.y, end[1] - element.y + offset,
); );
context.stroke(); context.stroke();
}); });
@@ -302,18 +310,21 @@ const renderBindingHighlightForBindableElement = (
break; break;
default: default:
{ {
const [segments, curves] = deconstructRectanguloidElement(element); const [segments, curves] = deconstructRectanguloidElement(
element,
offset,
);
// Draw each line segment individually // Draw each line segment individually
segments.forEach((segment) => { segments.forEach((segment) => {
context.beginPath(); context.beginPath();
context.moveTo( context.moveTo(
segment[0][0] - element.x, segment[0][0] - element.x + offset,
segment[0][1] - element.y, segment[0][1] - element.y + offset,
); );
context.lineTo( context.lineTo(
segment[1][0] - element.x, segment[1][0] - element.x + offset,
segment[1][1] - element.y, segment[1][1] - element.y + offset,
); );
context.stroke(); context.stroke();
}); });
@@ -322,14 +333,17 @@ const renderBindingHighlightForBindableElement = (
curves.forEach((curve) => { curves.forEach((curve) => {
const [start, control1, control2, end] = curve; const [start, control1, control2, end] = curve;
context.beginPath(); context.beginPath();
context.moveTo(start[0] - element.x, start[1] - element.y); context.moveTo(
start[0] - element.x + offset,
start[1] - element.y + offset,
);
context.bezierCurveTo( context.bezierCurveTo(
control1[0] - element.x, control1[0] - element.x + offset,
control1[1] - element.y, control1[1] - element.y + offset,
control2[0] - element.x, control2[0] - element.x + offset,
control2[1] - element.y, control2[1] - element.y + offset,
end[0] - element.x, end[0] - element.x + offset,
end[1] - element.y, end[1] - element.y + offset,
); );
context.stroke(); context.stroke();
}); });