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

blocksuite/affine/blocks/root/src/edgeless/components/auto-complete/edgeless-auto-complete.ts

@@ -1,7 +1,5 @@
 import {
   CanvasElementType,
-  type ConnectionOverlay,
-  ConnectorPathGenerator,
   EdgelessCRUDIdentifier,
   getSurfaceBlock,
   getSurfaceComponent,
@@ -10,6 +8,10 @@ import {
   OverlayIdentifier,
   type RoughCanvas,
 } from '@blocksuite/affine-block-surface';
+import {
+  type ConnectionOverlay,
+  ConnectorPathGenerator,
+} from '@blocksuite/affine-gfx-connector';
 import { mountShapeTextEditor } from '@blocksuite/affine-gfx-shape';
 import type {
   Connection,

blocksuite/affine/blocks/root/src/edgeless/edgeless-builtin-spec.ts

@@ -1,4 +1,3 @@
-import { ConnectionOverlay } from '@blocksuite/affine-block-surface';
 import type * as BrushEffect from '@blocksuite/affine-gfx-brush';
 import type * as NoteEffect from '@blocksuite/affine-gfx-note';
 import type * as ShapeEffect from '@blocksuite/affine-gfx-shape';
@@ -36,7 +35,6 @@ export const EdgelessEditExtensions: ExtensionType[] = [
 ];
 
 export const EdgelessBuiltInManager: ExtensionType[] = [
-  ConnectionOverlay,
   SnapOverlay,
   AltCloneExtension,
   EditPropsMiddlewareBuilder,

blocksuite/affine/blocks/surface/src/extensions/index.ts

@@ -4,3 +4,4 @@ export * from './element-renderer';
 export * from './export-manager';
 export * from './legacy-slot-extension';
 export * from './query';
+export * from './surface-middleware';

blocksuite/affine/blocks/surface/src/extensions/query.ts

@@ -1,9 +1,7 @@
-import type { NoteBlockModel } from '@blocksuite/affine-model';
+import type { Connectable, NoteBlockModel } from '@blocksuite/affine-model';
 import type { GfxModel } from '@blocksuite/std/gfx';
 import type { BlockModel } from '@blocksuite/store';
 
-import type { Connectable } from '../managers/connector-manager';
-
 export function isConnectable(
   element: GfxModel | null
 ): element is Connectable {

blocksuite/affine/blocks/surface/src/extensions/surface-middleware.ts

@@ -0,0 +1,23 @@
+import { createIdentifier } from '@blocksuite/global/di';
+import type { ExtensionType } from '@blocksuite/store';
+
+import type { SurfaceBlockModel } from '../surface-model';
+
+export type SurfaceMiddleware = (surface: SurfaceBlockModel) => () => void;
+
+export const surfaceMiddlewareIdentifier = createIdentifier<{
+  middleware: SurfaceMiddleware;
+}>('surface-middleware');
+
+export function surfaceMiddlewareExtension(
+  id: string,
+  middleware: SurfaceMiddleware
+): ExtensionType {
+  return {
+    setup: di => {
+      di.addImpl(surfaceMiddlewareIdentifier(id), {
+        middleware,
+      });
+    },
+  };
+}

blocksuite/affine/blocks/surface/src/index.ts

@@ -7,18 +7,6 @@ export {
   SurfaceGroupLikeModel,
 } from './element-model/base.js';
 export { CanvasElementType } from './element-model/index.js';
-import {
-  isConnectorAndBindingsAllSelected,
-  isConnectorWithLabel,
-} from './managers/connector-manager.js';
-export {
-  calculateNearestLocation,
-  ConnectionOverlay,
-  ConnectorEndpointLocations,
-  ConnectorEndpointLocationsOnTriangle,
-  ConnectorPathGenerator,
-  PathGenerator,
-} from './managers/connector-manager.js';
 export { CanvasRenderer } from './renderer/canvas-renderer.js';
 export type { ElementRenderer } from './renderer/elements/index.js';
 export * from './renderer/elements/type.js';
@@ -60,11 +48,6 @@ export type { Options } from './utils/rough/core';
 export { sortIndex } from './utils/sort';
 export { updateXYWH } from './utils/update-xywh.js';
 
-export const ConnectorUtils = {
-  isConnectorAndBindingsAllSelected,
-  isConnectorWithLabel,
-};
-
 export const TextUtils = {
   wrapFontFamily,
   getFontFaces,

blocksuite/affine/blocks/surface/src/surface-model.ts

@@ -9,8 +9,8 @@ import { BlockSchemaExtension, defineBlockSchema } from '@blocksuite/store';
 import * as Y from 'yjs';
 
 import { elementsCtorMap } from './element-model/index.js';
+import { surfaceMiddlewareIdentifier } from './extensions/surface-middleware.js';
 import { SurfaceBlockTransformer } from './surface-transformer.js';
-import { connectorWatcher } from './watchers/connector.js';
 import { groupRelationWatcher } from './watchers/group.js';
 
 export const SurfaceBlockSchema = defineBlockSchema({
@@ -39,15 +39,19 @@ export const SurfaceBlockSchema = defineBlockSchema({
 export const SurfaceBlockSchemaExtension =
   BlockSchemaExtension(SurfaceBlockSchema);
 
-export type SurfaceMiddleware = (surface: SurfaceBlockModel) => () => void;
-
 export class SurfaceBlockModel extends BaseSurfaceModel {
   private readonly _disposables: DisposableGroup = new DisposableGroup();
 
   override _init() {
     this._extendElement(elementsCtorMap);
     super._init();
-    [connectorWatcher(this), groupRelationWatcher(this)].forEach(disposable =>
+    this.doc.provider
+      .getAll(surfaceMiddlewareIdentifier)
+      .forEach(({ middleware }) => {
+        this._disposables.add(middleware(this));
+      });
+
+    [groupRelationWatcher(this)].forEach(disposable =>
       this._disposables.add(disposable)
     );
   }

blocksuite/affine/blocks/surface/src/watchers/group.ts

@@ -1,5 +1,6 @@
 import { SurfaceGroupLikeModel } from '../element-model/base.js';
-import type { SurfaceBlockModel, SurfaceMiddleware } from '../surface-model.js';
+import type { SurfaceMiddleware } from '../extensions/surface-middleware.js';
+import type { SurfaceBlockModel } from '../surface-model.js';
 
 export const groupRelationWatcher: SurfaceMiddleware = (
   surface: SurfaceBlockModel

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-manager.ts

@@ -1,3 +1,4 @@
+import { AStarRunner, Overlay } from '@blocksuite/affine-block-surface';
 import {
   type BrushElementModel,
   type Connection,
@@ -35,9 +36,6 @@ import type {
 import { effect } from '@preact/signals-core';
 import last from 'lodash-es/last';
 
-import { Overlay } from '../renderer/overlay.js';
-import { AStarRunner } from '../utils/a-star.js';
-
 export type Connectable = Exclude<
   GfxModel,
   ConnectorElementModel | BrushElementModel | GroupElementModel
@@ -850,7 +848,6 @@ function renderRect(
   ctx.restore();
 }
 
-// TODO(@mirone): move to connector package
 export class ConnectionOverlay extends Overlay {
   static override overlayName = 'connection';
 

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

@@ -1,8 +1,12 @@
+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 '../managers/connector-manager.js';
+import { ConnectorPathGenerator } from './connector-manager';
-import type { SurfaceBlockModel, SurfaceMiddleware } from '../surface-model.js';
 
 export const connectorWatcher: SurfaceMiddleware = (
   surface: SurfaceBlockModel
@@ -86,3 +90,8 @@ export const connectorWatcher: SurfaceMiddleware = (
     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 {
+import { EdgelessCRUDIdentifier } from '@blocksuite/affine-block-surface';
-  ConnectorUtils,
-  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,