From 1bd416002ca9307f1dfc595e77b71713c8a811da Mon Sep 17 00:00:00 2001 From: zsviczian Date: Wed, 16 Aug 2023 23:59:37 +0200 Subject: [PATCH 1/7] fix: scope `--color-selection` retrieval to given instance (#6886) Co-authored-by: dwelle --- src/components/App.tsx | 1 + src/components/canvases/InteractiveCanvas.tsx | 10 +++++++--- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/src/components/App.tsx b/src/components/App.tsx index eccc01743..dad7a7b03 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -1226,6 +1226,7 @@ class App extends React.Component { }} /> ; canvas: HTMLCanvasElement | null; elements: readonly NonDeletedExcalidrawElement[]; visibleElements: readonly NonDeletedExcalidrawElement[]; @@ -105,9 +106,12 @@ const InteractiveCanvas = (props: InteractiveCanvasProps) => { cursorButton[socketId] = user.button; }); - const selectionColor = getComputedStyle( - document.querySelector(".excalidraw")!, - ).getPropertyValue("--color-selection"); + const selectionColor = + (props.containerRef?.current && + getComputedStyle(props.containerRef.current).getPropertyValue( + "--color-selection", + )) || + "#6965db"; renderInteractiveScene( { From d140d1b8b393efeb53d57d1f75bebb7d0e213703 Mon Sep 17 00:00:00 2001 From: David Luzar Date: Thu, 17 Aug 2023 13:39:15 +0200 Subject: [PATCH 2/7] fix: make canvas compos memoize appState on props they declare (#6897) --- src/components/canvases/InteractiveCanvas.tsx | 2 +- src/components/canvases/StaticCanvas.tsx | 11 +-- src/groups.ts | 9 ++- src/renderer/renderScene.ts | 4 +- .../__snapshots__/contextmenu.test.tsx.snap | 32 ++++---- .../regressionTests.test.tsx.snap | 76 +++++++++---------- src/tests/dragCreate.test.tsx | 20 ++--- src/tests/linearElementEditor.test.tsx | 22 +++--- src/tests/move.test.tsx | 6 +- src/tests/multiPointCreate.test.tsx | 10 +-- src/tests/selection.test.tsx | 10 +-- src/types.ts | 61 ++++++++------- 12 files changed, 133 insertions(+), 130 deletions(-) diff --git a/src/components/canvases/InteractiveCanvas.tsx b/src/components/canvases/InteractiveCanvas.tsx index a4ee9ee59..a4d007057 100644 --- a/src/components/canvases/InteractiveCanvas.tsx +++ b/src/components/canvases/InteractiveCanvas.tsx @@ -166,7 +166,7 @@ const InteractiveCanvas = (props: InteractiveCanvasProps) => { const getRelevantAppStateProps = ( appState: AppState, -): Omit => ({ +): InteractiveCanvasAppState => ({ zoom: appState.zoom, scrollX: appState.scrollX, scrollY: appState.scrollY, diff --git a/src/components/canvases/StaticCanvas.tsx b/src/components/canvases/StaticCanvas.tsx index 8babdb745..f32133f35 100644 --- a/src/components/canvases/StaticCanvas.tsx +++ b/src/components/canvases/StaticCanvas.tsx @@ -61,13 +61,7 @@ const StaticCanvas = (props: StaticCanvasProps) => { const getRelevantAppStateProps = ( appState: AppState, -): Omit< - StaticCanvasAppState, - | "editingElement" - | "selectedElementIds" - | "editingGroupId" - | "frameToHighlight" -> => ({ +): StaticCanvasAppState => ({ zoom: appState.zoom, scrollX: appState.scrollX, scrollY: appState.scrollY, @@ -84,6 +78,9 @@ const getRelevantAppStateProps = ( selectedElementsAreBeingDragged: appState.selectedElementsAreBeingDragged, gridSize: appState.gridSize, frameRendering: appState.frameRendering, + selectedElementIds: appState.selectedElementIds, + frameToHighlight: appState.frameToHighlight, + editingGroupId: appState.editingGroupId, }); const areEqual = ( diff --git a/src/groups.ts b/src/groups.ts index e7b222b3c..8dbe2ba5c 100644 --- a/src/groups.ts +++ b/src/groups.ts @@ -12,6 +12,7 @@ import { import { getSelectedElements } from "./scene"; import { getBoundTextElement } from "./element/textElement"; import { makeNextSelectedElementIds } from "./scene/selection"; +import { Mutable } from "./utility-types"; export const selectGroup = ( groupId: GroupId, @@ -155,9 +156,11 @@ export const selectGroupsForSelectedElements = (function () { * you don't care about optimizing selectElements retrieval */ app: AppClassProperties | null, - ): Pick< - InteractiveCanvasAppState, - "selectedGroupIds" | "editingGroupId" | "selectedElementIds" + ): Mutable< + Pick< + InteractiveCanvasAppState, + "selectedGroupIds" | "editingGroupId" | "selectedElementIds" + > > => { const selectedElements = app ? app.scene.getSelectedElements({ diff --git a/src/renderer/renderScene.ts b/src/renderer/renderScene.ts index 03de49b17..736edb99d 100644 --- a/src/renderer/renderScene.ts +++ b/src/renderer/renderScene.ts @@ -6,8 +6,8 @@ import { StaticCanvasAppState, BinaryFiles, Point, - CommonCanvasAppState, Zoom, + AppState, } from "../types"; import { ExcalidrawElement, @@ -407,7 +407,7 @@ const bootstrapCanvas = ({ scale: number; normalizedWidth: number; normalizedHeight: number; - theme?: CommonCanvasAppState["theme"]; + theme?: AppState["theme"]; isExporting?: StaticCanvasRenderConfig["isExporting"]; viewBackgroundColor?: StaticCanvasAppState["viewBackgroundColor"]; }): CanvasRenderingContext2D => { diff --git a/src/tests/__snapshots__/contextmenu.test.tsx.snap b/src/tests/__snapshots__/contextmenu.test.tsx.snap index 608ab8efd..488cd624a 100644 --- a/src/tests/__snapshots__/contextmenu.test.tsx.snap +++ b/src/tests/__snapshots__/contextmenu.test.tsx.snap @@ -467,7 +467,7 @@ exports[`contextMenu element > right-clicking on a group should select whole gro exports[`contextMenu element > right-clicking on a group should select whole group > [end of test] number of elements 1`] = `2`; -exports[`contextMenu element > right-clicking on a group should select whole group > [end of test] number of renders 1`] = `4`; +exports[`contextMenu element > right-clicking on a group should select whole group > [end of test] number of renders 1`] = `5`; exports[`contextMenu element > selecting 'Add to library' in context menu adds element to library > [end of test] appState 1`] = ` { @@ -666,7 +666,7 @@ exports[`contextMenu element > selecting 'Add to library' in context menu adds e exports[`contextMenu element > selecting 'Add to library' in context menu adds element to library > [end of test] number of elements 1`] = `1`; -exports[`contextMenu element > selecting 'Add to library' in context menu adds element to library > [end of test] number of renders 1`] = `6`; +exports[`contextMenu element > selecting 'Add to library' in context menu adds element to library > [end of test] number of renders 1`] = `7`; exports[`contextMenu element > selecting 'Bring forward' in context menu brings element forward > [end of test] appState 1`] = ` { @@ -1039,7 +1039,7 @@ exports[`contextMenu element > selecting 'Bring forward' in context menu brings exports[`contextMenu element > selecting 'Bring forward' in context menu brings element forward > [end of test] number of elements 1`] = `2`; -exports[`contextMenu element > selecting 'Bring forward' in context menu brings element forward > [end of test] number of renders 1`] = `10`; +exports[`contextMenu element > selecting 'Bring forward' in context menu brings element forward > [end of test] number of renders 1`] = `13`; exports[`contextMenu element > selecting 'Bring to front' in context menu brings element to front > [end of test] appState 1`] = ` { @@ -1412,7 +1412,7 @@ exports[`contextMenu element > selecting 'Bring to front' in context menu brings exports[`contextMenu element > selecting 'Bring to front' in context menu brings element to front > [end of test] number of elements 1`] = `2`; -exports[`contextMenu element > selecting 'Bring to front' in context menu brings element to front > [end of test] number of renders 1`] = `10`; +exports[`contextMenu element > selecting 'Bring to front' in context menu brings element to front > [end of test] number of renders 1`] = `13`; exports[`contextMenu element > selecting 'Copy styles' in context menu copies styles > [end of test] appState 1`] = ` { @@ -1611,7 +1611,7 @@ exports[`contextMenu element > selecting 'Copy styles' in context menu copies st exports[`contextMenu element > selecting 'Copy styles' in context menu copies styles > [end of test] number of elements 1`] = `1`; -exports[`contextMenu element > selecting 'Copy styles' in context menu copies styles > [end of test] number of renders 1`] = `6`; +exports[`contextMenu element > selecting 'Copy styles' in context menu copies styles > [end of test] number of renders 1`] = `7`; exports[`contextMenu element > selecting 'Delete' in context menu deletes element > [end of test] appState 1`] = ` { @@ -1847,7 +1847,7 @@ exports[`contextMenu element > selecting 'Delete' in context menu deletes elemen exports[`contextMenu element > selecting 'Delete' in context menu deletes element > [end of test] number of elements 1`] = `1`; -exports[`contextMenu element > selecting 'Delete' in context menu deletes element > [end of test] number of renders 1`] = `7`; +exports[`contextMenu element > selecting 'Delete' in context menu deletes element > [end of test] number of renders 1`] = `8`; exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates element > [end of test] appState 1`] = ` { @@ -2148,7 +2148,7 @@ exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates element > [end of test] number of elements 1`] = `2`; -exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates element > [end of test] number of renders 1`] = `7`; +exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates element > [end of test] number of renders 1`] = `8`; exports[`contextMenu element > selecting 'Group selection' in context menu groups selected elements > [end of test] appState 1`] = ` { @@ -2537,7 +2537,7 @@ exports[`contextMenu element > selecting 'Group selection' in context menu group exports[`contextMenu element > selecting 'Group selection' in context menu groups selected elements > [end of test] number of elements 1`] = `2`; -exports[`contextMenu element > selecting 'Group selection' in context menu groups selected elements > [end of test] number of renders 1`] = `10`; +exports[`contextMenu element > selecting 'Group selection' in context menu groups selected elements > [end of test] number of renders 1`] = `13`; exports[`contextMenu element > selecting 'Paste styles' in context menu pastes styles > [end of test] appState 1`] = ` { @@ -3416,7 +3416,7 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s exports[`contextMenu element > selecting 'Paste styles' in context menu pastes styles > [end of test] number of elements 1`] = `2`; -exports[`contextMenu element > selecting 'Paste styles' in context menu pastes styles > [end of test] number of renders 1`] = `17`; +exports[`contextMenu element > selecting 'Paste styles' in context menu pastes styles > [end of test] number of renders 1`] = `20`; exports[`contextMenu element > selecting 'Send backward' in context menu sends element backward > [end of test] appState 1`] = ` { @@ -3789,7 +3789,7 @@ exports[`contextMenu element > selecting 'Send backward' in context menu sends e exports[`contextMenu element > selecting 'Send backward' in context menu sends element backward > [end of test] number of elements 1`] = `2`; -exports[`contextMenu element > selecting 'Send backward' in context menu sends element backward > [end of test] number of renders 1`] = `10`; +exports[`contextMenu element > selecting 'Send backward' in context menu sends element backward > [end of test] number of renders 1`] = `12`; exports[`contextMenu element > selecting 'Send to back' in context menu sends element to back > [end of test] appState 1`] = ` { @@ -4162,7 +4162,7 @@ exports[`contextMenu element > selecting 'Send to back' in context menu sends el exports[`contextMenu element > selecting 'Send to back' in context menu sends element to back > [end of test] number of elements 1`] = `2`; -exports[`contextMenu element > selecting 'Send to back' in context menu sends element to back > [end of test] number of renders 1`] = `10`; +exports[`contextMenu element > selecting 'Send to back' in context menu sends element to back > [end of test] number of renders 1`] = `12`; exports[`contextMenu element > selecting 'Ungroup selection' in context menu ungroups selected group > [end of test] appState 1`] = ` { @@ -4618,7 +4618,7 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung exports[`contextMenu element > selecting 'Ungroup selection' in context menu ungroups selected group > [end of test] number of elements 1`] = `2`; -exports[`contextMenu element > selecting 'Ungroup selection' in context menu ungroups selected group > [end of test] number of renders 1`] = `11`; +exports[`contextMenu element > selecting 'Ungroup selection' in context menu ungroups selected group > [end of test] number of renders 1`] = `14`; exports[`contextMenu element > shows 'Group selection' in context menu for multiple selected elements > [end of test] appState 1`] = ` { @@ -5198,7 +5198,7 @@ exports[`contextMenu element > shows 'Group selection' in context menu for multi exports[`contextMenu element > shows 'Group selection' in context menu for multiple selected elements > [end of test] number of elements 1`] = `2`; -exports[`contextMenu element > shows 'Group selection' in context menu for multiple selected elements > [end of test] number of renders 1`] = `9`; +exports[`contextMenu element > shows 'Group selection' in context menu for multiple selected elements > [end of test] number of renders 1`] = `13`; exports[`contextMenu element > shows 'Ungroup selection' in context menu for group inside selected elements > [end of test] appState 1`] = ` { @@ -5863,7 +5863,7 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro exports[`contextMenu element > shows 'Ungroup selection' in context menu for group inside selected elements > [end of test] number of elements 1`] = `2`; -exports[`contextMenu element > shows 'Ungroup selection' in context menu for group inside selected elements > [end of test] number of renders 1`] = `10`; +exports[`contextMenu element > shows 'Ungroup selection' in context menu for group inside selected elements > [end of test] number of renders 1`] = `14`; exports[`contextMenu element > shows context menu for canvas > [end of test] appState 1`] = ` { @@ -7031,6 +7031,6 @@ exports[`contextMenu element > shows context menu for element > [end of test] nu exports[`contextMenu element > shows context menu for element > [end of test] number of elements 2`] = `2`; -exports[`contextMenu element > shows context menu for element > [end of test] number of renders 1`] = `6`; +exports[`contextMenu element > shows context menu for element > [end of test] number of renders 1`] = `7`; -exports[`contextMenu element > shows context menu for element > [end of test] number of renders 2`] = `4`; +exports[`contextMenu element > shows context menu for element > [end of test] number of renders 2`] = `6`; diff --git a/src/tests/__snapshots__/regressionTests.test.tsx.snap b/src/tests/__snapshots__/regressionTests.test.tsx.snap index a1a76204b..e9bbfc7ba 100644 --- a/src/tests/__snapshots__/regressionTests.test.tsx.snap +++ b/src/tests/__snapshots__/regressionTests.test.tsx.snap @@ -451,7 +451,7 @@ exports[`given element A and group of elements B and given both are selected whe exports[`given element A and group of elements B and given both are selected when user clicks on B, on pointer up only elements from B should be selected > [end of test] number of elements 1`] = `0`; -exports[`given element A and group of elements B and given both are selected when user clicks on B, on pointer up only elements from B should be selected > [end of test] number of renders 1`] = `14`; +exports[`given element A and group of elements B and given both are selected when user clicks on B, on pointer up only elements from B should be selected > [end of test] number of renders 1`] = `22`; exports[`given element A and group of elements B and given both are selected when user shift-clicks on B, on pointer up only element A should be selected > [end of test] appState 1`] = ` { @@ -906,7 +906,7 @@ exports[`given element A and group of elements B and given both are selected whe exports[`given element A and group of elements B and given both are selected when user shift-clicks on B, on pointer up only element A should be selected > [end of test] number of elements 1`] = `0`; -exports[`given element A and group of elements B and given both are selected when user shift-clicks on B, on pointer up only element A should be selected > [end of test] number of renders 1`] = `14`; +exports[`given element A and group of elements B and given both are selected when user shift-clicks on B, on pointer up only element A should be selected > [end of test] number of renders 1`] = `20`; exports[`regression tests > Cmd/Ctrl-click exclusively select element under pointer > [end of test] appState 1`] = ` { @@ -1734,7 +1734,7 @@ exports[`regression tests > Cmd/Ctrl-click exclusively select element under poin exports[`regression tests > Cmd/Ctrl-click exclusively select element under pointer > [end of test] number of elements 1`] = `0`; -exports[`regression tests > Cmd/Ctrl-click exclusively select element under pointer > [end of test] number of renders 1`] = `15`; +exports[`regression tests > Cmd/Ctrl-click exclusively select element under pointer > [end of test] number of renders 1`] = `32`; exports[`regression tests > Drags selected element when hitting only bounding box and keeps element selected > [end of test] appState 1`] = ` { @@ -1944,7 +1944,7 @@ exports[`regression tests > Drags selected element when hitting only bounding bo exports[`regression tests > Drags selected element when hitting only bounding box and keeps element selected > [end of test] number of elements 1`] = `0`; -exports[`regression tests > Drags selected element when hitting only bounding box and keeps element selected > [end of test] number of renders 1`] = `9`; +exports[`regression tests > Drags selected element when hitting only bounding box and keeps element selected > [end of test] number of renders 1`] = `10`; exports[`regression tests > adjusts z order when grouping > [end of test] appState 1`] = ` { @@ -2395,7 +2395,7 @@ exports[`regression tests > adjusts z order when grouping > [end of test] histor exports[`regression tests > adjusts z order when grouping > [end of test] number of elements 1`] = `0`; -exports[`regression tests > adjusts z order when grouping > [end of test] number of renders 1`] = `14`; +exports[`regression tests > adjusts z order when grouping > [end of test] number of renders 1`] = `19`; exports[`regression tests > alt-drag duplicates an element > [end of test] appState 1`] = ` { @@ -2634,7 +2634,7 @@ exports[`regression tests > alt-drag duplicates an element > [end of test] histo exports[`regression tests > alt-drag duplicates an element > [end of test] number of elements 1`] = `0`; -exports[`regression tests > alt-drag duplicates an element > [end of test] number of renders 1`] = `9`; +exports[`regression tests > alt-drag duplicates an element > [end of test] number of renders 1`] = `10`; exports[`regression tests > arrow keys > [end of test] appState 1`] = ` { @@ -2799,7 +2799,7 @@ exports[`regression tests > arrow keys > [end of test] history 1`] = ` exports[`regression tests > arrow keys > [end of test] number of elements 1`] = `0`; -exports[`regression tests > arrow keys > [end of test] number of renders 1`] = `13`; +exports[`regression tests > arrow keys > [end of test] number of renders 1`] = `14`; exports[`regression tests > can drag element that covers another element, while another elem is selected > [end of test] appState 1`] = ` { @@ -3240,7 +3240,7 @@ exports[`regression tests > can drag element that covers another element, while exports[`regression tests > can drag element that covers another element, while another elem is selected > [end of test] number of elements 1`] = `0`; -exports[`regression tests > can drag element that covers another element, while another elem is selected > [end of test] number of renders 1`] = `15`; +exports[`regression tests > can drag element that covers another element, while another elem is selected > [end of test] number of renders 1`] = `19`; exports[`regression tests > change the properties of a shape > [end of test] appState 1`] = ` { @@ -3534,7 +3534,7 @@ exports[`regression tests > change the properties of a shape > [end of test] his exports[`regression tests > change the properties of a shape > [end of test] number of elements 1`] = `0`; -exports[`regression tests > change the properties of a shape > [end of test] number of renders 1`] = `10`; +exports[`regression tests > change the properties of a shape > [end of test] number of renders 1`] = `11`; exports[`regression tests > click on an element and drag it > [dragged] appState 1`] = ` { @@ -3776,7 +3776,7 @@ exports[`regression tests > click on an element and drag it > [dragged] history exports[`regression tests > click on an element and drag it > [dragged] number of elements 1`] = `1`; -exports[`regression tests > click on an element and drag it > [dragged] number of renders 1`] = `9`; +exports[`regression tests > click on an element and drag it > [dragged] number of renders 1`] = `10`; exports[`regression tests > click on an element and drag it > [end of test] appState 1`] = ` { @@ -4029,7 +4029,7 @@ exports[`regression tests > click on an element and drag it > [end of test] hist exports[`regression tests > click on an element and drag it > [end of test] number of elements 1`] = `0`; -exports[`regression tests > click on an element and drag it > [end of test] number of renders 1`] = `11`; +exports[`regression tests > click on an element and drag it > [end of test] number of renders 1`] = `12`; exports[`regression tests > click to select a shape > [end of test] appState 1`] = ` { @@ -4268,7 +4268,7 @@ exports[`regression tests > click to select a shape > [end of test] history 1`] exports[`regression tests > click to select a shape > [end of test] number of elements 1`] = `0`; -exports[`regression tests > click to select a shape > [end of test] number of renders 1`] = `10`; +exports[`regression tests > click to select a shape > [end of test] number of renders 1`] = `13`; exports[`regression tests > click-drag to select a group > [end of test] appState 1`] = ` { @@ -4609,7 +4609,7 @@ exports[`regression tests > click-drag to select a group > [end of test] history exports[`regression tests > click-drag to select a group > [end of test] number of elements 1`] = `0`; -exports[`regression tests > click-drag to select a group > [end of test] number of renders 1`] = `13`; +exports[`regression tests > click-drag to select a group > [end of test] number of renders 1`] = `19`; exports[`regression tests > deleting last but one element in editing group should unselect the group > [end of test] appState 1`] = ` { @@ -5081,7 +5081,7 @@ exports[`regression tests > deleting last but one element in editing group shoul exports[`regression tests > deleting last but one element in editing group should unselect the group > [end of test] number of elements 1`] = `0`; -exports[`regression tests > deleting last but one element in editing group should unselect the group > [end of test] number of renders 1`] = `12`; +exports[`regression tests > deleting last but one element in editing group should unselect the group > [end of test] number of renders 1`] = `20`; exports[`regression tests > deselects group of selected elements on pointer down when pointer doesn't hit any element > [end of test] appState 1`] = ` { @@ -5375,7 +5375,7 @@ exports[`regression tests > deselects group of selected elements on pointer down exports[`regression tests > deselects group of selected elements on pointer down when pointer doesn't hit any element > [end of test] number of elements 1`] = `0`; -exports[`regression tests > deselects group of selected elements on pointer down when pointer doesn't hit any element > [end of test] number of renders 1`] = `10`; +exports[`regression tests > deselects group of selected elements on pointer down when pointer doesn't hit any element > [end of test] number of renders 1`] = `14`; exports[`regression tests > deselects group of selected elements on pointer up when pointer hits common bounding box without hitting any element > [end of test] appState 1`] = ` { @@ -5641,7 +5641,7 @@ exports[`regression tests > deselects group of selected elements on pointer up w exports[`regression tests > deselects group of selected elements on pointer up when pointer hits common bounding box without hitting any element > [end of test] number of elements 1`] = `0`; -exports[`regression tests > deselects group of selected elements on pointer up when pointer hits common bounding box without hitting any element > [end of test] number of renders 1`] = `10`; +exports[`regression tests > deselects group of selected elements on pointer up when pointer hits common bounding box without hitting any element > [end of test] number of renders 1`] = `14`; exports[`regression tests > deselects selected element on pointer down when pointer doesn't hit any element > [end of test] appState 1`] = ` { @@ -5862,7 +5862,7 @@ exports[`regression tests > deselects selected element on pointer down when poin exports[`regression tests > deselects selected element on pointer down when pointer doesn't hit any element > [end of test] number of elements 1`] = `0`; -exports[`regression tests > deselects selected element on pointer down when pointer doesn't hit any element > [end of test] number of renders 1`] = `7`; +exports[`regression tests > deselects selected element on pointer down when pointer doesn't hit any element > [end of test] number of renders 1`] = `9`; exports[`regression tests > deselects selected element, on pointer up, when click hits element bounding box but doesn't hit the element > [end of test] appState 1`] = ` { @@ -6027,7 +6027,7 @@ exports[`regression tests > deselects selected element, on pointer up, when clic exports[`regression tests > deselects selected element, on pointer up, when click hits element bounding box but doesn't hit the element > [end of test] number of elements 1`] = `0`; -exports[`regression tests > deselects selected element, on pointer up, when click hits element bounding box but doesn't hit the element > [end of test] number of renders 1`] = `7`; +exports[`regression tests > deselects selected element, on pointer up, when click hits element bounding box but doesn't hit the element > [end of test] number of renders 1`] = `9`; exports[`regression tests > double click to edit a group > [end of test] appState 1`] = ` { @@ -6476,7 +6476,7 @@ exports[`regression tests > double click to edit a group > [end of test] history exports[`regression tests > double click to edit a group > [end of test] number of elements 1`] = `0`; -exports[`regression tests > double click to edit a group > [end of test] number of renders 1`] = `14`; +exports[`regression tests > double click to edit a group > [end of test] number of renders 1`] = `19`; exports[`regression tests > drags selected elements from point inside common bounding box that doesn't hit any element and keeps elements selected after dragging > [end of test] appState 1`] = ` { @@ -6790,7 +6790,7 @@ exports[`regression tests > drags selected elements from point inside common bou exports[`regression tests > drags selected elements from point inside common bounding box that doesn't hit any element and keeps elements selected after dragging > [end of test] number of elements 1`] = `0`; -exports[`regression tests > drags selected elements from point inside common bounding box that doesn't hit any element and keeps elements selected after dragging > [end of test] number of renders 1`] = `12`; +exports[`regression tests > drags selected elements from point inside common bounding box that doesn't hit any element and keeps elements selected after dragging > [end of test] number of renders 1`] = `15`; exports[`regression tests > draw every type of shape > [end of test] appState 1`] = ` { @@ -8854,7 +8854,7 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`] exports[`regression tests > draw every type of shape > [end of test] number of elements 1`] = `0`; -exports[`regression tests > draw every type of shape > [end of test] number of renders 1`] = `36`; +exports[`regression tests > draw every type of shape > [end of test] number of renders 1`] = `44`; exports[`regression tests > given a group of selected elements with an element that is not selected inside the group common bounding box when element that is not selected is clicked should switch selection to not selected element on pointer up > [end of test] appState 1`] = ` { @@ -9195,7 +9195,7 @@ exports[`regression tests > given a group of selected elements with an element t exports[`regression tests > given a group of selected elements with an element that is not selected inside the group common bounding box when element that is not selected is clicked should switch selection to not selected element on pointer up > [end of test] number of elements 1`] = `0`; -exports[`regression tests > given a group of selected elements with an element that is not selected inside the group common bounding box when element that is not selected is clicked should switch selection to not selected element on pointer up > [end of test] number of renders 1`] = `13`; +exports[`regression tests > given a group of selected elements with an element that is not selected inside the group common bounding box when element that is not selected is clicked should switch selection to not selected element on pointer up > [end of test] number of renders 1`] = `18`; exports[`regression tests > given a selected element A and a not selected element B with higher z-index than A and given B partially overlaps A when there's a shift-click on the overlapped section B is added to the selection > [end of test] appState 1`] = ` { @@ -9435,7 +9435,7 @@ exports[`regression tests > given a selected element A and a not selected elemen exports[`regression tests > given a selected element A and a not selected element B with higher z-index than A and given B partially overlaps A when there's a shift-click on the overlapped section B is added to the selection > [end of test] number of elements 1`] = `0`; -exports[`regression tests > given a selected element A and a not selected element B with higher z-index than A and given B partially overlaps A when there's a shift-click on the overlapped section B is added to the selection > [end of test] number of renders 1`] = `11`; +exports[`regression tests > given a selected element A and a not selected element B with higher z-index than A and given B partially overlaps A when there's a shift-click on the overlapped section B is added to the selection > [end of test] number of renders 1`] = `15`; exports[`regression tests > given selected element A with lower z-index than unselected element B and given B is partially over A when clicking intersection between A and B B should be selected on pointer up > [end of test] appState 1`] = ` { @@ -9631,7 +9631,7 @@ exports[`regression tests > given selected element A with lower z-index than uns exports[`regression tests > given selected element A with lower z-index than unselected element B and given B is partially over A when clicking intersection between A and B B should be selected on pointer up > [end of test] number of elements 1`] = `0`; -exports[`regression tests > given selected element A with lower z-index than unselected element B and given B is partially over A when clicking intersection between A and B B should be selected on pointer up > [end of test] number of renders 1`] = `5`; +exports[`regression tests > given selected element A with lower z-index than unselected element B and given B is partially over A when clicking intersection between A and B B should be selected on pointer up > [end of test] number of renders 1`] = `7`; exports[`regression tests > given selected element A with lower z-index than unselected element B and given B is partially over A when dragging on intersection between A and B A should be dragged and keep being selected > [end of test] appState 1`] = ` { @@ -9899,7 +9899,7 @@ exports[`regression tests > given selected element A with lower z-index than uns exports[`regression tests > given selected element A with lower z-index than unselected element B and given B is partially over A when dragging on intersection between A and B A should be dragged and keep being selected > [end of test] number of elements 1`] = `0`; -exports[`regression tests > given selected element A with lower z-index than unselected element B and given B is partially over A when dragging on intersection between A and B A should be dragged and keep being selected > [end of test] number of renders 1`] = `7`; +exports[`regression tests > given selected element A with lower z-index than unselected element B and given B is partially over A when dragging on intersection between A and B A should be dragged and keep being selected > [end of test] number of renders 1`] = `8`; exports[`regression tests > key 2 selects rectangle tool > [end of test] appState 1`] = ` { @@ -12728,7 +12728,7 @@ exports[`regression tests > make a group and duplicate it > [end of test] histor exports[`regression tests > make a group and duplicate it > [end of test] number of elements 1`] = `0`; -exports[`regression tests > make a group and duplicate it > [end of test] number of renders 1`] = `16`; +exports[`regression tests > make a group and duplicate it > [end of test] number of renders 1`] = `21`; exports[`regression tests > noop interaction after undo shouldn't create history entry > [end of test] appState 1`] = ` { @@ -12967,7 +12967,7 @@ exports[`regression tests > noop interaction after undo shouldn't create history exports[`regression tests > noop interaction after undo shouldn't create history entry > [end of test] number of elements 1`] = `0`; -exports[`regression tests > noop interaction after undo shouldn't create history entry > [end of test] number of renders 1`] = `13`; +exports[`regression tests > noop interaction after undo shouldn't create history entry > [end of test] number of renders 1`] = `17`; exports[`regression tests > pinch-to-zoom works > [end of test] appState 1`] = ` { @@ -13207,7 +13207,7 @@ exports[`regression tests > rerenders UI on language change > [end of test] hist exports[`regression tests > rerenders UI on language change > [end of test] number of elements 1`] = `0`; -exports[`regression tests > rerenders UI on language change > [end of test] number of renders 1`] = `4`; +exports[`regression tests > rerenders UI on language change > [end of test] number of renders 1`] = `5`; exports[`regression tests > shift click on selected element should deselect it on pointer up > [end of test] appState 1`] = ` { @@ -13372,7 +13372,7 @@ exports[`regression tests > shift click on selected element should deselect it o exports[`regression tests > shift click on selected element should deselect it on pointer up > [end of test] number of elements 1`] = `0`; -exports[`regression tests > shift click on selected element should deselect it on pointer up > [end of test] number of renders 1`] = `7`; +exports[`regression tests > shift click on selected element should deselect it on pointer up > [end of test] number of renders 1`] = `9`; exports[`regression tests > shift-click to multiselect, then drag > [end of test] appState 1`] = ` { @@ -13686,7 +13686,7 @@ exports[`regression tests > shift-click to multiselect, then drag > [end of test exports[`regression tests > shift-click to multiselect, then drag > [end of test] number of elements 1`] = `0`; -exports[`regression tests > shift-click to multiselect, then drag > [end of test] number of renders 1`] = `12`; +exports[`regression tests > shift-click to multiselect, then drag > [end of test] number of renders 1`] = `16`; exports[`regression tests > should group elements and ungroup them > [end of test] appState 1`] = ` { @@ -14244,7 +14244,7 @@ exports[`regression tests > should group elements and ungroup them > [end of tes exports[`regression tests > should group elements and ungroup them > [end of test] number of elements 1`] = `0`; -exports[`regression tests > should group elements and ungroup them > [end of test] number of renders 1`] = `15`; +exports[`regression tests > should group elements and ungroup them > [end of test] number of renders 1`] = `22`; exports[`regression tests > should show fill icons when element has non transparent background > [end of test] appState 1`] = ` { @@ -14452,7 +14452,7 @@ exports[`regression tests > should show fill icons when element has non transpar exports[`regression tests > should show fill icons when element has non transparent background > [end of test] number of elements 1`] = `0`; -exports[`regression tests > should show fill icons when element has non transparent background > [end of test] number of renders 1`] = `9`; +exports[`regression tests > should show fill icons when element has non transparent background > [end of test] number of renders 1`] = `10`; exports[`regression tests > single-clicking on a subgroup of a selected group should not alter selection > [end of test] appState 1`] = ` { @@ -15305,7 +15305,7 @@ exports[`regression tests > single-clicking on a subgroup of a selected group sh exports[`regression tests > single-clicking on a subgroup of a selected group should not alter selection > [end of test] number of elements 1`] = `0`; -exports[`regression tests > single-clicking on a subgroup of a selected group should not alter selection > [end of test] number of renders 1`] = `19`; +exports[`regression tests > single-clicking on a subgroup of a selected group should not alter selection > [end of test] number of renders 1`] = `31`; exports[`regression tests > spacebar + drag scrolls the canvas > [end of test] appState 1`] = ` { @@ -16209,7 +16209,7 @@ exports[`regression tests > supports nested groups > [end of test] history 1`] = exports[`regression tests > supports nested groups > [end of test] number of elements 1`] = `0`; -exports[`regression tests > supports nested groups > [end of test] number of renders 1`] = `15`; +exports[`regression tests > supports nested groups > [end of test] number of renders 1`] = `27`; exports[`regression tests > switches from group of selected elements to another element on pointer down > [end of test] appState 1`] = ` { @@ -16606,7 +16606,7 @@ exports[`regression tests > switches from group of selected elements to another exports[`regression tests > switches from group of selected elements to another element on pointer down > [end of test] number of elements 1`] = `0`; -exports[`regression tests > switches from group of selected elements to another element on pointer down > [end of test] number of renders 1`] = `13`; +exports[`regression tests > switches from group of selected elements to another element on pointer down > [end of test] number of renders 1`] = `18`; exports[`regression tests > switches selected element on pointer down > [end of test] appState 1`] = ` { @@ -16901,7 +16901,7 @@ exports[`regression tests > switches selected element on pointer down > [end of exports[`regression tests > switches selected element on pointer down > [end of test] number of elements 1`] = `0`; -exports[`regression tests > switches selected element on pointer down > [end of test] number of renders 1`] = `10`; +exports[`regression tests > switches selected element on pointer down > [end of test] number of renders 1`] = `13`; exports[`regression tests > two-finger scroll works > [end of test] appState 1`] = ` { @@ -17501,7 +17501,7 @@ exports[`regression tests > undo/redo drawing an element > [end of test] history exports[`regression tests > undo/redo drawing an element > [end of test] number of elements 1`] = `0`; -exports[`regression tests > undo/redo drawing an element > [end of test] number of renders 1`] = `21`; +exports[`regression tests > undo/redo drawing an element > [end of test] number of renders 1`] = `24`; exports[`regression tests > updates fontSize & fontFamily appState > [end of test] appState 1`] = ` { @@ -17621,7 +17621,7 @@ exports[`regression tests > updates fontSize & fontFamily appState > [end of tes exports[`regression tests > updates fontSize & fontFamily appState > [end of test] number of elements 1`] = `0`; -exports[`regression tests > updates fontSize & fontFamily appState > [end of test] number of renders 1`] = `5`; +exports[`regression tests > updates fontSize & fontFamily appState > [end of test] number of renders 1`] = `6`; exports[`regression tests > zoom hotkeys > [end of test] appState 1`] = ` { diff --git a/src/tests/dragCreate.test.tsx b/src/tests/dragCreate.test.tsx index 2f0b0a27d..71dc63eb5 100644 --- a/src/tests/dragCreate.test.tsx +++ b/src/tests/dragCreate.test.tsx @@ -47,7 +47,7 @@ describe("Test dragCreate", () => { fireEvent.pointerUp(canvas); expect(renderInteractiveScene).toHaveBeenCalledTimes(6); - expect(renderStaticScene).toHaveBeenCalledTimes(6); + expect(renderStaticScene).toHaveBeenCalledTimes(7); expect(h.state.selectionElement).toBeNull(); expect(h.elements.length).toEqual(1); @@ -79,7 +79,7 @@ describe("Test dragCreate", () => { fireEvent.pointerUp(canvas); expect(renderInteractiveScene).toHaveBeenCalledTimes(6); - expect(renderStaticScene).toHaveBeenCalledTimes(6); + expect(renderStaticScene).toHaveBeenCalledTimes(7); expect(h.state.selectionElement).toBeNull(); @@ -112,7 +112,7 @@ describe("Test dragCreate", () => { fireEvent.pointerUp(canvas); expect(renderInteractiveScene).toHaveBeenCalledTimes(6); - expect(renderStaticScene).toHaveBeenCalledTimes(6); + expect(renderStaticScene).toHaveBeenCalledTimes(7); expect(h.state.selectionElement).toBeNull(); expect(h.elements.length).toEqual(1); @@ -144,7 +144,7 @@ describe("Test dragCreate", () => { fireEvent.pointerUp(canvas); expect(renderInteractiveScene).toHaveBeenCalledTimes(6); - expect(renderStaticScene).toHaveBeenCalledTimes(6); + expect(renderStaticScene).toHaveBeenCalledTimes(7); expect(h.state.selectionElement).toBeNull(); expect(h.elements.length).toEqual(1); @@ -180,7 +180,7 @@ describe("Test dragCreate", () => { fireEvent.pointerUp(canvas); expect(renderInteractiveScene).toHaveBeenCalledTimes(6); - expect(renderStaticScene).toHaveBeenCalledTimes(6); + expect(renderStaticScene).toHaveBeenCalledTimes(7); expect(h.state.selectionElement).toBeNull(); expect(h.elements.length).toEqual(1); @@ -221,7 +221,7 @@ describe("Test dragCreate", () => { fireEvent.pointerUp(canvas); expect(renderInteractiveScene).toHaveBeenCalledTimes(5); - expect(renderStaticScene).toHaveBeenCalledTimes(5); + expect(renderStaticScene).toHaveBeenCalledTimes(6); expect(h.state.selectionElement).toBeNull(); expect(h.elements.length).toEqual(0); }); @@ -241,7 +241,7 @@ describe("Test dragCreate", () => { fireEvent.pointerUp(canvas); expect(renderInteractiveScene).toHaveBeenCalledTimes(5); - expect(renderStaticScene).toHaveBeenCalledTimes(5); + expect(renderStaticScene).toHaveBeenCalledTimes(6); expect(h.state.selectionElement).toBeNull(); expect(h.elements.length).toEqual(0); }); @@ -261,7 +261,7 @@ describe("Test dragCreate", () => { fireEvent.pointerUp(canvas); expect(renderInteractiveScene).toHaveBeenCalledTimes(5); - expect(renderStaticScene).toHaveBeenCalledTimes(5); + expect(renderStaticScene).toHaveBeenCalledTimes(6); expect(h.state.selectionElement).toBeNull(); expect(h.elements.length).toEqual(0); }); @@ -286,7 +286,7 @@ describe("Test dragCreate", () => { }); expect(renderInteractiveScene).toHaveBeenCalledTimes(6); - expect(renderStaticScene).toHaveBeenCalledTimes(6); + expect(renderStaticScene).toHaveBeenCalledTimes(7); expect(h.state.selectionElement).toBeNull(); expect(h.elements.length).toEqual(0); }); @@ -311,7 +311,7 @@ describe("Test dragCreate", () => { }); expect(renderInteractiveScene).toHaveBeenCalledTimes(6); - expect(renderStaticScene).toHaveBeenCalledTimes(6); + expect(renderStaticScene).toHaveBeenCalledTimes(7); expect(h.state.selectionElement).toBeNull(); expect(h.elements.length).toEqual(0); }); diff --git a/src/tests/linearElementEditor.test.tsx b/src/tests/linearElementEditor.test.tsx index 92e874918..bedcb0dfa 100644 --- a/src/tests/linearElementEditor.test.tsx +++ b/src/tests/linearElementEditor.test.tsx @@ -175,13 +175,13 @@ describe("Test Linear Elements", () => { const line = h.elements[0] as ExcalidrawLinearElement; expect(renderInteractiveScene).toHaveBeenCalledTimes(5); - expect(renderStaticScene).toHaveBeenCalledTimes(4); + expect(renderStaticScene).toHaveBeenCalledTimes(5); expect((h.elements[0] as ExcalidrawLinearElement).points.length).toEqual(2); // drag line from midpoint drag(midpoint, [midpoint[0] + delta, midpoint[1] + delta]); expect(renderInteractiveScene).toHaveBeenCalledTimes(9); - expect(renderStaticScene).toHaveBeenCalledTimes(5); + expect(renderStaticScene).toHaveBeenCalledTimes(7); expect(line.points.length).toEqual(3); expect(line.points).toMatchInlineSnapshot(` [ @@ -275,7 +275,7 @@ describe("Test Linear Elements", () => { // drag line from midpoint drag(midpoint, [midpoint[0] + delta, midpoint[1] + delta]); expect(renderInteractiveScene).toHaveBeenCalledTimes(14); - expect(renderStaticScene).toHaveBeenCalledTimes(5); + expect(renderStaticScene).toHaveBeenCalledTimes(8); expect(line.points.length).toEqual(3); expect(line.points).toMatchInlineSnapshot(` @@ -313,7 +313,7 @@ describe("Test Linear Elements", () => { fireEvent.click(screen.getByTitle("Round")); expect(renderInteractiveScene).toHaveBeenCalledTimes(10); - expect(renderStaticScene).toHaveBeenCalledTimes(6); + expect(renderStaticScene).toHaveBeenCalledTimes(8); const midPointsWithRoundEdge = LinearElementEditor.getEditorMidPoints( h.elements[0] as ExcalidrawLinearElement, @@ -359,7 +359,7 @@ describe("Test Linear Elements", () => { drag(startPoint, endPoint); expect(renderInteractiveScene).toHaveBeenCalledTimes(14); - expect(renderStaticScene).toHaveBeenCalledTimes(7); + expect(renderStaticScene).toHaveBeenCalledTimes(9); expect([line.x, line.y]).toEqual([ points[0][0] + deltaX, @@ -418,7 +418,7 @@ describe("Test Linear Elements", () => { ]); expect(renderInteractiveScene).toHaveBeenCalledTimes(21); - expect(renderStaticScene).toHaveBeenCalledTimes(7); + expect(renderStaticScene).toHaveBeenCalledTimes(11); expect(line.points.length).toEqual(5); @@ -459,7 +459,7 @@ describe("Test Linear Elements", () => { drag(hitCoords, [hitCoords[0] - delta, hitCoords[1] - delta]); expect(renderInteractiveScene).toHaveBeenCalledTimes(14); - expect(renderStaticScene).toHaveBeenCalledTimes(6); + expect(renderStaticScene).toHaveBeenCalledTimes(8); const newPoints = LinearElementEditor.getPointsGlobalCoordinates(line); expect([newPoints[0][0], newPoints[0][1]]).toEqual([ @@ -486,7 +486,7 @@ describe("Test Linear Elements", () => { drag(hitCoords, [hitCoords[0] + delta, hitCoords[1] + delta]); expect(renderInteractiveScene).toHaveBeenCalledTimes(14); - expect(renderStaticScene).toHaveBeenCalledTimes(6); + expect(renderStaticScene).toHaveBeenCalledTimes(8); const newPoints = LinearElementEditor.getPointsGlobalCoordinates(line); expect([newPoints[0][0], newPoints[0][1]]).toEqual([ @@ -521,7 +521,7 @@ describe("Test Linear Elements", () => { deletePoint(points[2]); expect(line.points.length).toEqual(3); expect(renderInteractiveScene).toHaveBeenCalledTimes(21); - expect(renderStaticScene).toHaveBeenCalledTimes(7); + expect(renderStaticScene).toHaveBeenCalledTimes(12); const newMidPoints = LinearElementEditor.getEditorMidPoints( line, @@ -568,7 +568,7 @@ describe("Test Linear Elements", () => { lastSegmentMidpoint[1] + delta, ]); expect(renderInteractiveScene).toHaveBeenCalledTimes(21); - expect(renderStaticScene).toHaveBeenCalledTimes(7); + expect(renderStaticScene).toHaveBeenCalledTimes(11); expect(line.points.length).toEqual(5); expect((h.elements[0] as ExcalidrawLinearElement).points) @@ -644,7 +644,7 @@ describe("Test Linear Elements", () => { drag(hitCoords, [hitCoords[0] + delta, hitCoords[1] + delta]); expect(renderInteractiveScene).toHaveBeenCalledTimes(14); - expect(renderStaticScene).toHaveBeenCalledTimes(6); + expect(renderStaticScene).toHaveBeenCalledTimes(8); const newPoints = LinearElementEditor.getPointsGlobalCoordinates(line); expect([newPoints[0][0], newPoints[0][1]]).toEqual([ diff --git a/src/tests/move.test.tsx b/src/tests/move.test.tsx index e3a9b69b8..4fe7ab0a6 100644 --- a/src/tests/move.test.tsx +++ b/src/tests/move.test.tsx @@ -43,7 +43,7 @@ describe("move element", () => { fireEvent.pointerUp(canvas); expect(renderInteractiveScene).toHaveBeenCalledTimes(6); - expect(renderStaticScene).toHaveBeenCalledTimes(6); + expect(renderStaticScene).toHaveBeenCalledTimes(7); expect(h.state.selectionElement).toBeNull(); expect(h.elements.length).toEqual(1); expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy(); @@ -85,7 +85,7 @@ describe("move element", () => { new Pointer("mouse").clickOn(rectB); expect(renderInteractiveScene).toHaveBeenCalledTimes(21); - expect(renderStaticScene).toHaveBeenCalledTimes(16); + expect(renderStaticScene).toHaveBeenCalledTimes(20); expect(h.state.selectionElement).toBeNull(); expect(h.elements.length).toEqual(3); expect(h.state.selectedElementIds[rectB.id]).toBeTruthy(); @@ -131,7 +131,7 @@ describe("duplicate element on move when ALT is clicked", () => { fireEvent.pointerUp(canvas); expect(renderInteractiveScene).toHaveBeenCalledTimes(6); - expect(renderStaticScene).toHaveBeenCalledTimes(6); + expect(renderStaticScene).toHaveBeenCalledTimes(7); expect(h.state.selectionElement).toBeNull(); expect(h.elements.length).toEqual(1); expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy(); diff --git a/src/tests/multiPointCreate.test.tsx b/src/tests/multiPointCreate.test.tsx index a5277088d..d26207eea 100644 --- a/src/tests/multiPointCreate.test.tsx +++ b/src/tests/multiPointCreate.test.tsx @@ -47,7 +47,7 @@ describe("remove shape in non linear elements", () => { fireEvent.pointerUp(canvas, { clientX: 30, clientY: 30 }); expect(renderInteractiveScene).toHaveBeenCalledTimes(5); - expect(renderStaticScene).toHaveBeenCalledTimes(5); + expect(renderStaticScene).toHaveBeenCalledTimes(6); expect(h.elements.length).toEqual(0); }); @@ -62,7 +62,7 @@ describe("remove shape in non linear elements", () => { fireEvent.pointerUp(canvas, { clientX: 30, clientY: 30 }); expect(renderInteractiveScene).toHaveBeenCalledTimes(5); - expect(renderStaticScene).toHaveBeenCalledTimes(5); + expect(renderStaticScene).toHaveBeenCalledTimes(6); expect(h.elements.length).toEqual(0); }); @@ -77,7 +77,7 @@ describe("remove shape in non linear elements", () => { fireEvent.pointerUp(canvas, { clientX: 30, clientY: 30 }); expect(renderInteractiveScene).toHaveBeenCalledTimes(5); - expect(renderStaticScene).toHaveBeenCalledTimes(5); + expect(renderStaticScene).toHaveBeenCalledTimes(6); expect(h.elements.length).toEqual(0); }); }); @@ -110,7 +110,7 @@ describe("multi point mode in linear elements", () => { }); expect(renderInteractiveScene).toHaveBeenCalledTimes(10); - expect(renderStaticScene).toHaveBeenCalledTimes(10); + expect(renderStaticScene).toHaveBeenCalledTimes(11); expect(h.elements.length).toEqual(1); const element = h.elements[0] as ExcalidrawLinearElement; @@ -154,7 +154,7 @@ describe("multi point mode in linear elements", () => { }); expect(renderInteractiveScene).toHaveBeenCalledTimes(10); - expect(renderStaticScene).toHaveBeenCalledTimes(10); + expect(renderStaticScene).toHaveBeenCalledTimes(11); expect(h.elements.length).toEqual(1); const element = h.elements[0] as ExcalidrawLinearElement; diff --git a/src/tests/selection.test.tsx b/src/tests/selection.test.tsx index 8df93351d..1afde34ad 100644 --- a/src/tests/selection.test.tsx +++ b/src/tests/selection.test.tsx @@ -308,7 +308,7 @@ describe("select single element on the scene", () => { fireEvent.pointerUp(canvas); expect(renderInteractiveScene).toHaveBeenCalledTimes(9); - expect(renderStaticScene).toHaveBeenCalledTimes(7); + expect(renderStaticScene).toHaveBeenCalledTimes(9); expect(h.state.selectionElement).toBeNull(); expect(h.elements.length).toEqual(1); expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy(); @@ -338,7 +338,7 @@ describe("select single element on the scene", () => { fireEvent.pointerUp(canvas); expect(renderInteractiveScene).toHaveBeenCalledTimes(9); - expect(renderStaticScene).toHaveBeenCalledTimes(7); + expect(renderStaticScene).toHaveBeenCalledTimes(9); expect(h.state.selectionElement).toBeNull(); expect(h.elements.length).toEqual(1); expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy(); @@ -368,7 +368,7 @@ describe("select single element on the scene", () => { fireEvent.pointerUp(canvas); expect(renderInteractiveScene).toHaveBeenCalledTimes(9); - expect(renderStaticScene).toHaveBeenCalledTimes(7); + expect(renderStaticScene).toHaveBeenCalledTimes(9); expect(h.state.selectionElement).toBeNull(); expect(h.elements.length).toEqual(1); expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy(); @@ -411,7 +411,7 @@ describe("select single element on the scene", () => { fireEvent.pointerUp(canvas); expect(renderInteractiveScene).toHaveBeenCalledTimes(9); - expect(renderStaticScene).toHaveBeenCalledTimes(7); + expect(renderStaticScene).toHaveBeenCalledTimes(9); expect(h.state.selectionElement).toBeNull(); expect(h.elements.length).toEqual(1); expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy(); @@ -453,7 +453,7 @@ describe("select single element on the scene", () => { fireEvent.pointerUp(canvas); expect(renderInteractiveScene).toHaveBeenCalledTimes(9); - expect(renderStaticScene).toHaveBeenCalledTimes(7); + expect(renderStaticScene).toHaveBeenCalledTimes(9); expect(h.state.selectionElement).toBeNull(); expect(h.elements.length).toEqual(1); expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy(); diff --git a/src/types.ts b/src/types.ts index 9eeaf7283..bc7770866 100644 --- a/src/types.ts +++ b/src/types.ts @@ -104,14 +104,13 @@ export type LastActiveTool = export type SidebarName = string; export type SidebarTabName = string; -export type CommonCanvasAppState = { +type _CommonCanvasAppState = { zoom: AppState["zoom"]; scrollX: AppState["scrollX"]; scrollY: AppState["scrollY"]; width: AppState["width"]; height: AppState["height"]; viewModeEnabled: AppState["viewModeEnabled"]; - editingElement: AppState["editingElement"]; editingGroupId: AppState["editingGroupId"]; // TODO: move to interactive canvas if possible selectedElementIds: AppState["selectedElementIds"]; // TODO: move to interactive canvas if possible frameToHighlight: AppState["frameToHighlight"]; // TODO: move to interactive canvas if possible @@ -121,34 +120,38 @@ export type CommonCanvasAppState = { pendingImageElementId: AppState["pendingImageElementId"]; }; -export type StaticCanvasAppState = CommonCanvasAppState & { - shouldCacheIgnoreZoom: AppState["shouldCacheIgnoreZoom"]; - /** null indicates transparent bg */ - viewBackgroundColor: AppState["viewBackgroundColor"] | null; - exportScale: AppState["exportScale"]; - selectedElementsAreBeingDragged: AppState["selectedElementsAreBeingDragged"]; - gridSize: AppState["gridSize"]; - frameRendering: AppState["frameRendering"]; -}; +export type StaticCanvasAppState = Readonly< + _CommonCanvasAppState & { + shouldCacheIgnoreZoom: AppState["shouldCacheIgnoreZoom"]; + /** null indicates transparent bg */ + viewBackgroundColor: AppState["viewBackgroundColor"] | null; + exportScale: AppState["exportScale"]; + selectedElementsAreBeingDragged: AppState["selectedElementsAreBeingDragged"]; + gridSize: AppState["gridSize"]; + frameRendering: AppState["frameRendering"]; + } +>; -export type InteractiveCanvasAppState = CommonCanvasAppState & { - // renderInteractiveScene - activeEmbeddable: AppState["activeEmbeddable"]; - editingLinearElement: AppState["editingLinearElement"]; - selectionElement: AppState["selectionElement"]; - selectedGroupIds: AppState["selectedGroupIds"]; - selectedLinearElement: AppState["selectedLinearElement"]; - multiElement: AppState["multiElement"]; - isBindingEnabled: AppState["isBindingEnabled"]; - suggestedBindings: AppState["suggestedBindings"]; - isRotating: AppState["isRotating"]; - elementsToHighlight: AppState["elementsToHighlight"]; - // App - openSidebar: AppState["openSidebar"]; - showHyperlinkPopup: AppState["showHyperlinkPopup"]; - // Collaborators - collaborators: AppState["collaborators"]; -}; +export type InteractiveCanvasAppState = Readonly< + _CommonCanvasAppState & { + // renderInteractiveScene + activeEmbeddable: AppState["activeEmbeddable"]; + editingLinearElement: AppState["editingLinearElement"]; + selectionElement: AppState["selectionElement"]; + selectedGroupIds: AppState["selectedGroupIds"]; + selectedLinearElement: AppState["selectedLinearElement"]; + multiElement: AppState["multiElement"]; + isBindingEnabled: AppState["isBindingEnabled"]; + suggestedBindings: AppState["suggestedBindings"]; + isRotating: AppState["isRotating"]; + elementsToHighlight: AppState["elementsToHighlight"]; + // App + openSidebar: AppState["openSidebar"]; + showHyperlinkPopup: AppState["showHyperlinkPopup"]; + // Collaborators + collaborators: AppState["collaborators"]; + } +>; export type AppState = { contextMenu: { From 49e9a2ab33c5db24b814ef5d93ef6dacaa262a9b Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Thu, 17 Aug 2023 13:47:32 +0200 Subject: [PATCH 3/7] build(deps): bump @excalidraw/excalidraw from 0.15.2 to 0.15.3 in /dev-docs (#6896) Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- dev-docs/package.json | 2 +- dev-docs/yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/dev-docs/package.json b/dev-docs/package.json index 0aee8e01f..cbf0d4334 100644 --- a/dev-docs/package.json +++ b/dev-docs/package.json @@ -18,7 +18,7 @@ "@docusaurus/core": "2.2.0", "@docusaurus/preset-classic": "2.2.0", "@docusaurus/theme-live-codeblock": "2.2.0", - "@excalidraw/excalidraw": "0.15.2", + "@excalidraw/excalidraw": "0.15.3", "@mdx-js/react": "^1.6.22", "clsx": "^1.2.1", "docusaurus-plugin-sass": "0.2.3", diff --git a/dev-docs/yarn.lock b/dev-docs/yarn.lock index 194a38e75..a2b61d255 100644 --- a/dev-docs/yarn.lock +++ b/dev-docs/yarn.lock @@ -1631,10 +1631,10 @@ url-loader "^4.1.1" webpack "^5.73.0" -"@excalidraw/excalidraw@0.15.2": - version "0.15.2" - resolved "https://registry.yarnpkg.com/@excalidraw/excalidraw/-/excalidraw-0.15.2.tgz#7dba4f6e10c52015a007efb75a9fc1afe598574c" - integrity sha512-rTI02kgWSTXiUdIkBxt9u/581F3eXcqQgJdIxmz54TFtG3ughoxO5fr4t7Fr2LZIturBPqfocQHGKZ0t2KLKgw== +"@excalidraw/excalidraw@0.15.3": + version "0.15.3" + resolved "https://registry.yarnpkg.com/@excalidraw/excalidraw/-/excalidraw-0.15.3.tgz#5dea570f76451adf68bc24d4bfdd67a375cfeab1" + integrity sha512-/gpY7fgMO/AEaFLWnPqzbY8H7ly+/zocFf7D0Is5sWNMD2mhult5tana12lXKLSJ6EAz7ubo1A7LajXzvJXJDA== "@hapi/hoek@^9.0.0": version "9.3.0" From 8101a351dbbf269b92b525e885e4dda5cdd51c2a Mon Sep 17 00:00:00 2001 From: David Luzar Date: Fri, 18 Aug 2023 00:28:26 +0200 Subject: [PATCH 4/7] fix: resetting deleted elements on duplication (#6906) --- src/components/App.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/App.tsx b/src/components/App.tsx index dad7a7b03..a975b8928 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -5868,7 +5868,7 @@ class App extends React.Component { .map((element) => element.id), ); - const elements = this.scene.getNonDeletedElements(); + const elements = this.scene.getElementsIncludingDeleted(); for (const element of elements) { if ( From 9cd5e1591718c7a717d135d80c5146d9fbe31879 Mon Sep 17 00:00:00 2001 From: David Luzar Date: Fri, 18 Aug 2023 16:14:57 +0200 Subject: [PATCH 5/7] fix: stabilize `selectedElementIds` when box selecting (#6912) --- src/groups.ts | 14 +++-- .../regressionTests.test.tsx.snap | 6 +-- src/tests/linearElementEditor.test.tsx | 8 +-- src/tests/selection.test.tsx | 53 +++++++++++++++++-- 4 files changed, 64 insertions(+), 17 deletions(-) diff --git a/src/groups.ts b/src/groups.ts index 8dbe2ba5c..dd5512ba1 100644 --- a/src/groups.ts +++ b/src/groups.ts @@ -71,6 +71,7 @@ export const selectGroupsForSelectedElements = (function () { selectedElements: readonly NonDeleted[], elements: readonly NonDeleted[], appState: Pick, + prevAppState: InteractiveCanvasAppState, ): SelectGroupsReturnType => { if ( lastReturnValue !== undefined && @@ -134,10 +135,13 @@ export const selectGroupsForSelectedElements = (function () { lastReturnValue = { editingGroupId: appState.editingGroupId, selectedGroupIds, - selectedElementIds: { - ...appState.selectedElementIds, - ...selectedElementIdsInGroups, - }, + selectedElementIds: makeNextSelectedElementIds( + { + ...appState.selectedElementIds, + ...selectedElementIdsInGroups, + }, + prevAppState, + ), }; return lastReturnValue; @@ -181,7 +185,7 @@ export const selectGroupsForSelectedElements = (function () { }; } - return _selectGroups(selectedElements, elements, appState); + return _selectGroups(selectedElements, elements, appState, prevAppState); }; selectGroupsForSelectedElements.clearCache = () => { diff --git a/src/tests/__snapshots__/regressionTests.test.tsx.snap b/src/tests/__snapshots__/regressionTests.test.tsx.snap index e9bbfc7ba..832f1652a 100644 --- a/src/tests/__snapshots__/regressionTests.test.tsx.snap +++ b/src/tests/__snapshots__/regressionTests.test.tsx.snap @@ -1734,7 +1734,7 @@ exports[`regression tests > Cmd/Ctrl-click exclusively select element under poin exports[`regression tests > Cmd/Ctrl-click exclusively select element under pointer > [end of test] number of elements 1`] = `0`; -exports[`regression tests > Cmd/Ctrl-click exclusively select element under pointer > [end of test] number of renders 1`] = `32`; +exports[`regression tests > Cmd/Ctrl-click exclusively select element under pointer > [end of test] number of renders 1`] = `30`; exports[`regression tests > Drags selected element when hitting only bounding box and keeps element selected > [end of test] appState 1`] = ` { @@ -4609,7 +4609,7 @@ exports[`regression tests > click-drag to select a group > [end of test] history exports[`regression tests > click-drag to select a group > [end of test] number of elements 1`] = `0`; -exports[`regression tests > click-drag to select a group > [end of test] number of renders 1`] = `19`; +exports[`regression tests > click-drag to select a group > [end of test] number of renders 1`] = `18`; exports[`regression tests > deleting last but one element in editing group should unselect the group > [end of test] appState 1`] = ` { @@ -15305,7 +15305,7 @@ exports[`regression tests > single-clicking on a subgroup of a selected group sh exports[`regression tests > single-clicking on a subgroup of a selected group should not alter selection > [end of test] number of elements 1`] = `0`; -exports[`regression tests > single-clicking on a subgroup of a selected group should not alter selection > [end of test] number of renders 1`] = `31`; +exports[`regression tests > single-clicking on a subgroup of a selected group should not alter selection > [end of test] number of renders 1`] = `30`; exports[`regression tests > spacebar + drag scrolls the canvas > [end of test] appState 1`] = ` { diff --git a/src/tests/linearElementEditor.test.tsx b/src/tests/linearElementEditor.test.tsx index bedcb0dfa..7c14b6ef7 100644 --- a/src/tests/linearElementEditor.test.tsx +++ b/src/tests/linearElementEditor.test.tsx @@ -275,7 +275,7 @@ describe("Test Linear Elements", () => { // drag line from midpoint drag(midpoint, [midpoint[0] + delta, midpoint[1] + delta]); expect(renderInteractiveScene).toHaveBeenCalledTimes(14); - expect(renderStaticScene).toHaveBeenCalledTimes(8); + expect(renderStaticScene).toHaveBeenCalledTimes(6); expect(line.points.length).toEqual(3); expect(line.points).toMatchInlineSnapshot(` @@ -418,7 +418,7 @@ describe("Test Linear Elements", () => { ]); expect(renderInteractiveScene).toHaveBeenCalledTimes(21); - expect(renderStaticScene).toHaveBeenCalledTimes(11); + expect(renderStaticScene).toHaveBeenCalledTimes(9); expect(line.points.length).toEqual(5); @@ -521,7 +521,7 @@ describe("Test Linear Elements", () => { deletePoint(points[2]); expect(line.points.length).toEqual(3); expect(renderInteractiveScene).toHaveBeenCalledTimes(21); - expect(renderStaticScene).toHaveBeenCalledTimes(12); + expect(renderStaticScene).toHaveBeenCalledTimes(9); const newMidPoints = LinearElementEditor.getEditorMidPoints( line, @@ -568,7 +568,7 @@ describe("Test Linear Elements", () => { lastSegmentMidpoint[1] + delta, ]); expect(renderInteractiveScene).toHaveBeenCalledTimes(21); - expect(renderStaticScene).toHaveBeenCalledTimes(11); + expect(renderStaticScene).toHaveBeenCalledTimes(9); expect(line.points.length).toEqual(5); expect((h.elements[0] as ExcalidrawLinearElement).points) diff --git a/src/tests/selection.test.tsx b/src/tests/selection.test.tsx index 1afde34ad..acae9dd8c 100644 --- a/src/tests/selection.test.tsx +++ b/src/tests/selection.test.tsx @@ -308,7 +308,7 @@ describe("select single element on the scene", () => { fireEvent.pointerUp(canvas); expect(renderInteractiveScene).toHaveBeenCalledTimes(9); - expect(renderStaticScene).toHaveBeenCalledTimes(9); + expect(renderStaticScene).toHaveBeenCalledTimes(8); expect(h.state.selectionElement).toBeNull(); expect(h.elements.length).toEqual(1); expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy(); @@ -338,7 +338,7 @@ describe("select single element on the scene", () => { fireEvent.pointerUp(canvas); expect(renderInteractiveScene).toHaveBeenCalledTimes(9); - expect(renderStaticScene).toHaveBeenCalledTimes(9); + expect(renderStaticScene).toHaveBeenCalledTimes(8); expect(h.state.selectionElement).toBeNull(); expect(h.elements.length).toEqual(1); expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy(); @@ -368,7 +368,7 @@ describe("select single element on the scene", () => { fireEvent.pointerUp(canvas); expect(renderInteractiveScene).toHaveBeenCalledTimes(9); - expect(renderStaticScene).toHaveBeenCalledTimes(9); + expect(renderStaticScene).toHaveBeenCalledTimes(8); expect(h.state.selectionElement).toBeNull(); expect(h.elements.length).toEqual(1); expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy(); @@ -411,7 +411,7 @@ describe("select single element on the scene", () => { fireEvent.pointerUp(canvas); expect(renderInteractiveScene).toHaveBeenCalledTimes(9); - expect(renderStaticScene).toHaveBeenCalledTimes(9); + expect(renderStaticScene).toHaveBeenCalledTimes(8); expect(h.state.selectionElement).toBeNull(); expect(h.elements.length).toEqual(1); expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy(); @@ -453,7 +453,7 @@ describe("select single element on the scene", () => { fireEvent.pointerUp(canvas); expect(renderInteractiveScene).toHaveBeenCalledTimes(9); - expect(renderStaticScene).toHaveBeenCalledTimes(9); + expect(renderStaticScene).toHaveBeenCalledTimes(8); expect(h.state.selectionElement).toBeNull(); expect(h.elements.length).toEqual(1); expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy(); @@ -477,3 +477,46 @@ describe("tool locking & selection", () => { } }); }); + +describe("selectedElementIds stability", () => { + beforeEach(async () => { + await render(); + }); + + it("box-selection should be stable when not changing selection", () => { + const rectangle = API.createElement({ + type: "rectangle", + x: 0, + y: 0, + width: 10, + height: 10, + }); + + h.elements = [rectangle]; + + const selectedElementIds_1 = h.state.selectedElementIds; + + mouse.downAt(-100, -100); + mouse.moveTo(-50, -50); + mouse.up(); + + expect(h.state.selectedElementIds).toBe(selectedElementIds_1); + + mouse.downAt(-50, -50); + mouse.moveTo(50, 50); + + const selectedElementIds_2 = h.state.selectedElementIds; + + expect(selectedElementIds_2).toEqual({ [rectangle.id]: true }); + + mouse.moveTo(60, 60); + + // box-selecting further without changing selection should keep + // selectedElementIds stable (the same object) + expect(h.state.selectedElementIds).toBe(selectedElementIds_2); + + mouse.up(); + + expect(h.state.selectedElementIds).toBe(selectedElementIds_2); + }); +}); From de1ebad75534d915234cca83c3205acf5446cd2d Mon Sep 17 00:00:00 2001 From: David Luzar Date: Fri, 18 Aug 2023 16:34:01 +0200 Subject: [PATCH 6/7] fix: regression in indexing when adding elements to frame (#6904) --- src/frame.test.tsx | 128 +++++++++++++++++++++++++++++++++++++++ src/frame.ts | 12 +--- src/tests/helpers/api.ts | 11 ++++ 3 files changed, 141 insertions(+), 10 deletions(-) create mode 100644 src/frame.test.tsx diff --git a/src/frame.test.tsx b/src/frame.test.tsx new file mode 100644 index 000000000..e9562a6f3 --- /dev/null +++ b/src/frame.test.tsx @@ -0,0 +1,128 @@ +import { + convertToExcalidrawElements, + Excalidraw, +} from "./packages/excalidraw/index"; +import { API } from "./tests/helpers/api"; +import { Pointer } from "./tests/helpers/ui"; +import { render } from "./tests/test-utils"; + +const { h } = window; +const mouse = new Pointer("mouse"); + +describe("adding elements to frames", () => { + type ElementType = string; + const assertOrder = ( + els: readonly { type: ElementType }[], + order: ElementType[], + ) => { + expect(els.map((el) => el.type)).toEqual(order); + }; + + const reorderElements = ( + els: readonly T[], + order: ElementType[], + ) => { + return order.reduce((acc: T[], el) => { + acc.push(els.find((e) => e.type === el)!); + return acc; + }, []); + }; + + describe("resizing frame over elements", () => { + const testElements = async ( + containerType: "arrow" | "rectangle", + initialOrder: ElementType[], + expectedOrder: ElementType[], + ) => { + await render(); + + const frame = API.createElement({ type: "frame", x: 0, y: 0 }); + + h.elements = reorderElements( + [ + frame, + ...convertToExcalidrawElements([ + { + type: containerType, + x: 100, + y: 100, + height: 10, + label: { text: "xx" }, + }, + ]), + ], + initialOrder, + ); + + assertOrder(h.elements, initialOrder); + + expect(h.elements[1].frameId).toBe(null); + expect(h.elements[2].frameId).toBe(null); + + const container = h.elements[1]; + + mouse.clickAt(0, 0); + mouse.downAt(frame.x + frame.width, frame.y + frame.height); + mouse.moveTo( + container.x + container.width + 100, + container.y + container.height + 100, + ); + mouse.up(); + assertOrder(h.elements, expectedOrder); + + expect(h.elements[0].frameId).toBe(frame.id); + expect(h.elements[1].frameId).toBe(frame.id); + }; + + it("resizing over text containers / labelled arrows", async () => { + await testElements( + "rectangle", + ["frame", "rectangle", "text"], + ["rectangle", "text", "frame"], + ); + await testElements( + "rectangle", + ["frame", "text", "rectangle"], + ["rectangle", "text", "frame"], + ); + await testElements( + "rectangle", + ["rectangle", "text", "frame"], + ["rectangle", "text", "frame"], + ); + await testElements( + "rectangle", + ["text", "rectangle", "frame"], + ["text", "rectangle", "frame"], + ); + + await testElements( + "arrow", + ["frame", "arrow", "text"], + ["arrow", "text", "frame"], + ); + await testElements( + "arrow", + ["text", "arrow", "frame"], + ["text", "arrow", "frame"], + ); + + // FIXME failing in tests (it fails to add elements to frame for some + // reason) but works in browser. (╯°□°)╯︵ ┻━┻ + // + // Looks like the `getElementsCompletelyInFrame()` doesn't work + // in these cases. + // + // await testElements( + // "arrow", + // ["arrow", "text", "frame"], + // ["arrow", "text", "frame"], + // ); + // await testElements( + // "arrow", + // ["frame", "text", "arrow"], + // ["text", "arrow", "frame"], + // ); + }); + }); +}); diff --git a/src/frame.ts b/src/frame.ts index 7f0f42d7a..d5599157c 100644 --- a/src/frame.ts +++ b/src/frame.ts @@ -469,14 +469,6 @@ export const addElementsToFrame = ( } let nextElements = allElements.slice(); - // Optimisation since findIndex on "newElements" is slow - const nextElementsIndex = nextElements.reduce( - (acc: Record, element, index) => { - acc[element.id] = index; - return acc; - }, - {}, - ); const frameBoundary = findIndex(nextElements, (e) => e.frameId === frame.id); for (const element of omitGroupsContainingFrames( @@ -492,8 +484,8 @@ export const addElementsToFrame = ( false, ); - const frameIndex = nextElementsIndex[frame.id] ?? -1; - const elementIndex = nextElementsIndex[element.id] ?? -1; + const frameIndex = findIndex(nextElements, (e) => e.id === frame.id); + const elementIndex = findIndex(nextElements, (e) => e.id === element.id); if (elementIndex < frameBoundary) { nextElements = [ diff --git a/src/tests/helpers/api.ts b/src/tests/helpers/api.ts index 46361cf38..1b1943de0 100644 --- a/src/tests/helpers/api.ts +++ b/src/tests/helpers/api.ts @@ -17,6 +17,7 @@ import path from "path"; import { getMimeType } from "../../data/blob"; import { newEmbeddableElement, + newFrameElement, newFreeDrawElement, newImageElement, } from "../../element/newElement"; @@ -24,6 +25,7 @@ import { Point } from "../../types"; import { getSelectedElements } from "../../scene/selection"; import { isLinearElementType } from "../../element/typeChecks"; import { Mutable } from "../../utility-types"; +import { assertNever } from "../../utils"; const readFile = util.promisify(fs.readFile); @@ -244,6 +246,15 @@ export class API { scale: rest.scale || [1, 1], }); break; + case "frame": + element = newFrameElement({ ...base, width, height }); + break; + default: + assertNever( + type, + `API.createElement: unimplemented element type ${type}}`, + ); + break; } if (element.type === "arrow") { element.startBinding = rest.startBinding ?? null; From 188921c24753e37aaa64939eea6ca4ec491bec29 Mon Sep 17 00:00:00 2001 From: zsviczian Date: Sun, 27 Aug 2023 19:30:47 +0200 Subject: [PATCH 7/7] fix: grid jittery after partition PR (#6935) --- src/renderer/renderScene.ts | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/renderer/renderScene.ts b/src/renderer/renderScene.ts index 736edb99d..0af732ce6 100644 --- a/src/renderer/renderScene.ts +++ b/src/renderer/renderScene.ts @@ -934,10 +934,8 @@ const _renderStaticScene = ({ strokeGrid( context, appState.gridSize, - -Math.ceil(appState.zoom.value / appState.gridSize) * appState.gridSize + - (appState.scrollX % appState.gridSize), - -Math.ceil(appState.zoom.value / appState.gridSize) * appState.gridSize + - (appState.scrollY % appState.gridSize), + appState.scrollX, + appState.scrollY, appState.zoom, normalizedWidth / appState.zoom.value, normalizedHeight / appState.zoom.value,