From 78e254fb300b00b3cee58f8a82989e0bc9b04945 Mon Sep 17 00:00:00 2001 From: Aakansha Doshi Date: Fri, 21 Oct 2022 14:04:56 +0530 Subject: [PATCH] fix: Ungroup short cut key (#5779) * fix: Ungroup short cut key * Add specs --- src/actions/actionGroup.tsx | 4 +- .../regressionTests.test.tsx.snap | 600 ++++++++++++++++++ src/tests/regressionTests.test.tsx | 45 ++ 3 files changed, 648 insertions(+), 1 deletion(-) diff --git a/src/actions/actionGroup.tsx b/src/actions/actionGroup.tsx index 243247ef..273888d7 100644 --- a/src/actions/actionGroup.tsx +++ b/src/actions/actionGroup.tsx @@ -189,7 +189,9 @@ export const actionUngroup = register({ }; }, keyTest: (event) => - event.shiftKey && event[KEYS.CTRL_OR_CMD] && event.key === KEYS.G, + event.shiftKey && + event[KEYS.CTRL_OR_CMD] && + event.key === KEYS.G.toUpperCase(), contextItemLabel: "labels.ungroup", contextItemPredicate: (elements, appState) => getSelectedGroupIds(appState).length > 0, diff --git a/src/tests/__snapshots__/regressionTests.test.tsx.snap b/src/tests/__snapshots__/regressionTests.test.tsx.snap index 5eccf17a..834015ac 100644 --- a/src/tests/__snapshots__/regressionTests.test.tsx.snap +++ b/src/tests/__snapshots__/regressionTests.test.tsx.snap @@ -14632,6 +14632,606 @@ exports[`regression tests shift-click to multiselect, then drag: [end of test] n exports[`regression tests shift-click to multiselect, then drag: [end of test] number of renders 1`] = `19`; +exports[`regression tests should group elements and ungroup them: [end of test] appState 1`] = ` +Object { + "activeTool": Object { + "customType": null, + "lastActiveToolBeforeEraser": null, + "locked": false, + "type": "selection", + }, + "collaborators": Map {}, + "currentChartType": "bar", + "currentItemBackgroundColor": "transparent", + "currentItemEndArrowhead": "arrow", + "currentItemFillStyle": "hachure", + "currentItemFontFamily": 1, + "currentItemFontSize": 20, + "currentItemLinearStrokeSharpness": "round", + "currentItemOpacity": 100, + "currentItemRoughness": 1, + "currentItemStartArrowhead": null, + "currentItemStrokeColor": "#000000", + "currentItemStrokeSharpness": "sharp", + "currentItemStrokeStyle": "solid", + "currentItemStrokeWidth": 1, + "currentItemTextAlign": "left", + "cursorButton": "up", + "draggingElement": null, + "editingElement": null, + "editingGroupId": null, + "editingLinearElement": null, + "errorMessage": null, + "exportBackground": true, + "exportEmbedScene": false, + "exportScale": 1, + "exportWithDarkMode": false, + "fileHandle": null, + "gridSize": null, + "height": 768, + "isBindingEnabled": true, + "isLoading": false, + "isResizing": false, + "isRotating": false, + "isSidebarDocked": false, + "lastPointerDownWith": "mouse", + "multiElement": null, + "name": "Untitled-201933152653", + "offsetLeft": 0, + "offsetTop": 0, + "openMenu": null, + "openPopup": null, + "openSidebar": null, + "pasteDialog": Object { + "data": null, + "shown": false, + }, + "penDetected": false, + "penMode": false, + "pendingImageElementId": null, + "previousSelectedElementIds": Object { + "id2": true, + }, + "resizingElement": null, + "scrollX": 0, + "scrollY": 0, + "scrolledOutside": false, + "selectedElementIds": Object { + "id0": true, + "id1": true, + "id2": true, + "id3": true, + "id5": true, + }, + "selectedGroupIds": Object {}, + "selectedLinearElement": null, + "selectionElement": null, + "shouldCacheIgnoreZoom": false, + "showHelpDialog": false, + "showHyperlinkPopup": false, + "showStats": false, + "startBoundElement": null, + "suggestedBindings": Array [], + "theme": "light", + "toast": null, + "viewBackgroundColor": "#ffffff", + "viewModeEnabled": false, + "width": 1024, + "zenModeEnabled": false, + "zoom": Object { + "value": 1, + }, +} +`; + +exports[`regression tests should group elements and ungroup them: [end of test] element 0 1`] = ` +Object { + "angle": 0, + "backgroundColor": "transparent", + "boundElements": null, + "fillStyle": "hachure", + "groupIds": Array [], + "height": 10, + "id": "id0", + "isDeleted": false, + "link": null, + "locked": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeSharpness": "sharp", + "strokeStyle": "solid", + "strokeWidth": 1, + "type": "rectangle", + "updated": 1, + "version": 4, + "versionNonce": 1505387817, + "width": 10, + "x": 10, + "y": 10, +} +`; + +exports[`regression tests should group elements and ungroup them: [end of test] element 1 1`] = ` +Object { + "angle": 0, + "backgroundColor": "transparent", + "boundElements": null, + "fillStyle": "hachure", + "groupIds": Array [], + "height": 10, + "id": "id1", + "isDeleted": false, + "link": null, + "locked": false, + "opacity": 100, + "roughness": 1, + "seed": 449462985, + "strokeColor": "#000000", + "strokeSharpness": "sharp", + "strokeStyle": "solid", + "strokeWidth": 1, + "type": "rectangle", + "updated": 1, + "version": 4, + "versionNonce": 23633383, + "width": 10, + "x": 30, + "y": 10, +} +`; + +exports[`regression tests should group elements and ungroup them: [end of test] element 2 1`] = ` +Object { + "angle": 0, + "backgroundColor": "transparent", + "boundElements": null, + "fillStyle": "hachure", + "groupIds": Array [], + "height": 10, + "id": "id2", + "isDeleted": false, + "link": null, + "locked": false, + "opacity": 100, + "roughness": 1, + "seed": 401146281, + "strokeColor": "#000000", + "strokeSharpness": "sharp", + "strokeStyle": "solid", + "strokeWidth": 1, + "type": "rectangle", + "updated": 1, + "version": 4, + "versionNonce": 493213705, + "width": 10, + "x": 50, + "y": 10, +} +`; + +exports[`regression tests should group elements and ungroup them: [end of test] history 1`] = ` +Object { + "recording": false, + "redoStack": Array [], + "stateHistory": Array [ + Object { + "appState": Object { + "editingGroupId": null, + "editingLinearElement": null, + "name": "Untitled-201933152653", + "selectedElementIds": Object {}, + "selectedGroupIds": Object {}, + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [], + }, + Object { + "appState": Object { + "editingGroupId": null, + "editingLinearElement": null, + "name": "Untitled-201933152653", + "selectedElementIds": Object { + "id0": true, + }, + "selectedGroupIds": Object {}, + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "angle": 0, + "backgroundColor": "transparent", + "boundElements": null, + "fillStyle": "hachure", + "groupIds": Array [], + "height": 10, + "id": "id0", + "isDeleted": false, + "link": null, + "locked": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeSharpness": "sharp", + "strokeStyle": "solid", + "strokeWidth": 1, + "type": "rectangle", + "updated": 1, + "version": 2, + "versionNonce": 1278240551, + "width": 10, + "x": 10, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "editingGroupId": null, + "editingLinearElement": null, + "name": "Untitled-201933152653", + "selectedElementIds": Object { + "id1": true, + }, + "selectedGroupIds": Object {}, + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "angle": 0, + "backgroundColor": "transparent", + "boundElements": null, + "fillStyle": "hachure", + "groupIds": Array [], + "height": 10, + "id": "id0", + "isDeleted": false, + "link": null, + "locked": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeSharpness": "sharp", + "strokeStyle": "solid", + "strokeWidth": 1, + "type": "rectangle", + "updated": 1, + "version": 2, + "versionNonce": 1278240551, + "width": 10, + "x": 10, + "y": 10, + }, + Object { + "angle": 0, + "backgroundColor": "transparent", + "boundElements": null, + "fillStyle": "hachure", + "groupIds": Array [], + "height": 10, + "id": "id1", + "isDeleted": false, + "link": null, + "locked": false, + "opacity": 100, + "roughness": 1, + "seed": 449462985, + "strokeColor": "#000000", + "strokeSharpness": "sharp", + "strokeStyle": "solid", + "strokeWidth": 1, + "type": "rectangle", + "updated": 1, + "version": 2, + "versionNonce": 453191, + "width": 10, + "x": 30, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "editingGroupId": null, + "editingLinearElement": null, + "name": "Untitled-201933152653", + "selectedElementIds": Object { + "id2": true, + }, + "selectedGroupIds": Object {}, + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "angle": 0, + "backgroundColor": "transparent", + "boundElements": null, + "fillStyle": "hachure", + "groupIds": Array [], + "height": 10, + "id": "id0", + "isDeleted": false, + "link": null, + "locked": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeSharpness": "sharp", + "strokeStyle": "solid", + "strokeWidth": 1, + "type": "rectangle", + "updated": 1, + "version": 2, + "versionNonce": 1278240551, + "width": 10, + "x": 10, + "y": 10, + }, + Object { + "angle": 0, + "backgroundColor": "transparent", + "boundElements": null, + "fillStyle": "hachure", + "groupIds": Array [], + "height": 10, + "id": "id1", + "isDeleted": false, + "link": null, + "locked": false, + "opacity": 100, + "roughness": 1, + "seed": 449462985, + "strokeColor": "#000000", + "strokeSharpness": "sharp", + "strokeStyle": "solid", + "strokeWidth": 1, + "type": "rectangle", + "updated": 1, + "version": 2, + "versionNonce": 453191, + "width": 10, + "x": 30, + "y": 10, + }, + Object { + "angle": 0, + "backgroundColor": "transparent", + "boundElements": null, + "fillStyle": "hachure", + "groupIds": Array [], + "height": 10, + "id": "id2", + "isDeleted": false, + "link": null, + "locked": false, + "opacity": 100, + "roughness": 1, + "seed": 401146281, + "strokeColor": "#000000", + "strokeSharpness": "sharp", + "strokeStyle": "solid", + "strokeWidth": 1, + "type": "rectangle", + "updated": 1, + "version": 2, + "versionNonce": 2019559783, + "width": 10, + "x": 50, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "editingGroupId": null, + "editingLinearElement": null, + "name": "Untitled-201933152653", + "selectedElementIds": Object { + "id0": true, + "id1": true, + "id2": true, + "id3": true, + }, + "selectedGroupIds": Object { + "id4": true, + }, + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "angle": 0, + "backgroundColor": "transparent", + "boundElements": null, + "fillStyle": "hachure", + "groupIds": Array [ + "id4", + ], + "height": 10, + "id": "id0", + "isDeleted": false, + "link": null, + "locked": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeSharpness": "sharp", + "strokeStyle": "solid", + "strokeWidth": 1, + "type": "rectangle", + "updated": 1, + "version": 3, + "versionNonce": 1014066025, + "width": 10, + "x": 10, + "y": 10, + }, + Object { + "angle": 0, + "backgroundColor": "transparent", + "boundElements": null, + "fillStyle": "hachure", + "groupIds": Array [ + "id4", + ], + "height": 10, + "id": "id1", + "isDeleted": false, + "link": null, + "locked": false, + "opacity": 100, + "roughness": 1, + "seed": 449462985, + "strokeColor": "#000000", + "strokeSharpness": "sharp", + "strokeStyle": "solid", + "strokeWidth": 1, + "type": "rectangle", + "updated": 1, + "version": 3, + "versionNonce": 238820263, + "width": 10, + "x": 30, + "y": 10, + }, + Object { + "angle": 0, + "backgroundColor": "transparent", + "boundElements": null, + "fillStyle": "hachure", + "groupIds": Array [ + "id4", + ], + "height": 10, + "id": "id2", + "isDeleted": false, + "link": null, + "locked": false, + "opacity": 100, + "roughness": 1, + "seed": 401146281, + "strokeColor": "#000000", + "strokeSharpness": "sharp", + "strokeStyle": "solid", + "strokeWidth": 1, + "type": "rectangle", + "updated": 1, + "version": 3, + "versionNonce": 400692809, + "width": 10, + "x": 50, + "y": 10, + }, + ], + }, + Object { + "appState": Object { + "editingGroupId": null, + "editingLinearElement": null, + "name": "Untitled-201933152653", + "selectedElementIds": Object { + "id0": true, + "id1": true, + "id2": true, + "id3": true, + "id5": true, + }, + "selectedGroupIds": Object {}, + "viewBackgroundColor": "#ffffff", + }, + "elements": Array [ + Object { + "angle": 0, + "backgroundColor": "transparent", + "boundElements": null, + "fillStyle": "hachure", + "groupIds": Array [], + "height": 10, + "id": "id0", + "isDeleted": false, + "link": null, + "locked": false, + "opacity": 100, + "roughness": 1, + "seed": 337897, + "strokeColor": "#000000", + "strokeSharpness": "sharp", + "strokeStyle": "solid", + "strokeWidth": 1, + "type": "rectangle", + "updated": 1, + "version": 4, + "versionNonce": 1505387817, + "width": 10, + "x": 10, + "y": 10, + }, + Object { + "angle": 0, + "backgroundColor": "transparent", + "boundElements": null, + "fillStyle": "hachure", + "groupIds": Array [], + "height": 10, + "id": "id1", + "isDeleted": false, + "link": null, + "locked": false, + "opacity": 100, + "roughness": 1, + "seed": 449462985, + "strokeColor": "#000000", + "strokeSharpness": "sharp", + "strokeStyle": "solid", + "strokeWidth": 1, + "type": "rectangle", + "updated": 1, + "version": 4, + "versionNonce": 23633383, + "width": 10, + "x": 30, + "y": 10, + }, + Object { + "angle": 0, + "backgroundColor": "transparent", + "boundElements": null, + "fillStyle": "hachure", + "groupIds": Array [], + "height": 10, + "id": "id2", + "isDeleted": false, + "link": null, + "locked": false, + "opacity": 100, + "roughness": 1, + "seed": 401146281, + "strokeColor": "#000000", + "strokeSharpness": "sharp", + "strokeStyle": "solid", + "strokeWidth": 1, + "type": "rectangle", + "updated": 1, + "version": 4, + "versionNonce": 493213705, + "width": 10, + "x": 50, + "y": 10, + }, + ], + }, + ], +} +`; + +exports[`regression tests should group elements and ungroup them: [end of test] number of elements 1`] = `3`; + +exports[`regression tests should group elements and ungroup them: [end of test] number of renders 1`] = `24`; + exports[`regression tests should show fill icons when element has non transparent background: [end of test] appState 1`] = ` Object { "activeTool": Object { diff --git a/src/tests/regressionTests.test.tsx b/src/tests/regressionTests.test.tsx index 5e96925b..7a35e7b3 100644 --- a/src/tests/regressionTests.test.tsx +++ b/src/tests/regressionTests.test.tsx @@ -509,6 +509,51 @@ describe("regression tests", () => { expect(groups.size).toBe(2); }); + it("should group elements and ungroup them", () => { + UI.clickTool("rectangle"); + mouse.down(10, 10); + mouse.up(10, 10); + + UI.clickTool("rectangle"); + mouse.down(10, -10); + mouse.up(10, 10); + + UI.clickTool("rectangle"); + mouse.down(10, -10); + mouse.up(10, 10); + const end = mouse.getPosition(); + + mouse.reset(); + mouse.down(); + mouse.restorePosition(...end); + mouse.up(); + + for (const element of h.elements) { + expect(element.groupIds.length).toBe(0); + } + + Keyboard.withModifierKeys({ ctrl: true }, () => { + Keyboard.keyPress(KEYS.G); + }); + + for (const element of h.elements) { + expect(element.groupIds.length).toBe(1); + } + + mouse.reset(); + mouse.down(); + mouse.restorePosition(...end); + mouse.up(); + + Keyboard.withModifierKeys({ ctrl: true, shift: true }, () => { + Keyboard.keyPress(KEYS.G); + }); + + for (const element of h.elements) { + expect(element.groupIds.length).toBe(0); + } + }); + it("double click to edit a group", () => { UI.clickTool("rectangle"); mouse.down(10, 10);