From 232cfea70976871f8b265dad1cc27d27d89176ed Mon Sep 17 00:00:00 2001 From: Eva Marco Date: Wed, 12 Jun 2024 12:02:12 +0200 Subject: [PATCH] :bug: Fix move scrollbar create a selection rectangle --- CHANGES.md | 1 + frontend/playwright/ui/pages/WorkspacePage.js | 10 +++++++ frontend/playwright/ui/specs/sidebar.spec.js | 2 -- .../playwright/ui/specs/workspace.spec.js | 28 +++++++++++++++++++ .../src/app/main/ui/workspace/viewport.cljs | 4 +-- .../ui/workspace/viewport/scroll_bars.cljs | 6 ++-- .../main/ui/workspace/viewport/widgets.cljs | 1 + 7 files changed, 46 insertions(+), 6 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index ffe137f5f..65781b268 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -20,6 +20,7 @@ ### :bug: Bugs fixed +- Fix selection rectangle appears on scroll [Taiga #7525](https://tree.taiga.io/project/penpot/issue/7525) - Fix layer tree not expanding to the bottom edge [Taiga #7466](https://tree.taiga.io/project/penpot/issue/7466) - Fix guides move when board is moved by inputs [Taiga #8010](https://tree.taiga.io/project/penpot/issue/8010) - Fix clickable area of Penptot logo in the viewer [Taiga #7988](https://tree.taiga.io/project/penpot/issue/7988) diff --git a/frontend/playwright/ui/pages/WorkspacePage.js b/frontend/playwright/ui/pages/WorkspacePage.js index 723a3947c..3baa3ece1 100644 --- a/frontend/playwright/ui/pages/WorkspacePage.js +++ b/frontend/playwright/ui/pages/WorkspacePage.js @@ -51,6 +51,8 @@ export class WorkspacePage extends BaseWebSocketPage { this.palette = page.getByTestId("palette"); this.sidebar = page.getByTestId("left-sidebar"); this.librariesModal = page.getByTestId("libraries-modal"); + this.selectionRect = page.getByTestId("workspace-selection-rect"); + this.horizontalScrollbar = page.getByTestId("horizontal-scrollbar"); } async goToWorkspace({ fileId = WorkspacePage.anyFileId, pageId = WorkspacePage.anyPageId } = {}) { @@ -102,6 +104,14 @@ export class WorkspacePage extends BaseWebSocketPage { await this.page.mouse.up(); } + async panOnViewportAt(x, y, width, height) { + await this.page.waitForTimeout(100); + await this.viewport.hover({ position: { x, y } }); + await this.page.mouse.down({ button: "middle" }); + await this.viewport.hover({ position: { x: x + width, y: y + height } }); + await this.page.mouse.up({ button: "middle" }); + } + async togglePages() { const pagesToggle = this.page.getByText("Pages"); await pagesToggle.click(); diff --git a/frontend/playwright/ui/specs/sidebar.spec.js b/frontend/playwright/ui/specs/sidebar.spec.js index 468a661fa..bb0a4d451 100644 --- a/frontend/playwright/ui/specs/sidebar.spec.js +++ b/frontend/playwright/ui/specs/sidebar.spec.js @@ -16,8 +16,6 @@ test.describe("Layers tab", () => { await workspace.togglePages(); const { height: heightCollapsed } = await workspace.layers.boundingBox(); - console.log(heightExpanded, heightCollapsed); - expect(heightExpanded > heightCollapsed); }); }); diff --git a/frontend/playwright/ui/specs/workspace.spec.js b/frontend/playwright/ui/specs/workspace.spec.js index 46c292269..2800163b2 100644 --- a/frontend/playwright/ui/specs/workspace.spec.js +++ b/frontend/playwright/ui/specs/workspace.spec.js @@ -64,3 +64,31 @@ test("Bug 7654 - Toolbar keeps toggling on and off on spacebar press", async ({ await workspacePage.page.keyboard.press("Enter"); await workspacePage.expectHiddenToolbarOptions(); }); + +test("Bug 7525 - User moves a scrollbar and no selciont rectangle appears", 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", + }); + + // Move created rect to a corner, in orther to get scrollbars + await workspacePage.panOnViewportAt(128, 128, 300, 300); + + // Check scrollbars appear + const horizontalScrollbar = workspacePage.horizontalScrollbar; + await expect(horizontalScrollbar).toBeVisible(); + + // Grab scrollbar and move + const {x, y} = await horizontalScrollbar.boundingBox(); + await page.waitForTimeout(100); + await workspacePage.viewport.hover({ position: { x: x, y: y + 5 } }); + await page.mouse.down(); + await workspacePage.viewport.hover({ position: { x: x - 130, y: y - 95 } }); + + await expect(workspacePage.selectionRect).not.toBeInViewport(); +}); diff --git a/frontend/src/app/main/ui/workspace/viewport.cljs b/frontend/src/app/main/ui/workspace/viewport.cljs index d2697e018..670bd2c4c 100644 --- a/frontend/src/app/main/ui/workspace/viewport.cljs +++ b/frontend/src/app/main/ui/workspace/viewport.cljs @@ -636,8 +636,8 @@ :objects base-objects :modifiers modifiers :shape frame - :view-only true}])) - + :view-only true}]))] + [:g.scrollbar-wrapper {:clipPath "url(#clip-handlers)"} [:& scroll-bars/viewport-scrollbars {:objects base-objects :zoom zoom diff --git a/frontend/src/app/main/ui/workspace/viewport/scroll_bars.cljs b/frontend/src/app/main/ui/workspace/viewport/scroll_bars.cljs index 1dd7a6f79..76640fd88 100644 --- a/frontend/src/app/main/ui/workspace/viewport/scroll_bars.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/scroll_bars.cljs @@ -196,7 +196,8 @@ [:* (when show-v-scroll? - [:g.v-scroll {:fill clr/black} + [:g.v-scroll {:fill clr/black + :data-testid "vertical-scrollbar"} [:rect {:on-pointer-move #(on-pointer-move % :y) :on-pointer-down #(on-pointer-down % :y) :on-pointer-up on-pointer-up @@ -210,7 +211,8 @@ :style {:stroke "white" :stroke-width (/ 0.15 zoom)}}]]) (when show-h-scroll? - [:g.h-scroll {:fill clr/black} + [:g.h-scroll {:fill clr/black + :data-testid "horizontal-scrollbar"} [:rect {:on-pointer-move #(on-pointer-move % :x) :on-pointer-down #(on-pointer-down % :x) :on-pointer-up on-pointer-up diff --git a/frontend/src/app/main/ui/workspace/viewport/widgets.cljs b/frontend/src/app/main/ui/workspace/viewport/widgets.cljs index 6674446fc..a9da0fd7c 100644 --- a/frontend/src/app/main/ui/workspace/viewport/widgets.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/widgets.cljs @@ -67,6 +67,7 @@ [:rect.selection-rect {:x (:x data) :y (:y data) + :data-testid "workspace-selection-rect" :width (:width data) :height (:height data) :style {;; Primary with 0.1 opacity