Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
b92f585ce7 |
@@ -11,7 +11,7 @@ jobs:
|
|||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
timeout-minutes: 3
|
timeout-minutes: 3
|
||||||
steps:
|
steps:
|
||||||
- uses: styfle/cancel-workflow-action@ce177499ccf9fd2aded3b0426c97e5434c2e8a73 # 0.6.0
|
- uses: styfle/cancel-workflow-action@0.6.0
|
||||||
with:
|
with:
|
||||||
workflow_id: 400555, 400556, 905313, 1451724, 1710116, 3185001, 3438604
|
workflow_id: 400555, 400556, 905313, 1451724, 1710116, 3185001, 3438604
|
||||||
access_token: ${{ secrets.GITHUB_TOKEN }}
|
access_token: ${{ secrets.GITHUB_TOKEN }}
|
||||||
|
|||||||
@@ -40,7 +40,7 @@ jobs:
|
|||||||
echo ::set-output name=body::$body
|
echo ::set-output name=body::$body
|
||||||
|
|
||||||
- name: Update description with coverage
|
- name: Update description with coverage
|
||||||
uses: kt3k/update-pr-description@1b35a6dcd84d81aa0bc1889610efdcde7f37b0c0 # v1.0.1
|
uses: kt3k/update-pr-description@v1.0.1
|
||||||
with:
|
with:
|
||||||
pr_body: ${{ steps.getCommentBody.outputs.body }}
|
pr_body: ${{ steps.getCommentBody.outputs.body }}
|
||||||
pr_title: "chore: Update translations from Crowdin"
|
pr_title: "chore: Update translations from Crowdin"
|
||||||
|
|||||||
@@ -13,16 +13,16 @@ jobs:
|
|||||||
- name: Checkout repository
|
- name: Checkout repository
|
||||||
uses: actions/checkout@v3
|
uses: actions/checkout@v3
|
||||||
- name: Login to DockerHub
|
- name: Login to DockerHub
|
||||||
uses: docker/login-action@465a07811f14bebb1938fbed4728c6a1ff8901fc # v2
|
uses: docker/login-action@v2
|
||||||
with:
|
with:
|
||||||
username: ${{ secrets.DOCKER_USERNAME }}
|
username: ${{ secrets.DOCKER_USERNAME }}
|
||||||
password: ${{ secrets.DOCKER_PASSWORD }}
|
password: ${{ secrets.DOCKER_PASSWORD }}
|
||||||
- name: Set up QEMU
|
- name: Set up QEMU
|
||||||
uses: docker/setup-qemu-action@c7c53464625b32c7a7e944ae62b3e17d2b600130 # v3
|
uses: docker/setup-qemu-action@v3
|
||||||
- name: Set up Docker Buildx
|
- name: Set up Docker Buildx
|
||||||
uses: docker/setup-buildx-action@8d2750c68a42422c14e847fe6c8ac0403b4cbd6f # v3
|
uses: docker/setup-buildx-action@v3
|
||||||
- name: Build and push
|
- name: Build and push
|
||||||
uses: docker/build-push-action@ca052bb54ab0790a636c9b5f226502c73d547a25 # v5
|
uses: docker/build-push-action@v5
|
||||||
with:
|
with:
|
||||||
context: .
|
context: .
|
||||||
push: true
|
push: true
|
||||||
|
|||||||
@@ -11,6 +11,6 @@ jobs:
|
|||||||
semantic:
|
semantic:
|
||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
steps:
|
steps:
|
||||||
- uses: amannn/action-semantic-pull-request@e32d7e603df1aa1ba07e981f2a23455dee596825 # v5
|
- uses: amannn/action-semantic-pull-request@v5
|
||||||
env:
|
env:
|
||||||
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||||||
|
|||||||
@@ -20,7 +20,7 @@ jobs:
|
|||||||
working-directory: packages/excalidraw
|
working-directory: packages/excalidraw
|
||||||
env:
|
env:
|
||||||
CI: true
|
CI: true
|
||||||
- uses: andresz1/size-limit-action@e7493a72a44b113341c0cf6186ab49c17c4b65c1 # v1
|
- uses: andresz1/size-limit-action@v1
|
||||||
with:
|
with:
|
||||||
github_token: ${{ secrets.GITHUB_TOKEN }}
|
github_token: ${{ secrets.GITHUB_TOKEN }}
|
||||||
build_script: build:esm
|
build_script: build:esm
|
||||||
|
|||||||
@@ -21,6 +21,6 @@ jobs:
|
|||||||
run: yarn test:coverage
|
run: yarn test:coverage
|
||||||
- name: "Report Coverage"
|
- name: "Report Coverage"
|
||||||
if: always() # Also generate the report if tests are failing
|
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:
|
with:
|
||||||
github-token: ${{ secrets.GITHUB_TOKEN }}
|
github-token: ${{ secrets.GITHUB_TOKEN }}
|
||||||
|
|||||||
@@ -29,7 +29,7 @@
|
|||||||
<a href="https://docs.excalidraw.com/docs/introduction/contributing">
|
<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>
|
<img alt="PRs welcome!" src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat" /></a>
|
||||||
<a href="https://discord.gg/UexuTaE">
|
<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">
|
<a href="https://deepwiki.com/excalidraw/excalidraw">
|
||||||
<img alt="Ask DeepWiki" src="https://deepwiki.com/badge.svg" /></a>
|
<img alt="Ask DeepWiki" src="https://deepwiki.com/badge.svg" /></a>
|
||||||
<a href="https://twitter.com/excalidraw">
|
<a href="https://twitter.com/excalidraw">
|
||||||
|
|||||||
@@ -1,125 +0,0 @@
|
|||||||
# Transactions
|
|
||||||
|
|
||||||
Transactions let many live scene updates render immediately while still committing a single durable history entry.
|
|
||||||
|
|
||||||
Typical use case:
|
|
||||||
|
|
||||||
- AI streaming emits many `NEVER` updates for real-time feedback.
|
|
||||||
- Those updates advance the live scene and store snapshot, but do not create undo history.
|
|
||||||
- A transaction records the intended logical delta separately, then commits one synthetic durable increment at the end.
|
|
||||||
|
|
||||||
## Key Files
|
|
||||||
|
|
||||||
### `packages/excalidraw/transaction/`
|
|
||||||
|
|
||||||
- `transaction.ts`
|
|
||||||
- `Transaction` is the per-tx instance.
|
|
||||||
- `updateScene()` applies live updates with `captureUpdate: NEVER`.
|
|
||||||
- `updateElements()` is a typed partial-patch helper over `updateScene()`.
|
|
||||||
- `commit()` builds synthetic snapshots and commits one durable entry.
|
|
||||||
- `cancel()` ends the tx without committing history.
|
|
||||||
- `ledger.ts`
|
|
||||||
- `TransactionLedger` keeps per-element baseline, target, and touched props across tx steps.
|
|
||||||
- `buildSyntheticSnapshots()` reconciles tx intent with the live scene using `live-wins-per-prop`.
|
|
||||||
- `undoOverridePlanner.ts`
|
|
||||||
- Tracks tx intermediate values.
|
|
||||||
- Produces undo override candidates for regular user history entries that were recorded while a tx was active.
|
|
||||||
- `manager.ts`
|
|
||||||
- Owns tx lifecycle state and active-tx priority.
|
|
||||||
- Injects tx undo markers into durable deltas at record time.
|
|
||||||
- Resolves effective history deltas at undo/redo time.
|
|
||||||
- `diff.ts` / `types.ts`
|
|
||||||
- Shared diff helpers and transaction-specific types.
|
|
||||||
|
|
||||||
### `packages/element/src/store.ts`
|
|
||||||
|
|
||||||
- `store.commitSyntheticIncrement()`
|
|
||||||
- Builds `StoreSnapshot -> StoreChange -> StoreDelta` from logical before/after snapshots.
|
|
||||||
- Commits the synthetic durable increment immediately through an isolated path.
|
|
||||||
- Does not flush unrelated pending micro actions.
|
|
||||||
- `StoreDelta.markers`
|
|
||||||
- Carries extra history markers such as `txUndoOverrides`.
|
|
||||||
|
|
||||||
### `packages/excalidraw/history.ts`
|
|
||||||
|
|
||||||
- `onBeforeRecord()`
|
|
||||||
- Lets the transaction manager attach markers before a durable delta becomes a history entry.
|
|
||||||
- `setEffectiveDeltaResolver()`
|
|
||||||
- Lets the transaction manager rewrite a history delta at undo/redo time before it is applied.
|
|
||||||
|
|
||||||
## Flow
|
|
||||||
|
|
||||||
1. Caller creates a transaction.
|
|
||||||
2. `tx.updateScene()` applies live updates with `NEVER`.
|
|
||||||
3. The ledger records net element changes; appState intent is accumulated separately.
|
|
||||||
4. Regular user durable edits that happen while the tx is active may receive tx undo markers.
|
|
||||||
5. `tx.commit()` asks the ledger for logical before/after snapshots and calls `store.commitSyntheticIncrement()`.
|
|
||||||
6. Undo/redo later uses the manager's effective-delta resolver to decide whether ended tx markers should patch the baseline of a regular history entry.
|
|
||||||
|
|
||||||
Result:
|
|
||||||
|
|
||||||
- live rendering stays immediate;
|
|
||||||
- one tx still produces one durable history entry;
|
|
||||||
- interleaved regular edits can undo back to the correct pre-tx baseline.
|
|
||||||
|
|
||||||
## Undo Examples
|
|
||||||
|
|
||||||
### Interleaved Regular Edit
|
|
||||||
|
|
||||||
1. Baseline: `rect = (x: 0, stroke: black)`
|
|
||||||
2. Tx updates it live to `(x: 200, stroke: red)` with `NEVER`
|
|
||||||
3. User makes a regular durable edit: `(x: 200, stroke: purple)`
|
|
||||||
4. Tx commits; live stays purple
|
|
||||||
|
|
||||||
The user history entry was recorded while the tx was active, so its local baseline is `red`.
|
|
||||||
If undo later runs after the tx has ended, restoring `red` is wrong: the correct pre-tx baseline is `black`.
|
|
||||||
|
|
||||||
To fix this:
|
|
||||||
|
|
||||||
- record-time attaches a tx undo marker to the user history entry
|
|
||||||
- perform-time checks whether the tx has already ended
|
|
||||||
- if ended, the effective delta is patched so undo restores `black` instead of `red`
|
|
||||||
|
|
||||||
### Active Tx vs Ended Tx
|
|
||||||
|
|
||||||
Using the same example:
|
|
||||||
|
|
||||||
- if the user undoes while the tx is still active, the marker stays inactive and undo restores the tx intermediate value (`red`)
|
|
||||||
- if the user undoes after the tx has ended, the marker becomes active and undo restores the pre-tx baseline (`black`)
|
|
||||||
|
|
||||||
So markers are recorded early, but applied conditionally.
|
|
||||||
|
|
||||||
## AppState
|
|
||||||
|
|
||||||
Elements use ledger snapshots. AppState does not.
|
|
||||||
|
|
||||||
The transaction instead keeps:
|
|
||||||
|
|
||||||
- `initialAppState`: observed appState at tx start
|
|
||||||
- `accumulatedAppState`: merged caller intent from `tx.updateScene({ appState })`
|
|
||||||
|
|
||||||
At commit, the transaction computes the final appState patch and passes it into `store.commitSyntheticIncrement()`.
|
|
||||||
|
|
||||||
## Example
|
|
||||||
|
|
||||||
```ts
|
|
||||||
const tx = app.transactionManager.create();
|
|
||||||
|
|
||||||
tx.updateScene({ elements: updatedElementsA });
|
|
||||||
tx.updateScene({ elements: updatedElementsB });
|
|
||||||
tx.updateElements({
|
|
||||||
elements: [
|
|
||||||
{ id: "rect-1", type: "rectangle", updates: { strokeColor: "#f00" } },
|
|
||||||
{ id: "rect-2", type: "rectangle", updates: { x: 120 } },
|
|
||||||
],
|
|
||||||
});
|
|
||||||
|
|
||||||
tx.commit();
|
|
||||||
```
|
|
||||||
|
|
||||||
## Notes
|
|
||||||
|
|
||||||
- `commit()` and `cancel()` are idempotent.
|
|
||||||
- `updateScene()` and `updateElements()` throw after the tx has ended.
|
|
||||||
- Conflict handling inside synthetic snapshots is fixed to `live-wins-per-prop`.
|
|
||||||
- Multi-tx interleaving is supported through manager-owned lifecycle tracking and active-tx priority.
|
|
||||||
@@ -97,8 +97,8 @@ const config = {
|
|||||||
href: "https://discord.gg/UexuTaE",
|
href: "https://discord.gg/UexuTaE",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "𝕏",
|
label: "Twitter",
|
||||||
href: "https://x.com/excalidraw",
|
href: "https://twitter.com/excalidraw",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "Linkedin",
|
label: "Linkedin",
|
||||||
|
|||||||
@@ -680,9 +680,8 @@ export const getMinMaxXYFromCurvePathOps = (
|
|||||||
return [minX, minY, maxX, maxY];
|
return [minX, minY, maxX, maxY];
|
||||||
};
|
};
|
||||||
|
|
||||||
export const getBoundsFromPoints = <P extends GlobalPoint | LocalPoint>(
|
export const getBoundsFromPoints = (
|
||||||
points: readonly P[],
|
points: ExcalidrawFreeDrawElement["points"],
|
||||||
padding: number = 0,
|
|
||||||
): Bounds => {
|
): Bounds => {
|
||||||
let minX = Infinity;
|
let minX = Infinity;
|
||||||
let minY = Infinity;
|
let minY = Infinity;
|
||||||
@@ -696,7 +695,7 @@ export const getBoundsFromPoints = <P extends GlobalPoint | LocalPoint>(
|
|||||||
maxY = Math.max(maxY, y);
|
maxY = Math.max(maxY, y);
|
||||||
}
|
}
|
||||||
|
|
||||||
return [minX - padding, minY - padding, maxX + padding, maxY + padding];
|
return [minX, minY, maxX, maxY];
|
||||||
};
|
};
|
||||||
|
|
||||||
const getFreeDrawElementAbsoluteCoords = (
|
const getFreeDrawElementAbsoluteCoords = (
|
||||||
@@ -1262,17 +1261,6 @@ export const pointInsideBounds = <P extends GlobalPoint | LocalPoint>(
|
|||||||
): boolean =>
|
): boolean =>
|
||||||
p[0] > bounds[0] && p[0] < bounds[2] && p[1] > bounds[1] && p[1] < bounds[3];
|
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 = (
|
export const doBoundsIntersect = (
|
||||||
bounds1: Bounds | null,
|
bounds1: Bounds | null,
|
||||||
bounds2: Bounds | null,
|
bounds2: Bounds | null,
|
||||||
@@ -1287,21 +1275,13 @@ export const doBoundsIntersect = (
|
|||||||
return minX1 < maxX2 && maxX1 > minX2 && minY1 < maxY2 && maxY1 > minY2;
|
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 = (
|
export const elementCenterPoint = (
|
||||||
element: ExcalidrawElement,
|
element: ExcalidrawElement,
|
||||||
elementsMap: ElementsMap,
|
elementsMap: ElementsMap,
|
||||||
xOffset: number = 0,
|
xOffset: number = 0,
|
||||||
yOffset: number = 0,
|
yOffset: number = 0,
|
||||||
) => {
|
) => {
|
||||||
if (isLinearElement(element) || isFreeDrawElement(element)) {
|
if (isLinearElement(element)) {
|
||||||
const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
|
const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
|
||||||
const [x, y] = pointFrom<GlobalPoint>((x1 + x2) / 2, (y1 + y2) / 2);
|
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
|
// Hit test against the extended, rotated bounding box of the element first
|
||||||
const bounds = getElementBounds(element, elementsMap, true);
|
const bounds = getElementBounds(element, elementsMap, true);
|
||||||
const hitBounds = isPointInRotatedBounds(
|
const hitBounds = isPointWithinBounds(
|
||||||
point,
|
pointFrom(bounds[0] - threshold, bounds[1] - threshold),
|
||||||
bounds,
|
pointRotateRads(
|
||||||
element.angle,
|
point,
|
||||||
threshold,
|
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
|
// PERF: Bail out early if the point is not even in the
|
||||||
@@ -189,32 +192,18 @@ export const hitElementItself = ({
|
|||||||
return result;
|
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 = (
|
export const hitElementBoundingBox = (
|
||||||
point: GlobalPoint,
|
point: GlobalPoint,
|
||||||
element: ExcalidrawElement,
|
element: ExcalidrawElement,
|
||||||
elementsMap: ElementsMap,
|
elementsMap: ElementsMap,
|
||||||
tolerance = 0,
|
tolerance = 0,
|
||||||
) => {
|
) => {
|
||||||
const bounds = getElementBounds(element, elementsMap, true);
|
let [x1, y1, x2, y2] = getElementBounds(element, elementsMap);
|
||||||
return isPointInRotatedBounds(point, bounds, element.angle, tolerance);
|
x1 -= tolerance;
|
||||||
|
y1 -= tolerance;
|
||||||
|
x2 += tolerance;
|
||||||
|
y2 += tolerance;
|
||||||
|
return isPointWithinBounds(pointFrom(x1, y1), point, pointFrom(x2, y2));
|
||||||
};
|
};
|
||||||
|
|
||||||
export const hitElementBoundingBoxOnly = (
|
export const hitElementBoundingBoxOnly = (
|
||||||
@@ -584,9 +573,7 @@ const intersectLinearOrFreeDrawWithLineSegment = (
|
|||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
|
|
||||||
const hits = curveIntersectLineSegment(c, segment, {
|
const hits = curveIntersectLineSegment(c, segment);
|
||||||
iterLimit: 10,
|
|
||||||
});
|
|
||||||
|
|
||||||
if (hits.length > 0) {
|
if (hits.length > 0) {
|
||||||
intersections.push(...hits);
|
intersections.push(...hits);
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
import { arrayToMap } from "@excalidraw/common";
|
import { arrayToMap } from "@excalidraw/common";
|
||||||
import { isPointWithinBounds, pointFrom } from "@excalidraw/math";
|
import { isPointWithinBounds, pointFrom } from "@excalidraw/math";
|
||||||
import { doLineSegmentsIntersect } from "@excalidraw/utils/bbox";
|
import { doLineSegmentsIntersect } from "@excalidraw/utils/bbox";
|
||||||
|
import { elementsOverlappingBBox } from "@excalidraw/utils/withinBounds";
|
||||||
|
|
||||||
import type {
|
import type {
|
||||||
AppClassProperties,
|
AppClassProperties,
|
||||||
@@ -17,8 +18,6 @@ import {
|
|||||||
getElementLineSegments,
|
getElementLineSegments,
|
||||||
getCommonBounds,
|
getCommonBounds,
|
||||||
getElementAbsoluteCoords,
|
getElementAbsoluteCoords,
|
||||||
doBoundsIntersect,
|
|
||||||
getElementBounds,
|
|
||||||
} from "./bounds";
|
} from "./bounds";
|
||||||
import { mutateElement } from "./mutateElement";
|
import { mutateElement } from "./mutateElement";
|
||||||
import { getBoundTextElement, getContainerElement } from "./textElement";
|
import { getBoundTextElement, getContainerElement } from "./textElement";
|
||||||
@@ -921,17 +920,16 @@ export const getFrameLikeTitle = (element: ExcalidrawFrameLikeElement) => {
|
|||||||
export const getElementsOverlappingFrame = (
|
export const getElementsOverlappingFrame = (
|
||||||
elements: readonly ExcalidrawElement[],
|
elements: readonly ExcalidrawElement[],
|
||||||
frame: ExcalidrawFrameLikeElement,
|
frame: ExcalidrawFrameLikeElement,
|
||||||
elementsMap: ElementsMap,
|
|
||||||
) => {
|
) => {
|
||||||
return elements.filter(
|
return (
|
||||||
(el) =>
|
elementsOverlappingBBox({
|
||||||
// exclude elements which are overlapping, but are in a different frame,
|
elements,
|
||||||
|
bounds: frame,
|
||||||
|
type: "overlap",
|
||||||
|
})
|
||||||
|
// removes elements who are overlapping, but are in a different frame,
|
||||||
// and thus invisible in target frame
|
// and thus invisible in target frame
|
||||||
(!el.frameId || el.frameId === frame.id) &&
|
.filter((el) => !el.frameId || el.frameId === frame.id)
|
||||||
doBoundsIntersect(
|
|
||||||
getElementBounds(el, elementsMap),
|
|
||||||
getElementBounds(frame, elementsMap),
|
|
||||||
),
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -1,32 +1,15 @@
|
|||||||
import { arrayToMap, isShallowEqual, type Bounds } from "@excalidraw/common";
|
import { arrayToMap, isShallowEqual } from "@excalidraw/common";
|
||||||
import {
|
|
||||||
lineSegment,
|
|
||||||
pointFrom,
|
|
||||||
pointRotateRads,
|
|
||||||
type GlobalPoint,
|
|
||||||
} from "@excalidraw/math";
|
|
||||||
|
|
||||||
import type {
|
import type {
|
||||||
AppState,
|
AppState,
|
||||||
BoxSelectionMode,
|
|
||||||
InteractiveCanvasAppState,
|
InteractiveCanvasAppState,
|
||||||
} from "@excalidraw/excalidraw/types";
|
} from "@excalidraw/excalidraw/types";
|
||||||
|
|
||||||
import {
|
import { getElementAbsoluteCoords, getElementBounds } from "./bounds";
|
||||||
boundsContainBounds,
|
|
||||||
doBoundsIntersect,
|
|
||||||
elementCenterPoint,
|
|
||||||
getElementAbsoluteCoords,
|
|
||||||
getElementBounds,
|
|
||||||
pointInsideBounds,
|
|
||||||
} from "./bounds";
|
|
||||||
import { intersectElementWithLineSegment } from "./collision";
|
|
||||||
import { isElementInViewport } from "./sizeHelpers";
|
import { isElementInViewport } from "./sizeHelpers";
|
||||||
import {
|
import {
|
||||||
isArrowElement,
|
|
||||||
isBoundToContainer,
|
isBoundToContainer,
|
||||||
isFrameLikeElement,
|
isFrameLikeElement,
|
||||||
isFreeDrawElement,
|
|
||||||
isLinearElement,
|
isLinearElement,
|
||||||
isTextElement,
|
isTextElement,
|
||||||
} from "./typeChecks";
|
} from "./typeChecks";
|
||||||
@@ -34,38 +17,19 @@ import {
|
|||||||
elementOverlapsWithFrame,
|
elementOverlapsWithFrame,
|
||||||
getContainingFrame,
|
getContainingFrame,
|
||||||
getFrameChildren,
|
getFrameChildren,
|
||||||
isElementIntersectingFrame,
|
|
||||||
} from "./frame";
|
} from "./frame";
|
||||||
|
|
||||||
import { LinearElementEditor } from "./linearElementEditor";
|
import { LinearElementEditor } from "./linearElementEditor";
|
||||||
import { selectGroupsForSelectedElements } from "./groups";
|
import { selectGroupsForSelectedElements } from "./groups";
|
||||||
import { getBoundTextElement } from "./textElement";
|
|
||||||
|
|
||||||
import type {
|
import type {
|
||||||
ElementsMap,
|
ElementsMap,
|
||||||
ElementsMapOrArray,
|
ElementsMapOrArray,
|
||||||
ExcalidrawElement,
|
ExcalidrawElement,
|
||||||
ExcalidrawFrameLikeElement,
|
|
||||||
NonDeleted,
|
NonDeleted,
|
||||||
NonDeletedExcalidrawElement,
|
NonDeletedExcalidrawElement,
|
||||||
} from "./types";
|
} 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.
|
* 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
|
* 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 = (
|
export const getElementsWithinSelection = (
|
||||||
elements: readonly NonDeletedExcalidrawElement[],
|
elements: readonly NonDeletedExcalidrawElement[],
|
||||||
selection: NonDeletedExcalidrawElement,
|
selection: NonDeletedExcalidrawElement,
|
||||||
elementsMap: ElementsMap,
|
elementsMap: ElementsMap,
|
||||||
// TODO remove (this flag is effectively unused AFAIK)
|
|
||||||
excludeElementsInFrames: boolean = true,
|
excludeElementsInFrames: boolean = true,
|
||||||
boxSelectionMode: BoxSelectionMode = "contain",
|
) => {
|
||||||
): NonDeletedExcalidrawElement[] => {
|
const [selectionX1, selectionY1, selectionX2, selectionY2] =
|
||||||
const [selectionStartX, selectionStartY, selectionEndX, selectionEndY] =
|
|
||||||
getElementAbsoluteCoords(selection, elementsMap);
|
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
|
let elementsInSelection = elements.filter((element) => {
|
||||||
? new Set<NonDeletedExcalidrawElement["id"]>()
|
let [elementX1, elementY1, elementX2, elementY2] = getElementBounds(
|
||||||
: null;
|
element,
|
||||||
let elementsInSelection: NonDeletedExcalidrawElement[] = [];
|
elementsMap,
|
||||||
|
);
|
||||||
|
|
||||||
for (const element of elements) {
|
const containingFrame = getContainingFrame(element, elementsMap);
|
||||||
if (shouldIgnoreElementFromSelection(element)) {
|
if (containingFrame) {
|
||||||
continue;
|
const [fx1, fy1, fx2, fy2] = getElementBounds(
|
||||||
}
|
containingFrame,
|
||||||
|
|
||||||
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,
|
|
||||||
elementsMap,
|
elementsMap,
|
||||||
);
|
);
|
||||||
labelAABB = [
|
|
||||||
x,
|
elementX1 = Math.max(fx1, elementX1);
|
||||||
y,
|
elementY1 = Math.max(fy1, elementY1);
|
||||||
x + boundTextElement.width,
|
elementX2 = Math.min(fx2, elementX2);
|
||||||
y + boundTextElement.height,
|
elementY2 = Math.min(fy2, elementY2);
|
||||||
] as Bounds;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Clip element bounds by its containing frame (if any), since only the
|
return (
|
||||||
// visible (frame-clipped) portion of the element is relevant for selection.
|
element.locked === false &&
|
||||||
const associatedFrame = getContainingFrame(element, elementsMap);
|
element.type !== "selection" &&
|
||||||
if (
|
!isBoundToContainer(element) &&
|
||||||
associatedFrame &&
|
selectionX1 <= elementX1 &&
|
||||||
isElementIntersectingFrame(element, associatedFrame, elementsMap)
|
selectionY1 <= elementY1 &&
|
||||||
) {
|
selectionX2 >= elementX2 &&
|
||||||
const frameAABB = getElementBounds(associatedFrame, elementsMap);
|
selectionY2 >= elementY2
|
||||||
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;
|
|
||||||
|
|
||||||
labelAABB = labelAABB
|
elementsInSelection = excludeElementsInFrames
|
||||||
? ([
|
? excludeElementsInFramesFromSelection(elementsInSelection)
|
||||||
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;
|
: elementsInSelection;
|
||||||
|
|
||||||
elementsInSelection = elementsInSelection.filter((element) => {
|
elementsInSelection = elementsInSelection.filter((element) => {
|
||||||
|
|||||||
@@ -111,67 +111,6 @@ export class Store {
|
|||||||
this.scheduleAction(CaptureUpdateAction.IMMEDIATELY);
|
this.scheduleAction(CaptureUpdateAction.IMMEDIATELY);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Commits a synthetic durable history entry without changing the live scene.
|
|
||||||
*
|
|
||||||
* Builds StoreSnapshot → StoreChange → StoreDelta from the provided
|
|
||||||
* logical before/after element maps and optional appState patches, then
|
|
||||||
* emits the resulting durable increment immediately through an isolated
|
|
||||||
* path that does not flush pending micro actions.
|
|
||||||
*
|
|
||||||
* appState patches are merged on top of the current observed appState
|
|
||||||
* baseline so only the provided keys participate in the synthetic diff.
|
|
||||||
*/
|
|
||||||
public commitSyntheticIncrement(params: {
|
|
||||||
logicalBefore: {
|
|
||||||
elements: SceneElementsMap;
|
|
||||||
appState?: Partial<ObservedAppState>;
|
|
||||||
};
|
|
||||||
logicalAfter: {
|
|
||||||
elements: SceneElementsMap;
|
|
||||||
appState?: Partial<ObservedAppState>;
|
|
||||||
};
|
|
||||||
}): boolean {
|
|
||||||
const { logicalBefore, logicalAfter } = params;
|
|
||||||
const observedAppStateBaseline = this.snapshot.appState;
|
|
||||||
const syntheticAppStateBefore = logicalBefore.appState
|
|
||||||
? { ...observedAppStateBaseline, ...logicalBefore.appState }
|
|
||||||
: observedAppStateBaseline;
|
|
||||||
const syntheticAppStateAfter = logicalAfter.appState
|
|
||||||
? { ...observedAppStateBaseline, ...logicalAfter.appState }
|
|
||||||
: observedAppStateBaseline;
|
|
||||||
const didAppStateChange = Delta.isRightDifferent(
|
|
||||||
syntheticAppStateBefore,
|
|
||||||
syntheticAppStateAfter,
|
|
||||||
);
|
|
||||||
const prevSnapshot = StoreSnapshot.create(
|
|
||||||
logicalBefore.elements,
|
|
||||||
syntheticAppStateBefore,
|
|
||||||
{
|
|
||||||
didElementsChange: true,
|
|
||||||
didAppStateChange,
|
|
||||||
},
|
|
||||||
);
|
|
||||||
const nextSnapshot = StoreSnapshot.create(
|
|
||||||
logicalAfter.elements,
|
|
||||||
syntheticAppStateAfter,
|
|
||||||
{
|
|
||||||
didElementsChange: true,
|
|
||||||
didAppStateChange,
|
|
||||||
},
|
|
||||||
);
|
|
||||||
const change = StoreChange.create(prevSnapshot, nextSnapshot);
|
|
||||||
const delta = StoreDelta.calculate(prevSnapshot, nextSnapshot);
|
|
||||||
|
|
||||||
if (delta.isEmpty()) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.emitIsolatedDurableIncrement(change, delta);
|
|
||||||
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Schedule special "micro" actions, to-be executed before the next commit, before it executes a scheduled "macro" action.
|
* Schedule special "micro" actions, to-be executed before the next commit, before it executes a scheduled "macro" action.
|
||||||
*/
|
*/
|
||||||
@@ -267,7 +206,6 @@ export class Store {
|
|||||||
public clear(): void {
|
public clear(): void {
|
||||||
this.snapshot = StoreSnapshot.empty();
|
this.snapshot = StoreSnapshot.empty();
|
||||||
this.scheduledMacroActions = new Set();
|
this.scheduledMacroActions = new Set();
|
||||||
this.scheduledMicroActions = [];
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -307,24 +245,6 @@ export class Store {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Emits a synthetic durable increment immediately without draining the
|
|
||||||
* regular micro-action queue.
|
|
||||||
*/
|
|
||||||
private emitIsolatedDurableIncrement(change: StoreChange, delta: StoreDelta) {
|
|
||||||
const nextSnapshot = this.applyChangeToSnapshot(change);
|
|
||||||
|
|
||||||
if (!nextSnapshot) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
this.emitDurableIncrement(nextSnapshot, change, delta);
|
|
||||||
} finally {
|
|
||||||
this.snapshot = nextSnapshot;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Performs change calculation and emits an ephemeral increment.
|
* Performs change calculation and emits an ephemeral increment.
|
||||||
*
|
*
|
||||||
@@ -571,89 +491,6 @@ export class EphemeralIncrement extends StoreIncrement {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Serializable delta marker used to recover pre-tx undo baselines
|
|
||||||
* without rewriting history stack entries.
|
|
||||||
*/
|
|
||||||
export type TxUndoOverride = {
|
|
||||||
txId: string;
|
|
||||||
elementId: string;
|
|
||||||
prop: string;
|
|
||||||
expectedInsertedValue: unknown;
|
|
||||||
preTxBaselineValue: unknown;
|
|
||||||
consumedKey: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
export type StoreDeltaMarkers = {
|
|
||||||
txUndoOverrides?: TxUndoOverride[];
|
|
||||||
};
|
|
||||||
|
|
||||||
const cloneTxUndoOverride = (override: TxUndoOverride): TxUndoOverride => ({
|
|
||||||
...override,
|
|
||||||
});
|
|
||||||
|
|
||||||
const cloneStoreDeltaMarkers = (
|
|
||||||
markers: StoreDeltaMarkers | undefined,
|
|
||||||
): StoreDeltaMarkers | undefined =>
|
|
||||||
markers
|
|
||||||
? {
|
|
||||||
...markers,
|
|
||||||
txUndoOverrides: markers.txUndoOverrides?.map(cloneTxUndoOverride),
|
|
||||||
}
|
|
||||||
: undefined;
|
|
||||||
|
|
||||||
const pruneStoreDeltaMarkers = (delta: StoreDelta) => {
|
|
||||||
const txUndoOverrides = delta.markers?.txUndoOverrides;
|
|
||||||
if (!txUndoOverrides || txUndoOverrides.length === 0) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const updatedEntries = delta.elements.updated as Record<
|
|
||||||
string,
|
|
||||||
Delta<Record<string, unknown>>
|
|
||||||
>;
|
|
||||||
const nextTxUndoOverrides = txUndoOverrides.filter((override) => {
|
|
||||||
const updatedEntry = updatedEntries[override.elementId];
|
|
||||||
return (
|
|
||||||
!!updatedEntry &&
|
|
||||||
Object.prototype.hasOwnProperty.call(updatedEntry.inserted, override.prop)
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
if (nextTxUndoOverrides.length === txUndoOverrides.length) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (nextTxUndoOverrides.length === 0) {
|
|
||||||
delta.markers = undefined;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
delta.markers = {
|
|
||||||
...delta.markers,
|
|
||||||
txUndoOverrides: nextTxUndoOverrides.map(cloneTxUndoOverride),
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
export const mergeStoreDeltaMarkers = (
|
|
||||||
delta: StoreDelta,
|
|
||||||
markers: StoreDeltaMarkers,
|
|
||||||
) => {
|
|
||||||
const txUndoOverrides = markers.txUndoOverrides ?? [];
|
|
||||||
if (txUndoOverrides.length === 0) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const existing = delta.markers?.txUndoOverrides ?? [];
|
|
||||||
delta.markers = {
|
|
||||||
...delta.markers,
|
|
||||||
txUndoOverrides: [
|
|
||||||
...existing.map(cloneTxUndoOverride),
|
|
||||||
...txUndoOverrides.map(cloneTxUndoOverride),
|
|
||||||
],
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Represents a captured delta by the Store.
|
* Represents a captured delta by the Store.
|
||||||
*/
|
*/
|
||||||
@@ -662,7 +499,6 @@ export class StoreDelta {
|
|||||||
public readonly id: string,
|
public readonly id: string,
|
||||||
public readonly elements: ElementsDelta,
|
public readonly elements: ElementsDelta,
|
||||||
public readonly appState: AppStateDelta,
|
public readonly appState: AppStateDelta,
|
||||||
public markers?: StoreDeltaMarkers,
|
|
||||||
) {}
|
) {}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -672,16 +508,12 @@ export class StoreDelta {
|
|||||||
elements: ElementsDelta,
|
elements: ElementsDelta,
|
||||||
appState: AppStateDelta,
|
appState: AppStateDelta,
|
||||||
opts: {
|
opts: {
|
||||||
id?: string;
|
id: string;
|
||||||
markers?: StoreDeltaMarkers;
|
} = {
|
||||||
} = {},
|
id: randomId(),
|
||||||
|
},
|
||||||
) {
|
) {
|
||||||
return new this(
|
return new this(opts.id, elements, appState);
|
||||||
opts.id ?? randomId(),
|
|
||||||
elements,
|
|
||||||
appState,
|
|
||||||
cloneStoreDeltaMarkers(opts.markers),
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -706,12 +538,11 @@ export class StoreDelta {
|
|||||||
* Restore a store delta instance from a DTO.
|
* Restore a store delta instance from a DTO.
|
||||||
*/
|
*/
|
||||||
public static restore(storeDeltaDTO: DTO<StoreDelta>) {
|
public static restore(storeDeltaDTO: DTO<StoreDelta>) {
|
||||||
const { id, elements, appState, markers } = storeDeltaDTO;
|
const { id, elements, appState } = storeDeltaDTO;
|
||||||
return new this(
|
return new this(
|
||||||
id,
|
id,
|
||||||
ElementsDelta.restore(elements),
|
ElementsDelta.restore(elements),
|
||||||
AppStateDelta.restore(appState),
|
AppStateDelta.restore(appState),
|
||||||
cloneStoreDeltaMarkers(markers),
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -722,12 +553,11 @@ export class StoreDelta {
|
|||||||
id,
|
id,
|
||||||
elements: { added, removed, updated },
|
elements: { added, removed, updated },
|
||||||
appState: { delta: appStateDelta },
|
appState: { delta: appStateDelta },
|
||||||
markers,
|
|
||||||
}: DTO<StoreDelta>) {
|
}: DTO<StoreDelta>) {
|
||||||
const elements = ElementsDelta.create(added, removed, updated);
|
const elements = ElementsDelta.create(added, removed, updated);
|
||||||
const appState = AppStateDelta.create(appStateDelta);
|
const appState = AppStateDelta.create(appStateDelta);
|
||||||
|
|
||||||
return new this(id, elements, appState, cloneStoreDeltaMarkers(markers));
|
return new this(id, elements, appState);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -739,10 +569,8 @@ export class StoreDelta {
|
|||||||
for (const delta of deltas) {
|
for (const delta of deltas) {
|
||||||
aggregatedDelta.elements.squash(delta.elements);
|
aggregatedDelta.elements.squash(delta.elements);
|
||||||
aggregatedDelta.appState.squash(delta.appState);
|
aggregatedDelta.appState.squash(delta.appState);
|
||||||
mergeStoreDeltaMarkers(aggregatedDelta, delta.markers ?? {});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
pruneStoreDeltaMarkers(aggregatedDelta);
|
|
||||||
return aggregatedDelta;
|
return aggregatedDelta;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -750,12 +578,7 @@ export class StoreDelta {
|
|||||||
* Inverse store delta, creates new instance of `StoreDelta`.
|
* Inverse store delta, creates new instance of `StoreDelta`.
|
||||||
*/
|
*/
|
||||||
public static inverse(delta: StoreDelta) {
|
public static inverse(delta: StoreDelta) {
|
||||||
const inversed = this.create(
|
return this.create(delta.elements.inverse(), delta.appState.inverse());
|
||||||
delta.elements.inverse(),
|
|
||||||
delta.appState.inverse(),
|
|
||||||
{ markers: delta.markers },
|
|
||||||
);
|
|
||||||
return inversed;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -791,7 +614,7 @@ export class StoreDelta {
|
|||||||
nextElements: SceneElementsMap,
|
nextElements: SceneElementsMap,
|
||||||
modifierOptions?: "deleted" | "inserted",
|
modifierOptions?: "deleted" | "inserted",
|
||||||
): StoreDelta {
|
): StoreDelta {
|
||||||
const nextDelta = this.create(
|
return this.create(
|
||||||
delta.elements.applyLatestChanges(
|
delta.elements.applyLatestChanges(
|
||||||
prevElements,
|
prevElements,
|
||||||
nextElements,
|
nextElements,
|
||||||
@@ -800,11 +623,8 @@ export class StoreDelta {
|
|||||||
delta.appState,
|
delta.appState,
|
||||||
{
|
{
|
||||||
id: delta.id,
|
id: delta.id,
|
||||||
markers: delta.markers,
|
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
pruneStoreDeltaMarkers(nextDelta);
|
|
||||||
return nextDelta;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
public static empty() {
|
public static empty() {
|
||||||
|
|||||||
@@ -1,8 +1,7 @@
|
|||||||
import { arrayToMap, reseed } from "@excalidraw/common";
|
import { arrayToMap, ROUNDNESS } from "@excalidraw/common";
|
||||||
import { type GlobalPoint, type LocalPoint, pointFrom } from "@excalidraw/math";
|
import { type GlobalPoint, type LocalPoint, pointFrom } from "@excalidraw/math";
|
||||||
import { Excalidraw } from "@excalidraw/excalidraw";
|
import { Excalidraw } from "@excalidraw/excalidraw";
|
||||||
import { API } from "@excalidraw/excalidraw/tests/helpers/api";
|
import { API } from "@excalidraw/excalidraw/tests/helpers/api";
|
||||||
import { UI } from "@excalidraw/excalidraw/tests/helpers/ui";
|
|
||||||
import "@excalidraw/utils/test-utils";
|
import "@excalidraw/utils/test-utils";
|
||||||
import { render } from "@excalidraw/excalidraw/tests/test-utils";
|
import { render } from "@excalidraw/excalidraw/tests/test-utils";
|
||||||
|
|
||||||
@@ -10,30 +9,29 @@ import * as distance from "../src/distance";
|
|||||||
import { hitElementItself } from "../src/collision";
|
import { hitElementItself } from "../src/collision";
|
||||||
|
|
||||||
describe("check rotated elements can be hit:", () => {
|
describe("check rotated elements can be hit:", () => {
|
||||||
beforeEach(async () => {
|
|
||||||
localStorage.clear();
|
|
||||||
reseed(7);
|
|
||||||
await render(<Excalidraw handleKeyboardGlobally={true} />);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("arrow", () => {
|
it("arrow", () => {
|
||||||
UI.createElement("arrow", {
|
const element = API.createElement({
|
||||||
|
type: "arrow",
|
||||||
x: 0,
|
x: 0,
|
||||||
y: 0,
|
y: 0,
|
||||||
width: 124,
|
width: 124,
|
||||||
height: 302,
|
height: 302,
|
||||||
angle: 1.8700426423973724,
|
angle: 1.8700426423973724,
|
||||||
|
roundness: { type: ROUNDNESS.PROPORTIONAL_RADIUS },
|
||||||
|
endArrowhead: "arrow",
|
||||||
points: [
|
points: [
|
||||||
[0, 0],
|
[0, 0],
|
||||||
[120, -198],
|
[120, -198],
|
||||||
[-4, -302],
|
[-4, -302],
|
||||||
] as LocalPoint[],
|
] as LocalPoint[],
|
||||||
});
|
});
|
||||||
|
const elementsMap = arrayToMap([element]);
|
||||||
|
|
||||||
const hit = hitElementItself({
|
const hit = hitElementItself({
|
||||||
point: pointFrom<GlobalPoint>(88, -68),
|
point: pointFrom<GlobalPoint>(88, -68),
|
||||||
element: window.h.elements[0],
|
element,
|
||||||
threshold: 10,
|
threshold: 10,
|
||||||
elementsMap: window.h.scene.getNonDeletedElementsMap(),
|
elementsMap,
|
||||||
});
|
});
|
||||||
expect(hit).toBe(true);
|
expect(hit).toBe(true);
|
||||||
});
|
});
|
||||||
@@ -57,7 +55,6 @@ describe("hitElementItself cache", () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
localStorage.clear();
|
localStorage.clear();
|
||||||
reseed(7);
|
|
||||||
await render(<Excalidraw handleKeyboardGlobally={true} />);
|
await render(<Excalidraw handleKeyboardGlobally={true} />);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -1,140 +0,0 @@
|
|||||||
import { API } from "@excalidraw/excalidraw/tests/helpers/api";
|
|
||||||
|
|
||||||
import { arrayToMap } from "@excalidraw/common";
|
|
||||||
|
|
||||||
import type App from "@excalidraw/excalidraw/components/App";
|
|
||||||
|
|
||||||
import type { ObservedAppState } from "@excalidraw/excalidraw/types";
|
|
||||||
import type {
|
|
||||||
ExcalidrawElement,
|
|
||||||
SceneElementsMap,
|
|
||||||
} from "@excalidraw/element/types";
|
|
||||||
|
|
||||||
import {
|
|
||||||
CaptureUpdateAction,
|
|
||||||
Store,
|
|
||||||
StoreSnapshot,
|
|
||||||
newElementWith,
|
|
||||||
} from "../src";
|
|
||||||
|
|
||||||
const getScheduledMicroActionCount = (store: Store) =>
|
|
||||||
(
|
|
||||||
store as unknown as {
|
|
||||||
scheduledMicroActions: Array<() => void>;
|
|
||||||
}
|
|
||||||
).scheduledMicroActions.length;
|
|
||||||
|
|
||||||
const flushMicroActions = (store: Store) => {
|
|
||||||
(
|
|
||||||
store as unknown as {
|
|
||||||
flushMicroActions: () => void;
|
|
||||||
}
|
|
||||||
).flushMicroActions();
|
|
||||||
};
|
|
||||||
|
|
||||||
const toSceneElementsMap = (
|
|
||||||
elements: readonly ExcalidrawElement[],
|
|
||||||
): SceneElementsMap => arrayToMap(elements) as SceneElementsMap;
|
|
||||||
|
|
||||||
const createStoreHarness = (elements: SceneElementsMap) => {
|
|
||||||
const appState: ObservedAppState = StoreSnapshot.empty().appState;
|
|
||||||
const app = {
|
|
||||||
scene: {
|
|
||||||
getElementsMapIncludingDeleted: () => elements,
|
|
||||||
},
|
|
||||||
state: appState,
|
|
||||||
} as unknown as App;
|
|
||||||
|
|
||||||
const store = new Store(app);
|
|
||||||
store.snapshot = StoreSnapshot.create(elements, appState);
|
|
||||||
|
|
||||||
return { store, appState };
|
|
||||||
};
|
|
||||||
|
|
||||||
describe("Store synthetic increment isolation", () => {
|
|
||||||
it("keeps pending immediate micro actions queued across synthetic commit", () => {
|
|
||||||
const element = API.createElement({
|
|
||||||
type: "rectangle",
|
|
||||||
id: "store-isolated-immediate",
|
|
||||||
x: 0,
|
|
||||||
y: 0,
|
|
||||||
});
|
|
||||||
const baselineElements = toSceneElementsMap([element]);
|
|
||||||
const { store } = createStoreHarness(baselineElements);
|
|
||||||
|
|
||||||
const incrementTypes: Array<"durable" | "ephemeral"> = [];
|
|
||||||
const detach = store.onStoreIncrementEmitter.on((increment) => {
|
|
||||||
incrementTypes.push(increment.type);
|
|
||||||
});
|
|
||||||
|
|
||||||
store.scheduleMicroAction({
|
|
||||||
action: CaptureUpdateAction.IMMEDIATELY,
|
|
||||||
elements: [newElementWith(element, { y: 240 })],
|
|
||||||
appState: undefined,
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(getScheduledMicroActionCount(store)).toBe(1);
|
|
||||||
|
|
||||||
const committed = store.commitSyntheticIncrement({
|
|
||||||
logicalBefore: {
|
|
||||||
elements: baselineElements,
|
|
||||||
},
|
|
||||||
logicalAfter: {
|
|
||||||
elements: toSceneElementsMap([newElementWith(element, { x: 120 })]),
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(committed).toBe(true);
|
|
||||||
expect(incrementTypes).toEqual(["durable"]);
|
|
||||||
expect(getScheduledMicroActionCount(store)).toBe(1);
|
|
||||||
|
|
||||||
flushMicroActions(store);
|
|
||||||
|
|
||||||
expect(incrementTypes).toEqual(["durable", "durable"]);
|
|
||||||
expect(getScheduledMicroActionCount(store)).toBe(0);
|
|
||||||
detach();
|
|
||||||
});
|
|
||||||
|
|
||||||
it("keeps pending eventually micro actions queued across synthetic commit", () => {
|
|
||||||
const element = API.createElement({
|
|
||||||
type: "rectangle",
|
|
||||||
id: "store-isolated-eventually",
|
|
||||||
x: 0,
|
|
||||||
y: 0,
|
|
||||||
});
|
|
||||||
const baselineElements = toSceneElementsMap([element]);
|
|
||||||
const { store } = createStoreHarness(baselineElements);
|
|
||||||
|
|
||||||
const incrementTypes: Array<"durable" | "ephemeral"> = [];
|
|
||||||
const detach = store.onStoreIncrementEmitter.on((increment) => {
|
|
||||||
incrementTypes.push(increment.type);
|
|
||||||
});
|
|
||||||
|
|
||||||
store.scheduleMicroAction({
|
|
||||||
action: CaptureUpdateAction.EVENTUALLY,
|
|
||||||
elements: [newElementWith(element, { y: 240 })],
|
|
||||||
appState: undefined,
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(getScheduledMicroActionCount(store)).toBe(1);
|
|
||||||
|
|
||||||
const committed = store.commitSyntheticIncrement({
|
|
||||||
logicalBefore: {
|
|
||||||
elements: baselineElements,
|
|
||||||
},
|
|
||||||
logicalAfter: {
|
|
||||||
elements: toSceneElementsMap([newElementWith(element, { x: 120 })]),
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(committed).toBe(true);
|
|
||||||
expect(incrementTypes).toEqual(["durable"]);
|
|
||||||
expect(getScheduledMicroActionCount(store)).toBe(1);
|
|
||||||
|
|
||||||
flushMicroActions(store);
|
|
||||||
|
|
||||||
expect(incrementTypes).toEqual(["durable", "ephemeral"]);
|
|
||||||
expect(getScheduledMicroActionCount(store)).toBe(0);
|
|
||||||
detach();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@@ -128,7 +128,6 @@ export const getDefaultAppState = (): Omit<
|
|||||||
lockedMultiSelections: {},
|
lockedMultiSelections: {},
|
||||||
activeLockedId: null,
|
activeLockedId: null,
|
||||||
bindMode: "orbit",
|
bindMode: "orbit",
|
||||||
boxSelectionMode: "contain",
|
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -194,7 +193,6 @@ const APP_STATE_STORAGE_CONF = (<
|
|||||||
gridModeEnabled: { browser: true, export: true, server: true },
|
gridModeEnabled: { browser: true, export: true, server: true },
|
||||||
height: { browser: false, export: false, server: false },
|
height: { browser: false, export: false, server: false },
|
||||||
isBindingEnabled: { browser: true, 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 },
|
bindingPreference: { browser: true, export: false, server: false },
|
||||||
isMidpointSnappingEnabled: { browser: true, export: false, server: false },
|
isMidpointSnappingEnabled: { browser: true, export: false, server: false },
|
||||||
defaultSidebarDockedPreference: {
|
defaultSidebarDockedPreference: {
|
||||||
|
|||||||
@@ -27,7 +27,6 @@ import {
|
|||||||
KEYS,
|
KEYS,
|
||||||
APP_NAME,
|
APP_NAME,
|
||||||
CURSOR_TYPE,
|
CURSOR_TYPE,
|
||||||
DEFAULT_TRANSFORM_HANDLE_SPACING,
|
|
||||||
DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT,
|
DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT,
|
||||||
DEFAULT_VERTICAL_ALIGN,
|
DEFAULT_VERTICAL_ALIGN,
|
||||||
DRAGGING_THRESHOLD,
|
DRAGGING_THRESHOLD,
|
||||||
@@ -361,7 +360,6 @@ import { restoreAppState, restoreElements } from "../data/restore";
|
|||||||
import { getCenter, getDistance } from "../gesture";
|
import { getCenter, getDistance } from "../gesture";
|
||||||
import { History } from "../history";
|
import { History } from "../history";
|
||||||
import { defaultLang, getLanguage, languages, setLanguage, t } from "../i18n";
|
import { defaultLang, getLanguage, languages, setLanguage, t } from "../i18n";
|
||||||
import { TransactionManager } from "../transaction";
|
|
||||||
|
|
||||||
import {
|
import {
|
||||||
calculateScrollCenter,
|
calculateScrollCenter,
|
||||||
@@ -638,8 +636,7 @@ class App extends React.Component<AppProps, AppState> {
|
|||||||
public library: AppClassProperties["library"];
|
public library: AppClassProperties["library"];
|
||||||
public libraryItemsFromStorage: LibraryItems | undefined;
|
public libraryItemsFromStorage: LibraryItems | undefined;
|
||||||
public id: string;
|
public id: string;
|
||||||
public transactionManager: TransactionManager;
|
private store: Store;
|
||||||
public store: Store;
|
|
||||||
private history: History;
|
private history: History;
|
||||||
public excalidrawContainerValue: {
|
public excalidrawContainerValue: {
|
||||||
container: HTMLDivElement | null;
|
container: HTMLDivElement | null;
|
||||||
@@ -834,8 +831,6 @@ class App extends React.Component<AppProps, AppState> {
|
|||||||
|
|
||||||
this.store = new Store(this);
|
this.store = new Store(this);
|
||||||
this.history = new History(this.store);
|
this.history = new History(this.store);
|
||||||
this.transactionManager = new TransactionManager(this);
|
|
||||||
this.transactionManager.attachHistory(this.history);
|
|
||||||
|
|
||||||
this.excalidrawContainerValue = {
|
this.excalidrawContainerValue = {
|
||||||
container: this.excalidrawContainerRef.current,
|
container: this.excalidrawContainerRef.current,
|
||||||
@@ -843,6 +838,7 @@ class App extends React.Component<AppProps, AppState> {
|
|||||||
};
|
};
|
||||||
|
|
||||||
this.fonts = new Fonts(this.scene);
|
this.fonts = new Fonts(this.scene);
|
||||||
|
this.history = new History(this.store);
|
||||||
|
|
||||||
this.actionManager.registerAll(actions);
|
this.actionManager.registerAll(actions);
|
||||||
this.actionManager.registerAction(createUndoAction(this.history));
|
this.actionManager.registerAction(createUndoAction(this.history));
|
||||||
@@ -2528,7 +2524,6 @@ class App extends React.Component<AppProps, AppState> {
|
|||||||
const magicFrameChildren = getElementsOverlappingFrame(
|
const magicFrameChildren = getElementsOverlappingFrame(
|
||||||
this.scene.getNonDeletedElements(),
|
this.scene.getNonDeletedElements(),
|
||||||
magicFrame,
|
magicFrame,
|
||||||
this.scene.getNonDeletedElementsMap(),
|
|
||||||
).filter((el) => !isMagicFrameElement(el));
|
).filter((el) => !isMagicFrameElement(el));
|
||||||
|
|
||||||
if (!magicFrameChildren.length) {
|
if (!magicFrameChildren.length) {
|
||||||
@@ -4605,11 +4600,6 @@ class App extends React.Component<AppProps, AppState> {
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
/** Creates a new transaction for batching mutations into a single undo entry. */
|
|
||||||
public createTransaction: TransactionManager["create"] = () => {
|
|
||||||
return this.transactionManager.create();
|
|
||||||
};
|
|
||||||
|
|
||||||
public mutateElement = <TElement extends Mutable<ExcalidrawElement>>(
|
public mutateElement = <TElement extends Mutable<ExcalidrawElement>>(
|
||||||
element: TElement,
|
element: TElement,
|
||||||
updates: ElementUpdate<TElement>,
|
updates: ElementUpdate<TElement>,
|
||||||
@@ -7249,14 +7239,6 @@ class App extends React.Component<AppProps, AppState> {
|
|||||||
this.interactiveCanvas,
|
this.interactiveCanvas,
|
||||||
isTextElement(hitElement) ? CURSOR_TYPE.TEXT : CURSOR_TYPE.CROSSHAIR,
|
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) {
|
} else if (this.state.viewModeEnabled) {
|
||||||
setCursor(this.interactiveCanvas, CURSOR_TYPE.GRAB);
|
setCursor(this.interactiveCanvas, CURSOR_TYPE.GRAB);
|
||||||
} else if (this.state.openDialog?.name === "elementLinkSelector") {
|
} else if (this.state.openDialog?.name === "elementLinkSelector") {
|
||||||
@@ -7748,24 +7730,17 @@ class App extends React.Component<AppProps, AppState> {
|
|||||||
const hitSelectedElement =
|
const hitSelectedElement =
|
||||||
pointerDownState.hit.element &&
|
pointerDownState.hit.element &&
|
||||||
this.isASelectedElement(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 (
|
||||||
if (!this.lassoTrail.hasCurrentTrail) {
|
!pointerDownState.hit.hasHitCommonBoundingBoxOfSelectedElements &&
|
||||||
this.lassoTrail.startPath(
|
!pointerDownState.resize.handleType &&
|
||||||
pointerDownState.origin.x,
|
!hitSelectedElement
|
||||||
pointerDownState.origin.y,
|
) {
|
||||||
event.shiftKey,
|
this.lassoTrail.startPath(
|
||||||
);
|
pointerDownState.origin.x,
|
||||||
}
|
pointerDownState.origin.y,
|
||||||
|
event.shiftKey,
|
||||||
|
);
|
||||||
|
|
||||||
// block dragging after lasso selection on PCs until the next pointer down
|
// block dragging after lasso selection on PCs until the next pointer down
|
||||||
// (on mobile or tablet, we want to allow user to drag immediately)
|
// (on mobile or tablet, we want to allow user to drag immediately)
|
||||||
@@ -8754,14 +8729,12 @@ class App extends React.Component<AppProps, AppState> {
|
|||||||
DEFAULT_COLLISION_THRESHOLD / this.state.zoom.value,
|
DEFAULT_COLLISION_THRESHOLD / this.state.zoom.value,
|
||||||
1,
|
1,
|
||||||
);
|
);
|
||||||
const boundsPadding =
|
|
||||||
(DEFAULT_TRANSFORM_HANDLE_SPACING * 2) / this.state.zoom.value;
|
|
||||||
const [x1, y1, x2, y2] = getCommonBounds(selectedElements);
|
const [x1, y1, x2, y2] = getCommonBounds(selectedElements);
|
||||||
return (
|
return (
|
||||||
point.x > x1 - boundsPadding - threshold &&
|
point.x > x1 - threshold &&
|
||||||
point.x < x2 + boundsPadding + threshold &&
|
point.x < x2 + threshold &&
|
||||||
point.y > y1 - boundsPadding - threshold &&
|
point.y > y1 - threshold &&
|
||||||
point.y < y2 + boundsPadding + threshold
|
point.y < y2 + threshold
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -10294,7 +10267,6 @@ class App extends React.Component<AppProps, AppState> {
|
|||||||
this.state.selectionElement,
|
this.state.selectionElement,
|
||||||
this.scene.getNonDeletedElementsMap(),
|
this.scene.getNonDeletedElementsMap(),
|
||||||
false,
|
false,
|
||||||
this.state.boxSelectionMode,
|
|
||||||
)
|
)
|
||||||
: [];
|
: [];
|
||||||
|
|
||||||
|
|||||||
@@ -26,16 +26,13 @@
|
|||||||
background: var(--RadioGroup-background);
|
background: var(--RadioGroup-background);
|
||||||
border: 1px solid var(--RadioGroup-border);
|
border: 1px solid var(--RadioGroup-border);
|
||||||
|
|
||||||
gap: 2px;
|
|
||||||
|
|
||||||
&__choice {
|
&__choice {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
min-width: 20px;
|
width: 32px;
|
||||||
height: 24px;
|
height: 24px;
|
||||||
padding: 0 0.375rem;
|
|
||||||
|
|
||||||
color: var(--RadioGroup-choice-color-off);
|
color: var(--RadioGroup-choice-color-off);
|
||||||
background: var(--RadioGroup-choice-background-off);
|
background: var(--RadioGroup-choice-background-off);
|
||||||
|
|||||||
@@ -750,7 +750,7 @@ describe("frame resizing behavior", () => {
|
|||||||
x: 0,
|
x: 0,
|
||||||
y: 0,
|
y: 0,
|
||||||
width: 100,
|
width: 100,
|
||||||
height: 103,
|
height: 100,
|
||||||
});
|
});
|
||||||
|
|
||||||
// Create a rectangle outside the frame
|
// Create a rectangle outside the frame
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
|
|
||||||
.excalidraw {
|
.excalidraw {
|
||||||
.dropdown-menu {
|
.dropdown-menu {
|
||||||
max-width: 20rem;
|
max-width: 16rem;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
|
|
||||||
&--placement-top {
|
&--placement-top {
|
||||||
|
|||||||
@@ -1,5 +1,4 @@
|
|||||||
import { useEditorInterface } from "../App";
|
import { useEditorInterface } from "../App";
|
||||||
import { Ellipsify } from "../Ellipsify";
|
|
||||||
import { RadioGroup } from "../RadioGroup";
|
import { RadioGroup } from "../RadioGroup";
|
||||||
|
|
||||||
type Props<T> = {
|
type Props<T> = {
|
||||||
@@ -13,7 +12,6 @@ type Props<T> = {
|
|||||||
onChange: (value: T) => void;
|
onChange: (value: T) => void;
|
||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
name: string;
|
name: string;
|
||||||
icon?: React.ReactNode;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const DropdownMenuItemContentRadio = <T,>({
|
const DropdownMenuItemContentRadio = <T,>({
|
||||||
@@ -23,17 +21,13 @@ const DropdownMenuItemContentRadio = <T,>({
|
|||||||
choices,
|
choices,
|
||||||
children,
|
children,
|
||||||
name,
|
name,
|
||||||
icon,
|
|
||||||
}: Props<T>) => {
|
}: Props<T>) => {
|
||||||
const editorInterface = useEditorInterface();
|
const editorInterface = useEditorInterface();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="dropdown-menu-item-base dropdown-menu-item-bare">
|
<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">{children}</label>
|
||||||
<label className="dropdown-menu-item__text">
|
|
||||||
<Ellipsify>{children}</Ellipsify>
|
|
||||||
</label>
|
|
||||||
<RadioGroup
|
<RadioGroup
|
||||||
name={name}
|
name={name}
|
||||||
value={value}
|
value={value}
|
||||||
|
|||||||
@@ -39,13 +39,7 @@ import DropdownMenuItemCheckbox from "../dropdownMenu/DropdownMenuItemCheckbox";
|
|||||||
import DropdownMenuItemContentRadio from "../dropdownMenu/DropdownMenuItemContentRadio";
|
import DropdownMenuItemContentRadio from "../dropdownMenu/DropdownMenuItemContentRadio";
|
||||||
import DropdownMenuItemLink from "../dropdownMenu/DropdownMenuItemLink";
|
import DropdownMenuItemLink from "../dropdownMenu/DropdownMenuItemLink";
|
||||||
import DropdownMenuSub from "../dropdownMenu/DropdownMenuSub";
|
import DropdownMenuSub from "../dropdownMenu/DropdownMenuSub";
|
||||||
import {
|
import { GithubIcon, DiscordIcon, XBrandIcon, settingsIcon } from "../icons";
|
||||||
GithubIcon,
|
|
||||||
DiscordIcon,
|
|
||||||
XBrandIcon,
|
|
||||||
settingsIcon,
|
|
||||||
emptyIcon,
|
|
||||||
} from "../icons";
|
|
||||||
import {
|
import {
|
||||||
boltIcon,
|
boltIcon,
|
||||||
DeviceDesktopIcon,
|
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 PreferencesToggleSnapModeItem = () => {
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
const actionManager = useExcalidrawActionManager();
|
const actionManager = useExcalidrawActionManager();
|
||||||
@@ -607,7 +568,6 @@ export const Preferences = ({
|
|||||||
<DropdownMenuSub.Content className="excalidraw-main-menu-preferences-submenu">
|
<DropdownMenuSub.Content className="excalidraw-main-menu-preferences-submenu">
|
||||||
{children || (
|
{children || (
|
||||||
<>
|
<>
|
||||||
<PreferencesBoxSelectionModeItem />
|
|
||||||
<PreferencesToggleToolLockItem />
|
<PreferencesToggleToolLockItem />
|
||||||
<PreferencesToggleSnapModeItem />
|
<PreferencesToggleSnapModeItem />
|
||||||
<PreferencesToggleGridModeItem />
|
<PreferencesToggleGridModeItem />
|
||||||
@@ -625,7 +585,6 @@ export const Preferences = ({
|
|||||||
};
|
};
|
||||||
|
|
||||||
Preferences.ToggleToolLock = PreferencesToggleToolLockItem;
|
Preferences.ToggleToolLock = PreferencesToggleToolLockItem;
|
||||||
Preferences.BoxSelectionMode = PreferencesBoxSelectionModeItem;
|
|
||||||
Preferences.ToggleSnapMode = PreferencesToggleSnapModeItem;
|
Preferences.ToggleSnapMode = PreferencesToggleSnapModeItem;
|
||||||
Preferences.ToggleArrowBinding = PreferencesToggleArrowBindingItem;
|
Preferences.ToggleArrowBinding = PreferencesToggleArrowBindingItem;
|
||||||
Preferences.ToggleMidpointSnapping = PreferencesToggleMidpointSnappingItem;
|
Preferences.ToggleMidpointSnapping = PreferencesToggleMidpointSnappingItem;
|
||||||
|
|||||||
@@ -6,7 +6,6 @@ import {
|
|||||||
MIME_TYPES,
|
MIME_TYPES,
|
||||||
cloneJSON,
|
cloneJSON,
|
||||||
SVG_DOCUMENT_PREAMBLE,
|
SVG_DOCUMENT_PREAMBLE,
|
||||||
arrayToMap,
|
|
||||||
} from "@excalidraw/common";
|
} from "@excalidraw/common";
|
||||||
|
|
||||||
import { getNonDeletedElements } from "@excalidraw/element";
|
import { getNonDeletedElements } from "@excalidraw/element";
|
||||||
@@ -50,7 +49,6 @@ export const prepareElementsForExport = (
|
|||||||
exportSelectionOnly: boolean,
|
exportSelectionOnly: boolean,
|
||||||
) => {
|
) => {
|
||||||
elements = getNonDeletedElements(elements);
|
elements = getNonDeletedElements(elements);
|
||||||
const elementsMap = arrayToMap(elements);
|
|
||||||
|
|
||||||
const isExportingSelection =
|
const isExportingSelection =
|
||||||
exportSelectionOnly &&
|
exportSelectionOnly &&
|
||||||
@@ -73,11 +71,7 @@ export const prepareElementsForExport = (
|
|||||||
isFrameLikeElement(exportedElements[0])
|
isFrameLikeElement(exportedElements[0])
|
||||||
) {
|
) {
|
||||||
exportingFrame = exportedElements[0];
|
exportingFrame = exportedElements[0];
|
||||||
exportedElements = getElementsOverlappingFrame(
|
exportedElements = getElementsOverlappingFrame(elements, exportingFrame);
|
||||||
elements,
|
|
||||||
exportingFrame,
|
|
||||||
elementsMap,
|
|
||||||
);
|
|
||||||
} else if (exportedElements.length > 1) {
|
} else if (exportedElements.length > 1) {
|
||||||
exportedElements = getSelectedElements(
|
exportedElements = getSelectedElements(
|
||||||
elements,
|
elements,
|
||||||
|
|||||||
@@ -936,12 +936,6 @@ export const restoreAppState = (
|
|||||||
: defaultValue;
|
: defaultValue;
|
||||||
}
|
}
|
||||||
|
|
||||||
const boxSelectionMode =
|
|
||||||
appState.boxSelectionMode ?? localAppState?.boxSelectionMode;
|
|
||||||
if (boxSelectionMode !== undefined) {
|
|
||||||
nextAppState.boxSelectionMode = boxSelectionMode;
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
...nextAppState,
|
...nextAppState,
|
||||||
cursorButton: localAppState?.cursorButton || "up",
|
cursorButton: localAppState?.cursorButton || "up",
|
||||||
|
|||||||
@@ -87,22 +87,10 @@ export class HistoryChangedEvent {
|
|||||||
) {}
|
) {}
|
||||||
}
|
}
|
||||||
|
|
||||||
export type HistoryBeforeRecordListener = (delta: StoreDelta) => void;
|
|
||||||
export type HistoryPerformDirection = "undo" | "redo";
|
|
||||||
export type HistoryEffectiveDeltaResolverContext = {
|
|
||||||
direction: HistoryPerformDirection;
|
|
||||||
};
|
|
||||||
export type HistoryEffectiveDeltaResolver = (
|
|
||||||
delta: HistoryDelta,
|
|
||||||
context: HistoryEffectiveDeltaResolverContext,
|
|
||||||
) => HistoryDelta;
|
|
||||||
|
|
||||||
export class History {
|
export class History {
|
||||||
public readonly onHistoryChangedEmitter = new Emitter<
|
public readonly onHistoryChangedEmitter = new Emitter<
|
||||||
[HistoryChangedEvent]
|
[HistoryChangedEvent]
|
||||||
>();
|
>();
|
||||||
private readonly onBeforeRecordEmitter = new Emitter<[StoreDelta]>();
|
|
||||||
private effectiveDeltaResolver: HistoryEffectiveDeltaResolver | null = null;
|
|
||||||
|
|
||||||
public readonly undoStack: HistoryDelta[] = [];
|
public readonly undoStack: HistoryDelta[] = [];
|
||||||
public readonly redoStack: HistoryDelta[] = [];
|
public readonly redoStack: HistoryDelta[] = [];
|
||||||
@@ -117,20 +105,6 @@ export class History {
|
|||||||
|
|
||||||
constructor(private readonly store: Store) {}
|
constructor(private readonly store: Store) {}
|
||||||
|
|
||||||
/**
|
|
||||||
* Registers a hook that runs before a durable delta is converted
|
|
||||||
* into a history entry.
|
|
||||||
*/
|
|
||||||
public onBeforeRecord(callback: HistoryBeforeRecordListener) {
|
|
||||||
return this.onBeforeRecordEmitter.on(callback);
|
|
||||||
}
|
|
||||||
|
|
||||||
public setEffectiveDeltaResolver(
|
|
||||||
resolver: HistoryEffectiveDeltaResolver | null,
|
|
||||||
) {
|
|
||||||
this.effectiveDeltaResolver = resolver;
|
|
||||||
}
|
|
||||||
|
|
||||||
public clear() {
|
public clear() {
|
||||||
this.undoStack.length = 0;
|
this.undoStack.length = 0;
|
||||||
this.redoStack.length = 0;
|
this.redoStack.length = 0;
|
||||||
@@ -145,8 +119,6 @@ export class History {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
this.onBeforeRecordEmitter.trigger(delta);
|
|
||||||
|
|
||||||
// construct history entry, so once it's emitted, it's not recorded again
|
// construct history entry, so once it's emitted, it's not recorded again
|
||||||
const historyDelta = HistoryDelta.inverse(delta);
|
const historyDelta = HistoryDelta.inverse(delta);
|
||||||
|
|
||||||
@@ -159,14 +131,15 @@ export class History {
|
|||||||
this.redoStack.length = 0;
|
this.redoStack.length = 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
this.emitHistoryChanged();
|
this.onHistoryChangedEmitter.trigger(
|
||||||
|
new HistoryChangedEvent(this.isUndoStackEmpty, this.isRedoStackEmpty),
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
public undo(elements: SceneElementsMap, appState: AppState) {
|
public undo(elements: SceneElementsMap, appState: AppState) {
|
||||||
return this.perform(
|
return this.perform(
|
||||||
elements,
|
elements,
|
||||||
appState,
|
appState,
|
||||||
"undo",
|
|
||||||
() => History.pop(this.undoStack),
|
() => History.pop(this.undoStack),
|
||||||
(entry: HistoryDelta) => History.push(this.redoStack, entry),
|
(entry: HistoryDelta) => History.push(this.redoStack, entry),
|
||||||
);
|
);
|
||||||
@@ -176,7 +149,6 @@ export class History {
|
|||||||
return this.perform(
|
return this.perform(
|
||||||
elements,
|
elements,
|
||||||
appState,
|
appState,
|
||||||
"redo",
|
|
||||||
() => History.pop(this.redoStack),
|
() => History.pop(this.redoStack),
|
||||||
(entry: HistoryDelta) => History.push(this.undoStack, entry),
|
(entry: HistoryDelta) => History.push(this.undoStack, entry),
|
||||||
);
|
);
|
||||||
@@ -185,7 +157,6 @@ export class History {
|
|||||||
private perform(
|
private perform(
|
||||||
elements: SceneElementsMap,
|
elements: SceneElementsMap,
|
||||||
appState: AppState,
|
appState: AppState,
|
||||||
direction: HistoryPerformDirection,
|
|
||||||
pop: () => HistoryDelta | null,
|
pop: () => HistoryDelta | null,
|
||||||
push: (entry: HistoryDelta) => void,
|
push: (entry: HistoryDelta) => void,
|
||||||
): [SceneElementsMap, AppState] | void {
|
): [SceneElementsMap, AppState] | void {
|
||||||
@@ -206,15 +177,9 @@ export class History {
|
|||||||
|
|
||||||
// iterate through the history entries in case they result in no visible changes
|
// iterate through the history entries in case they result in no visible changes
|
||||||
while (historyDelta) {
|
while (historyDelta) {
|
||||||
// Roundtrip invariant: whichever delta we execute must be the one that
|
|
||||||
// continues through applyLatestChanges -> inverse -> opposite stack.
|
|
||||||
let entryToPush = historyDelta;
|
|
||||||
try {
|
try {
|
||||||
const effectiveDelta = this.resolveEffectiveDelta(historyDelta, {
|
|
||||||
direction,
|
|
||||||
});
|
|
||||||
[nextElements, nextAppState, containsVisibleChange] =
|
[nextElements, nextAppState, containsVisibleChange] =
|
||||||
effectiveDelta.applyTo(nextElements, nextAppState, prevSnapshot);
|
historyDelta.applyTo(nextElements, nextAppState, prevSnapshot);
|
||||||
|
|
||||||
const prevElements = prevSnapshot.elements;
|
const prevElements = prevSnapshot.elements;
|
||||||
const nextSnapshot = prevSnapshot.maybeClone(
|
const nextSnapshot = prevSnapshot.maybeClone(
|
||||||
@@ -225,7 +190,7 @@ export class History {
|
|||||||
|
|
||||||
const change = StoreChange.create(prevSnapshot, nextSnapshot);
|
const change = StoreChange.create(prevSnapshot, nextSnapshot);
|
||||||
const delta = HistoryDelta.applyLatestChanges(
|
const delta = HistoryDelta.applyLatestChanges(
|
||||||
effectiveDelta,
|
historyDelta,
|
||||||
prevElements,
|
prevElements,
|
||||||
nextElements,
|
nextElements,
|
||||||
);
|
);
|
||||||
@@ -238,12 +203,12 @@ export class History {
|
|||||||
delta,
|
delta,
|
||||||
});
|
});
|
||||||
|
|
||||||
entryToPush = delta;
|
historyDelta = delta;
|
||||||
}
|
}
|
||||||
|
|
||||||
prevSnapshot = nextSnapshot;
|
prevSnapshot = nextSnapshot;
|
||||||
} finally {
|
} finally {
|
||||||
push(entryToPush);
|
push(historyDelta);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (containsVisibleChange) {
|
if (containsVisibleChange) {
|
||||||
@@ -257,16 +222,12 @@ export class History {
|
|||||||
} finally {
|
} finally {
|
||||||
// trigger the history change event before returning completely
|
// trigger the history change event before returning completely
|
||||||
// also trigger it just once, no need doing so on each entry
|
// also trigger it just once, no need doing so on each entry
|
||||||
this.emitHistoryChanged();
|
this.onHistoryChangedEmitter.trigger(
|
||||||
|
new HistoryChangedEvent(this.isUndoStackEmpty, this.isRedoStackEmpty),
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
private emitHistoryChanged() {
|
|
||||||
this.onHistoryChangedEmitter.trigger(
|
|
||||||
new HistoryChangedEvent(this.isUndoStackEmpty, this.isRedoStackEmpty),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
private static pop(stack: HistoryDelta[]): HistoryDelta | null {
|
private static pop(stack: HistoryDelta[]): HistoryDelta | null {
|
||||||
if (!stack.length) {
|
if (!stack.length) {
|
||||||
return null;
|
return null;
|
||||||
@@ -285,15 +246,4 @@ export class History {
|
|||||||
const inversedEntry = HistoryDelta.inverse(entry);
|
const inversedEntry = HistoryDelta.inverse(entry);
|
||||||
return stack.push(inversedEntry);
|
return stack.push(inversedEntry);
|
||||||
}
|
}
|
||||||
|
|
||||||
private resolveEffectiveDelta(
|
|
||||||
delta: HistoryDelta,
|
|
||||||
context: HistoryEffectiveDeltaResolverContext,
|
|
||||||
): HistoryDelta {
|
|
||||||
if (!this.effectiveDeltaResolver) {
|
|
||||||
return delta;
|
|
||||||
}
|
|
||||||
|
|
||||||
return this.effectiveDeltaResolver(delta, context);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -185,9 +185,6 @@
|
|||||||
"shapeSwitch": "Switch shape",
|
"shapeSwitch": "Switch shape",
|
||||||
"preferences": "Preferences",
|
"preferences": "Preferences",
|
||||||
"preferences_toolLock": "Tool lock",
|
"preferences_toolLock": "Tool lock",
|
||||||
"boxSelectionMode": "Select on",
|
|
||||||
"boxSelectionContain": "Wrap",
|
|
||||||
"boxSelectionOverlap": "Overlap",
|
|
||||||
"arrowBinding": "Arrow binding",
|
"arrowBinding": "Arrow binding",
|
||||||
"midpointSnapping": "Snap to midpoints"
|
"midpointSnapping": "Snap to midpoints"
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -83,13 +83,13 @@
|
|||||||
"@codemirror/language": "^6.0.0",
|
"@codemirror/language": "^6.0.0",
|
||||||
"@codemirror/state": "^6.0.0",
|
"@codemirror/state": "^6.0.0",
|
||||||
"@codemirror/view": "^6.0.0",
|
"@codemirror/view": "^6.0.0",
|
||||||
|
"@lezer/highlight": "^1.0.0",
|
||||||
"@excalidraw/common": "0.18.0",
|
"@excalidraw/common": "0.18.0",
|
||||||
"@excalidraw/element": "0.18.0",
|
"@excalidraw/element": "0.18.0",
|
||||||
"@excalidraw/laser-pointer": "1.3.1",
|
"@excalidraw/laser-pointer": "1.3.1",
|
||||||
"@excalidraw/math": "0.18.0",
|
"@excalidraw/math": "0.18.0",
|
||||||
"@excalidraw/mermaid-to-excalidraw": "2.2.2",
|
"@excalidraw/mermaid-to-excalidraw": "2.2.2",
|
||||||
"@excalidraw/random-username": "1.1.0",
|
"@excalidraw/random-username": "1.1.0",
|
||||||
"@lezer/highlight": "^1.0.0",
|
|
||||||
"browser-fs-access": "0.38.0",
|
"browser-fs-access": "0.38.0",
|
||||||
"canvas-roundrect-polyfill": "0.0.1",
|
"canvas-roundrect-polyfill": "0.0.1",
|
||||||
"clsx": "1.1.1",
|
"clsx": "1.1.1",
|
||||||
|
|||||||
@@ -157,11 +157,7 @@ const prepareElementsForRender = ({
|
|||||||
let nextElements: readonly ExcalidrawElement[];
|
let nextElements: readonly ExcalidrawElement[];
|
||||||
|
|
||||||
if (exportingFrame) {
|
if (exportingFrame) {
|
||||||
nextElements = getElementsOverlappingFrame(
|
nextElements = getElementsOverlappingFrame(elements, exportingFrame);
|
||||||
elements,
|
|
||||||
exportingFrame,
|
|
||||||
arrayToMap(elements),
|
|
||||||
);
|
|
||||||
} else if (frameRendering.enabled && frameRendering.name) {
|
} else if (frameRendering.enabled && frameRendering.name) {
|
||||||
nextElements = addFrameLabelsAsTextElements(elements, {
|
nextElements = addFrameLabelsAsTextElements(elements, {
|
||||||
exportWithDarkMode,
|
exportWithDarkMode,
|
||||||
|
|||||||
@@ -13,7 +13,6 @@ exports[`contextMenu element > right-clicking on a group should select whole gro
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": {
|
"contextMenu": {
|
||||||
"items": [
|
"items": [
|
||||||
@@ -1087,7 +1086,6 @@ exports[`contextMenu element > selecting 'Add to library' in context menu adds e
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -1302,7 +1300,6 @@ exports[`contextMenu element > selecting 'Bring forward' in context menu brings
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -1634,7 +1631,6 @@ exports[`contextMenu element > selecting 'Bring to front' in context menu brings
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -1966,7 +1962,6 @@ exports[`contextMenu element > selecting 'Copy styles' in context menu copies st
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -2181,7 +2176,6 @@ exports[`contextMenu element > selecting 'Delete' in context menu deletes elemen
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -2423,7 +2417,6 @@ exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -2722,7 +2715,6 @@ exports[`contextMenu element > selecting 'Group selection' in context menu group
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -3095,7 +3087,6 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -3589,7 +3580,6 @@ exports[`contextMenu element > selecting 'Send backward' in context menu sends e
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -3913,7 +3903,6 @@ exports[`contextMenu element > selecting 'Send to back' in context menu sends el
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -4237,7 +4226,6 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -4370,7 +4358,7 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
|
|||||||
"type": "rectangle",
|
"type": "rectangle",
|
||||||
"updated": 1,
|
"updated": 1,
|
||||||
"version": 5,
|
"version": 5,
|
||||||
"versionNonce": 1006504105,
|
"versionNonce": 760410951,
|
||||||
"width": 20,
|
"width": 20,
|
||||||
"x": -10,
|
"x": -10,
|
||||||
"y": 0,
|
"y": 0,
|
||||||
@@ -4395,14 +4383,14 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
|
|||||||
"opacity": 100,
|
"opacity": 100,
|
||||||
"roughness": 1,
|
"roughness": 1,
|
||||||
"roundness": null,
|
"roundness": null,
|
||||||
"seed": 400692809,
|
"seed": 238820263,
|
||||||
"strokeColor": "#1e1e1e",
|
"strokeColor": "#1e1e1e",
|
||||||
"strokeStyle": "solid",
|
"strokeStyle": "solid",
|
||||||
"strokeWidth": 2,
|
"strokeWidth": 2,
|
||||||
"type": "rectangle",
|
"type": "rectangle",
|
||||||
"updated": 1,
|
"updated": 1,
|
||||||
"version": 5,
|
"version": 5,
|
||||||
"versionNonce": 289600103,
|
"versionNonce": 1006504105,
|
||||||
"width": 20,
|
"width": 20,
|
||||||
"x": 20,
|
"x": 20,
|
||||||
"y": 30,
|
"y": 30,
|
||||||
@@ -4649,7 +4637,6 @@ exports[`contextMenu element > shows 'Group selection' in context menu for multi
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": {
|
"contextMenu": {
|
||||||
"items": [
|
"items": [
|
||||||
@@ -5867,7 +5854,6 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": {
|
"contextMenu": {
|
||||||
"items": [
|
"items": [
|
||||||
@@ -6878,7 +6864,7 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro
|
|||||||
"type": "rectangle",
|
"type": "rectangle",
|
||||||
"updated": 1,
|
"updated": 1,
|
||||||
"version": 4,
|
"version": 4,
|
||||||
"versionNonce": 1723083209,
|
"versionNonce": 747212839,
|
||||||
"width": 10,
|
"width": 10,
|
||||||
"x": -10,
|
"x": -10,
|
||||||
"y": 0,
|
"y": 0,
|
||||||
@@ -6905,14 +6891,14 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro
|
|||||||
"opacity": 100,
|
"opacity": 100,
|
||||||
"roughness": 1,
|
"roughness": 1,
|
||||||
"roundness": null,
|
"roundness": null,
|
||||||
"seed": 400692809,
|
"seed": 238820263,
|
||||||
"strokeColor": "#1e1e1e",
|
"strokeColor": "#1e1e1e",
|
||||||
"strokeStyle": "solid",
|
"strokeStyle": "solid",
|
||||||
"strokeWidth": 2,
|
"strokeWidth": 2,
|
||||||
"type": "rectangle",
|
"type": "rectangle",
|
||||||
"updated": 1,
|
"updated": 1,
|
||||||
"version": 4,
|
"version": 4,
|
||||||
"versionNonce": 760410951,
|
"versionNonce": 1723083209,
|
||||||
"width": 10,
|
"width": 10,
|
||||||
"x": 12,
|
"x": 12,
|
||||||
"y": 0,
|
"y": 0,
|
||||||
@@ -7136,7 +7122,6 @@ exports[`contextMenu element > shows context menu for canvas > [end of test] app
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": {
|
"contextMenu": {
|
||||||
"items": [
|
"items": [
|
||||||
@@ -7826,7 +7811,6 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": {
|
"contextMenu": {
|
||||||
"items": [
|
"items": [
|
||||||
@@ -8818,7 +8802,6 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": {
|
"contextMenu": {
|
||||||
"items": [
|
"items": [
|
||||||
|
|||||||
@@ -13,7 +13,6 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -647,7 +646,6 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -1209,7 +1207,6 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -1570,7 +1567,6 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -1933,7 +1929,6 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -2197,7 +2192,6 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -2651,7 +2645,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -2955,7 +2948,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -3275,7 +3267,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -3570,7 +3561,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -3857,7 +3847,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -4093,7 +4082,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -4351,7 +4339,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -4623,7 +4610,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -4853,7 +4839,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -5083,7 +5068,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -5331,7 +5315,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -5588,7 +5571,6 @@ exports[`history > multiplayer undo/redo > conflicts in frames and their childre
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -5847,7 +5829,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -6177,7 +6158,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -6605,7 +6585,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -6980,7 +6959,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -7293,7 +7271,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -7586,7 +7563,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -7817,7 +7793,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -8170,7 +8145,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -8523,7 +8497,6 @@ exports[`history > multiplayer undo/redo > should not let remote changes to inte
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -8930,7 +8903,6 @@ exports[`history > multiplayer undo/redo > should not let remote changes to inte
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -9210,7 +9182,6 @@ exports[`history > multiplayer undo/redo > should not let remote changes to inte
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -9475,7 +9446,6 @@ exports[`history > multiplayer undo/redo > should not override remote changes on
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -9741,7 +9711,6 @@ exports[`history > multiplayer undo/redo > should not override remote changes on
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -9974,7 +9943,6 @@ exports[`history > multiplayer undo/redo > should override remotely added groups
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -10272,7 +10240,6 @@ exports[`history > multiplayer undo/redo > should override remotely added points
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -10590,7 +10557,6 @@ exports[`history > multiplayer undo/redo > should redistribute deltas when eleme
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -10827,7 +10793,6 @@ exports[`history > multiplayer undo/redo > should redraw arrows on undo > [end o
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -11753,7 +11718,6 @@ exports[`history > multiplayer undo/redo > should update history entries after r
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -12014,7 +11978,6 @@ exports[`history > singleplayer undo/redo > remounting undo/redo buttons should
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -12250,7 +12213,6 @@ exports[`history > singleplayer undo/redo > should clear the redo stack on eleme
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -12488,7 +12450,6 @@ exports[`history > singleplayer undo/redo > should create entry when selecting f
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -12880,7 +12841,6 @@ exports[`history > singleplayer undo/redo > should create new history entry on e
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -13091,7 +13051,6 @@ exports[`history > singleplayer undo/redo > should create new history entry on e
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -13299,7 +13258,6 @@ exports[`history > singleplayer undo/redo > should create new history entry on i
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -13601,7 +13559,6 @@ exports[`history > singleplayer undo/redo > should create new history entry on i
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -13900,7 +13857,6 @@ exports[`history > singleplayer undo/redo > should create new history entry on s
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -14146,7 +14102,6 @@ exports[`history > singleplayer undo/redo > should disable undo/redo buttons whe
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -14384,7 +14339,6 @@ exports[`history > singleplayer undo/redo > should end up with no history entry
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -14622,7 +14576,6 @@ exports[`history > singleplayer undo/redo > should iterate through the history w
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -14870,7 +14823,6 @@ exports[`history > singleplayer undo/redo > should not clear the redo stack on s
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -15202,7 +15154,6 @@ exports[`history > singleplayer undo/redo > should not collapse when applying co
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -15373,7 +15324,6 @@ exports[`history > singleplayer undo/redo > should not end up with history entry
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -15658,7 +15608,6 @@ exports[`history > singleplayer undo/redo > should not end up with history entry
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -15922,7 +15871,6 @@ exports[`history > singleplayer undo/redo > should not modify anything on unrela
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -16076,7 +16024,6 @@ exports[`history > singleplayer undo/redo > should not override appstate changes
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -16359,7 +16306,6 @@ exports[`history > singleplayer undo/redo > should support appstate name or view
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -16522,7 +16468,6 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -17271,7 +17216,6 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -17918,7 +17862,6 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -18565,7 +18508,6 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -19315,7 +19257,6 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -20084,7 +20025,6 @@ exports[`history > singleplayer undo/redo > should support changes in elements'
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -20565,7 +20505,6 @@ exports[`history > singleplayer undo/redo > should support duplication of groups
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -21077,7 +21016,6 @@ exports[`history > singleplayer undo/redo > should support element creation, del
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -21537,7 +21475,6 @@ exports[`history > singleplayer undo/redo > should support linear element creati
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
|
|||||||
@@ -13,7 +13,6 @@ exports[`given element A and group of elements B and given both are selected whe
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -440,7 +439,6 @@ exports[`given element A and group of elements B and given both are selected whe
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -857,7 +855,6 @@ exports[`regression tests > Cmd/Ctrl-click exclusively select element under poin
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -1424,7 +1421,6 @@ exports[`regression tests > Drags selected element when hitting only bounding bo
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -1632,7 +1628,6 @@ exports[`regression tests > adjusts z order when grouping > [end of test] appSta
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -2017,7 +2012,6 @@ exports[`regression tests > alt-drag duplicates an element > [end of test] appSt
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -2263,7 +2257,6 @@ exports[`regression tests > arrow keys > [end of test] appState 1`] = `
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -2444,7 +2437,6 @@ exports[`regression tests > can drag element that covers another element, while
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -2770,7 +2762,6 @@ exports[`regression tests > change the properties of a shape > [end of test] app
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -3026,7 +3017,6 @@ exports[`regression tests > click on an element and drag it > [dragged] appState
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -3268,7 +3258,6 @@ exports[`regression tests > click on an element and drag it > [end of test] appS
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -3505,7 +3494,6 @@ exports[`regression tests > click to select a shape > [end of test] appState 1`]
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -3764,7 +3752,6 @@ exports[`regression tests > click-drag to select a group > [end of test] appStat
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -4079,7 +4066,6 @@ exports[`regression tests > deleting last but one element in editing group shoul
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -4516,7 +4502,6 @@ exports[`regression tests > deselects group of selected elements on pointer down
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -4800,7 +4785,6 @@ exports[`regression tests > deselects group of selected elements on pointer up w
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -5077,7 +5061,6 @@ exports[`regression tests > deselects selected element on pointer down when poin
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -5286,7 +5269,6 @@ exports[`regression tests > deselects selected element, on pointer up, when clic
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -5487,7 +5469,6 @@ exports[`regression tests > double click to edit a group > [end of test] appStat
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -5881,7 +5862,6 @@ exports[`regression tests > drags selected elements from point inside common bou
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -6179,7 +6159,6 @@ exports[`regression tests > draw every type of shape > [end of test] appState 1`
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -6968,7 +6947,6 @@ exports[`regression tests > given a group of selected elements with an element t
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -7303,7 +7281,6 @@ exports[`regression tests > given a selected element A and a not selected elemen
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -7583,7 +7560,6 @@ exports[`regression tests > given selected element A with lower z-index than uns
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -7819,7 +7795,6 @@ exports[`regression tests > given selected element A with lower z-index than uns
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -8060,7 +8035,6 @@ exports[`regression tests > key 2 selects rectangle tool > [end of test] appStat
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -8241,7 +8215,6 @@ exports[`regression tests > key 3 selects diamond tool > [end of test] appState
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -8422,7 +8395,6 @@ exports[`regression tests > key 4 selects ellipse tool > [end of test] appState
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -8603,7 +8575,6 @@ exports[`regression tests > key 5 selects arrow tool > [end of test] appState 1`
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -8836,7 +8807,6 @@ exports[`regression tests > key 6 selects line tool > [end of test] appState 1`]
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -9067,7 +9037,6 @@ exports[`regression tests > key 7 selects freedraw tool > [end of test] appState
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -9260,7 +9229,6 @@ exports[`regression tests > key a selects arrow tool > [end of test] appState 1`
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -9493,7 +9461,6 @@ exports[`regression tests > key d selects diamond tool > [end of test] appState
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -9674,7 +9641,6 @@ exports[`regression tests > key l selects line tool > [end of test] appState 1`]
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -9905,7 +9871,6 @@ exports[`regression tests > key o selects ellipse tool > [end of test] appState
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -10086,7 +10051,6 @@ exports[`regression tests > key p selects freedraw tool > [end of test] appState
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -10279,7 +10243,6 @@ exports[`regression tests > key r selects rectangle tool > [end of test] appStat
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -10460,7 +10423,6 @@ exports[`regression tests > make a group and duplicate it > [end of test] appSta
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -10992,7 +10954,6 @@ exports[`regression tests > noop interaction after undo shouldn't create history
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -11273,7 +11234,6 @@ exports[`regression tests > pinch-to-zoom works > [end of test] appState 1`] = `
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -11397,7 +11357,6 @@ exports[`regression tests > shift click on selected element should deselect it o
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -11598,7 +11557,6 @@ exports[`regression tests > shift-click to multiselect, then drag > [end of test
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -11918,7 +11876,6 @@ exports[`regression tests > should group elements and ungroup them > [end of tes
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -12348,7 +12305,6 @@ exports[`regression tests > single-clicking on a subgroup of a selected group sh
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -12989,7 +12945,6 @@ exports[`regression tests > spacebar + drag scrolls the canvas > [end of test] a
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -13116,7 +13071,6 @@ exports[`regression tests > supports nested groups > [end of test] appState 1`]
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -13748,7 +13702,6 @@ exports[`regression tests > switches from group of selected elements to another
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -14088,7 +14041,6 @@ exports[`regression tests > switches selected element on pointer down > [end of
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -14353,7 +14305,6 @@ exports[`regression tests > two-finger scroll works > [end of test] appState 1`]
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -14477,7 +14428,6 @@ exports[`regression tests > undo/redo drawing an element > [end of test] appStat
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -14842,7 +14792,6 @@ exports[`regression tests > updates fontSize & fontFamily appState > [end of tes
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
@@ -14966,7 +14915,6 @@ exports[`regression tests > zoom hotkeys > [end of test] appState 1`] = `
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
|
|||||||
@@ -314,7 +314,7 @@ describe("history", () => {
|
|||||||
expect.objectContaining({ id: rect2.id, isDeleted: true }),
|
expect.objectContaining({ id: rect2.id, isDeleted: true }),
|
||||||
]);
|
]);
|
||||||
|
|
||||||
mouse.downAt(-10, -10);
|
mouse.downAt(0, 0);
|
||||||
mouse.moveTo(25, 25);
|
mouse.moveTo(25, 25);
|
||||||
mouse.moveTo(50, 50);
|
mouse.moveTo(50, 50);
|
||||||
mouse.upAt(50, 50);
|
mouse.upAt(50, 50);
|
||||||
|
|||||||
@@ -468,7 +468,7 @@ describe("regression tests", () => {
|
|||||||
mouse.reset();
|
mouse.reset();
|
||||||
mouse.down();
|
mouse.down();
|
||||||
mouse.move(-1000, -1000);
|
mouse.move(-1000, -1000);
|
||||||
mouse.restorePosition(end[0] + 3, end[1] + 3);
|
mouse.restorePosition(...end);
|
||||||
mouse.up();
|
mouse.up();
|
||||||
|
|
||||||
expect(h.elements.length).toBe(3);
|
expect(h.elements.length).toBe(3);
|
||||||
@@ -519,7 +519,7 @@ describe("regression tests", () => {
|
|||||||
mouse.reset();
|
mouse.reset();
|
||||||
mouse.down();
|
mouse.down();
|
||||||
mouse.move(-1000, -1000);
|
mouse.move(-1000, -1000);
|
||||||
mouse.restorePosition(end[0] + 3, end[1] + 3);
|
mouse.restorePosition(...end);
|
||||||
mouse.up();
|
mouse.up();
|
||||||
|
|
||||||
for (const element of h.elements) {
|
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.moveTo(-10, -10); // the NW resizing handle is at [0, 0], so moving further
|
||||||
mouse.down();
|
mouse.down();
|
||||||
mouse.move(-1000, -1000);
|
mouse.move(-1000, -1000);
|
||||||
mouse.restorePosition(end[0] + 3, end[1] + 3);
|
mouse.restorePosition(...end);
|
||||||
mouse.up();
|
mouse.up();
|
||||||
|
|
||||||
Keyboard.withModifierKeys({ ctrl: true, shift: true }, () => {
|
Keyboard.withModifierKeys({ ctrl: true, shift: true }, () => {
|
||||||
|
|||||||
@@ -1,9 +1,7 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
import { vi } from "vitest";
|
import { vi } from "vitest";
|
||||||
|
|
||||||
import { KEYS, ROUNDNESS, reseed } from "@excalidraw/common";
|
import { KEYS, reseed } from "@excalidraw/common";
|
||||||
import { getElementBounds, getElementLineSegments } from "@excalidraw/element";
|
|
||||||
import { pointFrom, pointRotateRads, type LocalPoint } from "@excalidraw/math";
|
|
||||||
|
|
||||||
import { SHAPES } from "../components/shapes";
|
import { SHAPES } from "../components/shapes";
|
||||||
|
|
||||||
@@ -14,7 +12,6 @@ import * as StaticScene from "../renderer/staticScene";
|
|||||||
import { API } from "./helpers/api";
|
import { API } from "./helpers/api";
|
||||||
import { Keyboard, Pointer, UI } from "./helpers/ui";
|
import { Keyboard, Pointer, UI } from "./helpers/ui";
|
||||||
import {
|
import {
|
||||||
act,
|
|
||||||
render,
|
render,
|
||||||
fireEvent,
|
fireEvent,
|
||||||
mockBoundingClientRect,
|
mockBoundingClientRect,
|
||||||
@@ -42,19 +39,6 @@ const { h } = window;
|
|||||||
|
|
||||||
const mouse = new Pointer("mouse");
|
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", () => {
|
describe("box-selection", () => {
|
||||||
beforeEach(async () => {
|
beforeEach(async () => {
|
||||||
await render(<Excalidraw />);
|
await render(<Excalidraw />);
|
||||||
@@ -124,497 +108,6 @@ describe("box-selection", () => {
|
|||||||
|
|
||||||
assertSelectedElements([]);
|
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", () => {
|
describe("inner box-selection", () => {
|
||||||
|
|||||||
@@ -449,28 +449,29 @@ const stripProps = (
|
|||||||
}, {} as Record<string, any>);
|
}, {} as Record<string, any>);
|
||||||
|
|
||||||
export const checkpointHistory = (history: History, name: string) => {
|
export const checkpointHistory = (history: History, name: string) => {
|
||||||
const normalizeHistoryEntry = (entry: History["undoStack"][number]) => {
|
expect(
|
||||||
const { markers, ...rest } = entry;
|
history.undoStack.map((x) => ({
|
||||||
|
...x,
|
||||||
return {
|
|
||||||
...rest,
|
|
||||||
...(markers ? { markers } : {}),
|
|
||||||
elements: {
|
elements: {
|
||||||
...entry.elements,
|
...x.elements,
|
||||||
added: stripProps(entry.elements.added, ["seed", "versionNonce"]),
|
added: stripProps(x.elements.added, ["seed", "versionNonce"]),
|
||||||
removed: stripProps(entry.elements.removed, ["seed", "versionNonce"]),
|
removed: stripProps(x.elements.removed, ["seed", "versionNonce"]),
|
||||||
updated: stripProps(entry.elements.updated, ["seed", "versionNonce"]),
|
updated: stripProps(x.elements.updated, ["seed", "versionNonce"]),
|
||||||
},
|
},
|
||||||
};
|
})),
|
||||||
};
|
).toMatchSnapshot(`[${name}] undo stack`);
|
||||||
|
|
||||||
expect(history.undoStack.map(normalizeHistoryEntry)).toMatchSnapshot(
|
expect(
|
||||||
`[${name}] undo stack`,
|
history.redoStack.map((x) => ({
|
||||||
);
|
...x,
|
||||||
|
elements: {
|
||||||
expect(history.redoStack.map(normalizeHistoryEntry)).toMatchSnapshot(
|
...x.elements,
|
||||||
`[${name}] redo stack`,
|
added: stripProps(x.elements.added, ["seed", "versionNonce"]),
|
||||||
);
|
removed: stripProps(x.elements.removed, ["seed", "versionNonce"]),
|
||||||
|
updated: stripProps(x.elements.updated, ["seed", "versionNonce"]),
|
||||||
|
},
|
||||||
|
})),
|
||||||
|
).toMatchSnapshot(`[${name}] redo stack`);
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@@ -1,289 +0,0 @@
|
|||||||
import { type StoreDelta } from "@excalidraw/element";
|
|
||||||
|
|
||||||
import type { Delta } from "@excalidraw/element";
|
|
||||||
|
|
||||||
import type { Mutable } from "@excalidraw/common/utility-types";
|
|
||||||
import type {
|
|
||||||
ExcalidrawElement,
|
|
||||||
OrderedExcalidrawElement,
|
|
||||||
SceneElementsMap,
|
|
||||||
} from "@excalidraw/element/types";
|
|
||||||
|
|
||||||
import type {
|
|
||||||
ElementChange,
|
|
||||||
ElementPropName,
|
|
||||||
TouchedElementProps,
|
|
||||||
} from "./types";
|
|
||||||
|
|
||||||
const LEDGER_IGNORED_PROPS = new Set([
|
|
||||||
"version",
|
|
||||||
"versionNonce",
|
|
||||||
"seed",
|
|
||||||
"updated",
|
|
||||||
"index",
|
|
||||||
]);
|
|
||||||
|
|
||||||
export const TX_UNDO_OVERRIDE_IGNORED_PROPS = new Set([
|
|
||||||
"version",
|
|
||||||
"versionNonce",
|
|
||||||
"isDeleted",
|
|
||||||
]);
|
|
||||||
|
|
||||||
type ElementRecord = Record<string, unknown>;
|
|
||||||
export type ElementUpdatedProps = Omit<
|
|
||||||
Partial<OrderedExcalidrawElement>,
|
|
||||||
"id" | "updated" | "seed"
|
|
||||||
>;
|
|
||||||
export type ElementUpdatedPropName = Extract<keyof ElementUpdatedProps, string>;
|
|
||||||
type ElementPropValueMap = ElementUpdatedProps;
|
|
||||||
|
|
||||||
export type ElementUpdatedEntry = Delta<ElementPropValueMap>;
|
|
||||||
export type ElementUpdatedEntryMap = Record<string, ElementUpdatedEntry>;
|
|
||||||
|
|
||||||
const isPlainObject = (value: unknown): value is Record<string, unknown> =>
|
|
||||||
!!value && typeof value === "object" && !Array.isArray(value);
|
|
||||||
|
|
||||||
export const getElementProp = <TProp extends ElementPropName>(
|
|
||||||
element: ExcalidrawElement,
|
|
||||||
prop: TProp,
|
|
||||||
): ExcalidrawElement[TProp] =>
|
|
||||||
(element as ElementRecord)[prop] as ExcalidrawElement[TProp];
|
|
||||||
|
|
||||||
export const setOrderedElementProp = <TProp extends ElementPropName>(
|
|
||||||
element: Mutable<OrderedExcalidrawElement>,
|
|
||||||
prop: TProp,
|
|
||||||
value: OrderedExcalidrawElement[TProp],
|
|
||||||
) => {
|
|
||||||
(element as ElementRecord)[prop] = value;
|
|
||||||
};
|
|
||||||
|
|
||||||
/** Deep equality used by ledger conflict/touched-prop detection. */
|
|
||||||
export const isLedgerValueEqual = (left: unknown, right: unknown): boolean => {
|
|
||||||
if (Object.is(left, right)) {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (Array.isArray(left) && Array.isArray(right)) {
|
|
||||||
if (left.length !== right.length) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
for (let index = 0; index < left.length; index += 1) {
|
|
||||||
if (!isLedgerValueEqual(left[index], right[index])) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (isPlainObject(left) && isPlainObject(right)) {
|
|
||||||
const leftKeys = Object.keys(left);
|
|
||||||
const rightKeys = Object.keys(right);
|
|
||||||
if (leftKeys.length !== rightKeys.length) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
for (const key of leftKeys) {
|
|
||||||
if (!Object.prototype.hasOwnProperty.call(right, key)) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
if (!isLedgerValueEqual(left[key], right[key])) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
return false;
|
|
||||||
};
|
|
||||||
|
|
||||||
/** Shallow-copies a scene map. Entries share references with the original. */
|
|
||||||
export const shallowCopySceneElements = (
|
|
||||||
elements: ReadonlyMap<string, ExcalidrawElement>,
|
|
||||||
): SceneElementsMap => new Map(elements) as SceneElementsMap;
|
|
||||||
|
|
||||||
export const createAllTouchedElementProps = (): TouchedElementProps => ({
|
|
||||||
kind: "all",
|
|
||||||
});
|
|
||||||
|
|
||||||
export const createPartialTouchedElementProps = (
|
|
||||||
props: Iterable<ElementPropName> = [],
|
|
||||||
): TouchedElementProps => ({
|
|
||||||
kind: "partial",
|
|
||||||
props: new Set(props),
|
|
||||||
});
|
|
||||||
|
|
||||||
export const hasTouchedProps = (touchedProps: TouchedElementProps): boolean =>
|
|
||||||
touchedProps.kind === "all" || touchedProps.props.size > 0;
|
|
||||||
|
|
||||||
export const touchesWholeElement = (
|
|
||||||
touchedProps: TouchedElementProps,
|
|
||||||
): boolean => touchedProps.kind === "all";
|
|
||||||
|
|
||||||
export const isPartialTouchedProps = (
|
|
||||||
touchedProps: TouchedElementProps,
|
|
||||||
): touchedProps is Extract<TouchedElementProps, { kind: "partial" }> =>
|
|
||||||
touchedProps.kind === "partial";
|
|
||||||
|
|
||||||
export const hasTouchedProp = (
|
|
||||||
touchedProps: TouchedElementProps,
|
|
||||||
prop: ElementPropName,
|
|
||||||
): boolean => touchedProps.kind === "all" || touchedProps.props.has(prop);
|
|
||||||
|
|
||||||
export const mergeTouchedProps = (
|
|
||||||
left: TouchedElementProps,
|
|
||||||
right: TouchedElementProps,
|
|
||||||
): TouchedElementProps => {
|
|
||||||
if (left.kind === "all" || right.kind === "all") {
|
|
||||||
return createAllTouchedElementProps();
|
|
||||||
}
|
|
||||||
|
|
||||||
return createPartialTouchedElementProps([...left.props, ...right.props]);
|
|
||||||
};
|
|
||||||
|
|
||||||
/** Returns changed property names between two element snapshots. */
|
|
||||||
export const collectTouchedProps = (
|
|
||||||
before: ExcalidrawElement | null,
|
|
||||||
after: ExcalidrawElement | null,
|
|
||||||
): TouchedElementProps => {
|
|
||||||
if (!before || !after) {
|
|
||||||
return createAllTouchedElementProps();
|
|
||||||
}
|
|
||||||
|
|
||||||
const touchedProps = new Set<ElementPropName>();
|
|
||||||
const keys = new Set<ElementPropName>([
|
|
||||||
...(Object.keys(before) as ElementPropName[]),
|
|
||||||
...(Object.keys(after) as ElementPropName[]),
|
|
||||||
]);
|
|
||||||
|
|
||||||
for (const key of keys) {
|
|
||||||
if (LEDGER_IGNORED_PROPS.has(key)) {
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
if (
|
|
||||||
!isLedgerValueEqual(
|
|
||||||
getElementProp(before, key),
|
|
||||||
getElementProp(after, key),
|
|
||||||
)
|
|
||||||
) {
|
|
||||||
touchedProps.add(key);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return createPartialTouchedElementProps(touchedProps);
|
|
||||||
};
|
|
||||||
|
|
||||||
/** Returns ids whose element snapshot changed between two points in time. */
|
|
||||||
export const collectChangedElementIds = (
|
|
||||||
before: ReadonlyMap<string, ExcalidrawElement>,
|
|
||||||
after: ReadonlyMap<string, ExcalidrawElement>,
|
|
||||||
) => collectElementChanges(before, after).map((change) => change.id);
|
|
||||||
|
|
||||||
export const collectElementChanges = (
|
|
||||||
before: ReadonlyMap<string, ExcalidrawElement>,
|
|
||||||
after: ReadonlyMap<string, ExcalidrawElement>,
|
|
||||||
): ElementChange[] => {
|
|
||||||
const changes: ElementChange[] = [];
|
|
||||||
const candidateIds = new Set<string>([...before.keys(), ...after.keys()]);
|
|
||||||
|
|
||||||
for (const id of candidateIds) {
|
|
||||||
const beforeElement = before.get(id) ?? null;
|
|
||||||
const afterElement = after.get(id) ?? null;
|
|
||||||
const touchedProps = collectTouchedProps(beforeElement, afterElement);
|
|
||||||
if (!hasTouchedProps(touchedProps)) {
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
changes.push({
|
|
||||||
id,
|
|
||||||
before: beforeElement,
|
|
||||||
after: afterElement,
|
|
||||||
touchedProps,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
return changes;
|
|
||||||
};
|
|
||||||
|
|
||||||
export const serializeConsumedPropKey = (
|
|
||||||
elementId: string,
|
|
||||||
prop: ElementPropName,
|
|
||||||
) => `${elementId}\u0000${prop}`;
|
|
||||||
|
|
||||||
export const getUpdatedElementEntries = (delta: StoreDelta) =>
|
|
||||||
delta.elements.updated as ElementUpdatedEntryMap;
|
|
||||||
|
|
||||||
export const getElementPropEntries = (props: ElementPropValueMap) =>
|
|
||||||
Object.entries(props) as [
|
|
||||||
ElementUpdatedPropName,
|
|
||||||
ElementUpdatedProps[ElementUpdatedPropName],
|
|
||||||
][];
|
|
||||||
|
|
||||||
export const hasUpdatedElementEntries = (delta: StoreDelta) =>
|
|
||||||
Object.keys(getUpdatedElementEntries(delta)).length > 0;
|
|
||||||
|
|
||||||
export const serializeIntermediateValue = (value: unknown): string => {
|
|
||||||
const serialize = (input: unknown, seen: WeakSet<object>): string => {
|
|
||||||
if (input === null) {
|
|
||||||
return "null";
|
|
||||||
}
|
|
||||||
|
|
||||||
switch (typeof input) {
|
|
||||||
case "undefined":
|
|
||||||
return "undefined";
|
|
||||||
case "boolean":
|
|
||||||
return input ? "boolean:true" : "boolean:false";
|
|
||||||
case "number":
|
|
||||||
if (Number.isNaN(input)) {
|
|
||||||
return "number:NaN";
|
|
||||||
}
|
|
||||||
if (Object.is(input, -0)) {
|
|
||||||
return "number:-0";
|
|
||||||
}
|
|
||||||
return `number:${input}`;
|
|
||||||
case "bigint":
|
|
||||||
return `bigint:${input.toString()}`;
|
|
||||||
case "string":
|
|
||||||
return `string:${JSON.stringify(input)}`;
|
|
||||||
case "symbol":
|
|
||||||
return `symbol:${String(input)}`;
|
|
||||||
case "function":
|
|
||||||
return `function:${input.name}`;
|
|
||||||
case "object":
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
return `unknown:${String(input)}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (Array.isArray(input)) {
|
|
||||||
if (seen.has(input)) {
|
|
||||||
return "[CircularArray]";
|
|
||||||
}
|
|
||||||
seen.add(input);
|
|
||||||
const serialized = `[${input
|
|
||||||
.map((item) => serialize(item, seen))
|
|
||||||
.join(",")}]`;
|
|
||||||
seen.delete(input);
|
|
||||||
return serialized;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (isPlainObject(input)) {
|
|
||||||
if (seen.has(input)) {
|
|
||||||
return "{CircularObject}";
|
|
||||||
}
|
|
||||||
seen.add(input);
|
|
||||||
const serialized = `{${Object.keys(input)
|
|
||||||
.sort()
|
|
||||||
.map((key) => `${JSON.stringify(key)}:${serialize(input[key], seen)}`)
|
|
||||||
.join(",")}}`;
|
|
||||||
seen.delete(input);
|
|
||||||
return serialized;
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
return `object:${JSON.stringify(input)}`;
|
|
||||||
} catch {
|
|
||||||
return `object:${Object.prototype.toString.call(input)}`;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return serialize(value, new WeakSet<object>());
|
|
||||||
};
|
|
||||||
@@ -1,13 +0,0 @@
|
|||||||
export { collectChangedElementIds } from "./diff";
|
|
||||||
export { TransactionLedger } from "./ledger";
|
|
||||||
export { Transaction } from "./transaction";
|
|
||||||
export { TransactionManager } from "./manager";
|
|
||||||
|
|
||||||
export type {
|
|
||||||
AppStateResolver,
|
|
||||||
AppStateResolverContext,
|
|
||||||
TransactionElementUpdate,
|
|
||||||
TransactionLedgerEntry,
|
|
||||||
TransactionStatus,
|
|
||||||
TransactionSummary,
|
|
||||||
} from "./types";
|
|
||||||
@@ -1,333 +0,0 @@
|
|||||||
import { deepCopyElement } from "@excalidraw/element";
|
|
||||||
|
|
||||||
import type { Mutable } from "@excalidraw/common/utility-types";
|
|
||||||
import type {
|
|
||||||
ExcalidrawElement,
|
|
||||||
OrderedExcalidrawElement,
|
|
||||||
SceneElementsMap,
|
|
||||||
} from "@excalidraw/element/types";
|
|
||||||
|
|
||||||
import {
|
|
||||||
collectElementChanges,
|
|
||||||
collectTouchedProps,
|
|
||||||
getElementProp,
|
|
||||||
hasTouchedProps,
|
|
||||||
isLedgerValueEqual,
|
|
||||||
mergeTouchedProps,
|
|
||||||
setOrderedElementProp,
|
|
||||||
shallowCopySceneElements,
|
|
||||||
touchesWholeElement,
|
|
||||||
} from "./diff";
|
|
||||||
|
|
||||||
import type { TransactionLedgerEntry } from "./types";
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Keeps transaction-level scene mutations and materializes synthetic snapshots
|
|
||||||
* for a single durable history commit.
|
|
||||||
*/
|
|
||||||
export class TransactionLedger {
|
|
||||||
private readonly entries = new Map<string, TransactionLedgerEntry>();
|
|
||||||
|
|
||||||
/** Whether the transaction has any net element mutations. */
|
|
||||||
hasEntries() {
|
|
||||||
return this.entries.size > 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Returns the ledger entry for an element, if any. */
|
|
||||||
getEntry(elementId: string): TransactionLedgerEntry | undefined {
|
|
||||||
return this.entries.get(elementId);
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Releases all ledger entries. */
|
|
||||||
clear() {
|
|
||||||
this.entries.clear();
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Records one element mutation step into the ledger. */
|
|
||||||
recordStep(
|
|
||||||
before: ReadonlyMap<string, ExcalidrawElement>,
|
|
||||||
after: ReadonlyMap<string, ExcalidrawElement>,
|
|
||||||
) {
|
|
||||||
for (const change of collectElementChanges(before, after)) {
|
|
||||||
const {
|
|
||||||
id: elementId,
|
|
||||||
before: beforeElement,
|
|
||||||
after: afterElement,
|
|
||||||
touchedProps,
|
|
||||||
} = change;
|
|
||||||
|
|
||||||
const existing = this.entries.get(elementId);
|
|
||||||
if (!existing) {
|
|
||||||
this.entries.set(elementId, {
|
|
||||||
baselineElement: beforeElement
|
|
||||||
? deepCopyElement(beforeElement)
|
|
||||||
: null,
|
|
||||||
targetElement: afterElement ? deepCopyElement(afterElement) : null,
|
|
||||||
touchedProps,
|
|
||||||
});
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
existing.targetElement = afterElement
|
|
||||||
? deepCopyElement(afterElement)
|
|
||||||
: null;
|
|
||||||
existing.touchedProps = mergeTouchedProps(
|
|
||||||
existing.touchedProps,
|
|
||||||
touchedProps,
|
|
||||||
);
|
|
||||||
|
|
||||||
// Created then deleted inside one transaction leaves no durable footprint.
|
|
||||||
if (!existing.baselineElement && !existing.targetElement) {
|
|
||||||
this.entries.delete(elementId);
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
if (!existing.baselineElement && existing.targetElement?.isDeleted) {
|
|
||||||
this.entries.delete(elementId);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Builds synthetic element before/after snapshots with a fixed
|
|
||||||
* "live-wins-per-prop" strategy.
|
|
||||||
*/
|
|
||||||
buildSyntheticSnapshots(live: ReadonlyMap<string, ExcalidrawElement>) {
|
|
||||||
// Shallow copy — untouched elements stay as live references.
|
|
||||||
// Only elements mutated in-place (prop-level updates) are deep-copied below.
|
|
||||||
const elementsBefore = shallowCopySceneElements(live);
|
|
||||||
const elementsAfter = shallowCopySceneElements(live);
|
|
||||||
|
|
||||||
for (const [elementId, entry] of this.entries) {
|
|
||||||
this.reconcileEntrySnapshots(
|
|
||||||
elementId,
|
|
||||||
entry,
|
|
||||||
live,
|
|
||||||
elementsBefore,
|
|
||||||
elementsAfter,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return { elementsBefore, elementsAfter };
|
|
||||||
}
|
|
||||||
|
|
||||||
private reconcileEntrySnapshots(
|
|
||||||
elementId: string,
|
|
||||||
entry: TransactionLedgerEntry,
|
|
||||||
live: ReadonlyMap<string, ExcalidrawElement>,
|
|
||||||
elementsBefore: SceneElementsMap,
|
|
||||||
elementsAfter: SceneElementsMap,
|
|
||||||
) {
|
|
||||||
if (!entry.baselineElement) {
|
|
||||||
this.applyCreatedElementSnapshots(
|
|
||||||
elementId,
|
|
||||||
entry.targetElement,
|
|
||||||
live,
|
|
||||||
elementsBefore,
|
|
||||||
elementsAfter,
|
|
||||||
);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!entry.targetElement) {
|
|
||||||
this.applyDeletedElementSnapshots(
|
|
||||||
elementId,
|
|
||||||
entry.baselineElement,
|
|
||||||
live,
|
|
||||||
elementsBefore,
|
|
||||||
elementsAfter,
|
|
||||||
);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.applyUpdatedElementSnapshots(
|
|
||||||
elementId,
|
|
||||||
entry,
|
|
||||||
live,
|
|
||||||
elementsBefore,
|
|
||||||
elementsAfter,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
private applyCreatedElementSnapshots(
|
|
||||||
elementId: string,
|
|
||||||
targetElement: ExcalidrawElement | null,
|
|
||||||
live: ReadonlyMap<string, ExcalidrawElement>,
|
|
||||||
elementsBefore: SceneElementsMap,
|
|
||||||
elementsAfter: SceneElementsMap,
|
|
||||||
) {
|
|
||||||
if (!targetElement) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const liveElement = live.get(elementId) ?? null;
|
|
||||||
if (
|
|
||||||
!liveElement ||
|
|
||||||
liveElement.isDeleted ||
|
|
||||||
hasTouchedProps(collectTouchedProps(targetElement, liveElement))
|
|
||||||
) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
elementsBefore.delete(elementId);
|
|
||||||
elementsAfter.set(
|
|
||||||
elementId,
|
|
||||||
deepCopyElement(targetElement) as OrderedExcalidrawElement,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
private applyDeletedElementSnapshots(
|
|
||||||
elementId: string,
|
|
||||||
baselineElement: ExcalidrawElement,
|
|
||||||
live: ReadonlyMap<string, ExcalidrawElement>,
|
|
||||||
elementsBefore: SceneElementsMap,
|
|
||||||
elementsAfter: SceneElementsMap,
|
|
||||||
) {
|
|
||||||
const liveElement = live.get(elementId) ?? null;
|
|
||||||
if (liveElement && !liveElement.isDeleted) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
elementsBefore.set(
|
|
||||||
elementId,
|
|
||||||
deepCopyElement(baselineElement) as OrderedExcalidrawElement,
|
|
||||||
);
|
|
||||||
elementsAfter.delete(elementId);
|
|
||||||
}
|
|
||||||
|
|
||||||
private applyUpdatedElementSnapshots(
|
|
||||||
elementId: string,
|
|
||||||
entry: TransactionLedgerEntry,
|
|
||||||
live: ReadonlyMap<string, ExcalidrawElement>,
|
|
||||||
elementsBefore: SceneElementsMap,
|
|
||||||
elementsAfter: SceneElementsMap,
|
|
||||||
) {
|
|
||||||
const liveElement = live.get(elementId) ?? null;
|
|
||||||
const targetElement = entry.targetElement;
|
|
||||||
const baselineElement = entry.baselineElement;
|
|
||||||
const beforeElement = elementsBefore.get(elementId);
|
|
||||||
const afterElement = elementsAfter.get(elementId);
|
|
||||||
|
|
||||||
if (
|
|
||||||
!liveElement ||
|
|
||||||
!baselineElement ||
|
|
||||||
!targetElement ||
|
|
||||||
!beforeElement ||
|
|
||||||
!afterElement
|
|
||||||
) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (touchesWholeElement(entry.touchedProps)) {
|
|
||||||
this.applyWholeElementSnapshots(
|
|
||||||
elementId,
|
|
||||||
baselineElement,
|
|
||||||
targetElement,
|
|
||||||
liveElement,
|
|
||||||
elementsBefore,
|
|
||||||
elementsAfter,
|
|
||||||
);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.applyPerPropSnapshots({
|
|
||||||
entry,
|
|
||||||
liveElement,
|
|
||||||
baselineElement,
|
|
||||||
targetElement,
|
|
||||||
beforeElement,
|
|
||||||
afterElement,
|
|
||||||
elementId,
|
|
||||||
elementsBefore,
|
|
||||||
elementsAfter,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
private applyWholeElementSnapshots(
|
|
||||||
elementId: string,
|
|
||||||
baselineElement: ExcalidrawElement,
|
|
||||||
targetElement: ExcalidrawElement,
|
|
||||||
liveElement: ExcalidrawElement,
|
|
||||||
elementsBefore: SceneElementsMap,
|
|
||||||
elementsAfter: SceneElementsMap,
|
|
||||||
) {
|
|
||||||
const hasLiveConflict = hasTouchedProps(
|
|
||||||
collectTouchedProps(targetElement, liveElement),
|
|
||||||
);
|
|
||||||
if (hasLiveConflict) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
elementsBefore.set(
|
|
||||||
elementId,
|
|
||||||
deepCopyElement(baselineElement) as OrderedExcalidrawElement,
|
|
||||||
);
|
|
||||||
elementsAfter.set(
|
|
||||||
elementId,
|
|
||||||
deepCopyElement(targetElement) as OrderedExcalidrawElement,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
private applyPerPropSnapshots(args: {
|
|
||||||
entry: TransactionLedgerEntry;
|
|
||||||
liveElement: ExcalidrawElement;
|
|
||||||
baselineElement: ExcalidrawElement;
|
|
||||||
targetElement: ExcalidrawElement;
|
|
||||||
beforeElement: ExcalidrawElement;
|
|
||||||
afterElement: ExcalidrawElement;
|
|
||||||
elementId: string;
|
|
||||||
elementsBefore: SceneElementsMap;
|
|
||||||
elementsAfter: SceneElementsMap;
|
|
||||||
}) {
|
|
||||||
const {
|
|
||||||
entry,
|
|
||||||
liveElement,
|
|
||||||
baselineElement,
|
|
||||||
targetElement,
|
|
||||||
beforeElement,
|
|
||||||
afterElement,
|
|
||||||
elementId,
|
|
||||||
elementsBefore,
|
|
||||||
elementsAfter,
|
|
||||||
} = args;
|
|
||||||
|
|
||||||
// Deep-copy before mutating so we never touch live elements.
|
|
||||||
const mutableBefore = deepCopyElement(
|
|
||||||
beforeElement,
|
|
||||||
) as Mutable<OrderedExcalidrawElement>;
|
|
||||||
const mutableAfter = deepCopyElement(
|
|
||||||
afterElement,
|
|
||||||
) as Mutable<OrderedExcalidrawElement>;
|
|
||||||
elementsBefore.set(elementId, mutableBefore as OrderedExcalidrawElement);
|
|
||||||
elementsAfter.set(elementId, mutableAfter as OrderedExcalidrawElement);
|
|
||||||
|
|
||||||
if (entry.touchedProps.kind !== "partial") {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
let appliedProps = 0;
|
|
||||||
for (const prop of entry.touchedProps.props) {
|
|
||||||
const liveValue = getElementProp(liveElement, prop);
|
|
||||||
const targetValue = getElementProp(targetElement, prop);
|
|
||||||
if (!isLedgerValueEqual(liveValue, targetValue)) {
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
setOrderedElementProp(
|
|
||||||
mutableBefore,
|
|
||||||
prop,
|
|
||||||
getElementProp(baselineElement, prop),
|
|
||||||
);
|
|
||||||
setOrderedElementProp(mutableAfter, prop, targetValue);
|
|
||||||
appliedProps += 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (appliedProps === 0) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
mutableBefore.version = baselineElement.version;
|
|
||||||
mutableBefore.versionNonce = baselineElement.versionNonce;
|
|
||||||
mutableAfter.version = targetElement.version;
|
|
||||||
mutableAfter.versionNonce = targetElement.versionNonce;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,291 +0,0 @@
|
|||||||
import {
|
|
||||||
Delta,
|
|
||||||
ElementsDelta,
|
|
||||||
mergeStoreDeltaMarkers,
|
|
||||||
type StoreDelta,
|
|
||||||
type TxUndoOverride,
|
|
||||||
} from "@excalidraw/element";
|
|
||||||
|
|
||||||
import type { Mutable } from "@excalidraw/common/utility-types";
|
|
||||||
|
|
||||||
import {
|
|
||||||
HistoryDelta,
|
|
||||||
type HistoryBeforeRecordListener,
|
|
||||||
type HistoryEffectiveDeltaResolverContext,
|
|
||||||
} from "../history";
|
|
||||||
|
|
||||||
import {
|
|
||||||
type ElementUpdatedPropName,
|
|
||||||
getUpdatedElementEntries,
|
|
||||||
hasUpdatedElementEntries,
|
|
||||||
isLedgerValueEqual,
|
|
||||||
type ElementUpdatedProps,
|
|
||||||
type ElementUpdatedEntryMap,
|
|
||||||
} from "./diff";
|
|
||||||
import { Transaction } from "./transaction";
|
|
||||||
|
|
||||||
import type { AppClassProperties } from "../types";
|
|
||||||
import type { TransactionStatus } from "./types";
|
|
||||||
|
|
||||||
type TransactionRecord = {
|
|
||||||
tx: Transaction | null;
|
|
||||||
phase: TransactionStatus;
|
|
||||||
};
|
|
||||||
type TransactionHistoryBridge = {
|
|
||||||
onBeforeRecord: (callback: HistoryBeforeRecordListener) => () => void;
|
|
||||||
setEffectiveDeltaResolver: (
|
|
||||||
resolver:
|
|
||||||
| ((
|
|
||||||
delta: HistoryDelta,
|
|
||||||
context: HistoryEffectiveDeltaResolverContext,
|
|
||||||
) => HistoryDelta)
|
|
||||||
| null,
|
|
||||||
) => void;
|
|
||||||
};
|
|
||||||
|
|
||||||
type MutableElementUpdatedProps = Mutable<ElementUpdatedProps>;
|
|
||||||
|
|
||||||
const setElementUpdatedOverride = (
|
|
||||||
overrides: MutableElementUpdatedProps,
|
|
||||||
prop: ElementUpdatedPropName,
|
|
||||||
value: unknown,
|
|
||||||
) => {
|
|
||||||
(overrides as Record<ElementUpdatedPropName, unknown>)[prop] = value;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Thin factory that holds the app reference and creates Transaction instances.
|
|
||||||
*/
|
|
||||||
export class TransactionManager {
|
|
||||||
private readonly app: AppClassProperties;
|
|
||||||
/**
|
|
||||||
* Single authoritative lifecycle registry for transactions.
|
|
||||||
*
|
|
||||||
* We retain ended/canceled metadata after the tx object is released because
|
|
||||||
* history markers only persist `txId`; undo/redo still needs to resolve
|
|
||||||
* whether a tx was active or already ended when applying effective deltas.
|
|
||||||
*/
|
|
||||||
private readonly transactionRecords = new Map<string, TransactionRecord>();
|
|
||||||
/**
|
|
||||||
* Active transaction ids ordered by most-recent registration first.
|
|
||||||
* This preserves deterministic priority when multiple active txs overlap on
|
|
||||||
* the same element+prop and compete to reserve override markers.
|
|
||||||
*/
|
|
||||||
private readonly activeTransactionIdsByPriority: string[] = [];
|
|
||||||
private detachBeforeRecordHook: (() => void) | null = null;
|
|
||||||
|
|
||||||
constructor(app: AppClassProperties) {
|
|
||||||
this.app = app;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Binds transaction bookkeeping to history lifecycle hooks.
|
|
||||||
* Call once during app initialization.
|
|
||||||
*/
|
|
||||||
attachHistory(history: TransactionHistoryBridge) {
|
|
||||||
this.detachBeforeRecordHook?.();
|
|
||||||
history.setEffectiveDeltaResolver((delta, context) =>
|
|
||||||
this.resolveEffectiveDelta(delta, context),
|
|
||||||
);
|
|
||||||
this.detachBeforeRecordHook = history.onBeforeRecord((delta) =>
|
|
||||||
this.onDurableIncrement(delta),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
private removeActiveTransactionId(txId: string) {
|
|
||||||
const txIndex = this.activeTransactionIdsByPriority.indexOf(txId);
|
|
||||||
if (txIndex >= 0) {
|
|
||||||
this.activeTransactionIdsByPriority.splice(txIndex, 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
private getRequiredTransactionRecord(txId: string): TransactionRecord {
|
|
||||||
const record = this.transactionRecords.get(txId);
|
|
||||||
if (!record) {
|
|
||||||
throw new Error(`Unknown transaction: ${txId}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
return record;
|
|
||||||
}
|
|
||||||
|
|
||||||
registerTransaction(tx: Transaction) {
|
|
||||||
this.transactionRecords.set(tx.id, {
|
|
||||||
tx,
|
|
||||||
phase: "active",
|
|
||||||
});
|
|
||||||
this.activeTransactionIdsByPriority.unshift(tx.id);
|
|
||||||
}
|
|
||||||
|
|
||||||
detachTransactionInstance(txId: string) {
|
|
||||||
const record = this.getRequiredTransactionRecord(txId);
|
|
||||||
record.tx = null;
|
|
||||||
this.removeActiveTransactionId(txId);
|
|
||||||
}
|
|
||||||
|
|
||||||
getStatus(txId: string): TransactionStatus {
|
|
||||||
return this.getRequiredTransactionRecord(txId).phase;
|
|
||||||
}
|
|
||||||
|
|
||||||
private markTransactionFinished(
|
|
||||||
txId: string,
|
|
||||||
phase: Exclude<TransactionStatus, "active">,
|
|
||||||
): TransactionStatus {
|
|
||||||
const record = this.getRequiredTransactionRecord(txId);
|
|
||||||
if (record.phase !== "active") {
|
|
||||||
return record.phase;
|
|
||||||
}
|
|
||||||
|
|
||||||
record.phase = phase;
|
|
||||||
this.removeActiveTransactionId(txId);
|
|
||||||
return record.phase;
|
|
||||||
}
|
|
||||||
|
|
||||||
markTransactionCommitted(txId: string): TransactionStatus {
|
|
||||||
return this.markTransactionFinished(txId, "committed");
|
|
||||||
}
|
|
||||||
|
|
||||||
markTransactionCanceled(txId: string): TransactionStatus {
|
|
||||||
return this.markTransactionFinished(txId, "canceled");
|
|
||||||
}
|
|
||||||
|
|
||||||
onDurableIncrement(delta: StoreDelta) {
|
|
||||||
if (this.activeTransactionIdsByPriority.length === 0) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (!hasUpdatedElementEntries(delta)) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const txUndoOverrides = this.collectUndoOverrides(delta);
|
|
||||||
if (txUndoOverrides.length === 0) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
mergeStoreDeltaMarkers(delta, { txUndoOverrides });
|
|
||||||
}
|
|
||||||
|
|
||||||
private collectUndoOverrides(delta: StoreDelta): TxUndoOverride[] {
|
|
||||||
const overrides: TxUndoOverride[] = [];
|
|
||||||
const reservedConsumedKeys = new Set<string>();
|
|
||||||
|
|
||||||
for (const txId of this.activeTransactionIdsByPriority) {
|
|
||||||
const record = this.transactionRecords.get(txId);
|
|
||||||
if (!record || record.phase !== "active" || !record.tx) {
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
const txOverrides = record.tx.collectUndoOverridesForDelta(
|
|
||||||
delta,
|
|
||||||
reservedConsumedKeys,
|
|
||||||
);
|
|
||||||
|
|
||||||
for (const override of txOverrides) {
|
|
||||||
if (reservedConsumedKeys.has(override.consumedKey)) {
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
reservedConsumedKeys.add(override.consumedKey);
|
|
||||||
overrides.push(override);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return overrides;
|
|
||||||
}
|
|
||||||
|
|
||||||
private resolveEffectiveDelta(
|
|
||||||
delta: HistoryDelta,
|
|
||||||
_context: HistoryEffectiveDeltaResolverContext,
|
|
||||||
): HistoryDelta {
|
|
||||||
const txUndoOverrides = delta.markers?.txUndoOverrides;
|
|
||||||
if (!txUndoOverrides || txUndoOverrides.length === 0) {
|
|
||||||
return delta;
|
|
||||||
}
|
|
||||||
|
|
||||||
const updatedEntries = getUpdatedElementEntries(delta);
|
|
||||||
const insertedOverridesByElement = new Map<
|
|
||||||
string,
|
|
||||||
MutableElementUpdatedProps
|
|
||||||
>();
|
|
||||||
|
|
||||||
for (const override of txUndoOverrides) {
|
|
||||||
if (!this.shouldApplyUndoOverride(override.txId)) {
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
const currentEntry = updatedEntries[override.elementId];
|
|
||||||
if (!currentEntry) {
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
const prop = override.prop as ElementUpdatedPropName;
|
|
||||||
const currentInsertedValue = currentEntry.inserted[prop];
|
|
||||||
if (
|
|
||||||
!isLedgerValueEqual(
|
|
||||||
currentInsertedValue,
|
|
||||||
override.expectedInsertedValue,
|
|
||||||
)
|
|
||||||
) {
|
|
||||||
// Guard against over-applying once the delta has already evolved.
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
const elementOverrides = insertedOverridesByElement.get(
|
|
||||||
override.elementId,
|
|
||||||
);
|
|
||||||
if (elementOverrides) {
|
|
||||||
setElementUpdatedOverride(
|
|
||||||
elementOverrides,
|
|
||||||
prop,
|
|
||||||
override.preTxBaselineValue,
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
const nextOverrides: MutableElementUpdatedProps = {};
|
|
||||||
setElementUpdatedOverride(
|
|
||||||
nextOverrides,
|
|
||||||
prop,
|
|
||||||
override.preTxBaselineValue,
|
|
||||||
);
|
|
||||||
insertedOverridesByElement.set(override.elementId, nextOverrides);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (insertedOverridesByElement.size === 0) {
|
|
||||||
return delta;
|
|
||||||
}
|
|
||||||
|
|
||||||
const nextUpdatedEntries: ElementUpdatedEntryMap = {
|
|
||||||
...updatedEntries,
|
|
||||||
};
|
|
||||||
for (const [elementId, insertedOverrides] of insertedOverridesByElement) {
|
|
||||||
const currentEntry = updatedEntries[elementId];
|
|
||||||
if (!currentEntry) {
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
nextUpdatedEntries[elementId] = Delta.create(
|
|
||||||
{ ...currentEntry.deleted },
|
|
||||||
{ ...currentEntry.inserted, ...insertedOverrides },
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const effectiveElements = ElementsDelta.create(
|
|
||||||
delta.elements.added,
|
|
||||||
delta.elements.removed,
|
|
||||||
nextUpdatedEntries,
|
|
||||||
);
|
|
||||||
|
|
||||||
return HistoryDelta.create(effectiveElements, delta.appState, {
|
|
||||||
id: delta.id,
|
|
||||||
markers: delta.markers,
|
|
||||||
}) as HistoryDelta;
|
|
||||||
}
|
|
||||||
|
|
||||||
private shouldApplyUndoOverride(txId: string): boolean {
|
|
||||||
const record = this.transactionRecords.get(txId);
|
|
||||||
return !!record && record.phase !== "active";
|
|
||||||
}
|
|
||||||
|
|
||||||
create(): Transaction {
|
|
||||||
return new Transaction(this.app, this);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,286 +0,0 @@
|
|||||||
import { randomId } from "@excalidraw/common";
|
|
||||||
import {
|
|
||||||
CaptureUpdateAction,
|
|
||||||
newElementWith,
|
|
||||||
type ElementUpdate,
|
|
||||||
type StoreDelta,
|
|
||||||
type TxUndoOverride,
|
|
||||||
} from "@excalidraw/element";
|
|
||||||
|
|
||||||
import { shallowCopySceneElements } from "./diff";
|
|
||||||
import { TransactionLedger } from "./ledger";
|
|
||||||
|
|
||||||
import {
|
|
||||||
type AppStateResolver,
|
|
||||||
type AppStateResolverContext,
|
|
||||||
type TransactionElementOfType,
|
|
||||||
type TransactionElementUpdate,
|
|
||||||
type TransactionStatus,
|
|
||||||
type TransactionSummary,
|
|
||||||
} from "./types";
|
|
||||||
import { TxUndoOverridePlanner } from "./undoOverridePlanner";
|
|
||||||
|
|
||||||
import type { TransactionManager } from "./manager";
|
|
||||||
import type {
|
|
||||||
AppClassProperties,
|
|
||||||
AppState,
|
|
||||||
ObservedAppState,
|
|
||||||
SceneData,
|
|
||||||
} from "../types";
|
|
||||||
|
|
||||||
type CommitOptions = {
|
|
||||||
resolveAppState?: AppStateResolver;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* A transaction that records mutations via `updateScene(NEVER)` and commits
|
|
||||||
* a single synthetic durable history entry at the end.
|
|
||||||
*/
|
|
||||||
export class Transaction {
|
|
||||||
public readonly id = `tx-${randomId()}`;
|
|
||||||
|
|
||||||
private readonly app: AppClassProperties;
|
|
||||||
private readonly manager: TransactionManager;
|
|
||||||
private readonly ledger = new TransactionLedger();
|
|
||||||
private readonly undoOverridePlanner = new TxUndoOverridePlanner();
|
|
||||||
private readonly initialAppState: Partial<ObservedAppState>;
|
|
||||||
|
|
||||||
private accumulatedAppState: Record<string, unknown> = {};
|
|
||||||
private cachedSummary: TransactionSummary | null = null;
|
|
||||||
|
|
||||||
constructor(app: AppClassProperties, manager: TransactionManager) {
|
|
||||||
this.app = app;
|
|
||||||
this.manager = manager;
|
|
||||||
this.initialAppState = { ...app.store.snapshot.appState };
|
|
||||||
this.manager.registerTransaction(this);
|
|
||||||
}
|
|
||||||
|
|
||||||
get status(): TransactionStatus {
|
|
||||||
return this.manager.getStatus(this.id);
|
|
||||||
}
|
|
||||||
|
|
||||||
private assertActive(action: string): void {
|
|
||||||
const status = this.status;
|
|
||||||
if (status !== "active") {
|
|
||||||
throw new Error(
|
|
||||||
`Cannot ${action} — transaction ${this.id} is already ${status}.`,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
private closeTransaction() {
|
|
||||||
this.manager.detachTransactionInstance(this.id);
|
|
||||||
this.undoOverridePlanner.clear();
|
|
||||||
}
|
|
||||||
|
|
||||||
public collectUndoOverridesForDelta(
|
|
||||||
delta: StoreDelta,
|
|
||||||
reservedConsumedKeys: Set<string>,
|
|
||||||
): TxUndoOverride[] {
|
|
||||||
if (this.status !== "active") {
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
|
|
||||||
const candidates =
|
|
||||||
this.undoOverridePlanner.collectCandidatesForDurableDelta(
|
|
||||||
delta,
|
|
||||||
(elementId) => this.ledger.getEntry(elementId),
|
|
||||||
reservedConsumedKeys,
|
|
||||||
);
|
|
||||||
|
|
||||||
if (candidates.length === 0) {
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
|
|
||||||
const overrides: TxUndoOverride[] = [];
|
|
||||||
for (const candidate of candidates) {
|
|
||||||
this.undoOverridePlanner.markConsumed(candidate.consumedKey);
|
|
||||||
overrides.push({
|
|
||||||
txId: this.id,
|
|
||||||
...candidate,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
return overrides;
|
|
||||||
}
|
|
||||||
|
|
||||||
updateScene<K extends keyof AppState>(data: {
|
|
||||||
elements?: SceneData["elements"];
|
|
||||||
appState?: Pick<AppState, K> | null;
|
|
||||||
}): void {
|
|
||||||
this.assertActive("updateScene");
|
|
||||||
|
|
||||||
// Snapshot before (shallow copy — replaceAllElements mutates the map in-place)
|
|
||||||
const before = shallowCopySceneElements(
|
|
||||||
this.app.scene.getElementsMapIncludingDeleted(),
|
|
||||||
);
|
|
||||||
|
|
||||||
// Apply through the real updateScene with NEVER.
|
|
||||||
this.app.api.updateScene({
|
|
||||||
elements: data.elements,
|
|
||||||
appState: data.appState,
|
|
||||||
captureUpdate: CaptureUpdateAction.NEVER,
|
|
||||||
});
|
|
||||||
|
|
||||||
// Snapshot after
|
|
||||||
const after = this.app.scene.getElementsMapIncludingDeleted();
|
|
||||||
|
|
||||||
this.undoOverridePlanner.recordStep(before, after);
|
|
||||||
|
|
||||||
// Record element diff into ledger
|
|
||||||
this.ledger.recordStep(before, after);
|
|
||||||
|
|
||||||
// Accumulate appState intent
|
|
||||||
if (data.appState) {
|
|
||||||
this.accumulatedAppState = {
|
|
||||||
...this.accumulatedAppState,
|
|
||||||
...(data.appState as Record<string, unknown>),
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Partial element updates convenience API.
|
|
||||||
*
|
|
||||||
* Example:
|
|
||||||
* tx.updateElements({
|
|
||||||
* elements: [
|
|
||||||
* { id: "a", type: "rectangle", updates: { strokeColor: "#f00" } },
|
|
||||||
* { id: "b", type: "rectangle", updates: { x: 10, y: 20 } },
|
|
||||||
* ],
|
|
||||||
* })
|
|
||||||
*/
|
|
||||||
updateElements<K extends keyof AppState>(data: {
|
|
||||||
elements: readonly TransactionElementUpdate[];
|
|
||||||
appState?: Pick<AppState, K> | null;
|
|
||||||
}): void {
|
|
||||||
const updatesById = new Map<string, TransactionElementUpdate>();
|
|
||||||
|
|
||||||
for (const update of data.elements) {
|
|
||||||
updatesById.set(update.id, update);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (updatesById.size === 0) {
|
|
||||||
this.updateScene({ appState: data.appState });
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const nextElements = this.app.scene
|
|
||||||
.getElementsIncludingDeleted()
|
|
||||||
.map((element) => {
|
|
||||||
const update = updatesById.get(element.id);
|
|
||||||
if (!update) {
|
|
||||||
return element;
|
|
||||||
}
|
|
||||||
if (element.type !== update.type) {
|
|
||||||
throw new Error(
|
|
||||||
`Cannot apply tx.updateElements update for "${update.id}": expected "${update.type}", got "${element.type}".`,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
type MatchingElement = TransactionElementOfType<typeof update.type>;
|
|
||||||
return newElementWith(
|
|
||||||
element as MatchingElement,
|
|
||||||
update.updates as ElementUpdate<MatchingElement>,
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
this.updateScene({
|
|
||||||
elements: nextElements,
|
|
||||||
appState: data.appState,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
commit(options?: CommitOptions): TransactionSummary {
|
|
||||||
if (this.cachedSummary) {
|
|
||||||
return this.cachedSummary;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.manager.markTransactionCommitted(this.id);
|
|
||||||
let historyCommitted = false;
|
|
||||||
try {
|
|
||||||
historyCommitted = this.hasPendingWork()
|
|
||||||
? this.commitHistoryEntry(options)
|
|
||||||
: false;
|
|
||||||
} finally {
|
|
||||||
this.closeTransaction();
|
|
||||||
}
|
|
||||||
|
|
||||||
const status = this.status;
|
|
||||||
this.cachedSummary = {
|
|
||||||
id: this.id,
|
|
||||||
status,
|
|
||||||
historyCommitted,
|
|
||||||
};
|
|
||||||
this.ledger.clear();
|
|
||||||
return this.cachedSummary;
|
|
||||||
}
|
|
||||||
|
|
||||||
private hasPendingWork() {
|
|
||||||
return this.ledger.hasEntries() || this.hasAccumulatedAppStateIntent();
|
|
||||||
}
|
|
||||||
|
|
||||||
private hasAccumulatedAppStateIntent() {
|
|
||||||
return Object.keys(this.accumulatedAppState).length > 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
private commitHistoryEntry(options?: CommitOptions) {
|
|
||||||
const liveMap = this.app.scene.getElementsMapIncludingDeleted();
|
|
||||||
const { elementsBefore, elementsAfter } =
|
|
||||||
this.ledger.buildSyntheticSnapshots(liveMap);
|
|
||||||
|
|
||||||
const appStateDelta = this.resolveCommitAppStateDelta(options);
|
|
||||||
|
|
||||||
return this.app.store.commitSyntheticIncrement({
|
|
||||||
logicalBefore: { elements: elementsBefore },
|
|
||||||
logicalAfter: {
|
|
||||||
elements: elementsAfter,
|
|
||||||
appState: appStateDelta,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
private resolveCommitAppStateDelta(
|
|
||||||
options?: CommitOptions,
|
|
||||||
): Partial<ObservedAppState> | undefined {
|
|
||||||
if (!this.hasAccumulatedAppStateIntent()) {
|
|
||||||
return undefined;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!options?.resolveAppState) {
|
|
||||||
return this.accumulatedAppState as Partial<ObservedAppState>;
|
|
||||||
}
|
|
||||||
|
|
||||||
const context: AppStateResolverContext = {
|
|
||||||
initial: this.initialAppState,
|
|
||||||
accumulated: this.accumulatedAppState as Partial<ObservedAppState>,
|
|
||||||
live: { ...this.app.store.snapshot.appState },
|
|
||||||
};
|
|
||||||
const resolved = options.resolveAppState(context);
|
|
||||||
|
|
||||||
if (!resolved || Object.keys(resolved).length === 0) {
|
|
||||||
return undefined;
|
|
||||||
}
|
|
||||||
return resolved;
|
|
||||||
}
|
|
||||||
|
|
||||||
cancel(): TransactionSummary {
|
|
||||||
if (this.cachedSummary) {
|
|
||||||
return this.cachedSummary;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.status === "active") {
|
|
||||||
this.manager.markTransactionCanceled(this.id);
|
|
||||||
}
|
|
||||||
|
|
||||||
this.closeTransaction();
|
|
||||||
const status = this.status;
|
|
||||||
this.cachedSummary = {
|
|
||||||
id: this.id,
|
|
||||||
status,
|
|
||||||
historyCommitted: false,
|
|
||||||
};
|
|
||||||
this.ledger.clear();
|
|
||||||
return this.cachedSummary;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,83 +0,0 @@
|
|||||||
import type { ElementUpdate } from "@excalidraw/element";
|
|
||||||
|
|
||||||
import type {
|
|
||||||
ExcalidrawElement,
|
|
||||||
ExcalidrawNonSelectionElement,
|
|
||||||
} from "@excalidraw/element/types";
|
|
||||||
|
|
||||||
import type { ObservedAppState } from "../types";
|
|
||||||
|
|
||||||
export type ElementPropName = Extract<keyof ExcalidrawElement, string>;
|
|
||||||
|
|
||||||
export type TouchedElementProps =
|
|
||||||
| { kind: "all" }
|
|
||||||
| { kind: "partial"; props: Set<ElementPropName> };
|
|
||||||
|
|
||||||
export type ElementChange = {
|
|
||||||
id: ExcalidrawElement["id"];
|
|
||||||
before: ExcalidrawElement | null;
|
|
||||||
after: ExcalidrawElement | null;
|
|
||||||
touchedProps: TouchedElementProps;
|
|
||||||
};
|
|
||||||
|
|
||||||
/** Per-element ledger record captured during a transaction session. */
|
|
||||||
export type TransactionLedgerEntry = {
|
|
||||||
baselineElement: ExcalidrawElement | null;
|
|
||||||
targetElement: ExcalidrawElement | null;
|
|
||||||
touchedProps: TouchedElementProps;
|
|
||||||
};
|
|
||||||
|
|
||||||
/** Lifecycle state of a transaction. */
|
|
||||||
export type TransactionStatus = "active" | "committed" | "canceled";
|
|
||||||
|
|
||||||
/** Per-element partial patch used by tx.updateElements(). */
|
|
||||||
export type TransactionUpdatableElementType =
|
|
||||||
ExcalidrawNonSelectionElement["type"];
|
|
||||||
|
|
||||||
export type TransactionElementOfType<
|
|
||||||
TType extends TransactionUpdatableElementType,
|
|
||||||
> = Extract<ExcalidrawNonSelectionElement, { type: TType }>;
|
|
||||||
|
|
||||||
export type TransactionElementUpdate<
|
|
||||||
TType extends TransactionUpdatableElementType = TransactionUpdatableElementType,
|
|
||||||
> = TType extends TransactionUpdatableElementType
|
|
||||||
? {
|
|
||||||
id: ExcalidrawElement["id"];
|
|
||||||
type: TType;
|
|
||||||
updates: ElementUpdate<TransactionElementOfType<TType>>;
|
|
||||||
}
|
|
||||||
: never;
|
|
||||||
|
|
||||||
/** Final summary returned when a transaction is committed or canceled. */
|
|
||||||
export type TransactionSummary = {
|
|
||||||
id: string;
|
|
||||||
status: TransactionStatus;
|
|
||||||
historyCommitted: boolean;
|
|
||||||
};
|
|
||||||
|
|
||||||
/** Three-way appState context provided to the resolver at commit time. */
|
|
||||||
export type AppStateResolverContext = {
|
|
||||||
/** AppState snapshot captured when the transaction was created. */
|
|
||||||
initial: Partial<ObservedAppState>;
|
|
||||||
/** Merged appState intent from all updateScene calls during the transaction. */
|
|
||||||
accumulated: Partial<ObservedAppState>;
|
|
||||||
/** Current live appState at commit time. */
|
|
||||||
live: Partial<ObservedAppState>;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Caller-provided resolver that determines which appState changes are
|
|
||||||
* recorded in the history entry.
|
|
||||||
*
|
|
||||||
* Unlike elements — where per-property conflict detection works because
|
|
||||||
* element properties are largely independent — appState keys are often
|
|
||||||
* interdependent (e.g. selectedElementIds ↔ selectedGroupIds must stay
|
|
||||||
* consistent). The correct merge strategy therefore depends on the
|
|
||||||
* caller's semantic context, not on a generic policy.
|
|
||||||
*
|
|
||||||
* Return the appState delta to record in history, or undefined to skip
|
|
||||||
* appState changes entirely.
|
|
||||||
*/
|
|
||||||
export type AppStateResolver = (
|
|
||||||
context: AppStateResolverContext,
|
|
||||||
) => Partial<ObservedAppState> | undefined;
|
|
||||||
@@ -1,283 +0,0 @@
|
|||||||
import type { StoreDelta, TxUndoOverride } from "@excalidraw/element";
|
|
||||||
|
|
||||||
import type { ExcalidrawElement } from "@excalidraw/element/types";
|
|
||||||
|
|
||||||
import {
|
|
||||||
TX_UNDO_OVERRIDE_IGNORED_PROPS,
|
|
||||||
collectElementChanges,
|
|
||||||
getElementProp,
|
|
||||||
getElementPropEntries,
|
|
||||||
getUpdatedElementEntries,
|
|
||||||
hasTouchedProp,
|
|
||||||
isPartialTouchedProps,
|
|
||||||
isLedgerValueEqual,
|
|
||||||
serializeConsumedPropKey,
|
|
||||||
serializeIntermediateValue,
|
|
||||||
touchesWholeElement,
|
|
||||||
type ElementUpdatedEntry,
|
|
||||||
} from "./diff";
|
|
||||||
|
|
||||||
import type {
|
|
||||||
ElementPropName,
|
|
||||||
TouchedElementProps,
|
|
||||||
TransactionLedgerEntry,
|
|
||||||
} from "./types";
|
|
||||||
|
|
||||||
type TxUndoOverrideCandidate = Omit<TxUndoOverride, "txId">;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Per-element-prop history of tx intermediate values.
|
|
||||||
*
|
|
||||||
* We keep:
|
|
||||||
* - the full sequence for exact deep-equality fallback
|
|
||||||
* - a serialized signature set for fast negative lookups
|
|
||||||
* - the latest value for the most common positive lookup path
|
|
||||||
*/
|
|
||||||
class TxIntermediateValueHistory {
|
|
||||||
private readonly values: unknown[] = [];
|
|
||||||
private readonly signatures = new Set<string>();
|
|
||||||
private latestValue: unknown;
|
|
||||||
private hasLatestValue = false;
|
|
||||||
|
|
||||||
/** Appends a new intermediate value, skipping consecutive duplicates. */
|
|
||||||
add(value: unknown) {
|
|
||||||
if (this.hasLatestValue && isLedgerValueEqual(this.latestValue, value)) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.values.push(value);
|
|
||||||
this.signatures.add(serializeIntermediateValue(value));
|
|
||||||
this.latestValue = value;
|
|
||||||
this.hasLatestValue = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Returns whether the candidate appeared in this tx prop history. */
|
|
||||||
contains(candidate: unknown) {
|
|
||||||
const candidateSignature = serializeIntermediateValue(candidate);
|
|
||||||
if (!this.signatures.has(candidateSignature)) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (
|
|
||||||
this.hasLatestValue &&
|
|
||||||
isLedgerValueEqual(this.latestValue, candidate)
|
|
||||||
) {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
return this.values.some((value) => isLedgerValueEqual(value, candidate));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Tracks tx intermediate values and computes undo baseline override markers
|
|
||||||
* for durable user deltas recorded while tx is active.
|
|
||||||
*
|
|
||||||
* High-level flow:
|
|
||||||
* 1. `recordStep()` observes every in-tx scene mutation and records the
|
|
||||||
* intermediate value reached by each touched element prop.
|
|
||||||
* 2. When a durable user delta is about to be recorded,
|
|
||||||
* `collectCandidatesForDurableDelta()` checks whether that delta's
|
|
||||||
* deleted-baseline values match any tx intermediate value.
|
|
||||||
* 3. If they do, we emit override candidates so undo can restore the pre-tx
|
|
||||||
* baseline once the tx has ended.
|
|
||||||
* 4. `markConsumed()` ensures only the first polluted durable entry for a
|
|
||||||
* given element+prop gets patched; later user actions keep their own
|
|
||||||
* action-local undo baseline.
|
|
||||||
*/
|
|
||||||
export class TxUndoOverridePlanner {
|
|
||||||
private readonly intermediateValuesByElementProp = new Map<
|
|
||||||
string,
|
|
||||||
Map<ElementPropName, TxIntermediateValueHistory>
|
|
||||||
>();
|
|
||||||
private readonly consumedOverridePropKeys = new Set<string>();
|
|
||||||
|
|
||||||
/** Resets planner state when the transaction finishes. */
|
|
||||||
clear() {
|
|
||||||
this.consumedOverridePropKeys.clear();
|
|
||||||
this.intermediateValuesByElementProp.clear();
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Records per-prop intermediate values reached by one in-tx scene step. */
|
|
||||||
recordStep(
|
|
||||||
before: ReadonlyMap<string, ExcalidrawElement>,
|
|
||||||
after: ReadonlyMap<string, ExcalidrawElement>,
|
|
||||||
) {
|
|
||||||
for (const change of collectElementChanges(before, after)) {
|
|
||||||
const { id: elementId, after: afterElement, touchedProps } = change;
|
|
||||||
|
|
||||||
if (!afterElement || !isPartialTouchedProps(touchedProps)) {
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
for (const prop of touchedProps.props) {
|
|
||||||
this.recordIntermediateValue(
|
|
||||||
elementId,
|
|
||||||
prop,
|
|
||||||
getElementProp(afterElement, prop),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Collects override candidates for one durable user delta recorded while the
|
|
||||||
* tx is active.
|
|
||||||
*/
|
|
||||||
collectCandidatesForDurableDelta(
|
|
||||||
delta: StoreDelta,
|
|
||||||
getLedgerEntry: (elementId: string) => TransactionLedgerEntry | undefined,
|
|
||||||
reservedConsumedKeys: Set<string>,
|
|
||||||
): TxUndoOverrideCandidate[] {
|
|
||||||
const candidates: TxUndoOverrideCandidate[] = [];
|
|
||||||
|
|
||||||
for (const [elementId, deltaEntry] of Object.entries(
|
|
||||||
getUpdatedElementEntries(delta),
|
|
||||||
)) {
|
|
||||||
const ledgerEntry = getLedgerEntry(elementId);
|
|
||||||
if (!ledgerEntry) {
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
const elementCandidates = this.collectCandidatesForElement(
|
|
||||||
elementId,
|
|
||||||
deltaEntry,
|
|
||||||
ledgerEntry,
|
|
||||||
reservedConsumedKeys,
|
|
||||||
);
|
|
||||||
if (elementCandidates.length > 0) {
|
|
||||||
candidates.push(...elementCandidates);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return candidates;
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Evaluates one element's updated entry against the tx ledger snapshot. */
|
|
||||||
private collectCandidatesForElement(
|
|
||||||
elementId: string,
|
|
||||||
deltaEntry: ElementUpdatedEntry,
|
|
||||||
ledgerEntry: TransactionLedgerEntry,
|
|
||||||
reservedConsumedKeys: Set<string>,
|
|
||||||
): TxUndoOverrideCandidate[] {
|
|
||||||
const { baselineElement, touchedProps } = ledgerEntry;
|
|
||||||
if (!baselineElement || touchesWholeElement(touchedProps)) {
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
|
|
||||||
const candidates: TxUndoOverrideCandidate[] = [];
|
|
||||||
for (const [prop, deletedValue] of getElementPropEntries(
|
|
||||||
deltaEntry.deleted,
|
|
||||||
)) {
|
|
||||||
const candidate = this.createCandidateForProp({
|
|
||||||
elementId,
|
|
||||||
prop,
|
|
||||||
deletedValue,
|
|
||||||
baselineElement,
|
|
||||||
touchedProps,
|
|
||||||
reservedConsumedKeys,
|
|
||||||
});
|
|
||||||
if (candidate) {
|
|
||||||
candidates.push(candidate);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return candidates;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Returns an override candidate for one element+prop when the durable delta's
|
|
||||||
* deleted baseline was polluted by a tx intermediate value.
|
|
||||||
*/
|
|
||||||
private createCandidateForProp(args: {
|
|
||||||
elementId: string;
|
|
||||||
prop: ElementPropName;
|
|
||||||
deletedValue: unknown;
|
|
||||||
baselineElement: ExcalidrawElement;
|
|
||||||
touchedProps: TouchedElementProps;
|
|
||||||
reservedConsumedKeys: Set<string>;
|
|
||||||
}): TxUndoOverrideCandidate | null {
|
|
||||||
const { elementId, prop, deletedValue, baselineElement, touchedProps } =
|
|
||||||
args;
|
|
||||||
|
|
||||||
if (
|
|
||||||
TX_UNDO_OVERRIDE_IGNORED_PROPS.has(prop) ||
|
|
||||||
!hasTouchedProp(touchedProps, prop)
|
|
||||||
) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
const consumedPropKey = serializeConsumedPropKey(elementId, prop);
|
|
||||||
// Override only the first polluted user entry for this element+prop.
|
|
||||||
// Later user actions should keep action-local undo baselines.
|
|
||||||
if (
|
|
||||||
this.consumedOverridePropKeys.has(consumedPropKey) ||
|
|
||||||
args.reservedConsumedKeys.has(consumedPropKey)
|
|
||||||
) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!this.matchesIntermediateValue(elementId, prop, deletedValue)) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
elementId,
|
|
||||||
prop,
|
|
||||||
expectedInsertedValue: deletedValue,
|
|
||||||
preTxBaselineValue: getElementProp(baselineElement, prop),
|
|
||||||
consumedKey: consumedPropKey,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Marks an element+prop override as consumed by an earlier durable entry. */
|
|
||||||
markConsumed(consumedPropKey: string) {
|
|
||||||
this.consumedOverridePropKeys.add(consumedPropKey);
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Returns the per-prop history map for one element, creating it if needed. */
|
|
||||||
private getOrCreatePropValues(elementId: string) {
|
|
||||||
const existing = this.intermediateValuesByElementProp.get(elementId);
|
|
||||||
if (existing) {
|
|
||||||
return existing;
|
|
||||||
}
|
|
||||||
|
|
||||||
const created = new Map<ElementPropName, TxIntermediateValueHistory>();
|
|
||||||
this.intermediateValuesByElementProp.set(elementId, created);
|
|
||||||
return created;
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Appends one observed intermediate value for an element prop. */
|
|
||||||
private recordIntermediateValue(
|
|
||||||
elementId: string,
|
|
||||||
prop: ElementPropName,
|
|
||||||
value: unknown,
|
|
||||||
) {
|
|
||||||
const propValues = this.getOrCreatePropValues(elementId);
|
|
||||||
const history = propValues.get(prop);
|
|
||||||
if (history) {
|
|
||||||
history.add(value);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const nextHistory = new TxIntermediateValueHistory();
|
|
||||||
nextHistory.add(value);
|
|
||||||
propValues.set(prop, nextHistory);
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Checks whether a durable delta baseline matches any tx intermediate value. */
|
|
||||||
private matchesIntermediateValue(
|
|
||||||
elementId: string,
|
|
||||||
prop: ElementPropName,
|
|
||||||
candidate: unknown,
|
|
||||||
) {
|
|
||||||
const history = this.intermediateValuesByElementProp
|
|
||||||
.get(elementId)
|
|
||||||
?.get(prop);
|
|
||||||
if (!history) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
return history.contains(candidate);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -269,8 +269,6 @@ export type ObservedElementsAppState = {
|
|||||||
activeLockedId: AppState["activeLockedId"];
|
activeLockedId: AppState["activeLockedId"];
|
||||||
};
|
};
|
||||||
|
|
||||||
export type BoxSelectionMode = "contain" | "overlap";
|
|
||||||
|
|
||||||
export interface AppState {
|
export interface AppState {
|
||||||
contextMenu: {
|
contextMenu: {
|
||||||
items: ContextMenuItems;
|
items: ContextMenuItems;
|
||||||
@@ -309,8 +307,6 @@ export interface AppState {
|
|||||||
* `bindingPreference` and keyboard modifiers (ctrl/alt)
|
* `bindingPreference` and keyboard modifiers (ctrl/alt)
|
||||||
*/
|
*/
|
||||||
isBindingEnabled: boolean;
|
isBindingEnabled: boolean;
|
||||||
/** user box selection preference; defaults to "contain" when unset */
|
|
||||||
boxSelectionMode: BoxSelectionMode;
|
|
||||||
/** user arrow binding preference */
|
/** user arrow binding preference */
|
||||||
bindingPreference: "enabled" | "disabled";
|
bindingPreference: "enabled" | "disabled";
|
||||||
/** user preference whether arrow snap to midpoints while binding */
|
/** user preference whether arrow snap to midpoints while binding */
|
||||||
@@ -796,9 +792,6 @@ export type AppClassProperties = {
|
|||||||
files: BinaryFiles;
|
files: BinaryFiles;
|
||||||
editorInterface: App["editorInterface"];
|
editorInterface: App["editorInterface"];
|
||||||
scene: App["scene"];
|
scene: App["scene"];
|
||||||
store: App["store"];
|
|
||||||
transactionManager: App["transactionManager"];
|
|
||||||
createTransaction: App["createTransaction"];
|
|
||||||
syncActionResult: App["syncActionResult"];
|
syncActionResult: App["syncActionResult"];
|
||||||
fonts: App["fonts"];
|
fonts: App["fonts"];
|
||||||
pasteFromClipboard: App["pasteFromClipboard"];
|
pasteFromClipboard: App["pasteFromClipboard"];
|
||||||
|
|||||||
@@ -137,17 +137,8 @@ const calculate = <Point extends GlobalPoint | LocalPoint>(
|
|||||||
[t0, s0]: [number, number],
|
[t0, s0]: [number, number],
|
||||||
l: LineSegment<Point>,
|
l: LineSegment<Point>,
|
||||||
c: Curve<Point>,
|
c: Curve<Point>,
|
||||||
tolerance: number = 1e-2,
|
|
||||||
iterLimit: number = 4,
|
|
||||||
) => {
|
) => {
|
||||||
const solution = solveWithAnalyticalJacobian(
|
const solution = solveWithAnalyticalJacobian(c, l, t0, s0, 1e-2, 4);
|
||||||
c,
|
|
||||||
l,
|
|
||||||
t0,
|
|
||||||
s0,
|
|
||||||
tolerance,
|
|
||||||
iterLimit,
|
|
||||||
);
|
|
||||||
|
|
||||||
if (!solution) {
|
if (!solution) {
|
||||||
return null;
|
return null;
|
||||||
@@ -167,43 +158,18 @@ const calculate = <Point extends GlobalPoint | LocalPoint>(
|
|||||||
*/
|
*/
|
||||||
export function curveIntersectLineSegment<
|
export function curveIntersectLineSegment<
|
||||||
Point extends GlobalPoint | LocalPoint,
|
Point extends GlobalPoint | LocalPoint,
|
||||||
>(
|
>(c: Curve<Point>, l: LineSegment<Point>): Point[] {
|
||||||
c: Curve<Point>,
|
let solution = calculate(initial_guesses[0], l, c);
|
||||||
l: LineSegment<Point>,
|
|
||||||
opts?: {
|
|
||||||
tolerance?: number;
|
|
||||||
iterLimit?: number;
|
|
||||||
},
|
|
||||||
): Point[] {
|
|
||||||
let solution = calculate(
|
|
||||||
initial_guesses[0],
|
|
||||||
l,
|
|
||||||
c,
|
|
||||||
opts?.tolerance,
|
|
||||||
opts?.iterLimit,
|
|
||||||
);
|
|
||||||
if (solution) {
|
if (solution) {
|
||||||
return [solution];
|
return [solution];
|
||||||
}
|
}
|
||||||
|
|
||||||
solution = calculate(
|
solution = calculate(initial_guesses[1], l, c);
|
||||||
initial_guesses[1],
|
|
||||||
l,
|
|
||||||
c,
|
|
||||||
opts?.tolerance,
|
|
||||||
opts?.iterLimit,
|
|
||||||
);
|
|
||||||
if (solution) {
|
if (solution) {
|
||||||
return [solution];
|
return [solution];
|
||||||
}
|
}
|
||||||
|
|
||||||
solution = calculate(
|
solution = calculate(initial_guesses[2], l, c);
|
||||||
initial_guesses[2],
|
|
||||||
l,
|
|
||||||
c,
|
|
||||||
opts?.tolerance,
|
|
||||||
opts?.iterLimit,
|
|
||||||
);
|
|
||||||
if (solution) {
|
if (solution) {
|
||||||
return [solution];
|
return [solution];
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -13,7 +13,6 @@ exports[`exportToSvg > with default arguments 1`] = `
|
|||||||
},
|
},
|
||||||
"bindMode": "orbit",
|
"bindMode": "orbit",
|
||||||
"bindingPreference": "enabled",
|
"bindingPreference": "enabled",
|
||||||
"boxSelectionMode": "contain",
|
|
||||||
"collaborators": Map {},
|
"collaborators": Map {},
|
||||||
"contextMenu": null,
|
"contextMenu": null,
|
||||||
"croppingElementId": null,
|
"croppingElementId": null,
|
||||||
|
|||||||
@@ -90,13 +90,6 @@ module.exports.woff2BrowserPlugin = () => {
|
|||||||
type="font/woff2"
|
type="font/woff2"
|
||||||
crossorigin="anonymous"
|
crossorigin="anonymous"
|
||||||
/>
|
/>
|
||||||
<link
|
|
||||||
rel="preload"
|
|
||||||
href="${OSS_FONTS_CDN}fonts/Assistant/Assistant-SemiBold.woff2"
|
|
||||||
as="font"
|
|
||||||
type="font/woff2"
|
|
||||||
crossorigin="anonymous"
|
|
||||||
/>
|
|
||||||
<link
|
<link
|
||||||
rel="preload"
|
rel="preload"
|
||||||
href="${OSS_FONTS_CDN}fonts/ComicShanns/ComicShanns-Regular-279a7b317d12eb88de06167bd672b4b4.woff2"
|
href="${OSS_FONTS_CDN}fonts/ComicShanns/ComicShanns-Regular-279a7b317d12eb88de06167bd672b4b4.woff2"
|
||||||
|
|||||||
Reference in New Issue
Block a user