tweak binding highlight color

This commit is contained in:
dwelle
2025-08-26 18:33:04 +02:00
parent 90097bd29c
commit b9a3c6246a
2 changed files with 13 additions and 3 deletions

View File

@@ -21,6 +21,7 @@ import {
assertNever, assertNever,
COLOR_PALETTE, COLOR_PALETTE,
LINE_POLYGON_POINT_MERGE_DISTANCE, LINE_POLYGON_POINT_MERGE_DISTANCE,
THEME,
} from "@excalidraw/common"; } from "@excalidraw/common";
import { RoughGenerator } from "roughjs/bin/generator"; import { RoughGenerator } from "roughjs/bin/generator";
@@ -32,6 +33,7 @@ import type { Mutable } from "@excalidraw/common/utility-types";
import type { import type {
AppState, AppState,
EmbedsValidationStatus, EmbedsValidationStatus,
InteractiveCanvasAppState,
} from "@excalidraw/excalidraw/types"; } from "@excalidraw/excalidraw/types";
import type { import type {
ElementShape, ElementShape,
@@ -110,6 +112,7 @@ export class ShapeCache {
T extends ExcalidrawBindableElement, T extends ExcalidrawBindableElement,
>( >(
element: T, element: T,
appState: Pick<InteractiveCanvasAppState, "theme">,
renderConfig?: { renderConfig?: {
isExporting: boolean; isExporting: boolean;
canvasBackgroundColor: AppState["viewBackgroundColor"]; canvasBackgroundColor: AppState["viewBackgroundColor"];
@@ -127,7 +130,8 @@ export class ShapeCache {
) as Drawable; ) as Drawable;
shape.options.fill = "transparent"; shape.options.fill = "transparent";
shape.options.stroke = "#ff028d"; shape.options.stroke =
appState.theme === THEME.DARK ? "#035da1" : "#6abdfc";
shape.options.strokeWidth = shape.options.strokeWidth * 1.1; shape.options.strokeWidth = shape.options.strokeWidth * 1.1;
return shape; return shape;

View File

@@ -189,11 +189,16 @@ const renderSingleLinearPoint = <Point extends GlobalPoint | LocalPoint>(
const renderBindingHighlightForBindableElement = ( const renderBindingHighlightForBindableElement = (
context: CanvasRenderingContext2D, context: CanvasRenderingContext2D,
element: ExcalidrawBindableElement, element: ExcalidrawBindableElement,
_elementsMap: ElementsMap,
appState: Pick<InteractiveCanvasAppState, "theme">,
) => { ) => {
context.translate(element.x, element.y); context.translate(element.x, element.y);
const rc = rough.canvas(context.canvas); const rc = rough.canvas(context.canvas);
const drawable = ShapeCache.generateBindableElementHighlight(element); const drawable = ShapeCache.generateBindableElementHighlight(
element,
appState,
);
rc.draw(drawable); rc.draw(drawable);
}; };
@@ -201,6 +206,7 @@ const renderBindingHighlightForSuggestedPointBinding = (
context: CanvasRenderingContext2D, context: CanvasRenderingContext2D,
suggestedBinding: SuggestedPointBinding, suggestedBinding: SuggestedPointBinding,
elementsMap: ElementsMap, elementsMap: ElementsMap,
appState: Pick<InteractiveCanvasAppState, "theme">,
) => { ) => {
const [element, startOrEnd] = suggestedBinding; const [element, startOrEnd] = suggestedBinding;
@@ -302,7 +308,7 @@ const renderBindingHighlight = (
context.save(); context.save();
context.translate(appState.scrollX, appState.scrollY); context.translate(appState.scrollX, appState.scrollY);
renderHighlight(context, suggestedBinding as any, elementsMap); renderHighlight(context, suggestedBinding as any, elementsMap, appState);
context.restore(); context.restore();
}; };