smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: canvas search (#8438)

Browse source 
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
This commit is contained in:
Ryan Di 2024-09-09 23:12:07 +08:00 • committed by GitHub
parent 5a11c70714
commit 6959a363f0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
35 changed files with 1424 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

17
packages/excalidraw/tests/__snapshots__/contextmenu.test.tsx.snap
View file

@ -866,6 +866,7 @@ exports[`contextMenu element > right-clicking on a group should select whole gro
"scrollX": 0,
"scrollY": 0,
"scrolledOutside": false,
"searchMatches": [],
"selectedElementIds": {
"id0": true,
"id1": true,
@ -1068,6 +1069,7 @@ exports[`contextMenu element > selecting 'Add to library' in context menu adds e
"scrollX": 0,
"scrollY": 0,
"scrolledOutside": false,
"searchMatches": [],
"selectedElementIds": {
"id0": true,
},
@ -1283,6 +1285,7 @@ exports[`contextMenu element > selecting 'Bring forward' in context menu brings
"scrollX": 0,
"scrollY": 0,
"scrolledOutside": false,
"searchMatches": [],
"selectedElementIds": {
"id0": true,
},
@ -1613,6 +1616,7 @@ exports[`contextMenu element > selecting 'Bring to front' in context menu brings
"scrollX": 0,
"scrollY": 0,
"scrolledOutside": false,
"searchMatches": [],
"selectedElementIds": {
"id0": true,
},
@ -1943,6 +1947,7 @@ exports[`contextMenu element > selecting 'Copy styles' in context menu copies st
"scrollX": 0,
"scrollY": 0,
"scrolledOutside": false,
"searchMatches": [],
"selectedElementIds": {
"id0": true,
},
@ -2158,6 +2163,7 @@ exports[`contextMenu element > selecting 'Delete' in context menu deletes elemen
"scrollX": 0,
"scrollY": 0,
"scrolledOutside": false,
"searchMatches": [],
"selectedElementIds": {},
"selectedElementsAreBeingDragged": false,
"selectedGroupIds": {},
@ -2397,6 +2403,7 @@ exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates
"scrollX": 0,
"scrollY": 0,
"scrolledOutside": false,
"searchMatches": [],
"selectedElementIds": {
"id0_copy": true,
},
@ -2699,6 +2706,7 @@ exports[`contextMenu element > selecting 'Group selection' in context menu group
"scrollX": 0,
"scrollY": 0,
"scrolledOutside": false,
"searchMatches": [],
"selectedElementIds": {
"id0": true,
"id1": true,
@ -3065,6 +3073,7 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
"scrollX": 0,
"scrollY": 0,
"scrolledOutside": false,
"searchMatches": [],
"selectedElementIds": {
"id0": true,
},
@ -3539,6 +3548,7 @@ exports[`contextMenu element > selecting 'Send backward' in context menu sends e
"scrollX": 0,
"scrollY": 0,
"scrolledOutside": false,
"searchMatches": [],
"selectedElementIds": {
"id1": true,
},
@ -3861,6 +3871,7 @@ exports[`contextMenu element > selecting 'Send to back' in context menu sends el
"scrollX": 0,
"scrollY": 0,
"scrolledOutside": false,
"searchMatches": [],
"selectedElementIds": {
"id1": true,
},
@ -4185,6 +4196,7 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
"scrollX": 0,
"scrollY": 0,
"scrolledOutside": false,
"searchMatches": [],
"selectedElementIds": {
"id0": true,
"id1": true,
@ -5370,6 +5382,7 @@ exports[`contextMenu element > shows 'Group selection' in context menu for multi
"scrollX": 0,
"scrollY": 0,
"scrolledOutside": false,
"searchMatches": [],
"selectedElementIds": {
"id0": true,
"id1": true,
@ -6496,6 +6509,7 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro
"scrollX": 0,
"scrollY": 0,
"scrolledOutside": false,
"searchMatches": [],
"selectedElementIds": {
"id0": true,
"id1": true,
@ -7431,6 +7445,7 @@ exports[`contextMenu element > shows context menu for canvas > [end of test] app
"scrollX": 0,
"scrollY": 0,
"scrolledOutside": false,
"searchMatches": [],
"selectedElementIds": {},
"selectedElementsAreBeingDragged": false,
"selectedGroupIds": {},
@ -8339,6 +8354,7 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
"scrollX": 0,
"scrollY": 0,
"scrolledOutside": false,
"searchMatches": [],
"selectedElementIds": {
"id0": true,
},
@ -9235,6 +9251,7 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
"scrollX": 0,
"scrollY": 0,
"scrolledOutside": false,
"searchMatches": [],
"selectedElementIds": {
"id1": true,
},

49
packages/excalidraw/tests/__snapshots__/excalidraw.test.tsx.snap
View file

@ -239,6 +239,55 @@ exports[`<Excalidraw/> > Test UIOptions prop > Test canvasActions > should rende
Ctrl+Shift+E
</div>
</button>
<button
aria-label="Find on canvas"
class="dropdown-menu-item dropdown-menu-item-base"
data-testid="search-menu-button"
title="Find on canvas"
>
<div
class="dropdown-menu-item__icon"
>
<svg
aria-hidden="true"
class=""
fill="none"
focusable="false"
role="img"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
>
<g
stroke-width="1.5"
>
<path
d="M0 0h24v24H0z"
fill="none"
stroke="none"
/>
<path
d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"
/>
<path
d="M21 21l-6 -6"
/>
</g>
</svg>
</div>
<div
class="dropdown-menu-item__text"
>
Find on canvas
</div>
<div
class="dropdown-menu-item__shortcut"
>
Ctrl+F
</div>
</button>
<button
aria-label="Help"
class="dropdown-menu-item dropdown-menu-item-base"

58
packages/excalidraw/tests/__snapshots__/history.test.tsx.snap
View file

@ -80,6 +80,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
"resizingElement": null,
"scrollX": 0,
"scrollY": 0,
"searchMatches": [],
"selectedElementIds": {
"id166": true,
},
@ -681,6 +682,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
"resizingElement": null,
"scrollX": 0,
"scrollY": 0,
"searchMatches": [],
"selectedElementIds": {
"id161": true,
},
@ -1187,6 +1189,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
"resizingElement": null,
"scrollX": 0,
"scrollY": 0,
"searchMatches": [],
"selectedElementIds": {},
"selectedElementsAreBeingDragged": false,
"selectedGroupIds": {},
@ -1554,6 +1557,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
"resizingElement": null,
"scrollX": 0,
"scrollY": 0,
"searchMatches": [],
"selectedElementIds": {},
"selectedElementsAreBeingDragged": false,
"selectedGroupIds": {},
@ -1922,6 +1926,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
"resizingElement": null,
"scrollX": 0,
"scrollY": 0,
"searchMatches": [],
"selectedElementIds": {},
"selectedElementsAreBeingDragged": false,
"selectedGroupIds": {},
@ -2185,6 +2190,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
"resizingElement": null,
"scrollX": 0,
"scrollY": 0,
"searchMatches": [],
"selectedElementIds": {
"id180": true,
},
@ -2627,6 +2633,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
"resizingElement": null,
"scrollX": 0,
"scrollY": 0,
"searchMatches": [],
"selectedElementIds": {},
"selectedElementsAreBeingDragged": false,
"selectedGroupIds": {},
@ -2925,6 +2932,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
"resizingElement": null,
"scrollX": 0,
"scrollY": 0,
"searchMatches": [],
"selectedElementIds": {},
"selectedElementsAreBeingDragged": false,
"selectedGroupIds": {},
@ -3208,6 +3216,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
"resizingElement": null,
"scrollX": 0,
"scrollY": 0,
"searchMatches": [],
"selectedElementIds": {},
"selectedElementsAreBeingDragged": false,
"selectedGroupIds": {},
@ -3501,6 +3510,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
"resizingElement": null,
"scrollX": 0,
"scrollY": 0,
"searchMatches": [],
"selectedElementIds": {},
"selectedElementsAreBeingDragged": false,
"selectedGroupIds": {},
@ -3786,6 +3796,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
"resizingElement": null,
"scrollX": 0,
"scrollY": 0,
"searchMatches": [],
"selectedElementIds": {},
"selectedElementsAreBeingDragged": false,
"selectedGroupIds": {},
@ -4020,6 +4031,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
"resizingElement": null,
"scrollX": 0,
"scrollY": 0,
"searchMatches": [],
"selectedElementIds": {},
"selectedElementsAreBeingDragged": false,
"selectedGroupIds": {},
@ -4278,6 +4290,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
"resizingElement": null,
"scrollX": 0,
"scrollY": 0,
"searchMatches": [],
"selectedElementIds": {},
"selectedElementsAreBeingDragged": false,
"selectedGroupIds": {},
@ -4550,6 +4563,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
"resizingElement": null,
"scrollX": 0,
"scrollY": 0,
"searchMatches": [],
"selectedElementIds": {},
"selectedElementsAreBeingDragged": false,
"selectedGroupIds": {},
@ -4780,6 +4794,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
"resizingElement": null,
"scrollX": 0,
"scrollY": 0,
"searchMatches": [],
"selectedElementIds": {},
"selectedElementsAreBeingDragged": false,
"selectedGroupIds": {},
@ -5010,6 +5025,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
"resizingElement": null,
"scrollX": 0,
"scrollY": 0,
"searchMatches": [],
"selectedElementIds": {},
"selectedElementsAreBeingDragged": false,
"selectedGroupIds": {},
@ -5238,6 +5254,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
"resizingElement": null,
"scrollX": 0,
"scrollY": 0,
"searchMatches": [],
"selectedElementIds": {},
"selectedElementsAreBeingDragged": false,
"selectedGroupIds": {},
@ -5466,6 +5483,7 @@ exports[`history > multiplayer undo/redo > conflicts in frames and their childre
"resizingElement": null,
"scrollX": 0,
"scrollY": 0,
"searchMatches": [],
"selectedElementIds": {},
"selectedElementsAreBeingDragged": false,
"selectedGroupIds": {},
@ -5723,6 +5741,7 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
"resizingElement": null,
"scrollX": 0,
"scrollY": 0,
"searchMatches": [],
"selectedElementIds": {},
"selectedElementsAreBeingDragged": false,
"selectedGroupIds": {},
@ -6053,6 +6072,7 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
"resizingElement": null,
"scrollX": 0,
"scrollY": 0,
"searchMatches": [],
"selectedElementIds": {},
"selectedElementsAreBeingDragged": false,
"selectedGroupIds": {},
@ -6477,6 +6497,7 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
"resizingElement": null,
"scrollX": 0,
"scrollY": 0,
"searchMatches": [],
"selectedElementIds": {
"id100": true,
"id101": true,
@ -6855,6 +6876,7 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
"resizingElement": null,
"scrollX": 0,
"scrollY": 0,
"searchMatches": [],
"selectedElementIds": {
"id105": true,
"id106": true,
@ -7170,6 +7192,7 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
"resizingElement": null,
"scrollX": 0,
"scrollY": 0,
"searchMatches": [],
"selectedElementIds": {
"id113": true,
},
@ -7467,6 +7490,7 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
"resizingElement": null,
"scrollX": 0,
"scrollY": 0,
"searchMatches": [],
"selectedElementIds": {},
"selectedElementsAreBeingDragged": false,
"selectedGroupIds": {},
@ -7695,6 +7719,7 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
"resizingElement": null,
"scrollX": 0,
"scrollY": 0,
"searchMatches": [],
"selectedElementIds": {},
"selectedElementsAreBeingDragged": false,
"selectedGroupIds": {},
@ -8049,6 +8074,7 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
"resizingElement": null,
"scrollX": 0,
"scrollY": 0,
"searchMatches": [],
"selectedElementIds": {},
"selectedElementsAreBeingDragged": false,
"selectedGroupIds": {},
@ -8406,6 +8432,7 @@ exports[`history > multiplayer undo/redo > should not let remote changes to inte
"resizingElement": null,
"scrollX": 0,
"scrollY": 0,
"searchMatches": [],
"selectedElementIds": {
"id127": true,
"id128": true,
@ -8806,6 +8833,7 @@ exports[`history > multiplayer undo/redo > should not let remote changes to inte
"resizingElement": null,
"scrollX": 0,
"scrollY": 0,
"searchMatches": [],
"selectedElementIds": {},
"selectedElementsAreBeingDragged": false,
"selectedGroupIds": {},
@ -9092,6 +9120,7 @@ exports[`history > multiplayer undo/redo > should not let remote changes to inte
"resizingElement": null,
"scrollX": 0,
"scrollY": 0,
"searchMatches": [],
"selectedElementIds": {
"id124": true,
},
@ -9356,6 +9385,7 @@ exports[`history > multiplayer undo/redo > should not override remote changes on
"resizingElement": null,
"scrollX": 0,
"scrollY": 0,
"searchMatches": [],
"selectedElementIds": {
"id81": true,
},
@ -9619,6 +9649,7 @@ exports[`history > multiplayer undo/redo > should not override remote changes on
"resizingElement": null,
"scrollX": 0,
"scrollY": 0,
"searchMatches": [],
"selectedElementIds": {
"id83": true,
},
@ -9852,6 +9883,7 @@ exports[`history > multiplayer undo/redo > should override remotely added groups
"resizingElement": null,
"scrollX": 0,
"scrollY": 0,
"searchMatches": [],
"selectedElementIds": {},
"selectedElementsAreBeingDragged": false,
"selectedGroupIds": {},
@ -10149,6 +10181,7 @@ exports[`history > multiplayer undo/redo > should override remotely added points
"resizingElement": null,
"scrollX": 0,
"scrollY": 0,
"searchMatches": [],
"selectedElementIds": {
"id92": true,
},
@ -10488,6 +10521,7 @@ exports[`history > multiplayer undo/redo > should redistribute deltas when eleme
"resizingElement": null,
"scrollX": 0,
"scrollY": 0,
"searchMatches": [],
"selectedElementIds": {},
"selectedElementsAreBeingDragged": false,
"selectedGroupIds": {},
@ -10725,6 +10759,7 @@ exports[`history > multiplayer undo/redo > should redraw arrows on undo > [end o
"resizingElement": null,
"scrollX": 0,
"scrollY": 0,
"searchMatches": [],
"selectedElementIds": {},
"selectedElementsAreBeingDragged": false,
"selectedGroupIds": {},
@ -11174,6 +11209,7 @@ exports[`history > multiplayer undo/redo > should update history entries after r
"resizingElement": null,
"scrollX": 0,
"scrollY": 0,
"searchMatches": [],
"selectedElementIds": {
"id84": true,
},
@ -11427,6 +11463,7 @@ exports[`history > singleplayer undo/redo > remounting undo/redo buttons should
"resizingElement": null,
"scrollX": 0,
"scrollY": 0,
"searchMatches": [],
"selectedElementIds": {},
"selectedElementsAreBeingDragged": false,
"selectedGroupIds": {},
@ -11665,6 +11702,7 @@ exports[`history > singleplayer undo/redo > should clear the redo stack on eleme
"resizingElement": null,
"scrollX": 0,
"scrollY": 0,
"searchMatches": [],
"selectedElementIds": {
"id14": true,
},
@ -11905,6 +11943,7 @@ exports[`history > singleplayer undo/redo > should create entry when selecting f
"resizingElement": null,
"scrollX": 0,
"scrollY": 0,
"searchMatches": [],
"selectedElementIds": {},
"selectedElementsAreBeingDragged": false,
"selectedGroupIds": {},
@ -12308,6 +12347,7 @@ exports[`history > singleplayer undo/redo > should create new history entry on s
"resizingElement": null,
"scrollX": -50,
"scrollY": -50,
"searchMatches": [],
"selectedElementIds": {},
"selectedElementsAreBeingDragged": false,
"selectedGroupIds": {},
@ -12551,6 +12591,7 @@ exports[`history > singleplayer undo/redo > should disable undo/redo buttons whe
"resizingElement": null,
"scrollX": 0,
"scrollY": 0,
"searchMatches": [],
"selectedElementIds": {
"id78": true,
},
@ -12791,6 +12832,7 @@ exports[`history > singleplayer undo/redo > should end up with no history entry
"resizingElement": null,
"scrollX": 0,
"scrollY": 0,
"searchMatches": [],
"selectedElementIds": {
"id19": true,
},
@ -13033,6 +13075,7 @@ exports[`history > singleplayer undo/redo > should iterate through the history w
"resizingElement": null,
"scrollX": 0,
"scrollY": 0,
"searchMatches": [],
"selectedElementIds": {},
"selectedElementsAreBeingDragged": false,
"selectedGroupIds": {},
@ -13277,6 +13320,7 @@ exports[`history > singleplayer undo/redo > should not clear the redo stack on s
"resizingElement": null,
"scrollX": 0,
"scrollY": 0,
"searchMatches": [],
"selectedElementIds": {
"id8": true,
},
@ -13611,6 +13655,7 @@ exports[`history > singleplayer undo/redo > should not collapse when applying co
"resizingElement": null,
"scrollX": 0,
"scrollY": 0,
"searchMatches": [],
"selectedElementIds": {},
"selectedElementsAreBeingDragged": false,
"selectedGroupIds": {},
@ -13779,6 +13824,7 @@ exports[`history > singleplayer undo/redo > should not end up with history entry
"resizingElement": null,
"scrollX": 0,
"scrollY": 0,
"searchMatches": [],
"selectedElementIds": {
"id1": true,
"id2": true,
@ -14069,6 +14115,7 @@ exports[`history > singleplayer undo/redo > should not end up with history entry
"resizingElement": null,
"scrollX": 0,
"scrollY": 0,
"searchMatches": [],
"selectedElementIds": {},
"selectedElementsAreBeingDragged": false,
"selectedGroupIds": {},
@ -14334,6 +14381,7 @@ exports[`history > singleplayer undo/redo > should not override appstate changes
"resizingElement": null,
"scrollX": 0,
"scrollY": 0,
"searchMatches": [],
"selectedElementIds": {
"id11": true,
},
@ -14609,6 +14657,7 @@ exports[`history > singleplayer undo/redo > should support appstate name or view
"resizingElement": null,
"scrollX": 0,
"scrollY": 0,
"searchMatches": [],
"selectedElementIds": {},
"selectedElementsAreBeingDragged": false,
"selectedGroupIds": {},
@ -14768,6 +14817,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
"resizingElement": null,
"scrollX": 0,
"scrollY": 0,
"searchMatches": [],
"selectedElementIds": {
"id55": true,
},
@ -15463,6 +15513,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
"resizingElement": null,
"scrollX": 0,
"scrollY": 0,
"searchMatches": [],
"selectedElementIds": {
"id49": true,
},
@ -16082,6 +16133,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
"resizingElement": null,
"scrollX": 0,
"scrollY": 0,
"searchMatches": [],
"selectedElementIds": {
"id61": true,
},
@ -16699,6 +16751,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
"resizingElement": null,
"scrollX": 0,
"scrollY": 0,
"searchMatches": [],
"selectedElementIds": {
"id62": true,
},
@ -17412,6 +17465,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
"resizingElement": null,
"scrollX": 0,
"scrollY": 0,
"searchMatches": [],
"selectedElementIds": {
"id69": true,
"id71": true,
@ -18161,6 +18215,7 @@ exports[`history > singleplayer undo/redo > should support changes in elements'
"resizingElement": null,
"scrollX": 0,
"scrollY": 0,
"searchMatches": [],
"selectedElementIds": {
"id39": true,
"id41": true,
@ -18634,6 +18689,7 @@ exports[`history > singleplayer undo/redo > should support duplication of groups
"resizingElement": null,
"scrollX": 0,
"scrollY": 0,
"searchMatches": [],
"selectedElementIds": {
"id35_copy_copy": true,
"id36_copy_copy": true,
@ -19155,6 +19211,7 @@ exports[`history > singleplayer undo/redo > should support element creation, del
"resizingElement": null,
"scrollX": 0,
"scrollY": 0,
"searchMatches": [],
"selectedElementIds": {},
"selectedElementsAreBeingDragged": false,
"selectedGroupIds": {},
@ -19610,6 +19667,7 @@ exports[`history > singleplayer undo/redo > should support linear element creati
"resizingElement": null,
"scrollX": 0,
"scrollY": 0,
"searchMatches": [],
"selectedElementIds": {
"id27": true,
},

52
packages/excalidraw/tests/__snapshots__/regressionTests.test.tsx.snap
View file

@ -84,6 +84,7 @@ exports[`given element A and group of elements B and given both are selected whe
"scrollX": 0,
"scrollY": 0,
"scrolledOutside": false,
"searchMatches": [],
"selectedElementIds": {
"id0": true,
"id2": true,
@ -495,6 +496,7 @@ exports[`given element A and group of elements B and given both are selected whe
"scrollX": 0,
"scrollY": 0,
"scrolledOutside": false,
"searchMatches": [],
"selectedElementIds": {
"id1": true,
},
@ -893,6 +895,7 @@ exports[`regression tests > Cmd/Ctrl-click exclusively select element under poin
"scrollX": 0,
"scrollY": 0,
"scrolledOutside": false,
"searchMatches": [],
"selectedElementIds": {
"id7": true,
},
@ -1434,6 +1437,7 @@ exports[`regression tests > Drags selected element when hitting only bounding bo
"scrollX": 0,
"scrollY": 0,
"scrolledOutside": false,
"searchMatches": [],
"selectedElementIds": {
"id0": true,
},
@ -1636,6 +1640,7 @@ exports[`regression tests > adjusts z order when grouping > [end of test] appSta
"scrollX": 0,
"scrollY": 0,
"scrolledOutside": false,
"searchMatches": [],
"selectedElementIds": {
"id0": true,
"id2": true,
@ -2007,6 +2012,7 @@ exports[`regression tests > alt-drag duplicates an element > [end of test] appSt
"scrollX": 0,
"scrollY": 0,
"scrolledOutside": false,
"searchMatches": [],
"selectedElementIds": {
"id0": true,
},
@ -2241,6 +2247,7 @@ exports[`regression tests > arrow keys > [end of test] appState 1`] = `
"scrollX": 0,
"scrollY": 0,
"scrolledOutside": false,
"searchMatches": [],
"selectedElementIds": {
"id0": true,
},
@ -2419,6 +2426,7 @@ exports[`regression tests > can drag element that covers another element, while
"scrollX": 0,
"scrollY": 0,
"scrolledOutside": false,
"searchMatches": [],
"selectedElementIds": {
"id1": true,
},
@ -2733,6 +2741,7 @@ exports[`regression tests > change the properties of a shape > [end of test] app
"scrollX": 0,
"scrollY": 0,
"scrolledOutside": false,
"searchMatches": [],
"selectedElementIds": {
"id0": true,
},
@ -2977,6 +2986,7 @@ exports[`regression tests > click on an element and drag it > [dragged] appState
"scrollX": 0,
"scrollY": 0,
"scrolledOutside": false,
"searchMatches": [],
"selectedElementIds": {
"id0": true,
},
@ -3216,6 +3226,7 @@ exports[`regression tests > click on an element and drag it > [end of test] appS
"scrollX": 0,
"scrollY": 0,
"scrolledOutside": false,
"searchMatches": [],
"selectedElementIds": {
"id0": true,
},
@ -3442,6 +3453,7 @@ exports[`regression tests > click to select a shape > [end of test] appState 1`]
"scrollX": 0,
"scrollY": 0,
"scrolledOutside": false,
"searchMatches": [],
"selectedElementIds": {
"id0": true,
},
@ -3694,6 +3706,7 @@ exports[`regression tests > click-drag to select a group > [end of test] appStat
"scrollX": 0,
"scrollY": 0,
"scrolledOutside": false,
"searchMatches": [],
"selectedElementIds": {
"id0": true,
"id1": true,
@ -3999,6 +4012,7 @@ exports[`regression tests > deleting last but one element in editing group shoul
"scrollX": 0,
"scrollY": 0,
"scrolledOutside": false,
"searchMatches": [],
"selectedElementIds": {
"id1": true,
},
@ -4412,6 +4426,7 @@ exports[`regression tests > deselects group of selected elements on pointer down
"scrollX": 0,
"scrollY": 0,
"scrolledOutside": false,
"searchMatches": [],
"selectedElementIds": {},
"selectedElementsAreBeingDragged": false,
"selectedGroupIds": {},
@ -4691,6 +4706,7 @@ exports[`regression tests > deselects group of selected elements on pointer up w
"scrollX": 0,
"scrollY": 0,
"scrolledOutside": false,
"searchMatches": [],
"selectedElementIds": {},
"selectedElementsAreBeingDragged": false,
"selectedGroupIds": {},
@ -4939,6 +4955,7 @@ exports[`regression tests > deselects selected element on pointer down when poin
"scrollX": 0,
"scrollY": 0,
"scrolledOutside": false,
"searchMatches": [],
"selectedElementIds": {},
"selectedElementsAreBeingDragged": false,
"selectedGroupIds": {},
@ -5145,6 +5162,7 @@ exports[`regression tests > deselects selected element, on pointer up, when clic
"scrollX": 0,
"scrollY": 0,
"scrolledOutside": false,
"searchMatches": [],
"selectedElementIds": {},
"selectedElementsAreBeingDragged": false,
"selectedGroupIds": {},
@ -5338,6 +5356,7 @@ exports[`regression tests > double click to edit a group > [end of test] appStat
"scrollX": 0,
"scrollY": 0,
"scrolledOutside": false,
"searchMatches": [],
"selectedElementIds": {
"id2": true,
},
@ -5719,6 +5738,7 @@ exports[`regression tests > drags selected elements from point inside common bou
"scrollX": 0,
"scrollY": 0,
"scrolledOutside": false,
"searchMatches": [],
"selectedElementIds": {
"id0": true,
"id1": true,
@ -6002,6 +6022,7 @@ exports[`regression tests > draw every type of shape > [end of test] appState 1`
"scrollX": 0,
"scrollY": 0,
"scrolledOutside": false,
"searchMatches": [],
"selectedElementIds": {},
"selectedElementsAreBeingDragged": false,
"selectedGroupIds": {},
@ -6809,6 +6830,7 @@ exports[`regression tests > given a group of selected elements with an element t
"scrollX": 0,
"scrollY": 0,
"scrolledOutside": false,
"searchMatches": [],
"selectedElementIds": {
"id1": true,
},
@ -7134,6 +7156,7 @@ exports[`regression tests > given a selected element A and a not selected elemen
"scrollX": 0,
"scrollY": 0,
"scrolledOutside": false,
"searchMatches": [],
"selectedElementIds": {
"id0": true,
"id1": true,
@ -7406,6 +7429,7 @@ exports[`regression tests > given selected element A with lower z-index than uns
"scrollX": 0,
"scrollY": 0,
"scrolledOutside": false,
"searchMatches": [],
"selectedElementIds": {
"id1": true,
},
@ -7636,6 +7660,7 @@ exports[`regression tests > given selected element A with lower z-index than uns
"scrollX": 0,
"scrollY": 0,
"scrolledOutside": false,
"searchMatches": [],
"selectedElementIds": {
"id0": true,
},
@ -7867,6 +7892,7 @@ exports[`regression tests > key 2 selects rectangle tool > [end of test] appStat
"scrollX": 0,
"scrollY": 0,
"scrolledOutside": false,
"searchMatches": [],
"selectedElementIds": {
"id0": true,
},
@ -8043,6 +8069,7 @@ exports[`regression tests > key 3 selects diamond tool > [end of test] appState
"scrollX": 0,
"scrollY": 0,
"scrolledOutside": false,
"searchMatches": [],
"selectedElementIds": {
"id0": true,
},
@ -8219,6 +8246,7 @@ exports[`regression tests > key 4 selects ellipse tool > [end of test] appState
"scrollX": 0,
"scrollY": 0,
"scrolledOutside": false,
"searchMatches": [],
"selectedElementIds": {
"id0": true,
},
@ -8395,6 +8423,7 @@ exports[`regression tests > key 5 selects arrow tool > [end of test] appState 1`
"scrollX": 0,
"scrollY": 0,
"scrolledOutside": false,
"searchMatches": [],
"selectedElementIds": {
"id0": true,
},
@ -8613,6 +8642,7 @@ exports[`regression tests > key 6 selects line tool > [end of test] appState 1`]
"scrollX": 0,
"scrollY": 0,
"scrolledOutside": false,
"searchMatches": [],
"selectedElementIds": {
"id0": true,
},
@ -8830,6 +8860,7 @@ exports[`regression tests > key 7 selects freedraw tool > [end of test] appState
"scrollX": 0,
"scrollY": 0,
"scrolledOutside": false,
"searchMatches": [],
"selectedElementIds": {},
"selectedElementsAreBeingDragged": false,
"selectedGroupIds": {},
@ -9020,6 +9051,7 @@ exports[`regression tests > key a selects arrow tool > [end of test] appState 1`
"scrollX": 0,
"scrollY": 0,
"scrolledOutside": false,
"searchMatches": [],
"selectedElementIds": {
"id0": true,
},
@ -9238,6 +9270,7 @@ exports[`regression tests > key d selects diamond tool > [end of test] appState
"scrollX": 0,
"scrollY": 0,
"scrolledOutside": false,
"searchMatches": [],
"selectedElementIds": {
"id0": true,
},
@ -9414,6 +9447,7 @@ exports[`regression tests > key l selects line tool > [end of test] appState 1`]
"scrollX": 0,
"scrollY": 0,
"scrolledOutside": false,
"searchMatches": [],
"selectedElementIds": {
"id0": true,
},
@ -9631,6 +9665,7 @@ exports[`regression tests > key o selects ellipse tool > [end of test] appState
"scrollX": 0,
"scrollY": 0,
"scrolledOutside": false,
"searchMatches": [],
"selectedElementIds": {
"id0": true,
},
@ -9807,6 +9842,7 @@ exports[`regression tests > key p selects freedraw tool > [end of test] appState
"scrollX": 0,
"scrollY": 0,
"scrolledOutside": false,
"searchMatches": [],
"selectedElementIds": {},
"selectedElementsAreBeingDragged": false,
"selectedGroupIds": {},
@ -9997,6 +10033,7 @@ exports[`regression tests > key r selects rectangle tool > [end of test] appStat
"scrollX": 0,
"scrollY": 0,
"scrolledOutside": false,
"searchMatches": [],
"selectedElementIds": {
"id0": true,
},
@ -10177,6 +10214,7 @@ exports[`regression tests > make a group and duplicate it > [end of test] appSta
"scrollX": 0,
"scrollY": 0,
"scrolledOutside": false,
"searchMatches": [],
"selectedElementIds": {
"id0": true,
"id1": true,
@ -10685,6 +10723,7 @@ exports[`regression tests > noop interaction after undo shouldn't create history
"scrollX": 0,
"scrollY": 0,
"scrolledOutside": false,
"searchMatches": [],
"selectedElementIds": {
"id1": true,
},
@ -10956,6 +10995,7 @@ exports[`regression tests > pinch-to-zoom works > [end of test] appState 1`] = `
"scrollX": "-6.25000",
"scrollY": 0,
"scrolledOutside": false,
"searchMatches": [],
"selectedElementIds": {},
"selectedElementsAreBeingDragged": false,
"selectedGroupIds": {},
@ -11080,6 +11120,7 @@ exports[`regression tests > shift click on selected element should deselect it o
"scrollX": 0,
"scrollY": 0,
"scrolledOutside": false,
"searchMatches": [],
"selectedElementIds": {},
"selectedElementsAreBeingDragged": false,
"selectedGroupIds": {},
@ -11276,6 +11317,7 @@ exports[`regression tests > shift-click to multiselect, then drag > [end of test
"scrollX": 0,
"scrollY": 0,
"scrolledOutside": false,
"searchMatches": [],
"selectedElementIds": {
"id0": true,
"id1": true,
@ -11584,6 +11626,7 @@ exports[`regression tests > should group elements and ungroup them > [end of tes
"scrollX": 0,
"scrollY": 0,
"scrolledOutside": false,
"searchMatches": [],
"selectedElementIds": {
"id0": true,
"id1": true,
@ -11993,6 +12036,7 @@ exports[`regression tests > single-clicking on a subgroup of a selected group sh
"scrollX": 0,
"scrollY": 0,
"scrolledOutside": false,
"searchMatches": [],
"selectedElementIds": {
"id0": true,
"id1": true,
@ -12600,6 +12644,7 @@ exports[`regression tests > spacebar + drag scrolls the canvas > [end of test] a
"scrollX": 60,
"scrollY": 60,
"scrolledOutside": false,
"searchMatches": [],
"selectedElementIds": {},
"selectedElementsAreBeingDragged": false,
"selectedGroupIds": {},
@ -12724,6 +12769,7 @@ exports[`regression tests > supports nested groups > [end of test] appState 1`]
"scrollX": 0,
"scrollY": 0,
"scrolledOutside": false,
"searchMatches": [],
"selectedElementIds": {
"id1": true,
},
@ -13305,6 +13351,7 @@ exports[`regression tests > switches from group of selected elements to another
"scrollX": 0,
"scrollY": 0,
"scrolledOutside": false,
"searchMatches": [],
"selectedElementIds": {
"id0": true,
},
@ -13638,6 +13685,7 @@ exports[`regression tests > switches selected element on pointer down > [end of
"scrollX": 0,
"scrollY": 0,
"scrolledOutside": false,
"searchMatches": [],
"selectedElementIds": {
"id0": true,
},
@ -13897,6 +13945,7 @@ exports[`regression tests > two-finger scroll works > [end of test] appState 1`]
"scrollX": 20,
"scrollY": "-18.53553",
"scrolledOutside": false,
"searchMatches": [],
"selectedElementIds": {},
"selectedElementsAreBeingDragged": false,
"selectedGroupIds": {},
@ -14019,6 +14068,7 @@ exports[`regression tests > undo/redo drawing an element > [end of test] appStat
"scrollX": 0,
"scrollY": 0,
"scrolledOutside": false,
"searchMatches": [],
"selectedElementIds": {
"id1": true,
},
@ -14394,6 +14444,7 @@ exports[`regression tests > updates fontSize & fontFamily appState > [end of tes
"scrollX": 0,
"scrollY": 0,
"scrolledOutside": false,
"searchMatches": [],
"selectedElementIds": {},
"selectedElementsAreBeingDragged": false,
"selectedGroupIds": {},
@ -14519,6 +14570,7 @@ exports[`regression tests > zoom hotkeys > [end of test] appState 1`] = `
"scrollX": 0,
"scrollY": 0,
"scrolledOutside": false,
"searchMatches": [],
"selectedElementIds": {},
"selectedElementsAreBeingDragged": false,
"selectedGroupIds": {},

20
packages/excalidraw/tests/helpers/ui.ts
View file

@ -69,8 +69,11 @@ export class Keyboard {
}
};
static keyDown = (key: string) => {
fireEvent.keyDown(document, {
static keyDown = (
key: string,
target: HTMLElement | Document | Window = document,
) => {
fireEvent.keyDown(target, {
key,
ctrlKey,
shiftKey,
@ -78,8 +81,11 @@ export class Keyboard {
});
};
static keyUp = (key: string) => {
fireEvent.keyUp(document, {
static keyUp = (
key: string,
target: HTMLElement | Document | Window = document,
) => {
fireEvent.keyUp(target, {
key,
ctrlKey,
shiftKey,
@ -87,9 +93,9 @@ export class Keyboard {
});
};
static keyPress = (key: string) => {
Keyboard.keyDown(key);
Keyboard.keyUp(key);
static keyPress = (key: string, target?: HTMLElement | Document | Window) => {
Keyboard.keyDown(key, target);
Keyboard.keyUp(key, target);
};
static codeDown = (code: string) => {

2
packages/excalidraw/tests/queries/dom.ts
View file

@ -11,7 +11,7 @@ export const getTextEditor = async (selector: string, waitForEditor = true) => {
};
export const updateTextEditor = (
editor: HTMLTextAreaElement,
editor: HTMLTextAreaElement | HTMLInputElement,
value: string,
) => {
fireEvent.change(editor, { target: { value } });

143
packages/excalidraw/tests/search.test.tsx Normal file
View file

@ -0,0 +1,143 @@
import React from "react";
import { render, waitFor } from "./test-utils";
import { Excalidraw, mutateElement } from "../index";
import { CLASSES, SEARCH_SIDEBAR } from "../constants";
import { Keyboard } from "./helpers/ui";
import { KEYS } from "../keys";
import { updateTextEditor } from "./queries/dom";
import { API } from "./helpers/api";
import type { ExcalidrawTextElement } from "../element/types";
const { h } = window;
const querySearchInput = async () => {
const input =
h.app.excalidrawContainerValue.container?.querySelector<HTMLInputElement>(
`.${CLASSES.SEARCH_MENU_INPUT_WRAPPER} input`,
)!;
await waitFor(() => expect(input).not.toBeNull());
return input;
};
describe("search", () => {
beforeEach(async () => {
await render(<Excalidraw handleKeyboardGlobally />);
h.setState({
openSidebar: null,
});
});
it("should toggle search on cmd+f", async () => {
expect(h.app.state.openSidebar).toBeNull();
Keyboard.withModifierKeys({ ctrl: true }, () => {
Keyboard.keyPress(KEYS.F);
});
expect(h.app.state.openSidebar).not.toBeNull();
expect(h.app.state.openSidebar?.name).toBe(SEARCH_SIDEBAR.name);
const searchInput = await querySearchInput();
expect(searchInput.matches(":focus")).toBe(true);
});
it("should refocus search input with cmd+f when search sidebar is still open", async () => {
Keyboard.withModifierKeys({ ctrl: true }, () => {
Keyboard.keyPress(KEYS.F);
});
const searchInput =
h.app.excalidrawContainerValue.container?.querySelector<HTMLInputElement>(
`.${CLASSES.SEARCH_MENU_INPUT_WRAPPER} input`,
);
searchInput?.blur();
expect(h.app.state.openSidebar).not.toBeNull();
expect(searchInput?.matches(":focus")).toBe(false);
Keyboard.withModifierKeys({ ctrl: true }, () => {
Keyboard.keyPress(KEYS.F);
});
expect(searchInput?.matches(":focus")).toBe(true);
});
it("should match text and cycle through matches on Enter", async () => {
const scrollIntoViewMock = jest.fn();
window.HTMLElement.prototype.scrollIntoView = scrollIntoViewMock;
API.setElements([
API.createElement({ type: "text", text: "test one" }),
API.createElement({ type: "text", text: "test two" }),
]);
expect(h.app.state.openSidebar).toBeNull();
Keyboard.withModifierKeys({ ctrl: true }, () => {
Keyboard.keyPress(KEYS.F);
});
expect(h.app.state.openSidebar).not.toBeNull();
expect(h.app.state.openSidebar?.name).toBe(SEARCH_SIDEBAR.name);
const searchInput = await querySearchInput();
expect(searchInput.matches(":focus")).toBe(true);
updateTextEditor(searchInput, "test");
await waitFor(() => {
expect(h.app.state.searchMatches.length).toBe(2);
expect(h.app.state.searchMatches[0].focus).toBe(true);
});
Keyboard.keyPress(KEYS.ENTER, searchInput);
expect(h.app.state.searchMatches[0].focus).toBe(false);
expect(h.app.state.searchMatches[1].focus).toBe(true);
Keyboard.keyPress(KEYS.ENTER, searchInput);
expect(h.app.state.searchMatches[0].focus).toBe(true);
expect(h.app.state.searchMatches[1].focus).toBe(false);
});
it("should match text split across multiple lines", async () => {
const scrollIntoViewMock = jest.fn();
window.HTMLElement.prototype.scrollIntoView = scrollIntoViewMock;
API.setElements([
API.createElement({
type: "text",
text: "",
}),
]);
mutateElement(h.elements[0] as ExcalidrawTextElement, {
text: "t\ne\ns\nt \nt\ne\nx\nt \ns\np\nli\nt \ni\nn\nt\no\nm\nu\nlt\ni\np\nl\ne \nli\nn\ne\ns",
originalText: "test text split into multiple lines",
});
expect(h.app.state.openSidebar).toBeNull();
Keyboard.withModifierKeys({ ctrl: true }, () => {
Keyboard.keyPress(KEYS.F);
});
expect(h.app.state.openSidebar).not.toBeNull();
expect(h.app.state.openSidebar?.name).toBe(SEARCH_SIDEBAR.name);
const searchInput = await querySearchInput();
expect(searchInput.matches(":focus")).toBe(true);
updateTextEditor(searchInput, "test");
await waitFor(() => {
expect(h.app.state.searchMatches.length).toBe(1);
expect(h.app.state.searchMatches[0]?.matchedLines?.length).toBe(4);
});
updateTextEditor(searchInput, "ext spli");
await waitFor(() => {
expect(h.app.state.searchMatches.length).toBe(1);
expect(h.app.state.searchMatches[0]?.matchedLines?.length).toBe(6);
});
});
});