mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-02-12 04:18:54 +00:00
refactor(editor): cleanup dead code (#9294)
This commit is contained in:
@@ -1,69 +1,12 @@
|
|||||||
import {
|
import {
|
||||||
type BlockComponent,
|
|
||||||
type BlockStdScope,
|
type BlockStdScope,
|
||||||
type DndEventState,
|
|
||||||
type EditorHost,
|
|
||||||
Extension,
|
Extension,
|
||||||
type ExtensionType,
|
|
||||||
StdIdentifier,
|
StdIdentifier,
|
||||||
} from '@blocksuite/block-std';
|
} from '@blocksuite/block-std';
|
||||||
import { type Container, createIdentifier } from '@blocksuite/global/di';
|
import { type Container, createIdentifier } from '@blocksuite/global/di';
|
||||||
import type { Point } from '@blocksuite/global/utils';
|
|
||||||
import { Job, Slice, type SliceSnapshot } from '@blocksuite/store';
|
import { Job, Slice, type SliceSnapshot } from '@blocksuite/store';
|
||||||
|
|
||||||
export type DropType = 'before' | 'after' | 'in';
|
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<DragHandleOption>(
|
|
||||||
'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<DNDAPIExtension>(
|
export const DndApiExtensionIdentifier = createIdentifier<DNDAPIExtension>(
|
||||||
'AffineDndApiIdentifier'
|
'AffineDndApiIdentifier'
|
||||||
|
|||||||
@@ -1,4 +1,3 @@
|
|||||||
export * from './calc-drop-target.js';
|
export * from './calc-drop-target.js';
|
||||||
export * from './get-drop-rect-by-point.js';
|
export * from './get-drop-rect-by-point.js';
|
||||||
export * from './legacy.js';
|
|
||||||
export type { DropResult } from './types.js';
|
export type { DropResult } from './types.js';
|
||||||
|
|||||||
@@ -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;
|
|
||||||
}
|
|
||||||
@@ -1,8 +1,5 @@
|
|||||||
import type {
|
import type { DropType } from '@blocksuite/affine-shared/services';
|
||||||
DragHandleOption,
|
import type { Rect } from '@blocksuite/global/utils';
|
||||||
DropType,
|
|
||||||
} from '@blocksuite/affine-shared/services';
|
|
||||||
import type { Disposable, Rect } from '@blocksuite/global/utils';
|
|
||||||
|
|
||||||
export const DRAG_HANDLE_CONTAINER_HEIGHT = 24;
|
export const DRAG_HANDLE_CONTAINER_HEIGHT = 24;
|
||||||
export const DRAG_HANDLE_CONTAINER_WIDTH = 16;
|
export const DRAG_HANDLE_CONTAINER_WIDTH = 16;
|
||||||
@@ -29,51 +26,3 @@ export type DropResult = {
|
|||||||
dropBlockId: string;
|
dropBlockId: string;
|
||||||
dropType: DropType;
|
dropType: DropType;
|
||||||
};
|
};
|
||||||
|
|
||||||
export class DragHandleOptionsRunner {
|
|
||||||
private readonly optionMap = new Map<DragHandleOption, number>();
|
|
||||||
|
|
||||||
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);
|
|
||||||
},
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -28,7 +28,6 @@ import type { EdgelessRootService } from '../../edgeless/index.js';
|
|||||||
import type { DragPreview } from './components/drag-preview.js';
|
import type { DragPreview } from './components/drag-preview.js';
|
||||||
import type { DropIndicator } from './components/drop-indicator.js';
|
import type { DropIndicator } from './components/drop-indicator.js';
|
||||||
import type { DropResult } from './config.js';
|
import type { DropResult } from './config.js';
|
||||||
import { DragHandleOptionsRunner } from './config.js';
|
|
||||||
import type { AFFINE_DRAG_HANDLE_WIDGET } from './consts.js';
|
import type { AFFINE_DRAG_HANDLE_WIDGET } from './consts.js';
|
||||||
import { PreviewHelper } from './helpers/preview-helper.js';
|
import { PreviewHelper } from './helpers/preview-helper.js';
|
||||||
import { RectHelper } from './helpers/rect-helper.js';
|
import { RectHelper } from './helpers/rect-helper.js';
|
||||||
@@ -289,8 +288,6 @@ export class AffineDragHandleWidget extends WidgetComponent<RootBlockModel> {
|
|||||||
|
|
||||||
noteScale = signal(1);
|
noteScale = signal(1);
|
||||||
|
|
||||||
readonly optionRunner = new DragHandleOptionsRunner();
|
|
||||||
|
|
||||||
pointerEventWatcher = new PointerEventWatcher(this);
|
pointerEventWatcher = new PointerEventWatcher(this);
|
||||||
|
|
||||||
previewHelper = new PreviewHelper(this);
|
previewHelper = new PreviewHelper(this);
|
||||||
|
|||||||
Reference in New Issue
Block a user