From 3dbeebd6bac07735f93f89505134f4c0e63e2e14 Mon Sep 17 00:00:00 2001
From: L-Sun <zover.v@gmail.com>
Date: Mon, 17 Mar 2025 14:00:17 +0000
Subject: [PATCH] fix(editor): background of surface-ref disappeared when it
 was re-rendered (#10931)

This PR fixed the background of surface-ref dis
---
 .../edgeless/edgeless-root-preview-block.ts    | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/edgeless-root-preview-block.ts b/blocksuite/affine/blocks/block-root/src/edgeless/edgeless-root-preview-block.ts
index a11b6303b..8b736412c 100644
--- a/blocksuite/affine/blocks/block-root/src/edgeless/edgeless-root-preview-block.ts
+++ b/blocksuite/affine/blocks/block-root/src/edgeless/edgeless-root-preview-block.ts
@@ -23,7 +23,7 @@ import {
 } from '@blocksuite/block-std/gfx';
 import { css, html } from 'lit';
 import { query, state } from 'lit/decorators.js';
-import { styleMap } from 'lit/directives/style-map.js';
+import { type StyleInfo, styleMap } from 'lit/directives/style-map.js';
 
 import type { EdgelessRootBlockWidgetName } from '../types.js';
 import type { EdgelessRootService } from './edgeless-root-service.js';
@@ -68,19 +68,15 @@ export class EdgelessRootPreviewBlockComponent extends BlockComponent<
     }
   `;
 
-  @query('.edgeless-background')
-  accessor background!: HTMLDivElement;
-
   private readonly _refreshLayerViewport = requestThrottledConnectedFrame(
     () => {
       const { zoom, translateX, translateY } = this.service.viewport;
       const gap = getBgGridGap(zoom);
 
-      this.background.style.setProperty(
-        'background-position',
-        `${translateX}px ${translateY}px`
-      );
-      this.background.style.setProperty('background-size', `${gap}px ${gap}px`);
+      this.backgroundStyle = {
+        backgroundPosition: `${translateX}px ${translateY}px`,
+        backgroundSize: `${gap}px ${gap}px`,
+      };
     },
     this
   );
@@ -229,6 +225,7 @@ export class EdgelessRootPreviewBlockComponent extends BlockComponent<
 
   override renderBlock() {
     const background = styleMap({
+      ...this.backgroundStyle,
       background: this.overrideBackground,
     });
 
@@ -260,6 +257,9 @@ export class EdgelessRootPreviewBlockComponent extends BlockComponent<
   @state()
   accessor overrideBackground: string | undefined = undefined;
 
+  @state()
+  accessor backgroundStyle: Readonly<StyleInfo> | null = null;
+
   @query('gfx-viewport')
   accessor gfxViewportElm!: GfxViewportElement;