diff --git a/blocksuite/affine/shared/src/services/drag-handle-config.ts b/blocksuite/affine/shared/src/services/drag-handle-config.ts index d186a325c4..e4c7869568 100644 --- a/blocksuite/affine/shared/src/services/drag-handle-config.ts +++ b/blocksuite/affine/shared/src/services/drag-handle-config.ts @@ -1,69 +1,12 @@ import { - type BlockComponent, type BlockStdScope, - type DndEventState, - type EditorHost, Extension, - type ExtensionType, StdIdentifier, } from '@blocksuite/block-std'; import { type Container, createIdentifier } from '@blocksuite/global/di'; -import type { Point } from '@blocksuite/global/utils'; import { Job, Slice, type SliceSnapshot } from '@blocksuite/store'; export type DropType = 'before' | 'after' | 'in'; -export type OnDragStartProps = { - state: DndEventState; - startDragging: ( - blocks: BlockComponent[], - state: DndEventState, - dragPreview?: HTMLElement, - dragPreviewOffset?: Point - ) => void; - anchorBlockId: string | null; - editorHost: EditorHost; -}; - -export type OnDragEndProps = { - state: DndEventState; - draggingElements: BlockComponent[]; - dropBlockId: string; - dropType: DropType | null; - dragPreview: HTMLElement; - noteScale: number; - editorHost: EditorHost; -}; - -export type OnDragMoveProps = { - state: DndEventState; - draggingElements?: BlockComponent[]; -}; - -export type DragHandleOption = { - flavour: string | RegExp; - edgeless?: boolean; - onDragStart?: (props: OnDragStartProps) => boolean; - onDragMove?: (props: OnDragMoveProps) => boolean; - onDragEnd?: (props: OnDragEndProps) => boolean; -}; - -export const DragHandleConfigIdentifier = createIdentifier( - 'AffineDragHandleIdentifier' -); - -export function DragHandleConfigExtension( - option: DragHandleOption -): ExtensionType { - return { - setup: di => { - const key = - typeof option.flavour === 'string' - ? option.flavour - : option.flavour.source; - di.addImpl(DragHandleConfigIdentifier(key), () => option); - }, - }; -} export const DndApiExtensionIdentifier = createIdentifier( 'AffineDndApiIdentifier' diff --git a/blocksuite/affine/shared/src/utils/dnd/index.ts b/blocksuite/affine/shared/src/utils/dnd/index.ts index 72862148f6..8dc9c445ab 100644 --- a/blocksuite/affine/shared/src/utils/dnd/index.ts +++ b/blocksuite/affine/shared/src/utils/dnd/index.ts @@ -1,4 +1,3 @@ export * from './calc-drop-target.js'; export * from './get-drop-rect-by-point.js'; -export * from './legacy.js'; export type { DropResult } from './types.js'; diff --git a/blocksuite/affine/shared/src/utils/dnd/legacy.ts b/blocksuite/affine/shared/src/utils/dnd/legacy.ts deleted file mode 100644 index e77a5f6641..0000000000 --- a/blocksuite/affine/shared/src/utils/dnd/legacy.ts +++ /dev/null @@ -1,175 +0,0 @@ -import type { - EmbedCardStyle, - EmbedSyncedDocModel, -} from '@blocksuite/affine-model'; -import type { BlockComponent } from '@blocksuite/block-std'; -import { GfxControllerIdentifier } from '@blocksuite/block-std/gfx'; -import { assertExists, Bound } from '@blocksuite/global/utils'; -import type { BlockModel } from '@blocksuite/store'; - -import type { OnDragEndProps } from '../../services/index.js'; -import { getBlockProps } from '../model/index.js'; - -function isEmbedSyncedDocBlock( - element: BlockModel | BlockSuite.EdgelessModel | null -): element is EmbedSyncedDocModel { - return ( - !!element && - 'flavour' in element && - element.flavour === 'affine:embed-synced-doc' - ); -} - -/** - * @deprecated - * This is a terrible hack to apply the drag preview, - * do not use it. - * We're migrating to a standard drag and drop API. - */ -export function convertDragPreviewDocToEdgeless({ - blockComponent, - dragPreview, - cssSelector, - width, - height, - noteScale, - state, -}: OnDragEndProps & { - blockComponent: BlockComponent; - cssSelector: string; - width?: number; - height?: number; - style?: EmbedCardStyle; -}): boolean { - const edgelessRoot = blockComponent.closest('affine-edgeless-root'); - if (!edgelessRoot) { - return false; - } - - const previewEl = dragPreview.querySelector(cssSelector); - if (!previewEl) { - return false; - } - const rect = previewEl.getBoundingClientRect(); - const border = 2; - const controller = blockComponent.std.get(GfxControllerIdentifier); - const { viewport } = controller; - const { left: viewportLeft, top: viewportTop } = viewport; - const currentViewBound = new Bound( - rect.x - viewportLeft, - rect.y - viewportTop, - rect.width + border / noteScale, - rect.height + border / noteScale - ); - const currentModelBound = viewport.toModelBound(currentViewBound); - - // Except for embed synced doc block - // The width and height of other card style should be fixed - const newBound = isEmbedSyncedDocBlock(blockComponent.model) - ? new Bound( - currentModelBound.x, - currentModelBound.y, - (currentModelBound.w ?? width) * noteScale, - (currentModelBound.h ?? height) * noteScale - ) - : new Bound( - currentModelBound.x, - currentModelBound.y, - (width ?? currentModelBound.w) * noteScale, - (height ?? currentModelBound.h) * noteScale - ); - - const blockModel = blockComponent.model; - const blockProps = getBlockProps(blockModel); - - // @ts-expect-error TODO: fix after edgeless refactor - const blockId = edgelessRoot.service.addBlock( - blockComponent.flavour, - { - ...blockProps, - xywh: newBound.serialize(), - }, - // @ts-expect-error TODO: fix after edgeless refactor - edgelessRoot.surfaceBlockModel - ); - - // Embed synced doc block should extend the note scale - // @ts-expect-error TODO: fix after edgeless refactor - const newBlock = edgelessRoot.service.getElementById(blockId); - if (isEmbedSyncedDocBlock(newBlock)) { - // @ts-expect-error TODO: fix after edgeless refactor - edgelessRoot.service.updateElement(newBlock.id, { - scale: noteScale, - }); - } - - const doc = blockComponent.doc; - const host = blockComponent.host; - const altKey = state.raw.altKey; - if (!altKey) { - doc.deleteBlock(blockModel); - host.selection.setGroup('note', []); - } - - // @ts-expect-error TODO: fix after edgeless refactor - edgelessRoot.service.selection.set({ - elements: [blockId], - editing: false, - }); - - return true; -} - -/** - * @deprecated - * This is a terrible hack to apply the drag preview, - * do not use it. - * We're migrating to a standard drag and drop API. - */ -export function convertDragPreviewEdgelessToDoc({ - blockComponent, - dropBlockId, - dropType, - state, - style, -}: OnDragEndProps & { - blockComponent: BlockComponent; - style?: EmbedCardStyle; -}): boolean { - const doc = blockComponent.doc; - const host = blockComponent.host; - const targetBlock = doc.getBlockById(dropBlockId); - if (!targetBlock) return false; - - const shouldInsertIn = dropType === 'in'; - const parentBlock = shouldInsertIn ? targetBlock : doc.getParent(targetBlock); - assertExists(parentBlock); - const parentIndex = shouldInsertIn - ? 0 - : parentBlock.children.indexOf(targetBlock) + - (dropType === 'after' ? 1 : 0); - - const blockModel = blockComponent.model; - - // eslint-disable-next-line no-unused-vars - const { width, height, xywh, rotate, zIndex, ...blockProps } = - getBlockProps(blockModel); - if (style) { - blockProps.style = style; - } - - doc.addBlock( - blockModel.flavour as never, - blockProps, - parentBlock, - parentIndex - ); - - const altKey = state.raw.altKey; - if (!altKey) { - doc.deleteBlock(blockModel); - host.selection.setGroup('gfx', []); - } - - return true; -} diff --git a/blocksuite/blocks/src/root-block/widgets/drag-handle/config.ts b/blocksuite/blocks/src/root-block/widgets/drag-handle/config.ts index f711948df0..919417333f 100644 --- a/blocksuite/blocks/src/root-block/widgets/drag-handle/config.ts +++ b/blocksuite/blocks/src/root-block/widgets/drag-handle/config.ts @@ -1,8 +1,5 @@ -import type { - DragHandleOption, - DropType, -} from '@blocksuite/affine-shared/services'; -import type { Disposable, Rect } from '@blocksuite/global/utils'; +import type { DropType } from '@blocksuite/affine-shared/services'; +import type { Rect } from '@blocksuite/global/utils'; export const DRAG_HANDLE_CONTAINER_HEIGHT = 24; export const DRAG_HANDLE_CONTAINER_WIDTH = 16; @@ -29,51 +26,3 @@ export type DropResult = { dropBlockId: string; dropType: DropType; }; - -export class DragHandleOptionsRunner { - private readonly optionMap = new Map(); - - get options(): DragHandleOption[] { - return Array.from(this.optionMap.keys()); - } - - private _decreaseOptionCount(option: DragHandleOption) { - const count = this.optionMap.get(option) || 0; - if (count > 1) { - this.optionMap.set(option, count - 1); - } else { - this.optionMap.delete(option); - } - } - - private _getExistingOptionWithSameFlavour( - option: DragHandleOption - ): DragHandleOption | undefined { - return Array.from(this.optionMap.keys()).find( - op => op.flavour === option.flavour - ); - } - - getOption(flavour: string): DragHandleOption | undefined { - return this.options.find(option => { - if (typeof option.flavour === 'string') { - return option.flavour === flavour; - } else { - return option.flavour.test(flavour); - } - }); - } - - register(option: DragHandleOption): Disposable { - const currentOption = - this._getExistingOptionWithSameFlavour(option) || option; - const count = this.optionMap.get(currentOption) || 0; - this.optionMap.set(currentOption, count + 1); - - return { - dispose: () => { - this._decreaseOptionCount(currentOption); - }, - }; - } -} diff --git a/blocksuite/blocks/src/root-block/widgets/drag-handle/drag-handle.ts b/blocksuite/blocks/src/root-block/widgets/drag-handle/drag-handle.ts index d90e7035d3..2a49c3f877 100644 --- a/blocksuite/blocks/src/root-block/widgets/drag-handle/drag-handle.ts +++ b/blocksuite/blocks/src/root-block/widgets/drag-handle/drag-handle.ts @@ -28,7 +28,6 @@ import type { EdgelessRootService } from '../../edgeless/index.js'; import type { DragPreview } from './components/drag-preview.js'; import type { DropIndicator } from './components/drop-indicator.js'; import type { DropResult } from './config.js'; -import { DragHandleOptionsRunner } from './config.js'; import type { AFFINE_DRAG_HANDLE_WIDGET } from './consts.js'; import { PreviewHelper } from './helpers/preview-helper.js'; import { RectHelper } from './helpers/rect-helper.js'; @@ -289,8 +288,6 @@ export class AffineDragHandleWidget extends WidgetComponent { noteScale = signal(1); - readonly optionRunner = new DragHandleOptionsRunner(); - pointerEventWatcher = new PointerEventWatcher(this); previewHelper = new PreviewHelper(this);