luulam/AFFiNE
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

refactor: rewrite dblclick and selection logic of default-tool (#11036)

Browse Source 
continue #10824

### Changed
- Moved double-click-to-edit behavior from the default tool to individual model views
- Introduced `onSelected` callback interface in gfx view components to allows developers to override default selection logic
This commit is contained in:
doouding
2025-03-26 07:32:43 +00:00
parent 61c0d01da3
commit ace5d44a61
38 changed files with 779 additions and 353 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
blocksuite/affine/blocks/block-edgeless-text/src/edgeless-text-block.ts
View File

@@ -5,15 +5,20 @@ import {
ListBlockModel,
ParagraphBlockModel,
} from '@blocksuite/affine-model';
import { focusTextModel } from '@blocksuite/affine-rich-text';
import { ThemeProvider } from '@blocksuite/affine-shared/services';
import { matchModels } from '@blocksuite/affine-shared/utils';
import {
handleNativeRangeAtPoint,
matchModels,
} from '@blocksuite/affine-shared/utils';
import type { BlockComponent } from '@blocksuite/block-std';
import {
BlockSelection,
GfxBlockComponent,
TextSelection,
} from '@blocksuite/block-std';
import { Bound } from '@blocksuite/global/gfx';
import type { SelectedContext } from '@blocksuite/block-std/gfx';
import { Bound, clamp } from '@blocksuite/global/gfx';
import { css, html } from 'lit';
import { query, state } from 'lit/decorators.js';
import { type StyleInfo, styleMap } from 'lit/directives/style-map.js';
@@ -255,6 +260,69 @@ export class EdgelessTextBlockComponent extends GfxBlockComponent<EdgelessTextBl
};
}
override onSelected(context: SelectedContext) {
const { selected, multiSelect, event: e } = context;
const { editing } = this.gfx.selection;
const alreadySelected = this.gfx.selection.has(this.model.id);
if (!multiSelect && selected && (alreadySelected || editing)) {
if (this.model.isLocked()) return;
if (alreadySelected && editing) {
return;
}
this.gfx.selection.set({
elements: [this.model.id],
editing: true,
});
this.updateComplete
.then(() => {
if (!this.isConnected) {
return;
}
if (this.model.children.length === 0) {
const blockId = this.doc.addBlock(
'affine:paragraph',
{ type: 'text' },
this.model.id
);
if (blockId) {
focusTextModel(this.std, blockId);
}
} else {
const rect = this.querySelector(
'.affine-block-children-container'
)?.getBoundingClientRect();
if (rect) {
const offsetY = 8 * this.gfx.viewport.zoom;
const offsetX = 2 * this.gfx.viewport.zoom;
const x = clamp(
e.clientX,
rect.left + offsetX,
rect.right - offsetX
);
const y = clamp(
e.clientY,
rect.top + offsetY,
rect.bottom - offsetY
);
handleNativeRangeAtPoint(x, y);
} else {
handleNativeRangeAtPoint(e.clientX, e.clientY);
}
}
})
.catch(console.error);
} else {
super.onSelected(context);
}
}
override renderGfxBlock() {
const { model } = this;
const { rotate, hasMaxWidth } = model.props;

9
blocksuite/affine/blocks/block-embed/src/common/insert-embed-card.ts
View File

@@ -82,16 +82,15 @@ export function insertEmbedCard(
surfaceBlock.model
);
gfx.tool.setTool(
// @ts-expect-error FIXME: resolve after gfx tool refactor
'default'
);
gfx.selection.set({
elements: [cardId],
editing: false,
});
gfx.tool.setTool(
// @ts-expect-error FIXME: resolve after gfx tool refactor
'default'
);
return cardId;
}
}

17
blocksuite/affine/blocks/block-frame/src/frame-block.ts
View File

@@ -1,6 +1,7 @@
import { DefaultTheme, type FrameBlockModel } from '@blocksuite/affine-model';
import { ThemeProvider } from '@blocksuite/affine-shared/services';
import { GfxBlockComponent } from '@blocksuite/block-std';
import type { SelectedContext } from '@blocksuite/block-std/gfx';
import { Bound } from '@blocksuite/global/gfx';
import { cssVarV2 } from '@toeverything/theme/v2';
import { html } from 'lit';
@@ -52,6 +53,22 @@ export class FrameBlockComponent extends GfxBlockComponent<FrameBlockModel> {
};
}
override onSelected(context: SelectedContext): void {
const { x, y } = context.position;
if (
!context.fallback &&
// if the frame is selected by title, then ignore it because the title selection is handled by the title widget
(this.model.externalBound?.containsPoint([x, y]) ||
// otherwise if the frame has title, then ignore it because in this case the frame cannot be selected by frame body
this.model.props.title.length)
) {
return;
}
super.onSelected(context);
}
override renderGfxBlock() {
const { model, showBorder, std } = this;
const backgroundColor = std

71
blocksuite/affine/blocks/block-note/src/note-edgeless-block.ts
View File

@@ -1,16 +1,22 @@
import { EdgelessLegacySlotIdentifier } from '@blocksuite/affine-block-surface';
import type { DocTitle } from '@blocksuite/affine-fragment-doc-title';
import { NoteDisplayMode } from '@blocksuite/affine-model';
import { focusTextModel } from '@blocksuite/affine-rich-text';
import { EDGELESS_BLOCK_CHILD_PADDING } from '@blocksuite/affine-shared/consts';
import { TelemetryProvider } from '@blocksuite/affine-shared/services';
import { stopPropagation } from '@blocksuite/affine-shared/utils';
import {
handleNativeRangeAtPoint,
stopPropagation,
} from '@blocksuite/affine-shared/utils';
import { toGfxBlockComponent } from '@blocksuite/block-std';
import type { SelectedContext } from '@blocksuite/block-std/gfx';
import { Bound } from '@blocksuite/global/gfx';
import { html, nothing, type PropertyValues } from 'lit';
import { query, state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import { styleMap } from 'lit/directives/style-map.js';
import clamp from 'lodash-es/clamp';
import { MoreIndicator } from './components/more-indicator';
import { NoteConfigExtension } from './config';
@@ -296,6 +302,69 @@ export class EdgelessNoteBlockComponent extends toGfxBlockComponent(
`;
}
override onSelected(context: SelectedContext) {
const { selected, multiSelect, event: e } = context;
const { editing } = this.gfx.selection;
const alreadySelected = this.gfx.selection.has(this.model.id);
if (!multiSelect && selected && (alreadySelected || editing)) {
if (this.model.isLocked()) return;
if (alreadySelected && editing) {
return;
}
this.gfx.selection.set({
elements: [this.model.id],
editing: true,
});
this.updateComplete
.then(() => {
if (!this.isConnected) {
return;
}
if (this.model.children.length === 0) {
const blockId = this.doc.addBlock(
'affine:paragraph',
{ type: 'text' },
this.model.id
);
if (blockId) {
focusTextModel(this.std, blockId);
}
} else {
const rect = this.querySelector(
'.affine-block-children-container'
)?.getBoundingClientRect();
if (rect) {
const offsetY = 8 * this.gfx.viewport.zoom;
const offsetX = 2 * this.gfx.viewport.zoom;
const x = clamp(
e.clientX,
rect.left + offsetX,
rect.right - offsetX
);
const y = clamp(
e.clientY,
rect.top + offsetY,
rect.bottom - offsetY
);
handleNativeRangeAtPoint(x, y);
} else {
handleNativeRangeAtPoint(e.clientX, e.clientY);
}
}
})
.catch(console.error);
} else {
super.onSelected(context);
}
}
@state()
private accessor _editing = false;

8
blocksuite/affine/blocks/block-root/src/edgeless/edgeless-builtin-spec.ts
View File

@@ -16,14 +16,12 @@ import {
import { NoteTool } from '@blocksuite/affine-gfx-note';
import { ShapeTool } from '@blocksuite/affine-gfx-shape';
import { TextTool } from '@blocksuite/affine-gfx-text';
import {
CanvasEventHandler,
ElementTransformManager,
} from '@blocksuite/block-std/gfx';
import { ElementTransformManager } from '@blocksuite/block-std/gfx';
import type { ExtensionType } from '@blocksuite/store';
import { EdgelessElementToolbarExtension } from './configs/toolbar';
import { EdgelessRootBlockSpec } from './edgeless-root-spec.js';
import { DblClickAddEdgelessText } from './element-transform/dblclick-add-edgeless-text.js';
import { SnapExtension } from './element-transform/snap-manager.js';
import { DefaultTool } from './gfx-tool/default-tool.js';
import { EmptyTool } from './gfx-tool/empty-tool.js';
@@ -53,9 +51,9 @@ export const EdgelessEditExtensions: ExtensionType[] = [
ElementTransformManager,
ConnectorFilter,
SnapExtension,
CanvasEventHandler,
MindMapDragExtension,
FrameHighlightManager,
DblClickAddEdgelessText,
];
export const EdgelessBuiltInManager: ExtensionType[] = [

2
blocksuite/affine/blocks/block-root/src/edgeless/edgeless-keyboard.ts
View File

@@ -707,6 +707,7 @@ export class EdgelessPageKeyboardManager extends PageKeyboardManager {
const edgeless = this.rootComponent;
const selection = edgeless.service.selection;
const currentTool = edgeless.gfx.tool.currentTool$.peek()!;
const currentSel = selection.surfaceSelections;
const isKeyDown = event.type === 'keydown';
if (edgeless.gfx.tool.dragging$.peek()) {
@@ -720,6 +721,7 @@ export class EdgelessPageKeyboardManager extends PageKeyboardManager {
currentTool.toolName,
currentTool?.activatedOption
);
selection.set(currentSel);
document.removeEventListener('keyup', revertToPrevTool, false);
}
};

14
blocksuite/affine/blocks/block-root/src/edgeless/edgeless-root-spec.ts
View File

@@ -1,5 +1,8 @@
import { ConnectorElementView } from '@blocksuite/affine-gfx-connector';
import { GroupElementView } from '@blocksuite/affine-gfx-group';
import { MindMapView } from '@blocksuite/affine-gfx-mindmap';
import { ShapeElementView } from '@blocksuite/affine-gfx-shape';
import { TextElementView } from '@blocksuite/affine-gfx-text';
import { ViewportElementExtension } from '@blocksuite/affine-shared/services';
import { autoConnectWidget } from '@blocksuite/affine-widget-edgeless-auto-connect';
import { edgelessToolbarWidget } from '@blocksuite/affine-widget-edgeless-toolbar';
@@ -90,13 +93,20 @@ const EdgelessClipboardConfigs: ExtensionType[] = [
EdgelessClipboardEmbedSyncedDocConfig,
];
export const gfxElementViews = [
ConnectorElementView,
MindMapView,
GroupElementView,
TextElementView,
ShapeElementView,
];
const EdgelessCommonExtension: ExtensionType[] = [
CommonSpecs,
ToolController,
EdgelessRootService,
ViewportElementExtension('.affine-edgeless-viewport'),
MindMapView,
ConnectorElementView,
...gfxElementViews,
...quickTools,
...seniorTools,
...EdgelessClipboardConfigs,

47
blocksuite/affine/blocks/block-root/src/edgeless/element-transform/dblclick-add-edgeless-text.ts Normal file
View File

@@ -0,0 +1,47 @@
import { insertEdgelessTextCommand } from '@blocksuite/affine-block-edgeless-text';
import { addText } from '@blocksuite/affine-gfx-text';
import {
FeatureFlagService,
TelemetryProvider,
} from '@blocksuite/affine-shared/services';
import type { PointerEventState } from '@blocksuite/block-std';
import { TransformExtension } from '@blocksuite/block-std/gfx';
export class DblClickAddEdgelessText extends TransformExtension {
static override key = 'dbl-click-add-edgeless-text';
override dblClick(e: PointerEventState): void {
const textFlag = this.std.store
.get(FeatureFlagService)
.getFlag('enable_edgeless_text');
const picked = this.gfx.getElementByPoint(
...this.gfx.viewport.toModelCoord(e.x, e.y)
);
if (picked) {
return;
}
if (textFlag) {
const [x, y] = this.gfx.viewport.toModelCoord(e.x, e.y);
this.std.command.exec(insertEdgelessTextCommand, { x, y });
} else {
const edgelessView = this.std.view.getBlock(
this.std.store.root?.id || ''
);
if (edgelessView) {
addText(edgelessView, e);
}
}
this.std.getOptional(TelemetryProvider)?.track('CanvasElementAdded', {
control: 'canvas:dbclick',
page: 'whiteboard editor',
module: 'toolbar',
segment: 'toolbar',
type: 'text',
});
return;
}
}

224
blocksuite/affine/blocks/block-root/src/edgeless/gfx-tool/default-tool.ts
View File

@@ -1,38 +1,17 @@
import { insertEdgelessTextCommand } from '@blocksuite/affine-block-edgeless-text';
import {
type FrameOverlay,
isFrameBlock,
} from '@blocksuite/affine-block-frame';
import {
ConnectorUtils,
isNoteBlock,
OverlayIdentifier,
} from '@blocksuite/affine-block-surface';
import { mountConnectorLabelEditor } from '@blocksuite/affine-gfx-connector';
import { mountGroupTitleEditor } from '@blocksuite/affine-gfx-group';
import { mountShapeTextEditor } from '@blocksuite/affine-gfx-shape';
import { addText, mountTextElementEditor } from '@blocksuite/affine-gfx-text';
import type {
EdgelessTextBlockModel,
NoteBlockModel,
} from '@blocksuite/affine-model';
import {
ConnectorElementModel,
type ConnectorElementModel,
GroupElementModel,
MindmapElementModel,
ShapeElementModel,
TextElementModel,
} from '@blocksuite/affine-model';
import { focusTextModel } from '@blocksuite/affine-rich-text';
import {
FeatureFlagService,
TelemetryProvider,
} from '@blocksuite/affine-shared/services';
import {
handleNativeRangeAtPoint,
resetNativeSelection,
} from '@blocksuite/affine-shared/utils';
import { mountFrameTitleEditor } from '@blocksuite/affine-widget-frame-title';
import { resetNativeSelection } from '@blocksuite/affine-shared/utils';
import type { BlockComponent, PointerEventState } from '@blocksuite/block-std';
import {
BaseTool,
@@ -46,13 +25,11 @@ import { DisposableGroup } from '@blocksuite/global/disposable';
import type { IVec } from '@blocksuite/global/gfx';
import { Bound, getCommonBoundWithRotation, Vec } from '@blocksuite/global/gfx';
import { effect } from '@preact/signals-core';
import clamp from 'lodash-es/clamp';
import last from 'lodash-es/last';
import { createElementsFromClipboardDataCommand } from '../clipboard/command.js';
import { prepareCloneData } from '../utils/clone-utils.js';
import { calPanDelta } from '../utils/panning-utils.js';
import { isCanvasElement, isEdgelessTextBlock } from '../utils/query.js';
import { isCanvasElement } from '../utils/query.js';
import { DefaultModeDragType } from './default-tool-ext/ext.js';
export class DefaultTool extends BaseTool {
@@ -76,9 +53,6 @@ export class DefaultTool extends BaseTool {
private _disposables: DisposableGroup | null = null;
// Do not select the text, when click again after activating the note.
private _isDoubleClickedOnMask = false;
private readonly _panViewport = (delta: IVec) => {
this._accumulateDelta[0] += delta[0];
this._accumulateDelta[1] += delta[1];
@@ -222,19 +196,6 @@ export class DefaultTool extends BaseTool {
return this.std.get(OverlayIdentifier('frame')) as FrameOverlay;
}
private _addEmptyParagraphBlock(
block: NoteBlockModel | EdgelessTextBlockModel
) {
const blockId = this.doc.addBlock(
'affine:paragraph',
{ type: 'text' },
block.id
);
if (blockId) {
focusTextModel(this.std, blockId);
}
}
private async _cloneContent() {
if (!this._edgeless) return;
@@ -354,19 +315,6 @@ export class DefaultTool extends BaseTool {
return e;
};
const frameByPickingTitle = last(
this.gfx
.getElementByPoint(modelPos[0], modelPos[1], {
...options,
all: true,
})
.filter(
el => isFrameBlock(el) && el.externalBound?.isPointInBound(modelPos)
)
);
if (frameByPickingTitle) return tryGetLockedAncestor(frameByPickingTitle);
const result = this.gfx.getElementInGroup(
modelPos[0],
modelPos[1],
@@ -394,11 +342,6 @@ export class DefaultTool extends BaseTool {
return tryGetLockedAncestor(picked[pickedIdx]) ?? null;
}
// if the frame has title, it only can be picked by clicking the title
if (isFrameBlock(result) && result.externalXYWH) {
return null;
}
return tryGetLockedAncestor(result);
}
@@ -443,105 +386,14 @@ export class DefaultTool extends BaseTool {
}
}
override activate(_: Record<string, unknown>): void {
if (this.gfx.selection.lastSurfaceSelections.length) {
this.gfx.selection.set(this.gfx.selection.lastSurfaceSelections);
}
}
override click(e: PointerEventState) {
if (this.doc.readonly) return;
const selected = this._pick(e.x, e.y, {
ignoreTransparent: true,
});
if (selected) {
const { selectedIds, surfaceSelections } = this.edgelessSelectionManager;
const editing = surfaceSelections[0]?.editing ?? false;
// click active canvas text, edgeless text block and note block
if (
selectedIds.length === 1 &&
selectedIds[0] === selected.id &&
editing
) {
// edgeless text block and note block
if (
(isNoteBlock(selected) || isEdgelessTextBlock(selected)) &&
selected.children.length === 0
) {
this._addEmptyParagraphBlock(selected);
}
// canvas text
return;
}
// click non-active edgeless text block and note block, and then enter editing
if (
!selected.isLocked() &&
!e.keys.shift &&
selectedIds.length === 1 &&
(isNoteBlock(selected) || isEdgelessTextBlock(selected)) &&
((selectedIds[0] === selected.id && !editing) ||
(editing && selectedIds[0] !== selected.id))
) {
// issue #1809
// If the previously selected element is a noteBlock and is in an active state,
// then the currently clicked noteBlock should also be in an active state when selected.
this.edgelessSelectionManager.set({
elements: [selected.id],
editing: true,
});
this._edgeless?.updateComplete
.then(() => {
// check if block has children blocks, if not, add a paragraph block and focus on it
if (selected.children.length === 0) {
this._addEmptyParagraphBlock(selected);
} else {
const block = this.std.host.view.getBlock(selected.id);
if (block) {
const rect = block
.querySelector('.affine-block-children-container')!
.getBoundingClientRect();
const offsetY = 8 * this.gfx.viewport.zoom;
const offsetX = 2 * this.gfx.viewport.zoom;
const x = clamp(
e.raw.clientX,
rect.left + offsetX,
rect.right - offsetX
);
const y = clamp(
e.raw.clientY,
rect.top + offsetY,
rect.bottom - offsetY
);
handleNativeRangeAtPoint(x, y);
} else {
handleNativeRangeAtPoint(e.raw.clientX, e.raw.clientY);
}
}
})
.catch(console.error);
return;
}
this.edgelessSelectionManager.set({
// hold shift key to multi select or de-select element
elements: e.keys.shift
? this.edgelessSelectionManager.has(selected.id)
? selectedIds.filter(id => id !== selected.id)
: [...selectedIds, selected.id]
: [selected.id],
editing: false,
});
} else if (!e.keys.shift) {
if (!this.elementTransformMgr?.dispatchOnSelected(e)) {
this.edgelessSelectionManager.clear();
resetNativeSelection(null);
}
this._isDoubleClickedOnMask = false;
this.elementTransformMgr?.dispatch('click', e);
}
@@ -564,71 +416,7 @@ export class DefaultTool extends BaseTool {
return;
}
const selected = this._pick(e.x, e.y, {
hitThreshold: 10,
});
if (!this._edgeless) {
return;
}
if (!selected) {
const textFlag = this.doc
.get(FeatureFlagService)
.getFlag('enable_edgeless_text');
if (textFlag) {
const [x, y] = this.gfx.viewport.toModelCoord(e.x, e.y);
this.std.command.exec(insertEdgelessTextCommand, { x, y });
} else {
addText(this._edgeless, e);
}
this.std.getOptional(TelemetryProvider)?.track('CanvasElementAdded', {
control: 'canvas:dbclick',
page: 'whiteboard editor',
module: 'toolbar',
segment: 'toolbar',
type: 'text',
});
return;
} else {
if (selected.isLocked()) return;
const [x, y] = this.gfx.viewport.toModelCoord(e.x, e.y);
if (selected instanceof TextElementModel) {
mountTextElementEditor(selected, this._edgeless, {
x,
y,
});
return;
}
if (selected instanceof ShapeElementModel) {
mountShapeTextEditor(selected, this._edgeless);
return;
}
if (selected instanceof ConnectorElementModel) {
mountConnectorLabelEditor(selected, this._edgeless, [x, y]);
return;
}
if (isFrameBlock(selected)) {
mountFrameTitleEditor(selected, this._edgeless);
return;
}
if (selected instanceof GroupElementModel) {
mountGroupTitleEditor(selected, this._edgeless);
return;
}
}
this.elementTransformMgr?.dispatch('dblclick', e);
if (
e.raw.target &&
e.raw.target instanceof HTMLElement &&
e.raw.target.classList.contains('affine-note-mask')
) {
this.click(e);
this._isDoubleClickedOnMask = true;
return;
}
}
override dragEnd() {
@@ -753,9 +541,7 @@ export class DefaultTool extends BaseTool {
this.elementTransformMgr?.dispatch('pointerup', e);
}
override tripleClick() {
if (this._isDoubleClickedOnMask) return;
}
override tripleClick() {}
override unmounted(): void {}
}

2
blocksuite/affine/blocks/block-root/src/edgeless/gfx-tool/pan-tool.ts
View File

@@ -53,9 +53,11 @@ export class PanTool extends BaseTool<PanToolOption> {
evt.raw.preventDefault();
const selection = this.gfx.selection.surfaceSelections;
const currentTool = this.controller.currentToolOption$.peek();
const restoreToPrevious = () => {
this.controller.setTool(currentTool);
this.gfx.selection.set(selection);
};
this.controller.setTool('pan', {