Merge pull request #4727 from penpot/eva-fix-scroll-select

🐛 Fix move scrollbar create a selection rectangle

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)

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();

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);
   });
 });

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();
+});

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

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

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