feat: Support custom elements in @excalidraw/excalidraw

This commit is contained in:
ad1992 2022-03-23 19:04:00 +05:30
parent 2209e2c1e8
commit 39d0084a5e
13 changed files with 202 additions and 13 deletions

View file

@ -25,6 +25,7 @@ import {
ExcalidrawFreeDrawElement,
ExcalidrawImageElement,
ExcalidrawLinearElement,
ExcalidrawCustomElement,
} from "./types";
import { getElementAbsoluteCoords, getCurvePathOps, Bounds } from "./bounds";
@ -166,6 +167,7 @@ const hitTestPointAgainstElement = (args: HitTestArgs): boolean => {
case "text":
case "diamond":
case "ellipse":
case "custom":
const distance = distanceToBindableElement(args.element, args.point);
return args.check(distance, args.threshold);
case "freedraw": {
@ -199,6 +201,7 @@ export const distanceToBindableElement = (
case "rectangle":
case "image":
case "text":
case "custom":
return distanceToRectangle(element, point);
case "diamond":
return distanceToDiamond(element, point);
@ -228,7 +231,8 @@ const distanceToRectangle = (
| ExcalidrawRectangleElement
| ExcalidrawTextElement
| ExcalidrawFreeDrawElement
| ExcalidrawImageElement,
| ExcalidrawImageElement
| ExcalidrawCustomElement,
point: Point,
): number => {
const [, pointRel, hwidth, hheight] = pointRelativeToElement(element, point);
@ -504,6 +508,7 @@ export const determineFocusDistance = (
case "rectangle":
case "image":
case "text":
case "custom":
return c / (hwidth * (nabs + q * mabs));
case "diamond":
return mabs < nabs ? c / (nabs * hwidth) : c / (mabs * hheight);
@ -536,6 +541,7 @@ export const determineFocusPoint = (
case "image":
case "text":
case "diamond":
case "custom":
point = findFocusPointForRectangulars(element, focus, adjecentPointRel);
break;
case "ellipse":
@ -586,6 +592,7 @@ const getSortedElementLineIntersections = (
case "image":
case "text":
case "diamond":
case "custom":
const corners = getCorners(element);
intersections = corners
.flatMap((point, i) => {
@ -619,7 +626,8 @@ const getCorners = (
| ExcalidrawRectangleElement
| ExcalidrawImageElement
| ExcalidrawDiamondElement
| ExcalidrawTextElement,
| ExcalidrawTextElement
| ExcalidrawCustomElement,
scale: number = 1,
): GA.Point[] => {
const hx = (scale * element.width) / 2;
@ -628,6 +636,7 @@ const getCorners = (
case "rectangle":
case "image":
case "text":
case "custom":
return [
GA.point(hx, hy),
GA.point(hx, -hy),
@ -770,7 +779,8 @@ export const findFocusPointForRectangulars = (
| ExcalidrawRectangleElement
| ExcalidrawImageElement
| ExcalidrawDiamondElement
| ExcalidrawTextElement,
| ExcalidrawTextElement
| ExcalidrawCustomElement,
// Between -1 and 1 for how far away should the focus point be relative
// to the size of the element. Sign determines orientation.
relativeDistance: number,