feat: canvas search (#8438)

Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
This commit is contained in:
Ryan Di 2024-09-09 23:12:07 +08:00 committed by GitHub
parent 5a11c70714
commit 6959a363f0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
35 changed files with 1424 additions and 47 deletions

View file

@ -30,8 +30,12 @@ import {
shouldShowBoundingBox,
} from "../element/transformHandles";
import { arrayToMap, throttleRAF } from "../utils";
import type { InteractiveCanvasAppState } from "../types";
import { DEFAULT_TRANSFORM_HANDLE_SPACING, FRAME_STYLE } from "../constants";
import {
DEFAULT_TRANSFORM_HANDLE_SPACING,
FRAME_STYLE,
THEME,
} from "../constants";
import { type InteractiveCanvasAppState } from "../types";
import { renderSnaps } from "../renderer/renderSnaps";
@ -952,9 +956,48 @@ const _renderInteractiveScene = ({
context.restore();
}
appState.searchMatches.forEach(({ id, focus, matchedLines }) => {
const element = elementsMap.get(id);
if (element && isTextElement(element)) {
const [elementX1, elementY1, , , cx, cy] = getElementAbsoluteCoords(
element,
elementsMap,
true,
);
context.save();
if (appState.theme === THEME.LIGHT) {
if (focus) {
context.fillStyle = "rgba(255, 124, 0, 0.4)";
} else {
context.fillStyle = "rgba(255, 226, 0, 0.4)";
}
} else if (focus) {
context.fillStyle = "rgba(229, 82, 0, 0.4)";
} else {
context.fillStyle = "rgba(99, 52, 0, 0.4)";
}
context.translate(appState.scrollX, appState.scrollY);
context.translate(cx, cy);
context.rotate(element.angle);
matchedLines.forEach((matchedLine) => {
context.fillRect(
elementX1 + matchedLine.offsetX - cx,
elementY1 + matchedLine.offsetY - cy,
matchedLine.width,
matchedLine.height,
);
});
context.restore();
}
});
renderSnaps(context, appState);
// Reset zoom
context.restore();
renderRemoteCursors({