refactor(editor): improve page viewport implementation (#11090)

This commit is contained in:
Saul-Mirone
2025-03-22 04:41:40 +00:00
parent c1d426d8e9
commit e1fa10af47
3 changed files with 11 additions and 40 deletions

View File

@@ -12,7 +12,6 @@ import {
PageViewportService,
ViewportElementProvider,
} from '@blocksuite/affine-shared/services';
import type { Viewport } from '@blocksuite/affine-shared/types';
import {
focusTitle,
getClosestBlockComponentByPoint,
@@ -158,33 +157,16 @@ export class PageRootBlockComponent extends BlockComponent<
return getScrollContainer(this);
}
get viewport(): Viewport | null {
if (!this.viewportElement) {
return null;
}
const {
scrollLeft,
scrollTop,
scrollWidth,
scrollHeight,
clientWidth,
clientHeight,
} = this.viewportElement;
const { top, left } = this.viewportElement.getBoundingClientRect();
return {
top,
left,
scrollLeft,
scrollTop,
scrollWidth,
scrollHeight,
clientWidth,
clientHeight,
};
get viewportProvider() {
return this.std.get(ViewportElementProvider);
}
get viewport() {
return this.viewportProvider.viewport;
}
get viewportElement(): HTMLElement {
return this.std.get(ViewportElementProvider).viewportElement;
return this.viewportProvider.viewportElement;
}
private _createDefaultNoteBlock() {

View File

@@ -1,4 +1,5 @@
import { NoteBlockModel, RootBlockModel } from '@blocksuite/affine-model';
import { ViewportElementProvider } from '@blocksuite/affine-shared/services';
import {
autoScroll,
getScrollContainer,
@@ -15,8 +16,6 @@ import { html, nothing } from 'lit';
import { state } from 'lit/decorators.js';
import { styleMap } from 'lit/directives/style-map.js';
import type { PageRootBlockComponent } from '../../index.js';
type Rect = {
left: number;
top: number;
@@ -32,10 +31,7 @@ type BlockInfo = {
export const AFFINE_PAGE_DRAGGING_AREA_WIDGET =
'affine-page-dragging-area-widget';
export class AffinePageDraggingAreaWidget extends WidgetComponent<
RootBlockModel,
PageRootBlockComponent
> {
export class AffinePageDraggingAreaWidget extends WidgetComponent<RootBlockModel> {
static excludeFlavours: string[] = ['affine:note', 'affine:surface'];
private _dragging = false;
@@ -167,9 +163,7 @@ export class AffinePageDraggingAreaWidget extends WidgetComponent<
}
private get _viewport() {
const rootComponent = this.block;
if (!rootComponent) return;
return rootComponent.viewport;
return this.std.get(ViewportElementProvider).viewport;
}
private get scrollContainer() {

View File

@@ -5,14 +5,9 @@ import { state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { styleMap } from 'lit/directives/style-map.js';
import type { PageRootBlockComponent } from '../../index.js';
export const AFFINE_VIEWPORT_OVERLAY_WIDGET = 'affine-viewport-overlay-widget';
export class AffineViewportOverlayWidget extends WidgetComponent<
RootBlockModel,
PageRootBlockComponent
> {
export class AffineViewportOverlayWidget extends WidgetComponent<RootBlockModel> {
static override styles = css`
.affine-viewport-overlay-widget {
position: absolute;