mirror of
https://github.com/excalidraw/excalidraw.git
synced 2025-05-03 10:00:07 -04:00
feat: Add shortcuts for stroke and background color picker (#3318)
* 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
GitHub
parent
bc0b6e1888
commit
6c3e4417e1
11 changed files with 201 additions and 215 deletions
|
|
@ -1748,7 +1748,7 @@ Object {
|
|||
"name": "Untitled-201933152653",
|
||||
"offsetLeft": 20,
|
||||
"offsetTop": 10,
|
||||
"openMenu": null,
|
||||
"openMenu": "backgroundColorPicker",
|
||||
"pasteDialog": Object {
|
||||
"data": null,
|
||||
"shown": false,
|
||||
|
|
@ -2424,7 +2424,7 @@ Object {
|
|||
|
||||
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`] = `25`;
|
||||
exports[`contextMenu element selecting 'Paste styles' in context menu pastes styles: [end of test] number of renders 1`] = `27`;
|
||||
|
||||
exports[`contextMenu element selecting 'Send backward' in context menu sends element backward: [end of test] appState 1`] = `
|
||||
Object {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -702,33 +702,36 @@ describe("regression tests", () => {
|
|||
"when clicking intersection between A and B " +
|
||||
"B should be selected on pointer up",
|
||||
() => {
|
||||
UI.clickTool("rectangle");
|
||||
// change background color since default is transparent
|
||||
// set background color since default is transparent
|
||||
// and transparent elements can't be selected by clicking inside of them
|
||||
clickLabeledElement("Background");
|
||||
clickLabeledElement("#fa5252");
|
||||
mouse.down();
|
||||
mouse.up(1000, 1000);
|
||||
const rect1 = API.createElement({
|
||||
type: "rectangle",
|
||||
backgroundColor: "red",
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 1000,
|
||||
height: 1000,
|
||||
});
|
||||
const rect2 = API.createElement({
|
||||
type: "rectangle",
|
||||
backgroundColor: "red",
|
||||
x: 500,
|
||||
y: 500,
|
||||
width: 500,
|
||||
height: 500,
|
||||
});
|
||||
h.elements = [rect1, rect2];
|
||||
|
||||
// draw ellipse partially over rectangle.
|
||||
// since ellipse was created after rectangle it has an higher z-index.
|
||||
// we don't need to change background color again since change above
|
||||
// affects next drawn elements.
|
||||
UI.clickTool("ellipse");
|
||||
mouse.reset();
|
||||
mouse.down(500, 500);
|
||||
mouse.up(1000, 1000);
|
||||
mouse.select(rect1);
|
||||
|
||||
// select rectangle
|
||||
mouse.reset();
|
||||
mouse.click();
|
||||
|
||||
// pointer down on intersection between ellipse and rectangle
|
||||
// pointerdown on rect2 covering rect1 while rect1 is selected should
|
||||
// retain rect1 selection
|
||||
mouse.down(900, 900);
|
||||
expect(API.getSelectedElement().type).toBe("rectangle");
|
||||
expect(API.getSelectedElement().id).toBe(rect1.id);
|
||||
|
||||
// pointerup should select rect2
|
||||
mouse.up();
|
||||
expect(API.getSelectedElement().type).toBe("ellipse");
|
||||
expect(API.getSelectedElement().id).toBe(rect2.id);
|
||||
},
|
||||
);
|
||||
|
||||
|
|
@ -737,26 +740,27 @@ describe("regression tests", () => {
|
|||
"when dragging on intersection between A and B " +
|
||||
"A should be dragged and keep being selected",
|
||||
() => {
|
||||
UI.clickTool("rectangle");
|
||||
// change background color since default is transparent
|
||||
// and transparent elements can't be selected by clicking inside of them
|
||||
clickLabeledElement("Background");
|
||||
clickLabeledElement("#fa5252");
|
||||
mouse.down();
|
||||
mouse.up(1000, 1000);
|
||||
const rect1 = API.createElement({
|
||||
type: "rectangle",
|
||||
backgroundColor: "red",
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 1000,
|
||||
height: 1000,
|
||||
});
|
||||
const rect2 = API.createElement({
|
||||
type: "rectangle",
|
||||
backgroundColor: "red",
|
||||
x: 500,
|
||||
y: 500,
|
||||
width: 500,
|
||||
height: 500,
|
||||
});
|
||||
h.elements = [rect1, rect2];
|
||||
|
||||
// draw ellipse partially over rectangle.
|
||||
// since ellipse was created after rectangle it has an higher z-index.
|
||||
// we don't need to change background color again since change above
|
||||
// affects next drawn elements.
|
||||
UI.clickTool("ellipse");
|
||||
mouse.reset();
|
||||
mouse.down(500, 500);
|
||||
mouse.up(1000, 1000);
|
||||
mouse.select(rect1);
|
||||
|
||||
// select rectangle
|
||||
mouse.reset();
|
||||
mouse.click();
|
||||
expect(API.getSelectedElement().id).toBe(rect1.id);
|
||||
|
||||
const { x: prevX, y: prevY } = API.getSelectedElement();
|
||||
|
||||
|
|
@ -764,7 +768,7 @@ describe("regression tests", () => {
|
|||
mouse.down(900, 900);
|
||||
mouse.up(100, 100);
|
||||
|
||||
expect(API.getSelectedElement().type).toBe("rectangle");
|
||||
expect(API.getSelectedElement().id).toBe(rect1.id);
|
||||
expect(API.getSelectedElement().x).toEqual(prevX + 100);
|
||||
expect(API.getSelectedElement().y).toEqual(prevY + 100);
|
||||
},
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue