refactor(editor): edgeless attacment toolbar config extension (#10710)

This commit is contained in:
fundon
2025-03-19 00:52:22 +00:00
parent 3cce147c60
commit 251d1d8782
19 changed files with 196 additions and 114 deletions

View File

@@ -1,4 +1,5 @@
import { DatabaseSelection } from '@blocksuite/affine-block-database';
import { EdgelessLegacySlotIdentifier } from '@blocksuite/affine-block-surface';
import { TableSelection } from '@blocksuite/affine-block-table';
import { EditorToolbar } from '@blocksuite/affine-components/toolbar';
import {
@@ -437,7 +438,7 @@ export class AffineToolbarWidget extends WidgetComponent {
const eventOptions = { passive: false };
this.handleEvent('dragStart', () => {
dragStart();
host.addEventListener('pointerup', dragEnd, { once: true });
document.addEventListener('pointerup', dragEnd, { once: true });
});
this.handleEvent('nativeDrop', dragEnd);
disposables.addFromEvent(host, 'dragenter', dragStart, eventOptions);
@@ -445,7 +446,7 @@ export class AffineToolbarWidget extends WidgetComponent {
host,
'dragleave',
throttle(
event => {
(event: DragEvent) => {
const { x, y, target } = event;
if (target === this) return;
const rect = host.getBoundingClientRect();
@@ -464,7 +465,12 @@ export class AffineToolbarWidget extends WidgetComponent {
eventOptions
);
// Handles element when hovering
// Handles elements when resizing
const edgelessSlots = std.get(EdgelessLegacySlotIdentifier);
disposables.add(edgelessSlots.elementResizeStart.subscribe(dragStart));
disposables.add(edgelessSlots.elementResizeEnd.subscribe(dragEnd));
// Handles elements when hovering
disposables.add(
message$.subscribe(data => {
if (
@@ -501,7 +507,7 @@ export class AffineToolbarWidget extends WidgetComponent {
const value = flags.value$.value;
// Hides toolbar
if (value === Flag.None || flags.check(Flag.Hiding, value)) {
if (Flag.None === value || flags.check(Flag.Hiding, value)) {
if (toolbar.dataset.open) delete toolbar.dataset.open;
return;
}
@@ -530,12 +536,8 @@ export class AffineToolbarWidget extends WidgetComponent {
const value = flags.value$.value;
if (
!context.activated ||
Flag.None === value ||
flags.contains(Flag.Hiding, value)
)
return;
if (!context.activated) return;
if (Flag.None === value || flags.contains(Flag.Hiding, value)) return;
const build = referenceElement$.value;
const referenceElement = build?.();