Compare commits

..

1 Commits

Author SHA1 Message Date
dwelle b92f585ce7 fix(test): attempt to fix test flake in collision.test.tsx 2026-03-25 21:03:20 +01:00
49 changed files with 462 additions and 2876 deletions
+1 -1
View File
@@ -1,4 +1,4 @@
FROM node:24-bullseye
FROM node:18-bullseye
# Vite wants to open the browser using `open`, so we
# need to install those utils.
+1 -1
View File
@@ -11,7 +11,7 @@ jobs:
runs-on: ubuntu-latest
timeout-minutes: 3
steps:
- uses: styfle/cancel-workflow-action@ce177499ccf9fd2aded3b0426c97e5434c2e8a73 # 0.6.0
- uses: styfle/cancel-workflow-action@0.6.0
with:
workflow_id: 400555, 400556, 905313, 1451724, 1710116, 3185001, 3438604
access_token: ${{ secrets.GITHUB_TOKEN }}
+1 -1
View File
@@ -40,7 +40,7 @@ jobs:
echo ::set-output name=body::$body
- name: Update description with coverage
uses: kt3k/update-pr-description@1b35a6dcd84d81aa0bc1889610efdcde7f37b0c0 # v1.0.1
uses: kt3k/update-pr-description@v1.0.1
with:
pr_body: ${{ steps.getCommentBody.outputs.body }}
pr_title: "chore: Update translations from Crowdin"
+4 -4
View File
@@ -13,16 +13,16 @@ jobs:
- name: Checkout repository
uses: actions/checkout@v3
- name: Login to DockerHub
uses: docker/login-action@465a07811f14bebb1938fbed4728c6a1ff8901fc # v2
uses: docker/login-action@v2
with:
username: ${{ secrets.DOCKER_USERNAME }}
password: ${{ secrets.DOCKER_PASSWORD }}
- name: Set up QEMU
uses: docker/setup-qemu-action@c7c53464625b32c7a7e944ae62b3e17d2b600130 # v3
uses: docker/setup-qemu-action@v3
- name: Set up Docker Buildx
uses: docker/setup-buildx-action@8d2750c68a42422c14e847fe6c8ac0403b4cbd6f # v3
uses: docker/setup-buildx-action@v3
- name: Build and push
uses: docker/build-push-action@ca052bb54ab0790a636c9b5f226502c73d547a25 # v5
uses: docker/build-push-action@v5
with:
context: .
push: true
+1 -1
View File
@@ -11,6 +11,6 @@ jobs:
semantic:
runs-on: ubuntu-latest
steps:
- uses: amannn/action-semantic-pull-request@e32d7e603df1aa1ba07e981f2a23455dee596825 # v5
- uses: amannn/action-semantic-pull-request@v5
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+1 -1
View File
@@ -20,7 +20,7 @@ jobs:
working-directory: packages/excalidraw
env:
CI: true
- uses: andresz1/size-limit-action@e7493a72a44b113341c0cf6186ab49c17c4b65c1 # v1
- uses: andresz1/size-limit-action@v1
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
build_script: build:esm
+1 -1
View File
@@ -21,6 +21,6 @@ jobs:
run: yarn test:coverage
- name: "Report Coverage"
if: always() # Also generate the report if tests are failing
uses: davelosert/vitest-coverage-report-action@2500dafcee7dd64f85ab689c0b83798a8359770e # v2
uses: davelosert/vitest-coverage-report-action@v2
with:
github-token: ${{ secrets.GITHUB_TOKEN }}
+2 -2
View File
@@ -1,4 +1,4 @@
FROM --platform=${BUILDPLATFORM} node:24 AS build
FROM --platform=${BUILDPLATFORM} node:18 AS build
WORKDIR /opt/node_app
@@ -13,7 +13,7 @@ ARG NODE_ENV=production
RUN npm_config_target_arch=${TARGETARCH} yarn build:app:docker
FROM nginx:1.27-alpine
FROM --platform=${TARGETPLATFORM} nginx:1.27-alpine
COPY --from=build /opt/node_app/excalidraw-app/build /usr/share/nginx/html
+1 -1
View File
@@ -29,7 +29,7 @@
<a href="https://docs.excalidraw.com/docs/introduction/contributing">
<img alt="PRs welcome!" src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat" /></a>
<a href="https://discord.gg/UexuTaE">
<img alt="Chat on Discord" src="https://img.shields.io/discord/723672430744174682?color=738ad6&label=Chat%20on%20Discord&logo=discord&logoColor=ffffff&widget=false"/></a>
<img alt="Chat on Discord" src="https://img.shields.io/discord/723672430744174682?color=738ad6&label=Chat%20on%20Discord&logo=discord&logoColor=ffffff&widge=false"/></a>
<a href="https://deepwiki.com/excalidraw/excalidraw">
<img alt="Ask DeepWiki" src="https://deepwiki.com/badge.svg" /></a>
<a href="https://twitter.com/excalidraw">
+2 -2
View File
@@ -97,8 +97,8 @@ const config = {
href: "https://discord.gg/UexuTaE",
},
{
label: "𝕏",
href: "https://x.com/excalidraw",
label: "Twitter",
href: "https://twitter.com/excalidraw",
},
{
label: "Linkedin",
+4 -6
View File
@@ -1943,9 +1943,9 @@ export const calculateFixedPointForElbowArrowBinding = (
return {
fixedPoint: normalizeFixedPoint([
(nonRotatedSnappedGlobalPoint[0] - hoveredElement.x) /
Math.max(hoveredElement.width, PRECISION),
hoveredElement.width,
(nonRotatedSnappedGlobalPoint[1] - hoveredElement.y) /
Math.max(hoveredElement.height, PRECISION),
hoveredElement.height,
]),
};
};
@@ -1976,11 +1976,9 @@ export const calculateFixedPointForNonElbowArrowBinding = (
// Calculate the ratio relative to the element's bounds
const fixedPointX =
(nonRotatedPoint[0] - hoveredElement.x) /
Math.max(hoveredElement.width, PRECISION);
(nonRotatedPoint[0] - hoveredElement.x) / hoveredElement.width;
const fixedPointY =
(nonRotatedPoint[1] - hoveredElement.y) /
Math.max(hoveredElement.height, PRECISION);
(nonRotatedPoint[1] - hoveredElement.y) / hoveredElement.height;
return {
fixedPoint: normalizeFixedPoint([fixedPointX, fixedPointY]),
+4 -24
View File
@@ -680,9 +680,8 @@ export const getMinMaxXYFromCurvePathOps = (
return [minX, minY, maxX, maxY];
};
export const getBoundsFromPoints = <P extends GlobalPoint | LocalPoint>(
points: readonly P[],
padding: number = 0,
export const getBoundsFromPoints = (
points: ExcalidrawFreeDrawElement["points"],
): Bounds => {
let minX = Infinity;
let minY = Infinity;
@@ -696,7 +695,7 @@ export const getBoundsFromPoints = <P extends GlobalPoint | LocalPoint>(
maxY = Math.max(maxY, y);
}
return [minX - padding, minY - padding, maxX + padding, maxY + padding];
return [minX, minY, maxX, maxY];
};
const getFreeDrawElementAbsoluteCoords = (
@@ -1262,17 +1261,6 @@ export const pointInsideBounds = <P extends GlobalPoint | LocalPoint>(
): boolean =>
p[0] > bounds[0] && p[0] < bounds[2] && p[1] > bounds[1] && p[1] < bounds[3];
// TODO make pointInsideBounds inclusive and remove this function once we
// test nothing is breaking
export const pointInsideBoundsInclusive = <P extends GlobalPoint | LocalPoint>(
p: P,
bounds: Bounds,
): boolean =>
p[0] >= bounds[0] &&
p[0] <= bounds[2] &&
p[1] >= bounds[1] &&
p[1] <= bounds[3];
export const doBoundsIntersect = (
bounds1: Bounds | null,
bounds2: Bounds | null,
@@ -1287,21 +1275,13 @@ export const doBoundsIntersect = (
return minX1 < maxX2 && maxX1 > minX2 && minY1 < maxY2 && maxY1 > minY2;
};
export const boundsContainBounds = (outerBounds: Bounds, innerBounds: Bounds) =>
[
pointFrom<GlobalPoint>(innerBounds[0], innerBounds[1]),
pointFrom<GlobalPoint>(innerBounds[0], innerBounds[3]),
pointFrom<GlobalPoint>(innerBounds[2], innerBounds[1]),
pointFrom<GlobalPoint>(innerBounds[2], innerBounds[3]),
].every((point) => pointInsideBoundsInclusive(point, outerBounds));
export const elementCenterPoint = (
element: ExcalidrawElement,
elementsMap: ElementsMap,
xOffset: number = 0,
yOffset: number = 0,
) => {
if (isLinearElement(element) || isFreeDrawElement(element)) {
if (isLinearElement(element)) {
const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
const [x, y] = pointFrom<GlobalPoint>((x1 + x2) / 2, (y1 + y2) / 2);
+15 -28
View File
@@ -154,11 +154,14 @@ export const hitElementItself = ({
// Hit test against the extended, rotated bounding box of the element first
const bounds = getElementBounds(element, elementsMap, true);
const hitBounds = isPointInRotatedBounds(
point,
bounds,
element.angle,
threshold,
const hitBounds = isPointWithinBounds(
pointFrom(bounds[0] - threshold, bounds[1] - threshold),
pointRotateRads(
point,
getCenterForBounds(bounds),
-element.angle as Radians,
),
pointFrom(bounds[2] + threshold, bounds[3] + threshold),
);
// PERF: Bail out early if the point is not even in the
@@ -189,32 +192,18 @@ export const hitElementItself = ({
return result;
};
const isPointInRotatedBounds = (
point: GlobalPoint,
bounds: Bounds,
angle: Radians,
tolerance = 0,
) => {
const adjustedPoint =
angle === 0
? point
: pointRotateRads(point, getCenterForBounds(bounds), -angle as Radians);
return isPointWithinBounds(
pointFrom(bounds[0] - tolerance, bounds[1] - tolerance),
adjustedPoint,
pointFrom(bounds[2] + tolerance, bounds[3] + tolerance),
);
};
export const hitElementBoundingBox = (
point: GlobalPoint,
element: ExcalidrawElement,
elementsMap: ElementsMap,
tolerance = 0,
) => {
const bounds = getElementBounds(element, elementsMap, true);
return isPointInRotatedBounds(point, bounds, element.angle, tolerance);
let [x1, y1, x2, y2] = getElementBounds(element, elementsMap);
x1 -= tolerance;
y1 -= tolerance;
x2 += tolerance;
y2 += tolerance;
return isPointWithinBounds(pointFrom(x1, y1), point, pointFrom(x2, y2));
};
export const hitElementBoundingBoxOnly = (
@@ -584,9 +573,7 @@ const intersectLinearOrFreeDrawWithLineSegment = (
continue;
}
const hits = curveIntersectLineSegment(c, segment, {
iterLimit: 10,
});
const hits = curveIntersectLineSegment(c, segment);
if (hits.length > 0) {
intersections.push(...hits);
-3
View File
@@ -250,9 +250,6 @@ export const duplicateElements = (
elementsWithDuplicates.splice(index + 1, 0, ...castArray(elements));
};
// main
// ---------------------------------------------------------------------------
const frameIdsToDuplicate = new Set(
elements
.filter(
+2 -2
View File
@@ -2124,8 +2124,8 @@ const normalizeArrowElementUpdate = (
offsetY < -MAX_POS ||
offsetY > MAX_POS ||
offsetX + points[points.length - 1][0] < -MAX_POS ||
offsetX + points[points.length - 1][0] > MAX_POS ||
offsetY + points[points.length - 1][1] < -MAX_POS ||
offsetY + points[points.length - 1][0] > MAX_POS ||
offsetX + points[points.length - 1][1] < -MAX_POS ||
offsetY + points[points.length - 1][1] > MAX_POS
) {
console.error(
+11 -15
View File
@@ -1,6 +1,7 @@
import { arrayToMap } from "@excalidraw/common";
import { isPointWithinBounds, pointFrom } from "@excalidraw/math";
import { doLineSegmentsIntersect } from "@excalidraw/utils/bbox";
import { elementsOverlappingBBox } from "@excalidraw/utils/withinBounds";
import type {
AppClassProperties,
@@ -17,9 +18,6 @@ import {
getElementLineSegments,
getCommonBounds,
getElementAbsoluteCoords,
doBoundsIntersect,
getElementBounds,
boundsContainBounds,
} from "./bounds";
import { mutateElement } from "./mutateElement";
import { getBoundTextElement, getContainerElement } from "./textElement";
@@ -102,9 +100,8 @@ export const isElementContainingFrame = (
frame: ExcalidrawFrameLikeElement,
elementsMap: ElementsMap,
) => {
return boundsContainBounds(
getElementBounds(element, elementsMap),
getElementBounds(frame, elementsMap),
return getElementsWithinSelection([frame], element, elementsMap).some(
(e) => e.id === frame.id,
);
};
@@ -923,17 +920,16 @@ export const getFrameLikeTitle = (element: ExcalidrawFrameLikeElement) => {
export const getElementsOverlappingFrame = (
elements: readonly ExcalidrawElement[],
frame: ExcalidrawFrameLikeElement,
elementsMap: ElementsMap,
) => {
return elements.filter(
(el) =>
// exclude elements which are overlapping, but are in a different frame,
return (
elementsOverlappingBBox({
elements,
bounds: frame,
type: "overlap",
})
// removes elements who are overlapping, but are in a different frame,
// and thus invisible in target frame
(!el.frameId || el.frameId === frame.id) &&
doBoundsIntersect(
getElementBounds(el, elementsMap),
getElementBounds(frame, elementsMap),
),
.filter((el) => !el.frameId || el.frameId === frame.id)
);
};
+36 -258
View File
@@ -1,32 +1,15 @@
import { arrayToMap, isShallowEqual, type Bounds } from "@excalidraw/common";
import {
lineSegment,
pointFrom,
pointRotateRads,
type GlobalPoint,
} from "@excalidraw/math";
import { arrayToMap, isShallowEqual } from "@excalidraw/common";
import type {
AppState,
BoxSelectionMode,
InteractiveCanvasAppState,
} from "@excalidraw/excalidraw/types";
import {
boundsContainBounds,
doBoundsIntersect,
elementCenterPoint,
getElementAbsoluteCoords,
getElementBounds,
pointInsideBounds,
} from "./bounds";
import { intersectElementWithLineSegment } from "./collision";
import { getElementAbsoluteCoords, getElementBounds } from "./bounds";
import { isElementInViewport } from "./sizeHelpers";
import {
isArrowElement,
isBoundToContainer,
isFrameLikeElement,
isFreeDrawElement,
isLinearElement,
isTextElement,
} from "./typeChecks";
@@ -38,33 +21,15 @@ import {
import { LinearElementEditor } from "./linearElementEditor";
import { selectGroupsForSelectedElements } from "./groups";
import { getBoundTextElement } from "./textElement";
import type {
ElementsMap,
ElementsMapOrArray,
ExcalidrawElement,
ExcalidrawFrameLikeElement,
NonDeleted,
NonDeletedExcalidrawElement,
} from "./types";
const shouldIgnoreElementFromSelection = (
element: NonDeletedExcalidrawElement,
) => element.locked || isBoundToContainer(element);
const excludeElementsFromFrames = <T extends ExcalidrawElement>(
selectedElements: readonly T[],
framesInSelection: Set<ExcalidrawFrameLikeElement["id"]>,
) => {
return selectedElements.filter((element) => {
if (element.frameId && framesInSelection.has(element.frameId)) {
return false;
}
return true;
});
};
/**
* Frames and their containing elements are not to be selected at the same time.
* Given an array of selected elements, if there are frames and their containing elements
@@ -84,242 +49,55 @@ export const excludeElementsInFramesFromSelection = <
}
});
return excludeElementsFromFrames(selectedElements, framesInSelection);
return selectedElements.filter((element) => {
if (element.frameId && framesInSelection.has(element.frameId)) {
return false;
}
return true;
});
};
export const getElementsWithinSelection = (
elements: readonly NonDeletedExcalidrawElement[],
selection: NonDeletedExcalidrawElement,
elementsMap: ElementsMap,
// TODO remove (this flag is effectively unused AFAIK)
excludeElementsInFrames: boolean = true,
boxSelectionMode: BoxSelectionMode = "contain",
): NonDeletedExcalidrawElement[] => {
const [selectionStartX, selectionStartY, selectionEndX, selectionEndY] =
) => {
const [selectionX1, selectionY1, selectionX2, selectionY2] =
getElementAbsoluteCoords(selection, elementsMap);
const selectionX1 = Math.min(selectionStartX, selectionEndX);
const selectionY1 = Math.min(selectionStartY, selectionEndY);
const selectionX2 = Math.max(selectionStartX, selectionEndX);
const selectionY2 = Math.max(selectionStartY, selectionEndY);
const selectionBounds = [
selectionX1,
selectionY1,
selectionX2,
selectionY2,
] as Bounds;
const selectionEdges = [
lineSegment<GlobalPoint>(
pointFrom(selectionX1, selectionY1),
pointFrom(selectionX2, selectionY1),
),
lineSegment<GlobalPoint>(
pointFrom(selectionX2, selectionY1),
pointFrom(selectionX2, selectionY2),
),
lineSegment<GlobalPoint>(
pointFrom(selectionX2, selectionY2),
pointFrom(selectionX1, selectionY2),
),
lineSegment<GlobalPoint>(
pointFrom(selectionX1, selectionY2),
pointFrom(selectionX1, selectionY1),
),
];
const framesInSelection = excludeElementsInFrames
? new Set<NonDeletedExcalidrawElement["id"]>()
: null;
let elementsInSelection: NonDeletedExcalidrawElement[] = [];
let elementsInSelection = elements.filter((element) => {
let [elementX1, elementY1, elementX2, elementY2] = getElementBounds(
element,
elementsMap,
);
for (const element of elements) {
if (shouldIgnoreElementFromSelection(element)) {
continue;
}
const strokeWidth = element.strokeWidth;
let labelAABB: Bounds | null = null;
let elementAABB = getElementBounds(element, elementsMap);
elementAABB = [
elementAABB[0] - strokeWidth / 2,
elementAABB[1] - strokeWidth / 2,
elementAABB[2] + strokeWidth / 2,
elementAABB[3] + strokeWidth / 2,
] as Bounds;
// Whether the element bounds should include the bound text element bounds
const boundTextElement =
isArrowElement(element) && getBoundTextElement(element, elementsMap);
if (boundTextElement) {
const { x, y } = LinearElementEditor.getBoundTextElementPosition(
element,
boundTextElement,
const containingFrame = getContainingFrame(element, elementsMap);
if (containingFrame) {
const [fx1, fy1, fx2, fy2] = getElementBounds(
containingFrame,
elementsMap,
);
labelAABB = [
x,
y,
x + boundTextElement.width,
y + boundTextElement.height,
] as Bounds;
elementX1 = Math.max(fx1, elementX1);
elementY1 = Math.max(fy1, elementY1);
elementX2 = Math.min(fx2, elementX2);
elementY2 = Math.min(fy2, elementY2);
}
// Clip element bounds by its containing frame (if any), since only the
// visible (frame-clipped) portion of the element is relevant for selection.
const associatedFrame = getContainingFrame(element, elementsMap);
if (
associatedFrame &&
elementOverlapsWithFrame(element, associatedFrame, elementsMap)
) {
const frameAABB = getElementBounds(associatedFrame, elementsMap);
elementAABB = [
Math.max(elementAABB[0], frameAABB[0]),
Math.max(elementAABB[1], frameAABB[1]),
Math.min(elementAABB[2], frameAABB[2]),
Math.min(elementAABB[3], frameAABB[3]),
] as Bounds;
return (
element.locked === false &&
element.type !== "selection" &&
!isBoundToContainer(element) &&
selectionX1 <= elementX1 &&
selectionY1 <= elementY1 &&
selectionX2 >= elementX2 &&
selectionY2 >= elementY2
);
});
labelAABB = labelAABB
? ([
Math.max(labelAABB[0], frameAABB[0]),
Math.max(labelAABB[1], frameAABB[1]),
Math.min(labelAABB[2], frameAABB[2]),
Math.min(labelAABB[3], frameAABB[3]),
] as Bounds)
: null;
}
const commonAABB = labelAABB
? ([
Math.min(labelAABB[0], elementAABB[0]),
Math.min(labelAABB[1], elementAABB[1]),
Math.max(labelAABB[2], elementAABB[2]),
Math.max(labelAABB[3], elementAABB[3]),
] as Bounds)
: elementAABB;
// ============== Evaluation ==============
// 1. If the selection box WRAPs the element's AABB, then add it to the
// selection and move on, regardless of the selection mode.
//
// PERF: This trick only works with axis-aligned box selection and the
// current convex element shapes!
if (boundsContainBounds(selectionBounds, commonAABB)) {
if (framesInSelection && isFrameLikeElement(element)) {
framesInSelection.add(element.id);
}
elementsInSelection.push(element);
continue;
}
// 2. Handle the case where the label is overlapped by the selection box
if (
boxSelectionMode === "overlap" &&
labelAABB &&
doBoundsIntersect(selectionBounds, labelAABB)
) {
elementsInSelection.push(element);
continue;
}
// 3. Handle the case where the selection is not wrapping the element, but
// it does intersect the element's outline (non-AABB).
if (
boxSelectionMode === "overlap" &&
doBoundsIntersect(selectionBounds, elementAABB)
) {
let hasIntersection = false;
// Preliminary check potential intersection imprecision
if (isLinearElement(element) || isFreeDrawElement(element)) {
const center = elementCenterPoint(element, elementsMap);
hasIntersection = element.points.some((point) => {
const rotatedPoint = pointRotateRads(
pointFrom<GlobalPoint>(element.x + point[0], element.y + point[1]),
center,
element.angle,
);
return pointInsideBounds(rotatedPoint, selectionBounds);
});
} else {
const nonRotatedElementBounds = getElementBounds(
element,
elementsMap,
true,
);
const center = elementCenterPoint(element, elementsMap);
hasIntersection = [
pointRotateRads(
pointFrom<GlobalPoint>(
(nonRotatedElementBounds[0] + nonRotatedElementBounds[2]) / 2,
nonRotatedElementBounds[1],
),
center,
element.angle,
),
pointRotateRads(
pointFrom<GlobalPoint>(
nonRotatedElementBounds[2],
(nonRotatedElementBounds[1] + nonRotatedElementBounds[3]) / 2,
),
center,
element.angle,
),
pointRotateRads(
pointFrom<GlobalPoint>(
(nonRotatedElementBounds[0] + nonRotatedElementBounds[2]) / 2,
nonRotatedElementBounds[3],
),
center,
element.angle,
),
pointRotateRads(
pointFrom<GlobalPoint>(
nonRotatedElementBounds[0],
(nonRotatedElementBounds[1] + nonRotatedElementBounds[3]) / 2,
),
center,
element.angle,
),
].some((point) => {
return pointInsideBounds(
pointRotateRads(point, center, element.angle),
selectionBounds,
);
});
}
if (!hasIntersection) {
hasIntersection = selectionEdges.some(
(selectionEdge) =>
intersectElementWithLineSegment(
element,
elementsMap,
selectionEdge,
strokeWidth / 2,
true, // Stop at first hit for better performance
).length > 0,
);
}
if (hasIntersection) {
if (framesInSelection && isFrameLikeElement(element)) {
framesInSelection.add(element.id);
}
elementsInSelection.push(element);
continue;
}
}
// 4. We don't need to handle when the selection is inside the element
// as it is separately handled in App.
}
elementsInSelection = framesInSelection
? excludeElementsFromFrames(elementsInSelection, framesInSelection)
elementsInSelection = excludeElementsInFrames
? excludeElementsInFramesFromSelection(elementsInSelection)
: elementsInSelection;
elementsInSelection = elementsInSelection.filter((element) => {
+64 -62
View File
@@ -1,56 +1,59 @@
import { arrayToMap } from "@excalidraw/common";
import { arrayToMapWithIndex } from "@excalidraw/common";
import type { ExcalidrawElement } from "./types";
const defragmentGroups = (elements: readonly ExcalidrawElement[]) => {
const groupIdAtLevel = (element: ExcalidrawElement, level: number) => {
return element.groupIds[element.groupIds.length - level - 1];
};
const normalizeGroupElementOrder = (elements: readonly ExcalidrawElement[]) => {
const origElements: ExcalidrawElement[] = elements.slice();
const sortedElements = new Set<ExcalidrawElement>();
const orderLevel = (
levelElements: readonly ExcalidrawElement[],
level: number,
const orderInnerGroups = (
elements: readonly ExcalidrawElement[],
): ExcalidrawElement[] => {
const buckets = new Map<string, ExcalidrawElement[]>();
// Slots preserve first-occurrence order: a groupId reserves its slot
// the first time one of its members is seen; loose elements occupy
// their own slot. Groups are then expanded (and recursed into) in place.
const slots: (ExcalidrawElement | string)[] = [];
for (const element of levelElements) {
const groupId = groupIdAtLevel(element, level);
if (groupId === undefined) {
slots.push(element);
continue;
const firstGroupSig = elements[0]?.groupIds?.join("");
const aGroup: ExcalidrawElement[] = [elements[0]];
const bGroup: ExcalidrawElement[] = [];
for (const element of elements.slice(1)) {
if (element.groupIds?.join("") === firstGroupSig) {
aGroup.push(element);
} else {
bGroup.push(element);
}
let bucket = buckets.get(groupId);
if (!bucket) {
bucket = [];
buckets.set(groupId, bucket);
slots.push(groupId);
}
bucket.push(element);
}
return slots.flatMap((slot) =>
typeof slot === "string"
? orderLevel(buckets.get(slot)!, level + 1)
: [slot],
);
return bGroup.length ? [...aGroup, ...orderInnerGroups(bGroup)] : aGroup;
};
// `groupIds` is stored innermost-first, so the outermost group is the
// last entry. We recurse from level 0 (outermost) inward.
const sortedElements = orderLevel(elements, 0);
const groupHandledElements = new Map<string, true>();
origElements.forEach((element, idx) => {
if (groupHandledElements.has(element.id)) {
return;
}
if (element.groupIds?.length) {
const topGroup = element.groupIds[element.groupIds.length - 1];
const groupElements = origElements.slice(idx).filter((element) => {
const ret = element?.groupIds?.some((id) => id === topGroup);
if (ret) {
groupHandledElements.set(element!.id, true);
}
return ret;
});
for (const elem of orderInnerGroups(groupElements)) {
sortedElements.add(elem);
}
} else {
sortedElements.add(element);
}
});
// if there's a bug which resulted in losing some of the elements, return
// original instead as that's better than losing data
if (sortedElements.length !== elements.length) {
console.error("defragmentGroups: lost some elements... bailing!");
if (sortedElements.size !== elements.length) {
console.error("normalizeGroupElementOrder: lost some elements... bailing!");
return elements;
}
return sortedElements;
return [...sortedElements];
};
/**
@@ -65,40 +68,39 @@ const defragmentGroups = (elements: readonly ExcalidrawElement[]) => {
const normalizeBoundElementsOrder = (
elements: readonly ExcalidrawElement[],
) => {
const elementsMap = arrayToMap(elements);
const elementsMap = arrayToMapWithIndex(elements);
const origElements: (ExcalidrawElement | null)[] = elements.slice();
const sortedElements = new Set<ExcalidrawElement>();
for (const element of elements) {
if (sortedElements.has(element)) {
continue;
origElements.forEach((element, idx) => {
if (!element) {
return;
}
if (element.boundElements?.length) {
sortedElements.add(element);
for (const boundElement of element.boundElements) {
origElements[idx] = null;
element.boundElements.forEach((boundElement) => {
const child = elementsMap.get(boundElement.id);
if (child && boundElement.type === "text") {
sortedElements.add(child);
sortedElements.add(child[0]);
origElements[child[1]] = null;
}
});
} else if (element.type === "text" && element.containerId) {
const parent = elementsMap.get(element.containerId);
if (!parent?.[0].boundElements?.find((x) => x.id === element.id)) {
sortedElements.add(element);
origElements[idx] = null;
// if element has a container and container lists it, skip this element
// as it'll be taken care of by the container
}
continue;
} else {
sortedElements.add(element);
origElements[idx] = null;
}
// if element has a container and container lists it, skip this element
// as it'll be taken care of by the container
if (
element.type === "text" &&
element.containerId &&
elementsMap
.get(element.containerId)
?.boundElements?.some((el) => el.id === element.id)
) {
continue;
}
sortedElements.add(element);
}
});
// if there's a bug which resulted in losing some of the elements, return
// original instead as that's better than losing data
@@ -115,5 +117,5 @@ const normalizeBoundElementsOrder = (
export const normalizeElementOrder = (
elements: readonly ExcalidrawElement[],
) => {
return normalizeBoundElementsOrder(defragmentGroups(elements));
return normalizeBoundElementsOrder(normalizeGroupElementOrder(elements));
};
+9 -12
View File
@@ -1,8 +1,7 @@
import { arrayToMap, reseed } from "@excalidraw/common";
import { arrayToMap, ROUNDNESS } from "@excalidraw/common";
import { type GlobalPoint, type LocalPoint, pointFrom } from "@excalidraw/math";
import { Excalidraw } from "@excalidraw/excalidraw";
import { API } from "@excalidraw/excalidraw/tests/helpers/api";
import { UI } from "@excalidraw/excalidraw/tests/helpers/ui";
import "@excalidraw/utils/test-utils";
import { render } from "@excalidraw/excalidraw/tests/test-utils";
@@ -10,30 +9,29 @@ import * as distance from "../src/distance";
import { hitElementItself } from "../src/collision";
describe("check rotated elements can be hit:", () => {
beforeEach(async () => {
localStorage.clear();
reseed(7);
await render(<Excalidraw handleKeyboardGlobally={true} />);
});
it("arrow", () => {
UI.createElement("arrow", {
const element = API.createElement({
type: "arrow",
x: 0,
y: 0,
width: 124,
height: 302,
angle: 1.8700426423973724,
roundness: { type: ROUNDNESS.PROPORTIONAL_RADIUS },
endArrowhead: "arrow",
points: [
[0, 0],
[120, -198],
[-4, -302],
] as LocalPoint[],
});
const elementsMap = arrayToMap([element]);
const hit = hitElementItself({
point: pointFrom<GlobalPoint>(88, -68),
element: window.h.elements[0],
element,
threshold: 10,
elementsMap: window.h.scene.getNonDeletedElementsMap(),
elementsMap,
});
expect(hit).toBe(true);
});
@@ -57,7 +55,6 @@ describe("hitElementItself cache", () => {
});
localStorage.clear();
reseed(7);
await render(<Excalidraw handleKeyboardGlobally={true} />);
});
+1 -43
View File
@@ -2,7 +2,6 @@ import {
convertToExcalidrawElements,
Excalidraw,
} from "@excalidraw/excalidraw";
import { arrayToMap } from "@excalidraw/common";
import { API } from "@excalidraw/excalidraw/tests/helpers/api";
import { Keyboard, Pointer } from "@excalidraw/excalidraw/tests/helpers/ui";
@@ -11,12 +10,7 @@ import {
render,
} from "@excalidraw/excalidraw/tests/test-utils";
import { elementOverlapsWithFrame } from "../src/frame";
import type {
ExcalidrawElement,
ExcalidrawFrameLikeElement,
} from "../src/types";
import type { ExcalidrawElement } from "../src/types";
const { h } = window;
const mouse = new Pointer("mouse");
@@ -131,26 +125,6 @@ describe("adding elements to frames", () => {
});
});
it("should treat an element fully containing a frame as overlapping the frame", () => {
const containingRect = API.createElement({
type: "rectangle",
x: -50,
y: -50,
width: 250,
height: 250,
});
API.setElements([containingRect, frame]);
expect(
elementOverlapsWithFrame(
containingRect,
frame as ExcalidrawFrameLikeElement,
arrayToMap(h.elements),
),
).toBe(true);
});
const commonTestCases = async (
func: typeof resizeFrameOverElement | typeof dragElementIntoFrame,
) => {
@@ -441,22 +415,6 @@ describe("adding elements to frames", () => {
describe("dragging elements into the frame", async () => {
await commonTestCases(dragElementIntoFrame);
it("should add a dragged element fully containing the frame", () => {
const containingRect = API.createElement({
type: "rectangle",
x: 220,
y: 20,
width: 300,
height: 300,
});
API.setElements([frame, containingRect]);
dragElementIntoFrame(frame, containingRect);
expect(API.getElement(containingRect).frameId).toBe(frame.id);
});
it.skip("should drag element inside, duplicate it and keep it in frame", () => {
API.setElements([frame, rect2]);
+3 -43
View File
@@ -326,59 +326,19 @@ describe("normalizeElementsOrder", () => {
]),
[
"BA_rect1",
"CBA_rect3",
"CBA_rect7",
"BA_rect5",
"BA_rect6",
"A_rect2",
"A_rect5",
"CBA_rect3",
"CBA_rect7",
"rect4",
"X_rect8",
"YX_rect10",
"X_rect11",
"YX_rect10",
"rect9",
],
);
assertOrder(
normalizeElementOrder([
API.createElement({
id: "A_rect1",
type: "rectangle",
groupIds: ["A"],
}),
API.createElement({
id: "CBA_rect2",
type: "rectangle",
groupIds: ["C", "B", "A"],
}),
API.createElement({
id: "A_rect3",
type: "rectangle",
groupIds: ["A"],
}),
]),
["A_rect1", "CBA_rect2", "A_rect3"],
);
assertOrder(
normalizeElementOrder([
API.createElement({
id: "abcT_rect1",
type: "rectangle",
groupIds: ["ab", "c", "T"],
}),
API.createElement({
id: "abcT_rect2",
type: "rectangle",
groupIds: ["a", "bc", "T"],
}),
API.createElement({
id: "abcT_rect3",
type: "rectangle",
groupIds: ["ab", "c", "T"],
}),
]),
["abcT_rect1", "abcT_rect3", "abcT_rect2"],
);
});
// TODO
@@ -329,6 +329,7 @@ export const actionFinalize = register<FormData>({
selectionElement: null,
multiElement: null,
editingTextElement: null,
startBoundElement: null,
suggestedBinding: null,
selectedElementIds:
element &&
+2 -2
View File
@@ -99,6 +99,7 @@ export const getDefaultAppState = (): Omit<
open: false,
panels: STATS_PANELS.generalStats | STATS_PANELS.elementProperties,
},
startBoundElement: null,
suggestedBinding: null,
frameRendering: { enabled: true, clip: true, name: true, outline: true },
frameToHighlight: null,
@@ -127,7 +128,6 @@ export const getDefaultAppState = (): Omit<
lockedMultiSelections: {},
activeLockedId: null,
bindMode: "orbit",
boxSelectionMode: "contain",
};
};
@@ -193,7 +193,6 @@ const APP_STATE_STORAGE_CONF = (<
gridModeEnabled: { browser: true, export: true, server: true },
height: { browser: false, export: false, server: false },
isBindingEnabled: { browser: true, export: false, server: false },
boxSelectionMode: { browser: true, export: false, server: false },
bindingPreference: { browser: true, export: false, server: false },
isMidpointSnappingEnabled: { browser: true, export: false, server: false },
defaultSidebarDockedPreference: {
@@ -230,6 +229,7 @@ const APP_STATE_STORAGE_CONF = (<
selectionElement: { browser: false, export: false, server: false },
shouldCacheIgnoreZoom: { browser: true, export: false, server: false },
stats: { browser: true, export: false, server: false },
startBoundElement: { 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 },
+54 -88
View File
@@ -27,7 +27,6 @@ import {
KEYS,
APP_NAME,
CURSOR_TYPE,
DEFAULT_TRANSFORM_HANDLE_SPACING,
DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT,
DEFAULT_VERTICAL_ALIGN,
DRAGGING_THRESHOLD,
@@ -603,8 +602,6 @@ const YOUTUBE_VIDEO_STATES = new Map<
ValueOf<typeof YOUTUBE_STATES>
>();
const MAX_EMBEDDABLE_VIEWPORT_SCALE = 4;
let IS_PLAIN_PASTE = false;
let IS_PLAIN_PASTE_TIMER = 0;
let PLAIN_PASTE_TOAST_SHOWN = false;
@@ -1737,18 +1734,6 @@ class App extends React.Component<AppProps, AppState> {
this.state.activeEmbeddable?.element === el &&
this.state.activeEmbeddable?.state === "hover";
// scale video embeds based on zoom (capped) so that smaller embeds
// on canvas when zoomed are still of legible quality
// (note: for some embed types like gdrive, the quality is poor when
// scaling mid playback and works only when you initially start the
// playback at the higher zoom level)
const shouldScaleEmbeddableViewport = src?.type === "video";
const embeddableViewportScale = clamp(
shouldScaleEmbeddableViewport ? scale : 1,
0.75,
MAX_EMBEDDABLE_VIEWPORT_SCALE,
);
return (
<div
key={el.id}
@@ -1815,42 +1800,31 @@ class App extends React.Component<AppProps, AppState> {
padding: `${el.strokeWidth}px`,
}}
>
<div
className="excalidraw__embeddable__content"
style={{
width: `${embeddableViewportScale * 100}%`,
height: `${embeddableViewportScale * 100}%`,
transform: `scale(${1 / embeddableViewportScale})`,
}}
>
{(isEmbeddableElement(el)
? this.props.renderEmbeddable?.(el, this.state)
: null) ?? (
<iframe
ref={(ref) => this.cacheEmbeddableRef(el, ref)}
className="excalidraw__embeddable"
srcDoc={
src?.type === "document"
? src.srcdoc(this.state.theme)
: undefined
}
src={
src?.type !== "document" ? src?.link ?? "" : undefined
}
// https://stackoverflow.com/q/18470015
scrolling="no"
referrerPolicy="no-referrer-when-downgrade"
title="Excalidraw Embedded Content"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen={true}
sandbox={`${
src?.sandbox?.allowSameOrigin
? "allow-same-origin"
: ""
} allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox allow-presentation allow-downloads`}
/>
)}
</div>
{(isEmbeddableElement(el)
? this.props.renderEmbeddable?.(el, this.state)
: null) ?? (
<iframe
ref={(ref) => this.cacheEmbeddableRef(el, ref)}
className="excalidraw__embeddable"
srcDoc={
src?.type === "document"
? src.srcdoc(this.state.theme)
: undefined
}
src={
src?.type !== "document" ? src?.link ?? "" : undefined
}
// https://stackoverflow.com/q/18470015
scrolling="no"
referrerPolicy="no-referrer-when-downgrade"
title="Excalidraw Embedded Content"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen={true}
sandbox={`${
src?.sandbox?.allowSameOrigin ? "allow-same-origin" : ""
} allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox allow-presentation allow-downloads`}
/>
)}
</div>
</div>
</div>
@@ -2550,7 +2524,6 @@ class App extends React.Component<AppProps, AppState> {
const magicFrameChildren = getElementsOverlappingFrame(
this.scene.getNonDeletedElements(),
magicFrame,
this.scene.getNonDeletedElementsMap(),
).filter((el) => !isMagicFrameElement(el));
if (!magicFrameChildren.length) {
@@ -6947,7 +6920,7 @@ class App extends React.Component<AppProps, AppState> {
y: scenePointerY,
},
});
this.setState({ suggestedBinding: null });
this.setState({ suggestedBinding: null, startBoundElement: null });
if (!this.state.activeTool.locked) {
resetCursor(this.interactiveCanvas);
this.setState((prevState) => ({
@@ -7266,14 +7239,6 @@ class App extends React.Component<AppProps, AppState> {
this.interactiveCanvas,
isTextElement(hitElement) ? CURSOR_TYPE.TEXT : CURSOR_TYPE.CROSSHAIR,
);
} else if (
!event[KEYS.CTRL_OR_CMD] &&
this.isHittingCommonBoundingBoxOfSelectedElements(
scenePointer,
selectedElements,
)
) {
setCursor(this.interactiveCanvas, CURSOR_TYPE.MOVE);
} else if (this.state.viewModeEnabled) {
setCursor(this.interactiveCanvas, CURSOR_TYPE.GRAB);
} else if (this.state.openDialog?.name === "elementLinkSelector") {
@@ -7591,6 +7556,7 @@ class App extends React.Component<AppProps, AppState> {
appState: {
newElement: null,
editingTextElement: null,
startBoundElement: null,
suggestedBinding: null,
selectedElementIds: makeNextSelectedElementIds(
Object.keys(this.state.selectedElementIds)
@@ -7764,24 +7730,17 @@ class App extends React.Component<AppProps, AppState> {
const hitSelectedElement =
pointerDownState.hit.element &&
this.isASelectedElement(pointerDownState.hit.element);
const shouldForceLassoReselect =
event.altKey &&
event[KEYS.CTRL_OR_CMD] &&
!pointerDownState.resize.handleType;
const shouldStartLassoSelection =
shouldForceLassoReselect ||
(!pointerDownState.hit.hasHitCommonBoundingBoxOfSelectedElements &&
!pointerDownState.resize.handleType &&
!hitSelectedElement);
if (shouldStartLassoSelection) {
if (!this.lassoTrail.hasCurrentTrail) {
this.lassoTrail.startPath(
pointerDownState.origin.x,
pointerDownState.origin.y,
event.shiftKey,
);
}
if (
!pointerDownState.hit.hasHitCommonBoundingBoxOfSelectedElements &&
!pointerDownState.resize.handleType &&
!hitSelectedElement
) {
this.lassoTrail.startPath(
pointerDownState.origin.x,
pointerDownState.origin.y,
event.shiftKey,
);
// block dragging after lasso selection on PCs until the next pointer down
// (on mobile or tablet, we want to allow user to drag immediately)
@@ -8770,14 +8729,12 @@ class App extends React.Component<AppProps, AppState> {
DEFAULT_COLLISION_THRESHOLD / this.state.zoom.value,
1,
);
const boundsPadding =
(DEFAULT_TRANSFORM_HANDLE_SPACING * 2) / this.state.zoom.value;
const [x1, y1, x2, y2] = getCommonBounds(selectedElements);
return (
point.x > x1 - boundsPadding - threshold &&
point.x < x2 + boundsPadding + threshold &&
point.y > y1 - boundsPadding - threshold &&
point.y < y2 + boundsPadding + threshold
point.x > x1 - threshold &&
point.x < x2 + threshold &&
point.y > y1 - threshold &&
point.y < y2 + threshold
);
}
@@ -8878,8 +8835,18 @@ class App extends React.Component<AppProps, AppState> {
};
});
const boundElement = getHoveredElementForBinding(
pointFrom<GlobalPoint>(
pointerDownState.origin.x,
pointerDownState.origin.y,
),
this.scene.getNonDeletedElements(),
this.scene.getNonDeletedElementsMap(),
);
this.setState({
newElement: element,
startBoundElement: boundElement,
suggestedBinding: null,
});
};
@@ -10300,7 +10267,6 @@ class App extends React.Component<AppProps, AppState> {
this.state.selectionElement,
this.scene.getNonDeletedElementsMap(),
false,
this.state.boxSelectionMode,
)
: [];
@@ -10732,7 +10698,7 @@ class App extends React.Component<AppProps, AppState> {
sceneCoords,
});
}
this.setState({ suggestedBinding: null });
this.setState({ suggestedBinding: null, startBoundElement: null });
if (!activeTool.locked) {
resetCursor(this.interactiveCanvas);
this.setState((prevState) => ({
@@ -10753,9 +10719,9 @@ class App extends React.Component<AppProps, AppState> {
),
}));
} else {
this.setState({
this.setState((prevState) => ({
newElement: null,
});
}));
}
// so that the scene gets rendered again to display the newly drawn linear as well
this.scene.triggerUpdate();
+2 -1
View File
@@ -650,7 +650,8 @@ const LayerUI = ({
};
const stripIrrelevantAppStateProps = (appState: AppState): UIAppState => {
const { cursorButton, scrollX, scrollY, ...ret } = appState;
const { startBoundElement, cursorButton, scrollX, scrollY, ...ret } =
appState;
return ret;
};
@@ -26,16 +26,13 @@
background: var(--RadioGroup-background);
border: 1px solid var(--RadioGroup-border);
gap: 2px;
&__choice {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-width: 20px;
width: 32px;
height: 24px;
padding: 0 0.375rem;
color: var(--RadioGroup-choice-color-off);
background: var(--RadioGroup-choice-background-off);
@@ -750,7 +750,7 @@ describe("frame resizing behavior", () => {
x: 0,
y: 0,
width: 100,
height: 103,
height: 100,
});
// Create a rectangle outside the frame
@@ -2,7 +2,7 @@
.excalidraw {
.dropdown-menu {
max-width: 20rem;
max-width: 16rem;
z-index: 1;
&--placement-top {
@@ -1,5 +1,4 @@
import { useEditorInterface } from "../App";
import { Ellipsify } from "../Ellipsify";
import { RadioGroup } from "../RadioGroup";
type Props<T> = {
@@ -13,7 +12,6 @@ type Props<T> = {
onChange: (value: T) => void;
children: React.ReactNode;
name: string;
icon?: React.ReactNode;
};
const DropdownMenuItemContentRadio = <T,>({
@@ -23,17 +21,13 @@ const DropdownMenuItemContentRadio = <T,>({
choices,
children,
name,
icon,
}: Props<T>) => {
const editorInterface = useEditorInterface();
return (
<>
<div className="dropdown-menu-item-base dropdown-menu-item-bare">
{icon && <div className="dropdown-menu-item__icon">{icon}</div>}
<label className="dropdown-menu-item__text">
<Ellipsify>{children}</Ellipsify>
</label>
<label className="dropdown-menu-item__text">{children}</label>
<RadioGroup
name={name}
value={value}
@@ -39,13 +39,7 @@ import DropdownMenuItemCheckbox from "../dropdownMenu/DropdownMenuItemCheckbox";
import DropdownMenuItemContentRadio from "../dropdownMenu/DropdownMenuItemContentRadio";
import DropdownMenuItemLink from "../dropdownMenu/DropdownMenuItemLink";
import DropdownMenuSub from "../dropdownMenu/DropdownMenuSub";
import {
GithubIcon,
DiscordIcon,
XBrandIcon,
settingsIcon,
emptyIcon,
} from "../icons";
import { GithubIcon, DiscordIcon, XBrandIcon, settingsIcon } from "../icons";
import {
boltIcon,
DeviceDesktopIcon,
@@ -433,39 +427,6 @@ const PreferencesToggleToolLockItem = () => {
);
};
const PreferencesBoxSelectionModeItem = () => {
const { t } = useI18n();
const appState = useUIAppState();
const setAppState = useExcalidrawSetAppState();
return (
<DropdownMenuItemContentRadio<"contain" | "overlap">
name="boxSelectionMode"
icon={emptyIcon}
value={appState.boxSelectionMode}
onChange={(value) => {
setAppState({
boxSelectionMode: value,
});
}}
choices={[
{
value: "contain",
label: t("labels.boxSelectionContain"),
ariaLabel: t("labels.boxSelectionContain"),
},
{
value: "overlap",
label: t("labels.boxSelectionOverlap"),
ariaLabel: t("labels.boxSelectionOverlap"),
},
]}
>
{t("labels.boxSelectionMode")}
</DropdownMenuItemContentRadio>
);
};
const PreferencesToggleSnapModeItem = () => {
const { t } = useI18n();
const actionManager = useExcalidrawActionManager();
@@ -607,7 +568,6 @@ export const Preferences = ({
<DropdownMenuSub.Content className="excalidraw-main-menu-preferences-submenu">
{children || (
<>
<PreferencesBoxSelectionModeItem />
<PreferencesToggleToolLockItem />
<PreferencesToggleSnapModeItem />
<PreferencesToggleGridModeItem />
@@ -625,7 +585,6 @@ export const Preferences = ({
};
Preferences.ToggleToolLock = PreferencesToggleToolLockItem;
Preferences.BoxSelectionMode = PreferencesBoxSelectionModeItem;
Preferences.ToggleSnapMode = PreferencesToggleSnapModeItem;
Preferences.ToggleArrowBinding = PreferencesToggleArrowBindingItem;
Preferences.ToggleMidpointSnapping = PreferencesToggleMidpointSnappingItem;
-8
View File
@@ -814,14 +814,6 @@ body.excalidraw-cursor-resize * {
.excalidraw__embeddable__outer {
width: 100%;
height: 100%;
}
.excalidraw__embeddable__content {
width: 100%;
height: 100%;
transform-origin: top left;
&,
& > * {
border-radius: var(--embeddable-radius);
}
+1 -7
View File
@@ -6,7 +6,6 @@ import {
MIME_TYPES,
cloneJSON,
SVG_DOCUMENT_PREAMBLE,
arrayToMap,
} from "@excalidraw/common";
import { getNonDeletedElements } from "@excalidraw/element";
@@ -50,7 +49,6 @@ export const prepareElementsForExport = (
exportSelectionOnly: boolean,
) => {
elements = getNonDeletedElements(elements);
const elementsMap = arrayToMap(elements);
const isExportingSelection =
exportSelectionOnly &&
@@ -73,11 +71,7 @@ export const prepareElementsForExport = (
isFrameLikeElement(exportedElements[0])
) {
exportingFrame = exportedElements[0];
exportedElements = getElementsOverlappingFrame(
elements,
exportingFrame,
elementsMap,
);
exportedElements = getElementsOverlappingFrame(elements, exportingFrame);
} else if (exportedElements.length > 1) {
exportedElements = getSelectedElements(
elements,
+6 -47
View File
@@ -96,8 +96,6 @@ type RestoredAppState = Omit<
"offsetTop" | "offsetLeft" | "width" | "height"
>;
const MAX_ARROW_PX = 75_000;
export const AllowedExcalidrawActiveTools: Record<
AppState["activeTool"]["type"],
boolean
@@ -469,8 +467,8 @@ export const restoreElement = (
element.endArrowhead === undefined
? "arrow"
: normalizeArrowhead(element.endArrowhead);
const x = element.x as number | undefined;
const y = element.y as number | undefined;
const x: number | undefined = element.x;
const y: number | undefined = element.y;
const points: readonly LocalPoint[] | undefined = // migrate old arrow model to new one
!Array.isArray(element.points) || element.points.length < 2
? [pointFrom(0, 0), pointFrom(element.width, element.height)]
@@ -495,8 +493,8 @@ export const restoreElement = (
startArrowhead,
endArrowhead,
points,
x: x ?? 0,
y: y ?? 0,
x,
y,
elbowed: (element as ExcalidrawArrowElement).elbowed,
...getSizeFromPoints(points),
};
@@ -515,44 +513,12 @@ export const restoreElement = (
})
: restoreElementWithProperties(element as ExcalidrawArrowElement, base);
const normalizedRestoredElement = {
return {
...restoredElement,
...LinearElementEditor.getNormalizeElementPointsAndCoords(
restoredElement,
),
};
// Last resort fix for extremely large arrows
if (
normalizedRestoredElement.width > MAX_ARROW_PX ||
normalizedRestoredElement.height > MAX_ARROW_PX
) {
console.error(
`Removing extremely large arrow ${
normalizedRestoredElement.id
} (type: ${
isElbowArrow(normalizedRestoredElement) ? "elbow" : "simple"
}, width: ${normalizedRestoredElement.width}, height: ${
normalizedRestoredElement.height
}, x: ${normalizedRestoredElement.x}, y: ${
normalizedRestoredElement.y
})`,
);
return {
...normalizedRestoredElement,
x: 0,
y: 0,
width: 100,
height: 100,
points: [
pointFrom<LocalPoint>(0, 0),
pointFrom<LocalPoint>(100, 100),
],
isDeleted: true,
};
}
return normalizedRestoredElement;
}
// generic elements
@@ -700,7 +666,6 @@ export const restoreElements = <T extends ExcalidrawElement>(
const existingElementsMap = existingElements
? arrayToMap(existingElements)
: null;
const restoredElements = syncInvalidIndices(
(targetElements || []).reduce((elements, element) => {
// filtering out selection, which is legacy, no longer kept in elements,
@@ -797,7 +762,7 @@ export const restoreElements = <T extends ExcalidrawElement>(
}
}
// NOTE (mtolmacs): Temporary fix for invalid/self-bound elbow arrows
// NOTE (mtolmacs): Temporary fix for extremely large arrows
// Need to iterate again so we have attached text nodes in elementsMap
return restoredElements.map((element) => {
if (
@@ -971,12 +936,6 @@ export const restoreAppState = (
: defaultValue;
}
const boxSelectionMode =
appState.boxSelectionMode ?? localAppState?.boxSelectionMode;
if (boxSelectionMode !== undefined) {
nextAppState.boxSelectionMode = boxSelectionMode;
}
return {
...nextAppState,
cursorButton: localAppState?.cursorButton || "up",
-3
View File
@@ -185,9 +185,6 @@
"shapeSwitch": "Switch shape",
"preferences": "Preferences",
"preferences_toolLock": "Tool lock",
"boxSelectionMode": "Select on",
"boxSelectionContain": "Wrap",
"boxSelectionOverlap": "Overlap",
"arrowBinding": "Arrow binding",
"midpointSnapping": "Snap to midpoints"
},
@@ -19,6 +19,8 @@ export const renderSnaps = (
}
// in dark mode, we need to adjust the color to account for color inversion.
// Don't change if zen mode, because we draw only crosses, we want the
// colors to be more visible
const snapColor =
appState.theme === THEME.LIGHT || appState.zenModeEnabled
? SNAP_COLOR_LIGHT
+1 -5
View File
@@ -157,11 +157,7 @@ const prepareElementsForRender = ({
let nextElements: readonly ExcalidrawElement[];
if (exportingFrame) {
nextElements = getElementsOverlappingFrame(
elements,
exportingFrame,
arrayToMap(elements),
);
nextElements = getElementsOverlappingFrame(elements, exportingFrame);
} else if (frameRendering.enabled && frameRendering.name) {
nextElements = addFrameLabelsAsTextElements(elements, {
exportWithDarkMode,
+84 -538
View File
@@ -39,14 +39,6 @@ import type {
} from "./types";
const SNAP_DISTANCE = 8;
// Keep snap candidates with effectively identical offsets together. This needs
// to be wider than the 6-decimal rounding quantum to absorb JS floating-point
// noise around values like 4 and 4.000001.
const SNAP_OFFSET_TOLERANCE = 0.00001;
// Point snaps can come from both nearby and distant references within snap
// distance. If their visual distances have a large break, prefer the nearest
// cluster before comparing offsets.
const SNAP_REFERENCE_CLUSTER_BREAK_DISTANCE = 200;
// do not comput more gaps per axis than this limit
// TODO increase or remove once we optimize
@@ -57,51 +49,16 @@ export const getSnapDistance = (zoomValue: number) => {
return SNAP_DISTANCE / zoomValue;
};
/**
* Keeps the cluster threshold visually stable across zoom levels.
*/
const getSnapReferenceClusterBreakDistance = (zoomValue: number) => {
return SNAP_REFERENCE_CLUSTER_BREAK_DISTANCE / zoomValue;
};
type Vector2D = {
x: number;
y: number;
};
type PointPair = [GlobalPoint, GlobalPoint];
type SnapPointType = "outer" | "center";
type SnapSourceId = string;
const SELECTION_SNAP_SOURCE_ID = "selection";
// Snap source ids let us filter redundant snaplines only within one
// selection-to-reference relationship, without mixing separate reference groups.
// For example, "selection->rectA" may collapse to its outermost snaplines,
// while "selection->rectB" still keeps its own independent snaplines.
type SnapPoint = {
point: GlobalPoint;
type: SnapPointType;
snapSourceId: SnapSourceId;
};
const outerSnapPoint = (
point: GlobalPoint,
snapSourceId = SELECTION_SNAP_SOURCE_ID,
): SnapPoint => ({
point,
type: "outer",
snapSourceId,
});
export type PointSnap = {
type: "point";
points: PointPair;
pointTypes: [SnapPointType, SnapPointType];
snapSourceIds: [SnapSourceId, SnapSourceId];
// Distance along the rendered snapline, used to group visually nearby
// references before choosing which point snaps should win.
visualDistance: number;
offset: number;
};
@@ -163,14 +120,14 @@ export type SnapLine = PointSnapLine | GapSnapLine | PointerSnapLine;
// -----------------------------------------------------------------------------
export class SnapCache {
private static referenceSnapPoints: SnapPoint[] | null = null;
private static referenceSnapPoints: GlobalPoint[] | null = null;
private static visibleGaps: {
verticalGaps: Gap[];
horizontalGaps: Gap[];
} | null = null;
public static setReferenceSnapPoints = (snapPoints: SnapPoint[] | null) => {
public static setReferenceSnapPoints = (snapPoints: GlobalPoint[] | null) => {
SnapCache.referenceSnapPoints = snapPoints;
};
@@ -238,17 +195,6 @@ export const areRoughlyEqual = (a: number, b: number, precision = 0.01) => {
return Math.abs(a - b) <= precision;
};
/**
* Keeps nearly identical snap offsets in the same winner set. This prevents
* snapline flicker when rounded geometry differs by a tiny floating-point tail.
*/
const isWithinSnapOffset = (offset: number, minOffset: number) => {
return (
Math.abs(offset) <= minOffset ||
areRoughlyEqual(Math.abs(offset), minOffset, SNAP_OFFSET_TOLERANCE)
);
};
export const getElementsCorners = (
elements: ExcalidrawElement[],
elementsMap: ElementsMap,
@@ -366,81 +312,18 @@ export const getElementsCorners = (
return result.map((p) => pointFrom(round(p[0]), round(p[1])));
};
const getElementsSnapPoints = (
elements: ExcalidrawElement[],
elementsMap: ElementsMap,
options: Parameters<typeof getElementsCorners>[2] = {},
snapSourceId = SELECTION_SNAP_SOURCE_ID,
): SnapPoint[] => {
const points = getElementsCorners(elements, elementsMap, options);
// getElementsCorners() appends the center point last unless omitCenter is set.
const hasCenterPoint = !options.omitCenter && points.length > 0;
return points.map((point, index) => ({
point,
type: hasCenterPoint && index === points.length - 1 ? "center" : "outer",
snapSourceId,
}));
};
/**
* Builds a stable identity for one snap reference group. Sorting keeps grouped
* elements represented by the same snap source id regardless of element order.
*/
const getSnapSourceId = (elements: ExcalidrawElement[]) => {
return elements
.map((element) => element.id)
.sort()
.join(",");
};
/**
* Finds frames that the current selection already belongs to. Their children
* are still valid snap references; children of unrelated frames are not.
*/
const getSelectedFrameIdsForSnapping = (
selectedElements: readonly ExcalidrawElement[],
) => {
const selectedFrameIds = new Set<ExcalidrawElement["id"]>();
for (const element of selectedElements) {
if (element.frameId) {
selectedFrameIds.add(element.frameId);
}
}
return selectedFrameIds;
};
/**
* Frame children are only snap references when the dragged selection is inside
* the same frame. This avoids snapping external elements to internals of a
* framed diagram.
*/
const canUseElementAsSnapReference = (
element: NonDeletedExcalidrawElement,
selectedFrameIds: Set<ExcalidrawElement["id"]>,
) => {
return !element.frameId || selectedFrameIds.has(element.frameId);
};
const getReferenceElements = (
elements: readonly NonDeletedExcalidrawElement[],
selectedElements: NonDeletedExcalidrawElement[],
appState: AppState,
elementsMap: ElementsMap,
) => {
const selectedFrameIds = getSelectedFrameIdsForSnapping(selectedElements);
return getVisibleAndNonSelectedElements(
) =>
getVisibleAndNonSelectedElements(
elements,
selectedElements,
appState,
elementsMap,
).filter((element) => {
return canUseElementAsSnapReference(element, selectedFrameIds);
});
};
);
export const getVisibleGaps = (
elements: readonly NonDeletedExcalidrawElement[],
@@ -599,10 +482,7 @@ const getGapSnaps = (
const centerOffset = round(gapMidX - centerX);
const gapIsLargerThanSelection = gap.length > maxX - minX;
if (
gapIsLargerThanSelection &&
isWithinSnapOffset(centerOffset, minOffset.x)
) {
if (gapIsLargerThanSelection && Math.abs(centerOffset) <= minOffset.x) {
if (Math.abs(centerOffset) < minOffset.x) {
nearestSnapsX.length = 0;
}
@@ -624,7 +504,7 @@ const getGapSnaps = (
const distanceToEndElementX = minX - endMaxX;
const sideOffsetRight = round(gap.length - distanceToEndElementX);
if (isWithinSnapOffset(sideOffsetRight, minOffset.x)) {
if (Math.abs(sideOffsetRight) <= minOffset.x) {
if (Math.abs(sideOffsetRight) < minOffset.x) {
nearestSnapsX.length = 0;
}
@@ -645,7 +525,7 @@ const getGapSnaps = (
const distanceToStartElementX = startMinX - maxX;
const sideOffsetLeft = round(distanceToStartElementX - gap.length);
if (isWithinSnapOffset(sideOffsetLeft, minOffset.x)) {
if (Math.abs(sideOffsetLeft) <= minOffset.x) {
if (Math.abs(sideOffsetLeft) < minOffset.x) {
nearestSnapsX.length = 0;
}
@@ -671,10 +551,7 @@ const getGapSnaps = (
const centerOffset = round(gapMidY - centerY);
const gapIsLargerThanSelection = gap.length > maxY - minY;
if (
gapIsLargerThanSelection &&
isWithinSnapOffset(centerOffset, minOffset.y)
) {
if (gapIsLargerThanSelection && Math.abs(centerOffset) <= minOffset.y) {
if (Math.abs(centerOffset) < minOffset.y) {
nearestSnapsY.length = 0;
}
@@ -696,7 +573,7 @@ const getGapSnaps = (
const distanceToStartElementY = startMinY - maxY;
const sideOffsetTop = round(distanceToStartElementY - gap.length);
if (isWithinSnapOffset(sideOffsetTop, minOffset.y)) {
if (Math.abs(sideOffsetTop) <= minOffset.y) {
if (Math.abs(sideOffsetTop) < minOffset.y) {
nearestSnapsY.length = 0;
}
@@ -717,7 +594,7 @@ const getGapSnaps = (
const distanceToEndElementY = round(minY - endMaxY);
const sideOffsetBottom = gap.length - distanceToEndElementY;
if (isWithinSnapOffset(sideOffsetBottom, minOffset.y)) {
if (Math.abs(sideOffsetBottom) <= minOffset.y) {
if (Math.abs(sideOffsetBottom) < minOffset.y) {
nearestSnapsY.length = 0;
}
@@ -736,102 +613,6 @@ const getGapSnaps = (
}
};
/**
* Narrows point snaps to the nearest visual cluster, then keeps the best offset
* inside that cluster. If all references look continuous, this preserves the
* old smallest-offset behavior.
*/
const filterPointSnapsToNearestCluster = (
snaps: Snaps,
clusterBreakDistance: number,
) => {
const pointSnaps = snaps.filter(
(snap): snap is PointSnap => snap.type === "point",
);
if (pointSnaps.length < 2) {
return;
}
const snapsByOffset = new Map<number, PointSnap[]>();
for (const snap of pointSnaps) {
const offset = round(snap.offset);
const offsetSnaps = snapsByOffset.get(offset) ?? [];
offsetSnaps.push(snap);
snapsByOffset.set(offset, offsetSnaps);
}
const keptPointSnaps = new Set<PointSnap>();
const offsetGroups = Array.from(snapsByOffset.entries()).map(
([offset, offsetSnaps]) => ({
offset,
snaps: offsetSnaps,
visualDistance: Math.min(
...offsetSnaps.map((snap) => snap.visualDistance),
),
}),
);
const sortedOffsetGroups = offsetGroups
.slice()
.sort((a, b) => a.visualDistance - b.visualDistance);
let keepOffsetGroupsUntil = sortedOffsetGroups.length;
// Prefer a nearby reference cluster before comparing offset. If there is no
// clear distance break, this keeps all offsets and falls back to the old
// smallest-offset behavior.
for (let i = 1; i < sortedOffsetGroups.length; i++) {
const distanceGap =
sortedOffsetGroups[i].visualDistance -
sortedOffsetGroups[i - 1].visualDistance;
if (distanceGap > clusterBreakDistance) {
keepOffsetGroupsUntil = i;
break;
}
}
const nearestOffsetGroups = sortedOffsetGroups.slice(
0,
keepOffsetGroupsUntil,
);
const minOffset = Math.min(
...nearestOffsetGroups.map(({ offset }) => Math.abs(offset)),
);
const selectedOffsets = nearestOffsetGroups
.filter(({ offset }) =>
areRoughlyEqual(Math.abs(offset), minOffset, SNAP_OFFSET_TOLERANCE),
)
.map(({ offset }) => offset);
for (const offsetSnaps of snapsByOffset.values()) {
if (
!selectedOffsets.some((offset) =>
areRoughlyEqual(
round(offsetSnaps[0].offset),
offset,
SNAP_OFFSET_TOLERANCE,
),
)
) {
continue;
}
offsetSnaps.forEach((snap) => keptPointSnaps.add(snap));
}
let writeIndex = 0;
for (const snap of snaps) {
if (snap.type !== "point" || keptPointSnaps.has(snap)) {
snaps[writeIndex] = snap;
writeIndex++;
}
}
snaps.length = writeIndex;
};
export const getReferenceSnapPoints = (
elements: readonly NonDeletedExcalidrawElement[],
selectedElements: ExcalidrawElement[],
@@ -849,24 +630,12 @@ export const getReferenceSnapPoints = (
(elementsGroup) =>
!(elementsGroup.length === 1 && isBoundToContainer(elementsGroup[0])),
)
.flatMap((elementGroup) =>
getElementsSnapPoints(
elementGroup,
elementsMap,
{},
getSnapSourceId(elementGroup),
),
);
.flatMap((elementGroup) => getElementsCorners(elementGroup, elementsMap));
};
/**
* Collects point snaps within snap distance. Unlike gap snaps, point snaps first
* go through visual-cluster filtering so a nearby reference can beat a slightly
* better offset from a far-away reference.
*/
const getPointSnaps = (
selectedElements: ExcalidrawElement[],
selectionSnapPoints: SnapPoint[],
selectionSnapPoints: GlobalPoint[],
app: AppClassProperties,
event: KeyboardModifiersObject,
nearestSnapsX: Snaps,
@@ -885,62 +654,39 @@ const getPointSnaps = (
if (referenceSnapPoints) {
for (const thisSnapPoint of selectionSnapPoints) {
for (const otherSnapPoint of referenceSnapPoints) {
const offsetX = otherSnapPoint.point[0] - thisSnapPoint.point[0];
const offsetY = otherSnapPoint.point[1] - thisSnapPoint.point[1];
const offsetX = otherSnapPoint[0] - thisSnapPoint[0];
const offsetY = otherSnapPoint[1] - thisSnapPoint[1];
if (Math.abs(offsetX) <= minOffset.x) {
if (Math.abs(offsetX) < minOffset.x) {
nearestSnapsX.length = 0;
}
if (isWithinSnapOffset(offsetX, minOffset.x)) {
nearestSnapsX.push({
type: "point",
points: [thisSnapPoint.point, otherSnapPoint.point],
pointTypes: [thisSnapPoint.type, otherSnapPoint.type],
snapSourceIds: [
thisSnapPoint.snapSourceId,
otherSnapPoint.snapSourceId,
],
visualDistance: Math.abs(
otherSnapPoint.point[1] - thisSnapPoint.point[1],
),
points: [thisSnapPoint, otherSnapPoint],
offset: offsetX,
});
minOffset.x = Math.abs(offsetX);
}
if (isWithinSnapOffset(offsetY, minOffset.y)) {
if (Math.abs(offsetY) <= minOffset.y) {
if (Math.abs(offsetY) < minOffset.y) {
nearestSnapsY.length = 0;
}
nearestSnapsY.push({
type: "point",
points: [thisSnapPoint.point, otherSnapPoint.point],
pointTypes: [thisSnapPoint.type, otherSnapPoint.type],
snapSourceIds: [
thisSnapPoint.snapSourceId,
otherSnapPoint.snapSourceId,
],
visualDistance: Math.abs(
otherSnapPoint.point[0] - thisSnapPoint.point[0],
),
points: [thisSnapPoint, otherSnapPoint],
offset: offsetY,
});
minOffset.y = Math.abs(offsetY);
}
}
}
}
const clusterBreakDistance = getSnapReferenceClusterBreakDistance(
app.state.zoom.value,
);
filterPointSnapsToNearestCluster(nearestSnapsX, clusterBreakDistance);
filterPointSnapsToNearestCluster(nearestSnapsY, clusterBreakDistance);
if (nearestSnapsX.length > 0) {
minOffset.x = Math.min(
...nearestSnapsX.map((snap) => Math.abs(snap.offset)),
);
}
if (nearestSnapsY.length > 0) {
minOffset.y = Math.min(
...nearestSnapsY.map((snap) => Math.abs(snap.offset)),
);
}
};
export const snapDraggedElements = (
@@ -974,7 +720,7 @@ export const snapDraggedElements = (
y: snapDistance,
};
const selectionPoints = getElementsSnapPoints(selectedElements, elementsMap, {
const selectionPoints = getElementsCorners(selectedElements, elementsMap, {
dragOffset,
});
@@ -1024,7 +770,7 @@ export const snapDraggedElements = (
getPointSnaps(
selectedElements,
getElementsSnapPoints(selectedElements, elementsMap, {
getElementsCorners(selectedElements, elementsMap, {
dragOffset: newDragOffset,
}),
app,
@@ -1079,185 +825,12 @@ const dedupePoints = (points: GlobalPoint[]): GlobalPoint[] => {
return Array.from(map.values());
};
// Point snaplines are collected from every winning point snap first. Multiple
// snap source pairs can collapse to the same rendered line, so candidates keep
// source-pair metadata until redundant center and inner outer lines are removed.
type PointSnapLineSourcePair = {
snapSourcePairKey: string;
pointType: SnapPointType;
};
type PointSnapLineCandidate = PointSnapLine & {
sourcePairs: PointSnapLineSourcePair[];
};
type PointSnapLineBucket = {
points: GlobalPoint[];
sourcePairs: PointSnapLineSourcePair[];
};
type OuterSnapLineCoordinateRange = {
count: number;
min: number;
max: number;
};
/**
* Describes which snap source pair produced a rendered point snapline, so later
* filtering can reason about redundancy without mixing unrelated references.
* Only center-to-center snaps count as center snaplines; a center-to-outer snap
* still explains an outer edge or midpoint alignment.
*/
const getPointSnapLineSourcePair = (
snap: PointSnap,
): PointSnapLineSourcePair => {
return {
snapSourcePairKey: snap.snapSourceIds.join("->"),
pointType: snap.pointTypes.every((pointType) => pointType === "center")
? "center"
: "outer",
};
};
/**
* Builds each snap source pair's outer coordinate range. Center snaplines use
* this range to decide whether the surrounding outer lines already explain
* them, and outer snaplines use it to keep only the two extremes.
*/
const getOuterCoordinateRangesBySnapSourcePairKey = (
snapLines: PointSnapLineCandidate[],
getCoordinate: (snapLine: PointSnapLine) => number,
) => {
const ranges = new Map<string, OuterSnapLineCoordinateRange>();
for (const snapLine of snapLines) {
const coordinate = getCoordinate(snapLine);
for (const sourcePair of snapLine.sourcePairs) {
if (sourcePair.pointType === "center") {
continue;
}
const range = ranges.get(sourcePair.snapSourcePairKey);
ranges.set(sourcePair.snapSourcePairKey, {
count: (range?.count ?? 0) + 1,
min: range ? Math.min(range.min, coordinate) : coordinate,
max: range ? Math.max(range.max, coordinate) : coordinate,
});
}
}
return ranges;
};
/**
* A center snapline is redundant when outer snaplines from the same snap source
* pair exist on both sides, because the outer lines already imply center
* alignment.
*/
const isRedundantCenterSnapLine = (
coordinate: number,
outerCoordinateRange?: OuterSnapLineCoordinateRange,
) => {
if (!outerCoordinateRange) {
return false;
}
return (
outerCoordinateRange.min < coordinate &&
outerCoordinateRange.max > coordinate
);
};
/**
* When more than two outer snaplines come from the same snap source pair, the
* inner ones are redundant; the two extremes communicate the same shape
* alignment.
*/
const isRedundantOuterSnapLine = (
coordinate: number,
outerCoordinateRange?: OuterSnapLineCoordinateRange,
) => {
if (!outerCoordinateRange || outerCoordinateRange.count <= 2) {
return false;
}
return (
coordinate !== outerCoordinateRange.min &&
coordinate !== outerCoordinateRange.max
);
};
/**
* Keeps a visual snapline if at least one snap source pair represented by the
* line still needs it. This matters when multiple snap source pairs collapse to
* the same rendered coordinate.
*/
const isPointSnapLineNeededBySourcePair = (
sourcePair: PointSnapLineSourcePair,
coordinate: number,
outerCoordinateRangesBySnapSourcePairKey: Map<
string,
OuterSnapLineCoordinateRange
>,
) => {
const outerCoordinateRange = outerCoordinateRangesBySnapSourcePairKey.get(
sourcePair.snapSourcePairKey,
);
if (sourcePair.pointType === "center") {
return !isRedundantCenterSnapLine(coordinate, outerCoordinateRange);
}
return !isRedundantOuterSnapLine(coordinate, outerCoordinateRange);
};
/**
* Removes point snaplines that are visually redundant, while preserving any line
* that is still needed by at least one snap source pair represented on that
* line.
*/
const filterRedundantPointSnapLines = (
snapLines: PointSnapLineCandidate[],
getCoordinate: (snapLine: PointSnapLine) => number,
): PointSnapLine[] => {
if (snapLines.length < 3) {
return snapLines.map(({ sourcePairs, ...snapLine }) => snapLine);
}
// Track outer-line ranges per snap source pair. The same visual snapline can
// be produced by multiple snap source pairs, so a line is removed only when
// every pair represented by that line considers it redundant.
const outerCoordinateRangesBySnapSourcePairKey =
getOuterCoordinateRangesBySnapSourcePairKey(snapLines, getCoordinate);
return snapLines
.filter((snapLine) => {
const coordinate = getCoordinate(snapLine);
return snapLine.sourcePairs.some((sourcePair) =>
isPointSnapLineNeededBySourcePair(
sourcePair,
coordinate,
outerCoordinateRangesBySnapSourcePairKey,
),
);
})
.map(({ sourcePairs, ...snapLine }) => snapLine);
};
/**
* Merges point snaps that render on the same x/y coordinate, attaches their
* snap source pair metadata, then removes redundant center and inner outer
* lines.
*/
const createPointSnapLines = (
nearestSnapsX: Snaps,
nearestSnapsY: Snaps,
): PointSnapLine[] => {
const snapsX = {} as { [key: string]: PointSnapLineBucket };
const snapsY = {} as { [key: string]: PointSnapLineBucket };
const snapsX = {} as { [key: string]: GlobalPoint[] };
const snapsY = {} as { [key: string]: GlobalPoint[] };
if (nearestSnapsX.length > 0) {
for (const snap of nearestSnapsX) {
@@ -1265,14 +838,13 @@ const createPointSnapLines = (
// key = thisPoint.x
const key = round(snap.points[0][0]);
if (!snapsX[key]) {
snapsX[key] = { points: [], sourcePairs: [] };
snapsX[key] = [];
}
snapsX[key].points.push(
snapsX[key].push(
...snap.points.map((p) =>
pointFrom<GlobalPoint>(round(p[0]), round(p[1])),
),
);
snapsX[key].sourcePairs.push(getPointSnapLineSourcePair(snap));
}
}
}
@@ -1283,55 +855,44 @@ const createPointSnapLines = (
// key = thisPoint.y
const key = round(snap.points[0][1]);
if (!snapsY[key]) {
snapsY[key] = { points: [], sourcePairs: [] };
snapsY[key] = [];
}
snapsY[key].points.push(
snapsY[key].push(
...snap.points.map((p) =>
pointFrom<GlobalPoint>(round(p[0]), round(p[1])),
),
);
snapsY[key].sourcePairs.push(getPointSnapLineSourcePair(snap));
}
}
}
const snapLinesX = Object.entries(snapsX).map(([key, snap]) => {
return {
type: "points",
points: dedupePoints(
snap.points
.map((p) => {
return pointFrom<GlobalPoint>(Number(key), p[1]);
})
.sort((a, b) => a[1] - b[1]),
),
sourcePairs: snap.sourcePairs,
} as PointSnapLineCandidate;
});
const snapLinesY = Object.entries(snapsY).map(([key, snap]) => {
return {
type: "points",
points: dedupePoints(
snap.points
.map((p) => {
return pointFrom<GlobalPoint>(p[0], Number(key));
})
.sort((a, b) => a[0] - b[0]),
),
sourcePairs: snap.sourcePairs,
} as PointSnapLineCandidate;
});
return filterRedundantPointSnapLines(
snapLinesX,
(snapLine) => snapLine.points[0][0],
).concat(
filterRedundantPointSnapLines(
snapLinesY,
(snapLine) => snapLine.points[0][1],
),
);
return Object.entries(snapsX)
.map(([key, points]) => {
return {
type: "points",
points: dedupePoints(
points
.map((p) => {
return pointFrom<GlobalPoint>(Number(key), p[1]);
})
.sort((a, b) => a[1] - b[1]),
),
} as PointSnapLine;
})
.concat(
Object.entries(snapsY).map(([key, points]) => {
return {
type: "points",
points: dedupePoints(
points
.map((p) => {
return pointFrom<GlobalPoint>(p[0], Number(key));
})
.sort((a, b) => a[0] - b[0]),
),
} as PointSnapLine;
}),
);
};
const dedupeGapSnapLines = (gapSnapLines: GapSnapLine[]) => {
@@ -1356,13 +917,10 @@ const createGapSnapLines = (
dragOffset: Vector2D,
gapSnaps: GapSnap[],
): GapSnapLine[] => {
// Use the same rounded bounds as getGapSnaps(). Otherwise a gap snap can be
// accepted during snapping but skipped here because the raw bounds miss the
// reference gap overlap by a tiny floating-point delta.
const [minX, minY, maxX, maxY] = getDraggedElementsBounds(
selectedElements,
dragOffset,
).map((bound) => round(bound));
);
const gapSnapLines: GapSnapLine[] = [];
@@ -1585,52 +1143,40 @@ export const snapResizingElements = (
}
}
const selectionSnapPoints: SnapPoint[] = [];
const selectionSnapPoints: GlobalPoint[] = [];
if (transformHandle) {
switch (transformHandle) {
case "e": {
selectionSnapPoints.push(
outerSnapPoint(pointFrom(maxX, minY)),
outerSnapPoint(pointFrom(maxX, maxY)),
);
selectionSnapPoints.push(pointFrom(maxX, minY), pointFrom(maxX, maxY));
break;
}
case "w": {
selectionSnapPoints.push(
outerSnapPoint(pointFrom(minX, minY)),
outerSnapPoint(pointFrom(minX, maxY)),
);
selectionSnapPoints.push(pointFrom(minX, minY), pointFrom(minX, maxY));
break;
}
case "n": {
selectionSnapPoints.push(
outerSnapPoint(pointFrom(minX, minY)),
outerSnapPoint(pointFrom(maxX, minY)),
);
selectionSnapPoints.push(pointFrom(minX, minY), pointFrom(maxX, minY));
break;
}
case "s": {
selectionSnapPoints.push(
outerSnapPoint(pointFrom(minX, maxY)),
outerSnapPoint(pointFrom(maxX, maxY)),
);
selectionSnapPoints.push(pointFrom(minX, maxY), pointFrom(maxX, maxY));
break;
}
case "ne": {
selectionSnapPoints.push(outerSnapPoint(pointFrom(maxX, minY)));
selectionSnapPoints.push(pointFrom(maxX, minY));
break;
}
case "nw": {
selectionSnapPoints.push(outerSnapPoint(pointFrom(minX, minY)));
selectionSnapPoints.push(pointFrom(minX, minY));
break;
}
case "se": {
selectionSnapPoints.push(outerSnapPoint(pointFrom(maxX, maxY)));
selectionSnapPoints.push(pointFrom(maxX, maxY));
break;
}
case "sw": {
selectionSnapPoints.push(outerSnapPoint(pointFrom(minX, maxY)));
selectionSnapPoints.push(pointFrom(minX, maxY));
break;
}
}
@@ -1672,11 +1218,11 @@ export const snapResizingElements = (
round(bound),
);
const corners: SnapPoint[] = [
outerSnapPoint(pointFrom(x1, y1)),
outerSnapPoint(pointFrom(x1, y2)),
outerSnapPoint(pointFrom(x2, y1)),
outerSnapPoint(pointFrom(x2, y2)),
const corners: GlobalPoint[] = [
pointFrom(x1, y1),
pointFrom(x1, y2),
pointFrom(x2, y1),
pointFrom(x2, y2),
];
getPointSnaps(
@@ -1712,8 +1258,8 @@ export const snapNewElement = (
};
}
const selectionSnapPoints: SnapPoint[] = [
outerSnapPoint(pointFrom(origin.x + dragOffset.x, origin.y + dragOffset.y)),
const selectionSnapPoints: GlobalPoint[] = [
pointFrom(origin.x + dragOffset.x, origin.y + dragOffset.y),
];
const snapDistance = getSnapDistance(app.state.zoom.value);
@@ -1746,7 +1292,7 @@ export const snapNewElement = (
nearestSnapsX.length = 0;
nearestSnapsY.length = 0;
const corners = getElementsSnapPoints([newElement], elementsMap, {
const corners = getElementsCorners([newElement], elementsMap, {
boundingBoxCorners: true,
omitCenter: true,
});
@@ -13,7 +13,6 @@ exports[`contextMenu element > right-clicking on a group should select whole gro
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": {
"items": [
@@ -979,6 +978,7 @@ exports[`contextMenu element > right-clicking on a group should select whole gro
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -1086,7 +1086,6 @@ exports[`contextMenu element > selecting 'Add to library' in context menu adds e
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -1172,6 +1171,7 @@ exports[`contextMenu element > selecting 'Add to library' in context menu adds e
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -1300,7 +1300,6 @@ exports[`contextMenu element > selecting 'Bring forward' in context menu brings
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -1386,6 +1385,7 @@ exports[`contextMenu element > selecting 'Bring forward' in context menu brings
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -1631,7 +1631,6 @@ exports[`contextMenu element > selecting 'Bring to front' in context menu brings
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -1717,6 +1716,7 @@ exports[`contextMenu element > selecting 'Bring to front' in context menu brings
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -1962,7 +1962,6 @@ exports[`contextMenu element > selecting 'Copy styles' in context menu copies st
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -2048,6 +2047,7 @@ exports[`contextMenu element > selecting 'Copy styles' in context menu copies st
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -2176,7 +2176,6 @@ exports[`contextMenu element > selecting 'Delete' in context menu deletes elemen
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -2260,6 +2259,7 @@ exports[`contextMenu element > selecting 'Delete' in context menu deletes elemen
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -2417,7 +2417,6 @@ exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -2503,6 +2502,7 @@ exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -2715,7 +2715,6 @@ exports[`contextMenu element > selecting 'Group selection' in context menu group
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -2806,6 +2805,7 @@ exports[`contextMenu element > selecting 'Group selection' in context menu group
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -3087,7 +3087,6 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -3173,6 +3172,7 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -3580,7 +3580,6 @@ exports[`contextMenu element > selecting 'Send backward' in context menu sends e
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -3666,6 +3665,7 @@ exports[`contextMenu element > selecting 'Send backward' in context menu sends e
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -3903,7 +3903,6 @@ exports[`contextMenu element > selecting 'Send to back' in context menu sends el
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -3989,6 +3988,7 @@ exports[`contextMenu element > selecting 'Send to back' in context menu sends el
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -4226,7 +4226,6 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -4315,6 +4314,7 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -4358,7 +4358,7 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
"type": "rectangle",
"updated": 1,
"version": 5,
"versionNonce": 1006504105,
"versionNonce": 760410951,
"width": 20,
"x": -10,
"y": 0,
@@ -4383,14 +4383,14 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
"opacity": 100,
"roughness": 1,
"roundness": null,
"seed": 400692809,
"seed": 238820263,
"strokeColor": "#1e1e1e",
"strokeStyle": "solid",
"strokeWidth": 2,
"type": "rectangle",
"updated": 1,
"version": 5,
"versionNonce": 289600103,
"versionNonce": 1006504105,
"width": 20,
"x": 20,
"y": 30,
@@ -4637,7 +4637,6 @@ exports[`contextMenu element > shows 'Group selection' in context menu for multi
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": {
"items": [
@@ -5600,6 +5599,7 @@ exports[`contextMenu element > shows 'Group selection' in context menu for multi
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -5854,7 +5854,6 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": {
"items": [
@@ -6819,6 +6818,7 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -6864,7 +6864,7 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro
"type": "rectangle",
"updated": 1,
"version": 4,
"versionNonce": 1723083209,
"versionNonce": 747212839,
"width": 10,
"x": -10,
"y": 0,
@@ -6891,14 +6891,14 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro
"opacity": 100,
"roughness": 1,
"roundness": null,
"seed": 400692809,
"seed": 238820263,
"strokeColor": "#1e1e1e",
"strokeStyle": "solid",
"strokeWidth": 2,
"type": "rectangle",
"updated": 1,
"version": 4,
"versionNonce": 760410951,
"versionNonce": 1723083209,
"width": 10,
"x": 12,
"y": 0,
@@ -7122,7 +7122,6 @@ exports[`contextMenu element > shows context menu for canvas > [end of test] app
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": {
"items": [
@@ -7772,6 +7771,7 @@ exports[`contextMenu element > shows context menu for canvas > [end of test] app
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -7811,7 +7811,6 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": {
"items": [
@@ -8771,6 +8770,7 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -8802,7 +8802,6 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": {
"items": [
@@ -9765,6 +9764,7 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -13,7 +13,6 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -647,7 +646,6 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -1209,7 +1207,6 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -1293,6 +1290,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -1569,7 +1567,6 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -1653,6 +1650,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -1931,7 +1929,6 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -2015,6 +2012,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -2194,7 +2192,6 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -2277,40 +2274,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": {
"angle": 0,
"backgroundColor": "transparent",
"boundElements": [
{
"id": "id4",
"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": 1,
"strokeColor": "#1e1e1e",
"strokeStyle": "solid",
"strokeWidth": 2,
"type": "rectangle",
"updated": 1,
"version": 3,
"versionNonce": 493213705,
"width": 100,
"x": -100,
"y": -50,
},
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -2681,7 +2645,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -2765,6 +2728,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -2984,7 +2948,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -3068,6 +3031,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -3303,7 +3267,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -3387,6 +3350,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -3597,7 +3561,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -3681,6 +3644,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -3883,7 +3847,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -3967,6 +3930,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -4118,7 +4082,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -4202,6 +4165,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -4375,7 +4339,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -4459,6 +4422,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -4646,7 +4610,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -4730,6 +4693,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -4875,7 +4839,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -4959,6 +4922,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -5104,7 +5068,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -5188,6 +5151,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -5351,7 +5315,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -5435,6 +5398,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -5607,7 +5571,6 @@ exports[`history > multiplayer undo/redo > conflicts in frames and their childre
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -5691,6 +5654,7 @@ exports[`history > multiplayer undo/redo > conflicts in frames and their childre
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -5865,7 +5829,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -5948,6 +5911,7 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -6194,7 +6158,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -6277,6 +6240,7 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -6621,7 +6585,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -6707,6 +6670,7 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -6995,7 +6959,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -7087,6 +7050,7 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -7307,7 +7271,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -7600,7 +7563,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -7681,6 +7643,7 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -7830,7 +7793,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -7911,6 +7873,7 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -8182,7 +8145,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -8263,6 +8225,7 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -8534,7 +8497,6 @@ exports[`history > multiplayer undo/redo > should not let remote changes to inte
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -8621,6 +8583,7 @@ exports[`history > multiplayer undo/redo > should not let remote changes to inte
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -8940,7 +8903,6 @@ exports[`history > multiplayer undo/redo > should not let remote changes to inte
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -9021,6 +8983,7 @@ exports[`history > multiplayer undo/redo > should not let remote changes to inte
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -9219,7 +9182,6 @@ exports[`history > multiplayer undo/redo > should not let remote changes to inte
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -9302,6 +9264,7 @@ exports[`history > multiplayer undo/redo > should not let remote changes to inte
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -9483,7 +9446,6 @@ exports[`history > multiplayer undo/redo > should not override remote changes on
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -9566,6 +9528,7 @@ exports[`history > multiplayer undo/redo > should not override remote changes on
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -9748,7 +9711,6 @@ exports[`history > multiplayer undo/redo > should not override remote changes on
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -9831,6 +9793,7 @@ exports[`history > multiplayer undo/redo > should not override remote changes on
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -9980,7 +9943,6 @@ exports[`history > multiplayer undo/redo > should override remotely added groups
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -10064,6 +10026,7 @@ exports[`history > multiplayer undo/redo > should override remotely added groups
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -10277,7 +10240,6 @@ exports[`history > multiplayer undo/redo > should override remotely added points
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -10595,7 +10557,6 @@ exports[`history > multiplayer undo/redo > should redistribute deltas when eleme
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -10676,6 +10637,7 @@ exports[`history > multiplayer undo/redo > should redistribute deltas when eleme
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -10831,7 +10793,6 @@ exports[`history > multiplayer undo/redo > should redraw arrows on undo > [end o
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -10915,6 +10876,7 @@ exports[`history > multiplayer undo/redo > should redraw arrows on undo > [end o
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -11756,7 +11718,6 @@ exports[`history > multiplayer undo/redo > should update history entries after r
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -11839,6 +11800,7 @@ exports[`history > multiplayer undo/redo > should update history entries after r
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -12016,7 +11978,6 @@ exports[`history > singleplayer undo/redo > remounting undo/redo buttons should
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -12097,6 +12058,7 @@ exports[`history > singleplayer undo/redo > remounting undo/redo buttons should
"showHyperlinkPopup": false,
"showWelcomeScreen": false,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -12251,7 +12213,6 @@ exports[`history > singleplayer undo/redo > should clear the redo stack on eleme
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -12334,6 +12295,7 @@ exports[`history > singleplayer undo/redo > should clear the redo stack on eleme
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -12488,7 +12450,6 @@ exports[`history > singleplayer undo/redo > should create entry when selecting f
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -12569,6 +12530,7 @@ exports[`history > singleplayer undo/redo > should create entry when selecting f
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -12879,7 +12841,6 @@ exports[`history > singleplayer undo/redo > should create new history entry on e
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -12965,6 +12926,7 @@ exports[`history > singleplayer undo/redo > should create new history entry on e
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -13089,7 +13051,6 @@ exports[`history > singleplayer undo/redo > should create new history entry on e
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -13172,6 +13133,7 @@ exports[`history > singleplayer undo/redo > should create new history entry on e
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -13296,7 +13258,6 @@ exports[`history > singleplayer undo/redo > should create new history entry on i
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -13383,6 +13344,7 @@ exports[`history > singleplayer undo/redo > should create new history entry on i
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -13597,7 +13559,6 @@ exports[`history > singleplayer undo/redo > should create new history entry on i
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -13681,6 +13642,7 @@ exports[`history > singleplayer undo/redo > should create new history entry on i
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -13895,7 +13857,6 @@ exports[`history > singleplayer undo/redo > should create new history entry on s
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -13979,6 +13940,7 @@ exports[`history > singleplayer undo/redo > should create new history entry on s
"showHyperlinkPopup": false,
"showWelcomeScreen": false,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -14140,7 +14102,6 @@ exports[`history > singleplayer undo/redo > should disable undo/redo buttons whe
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -14223,6 +14184,7 @@ exports[`history > singleplayer undo/redo > should disable undo/redo buttons whe
"showHyperlinkPopup": false,
"showWelcomeScreen": false,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -14377,7 +14339,6 @@ exports[`history > singleplayer undo/redo > should end up with no history entry
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -14460,6 +14421,7 @@ exports[`history > singleplayer undo/redo > should end up with no history entry
"showHyperlinkPopup": false,
"showWelcomeScreen": false,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -14614,7 +14576,6 @@ exports[`history > singleplayer undo/redo > should iterate through the history w
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -14697,6 +14658,7 @@ exports[`history > singleplayer undo/redo > should iterate through the history w
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -14861,7 +14823,6 @@ exports[`history > singleplayer undo/redo > should not clear the redo stack on s
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -14944,6 +14905,7 @@ exports[`history > singleplayer undo/redo > should not clear the redo stack on s
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -15192,7 +15154,6 @@ exports[`history > singleplayer undo/redo > should not collapse when applying co
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -15276,6 +15237,7 @@ exports[`history > singleplayer undo/redo > should not collapse when applying co
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -15362,7 +15324,6 @@ exports[`history > singleplayer undo/redo > should not end up with history entry
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -15448,6 +15409,7 @@ exports[`history > singleplayer undo/redo > should not end up with history entry
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -15646,7 +15608,6 @@ exports[`history > singleplayer undo/redo > should not end up with history entry
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -15730,6 +15691,7 @@ exports[`history > singleplayer undo/redo > should not end up with history entry
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -15909,7 +15871,6 @@ exports[`history > singleplayer undo/redo > should not modify anything on unrela
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -15993,6 +15954,7 @@ exports[`history > singleplayer undo/redo > should not modify anything on unrela
"showHyperlinkPopup": false,
"showWelcomeScreen": false,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -16062,7 +16024,6 @@ exports[`history > singleplayer undo/redo > should not override appstate changes
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -16147,6 +16108,7 @@ exports[`history > singleplayer undo/redo > should not override appstate changes
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -16344,7 +16306,6 @@ exports[`history > singleplayer undo/redo > should support appstate name or view
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -16428,6 +16389,7 @@ exports[`history > singleplayer undo/redo > should support appstate name or view
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -16506,7 +16468,6 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -17255,7 +17216,6 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -17902,7 +17862,6 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -18549,7 +18508,6 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -19299,7 +19257,6 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -20068,7 +20025,6 @@ exports[`history > singleplayer undo/redo > should support changes in elements'
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -20154,6 +20110,7 @@ exports[`history > singleplayer undo/redo > should support changes in elements'
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -20548,7 +20505,6 @@ exports[`history > singleplayer undo/redo > should support duplication of groups
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -20636,6 +20592,7 @@ exports[`history > singleplayer undo/redo > should support duplication of groups
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -21059,7 +21016,6 @@ exports[`history > singleplayer undo/redo > should support element creation, del
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -21142,6 +21098,7 @@ exports[`history > singleplayer undo/redo > should support element creation, del
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -21518,7 +21475,6 @@ exports[`history > singleplayer undo/redo > should support linear element creati
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -13,7 +13,6 @@ exports[`given element A and group of elements B and given both are selected whe
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -106,6 +105,7 @@ exports[`given element A and group of elements B and given both are selected whe
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -439,7 +439,6 @@ exports[`given element A and group of elements B and given both are selected whe
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -534,6 +533,7 @@ exports[`given element A and group of elements B and given both are selected whe
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -855,7 +855,6 @@ exports[`regression tests > Cmd/Ctrl-click exclusively select element under poin
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -941,6 +940,7 @@ exports[`regression tests > Cmd/Ctrl-click exclusively select element under poin
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -1421,7 +1421,6 @@ exports[`regression tests > Drags selected element when hitting only bounding bo
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -1507,6 +1506,7 @@ exports[`regression tests > Drags selected element when hitting only bounding bo
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -1628,7 +1628,6 @@ exports[`regression tests > adjusts z order when grouping > [end of test] appSta
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -1719,6 +1718,7 @@ exports[`regression tests > adjusts z order when grouping > [end of test] appSta
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -2012,7 +2012,6 @@ exports[`regression tests > alt-drag duplicates an element > [end of test] appSt
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -2100,6 +2099,7 @@ exports[`regression tests > alt-drag duplicates an element > [end of test] appSt
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -2257,7 +2257,6 @@ exports[`regression tests > arrow keys > [end of test] appState 1`] = `
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -2343,6 +2342,7 @@ exports[`regression tests > arrow keys > [end of test] appState 1`] = `
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -2437,7 +2437,6 @@ exports[`regression tests > can drag element that covers another element, while
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -2525,6 +2524,7 @@ exports[`regression tests > can drag element that covers another element, while
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -2762,7 +2762,6 @@ exports[`regression tests > change the properties of a shape > [end of test] app
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -2848,6 +2847,7 @@ exports[`regression tests > change the properties of a shape > [end of test] app
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -3017,7 +3017,6 @@ exports[`regression tests > click on an element and drag it > [dragged] appState
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -3105,6 +3104,7 @@ exports[`regression tests > click on an element and drag it > [dragged] appState
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -3258,7 +3258,6 @@ exports[`regression tests > click on an element and drag it > [end of test] appS
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -3346,6 +3345,7 @@ exports[`regression tests > click on an element and drag it > [end of test] appS
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -3494,7 +3494,6 @@ exports[`regression tests > click to select a shape > [end of test] appState 1`]
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -3582,6 +3581,7 @@ exports[`regression tests > click to select a shape > [end of test] appState 1`]
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -3752,7 +3752,6 @@ exports[`regression tests > click-drag to select a group > [end of test] appStat
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -3841,6 +3840,7 @@ exports[`regression tests > click-drag to select a group > [end of test] appStat
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -4066,7 +4066,6 @@ exports[`regression tests > deleting last but one element in editing group shoul
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -4154,6 +4153,7 @@ exports[`regression tests > deleting last but one element in editing group shoul
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -4502,7 +4502,6 @@ exports[`regression tests > deselects group of selected elements on pointer down
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -4617,6 +4616,7 @@ exports[`regression tests > deselects group of selected elements on pointer down
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -4785,7 +4785,6 @@ exports[`regression tests > deselects group of selected elements on pointer up w
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -4872,6 +4871,7 @@ exports[`regression tests > deselects group of selected elements on pointer up w
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -5061,7 +5061,6 @@ exports[`regression tests > deselects selected element on pointer down when poin
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -5175,6 +5174,7 @@ exports[`regression tests > deselects selected element on pointer down when poin
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -5269,7 +5269,6 @@ exports[`regression tests > deselects selected element, on pointer up, when clic
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -5355,6 +5354,7 @@ exports[`regression tests > deselects selected element, on pointer up, when clic
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -5469,7 +5469,6 @@ exports[`regression tests > double click to edit a group > [end of test] appStat
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -5555,6 +5554,7 @@ exports[`regression tests > double click to edit a group > [end of test] appStat
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -5862,7 +5862,6 @@ exports[`regression tests > drags selected elements from point inside common bou
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -5952,6 +5951,7 @@ exports[`regression tests > drags selected elements from point inside common bou
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -6159,7 +6159,6 @@ exports[`regression tests > draw every type of shape > [end of test] appState 1`
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -6948,7 +6947,6 @@ exports[`regression tests > given a group of selected elements with an element t
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -7037,6 +7035,7 @@ exports[`regression tests > given a group of selected elements with an element t
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -7282,7 +7281,6 @@ exports[`regression tests > given a selected element A and a not selected elemen
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -7371,6 +7369,7 @@ exports[`regression tests > given a selected element A and a not selected elemen
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -7561,7 +7560,6 @@ exports[`regression tests > given selected element A with lower z-index than uns
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -7649,6 +7647,7 @@ exports[`regression tests > given selected element A with lower z-index than uns
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -7796,7 +7795,6 @@ exports[`regression tests > given selected element A with lower z-index than uns
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -7884,6 +7882,7 @@ exports[`regression tests > given selected element A with lower z-index than uns
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -8036,7 +8035,6 @@ exports[`regression tests > key 2 selects rectangle tool > [end of test] appStat
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -8122,6 +8120,7 @@ exports[`regression tests > key 2 selects rectangle tool > [end of test] appStat
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -8216,7 +8215,6 @@ exports[`regression tests > key 3 selects diamond tool > [end of test] appState
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -8302,6 +8300,7 @@ exports[`regression tests > key 3 selects diamond tool > [end of test] appState
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -8396,7 +8395,6 @@ exports[`regression tests > key 4 selects ellipse tool > [end of test] appState
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -8482,6 +8480,7 @@ exports[`regression tests > key 4 selects ellipse tool > [end of test] appState
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -8576,7 +8575,6 @@ exports[`regression tests > key 5 selects arrow tool > [end of test] appState 1`
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -8809,7 +8807,6 @@ exports[`regression tests > key 6 selects line tool > [end of test] appState 1`]
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -9040,7 +9037,6 @@ exports[`regression tests > key 7 selects freedraw tool > [end of test] appState
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -9124,6 +9120,7 @@ exports[`regression tests > key 7 selects freedraw tool > [end of test] appState
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -9232,7 +9229,6 @@ exports[`regression tests > key a selects arrow tool > [end of test] appState 1`
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -9465,7 +9461,6 @@ exports[`regression tests > key d selects diamond tool > [end of test] appState
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -9551,6 +9546,7 @@ exports[`regression tests > key d selects diamond tool > [end of test] appState
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -9645,7 +9641,6 @@ exports[`regression tests > key l selects line tool > [end of test] appState 1`]
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -9876,7 +9871,6 @@ exports[`regression tests > key o selects ellipse tool > [end of test] appState
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -9962,6 +9956,7 @@ exports[`regression tests > key o selects ellipse tool > [end of test] appState
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -10056,7 +10051,6 @@ exports[`regression tests > key p selects freedraw tool > [end of test] appState
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -10140,6 +10134,7 @@ exports[`regression tests > key p selects freedraw tool > [end of test] appState
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -10248,7 +10243,6 @@ exports[`regression tests > key r selects rectangle tool > [end of test] appStat
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -10334,6 +10328,7 @@ exports[`regression tests > key r selects rectangle tool > [end of test] appStat
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -10428,7 +10423,6 @@ exports[`regression tests > make a group and duplicate it > [end of test] appSta
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -10522,6 +10516,7 @@ exports[`regression tests > make a group and duplicate it > [end of test] appSta
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -10959,7 +10954,6 @@ exports[`regression tests > noop interaction after undo shouldn't create history
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -11047,6 +11041,7 @@ exports[`regression tests > noop interaction after undo shouldn't create history
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -11239,7 +11234,6 @@ exports[`regression tests > pinch-to-zoom works > [end of test] appState 1`] = `
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -11323,6 +11317,7 @@ exports[`regression tests > pinch-to-zoom works > [end of test] appState 1`] = `
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -11362,7 +11357,6 @@ exports[`regression tests > shift click on selected element should deselect it o
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -11448,6 +11442,7 @@ exports[`regression tests > shift click on selected element should deselect it o
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -11562,7 +11557,6 @@ exports[`regression tests > shift-click to multiselect, then drag > [end of test
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -11652,6 +11646,7 @@ exports[`regression tests > shift-click to multiselect, then drag > [end of test
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -11881,7 +11876,6 @@ exports[`regression tests > should group elements and ungroup them > [end of tes
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -11973,6 +11967,7 @@ exports[`regression tests > should group elements and ungroup them > [end of tes
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -12310,7 +12305,6 @@ exports[`regression tests > single-clicking on a subgroup of a selected group sh
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -12406,6 +12400,7 @@ exports[`regression tests > single-clicking on a subgroup of a selected group sh
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -12950,7 +12945,6 @@ exports[`regression tests > spacebar + drag scrolls the canvas > [end of test] a
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -13037,6 +13031,7 @@ exports[`regression tests > spacebar + drag scrolls the canvas > [end of test] a
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -13076,7 +13071,6 @@ exports[`regression tests > supports nested groups > [end of test] appState 1`]
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -13164,6 +13158,7 @@ exports[`regression tests > supports nested groups > [end of test] appState 1`]
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -13707,7 +13702,6 @@ exports[`regression tests > switches from group of selected elements to another
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -13824,6 +13818,7 @@ exports[`regression tests > switches from group of selected elements to another
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -14046,7 +14041,6 @@ exports[`regression tests > switches selected element on pointer down > [end of
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -14162,6 +14156,7 @@ exports[`regression tests > switches selected element on pointer down > [end of
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -14310,7 +14305,6 @@ exports[`regression tests > two-finger scroll works > [end of test] appState 1`]
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -14394,6 +14388,7 @@ exports[`regression tests > two-finger scroll works > [end of test] appState 1`]
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -14433,7 +14428,6 @@ exports[`regression tests > undo/redo drawing an element > [end of test] appStat
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -14798,7 +14792,6 @@ exports[`regression tests > updates fontSize & fontFamily appState > [end of tes
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -14882,6 +14875,7 @@ exports[`regression tests > updates fontSize & fontFamily appState > [end of tes
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
@@ -14921,7 +14915,6 @@ exports[`regression tests > zoom hotkeys > [end of test] appState 1`] = `
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -15008,6 +15001,7 @@ exports[`regression tests > zoom hotkeys > [end of test] appState 1`] = `
"showHyperlinkPopup": false,
"showWelcomeScreen": true,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
+1 -1
View File
@@ -314,7 +314,7 @@ describe("history", () => {
expect.objectContaining({ id: rect2.id, isDeleted: true }),
]);
mouse.downAt(-10, -10);
mouse.downAt(0, 0);
mouse.moveTo(25, 25);
mouse.moveTo(50, 50);
mouse.upAt(50, 50);
@@ -468,7 +468,7 @@ describe("regression tests", () => {
mouse.reset();
mouse.down();
mouse.move(-1000, -1000);
mouse.restorePosition(end[0] + 3, end[1] + 3);
mouse.restorePosition(...end);
mouse.up();
expect(h.elements.length).toBe(3);
@@ -519,7 +519,7 @@ describe("regression tests", () => {
mouse.reset();
mouse.down();
mouse.move(-1000, -1000);
mouse.restorePosition(end[0] + 3, end[1] + 3);
mouse.restorePosition(...end);
mouse.up();
for (const element of h.elements) {
@@ -537,7 +537,7 @@ describe("regression tests", () => {
mouse.moveTo(-10, -10); // the NW resizing handle is at [0, 0], so moving further
mouse.down();
mouse.move(-1000, -1000);
mouse.restorePosition(end[0] + 3, end[1] + 3);
mouse.restorePosition(...end);
mouse.up();
Keyboard.withModifierKeys({ ctrl: true, shift: true }, () => {
+1 -534
View File
@@ -1,9 +1,7 @@
import React from "react";
import { vi } from "vitest";
import { KEYS, ROUNDNESS, reseed } from "@excalidraw/common";
import { getElementBounds, getElementLineSegments } from "@excalidraw/element";
import { pointFrom, pointRotateRads, type LocalPoint } from "@excalidraw/math";
import { KEYS, reseed } from "@excalidraw/common";
import { SHAPES } from "../components/shapes";
@@ -14,7 +12,6 @@ import * as StaticScene from "../renderer/staticScene";
import { API } from "./helpers/api";
import { Keyboard, Pointer, UI } from "./helpers/ui";
import {
act,
render,
fireEvent,
mockBoundingClientRect,
@@ -42,19 +39,6 @@ const { h } = window;
const mouse = new Pointer("mouse");
const getOutlineBounds = (element: ReturnType<typeof API.createElement>) => {
const sceneElement = API.getElement(element);
const elementsMap = h.scene.getNonDeletedElementsMap();
const points = getElementLineSegments(sceneElement, elementsMap).flat();
return [
Math.min(...points.map((point) => point[0])),
Math.min(...points.map((point) => point[1])),
Math.max(...points.map((point) => point[0])),
Math.max(...points.map((point) => point[1])),
] as const;
};
describe("box-selection", () => {
beforeEach(async () => {
await render(<Excalidraw />);
@@ -124,523 +108,6 @@ describe("box-selection", () => {
assertSelectedElements([]);
});
it("should not select an element when the selection box only partially overlaps it", () => {
const rect1 = API.createElement({
type: "rectangle",
x: 0,
y: 0,
width: 50,
height: 50,
backgroundColor: "red",
fillStyle: "solid",
});
API.setElements([rect1]);
mouse.downAt(25, -20);
mouse.move(-1000, -1000);
mouse.moveTo(75, 70);
mouse.up();
assertSelectedElements([]);
});
});
describe("lasso reselection", () => {
beforeEach(async () => {
await render(<Excalidraw />);
});
it("should allow ctrl+alt lasso reselection when starting inside the active common bounds", () => {
const rectA = API.createElement({
type: "rectangle",
x: 0,
y: 0,
width: 100,
height: 100,
backgroundColor: "red",
fillStyle: "solid",
});
const rectB = API.createElement({
type: "rectangle",
x: 220,
y: 0,
width: 100,
height: 100,
backgroundColor: "blue",
fillStyle: "solid",
});
API.setElements([rectA, rectB]);
mouse.select([rectA, rectB]);
act(() => {
h.app.setActiveTool({ type: "lasso" });
});
Keyboard.withModifierKeys({ ctrl: true, alt: true }, () => {
mouse.downAt(110, 50);
mouse.moveTo(50, -20);
expect(h.app.lassoTrail.hasCurrentTrail).toBe(true);
mouse.moveTo(-20, 50);
mouse.moveTo(50, 120);
mouse.moveTo(110, 50);
mouse.up();
});
assertSelectedElements([rectA.id]);
});
});
describe("box-selection overlap mode", () => {
const boxSelect = (
startX: number,
startY: number,
endX: number,
endY: number,
) => {
mouse.downAt(startX, startY);
mouse.move(-1000, -1000);
mouse.moveTo(endX, endY);
mouse.up();
};
const boxSelectTopLeftAabbCorner = (
element: ReturnType<typeof API.createElement>,
) => {
const sceneElement = API.getElement(element);
const elementsMap = h.scene.getNonDeletedElementsMap();
const [x1, y1] = getElementBounds(sceneElement, elementsMap);
boxSelect(x1 + 2, y1 + 2, x1 + 12, y1 + 12);
};
const boxSelectTopRightAabbCorner = (
element: ReturnType<typeof API.createElement>,
) => {
const sceneElement = API.getElement(element);
const elementsMap = h.scene.getNonDeletedElementsMap();
const [, y1, x2] = getElementBounds(sceneElement, elementsMap);
boxSelect(x2 - 12, y1 + 2, x2 - 2, y1 + 12);
};
const boxSelectTopLeftRotatedLocalBoundsCorner = (
element: ReturnType<typeof API.createElement>,
) => {
const sceneElement = API.getElement(element);
const elementsMap = h.scene.getNonDeletedElementsMap();
const [x1, y1, x2, y2] = getElementBounds(sceneElement, elementsMap, true);
const center = pointFrom((x1 + x2) / 2, (y1 + y2) / 2);
const [cornerX, cornerY] = pointRotateRads(
pointFrom(x1, y1),
center,
sceneElement.angle,
);
boxSelect(cornerX - 4, cornerY - 4, cornerX + 4, cornerY + 4);
};
beforeEach(async () => {
await render(
<Excalidraw
initialData={{ appState: { boxSelectionMode: "overlap" } }}
/>,
);
});
it("should select an element when the selection box partially overlaps it", () => {
const rect1 = API.createElement({
type: "rectangle",
x: 0,
y: 0,
width: 50,
height: 50,
backgroundColor: "red",
fillStyle: "solid",
});
API.setElements([rect1]);
boxSelect(25, -20, 75, 70);
assertSelectedElements([rect1.id]);
});
it("should not select a transparent rectangle when the selection box stays inside it", () => {
const rect1 = API.createElement({
type: "rectangle",
x: 0,
y: 0,
width: 100,
height: 100,
backgroundColor: "transparent",
fillStyle: "solid",
});
API.setElements([rect1]);
boxSelect(25, 25, 75, 75);
assertSelectedElements([]);
});
it("should select a transparent rectangle when the selection box crosses its outline", () => {
const rect1 = API.createElement({
type: "rectangle",
x: 0,
y: 0,
width: 100,
height: 100,
backgroundColor: "transparent",
fillStyle: "solid",
});
API.setElements([rect1]);
boxSelect(25, 25, 125, 75);
assertSelectedElements([rect1.id]);
});
it("should not select a rotated transparent rectangle when the selection box stays inside it", () => {
const rect1 = API.createElement({
type: "rectangle",
x: 0,
y: 0,
width: 100,
height: 100,
angle: Math.PI / 4,
backgroundColor: "transparent",
fillStyle: "solid",
});
API.setElements([rect1]);
boxSelect(40, 40, 60, 60);
assertSelectedElements([]);
});
it("should select a rotated rounded rectangle when the selection box contains its outline but not its bounds", () => {
const rect = API.createElement({
type: "rectangle",
x: 0,
y: 0,
width: 100,
height: 180,
angle: Math.PI / 6,
backgroundColor: "transparent",
fillStyle: "solid",
roundness: { type: ROUNDNESS.ADAPTIVE_RADIUS },
roughness: 0,
});
API.setElements([rect]);
const sceneRect = API.getElement(rect);
const elementsMap = h.scene.getNonDeletedElementsMap();
const [boundsX1, boundsY1, boundsX2, boundsY2] = getElementBounds(
sceneRect,
elementsMap,
);
const [outlineX1, outlineY1, outlineX2, outlineY2] = getOutlineBounds(rect);
expect(outlineX1).toBeGreaterThan(boundsX1 - 1);
expect(outlineY1).toBeGreaterThan(boundsY1 - 1);
expect(outlineX2).toBeLessThan(boundsX2 + 1);
expect(outlineY2).toBeLessThan(boundsY2 + 1);
boxSelect(
outlineX1 - (outlineX1 - boundsX1) / 2,
outlineY1 - (outlineY1 - boundsY1) / 2,
outlineX2 + (boundsX2 - outlineX2) / 2,
outlineY2 + (boundsY2 - outlineY2) / 2,
);
assertSelectedElements([rect.id]);
});
it("should not select a filled rotated rectangle when the selection box only overlaps its axis-aligned bounds", () => {
const rect = API.createElement({
type: "rectangle",
x: 0,
y: 0,
width: 100,
height: 100,
angle: Math.PI / 4,
backgroundColor: "red",
fillStyle: "solid",
});
API.setElements([rect]);
boxSelectTopLeftAabbCorner(rect);
assertSelectedElements([]);
});
it("should not select a filled ellipse when the selection box only overlaps its bounds corner", () => {
const ellipse = API.createElement({
type: "ellipse",
x: 0,
y: 0,
width: 100,
height: 100,
backgroundColor: "red",
fillStyle: "solid",
});
API.setElements([ellipse]);
boxSelectTopRightAabbCorner(ellipse);
assertSelectedElements([]);
});
it("should not select a filled diamond when the selection box only overlaps its bounds corner", () => {
const diamond = API.createElement({
type: "diamond",
x: 0,
y: 0,
width: 100,
height: 100,
backgroundColor: "red",
fillStyle: "solid",
});
API.setElements([diamond]);
boxSelectTopRightAabbCorner(diamond);
assertSelectedElements([]);
});
it("should not select a filled rotated ellipse when the selection box only overlaps its axis-aligned bounds", () => {
const ellipse = API.createElement({
type: "ellipse",
x: 0,
y: 0,
width: 100,
height: 100,
angle: Math.PI / 4,
backgroundColor: "red",
fillStyle: "solid",
});
API.setElements([ellipse]);
boxSelectTopLeftRotatedLocalBoundsCorner(ellipse);
assertSelectedElements([]);
});
it("should not select a filled rotated diamond when the selection box only overlaps its rotated local bounds", () => {
const diamond = API.createElement({
type: "diamond",
x: 0,
y: 0,
width: 100,
height: 100,
angle: Math.PI / 4,
backgroundColor: "red",
fillStyle: "solid",
});
API.setElements([diamond]);
boxSelectTopLeftRotatedLocalBoundsCorner(diamond);
assertSelectedElements([]);
});
it("should not select rotated text when the selection box only overlaps its axis-aligned bounds", () => {
const text = API.createElement({
type: "text",
x: 0,
y: 0,
width: 100,
height: 100,
angle: Math.PI / 4,
text: "test",
});
API.setElements([text]);
boxSelect(-18, -18, -8, -8);
assertSelectedElements([]);
});
it("should not select rotated image when the selection box only overlaps its axis-aligned bounds", () => {
const image = API.createElement({
type: "image",
x: 0,
y: 0,
width: 100,
height: 100,
angle: Math.PI / 4,
fileId: "file_A",
status: "saved",
});
API.setElements([image]);
boxSelect(-18, -18, -8, -8);
assertSelectedElements([]);
});
it("should deselect a selected rotated rectangle when clicking in the empty corner of its axis-aligned bounds", () => {
const rect = API.createElement({
type: "rectangle",
x: 0,
y: 0,
width: 100,
height: 100,
angle: Math.PI / 4,
backgroundColor: "red",
fillStyle: "solid",
});
API.setElements([rect]);
mouse.clickAt(50, 50);
assertSelectedElements([rect.id]);
const sceneRect = API.getElement(rect);
const elementsMap = h.scene.getNonDeletedElementsMap();
const [x1, y1] = getElementBounds(sceneRect, elementsMap);
mouse.clickAt(x1 + 2, y1 + 2);
assertSelectedElements([]);
});
it("should not select a line when the selection box only overlaps its bounds", () => {
const line = API.createElement({
type: "line",
x: 0,
y: 0,
width: 100,
height: 100,
backgroundColor: "transparent",
points: [pointFrom<LocalPoint>(0, 0), pointFrom<LocalPoint>(100, 100)],
});
API.setElements([line]);
boxSelect(20, 50, 30, 60);
assertSelectedElements([]);
});
it("should not click-select rotated freedraw in the corner of its axis-aligned bounds", () => {
const freedraw = API.createElement({
type: "freedraw",
x: 0,
y: 0,
width: 100,
height: 100,
angle: Math.PI / 4,
backgroundColor: "transparent",
points: [
pointFrom<LocalPoint>(0, 0),
pointFrom<LocalPoint>(100, 0),
pointFrom<LocalPoint>(100, 100),
pointFrom<LocalPoint>(0, 100),
pointFrom<LocalPoint>(0, 0),
],
});
API.setElements([freedraw]);
const sceneFreedraw = API.getElement(freedraw);
const elementsMap = h.scene.getNonDeletedElementsMap();
const [x1, y1] = getElementBounds(sceneFreedraw, elementsMap);
mouse.clickAt(x1 + 2, y1 + 2);
assertSelectedElements([]);
});
it("should not select a freedraw when the selection box only overlaps its bounds", () => {
const freedraw = API.createElement({
type: "freedraw",
x: 0,
y: 0,
width: 100,
height: 100,
backgroundColor: "transparent",
points: [
pointFrom<LocalPoint>(0, 0),
pointFrom<LocalPoint>(50, 50),
pointFrom<LocalPoint>(100, 100),
],
});
API.setElements([freedraw]);
boxSelect(20, 50, 30, 60);
assertSelectedElements([]);
});
it("should not select a transparent framed element when the selection box stays inside its clipped bounds", () => {
const frame = API.createElement({
type: "frame",
x: 0,
y: 0,
width: 100,
height: 100,
backgroundColor: "transparent",
fillStyle: "solid",
});
const rect1 = API.createElement({
type: "rectangle",
x: 50,
y: 10,
width: 100,
height: 80,
frameId: frame.id,
backgroundColor: "transparent",
fillStyle: "solid",
});
API.setElements([frame, rect1]);
boxSelect(60, 20, 90, 60);
assertSelectedElements([]);
});
it("should not select a framed element when selection only overlaps its clipped-out outline", () => {
const frame = API.createElement({
type: "frame",
x: 100,
y: 100,
width: 100,
height: 100,
});
const rect1 = API.createElement({
type: "rectangle",
x: 50,
y: 50,
width: 200,
height: 200,
frameId: frame.id,
backgroundColor: "red",
fillStyle: "solid",
});
API.setElements([frame, rect1]);
boxSelect(40, 170, 70, 220);
assertSelectedElements([]);
});
});
describe("inner box-selection", () => {
-833
View File
@@ -1,833 +0,0 @@
import { arrayToMap } from "@excalidraw/common";
import {
pointFrom,
rangeInclusive,
type GlobalPoint,
type Radians,
} from "@excalidraw/math";
import type { ExcalidrawElement } from "@excalidraw/element/types";
import { getDefaultAppState } from "../appState";
import {
getElementsCorners,
getVisibleGaps,
getReferenceSnapPoints,
SnapCache,
snapDraggedElements,
} from "../snapping";
import { API } from "./helpers/api";
import type {
AppClassProperties,
AppState,
NormalizedZoomValue,
} from "../types";
type ReferenceSnapPoints = NonNullable<
ReturnType<typeof SnapCache.getReferenceSnapPoints>
>;
const NO_MODIFIER_KEYS = {
altKey: false,
ctrlKey: false,
metaKey: false,
shiftKey: false,
};
const createSnappingApp = (appState: Partial<AppState> = {}) =>
({
props: {},
state: {
...getDefaultAppState(),
objectsSnapModeEnabled: true,
width: 1000,
height: 1000,
offsetLeft: 0,
offsetTop: 0,
...appState,
},
} as AppClassProperties);
const getHorizontalPointSnapLineCoordinates = (
snapLines: ReturnType<typeof snapDraggedElements>["snapLines"],
) => {
return snapLines
.filter((snapLine) => snapLine.type === "points")
.filter((snapLine) => {
const [firstPoint, lastPoint] = snapLine.points;
return firstPoint[1] === lastPoint[1];
})
.map((snapLine) => {
return snapLine.points[0][1];
})
.sort((a, b) => a - b);
};
const getVerticalPointSnapLineCoordinates = (
snapLines: ReturnType<typeof snapDraggedElements>["snapLines"],
) => {
return snapLines
.filter((snapLine) => snapLine.type === "points")
.filter((snapLine) => {
const [firstPoint, lastPoint] = snapLine.points;
return firstPoint[0] === lastPoint[0];
})
.map((snapLine) => {
return snapLine.points[0][0];
})
.sort((a, b) => a - b);
};
const getHorizontalPointSnapLineMaxX = (
snapLines: ReturnType<typeof snapDraggedElements>["snapLines"],
) => {
const horizontalSnapLine = snapLines
.filter((snapLine) => snapLine.type === "points")
.find((snapLine) => {
const [firstPoint, lastPoint] = snapLine.points;
return firstPoint[1] === lastPoint[1];
});
if (!horizontalSnapLine) {
return null;
}
return horizontalSnapLine.points[horizontalSnapLine.points.length - 1][0];
};
const getHorizontalPointSnapLineXRange = (
snapLines: ReturnType<typeof snapDraggedElements>["snapLines"],
) => {
const horizontalSnapLine = snapLines
.filter((snapLine) => snapLine.type === "points")
.find((snapLine) => {
const [firstPoint, lastPoint] = snapLine.points;
return firstPoint[1] === lastPoint[1];
});
if (!horizontalSnapLine) {
return null;
}
return [
horizontalSnapLine.points[0][0],
horizontalSnapLine.points[horizontalSnapLine.points.length - 1][0],
] as const;
};
const getHorizontalGapSnapLines = (
snapLines: ReturnType<typeof snapDraggedElements>["snapLines"],
) => {
return snapLines.filter(
(snapLine) =>
snapLine.type === "gap" && snapLine.direction === "horizontal",
);
};
const getVerticalGapSnapLines = (
snapLines: ReturnType<typeof snapDraggedElements>["snapLines"],
) => {
return snapLines.filter(
(snapLine) => snapLine.type === "gap" && snapLine.direction === "vertical",
);
};
const getPointKeys = (points: ReturnType<typeof getElementsCorners>) => {
return points.map((point) => point.join(","));
};
const getReferenceSnapPointKeys = (
elements: ExcalidrawElement[],
selectedElements: ExcalidrawElement[],
app: AppClassProperties,
) => {
return new Set(
getReferenceSnapPoints(
elements,
selectedElements,
app.state,
arrayToMap(elements),
).map((snapPoint) => snapPoint.point.join(",")),
);
};
const primeReferenceSnapPoints = (
elements: ExcalidrawElement[],
selectedElements: ExcalidrawElement[],
) => {
const selectedElementIds = new Set(
selectedElements.map((element) => element.id),
);
const elementsMap = arrayToMap(elements);
SnapCache.setReferenceSnapPoints(
elements
.filter((element) => !selectedElementIds.has(element.id))
.flatMap((element) => {
const corners = getElementsCorners([element], elementsMap);
return corners.map((point, index) => ({
point,
type: index === corners.length - 1 ? "center" : "outer",
snapSourceId: element.id,
}));
}) as Parameters<typeof SnapCache.setReferenceSnapPoints>[0],
);
};
describe("snapping", () => {
afterEach(() => {
SnapCache.destroy();
});
it("does not use frame children as references when snapping outside elements", () => {
const frame = API.createElement({
type: "frame",
id: "frame",
x: 0,
y: 0,
width: 300,
height: 300,
});
const frameChild = API.createElement({
type: "rectangle",
id: "frameChild",
x: 37,
y: 53,
width: 71,
height: 83,
frameId: frame.id,
});
const selected = API.createElement({
type: "rectangle",
id: "selected",
x: 400,
y: 50,
width: 100,
height: 100,
});
const elements = [frame, frameChild, selected];
const app = createSnappingApp({
selectedElementIds: { [selected.id]: true },
});
const referenceSnapPointKeys = getReferenceSnapPointKeys(
elements,
[selected],
app,
);
const frameChildPointKeys = getPointKeys(
getElementsCorners([frameChild], arrayToMap(elements)),
);
expect(
frameChildPointKeys.some((pointKey) =>
referenceSnapPointKeys.has(pointKey),
),
).toBe(false);
});
it("uses frame siblings as references when snapping elements in the same frame", () => {
const frame = API.createElement({
type: "frame",
id: "frame",
x: 0,
y: 0,
width: 300,
height: 300,
});
const sibling = API.createElement({
type: "rectangle",
id: "sibling",
x: 37,
y: 53,
width: 71,
height: 83,
frameId: frame.id,
});
const selected = API.createElement({
type: "rectangle",
id: "selected",
x: 150,
y: 50,
width: 100,
height: 100,
frameId: frame.id,
});
const elements = [frame, sibling, selected];
const app = createSnappingApp({
selectedElementIds: { [selected.id]: true },
});
const referenceSnapPointKeys = getReferenceSnapPointKeys(
elements,
[selected],
app,
);
const siblingPointKeys = getPointKeys(
getElementsCorners([sibling], arrayToMap(elements)),
);
expect(
siblingPointKeys.some((pointKey) => referenceSnapPointKeys.has(pointKey)),
).toBe(true);
});
it("does not use frame children as references when snapping the frame itself", () => {
const frame = API.createElement({
type: "frame",
id: "frame",
x: 0,
y: 0,
width: 300,
height: 300,
});
const frameChild = API.createElement({
type: "rectangle",
id: "frameChild",
x: 37,
y: 53,
width: 71,
height: 83,
frameId: frame.id,
});
const elements = [frame, frameChild];
const app = createSnappingApp({
selectedElementIds: { [frame.id]: true },
});
const referenceSnapPointKeys = getReferenceSnapPointKeys(
elements,
[frame],
app,
);
const frameChildPointKeys = getPointKeys(
getElementsCorners([frameChild], arrayToMap(elements)),
);
expect(
frameChildPointKeys.some((pointKey) =>
referenceSnapPointKeys.has(pointKey),
),
).toBe(false);
});
it("does not use frame children as visible gap references when snapping outside elements", () => {
const frame = API.createElement({
type: "frame",
id: "frame",
x: 0,
y: 0,
width: 500,
height: 300,
});
const frameChildA = API.createElement({
type: "rectangle",
id: "frameChildA",
x: 50,
y: 50,
width: 100,
height: 100,
frameId: frame.id,
});
const frameChildB = API.createElement({
type: "rectangle",
id: "frameChildB",
x: 250,
y: 50,
width: 100,
height: 100,
frameId: frame.id,
});
const selected = API.createElement({
type: "rectangle",
id: "selected",
x: 700,
y: 50,
width: 100,
height: 100,
});
const elements = [frame, frameChildA, frameChildB, selected];
const app = createSnappingApp({
selectedElementIds: { [selected.id]: true },
});
const visibleGaps = getVisibleGaps(
elements,
[selected],
app.state,
arrayToMap(elements),
);
expect(visibleGaps.horizontalGaps).toHaveLength(0);
expect(visibleGaps.verticalGaps).toHaveLength(0);
});
it("filters center and inner outer point snaplines for the same reference", () => {
const angle = 0.68 as Radians;
const reference = API.createElement({
type: "rectangle",
id: "reference",
x: 0,
y: 0,
width: 140,
height: 140,
angle,
});
const selected = API.createElement({
type: "rectangle",
id: "selected",
x: 200,
y: 0,
width: 140,
height: 140,
angle,
});
const elements = [reference, selected];
const app = createSnappingApp({
selectedElementIds: { [selected.id]: true },
});
primeReferenceSnapPoints(elements, [selected]);
const { snapLines } = snapDraggedElements(
elements,
{ x: 0, y: 0 },
app,
NO_MODIFIER_KEYS,
arrayToMap(elements),
);
expect(getHorizontalPointSnapLineCoordinates(snapLines)).toHaveLength(2);
});
it("keeps a snapline that is redundant for one reference but needed for another", () => {
const angle = 0.68 as Radians;
const selected = API.createElement({
type: "rectangle",
id: "selected",
x: 200,
y: 0,
width: 140,
height: 140,
angle,
});
const elements = [selected];
const elementsMap = arrayToMap(elements);
const selectedSnapPoints = getElementsCorners([selected], elementsMap);
const outerSnapPoints = selectedSnapPoints.slice(0, -1);
const centerSnapPoint = selectedSnapPoints[selectedSnapPoints.length - 1];
const innerOuterSnapPoint = [...outerSnapPoints].sort(
(a, b) => a[1] - b[1],
)[1];
const app = createSnappingApp({
selectedElementIds: { [selected.id]: true },
});
const referenceSnapPoints: ReferenceSnapPoints = [
...outerSnapPoints.map((point) => ({
point: pointFrom<GlobalPoint>(point[0] - 200, point[1]),
type: "outer" as const,
snapSourceId: "referenceA",
})),
{
point: pointFrom<GlobalPoint>(
centerSnapPoint[0] - 200,
centerSnapPoint[1],
),
type: "center" as const,
snapSourceId: "referenceA",
},
{
point: pointFrom<GlobalPoint>(
innerOuterSnapPoint[0] - 300,
innerOuterSnapPoint[1],
),
type: "outer" as const,
snapSourceId: "referenceB",
},
];
SnapCache.setReferenceSnapPoints(referenceSnapPoints);
const { snapLines } = snapDraggedElements(
elements,
{ x: 0, y: 0 },
app,
NO_MODIFIER_KEYS,
elementsMap,
);
expect(getHorizontalPointSnapLineCoordinates(snapLines)).toHaveLength(3);
});
it("keeps a center snapline when no outer snaplines imply it", () => {
const reference = API.createElement({
type: "rectangle",
id: "reference",
x: 0,
y: 0,
width: 100,
height: 100,
});
const selected = API.createElement({
type: "rectangle",
id: "selected",
x: 200,
y: 25,
width: 50,
height: 50,
});
const elements = [reference, selected];
const app = createSnappingApp({
selectedElementIds: { [selected.id]: true },
});
primeReferenceSnapPoints(elements, [selected]);
const { snapLines } = snapDraggedElements(
elements,
{ x: 0, y: 0 },
app,
NO_MODIFIER_KEYS,
arrayToMap(elements),
);
expect(getHorizontalPointSnapLineCoordinates(snapLines)).toEqual([50]);
});
it("filters center snaplines when matching outer offsets differ by rounding precision", () => {
const selected = API.createElement({
type: "rectangle",
id: "selected",
x: 2532.227563984471,
y: -1553.9657067952232,
width: 140.1015625,
height: 140.1015625,
});
const reference = API.createElement({
type: "rectangle",
id: "reference",
x: 2532.2275640966914,
y: -1299.4323092037737,
width: 140.1015625,
height: 140.1015625,
});
const elements = [reference, selected];
const app = createSnappingApp({
selectedElementIds: { [selected.id]: true },
});
primeReferenceSnapPoints(elements, [selected]);
const { snapLines } = snapDraggedElements(
elements,
{ x: 0, y: 0 },
app,
NO_MODIFIER_KEYS,
arrayToMap(elements),
);
expect(getVerticalPointSnapLineCoordinates(snapLines)).toEqual([
2532.227564, 2672.329126,
]);
});
it("keeps outer snaplines stable while dragging a snapped element through rounding-equivalent offsets", () => {
const referenceMiddle = API.createElement({
type: "rectangle",
id: "referenceMiddle",
x: 2532.22756398447,
y: -1553.9657067952237,
width: 140.1015625,
height: 140.1015625,
});
const referenceAbove = API.createElement({
type: "rectangle",
id: "referenceAbove",
x: 2532.2275637826165,
y: -1779.7363232531268,
width: 140.1015625,
height: 140.1015625,
});
const selected = API.createElement({
type: "rectangle",
id: "selected",
x: 2532.227563096691,
y: -1328.1950902037736,
width: 140.1015625,
height: 140.1015625,
});
const elements = [referenceAbove, referenceMiddle, selected];
const app = createSnappingApp({
selectedElementIds: { [selected.id]: true },
});
primeReferenceSnapPoints(elements, [selected]);
for (const dragOffsetX of [-4, -1, -0.1, 0, 0.1, 1, 4]) {
const { snapLines } = snapDraggedElements(
elements,
{ x: dragOffsetX, y: 0 },
app,
NO_MODIFIER_KEYS,
arrayToMap(elements),
);
const coordinates = getVerticalPointSnapLineCoordinates(snapLines);
expect(coordinates).toHaveLength(2);
expect(coordinates[1] - coordinates[0]).toBeCloseTo(selected.width, 5);
}
});
it("keeps same-offset point snaps even across distant references", () => {
const selected = API.createElement({
type: "rectangle",
id: "selected",
x: 0,
y: 0,
width: 100,
height: 100,
});
const elements = [selected];
const app = createSnappingApp({
selectedElementIds: { [selected.id]: true },
});
SnapCache.setReferenceSnapPoints([
{
point: pointFrom<GlobalPoint>(220, 50),
type: "center",
snapSourceId: "near",
},
{
point: pointFrom<GlobalPoint>(900, 50),
type: "center",
snapSourceId: "far",
},
]);
const { snapLines } = snapDraggedElements(
elements,
{ x: 0, y: 0 },
app,
NO_MODIFIER_KEYS,
arrayToMap(elements),
);
expect(getHorizontalPointSnapLineMaxX(snapLines)).toBe(900);
});
it("prefers a nearby point snap over a slightly better far offset", () => {
const selected = API.createElement({
type: "rectangle",
id: "selected",
x: 0,
y: 0,
width: 100,
height: 100,
});
const elements = [selected];
const app = createSnappingApp({
selectedElementIds: { [selected.id]: true },
});
SnapCache.setReferenceSnapPoints([
{
point: pointFrom<GlobalPoint>(220, 54),
type: "center",
snapSourceId: "near",
},
{
point: pointFrom<GlobalPoint>(900, 50),
type: "center",
snapSourceId: "far",
},
]);
const { snapOffset, snapLines } = snapDraggedElements(
elements,
{ x: 0, y: 0 },
app,
NO_MODIFIER_KEYS,
arrayToMap(elements),
);
expect(snapOffset.y).toBe(4);
expect(getHorizontalPointSnapLineMaxX(snapLines)).toBe(220);
});
it("keeps same-offset point snaps when references form a continuous cluster", () => {
const selected = API.createElement({
type: "rectangle",
id: "selected",
x: 0,
y: 0,
width: 100,
height: 100,
});
const elements = [selected];
const app = createSnappingApp({
selectedElementIds: { [selected.id]: true },
});
SnapCache.setReferenceSnapPoints([
{
point: pointFrom<GlobalPoint>(200, 50),
type: "center",
snapSourceId: "referenceA",
},
{
point: pointFrom<GlobalPoint>(350, 50),
type: "center",
snapSourceId: "referenceB",
},
{
point: pointFrom<GlobalPoint>(500, 50),
type: "center",
snapSourceId: "referenceC",
},
]);
const { snapLines } = snapDraggedElements(
elements,
{ x: 0, y: 0 },
app,
NO_MODIFIER_KEYS,
arrayToMap(elements),
);
expect(getHorizontalPointSnapLineMaxX(snapLines)).toBe(500);
});
it("keeps same-source same-offset point snaps across zoom-scaled cluster breaks", () => {
const reference = API.createElement({
type: "rectangle",
id: "reference",
x: 0,
y: 0,
width: 140.1015625,
height: 140.1015625,
});
const selected = API.createElement({
type: "rectangle",
id: "selected",
x: 338.608871112217,
y: 0,
width: 140.1015625,
height: 140.1015625,
});
const elements = [reference, selected];
const app = createSnappingApp({
selectedElementIds: { [selected.id]: true },
zoom: { value: 1.5 as NormalizedZoomValue },
});
primeReferenceSnapPoints(elements, [selected]);
const { snapLines } = snapDraggedElements(
elements,
{ x: 0, y: 0 },
app,
NO_MODIFIER_KEYS,
arrayToMap(elements),
);
const range = getHorizontalPointSnapLineXRange(snapLines);
expect(range).not.toBe(null);
expect(range![0]).toBeCloseTo(reference.x, 6);
expect(range![1]).toBeCloseTo(selected.x + selected.width, 6);
});
it("renders gap snaplines when rounded bounds touch the reference gap overlap", () => {
const selected = API.createElement({
type: "rectangle",
id: "selected",
x: 0,
y: 0.0000004,
width: 100,
height: 100,
});
const elements = [selected];
const app = createSnappingApp({
selectedElementIds: { [selected.id]: true },
});
SnapCache.setVisibleGaps({
horizontalGaps: [
{
startBounds: [200, -100, 300, 0],
endBounds: [400, -100, 500, 0],
startSide: [pointFrom(300, -100), pointFrom(300, 0)],
endSide: [pointFrom(400, -100), pointFrom(400, 0)],
overlap: rangeInclusive(-100, 0),
length: 100,
},
],
verticalGaps: [],
});
const { snapLines } = snapDraggedElements(
elements,
{ x: 0, y: 0 },
app,
NO_MODIFIER_KEYS,
arrayToMap(elements),
);
expect(getHorizontalGapSnapLines(snapLines)).toHaveLength(2);
});
it("renders gap snaplines when the winning gap offset only differs by rounding precision", () => {
const selected = API.createElement({
type: "rectangle",
id: "selected",
x: 0,
y: 399.999999,
width: 100,
height: 100,
});
const elements = [selected];
const app = createSnappingApp({
selectedElementIds: { [selected.id]: true },
});
SnapCache.setReferenceSnapPoints([
{
point: pointFrom<GlobalPoint>(0, 399.999999),
type: "outer",
snapSourceId: "reference",
},
]);
SnapCache.setVisibleGaps({
horizontalGaps: [],
verticalGaps: [
{
startBounds: [0, 100, 100, 200],
endBounds: [0, 250, 100, 350],
startSide: [pointFrom(0, 200), pointFrom(100, 200)],
endSide: [pointFrom(0, 250), pointFrom(100, 250)],
overlap: rangeInclusive(0, 100),
length: 50,
},
],
});
const { snapLines } = snapDraggedElements(
elements,
{ x: 0, y: 0 },
app,
NO_MODIFIER_KEYS,
arrayToMap(elements),
);
expect(getVerticalGapSnapLines(snapLines)).toHaveLength(2);
});
});
+5 -21
View File
@@ -269,8 +269,6 @@ export type ObservedElementsAppState = {
activeLockedId: AppState["activeLockedId"];
};
export type BoxSelectionMode = "contain" | "overlap";
export interface AppState {
contextMenu: {
items: ContextMenuItems;
@@ -309,16 +307,11 @@ export interface AppState {
* `bindingPreference` and keyboard modifiers (ctrl/alt)
*/
isBindingEnabled: boolean;
/** user box selection preference; defaults to "contain" when unset */
boxSelectionMode: BoxSelectionMode;
/** user arrow binding preference */
bindingPreference: "enabled" | "disabled";
/** user preference whether arrow snap to midpoints while binding */
isMidpointSnappingEnabled: boolean;
/**
* The bindable element the UI highlights for the user when an arrow is
* dragged or otherwise its endpoint being close to said element.
*/
startBoundElement: NonDeleted<ExcalidrawBindableElement> | null;
suggestedBinding: {
element: NonDeleted<ExcalidrawBindableElement>;
midPoint?: GlobalPoint;
@@ -350,11 +343,8 @@ export interface AppState {
type: "selection" | "lasso";
initialized: boolean;
};
// Pen handling
penMode: boolean;
penDetected: boolean;
exportBackground: boolean;
exportEmbedScene: boolean;
exportWithDarkMode: boolean;
@@ -478,9 +468,6 @@ 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 };
// Stores the current bind mode which is detemined at various points during
// a drag operation (like pointer position vs bindable element) but needed
// globally for calculating the binding strategy
bindMode: BindMode;
}
@@ -496,7 +483,10 @@ export type SearchMatch = {
}[];
};
export type UIAppState = Omit<AppState, "cursorButton" | "scrollX" | "scrollY">;
export type UIAppState = Omit<
AppState,
"startBoundElement" | "cursorButton" | "scrollX" | "scrollY"
>;
export type NormalizedZoomValue = number & { _brand: "normalizedZoom" };
@@ -876,13 +866,8 @@ export type PointerDownState = Readonly<{
// Whether selected element(s) were duplicated, might change during the
// pointer interaction
hasBeenDuplicated: boolean;
// Whether the pointer is hitting the common bounding box of selected
// elements, which is useful for discriminating between selecitng
// the entire selection vs a specific element
hasHitCommonBoundingBoxOfSelectedElements: boolean;
};
// This is determined on the initial pointer down event to
// set various interaction modalities
withCmdOrCtrl: boolean;
drag: {
// Might change during the pointer interaction
@@ -908,7 +893,6 @@ export type PointerDownState = Readonly<{
onKeyUp: null | ((event: KeyboardEvent) => void);
};
boxSelection: {
// If the box selection tool is activated on pointer down
hasOccurred: boolean;
};
}>;
+2
View File
@@ -1,3 +1,5 @@
export const PRECISION = 10e-5;
// Legendre-Gauss abscissae (x values) and weights for n=24
// Refeerence: https://pomax.github.io/bezierinfo/legendre-gauss.html
export const LegendreGaussN24TValues = [
+5 -39
View File
@@ -137,17 +137,8 @@ const calculate = <Point extends GlobalPoint | LocalPoint>(
[t0, s0]: [number, number],
l: LineSegment<Point>,
c: Curve<Point>,
tolerance: number = 1e-2,
iterLimit: number = 4,
) => {
const solution = solveWithAnalyticalJacobian(
c,
l,
t0,
s0,
tolerance,
iterLimit,
);
const solution = solveWithAnalyticalJacobian(c, l, t0, s0, 1e-2, 4);
if (!solution) {
return null;
@@ -167,43 +158,18 @@ const calculate = <Point extends GlobalPoint | LocalPoint>(
*/
export function curveIntersectLineSegment<
Point extends GlobalPoint | LocalPoint,
>(
c: Curve<Point>,
l: LineSegment<Point>,
opts?: {
tolerance?: number;
iterLimit?: number;
},
): Point[] {
let solution = calculate(
initial_guesses[0],
l,
c,
opts?.tolerance,
opts?.iterLimit,
);
>(c: Curve<Point>, l: LineSegment<Point>): Point[] {
let solution = calculate(initial_guesses[0], l, c);
if (solution) {
return [solution];
}
solution = calculate(
initial_guesses[1],
l,
c,
opts?.tolerance,
opts?.iterLimit,
);
solution = calculate(initial_guesses[1], l, c);
if (solution) {
return [solution];
}
solution = calculate(
initial_guesses[2],
l,
c,
opts?.tolerance,
opts?.iterLimit,
);
solution = calculate(initial_guesses[2], l, c);
if (solution) {
return [solution];
}
@@ -13,7 +13,6 @@ exports[`exportToSvg > with default arguments 1`] = `
},
"bindMode": "orbit",
"bindingPreference": "enabled",
"boxSelectionMode": "contain",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@@ -98,6 +97,7 @@ exports[`exportToSvg > with default arguments 1`] = `
"showHyperlinkPopup": false,
"showWelcomeScreen": false,
"snapLines": [],
"startBoundElement": null,
"stats": {
"open": false,
"panels": 3,
-7
View File
@@ -90,13 +90,6 @@ module.exports.woff2BrowserPlugin = () => {
type="font/woff2"
crossorigin="anonymous"
/>
<link
rel="preload"
href="${OSS_FONTS_CDN}fonts/Assistant/Assistant-SemiBold.woff2"
as="font"
type="font/woff2"
crossorigin="anonymous"
/>
<link
rel="preload"
href="${OSS_FONTS_CDN}fonts/ComicShanns/ComicShanns-Regular-279a7b317d12eb88de06167bd672b4b4.woff2"