refactor(editor): extract drag handle widget (#9415)

blocksuite/affine/shared/src/services/index.ts

@@ -1,13 +1,14 @@
-export * from './doc-display-meta-service.js';
-export * from './doc-mode-service.js';
-export * from './drag-handle-config.js';
-export * from './edit-props-store.js';
-export * from './editor-setting-service.js';
-export * from './embed-option-service.js';
-export * from './font-loader/index.js';
-export * from './generate-url-service.js';
-export * from './notification-service.js';
-export * from './parse-url-service.js';
-export * from './quick-search-service.js';
-export * from './telemetry-service/index.js';
-export * from './theme-service.js';
+export * from './doc-display-meta-service';
+export * from './doc-mode-service';
+export * from './drag-handle-config';
+export * from './edit-props-store';
+export * from './editor-setting-service';
+export * from './embed-option-service';
+export * from './font-loader';
+export * from './generate-url-service';
+export * from './notification-service';
+export * from './page-viewport-service';
+export * from './parse-url-service';
+export * from './quick-search-service';
+export * from './telemetry-service';
+export * from './theme-service';

blocksuite/affine/shared/src/services/page-viewport-service.ts

@@ -0,0 +1,15 @@
+import type { ExtensionType } from '@blocksuite/block-std';
+import { createIdentifier } from '@blocksuite/global/di';
+import { Slot } from '@blocksuite/store';
+
+import type { Viewport } from '../types';
+
+export const PageViewportService = createIdentifier<Slot<Viewport>>(
+  'PageViewportService'
+);
+
+export const PageViewportServiceExtension: ExtensionType = {
+  setup: di => {
+    di.addImpl(PageViewportService, () => new Slot<Viewport>());
+  },
+};

blocksuite/affine/shared/src/utils/auto-scroll.ts

@@ -0,0 +1,30 @@
+export function autoScroll(
+  viewportElement: HTMLElement,
+  y: number,
+  threshold = 50
+): boolean {
+  const { scrollHeight, clientHeight, scrollTop } = viewportElement;
+  let _scrollTop = scrollTop;
+  const max = scrollHeight - clientHeight;
+
+  let d = 0;
+  let flag = false;
+
+  if (Math.ceil(scrollTop) < max && clientHeight - y < threshold) {
+    // ↓
+    d = threshold - (clientHeight - y);
+    flag = Math.ceil(_scrollTop) < max;
+  } else if (scrollTop > 0 && y < threshold) {
+    // ↑
+    d = y - threshold;
+    flag = _scrollTop > 0;
+  }
+
+  _scrollTop += d * 0.25;
+
+  if (flag && scrollTop !== _scrollTop) {
+    viewportElement.scrollTop = _scrollTop;
+    return true;
+  }
+  return false;
+}

blocksuite/affine/shared/src/utils/index.ts

@@ -1,20 +1,21 @@
-export * from './button-popper.js';
-export * from './collapsed/index.js';
-export * from './dnd/index.js';
-export * from './dom/index.js';
-export * from './edgeless.js';
-export * from './event.js';
-export * from './file/index.js';
-export * from './insert.js';
-export * from './is-abort-error.js';
-export * from './math.js';
-export * from './model/index.js';
-export * from './print-to-pdf.js';
-export * from './reference.js';
-export * from './reordering.js';
-export * from './signal.js';
-export * from './spec/index.js';
-export * from './string.js';
-export * from './title.js';
-export * from './url.js';
-export * from './zod-schema.js';
+export * from './auto-scroll';
+export * from './button-popper';
+export * from './collapsed';
+export * from './dnd';
+export * from './dom';
+export * from './edgeless';
+export * from './event';
+export * from './file';
+export * from './insert';
+export * from './is-abort-error';
+export * from './math';
+export * from './model';
+export * from './print-to-pdf';
+export * from './reference';
+export * from './reordering';
+export * from './signal';
+export * from './spec';
+export * from './string';
+export * from './title';
+export * from './url';
+export * from './zod-schema';