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: Add shortcuts for stroke and background color picker (#3318)

Browse source 
* feat: Add shortcuts for opening stroke and background color picker

* Use App.tsx keydown handler

* only get selectedElements if applicable (perf)

* fix tests and snaps

* reuse `appState.openMenu`

Co-authored-by: dwelle <luzar.david@gmail.com>
This commit is contained in:
Arun 2021-05-28 17:22:42 +05:30 • committed by GitHub
parent bc0b6e1888
commit 6c3e4417e1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 201 additions and 215 deletions
Download patch file Download diff file Expand all files Collapse all files

229
src/tests/__snapshots__/regressionTests.test.tsx.snap
View file

@ -3260,7 +3260,7 @@ Object {
"name": "Untitled-201933152653",
"offsetLeft": 0,
"offsetTop": 0,
"openMenu": null,
"openMenu": "strokeColorPicker",
"pasteDialog": Object {
"data": null,
"shown": false,
@ -3451,7 +3451,7 @@ Object {
exports[`regression tests change the properties of a shape: [end of test] number of elements 1`] = `1`;
exports[`regression tests change the properties of a shape: [end of test] number of renders 1`] = `12`;
exports[`regression tests change the properties of a shape: [end of test] number of renders 1`] = `14`;
exports[`regression tests click on an element and drag it: [dragged] appState 1`] = `
Object {
@ -8734,7 +8734,7 @@ Object {
"boundElementIds": null,
"fillStyle": "hachure",
"groupIds": Array [],
"height": 1000,
"height": 0,
"id": "id0",
"isDeleted": false,
"opacity": 100,
@ -8745,9 +8745,9 @@ Object {
"strokeStyle": "solid",
"strokeWidth": 1,
"type": "rectangle",
"version": 2,
"versionNonce": 1278240551,
"width": 1000,
"version": 1,
"versionNonce": 0,
"width": 0,
"x": 0,
"y": 0,
}
@ -8765,14 +8765,14 @@ Object {
"isDeleted": false,
"opacity": 100,
"roughness": 1,
"seed": 449462985,
"seed": 1278240551,
"strokeColor": "#000000",
"strokeSharpness": "sharp",
"strokeStyle": "solid",
"strokeWidth": 1,
"type": "ellipse",
"version": 2,
"versionNonce": 453191,
"versionNonce": 449462985,
"width": 1000,
"x": 500,
"y": 500,
@ -8799,9 +8799,7 @@ Object {
"editingGroupId": null,
"editingLinearElement": null,
"name": "Untitled-201933152653",
"selectedElementIds": Object {
"id0": true,
},
"selectedElementIds": Object {},
"viewBackgroundColor": "#ffffff",
},
"elements": Array [
@ -8811,7 +8809,7 @@ Object {
"boundElementIds": null,
"fillStyle": "hachure",
"groupIds": Array [],
"height": 1000,
"height": 0,
"id": "id0",
"isDeleted": false,
"opacity": 100,
@ -8822,9 +8820,9 @@ Object {
"strokeStyle": "solid",
"strokeWidth": 1,
"type": "rectangle",
"version": 2,
"versionNonce": 1278240551,
"width": 1000,
"version": 1,
"versionNonce": 0,
"width": 0,
"x": 0,
"y": 0,
},
@ -8847,7 +8845,7 @@ Object {
"boundElementIds": null,
"fillStyle": "hachure",
"groupIds": Array [],
"height": 1000,
"height": 0,
"id": "id0",
"isDeleted": false,
"opacity": 100,
@ -8858,9 +8856,9 @@ Object {
"strokeStyle": "solid",
"strokeWidth": 1,
"type": "rectangle",
"version": 2,
"versionNonce": 1278240551,
"width": 1000,
"version": 1,
"versionNonce": 0,
"width": 0,
"x": 0,
"y": 0,
},
@ -8875,14 +8873,14 @@ Object {
"isDeleted": false,
"opacity": 100,
"roughness": 1,
"seed": 449462985,
"seed": 1278240551,
"strokeColor": "#000000",
"strokeSharpness": "sharp",
"strokeStyle": "solid",
"strokeWidth": 1,
"type": "ellipse",
"version": 2,
"versionNonce": 453191,
"versionNonce": 449462985,
"width": 1000,
"x": 500,
"y": 500,
@ -8901,7 +8899,7 @@ exports[`regression tests given selected element A with lower z-index than unsel
Object {
"collaborators": Map {},
"currentChartType": "bar",
"currentItemBackgroundColor": "#fa5252",
"currentItemBackgroundColor": "transparent",
"currentItemEndArrowhead": "arrow",
"currentItemFillStyle": "hachure",
"currentItemFontFamily": 1,
@ -8982,7 +8980,7 @@ Object {
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] element 0 1`] = `
Object {
"angle": 0,
"backgroundColor": "#fa5252",
"backgroundColor": "red",
"boundElementIds": null,
"fillStyle": "hachure",
"groupIds": Array [],
@ -8997,8 +8995,8 @@ Object {
"strokeStyle": "solid",
"strokeWidth": 1,
"type": "rectangle",
"version": 2,
"versionNonce": 1278240551,
"version": 1,
"versionNonce": 0,
"width": 1000,
"x": 0,
"y": 0,
@ -9008,24 +9006,24 @@ Object {
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] element 1 1`] = `
Object {
"angle": 0,
"backgroundColor": "#fa5252",
"backgroundColor": "red",
"boundElementIds": null,
"fillStyle": "hachure",
"groupIds": Array [],
"height": 1000,
"height": 500,
"id": "id1",
"isDeleted": false,
"opacity": 100,
"roughness": 1,
"seed": 449462985,
"seed": 1278240551,
"strokeColor": "#000000",
"strokeSharpness": "sharp",
"strokeStyle": "solid",
"strokeWidth": 1,
"type": "ellipse",
"version": 2,
"versionNonce": 453191,
"width": 1000,
"type": "rectangle",
"version": 1,
"versionNonce": 0,
"width": 500,
"x": 500,
"y": 500,
}
@ -9053,13 +9051,14 @@ Object {
"name": "Untitled-201933152653",
"selectedElementIds": Object {
"id0": true,
"id2": true,
},
"viewBackgroundColor": "#ffffff",
},
"elements": Array [
Object {
"angle": 0,
"backgroundColor": "#fa5252",
"backgroundColor": "red",
"boundElementIds": null,
"fillStyle": "hachure",
"groupIds": Array [],
@ -9074,68 +9073,32 @@ Object {
"strokeStyle": "solid",
"strokeWidth": 1,
"type": "rectangle",
"version": 2,
"versionNonce": 1278240551,
"width": 1000,
"x": 0,
"y": 0,
},
],
},
Object {
"appState": Object {
"editingGroupId": null,
"editingLinearElement": null,
"name": "Untitled-201933152653",
"selectedElementIds": Object {
"id1": true,
},
"viewBackgroundColor": "#ffffff",
},
"elements": Array [
Object {
"angle": 0,
"backgroundColor": "#fa5252",
"boundElementIds": null,
"fillStyle": "hachure",
"groupIds": Array [],
"height": 1000,
"id": "id0",
"isDeleted": false,
"opacity": 100,
"roughness": 1,
"seed": 337897,
"strokeColor": "#000000",
"strokeSharpness": "sharp",
"strokeStyle": "solid",
"strokeWidth": 1,
"type": "rectangle",
"version": 2,
"versionNonce": 1278240551,
"version": 1,
"versionNonce": 0,
"width": 1000,
"x": 0,
"y": 0,
},
Object {
"angle": 0,
"backgroundColor": "#fa5252",
"backgroundColor": "red",
"boundElementIds": null,
"fillStyle": "hachure",
"groupIds": Array [],
"height": 1000,
"height": 500,
"id": "id1",
"isDeleted": false,
"opacity": 100,
"roughness": 1,
"seed": 449462985,
"seed": 1278240551,
"strokeColor": "#000000",
"strokeSharpness": "sharp",
"strokeStyle": "solid",
"strokeWidth": 1,
"type": "ellipse",
"version": 2,
"versionNonce": 453191,
"width": 1000,
"type": "rectangle",
"version": 1,
"versionNonce": 0,
"width": 500,
"x": 500,
"y": 500,
},
@ -9147,13 +9110,13 @@ Object {
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`] = `2`;
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`] = `18`;
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`] = `11`;
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`] = `
Object {
"collaborators": Map {},
"currentChartType": "bar",
"currentItemBackgroundColor": "#fa5252",
"currentItemBackgroundColor": "transparent",
"currentItemEndArrowhead": "arrow",
"currentItemFillStyle": "hachure",
"currentItemFontFamily": 1,
@ -9235,7 +9198,7 @@ Object {
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] element 0 1`] = `
Object {
"angle": 0,
"backgroundColor": "#fa5252",
"backgroundColor": "red",
"boundElementIds": null,
"fillStyle": "hachure",
"groupIds": Array [],
@ -9250,8 +9213,8 @@ Object {
"strokeStyle": "solid",
"strokeWidth": 1,
"type": "rectangle",
"version": 3,
"versionNonce": 1150084233,
"version": 2,
"versionNonce": 401146281,
"width": 1000,
"x": 100,
"y": 100,
@ -9261,24 +9224,24 @@ Object {
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] element 1 1`] = `
Object {
"angle": 0,
"backgroundColor": "#fa5252",
"backgroundColor": "red",
"boundElementIds": null,
"fillStyle": "hachure",
"groupIds": Array [],
"height": 1000,
"height": 500,
"id": "id1",
"isDeleted": false,
"opacity": 100,
"roughness": 1,
"seed": 449462985,
"seed": 1278240551,
"strokeColor": "#000000",
"strokeSharpness": "sharp",
"strokeStyle": "solid",
"strokeWidth": 1,
"type": "ellipse",
"version": 2,
"versionNonce": 453191,
"width": 1000,
"type": "rectangle",
"version": 1,
"versionNonce": 0,
"width": 500,
"x": 500,
"y": 500,
}
@ -9306,13 +9269,14 @@ Object {
"name": "Untitled-201933152653",
"selectedElementIds": Object {
"id0": true,
"id2": true,
},
"viewBackgroundColor": "#ffffff",
},
"elements": Array [
Object {
"angle": 0,
"backgroundColor": "#fa5252",
"backgroundColor": "red",
"boundElementIds": null,
"fillStyle": "hachure",
"groupIds": Array [],
@ -9327,68 +9291,32 @@ Object {
"strokeStyle": "solid",
"strokeWidth": 1,
"type": "rectangle",
"version": 2,
"versionNonce": 1278240551,
"width": 1000,
"x": 0,
"y": 0,
},
],
},
Object {
"appState": Object {
"editingGroupId": null,
"editingLinearElement": null,
"name": "Untitled-201933152653",
"selectedElementIds": Object {
"id1": true,
},
"viewBackgroundColor": "#ffffff",
},
"elements": Array [
Object {
"angle": 0,
"backgroundColor": "#fa5252",
"boundElementIds": null,
"fillStyle": "hachure",
"groupIds": Array [],
"height": 1000,
"id": "id0",
"isDeleted": false,
"opacity": 100,
"roughness": 1,
"seed": 337897,
"strokeColor": "#000000",
"strokeSharpness": "sharp",
"strokeStyle": "solid",
"strokeWidth": 1,
"type": "rectangle",
"version": 2,
"versionNonce": 1278240551,
"version": 1,
"versionNonce": 0,
"width": 1000,
"x": 0,
"y": 0,
},
Object {
"angle": 0,
"backgroundColor": "#fa5252",
"backgroundColor": "red",
"boundElementIds": null,
"fillStyle": "hachure",
"groupIds": Array [],
"height": 1000,
"height": 500,
"id": "id1",
"isDeleted": false,
"opacity": 100,
"roughness": 1,
"seed": 449462985,
"seed": 1278240551,
"strokeColor": "#000000",
"strokeSharpness": "sharp",
"strokeStyle": "solid",
"strokeWidth": 1,
"type": "ellipse",
"version": 2,
"versionNonce": 453191,
"width": 1000,
"type": "rectangle",
"version": 1,
"versionNonce": 0,
"width": 500,
"x": 500,
"y": 500,
},
@ -9409,7 +9337,7 @@ Object {
"elements": Array [
Object {
"angle": 0,
"backgroundColor": "#fa5252",
"backgroundColor": "red",
"boundElementIds": null,
"fillStyle": "hachure",
"groupIds": Array [],
@ -9424,32 +9352,32 @@ Object {
"strokeStyle": "solid",
"strokeWidth": 1,
"type": "rectangle",
"version": 3,
"versionNonce": 1150084233,
"version": 2,
"versionNonce": 401146281,
"width": 1000,
"x": 100,
"y": 100,
},
Object {
"angle": 0,
"backgroundColor": "#fa5252",
"backgroundColor": "red",
"boundElementIds": null,
"fillStyle": "hachure",
"groupIds": Array [],
"height": 1000,
"height": 500,
"id": "id1",
"isDeleted": false,
"opacity": 100,
"roughness": 1,
"seed": 449462985,
"seed": 1278240551,
"strokeColor": "#000000",
"strokeSharpness": "sharp",
"strokeStyle": "solid",
"strokeWidth": 1,
"type": "ellipse",
"version": 2,
"versionNonce": 453191,
"width": 1000,
"type": "rectangle",
"version": 1,
"versionNonce": 0,
"width": 500,
"x": 500,
"y": 500,
},
@ -9461,7 +9389,7 @@ Object {
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`] = `2`;
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`] = `19`;
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`] = `12`;
exports[`regression tests key 2 selects rectangle tool: [end of test] appState 1`] = `
Object {
@ -13323,16 +13251,13 @@ Object {
"data": null,
"shown": false,
},
"previousSelectedElementIds": Object {
"id0": true,
},
"previousSelectedElementIds": Object {},
"resizingElement": null,
"scrollX": 0,
"scrollY": 0,
"scrolledOutside": false,
"selectedElementIds": Object {
"id0": true,
"id1": true,
},
"selectedGroupIds": Object {},
"selectionElement": null,
@ -13476,7 +13401,7 @@ Object {
exports[`regression tests should show fill icons when element has non transparent background: [end of test] number of elements 1`] = `1`;
exports[`regression tests should show fill icons when element has non transparent background: [end of test] number of renders 1`] = `12`;
exports[`regression tests should show fill icons when element has non transparent background: [end of test] number of renders 1`] = `13`;
exports[`regression tests single-clicking on a subgroup of a selected group should not alter selection: [end of test] appState 1`] = `
Object {