Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 9448cca81d | |||
| 217c59a13a |
@@ -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.
|
||||
|
||||
@@ -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 }}
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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 }}
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
@@ -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
|
||||
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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]),
|
||||
|
||||
@@ -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);
|
||||
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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(
|
||||
|
||||
@@ -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,8 +18,6 @@ import {
|
||||
getElementLineSegments,
|
||||
getCommonBounds,
|
||||
getElementAbsoluteCoords,
|
||||
doBoundsIntersect,
|
||||
getElementBounds,
|
||||
} from "./bounds";
|
||||
import { mutateElement } from "./mutateElement";
|
||||
import { getBoundTextElement, getContainerElement } from "./textElement";
|
||||
@@ -921,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)
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -88,7 +88,6 @@ export * from "./selection";
|
||||
export * from "./shape";
|
||||
export * from "./showSelectedShapeActions";
|
||||
export * from "./sizeHelpers";
|
||||
export * from "./snapping";
|
||||
export * from "./sortElements";
|
||||
export * from "./store";
|
||||
export * from "./textElement";
|
||||
|
||||
@@ -7,7 +7,6 @@ import {
|
||||
type LocalPoint,
|
||||
pointDistance,
|
||||
vectorFromPoint,
|
||||
line,
|
||||
curveLength,
|
||||
curvePointAtLength,
|
||||
} from "@excalidraw/math";
|
||||
@@ -30,9 +29,6 @@ import {
|
||||
isPathALoop,
|
||||
moveArrowAboveBindable,
|
||||
projectFixedPointOntoDiagonal,
|
||||
snapLinearElementPoint,
|
||||
snapToDiscreteAngle,
|
||||
type SnapLine,
|
||||
type Store,
|
||||
} from "@excalidraw/element";
|
||||
|
||||
@@ -52,7 +48,6 @@ import {
|
||||
calculateFixedPointForNonElbowArrowBinding,
|
||||
getBindingStrategyForDraggingBindingElementEndpoints,
|
||||
isBindingEnabled,
|
||||
maxBindingDistance_simple,
|
||||
snapToMid,
|
||||
updateBoundPoint,
|
||||
} from "./binding";
|
||||
@@ -61,7 +56,6 @@ import {
|
||||
getElementPointsCoords,
|
||||
getMinMaxXYFromCurvePathOps,
|
||||
} from "./bounds";
|
||||
import { getHoveredElementForBinding } from "./collision";
|
||||
|
||||
import { headingIsHorizontal, vectorToHeading } from "./heading";
|
||||
import { mutateElement } from "./mutateElement";
|
||||
@@ -300,10 +294,7 @@ export class LinearElementEditor {
|
||||
scenePointerX: number,
|
||||
scenePointerY: number,
|
||||
linearElementEditor: LinearElementEditor,
|
||||
): Pick<
|
||||
AppState,
|
||||
"suggestedBinding" | "selectedLinearElement" | "snapLines"
|
||||
> | null {
|
||||
): Pick<AppState, "suggestedBinding" | "selectedLinearElement"> | null {
|
||||
const elementsMap = app.scene.getNonDeletedElementsMap();
|
||||
const elements = app.scene.getNonDeletedElements();
|
||||
const { elementId } = linearElementEditor;
|
||||
@@ -320,26 +311,36 @@ export class LinearElementEditor {
|
||||
linearElementEditor.customLineAngle ??
|
||||
determineCustomLinearAngle(pivotPoint, element.points[idx]);
|
||||
|
||||
const { point: newDraggingPointPosition, snapLines } =
|
||||
LinearElementEditor._getSnappedPointForLinearElement({
|
||||
app,
|
||||
event,
|
||||
elements,
|
||||
elementsMap,
|
||||
// Determine if point movement should happen and how much
|
||||
let deltaX = 0;
|
||||
let deltaY = 0;
|
||||
if (shouldRotateWithDiscreteAngle(event)) {
|
||||
const [width, height] = LinearElementEditor._getShiftLockedDelta(
|
||||
element,
|
||||
pointIndex: idx,
|
||||
scenePointerX,
|
||||
scenePointerY,
|
||||
pointerOffset: linearElementEditor.pointerOffset,
|
||||
referencePoint: shouldRotateWithDiscreteAngle(event)
|
||||
? pivotPoint
|
||||
: null,
|
||||
selectedPointsIndices: [idx],
|
||||
elementsMap,
|
||||
pivotPoint,
|
||||
pointFrom(scenePointerX, scenePointerY),
|
||||
event[KEYS.CTRL_OR_CMD] ? null : app.getEffectiveGridSize(),
|
||||
customLineAngle,
|
||||
});
|
||||
);
|
||||
const target = pointFrom<LocalPoint>(
|
||||
width + pivotPoint[0],
|
||||
height + pivotPoint[1],
|
||||
);
|
||||
|
||||
const deltaX = newDraggingPointPosition[0] - point[0];
|
||||
const deltaY = newDraggingPointPosition[1] - point[1];
|
||||
deltaX = target[0] - point[0];
|
||||
deltaY = target[1] - point[1];
|
||||
} else {
|
||||
const newDraggingPointPosition = LinearElementEditor.createPointAt(
|
||||
element,
|
||||
elementsMap,
|
||||
scenePointerX - linearElementEditor.pointerOffset.x,
|
||||
scenePointerY - linearElementEditor.pointerOffset.y,
|
||||
event[KEYS.CTRL_OR_CMD] ? null : app.getEffectiveGridSize(),
|
||||
);
|
||||
deltaX = newDraggingPointPosition[0] - point[0];
|
||||
deltaY = newDraggingPointPosition[1] - point[1];
|
||||
}
|
||||
|
||||
// Apply the point movement if needed
|
||||
let suggestedBinding: AppState["suggestedBinding"] = null;
|
||||
@@ -397,8 +398,6 @@ export class LinearElementEditor {
|
||||
// PERF: Avoid state updates if not absolutely necessary
|
||||
if (
|
||||
app.state.selectedLinearElement?.customLineAngle === customLineAngle &&
|
||||
app.state.snapLines.length === 0 &&
|
||||
snapLines.length === 0 &&
|
||||
linearElementEditor.initialState.altFocusPoint &&
|
||||
(!suggestedBinding ||
|
||||
isShallowEqual(app.state.suggestedBinding ?? [], suggestedBinding))
|
||||
@@ -437,7 +436,6 @@ export class LinearElementEditor {
|
||||
return {
|
||||
selectedLinearElement: newLinearElementEditor,
|
||||
suggestedBinding,
|
||||
snapLines,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -447,10 +445,7 @@ export class LinearElementEditor {
|
||||
scenePointerX: number,
|
||||
scenePointerY: number,
|
||||
linearElementEditor: LinearElementEditor,
|
||||
): Pick<
|
||||
AppState,
|
||||
"suggestedBinding" | "selectedLinearElement" | "snapLines"
|
||||
> | null {
|
||||
): Pick<AppState, "suggestedBinding" | "selectedLinearElement"> | null {
|
||||
const elementsMap = app.scene.getNonDeletedElementsMap();
|
||||
const elements = app.scene.getNonDeletedElements();
|
||||
const { elbowed, elementId, initialState } = linearElementEditor;
|
||||
@@ -498,6 +493,7 @@ export class LinearElementEditor {
|
||||
lastClickedPoint = element.points.length - 1;
|
||||
}
|
||||
|
||||
// point that's being dragged (out of all selected points)
|
||||
const draggingPoint = element.points[lastClickedPoint];
|
||||
// The adjacent point to the one dragged point
|
||||
const pivotPoint =
|
||||
@@ -511,27 +507,35 @@ export class LinearElementEditor {
|
||||
element.points.length - 1,
|
||||
);
|
||||
|
||||
const { point: newDraggingPointPosition, snapLines } =
|
||||
LinearElementEditor._getSnappedPointForLinearElement({
|
||||
app,
|
||||
event,
|
||||
elements,
|
||||
elementsMap,
|
||||
// Determine if point movement should happen and how much
|
||||
let deltaX = 0;
|
||||
let deltaY = 0;
|
||||
if (shouldRotateWithDiscreteAngle(event) && singlePointDragged) {
|
||||
const [width, height] = LinearElementEditor._getShiftLockedDelta(
|
||||
element,
|
||||
pointIndex: lastClickedPoint,
|
||||
scenePointerX,
|
||||
scenePointerY,
|
||||
pointerOffset: linearElementEditor.pointerOffset,
|
||||
referencePoint:
|
||||
shouldRotateWithDiscreteAngle(event) && singlePointDragged
|
||||
? pivotPoint
|
||||
: null,
|
||||
selectedPointsIndices,
|
||||
elementsMap,
|
||||
pivotPoint,
|
||||
pointFrom(scenePointerX, scenePointerY),
|
||||
event[KEYS.CTRL_OR_CMD] ? null : app.getEffectiveGridSize(),
|
||||
customLineAngle,
|
||||
});
|
||||
|
||||
const deltaX = newDraggingPointPosition[0] - draggingPoint[0];
|
||||
const deltaY = newDraggingPointPosition[1] - draggingPoint[1];
|
||||
);
|
||||
const target = pointFrom<LocalPoint>(
|
||||
width + pivotPoint[0],
|
||||
height + pivotPoint[1],
|
||||
);
|
||||
deltaX = target[0] - draggingPoint[0];
|
||||
deltaY = target[1] - draggingPoint[1];
|
||||
} else {
|
||||
const newDraggingPointPosition = LinearElementEditor.createPointAt(
|
||||
element,
|
||||
elementsMap,
|
||||
scenePointerX - linearElementEditor.pointerOffset.x,
|
||||
scenePointerY - linearElementEditor.pointerOffset.y,
|
||||
event[KEYS.CTRL_OR_CMD] ? null : app.getEffectiveGridSize(),
|
||||
);
|
||||
deltaX = newDraggingPointPosition[0] - draggingPoint[0];
|
||||
deltaY = newDraggingPointPosition[1] - draggingPoint[1];
|
||||
}
|
||||
|
||||
// Apply the point movement if needed
|
||||
let suggestedBinding: AppState["suggestedBinding"] = null;
|
||||
@@ -670,7 +674,6 @@ export class LinearElementEditor {
|
||||
return {
|
||||
selectedLinearElement: newLinearElementEditor,
|
||||
suggestedBinding,
|
||||
snapLines,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -1175,10 +1178,7 @@ export class LinearElementEditor {
|
||||
scenePointerX: number,
|
||||
scenePointerY: number,
|
||||
app: AppClassProperties,
|
||||
): {
|
||||
editingLinearElement: LinearElementEditor;
|
||||
snapLines: readonly SnapLine[];
|
||||
} | null {
|
||||
): LinearElementEditor | null {
|
||||
const appState = app.state;
|
||||
if (!appState.selectedLinearElement?.isEditing) {
|
||||
return null;
|
||||
@@ -1187,10 +1187,7 @@ export class LinearElementEditor {
|
||||
const elementsMap = app.scene.getNonDeletedElementsMap();
|
||||
const element = LinearElementEditor.getElement(elementId, elementsMap);
|
||||
if (!element) {
|
||||
return {
|
||||
editingLinearElement: appState.selectedLinearElement,
|
||||
snapLines: appState.snapLines,
|
||||
};
|
||||
return appState.selectedLinearElement;
|
||||
}
|
||||
|
||||
const { points } = element;
|
||||
@@ -1202,37 +1199,36 @@ export class LinearElementEditor {
|
||||
}
|
||||
return appState.selectedLinearElement?.lastUncommittedPoint
|
||||
? {
|
||||
editingLinearElement: {
|
||||
...appState.selectedLinearElement,
|
||||
lastUncommittedPoint: null,
|
||||
},
|
||||
snapLines: [],
|
||||
...appState.selectedLinearElement,
|
||||
lastUncommittedPoint: null,
|
||||
}
|
||||
: {
|
||||
editingLinearElement: appState.selectedLinearElement,
|
||||
snapLines: [],
|
||||
};
|
||||
: appState.selectedLinearElement;
|
||||
}
|
||||
|
||||
const anchor = points[points.length - 2];
|
||||
const elements = app.scene.getNonDeletedElements();
|
||||
const { point: newPoint, snapLines } =
|
||||
LinearElementEditor._getSnappedPointForLinearElement({
|
||||
app,
|
||||
event,
|
||||
elements,
|
||||
elementsMap,
|
||||
let newPoint: LocalPoint;
|
||||
|
||||
if (shouldRotateWithDiscreteAngle(event) && points.length >= 2) {
|
||||
const anchor = points[points.length - 2];
|
||||
const [width, height] = LinearElementEditor._getShiftLockedDelta(
|
||||
element,
|
||||
pointIndex: points.length - 1,
|
||||
scenePointerX,
|
||||
scenePointerY,
|
||||
pointerOffset: appState.selectedLinearElement.pointerOffset,
|
||||
referencePoint:
|
||||
shouldRotateWithDiscreteAngle(event) && points.length >= 2
|
||||
? anchor
|
||||
: null,
|
||||
selectedPointsIndices: [points.length - 1],
|
||||
});
|
||||
elementsMap,
|
||||
anchor,
|
||||
pointFrom(scenePointerX, scenePointerY),
|
||||
event[KEYS.CTRL_OR_CMD] ? null : app.getEffectiveGridSize(),
|
||||
);
|
||||
|
||||
newPoint = pointFrom(width + anchor[0], height + anchor[1]);
|
||||
} else {
|
||||
newPoint = LinearElementEditor.createPointAt(
|
||||
element,
|
||||
elementsMap,
|
||||
scenePointerX - appState.selectedLinearElement.pointerOffset.x,
|
||||
scenePointerY - appState.selectedLinearElement.pointerOffset.y,
|
||||
event[KEYS.CTRL_OR_CMD] || isElbowArrow(element)
|
||||
? null
|
||||
: app.getEffectiveGridSize(),
|
||||
);
|
||||
}
|
||||
|
||||
if (lastPoint === lastUncommittedPoint) {
|
||||
LinearElementEditor.movePoints(
|
||||
@@ -1240,7 +1236,7 @@ export class LinearElementEditor {
|
||||
app.scene,
|
||||
new Map([
|
||||
[
|
||||
points.length - 1,
|
||||
element.points.length - 1,
|
||||
{
|
||||
point: newPoint,
|
||||
},
|
||||
@@ -1250,13 +1246,9 @@ export class LinearElementEditor {
|
||||
} else {
|
||||
LinearElementEditor.addPoints(element, app.scene, [newPoint]);
|
||||
}
|
||||
|
||||
return {
|
||||
editingLinearElement: {
|
||||
...appState.selectedLinearElement,
|
||||
lastUncommittedPoint: element.points[element.points.length - 1],
|
||||
},
|
||||
snapLines,
|
||||
...appState.selectedLinearElement,
|
||||
lastUncommittedPoint: element.points[element.points.length - 1],
|
||||
};
|
||||
}
|
||||
|
||||
@@ -1282,53 +1274,18 @@ export class LinearElementEditor {
|
||||
static getPointsGlobalCoordinates(
|
||||
element: NonDeleted<ExcalidrawLinearElement>,
|
||||
elementsMap: ElementsMap,
|
||||
options: {
|
||||
dragOffset?: { x: number; y: number };
|
||||
excludePointsIndices?: readonly number[];
|
||||
} = {},
|
||||
): GlobalPoint[] {
|
||||
const { dragOffset, excludePointsIndices } = options;
|
||||
|
||||
if (!element.points || element.points.length === 0) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
|
||||
const cx = (x1 + x2) / 2;
|
||||
const cy = (y1 + y2) / 2;
|
||||
|
||||
let elementX = element.x;
|
||||
let elementY = element.y;
|
||||
|
||||
if (dragOffset) {
|
||||
elementX += dragOffset.x;
|
||||
elementY += dragOffset.y;
|
||||
}
|
||||
|
||||
const globalPoints: GlobalPoint[] = [];
|
||||
|
||||
for (let i = 0; i < element.points.length; i++) {
|
||||
// Skip the point being edited if specified
|
||||
if (
|
||||
excludePointsIndices?.length &&
|
||||
excludePointsIndices.find((index) => index === i) !== undefined
|
||||
) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const p = element.points[i];
|
||||
const globalX = elementX + p[0];
|
||||
const globalY = elementY + p[1];
|
||||
|
||||
const rotated = pointRotateRads<GlobalPoint>(
|
||||
pointFrom(globalX, globalY),
|
||||
return element.points.map((p) => {
|
||||
const { x, y } = element;
|
||||
return pointRotateRads(
|
||||
pointFrom(x + p[0], y + p[1]),
|
||||
pointFrom(cx, cy),
|
||||
element.angle,
|
||||
);
|
||||
globalPoints.push(rotated);
|
||||
}
|
||||
|
||||
return globalPoints;
|
||||
});
|
||||
}
|
||||
|
||||
static getPointAtIndexGlobalCoordinates(
|
||||
@@ -1882,222 +1839,6 @@ export class LinearElementEditor {
|
||||
);
|
||||
}
|
||||
|
||||
private static _getPointPlacementGridSize(
|
||||
element: NonDeleted<ExcalidrawLinearElement>,
|
||||
app: AppClassProperties,
|
||||
event: Pick<KeyboardEvent | PointerEvent, typeof KEYS.CTRL_OR_CMD>,
|
||||
): NullableGridSize {
|
||||
return event[KEYS.CTRL_OR_CMD] || isElbowArrow(element)
|
||||
? null
|
||||
: app.getEffectiveGridSize();
|
||||
}
|
||||
|
||||
private static _shouldSkipExternalSnapForBindableTarget({
|
||||
appState,
|
||||
elements,
|
||||
elementsMap,
|
||||
element,
|
||||
pointIndex,
|
||||
scenePoint,
|
||||
selectedPointsIndices,
|
||||
}: {
|
||||
appState: AppState;
|
||||
elements: readonly Ordered<NonDeletedExcalidrawElement>[];
|
||||
elementsMap: NonDeletedSceneElementsMap;
|
||||
element: NonDeleted<ExcalidrawLinearElement>;
|
||||
pointIndex: number;
|
||||
scenePoint: GlobalPoint;
|
||||
selectedPointsIndices?: readonly number[];
|
||||
}) {
|
||||
if (
|
||||
isElbowArrow(element) ||
|
||||
!isBindingElement(element) ||
|
||||
!isBindingEnabled(appState) ||
|
||||
selectedPointsIndices?.length !== 1
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (pointIndex !== 0 && pointIndex !== element.points.length - 1) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return !!getHoveredElementForBinding(
|
||||
scenePoint,
|
||||
elements,
|
||||
elementsMap,
|
||||
maxBindingDistance_simple(appState.zoom),
|
||||
);
|
||||
}
|
||||
|
||||
private static _getSnappedPointForLinearElement({
|
||||
app,
|
||||
event,
|
||||
elements,
|
||||
elementsMap,
|
||||
element,
|
||||
pointIndex,
|
||||
scenePointerX,
|
||||
scenePointerY,
|
||||
pointerOffset,
|
||||
referencePoint,
|
||||
selectedPointsIndices,
|
||||
customLineAngle,
|
||||
}: {
|
||||
app: AppClassProperties;
|
||||
event: PointerEvent | React.PointerEvent<HTMLCanvasElement>;
|
||||
elements: readonly Ordered<NonDeletedExcalidrawElement>[];
|
||||
elementsMap: NonDeletedSceneElementsMap;
|
||||
element: NonDeleted<ExcalidrawLinearElement>;
|
||||
pointIndex: number;
|
||||
scenePointerX: number;
|
||||
scenePointerY: number;
|
||||
pointerOffset: Readonly<{ x: number; y: number }>;
|
||||
referencePoint?: LocalPoint | null;
|
||||
selectedPointsIndices?: readonly number[];
|
||||
customLineAngle?: number | null;
|
||||
}): {
|
||||
point: LocalPoint;
|
||||
snapLines: SnapLine[];
|
||||
} {
|
||||
const gridSize = LinearElementEditor._getPointPlacementGridSize(
|
||||
element,
|
||||
app,
|
||||
event,
|
||||
);
|
||||
|
||||
if (referencePoint) {
|
||||
const referencePointCoords =
|
||||
LinearElementEditor.getPointGlobalCoordinates(
|
||||
element,
|
||||
referencePoint,
|
||||
elementsMap,
|
||||
);
|
||||
const [gridX, gridY] = getGridPoint(
|
||||
scenePointerX,
|
||||
scenePointerY,
|
||||
gridSize,
|
||||
);
|
||||
|
||||
let { width: dxFromReference, height: dyFromReference } =
|
||||
getLockedLinearCursorAlignSize(
|
||||
referencePointCoords[0],
|
||||
referencePointCoords[1],
|
||||
gridX,
|
||||
gridY,
|
||||
customLineAngle ?? undefined,
|
||||
);
|
||||
|
||||
const effectiveGridX = referencePointCoords[0] + dxFromReference;
|
||||
const effectiveGridY = referencePointCoords[1] + dyFromReference;
|
||||
|
||||
let snapLines: SnapLine[] = [];
|
||||
const shouldSkipExternalSnap =
|
||||
LinearElementEditor._shouldSkipExternalSnapForBindableTarget({
|
||||
appState: app.state,
|
||||
elements,
|
||||
elementsMap,
|
||||
element,
|
||||
pointIndex,
|
||||
scenePoint: pointFrom<GlobalPoint>(effectiveGridX, effectiveGridY),
|
||||
selectedPointsIndices,
|
||||
});
|
||||
|
||||
if (!isElbowArrow(element)) {
|
||||
const { snapOffset, snapLines: nextSnapLines } = snapLinearElementPoint(
|
||||
elements,
|
||||
element,
|
||||
pointFrom<GlobalPoint>(effectiveGridX, effectiveGridY),
|
||||
app,
|
||||
event,
|
||||
elementsMap,
|
||||
{
|
||||
includeExternalPoints: !shouldSkipExternalSnap,
|
||||
includeSelfPoints: true,
|
||||
selectedPointsIndices,
|
||||
},
|
||||
);
|
||||
|
||||
snapLines = nextSnapLines;
|
||||
|
||||
if (nextSnapLines.length > 0) {
|
||||
const result = snapToDiscreteAngle(
|
||||
nextSnapLines,
|
||||
line(
|
||||
pointFrom(effectiveGridX, effectiveGridY),
|
||||
pointFrom(referencePointCoords[0], referencePointCoords[1]),
|
||||
),
|
||||
pointFrom(gridX, gridY),
|
||||
referencePointCoords,
|
||||
);
|
||||
|
||||
if (result.snapLines.length > 0) {
|
||||
dxFromReference = result.dxFromReference;
|
||||
dyFromReference = result.dyFromReference;
|
||||
snapLines = result.snapLines;
|
||||
} else {
|
||||
dxFromReference =
|
||||
effectiveGridX + snapOffset.x - referencePointCoords[0];
|
||||
dyFromReference =
|
||||
effectiveGridY + snapOffset.y - referencePointCoords[1];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const [rotatedX, rotatedY] = pointRotateRads(
|
||||
pointFrom(dxFromReference, dyFromReference),
|
||||
pointFrom(0, 0),
|
||||
-element.angle as Radians,
|
||||
);
|
||||
|
||||
return {
|
||||
point: pointFrom(
|
||||
referencePoint[0] + rotatedX,
|
||||
referencePoint[1] + rotatedY,
|
||||
),
|
||||
snapLines,
|
||||
};
|
||||
}
|
||||
|
||||
const originalPointerX = scenePointerX - pointerOffset.x;
|
||||
const originalPointerY = scenePointerY - pointerOffset.y;
|
||||
const shouldSkipExternalSnap =
|
||||
LinearElementEditor._shouldSkipExternalSnapForBindableTarget({
|
||||
appState: app.state,
|
||||
elements,
|
||||
elementsMap,
|
||||
element,
|
||||
pointIndex,
|
||||
scenePoint: pointFrom<GlobalPoint>(originalPointerX, originalPointerY),
|
||||
selectedPointsIndices,
|
||||
});
|
||||
|
||||
const { snapOffset, snapLines } = snapLinearElementPoint(
|
||||
elements,
|
||||
element,
|
||||
pointFrom(originalPointerX, originalPointerY),
|
||||
app,
|
||||
event,
|
||||
elementsMap,
|
||||
{
|
||||
includeExternalPoints: !shouldSkipExternalSnap,
|
||||
includeSelfPoints: true,
|
||||
selectedPointsIndices,
|
||||
},
|
||||
);
|
||||
|
||||
return {
|
||||
point: LinearElementEditor.createPointAt(
|
||||
element,
|
||||
elementsMap,
|
||||
originalPointerX + snapOffset.x,
|
||||
originalPointerY + snapOffset.y,
|
||||
gridSize,
|
||||
),
|
||||
snapLines,
|
||||
};
|
||||
}
|
||||
|
||||
static getBoundTextElementPosition = (
|
||||
element: ExcalidrawLinearElement,
|
||||
boundTextElement: ExcalidrawTextElementWithContainer,
|
||||
|
||||
@@ -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";
|
||||
@@ -34,38 +17,19 @@ import {
|
||||
elementOverlapsWithFrame,
|
||||
getContainingFrame,
|
||||
getFrameChildren,
|
||||
isElementIntersectingFrame,
|
||||
} from "./frame";
|
||||
|
||||
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
|
||||
@@ -85,243 +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 &&
|
||||
isElementIntersectingFrame(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);
|
||||
} else {
|
||||
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) => {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { arrayToMap, reseed } from "@excalidraw/common";
|
||||
import { arrayToMap } 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";
|
||||
@@ -12,7 +12,6 @@ import { hitElementItself } from "../src/collision";
|
||||
describe("check rotated elements can be hit:", () => {
|
||||
beforeEach(async () => {
|
||||
localStorage.clear();
|
||||
reseed(7);
|
||||
await render(<Excalidraw handleKeyboardGlobally={true} />);
|
||||
});
|
||||
|
||||
@@ -57,7 +56,6 @@ describe("hitElementItself cache", () => {
|
||||
});
|
||||
|
||||
localStorage.clear();
|
||||
reseed(7);
|
||||
await render(<Excalidraw handleKeyboardGlobally={true} />);
|
||||
});
|
||||
|
||||
|
||||
@@ -155,24 +155,6 @@ describe("Test Linear Elements", () => {
|
||||
});
|
||||
};
|
||||
|
||||
const dragMove = (startPoint: GlobalPoint, endPoint: GlobalPoint) => {
|
||||
fireEvent.pointerDown(interactiveCanvas, {
|
||||
clientX: startPoint[0],
|
||||
clientY: startPoint[1],
|
||||
});
|
||||
fireEvent.pointerMove(interactiveCanvas, {
|
||||
clientX: endPoint[0],
|
||||
clientY: endPoint[1],
|
||||
});
|
||||
};
|
||||
|
||||
const dragEnd = (endPoint: GlobalPoint) => {
|
||||
fireEvent.pointerUp(interactiveCanvas, {
|
||||
clientX: endPoint[0],
|
||||
clientY: endPoint[1],
|
||||
});
|
||||
};
|
||||
|
||||
const deletePoint = (point: GlobalPoint) => {
|
||||
fireEvent.pointerDown(interactiveCanvas, {
|
||||
clientX: point[0],
|
||||
@@ -276,73 +258,6 @@ describe("Test Linear Elements", () => {
|
||||
expect(h.state.selectedLinearElement?.elementId).toEqual(h.elements[0].id);
|
||||
});
|
||||
|
||||
it("shows snap lines and snaps the endpoint when creating a line", () => {
|
||||
const rect = API.createElement({
|
||||
type: "rectangle",
|
||||
x: 100,
|
||||
y: 100,
|
||||
width: 40,
|
||||
height: 40,
|
||||
});
|
||||
API.setElements([rect]);
|
||||
API.setAppState({ objectsSnapModeEnabled: true });
|
||||
|
||||
UI.clickTool("line");
|
||||
|
||||
const startPoint = pointFrom<GlobalPoint>(20, 20);
|
||||
const pointerNearCorner = pointFrom<GlobalPoint>(95, 95);
|
||||
|
||||
dragMove(startPoint, pointerNearCorner);
|
||||
|
||||
expect(h.state.snapLines.length).toBeGreaterThan(0);
|
||||
|
||||
dragEnd(pointerNearCorner);
|
||||
|
||||
const line = h.elements.find(
|
||||
(element): element is ExcalidrawLinearElement => element.type === "line",
|
||||
);
|
||||
|
||||
expect(line).toBeDefined();
|
||||
|
||||
const endpoint = LinearElementEditor.getPointGlobalCoordinates(
|
||||
line!,
|
||||
line!.points[line!.points.length - 1],
|
||||
h.app.scene.getNonDeletedElementsMap(),
|
||||
);
|
||||
|
||||
expect(endpoint).toEqual(pointFrom<GlobalPoint>(100, 100));
|
||||
});
|
||||
|
||||
it("prefers binding over external snaps when creating an arrow endpoint", () => {
|
||||
const rect = API.createElement({
|
||||
type: "rectangle",
|
||||
x: 100,
|
||||
y: 100,
|
||||
width: 40,
|
||||
height: 40,
|
||||
});
|
||||
API.setElements([rect]);
|
||||
API.setAppState({ objectsSnapModeEnabled: true });
|
||||
|
||||
UI.clickTool("arrow");
|
||||
|
||||
const startPoint = pointFrom<GlobalPoint>(20, 20);
|
||||
const pointerNearBindable = pointFrom<GlobalPoint>(96, 118);
|
||||
|
||||
dragMove(startPoint, pointerNearBindable);
|
||||
|
||||
expect(h.state.suggestedBinding?.element.id).toBe(rect.id);
|
||||
expect(h.state.snapLines).toEqual([]);
|
||||
|
||||
dragEnd(pointerNearBindable);
|
||||
|
||||
const arrow = h.elements.find(
|
||||
(element): element is ExcalidrawLinearElement => element.type === "arrow",
|
||||
);
|
||||
|
||||
expect(arrow?.endBinding?.elementId).toBe(rect.id);
|
||||
});
|
||||
|
||||
it("should enter line editor via enter (line)", () => {
|
||||
createTwoPointerLinearElement("line");
|
||||
expect(h.state.selectedLinearElement?.isEditing).toBe(false);
|
||||
@@ -486,77 +401,6 @@ describe("Test Linear Elements", () => {
|
||||
`);
|
||||
});
|
||||
|
||||
it("shows snap lines when dragging a point to another line point axis", () => {
|
||||
const line = API.createElement({
|
||||
type: "line",
|
||||
x: 20,
|
||||
y: 20,
|
||||
width: 100,
|
||||
height: 50,
|
||||
roughness: 0,
|
||||
points: [
|
||||
pointFrom<LocalPoint>(0, 0),
|
||||
pointFrom<LocalPoint>(50, 50),
|
||||
pointFrom<LocalPoint>(100, 0),
|
||||
],
|
||||
});
|
||||
|
||||
API.setElements([line]);
|
||||
API.setAppState({ objectsSnapModeEnabled: true });
|
||||
enterLineEditingMode(line);
|
||||
|
||||
const middlePoint = pointFrom<GlobalPoint>(70, 70);
|
||||
const pointerNearEndPointX = pointFrom<GlobalPoint>(117, 65);
|
||||
|
||||
dragMove(middlePoint, pointerNearEndPointX);
|
||||
|
||||
expect(h.state.snapLines.length).toBeGreaterThan(0);
|
||||
|
||||
dragEnd(pointerNearEndPointX);
|
||||
|
||||
expect(API.getElement(line).points[1]).toEqual(
|
||||
pointFrom<LocalPoint>(100, 45),
|
||||
);
|
||||
});
|
||||
|
||||
it("prefers binding over external snaps when dragging an existing arrow endpoint", () => {
|
||||
const rect = API.createElement({
|
||||
type: "rectangle",
|
||||
x: 100,
|
||||
y: 100,
|
||||
width: 40,
|
||||
height: 40,
|
||||
});
|
||||
const arrow = API.createElement({
|
||||
type: "arrow",
|
||||
x: 20,
|
||||
y: 20,
|
||||
width: 40,
|
||||
height: 0,
|
||||
points: [pointFrom<LocalPoint>(0, 0), pointFrom<LocalPoint>(40, 0)],
|
||||
});
|
||||
|
||||
API.setElements([rect, arrow]);
|
||||
API.setAppState({ objectsSnapModeEnabled: true });
|
||||
enterLineEditingMode(arrow);
|
||||
|
||||
const endPoint = LinearElementEditor.getPointGlobalCoordinates(
|
||||
arrow,
|
||||
arrow.points[arrow.points.length - 1],
|
||||
h.app.scene.getNonDeletedElementsMap(),
|
||||
);
|
||||
const pointerNearBindable = pointFrom<GlobalPoint>(96, 118);
|
||||
|
||||
dragMove(endPoint, pointerNearBindable);
|
||||
|
||||
expect(h.state.suggestedBinding?.element.id).toBe(rect.id);
|
||||
expect(h.state.snapLines).toEqual([]);
|
||||
|
||||
dragEnd(pointerNearBindable);
|
||||
|
||||
expect(API.getElement(arrow).endBinding?.elementId).toBe(rect.id);
|
||||
});
|
||||
|
||||
it("should update the midpoints when element roundness changed", async () => {
|
||||
createThreePointerLinearElement("line");
|
||||
|
||||
|
||||
@@ -1,145 +0,0 @@
|
||||
import {
|
||||
getElementsInGroup,
|
||||
isSomeElementSelected,
|
||||
makeNextSelectedElementIds,
|
||||
selectGroupsForSelectedElements,
|
||||
} from "@excalidraw/element";
|
||||
import { CaptureUpdateAction } from "@excalidraw/element";
|
||||
import { KEYS, isWritableElement, updateActiveTool } from "@excalidraw/common";
|
||||
|
||||
import type { GroupId } from "@excalidraw/element/types";
|
||||
|
||||
import { register } from "./register";
|
||||
|
||||
import type { AppClassProperties, AppState } from "../types";
|
||||
|
||||
const getNextActiveTool = (
|
||||
appState: Readonly<AppState>,
|
||||
app: AppClassProperties,
|
||||
) => {
|
||||
if (appState.activeTool.type === "eraser") {
|
||||
return updateActiveTool(appState, {
|
||||
...(appState.activeTool.lastActiveTool || {
|
||||
type: app.state.preferredSelectionTool.type,
|
||||
}),
|
||||
lastActiveToolBeforeEraser: null,
|
||||
});
|
||||
}
|
||||
|
||||
return updateActiveTool(appState, {
|
||||
type: app.state.preferredSelectionTool.type,
|
||||
});
|
||||
};
|
||||
|
||||
const getParentEditingGroupId = (
|
||||
appState: Readonly<AppState>,
|
||||
app: AppClassProperties,
|
||||
selectedElementIds: AppState["selectedElementIds"],
|
||||
): GroupId | null => {
|
||||
if (!appState.editingGroupId) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const nonDeletedElements = app.scene.getNonDeletedElements();
|
||||
const selectedElements = app.scene.getSelectedElements({
|
||||
selectedElementIds,
|
||||
elements: nonDeletedElements,
|
||||
});
|
||||
const candidateElements = selectedElements.length
|
||||
? selectedElements
|
||||
: getElementsInGroup(nonDeletedElements, appState.editingGroupId);
|
||||
|
||||
for (const element of candidateElements) {
|
||||
const editingGroupIndex = element.groupIds.indexOf(appState.editingGroupId);
|
||||
if (editingGroupIndex !== -1 && element.groupIds[editingGroupIndex + 1]) {
|
||||
return element.groupIds[editingGroupIndex + 1] as GroupId;
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
export const actionDeselect = register({
|
||||
name: "deselect",
|
||||
label: "",
|
||||
trackEvent: false,
|
||||
perform: (_elements, appState, _, app) => {
|
||||
const activeTool = getNextActiveTool(appState, app);
|
||||
|
||||
if (appState.editingGroupId) {
|
||||
const nonDeletedElements = app.scene.getNonDeletedElements();
|
||||
const selectedElementIds =
|
||||
Object.keys(appState.selectedElementIds).length > 0
|
||||
? appState.selectedElementIds
|
||||
: getElementsInGroup(
|
||||
nonDeletedElements,
|
||||
appState.editingGroupId,
|
||||
).reduce((acc, element) => {
|
||||
acc[element.id] = true;
|
||||
return acc;
|
||||
}, {} as Record<string, true>);
|
||||
|
||||
return {
|
||||
appState: {
|
||||
...appState,
|
||||
...selectGroupsForSelectedElements(
|
||||
{
|
||||
editingGroupId: getParentEditingGroupId(
|
||||
appState,
|
||||
app,
|
||||
selectedElementIds,
|
||||
),
|
||||
selectedElementIds,
|
||||
},
|
||||
nonDeletedElements,
|
||||
appState,
|
||||
app,
|
||||
),
|
||||
activeEmbeddable: null,
|
||||
activeTool,
|
||||
selectedLinearElement: null,
|
||||
selectionElement: null,
|
||||
showHyperlinkPopup: false,
|
||||
suggestedBinding: null,
|
||||
},
|
||||
captureUpdate: CaptureUpdateAction.IMMEDIATELY,
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
appState: {
|
||||
...appState,
|
||||
activeEmbeddable: null,
|
||||
activeTool,
|
||||
editingGroupId: null,
|
||||
selectedElementIds: makeNextSelectedElementIds({}, appState),
|
||||
selectedGroupIds: {},
|
||||
selectedLinearElement: null,
|
||||
selectionElement: null,
|
||||
showHyperlinkPopup: false,
|
||||
suggestedBinding: null,
|
||||
},
|
||||
captureUpdate: CaptureUpdateAction.IMMEDIATELY,
|
||||
};
|
||||
},
|
||||
keyTest: (event, appState, _, app) => {
|
||||
if (event.key !== KEYS.ESCAPE) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (isWritableElement(event.target)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return (
|
||||
!appState.newElement &&
|
||||
appState.multiElement === null &&
|
||||
!appState.selectedLinearElement?.isEditing &&
|
||||
(appState.activeEmbeddable !== null ||
|
||||
appState.activeTool.type !== app.state.preferredSelectionTool.type ||
|
||||
!!appState.editingGroupId ||
|
||||
!!appState.selectedLinearElement ||
|
||||
isSomeElementSelected(app.scene.getNonDeletedElements(), appState))
|
||||
);
|
||||
},
|
||||
});
|
||||
@@ -348,7 +348,9 @@ export const actionFinalize = register<FormData>({
|
||||
};
|
||||
},
|
||||
keyTest: (event, appState) =>
|
||||
(event.key === KEYS.ESCAPE && appState.selectedLinearElement?.isEditing) ||
|
||||
(event.key === KEYS.ESCAPE &&
|
||||
(appState.selectedLinearElement?.isEditing ||
|
||||
(!appState.newElement && appState.multiElement === null))) ||
|
||||
((event.key === KEYS.ESCAPE || event.key === KEYS.ENTER) &&
|
||||
appState.multiElement !== null),
|
||||
PanelComponent: ({ appState, updateData, data }) => (
|
||||
|
||||
@@ -34,7 +34,6 @@ export {
|
||||
export { actionSetEmbeddableAsActiveTool } from "./actionEmbeddable";
|
||||
|
||||
export { actionFinalize } from "./actionFinalize";
|
||||
export { actionDeselect } from "./actionDeselect";
|
||||
|
||||
export {
|
||||
actionChangeProjectName,
|
||||
|
||||
@@ -114,7 +114,6 @@ export type ActionName =
|
||||
| "distributeVertically"
|
||||
| "flipHorizontal"
|
||||
| "flipVertical"
|
||||
| "deselect"
|
||||
| "viewMode"
|
||||
| "exportWithDarkMode"
|
||||
| "toggleTheme"
|
||||
|
||||
@@ -128,7 +128,6 @@ export const getDefaultAppState = (): Omit<
|
||||
lockedMultiSelections: {},
|
||||
activeLockedId: null,
|
||||
bindMode: "orbit",
|
||||
boxSelectionMode: "contain",
|
||||
};
|
||||
};
|
||||
|
||||
@@ -194,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: {
|
||||
|
||||
@@ -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,
|
||||
@@ -239,16 +238,6 @@ import {
|
||||
hitElementBoundingBox,
|
||||
isLineElement,
|
||||
isSimpleArrow,
|
||||
isGridModeEnabled,
|
||||
SnapCache,
|
||||
isActiveToolNonLinearSnappable,
|
||||
getSnapLinesAtPointer,
|
||||
isSnappingEnabled,
|
||||
getReferenceSnapPoints,
|
||||
getVisibleGaps,
|
||||
snapDraggedElements,
|
||||
snapNewElement,
|
||||
snapResizingElements,
|
||||
StoreDelta,
|
||||
type ApplyToOptions,
|
||||
positionElementsOnGrid,
|
||||
@@ -406,6 +395,18 @@ import {
|
||||
import { Fonts } from "../fonts";
|
||||
import { editorJotaiStore, type WritableAtom } from "../editor-jotai";
|
||||
import { ImageSceneDataError } from "../errors";
|
||||
import {
|
||||
getSnapLinesAtPointer,
|
||||
snapDraggedElements,
|
||||
isActiveToolNonLinearSnappable,
|
||||
snapNewElement,
|
||||
snapResizingElements,
|
||||
isSnappingEnabled,
|
||||
getVisibleGaps,
|
||||
getReferenceSnapPoints,
|
||||
SnapCache,
|
||||
isGridModeEnabled,
|
||||
} from "../snapping";
|
||||
import { Renderer } from "../scene/Renderer";
|
||||
import {
|
||||
setEraserCursor,
|
||||
@@ -783,29 +784,6 @@ class App extends React.Component<AppProps, AppState> {
|
||||
return api;
|
||||
}
|
||||
|
||||
private withStableSnapLines<T extends { snapLines: AppState["snapLines"] }>(
|
||||
state: T,
|
||||
): T {
|
||||
const snapLines = updateStable(this.state.snapLines, state.snapLines);
|
||||
|
||||
return snapLines === state.snapLines
|
||||
? state
|
||||
: {
|
||||
...state,
|
||||
snapLines,
|
||||
};
|
||||
}
|
||||
|
||||
private shouldUpdateSelectedLinearElementState(
|
||||
selectedLinearElement: AppState["selectedLinearElement"],
|
||||
snapLines: AppState["snapLines"],
|
||||
) {
|
||||
return (
|
||||
selectedLinearElement !== this.state.selectedLinearElement ||
|
||||
snapLines !== this.state.snapLines
|
||||
);
|
||||
}
|
||||
|
||||
constructor(props: AppProps) {
|
||||
super(props);
|
||||
const defaultAppState = getDefaultAppState();
|
||||
@@ -2546,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) {
|
||||
@@ -5748,13 +5725,13 @@ class App extends React.Component<AppProps, AppState> {
|
||||
const isDeleted = !nextOriginalText.trim();
|
||||
updateElement(nextOriginalText, isDeleted);
|
||||
|
||||
// keyboard-submit keeps focus on the edited object. For bound text, keep
|
||||
// the container selected even if the text becomes empty and is deleted.
|
||||
const elementIdToSelect = viaKeyboard
|
||||
? element.containerId || (!isDeleted ? element.id : null)
|
||||
: null;
|
||||
// select the created text element only if submitting via keyboard
|
||||
// (when submitting via click it should act as signal to deselect)
|
||||
if (!isDeleted && viaKeyboard) {
|
||||
const elementIdToSelect = element.containerId
|
||||
? element.containerId
|
||||
: element.id;
|
||||
|
||||
if (elementIdToSelect) {
|
||||
// needed to ensure state is updated before "finalize" action
|
||||
// that's invoked on keyboard-submit as well
|
||||
// TODO either move this into finalize as well, or handle all state
|
||||
@@ -6807,10 +6784,7 @@ class App extends React.Component<AppProps, AppState> {
|
||||
|
||||
if (
|
||||
!this.state.newElement &&
|
||||
(isActiveToolNonLinearSnappable(this.state.activeTool.type) ||
|
||||
((this.state.activeTool.type === "line" ||
|
||||
this.state.activeTool.type === "arrow") &&
|
||||
this.state.currentItemArrowType !== ARROW_TYPE.elbow))
|
||||
isActiveToolNonLinearSnappable(this.state.activeTool.type)
|
||||
) {
|
||||
const { originOffset, snapLines } = getSnapLinesAtPointer(
|
||||
this.scene.getNonDeletedElements(),
|
||||
@@ -6859,7 +6833,7 @@ class App extends React.Component<AppProps, AppState> {
|
||||
this.state.selectedLinearElement?.isEditing &&
|
||||
!this.state.selectedLinearElement.isDragging
|
||||
) {
|
||||
const result = this.state.newElement
|
||||
const editingLinearElement = this.state.newElement
|
||||
? null
|
||||
: LinearElementEditor.handlePointerMoveInEditMode(
|
||||
event,
|
||||
@@ -6868,33 +6842,18 @@ class App extends React.Component<AppProps, AppState> {
|
||||
this,
|
||||
);
|
||||
|
||||
if (result) {
|
||||
const { editingLinearElement, snapLines } = result;
|
||||
const nextState = this.withStableSnapLines({
|
||||
selectedLinearElement: editingLinearElement,
|
||||
snapLines,
|
||||
});
|
||||
|
||||
if (
|
||||
editingLinearElement &&
|
||||
this.shouldUpdateSelectedLinearElementState(
|
||||
nextState.selectedLinearElement,
|
||||
nextState.snapLines,
|
||||
)
|
||||
) {
|
||||
// Since we are reading from previous state which is not possible with
|
||||
// automatic batching in React 18 hence using flush sync to synchronously
|
||||
// update the state. Check https://github.com/excalidraw/excalidraw/pull/5508 for more details.
|
||||
flushSync(() => {
|
||||
this.setState(nextState);
|
||||
if (
|
||||
editingLinearElement &&
|
||||
editingLinearElement !== this.state.selectedLinearElement
|
||||
) {
|
||||
// Since we are reading from previous state which is not possible with
|
||||
// automatic batching in React 18 hence using flush sync to synchronously
|
||||
// update the state. Check https://github.com/excalidraw/excalidraw/pull/5508 for more details.
|
||||
flushSync(() => {
|
||||
this.setState({
|
||||
selectedLinearElement: editingLinearElement,
|
||||
});
|
||||
}
|
||||
if (
|
||||
editingLinearElement.lastUncommittedPoint == null &&
|
||||
this.state.suggestedBinding
|
||||
) {
|
||||
this.setState({ suggestedBinding: null });
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7280,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") {
|
||||
@@ -7779,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)
|
||||
@@ -8785,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
|
||||
);
|
||||
}
|
||||
|
||||
@@ -9752,27 +9694,25 @@ class App extends React.Component<AppProps, AppState> {
|
||||
pointerDownState.lastCoords.x = pointerCoords.x;
|
||||
pointerDownState.lastCoords.y = pointerCoords.y;
|
||||
pointerDownState.drag.hasOccurred = true;
|
||||
const nextState = this.withStableSnapLines(newState);
|
||||
|
||||
// NOTE: Optimize setState calls because it
|
||||
// affects history and performance
|
||||
if (
|
||||
nextState.suggestedBinding !== this.state.suggestedBinding ||
|
||||
newState.suggestedBinding !== this.state.suggestedBinding ||
|
||||
!isShallowEqual(
|
||||
nextState.selectedLinearElement?.selectedPointsIndices ?? [],
|
||||
newState.selectedLinearElement?.selectedPointsIndices ?? [],
|
||||
this.state.selectedLinearElement?.selectedPointsIndices ?? [],
|
||||
) ||
|
||||
nextState.selectedLinearElement?.hoverPointIndex !==
|
||||
newState.selectedLinearElement?.hoverPointIndex !==
|
||||
this.state.selectedLinearElement?.hoverPointIndex ||
|
||||
nextState.selectedLinearElement?.customLineAngle !==
|
||||
newState.selectedLinearElement?.customLineAngle !==
|
||||
this.state.selectedLinearElement?.customLineAngle ||
|
||||
this.state.selectedLinearElement.isDragging !==
|
||||
nextState.selectedLinearElement?.isDragging ||
|
||||
newState.selectedLinearElement?.isDragging ||
|
||||
this.state.selectedLinearElement?.initialState?.altFocusPoint !==
|
||||
nextState.selectedLinearElement?.initialState?.altFocusPoint ||
|
||||
nextState.snapLines !== this.state.snapLines
|
||||
newState.selectedLinearElement?.initialState?.altFocusPoint
|
||||
) {
|
||||
this.setState(nextState);
|
||||
this.setState(newState);
|
||||
}
|
||||
|
||||
return;
|
||||
@@ -10327,7 +10267,6 @@ class App extends React.Component<AppProps, AppState> {
|
||||
this.state.selectionElement,
|
||||
this.scene.getNonDeletedElementsMap(),
|
||||
false,
|
||||
this.state.boxSelectionMode,
|
||||
)
|
||||
: [];
|
||||
|
||||
@@ -10461,7 +10400,8 @@ class App extends React.Component<AppProps, AppState> {
|
||||
this.lassoTrail.endPath();
|
||||
this.previousPointerMoveCoords = null;
|
||||
|
||||
SnapCache.destroy();
|
||||
SnapCache.setReferenceSnapPoints(null);
|
||||
SnapCache.setVisibleGaps(null);
|
||||
|
||||
this.savePointer(childEvent.clientX, childEvent.clientY, "up");
|
||||
|
||||
|
||||
@@ -46,7 +46,6 @@ import {
|
||||
import { fontPickerKeyHandler } from "./keyboardNavHandlers";
|
||||
|
||||
import type { JSX } from "react";
|
||||
import type { ExcalidrawFontFace } from "../../fonts/ExcalidrawFontFace";
|
||||
|
||||
export interface FontDescriptor {
|
||||
value: number;
|
||||
@@ -87,15 +86,6 @@ const getFontFamilyIcon = (fontFamily: FontFamilyValues): JSX.Element => {
|
||||
}
|
||||
};
|
||||
|
||||
const getFontFamilyLabel = (
|
||||
fontFamily: FontFamilyValues,
|
||||
fontFaces: ExcalidrawFontFace[],
|
||||
) =>
|
||||
// prefer our config as the browser resolved names may be wrapped in quotes and such
|
||||
Object.entries(FONT_FAMILY).find(([, id]) => id === fontFamily)?.[0] ??
|
||||
fontFaces[0]?.fontFace?.family ??
|
||||
"Unknown";
|
||||
|
||||
export const FontPickerList = React.memo(
|
||||
({
|
||||
selectedFontFamily,
|
||||
@@ -124,7 +114,7 @@ export const FontPickerList = React.memo(
|
||||
const fontDescriptor = {
|
||||
value: familyId,
|
||||
icon: getFontFamilyIcon(familyId),
|
||||
text: getFontFamilyLabel(familyId, fontFaces),
|
||||
text: fontFaces[0]?.fontFace?.family ?? "Unknown",
|
||||
};
|
||||
|
||||
if (metadata.deprecated) {
|
||||
|
||||
@@ -3,7 +3,6 @@ import { CANVAS_SEARCH_TAB, DEFAULT_SIDEBAR } from "@excalidraw/common";
|
||||
import {
|
||||
isFlowchartNodeElement,
|
||||
isImageElement,
|
||||
isGridModeEnabled,
|
||||
isLinearElement,
|
||||
isLineElement,
|
||||
isTextBindableContainer,
|
||||
@@ -17,6 +16,7 @@ import type { EditorInterface } from "@excalidraw/common";
|
||||
import { t } from "../i18n";
|
||||
import { getShortcutKey } from "../shortcut";
|
||||
import { isEraserActive } from "../appState";
|
||||
import { isGridModeEnabled } from "../snapping";
|
||||
|
||||
import "./HintViewer.scss";
|
||||
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -12,11 +12,10 @@ import { frameAndChildrenSelectedTogether } from "@excalidraw/element";
|
||||
|
||||
import { elementsAreInSameGroup } from "@excalidraw/element";
|
||||
|
||||
import { isGridModeEnabled } from "@excalidraw/element";
|
||||
|
||||
import type { NonDeletedExcalidrawElement } from "@excalidraw/element/types";
|
||||
|
||||
import { t } from "../../i18n";
|
||||
import { isGridModeEnabled } from "../../snapping";
|
||||
import { useExcalidrawAppState, useExcalidrawSetAppState } from "../App";
|
||||
import { Island } from "../Island";
|
||||
import { CloseIcon } from "../icons";
|
||||
|
||||
@@ -750,7 +750,7 @@ describe("frame resizing behavior", () => {
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 100,
|
||||
height: 103,
|
||||
height: 100,
|
||||
});
|
||||
|
||||
// Create a rectangle outside the frame
|
||||
|
||||
@@ -3,7 +3,25 @@
|
||||
$verticalBreakpoint: 861px;
|
||||
|
||||
.excalidraw {
|
||||
--ttd-mermaid-token-keyword: #0000ff;
|
||||
--ttd-mermaid-token-string: #a31515;
|
||||
--ttd-mermaid-token-comment: #008000;
|
||||
--ttd-mermaid-token-number: #098658;
|
||||
--ttd-mermaid-token-operator: #1e1e1e;
|
||||
--ttd-mermaid-token-punctuation: #1e1e1e;
|
||||
--ttd-mermaid-token-variable-name: #001080;
|
||||
--ttd-mermaid-token-bracket: #af00db;
|
||||
|
||||
&.theme--dark {
|
||||
--ttd-mermaid-token-keyword: #569cd6;
|
||||
--ttd-mermaid-token-string: #ce9178;
|
||||
--ttd-mermaid-token-comment: #6a9955;
|
||||
--ttd-mermaid-token-number: #b5cea8;
|
||||
--ttd-mermaid-token-operator: #d4d4d4;
|
||||
--ttd-mermaid-token-punctuation: #d4d4d4;
|
||||
--ttd-mermaid-token-variable-name: #9cdcfe;
|
||||
--ttd-mermaid-token-bracket: #ffd700;
|
||||
|
||||
.chat-message {
|
||||
&--assistant {
|
||||
.chat-message__content {
|
||||
@@ -194,7 +212,7 @@ $verticalBreakpoint: 861px;
|
||||
align-items: flex-start;
|
||||
|
||||
.chat-message__content {
|
||||
background: var(--color-surface-low);
|
||||
background: #f7f7f7;
|
||||
color: var(--color-on-surface);
|
||||
border-radius: var(--border-radius-md);
|
||||
min-width: 6rem;
|
||||
@@ -292,6 +310,51 @@ $verticalBreakpoint: 861px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
&__text--error {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
&__text--mermaid {
|
||||
overflow-x: auto;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
&__token {
|
||||
white-space: inherit;
|
||||
}
|
||||
|
||||
&__token--keyword {
|
||||
color: var(--ttd-mermaid-token-keyword);
|
||||
}
|
||||
|
||||
&__token--string {
|
||||
color: var(--ttd-mermaid-token-string);
|
||||
}
|
||||
|
||||
&__token--comment {
|
||||
color: var(--ttd-mermaid-token-comment);
|
||||
}
|
||||
|
||||
&__token--number {
|
||||
color: var(--ttd-mermaid-token-number);
|
||||
}
|
||||
|
||||
&__token--operator {
|
||||
color: var(--ttd-mermaid-token-operator);
|
||||
}
|
||||
|
||||
&__token--punctuation {
|
||||
color: var(--ttd-mermaid-token-punctuation);
|
||||
}
|
||||
|
||||
&__token--variableName {
|
||||
color: var(--ttd-mermaid-token-variable-name);
|
||||
}
|
||||
|
||||
&__token--bracket {
|
||||
color: var(--ttd-mermaid-token-bracket);
|
||||
}
|
||||
|
||||
&__cursor {
|
||||
display: inline-block;
|
||||
margin-left: 2px;
|
||||
@@ -332,11 +395,13 @@ $verticalBreakpoint: 861px;
|
||||
&__error {
|
||||
color: var(--color-danger);
|
||||
font-weight: 500;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
|
||||
.chat-message__text--mermaid {
|
||||
color: var(--color-on-surface);
|
||||
}
|
||||
}
|
||||
|
||||
&__error_message {
|
||||
|
||||
@@ -5,8 +5,49 @@ import { t } from "../../../i18n";
|
||||
import { FilledButton } from "../../FilledButton";
|
||||
import { TrashIcon, codeIcon, stackPushIcon, RetryIcon } from "../../icons";
|
||||
|
||||
import { tokenizeMermaid } from "../mermaid-highlighting";
|
||||
|
||||
import type { TChat, TTTDDialog } from "../types";
|
||||
|
||||
const isMermaidMessage = (message: TChat.ChatMessage) =>
|
||||
message.contentFormat === "mermaid";
|
||||
|
||||
const renderMessageContent = (
|
||||
message: TChat.ChatMessage,
|
||||
className: string,
|
||||
) => {
|
||||
const content = message.content ?? "";
|
||||
|
||||
console.log("@", message);
|
||||
|
||||
if (!isMermaidMessage(message)) {
|
||||
return (
|
||||
<div className={className}>
|
||||
{content}
|
||||
{message.isGenerating && (
|
||||
<span className="chat-message__cursor">▋</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={clsx(className, "chat-message__text--mermaid")}>
|
||||
{tokenizeMermaid(content).map((token, index) => (
|
||||
<span
|
||||
key={`${index}-${token.type ?? "text"}-${token.value}`}
|
||||
className={clsx("chat-message__token", {
|
||||
[`chat-message__token--${token.type}`]: token.type,
|
||||
})}
|
||||
>
|
||||
{token.value}
|
||||
</span>
|
||||
))}
|
||||
{message.isGenerating && <span className="chat-message__cursor">▋</span>}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const ChatMessage: React.FC<{
|
||||
message: TChat.ChatMessage;
|
||||
onMermaidTabClick?: (message: TChat.ChatMessage) => void;
|
||||
@@ -122,7 +163,14 @@ export const ChatMessage: React.FC<{
|
||||
<div className="chat-message__body">
|
||||
{message.error ? (
|
||||
<>
|
||||
<div className="chat-message__error">{message.content}</div>
|
||||
<div className="chat-message__error">
|
||||
{renderMessageContent(
|
||||
message,
|
||||
clsx("chat-message__text", {
|
||||
"chat-message__text--error": !isMermaidMessage(message),
|
||||
}),
|
||||
)}
|
||||
</div>
|
||||
{message.errorType !== "parse" && (
|
||||
<div className="chat-message__error_message">
|
||||
Error: {message.error || t("chat.errors.generationFailed")}
|
||||
@@ -132,7 +180,7 @@ export const ChatMessage: React.FC<{
|
||||
<div className="chat-message__error_message">
|
||||
<p>{t("chat.errors.invalidDiagram")}</p>
|
||||
<div className="chat-message__error-actions">
|
||||
{onMermaidTabClick && (
|
||||
{onMermaidTabClick && isMermaidMessage(message) && (
|
||||
<button
|
||||
className="chat-message__error-link"
|
||||
onClick={() => onMermaidTabClick(message)}
|
||||
@@ -156,18 +204,13 @@ export const ChatMessage: React.FC<{
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<div className="chat-message__text">
|
||||
{message.content}
|
||||
{message.isGenerating && (
|
||||
<span className="chat-message__cursor">▋</span>
|
||||
)}
|
||||
</div>
|
||||
renderMessageContent(message, "chat-message__text")
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{message.type === "assistant" && !message.isGenerating && (
|
||||
<div className="chat-message__actions">
|
||||
{!message.error && onInsertMessage && (
|
||||
{!message.error && onInsertMessage && isMermaidMessage(message) && (
|
||||
<button
|
||||
className="chat-message__action"
|
||||
onClick={() => onInsertMessage(message)}
|
||||
@@ -178,7 +221,7 @@ export const ChatMessage: React.FC<{
|
||||
{stackPushIcon}
|
||||
</button>
|
||||
)}
|
||||
{onMermaidTabClick && message.content && (
|
||||
{onMermaidTabClick && isMermaidMessage(message) && message.content && (
|
||||
<button
|
||||
className="chat-message__action"
|
||||
onClick={() => onMermaidTabClick(message)}
|
||||
|
||||
@@ -25,6 +25,7 @@ export const TTDChatPanel = ({
|
||||
onGenerate,
|
||||
isGenerating,
|
||||
generatedResponse,
|
||||
generatedResponseFormat,
|
||||
isMenuOpen,
|
||||
onMenuToggle,
|
||||
onMenuClose,
|
||||
@@ -50,6 +51,7 @@ export const TTDChatPanel = ({
|
||||
onGenerate: TTTDDialog.OnGenerate;
|
||||
isGenerating: boolean;
|
||||
generatedResponse: string | null | undefined;
|
||||
generatedResponseFormat?: TChat.ChatMessage["contentFormat"];
|
||||
|
||||
isMenuOpen: boolean;
|
||||
onMenuToggle: () => void;
|
||||
@@ -89,7 +91,7 @@ export const TTDChatPanel = ({
|
||||
});
|
||||
}
|
||||
|
||||
if (generatedResponse) {
|
||||
if (generatedResponse && generatedResponseFormat === "mermaid") {
|
||||
actions.push({
|
||||
action: onViewAsMermaid,
|
||||
label: t("chat.viewAsMermaid"),
|
||||
|
||||
@@ -25,6 +25,7 @@ export const useChatAgent = () => {
|
||||
{
|
||||
type: "assistant",
|
||||
content: "",
|
||||
contentFormat: "mermaid",
|
||||
isGenerating: true,
|
||||
},
|
||||
]),
|
||||
|
||||
@@ -1,13 +1,21 @@
|
||||
import { useEffect, useRef } from "react";
|
||||
import {
|
||||
Decoration,
|
||||
type DecorationSet,
|
||||
EditorView,
|
||||
ViewPlugin,
|
||||
type ViewUpdate,
|
||||
keymap,
|
||||
lineNumbers,
|
||||
placeholder as cmPlaceholder,
|
||||
drawSelection,
|
||||
} from "@codemirror/view";
|
||||
import { Compartment, EditorState, type Extension } from "@codemirror/state";
|
||||
import {
|
||||
Compartment,
|
||||
EditorState,
|
||||
type Extension,
|
||||
type Range,
|
||||
} from "@codemirror/state";
|
||||
import {
|
||||
defaultKeymap,
|
||||
history,
|
||||
@@ -40,6 +48,13 @@ const darkTheme = EditorView.theme(
|
||||
},
|
||||
".cm-content": { caretColor: "#fff" },
|
||||
".cm-cursor": { borderLeftColor: "#fff" },
|
||||
".cm-selectionBackground": {
|
||||
backgroundColor: "rgba(86, 156, 214, 0.3)",
|
||||
},
|
||||
"&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground":
|
||||
{
|
||||
backgroundColor: "rgba(86, 156, 214, 0.42)",
|
||||
},
|
||||
".cm-gutters": {
|
||||
backgroundColor: "#1e1e1e",
|
||||
color: "#858585",
|
||||
@@ -48,6 +63,10 @@ const darkTheme = EditorView.theme(
|
||||
".cm-activeLineGutter": { backgroundColor: "#2a2a2a" },
|
||||
".cm-activeLine": { backgroundColor: "#2a2a2a" },
|
||||
".cm-errorLine": { backgroundColor: "rgba(255, 0, 0, 0.15)" },
|
||||
".cm-selectedWordMatch": {
|
||||
backgroundColor: "rgba(255, 209, 102, 0.22)",
|
||||
borderRadius: "2px",
|
||||
},
|
||||
},
|
||||
{ dark: true },
|
||||
);
|
||||
@@ -80,6 +99,10 @@ const lightTheme = EditorView.theme({
|
||||
".cm-activeLineGutter": { backgroundColor: "#e8e8e8" },
|
||||
".cm-activeLine": { backgroundColor: "#e8e8e8" },
|
||||
".cm-errorLine": { backgroundColor: "rgba(255, 0, 0, 0.1)" },
|
||||
".cm-selectedWordMatch": {
|
||||
backgroundColor: "rgba(255, 209, 102, 0.35)",
|
||||
borderRadius: "2px",
|
||||
},
|
||||
});
|
||||
|
||||
const lightHighlight = HighlightStyle.define([
|
||||
@@ -96,6 +119,79 @@ const lightHighlight = HighlightStyle.define([
|
||||
// ---- Error line decoration ----
|
||||
|
||||
const errorLineDeco = Decoration.line({ class: "cm-errorLine" });
|
||||
const selectedWordMatchDeco = Decoration.mark({
|
||||
class: "cm-selectedWordMatch",
|
||||
});
|
||||
|
||||
const getSelectedWordMatchText = (state: EditorState) => {
|
||||
const mainSelection = state.selection.main;
|
||||
if (state.selection.ranges.length !== 1 || mainSelection.empty) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const selectedWord = state.wordAt(mainSelection.from);
|
||||
if (
|
||||
!selectedWord ||
|
||||
selectedWord.from !== mainSelection.from ||
|
||||
selectedWord.to !== mainSelection.to
|
||||
) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return state.sliceDoc(mainSelection.from, mainSelection.to);
|
||||
};
|
||||
|
||||
const getSelectedWordMatchDecorations = (view: EditorView): DecorationSet => {
|
||||
const selectedWord = getSelectedWordMatchText(view.state);
|
||||
if (!selectedWord) {
|
||||
return Decoration.none;
|
||||
}
|
||||
|
||||
const selection = view.state.selection.main;
|
||||
const ranges: Range<Decoration>[] = [];
|
||||
const doc = view.state.doc.toString();
|
||||
let searchFrom = 0;
|
||||
|
||||
while (searchFrom <= doc.length - selectedWord.length) {
|
||||
const matchFrom = doc.indexOf(selectedWord, searchFrom);
|
||||
if (matchFrom === -1) {
|
||||
break;
|
||||
}
|
||||
|
||||
const matchTo = matchFrom + selectedWord.length;
|
||||
const matchWord = view.state.wordAt(matchFrom);
|
||||
if (
|
||||
matchWord?.from === matchFrom &&
|
||||
matchWord.to === matchTo &&
|
||||
(matchFrom !== selection.from || matchTo !== selection.to)
|
||||
) {
|
||||
ranges.push(selectedWordMatchDeco.range(matchFrom, matchTo));
|
||||
}
|
||||
|
||||
searchFrom = matchTo;
|
||||
}
|
||||
|
||||
return ranges.length ? Decoration.set(ranges) : Decoration.none;
|
||||
};
|
||||
|
||||
const selectedWordMatchExtension = ViewPlugin.fromClass(
|
||||
class {
|
||||
decorations: DecorationSet;
|
||||
|
||||
constructor(view: EditorView) {
|
||||
this.decorations = getSelectedWordMatchDecorations(view);
|
||||
}
|
||||
|
||||
update(update: ViewUpdate) {
|
||||
if (update.docChanged || update.selectionSet) {
|
||||
this.decorations = getSelectedWordMatchDecorations(update.view);
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
decorations: (value) => value.decorations,
|
||||
},
|
||||
);
|
||||
|
||||
const getErrorLineExtension = (
|
||||
errorLine: number | null | undefined,
|
||||
@@ -172,6 +268,7 @@ const CodeMirrorEditor = ({
|
||||
errorLineCompartmentRef.current.of([]),
|
||||
mermaidLite(),
|
||||
drawSelection({ drawRangeCursor: true }),
|
||||
selectedWordMatchExtension,
|
||||
...(placeholder ? [cmPlaceholder(placeholder)] : []),
|
||||
],
|
||||
}),
|
||||
|
||||
@@ -80,7 +80,10 @@ const TextToDiagramContent = ({
|
||||
} = useChatManagement({ persistenceAdapter });
|
||||
|
||||
const onViewAsMermaid = () => {
|
||||
if (typeof lastAssistantMessage?.content === "string") {
|
||||
if (
|
||||
lastAssistantMessage?.contentFormat === "mermaid" &&
|
||||
typeof lastAssistantMessage.content === "string"
|
||||
) {
|
||||
saveMermaidDataToStorage(lastAssistantMessage.content);
|
||||
setAppState({
|
||||
openDialog: { name: "ttd", tab: "mermaid" },
|
||||
@@ -206,6 +209,7 @@ const TextToDiagramContent = ({
|
||||
onGenerate={onGenerate}
|
||||
isGenerating={lastAssistantMessage?.isGenerating ?? false}
|
||||
generatedResponse={lastAssistantMessage?.content}
|
||||
generatedResponseFormat={lastAssistantMessage?.contentFormat}
|
||||
isMenuOpen={isMenuOpen}
|
||||
onMenuToggle={handleMenuToggle}
|
||||
onMenuClose={handleMenuClose}
|
||||
|
||||
@@ -88,6 +88,7 @@ export const useTextGeneration = ({
|
||||
updateAssistantContent(prev, {
|
||||
isGenerating: true,
|
||||
content: "",
|
||||
contentFormat: "mermaid",
|
||||
error: undefined,
|
||||
errorType: undefined,
|
||||
errorDetails: undefined,
|
||||
|
||||
@@ -0,0 +1,40 @@
|
||||
import {
|
||||
getMermaidHighlightToken,
|
||||
tokenizeMermaid,
|
||||
} from "./mermaid-highlighting";
|
||||
|
||||
describe("mermaid highlighting", () => {
|
||||
it("tokenizes mermaid syntax with shared token types", () => {
|
||||
const tokens = tokenizeMermaid('flowchart LR\nA["Hello"] --> B');
|
||||
|
||||
expect(tokens).toEqual([
|
||||
{ type: "keyword", value: "flowchart" },
|
||||
{ type: null, value: " " },
|
||||
{ type: "keyword", value: "LR" },
|
||||
{ type: null, value: "\n" },
|
||||
{ type: "variableName", value: "A" },
|
||||
{ type: "bracket", value: "[" },
|
||||
{ type: "string", value: '"Hello"' },
|
||||
{ type: "bracket", value: "]" },
|
||||
{ type: null, value: " " },
|
||||
{ type: "operator", value: "-->" },
|
||||
{ type: null, value: " " },
|
||||
{ type: "variableName", value: "B" },
|
||||
]);
|
||||
});
|
||||
|
||||
it("limits comment tokens to a single line", () => {
|
||||
const tokens = tokenizeMermaid("%% comment\nflowchart TD");
|
||||
|
||||
expect(tokens[0]).toEqual({ type: "comment", value: "%% comment" });
|
||||
expect(tokens[1]).toEqual({ type: null, value: "\n" });
|
||||
expect(tokens[2]).toEqual({ type: "keyword", value: "flowchart" });
|
||||
});
|
||||
|
||||
it("falls back to plain text for unsupported characters", () => {
|
||||
expect(getMermaidHighlightToken("@node")).toEqual({
|
||||
type: null,
|
||||
value: "@",
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,79 @@
|
||||
export type MermaidHighlightTokenType =
|
||||
| "bracket"
|
||||
| "comment"
|
||||
| "keyword"
|
||||
| "number"
|
||||
| "operator"
|
||||
| "punctuation"
|
||||
| "string"
|
||||
| "variableName";
|
||||
|
||||
export type MermaidHighlightToken = {
|
||||
type: MermaidHighlightTokenType | null;
|
||||
value: string;
|
||||
};
|
||||
|
||||
const DIAGRAM_TYPE_PATTERN =
|
||||
/^(flowchart|graph|sequenceDiagram|classDiagram|stateDiagram|erDiagram|gantt|pie|mindmap|journey|gitGraph|timeline|quadrantChart|sankey|xychart)\b/i;
|
||||
const DIRECTION_PATTERN = /^(TB|TD|BT|RL|LR)\b/;
|
||||
const KEYWORD_PATTERN =
|
||||
/^(subgraph|end|participant|actor|loop|alt|else|opt|par|critical|break|rect|note|over|activate|deactivate|title|section|class|style|linkStyle|classDef|click)\b/i;
|
||||
|
||||
const MERMAID_TOKEN_RULES: ReadonlyArray<{
|
||||
pattern: RegExp;
|
||||
type: MermaidHighlightTokenType | null;
|
||||
}> = [
|
||||
{ pattern: /^%%[^\n]*/, type: "comment" },
|
||||
{ pattern: /^"(?:[^"\\]|\\.)*"/, type: "string" },
|
||||
{ pattern: DIAGRAM_TYPE_PATTERN, type: "keyword" },
|
||||
{ pattern: DIRECTION_PATTERN, type: "keyword" },
|
||||
{ pattern: KEYWORD_PATTERN, type: "keyword" },
|
||||
{ pattern: /^[-.=<>|ox]+>/, type: "operator" },
|
||||
{ pattern: /^<[-.=<>|ox]+/, type: "operator" },
|
||||
{ pattern: /^(--+|\.\.+|==+)/, type: "operator" },
|
||||
{ pattern: /^[[\](){}|<>]/, type: "bracket" },
|
||||
{ pattern: /^[A-Za-z_][A-Za-z0-9_]*/, type: "variableName" },
|
||||
{ pattern: /^\d+(\.\d+)?/, type: "number" },
|
||||
{ pattern: /^[,:;]/, type: "punctuation" },
|
||||
{ pattern: /^\s+/, type: null },
|
||||
];
|
||||
|
||||
export const getMermaidHighlightToken = (
|
||||
input: string,
|
||||
): MermaidHighlightToken | null => {
|
||||
if (!input) {
|
||||
return null;
|
||||
}
|
||||
|
||||
for (const rule of MERMAID_TOKEN_RULES) {
|
||||
const match = input.match(rule.pattern);
|
||||
if (match) {
|
||||
return {
|
||||
type: rule.type,
|
||||
value: match[0],
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
type: null,
|
||||
value: input[0],
|
||||
};
|
||||
};
|
||||
|
||||
export const tokenizeMermaid = (input: string): MermaidHighlightToken[] => {
|
||||
const tokens: MermaidHighlightToken[] = [];
|
||||
let remaining = input;
|
||||
|
||||
while (remaining) {
|
||||
const token = getMermaidHighlightToken(remaining);
|
||||
if (!token) {
|
||||
break;
|
||||
}
|
||||
|
||||
tokens.push(token);
|
||||
remaining = remaining.slice(token.value.length);
|
||||
}
|
||||
|
||||
return tokens;
|
||||
};
|
||||
@@ -1,79 +1,17 @@
|
||||
import { StreamLanguage } from "@codemirror/language";
|
||||
|
||||
import { getMermaidHighlightToken } from "./mermaid-highlighting";
|
||||
|
||||
const mermaidStreamParser = StreamLanguage.define({
|
||||
token(stream) {
|
||||
// Comments: %%...
|
||||
if (stream.match(/^%%.*$/)) {
|
||||
return "comment";
|
||||
}
|
||||
|
||||
// Strings
|
||||
if (stream.match(/^"(?:[^"\\]|\\.)*"/)) {
|
||||
return "string";
|
||||
}
|
||||
|
||||
// Diagram type keywords (at start of line or after whitespace)
|
||||
if (
|
||||
stream.match(
|
||||
/^(flowchart|graph|sequenceDiagram|classDiagram|stateDiagram|erDiagram|gantt|pie|mindmap|journey|gitGraph|timeline|quadrantChart|sankey|xychart)\b/i,
|
||||
)
|
||||
) {
|
||||
return "keyword";
|
||||
}
|
||||
|
||||
// Direction keywords
|
||||
if (stream.match(/^(TB|TD|BT|RL|LR)\b/)) {
|
||||
return "keyword";
|
||||
}
|
||||
|
||||
// Keywords
|
||||
if (
|
||||
stream.match(
|
||||
/^(subgraph|end|participant|actor|loop|alt|else|opt|par|critical|break|rect|note|over|activate|deactivate|title|section|class|style|linkStyle|classDef|click)\b/i,
|
||||
)
|
||||
) {
|
||||
return "keyword";
|
||||
}
|
||||
|
||||
// Arrows: -->, ---, -.->, ===>, etc.
|
||||
if (stream.match(/^[-.=<>|ox]+>/)) {
|
||||
return "operator";
|
||||
}
|
||||
if (stream.match(/^<[-.=<>|ox]+/)) {
|
||||
return "operator";
|
||||
}
|
||||
if (stream.match(/^--+|\.\.+|==+/)) {
|
||||
return "operator";
|
||||
}
|
||||
|
||||
// Labels in brackets/parens: [text], (text), {text}, ((text)), etc.
|
||||
if (stream.match(/^[[\](){}|<>]/)) {
|
||||
return "bracket";
|
||||
}
|
||||
|
||||
// Node IDs (alphanumeric)
|
||||
if (stream.match(/^[A-Za-z_][A-Za-z0-9_]*/)) {
|
||||
return "variableName";
|
||||
}
|
||||
|
||||
// Numbers
|
||||
if (stream.match(/^\d+(\.\d+)?/)) {
|
||||
return "number";
|
||||
}
|
||||
|
||||
// Punctuation
|
||||
if (stream.match(/^[,:;]/)) {
|
||||
return "punctuation";
|
||||
}
|
||||
|
||||
// Skip whitespace
|
||||
if (stream.eatSpace()) {
|
||||
const token = getMermaidHighlightToken(stream.string.slice(stream.pos));
|
||||
if (!token) {
|
||||
stream.skipToEnd();
|
||||
return null;
|
||||
}
|
||||
|
||||
// Skip any other character
|
||||
stream.next();
|
||||
return null;
|
||||
stream.pos += token.value.length;
|
||||
return token.type;
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
@@ -18,6 +18,8 @@ export type MermaidData = {
|
||||
files: BinaryFiles | null;
|
||||
};
|
||||
|
||||
export type ChatMessageContentFormat = "text" | "mermaid";
|
||||
|
||||
export interface RateLimits {
|
||||
rateLimit: number;
|
||||
rateLimitRemaining: number;
|
||||
@@ -33,6 +35,7 @@ export namespace TChat {
|
||||
errorType?: "parse" | "network" | "other";
|
||||
lastAttemptAt?: number;
|
||||
type: "user" | "assistant" | "warning";
|
||||
contentFormat?: ChatMessageContentFormat;
|
||||
warningType?: /* daily rate limit */
|
||||
"messageLimitExceeded" | /* general 429 */ "rateLimitExceeded";
|
||||
content?: string;
|
||||
|
||||
@@ -7,6 +7,17 @@ import { chatHistoryAtom } from "./TTDContext";
|
||||
|
||||
import type { SavedChat, SavedChats, TTDPersistenceAdapter } from "./types";
|
||||
|
||||
const normalizePersistedChat = (chat: SavedChat): SavedChat => ({
|
||||
...chat,
|
||||
messages: chat.messages.map((message) => ({
|
||||
...message,
|
||||
// Legacy TTD chats predate explicit content format metadata.
|
||||
contentFormat:
|
||||
message.contentFormat ??
|
||||
(message.type === "assistant" ? "mermaid" : undefined),
|
||||
})),
|
||||
});
|
||||
|
||||
interface UseTTDChatStorageProps {
|
||||
persistenceAdapter: TTDPersistenceAdapter;
|
||||
}
|
||||
@@ -56,7 +67,7 @@ export const useTTDChatStorage = ({
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const chats = await persistenceAdapter.loadChats();
|
||||
setSavedChats(chats);
|
||||
setSavedChats(chats.map(normalizePersistedChat));
|
||||
setChatsLoaded(true);
|
||||
} catch (error) {
|
||||
console.warn("Failed to load chats:", error);
|
||||
|
||||
@@ -117,6 +117,28 @@ describe("chat utils", () => {
|
||||
expect(result.messages[0].errorType).toBe("network");
|
||||
});
|
||||
|
||||
it("should update content format when provided", () => {
|
||||
const chatHistory: TChat.ChatHistory = {
|
||||
id: "chat-1",
|
||||
currentPrompt: "",
|
||||
messages: [
|
||||
{
|
||||
id: "1",
|
||||
type: "assistant",
|
||||
content: "graph TD",
|
||||
timestamp: new Date("2024-01-01"),
|
||||
contentFormat: "text",
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const result = updateAssistantContent(chatHistory, {
|
||||
contentFormat: "mermaid",
|
||||
});
|
||||
|
||||
expect(result.messages[0].contentFormat).toBe("mermaid");
|
||||
});
|
||||
|
||||
it("should return unchanged chatHistory if no assistant message exists", () => {
|
||||
const chatHistory: TChat.ChatHistory = {
|
||||
id: "chat-1",
|
||||
@@ -357,6 +379,7 @@ describe("chat utils", () => {
|
||||
{
|
||||
type: "assistant",
|
||||
content: "Message",
|
||||
contentFormat: "mermaid",
|
||||
isGenerating: true,
|
||||
error: "Error text",
|
||||
errorType: "parse",
|
||||
@@ -364,6 +387,7 @@ describe("chat utils", () => {
|
||||
]);
|
||||
|
||||
expect(result.messages[0].isGenerating).toBe(true);
|
||||
expect(result.messages[0].contentFormat).toBe("mermaid");
|
||||
expect(result.messages[0].error).toBe("Error text");
|
||||
expect(result.messages[0].errorType).toBe("parse");
|
||||
});
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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"
|
||||
},
|
||||
@@ -664,7 +661,7 @@
|
||||
"placeholder": {
|
||||
"title": "Let's design your diagram",
|
||||
"description": "Describe the diagram you want to create, and we'll generate it for you.",
|
||||
"hint": "At the moment we know Flowchart, Sequence, Class, State, and Entity Relationship diagrams."
|
||||
"hint": "At the moment we know Flowchart, Sequence, Class, and Entity Relationship diagrams."
|
||||
},
|
||||
"preview": "Preview",
|
||||
"insert": "Insert",
|
||||
|
||||
@@ -88,7 +88,7 @@
|
||||
"@excalidraw/element": "0.18.0",
|
||||
"@excalidraw/laser-pointer": "1.3.1",
|
||||
"@excalidraw/math": "0.18.0",
|
||||
"@excalidraw/mermaid-to-excalidraw": "2.2.2",
|
||||
"@excalidraw/mermaid-to-excalidraw": "2.1.1",
|
||||
"@excalidraw/random-username": "1.1.0",
|
||||
"browser-fs-access": "0.38.0",
|
||||
"canvas-roundrect-polyfill": "0.0.1",
|
||||
|
||||
@@ -2,8 +2,7 @@ import { pointFrom, type GlobalPoint, type LocalPoint } from "@excalidraw/math";
|
||||
|
||||
import { THEME } from "@excalidraw/common";
|
||||
|
||||
import type { PointSnapLine, PointerSnapLine } from "@excalidraw/element";
|
||||
|
||||
import type { PointSnapLine, PointerSnapLine } from "../snapping";
|
||||
import type { InteractiveCanvasAppState } from "../types";
|
||||
|
||||
const SNAP_COLOR_LIGHT = "#ff6b6b";
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -1,8 +1,4 @@
|
||||
import {
|
||||
isCloseTo,
|
||||
line,
|
||||
linesIntersectAt,
|
||||
pointDistance,
|
||||
pointFrom,
|
||||
pointRotateRads,
|
||||
rangeInclusive,
|
||||
@@ -17,7 +13,7 @@ import {
|
||||
getDraggedElementsBounds,
|
||||
getElementAbsoluteCoords,
|
||||
} from "@excalidraw/element";
|
||||
import { isBoundToContainer, isElbowArrow } from "@excalidraw/element";
|
||||
import { isBoundToContainer } from "@excalidraw/element";
|
||||
|
||||
import { getMaximumGroups } from "@excalidraw/element";
|
||||
|
||||
@@ -33,18 +29,14 @@ import type { MaybeTransformHandleType } from "@excalidraw/element";
|
||||
import type {
|
||||
ElementsMap,
|
||||
ExcalidrawElement,
|
||||
ExcalidrawLinearElement,
|
||||
NonDeletedExcalidrawElement,
|
||||
NonDeleted,
|
||||
} from "@excalidraw/element/types";
|
||||
|
||||
import type {
|
||||
AppClassProperties,
|
||||
AppState,
|
||||
KeyboardModifiersObject,
|
||||
} from "@excalidraw/excalidraw/types";
|
||||
|
||||
import { LinearElementEditor } from "./linearElementEditor";
|
||||
} from "./types";
|
||||
|
||||
const SNAP_DISTANCE = 8;
|
||||
|
||||
@@ -130,11 +122,6 @@ export type SnapLine = PointSnapLine | GapSnapLine | PointerSnapLine;
|
||||
export class SnapCache {
|
||||
private static referenceSnapPoints: GlobalPoint[] | null = null;
|
||||
|
||||
private static linearElementAxisSnapTargets: {
|
||||
editingElementId: ExcalidrawElement["id"];
|
||||
snapTargets: GlobalPoint[];
|
||||
} | null = null;
|
||||
|
||||
private static visibleGaps: {
|
||||
verticalGaps: Gap[];
|
||||
horizontalGaps: Gap[];
|
||||
@@ -148,27 +135,6 @@ export class SnapCache {
|
||||
return SnapCache.referenceSnapPoints;
|
||||
};
|
||||
|
||||
public static setLinearElementAxisSnapTargets = (
|
||||
editingElementId: ExcalidrawElement["id"],
|
||||
snapTargets: GlobalPoint[] | null,
|
||||
) => {
|
||||
SnapCache.linearElementAxisSnapTargets = snapTargets
|
||||
? {
|
||||
editingElementId,
|
||||
snapTargets,
|
||||
}
|
||||
: null;
|
||||
};
|
||||
|
||||
public static getLinearElementAxisSnapTargets = (
|
||||
editingElementId: ExcalidrawElement["id"],
|
||||
) => {
|
||||
return SnapCache.linearElementAxisSnapTargets?.editingElementId ===
|
||||
editingElementId
|
||||
? SnapCache.linearElementAxisSnapTargets.snapTargets
|
||||
: null;
|
||||
};
|
||||
|
||||
public static setVisibleGaps = (
|
||||
gaps: {
|
||||
verticalGaps: Gap[];
|
||||
@@ -184,7 +150,6 @@ export class SnapCache {
|
||||
|
||||
public static destroy = () => {
|
||||
SnapCache.referenceSnapPoints = null;
|
||||
SnapCache.linearElementAxisSnapTargets = null;
|
||||
SnapCache.visibleGaps = null;
|
||||
};
|
||||
}
|
||||
@@ -270,19 +235,6 @@ export const getElementsCorners = (
|
||||
const halfHeight = (y2 - y1) / 2;
|
||||
|
||||
if (
|
||||
(element.type === "line" || element.type === "arrow") &&
|
||||
!boundingBoxCorners
|
||||
) {
|
||||
// For linear elements, use actual points instead of bounding box
|
||||
const linearPoints = LinearElementEditor.getPointsGlobalCoordinates(
|
||||
element as NonDeleted<ExcalidrawLinearElement>,
|
||||
elementsMap,
|
||||
{
|
||||
dragOffset,
|
||||
},
|
||||
);
|
||||
result = linearPoints;
|
||||
} else if (
|
||||
(element.type === "diamond" || element.type === "ellipse") &&
|
||||
!boundingBoxCorners
|
||||
) {
|
||||
@@ -681,227 +633,6 @@ export const getReferenceSnapPoints = (
|
||||
.flatMap((elementGroup) => getElementsCorners(elementGroup, elementsMap));
|
||||
};
|
||||
|
||||
const getExternalAxisSnapTargets = (
|
||||
elements: readonly NonDeletedExcalidrawElement[],
|
||||
editingElement: ExcalidrawLinearElement,
|
||||
appState: AppState,
|
||||
elementsMap: ElementsMap,
|
||||
) => {
|
||||
const cachedAxisSnapTargets = SnapCache.getLinearElementAxisSnapTargets(
|
||||
editingElement.id,
|
||||
);
|
||||
|
||||
const externalAxisSnapTargets =
|
||||
cachedAxisSnapTargets ??
|
||||
getReferenceSnapPoints(elements, [editingElement], appState, elementsMap);
|
||||
|
||||
if (!cachedAxisSnapTargets) {
|
||||
SnapCache.setLinearElementAxisSnapTargets(
|
||||
editingElement.id,
|
||||
externalAxisSnapTargets,
|
||||
);
|
||||
}
|
||||
|
||||
return externalAxisSnapTargets;
|
||||
};
|
||||
|
||||
const getOwnAxisSnapTargets = (
|
||||
editingElement: ExcalidrawLinearElement,
|
||||
elementsMap: ElementsMap,
|
||||
selectedPointsIndices?: readonly number[],
|
||||
) => {
|
||||
return LinearElementEditor.getPointsGlobalCoordinates(
|
||||
editingElement as NonDeleted<ExcalidrawLinearElement>,
|
||||
elementsMap,
|
||||
{
|
||||
excludePointsIndices: selectedPointsIndices,
|
||||
},
|
||||
);
|
||||
};
|
||||
|
||||
export const getAxisSnapTargets = (
|
||||
elements: readonly NonDeletedExcalidrawElement[],
|
||||
editingElement: ExcalidrawLinearElement,
|
||||
appState: AppState,
|
||||
elementsMap: ElementsMap,
|
||||
options: {
|
||||
includeSelfPoints?: boolean;
|
||||
selectedPointsIndices?: readonly number[];
|
||||
} = {},
|
||||
) => {
|
||||
const externalAxisSnapTargets = getExternalAxisSnapTargets(
|
||||
elements,
|
||||
editingElement,
|
||||
appState,
|
||||
elementsMap,
|
||||
);
|
||||
|
||||
if (!options.includeSelfPoints) {
|
||||
return externalAxisSnapTargets;
|
||||
}
|
||||
|
||||
return externalAxisSnapTargets.concat(
|
||||
getOwnAxisSnapTargets(
|
||||
editingElement,
|
||||
elementsMap,
|
||||
options.selectedPointsIndices,
|
||||
),
|
||||
);
|
||||
};
|
||||
|
||||
const collectNearestAxisSnapCandidates = (
|
||||
axisSnapTargets: readonly GlobalPoint[],
|
||||
pointerPosition: GlobalPoint,
|
||||
nearestSnapsX: Snaps,
|
||||
nearestSnapsY: Snaps,
|
||||
minOffset: Vector2D,
|
||||
) => {
|
||||
for (const snapTarget of axisSnapTargets) {
|
||||
const offsetX = snapTarget[0] - pointerPosition[0];
|
||||
const offsetY = snapTarget[1] - pointerPosition[1];
|
||||
const absOffsetX = Math.abs(offsetX);
|
||||
const absOffsetY = Math.abs(offsetY);
|
||||
|
||||
if (absOffsetX > minOffset.x && absOffsetY > minOffset.y) {
|
||||
continue;
|
||||
}
|
||||
|
||||
if (absOffsetX <= minOffset.x) {
|
||||
if (absOffsetX < minOffset.x) {
|
||||
nearestSnapsX.length = 0;
|
||||
}
|
||||
|
||||
nearestSnapsX.push({
|
||||
type: "point",
|
||||
points: [pointerPosition, snapTarget],
|
||||
offset: offsetX,
|
||||
});
|
||||
|
||||
minOffset.x = absOffsetX;
|
||||
}
|
||||
|
||||
if (absOffsetY <= minOffset.y) {
|
||||
if (absOffsetY < minOffset.y) {
|
||||
nearestSnapsY.length = 0;
|
||||
}
|
||||
|
||||
nearestSnapsY.push({
|
||||
type: "point",
|
||||
points: [pointerPosition, snapTarget],
|
||||
offset: offsetY,
|
||||
});
|
||||
|
||||
minOffset.y = absOffsetY;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export const snapLinearElementPoint = (
|
||||
elements: readonly NonDeletedExcalidrawElement[],
|
||||
editingElement: ExcalidrawLinearElement,
|
||||
pointerPosition: GlobalPoint,
|
||||
app: AppClassProperties,
|
||||
event: KeyboardModifiersObject,
|
||||
elementsMap: ElementsMap,
|
||||
options: {
|
||||
includeExternalPoints?: boolean;
|
||||
includeSelfPoints?: boolean;
|
||||
selectedPointsIndices?: readonly number[];
|
||||
} = {},
|
||||
) => {
|
||||
if (
|
||||
!isSnappingEnabled({ app, event, selectedElements: [editingElement] }) ||
|
||||
isElbowArrow(editingElement)
|
||||
) {
|
||||
return {
|
||||
snapOffset: { x: 0, y: 0 },
|
||||
snapLines: [],
|
||||
};
|
||||
}
|
||||
|
||||
const snapDistance = getSnapDistance(app.state.zoom.value);
|
||||
const minOffset = {
|
||||
x: snapDistance,
|
||||
y: snapDistance,
|
||||
};
|
||||
|
||||
const nearestSnapsX: Snaps = [];
|
||||
const nearestSnapsY: Snaps = [];
|
||||
|
||||
if (options.includeExternalPoints !== false) {
|
||||
collectNearestAxisSnapCandidates(
|
||||
getExternalAxisSnapTargets(
|
||||
elements,
|
||||
editingElement,
|
||||
app.state,
|
||||
elementsMap,
|
||||
),
|
||||
pointerPosition,
|
||||
nearestSnapsX,
|
||||
nearestSnapsY,
|
||||
minOffset,
|
||||
);
|
||||
}
|
||||
|
||||
if (options.includeSelfPoints) {
|
||||
collectNearestAxisSnapCandidates(
|
||||
getOwnAxisSnapTargets(
|
||||
editingElement,
|
||||
elementsMap,
|
||||
options.selectedPointsIndices,
|
||||
),
|
||||
pointerPosition,
|
||||
nearestSnapsX,
|
||||
nearestSnapsY,
|
||||
minOffset,
|
||||
);
|
||||
}
|
||||
|
||||
const snapOffset = {
|
||||
x: nearestSnapsX[0]?.offset ?? 0,
|
||||
y: nearestSnapsY[0]?.offset ?? 0,
|
||||
};
|
||||
|
||||
// Create snap lines using the snapped position (fixed position)
|
||||
let pointSnapLines: SnapLine[] = [];
|
||||
|
||||
if (snapOffset.x !== 0 || snapOffset.y !== 0) {
|
||||
const snappedPosition = pointFrom<GlobalPoint>(
|
||||
pointerPosition[0] + snapOffset.x,
|
||||
pointerPosition[1] + snapOffset.y,
|
||||
);
|
||||
|
||||
const snappedSnapsX = nearestSnapsX
|
||||
.filter(
|
||||
(snap): snap is PointSnap =>
|
||||
snap.type === "point" && isCloseTo(snap.offset, snapOffset.x, 0.01),
|
||||
)
|
||||
.map((snap) => ({
|
||||
type: "point" as const,
|
||||
points: [snappedPosition, snap.points[1]] as [GlobalPoint, GlobalPoint],
|
||||
offset: 0,
|
||||
}));
|
||||
|
||||
const snappedSnapsY = nearestSnapsY
|
||||
.filter(
|
||||
(snap): snap is PointSnap =>
|
||||
snap.type === "point" && isCloseTo(snap.offset, snapOffset.y, 0.01),
|
||||
)
|
||||
.map((snap) => ({
|
||||
type: "point" as const,
|
||||
points: [snappedPosition, snap.points[1]] as [GlobalPoint, GlobalPoint],
|
||||
offset: 0,
|
||||
}));
|
||||
|
||||
pointSnapLines = createPointSnapLines(snappedSnapsX, snappedSnapsY);
|
||||
}
|
||||
|
||||
return {
|
||||
snapOffset,
|
||||
snapLines: pointSnapLines,
|
||||
};
|
||||
};
|
||||
|
||||
const getPointSnaps = (
|
||||
selectedElements: ExcalidrawElement[],
|
||||
selectionSnapPoints: GlobalPoint[],
|
||||
@@ -1681,79 +1412,3 @@ export const isActiveToolNonLinearSnappable = (
|
||||
activeToolType === TOOL_TYPE.text
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Snaps to discrete angle rotation logic.
|
||||
* This function handles the common pattern of finding intersections between
|
||||
* angle lines and snap lines, and updating the snap lines accordingly.
|
||||
*
|
||||
* @param snapLines - The original snap lines from snapping
|
||||
* @param angleLine - The line representing the discrete angle constraint
|
||||
* @param gridPosition - The grid position (original pointer position)
|
||||
* @param referencePosition - The reference position (usually the start point)
|
||||
* @returns Object containing updated snap lines and position deltas
|
||||
*/
|
||||
export const snapToDiscreteAngle = (
|
||||
snapLines: SnapLine[],
|
||||
angleLine: [GlobalPoint, GlobalPoint],
|
||||
gridPosition: GlobalPoint,
|
||||
referencePosition: GlobalPoint,
|
||||
): {
|
||||
snapLines: SnapLine[];
|
||||
dxFromReference: number;
|
||||
dyFromReference: number;
|
||||
} => {
|
||||
if (snapLines.length === 0) {
|
||||
return {
|
||||
snapLines: [],
|
||||
dxFromReference: gridPosition[0] - referencePosition[0],
|
||||
dyFromReference: gridPosition[1] - referencePosition[1],
|
||||
};
|
||||
}
|
||||
|
||||
const firstSnapLine = snapLines[0];
|
||||
if (firstSnapLine.type === "points" && firstSnapLine.points.length > 1) {
|
||||
const snapLine = line(firstSnapLine.points[0], firstSnapLine.points[1]);
|
||||
const intersection = linesIntersectAt<GlobalPoint>(
|
||||
line(angleLine[0], angleLine[1]),
|
||||
snapLine,
|
||||
);
|
||||
|
||||
if (intersection) {
|
||||
const dxFromReference = intersection[0] - referencePosition[0];
|
||||
const dyFromReference = intersection[1] - referencePosition[1];
|
||||
|
||||
const furthestPoint = firstSnapLine.points.reduce(
|
||||
(furthest, point) => {
|
||||
const distance = pointDistance(intersection, point);
|
||||
if (distance > furthest.distance) {
|
||||
return { point, distance };
|
||||
}
|
||||
return furthest;
|
||||
},
|
||||
{
|
||||
point: firstSnapLine.points[0],
|
||||
distance: pointDistance(intersection, firstSnapLine.points[0]),
|
||||
},
|
||||
);
|
||||
|
||||
const updatedSnapLine: PointSnapLine = {
|
||||
type: "points",
|
||||
points: [furthestPoint.point, intersection],
|
||||
};
|
||||
|
||||
return {
|
||||
snapLines: [updatedSnapLine],
|
||||
dxFromReference,
|
||||
dyFromReference,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// If no intersection found, return original snap lines with grid position
|
||||
return {
|
||||
snapLines,
|
||||
dxFromReference: gridPosition[0] - referencePosition[0],
|
||||
dyFromReference: gridPosition[1] - referencePosition[1],
|
||||
};
|
||||
};
|
||||
@@ -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": [
|
||||
@@ -1087,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,
|
||||
@@ -1302,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,
|
||||
@@ -1634,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,
|
||||
@@ -1966,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,
|
||||
@@ -2181,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,
|
||||
@@ -2423,7 +2417,6 @@ exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates
|
||||
},
|
||||
"bindMode": "orbit",
|
||||
"bindingPreference": "enabled",
|
||||
"boxSelectionMode": "contain",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
@@ -2722,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,
|
||||
@@ -3095,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,
|
||||
@@ -3589,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,
|
||||
@@ -3913,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,
|
||||
@@ -4237,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,
|
||||
@@ -4370,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,
|
||||
@@ -4395,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,
|
||||
@@ -4649,7 +4637,6 @@ exports[`contextMenu element > shows 'Group selection' in context menu for multi
|
||||
},
|
||||
"bindMode": "orbit",
|
||||
"bindingPreference": "enabled",
|
||||
"boxSelectionMode": "contain",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": {
|
||||
"items": [
|
||||
@@ -5867,7 +5854,6 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro
|
||||
},
|
||||
"bindMode": "orbit",
|
||||
"bindingPreference": "enabled",
|
||||
"boxSelectionMode": "contain",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": {
|
||||
"items": [
|
||||
@@ -6878,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,
|
||||
@@ -6905,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,
|
||||
@@ -7136,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": [
|
||||
@@ -7826,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": [
|
||||
@@ -8818,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": [
|
||||
|
||||
@@ -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,
|
||||
@@ -1570,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,
|
||||
@@ -1933,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,
|
||||
@@ -2197,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,
|
||||
@@ -2651,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,
|
||||
@@ -2955,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,
|
||||
@@ -3275,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,
|
||||
@@ -3570,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,
|
||||
@@ -3857,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,
|
||||
@@ -4093,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,
|
||||
@@ -4351,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,
|
||||
@@ -4623,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,
|
||||
@@ -4853,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,
|
||||
@@ -5083,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,
|
||||
@@ -5331,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,
|
||||
@@ -5588,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,
|
||||
@@ -5847,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,
|
||||
@@ -6177,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,
|
||||
@@ -6605,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,
|
||||
@@ -6980,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,
|
||||
@@ -7293,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,
|
||||
@@ -7586,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,
|
||||
@@ -7817,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,
|
||||
@@ -8170,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,
|
||||
@@ -8523,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,
|
||||
@@ -8930,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,
|
||||
@@ -9210,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,
|
||||
@@ -9475,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,
|
||||
@@ -9741,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,
|
||||
@@ -9974,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,
|
||||
@@ -10272,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,
|
||||
@@ -10590,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,
|
||||
@@ -10827,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,
|
||||
@@ -11257,489 +11222,6 @@ exports[`history > multiplayer undo/redo > should redraw arrows on undo > [end o
|
||||
|
||||
exports[`history > multiplayer undo/redo > should redraw arrows on undo > [end of test] undo stack 1`] = `[]`;
|
||||
|
||||
exports[`history > multiplayer undo/redo > should support undo and redo when escape unwinds nested group editing > [end of test] appState 1`] = `
|
||||
{
|
||||
"activeEmbeddable": null,
|
||||
"activeLockedId": null,
|
||||
"activeTool": {
|
||||
"customType": null,
|
||||
"fromSelection": false,
|
||||
"lastActiveTool": null,
|
||||
"locked": false,
|
||||
"type": "selection",
|
||||
},
|
||||
"bindMode": "orbit",
|
||||
"bindingPreference": "enabled",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
"currentHoveredFontFamily": null,
|
||||
"currentItemArrowType": "round",
|
||||
"currentItemBackgroundColor": "transparent",
|
||||
"currentItemEndArrowhead": "arrow",
|
||||
"currentItemFillStyle": "solid",
|
||||
"currentItemFontFamily": 5,
|
||||
"currentItemFontSize": 20,
|
||||
"currentItemOpacity": 100,
|
||||
"currentItemRoughness": 1,
|
||||
"currentItemRoundness": "sharp",
|
||||
"currentItemStartArrowhead": null,
|
||||
"currentItemStrokeColor": "#1e1e1e",
|
||||
"currentItemStrokeStyle": "solid",
|
||||
"currentItemStrokeWidth": 2,
|
||||
"currentItemTextAlign": "left",
|
||||
"cursorButton": "up",
|
||||
"defaultSidebarDockedPreference": false,
|
||||
"editingFrame": null,
|
||||
"editingGroupId": null,
|
||||
"editingTextElement": null,
|
||||
"elementsToHighlight": null,
|
||||
"errorMessage": null,
|
||||
"exportBackground": true,
|
||||
"exportEmbedScene": false,
|
||||
"exportScale": 1,
|
||||
"exportWithDarkMode": false,
|
||||
"fileHandle": null,
|
||||
"followedBy": Set {},
|
||||
"frameRendering": {
|
||||
"clip": true,
|
||||
"enabled": true,
|
||||
"name": true,
|
||||
"outline": true,
|
||||
},
|
||||
"frameToHighlight": null,
|
||||
"gridModeEnabled": false,
|
||||
"gridSize": 20,
|
||||
"gridStep": 5,
|
||||
"height": 0,
|
||||
"hoveredElementIds": {},
|
||||
"isBindingEnabled": true,
|
||||
"isCropping": false,
|
||||
"isLoading": false,
|
||||
"isMidpointSnappingEnabled": true,
|
||||
"isResizing": false,
|
||||
"isRotating": false,
|
||||
"lastPointerDownWith": "mouse",
|
||||
"lockedMultiSelections": {},
|
||||
"multiElement": null,
|
||||
"newElement": null,
|
||||
"objectsSnapModeEnabled": false,
|
||||
"offsetLeft": 0,
|
||||
"offsetTop": 0,
|
||||
"openDialog": null,
|
||||
"openMenu": null,
|
||||
"openPopup": null,
|
||||
"openSidebar": null,
|
||||
"originSnapOffset": null,
|
||||
"penDetected": false,
|
||||
"penMode": false,
|
||||
"preferredSelectionTool": {
|
||||
"initialized": true,
|
||||
"type": "selection",
|
||||
},
|
||||
"previousSelectedElementIds": {},
|
||||
"resizingElement": null,
|
||||
"scrollX": 0,
|
||||
"scrollY": 0,
|
||||
"searchMatches": null,
|
||||
"selectedElementIds": {},
|
||||
"selectedElementsAreBeingDragged": false,
|
||||
"selectedGroupIds": {},
|
||||
"selectionElement": null,
|
||||
"shouldCacheIgnoreZoom": false,
|
||||
"showHyperlinkPopup": false,
|
||||
"showWelcomeScreen": true,
|
||||
"snapLines": [],
|
||||
"startBoundElement": null,
|
||||
"stats": {
|
||||
"open": false,
|
||||
"panels": 3,
|
||||
},
|
||||
"suggestedBinding": null,
|
||||
"theme": "light",
|
||||
"toast": null,
|
||||
"userToFollow": null,
|
||||
"viewBackgroundColor": "#ffffff",
|
||||
"viewModeEnabled": false,
|
||||
"width": 0,
|
||||
"zenModeEnabled": false,
|
||||
"zoom": {
|
||||
"value": 1,
|
||||
},
|
||||
}
|
||||
`;
|
||||
|
||||
exports[`history > multiplayer undo/redo > should support undo and redo when escape unwinds nested group editing > [end of test] element 0 1`] = `
|
||||
{
|
||||
"angle": 0,
|
||||
"backgroundColor": "transparent",
|
||||
"boundElements": null,
|
||||
"customData": undefined,
|
||||
"fillStyle": "solid",
|
||||
"frameId": null,
|
||||
"groupIds": [
|
||||
"inner",
|
||||
"outer",
|
||||
],
|
||||
"height": 100,
|
||||
"id": "id0",
|
||||
"index": "a0",
|
||||
"isDeleted": false,
|
||||
"link": null,
|
||||
"locked": false,
|
||||
"opacity": 100,
|
||||
"roughness": 1,
|
||||
"roundness": null,
|
||||
"strokeColor": "#1e1e1e",
|
||||
"strokeStyle": "solid",
|
||||
"strokeWidth": 2,
|
||||
"type": "rectangle",
|
||||
"updated": 1,
|
||||
"version": 2,
|
||||
"width": 100,
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
}
|
||||
`;
|
||||
|
||||
exports[`history > multiplayer undo/redo > should support undo and redo when escape unwinds nested group editing > [end of test] element 1 1`] = `
|
||||
{
|
||||
"angle": 0,
|
||||
"backgroundColor": "transparent",
|
||||
"boundElements": null,
|
||||
"customData": undefined,
|
||||
"fillStyle": "solid",
|
||||
"frameId": null,
|
||||
"groupIds": [
|
||||
"outer",
|
||||
],
|
||||
"height": 100,
|
||||
"id": "id1",
|
||||
"index": "a1",
|
||||
"isDeleted": false,
|
||||
"link": null,
|
||||
"locked": false,
|
||||
"opacity": 100,
|
||||
"roughness": 1,
|
||||
"roundness": null,
|
||||
"strokeColor": "#1e1e1e",
|
||||
"strokeStyle": "solid",
|
||||
"strokeWidth": 2,
|
||||
"type": "rectangle",
|
||||
"updated": 1,
|
||||
"version": 2,
|
||||
"width": 100,
|
||||
"x": 100,
|
||||
"y": 100,
|
||||
}
|
||||
`;
|
||||
|
||||
exports[`history > multiplayer undo/redo > should support undo and redo when escape unwinds nested group editing > [end of test] element 2 1`] = `
|
||||
{
|
||||
"angle": 0,
|
||||
"backgroundColor": "transparent",
|
||||
"boundElements": null,
|
||||
"customData": undefined,
|
||||
"fillStyle": "solid",
|
||||
"frameId": null,
|
||||
"groupIds": [
|
||||
"inner",
|
||||
"outer",
|
||||
],
|
||||
"height": 100,
|
||||
"id": "id2",
|
||||
"index": "a2",
|
||||
"isDeleted": false,
|
||||
"link": null,
|
||||
"locked": false,
|
||||
"opacity": 100,
|
||||
"roughness": 1,
|
||||
"roundness": null,
|
||||
"strokeColor": "#1e1e1e",
|
||||
"strokeStyle": "solid",
|
||||
"strokeWidth": 2,
|
||||
"type": "rectangle",
|
||||
"updated": 1,
|
||||
"version": 2,
|
||||
"width": 100,
|
||||
"x": 200,
|
||||
"y": 200,
|
||||
}
|
||||
`;
|
||||
|
||||
exports[`history > multiplayer undo/redo > should support undo and redo when escape unwinds nested group editing > [end of test] number of elements 1`] = `3`;
|
||||
|
||||
exports[`history > multiplayer undo/redo > should support undo and redo when escape unwinds nested group editing > [end of test] number of renders 1`] = `16`;
|
||||
|
||||
exports[`history > multiplayer undo/redo > should support undo and redo when escape unwinds nested group editing > [end of test] redo stack 1`] = `[]`;
|
||||
|
||||
exports[`history > multiplayer undo/redo > should support undo and redo when escape unwinds nested group editing > [end of test] undo stack 1`] = `
|
||||
[
|
||||
{
|
||||
"appState": AppStateDelta {
|
||||
"delta": Delta {
|
||||
"deleted": {
|
||||
"selectedElementIds": {
|
||||
"id0": true,
|
||||
"id1": true,
|
||||
"id2": true,
|
||||
},
|
||||
"selectedGroupIds": {
|
||||
"outer": true,
|
||||
},
|
||||
},
|
||||
"inserted": {
|
||||
"selectedElementIds": {},
|
||||
"selectedGroupIds": {},
|
||||
},
|
||||
},
|
||||
},
|
||||
"elements": {
|
||||
"added": {},
|
||||
"removed": {
|
||||
"id0": {
|
||||
"deleted": {
|
||||
"angle": 0,
|
||||
"backgroundColor": "transparent",
|
||||
"boundElements": null,
|
||||
"customData": undefined,
|
||||
"fillStyle": "solid",
|
||||
"frameId": null,
|
||||
"groupIds": [
|
||||
"inner",
|
||||
"outer",
|
||||
],
|
||||
"height": 100,
|
||||
"index": "a0",
|
||||
"isDeleted": false,
|
||||
"link": null,
|
||||
"locked": false,
|
||||
"opacity": 100,
|
||||
"roughness": 1,
|
||||
"roundness": null,
|
||||
"strokeColor": "#1e1e1e",
|
||||
"strokeStyle": "solid",
|
||||
"strokeWidth": 2,
|
||||
"type": "rectangle",
|
||||
"version": 2,
|
||||
"width": 100,
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
},
|
||||
"inserted": {
|
||||
"isDeleted": true,
|
||||
"version": 1,
|
||||
},
|
||||
},
|
||||
"id1": {
|
||||
"deleted": {
|
||||
"angle": 0,
|
||||
"backgroundColor": "transparent",
|
||||
"boundElements": null,
|
||||
"customData": undefined,
|
||||
"fillStyle": "solid",
|
||||
"frameId": null,
|
||||
"groupIds": [
|
||||
"outer",
|
||||
],
|
||||
"height": 100,
|
||||
"index": "a1",
|
||||
"isDeleted": false,
|
||||
"link": null,
|
||||
"locked": false,
|
||||
"opacity": 100,
|
||||
"roughness": 1,
|
||||
"roundness": null,
|
||||
"strokeColor": "#1e1e1e",
|
||||
"strokeStyle": "solid",
|
||||
"strokeWidth": 2,
|
||||
"type": "rectangle",
|
||||
"version": 2,
|
||||
"width": 100,
|
||||
"x": 100,
|
||||
"y": 100,
|
||||
},
|
||||
"inserted": {
|
||||
"isDeleted": true,
|
||||
"version": 1,
|
||||
},
|
||||
},
|
||||
"id2": {
|
||||
"deleted": {
|
||||
"angle": 0,
|
||||
"backgroundColor": "transparent",
|
||||
"boundElements": null,
|
||||
"customData": undefined,
|
||||
"fillStyle": "solid",
|
||||
"frameId": null,
|
||||
"groupIds": [
|
||||
"inner",
|
||||
"outer",
|
||||
],
|
||||
"height": 100,
|
||||
"index": "a2",
|
||||
"isDeleted": false,
|
||||
"link": null,
|
||||
"locked": false,
|
||||
"opacity": 100,
|
||||
"roughness": 1,
|
||||
"roundness": null,
|
||||
"strokeColor": "#1e1e1e",
|
||||
"strokeStyle": "solid",
|
||||
"strokeWidth": 2,
|
||||
"type": "rectangle",
|
||||
"version": 2,
|
||||
"width": 100,
|
||||
"x": 200,
|
||||
"y": 200,
|
||||
},
|
||||
"inserted": {
|
||||
"isDeleted": true,
|
||||
"version": 1,
|
||||
},
|
||||
},
|
||||
},
|
||||
"updated": {},
|
||||
},
|
||||
"id": "id5",
|
||||
},
|
||||
{
|
||||
"appState": AppStateDelta {
|
||||
"delta": Delta {
|
||||
"deleted": {
|
||||
"editingGroupId": "outer",
|
||||
"selectedElementIds": {},
|
||||
"selectedGroupIds": {
|
||||
"inner": true,
|
||||
},
|
||||
},
|
||||
"inserted": {
|
||||
"editingGroupId": null,
|
||||
"selectedElementIds": {
|
||||
"id1": true,
|
||||
},
|
||||
"selectedGroupIds": {
|
||||
"outer": true,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
"elements": {
|
||||
"added": {},
|
||||
"removed": {},
|
||||
"updated": {},
|
||||
},
|
||||
"id": "id7",
|
||||
},
|
||||
{
|
||||
"appState": AppStateDelta {
|
||||
"delta": Delta {
|
||||
"deleted": {
|
||||
"editingGroupId": "inner",
|
||||
"selectedElementIds": {},
|
||||
"selectedGroupIds": {},
|
||||
},
|
||||
"inserted": {
|
||||
"editingGroupId": "outer",
|
||||
"selectedElementIds": {
|
||||
"id2": true,
|
||||
},
|
||||
"selectedGroupIds": {
|
||||
"inner": true,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
"elements": {
|
||||
"added": {},
|
||||
"removed": {},
|
||||
"updated": {},
|
||||
},
|
||||
"id": "id9",
|
||||
},
|
||||
{
|
||||
"appState": AppStateDelta {
|
||||
"delta": Delta {
|
||||
"deleted": {
|
||||
"editingGroupId": "outer",
|
||||
"selectedElementIds": {
|
||||
"id2": true,
|
||||
},
|
||||
"selectedGroupIds": {
|
||||
"inner": true,
|
||||
},
|
||||
},
|
||||
"inserted": {
|
||||
"editingGroupId": "inner",
|
||||
"selectedElementIds": {},
|
||||
"selectedGroupIds": {},
|
||||
},
|
||||
},
|
||||
},
|
||||
"elements": {
|
||||
"added": {},
|
||||
"removed": {},
|
||||
"updated": {},
|
||||
},
|
||||
"id": "id19",
|
||||
},
|
||||
{
|
||||
"appState": AppStateDelta {
|
||||
"delta": Delta {
|
||||
"deleted": {
|
||||
"editingGroupId": null,
|
||||
"selectedElementIds": {
|
||||
"id1": true,
|
||||
},
|
||||
"selectedGroupIds": {
|
||||
"outer": true,
|
||||
},
|
||||
},
|
||||
"inserted": {
|
||||
"editingGroupId": "outer",
|
||||
"selectedElementIds": {},
|
||||
"selectedGroupIds": {
|
||||
"inner": true,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
"elements": {
|
||||
"added": {},
|
||||
"removed": {},
|
||||
"updated": {},
|
||||
},
|
||||
"id": "id20",
|
||||
},
|
||||
{
|
||||
"appState": AppStateDelta {
|
||||
"delta": Delta {
|
||||
"deleted": {
|
||||
"selectedElementIds": {},
|
||||
"selectedGroupIds": {},
|
||||
},
|
||||
"inserted": {
|
||||
"selectedElementIds": {
|
||||
"id0": true,
|
||||
"id1": true,
|
||||
"id2": true,
|
||||
},
|
||||
"selectedGroupIds": {
|
||||
"outer": true,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
"elements": {
|
||||
"added": {},
|
||||
"removed": {},
|
||||
"updated": {},
|
||||
},
|
||||
"id": "id21",
|
||||
},
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`history > multiplayer undo/redo > should update history entries after remote changes on the same properties > [end of test] appState 1`] = `
|
||||
{
|
||||
"activeEmbeddable": null,
|
||||
@@ -11753,7 +11235,6 @@ exports[`history > multiplayer undo/redo > should update history entries after r
|
||||
},
|
||||
"bindMode": "orbit",
|
||||
"bindingPreference": "enabled",
|
||||
"boxSelectionMode": "contain",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
@@ -12014,7 +11495,6 @@ exports[`history > singleplayer undo/redo > remounting undo/redo buttons should
|
||||
},
|
||||
"bindMode": "orbit",
|
||||
"bindingPreference": "enabled",
|
||||
"boxSelectionMode": "contain",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
@@ -12250,7 +11730,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,
|
||||
@@ -12488,7 +11967,6 @@ exports[`history > singleplayer undo/redo > should create entry when selecting f
|
||||
},
|
||||
"bindMode": "orbit",
|
||||
"bindingPreference": "enabled",
|
||||
"boxSelectionMode": "contain",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
@@ -12880,7 +12358,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,
|
||||
@@ -13091,7 +12568,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,
|
||||
@@ -13299,7 +12775,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,
|
||||
@@ -13601,7 +13076,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,
|
||||
@@ -13900,7 +13374,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,
|
||||
@@ -14146,7 +13619,6 @@ exports[`history > singleplayer undo/redo > should disable undo/redo buttons whe
|
||||
},
|
||||
"bindMode": "orbit",
|
||||
"bindingPreference": "enabled",
|
||||
"boxSelectionMode": "contain",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
@@ -14384,7 +13856,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,
|
||||
@@ -14622,7 +14093,6 @@ exports[`history > singleplayer undo/redo > should iterate through the history w
|
||||
},
|
||||
"bindMode": "orbit",
|
||||
"bindingPreference": "enabled",
|
||||
"boxSelectionMode": "contain",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
@@ -14870,7 +14340,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,
|
||||
@@ -15202,7 +14671,6 @@ exports[`history > singleplayer undo/redo > should not collapse when applying co
|
||||
},
|
||||
"bindMode": "orbit",
|
||||
"bindingPreference": "enabled",
|
||||
"boxSelectionMode": "contain",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
@@ -15373,7 +14841,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,
|
||||
@@ -15658,7 +15125,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,
|
||||
@@ -15922,7 +15388,6 @@ exports[`history > singleplayer undo/redo > should not modify anything on unrela
|
||||
},
|
||||
"bindMode": "orbit",
|
||||
"bindingPreference": "enabled",
|
||||
"boxSelectionMode": "contain",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
@@ -16076,7 +15541,6 @@ exports[`history > singleplayer undo/redo > should not override appstate changes
|
||||
},
|
||||
"bindMode": "orbit",
|
||||
"bindingPreference": "enabled",
|
||||
"boxSelectionMode": "contain",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
@@ -16359,7 +15823,6 @@ exports[`history > singleplayer undo/redo > should support appstate name or view
|
||||
},
|
||||
"bindMode": "orbit",
|
||||
"bindingPreference": "enabled",
|
||||
"boxSelectionMode": "contain",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
@@ -16522,7 +15985,6 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
|
||||
},
|
||||
"bindMode": "orbit",
|
||||
"bindingPreference": "enabled",
|
||||
"boxSelectionMode": "contain",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
@@ -17271,7 +16733,6 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
|
||||
},
|
||||
"bindMode": "orbit",
|
||||
"bindingPreference": "enabled",
|
||||
"boxSelectionMode": "contain",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
@@ -17918,7 +17379,6 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
|
||||
},
|
||||
"bindMode": "orbit",
|
||||
"bindingPreference": "enabled",
|
||||
"boxSelectionMode": "contain",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
@@ -18565,7 +18025,6 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
|
||||
},
|
||||
"bindMode": "orbit",
|
||||
"bindingPreference": "enabled",
|
||||
"boxSelectionMode": "contain",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
@@ -19315,7 +18774,6 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
|
||||
},
|
||||
"bindMode": "orbit",
|
||||
"bindingPreference": "enabled",
|
||||
"boxSelectionMode": "contain",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
@@ -20084,7 +19542,6 @@ exports[`history > singleplayer undo/redo > should support changes in elements'
|
||||
},
|
||||
"bindMode": "orbit",
|
||||
"bindingPreference": "enabled",
|
||||
"boxSelectionMode": "contain",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
@@ -20565,7 +20022,6 @@ exports[`history > singleplayer undo/redo > should support duplication of groups
|
||||
},
|
||||
"bindMode": "orbit",
|
||||
"bindingPreference": "enabled",
|
||||
"boxSelectionMode": "contain",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
@@ -21077,7 +20533,6 @@ exports[`history > singleplayer undo/redo > should support element creation, del
|
||||
},
|
||||
"bindMode": "orbit",
|
||||
"bindingPreference": "enabled",
|
||||
"boxSelectionMode": "contain",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
@@ -21537,7 +20992,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,
|
||||
@@ -440,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,
|
||||
@@ -857,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,
|
||||
@@ -1424,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,
|
||||
@@ -1632,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,
|
||||
@@ -2017,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,
|
||||
@@ -2263,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,
|
||||
@@ -2444,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,
|
||||
@@ -2770,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,
|
||||
@@ -3026,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,
|
||||
@@ -3268,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,
|
||||
@@ -3505,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,
|
||||
@@ -3764,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,
|
||||
@@ -4079,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,
|
||||
@@ -4516,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,
|
||||
@@ -4800,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,
|
||||
@@ -5077,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,
|
||||
@@ -5286,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,
|
||||
@@ -5487,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,
|
||||
@@ -5881,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,
|
||||
@@ -6179,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,
|
||||
@@ -6968,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,
|
||||
@@ -7303,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,
|
||||
@@ -7583,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,
|
||||
@@ -7819,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,
|
||||
@@ -8060,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,
|
||||
@@ -8241,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,
|
||||
@@ -8422,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,
|
||||
@@ -8603,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,
|
||||
@@ -8665,14 +8636,7 @@ exports[`regression tests > key 5 selects arrow tool > [end of test] appState 1`
|
||||
"openMenu": null,
|
||||
"openPopup": null,
|
||||
"openSidebar": null,
|
||||
"originSnapOffset": {
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
},
|
||||
"pasteDialog": {
|
||||
"data": null,
|
||||
"shown": false,
|
||||
},
|
||||
"originSnapOffset": null,
|
||||
"penDetected": false,
|
||||
"penMode": false,
|
||||
"preferredSelectionTool": {
|
||||
@@ -8843,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,
|
||||
@@ -9074,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,
|
||||
@@ -9267,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,
|
||||
@@ -9329,14 +9290,7 @@ exports[`regression tests > key a selects arrow tool > [end of test] appState 1`
|
||||
"openMenu": null,
|
||||
"openPopup": null,
|
||||
"openSidebar": null,
|
||||
"originSnapOffset": {
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
},
|
||||
"pasteDialog": {
|
||||
"data": null,
|
||||
"shown": false,
|
||||
},
|
||||
"originSnapOffset": null,
|
||||
"penDetected": false,
|
||||
"penMode": false,
|
||||
"preferredSelectionTool": {
|
||||
@@ -9507,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,
|
||||
@@ -9688,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,
|
||||
@@ -9919,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,
|
||||
@@ -10100,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,
|
||||
@@ -10293,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,
|
||||
@@ -10474,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,
|
||||
@@ -11006,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,
|
||||
@@ -11287,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,
|
||||
@@ -11411,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,
|
||||
@@ -11612,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,
|
||||
@@ -11932,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,
|
||||
@@ -12362,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,
|
||||
@@ -13003,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,
|
||||
@@ -13130,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,
|
||||
@@ -13762,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,
|
||||
@@ -14102,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,
|
||||
@@ -14367,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,
|
||||
@@ -14491,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,
|
||||
@@ -14856,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,
|
||||
@@ -14980,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,
|
||||
|
||||
@@ -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);
|
||||
@@ -2971,82 +2971,6 @@ describe("history", () => {
|
||||
expect(h.state.editingGroupId).toBeNull();
|
||||
});
|
||||
|
||||
// TODO mark with "noncritical" tag once we migrate to vitest 4
|
||||
it.skip("should support undo and redo when escape unwinds nested group editing", async () => {
|
||||
const rectA = API.createElement({
|
||||
type: "rectangle",
|
||||
groupIds: ["inner", "outer"],
|
||||
x: 0,
|
||||
});
|
||||
const rectB = API.createElement({
|
||||
type: "rectangle",
|
||||
groupIds: ["outer"],
|
||||
x: 100,
|
||||
});
|
||||
const rectC = API.createElement({
|
||||
type: "rectangle",
|
||||
groupIds: ["inner", "outer"],
|
||||
x: 200,
|
||||
});
|
||||
|
||||
API.setElements([rectA, rectB, rectC]);
|
||||
mouse.select(rectA);
|
||||
mouse.doubleClickOn(rectA);
|
||||
mouse.doubleClickOn(rectA);
|
||||
|
||||
assertSelectedElements([rectA]);
|
||||
expect(h.state.editingGroupId).toBe("inner");
|
||||
expect(API.getUndoStack().length).toBe(3);
|
||||
expect(API.getRedoStack().length).toBe(0);
|
||||
|
||||
Keyboard.keyPress(KEYS.ESCAPE);
|
||||
assertSelectedElements([rectA, rectC]);
|
||||
expect(h.state.editingGroupId).toBe("outer");
|
||||
expect(API.getUndoStack().length).toBe(4);
|
||||
expect(API.getRedoStack().length).toBe(0);
|
||||
|
||||
Keyboard.keyPress(KEYS.ESCAPE);
|
||||
assertSelectedElements([rectA, rectB, rectC]);
|
||||
expect(h.state.editingGroupId).toBeNull();
|
||||
expect(h.state.selectedGroupIds).toEqual({ outer: true });
|
||||
expect(API.getUndoStack().length).toBe(5);
|
||||
expect(API.getRedoStack().length).toBe(0);
|
||||
|
||||
Keyboard.keyPress(KEYS.ESCAPE);
|
||||
expect(API.getSelectedElements()).toEqual([]);
|
||||
expect(h.state.editingGroupId).toBeNull();
|
||||
expect(h.state.selectedGroupIds).toEqual({});
|
||||
expect(API.getUndoStack().length).toBe(6);
|
||||
expect(API.getRedoStack().length).toBe(0);
|
||||
|
||||
Keyboard.undo();
|
||||
assertSelectedElements([rectA, rectB, rectC]);
|
||||
expect(h.state.editingGroupId).toBeNull();
|
||||
expect(h.state.selectedGroupIds).toEqual({ outer: true });
|
||||
|
||||
Keyboard.undo();
|
||||
assertSelectedElements([rectA, rectC]);
|
||||
expect(h.state.editingGroupId).toBe("outer");
|
||||
|
||||
Keyboard.undo();
|
||||
assertSelectedElements([rectA]);
|
||||
expect(h.state.editingGroupId).toBe("inner");
|
||||
|
||||
Keyboard.redo();
|
||||
assertSelectedElements([rectA, rectC]);
|
||||
expect(h.state.editingGroupId).toBe("outer");
|
||||
|
||||
Keyboard.redo();
|
||||
assertSelectedElements([rectA, rectB, rectC]);
|
||||
expect(h.state.editingGroupId).toBeNull();
|
||||
expect(h.state.selectedGroupIds).toEqual({ outer: true });
|
||||
|
||||
Keyboard.redo();
|
||||
expect(API.getSelectedElements()).toEqual([]);
|
||||
expect(h.state.editingGroupId).toBeNull();
|
||||
expect(h.state.selectedGroupIds).toEqual({});
|
||||
});
|
||||
|
||||
it("should iterate through the history when selected or editing linear element was remotely deleted", async () => {
|
||||
// create three point arrow
|
||||
UI.clickTool("arrow");
|
||||
|
||||
@@ -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,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,497 +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([]);
|
||||
});
|
||||
});
|
||||
|
||||
describe("inner box-selection", () => {
|
||||
@@ -833,7 +326,7 @@ describe("select single element on the scene", () => {
|
||||
fireEvent.pointerUp(canvas);
|
||||
|
||||
expect(renderInteractiveScene).toHaveBeenCalledTimes(8);
|
||||
expect(renderStaticScene).toHaveBeenCalledTimes(7);
|
||||
expect(renderStaticScene).toHaveBeenCalledTimes(6);
|
||||
expect(h.state.selectionElement).toBeNull();
|
||||
expect(h.elements.length).toEqual(1);
|
||||
expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy();
|
||||
@@ -866,7 +359,7 @@ describe("select single element on the scene", () => {
|
||||
fireEvent.pointerUp(canvas);
|
||||
|
||||
expect(renderInteractiveScene).toHaveBeenCalledTimes(8);
|
||||
expect(renderStaticScene).toHaveBeenCalledTimes(7);
|
||||
expect(renderStaticScene).toHaveBeenCalledTimes(6);
|
||||
expect(h.state.selectionElement).toBeNull();
|
||||
expect(h.elements.length).toEqual(1);
|
||||
expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy();
|
||||
@@ -899,7 +392,7 @@ describe("select single element on the scene", () => {
|
||||
fireEvent.pointerUp(canvas);
|
||||
|
||||
expect(renderInteractiveScene).toHaveBeenCalledTimes(8);
|
||||
expect(renderStaticScene).toHaveBeenCalledTimes(7);
|
||||
expect(renderStaticScene).toHaveBeenCalledTimes(6);
|
||||
expect(h.state.selectionElement).toBeNull();
|
||||
expect(h.elements.length).toEqual(1);
|
||||
expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy();
|
||||
@@ -945,7 +438,7 @@ describe("select single element on the scene", () => {
|
||||
fireEvent.pointerUp(canvas);
|
||||
|
||||
expect(renderInteractiveScene).toHaveBeenCalledTimes(10);
|
||||
expect(renderStaticScene).toHaveBeenCalledTimes(9);
|
||||
expect(renderStaticScene).toHaveBeenCalledTimes(8);
|
||||
expect(h.state.selectionElement).toBeNull();
|
||||
expect(h.elements.length).toEqual(1);
|
||||
expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy();
|
||||
@@ -990,7 +483,7 @@ describe("select single element on the scene", () => {
|
||||
fireEvent.pointerUp(canvas);
|
||||
|
||||
expect(renderInteractiveScene).toHaveBeenCalledTimes(10);
|
||||
expect(renderStaticScene).toHaveBeenCalledTimes(9);
|
||||
expect(renderStaticScene).toHaveBeenCalledTimes(8);
|
||||
expect(h.state.selectionElement).toBeNull();
|
||||
expect(h.elements.length).toEqual(1);
|
||||
expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy();
|
||||
@@ -1065,58 +558,3 @@ describe("selectedElementIds stability", () => {
|
||||
expect(h.state.selectedElementIds).toBe(selectedElementIds_2);
|
||||
});
|
||||
});
|
||||
|
||||
describe("deselecting", () => {
|
||||
beforeEach(async () => {
|
||||
await render(<Excalidraw handleKeyboardGlobally={true} />);
|
||||
});
|
||||
|
||||
it("esc unwinds nested group editing before deselecting", () => {
|
||||
const rectA = API.createElement({
|
||||
type: "rectangle",
|
||||
x: 0,
|
||||
y: 0,
|
||||
groupIds: ["inner", "outer"],
|
||||
});
|
||||
const rectB = API.createElement({
|
||||
type: "rectangle",
|
||||
x: 100,
|
||||
y: 0,
|
||||
groupIds: ["outer"],
|
||||
});
|
||||
const rectC = API.createElement({
|
||||
type: "rectangle",
|
||||
x: 200,
|
||||
y: 0,
|
||||
groupIds: ["inner", "outer"],
|
||||
});
|
||||
|
||||
API.setElements([rectA, rectB, rectC]);
|
||||
|
||||
mouse.select(rectA);
|
||||
assertSelectedElements(rectA, rectB, rectC);
|
||||
expect(h.state.editingGroupId).toBeNull();
|
||||
|
||||
mouse.doubleClickOn(rectA);
|
||||
assertSelectedElements(rectA, rectC);
|
||||
expect(h.state.editingGroupId).toBe("outer");
|
||||
|
||||
mouse.doubleClickOn(rectA);
|
||||
assertSelectedElements(rectA);
|
||||
expect(h.state.editingGroupId).toBe("inner");
|
||||
|
||||
Keyboard.keyPress(KEYS.ESCAPE);
|
||||
assertSelectedElements(rectA, rectC);
|
||||
expect(h.state.editingGroupId).toBe("outer");
|
||||
|
||||
Keyboard.keyPress(KEYS.ESCAPE);
|
||||
assertSelectedElements(rectA, rectB, rectC);
|
||||
expect(h.state.editingGroupId).toBeNull();
|
||||
expect(h.state.selectedGroupIds).toEqual({ outer: true });
|
||||
|
||||
Keyboard.keyPress(KEYS.ESCAPE);
|
||||
expect(API.getSelectedElements()).toEqual([]);
|
||||
expect(h.state.editingGroupId).toBeNull();
|
||||
expect(h.state.selectedGroupIds).toEqual({});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -10,8 +10,6 @@ import type { LinearElementEditor } from "@excalidraw/element";
|
||||
|
||||
import type { MaybeTransformHandleType } from "@excalidraw/element";
|
||||
|
||||
import type { SnapLine } from "@excalidraw/element";
|
||||
|
||||
import type {
|
||||
PointerType,
|
||||
ExcalidrawLinearElement,
|
||||
@@ -57,6 +55,7 @@ import type { ClipboardData } from "./clipboard";
|
||||
import type App from "./components/App";
|
||||
import type Library from "./data/library";
|
||||
import type { ContextMenuItems } from "./components/ContextMenu";
|
||||
import type { SnapLine } from "./snapping";
|
||||
import type { ImportedDataState } from "./data/types";
|
||||
|
||||
import type { Language } from "./i18n";
|
||||
@@ -270,8 +269,6 @@ export type ObservedElementsAppState = {
|
||||
activeLockedId: AppState["activeLockedId"];
|
||||
};
|
||||
|
||||
export type BoxSelectionMode = "contain" | "overlap";
|
||||
|
||||
export interface AppState {
|
||||
contextMenu: {
|
||||
items: ContextMenuItems;
|
||||
@@ -310,8 +307,6 @@ 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 */
|
||||
|
||||
@@ -45,28 +45,6 @@ unmountComponent();
|
||||
const tab = " ";
|
||||
const mouse = new Pointer("mouse");
|
||||
|
||||
const exitTextEditorAndAssertSelection = async ({
|
||||
editor,
|
||||
selectedIds,
|
||||
nextText,
|
||||
}: {
|
||||
editor: HTMLTextAreaElement;
|
||||
selectedIds: string[];
|
||||
nextText?: string;
|
||||
}) => {
|
||||
if (nextText !== undefined) {
|
||||
updateTextEditor(editor, nextText);
|
||||
}
|
||||
|
||||
Keyboard.exitTextEditor(editor);
|
||||
|
||||
expect(await getTextEditor({ waitForEditor: false })).toBe(null);
|
||||
expect(window.h.state.editingTextElement).toBeNull();
|
||||
expect(API.getSelectedElements().map((element) => element.id)).toEqual(
|
||||
selectedIds,
|
||||
);
|
||||
};
|
||||
|
||||
describe("textWysiwyg", () => {
|
||||
describe("start text editing", () => {
|
||||
const { h } = window;
|
||||
@@ -293,33 +271,6 @@ describe("textWysiwyg", () => {
|
||||
expect(h.elements.length).toBe(1);
|
||||
});
|
||||
|
||||
it("should reselect text after exiting wysiwyg with escape", async () => {
|
||||
const text = API.createElement({
|
||||
type: "text",
|
||||
text: "ola",
|
||||
x: 60,
|
||||
y: 0,
|
||||
width: 100,
|
||||
height: 100,
|
||||
});
|
||||
|
||||
API.setElements([text]);
|
||||
API.setSelectedElements([text]);
|
||||
UI.clickTool("selection");
|
||||
|
||||
Keyboard.keyPress(KEYS.ENTER);
|
||||
|
||||
const editor = await getTextEditor();
|
||||
|
||||
expect(editor).not.toBe(null);
|
||||
expect(h.state.editingTextElement?.id).toBe(text.id);
|
||||
|
||||
await exitTextEditorAndAssertSelection({
|
||||
editor,
|
||||
selectedIds: [text.id],
|
||||
});
|
||||
});
|
||||
|
||||
it("should edit selected bound text on single click", async () => {
|
||||
const container = API.createElement({
|
||||
type: "rectangle",
|
||||
@@ -1354,40 +1305,6 @@ describe("textWysiwyg", () => {
|
||||
);
|
||||
});
|
||||
|
||||
it.each([
|
||||
{
|
||||
label: "container",
|
||||
createElements: () => API.createTextContainer(),
|
||||
},
|
||||
{
|
||||
label: "arrow",
|
||||
createElements: () => API.createLabeledArrow(),
|
||||
},
|
||||
])(
|
||||
"should reselect $label after deleting bound text with escape",
|
||||
async ({ createElements }) => {
|
||||
const [selectedElement, text] = createElements();
|
||||
API.setElements([selectedElement, text]);
|
||||
API.setSelectedElements([selectedElement]);
|
||||
|
||||
Keyboard.keyPress(KEYS.ENTER);
|
||||
const editor = await getTextEditor();
|
||||
|
||||
await exitTextEditorAndAssertSelection({
|
||||
editor,
|
||||
nextText: "",
|
||||
selectedIds: [selectedElement.id],
|
||||
});
|
||||
|
||||
expect(selectedElement.boundElements).toStrictEqual([]);
|
||||
expect(h.elements[1]).toEqual(
|
||||
expect.objectContaining({
|
||||
isDeleted: true,
|
||||
}),
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
it("should restore original container height and clear cache once text is unbind", async () => {
|
||||
const container = API.createElement({
|
||||
type: "rectangle",
|
||||
|
||||
@@ -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 = [
|
||||
|
||||
@@ -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];
|
||||
}
|
||||
|
||||
@@ -40,7 +40,7 @@ export const isLineSegment = <Point extends GlobalPoint | LocalPoint>(
|
||||
Array.isArray(segment) &&
|
||||
segment.length === 2 &&
|
||||
isPoint(segment[0]) &&
|
||||
isPoint(segment[1]);
|
||||
isPoint(segment[0]);
|
||||
|
||||
/**
|
||||
* Return the coordinates resulting from rotating the given line about an origin by an angle in radians
|
||||
|
||||
@@ -1,9 +1,5 @@
|
||||
import { pointFrom } from "../src/point";
|
||||
import {
|
||||
lineSegment,
|
||||
lineSegmentIntersectionPoints,
|
||||
isLineSegment,
|
||||
} from "../src/segment";
|
||||
import { lineSegment, lineSegmentIntersectionPoints } from "../src/segment";
|
||||
|
||||
describe("line-segment intersections", () => {
|
||||
it("should correctly detect intersection", () => {
|
||||
@@ -23,23 +19,3 @@ describe("line-segment intersections", () => {
|
||||
).toEqual(null);
|
||||
});
|
||||
});
|
||||
describe("isLineSegment validation", () => {
|
||||
it("should return true for a valid segment", () => {
|
||||
expect(
|
||||
isLineSegment([
|
||||
[0, 0],
|
||||
[1, 1],
|
||||
]),
|
||||
).toBe(true);
|
||||
});
|
||||
|
||||
it("should return false if second element is not a point", () => {
|
||||
const invalidSegment = [[0, 0], "not-a-point"] as any;
|
||||
|
||||
expect(isLineSegment(invalidSegment)).toBe(false);
|
||||
});
|
||||
|
||||
it("should return false for wrong length", () => {
|
||||
expect(isLineSegment([[0, 0]])).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -13,7 +13,6 @@ exports[`exportToSvg > with default arguments 1`] = `
|
||||
},
|
||||
"bindMode": "orbit",
|
||||
"bindingPreference": "enabled",
|
||||
"boxSelectionMode": "contain",
|
||||
"collaborators": Map {},
|
||||
"contextMenu": null,
|
||||
"croppingElementId": null,
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -1531,10 +1531,10 @@
|
||||
resolved "https://registry.yarnpkg.com/@excalidraw/markdown-to-text/-/markdown-to-text-0.1.2.tgz#1703705e7da608cf478f17bfe96fb295f55a23eb"
|
||||
integrity sha512-1nDXBNAojfi3oSFwJswKREkFm5wrSjqay81QlyRv2pkITG/XYB5v+oChENVBQLcxQwX4IUATWvXM5BcaNhPiIg==
|
||||
|
||||
"@excalidraw/mermaid-to-excalidraw@2.2.2":
|
||||
version "2.2.2"
|
||||
resolved "https://registry.yarnpkg.com/@excalidraw/mermaid-to-excalidraw/-/mermaid-to-excalidraw-2.2.2.tgz#ee6b597a0d95b9a76f7ae41ce0e3733a9b96e4a0"
|
||||
integrity sha512-5VKQq5CdRocC82vOIUpQ5ufJOVV9FpBTdHGA+ULqazeIVV+cr299877omQCibsdS3Bpitz2fsnTwnIXEmLVDSg==
|
||||
"@excalidraw/mermaid-to-excalidraw@2.1.1":
|
||||
version "2.1.1"
|
||||
resolved "https://registry.yarnpkg.com/@excalidraw/mermaid-to-excalidraw/-/mermaid-to-excalidraw-2.1.1.tgz#659c934a607dd2cf57f2a69282588ee2b0722959"
|
||||
integrity sha512-jU+frqcxazsY+t5yOBf2mgrQy+WUrbrzA36if3SQB/Vwaf2qOJjnWxucNafgZZk/3+9xGmRotUeOviSOJG+wYA==
|
||||
dependencies:
|
||||
"@excalidraw/markdown-to-text" "0.1.2"
|
||||
"@mermaid-js/parser" "^0.6.3"
|
||||
|
||||
Reference in New Issue
Block a user