From e31cca33540af2737dc9e520b70acac170c0709e Mon Sep 17 00:00:00 2001
From: congzhou09 <congzhou09@gmail.com>
Date: Wed, 4 Mar 2026 19:38:09 +0800
Subject: [PATCH] fix(editor): non-canvas block size/position in
 embed-edgeless-doc at non-1 zoom (#14074)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

### Problem
●Similar to
[PR#14015](https://github.com/toeverything/AFFiNE/pull/14015), the
container's own scaling factor (`viewScale`) was not taken into account.
This time the issue affects **non-canvas blocks** (e.g. `edgeless-note`,
`edgeless-image`, and any component extending `GfxBlockComponent`).
●The follwing image and video show the case when zoom is 0.5.

<img width="822" height="414" alt="图片"
src="https://github.com/user-attachments/assets/cee1cb88-2764-443c-aa7a-0443308b0e29"
/>


https://github.com/user-attachments/assets/3c744579-16c4-4f10-b421-e0606da1269f

### Solution
●Incorporated `viewScale` into the CSS `translate` calculation for all
`GfxBlockComponent` instances.

### Additional Improvement
●Minor refactor: the class returned by `toGfxBlockComponent()` now
reuses the original `getCSSTransform()` implementation from
`GfxBlockComponent.prototype` via `.call(this)`, eliminating duplicated
code.

### After
●The refined is as follows.


https://github.com/user-attachments/assets/24de0429-63a3-45a7-9b31-d91a4279e233


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

* **Refactor**
* Improved viewport scaling so visual transforms (translation and zoom)
correctly account for view scale, yielding more consistent rendering
during zoom and pan.
* Centralized transform calculation to a shared implementation, reducing
duplication and ensuring uniform behavior across views.

<sub>✏️ Tip: You can customize this high-level summary in your review
settings.</sub>
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Co-authored-by: DarkSky <25152247+darkskygit@users.noreply.github.com>
---
 .../src/view/element/gfx-block-component.ts   | 20 +++++--------------
 1 file changed, 5 insertions(+), 15 deletions(-)

diff --git a/blocksuite/framework/std/src/view/element/gfx-block-component.ts b/blocksuite/framework/std/src/view/element/gfx-block-component.ts
index 4f9ee7fe0..2c7af40b8 100644
--- a/blocksuite/framework/std/src/view/element/gfx-block-component.ts
+++ b/blocksuite/framework/std/src/view/element/gfx-block-component.ts
@@ -107,15 +107,15 @@ export abstract class GfxBlockComponent<
 
   getCSSTransform() {
     const viewport = this.gfx.viewport;
-    const { translateX, translateY, zoom } = viewport;
+    const { translateX, translateY, zoom, viewScale } = viewport;
     const bound = Bound.deserialize(this.model.xywh);
 
-    const scaledX = bound.x * zoom;
-    const scaledY = bound.y * zoom;
+    const scaledX = (bound.x * zoom) / viewScale;
+    const scaledY = (bound.y * zoom) / viewScale;
     const deltaX = scaledX - bound.x;
     const deltaY = scaledY - bound.y;
 
-    return `translate(${translateX + deltaX}px, ${translateY + deltaY}px) scale(${zoom})`;
+    return `translate(${translateX / viewScale + deltaX}px, ${translateY / viewScale + deltaY}px) scale(${zoom / viewScale})`;
   }
 
   getRenderingRect() {
@@ -219,18 +219,8 @@ export function toGfxBlockComponent<
       handleGfxConnection(this);
     }
 
-    // eslint-disable-next-line sonarjs/no-identical-functions
     getCSSTransform() {
-      const viewport = this.gfx.viewport;
-      const { translateX, translateY, zoom } = viewport;
-      const bound = Bound.deserialize(this.model.xywh);
-
-      const scaledX = bound.x * zoom;
-      const scaledY = bound.y * zoom;
-      const deltaX = scaledX - bound.x;
-      const deltaY = scaledY - bound.y;
-
-      return `translate(${translateX + deltaX}px, ${translateY + deltaY}px) scale(${zoom})`;
+      return GfxBlockComponent.prototype.getCSSTransform.call(this);
     }
 
     // eslint-disable-next-line sonarjs/no-identical-functions