mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-08-01 17:39:55 +08:00
fix(editor): overflow of dragging preview of note card in ToC (#10160)
Close [BS-2503](https://linear.app/affine-design/issue/BS-2503/长note拖拽时会带着右侧边栏标题一起移动)
This commit is contained in:
@@ -7,8 +7,9 @@ import {
|
|||||||
import { SignalWatcher, WithDisposable } from '@blocksuite/global/utils';
|
import { SignalWatcher, WithDisposable } from '@blocksuite/global/utils';
|
||||||
import { ArrowDownSmallIcon, InvisibleIcon } from '@blocksuite/icons/lit';
|
import { ArrowDownSmallIcon, InvisibleIcon } from '@blocksuite/icons/lit';
|
||||||
import type { BlockModel } from '@blocksuite/store';
|
import type { BlockModel } from '@blocksuite/store';
|
||||||
import { consume } from '@lit/context';
|
import { consume, ContextProvider } from '@lit/context';
|
||||||
import { signal } from '@preact/signals-core';
|
import { signal } from '@preact/signals-core';
|
||||||
|
import { cssVarV2 } from '@toeverything/theme/v2';
|
||||||
import { html } from 'lit';
|
import { html } from 'lit';
|
||||||
import { property, query } from 'lit/decorators.js';
|
import { property, query } from 'lit/decorators.js';
|
||||||
import { classMap } from 'lit/directives/class-map.js';
|
import { classMap } from 'lit/directives/class-map.js';
|
||||||
@@ -110,6 +111,27 @@ export class OutlineNoteCard extends SignalWatcher(
|
|||||||
type: 'toc-card',
|
type: 'toc-card',
|
||||||
noteId: this.note.id,
|
noteId: this.note.id,
|
||||||
}),
|
}),
|
||||||
|
setDragPreview: ({ container, setOffset, location }) => {
|
||||||
|
const preview = document.createElement(AFFINE_OUTLINE_NOTE_CARD);
|
||||||
|
preview.note = this.note;
|
||||||
|
preview.index = this.index;
|
||||||
|
preview._context = this._context;
|
||||||
|
|
||||||
|
const { clientX, clientY } = location.current.input;
|
||||||
|
const { left, top } = this.getBoundingClientRect();
|
||||||
|
setOffset({ x: clientX - left, y: clientY - top });
|
||||||
|
|
||||||
|
container.style.width = `${this.parentElement?.clientWidth ?? 0}px`;
|
||||||
|
container.style.backgroundColor = cssVarV2(
|
||||||
|
'layer/background/primary'
|
||||||
|
);
|
||||||
|
container.append(preview);
|
||||||
|
const provider = new ContextProvider(container, {
|
||||||
|
context: tocContext,
|
||||||
|
initialValue: this._context,
|
||||||
|
});
|
||||||
|
provider.hostConnected();
|
||||||
|
},
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user