refactor(editor): enable toc dragging in page mode (#9736)

Related [BS-2322](https://linear.app/affine-design/issue/BS-2322/toc-排序坏掉部分的修复)
This commit is contained in:
L-Sun
2025-01-16 17:53:28 +00:00
parent a2ffdb4047
commit c2149f218b
2 changed files with 6 additions and 17 deletions

View File

@@ -317,7 +317,7 @@ export class OutlinePanelBody extends SignalWatcher(
notes: OutlineNoteItem[], notes: OutlineNoteItem[],
children: NoteBlockModel[] children: NoteBlockModel[]
) { ) {
if (!this._isEdgelessMode() || !children.length || !this.doc.root) return; if (!children.length || !this.doc.root) return;
const blocks = selected.map( const blocks = selected.map(
id => (notesMap.get(id) as OutlineNoteItem).note id => (notesMap.get(id) as OutlineNoteItem).note
@@ -351,7 +351,6 @@ export class OutlinePanelBody extends SignalWatcher(
style=${`transform: translateY(${this._indicatorTranslateY}px)`} style=${`transform: translateY(${this._indicatorTranslateY}px)`}
></div>` ></div>`
: nothing} : nothing}
${this._renderDocTitle()}
${this._pageVisibleNotes.length ${this._pageVisibleNotes.length
? repeat( ? repeat(
this._pageVisibleNotes, this._pageVisibleNotes,
@@ -364,7 +363,6 @@ export class OutlinePanelBody extends SignalWatcher(
.number=${idx + 1} .number=${idx + 1}
.index=${note.index} .index=${note.index}
.doc=${this.doc} .doc=${this.doc}
.editorMode=${this.editor.mode}
.activeHeadingId=${this._activeHeadingId$.value} .activeHeadingId=${this._activeHeadingId$.value}
.status=${selectedNotesSet.has(note.note.id) .status=${selectedNotesSet.has(note.note.id)
? this._dragging ? this._dragging
@@ -450,8 +448,6 @@ export class OutlinePanelBody extends SignalWatcher(
} }
private _selectNote(e: SelectEvent) { private _selectNote(e: SelectEvent) {
if (!this._isEdgelessMode()) return;
const { selected, id, multiselect } = e.detail; const { selected, id, multiselect } = e.detail;
if (!selected) { if (!selected) {
@@ -658,6 +654,7 @@ export class OutlinePanelBody extends SignalWatcher(
return html` return html`
<div class="outline-panel-body-container"> <div class="outline-panel-body-container">
${this._renderDocTitle()}
${shouldRenderEmptyPanel ${shouldRenderEmptyPanel
? this._EmptyPanel() ? this._EmptyPanel()
: this._PanelList(shouldRenderEdgelessOnlyNotes)} : this._PanelList(shouldRenderEdgelessOnlyNotes)}

View File

@@ -42,7 +42,7 @@ const styles = css`
user-select: none; user-select: none;
} }
.card-preview.edgeless:hover { .card-preview:hover {
background: var(--affine-hover-color); background: var(--affine-hover-color);
} }
@@ -217,12 +217,7 @@ export class OutlineNoteCard extends SignalWatcher(WithDisposable(LitElement)) {
private _dispatchDragEvent(e: MouseEvent) { private _dispatchDragEvent(e: MouseEvent) {
e.preventDefault(); e.preventDefault();
if ( if (e.button !== 0 || !this.enableNotesSorting) return;
e.button !== 0 ||
this.editorMode === 'page' ||
!this.enableNotesSorting
)
return;
const { clientX: startX, clientY: startY } = e; const { clientX: startX, clientY: startY } = e;
const disposeDragStart = on(this.ownerDocument, 'mousemove', e => { const disposeDragStart = on(this.ownerDocument, 'mousemove', e => {
@@ -317,7 +312,7 @@ export class OutlineNoteCard extends SignalWatcher(WithDisposable(LitElement)) {
class="card-container ${this.status ?? ''} ${this.theme}" class="card-container ${this.status ?? ''} ${this.theme}"
> >
<div <div
class="card-preview ${this.editorMode}" class="card-preview"
@mousedown=${this._dispatchDragEvent} @mousedown=${this._dispatchDragEvent}
@click=${this._dispatchSelectEvent} @click=${this._dispatchSelectEvent}
@dblclick=${this._dispatchFitViewEvent} @dblclick=${this._dispatchFitViewEvent}
@@ -368,7 +363,7 @@ export class OutlineNoteCard extends SignalWatcher(WithDisposable(LitElement)) {
.cardNumber=${this.number} .cardNumber=${this.number}
.enableNotesSorting=${this.enableNotesSorting} .enableNotesSorting=${this.enableNotesSorting}
@click=${() => { @click=${() => {
if (this.editorMode === 'edgeless' || this.invisible) return; if (this.invisible) return;
this._dispatchClickBlockEvent(block); this._dispatchClickBlockEvent(block);
}} }}
></affine-outline-block-preview>`; ></affine-outline-block-preview>`;
@@ -395,9 +390,6 @@ export class OutlineNoteCard extends SignalWatcher(WithDisposable(LitElement)) {
@property({ attribute: false }) @property({ attribute: false })
accessor doc!: Store; accessor doc!: Store;
@property({ attribute: false })
accessor editorMode: 'page' | 'edgeless' = 'page';
@property({ attribute: false }) @property({ attribute: false })
accessor enableNotesSorting!: boolean; accessor enableNotesSorting!: boolean;