From 20d49116417d0cc69522a0b231cdc35857bb3e21 Mon Sep 17 00:00:00 2001 From: Saul-Mirone Date: Thu, 24 Apr 2025 01:27:28 +0000 Subject: [PATCH] refactor(editor): move connector overlay to connector package (#11944) --- .../auto-complete/edgeless-auto-complete.ts | 6 +++-- .../src/edgeless/edgeless-builtin-spec.ts | 2 -- .../blocks/surface/src/extensions/index.ts | 1 + .../blocks/surface/src/extensions/query.ts | 4 +--- .../src/extensions/surface-middleware.ts | 23 +++++++++++++++++++ blocksuite/affine/blocks/surface/src/index.ts | 17 -------------- .../blocks/surface/src/surface-model.ts | 12 ++++++---- .../blocks/surface/src/watchers/group.ts | 3 ++- .../src/components/connector-handle.ts | 3 ++- .../connector/src}/connector-manager.ts | 5 +--- .../gfx/connector/src/connector-tool.ts | 11 +++++---- .../connector/src/connector-watcher.ts} | 13 +++++++++-- .../connector/src/element-renderer/index.ts | 4 ++-- blocksuite/affine/gfx/connector/src/index.ts | 1 + blocksuite/affine/gfx/connector/src/store.ts | 2 ++ .../gfx/connector/src/toolbar/config.ts | 8 +++---- blocksuite/affine/gfx/connector/src/view.ts | 2 ++ .../gfx/mindmap/src/element-renderer.ts | 6 +++-- .../mindmap/src/indicator-overlay/index.ts | 3 ++- 19 files changed, 76 insertions(+), 50 deletions(-) create mode 100644 blocksuite/affine/blocks/surface/src/extensions/surface-middleware.ts rename blocksuite/affine/{blocks/surface/src/managers => gfx/connector/src}/connector-manager.ts (99%) rename blocksuite/affine/{blocks/surface/src/watchers/connector.ts => gfx/connector/src/connector-watcher.ts} (89%) diff --git a/blocksuite/affine/blocks/root/src/edgeless/components/auto-complete/edgeless-auto-complete.ts b/blocksuite/affine/blocks/root/src/edgeless/components/auto-complete/edgeless-auto-complete.ts index 317ac484bd..37bad245cd 100644 --- a/blocksuite/affine/blocks/root/src/edgeless/components/auto-complete/edgeless-auto-complete.ts +++ b/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, diff --git a/blocksuite/affine/blocks/root/src/edgeless/edgeless-builtin-spec.ts b/blocksuite/affine/blocks/root/src/edgeless/edgeless-builtin-spec.ts index fc5c4a305c..5effc87876 100644 --- a/blocksuite/affine/blocks/root/src/edgeless/edgeless-builtin-spec.ts +++ b/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, diff --git a/blocksuite/affine/blocks/surface/src/extensions/index.ts b/blocksuite/affine/blocks/surface/src/extensions/index.ts index 99ba393097..bc2ff5daba 100644 --- a/blocksuite/affine/blocks/surface/src/extensions/index.ts +++ b/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'; diff --git a/blocksuite/affine/blocks/surface/src/extensions/query.ts b/blocksuite/affine/blocks/surface/src/extensions/query.ts index f7c3b34063..05fb2d5f1f 100644 --- a/blocksuite/affine/blocks/surface/src/extensions/query.ts +++ b/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 { diff --git a/blocksuite/affine/blocks/surface/src/extensions/surface-middleware.ts b/blocksuite/affine/blocks/surface/src/extensions/surface-middleware.ts new file mode 100644 index 0000000000..5789ce8073 --- /dev/null +++ b/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, + }); + }, + }; +} diff --git a/blocksuite/affine/blocks/surface/src/index.ts b/blocksuite/affine/blocks/surface/src/index.ts index c8d06065d3..76be0673bc 100644 --- a/blocksuite/affine/blocks/surface/src/index.ts +++ b/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, diff --git a/blocksuite/affine/blocks/surface/src/surface-model.ts b/blocksuite/affine/blocks/surface/src/surface-model.ts index 301c4418da..4e743f5aaf 100644 --- a/blocksuite/affine/blocks/surface/src/surface-model.ts +++ b/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) ); } diff --git a/blocksuite/affine/blocks/surface/src/watchers/group.ts b/blocksuite/affine/blocks/surface/src/watchers/group.ts index 58671c7c0c..5940cec5a8 100644 --- a/blocksuite/affine/blocks/surface/src/watchers/group.ts +++ b/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 diff --git a/blocksuite/affine/gfx/connector/src/components/connector-handle.ts b/blocksuite/affine/gfx/connector/src/components/connector-handle.ts index 55bc553d43..711c8b7edf 100644 --- a/blocksuite/affine/gfx/connector/src/components/connector-handle.ts +++ b/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; diff --git a/blocksuite/affine/blocks/surface/src/managers/connector-manager.ts b/blocksuite/affine/gfx/connector/src/connector-manager.ts similarity index 99% rename from blocksuite/affine/blocks/surface/src/managers/connector-manager.ts rename to blocksuite/affine/gfx/connector/src/connector-manager.ts index 1f1b4acacb..55ed2bc233 100644 --- a/blocksuite/affine/blocks/surface/src/managers/connector-manager.ts +++ b/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'; diff --git a/blocksuite/affine/gfx/connector/src/connector-tool.ts b/blocksuite/affine/gfx/connector/src/connector-tool.ts index cee1948808..45d66df3bc 100644 --- a/blocksuite/affine/gfx/connector/src/connector-tool.ts +++ b/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, diff --git a/blocksuite/affine/blocks/surface/src/watchers/connector.ts b/blocksuite/affine/gfx/connector/src/connector-watcher.ts similarity index 89% rename from blocksuite/affine/blocks/surface/src/watchers/connector.ts rename to blocksuite/affine/gfx/connector/src/connector-watcher.ts index ec262b1183..b9bf9efb83 100644 --- a/blocksuite/affine/blocks/surface/src/watchers/connector.ts +++ b/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 type { SurfaceBlockModel, SurfaceMiddleware } from '../surface-model.js'; +import { ConnectorPathGenerator } from './connector-manager'; 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 +); diff --git a/blocksuite/affine/gfx/connector/src/element-renderer/index.ts b/blocksuite/affine/gfx/connector/src/element-renderer/index.ts index ff1895590a..c43bebfb7d 100644 --- a/blocksuite/affine/gfx/connector/src/element-renderer/index.ts +++ b/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; diff --git a/blocksuite/affine/gfx/connector/src/index.ts b/blocksuite/affine/gfx/connector/src/index.ts index fa47ee23b2..611986b9f7 100644 --- a/blocksuite/affine/gfx/connector/src/index.ts +++ b/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'; diff --git a/blocksuite/affine/gfx/connector/src/store.ts b/blocksuite/affine/gfx/connector/src/store.ts index ebb768af2f..3d15675e9e 100644 --- a/blocksuite/affine/gfx/connector/src/store.ts +++ b/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); } } diff --git a/blocksuite/affine/gfx/connector/src/toolbar/config.ts b/blocksuite/affine/gfx/connector/src/toolbar/config.ts index 13f8f6a332..2a43a86751 100644 --- a/blocksuite/affine/gfx/connector/src/toolbar/config.ts +++ b/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 }; diff --git a/blocksuite/affine/gfx/connector/src/view.ts b/blocksuite/affine/gfx/connector/src/view.ts index 0d25dbc74e..fcd16aef5d 100644 --- a/blocksuite/affine/gfx/connector/src/view.ts +++ b/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); } } } diff --git a/blocksuite/affine/gfx/mindmap/src/element-renderer.ts b/blocksuite/affine/gfx/mindmap/src/element-renderer.ts index 25cdb65d0e..5a166a0df4 100644 --- a/blocksuite/affine/gfx/mindmap/src/element-renderer.ts +++ b/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, diff --git a/blocksuite/affine/gfx/mindmap/src/indicator-overlay/index.ts b/blocksuite/affine/gfx/mindmap/src/indicator-overlay/index.ts index 54c46abf6d..75f722a6f7 100644 --- a/blocksuite/affine/gfx/mindmap/src/indicator-overlay/index.ts +++ b/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,