Repository: toeverything/AFFiNE
File: blocksuite/affine/blocks/block-root/src/edgeless/edgeless-root-preview-block.ts (TypeScript)

Code before:
    if (this._resizeObserver) {
      this._resizeObserver.disconnect();
      this._resizeObserver = null;
    }
  }

  override firstUpdated() {
    this._initSlotEffects();
    this._initResizeEffect();
    this._initPixelRatioChangeEffect();
    this._initFontLoader();
    this._initLayerUpdateEffect();

    this._disposables.add(
      this._gfx.viewport.viewportUpdated.subscribe(() => {
        this._refreshLayerViewport();
      })
    );

    this._refreshLayerViewport();
  }

  override renderBlock() {
    const background = styleMap({
      ...this.backgroundStyle,
      background: this.overrideBackground,
    });

    return html`
      <div class="edgeless-background edgeless-container" style=${background}>
        <gfx-viewport
          .enableChildrenSchedule=${!this._disableScheduleUpdate}
          .viewport=${this._gfx.viewport}
          .getModelsInViewport=${() => {
            const blocks = this._gfx.grid.search(
              this._gfx.viewport.viewportBounds,
              {
                useSet: true,
                filter: ['block'],
              }
            );
            return blocks;
          }}
          .host=${this.host}
        >
          ${this.renderChildren(this.model)}${this.renderChildren(
            this.surfaceBlockModel
          )}
        </gfx-viewport>
      </div>
    `;

Review comment (suggestion):
<!--__GRAPHITE_HTML_TAG_START__--><p class='graphite__hidden'><i>[Re: line +235]</i></p><!--__GRAPHITE_HTML_TAG_END__-->
When the surface-ref re-rendered and the ref viewport is not updated, the grid background will disappeared
<!--__GRAPHITE_HTML_TAG_START__--><p class='graphite__hidden'>See this comment inline on <a href="https://app.graphite.dev/github/pr/toeverything/AFFiNE/10931?utm_source=unchanged-line-comment">Graphite</a>.</p><!--__GRAPHITE_HTML_TAG_END__-->

Code after:
      this._resizeObserver = null;
    }
  }

  override firstUpdated() {
    this._initSlotEffects();
    this._initResizeEffect();
    this._initPixelRatioChangeEffect();
    this._initFontLoader();
    this._initLayerUpdateEffect();

    this._disposables.add(
      this._gfx.viewport.viewportUpdated.subscribe(() => {
        this._refreshLayerViewport();
      })
    );

    this._refreshLayerViewport();
  }

  override renderBlock() {
    const background = styleMap({
      ...this.backgroundStyle,
      background: this.overrideBackground,
    });

    return html`
      <div class="edgeless-background edgeless-container" style=${background}>
        <gfx-viewport
          .enableChildrenSchedule=${!this._disableScheduleUpdate}
          .viewport=${this._gfx.viewport}
          .getModelsInViewport=${() => {
            const blocks = this._gfx.grid.search(
              this._gfx.viewport.viewportBounds,
              {
                useSet: true,
                filter: ['block'],
              }
            );
            return blocks;
          }}
          .host=${this.host}
        >
          ${this.renderChildren(this.model)}${this.renderChildren(
            this.surfaceBlockModel
          )}
        </gfx-viewport>
      </div>
    `;
  }