소스 검색

:art: https://github.com/siyuan-note/siyuan/issues/9813

Vanessa 1 년 전
부모
커밋
362be46bef
2개의 변경된 파일14개의 추가작업 그리고 7개의 파일을 삭제
  1. 2 0
      app/src/constants.ts
  2. 12 7
      app/src/protyle/util/editorCommonEvent.ts

+ 2 - 0
app/src/constants.ts

@@ -52,6 +52,8 @@ export abstract class Constants {
     public static readonly CUSTOM_RIFF_DECKS: string = "custom-riff-decks";
 
     // size
+    public static readonly SIZE_SCROLL_TB: number = 24;
+    public static readonly SIZE_SCROLL_STEP: number = 256;
     public static readonly SIZE_LINK_TEXT_MAX: number = 24;
     public static readonly SIZE_TOOLBAR_HEIGHT: number = isMobile() ? 0 : 32;
     public static readonly SIZE_GET_MAX = 102400;

+ 12 - 7
app/src/protyle/util/editorCommonEvent.ts

@@ -1062,6 +1062,13 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => {
     let dragoverElement: Element;
     let disabledPosition: string;
     editorElement.addEventListener("dragover", (event: DragEvent & { target: HTMLElement }) => {
+        const contentRect = protyle.contentElement.getBoundingClientRect();
+        if (event.clientY < contentRect.top + Constants.SIZE_SCROLL_TB || event.clientY > contentRect.bottom - Constants.SIZE_SCROLL_TB) {
+            protyle.contentElement.scroll({
+                top: protyle.contentElement.scrollTop + (event.clientY < contentRect.top + Constants.SIZE_SCROLL_TB ? -Constants.SIZE_SCROLL_STEP : Constants.SIZE_SCROLL_STEP),
+                behavior: "smooth"
+            });
+        }
         // 设置了的话 drop 就无法监听 shift/control event.dataTransfer.dropEffect = "move";
         if (event.dataTransfer.types.includes("Files") && event.target.classList.contains("protyle-wysiwyg")) {
             // 文档底部拖拽文件需 preventDefault,否则无法触发 drop 事件 https://github.com/siyuan-note/siyuan/issues/2665
@@ -1094,12 +1101,6 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => {
         let targetElement = hasClosestByClassName(event.target, "av__row") || hasClosestBlock(event.target);
         const point = {x: event.clientX, y: event.clientY, className: ""};
         if (!targetElement) {
-            const editorRect = editorElement.getBoundingClientRect();
-            const editorPosition = {
-                left: editorRect.left + parseInt(editorElement.style.paddingLeft),
-                right: editorRect.right - parseInt(editorElement.style.paddingRight),
-                top: editorRect.top - 16,
-            };
             if (event.clientY > editorElement.lastElementChild.getBoundingClientRect().bottom) {
                 // 命中底部
                 targetElement = editorElement.lastElementChild as HTMLElement;
@@ -1108,7 +1109,11 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => {
                 // 命中顶部
                 targetElement = editorElement.firstElementChild as HTMLElement;
                 point.className = "dragover__top";
-            } else {
+            } else if (contentRect) {
+                const editorPosition = {
+                    left: contentRect.left + parseInt(editorElement.style.paddingLeft),
+                    right: contentRect.right - parseInt(editorElement.style.paddingRight)
+                };
                 if (event.clientX < editorPosition.left) {
                     // 左侧
                     point.x = editorPosition.left;