fix: selection rect should reflect viewport change (#12355)

Fixes [BS-3349](https://linear.app/affine-design/issue/BS-3349/)

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **New Features**
  - Improved edge scrolling during selection dragging for smoother and more responsive viewport navigation.
  - Dragging area and mouse position tracking now update reactively with viewport changes, ensuring more accurate selection and movement.

- **Refactor**
  - Unified and clarified coordinate handling for dragging and mouse position, with clearer naming and separation between model and browser coordinates.
  - Simplified selection logic and removed unnecessary accumulated state for cleaner and more maintainable behavior.
  - Enhanced flexibility in coordinate conversion by allowing viewport transformations relative to arbitrary zoom and center.
  - Streamlined clipboard paste handling by simplifying mouse position extraction and adjusting attachment options.

- **Bug Fixes**
  - Enhanced overlay and dragging area accuracy by updating position calculations and coordinate transformations.
  - Fixed paste operations to correctly handle mouse position without unnecessary coordinate conversions.
  - Corrected drag initiation positions in toolbar and shape dragging to align with viewport-relative coordinates.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

blocksuite/affine/gfx/mindmap/src/toolbar/mindmap-tool-button.ts

@@ -315,7 +315,7 @@ export class EdgelessMindmapToolButton extends EdgelessToolbarToolMixin(
           }
           this.setEdgelessTool(EmptyTool);
           const icon = this.mindmapElement;
-          const { x, y } = gfx.tool.lastMousePos$.peek();
+          const { x, y } = gfx.tool.lastMouseViewPos$.peek();
           const { viewport } = this.edgeless.std.get(ViewportElementProvider);
           const { left, top } = viewport;
           const clientPos = { x: x + left, y: y + top };

blocksuite/affine/gfx/shape/src/draggable/shape-draggable.ts

@@ -258,7 +258,7 @@ export class EdgelessToolbarShapeDraggable extends EdgelessToolbarToolMixin(
               console.error('Edgeless toolbar Shape element not found');
               return;
             }
-            const { x, y } = this.gfx.tool.lastMousePos$.peek();
+            const { x, y } = this.gfx.tool.lastMouseViewPos$.peek();
             const { viewport } = this.edgeless.std.get(ViewportElementProvider);
             const { left, top } = viewport;
             const clientPos = { x: x + left, y: y + top };

blocksuite/affine/gfx/shape/src/shape-tool.ts

@@ -117,24 +117,24 @@ export class ShapeTool extends BaseTool<ShapeToolOption> {
 
     if (spacePressed && this._spacePressedCtx) {
       const {
-        startX,
-        startY,
         w,
         h,
+        startX,
+        startY,
         endX: pressedX,
         endY: pressedY,
       } = this._spacePressedCtx.draggingArea;
-      const curDraggingArea = controller.draggingViewArea$.peek();
-      const { endX: lastX, endY: lastY } = curDraggingArea;
+      const { endX: lastX, endY: lastY } = controller.draggingArea$.peek();
       const dx = lastX - pressedX;
       const dy = lastY - pressedY;
 
-      this.controller.draggingViewArea$.value = {
-        ...curDraggingArea,
+      this.controller.draggingArea$.value = {
         x: Math.min(startX + dx, lastX),
         y: Math.min(startY + dy, lastY),
         w,
         h,
+        endX: endX + dx,
+        endY: endY + dy,
         startX: startX + dx,
         startY: startY + dy,
       };
@@ -306,7 +306,7 @@ export class ShapeTool extends BaseTool<ShapeToolOption> {
 
         if (spacePressed && this._draggingElementId) {
           this._spacePressedCtx = {
-            draggingArea: this.controller.draggingViewArea$.peek(),
+            draggingArea: this.controller.draggingArea$.peek(),
           };
         }
       })