Nicholai/excalidraw
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed point binding for simple arrows

Browse Source 
Tests added

Fix binding

Remove unneeded params

Unfinished simple arrow avoidance

Fix newly created jumping arrow when gets outside

Do not apply the jumping logic to elbow arrows for new elements

Existing arrows now jump out

Type updates to support fixed binding for simple arrows

Fix crash for elbow arrws in mutateElement()

Refactored simple arrow creation

Updating tests

No confirm threshold when inside biding range

Fix multi-point arrow grid off

Make elbow arrows respect grids

Unbind arrow if bound and moved at shaft of arrow key

Fix binding test

Fix drag unbind when the bound element is in the selection

Do not move mid point for simple arrows bound on both ends

Add test for mobing mid points for simple arrows when bound on the same element on both ends

Fix linear editor bug when both midpoint and endpoint is moved

Fix all point multipoint arrow highlight and binding

Arrow dragging gets a little drag to avoid accidental unbinding

Fixed point binding for simple arrows when the arrow doesn't point to the element

Fix binding disabled use-case triggering arrow editor

Timed binding mode change for simple arrows

Apply fixes

Remove code to unbind on drag

Update simple arrow fixed point when arrow is dragged or moved by arrow keys

Binding highlight fixes

Change bind mode timeout logic

Fix tests

Add Alt bindMode switch

 No dragging of arrows when bound, similar to elbow

Fix timeout not taking effect immediately

Bumop z-index for arrows when dragged

Signed-off-by: Mark Tolmacs <mark@lazycat.hu>

Only transparent bindables allow binding fallthrough

Signed-off-by: Mark Tolmacs <mark@lazycat.hu>

Fix lint

Signed-off-by: Mark Tolmacs <mark@lazycat.hu>

Fix point click array creation interaction with fixed point binding

Signed-off-by: Mark Tolmacs <mark@lazycat.hu>

Restrict new behavior to arrows only

Signed-off-by: Mark Tolmacs <mark@lazycat.hu>

Allow binding inside images

Signed-off-by: Mark Tolmacs <mark@lazycat.hu>

Fix already existing fixed binding retention

Signed-off-by: Mark Tolmacs <mark@lazycat.hu>

Refactor and implement fixed point binding for unfilled elements

Restore drag

Removed point binding

Binding code refactor

Added centered focus point

Binding & focus point debug

Add invariants to check binding integrity in elements

Binding fixes

Small refactors

Completely rewritten binding

Include point updates after binding update

Fix point updates when endpoint dragged and opposite endpoint orbits

centered focus point only for new arrows

Make z-index arrow reorder on bind

Turn off inside binding mode after leaving a shape

Remove invariants from debug

feat: expose `applyTo` options, don't commit empty text element (#9744)

* Expose applyTo options, skip re-draw for empty text

* Don't commit empty text elements

test: added test file for distribute (#9754)

z-index update

Bind mode on precise binding

Fix binding to inside element

Fix initial arrow not following cursor (white dot)

Fix elbow arrow

Fix z-index so it works on hover

Fix fixed angle orbiting

Move point click arrow creation over to common strategy

Signed-off-by: Mark Tolmacs <mark@lazycat.hu>

Add binding strategy for drag arrow creation

Fix elbow arrow

Fix point handles

Snap to center

Fix transparent shape binding

Internal arrow creation fix

Fix point binding

Fix selection bug

Fix new arrow focus point

Images now always bind inside

Flashing arrow creation on binding band

Add watchState debug method to window.h

Fix debug canvas crash

Remove non-needed bind mode

Fix restore

No keyboard movement when bound

Add actionFinalize when arrow in edit mode

Add drag to the Stats panel when bound arrow is moved

Further simplify curve tracking

Add typing to action register()

Signed-off-by: Mark Tolmacs <mark@lazycat.hu>

Fix point at finalize

Signed-off-by: Mark Tolmacs <mark@lazycat.hu>

Fix type errors

Signed-off-by: Mark Tolmacs <mark@lazycat.hu>

New arrow binding rules

Signed-off-by: Mark Tolmacs <mark@lazycat.hu>

Fix cyclical dep

Signed-off-by: Mark Tolmacs <mark@lazycat.hu>

Fix jiggly arrows

Fix jiggly arrow x2

Long inside-other binding

Click-click binding

Fix arrows

Performance

[PERF] Replace in-place Jacobian derivation with analytical version

Different approach to inside binding

Signed-off-by: Mark Tolmacs <mark@lazycat.hu>

Fixes

Fix inconsistent arrow start jump out

Change how images are bound to on new arrow creation

Lower timeout

Small insurance fix

Fix curve test

Signed-off-by: Mark Tolmacs <mark@lazycat.hu>

No center focus point

90% inside center binding

Fixing tests

fix: Elbow arrow fixes

fix: More arrow fixes

Do not trigger arrow binding for linear elements

fix: Linear elements

fix: Refactor actionFinalize for linear

Binding tests updated

fix: Jump when cursor not moved

fix: history tests

Fix history snapshot

Fix undo issue

fix(eraser): Remove binding from the other element

fix(tests): Update tests

chore: Attempt filtering new set state

Fix excessive history recording

Signed-off-by: Mark Tolmacs <mark@lazycat.hu>

Fix all tests

Signed-off-by: Mark Tolmacs <mark@lazycat.hu>

fix(transform): Fix group resize and rotate

fix(binding): Harmonize binding param usage

fix: Center focus point

Signed-off-by: Mark Tolmacs <mark@lazycat.hu>

chore: Trigger build

Remove binding gap

Signed-off-by: Mark Tolmacs <mark@lazycat.hu>

Binding highlight refactor

fix: Refactored timeout bind mode handling

fix: Center when orbiting

feat: Color change on highlight

Fix orbit binding highlight

fix: hiding arrow

Fix arrow binding

Fix arrow drag selection logic

Binding highlight is now hot pink

Change inside binding logic for start point

Render focus point in debug mode

Fix snap to center

Fix actionFinalize for new arrow creation

fix: snapToCenter()

80% by length

fix: attempt at fixing the dancing arrows

feat: No center snap when start is not bound

Fix centering for existing arrows

tweak binding highlight color

change `appState.suggestedBindings` -> `suggestedBinding` & remove unused code

Refactor delayed bind mode change

Binding highlight rotation support + image support

fix(highlight): Overdraw fixes

feat: Do not allow drag bound arrow closer to the shape than dragging distance

feat: Stroke width adaptive fixed binding distance

chore: More point dragging centralization

New element behavior

Refactor dragging

Fix incorrect highlight sizing

Signed-off-by: Mark Tolmacs <mark@lazycat.hu>

Fix delayed bind mode for multiElement arrows

Signed-off-by: Mark Tolmacs <mark@lazycat.hu>

Fix multi-point

Signed-off-by: Mark Tolmacs <mark@lazycat.hu>

Fix elbow arrows

Simplify state

Small positional fixes

Fix jiggly arrows

Signed-off-by: Mark Tolmacs <mark@lazycat.hu>

Fixes for arrow dragging

Signed-off-by: Mark Tolmacs <mark@lazycat.hu>

Elbow arrow fixes

Highlight fixes

Fix elbow arrow binding

Frame highlight

Fix elbow mid-point binding

Fix binding suggestion for disabled binding state

Implement Alt

Remove debug
This commit is contained in:
Mark Tolmacs 2025-06-18 19:21:00 +02:00
parent 3bdaafe4b5
commit 4438137a57
No known key found for this signature in database
75 changed files with 5173 additions and 5334 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
excalidraw-app/App.tsx
View File

@ -662,8 +662,8 @@ const ExcalidrawWrapper = () => {
debugRenderer(
debugCanvasRef.current,
appState,
elements,
window.devicePixelRatio,
() => forceRefresh((prev) => !prev),
);
}
};

195
excalidraw-app/components/DebugCanvas.tsx
View File

@ -8,9 +8,15 @@ import {
getNormalizedCanvasDimensions,
} from "@excalidraw/excalidraw/renderer/helpers";
import { type AppState } from "@excalidraw/excalidraw/types";
import { throttleRAF } from "@excalidraw/common";
import { arrayToMap, throttleRAF } from "@excalidraw/common";
import { useCallback } from "react";
import {
getGlobalFixedPointForBindableElement,
isArrowElement,
isBindableElement,
} from "@excalidraw/element";
import {
isLineSegment,
type GlobalPoint,
@ -21,8 +27,14 @@ import { isCurve } from "@excalidraw/math/curve";
import React from "react";
import type { Curve } from "@excalidraw/math";
import type { DebugElement } from "@excalidraw/utils/visualdebug";
import type { DebugElement } from "@excalidraw/common";
import type {
ElementsMap,
ExcalidrawArrowElement,
ExcalidrawBindableElement,
FixedPointBinding,
OrderedExcalidrawElement,
} from "@excalidraw/element/types";
import { STORAGE_KEYS } from "../app_constants";
@ -75,6 +87,176 @@ const renderOrigin = (context: CanvasRenderingContext2D, zoom: number) => {
context.save();
};
const _renderBinding = (
context: CanvasRenderingContext2D,
binding: FixedPointBinding,
elementsMap: ElementsMap,
zoom: number,
width: number,
height: number,
color: string,
) => {
if (!binding.fixedPoint) {
console.warn("Binding must have a fixedPoint");
return;
}
const bindable = elementsMap.get(
binding.elementId,
) as ExcalidrawBindableElement;
const [x, y] = getGlobalFixedPointForBindableElement(
binding.fixedPoint,
bindable,
elementsMap,
);
context.save();
context.strokeStyle = color;
context.lineWidth = 1;
context.beginPath();
context.moveTo(x * zoom, y * zoom);
context.bezierCurveTo(
x * zoom - width,
y * zoom - height,
x * zoom - width,
y * zoom + height,
x * zoom,
y * zoom,
);
context.stroke();
context.restore();
};
const _renderBindableBinding = (
binding: FixedPointBinding,
context: CanvasRenderingContext2D,
elementsMap: ElementsMap,
zoom: number,
width: number,
height: number,
color: string,
) => {
const bindable = elementsMap.get(
binding.elementId,
) as ExcalidrawBindableElement;
if (!binding.fixedPoint) {
console.warn("Binding must have a fixedPoint");
return;
}
const [x, y] = getGlobalFixedPointForBindableElement(
binding.fixedPoint,
bindable,
elementsMap,
);
context.save();
context.strokeStyle = color;
context.lineWidth = 1;
context.beginPath();
context.moveTo(x * zoom, y * zoom);
context.bezierCurveTo(
x * zoom + width,
y * zoom + height,
x * zoom + width,
y * zoom - height,
x * zoom,
y * zoom,
);
context.stroke();
context.restore();
};
const renderBindings = (
context: CanvasRenderingContext2D,
elements: readonly OrderedExcalidrawElement[],
zoom: number,
) => {
const elementsMap = arrayToMap(elements);
const dim = 16;
elements.forEach((element) => {
if (element.isDeleted) {
return;
}
if (isArrowElement(element)) {
if (element.startBinding) {
if (
!elementsMap
.get(element.startBinding.elementId)
?.boundElements?.find((e) => e.id === element.id)
) {
return;
}
_renderBinding(
context,
element.startBinding,
elementsMap,
zoom,
dim,
dim,
"red",
);
}
if (element.endBinding) {
if (
!elementsMap
.get(element.endBinding.elementId)
?.boundElements?.find((e) => e.id === element.id)
) {
return;
}
_renderBinding(
context,
element.endBinding,
elementsMap,
zoom,
dim,
dim,
"red",
);
}
}
if (isBindableElement(element) && element.boundElements?.length) {
element.boundElements.forEach((boundElement) => {
if (boundElement.type !== "arrow") {
return;
}
const arrow = elementsMap.get(
boundElement.id,
) as ExcalidrawArrowElement;
if (arrow && arrow.startBinding?.elementId === element.id) {
_renderBindableBinding(
arrow.startBinding,
context,
elementsMap,
zoom,
dim,
dim,
"green",
);
}
if (arrow && arrow.endBinding?.elementId === element.id) {
_renderBindableBinding(
arrow.endBinding,
context,
elementsMap,
zoom,
dim,
dim,
"green",
);
}
});
}
});
};
const render = (
frame: DebugElement[],
context: CanvasRenderingContext2D,
@ -107,8 +289,8 @@ const render = (
const _debugRenderer = (
canvas: HTMLCanvasElement,
appState: AppState,
elements: readonly OrderedExcalidrawElement[],
scale: number,
refresh: () => void,
) => {
const [normalizedWidth, normalizedHeight] = getNormalizedCanvasDimensions(
canvas,
@ -131,6 +313,7 @@ const _debugRenderer = (
);
renderOrigin(context, appState.zoom.value);
renderBindings(context, elements, appState.zoom.value);
if (
window.visualDebug?.currentFrame &&
@ -182,10 +365,10 @@ export const debugRenderer = throttleRAF(
(
canvas: HTMLCanvasElement,
appState: AppState,
elements: readonly OrderedExcalidrawElement[],
scale: number,
refresh: () => void,
) => {
_debugRenderer(canvas, appState, scale, refresh);
_debugRenderer(canvas, appState, elements, scale);
},
{ trailing: true },
);

2
packages/common/src/constants.ts
View File

@ -524,3 +524,5 @@ export enum UserIdleState {
export const LINE_POLYGON_POINT_MERGE_DISTANCE = 20;
export const DOUBLE_TAP_POSITION_THRESHOLD = 35;
export const BIND_MODE_TIMEOUT = 800; // ms

1
packages/common/src/index.ts
View File

@ -10,3 +10,4 @@ export * from "./random";
export * from "./url";
export * from "./utils";
export * from "./emitter";
export * from "./visualdebug";

5
packages/common/src/utils.ts
View File

@ -1,4 +1,5 @@
import { average } from "@excalidraw/math";
import { isImageElement } from "@excalidraw/element";
import type {
ExcalidrawBindableElement,
@ -566,8 +567,8 @@ export const isTransparent = (color: string) => {
);
};
export const isBindingFallthroughEnabled = (el: ExcalidrawBindableElement) =>
el.fillStyle !== "solid" || isTransparent(el.backgroundColor);
export const isAlwaysInsideBinding = (element: ExcalidrawBindableElement) =>
isImageElement(element);
export type ResolvablePromise<T> = Promise<T> & {
resolve: [T] extends [undefined]

2
packages/utils/src/visualdebug.ts → packages/common/src/visualdebug.ts
View File

@ -63,6 +63,8 @@ export const debugDrawLine = (
);
};
export const testDebug = () => {};
export const debugDrawPoint = (
p: GlobalPoint,
opts?: {

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

File diff suppressed because it is too large Load Diff

91
packages/element/src/collision.ts
View File

@ -1,4 +1,4 @@
import { isTransparent } from "@excalidraw/common";
import { invariant, isTransparent } from "@excalidraw/common";
import {
curveIntersectLineSegment,
isPointWithinBounds,
@ -38,6 +38,8 @@ import {
} from "./bounds";
import {
hasBoundTextElement,
isBindableElement,
isFrameLikeElement,
isFreeDrawElement,
isIframeLikeElement,
isImageElement,
@ -58,12 +60,17 @@ import { distanceToElement } from "./distance";
import type {
ElementsMap,
ExcalidrawBindableElement,
ExcalidrawDiamondElement,
ExcalidrawElement,
ExcalidrawEllipseElement,
ExcalidrawFreeDrawElement,
ExcalidrawLinearElement,
ExcalidrawRectanguloidElement,
NonDeleted,
NonDeletedExcalidrawElement,
NonDeletedSceneElementsMap,
Ordered,
} from "./types";
export const shouldTestInside = (element: ExcalidrawElement) => {
@ -94,6 +101,7 @@ export type HitTestArgs = {
threshold: number;
elementsMap: ElementsMap;
frameNameBound?: FrameNameBounds | null;
overrideShouldTestInside?: boolean;
};
export const hitElementItself = ({
@ -102,6 +110,7 @@ export const hitElementItself = ({
threshold,
elementsMap,
frameNameBound = null,
overrideShouldTestInside = false,
}: HitTestArgs) => {
// Hit test against a frame's name
const hitFrameName = frameNameBound
@ -134,7 +143,9 @@ export const hitElementItself = ({
}
// Do the precise (and relatively costly) hit test
const hitElement = shouldTestInside(element)
const hitElement = (
overrideShouldTestInside ? true : shouldTestInside(element)
)
? // Since `inShape` tests STRICTLY againt the insides of a shape
// we would need `onShape` as well to include the "borders"
isPointInElement(point, element, elementsMap) ||
@ -193,6 +204,82 @@ export const hitElementBoundText = (
return isPointInElement(point, boundTextElement, elementsMap);
};
const bindingBorderTest = (
element: NonDeleted<ExcalidrawBindableElement>,
[x, y]: Readonly<GlobalPoint>,
elementsMap: NonDeletedSceneElementsMap,
tolerance: number = 0,
): boolean => {
const p = pointFrom<GlobalPoint>(x, y);
const shouldTestInside =
// disable fullshape snapping for frame elements so we
// can bind to frame children
!isFrameLikeElement(element);
// PERF: Run a cheap test to see if the binding element
// is even close to the element
const t = Math.max(1, tolerance);
const bounds = [x - t, y - t, x + t, y + t] as Bounds;
const elementBounds = getElementBounds(element, elementsMap);
if (!doBoundsIntersect(bounds, elementBounds)) {
return false;
}
// Do the intersection test against the element since it's close enough
const intersections = intersectElementWithLineSegment(
element,
elementsMap,
lineSegment(elementCenterPoint(element, elementsMap), p),
);
const distance = distanceToElement(element, elementsMap, p);
return shouldTestInside
? intersections.length === 0 || distance <= tolerance
: intersections.length > 0 && distance <= t;
};
export const getHoveredElementForBinding = (
point: Readonly<GlobalPoint>,
elements: readonly Ordered<NonDeletedExcalidrawElement>[],
elementsMap: NonDeletedSceneElementsMap,
toleranceFn?: (element: ExcalidrawBindableElement) => number,
): NonDeleted<ExcalidrawBindableElement> | null => {
const candidateElements: NonDeleted<ExcalidrawBindableElement>[] = [];
// We need to to hit testing from front (end of the array) to back (beginning of the array)
// because array is ordered from lower z-index to highest and we want element z-index
// with higher z-index
for (let index = elements.length - 1; index >= 0; --index) {
const element = elements[index];
invariant(
!element.isDeleted,
"Elements in the function parameter for getAllElementsAtPositionForBinding() should not contain deleted elements",
);
if (
isBindableElement(element, false) &&
bindingBorderTest(element, point, elementsMap, toleranceFn?.(element))
) {
candidateElements.push(element);
}
}
if (!candidateElements || candidateElements.length === 0) {
return null;
}
if (candidateElements.length === 1) {
return candidateElements[0];
}
// Prefer smaller shapes
return candidateElements
.sort(
(a, b) => b.width ** 2 + b.height ** 2 - (a.width ** 2 + a.height ** 2),
)
.pop() as NonDeleted<ExcalidrawBindableElement>;
};
/**
* Intersect a line with an element for binding test
*

49
packages/element/src/dragElements.ts
View File

@ -2,6 +2,7 @@ import {
TEXT_AUTOWRAP_THRESHOLD,
getGridPoint,
getFontString,
DRAGGING_THRESHOLD,
} from "@excalidraw/common";
import type {
@ -13,7 +14,7 @@ import type {
import type { NonDeletedExcalidrawElement } from "@excalidraw/element/types";
import { updateBoundElements } from "./binding";
import { unbindBindingElement, updateBoundElements } from "./binding";
import { getCommonBounds } from "./bounds";
import { getPerfectElementSize } from "./sizeHelpers";
import { getBoundTextElement } from "./textElement";
@ -102,9 +103,26 @@ export const dragSelectedElements = (
gridSize,
);
const elementsToUpdateIds = new Set(
Array.from(elementsToUpdate, (el) => el.id),
);
elementsToUpdate.forEach((element) => {
updateElementCoords(pointerDownState, element, scene, adjustedOffset);
const isArrow = !isArrowElement(element);
const isStartBoundElementSelected =
isArrow ||
(element.startBinding
? elementsToUpdateIds.has(element.startBinding.elementId)
: false);
const isEndBoundElementSelected =
isArrow ||
(element.endBinding
? elementsToUpdateIds.has(element.endBinding.elementId)
: false);
if (!isArrowElement(element)) {
updateElementCoords(pointerDownState, element, scene, adjustedOffset);
// skip arrow labels since we calculate its position during render
const textElement = getBoundTextElement(
element,
@ -121,6 +139,33 @@ export const dragSelectedElements = (
updateBoundElements(element, scene, {
simultaneouslyUpdated: Array.from(elementsToUpdate),
});
} else if (
// NOTE: Add a little initial drag to the arrow dragging when the arrow
// is the single element being dragged to avoid accidentally unbinding
// the arrow when the user just wants to select it.
elementsToUpdate.size > 1 ||
Math.max(Math.abs(adjustedOffset.x), Math.abs(adjustedOffset.y)) >
DRAGGING_THRESHOLD ||
(!element.startBinding && !element.endBinding)
) {
updateElementCoords(pointerDownState, element, scene, adjustedOffset);
const shouldUnbindStart =
element.startBinding && !isStartBoundElementSelected;
const shouldUnbindEnd = element.endBinding && !isEndBoundElementSelected;
if (shouldUnbindStart || shouldUnbindEnd) {
// NOTE: Moving the bound arrow should unbind it, otherwise we would
// have weird situations, like 0 lenght arrow when the user moves
// the arrow outside a filled shape suddenly forcing the arrow start
// and end point to jump "outside" the shape.
if (shouldUnbindStart) {
unbindBindingElement(element, "start", scene);
}
if (shouldUnbindEnd) {
unbindBindingElement(element, "end", scene);
}
}
}
});
};

37
packages/element/src/elbowArrow.ts
View File

@ -17,7 +17,6 @@ import {
BinaryHeap,
invariant,
isAnyTrue,
tupleToCoors,
getSizeFromPoints,
isDevEnv,
arrayToMap,
@ -30,7 +29,7 @@ import {
FIXED_BINDING_DISTANCE,
getHeadingForElbowArrowSnap,
getGlobalFixedPointForBindableElement,
getHoveredElementForBinding,
getFixedBindingDistance,
} from "./binding";
import { distanceToElement } from "./distance";
import {
@ -51,8 +50,8 @@ import {
type ExcalidrawElbowArrowElement,
type NonDeletedSceneElementsMap,
} from "./types";
import { aabbForElement, pointInsideBounds } from "./bounds";
import { getHoveredElementForBinding } from "./collision";
import type { Bounds } from "./bounds";
import type { Heading } from "./heading";
@ -63,6 +62,7 @@ import type {
FixedPointBinding,
FixedSegment,
NonDeletedExcalidrawElement,
Ordered,
} from "./types";
type GridAddress = [number, number] & { _brand: "gridaddress" };
@ -1217,19 +1217,9 @@ const getElbowArrowData = (
if (options?.isDragging) {
const elements = Array.from(elementsMap.values());
hoveredStartElement =
getHoveredElement(
origStartGlobalPoint,
elementsMap,
elements,
options?.zoom,
) || null;
getHoveredElement(origStartGlobalPoint, elementsMap, elements) || null;
hoveredEndElement =
getHoveredElement(
origEndGlobalPoint,
elementsMap,
elements,
options?.zoom,
) || null;
getHoveredElement(origEndGlobalPoint, elementsMap, elements) || null;
} else {
hoveredStartElement = arrow.startBinding
? getBindableElementForId(arrow.startBinding.elementId, elementsMap) ||
@ -1301,8 +1291,8 @@ const getElbowArrowData = (
offsetFromHeading(
startHeading,
arrow.startArrowhead
? FIXED_BINDING_DISTANCE * 6
: FIXED_BINDING_DISTANCE * 2,
? getFixedBindingDistance(hoveredStartElement) * 6
: getFixedBindingDistance(hoveredStartElement) * 2,
1,
),
)
@ -1314,8 +1304,8 @@ const getElbowArrowData = (
offsetFromHeading(
endHeading,
arrow.endArrowhead
? FIXED_BINDING_DISTANCE * 6
: FIXED_BINDING_DISTANCE * 2,
? getFixedBindingDistance(hoveredEndElement) * 6
: getFixedBindingDistance(hoveredEndElement) * 2,
1,
),
)
@ -2262,16 +2252,13 @@ const getBindPointHeading = (
const getHoveredElement = (
origPoint: GlobalPoint,
elementsMap: NonDeletedSceneElementsMap,
elements: readonly NonDeletedExcalidrawElement[],
zoom?: AppState["zoom"],
elements: readonly Ordered<NonDeletedExcalidrawElement>[],
) => {
return getHoveredElementForBinding(
tupleToCoors(origPoint),
origPoint,
elements,
elementsMap,
zoom,
true,
true,
(element) => getFixedBindingDistance(element) + 1,
);
};

12
packages/element/src/flowchart.ts
View File

@ -7,7 +7,7 @@ import type {
PendingExcalidrawElements,
} from "@excalidraw/excalidraw/types";
import { bindLinearElement } from "./binding";
import { bindBindingElement } from "./binding";
import { updateElbowArrowPoints } from "./elbowArrow";
import {
HEADING_DOWN,
@ -446,8 +446,14 @@ const createBindingArrow = (
const elementsMap = scene.getNonDeletedElementsMap();
bindLinearElement(bindingArrow, startBindingElement, "start", scene);
bindLinearElement(bindingArrow, endBindingElement, "end", scene);
bindBindingElement(
bindingArrow,
startBindingElement,
"orbit",
"start",
scene,
);
bindBindingElement(bindingArrow, endBindingElement, "orbit", "end", scene);
const changedElements = new Map<string, OrderedExcalidrawElement>();
changedElements.set(

902
packages/element/src/linearElementEditor.ts
View File

File diff suppressed because it is too large Load Diff

7
packages/element/src/mutateElement.ts
View File

@ -46,16 +46,13 @@ export const mutateElement = <TElement extends Mutable<ExcalidrawElement>>(
// casting to any because can't use `in` operator
// (see https://github.com/microsoft/TypeScript/issues/21732)
const { points, fixedSegments, startBinding, endBinding, fileId } =
updates as any;
const { points, fixedSegments, fileId } = updates as any;
if (
isElbowArrow(element) &&
(Object.keys(updates).length === 0 || // normalization case
typeof points !== "undefined" || // repositioning
typeof fixedSegments !== "undefined" || // segment fixing
typeof startBinding !== "undefined" ||
typeof endBinding !== "undefined") // manual binding to element
typeof fixedSegments !== "undefined") // segment fixing
) {
updates = {
...updates,

219
packages/element/src/renderElement.ts
View File

@ -269,7 +269,7 @@ const generateElementCanvas = (
context.filter = IMAGE_INVERT_FILTER;
}
drawElementOnCanvas(element, rc, context, renderConfig, appState);
drawElementOnCanvas(element, rc, context, renderConfig);
context.restore();
@ -404,7 +404,6 @@ const drawElementOnCanvas = (
rc: RoughCanvas,
context: CanvasRenderingContext2D,
renderConfig: StaticCanvasRenderConfig,
appState: StaticCanvasAppState,
) => {
switch (element.type) {
case "rectangle":
@ -603,6 +602,41 @@ const generateElementWithCanvas = (
return prevElementWithCanvas;
};
const drawElementHighlight = (
context: CanvasRenderingContext2D,
appState: StaticCanvasAppState,
) => {
if (appState.suggestedBinding) {
const cx =
(appState.suggestedBinding.x +
appState.suggestedBinding.width / 2 +
appState.scrollX) *
window.devicePixelRatio;
const cy =
(appState.suggestedBinding.y +
appState.suggestedBinding.height / 2 +
appState.scrollY) *
window.devicePixelRatio;
context.save();
context.translate(cx, cy);
context.rotate(appState.suggestedBinding.angle);
context.translate(-cx, -cy);
context.translate(
appState.scrollX + appState.suggestedBinding.x,
appState.scrollY + appState.suggestedBinding.y,
);
const drawable = ShapeCache.generateBindableElementHighlight(
appState.suggestedBinding,
appState,
);
rough.canvas(context.canvas).draw(drawable);
context.restore();
}
};
const drawElementFromCanvas = (
elementWithCanvas: ExcalidrawElementWithCanvas,
context: CanvasRenderingContext2D,
@ -610,88 +644,99 @@ const drawElementFromCanvas = (
appState: StaticCanvasAppState,
allElementsMap: NonDeletedSceneElementsMap,
) => {
const element = elementWithCanvas.element;
const padding = getCanvasPadding(element);
const zoom = elementWithCanvas.scale;
const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, allElementsMap);
const cx = ((x1 + x2) / 2 + appState.scrollX) * window.devicePixelRatio;
const cy = ((y1 + y2) / 2 + appState.scrollY) * window.devicePixelRatio;
const isHighlighted =
appState.suggestedBinding?.id === elementWithCanvas.element.id;
if (
!isHighlighted ||
["image", "text"].includes(elementWithCanvas.element.type)
) {
const element = elementWithCanvas.element;
const padding = getCanvasPadding(element);
const zoom = elementWithCanvas.scale;
const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, allElementsMap);
const cx = ((x1 + x2) / 2 + appState.scrollX) * window.devicePixelRatio;
const cy = ((y1 + y2) / 2 + appState.scrollY) * window.devicePixelRatio;
context.save();
context.scale(1 / window.devicePixelRatio, 1 / window.devicePixelRatio);
context.save();
context.scale(1 / window.devicePixelRatio, 1 / window.devicePixelRatio);
const boundTextElement = getBoundTextElement(element, allElementsMap);
const boundTextElement = getBoundTextElement(element, allElementsMap);
if (isArrowElement(element) && boundTextElement) {
const offsetX =
(elementWithCanvas.boundTextCanvas.width -
elementWithCanvas.canvas!.width) /
2;
const offsetY =
(elementWithCanvas.boundTextCanvas.height -
elementWithCanvas.canvas!.height) /
2;
context.translate(cx, cy);
context.drawImage(
elementWithCanvas.boundTextCanvas,
(-(x2 - x1) / 2) * window.devicePixelRatio - offsetX / zoom - padding,
(-(y2 - y1) / 2) * window.devicePixelRatio - offsetY / zoom - padding,
elementWithCanvas.boundTextCanvas.width / zoom,
elementWithCanvas.boundTextCanvas.height / zoom,
);
} else {
// we translate context to element center so that rotation and scale
// originates from the element center
context.translate(cx, cy);
context.rotate(element.angle);
if (
"scale" in elementWithCanvas.element &&
!isPendingImageElement(element, renderConfig)
) {
context.scale(
elementWithCanvas.element.scale[0],
elementWithCanvas.element.scale[1],
if (isArrowElement(element) && boundTextElement) {
const offsetX =
(elementWithCanvas.boundTextCanvas.width -
elementWithCanvas.canvas!.width) /
2;
const offsetY =
(elementWithCanvas.boundTextCanvas.height -
elementWithCanvas.canvas!.height) /
2;
context.translate(cx, cy);
context.drawImage(
elementWithCanvas.boundTextCanvas,
(-(x2 - x1) / 2) * window.devicePixelRatio - offsetX / zoom - padding,
(-(y2 - y1) / 2) * window.devicePixelRatio - offsetY / zoom - padding,
elementWithCanvas.boundTextCanvas.width / zoom,
elementWithCanvas.boundTextCanvas.height / zoom,
);
}
} else {
// we translate context to element center so that rotation and scale
// originates from the element center
context.translate(cx, cy);
// revert afterwards we don't have account for it during drawing
context.translate(-cx, -cy);
context.rotate(element.angle);
context.drawImage(
elementWithCanvas.canvas!,
(x1 + appState.scrollX) * window.devicePixelRatio -
(padding * elementWithCanvas.scale) / elementWithCanvas.scale,
(y1 + appState.scrollY) * window.devicePixelRatio -
(padding * elementWithCanvas.scale) / elementWithCanvas.scale,
elementWithCanvas.canvas!.width / elementWithCanvas.scale,
elementWithCanvas.canvas!.height / elementWithCanvas.scale,
);
if (
"scale" in elementWithCanvas.element &&
!isPendingImageElement(element, renderConfig)
) {
context.scale(
elementWithCanvas.element.scale[0],
elementWithCanvas.element.scale[1],
);
}
if (
import.meta.env.VITE_APP_DEBUG_ENABLE_TEXT_CONTAINER_BOUNDING_BOX ===
"true" &&
hasBoundTextElement(element)
) {
const textElement = getBoundTextElement(
element,
allElementsMap,
) as ExcalidrawTextElementWithContainer;
const coords = getContainerCoords(element);
context.strokeStyle = "#c92a2a";
context.lineWidth = 3;
context.strokeRect(
(coords.x + appState.scrollX) * window.devicePixelRatio,
(coords.y + appState.scrollY) * window.devicePixelRatio,
getBoundTextMaxWidth(element, textElement) * window.devicePixelRatio,
getBoundTextMaxHeight(element, textElement) * window.devicePixelRatio,
// revert afterwards we don't have account for it during drawing
context.translate(-cx, -cy);
context.drawImage(
elementWithCanvas.canvas!,
(x1 + appState.scrollX) * window.devicePixelRatio -
(padding * elementWithCanvas.scale) / elementWithCanvas.scale,
(y1 + appState.scrollY) * window.devicePixelRatio -
(padding * elementWithCanvas.scale) / elementWithCanvas.scale,
elementWithCanvas.canvas!.width / elementWithCanvas.scale,
elementWithCanvas.canvas!.height / elementWithCanvas.scale,
);
if (
import.meta.env.VITE_APP_DEBUG_ENABLE_TEXT_CONTAINER_BOUNDING_BOX ===
"true" &&
hasBoundTextElement(element)
) {
const textElement = getBoundTextElement(
element,
allElementsMap,
) as ExcalidrawTextElementWithContainer;
const coords = getContainerCoords(element);
context.strokeStyle = "#c92a2a";
context.lineWidth = 3;
context.strokeRect(
(coords.x + appState.scrollX) * window.devicePixelRatio,
(coords.y + appState.scrollY) * window.devicePixelRatio,
getBoundTextMaxWidth(element, textElement) * window.devicePixelRatio,
getBoundTextMaxHeight(element, textElement) * window.devicePixelRatio,
);
}
}
context.restore();
// Clear the nested element we appended to the DOM
}
context.restore();
// Clear the nested element we appended to the DOM
if (isHighlighted) {
drawElementHighlight(context, appState);
}
};
export const renderSelectionElement = (
@ -744,6 +789,11 @@ export const renderElement = (
case "magicframe":
case "frame": {
if (appState.frameRendering.enabled && appState.frameRendering.outline) {
const isHighlighted = element.id === appState.suggestedBinding?.id;
const {
options: { stroke: highlightStroke },
} = ShapeCache.generateBindableElementHighlight(element, appState);
context.save();
context.translate(
element.x + appState.scrollX,
@ -752,12 +802,17 @@ export const renderElement = (
context.fillStyle = "rgba(0, 0, 200, 0.04)";
context.lineWidth = FRAME_STYLE.strokeWidth / appState.zoom.value;
context.strokeStyle = FRAME_STYLE.strokeColor;
context.strokeStyle = isHighlighted
? highlightStroke
: FRAME_STYLE.strokeColor;
// TODO change later to only affect AI frames
if (isMagicFrameElement(element)) {
context.strokeStyle =
appState.theme === THEME.LIGHT ? "#7affd7" : "#1d8264";
context.strokeStyle = isHighlighted
? highlightStroke
: appState.theme === THEME.LIGHT
? "#7affd7"
: "#1d8264";
}
if (FRAME_STYLE.radius && context.roundRect) {
@ -795,7 +850,7 @@ export const renderElement = (
context.translate(cx, cy);
context.rotate(element.angle);
context.translate(-shiftX, -shiftY);
drawElementOnCanvas(element, rc, context, renderConfig, appState);
drawElementOnCanvas(element, rc, context, renderConfig);
context.restore();
} else {
const elementWithCanvas = generateElementWithCanvas(
@ -888,13 +943,7 @@ export const renderElement = (
tempCanvasContext.translate(-shiftX, -shiftY);
drawElementOnCanvas(
element,
tempRc,
tempCanvasContext,
renderConfig,
appState,
);
drawElementOnCanvas(element, tempRc, tempCanvasContext, renderConfig);
tempCanvasContext.translate(shiftX, shiftY);
@ -933,7 +982,7 @@ export const renderElement = (
}
context.translate(-shiftX, -shiftY);
drawElementOnCanvas(element, rc, context, renderConfig, appState);
drawElementOnCanvas(element, rc, context, renderConfig);
}
context.restore();

93
packages/element/src/resizeElements.ts
View File

@ -20,7 +20,11 @@ import type { PointerDownState } from "@excalidraw/excalidraw/types";
import type { Mutable } from "@excalidraw/common/utility-types";
import { getArrowLocalFixedPoints, updateBoundElements } from "./binding";
import {
getArrowLocalFixedPoints,
unbindBindingElement,
updateBoundElements,
} from "./binding";
import {
getElementAbsoluteCoords,
getCommonBounds,
@ -46,6 +50,7 @@ import {
import { wrapText } from "./textWrapping";
import {
isArrowElement,
isBindingElement,
isBoundToContainer,
isElbowArrow,
isFrameLikeElement,
@ -74,7 +79,9 @@ import type {
ExcalidrawImageElement,
ElementsMap,
ExcalidrawElbowArrowElement,
ExcalidrawArrowElement,
} from "./types";
import type { ElementUpdate } from "./mutateElement";
// Returns true when transform (resizing/rotation) happened
export const transformElements = (
@ -220,7 +227,25 @@ const rotateSingleElement = (
}
const boundTextElementId = getBoundTextElementId(element);
scene.mutateElement(element, { angle });
let update: ElementUpdate<NonDeletedExcalidrawElement> = {
angle,
};
if (isBindingElement(element)) {
update = {
...update,
} as ElementUpdate<ExcalidrawArrowElement>;
if (element.startBinding) {
unbindBindingElement(element, "start", scene);
}
if (element.endBinding) {
unbindBindingElement(element, "end", scene);
}
}
scene.mutateElement(element, update);
if (boundTextElementId) {
const textElement =
scene.getElement<ExcalidrawTextElementWithContainer>(boundTextElementId);
@ -394,6 +419,11 @@ const rotateMultipleElements = (
centerAngle -= centerAngle % SHIFT_LOCKING_ANGLE;
}
const rotatedElementsMap = new Map<
ExcalidrawElement["id"],
NonDeletedExcalidrawElement
>(elements.map((element) => [element.id, element]));
for (const element of elements) {
if (!isFrameLikeElement(element)) {
const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
@ -424,6 +454,19 @@ const rotateMultipleElements = (
simultaneouslyUpdated: elements,
});
if (isBindingElement(element)) {
if (element.startBinding) {
if (!rotatedElementsMap.has(element.startBinding.elementId)) {
unbindBindingElement(element, "start", scene);
}
}
if (element.endBinding) {
if (!rotatedElementsMap.has(element.endBinding.elementId)) {
unbindBindingElement(element, "end", scene);
}
}
}
const boundText = getBoundTextElement(element, elementsMap);
if (boundText && !isArrowElement(element)) {
const { x, y } = computeBoundTextPosition(
@ -835,13 +878,32 @@ export const resizeSingleElement = (
Number.isFinite(newOrigin.x) &&
Number.isFinite(newOrigin.y)
) {
const updates = {
let updates: ElementUpdate<ExcalidrawElement> = {
...newOrigin,
width: Math.abs(nextWidth),
height: Math.abs(nextHeight),
...rescaledPoints,
};
if (isBindingElement(latestElement)) {
if (latestElement.startBinding) {
updates = {
...updates,
} as ElementUpdate<ExcalidrawArrowElement>;
if (latestElement.startBinding) {
unbindBindingElement(latestElement, "start", scene);
}
}
if (latestElement.endBinding) {
updates = {
...updates,
endBinding: null,
} as ElementUpdate<ExcalidrawArrowElement>;
}
}
scene.mutateElement(latestElement, updates, {
informMutation: shouldInformMutation,
isDragging: false,
@ -859,10 +921,7 @@ export const resizeSingleElement = (
shouldMaintainAspectRatio,
);
updateBoundElements(latestElement, scene, {
// TODO: confirm with MARK if this actually makes sense
newSize: { width: nextWidth, height: nextHeight },
});
updateBoundElements(latestElement, scene);
}
};
@ -1396,20 +1455,36 @@ export const resizeMultipleElements = (
}
const elementsToUpdate = elementsAndUpdates.map(({ element }) => element);
const resizedElementsMap = new Map<
ExcalidrawElement["id"],
NonDeletedExcalidrawElement
>(elementsAndUpdates.map(({ element }) => [element.id, element]));
for (const {
element,
update: { boundTextFontSize, ...update },
} of elementsAndUpdates) {
const { width, height, angle } = update;
const { angle } = update;
scene.mutateElement(element, update);
updateBoundElements(element, scene, {
simultaneouslyUpdated: elementsToUpdate,
newSize: { width, height },
});
if (isBindingElement(element)) {
if (element.startBinding) {
if (!resizedElementsMap.has(element.startBinding.elementId)) {
unbindBindingElement(element, "start", scene);
}
}
if (element.endBinding) {
if (!resizedElementsMap.has(element.endBinding.elementId)) {
unbindBindingElement(element, "end", scene);
}
}
}
const boundTextElement = getBoundTextElement(element, elementsMap);
if (boundTextElement && boundTextFontSize) {
scene.mutateElement(boundTextElement, {

28
packages/element/src/shape.ts
View File

@ -21,6 +21,7 @@ import {
assertNever,
COLOR_PALETTE,
LINE_POLYGON_POINT_MERGE_DISTANCE,
THEME,
} from "@excalidraw/common";
import { RoughGenerator } from "roughjs/bin/generator";
@ -32,6 +33,7 @@ import type { Mutable } from "@excalidraw/common/utility-types";
import type {
AppState,
EmbedsValidationStatus,
InteractiveCanvasAppState,
} from "@excalidraw/excalidraw/types";
import type {
ElementShape,
@ -70,6 +72,7 @@ import type {
ExcalidrawFreeDrawElement,
ElementsMap,
ExcalidrawLineElement,
ExcalidrawBindableElement,
} from "./types";
import type { Drawable, Options } from "roughjs/bin/core";
@ -105,6 +108,31 @@ export class ShapeCache {
ShapeCache.cache = new WeakMap();
};
public static generateBindableElementHighlight = <
T extends ExcalidrawBindableElement,
>(
element: T,
appState: Pick<InteractiveCanvasAppState, "theme">,
) => {
let shape =
(ShapeCache.get(element) as Drawable | null) ||
(ShapeCache.rg.rectangle(0, 0, element.width, element.height, {
roughness: 0,
strokeWidth: 2,
}) as Drawable);
// Clone the shape from the cache
shape = {
...shape,
options: {
...shape.options,
stroke: appState.theme === THEME.DARK ? "#035da1" : "#6abdfc",
},
};
return shape;
};
/**
* Generates & caches shape for element if not already cached, otherwise
* returns cached shape.

13
packages/element/src/typeChecks.ts
View File

@ -28,8 +28,6 @@ import type {
ExcalidrawArrowElement,
ExcalidrawElbowArrowElement,
ExcalidrawLineElement,
PointBinding,
FixedPointBinding,
ExcalidrawFlowchartNodeElement,
ExcalidrawLinearElementSubType,
} from "./types";
@ -163,7 +161,7 @@ export const isLinearElementType = (
export const isBindingElement = (
element?: ExcalidrawElement | null,
includeLocked = true,
): element is ExcalidrawLinearElement => {
): element is ExcalidrawArrowElement => {
return (
element != null &&
(!element.locked || includeLocked === true) &&
@ -358,15 +356,6 @@ export const getDefaultRoundnessTypeForElement = (
return null;
};
export const isFixedPointBinding = (
binding: PointBinding | FixedPointBinding,
): binding is FixedPointBinding => {
return (
Object.hasOwn(binding, "fixedPoint") &&
(binding as FixedPointBinding).fixedPoint != null
);
};
// TODO: Move this to @excalidraw/math
export const isBounds = (box: unknown): box is Bounds =>
Array.isArray(box) &&

37
packages/element/src/types.ts
View File

@ -279,23 +279,22 @@ export type ExcalidrawTextElementWithContainer = {
export type FixedPoint = [number, number];
export type PointBinding = {
elementId: ExcalidrawBindableElement["id"];
focus: number;
gap: number;
};
export type BindMode = "inside" | "orbit" | "skip";
export type FixedPointBinding = Merge<
PointBinding,
{
// Represents the fixed point binding information in form of a vertical and
// horizontal ratio (i.e. a percentage value in the 0.0-1.0 range). This ratio
// gives the user selected fixed point by multiplying the bound element width
// with fixedPoint[0] and the bound element height with fixedPoint[1] to get the
// bound element-local point coordinate.
fixedPoint: FixedPoint;
}
>;
export type FixedPointBinding = {
elementId: ExcalidrawBindableElement["id"];
// Represents the fixed point binding information in form of a vertical and
// horizontal ratio (i.e. a percentage value in the 0.0-1.0 range). This ratio
// gives the user selected fixed point by multiplying the bound element width
// with fixedPoint[0] and the bound element height with fixedPoint[1] to get the
// bound element-local point coordinate.
fixedPoint: FixedPoint;
// Determines whether the arrow remains outside the shape or is allowed to
// go all the way inside the shape up to the exact fixed point.
mode: BindMode;
};
type Index = number;
@ -323,8 +322,8 @@ export type ExcalidrawLinearElement = _ExcalidrawElementBase &
type: "line" | "arrow";
points: readonly LocalPoint[];
lastCommittedPoint: LocalPoint | null;
startBinding: PointBinding | null;
endBinding: PointBinding | null;
startBinding: FixedPointBinding | null;
endBinding: FixedPointBinding | null;
startArrowhead: Arrowhead | null;
endArrowhead: Arrowhead | null;
}>;
@ -351,9 +350,9 @@ export type ExcalidrawElbowArrowElement = Merge<
ExcalidrawArrowElement,
{
elbowed: true;
fixedSegments: readonly FixedSegment[] | null;
startBinding: FixedPointBinding | null;
endBinding: FixedPointBinding | null;
fixedSegments: readonly FixedSegment[] | null;
/**
* Marks that the 3rd point should be used as the 2nd point of the arrow in
* order to temporarily hide the first segment of the arrow without losing

64
packages/element/src/zindex.ts
View File

@ -1,18 +1,25 @@
import { arrayToMap, findIndex, findLastIndex } from "@excalidraw/common";
import type { AppState } from "@excalidraw/excalidraw/types";
import type { GlobalPoint } from "@excalidraw/math";
import { isFrameLikeElement } from "./typeChecks";
import { isFrameLikeElement, isTextElement } from "./typeChecks";
import { getElementsInGroup } from "./groups";
import { syncMovedIndices } from "./fractionalIndex";
import { getSelectedElements } from "./selection";
import { getBoundTextElement, getContainerElement } from "./textElement";
import { getHoveredElementForBinding } from "./collision";
import type { Scene } from "./Scene";
import type { ExcalidrawElement, ExcalidrawFrameLikeElement } from "./types";
import type {
ExcalidrawArrowElement,
ExcalidrawElement,
ExcalidrawFrameLikeElement,
NonDeletedExcalidrawElement,
NonDeletedSceneElementsMap,
Ordered,
OrderedExcalidrawElement,
} from "./types";
const isOfTargetFrame = (element: ExcalidrawElement, frameId: string) => {
return element.frameId === frameId || element.id === frameId;
@ -139,6 +146,51 @@ const getContiguousFrameRangeElements = (
return allElements.slice(rangeStart, rangeEnd + 1);
};
/**
* Moves the arrow element above any bindable elements it intersects with or
* hovers over.
*/
export const moveArrowAboveBindable = (
point: GlobalPoint,
arrow: ExcalidrawArrowElement,
elements: readonly Ordered<NonDeletedExcalidrawElement>[],
elementsMap: NonDeletedSceneElementsMap,
scene: Scene,
): readonly OrderedExcalidrawElement[] => {
const hoveredElement = getHoveredElementForBinding(
point,
elements,
elementsMap,
);
if (!hoveredElement) {
return elements;
}
const boundTextElement = getBoundTextElement(hoveredElement, elementsMap);
const containerElement = isTextElement(hoveredElement)
? getContainerElement(hoveredElement, elementsMap)
: null;
const bindableIds = [
hoveredElement.id,
boundTextElement?.id,
containerElement?.id,
].filter((id): id is NonDeletedExcalidrawElement["id"] => !!id);
const bindableIdx = elements.findIndex((el) => bindableIds.includes(el.id));
const arrowIdx = elements.findIndex((el) => el.id === arrow.id);
if (arrowIdx !== -1 && bindableIdx !== -1 && arrowIdx < bindableIdx) {
const updatedElements = Array.from(elements);
const arrow = updatedElements.splice(arrowIdx, 1)[0];
updatedElements.splice(bindableIdx, 0, arrow);
scene.replaceAllElements(updatedElements);
}
return elements;
};
/**
* Returns next candidate index that's available to be moved to. Currently that
* is a non-deleted element, and not inside a group (unless we're editing it).

11
packages/element/tests/__snapshots__/linearElementEditor.test.tsx.snap
View File

@ -44,14 +44,3 @@ exports[`Test Linear Elements > Test bound text element > should resize and posi
"Online whiteboard
collaboration made easy"
`;
exports[`Test Linear Elements > Test bound text element > should wrap the bound text when arrow bound container moves 1`] = `
"Online whiteboard
collaboration made easy"
`;
exports[`Test Linear Elements > Test bound text element > should wrap the bound text when arrow bound container moves 2`] = `
"Online whiteboard
collaboration made
easy"
`;

1105
packages/element/tests/binding.test.tsx
View File

File diff suppressed because it is too large Load Diff

21
packages/element/tests/duplicate.test.tsx
View File

@ -144,9 +144,8 @@ describe("duplicating multiple elements", () => {
id: "arrow1",
startBinding: {
elementId: "rectangle1",
focus: 0.2,
gap: 7,
fixedPoint: [0.5, 1],
mode: "orbit",
},
});
@ -155,9 +154,8 @@ describe("duplicating multiple elements", () => {
id: "arrow2",
endBinding: {
elementId: "rectangle1",
focus: 0.2,
gap: 7,
fixedPoint: [0.5, 1],
mode: "orbit",
},
boundElements: [{ id: "text2", type: "text" }],
});
@ -276,9 +274,8 @@ describe("duplicating multiple elements", () => {
id: "arrow1",
startBinding: {
elementId: "rectangle1",
focus: 0.2,
gap: 7,
fixedPoint: [0.5, 1],
mode: "orbit",
},
});
@ -293,15 +290,13 @@ describe("duplicating multiple elements", () => {
id: "arrow2",
startBinding: {
elementId: "rectangle1",
focus: 0.2,
gap: 7,
fixedPoint: [0.5, 1],
mode: "orbit",
},
endBinding: {
elementId: "rectangle-not-exists",
focus: 0.2,
gap: 7,
fixedPoint: [0.5, 1],
mode: "orbit",
},
});
@ -310,15 +305,13 @@ describe("duplicating multiple elements", () => {
id: "arrow3",
startBinding: {
elementId: "rectangle-not-exists",
focus: 0.2,
gap: 7,
fixedPoint: [0.5, 1],
mode: "orbit",
},
endBinding: {
elementId: "rectangle1",
focus: 0.2,
gap: 7,
fixedPoint: [0.5, 1],
mode: "orbit",
},
});

19
packages/element/tests/elbowArrow.test.tsx
View File

@ -1,13 +1,10 @@
import { ARROW_TYPE } from "@excalidraw/common";
import { pointFrom } from "@excalidraw/math";
import { Excalidraw } from "@excalidraw/excalidraw";
import { actionSelectAll } from "@excalidraw/excalidraw/actions";
import { actionDuplicateSelection } from "@excalidraw/excalidraw/actions/actionDuplicateSelection";
import { API } from "@excalidraw/excalidraw/tests/helpers/api";
import { Pointer, UI } from "@excalidraw/excalidraw/tests/helpers/ui";
import {
act,
fireEvent,
@ -15,13 +12,11 @@ import {
queryByTestId,
render,
} from "@excalidraw/excalidraw/tests/test-utils";
import "@excalidraw/utils/test-utils";
import { bindBindingElement } from "@excalidraw/element";
import type { LocalPoint } from "@excalidraw/math";
import { bindLinearElement } from "../src/binding";
import { Scene } from "../src/Scene";
import type {
@ -160,8 +155,8 @@ describe("elbow arrow routing", () => {
expect(arrow.width).toEqual(90);
expect(arrow.height).toEqual(200);
});
it("can generate proper points for bound elbow arrow", () => {
const scene = new Scene();
const rectangle1 = API.createElement({
type: "rectangle",
x: -150,
@ -185,17 +180,15 @@ describe("elbow arrow routing", () => {
height: 200,
points: [pointFrom(0, 0), pointFrom(90, 200)],
}) as ExcalidrawElbowArrowElement;
scene.insertElement(rectangle1);
scene.insertElement(rectangle2);
scene.insertElement(arrow);
API.setElements([rectangle1, rectangle2, arrow]);
bindLinearElement(arrow, rectangle1, "start", scene);
bindLinearElement(arrow, rectangle2, "end", scene);
bindBindingElement(arrow, rectangle1, "orbit", "start", h.scene);
bindBindingElement(arrow, rectangle2, "orbit", "end", h.scene);
expect(arrow.startBinding).not.toBe(null);
expect(arrow.endBinding).not.toBe(null);
h.app.scene.mutateElement(arrow, {
h.scene.mutateElement(arrow, {
points: [pointFrom<LocalPoint>(0, 0), pointFrom<LocalPoint>(90, 200)],
});

18
packages/element/tests/linearElementEditor.test.tsx
View File

@ -379,7 +379,7 @@ describe("Test Linear Elements", () => {
expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
`11`,
);
expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`6`);
expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`7`);
expect(line.points.length).toEqual(3);
expect(line.points).toMatchInlineSnapshot(`
@ -549,7 +549,7 @@ describe("Test Linear Elements", () => {
expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
`14`,
);
expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`7`);
expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`9`);
expect(line.points.length).toEqual(5);
@ -600,7 +600,7 @@ describe("Test Linear Elements", () => {
expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
`11`,
);
expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`6`);
expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`7`);
const newPoints = LinearElementEditor.getPointsGlobalCoordinates(
line,
@ -641,7 +641,7 @@ describe("Test Linear Elements", () => {
expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
`11`,
);
expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`6`);
expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`7`);
const newPoints = LinearElementEditor.getPointsGlobalCoordinates(
line,
@ -689,7 +689,7 @@ describe("Test Linear Elements", () => {
expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
`17`,
);
expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`7`);
expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`10`);
const newMidPoints = LinearElementEditor.getEditorMidPoints(
line,
@ -747,7 +747,7 @@ describe("Test Linear Elements", () => {
expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
`14`,
);
expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`7`);
expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`9`);
expect(line.points.length).toEqual(5);
expect((h.elements[0] as ExcalidrawLinearElement).points)
@ -845,7 +845,7 @@ describe("Test Linear Elements", () => {
expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
`11`,
);
expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`6`);
expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`7`);
const newPoints = LinearElementEditor.getPointsGlobalCoordinates(
line,
@ -1316,7 +1316,7 @@ describe("Test Linear Elements", () => {
const textElement = h.elements[2] as ExcalidrawTextElementWithContainer;
expect(arrow.endBinding?.elementId).toBe(rect.id);
expect(arrow.width).toBe(400);
expect(arrow.width).toBeCloseTo(405);
expect(rect.x).toBe(400);
expect(rect.y).toBe(0);
expect(
@ -1335,7 +1335,7 @@ describe("Test Linear Elements", () => {
mouse.downAt(rect.x, rect.y);
mouse.moveTo(200, 0);
mouse.upAt(200, 0);
expect(arrow.width).toBeCloseTo(200, 0);
expect(arrow.width).toBeCloseTo(205);
expect(rect.x).toBe(200);
expect(rect.y).toBe(0);
expect(handleBindTextResizeSpy).toHaveBeenCalledWith(

256
packages/element/tests/resize.test.tsx
View File

@ -174,29 +174,29 @@ describe("generic element", () => {
expect(rectangle.angle).toBeCloseTo(0);
});
it("resizes with bound arrow", async () => {
const rectangle = UI.createElement("rectangle", {
width: 200,
height: 100,
});
const arrow = UI.createElement("arrow", {
x: -30,
y: 50,
width: 28,
height: 5,
});
// it("resizes with bound arrow", async () => {
// const rectangle = UI.createElement("rectangle", {
// width: 200,
// height: 100,
// });
// const arrow = UI.createElement("arrow", {
// x: -30,
// y: 50,
// width: 28,
// height: 5,
// });
expect(arrow.endBinding?.elementId).toEqual(rectangle.id);
// expect(arrow.endBinding?.elementId).toEqual(rectangle.id);
UI.resize(rectangle, "e", [40, 0]);
// UI.resize(rectangle, "e", [40, 0]);
expect(arrow.width + arrow.endBinding!.gap).toBeCloseTo(30, 0);
// expect(arrow.width + arrow.endBinding!.gap).toBeCloseTo(30, 0);
UI.resize(rectangle, "w", [50, 0]);
// UI.resize(rectangle, "w", [50, 0]);
expect(arrow.endBinding?.elementId).toEqual(rectangle.id);
expect(arrow.width + arrow.endBinding!.gap).toBeCloseTo(80, 0);
});
// expect(arrow.endBinding?.elementId).toEqual(rectangle.id);
// expect(arrow.width + arrow.endBinding!.gap).toBeCloseTo(80, 0);
// });
it("resizes with a label", async () => {
const rectangle = UI.createElement("rectangle", {
@ -595,31 +595,31 @@ describe("text element", () => {
expect(text.fontSize).toBeCloseTo(fontSize * scale);
});
it("resizes with bound arrow", async () => {
const text = UI.createElement("text");
await UI.editText(text, "hello\nworld");
const boundArrow = UI.createElement("arrow", {
x: -30,
y: 25,
width: 28,
height: 5,
});
// it("resizes with bound arrow", async () => {
// const text = UI.createElement("text");
// await UI.editText(text, "hello\nworld");
// const boundArrow = UI.createElement("arrow", {
// x: -30,
// y: 25,
// width: 28,
// height: 5,
// });
expect(boundArrow.endBinding?.elementId).toEqual(text.id);
// expect(boundArrow.endBinding?.elementId).toEqual(text.id);
UI.resize(text, "ne", [40, 0]);
// UI.resize(text, "ne", [40, 0]);
expect(boundArrow.width + boundArrow.endBinding!.gap).toBeCloseTo(30);
// expect(boundArrow.width + boundArrow.endBinding!.gap).toBeCloseTo(30);
const textWidth = text.width;
const scale = 20 / text.height;
UI.resize(text, "nw", [50, 20]);
// const textWidth = text.width;
// const scale = 20 / text.height;
// UI.resize(text, "nw", [50, 20]);
expect(boundArrow.endBinding?.elementId).toEqual(text.id);
expect(boundArrow.width + boundArrow.endBinding!.gap).toBeCloseTo(
30 + textWidth * scale,
);
});
// expect(boundArrow.endBinding?.elementId).toEqual(text.id);
// expect(boundArrow.width + boundArrow.endBinding!.gap).toBeCloseTo(
// 30 + textWidth * scale,
// );
// });
it("updates font size via keyboard", async () => {
const text = UI.createElement("text");
@ -801,36 +801,36 @@ describe("image element", () => {
expect(image.scale).toEqual([1, 1]);
});
it("resizes with bound arrow", async () => {
const image = API.createElement({
type: "image",
width: 100,
height: 100,
});
API.setElements([image]);
const arrow = UI.createElement("arrow", {
x: -30,
y: 50,
width: 28,
height: 5,
});
// it("resizes with bound arrow", async () => {
// const image = API.createElement({
// type: "image",
// width: 100,
// height: 100,
// });
// API.setElements([image]);
// const arrow = UI.createElement("arrow", {
// x: -30,
// y: 50,
// width: 28,
// height: 5,
// });
expect(arrow.endBinding?.elementId).toEqual(image.id);
// expect(arrow.endBinding?.elementId).toEqual(image.id);
UI.resize(image, "ne", [40, 0]);
// UI.resize(image, "ne", [40, 0]);
expect(arrow.width + arrow.endBinding!.gap).toBeCloseTo(30, 0);
// expect(arrow.width + arrow.endBinding!.gap).toBeCloseTo(30, 0);
const imageWidth = image.width;
const scale = 20 / image.height;
UI.resize(image, "nw", [50, 20]);
// const imageWidth = image.width;
// const scale = 20 / image.height;
// UI.resize(image, "nw", [50, 20]);
expect(arrow.endBinding?.elementId).toEqual(image.id);
expect(Math.floor(arrow.width + arrow.endBinding!.gap)).toBeCloseTo(
30 + imageWidth * scale,
0,
);
});
// expect(arrow.endBinding?.elementId).toEqual(image.id);
// expect(Math.floor(arrow.width + arrow.endBinding!.gap)).toBeCloseTo(
// 30 + imageWidth * scale,
// 0,
// );
// });
});
describe("multiple selection", () => {
@ -997,68 +997,80 @@ describe("multiple selection", () => {
expect(diagLine.angle).toEqual(0);
});
it("resizes with bound arrows", async () => {
const rectangle = UI.createElement("rectangle", {
position: 0,
size: 100,
});
const leftBoundArrow = UI.createElement("arrow", {
x: -110,
y: 50,
width: 100,
height: 0,
});
// it("resizes with bound arrows", async () => {
// const rectangle = UI.createElement("rectangle", {
// position: 0,
// size: 100,
// });
// const leftBoundArrow = UI.createElement("arrow", {
// x: -110,
// y: 50,
// width: 100,
// height: 0,
// });
const rightBoundArrow = UI.createElement("arrow", {
x: 210,
y: 50,
width: -100,
height: 0,
});
// const rightBoundArrow = UI.createElement("arrow", {
// x: 210,
// y: 50,
// width: -100,
// height: 0,
// });
const selectionWidth = 210;
const selectionHeight = 100;
const move = [40, 40] as [number, number];
const scale = Math.max(
1 - move[0] / selectionWidth,
1 - move[1] / selectionHeight,
);
const leftArrowBinding = { ...leftBoundArrow.endBinding };
const rightArrowBinding = { ...rightBoundArrow.endBinding };
delete rightArrowBinding.gap;
// const selectionWidth = 210;
// const selectionHeight = 100;
// const move = [40, 40] as [number, number];
// const scale = Math.max(
// 1 - move[0] / selectionWidth,
// 1 - move[1] / selectionHeight,
// );
// const leftArrowBinding: {
// elementId: string;
// gap?: number;
// focus?: number;
// } = {
// ...leftBoundArrow.endBinding,
// } as PointBinding;
// const rightArrowBinding: {
// elementId: string;
// gap?: number;
// focus?: number;
// } = {
// ...rightBoundArrow.endBinding,
// } as PointBinding;
// delete rightArrowBinding.gap;
UI.resize([rectangle, rightBoundArrow], "nw", move, {
shift: true,
});
// UI.resize([rectangle, rightBoundArrow], "nw", move, {
// shift: true,
// });
expect(leftBoundArrow.x).toBeCloseTo(-110);
expect(leftBoundArrow.y).toBeCloseTo(50);
expect(leftBoundArrow.width).toBeCloseTo(140, 0);
expect(leftBoundArrow.height).toBeCloseTo(7, 0);
expect(leftBoundArrow.angle).toEqual(0);
expect(leftBoundArrow.startBinding).toBeNull();
expect(leftBoundArrow.endBinding?.gap).toBeCloseTo(10);
expect(leftBoundArrow.endBinding?.elementId).toBe(
leftArrowBinding.elementId,
);
expect(leftBoundArrow.endBinding?.focus).toBe(leftArrowBinding.focus);
// expect(leftBoundArrow.x).toBeCloseTo(-110);
// expect(leftBoundArrow.y).toBeCloseTo(50);
// expect(leftBoundArrow.width).toBeCloseTo(140, 0);
// expect(leftBoundArrow.height).toBeCloseTo(7, 0);
// expect(leftBoundArrow.angle).toEqual(0);
// expect(leftBoundArrow.startBinding).toBeNull();
// expect(leftBoundArrow.endBinding?.gap).toBeCloseTo(10);
// expect(leftBoundArrow.endBinding?.elementId).toBe(
// leftArrowBinding.elementId,
// );
// expect(leftBoundArrow.endBinding?.focus).toBe(leftArrowBinding.focus);
expect(rightBoundArrow.x).toBeCloseTo(210);
expect(rightBoundArrow.y).toBeCloseTo(
(selectionHeight - 50) * (1 - scale) + 50,
);
expect(rightBoundArrow.width).toBeCloseTo(100 * scale);
expect(rightBoundArrow.height).toBeCloseTo(0);
expect(rightBoundArrow.angle).toEqual(0);
expect(rightBoundArrow.startBinding).toBeNull();
expect(rightBoundArrow.endBinding?.gap).toBeCloseTo(8.0952);
expect(rightBoundArrow.endBinding?.elementId).toBe(
rightArrowBinding.elementId,
);
expect(rightBoundArrow.endBinding?.focus).toBeCloseTo(
rightArrowBinding.focus!,
);
});
// expect(rightBoundArrow.x).toBeCloseTo(210);
// expect(rightBoundArrow.y).toBeCloseTo(
// (selectionHeight - 50) * (1 - scale) + 50,
// );
// expect(rightBoundArrow.width).toBeCloseTo(100 * scale);
// expect(rightBoundArrow.height).toBeCloseTo(0);
// expect(rightBoundArrow.angle).toEqual(0);
// expect(rightBoundArrow.startBinding).toBeNull();
// expect(rightBoundArrow.endBinding?.gap).toBeCloseTo(8.0952);
// expect(rightBoundArrow.endBinding?.elementId).toBe(
// rightArrowBinding.elementId,
// );
// expect(rightBoundArrow.endBinding?.focus).toBeCloseTo(
// rightArrowBinding.focus!,
// );
// });
it("resizes with labeled arrows", async () => {
const topArrow = UI.createElement("arrow", {
@ -1338,8 +1350,8 @@ describe("multiple selection", () => {
expect(boundArrow.x).toBeCloseTo(380 * scaleX);
expect(boundArrow.y).toBeCloseTo(240 * scaleY);
expect(boundArrow.points[1][0]).toBeCloseTo(-60 * scaleX);
expect(boundArrow.points[1][1]).toBeCloseTo(-80 * scaleY);
expect(boundArrow.points[1][0]).toBeCloseTo(64.1246);
expect(boundArrow.points[1][1]).toBeCloseTo(-85.4995);
expect(arrowLabelPos.x + arrowLabel.width / 2).toBeCloseTo(
boundArrow.x + boundArrow.points[1][0] / 2,

9
packages/excalidraw/actions/actionCanvas.tsx
View File

@ -51,7 +51,7 @@ import { register } from "./register";
import type { AppState, Offsets } from "../types";
export const actionChangeViewBackgroundColor = register({
export const actionChangeViewBackgroundColor = register<Partial<AppState>>({
name: "changeViewBackgroundColor",
label: "labels.canvasBackground",
trackEvent: false,
@ -64,7 +64,7 @@ export const actionChangeViewBackgroundColor = register({
perform: (_, appState, value) => {
return {
appState: { ...appState, ...value },
captureUpdate: !!value.viewBackgroundColor
captureUpdate: !!value?.viewBackgroundColor
? CaptureUpdateAction.IMMEDIATELY
: CaptureUpdateAction.EVENTUALLY,
};
@ -463,7 +463,7 @@ export const actionZoomToFit = register({
!event[KEYS.CTRL_OR_CMD],
});
export const actionToggleTheme = register({
export const actionToggleTheme = register<AppState["theme"]>({
name: "toggleTheme",
label: (_, appState) => {
return appState.theme === THEME.DARK
@ -471,7 +471,8 @@ export const actionToggleTheme = register({
: "buttons.darkMode";
},
keywords: ["toggle", "dark", "light", "mode", "theme"],
icon: (appState) => (appState.theme === THEME.LIGHT ? MoonIcon : SunIcon),
icon: (appState, elements) =>
appState.theme === THEME.LIGHT ? MoonIcon : SunIcon,
viewMode: true,
trackEvent: { category: "canvas" },
perform: (_, appState, value) => {

8
packages/excalidraw/actions/actionClipboard.tsx
View File

@ -20,12 +20,12 @@ import { t } from "../i18n";
import { actionDeleteSelected } from "./actionDeleteSelected";
import { register } from "./register";
export const actionCopy = register({
export const actionCopy = register<ClipboardEvent | null>({
name: "copy",
label: "labels.copy",
icon: DuplicateIcon,
trackEvent: { category: "element" },
perform: async (elements, appState, event: ClipboardEvent | null, app) => {
perform: async (elements, appState, event, app) => {
const elementsToCopy = app.scene.getSelectedElements({
selectedElementIds: appState.selectedElementIds,
includeBoundTextElement: true,
@ -109,12 +109,12 @@ export const actionPaste = register({
keyTest: undefined,
});
export const actionCut = register({
export const actionCut = register<ClipboardEvent | null>({
name: "cut",
label: "labels.cut",
icon: cutIcon,
trackEvent: { category: "element" },
perform: (elements, appState, event: ClipboardEvent | null, app) => {
perform: (elements, appState, event, app) => {
actionCopy.perform(elements, appState, event, app);
return actionDeleteSelected.perform(elements, appState, null, app);
},

22
packages/excalidraw/actions/actionDeleteSelected.tsx
View File

@ -206,12 +206,8 @@ export const actionDeleteSelected = register({
trackEvent: { category: "element", action: "delete" },
perform: (elements, appState, formData, app) => {
if (appState.selectedLinearElement?.isEditing) {
const {
elementId,
selectedPointsIndices,
startBindingElement,
endBindingElement,
} = appState.selectedLinearElement;
const { elementId, selectedPointsIndices } =
appState.selectedLinearElement;
const elementsMap = app.scene.getNonDeletedElementsMap();
const linearElement = LinearElementEditor.getElement(
elementId,
@ -248,19 +244,6 @@ export const actionDeleteSelected = register({
};
}
// We cannot do this inside `movePoint` because it is also called
// when deleting the uncommitted point (which hasn't caused any binding)
const binding = {
startBindingElement: selectedPointsIndices?.includes(0)
? null
: startBindingElement,
endBindingElement: selectedPointsIndices?.includes(
linearElement.points.length - 1,
)
? null
: endBindingElement,
};
LinearElementEditor.deletePoints(
linearElement,
app,
@ -273,7 +256,6 @@ export const actionDeleteSelected = register({
...appState,
selectedLinearElement: {
...appState.selectedLinearElement,
...binding,
selectedPointsIndices:
selectedPointsIndices?.[0] > 0
? [selectedPointsIndices[0] - 1]

18
packages/excalidraw/actions/actionExport.tsx
View File

@ -31,7 +31,9 @@ import "../components/ToolIcon.scss";
import { register } from "./register";
export const actionChangeProjectName = register({
import type { AppState } from "../types";
export const actionChangeProjectName = register<AppState["name"]>({
name: "changeProjectName",
label: "labels.fileTitle",
trackEvent: false,
@ -51,7 +53,7 @@ export const actionChangeProjectName = register({
),
});
export const actionChangeExportScale = register({
export const actionChangeExportScale = register<AppState["exportScale"]>({
name: "changeExportScale",
label: "imageExportDialog.scale",
trackEvent: { category: "export", action: "scale" },
@ -101,7 +103,9 @@ export const actionChangeExportScale = register({
},
});
export const actionChangeExportBackground = register({
export const actionChangeExportBackground = register<
AppState["exportBackground"]
>({
name: "changeExportBackground",
label: "imageExportDialog.label.withBackground",
trackEvent: { category: "export", action: "toggleBackground" },
@ -121,7 +125,9 @@ export const actionChangeExportBackground = register({
),
});
export const actionChangeExportEmbedScene = register({
export const actionChangeExportEmbedScene = register<
AppState["exportEmbedScene"]
>({
name: "changeExportEmbedScene",
label: "imageExportDialog.tooltip.embedScene",
trackEvent: { category: "export", action: "embedScene" },
@ -288,7 +294,9 @@ export const actionLoadScene = register({
keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.key === KEYS.O,
});
export const actionExportWithDarkMode = register({
export const actionExportWithDarkMode = register<
AppState["exportWithDarkMode"]
>({
name: "exportWithDarkMode",
label: "imageExportDialog.label.darkMode",
trackEvent: { category: "export", action: "toggleTheme" },

191
packages/excalidraw/actions/actionFinalize.tsx
View File

@ -1,10 +1,6 @@
import { pointFrom } from "@excalidraw/math";
import {
maybeBindLinearElement,
bindOrUnbindLinearElement,
isBindingEnabled,
} from "@excalidraw/element/binding";
import { bindOrUnbindBindingElement } from "@excalidraw/element/binding";
import {
isValidPolygon,
LinearElementEditor,
@ -21,7 +17,7 @@ import {
import {
KEYS,
arrayToMap,
tupleToCoors,
invariant,
updateActiveTool,
} from "@excalidraw/common";
import { isPathALoop } from "@excalidraw/element";
@ -30,11 +26,12 @@ import { isInvisiblySmallElement } from "@excalidraw/element";
import { CaptureUpdateAction } from "@excalidraw/element";
import type { LocalPoint } from "@excalidraw/math";
import type { GlobalPoint, LocalPoint } from "@excalidraw/math";
import type {
ExcalidrawElement,
ExcalidrawLinearElement,
NonDeleted,
PointsPositionUpdates,
} from "@excalidraw/element/types";
import { t } from "../i18n";
@ -46,20 +43,37 @@ import { register } from "./register";
import type { AppState } from "../types";
export const actionFinalize = register({
type FormData = {
event: PointerEvent;
sceneCoords: { x: number; y: number };
};
export const actionFinalize = register<FormData>({
name: "finalize",
label: "",
trackEvent: false,
perform: (elements, appState, data, app) => {
let newElements = elements;
const { interactiveCanvas, focusContainer, scene } = app;
const { event, sceneCoords } =
(data as {
event?: PointerEvent;
sceneCoords?: { x: number; y: number };
}) ?? {};
const elementsMap = scene.getNonDeletedElementsMap();
if (event && appState.selectedLinearElement) {
if (data && appState.selectedLinearElement) {
const { event, sceneCoords } = data;
const element = LinearElementEditor.getElement(
appState.selectedLinearElement.elementId,
elementsMap,
);
invariant(
element,
"Arrow element should exist if selectedLinearElement is set",
);
invariant(
sceneCoords,
"sceneCoords should be defined if actionFinalize is called with event",
);
const linearElementEditor = LinearElementEditor.handlePointerUp(
event,
appState.selectedLinearElement,
@ -67,19 +81,47 @@ export const actionFinalize = register({
app.scene,
);
const { startBindingElement, endBindingElement } = linearElementEditor;
const element = app.scene.getElement(linearElementEditor.elementId);
if (isBindingElement(element)) {
bindOrUnbindLinearElement(
element,
startBindingElement,
endBindingElement,
app.scene,
);
const newArrow = !!appState.newElement;
const selectedPointsIndices =
newArrow || !appState.selectedLinearElement.selectedPointsIndices
? [element.points.length - 1] // New arrow creation
: appState.selectedLinearElement.selectedPointsIndices;
const draggedPoints: PointsPositionUpdates =
selectedPointsIndices.reduce((map, index) => {
map.set(index, {
point: LinearElementEditor.pointFromAbsoluteCoords(
element,
pointFrom<GlobalPoint>(sceneCoords.x, sceneCoords.y),
elementsMap,
),
});
return map;
}, new Map()) ?? new Map();
bindOrUnbindBindingElement(element, draggedPoints, scene, appState, {
newArrow,
});
} else if (isLineElement(element)) {
if (
appState.selectedLinearElement?.isEditing &&
!appState.newElement &&
!isValidPolygon(element.points)
) {
scene.mutateElement(element, {
polygon: false,
});
}
}
if (linearElementEditor !== appState.selectedLinearElement) {
let newElements = elements;
// `handlePointerUp()` updated the linear element instance,
// so filter out this element if it is too small,
// but do an update to all new elements anyway for undo/redo purposes.
if (element && isInvisiblySmallElement(element)) {
// TODO: #7348 in theory this gets recorded by the store, so the invisible elements could be restored by the undo/redo, which might be not what we would want
newElements = newElements.map((el) => {
@ -91,39 +133,6 @@ export const actionFinalize = register({
return el;
});
}
return {
elements: newElements,
appState: {
selectedLinearElement: {
...linearElementEditor,
selectedPointsIndices: null,
},
suggestedBindings: [],
},
captureUpdate: CaptureUpdateAction.IMMEDIATELY,
};
}
}
if (appState.selectedLinearElement?.isEditing) {
const { elementId, startBindingElement, endBindingElement } =
appState.selectedLinearElement;
const element = LinearElementEditor.getElement(elementId, elementsMap);
if (element) {
if (isBindingElement(element)) {
bindOrUnbindLinearElement(
element,
startBindingElement,
endBindingElement,
scene,
);
}
if (isLineElement(element) && !isValidPolygon(element.points)) {
scene.mutateElement(element, {
polygon: false,
});
}
return {
elements:
@ -134,23 +143,25 @@ export const actionFinalize = register({
}
return el;
})
: undefined,
: newElements,
appState: {
...appState,
cursorButton: "up",
selectedLinearElement: new LinearElementEditor(
element,
arrayToMap(elementsMap),
false, // exit editing mode
),
selectedLinearElement: {
...linearElementEditor,
selectedPointsIndices: null,
isEditing: false,
},
selectionElement: null,
suggestedBinding: null,
newElement: null,
multiElement: null,
},
captureUpdate: CaptureUpdateAction.IMMEDIATELY,
};
}
}
let newElements = elements;
if (window.document.activeElement instanceof HTMLElement) {
focusContainer();
}
@ -174,7 +185,11 @@ export const actionFinalize = register({
if (element) {
// pen and mouse have hover
if (appState.multiElement && element.type !== "freedraw") {
if (
appState.multiElement &&
element.type !== "freedraw" &&
appState.lastPointerDownWith !== "touch"
) {
const { points, lastCommittedPoint } = element;
if (
!lastCommittedPoint ||
@ -227,25 +242,6 @@ export const actionFinalize = register({
polygon: false,
});
}
if (
isBindingElement(element) &&
!isLoop &&
element.points.length > 1 &&
isBindingEnabled(appState)
) {
const coords =
sceneCoords ??
tupleToCoors(
LinearElementEditor.getPointAtIndexGlobalCoordinates(
element,
-1,
arrayToMap(elements),
),
);
maybeBindLinearElement(element, appState, coords, scene);
}
}
}
@ -271,6 +267,24 @@ export const actionFinalize = register({
});
}
let selectedLinearElement =
element && isLinearElement(element)
? new LinearElementEditor(element, arrayToMap(newElements)) // To select the linear element when user has finished mutipoint editing
: appState.selectedLinearElement;
selectedLinearElement = selectedLinearElement
? {
...selectedLinearElement,
isEditing: appState.newElement
? false
: selectedLinearElement.isEditing,
pointerDownState: {
...selectedLinearElement.pointerDownState,
origin: null,
},
}
: selectedLinearElement;
return {
elements: newElements,
appState: {
@ -288,7 +302,7 @@ export const actionFinalize = register({
multiElement: null,
editingTextElement: null,
startBoundElement: null,
suggestedBindings: [],
suggestedBinding: null,
selectedElementIds:
element &&
!appState.activeTool.locked &&
@ -298,11 +312,8 @@ export const actionFinalize = register({
[element.id]: true,
}
: appState.selectedElementIds,
// To select the linear element when user has finished mutipoint editing
selectedLinearElement:
element && isLinearElement(element)
? new LinearElementEditor(element, arrayToMap(newElements))
: appState.selectedLinearElement,
selectedLinearElement,
},
// TODO: #7348 we should not capture everything, but if we don't, it leads to incosistencies -> revisit
captureUpdate: CaptureUpdateAction.IMMEDIATELY,

22
packages/excalidraw/actions/actionFlip.test.tsx
View File

@ -38,15 +38,13 @@ describe("flipping re-centers selection", () => {
height: 239.9,
startBinding: {
elementId: "rec1",
focus: 0,
gap: 5,
fixedPoint: [0.49, -0.05],
mode: "orbit",
},
endBinding: {
elementId: "rec2",
focus: 0,
gap: 5,
fixedPoint: [-0.05, 0.49],
mode: "orbit",
},
startArrowhead: null,
endArrowhead: "arrow",
@ -99,8 +97,8 @@ describe("flipping arrowheads", () => {
endArrowhead: null,
endBinding: {
elementId: rect.id,
focus: 0.5,
gap: 5,
fixedPoint: [0.5, 0.5],
mode: "orbit",
},
});
@ -139,13 +137,13 @@ describe("flipping arrowheads", () => {
endArrowhead: "circle",
startBinding: {
elementId: rect.id,
focus: 0.5,
gap: 5,
fixedPoint: [0.5, 0.5],
mode: "orbit",
},
endBinding: {
elementId: rect2.id,
focus: 0.5,
gap: 5,
fixedPoint: [0.5, 0.5],
mode: "orbit",
},
});
@ -195,8 +193,8 @@ describe("flipping arrowheads", () => {
endArrowhead: null,
endBinding: {
elementId: rect.id,
focus: 0.5,
gap: 5,
fixedPoint: [0.5, 0.5],
mode: "orbit",
},
});

21
packages/excalidraw/actions/actionFlip.ts
View File

@ -1,17 +1,10 @@
import { getNonDeletedElements } from "@excalidraw/element";
import {
bindOrUnbindLinearElements,
isBindingEnabled,
} from "@excalidraw/element";
import { bindOrUnbindBindingElements } from "@excalidraw/element";
import { getCommonBoundingBox } from "@excalidraw/element";
import { newElementWith } from "@excalidraw/element";
import { deepCopyElement } from "@excalidraw/element";
import { resizeMultipleElements } from "@excalidraw/element";
import {
isArrowElement,
isElbowArrow,
isLinearElement,
} from "@excalidraw/element";
import { isArrowElement, isElbowArrow } from "@excalidraw/element";
import { updateFrameMembershipOfSelectedElements } from "@excalidraw/element";
import { CODES, KEYS, arrayToMap } from "@excalidraw/common";
@ -103,7 +96,6 @@ const flipSelectedElements = (
const updatedElements = flipElements(
selectedElements,
elementsMap,
appState,
flipDirection,
app,
);
@ -118,7 +110,6 @@ const flipSelectedElements = (
const flipElements = (
selectedElements: NonDeleted<ExcalidrawElement>[],
elementsMap: NonDeletedSceneElementsMap,
appState: AppState,
flipDirection: "horizontal" | "vertical",
app: AppClassProperties,
): ExcalidrawElement[] => {
@ -158,12 +149,10 @@ const flipElements = (
},
);
bindOrUnbindLinearElements(
selectedElements.filter(isLinearElement),
isBindingEnabled(appState),
[],
bindOrUnbindBindingElements(
selectedElements.filter(isArrowElement),
app.scene,
appState.zoom,
app.state,
);
// ---------------------------------------------------------------------------

11
packages/excalidraw/actions/actionNavigate.tsx
View File

@ -2,6 +2,8 @@ import clsx from "clsx";
import { CaptureUpdateAction } from "@excalidraw/element";
import { invariant } from "@excalidraw/common";
import { getClientColor } from "../clients";
import { Avatar } from "../components/Avatar";
import {
@ -16,12 +18,17 @@ import { register } from "./register";
import type { GoToCollaboratorComponentProps } from "../components/UserList";
import type { Collaborator } from "../types";
export const actionGoToCollaborator = register({
export const actionGoToCollaborator = register<Collaborator>({
name: "goToCollaborator",
label: "Go to a collaborator",
viewMode: true,
trackEvent: { category: "collab" },
perform: (_elements, appState, collaborator: Collaborator) => {
perform: (_elements, appState, collaborator) => {
invariant(
collaborator,
"actionGoToCollaborator: collaborator should be defined when actionGoToCollaborator is called",
);
if (
!collaborator.socketId ||
appState.userToFollow?.socketId === collaborator.socketId ||

229
packages/excalidraw/actions/actionProperties.tsx
View File

@ -1,4 +1,5 @@
import { pointFrom } from "@excalidraw/math";
import { useEffect, useMemo, useRef, useState } from "react";
import {
@ -21,12 +22,13 @@ import {
getLineHeight,
isTransparent,
reduceToCommonValue,
invariant,
} from "@excalidraw/common";
import { canBecomePolygon, getNonDeletedElements } from "@excalidraw/element";
import {
bindLinearElement,
bindBindingElement,
calculateFixedPointForElbowArrowBinding,
updateBoundElements,
} from "@excalidraw/element";
@ -292,13 +294,15 @@ const changeFontSize = (
// -----------------------------------------------------------------------------
export const actionChangeStrokeColor = register({
export const actionChangeStrokeColor = register<
Pick<AppState, "currentItemStrokeColor">
>({
name: "changeStrokeColor",
label: "labels.stroke",
trackEvent: false,
perform: (elements, appState, value) => {
return {
...(value.currentItemStrokeColor && {
...(value?.currentItemStrokeColor && {
elements: changeProperty(
elements,
appState,
@ -316,7 +320,7 @@ export const actionChangeStrokeColor = register({
...appState,
...value,
},
captureUpdate: !!value.currentItemStrokeColor
captureUpdate: !!value?.currentItemStrokeColor
? CaptureUpdateAction.IMMEDIATELY
: CaptureUpdateAction.EVENTUALLY,
};
@ -346,12 +350,14 @@ export const actionChangeStrokeColor = register({
),
});
export const actionChangeBackgroundColor = register({
export const actionChangeBackgroundColor = register<
Pick<AppState, "currentItemBackgroundColor" | "viewBackgroundColor">
>({
name: "changeBackgroundColor",
label: "labels.changeBackground",
trackEvent: false,
perform: (elements, appState, value, app) => {
if (!value.currentItemBackgroundColor) {
if (!value?.currentItemBackgroundColor) {
return {
appState: {
...appState,
@ -423,7 +429,7 @@ export const actionChangeBackgroundColor = register({
),
});
export const actionChangeFillStyle = register({
export const actionChangeFillStyle = register<ExcalidrawElement["fillStyle"]>({
name: "changeFillStyle",
label: "labels.fill",
trackEvent: false,
@ -503,7 +509,9 @@ export const actionChangeFillStyle = register({
},
});
export const actionChangeStrokeWidth = register({
export const actionChangeStrokeWidth = register<
ExcalidrawElement["strokeWidth"]
>({
name: "changeStrokeWidth",
label: "labels.strokeWidth",
trackEvent: false,
@ -559,7 +567,7 @@ export const actionChangeStrokeWidth = register({
),
});
export const actionChangeSloppiness = register({
export const actionChangeSloppiness = register<ExcalidrawElement["roughness"]>({
name: "changeSloppiness",
label: "labels.sloppiness",
trackEvent: false,
@ -613,7 +621,9 @@ export const actionChangeSloppiness = register({
),
});
export const actionChangeStrokeStyle = register({
export const actionChangeStrokeStyle = register<
ExcalidrawElement["strokeStyle"]
>({
name: "changeStrokeStyle",
label: "labels.strokeStyle",
trackEvent: false,
@ -666,7 +676,7 @@ export const actionChangeStrokeStyle = register({
),
});
export const actionChangeOpacity = register({
export const actionChangeOpacity = register<ExcalidrawElement["opacity"]>({
name: "changeOpacity",
label: "labels.opacity",
trackEvent: false,
@ -690,78 +700,89 @@ export const actionChangeOpacity = register({
),
});
export const actionChangeFontSize = register({
name: "changeFontSize",
label: "labels.fontSize",
trackEvent: false,
perform: (elements, appState, value, app) => {
return changeFontSize(elements, appState, app, () => value, value);
export const actionChangeFontSize = register<ExcalidrawTextElement["fontSize"]>(
{
name: "changeFontSize",
label: "labels.fontSize",
trackEvent: false,
perform: (elements, appState, value, app) => {
return changeFontSize(
elements,
appState,
app,
() => {
invariant(value, "actionChangeFontSize: Expected a font size value");
return value;
},
value,
);
},
PanelComponent: ({ elements, appState, updateData, app }) => (
<fieldset>
<legend>{t("labels.fontSize")}</legend>
<div className="buttonList">
<RadioSelection
group="font-size"
options={[
{
value: 16,
text: t("labels.small"),
icon: FontSizeSmallIcon,
testId: "fontSize-small",
},
{
value: 20,
text: t("labels.medium"),
icon: FontSizeMediumIcon,
testId: "fontSize-medium",
},
{
value: 28,
text: t("labels.large"),
icon: FontSizeLargeIcon,
testId: "fontSize-large",
},
{
value: 36,
text: t("labels.veryLarge"),
icon: FontSizeExtraLargeIcon,
testId: "fontSize-veryLarge",
},
]}
value={getFormValue(
elements,
app,
(element) => {
if (isTextElement(element)) {
return element.fontSize;
}
const boundTextElement = getBoundTextElement(
element,
app.scene.getNonDeletedElementsMap(),
);
if (boundTextElement) {
return boundTextElement.fontSize;
}
return null;
},
(element) =>
isTextElement(element) ||
getBoundTextElement(
element,
app.scene.getNonDeletedElementsMap(),
) !== null,
(hasSelection) =>
hasSelection
? null
: appState.currentItemFontSize || DEFAULT_FONT_SIZE,
)}
onChange={(value) => updateData(value)}
/>
</div>
</fieldset>
),
},
PanelComponent: ({ elements, appState, updateData, app }) => (
<fieldset>
<legend>{t("labels.fontSize")}</legend>
<div className="buttonList">
<RadioSelection
group="font-size"
options={[
{
value: 16,
text: t("labels.small"),
icon: FontSizeSmallIcon,
testId: "fontSize-small",
},
{
value: 20,
text: t("labels.medium"),
icon: FontSizeMediumIcon,
testId: "fontSize-medium",
},
{
value: 28,
text: t("labels.large"),
icon: FontSizeLargeIcon,
testId: "fontSize-large",
},
{
value: 36,
text: t("labels.veryLarge"),
icon: FontSizeExtraLargeIcon,
testId: "fontSize-veryLarge",
},
]}
value={getFormValue(
elements,
app,
(element) => {
if (isTextElement(element)) {
return element.fontSize;
}
const boundTextElement = getBoundTextElement(
element,
app.scene.getNonDeletedElementsMap(),
);
if (boundTextElement) {
return boundTextElement.fontSize;
}
return null;
},
(element) =>
isTextElement(element) ||
getBoundTextElement(
element,
app.scene.getNonDeletedElementsMap(),
) !== null,
(hasSelection) =>
hasSelection
? null
: appState.currentItemFontSize || DEFAULT_FONT_SIZE,
)}
onChange={(value) => updateData(value)}
/>
</div>
</fieldset>
),
});
);
export const actionDecreaseFontSize = register({
name: "decreaseFontSize",
@ -821,7 +842,10 @@ type ChangeFontFamilyData = Partial<
resetContainers?: true;
};
export const actionChangeFontFamily = register({
export const actionChangeFontFamily = register<{
currentItemFontFamily: any;
currentHoveredFontFamily: any;
}>({
name: "changeFontFamily",
label: "labels.fontFamily",
trackEvent: false,
@ -858,6 +882,8 @@ export const actionChangeFontFamily = register({
};
}
invariant(value, "actionChangeFontFamily: value must be defined");
const { currentItemFontFamily, currentHoveredFontFamily } = value;
let nextCaptureUpdateAction: CaptureUpdateActionType =
@ -1191,7 +1217,7 @@ export const actionChangeFontFamily = register({
},
});
export const actionChangeTextAlign = register({
export const actionChangeTextAlign = register<TextAlign>({
name: "changeTextAlign",
label: "Change text alignment",
trackEvent: false,
@ -1283,7 +1309,7 @@ export const actionChangeTextAlign = register({
},
});
export const actionChangeVerticalAlign = register({
export const actionChangeVerticalAlign = register<VerticalAlign>({
name: "changeVerticalAlign",
label: "Change vertical alignment",
trackEvent: { category: "element" },
@ -1375,7 +1401,7 @@ export const actionChangeVerticalAlign = register({
},
});
export const actionChangeRoundness = register({
export const actionChangeRoundness = register<"sharp" | "round">({
name: "changeRoundness",
label: "Change edge roundness",
trackEvent: false,
@ -1532,15 +1558,16 @@ const getArrowheadOptions = (flip: boolean) => {
] as const;
};
export const actionChangeArrowhead = register({
export const actionChangeArrowhead = register<{
position: "start" | "end";
type: Arrowhead;
}>({
name: "changeArrowhead",
label: "Change arrowheads",
trackEvent: false,
perform: (
elements,
appState,
value: { position: "start" | "end"; type: Arrowhead },
) => {
perform: (elements, appState, value) => {
invariant(value, "actionChangeArrowhead: value must be defined");
return {
elements: changeProperty(elements, appState, (el) => {
if (isLinearElement(el)) {
@ -1616,7 +1643,7 @@ export const actionChangeArrowhead = register({
},
});
export const actionChangeArrowType = register({
export const actionChangeArrowType = register<keyof typeof ARROW_TYPE>({
name: "changeArrowType",
label: "Change arrow types",
trackEvent: false,
@ -1717,7 +1744,13 @@ export const actionChangeArrowType = register({
newElement.startBinding.elementId,
) as ExcalidrawBindableElement;
if (startElement) {
bindLinearElement(newElement, startElement, "start", app.scene);
bindBindingElement(
newElement,
startElement,
appState.bindMode === "inside" ? "inside" : "orbit",
"start",
app.scene,
);
}
}
if (newElement.endBinding) {
@ -1725,7 +1758,13 @@ export const actionChangeArrowType = register({
newElement.endBinding.elementId,
) as ExcalidrawBindableElement;
if (endElement) {
bindLinearElement(newElement, endElement, "end", app.scene);
bindBindingElement(
newElement,
endElement,
appState.bindMode === "inside" ? "inside" : "orbit",
"end",
app.scene,
);
}
}
}

7
packages/excalidraw/actions/register.ts
View File

@ -2,7 +2,12 @@ import type { Action } from "./types";
export let actions: readonly Action[] = [];
export const register = <T extends Action>(action: T) => {
export const register = <
TData extends any,
T extends Action<TData> = Action<TData>,
>(
action: T,
) => {
actions = actions.concat(action);
return action as T & {
keyTest?: unknown extends T["keyTest"] ? never : T["keyTest"];

8
packages/excalidraw/actions/types.ts
View File

@ -32,10 +32,10 @@ export type ActionResult =
}
| false;
type ActionFn = (
type ActionFn<TData = any> = (
elements: readonly OrderedExcalidrawElement[],
appState: Readonly<AppState>,
formData: any,
formData: TData | undefined,
app: AppClassProperties,
) => ActionResult | Promise<ActionResult>;
@ -158,7 +158,7 @@ export type PanelComponentProps = {
) => React.JSX.Element | null;
};
export interface Action {
export interface Action<TData = any> {
name: ActionName;
label:
| string
@ -175,7 +175,7 @@ export interface Action {
elements: readonly ExcalidrawElement[],
) => React.ReactNode);
PanelComponent?: React.FC<PanelComponentProps>;
perform: ActionFn;
perform: ActionFn<TData>;
keyPriority?: number;
keyTest?: (
event: React.KeyboardEvent | KeyboardEvent,

6
packages/excalidraw/appState.ts
View File

@ -96,7 +96,7 @@ export const getDefaultAppState = (): Omit<
panels: STATS_PANELS.generalStats | STATS_PANELS.elementProperties,
},
startBoundElement: null,
suggestedBindings: [],
suggestedBinding: null,
frameRendering: { enabled: true, clip: true, name: true, outline: true },
frameToHighlight: null,
editingFrame: null,
@ -123,6 +123,7 @@ export const getDefaultAppState = (): Omit<
searchMatches: null,
lockedMultiSelections: {},
activeLockedId: null,
bindMode: "orbit",
};
};
@ -224,7 +225,7 @@ const APP_STATE_STORAGE_CONF = (<
shouldCacheIgnoreZoom: { browser: true, export: false, server: false },
stats: { browser: true, export: false, server: false },
startBoundElement: { browser: false, export: false, server: false },
suggestedBindings: { browser: false, export: false, server: false },
suggestedBinding: { browser: false, export: false, server: false },
frameRendering: { browser: false, export: false, server: false },
frameToHighlight: { browser: false, export: false, server: false },
editingFrame: { browser: false, export: false, server: false },
@ -247,6 +248,7 @@ const APP_STATE_STORAGE_CONF = (<
searchMatches: { browser: false, export: false, server: false },
lockedMultiSelections: { browser: true, export: true, server: true },
activeLockedId: { browser: false, export: false, server: false },
bindMode: { browser: true, export: false, server: false },
});
const _clearAppStateForStorage = <

901
packages/excalidraw/components/App.tsx
View File

File diff suppressed because it is too large Load Diff

2
packages/excalidraw/components/CommandPalette/CommandPalette.tsx
View File

@ -961,7 +961,7 @@ const CommandItem = ({
<InlineIcon
icon={
typeof command.icon === "function"
? command.icon(appState)
? command.icon(appState, [])
: command.icon
}
/>

3
packages/excalidraw/components/CommandPalette/types.ts
View File

@ -1,6 +1,5 @@
import type { ActionManager } from "../../actions/manager";
import type { Action } from "../../actions/types";
import type { UIAppState } from "../../types";
export type CommandPaletteItem = {
label: string;
@ -12,7 +11,7 @@ export type CommandPaletteItem = {
* (deburred name + keywords)
*/
haystack?: string;
icon?: React.ReactNode | ((appState: UIAppState) => React.ReactNode);
icon?: Action["icon"];
category: string;
order?: number;
predicate?: boolean | Action["predicate"];

2
packages/excalidraw/components/ConvertElementTypePopup.tsx
View File

@ -844,7 +844,7 @@ const convertElementType = <
}),
) as typeof element;
updateBindings(nextElement, app.scene);
updateBindings(nextElement, app.scene, app.state);
return nextElement;
}

2
packages/excalidraw/components/LayerUI.tsx
View File

@ -582,7 +582,7 @@ const LayerUI = ({
const stripIrrelevantAppStateProps = (appState: AppState): UIAppState => {
const {
suggestedBindings,
suggestedBinding,
startBoundElement,
cursorButton,
scrollX,

5
packages/excalidraw/components/Stats/Angle.tsx
View File

@ -34,6 +34,7 @@ const handleDegreeChange: DragInputCallbackType<AngleProps["property"]> = ({
shouldChangeByStepSize,
nextValue,
scene,
app,
}) => {
const elementsMap = scene.getNonDeletedElementsMap();
const origElement = originalElements[0];
@ -48,7 +49,7 @@ const handleDegreeChange: DragInputCallbackType<AngleProps["property"]> = ({
scene.mutateElement(latestElement, {
angle: nextAngle,
});
updateBindings(latestElement, scene);
updateBindings(latestElement, scene, app.state);
const boundTextElement = getBoundTextElement(latestElement, elementsMap);
if (boundTextElement && !isArrowElement(latestElement)) {
@ -74,7 +75,7 @@ const handleDegreeChange: DragInputCallbackType<AngleProps["property"]> = ({
scene.mutateElement(latestElement, {
angle: nextAngle,
});
updateBindings(latestElement, scene);
updateBindings(latestElement, scene, app.state);
const boundTextElement = getBoundTextElement(latestElement, elementsMap);
if (boundTextElement && !isArrowElement(latestElement)) {

4
packages/excalidraw/components/Stats/MultiDimension.tsx
View File

@ -94,9 +94,7 @@ const resizeElementInGroup = (
);
if (boundTextElement) {
const newFontSize = boundTextElement.fontSize * scale;
updateBoundElements(latestElement, scene, {
newSize: { width: updates.width, height: updates.height },
});
updateBoundElements(latestElement, scene);
const latestBoundTextElement = elementsMap.get(boundTextElement.id);
if (latestBoundTextElement && isTextElement(latestBoundTextElement)) {
scene.mutateElement(latestBoundTextElement, {

8
packages/excalidraw/components/Stats/MultiPosition.tsx
View File

@ -38,6 +38,7 @@ const moveElements = (
originalElements: readonly ExcalidrawElement[],
originalElementsMap: ElementsMap,
scene: Scene,
appState: AppState,
) => {
for (let i = 0; i < originalElements.length; i++) {
const origElement = originalElements[i];
@ -63,6 +64,7 @@ const moveElements = (
newTopLeftY,
origElement,
scene,
appState,
originalElementsMap,
false,
);
@ -75,6 +77,7 @@ const moveGroupTo = (
originalElements: ExcalidrawElement[],
originalElementsMap: ElementsMap,
scene: Scene,
appState: AppState,
) => {
const elementsMap = scene.getNonDeletedElementsMap();
const [x1, y1, ,] = getCommonBounds(originalElements);
@ -107,6 +110,7 @@ const moveGroupTo = (
topLeftY + offsetY,
origElement,
scene,
appState,
originalElementsMap,
false,
);
@ -125,6 +129,7 @@ const handlePositionChange: DragInputCallbackType<
property,
scene,
originalAppState,
app,
}) => {
const elementsMap = scene.getNonDeletedElementsMap();
@ -152,6 +157,7 @@ const handlePositionChange: DragInputCallbackType<
elementsInUnit.map((el) => el.original),
originalElementsMap,
scene,
app.state,
);
} else {
const origElement = elementsInUnit[0]?.original;
@ -178,6 +184,7 @@ const handlePositionChange: DragInputCallbackType<
newTopLeftY,
origElement,
scene,
app.state,
originalElementsMap,
false,
);
@ -203,6 +210,7 @@ const handlePositionChange: DragInputCallbackType<
originalElements,
originalElementsMap,
scene,
app.state,
);
scene.triggerUpdate();

3
packages/excalidraw/components/Stats/Position.tsx
View File

@ -34,6 +34,7 @@ const handlePositionChange: DragInputCallbackType<"x" | "y"> = ({
property,
scene,
originalAppState,
app,
}) => {
const elementsMap = scene.getNonDeletedElementsMap();
const origElement = originalElements[0];
@ -131,6 +132,7 @@ const handlePositionChange: DragInputCallbackType<"x" | "y"> = ({
newTopLeftY,
origElement,
scene,
app.state,
originalElementsMap,
);
return;
@ -162,6 +164,7 @@ const handlePositionChange: DragInputCallbackType<"x" | "y"> = ({
newTopLeftY,
origElement,
scene,
app.state,
originalElementsMap,
);
};

6
packages/excalidraw/components/Stats/index.tsx
View File

@ -4,9 +4,9 @@ import throttle from "lodash.throttle";
import { useEffect, useMemo, useState, memo } from "react";
import { STATS_PANELS } from "@excalidraw/common";
import { getCommonBounds } from "@excalidraw/element";
import { getCommonBounds, isBindingElement } from "@excalidraw/element";
import { getUncroppedWidthAndHeight } from "@excalidraw/element";
import { isElbowArrow, isImageElement } from "@excalidraw/element";
import { isImageElement } from "@excalidraw/element";
import { frameAndChildrenSelectedTogether } from "@excalidraw/element";
@ -333,7 +333,7 @@ export const StatsInner = memo(
appState={appState}
/>
</StatsRow>
{!isElbowArrow(singleElement) && (
{!isBindingElement(singleElement) && (
<StatsRow>
<Angle
property="angle"

24
packages/excalidraw/components/Stats/stats.test.tsx
View File

@ -135,18 +135,7 @@ describe("binding with linear elements", () => {
) as HTMLInputElement;
expect(linear.startBinding).not.toBe(null);
expect(inputX).not.toBeNull();
UI.updateInput(inputX, String("204"));
expect(linear.startBinding).not.toBe(null);
});
it("should remain bound to linear element on small angle change", async () => {
const linear = h.elements[1] as ExcalidrawLinearElement;
const inputAngle = UI.queryStatsProperty("A")?.querySelector(
".drag-input",
) as HTMLInputElement;
expect(linear.startBinding).not.toBe(null);
UI.updateInput(inputAngle, String("1"));
UI.updateInput(inputX, String("186"));
expect(linear.startBinding).not.toBe(null);
});
@ -161,17 +150,6 @@ describe("binding with linear elements", () => {
UI.updateInput(inputX, String("254"));
expect(linear.startBinding).toBe(null);
});
it("should remain bound to linear element on small angle change", async () => {
const linear = h.elements[1] as ExcalidrawLinearElement;
const inputAngle = UI.queryStatsProperty("A")?.querySelector(
".drag-input",
) as HTMLInputElement;
expect(linear.startBinding).not.toBe(null);
UI.updateInput(inputAngle, String("45"));
expect(linear.startBinding).toBe(null);
});
});
// single element

27
packages/excalidraw/components/Stats/utils.ts
View File

@ -1,6 +1,10 @@
import { pointFrom, pointRotateRads } from "@excalidraw/math";
import { getBoundTextElement } from "@excalidraw/element";
import {
getBoundTextElement,
isBindingElement,
unbindBindingElement,
} from "@excalidraw/element";
import { isFrameLikeElement } from "@excalidraw/element";
import {
@ -12,6 +16,7 @@ import {
import { getFrameChildren } from "@excalidraw/element";
import { updateBindings } from "@excalidraw/element";
import { DRAGGING_THRESHOLD } from "@excalidraw/common";
import type { Radians } from "@excalidraw/math";
@ -110,9 +115,25 @@ export const moveElement = (
newTopLeftY: number,
originalElement: ExcalidrawElement,
scene: Scene,
appState: AppState,
originalElementsMap: ElementsMap,
shouldInformMutation = true,
) => {
if (
isBindingElement(originalElement) &&
(originalElement.startBinding || originalElement.endBinding)
) {
if (
Math.abs(newTopLeftX - originalElement.x) < DRAGGING_THRESHOLD &&
Math.abs(newTopLeftY - originalElement.y) < DRAGGING_THRESHOLD
) {
return;
}
unbindBindingElement(originalElement, "start", scene);
unbindBindingElement(originalElement, "end", scene);
}
const elementsMap = scene.getNonDeletedElementsMap();
const latestElement = elementsMap.get(originalElement.id);
if (!latestElement) {
@ -145,7 +166,7 @@ export const moveElement = (
},
{ informMutation: shouldInformMutation, isDragging: false },
);
updateBindings(latestElement, scene);
updateBindings(latestElement, scene, appState);
const boundTextElement = getBoundTextElement(
originalElement,
@ -203,7 +224,7 @@ export const moveElement = (
},
{ informMutation: shouldInformMutation, isDragging: false },
);
updateBindings(latestChildElement, scene, {
updateBindings(latestChildElement, scene, appState, {
simultaneouslyUpdated: originalChildren,
});
});

3
packages/excalidraw/components/canvases/InteractiveCanvas.tsx
View File

@ -201,8 +201,9 @@ const getRelevantAppStateProps = (
selectedGroupIds: appState.selectedGroupIds,
selectedLinearElement: appState.selectedLinearElement,
multiElement: appState.multiElement,
newElement: appState.newElement,
isBindingEnabled: appState.isBindingEnabled,
suggestedBindings: appState.suggestedBindings,
suggestedBinding: appState.suggestedBinding,
isRotating: appState.isRotating,
elementsToHighlight: appState.elementsToHighlight,
collaborators: appState.collaborators, // Necessary for collab. sessions

1
packages/excalidraw/components/canvases/StaticCanvas.tsx
View File

@ -99,6 +99,7 @@ const getRelevantAppStateProps = (appState: AppState): StaticCanvasAppState => {
editingGroupId: appState.editingGroupId,
currentHoveredFontFamily: appState.currentHoveredFontFamily,
croppingElementId: appState.croppingElementId,
suggestedBinding: appState.suggestedBinding,
};
return relevantAppStateProps;

98
packages/excalidraw/data/__snapshots__/transform.test.ts.snap
View File

@ -88,8 +88,11 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
"endArrowhead": "arrow",
"endBinding": {
"elementId": "ellipse-1",
"focus": -0.007519379844961235,
"gap": 11.562288374879595,
"fixedPoint": [
0.04,
0.4633333333333333,
],
"mode": "orbit",
},
"fillStyle": "solid",
"frameId": null,
@ -118,8 +121,11 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
"startArrowhead": null,
"startBinding": {
"elementId": "id49",
"focus": -0.0813953488372095,
"gap": 1,
"fixedPoint": [
1,
0.5001,
],
"mode": "orbit",
},
"strokeColor": "#1864ab",
"strokeStyle": "solid",
@ -144,8 +150,11 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
"endArrowhead": "arrow",
"endBinding": {
"elementId": "ellipse-1",
"focus": 0.10666666666666667,
"gap": 3.8343264684446097,
"fixedPoint": [
-0.01,
0.44666666666666666,
],
"mode": "orbit",
},
"fillStyle": "solid",
"frameId": null,
@ -174,8 +183,11 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
"startArrowhead": null,
"startBinding": {
"elementId": "diamond-1",
"focus": 0,
"gap": 4.535423522449215,
"fixedPoint": [
0.9357142857142857,
0.5001,
],
"mode": "orbit",
},
"strokeColor": "#e67700",
"strokeStyle": "solid",
@ -334,8 +346,11 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
"endArrowhead": "arrow",
"endBinding": {
"elementId": "text-2",
"focus": 0,
"gap": 16,
"fixedPoint": [
-2.05,
0.5001,
],
"mode": "orbit",
},
"fillStyle": "solid",
"frameId": null,
@ -364,8 +379,11 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
"startArrowhead": null,
"startBinding": {
"elementId": "text-1",
"focus": 0,
"gap": 1,
"fixedPoint": [
1,
0.5001,
],
"mode": "orbit",
},
"strokeColor": "#1e1e1e",
"strokeStyle": "solid",
@ -436,8 +454,11 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
"endArrowhead": "arrow",
"endBinding": {
"elementId": "id42",
"focus": -0,
"gap": 1,
"fixedPoint": [
0,
0.5001,
],
"mode": "orbit",
},
"fillStyle": "solid",
"frameId": null,
@ -466,8 +487,11 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
"startArrowhead": null,
"startBinding": {
"elementId": "id41",
"focus": 0,
"gap": 1,
"fixedPoint": [
1,
0.5001,
],
"mode": "orbit",
},
"strokeColor": "#1e1e1e",
"strokeStyle": "solid",
@ -612,8 +636,11 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
"endArrowhead": "arrow",
"endBinding": {
"elementId": "id46",
"focus": -0,
"gap": 1,
"fixedPoint": [
0,
0.5001,
],
"mode": "orbit",
},
"fillStyle": "solid",
"frameId": null,
@ -642,8 +669,11 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
"startArrowhead": null,
"startBinding": {
"elementId": "id45",
"focus": 0,
"gap": 1,
"fixedPoint": [
1,
0.5001,
],
"mode": "orbit",
},
"strokeColor": "#1e1e1e",
"strokeStyle": "solid",
@ -1476,8 +1506,11 @@ exports[`Test Transform > should transform the elements correctly when linear el
"endArrowhead": "arrow",
"endBinding": {
"elementId": "Alice",
"focus": -0,
"gap": 5.299874999999986,
"fixedPoint": [
-0.07542628418945944,
0.5001,
],
"mode": "orbit",
},
"fillStyle": "solid",
"frameId": null,
@ -1508,8 +1541,11 @@ exports[`Test Transform > should transform the elements correctly when linear el
"startArrowhead": null,
"startBinding": {
"elementId": "Bob",
"focus": 0,
"gap": 1,
"fixedPoint": [
1.000004978564514,
0.5001,
],
"mode": "orbit",
},
"strokeColor": "#1e1e1e",
"strokeStyle": "solid",
@ -1539,8 +1575,11 @@ exports[`Test Transform > should transform the elements correctly when linear el
"endArrowhead": "arrow",
"endBinding": {
"elementId": "B",
"focus": 0,
"gap": 32,
"fixedPoint": [
0.46387050630528887,
0.48466257668711654,
],
"mode": "orbit",
},
"fillStyle": "solid",
"frameId": null,
@ -1567,8 +1606,11 @@ exports[`Test Transform > should transform the elements correctly when linear el
"startArrowhead": null,
"startBinding": {
"elementId": "Bob",
"focus": 0,
"gap": 1,
"fixedPoint": [
0.39381496335223337,
1,
],
"mode": "orbit",
},
"strokeColor": "#1e1e1e",
"strokeStyle": "solid",

31
packages/excalidraw/data/restore.ts
View File

@ -32,7 +32,6 @@ import {
isArrowBoundToElement,
isArrowElement,
isElbowArrow,
isFixedPointBinding,
isLinearElement,
isLineElement,
isTextElement,
@ -61,7 +60,6 @@ import type {
FontFamilyValues,
NonDeletedSceneElementsMap,
OrderedExcalidrawElement,
PointBinding,
StrokeRoundness,
} from "@excalidraw/element/types";
@ -123,36 +121,29 @@ const getFontFamilyByName = (fontFamilyName: string): FontFamilyValues => {
const repairBinding = <T extends ExcalidrawLinearElement>(
element: T,
binding: PointBinding | FixedPointBinding | null,
): T extends ExcalidrawElbowArrowElement
? FixedPointBinding | null
: PointBinding | FixedPointBinding | null => {
binding: FixedPointBinding | null,
): FixedPointBinding | null => {
if (!binding) {
return null;
}
const focus = binding.focus || 0;
if (isElbowArrow(element)) {
const fixedPointBinding:
| ExcalidrawElbowArrowElement["startBinding"]
| ExcalidrawElbowArrowElement["endBinding"] = isFixedPointBinding(binding)
? {
...binding,
focus,
fixedPoint: normalizeFixedPoint(binding.fixedPoint ?? [0, 0]),
}
: null;
| ExcalidrawElbowArrowElement["endBinding"] = {
...binding,
fixedPoint: normalizeFixedPoint(binding.fixedPoint ?? [0, 0]),
mode: binding.mode || "orbit",
};
return fixedPointBinding;
}
return {
...binding,
focus,
} as T extends ExcalidrawElbowArrowElement
? FixedPointBinding | null
: PointBinding | FixedPointBinding | null;
elementId: binding.elementId,
mode: binding.mode || "orbit",
fixedPoint: normalizeFixedPoint(binding.fixedPoint || [0.51, 0.51]),
} as FixedPointBinding | null;
};
const restoreElementWithProperties = <

10
packages/excalidraw/data/transform.test.ts
View File

@ -432,12 +432,9 @@ describe("Test Transform", () => {
boundElements: [{ id: text.id, type: "text" }],
startBinding: {
elementId: rectangle.id,
focus: 0,
gap: 1,
},
endBinding: {
elementId: ellipse.id,
focus: -0,
},
});
@ -517,12 +514,9 @@ describe("Test Transform", () => {
boundElements: [{ id: text1.id, type: "text" }],
startBinding: {
elementId: text2.id,
focus: 0,
gap: 1,
},
endBinding: {
elementId: text3.id,
focus: -0,
},
});
@ -780,8 +774,8 @@ describe("Test Transform", () => {
const [arrow, rect] = excalidrawElements;
expect((arrow as ExcalidrawArrowElement).endBinding).toStrictEqual({
elementId: "rect-1",
focus: -0,
gap: 25,
fixedPoint: [-2.05, 0.5001],
mode: "orbit",
});
expect(rect.boundElements).toStrictEqual([
{

8
packages/excalidraw/data/transform.ts
View File

@ -16,7 +16,7 @@ import {
getLineHeight,
} from "@excalidraw/common";
import { bindLinearElement } from "@excalidraw/element";
import { bindBindingElement } from "@excalidraw/element";
import {
newArrowElement,
newElement,
@ -330,9 +330,10 @@ const bindLinearElementToElement = (
}
}
bindLinearElement(
bindBindingElement(
linearElement,
startBoundElement as ExcalidrawBindableElement,
"orbit",
"start",
scene,
);
@ -405,9 +406,10 @@ const bindLinearElementToElement = (
}
}
bindLinearElement(
bindBindingElement(
linearElement,
endBoundElement as ExcalidrawBindableElement,
"orbit",
"end",
scene,
);

5
packages/excalidraw/global.d.ts vendored
View File

@ -101,7 +101,10 @@ declare module "image-blob-reduce" {
interface CustomMatchers {
toBeNonNaNNumber(): void;
toCloselyEqualPoints(points: readonly [number, number][]): void;
toCloselyEqualPoints(
points: readonly [number, number][],
precision?: number,
): void;
}
declare namespace jest {

4
packages/excalidraw/package.json
View File

@ -81,8 +81,8 @@
"@braintree/sanitize-url": "6.0.2",
"@excalidraw/common": "0.18.0",
"@excalidraw/element": "0.18.0",
"@excalidraw/math": "0.18.0",
"@excalidraw/laser-pointer": "1.3.1",
"@excalidraw/math": "0.18.0",
"@excalidraw/mermaid-to-excalidraw": "1.1.3",
"@excalidraw/random-username": "1.1.0",
"@radix-ui/react-popover": "1.1.6",
@ -97,8 +97,8 @@
"image-blob-reduce": "3.0.1",
"jotai": "2.11.0",
"jotai-scope": "0.7.2",
"lodash.throttle": "4.1.1",
"lodash.debounce": "4.0.8",
"lodash.throttle": "4.1.1",
"nanoid": "3.3.3",
"open-color": "1.9.1",
"pako": "2.0.3",

322
packages/excalidraw/renderer/helpers.ts
View File

@ -1,26 +1,5 @@
import { THEME, THEME_FILTER } from "@excalidraw/common";
import { FIXED_BINDING_DISTANCE } from "@excalidraw/element";
import { getDiamondPoints } from "@excalidraw/element";
import { elementCenterPoint, getCornerRadius } from "@excalidraw/element";
import {
curve,
curveCatmullRomCubicApproxPoints,
curveCatmullRomQuadraticApproxPoints,
curveOffsetPoints,
type GlobalPoint,
offsetPointsForQuadraticBezier,
pointFrom,
pointRotateRads,
} from "@excalidraw/math";
import type {
ElementsMap,
ExcalidrawDiamondElement,
ExcalidrawRectanguloidElement,
} from "@excalidraw/element/types";
import type { StaticCanvasRenderConfig } from "../scene/types";
import type { AppState, StaticCanvasAppState } from "../types";
@ -97,163 +76,6 @@ export const bootstrapCanvas = ({
return context;
};
function drawCatmullRomQuadraticApprox(
ctx: CanvasRenderingContext2D,
points: GlobalPoint[],
tension = 0.5,
) {
const pointSets = curveCatmullRomQuadraticApproxPoints(points, tension);
if (pointSets) {
for (let i = 0; i < pointSets.length - 1; i++) {
const [[cpX, cpY], [p2X, p2Y]] = pointSets[i];
ctx.quadraticCurveTo(cpX, cpY, p2X, p2Y);
}
}
}
function drawCatmullRomCubicApprox(
ctx: CanvasRenderingContext2D,
points: GlobalPoint[],
tension = 0.5,
) {
const pointSets = curveCatmullRomCubicApproxPoints(points, tension);
if (pointSets) {
for (let i = 0; i < pointSets.length; i++) {
const [[cp1x, cp1y], [cp2x, cp2y], [x, y]] = pointSets[i];
ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
}
}
}
export const drawHighlightForRectWithRotation = (
context: CanvasRenderingContext2D,
element: ExcalidrawRectanguloidElement,
elementsMap: ElementsMap,
padding: number,
) => {
const [x, y] = pointRotateRads(
pointFrom<GlobalPoint>(element.x, element.y),
elementCenterPoint(element, elementsMap),
element.angle,
);
context.save();
context.translate(x, y);
context.rotate(element.angle);
let radius = getCornerRadius(
Math.min(element.width, element.height),
element,
);
if (radius === 0) {
radius = 0.01;
}
context.beginPath();
{
const topLeftApprox = offsetPointsForQuadraticBezier(
pointFrom(0, 0 + radius),
pointFrom(0, 0),
pointFrom(0 + radius, 0),
padding,
);
const topRightApprox = offsetPointsForQuadraticBezier(
pointFrom(element.width - radius, 0),
pointFrom(element.width, 0),
pointFrom(element.width, radius),
padding,
);
const bottomRightApprox = offsetPointsForQuadraticBezier(
pointFrom(element.width, element.height - radius),
pointFrom(element.width, element.height),
pointFrom(element.width - radius, element.height),
padding,
);
const bottomLeftApprox = offsetPointsForQuadraticBezier(
pointFrom(radius, element.height),
pointFrom(0, element.height),
pointFrom(0, element.height - radius),
padding,
);
context.moveTo(
topLeftApprox[topLeftApprox.length - 1][0],
topLeftApprox[topLeftApprox.length - 1][1],
);
context.lineTo(topRightApprox[0][0], topRightApprox[0][1]);
drawCatmullRomQuadraticApprox(context, topRightApprox);
context.lineTo(bottomRightApprox[0][0], bottomRightApprox[0][1]);
drawCatmullRomQuadraticApprox(context, bottomRightApprox);
context.lineTo(bottomLeftApprox[0][0], bottomLeftApprox[0][1]);
drawCatmullRomQuadraticApprox(context, bottomLeftApprox);
context.lineTo(topLeftApprox[0][0], topLeftApprox[0][1]);
drawCatmullRomQuadraticApprox(context, topLeftApprox);
}
// Counter-clockwise for the cutout in the middle. We need to have an "inverse
// mask" on a filled shape for the diamond highlight, because stroking creates
// sharp inset edges on line joins < 90 degrees.
{
const topLeftApprox = offsetPointsForQuadraticBezier(
pointFrom(0 + radius, 0),
pointFrom(0, 0),
pointFrom(0, 0 + radius),
-FIXED_BINDING_DISTANCE,
);
const topRightApprox = offsetPointsForQuadraticBezier(
pointFrom(element.width, radius),
pointFrom(element.width, 0),
pointFrom(element.width - radius, 0),
-FIXED_BINDING_DISTANCE,
);
const bottomRightApprox = offsetPointsForQuadraticBezier(
pointFrom(element.width - radius, element.height),
pointFrom(element.width, element.height),
pointFrom(element.width, element.height - radius),
-FIXED_BINDING_DISTANCE,
);
const bottomLeftApprox = offsetPointsForQuadraticBezier(
pointFrom(0, element.height - radius),
pointFrom(0, element.height),
pointFrom(radius, element.height),
-FIXED_BINDING_DISTANCE,
);
context.moveTo(
topLeftApprox[topLeftApprox.length - 1][0],
topLeftApprox[topLeftApprox.length - 1][1],
);
context.lineTo(bottomLeftApprox[0][0], bottomLeftApprox[0][1]);
drawCatmullRomQuadraticApprox(context, bottomLeftApprox);
context.lineTo(bottomRightApprox[0][0], bottomRightApprox[0][1]);
drawCatmullRomQuadraticApprox(context, bottomRightApprox);
context.lineTo(topRightApprox[0][0], topRightApprox[0][1]);
drawCatmullRomQuadraticApprox(context, topRightApprox);
context.lineTo(topLeftApprox[0][0], topLeftApprox[0][1]);
drawCatmullRomQuadraticApprox(context, topLeftApprox);
}
context.closePath();
context.fill();
context.restore();
};
export const strokeEllipseWithRotation = (
context: CanvasRenderingContext2D,
width: number,
height: number,
cx: number,
cy: number,
angle: number,
) => {
context.beginPath();
context.ellipse(cx, cy, width / 2, height / 2, angle, 0, Math.PI * 2);
context.stroke();
};
export const strokeRectWithRotation = (
context: CanvasRenderingContext2D,
x: number,
@ -283,147 +105,3 @@ export const strokeRectWithRotation = (
}
context.restore();
};
export const drawHighlightForDiamondWithRotation = (
context: CanvasRenderingContext2D,
padding: number,
element: ExcalidrawDiamondElement,
elementsMap: ElementsMap,
) => {
const [x, y] = pointRotateRads(
pointFrom<GlobalPoint>(element.x, element.y),
elementCenterPoint(element, elementsMap),
element.angle,
);
context.save();
context.translate(x, y);
context.rotate(element.angle);
{
context.beginPath();
const [topX, topY, rightX, rightY, bottomX, bottomY, leftX, leftY] =
getDiamondPoints(element);
const verticalRadius = element.roundness
? getCornerRadius(Math.abs(topX - leftX), element)
: (topX - leftX) * 0.01;
const horizontalRadius = element.roundness
? getCornerRadius(Math.abs(rightY - topY), element)
: (rightY - topY) * 0.01;
const topApprox = curveOffsetPoints(
curve(
pointFrom(topX - verticalRadius, topY + horizontalRadius),
pointFrom(topX, topY),
pointFrom(topX, topY),
pointFrom(topX + verticalRadius, topY + horizontalRadius),
),
padding,
);
const rightApprox = curveOffsetPoints(
curve(
pointFrom(rightX - verticalRadius, rightY - horizontalRadius),
pointFrom(rightX, rightY),
pointFrom(rightX, rightY),
pointFrom(rightX - verticalRadius, rightY + horizontalRadius),
),
padding,
);
const bottomApprox = curveOffsetPoints(
curve(
pointFrom(bottomX + verticalRadius, bottomY - horizontalRadius),
pointFrom(bottomX, bottomY),
pointFrom(bottomX, bottomY),
pointFrom(bottomX - verticalRadius, bottomY - horizontalRadius),
),
padding,
);
const leftApprox = curveOffsetPoints(
curve(
pointFrom(leftX + verticalRadius, leftY + horizontalRadius),
pointFrom(leftX, leftY),
pointFrom(leftX, leftY),
pointFrom(leftX + verticalRadius, leftY - horizontalRadius),
),
padding,
);
context.moveTo(
topApprox[topApprox.length - 1][0],
topApprox[topApprox.length - 1][1],
);
context.lineTo(rightApprox[1][0], rightApprox[1][1]);
drawCatmullRomCubicApprox(context, rightApprox);
context.lineTo(bottomApprox[1][0], bottomApprox[1][1]);
drawCatmullRomCubicApprox(context, bottomApprox);
context.lineTo(leftApprox[1][0], leftApprox[1][1]);
drawCatmullRomCubicApprox(context, leftApprox);
context.lineTo(topApprox[1][0], topApprox[1][1]);
drawCatmullRomCubicApprox(context, topApprox);
}
// Counter-clockwise for the cutout in the middle. We need to have an "inverse
// mask" on a filled shape for the diamond highlight, because stroking creates
// sharp inset edges on line joins < 90 degrees.
{
const [topX, topY, rightX, rightY, bottomX, bottomY, leftX, leftY] =
getDiamondPoints(element);
const verticalRadius = element.roundness
? getCornerRadius(Math.abs(topX - leftX), element)
: (topX - leftX) * 0.01;
const horizontalRadius = element.roundness
? getCornerRadius(Math.abs(rightY - topY), element)
: (rightY - topY) * 0.01;
const topApprox = curveOffsetPoints(
curve(
pointFrom(topX + verticalRadius, topY + horizontalRadius),
pointFrom(topX, topY),
pointFrom(topX, topY),
pointFrom(topX - verticalRadius, topY + horizontalRadius),
),
-FIXED_BINDING_DISTANCE,
);
const rightApprox = curveOffsetPoints(
curve(
pointFrom(rightX - verticalRadius, rightY + horizontalRadius),
pointFrom(rightX, rightY),
pointFrom(rightX, rightY),
pointFrom(rightX - verticalRadius, rightY - horizontalRadius),
),
-FIXED_BINDING_DISTANCE,
);
const bottomApprox = curveOffsetPoints(
curve(
pointFrom(bottomX - verticalRadius, bottomY - horizontalRadius),
pointFrom(bottomX, bottomY),
pointFrom(bottomX, bottomY),
pointFrom(bottomX + verticalRadius, bottomY - horizontalRadius),
),
-FIXED_BINDING_DISTANCE,
);
const leftApprox = curveOffsetPoints(
curve(
pointFrom(leftX + verticalRadius, leftY - horizontalRadius),
pointFrom(leftX, leftY),
pointFrom(leftX, leftY),
pointFrom(leftX + verticalRadius, leftY + horizontalRadius),
),
-FIXED_BINDING_DISTANCE,
);
context.moveTo(
topApprox[topApprox.length - 1][0],
topApprox[topApprox.length - 1][1],
);
context.lineTo(leftApprox[1][0], leftApprox[1][1]);
drawCatmullRomCubicApprox(context, leftApprox);
context.lineTo(bottomApprox[1][0], bottomApprox[1][1]);
drawCatmullRomCubicApprox(context, bottomApprox);
context.lineTo(rightApprox[1][0], rightApprox[1][1]);
drawCatmullRomCubicApprox(context, rightApprox);
context.lineTo(topApprox[1][0], topApprox[1][1]);
drawCatmullRomCubicApprox(context, topApprox);
}
context.closePath();
context.fill();
context.restore();
};

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

@ -16,7 +16,6 @@ import {
throttleRAF,
} from "@excalidraw/common";
import { FIXED_BINDING_DISTANCE, maxBindingGap } from "@excalidraw/element";
import { LinearElementEditor } from "@excalidraw/element";
import {
getOmitSidesForDevice,
@ -44,11 +43,6 @@ import {
import { getCommonBounds, getElementAbsoluteCoords } from "@excalidraw/element";
import type {
SuggestedBinding,
SuggestedPointBinding,
} from "@excalidraw/element";
import type {
TransformHandles,
TransformHandleType,
@ -56,7 +50,6 @@ import type {
import type {
ElementsMap,
ExcalidrawBindableElement,
ExcalidrawElement,
ExcalidrawFrameLikeElement,
ExcalidrawImageElement,
@ -79,11 +72,8 @@ import { getClientColor, renderRemoteCursors } from "../clients";
import {
bootstrapCanvas,
drawHighlightForDiamondWithRotation,
drawHighlightForRectWithRotation,
fillCircle,
getNormalizedCanvasDimensions,
strokeEllipseWithRotation,
strokeRectWithRotation,
} from "./helpers";
@ -188,85 +178,6 @@ const renderSingleLinearPoint = <Point extends GlobalPoint | LocalPoint>(
);
};
const renderBindingHighlightForBindableElement = (
context: CanvasRenderingContext2D,
element: ExcalidrawBindableElement,
elementsMap: ElementsMap,
zoom: InteractiveCanvasAppState["zoom"],
) => {
const padding = maxBindingGap(element, element.width, element.height, zoom);
context.fillStyle = "rgba(0,0,0,.05)";
switch (element.type) {
case "rectangle":
case "text":
case "image":
case "iframe":
case "embeddable":
case "frame":
case "magicframe":
drawHighlightForRectWithRotation(context, element, elementsMap, padding);
break;
case "diamond":
drawHighlightForDiamondWithRotation(
context,
padding,
element,
elementsMap,
);
break;
case "ellipse": {
const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
const width = x2 - x1;
const height = y2 - y1;
context.strokeStyle = "rgba(0,0,0,.05)";
context.lineWidth = padding - FIXED_BINDING_DISTANCE;
strokeEllipseWithRotation(
context,
width + padding + FIXED_BINDING_DISTANCE,
height + padding + FIXED_BINDING_DISTANCE,
x1 + width / 2,
y1 + height / 2,
element.angle,
);
break;
}
}
};
const renderBindingHighlightForSuggestedPointBinding = (
context: CanvasRenderingContext2D,
suggestedBinding: SuggestedPointBinding,
elementsMap: ElementsMap,
zoom: InteractiveCanvasAppState["zoom"],
) => {
const [element, startOrEnd, bindableElement] = suggestedBinding;
const threshold = maxBindingGap(
bindableElement,
bindableElement.width,
bindableElement.height,
zoom,
);
context.strokeStyle = "rgba(0,0,0,0)";
context.fillStyle = "rgba(0,0,0,.05)";
const pointIndices =
startOrEnd === "both" ? [0, -1] : startOrEnd === "start" ? [0] : [-1];
pointIndices.forEach((index) => {
const [x, y] = LinearElementEditor.getPointAtIndexGlobalCoordinates(
element,
index,
elementsMap,
);
fillCircle(context, x, y, threshold, true);
});
};
type ElementSelectionBorder = {
angle: number;
x1: number;
@ -336,23 +247,6 @@ const renderSelectionBorder = (
context.restore();
};
const renderBindingHighlight = (
context: CanvasRenderingContext2D,
appState: InteractiveCanvasAppState,
suggestedBinding: SuggestedBinding,
elementsMap: ElementsMap,
) => {
const renderHighlight = Array.isArray(suggestedBinding)
? renderBindingHighlightForSuggestedPointBinding
: renderBindingHighlightForBindableElement;
context.save();
context.translate(appState.scrollX, appState.scrollY);
renderHighlight(context, suggestedBinding as any, elementsMap, appState.zoom);
context.restore();
};
const renderFrameHighlight = (
context: CanvasRenderingContext2D,
appState: InteractiveCanvasAppState,
@ -813,19 +707,6 @@ const _renderInteractiveScene = ({
}
}
if (appState.isBindingEnabled) {
appState.suggestedBindings
.filter((binding) => binding != null)
.forEach((suggestedBinding) => {
renderBindingHighlight(
context,
appState,
suggestedBinding!,
elementsMap,
);
});
}
if (appState.frameToHighlight) {
renderFrameHighlight(
context,
@ -891,7 +772,11 @@ const _renderInteractiveScene = ({
}
// Paint selected elements
if (!appState.multiElement && !appState.selectedLinearElement?.isEditing) {
if (
!appState.multiElement &&
!appState.newElement &&
!appState.selectedLinearElement?.isEditing
) {
const showBoundingBox = shouldShowBoundingBox(selectedElements, appState);
const isSingleLinearElementSelected =

51
packages/excalidraw/tests/__snapshots__/contextmenu.test.tsx.snap
View File

@ -11,6 +11,7 @@ exports[`contextMenu element > right-clicking on a group should select whole gro
"locked": false,
"type": "selection",
},
"bindMode": "orbit",
"collaborators": Map {},
"contextMenu": {
"items": [
@ -981,7 +982,7 @@ exports[`contextMenu element > right-clicking on a group should select whole gro
"open": false,
"panels": 3,
},
"suggestedBindings": [],
"suggestedBinding": null,
"theme": "light",
"toast": null,
"userToFollow": null,
@ -1082,6 +1083,7 @@ exports[`contextMenu element > selecting 'Add to library' in context menu adds e
"locked": false,
"type": "selection",
},
"bindMode": "orbit",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@ -1172,7 +1174,7 @@ exports[`contextMenu element > selecting 'Add to library' in context menu adds e
"open": false,
"panels": 3,
},
"suggestedBindings": [],
"suggestedBinding": null,
"theme": "light",
"toast": {
"message": "Added to library",
@ -1294,6 +1296,7 @@ exports[`contextMenu element > selecting 'Bring forward' in context menu brings
"locked": false,
"type": "selection",
},
"bindMode": "orbit",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@ -1384,7 +1387,7 @@ exports[`contextMenu element > selecting 'Bring forward' in context menu brings
"open": false,
"panels": 3,
},
"suggestedBindings": [],
"suggestedBinding": null,
"theme": "light",
"toast": null,
"userToFollow": null,
@ -1623,6 +1626,7 @@ exports[`contextMenu element > selecting 'Bring to front' in context menu brings
"locked": false,
"type": "selection",
},
"bindMode": "orbit",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@ -1713,7 +1717,7 @@ exports[`contextMenu element > selecting 'Bring to front' in context menu brings
"open": false,
"panels": 3,
},
"suggestedBindings": [],
"suggestedBinding": null,
"theme": "light",
"toast": null,
"userToFollow": null,
@ -1952,6 +1956,7 @@ exports[`contextMenu element > selecting 'Copy styles' in context menu copies st
"locked": false,
"type": "selection",
},
"bindMode": "orbit",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@ -2042,7 +2047,7 @@ exports[`contextMenu element > selecting 'Copy styles' in context menu copies st
"open": false,
"panels": 3,
},
"suggestedBindings": [],
"suggestedBinding": null,
"theme": "light",
"toast": {
"message": "Copied styles.",
@ -2164,6 +2169,7 @@ exports[`contextMenu element > selecting 'Delete' in context menu deletes elemen
"locked": false,
"type": "selection",
},
"bindMode": "orbit",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@ -2252,7 +2258,7 @@ exports[`contextMenu element > selecting 'Delete' in context menu deletes elemen
"open": false,
"panels": 3,
},
"suggestedBindings": [],
"suggestedBinding": null,
"theme": "light",
"toast": null,
"userToFollow": null,
@ -2403,6 +2409,7 @@ exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates
"locked": false,
"type": "selection",
},
"bindMode": "orbit",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@ -2493,7 +2500,7 @@ exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates
"open": false,
"panels": 3,
},
"suggestedBindings": [],
"suggestedBinding": null,
"theme": "light",
"toast": null,
"userToFollow": null,
@ -2699,6 +2706,7 @@ exports[`contextMenu element > selecting 'Group selection' in context menu group
"locked": false,
"type": "selection",
},
"bindMode": "orbit",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@ -2794,7 +2802,7 @@ exports[`contextMenu element > selecting 'Group selection' in context menu group
"open": false,
"panels": 3,
},
"suggestedBindings": [],
"suggestedBinding": null,
"theme": "light",
"toast": null,
"userToFollow": null,
@ -3069,6 +3077,7 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
"locked": false,
"type": "selection",
},
"bindMode": "orbit",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@ -3159,7 +3168,7 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
"open": false,
"panels": 3,
},
"suggestedBindings": [],
"suggestedBinding": null,
"theme": "light",
"toast": {
"message": "Copied styles.",
@ -3560,6 +3569,7 @@ exports[`contextMenu element > selecting 'Send backward' in context menu sends e
"locked": false,
"type": "selection",
},
"bindMode": "orbit",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@ -3650,7 +3660,7 @@ exports[`contextMenu element > selecting 'Send backward' in context menu sends e
"open": false,
"panels": 3,
},
"suggestedBindings": [],
"suggestedBinding": null,
"theme": "light",
"toast": null,
"userToFollow": null,
@ -3881,6 +3891,7 @@ exports[`contextMenu element > selecting 'Send to back' in context menu sends el
"locked": false,
"type": "selection",
},
"bindMode": "orbit",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@ -3971,7 +3982,7 @@ exports[`contextMenu element > selecting 'Send to back' in context menu sends el
"open": false,
"panels": 3,
},
"suggestedBindings": [],
"suggestedBinding": null,
"theme": "light",
"toast": null,
"userToFollow": null,
@ -4202,6 +4213,7 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
"locked": false,
"type": "selection",
},
"bindMode": "orbit",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@ -4295,7 +4307,7 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
"open": false,
"panels": 3,
},
"suggestedBindings": [],
"suggestedBinding": null,
"theme": "light",
"toast": null,
"userToFollow": null,
@ -4611,6 +4623,7 @@ exports[`contextMenu element > shows 'Group selection' in context menu for multi
"locked": false,
"type": "selection",
},
"bindMode": "orbit",
"collaborators": Map {},
"contextMenu": {
"items": [
@ -5578,7 +5591,7 @@ exports[`contextMenu element > shows 'Group selection' in context menu for multi
"open": false,
"panels": 3,
},
"suggestedBindings": [],
"suggestedBinding": null,
"theme": "light",
"toast": null,
"userToFollow": null,
@ -5826,6 +5839,7 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro
"locked": false,
"type": "selection",
},
"bindMode": "orbit",
"collaborators": Map {},
"contextMenu": {
"items": [
@ -6795,7 +6809,7 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro
"open": false,
"panels": 3,
},
"suggestedBindings": [],
"suggestedBinding": null,
"theme": "light",
"toast": null,
"userToFollow": null,
@ -7092,6 +7106,7 @@ exports[`contextMenu element > shows context menu for canvas > [end of test] app
"locked": false,
"type": "selection",
},
"bindMode": "orbit",
"collaborators": Map {},
"contextMenu": {
"items": [
@ -7724,7 +7739,7 @@ exports[`contextMenu element > shows context menu for canvas > [end of test] app
"open": false,
"panels": 3,
},
"suggestedBindings": [],
"suggestedBinding": null,
"theme": "light",
"toast": null,
"userToFollow": null,
@ -7757,6 +7772,7 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
"locked": false,
"type": "selection",
},
"bindMode": "orbit",
"collaborators": Map {},
"contextMenu": {
"items": [
@ -8721,7 +8737,7 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
"open": false,
"panels": 3,
},
"suggestedBindings": [],
"suggestedBinding": null,
"theme": "light",
"toast": null,
"userToFollow": null,
@ -8746,6 +8762,7 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
"locked": false,
"type": "selection",
},
"bindMode": "orbit",
"collaborators": Map {},
"contextMenu": {
"items": [
@ -9713,7 +9730,7 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
"open": false,
"panels": 3,
},
"suggestedBindings": [],
"suggestedBinding": null,
"theme": "light",
"toast": null,
"userToFollow": null,

2019
packages/excalidraw/tests/__snapshots__/history.test.tsx.snap
View File

File diff suppressed because it is too large Load Diff

132
packages/excalidraw/tests/__snapshots__/move.test.tsx.snap
View File

@ -95,135 +95,3 @@ exports[`move element > rectangle 5`] = `
"y": 40,
}
`;
exports[`move element > rectangles with binding arrow 5`] = `
{
"angle": 0,
"backgroundColor": "transparent",
"boundElements": [
{
"id": "id6",
"type": "arrow",
},
],
"customData": undefined,
"fillStyle": "solid",
"frameId": null,
"groupIds": [],
"height": 100,
"id": "id0",
"index": "a0",
"isDeleted": false,
"link": null,
"locked": false,
"opacity": 100,
"roughness": 1,
"roundness": null,
"seed": 1278240551,
"strokeColor": "#1e1e1e",
"strokeStyle": "solid",
"strokeWidth": 2,
"type": "rectangle",
"updated": 1,
"version": 4,
"versionNonce": 1006504105,
"width": 100,
"x": 0,
"y": 0,
}
`;
exports[`move element > rectangles with binding arrow 6`] = `
{
"angle": 0,
"backgroundColor": "transparent",
"boundElements": [
{
"id": "id6",
"type": "arrow",
},
],
"customData": undefined,
"fillStyle": "solid",
"frameId": null,
"groupIds": [],
"height": 300,
"id": "id3",
"index": "a1",
"isDeleted": false,
"link": null,
"locked": false,
"opacity": 100,
"roughness": 1,
"roundness": null,
"seed": 1116226695,
"strokeColor": "#1e1e1e",
"strokeStyle": "solid",
"strokeWidth": 2,
"type": "rectangle",
"updated": 1,
"version": 7,
"versionNonce": 1984422985,
"width": 300,
"x": 201,
"y": 2,
}
`;
exports[`move element > rectangles with binding arrow 7`] = `
{
"angle": 0,
"backgroundColor": "transparent",
"boundElements": null,
"customData": undefined,
"elbowed": false,
"endArrowhead": "arrow",
"endBinding": {
"elementId": "id3",
"focus": "-0.46667",
"gap": 10,
},
"fillStyle": "solid",
"frameId": null,
"groupIds": [],
"height": "81.40630",
"id": "id6",
"index": "a2",
"isDeleted": false,
"lastCommittedPoint": null,
"link": null,
"locked": false,
"opacity": 100,
"points": [
[
0,
0,
],
[
"81.00000",
"81.40630",
],
],
"roughness": 1,
"roundness": {
"type": 2,
},
"seed": 23633383,
"startArrowhead": null,
"startBinding": {
"elementId": "id0",
"focus": "-0.60000",
"gap": 10,
},
"strokeColor": "#1e1e1e",
"strokeStyle": "solid",
"strokeWidth": 2,
"type": "arrow",
"updated": 1,
"version": 11,
"versionNonce": 1573789895,
"width": "81.00000",
"x": "110.00000",
"y": 50,
}
`;

8
packages/excalidraw/tests/__snapshots__/multiPointCreate.test.tsx.snap
View File

@ -49,8 +49,8 @@ exports[`multi point mode in linear elements > arrow 3`] = `
"strokeWidth": 2,
"type": "arrow",
"updated": 1,
"version": 8,
"versionNonce": 1604849351,
"version": 7,
"versionNonce": 400692809,
"width": 70,
"x": 30,
"y": 30,
@ -104,8 +104,8 @@ exports[`multi point mode in linear elements > line 3`] = `
"strokeWidth": 2,
"type": "line",
"updated": 1,
"version": 8,
"versionNonce": 1604849351,
"version": 7,
"versionNonce": 400692809,
"width": 70,
"x": 30,
"y": 30,

316
packages/excalidraw/tests/__snapshots__/regressionTests.test.tsx.snap
View File

File diff suppressed because it is too large Load Diff

418
packages/excalidraw/tests/history.test.tsx
View File

@ -1011,7 +1011,7 @@ describe("history", () => {
// leave editor
Keyboard.keyPress(KEYS.ESCAPE);
expect(API.getUndoStack().length).toBe(6);
expect(API.getUndoStack().length).toBe(5);
expect(API.getRedoStack().length).toBe(0);
expect(assertSelectedElements(h.elements[0]));
expect(h.state.selectedLinearElement?.isEditing ?? false).toBe(false);
@ -1028,7 +1028,7 @@ describe("history", () => {
]);
Keyboard.undo();
expect(API.getUndoStack().length).toBe(5);
expect(API.getUndoStack().length).toBe(4);
expect(API.getRedoStack().length).toBe(1);
expect(assertSelectedElements(h.elements[0]));
expect(h.state.selectedLinearElement?.isEditing).toBe(true);
@ -1048,11 +1048,11 @@ describe("history", () => {
mouse.clickAt(0, 0);
mouse.clickAt(10, 10);
mouse.clickAt(20, 20);
expect(API.getUndoStack().length).toBe(5);
expect(API.getUndoStack().length).toBe(4);
expect(API.getRedoStack().length).toBe(1);
Keyboard.undo();
expect(API.getUndoStack().length).toBe(4);
expect(API.getUndoStack().length).toBe(3);
expect(API.getRedoStack().length).toBe(2);
expect(assertSelectedElements(h.elements[0]));
expect(h.state.selectedLinearElement?.isEditing).toBe(true);
@ -1069,10 +1069,10 @@ describe("history", () => {
]);
Keyboard.undo();
expect(API.getUndoStack().length).toBe(3);
expect(API.getUndoStack().length).toBe(2);
expect(API.getRedoStack().length).toBe(3);
expect(assertSelectedElements(h.elements[0]));
expect(h.state.selectedLinearElement?.isEditing ?? false).toBe(false); // undo `open editor`
expect(h.state.selectedLinearElement?.isEditing).toBe(false); // undo `open editor`
expect(h.state.selectedLinearElement?.elementId).toBe(h.elements[0].id);
expect(h.elements).toEqual([
expect.objectContaining({
@ -1085,29 +1085,29 @@ describe("history", () => {
}),
]);
Keyboard.undo();
expect(API.getUndoStack().length).toBe(2);
expect(API.getRedoStack().length).toBe(4);
expect(assertSelectedElements(h.elements[0]));
expect(h.state.selectedLinearElement?.isEditing ?? false).toBe(false);
expect(h.state.selectedLinearElement).toBeNull(); // undo `actionFinalize`
expect(h.elements).toEqual([
expect.objectContaining({
isDeleted: false,
points: [
[0, 0],
[10, 10],
[20, 0],
],
}),
]);
// Keyboard.undo();
// expect(API.getUndoStack().length).toBe(2);
// expect(API.getRedoStack().length).toBe(4);
// expect(assertSelectedElements(h.elements[0]));
// expect(h.state.selectedLinearElement?.isEditing).toBe(false);
// expect(h.state.selectedLinearElement).toBeNull(); // undo `actionFinalize`
// expect(h.elements).toEqual([
// expect.objectContaining({
// isDeleted: false,
// points: [
// [0, 0],
// [10, 10],
// [20, 0],
// ],
// }),
// ]);
Keyboard.undo();
expect(API.getUndoStack().length).toBe(1);
expect(API.getRedoStack().length).toBe(5);
expect(API.getRedoStack().length).toBe(4);
expect(assertSelectedElements(h.elements[0]));
expect(h.state.selectedLinearElement?.isEditing ?? false).toBe(false);
expect(h.state.selectedLinearElement).toBeNull();
expect(h.state.selectedLinearElement?.isEditing).toBe(false);
expect(h.state.selectedLinearElement?.elementId).toBe(h.elements[0].id);
expect(h.elements).toEqual([
expect.objectContaining({
isDeleted: false,
@ -1120,9 +1120,8 @@ describe("history", () => {
Keyboard.undo();
expect(API.getUndoStack().length).toBe(0);
expect(API.getRedoStack().length).toBe(6);
expect(API.getRedoStack().length).toBe(5);
expect(API.getSelectedElements().length).toBe(0);
expect(h.state.selectedLinearElement?.isEditing ?? false).toBe(false);
expect(h.state.selectedLinearElement).toBeNull();
expect(h.elements).toEqual([
expect.objectContaining({
@ -1136,10 +1135,10 @@ describe("history", () => {
Keyboard.redo();
expect(API.getUndoStack().length).toBe(1);
expect(API.getRedoStack().length).toBe(5);
expect(API.getRedoStack().length).toBe(4);
expect(assertSelectedElements(h.elements[0]));
expect(h.state.selectedLinearElement?.isEditing ?? false).toBe(false);
expect(h.state.selectedLinearElement).toBeNull();
expect(h.state.selectedLinearElement?.isEditing).toBe(false);
expect(h.state.selectedLinearElement?.elementId).toBe(h.elements[0].id);
expect(h.elements).toEqual([
expect.objectContaining({
isDeleted: false,
@ -1150,25 +1149,25 @@ describe("history", () => {
}),
]);
// Keyboard.redo();
// expect(API.getUndoStack().length).toBe(2);
// expect(API.getRedoStack().length).toBe(3);
// expect(assertSelectedElements(h.elements[0]));
// expect(h.state.selectedLinearElement?.isEditing).toBe(false);
// expect(h.state.selectedLinearElement).toBeNull(); // undo `actionFinalize`
// expect(h.elements).toEqual([
// expect.objectContaining({
// isDeleted: false,
// points: [
// [0, 0],
// [10, 10],
// [20, 0],
// ],
// }),
// ]);
Keyboard.redo();
expect(API.getUndoStack().length).toBe(2);
expect(API.getRedoStack().length).toBe(4);
expect(assertSelectedElements(h.elements[0]));
expect(h.state.selectedLinearElement?.isEditing ?? false).toBe(false);
expect(h.state.selectedLinearElement).toBeNull(); // undo `actionFinalize`
expect(h.elements).toEqual([
expect.objectContaining({
isDeleted: false,
points: [
[0, 0],
[10, 10],
[20, 0],
],
}),
]);
Keyboard.redo();
expect(API.getUndoStack().length).toBe(3);
expect(API.getRedoStack().length).toBe(3);
expect(assertSelectedElements(h.elements[0]));
expect(h.state.selectedLinearElement?.isEditing ?? false).toBe(false); // undo `open editor`
@ -1185,7 +1184,7 @@ describe("history", () => {
]);
Keyboard.redo();
expect(API.getUndoStack().length).toBe(4);
expect(API.getUndoStack().length).toBe(3);
expect(API.getRedoStack().length).toBe(2);
expect(assertSelectedElements(h.elements[0]));
expect(h.state.selectedLinearElement?.isEditing).toBe(true);
@ -1202,7 +1201,7 @@ describe("history", () => {
]);
Keyboard.redo();
expect(API.getUndoStack().length).toBe(5);
expect(API.getUndoStack().length).toBe(4);
expect(API.getRedoStack().length).toBe(1);
expect(assertSelectedElements(h.elements[0]));
expect(h.state.selectedLinearElement?.isEditing).toBe(true);
@ -1219,7 +1218,7 @@ describe("history", () => {
]);
Keyboard.redo();
expect(API.getUndoStack().length).toBe(6);
expect(API.getUndoStack().length).toBe(5);
expect(API.getRedoStack().length).toBe(0);
expect(assertSelectedElements(h.elements[0]));
expect(h.state.selectedLinearElement?.isEditing ?? false).toBe(false);
@ -1579,13 +1578,13 @@ describe("history", () => {
expect(API.getUndoStack().length).toBe(5);
expect(arrow.startBinding).toEqual({
elementId: rect1.id,
focus: expect.toBeNonNaNNumber(),
gap: expect.toBeNonNaNNumber(),
fixedPoint: expect.arrayContaining([1, 0.5001]),
mode: "orbit",
});
expect(arrow.endBinding).toEqual({
elementId: rect2.id,
focus: expect.toBeNonNaNNumber(),
gap: expect.toBeNonNaNNumber(),
fixedPoint: expect.arrayContaining([0, 0.5001]),
mode: "orbit",
});
expect(rect1.boundElements).toStrictEqual([
{ id: text.id, type: "text" },
@ -1602,13 +1601,13 @@ describe("history", () => {
expect(API.getRedoStack().length).toBe(1);
expect(arrow.startBinding).toEqual({
elementId: rect1.id,
focus: expect.toBeNonNaNNumber(),
gap: expect.toBeNonNaNNumber(),
fixedPoint: expect.arrayContaining([1, 0.5001]),
mode: "orbit",
});
expect(arrow.endBinding).toEqual({
elementId: rect2.id,
focus: expect.toBeNonNaNNumber(),
gap: expect.toBeNonNaNNumber(),
fixedPoint: expect.arrayContaining([0, 0.5001]),
mode: "orbit",
});
expect(h.elements).toEqual([
expect.objectContaining({
@ -1625,13 +1624,13 @@ describe("history", () => {
expect(API.getRedoStack().length).toBe(0);
expect(arrow.startBinding).toEqual({
elementId: rect1.id,
focus: expect.toBeNonNaNNumber(),
gap: expect.toBeNonNaNNumber(),
fixedPoint: expect.arrayContaining([1, 0.5001]),
mode: "orbit",
});
expect(arrow.endBinding).toEqual({
elementId: rect2.id,
focus: expect.toBeNonNaNNumber(),
gap: expect.toBeNonNaNNumber(),
fixedPoint: expect.arrayContaining([0, 0.5001]),
mode: "orbit",
});
expect(h.elements).toEqual([
expect.objectContaining({
@ -1656,13 +1655,13 @@ describe("history", () => {
expect(API.getRedoStack().length).toBe(0);
expect(arrow.startBinding).toEqual({
elementId: rect1.id,
focus: expect.toBeNonNaNNumber(),
gap: expect.toBeNonNaNNumber(),
fixedPoint: expect.arrayContaining([1, 0.5001]),
mode: "orbit",
});
expect(arrow.endBinding).toEqual({
elementId: rect2.id,
focus: expect.toBeNonNaNNumber(),
gap: expect.toBeNonNaNNumber(),
fixedPoint: expect.arrayContaining([0, 0.5001]),
mode: "orbit",
});
expect(h.elements).toEqual([
expect.objectContaining({
@ -1679,13 +1678,13 @@ describe("history", () => {
expect(API.getRedoStack().length).toBe(1);
expect(arrow.startBinding).toEqual({
elementId: rect1.id,
focus: expect.toBeNonNaNNumber(),
gap: expect.toBeNonNaNNumber(),
fixedPoint: expect.arrayContaining([1, 0.5001]),
mode: "orbit",
});
expect(arrow.endBinding).toEqual({
elementId: rect2.id,
focus: expect.toBeNonNaNNumber(),
gap: expect.toBeNonNaNNumber(),
fixedPoint: expect.arrayContaining([0, 0.5001]),
mode: "orbit",
});
expect(h.elements).toEqual([
expect.objectContaining({
@ -1734,13 +1733,19 @@ describe("history", () => {
id: arrow.id,
startBinding: expect.objectContaining({
elementId: rect1.id,
focus: expect.toBeNonNaNNumber(),
gap: expect.toBeNonNaNNumber(),
fixedPoint: expect.arrayContaining([
expect.toBeNonNaNNumber(),
expect.toBeNonNaNNumber(),
]),
mode: "orbit",
}),
endBinding: expect.objectContaining({
elementId: rect2.id,
focus: expect.toBeNonNaNNumber(),
gap: expect.toBeNonNaNNumber(),
fixedPoint: expect.arrayContaining([
expect.toBeNonNaNNumber(),
expect.toBeNonNaNNumber(),
]),
mode: "orbit",
}),
isDeleted: true,
}),
@ -1779,13 +1784,19 @@ describe("history", () => {
id: arrow.id,
startBinding: expect.objectContaining({
elementId: rect1.id,
focus: expect.toBeNonNaNNumber(),
gap: expect.toBeNonNaNNumber(),
fixedPoint: expect.arrayContaining([
expect.toBeNonNaNNumber(),
expect.toBeNonNaNNumber(),
]),
mode: "orbit",
}),
endBinding: expect.objectContaining({
elementId: rect2.id,
focus: expect.toBeNonNaNNumber(),
gap: expect.toBeNonNaNNumber(),
fixedPoint: expect.arrayContaining([
expect.toBeNonNaNNumber(),
expect.toBeNonNaNNumber(),
]),
mode: "orbit",
}),
isDeleted: false,
}),
@ -1823,8 +1834,11 @@ describe("history", () => {
startBinding: null,
endBinding: expect.objectContaining({
elementId: rect2.id,
focus: expect.toBeNonNaNNumber(),
gap: expect.toBeNonNaNNumber(),
fixedPoint: expect.arrayContaining([
expect.toBeNonNaNNumber(),
expect.toBeNonNaNNumber(),
]),
mode: "orbit",
}),
isDeleted: false,
}),
@ -1858,13 +1872,19 @@ describe("history", () => {
id: arrow.id,
startBinding: expect.objectContaining({
elementId: rect1.id,
focus: expect.toBeNonNaNNumber(),
gap: expect.toBeNonNaNNumber(),
fixedPoint: expect.arrayContaining([
expect.toBeNonNaNNumber(),
expect.toBeNonNaNNumber(),
]),
mode: "orbit",
}),
endBinding: expect.objectContaining({
elementId: rect2.id,
focus: expect.toBeNonNaNNumber(),
gap: expect.toBeNonNaNNumber(),
fixedPoint: expect.arrayContaining([
expect.toBeNonNaNNumber(),
expect.toBeNonNaNNumber(),
]),
mode: "orbit",
}),
isDeleted: false,
}),
@ -1931,13 +1951,19 @@ describe("history", () => {
id: arrow.id,
startBinding: expect.objectContaining({
elementId: rect1.id,
focus: expect.toBeNonNaNNumber(),
gap: expect.toBeNonNaNNumber(),
fixedPoint: expect.arrayContaining([
expect.toBeNonNaNNumber(),
expect.toBeNonNaNNumber(),
]),
mode: "orbit",
}),
endBinding: expect.objectContaining({
elementId: rect2.id,
focus: expect.toBeNonNaNNumber(),
gap: expect.toBeNonNaNNumber(),
fixedPoint: expect.arrayContaining([
expect.toBeNonNaNNumber(),
expect.toBeNonNaNNumber(),
]),
mode: "orbit",
}),
isDeleted: false,
}),
@ -2288,15 +2314,13 @@ describe("history", () => {
],
startBinding: {
elementId: "KPrBI4g_v9qUB1XxYLgSz",
focus: -0.001587301587301948,
gap: 5,
fixedPoint: [1.0318471337579618, 0.49920634920634904],
mode: "orbit",
} as FixedPointBinding,
endBinding: {
elementId: "u2JGnnmoJ0VATV4vCNJE5",
focus: -0.0016129032258049847,
gap: 3.537079145500037,
fixedPoint: [0.4991935483870975, -0.03875193720914723],
mode: "orbit",
} as FixedPointBinding,
},
],
@ -2411,10 +2435,9 @@ describe("history", () => {
captureUpdate: CaptureUpdateAction.NEVER,
});
Keyboard.undo(); // undo `actionFinalize`
Keyboard.undo();
expect(API.getUndoStack().length).toBe(1);
expect(API.getRedoStack().length).toBe(2);
expect(API.getRedoStack().length).toBe(1);
expect(h.elements).toEqual([
expect.objectContaining({
points: [
@ -2428,7 +2451,7 @@ describe("history", () => {
Keyboard.undo();
expect(API.getUndoStack().length).toBe(0);
expect(API.getRedoStack().length).toBe(3);
expect(API.getRedoStack().length).toBe(2);
expect(h.elements).toEqual([
expect.objectContaining({
isDeleted: true,
@ -2441,7 +2464,7 @@ describe("history", () => {
Keyboard.redo();
expect(API.getUndoStack().length).toBe(1);
expect(API.getRedoStack().length).toBe(2);
expect(API.getRedoStack().length).toBe(1);
expect(h.elements).toEqual([
expect.objectContaining({
isDeleted: false,
@ -2454,21 +2477,6 @@ describe("history", () => {
Keyboard.redo();
expect(API.getUndoStack().length).toBe(2);
expect(API.getRedoStack().length).toBe(1);
expect(h.elements).toEqual([
expect.objectContaining({
points: [
[0, 0],
[5, 5],
[10, 10],
[15, 15],
[20, 20],
],
}),
]);
Keyboard.redo(); // redo `actionFinalize`
expect(API.getUndoStack().length).toBe(3);
expect(API.getRedoStack().length).toBe(0);
expect(h.elements).toEqual([
expect.objectContaining({
@ -2968,7 +2976,7 @@ describe("history", () => {
// leave editor
Keyboard.keyPress(KEYS.ESCAPE);
expect(API.getUndoStack().length).toBe(4);
expect(API.getUndoStack().length).toBe(3);
expect(API.getRedoStack().length).toBe(0);
expect(h.state.selectedLinearElement).not.toBeNull();
expect(h.state.selectedLinearElement?.isEditing).toBe(false);
@ -2985,11 +2993,11 @@ describe("history", () => {
Keyboard.undo();
expect(API.getUndoStack().length).toBe(0);
expect(API.getRedoStack().length).toBe(4);
expect(API.getRedoStack().length).toBe(3);
expect(h.state.selectedLinearElement).toBeNull();
Keyboard.redo();
expect(API.getUndoStack().length).toBe(4);
expect(API.getUndoStack().length).toBe(3);
expect(API.getRedoStack().length).toBe(0);
expect(h.state.selectedLinearElement).toBeNull();
expect(h.state.selectedLinearElement?.isEditing ?? false).toBe(false);
@ -4490,16 +4498,30 @@ describe("history", () => {
// create start binding
mouse.downAt(0, 0);
mouse.moveTo(0, 1);
mouse.moveTo(0, 0);
mouse.moveTo(0, 10);
mouse.moveTo(0, 10);
mouse.up();
// create end binding
mouse.downAt(100, 0);
mouse.moveTo(100, 1);
mouse.moveTo(100, 0);
mouse.moveTo(100, 10);
mouse.moveTo(100, 10);
mouse.up();
expect(
(h.elements[2] as ExcalidrawElbowArrowElement).startBinding
?.fixedPoint,
).not.toEqual([1, 0.5001]);
expect(
(h.elements[2] as ExcalidrawElbowArrowElement).startBinding?.mode,
).toBe("orbit");
expect(
(h.elements[2] as ExcalidrawElbowArrowElement).endBinding,
).not.toEqual([1, 0.5001]);
expect(
(h.elements[2] as ExcalidrawElbowArrowElement).endBinding?.mode,
).toBe("orbit");
expect(h.elements).toEqual(
expect.arrayContaining([
expect.objectContaining({
@ -4514,13 +4536,19 @@ describe("history", () => {
id: arrowId,
startBinding: expect.objectContaining({
elementId: rect1.id,
focus: expect.toBeNonNaNNumber(),
gap: expect.toBeNonNaNNumber(),
fixedPoint: expect.arrayContaining([
expect.toBeNonNaNNumber(),
expect.toBeNonNaNNumber(),
]),
mode: "orbit",
}),
endBinding: expect.objectContaining({
elementId: rect2.id,
focus: expect.toBeNonNaNNumber(),
gap: expect.toBeNonNaNNumber(),
fixedPoint: expect.arrayContaining([
expect.toBeNonNaNNumber(),
expect.toBeNonNaNNumber(),
]),
mode: "orbit",
}),
}),
]),
@ -4533,12 +4561,16 @@ describe("history", () => {
expect(h.elements).toEqual([
expect.objectContaining({
id: rect1.id,
boundElements: [],
boundElements: [{ id: arrowId, type: "arrow" }],
}),
expect.objectContaining({ id: rect2.id, boundElements: [] }),
expect.objectContaining({
id: arrowId,
startBinding: null,
startBinding: expect.objectContaining({
elementId: rect1.id,
fixedPoint: [1, 0.5001],
mode: "inside",
}),
endBinding: null,
}),
]);
@ -4583,13 +4615,13 @@ describe("history", () => {
id: arrowId,
startBinding: expect.objectContaining({
elementId: rect1.id,
focus: expect.toBeNonNaNNumber(),
gap: expect.toBeNonNaNNumber(),
fixedPoint: [1, 0.6],
mode: "orbit",
}),
endBinding: expect.objectContaining({
elementId: rect2.id,
focus: expect.toBeNonNaNNumber(),
gap: expect.toBeNonNaNNumber(),
fixedPoint: [0, 0.6],
mode: "orbit",
}),
}),
]),
@ -4602,12 +4634,21 @@ describe("history", () => {
expect(h.elements).toEqual([
expect.objectContaining({
id: rect1.id,
boundElements: [],
boundElements: [
expect.objectContaining({
id: arrowId,
type: "arrow",
}),
],
}),
expect.objectContaining({ id: rect2.id, boundElements: [] }),
expect.objectContaining({
id: arrowId,
startBinding: null,
startBinding: expect.objectContaining({
elementId: rect1.id,
fixedPoint: [1, 0.5001],
mode: "inside",
}),
endBinding: null,
}),
]);
@ -4626,13 +4667,13 @@ describe("history", () => {
// create start binding
mouse.downAt(0, 0);
mouse.moveTo(0, 1);
mouse.upAt(0, 0);
mouse.moveTo(0, 10);
mouse.upAt(0, 10);
// create end binding
mouse.downAt(100, 0);
mouse.moveTo(100, 1);
mouse.upAt(100, 0);
mouse.moveTo(100, 10);
mouse.upAt(100, 10);
expect(h.elements).toEqual(
expect.arrayContaining([
@ -4648,13 +4689,19 @@ describe("history", () => {
id: arrowId,
startBinding: expect.objectContaining({
elementId: rect1.id,
focus: expect.toBeNonNaNNumber(),
gap: expect.toBeNonNaNNumber(),
fixedPoint: expect.arrayContaining([
expect.toBeNonNaNNumber(),
expect.toBeNonNaNNumber(),
]),
mode: "orbit",
}),
endBinding: expect.objectContaining({
elementId: rect2.id,
focus: expect.toBeNonNaNNumber(),
gap: expect.toBeNonNaNNumber(),
fixedPoint: expect.arrayContaining([
expect.toBeNonNaNNumber(),
expect.toBeNonNaNNumber(),
]),
mode: "orbit",
}),
}),
]),
@ -4667,12 +4714,21 @@ describe("history", () => {
expect(h.elements).toEqual([
expect.objectContaining({
id: rect1.id,
boundElements: [],
boundElements: [
expect.objectContaining({
id: arrowId,
type: "arrow",
}),
],
}),
expect.objectContaining({ id: rect2.id, boundElements: [] }),
expect.objectContaining({
id: arrowId,
startBinding: null,
startBinding: expect.objectContaining({
elementId: rect1.id,
fixedPoint: [1, 0.5001],
mode: "inside",
}),
endBinding: null,
}),
]);
@ -4692,9 +4748,8 @@ describe("history", () => {
newElementWith(h.elements[2] as ExcalidrawElbowArrowElement, {
endBinding: {
elementId: remoteContainer.id,
gap: 1,
focus: 0,
fixedPoint: [0.5, 1],
mode: "orbit",
},
}),
remoteContainer,
@ -4721,14 +4776,14 @@ describe("history", () => {
id: arrowId,
startBinding: expect.objectContaining({
elementId: rect1.id,
focus: expect.toBeNonNaNNumber(),
gap: expect.toBeNonNaNNumber(),
fixedPoint: [1, 0.6],
mode: "orbit",
}),
// rebound with previous rectangle
endBinding: expect.objectContaining({
elementId: rect2.id,
focus: expect.toBeNonNaNNumber(),
gap: expect.toBeNonNaNNumber(),
fixedPoint: [0, 0.6],
mode: "orbit",
}),
}),
expect.objectContaining({
@ -4746,7 +4801,12 @@ describe("history", () => {
expect.arrayContaining([
expect.objectContaining({
id: rect1.id,
boundElements: [],
boundElements: [
expect.objectContaining({
id: arrowId,
type: "arrow",
}),
],
}),
expect.objectContaining({
id: rect2.id,
@ -4754,16 +4814,16 @@ describe("history", () => {
}),
expect.objectContaining({
id: arrowId,
startBinding: null,
startBinding: expect.objectContaining({
elementId: rect1.id,
fixedPoint: [1, 0.5001],
mode: "inside",
}),
endBinding: expect.objectContaining({
// now we are back in the previous state!
elementId: remoteContainer.id,
fixedPoint: [
expect.toBeNonNaNNumber(),
expect.toBeNonNaNNumber(),
],
focus: expect.toBeNonNaNNumber(),
gap: expect.toBeNonNaNNumber(),
fixedPoint: [0.5, 1],
mode: "orbit",
}),
}),
expect.objectContaining({
@ -4781,15 +4841,13 @@ describe("history", () => {
type: "arrow",
startBinding: {
elementId: rect1.id,
gap: 1,
focus: 0,
fixedPoint: [1, 0.5],
mode: "orbit",
},
endBinding: {
elementId: rect2.id,
gap: 1,
focus: 0,
fixedPoint: [0.5, 1],
mode: "orbit",
},
});
@ -4843,8 +4901,7 @@ describe("history", () => {
expect.toBeNonNaNNumber(),
expect.toBeNonNaNNumber(),
],
focus: expect.toBeNonNaNNumber(),
gap: expect.toBeNonNaNNumber(),
mode: "orbit",
}),
endBinding: expect.objectContaining({
// now we are back in the previous state!
@ -4853,8 +4910,7 @@ describe("history", () => {
expect.toBeNonNaNNumber(),
expect.toBeNonNaNNumber(),
],
focus: expect.toBeNonNaNNumber(),
gap: expect.toBeNonNaNNumber(),
mode: "orbit",
}),
}),
expect.objectContaining({
@ -4890,15 +4946,13 @@ describe("history", () => {
newElementWith(h.elements[0] as ExcalidrawElbowArrowElement, {
startBinding: {
elementId: rect1.id,
gap: 1,
focus: 0,
fixedPoint: [0.5, 1],
mode: "orbit",
},
endBinding: {
elementId: rect2.id,
gap: 1,
focus: 0,
fixedPoint: [1, 0.5],
mode: "orbit",
},
}),
newElementWith(rect1, {
@ -4925,8 +4979,7 @@ describe("history", () => {
expect.toBeNonNaNNumber(),
expect.toBeNonNaNNumber(),
],
focus: expect.toBeNonNaNNumber(),
gap: expect.toBeNonNaNNumber(),
mode: "orbit",
}),
endBinding: expect.objectContaining({
elementId: rect2.id,
@ -4934,8 +4987,7 @@ describe("history", () => {
expect.toBeNonNaNNumber(),
expect.toBeNonNaNNumber(),
],
focus: expect.toBeNonNaNNumber(),
gap: expect.toBeNonNaNNumber(),
mode: "orbit",
}),
isDeleted: true,
}),
@ -4965,8 +5017,7 @@ describe("history", () => {
expect.toBeNonNaNNumber(),
expect.toBeNonNaNNumber(),
],
focus: expect.toBeNonNaNNumber(),
gap: expect.toBeNonNaNNumber(),
mode: "orbit",
},
endBinding: expect.objectContaining({
elementId: rect2.id,
@ -4974,8 +5025,7 @@ describe("history", () => {
expect.toBeNonNaNNumber(),
expect.toBeNonNaNNumber(),
],
focus: expect.toBeNonNaNNumber(),
gap: expect.toBeNonNaNNumber(),
mode: "orbit",
}),
isDeleted: false,
}),
@ -5018,13 +5068,11 @@ describe("history", () => {
id: arrowId,
startBinding: expect.objectContaining({
elementId: rect1.id,
focus: 0,
gap: 1,
fixedPoint: expect.arrayContaining([1, 0.5001]),
}),
endBinding: expect.objectContaining({
elementId: rect2.id,
focus: -0,
gap: 1,
fixedPoint: expect.arrayContaining([0, 0.5001]),
}),
isDeleted: true,
}),
@ -5066,13 +5114,19 @@ describe("history", () => {
id: arrowId,
startBinding: expect.objectContaining({
elementId: rect1.id,
focus: expect.toBeNonNaNNumber(),
gap: expect.toBeNonNaNNumber(),
fixedPoint: expect.arrayContaining([
expect.toBeNonNaNNumber(),
expect.toBeNonNaNNumber(),
]),
mode: "orbit",
}),
endBinding: expect.objectContaining({
elementId: rect2.id,
focus: expect.toBeNonNaNNumber(),
gap: expect.toBeNonNaNNumber(),
fixedPoint: expect.arrayContaining([
expect.toBeNonNaNNumber(),
expect.toBeNonNaNNumber(),
]),
mode: "orbit",
}),
isDeleted: false,
}),

3
packages/excalidraw/tests/library.test.tsx
View File

@ -105,9 +105,8 @@ describe("library", () => {
type: "arrow",
endBinding: {
elementId: "rectangle1",
focus: -1,
gap: 0,
fixedPoint: [0.5, 1],
mode: "orbit",
},
});

35
packages/excalidraw/tests/move.test.tsx
View File

@ -1,16 +1,12 @@
import React from "react";
import { vi } from "vitest";
import { bindOrUnbindLinearElement } from "@excalidraw/element";
import { KEYS, reseed } from "@excalidraw/common";
import { bindBindingElement } from "@excalidraw/element";
import "@excalidraw/utils/test-utils";
import type {
ExcalidrawLinearElement,
ExcalidrawArrowElement,
NonDeleted,
ExcalidrawRectangleElement,
} from "@excalidraw/element/types";
import { Excalidraw } from "../index";
@ -83,12 +79,21 @@ describe("move element", () => {
const rectA = UI.createElement("rectangle", { size: 100 });
const rectB = UI.createElement("rectangle", { x: 200, y: 0, size: 300 });
const arrow = UI.createElement("arrow", { x: 110, y: 50, size: 80 });
act(() => {
// bind line to two rectangles
bindOrUnbindLinearElement(
arrow.get() as NonDeleted<ExcalidrawLinearElement>,
rectA.get() as ExcalidrawRectangleElement,
rectB.get() as ExcalidrawRectangleElement,
bindBindingElement(
arrow.get() as NonDeleted<ExcalidrawArrowElement>,
rectA.get(),
"orbit",
"start",
h.app.scene,
);
bindBindingElement(
arrow.get() as NonDeleted<ExcalidrawArrowElement>,
rectB.get(),
"orbit",
"end",
h.app.scene,
);
});
@ -97,7 +102,7 @@ describe("move element", () => {
new Pointer("mouse").clickOn(rectB);
expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
`17`,
`15`,
);
expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`13`);
expect(h.state.selectionElement).toBeNull();
@ -105,8 +110,8 @@ describe("move element", () => {
expect(h.state.selectedElementIds[rectB.id]).toBeTruthy();
expect([rectA.x, rectA.y]).toEqual([0, 0]);
expect([rectB.x, rectB.y]).toEqual([200, 0]);
expect([arrow.x, arrow.y]).toEqual([110, 50]);
expect([arrow.width, arrow.height]).toEqual([80, 80]);
expect([[arrow.x, arrow.y]]).toCloselyEqualPoints([[105, 45]], 0);
expect([[arrow.width, arrow.height]]).toCloselyEqualPoints([[90, 90]], 0);
renderInteractiveScene.mockClear();
renderStaticScene.mockClear();
@ -124,8 +129,8 @@ describe("move element", () => {
expect(h.state.selectedElementIds[rectB.id]).toBeTruthy();
expect([rectA.x, rectA.y]).toEqual([0, 0]);
expect([rectB.x, rectB.y]).toEqual([201, 2]);
expect([[arrow.x, arrow.y]]).toCloselyEqualPoints([[110, 50]]);
expect([[arrow.width, arrow.height]]).toCloselyEqualPoints([[81, 81.4]]);
expect([[arrow.x, arrow.y]]).toCloselyEqualPoints([[105, 45]], 0);
expect([[arrow.width, arrow.height]]).toCloselyEqualPoints([[91, 91]], 0);
h.elements.forEach((element) => expect(element).toMatchSnapshot());
});

1
packages/excalidraw/tests/regressionTests.test.tsx
View File

@ -363,7 +363,6 @@ describe("regression tests", () => {
Keyboard.withModifierKeys({ ctrl: true }, () => {
Keyboard.keyPress(KEYS.Z);
Keyboard.keyPress(KEYS.Z);
Keyboard.keyPress(KEYS.Z);
});
expect(h.elements.filter((element) => !element.isDeleted).length).toBe(2);
Keyboard.withModifierKeys({ ctrl: true }, () => {

12
packages/excalidraw/tests/rotate.test.tsx
View File

@ -35,8 +35,8 @@ test("unselected bound arrow updates when rotating its target element", async ()
expect(arrow.endBinding?.elementId).toEqual(rectangle.id);
expect(arrow.x).toBeCloseTo(-80);
expect(arrow.y).toBeCloseTo(50);
expect(arrow.width).toBeCloseTo(110.7, 1);
expect(arrow.height).toBeCloseTo(0);
expect(arrow.width).toBeCloseTo(81.75, 1);
expect(arrow.height).toBeCloseTo(62.3, 1);
});
test("unselected bound arrows update when rotating their target elements", async () => {
@ -72,13 +72,13 @@ test("unselected bound arrows update when rotating their target elements", async
expect(ellipseArrow.x).toEqual(0);
expect(ellipseArrow.y).toEqual(0);
expect(ellipseArrow.points[0]).toEqual([0, 0]);
expect(ellipseArrow.points[1][0]).toBeCloseTo(48.98, 1);
expect(ellipseArrow.points[1][1]).toBeCloseTo(125.79, 1);
expect(ellipseArrow.points[1][0]).toBeCloseTo(16.52, 1);
expect(ellipseArrow.points[1][1]).toBeCloseTo(216.57, 1);
expect(textArrow.endBinding?.elementId).toEqual(text.id);
expect(textArrow.x).toEqual(360);
expect(textArrow.y).toEqual(300);
expect(textArrow.points[0]).toEqual([0, 0]);
expect(textArrow.points[1][0]).toBeCloseTo(-94, 0);
expect(textArrow.points[1][1]).toBeCloseTo(-116.1, 0);
expect(textArrow.points[1][0]).toBeCloseTo(-63, 0);
expect(textArrow.points[1][1]).toBeCloseTo(-146, 0);
});

7
packages/excalidraw/tests/selection.test.tsx
View File

@ -487,7 +487,12 @@ describe("tool locking & selection", () => {
expect(h.state.activeTool.locked).toBe(true);
for (const { value } of Object.values(SHAPES)) {
if (value !== "image" && value !== "selection" && value !== "eraser") {
if (
value !== "image" &&
value !== "selection" &&
value !== "eraser" &&
value !== "arrow"
) {
const element = UI.createElement(value);
expect(h.state.selectedElementIds[element.id]).not.toBe(true);
}

12
packages/excalidraw/types.ts
View File

@ -5,8 +5,6 @@ import type {
MIME_TYPES,
} from "@excalidraw/common";
import type { SuggestedBinding } from "@excalidraw/element";
import type { LinearElementEditor } from "@excalidraw/element";
import type { MaybeTransformHandleType } from "@excalidraw/element";
@ -33,6 +31,7 @@ import type {
ExcalidrawIframeLikeElement,
OrderedExcalidrawElement,
ExcalidrawNonSelectionElement,
BindMode,
} from "@excalidraw/element/types";
import type {
@ -204,6 +203,7 @@ export type StaticCanvasAppState = Readonly<
frameRendering: AppState["frameRendering"];
currentHoveredFontFamily: AppState["currentHoveredFontFamily"];
hoveredElementIds: AppState["hoveredElementIds"];
suggestedBinding: AppState["suggestedBinding"];
// Cropping
croppingElementId: AppState["croppingElementId"];
}
@ -217,8 +217,9 @@ export type InteractiveCanvasAppState = Readonly<
selectedGroupIds: AppState["selectedGroupIds"];
selectedLinearElement: AppState["selectedLinearElement"];
multiElement: AppState["multiElement"];
newElement: AppState["newElement"];
isBindingEnabled: AppState["isBindingEnabled"];
suggestedBindings: AppState["suggestedBindings"];
suggestedBinding: AppState["suggestedBinding"];
isRotating: AppState["isRotating"];
elementsToHighlight: AppState["elementsToHighlight"];
// Collaborators
@ -292,7 +293,7 @@ export interface AppState {
selectionElement: NonDeletedExcalidrawElement | null;
isBindingEnabled: boolean;
startBoundElement: NonDeleted<ExcalidrawBindableElement> | null;
suggestedBindings: SuggestedBinding[];
suggestedBinding: NonDeleted<ExcalidrawBindableElement> | null;
frameToHighlight: NonDeleted<ExcalidrawFrameLikeElement> | null;
frameRendering: {
enabled: boolean;
@ -442,6 +443,7 @@ export interface AppState {
// as elements are unlocked, we remove the groupId from the elements
// and also remove groupId from this map
lockedMultiSelections: { [groupId: string]: true };
bindMode: BindMode;
}
export type SearchMatch = {
@ -458,7 +460,7 @@ export type SearchMatch = {
export type UIAppState = Omit<
AppState,
| "suggestedBindings"
| "suggestedBinding"
| "startBoundElement"
| "cursorButton"
| "scrollX"

175
packages/math/src/curve.ts
View File

@ -21,20 +21,9 @@ export function curve<Point extends GlobalPoint | LocalPoint>(
return [a, b, c, d] as Curve<Point>;
}
function gradient(
f: (t: number, s: number) => number,
t0: number,
s0: number,
delta: number = 1e-6,
): number[] {
return [
(f(t0 + delta, s0) - f(t0 - delta, s0)) / (2 * delta),
(f(t0, s0 + delta) - f(t0, s0 - delta)) / (2 * delta),
];
}
function solve(
f: (t: number, s: number) => [number, number],
function solveWithAnalyticalJacobian<Point extends GlobalPoint | LocalPoint>(
curve: Curve<Point>,
lineSegment: LineSegment<Point>,
t0: number,
s0: number,
tolerance: number = 1e-3,
@ -48,33 +37,75 @@ function solve(
return null;
}
const y0 = f(t0, s0);
const jacobian = [
gradient((t, s) => f(t, s)[0], t0, s0),
gradient((t, s) => f(t, s)[1], t0, s0),
];
const b = [[-y0[0]], [-y0[1]]];
const det =
jacobian[0][0] * jacobian[1][1] - jacobian[0][1] * jacobian[1][0];
// Compute bezier point at parameter t0
const bt = 1 - t0;
const bt2 = bt * bt;
const bt3 = bt2 * bt;
const t0_2 = t0 * t0;
const t0_3 = t0_2 * t0;
if (det === 0) {
const bezierX =
bt3 * curve[0][0] +
3 * bt2 * t0 * curve[1][0] +
3 * bt * t0_2 * curve[2][0] +
t0_3 * curve[3][0];
const bezierY =
bt3 * curve[0][1] +
3 * bt2 * t0 * curve[1][1] +
3 * bt * t0_2 * curve[2][1] +
t0_3 * curve[3][1];
// Compute line point at parameter s0
const lineX =
lineSegment[0][0] + s0 * (lineSegment[1][0] - lineSegment[0][0]);
const lineY =
lineSegment[0][1] + s0 * (lineSegment[1][1] - lineSegment[0][1]);
// Function values
const fx = bezierX - lineX;
const fy = bezierY - lineY;
error = Math.abs(fx) + Math.abs(fy);
if (error < tolerance) {
break;
}
// Analytical derivatives
const dfx_dt =
-3 * bt2 * curve[0][0] +
3 * bt2 * curve[1][0] -
6 * bt * t0 * curve[1][0] -
3 * t0_2 * curve[2][0] +
6 * bt * t0 * curve[2][0] +
3 * t0_2 * curve[3][0];
const dfy_dt =
-3 * bt2 * curve[0][1] +
3 * bt2 * curve[1][1] -
6 * bt * t0 * curve[1][1] -
3 * t0_2 * curve[2][1] +
6 * bt * t0 * curve[2][1] +
3 * t0_2 * curve[3][1];
// Line derivatives
const dfx_ds = -(lineSegment[1][0] - lineSegment[0][0]);
const dfy_ds = -(lineSegment[1][1] - lineSegment[0][1]);
// Jacobian determinant
const det = dfx_dt * dfy_ds - dfx_ds * dfy_dt;
if (Math.abs(det) < 1e-12) {
return null;
}
const iJ = [
[jacobian[1][1] / det, -jacobian[0][1] / det],
[-jacobian[1][0] / det, jacobian[0][0] / det],
];
const h = [
[iJ[0][0] * b[0][0] + iJ[0][1] * b[1][0]],
[iJ[1][0] * b[0][0] + iJ[1][1] * b[1][0]],
];
// Newton step
const invDet = 1 / det;
const dt = invDet * (dfy_ds * -fx - dfx_ds * -fy);
const ds = invDet * (-dfy_dt * -fx + dfx_dt * -fy);
t0 = t0 + h[0][0];
s0 = s0 + h[1][0];
const [tErr, sErr] = f(t0, s0);
error = Math.max(Math.abs(tErr), Math.abs(sErr));
t0 += dt;
s0 += ds;
iter += 1;
}
@ -96,63 +127,49 @@ export const bezierEquation = <Point extends GlobalPoint | LocalPoint>(
t ** 3 * c[3][1],
);
const initial_guesses: [number, number][] = [
[0.5, 0],
[0.2, 0],
[0.8, 0],
];
const calculate = <Point extends GlobalPoint | LocalPoint>(
[t0, s0]: [number, number],
l: LineSegment<Point>,
c: Curve<Point>,
) => {
const solution = solveWithAnalyticalJacobian(c, l, t0, s0, 1e-2, 3);
if (!solution) {
return null;
}
const [t, s] = solution;
if (t < 0 || t > 1 || s < 0 || s > 1) {
return null;
}
return bezierEquation(c, t);
};
/**
* Computes the intersection between a cubic spline and a line segment.
*/
export function curveIntersectLineSegment<
Point extends GlobalPoint | LocalPoint,
>(c: Curve<Point>, l: LineSegment<Point>): Point[] {
const line = (s: number) =>
pointFrom<Point>(
l[0][0] + s * (l[1][0] - l[0][0]),
l[0][1] + s * (l[1][1] - l[0][1]),
);
const initial_guesses: [number, number][] = [
[0.5, 0],
[0.2, 0],
[0.8, 0],
];
const calculate = ([t0, s0]: [number, number]) => {
const solution = solve(
(t: number, s: number) => {
const bezier_point = bezierEquation(c, t);
const line_point = line(s);
return [
bezier_point[0] - line_point[0],
bezier_point[1] - line_point[1],
];
},
t0,
s0,
);
if (!solution) {
return null;
}
const [t, s] = solution;
if (t < 0 || t > 1 || s < 0 || s > 1) {
return null;
}
return bezierEquation(c, t);
};
let solution = calculate(initial_guesses[0]);
let solution = calculate(initial_guesses[0], l, c);
if (solution) {
return [solution];
}
solution = calculate(initial_guesses[1]);
solution = calculate(initial_guesses[1], l, c);
if (solution) {
return [solution];
}
solution = calculate(initial_guesses[2]);
solution = calculate(initial_guesses[2], l, c);
if (solution) {
return [solution];
}

6
packages/math/tests/curve.test.ts
View File

@ -46,9 +46,11 @@ describe("Math curve", () => {
pointFrom(10, 50),
pointFrom(50, 50),
);
const l = lineSegment(pointFrom(0, 112.5), pointFrom(90, 0));
const l = lineSegment(pointFrom(10, -60), pointFrom(10, 60));
expect(curveIntersectLineSegment(c, l)).toCloselyEqualPoints([[50, 50]]);
expect(curveIntersectLineSegment(c, l)).toCloselyEqualPoints([
[9.99, 5.05],
]);
});
it("can be detected where the determinant is overly precise", () => {

6
packages/utils/src/test-utils.ts
View File

@ -6,11 +6,11 @@ expect.extend({
throw new Error("expected and received are not point arrays");
}
const COMPARE = 1 / Math.pow(10, precision || 2);
const COMPARE = 1 / precision === 0 ? 1 : Math.pow(10, precision ?? 2);
const pass = expected.every(
(point, idx) =>
Math.abs(received[idx]?.[0] - point[0]) < COMPARE &&
Math.abs(received[idx]?.[1] - point[1]) < COMPARE,
Math.abs(received[idx][0] - point[0]) < COMPARE &&
Math.abs(received[idx][1] - point[1]) < COMPARE,
);
if (!pass) {

3
packages/utils/tests/__snapshots__/export.test.ts.snap
View File

@ -11,6 +11,7 @@ exports[`exportToSvg > with default arguments 1`] = `
"locked": false,
"type": "selection",
},
"bindMode": "orbit",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@ -100,7 +101,7 @@ exports[`exportToSvg > with default arguments 1`] = `
"open": false,
"panels": 3,
},
"suggestedBindings": [],
"suggestedBinding": null,
"theme": "light",
"toast": null,
"userToFollow": null,