perf(edgeless): reduce redundant dom query per render (#9016)

packages/affine/block-surface/src/managers/connector-manager.ts

@@ -9,6 +9,7 @@ import {
   GroupElementModel,
   type LocalConnectorElementModel,
 } from '@blocksuite/affine-model';
+import { ThemeProvider } from '@blocksuite/affine-shared/services';
 import {
   almostEqual,
   assertEquals,
@@ -31,6 +32,7 @@ import {
   toRadian,
   Vec,
 } from '@blocksuite/global/utils';
+import { effect } from '@preact/signals-core';
 
 import { Overlay } from '../renderer/overlay.js';
 import { AStarRunner } from '../utils/a-star.js';
@@ -822,6 +824,10 @@ function renderRect(
 export class ConnectionOverlay extends Overlay {
   static override overlayName = 'connection';
 
+  private _emphasisColor: string;
+
+  private _themeDisposer: (() => void) | null = null;
+
   highlightPoint: IVec | null = null;
 
   points: IVec[] = [];
@@ -832,6 +838,8 @@ export class ConnectionOverlay extends Overlay {
 
   constructor(gfx: GfxController) {
     super(gfx);
+    this._emphasisColor = this._getEmphasisColor();
+    this._setupThemeListener();
   }
 
   private _findConnectablesInViews() {
@@ -840,6 +848,20 @@ export class ConnectionOverlay extends Overlay {
     return gfx.getElementsByBound(bound).filter(ele => ele.connectable);
   }
 
+  private _getEmphasisColor(): string {
+    return getComputedStyle(this.gfx.std.host).getPropertyValue(
+      '--affine-text-emphasis-color'
+    );
+  }
+
+  private _setupThemeListener(): void {
+    const themeService = this.gfx.std.get(ThemeProvider);
+    this._themeDisposer = effect(() => {
+      themeService.theme$;
+      this._emphasisColor = this._getEmphasisColor();
+    });
+  }
+
   _clearRect() {
     this.points = [];
     this.highlightPoint = null;
@@ -852,13 +874,17 @@ export class ConnectionOverlay extends Overlay {
     this._clearRect();
   }
 
+  override dispose() {
+    this._themeDisposer?.();
+    if (!this._renderer) return;
+    this._renderer.removeOverlay(this);
+    this._renderer = null;
+  }
+
   override render(ctx: CanvasRenderingContext2D): void {
     const zoom = this.gfx.viewport.zoom;
     const radius = 5 / zoom;
-    const color = getComputedStyle(this.gfx.std.host).getPropertyValue(
-      '--affine-text-emphasis-color'
-    );
-
+    const color = this._emphasisColor;
     ctx.globalAlpha = 0.6;
     let lineWidth = 1 / zoom;
     if (this.sourceBounds) {

packages/affine/block-surface/src/renderer/canvas-renderer.ts

@@ -365,6 +365,8 @@ export class CanvasRenderer {
   }
 
   dispose(): void {
+    this._overlays.forEach(overlay => overlay.dispose());
+    this._overlays.clear();
     this._disposables.dispose();
   }
 

packages/affine/block-surface/src/renderer/overlay.ts

@@ -37,6 +37,8 @@ export abstract class Overlay extends Extension {
 
   clear() {}
 
+  dispose() {}
+
   refresh() {
     if (this._renderer) {
       this._renderer.refresh();

packages/blocks/src/root-block/edgeless/utils/tool-overlay.ts

@@ -256,7 +256,7 @@ class ToolOverlay extends Overlay {
     );
   }
 
-  dispose(): void {
+  override dispose(): void {
     this.disposables.dispose();
   }