diff --git a/CHANGES.md b/CHANGES.md index 4419c2575..e58a64a77 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -29,6 +29,7 @@ - Fix "Share prototypes" modal remains open [Taiga #7442](https://tree.taiga.io/project/penpot/issue/7442) - Fix "Components visibility and opacity" [#4694](https://github.com/penpot/penpot/issues/4694) - Fix "Attribute overrides in copies are not exported in zip file" [Taiga #8072](https://tree.taiga.io/project/penpot/issue/8072) +- Fix group not automatically selected in the Layers panel after creation [Taiga #8078](https://tree.taiga.io/project/penpot/issue/8078) ## 2.0.3 diff --git a/frontend/playwright/data/workspace/get-file-not-empty.json b/frontend/playwright/data/workspace/get-file-not-empty.json new file mode 100644 index 000000000..27a91a25b --- /dev/null +++ b/frontend/playwright/data/workspace/get-file-not-empty.json @@ -0,0 +1,222 @@ +{ + "~:features":{ + "~#set":[ + "layout/grid", + "styles/v2", + "fdata/shape-data-type" + ] + }, + "~:permissions":{ + "~:type":"~:membership", + "~:is-owner":true, + "~:is-admin":true, + "~:can-edit":true, + "~:can-read":true, + "~:is-logged":true + }, + "~:has-media-trimmed":false, + "~:comment-thread-seqn":0, + "~:name":"New File 14", + "~:revn":1, + "~:modified-at":"~m1718088151182", + "~:id":"~u6191cd35-bb1f-81f7-8004-7cc63d087374", + "~:is-shared":false, + "~:version":48, + "~:project-id":"~u4dc640b0-5cbf-11ec-a7c5-91e9eb4f238d", + "~:created-at":"~m1718088142886", + "~:data":{ + "~:pages":[ + "~u6191cd35-bb1f-81f7-8004-7cc63d087375" + ], + "~:pages-index":{ + "~u6191cd35-bb1f-81f7-8004-7cc63d087375":{ + "~:options":{ + + }, + "~:objects":{ + "~u00000000-0000-0000-0000-000000000000":{ + "~#shape":{ + "~:y":0, + "~:hide-fill-on-export":false, + "~:transform":{ + "~#matrix":{ + "~:a":1.0, + "~:b":0.0, + "~:c":0.0, + "~:d":1.0, + "~:e":0.0, + "~:f":0.0 + } + }, + "~:rotation":0, + "~:name":"Root Frame", + "~:width":0.01, + "~:type":"~:frame", + "~:points":[ + { + "~#point":{ + "~:x":0, + "~:y":0 + } + }, + { + "~#point":{ + "~:x":0.01, + "~:y":0 + } + }, + { + "~#point":{ + "~:x":0.01, + "~:y":0.01 + } + }, + { + "~#point":{ + "~:x":0, + "~:y":0.01 + } + } + ], + "~:proportion-lock":false, + "~:transform-inverse":{ + "~#matrix":{ + "~:a":1.0, + "~:b":0.0, + "~:c":0.0, + "~:d":1.0, + "~:e":0.0, + "~:f":0.0 + } + }, + "~:id":"~u00000000-0000-0000-0000-000000000000", + "~:parent-id":"~u00000000-0000-0000-0000-000000000000", + "~:frame-id":"~u00000000-0000-0000-0000-000000000000", + "~:strokes":[ + + ], + "~:x":0, + "~:proportion":1.0, + "~:selrect":{ + "~#rect":{ + "~:x":0, + "~:y":0, + "~:width":0.01, + "~:height":0.01, + "~:x1":0, + "~:y1":0, + "~:x2":0.01, + "~:y2":0.01 + } + }, + "~:fills":[ + { + "~:fill-color":"#FFFFFF", + "~:fill-opacity":1 + } + ], + "~:flip-x":null, + "~:height":0.01, + "~:flip-y":null, + "~:shapes":[ + "~u7c75e310-c3a2-80fd-8004-7cc641479aef" + ] + } + }, + "~u7c75e310-c3a2-80fd-8004-7cc641479aef":{ + "~#shape":{ + "~:y":436, + "~:rx":0, + "~:transform":{ + "~#matrix":{ + "~:a":1.0, + "~:b":0.0, + "~:c":0.0, + "~:d":1.0, + "~:e":0.0, + "~:f":0.0 + } + }, + "~:rotation":0, + "~:grow-type":"~:fixed", + "~:hide-in-viewer":false, + "~:name":"Rectangle", + "~:width":126.00000000000006, + "~:type":"~:rect", + "~:points":[ + { + "~#point":{ + "~:x":266, + "~:y":436 + } + }, + { + "~#point":{ + "~:x":392.00000000000006, + "~:y":436 + } + }, + { + "~#point":{ + "~:x":392.00000000000006, + "~:y":570 + } + }, + { + "~#point":{ + "~:x":266, + "~:y":570 + } + } + ], + "~:proportion-lock":false, + "~:transform-inverse":{ + "~#matrix":{ + "~:a":1.0, + "~:b":0.0, + "~:c":0.0, + "~:d":1.0, + "~:e":0.0, + "~:f":0.0 + } + }, + "~:id":"~u7c75e310-c3a2-80fd-8004-7cc641479aef", + "~:parent-id":"~u00000000-0000-0000-0000-000000000000", + "~:frame-id":"~u00000000-0000-0000-0000-000000000000", + "~:strokes":[ + + ], + "~:x":266, + "~:proportion":1, + "~:selrect":{ + "~#rect":{ + "~:x":266, + "~:y":436, + "~:width":126.00000000000006, + "~:height":134, + "~:x1":266, + "~:y1":436, + "~:x2":392.00000000000006, + "~:y2":570 + } + }, + "~:fills":[ + { + "~:fill-color":"#B1B2B5", + "~:fill-opacity":1 + } + ], + "~:flip-x":null, + "~:ry":0, + "~:height":134, + "~:flip-y":null + } + } + }, + "~:id":"~u6191cd35-bb1f-81f7-8004-7cc63d087375", + "~:name":"Page 1" + } + }, + "~:id":"~u6191cd35-bb1f-81f7-8004-7cc63d087374" + } +} \ No newline at end of file diff --git a/frontend/playwright/ui/pages/WorkspacePage.js b/frontend/playwright/ui/pages/WorkspacePage.js index 4c82e0155..72e0fa9fd 100644 --- a/frontend/playwright/ui/pages/WorkspacePage.js +++ b/frontend/playwright/ui/pages/WorkspacePage.js @@ -111,7 +111,11 @@ export class WorkspacePage extends BaseWebSocketPage { const layer = this.layers.getByTestId("layer-item").filter({ has: this.page.getByText(name) }); await layer.getByRole("button").click(clickOptions); } - + + async expectSelectedLayer(name) { + await expect(this.layers.getByTestId("layer-row").filter({ has: this.page.getByText(name) })).toHaveClass(/selected/); + } + async clickAssets(clickOptions = {}) { await this.assets.click(clickOptions); } diff --git a/frontend/playwright/ui/specs/workspace.spec.js b/frontend/playwright/ui/specs/workspace.spec.js index 529965613..f391949b4 100644 --- a/frontend/playwright/ui/specs/workspace.spec.js +++ b/frontend/playwright/ui/specs/workspace.spec.js @@ -66,3 +66,19 @@ test("User adds a library and its automatically selected in the color palette", await expect(workspacePage.palette.getByText('There are no color styles in your library yet')).toBeVisible(); }); + + +test("User makes a group", async ({ page }) => { + const workspacePage = new WorkspacePage(page); + await workspacePage.setupEmptyFile(); + await workspacePage.mockRPC(/get\-file\?/, "workspace/get-file-not-empty.json"); + await workspacePage.mockRPC("update-file?id=*", "workspace/update-file-create-rect.json"); + + await workspacePage.goToWorkspace({ + fileId: "6191cd35-bb1f-81f7-8004-7cc63d087374", + pageId: "6191cd35-bb1f-81f7-8004-7cc63d087375" + }); + await workspacePage.clickLeafLayer("Rectangle"); + await workspacePage.page.keyboard.press("ControlOrMeta+g"); + await workspacePage.expectSelectedLayer("Group"); +}); diff --git a/frontend/src/app/main/data/workspace/groups.cljs b/frontend/src/app/main/data/workspace/groups.cljs index 3502bd699..384eed100 100644 --- a/frontend/src/app/main/data/workspace/groups.cljs +++ b/frontend/src/app/main/data/workspace/groups.cljs @@ -203,7 +203,7 @@ ptk/WatchEvent (watch [_ state _] (let [selected (wsh/lookup-selected state)] - (rx/of (group-shapes nil selected)))))) + (rx/of (group-shapes nil selected :change-selection? true)))))) (defn ungroup-shapes [ids & {:keys [change-selection?] :or {change-selection? false}}] diff --git a/frontend/src/app/main/ui/workspace/sidebar/layer_item.cljs b/frontend/src/app/main/ui/workspace/sidebar/layer_item.cljs index 2f4147a68..eca1ce284 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layer_item.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/layer_item.cljs @@ -59,6 +59,7 @@ :ref dref :on-click on-select-shape :on-context-menu on-context-menu + :data-testid "layer-row" :class (stl/css-case :layer-row true :highlight highlighted?