refactor(editor): move connector overlay to connector package (#11944)

blocksuite/affine/gfx/connector/src/components/connector-handle.ts

@@ -1,5 +1,4 @@
 import {
-  type ConnectionOverlay,
   EdgelessLegacySlotIdentifier,
   OverlayIdentifier,
 } from '@blocksuite/affine-block-surface';
@@ -20,6 +19,8 @@ import { css, html, LitElement } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
+import type { ConnectionOverlay } from '../connector-manager';
+
 const SIZE = 12;
 const HALF_SIZE = SIZE / 2;
 

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

@@ -1,9 +1,5 @@
 import {
-  calculateNearestLocation,
   CanvasElementType,
-  type ConnectionOverlay,
-  ConnectorEndpointLocations,
-  ConnectorEndpointLocationsOnTriangle,
   OverlayIdentifier,
 } from '@blocksuite/affine-block-surface';
 import type {
@@ -22,6 +18,13 @@ import { Bound } from '@blocksuite/global/gfx';
 import type { PointerEventState } from '@blocksuite/std';
 import { BaseTool, type GfxModel } from '@blocksuite/std/gfx';
 
+import {
+  calculateNearestLocation,
+  type ConnectionOverlay,
+  ConnectorEndpointLocations,
+  ConnectorEndpointLocationsOnTriangle,
+} from './connector-manager';
+
 enum ConnectorToolMode {
   // Dragging connect
   Dragging,

blocksuite/affine/gfx/connector/src/connector-watcher.ts

@@ -0,0 +1,97 @@
+import {
+  type SurfaceBlockModel,
+  type SurfaceMiddleware,
+  surfaceMiddlewareExtension,
+} from '@blocksuite/affine-block-surface';
+import type { ConnectorElementModel } from '@blocksuite/affine-model';
+import type { GfxModel } from '@blocksuite/std/gfx';
+
+import { ConnectorPathGenerator } from './connector-manager';
+
+export const connectorWatcher: SurfaceMiddleware = (
+  surface: SurfaceBlockModel
+) => {
+  const hasElementById = (id: string) =>
+    surface.hasElementById(id) || surface.doc.hasBlock(id);
+  const elementGetter = (id: string) =>
+    surface.getElementById(id) ?? (surface.doc.getModelById(id) as GfxModel);
+  const updateConnectorPath = (connector: ConnectorElementModel) => {
+    if (
+      ((connector.source?.id && hasElementById(connector.source.id)) ||
+        (!connector.source?.id && connector.source?.position)) &&
+      ((connector.target?.id && hasElementById(connector.target.id)) ||
+        (!connector.target?.id && connector.target?.position))
+    ) {
+      ConnectorPathGenerator.updatePath(connector, null, elementGetter);
+    }
+  };
+  const pendingList = new Set<ConnectorElementModel>();
+  let pendingFlag = false;
+  const addToUpdateList = (connector: ConnectorElementModel) => {
+    pendingList.add(connector);
+
+    if (!pendingFlag) {
+      pendingFlag = true;
+      queueMicrotask(() => {
+        pendingList.forEach(updateConnectorPath);
+        pendingList.clear();
+        pendingFlag = false;
+      });
+    }
+  };
+
+  const disposables = [
+    surface.elementAdded.subscribe(({ id }) => {
+      const element = elementGetter(id);
+
+      if (!element) return;
+
+      if ('type' in element && element.type === 'connector') {
+        addToUpdateList(element as ConnectorElementModel);
+      } else {
+        surface.getConnectors(id).forEach(addToUpdateList);
+      }
+    }),
+    surface.elementUpdated.subscribe(({ id, props }) => {
+      const element = elementGetter(id);
+
+      if (props['xywh'] || props['rotate']) {
+        surface.getConnectors(id).forEach(addToUpdateList);
+      }
+
+      if (
+        'type' in element &&
+        element.type === 'connector' &&
+        (props['mode'] !== undefined ||
+          props['target'] ||
+          props['source'] ||
+          (props['xywh'] && !(element as ConnectorElementModel).updatingPath))
+      ) {
+        addToUpdateList(element as ConnectorElementModel);
+      }
+    }),
+    surface.doc.slots.blockUpdated.subscribe(payload => {
+      if (
+        payload.type === 'add' ||
+        (payload.type === 'update' && payload.props.key === 'xywh')
+      ) {
+        surface.getConnectors(payload.id).forEach(addToUpdateList);
+      }
+    }),
+  ];
+
+  surface
+    .getElementsByType('connector')
+    .forEach(connector =>
+      updateConnectorPath(connector as ConnectorElementModel)
+    );
+
+  return () => {
+    disposables.forEach(d => d.unsubscribe());
+  };
+};
+
+export const connectorWatcherExtension = surfaceMiddlewareExtension(
+  'connector-watcher',
+  connectorWatcher
+);

blocksuite/affine/gfx/connector/src/element-renderer/index.ts

@@ -1,6 +1,5 @@
 import {
   type CanvasRenderer,
-  ConnectorUtils,
   type ElementRenderer,
   ElementRendererExtension,
   type RoughCanvas,
@@ -26,6 +25,7 @@ import {
 } from '@blocksuite/global/gfx';
 import { deltaInsertsToChunks } from '@blocksuite/std/inline';
 
+import { isConnectorWithLabel } from '../connector-manager.js';
 import {
   DEFAULT_ARROW_SIZE,
   getArrowOptions,
@@ -55,7 +55,7 @@ export const connector: ElementRenderer<
 
   ctx.setTransform(matrix);
 
-  const hasLabel = ConnectorUtils.isConnectorWithLabel(model);
+  const hasLabel = isConnectorWithLabel(model);
   let dx = 0;
   let dy = 0;
 

blocksuite/affine/gfx/connector/src/index.ts

@@ -1,4 +1,5 @@
 export * from './adapter';
+export * from './connector-manager';
 export * from './connector-tool';
 export * from './element-renderer';
 export * from './element-transform';

blocksuite/affine/gfx/connector/src/store.ts

@@ -7,6 +7,7 @@ import {
   connectorToMarkdownAdapterMatcher,
   connectorToPlainTextAdapterMatcher,
 } from './adapter';
+import { connectorWatcherExtension } from './connector-watcher';
 
 export class ConnectorStoreExtension extends StoreExtensionProvider {
   override name = 'affine-connector-gfx';
@@ -15,5 +16,6 @@ export class ConnectorStoreExtension extends StoreExtensionProvider {
     super.setup(context);
     context.register(connectorToPlainTextAdapterMatcher);
     context.register(connectorToMarkdownAdapterMatcher);
+    context.register(connectorWatcherExtension);
   }
 }

blocksuite/affine/gfx/connector/src/toolbar/config.ts

@@ -1,7 +1,4 @@
-import {
-  ConnectorUtils,
-  EdgelessCRUDIdentifier,
-} from '@blocksuite/affine-block-surface';
+import { EdgelessCRUDIdentifier } from '@blocksuite/affine-block-surface';
 import {
   packColor,
   type PickColorEvent,
@@ -61,6 +58,7 @@ import { BlockFlavourIdentifier } from '@blocksuite/std';
 import { html } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 
+import { isConnectorWithLabel } from '../connector-manager';
 import { mountConnectorLabelEditor } from '../text';
 
 const FRONT_ENDPOINT_STYLE_LIST = [
@@ -350,7 +348,7 @@ export const connectorToolbarConfig = {
       ConnectorElementModel,
       'connector',
       (ctx, model, props) => {
-        if (!ConnectorUtils.isConnectorWithLabel(model)) return;
+        if (!isConnectorWithLabel(model)) return;
 
         const labelStyle = { ...model.labelStyle, ...props };
 

blocksuite/affine/gfx/connector/src/view.ts

@@ -3,6 +3,7 @@ import {
   ViewExtensionProvider,
 } from '@blocksuite/affine-ext-loader';
 
+import { ConnectionOverlay } from './connector-manager';
 import { ConnectorTool } from './connector-tool';
 import { effects } from './effects';
 import { ConnectorFilter } from './element-transform';
@@ -24,6 +25,7 @@ export class ConnectorViewExtension extends ViewExtensionProvider {
       context.register(ConnectorFilter);
       context.register(connectorQuickTool);
       context.register(connectorToolbarExtension);
+      context.register(ConnectionOverlay);
     }
   }
 }

blocksuite/affine/gfx/mindmap/src/element-renderer.ts

@@ -1,9 +1,11 @@
 import {
-  ConnectorPathGenerator,
   type ElementRenderer,
   ElementRendererExtension,
 } from '@blocksuite/affine-block-surface';
-import { connector as renderConnector } from '@blocksuite/affine-gfx-connector';
+import {
+  connector as renderConnector,
+  ConnectorPathGenerator,
+} from '@blocksuite/affine-gfx-connector';
 import type {
   MindmapElementModel,
   MindmapNode,

blocksuite/affine/gfx/mindmap/src/indicator-overlay/index.ts

@@ -1,4 +1,5 @@
-import { Overlay, PathGenerator } from '@blocksuite/affine-block-surface';
+import { Overlay } from '@blocksuite/affine-block-surface';
+import { PathGenerator } from '@blocksuite/affine-gfx-connector';
 import {
   ConnectorMode,
   LayoutType,