Ver código fonte

:art: fix https://github.com/siyuan-note/siyuan/issues/9674

Vanessa 1 ano atrás
pai
commit
8e93286077

+ 3 - 30
app/src/boot/globalEvent/event.ts

@@ -6,7 +6,7 @@ import {globalClick} from "./click";
 import {goBack, goForward} from "../../util/backForward";
 import {Constants} from "../../constants";
 import {isIPad} from "../../protyle/util/compatibility";
-import {globalTouchEnd} from "./touch";
+import {globalTouchEnd, globalTouchStart} from "./touch";
 import {initDockMenu} from "../../menus/dock";
 import {hasClosestByAttribute, hasClosestByClassName} from "../../protyle/util/hasClosest";
 import {initTabMenu} from "../../menus/tab";
@@ -80,34 +80,7 @@ export const initWindowEvent = (app: App) => {
         // 触摸屏背景和嵌入块按钮显示
         const backgroundElement = hasClosestByClassName(target, "protyle-background")
         if (backgroundElement) {
-            if (target.tagName === "IMG" && backgroundElement.firstElementChild.querySelector(".protyle-icons").classList.contains("fn__none")) {
-                // 文档背景位置调整
-                const contentElement = hasClosestByClassName(backgroundElement, "protyle-content");
-                if (!contentElement) {
-                    return;
-                }
-                contentElement.style.overflow = "hidden"
-                const y = event.touches[0].clientY;
-                const documentSelf = document;
-                const height = (target as HTMLImageElement).naturalHeight * target.clientWidth / (target as HTMLImageElement).naturalWidth - target.clientHeight;
-                let originalPositionY = parseFloat(target.style.objectPosition.substring(7)) || 50;
-                if (target.style.objectPosition.endsWith("px")) {
-                    originalPositionY = -parseInt(target.style.objectPosition.substring(7)) / height * 100;
-                }
-
-                documentSelf.ontouchmove = (moveEvent) => {
-
-                    target.style.objectPosition = `center ${((y - moveEvent.touches[0].clientY) / height * 100 + originalPositionY).toFixed(2)}%`;
-                };
-                documentSelf.ontouchend = () => {
-                    contentElement.style.overflow = ""
-                    documentSelf.ontouchmove = null;
-                    documentSelf.ontouchstart = null;
-                    documentSelf.ondragstart = null;
-                    documentSelf.onselectstart = null;
-                    documentSelf.onselect = null;
-                };
-            } else {
+            if (!globalTouchStart(event)) {
                 backgroundElement.classList.toggle("protyle-background--mobileshow");
             }
             return;
@@ -156,7 +129,7 @@ export const initWindowEvent = (app: App) => {
 
             const backlinkBreadcrumbItemElement = hasClosestByClassName(target, "protyle-breadcrumb__item");
             if (backlinkBreadcrumbItemElement) {
-                const breadcrumbId = backlinkBreadcrumbItemElement.getAttribute("data-id")||backlinkBreadcrumbItemElement.getAttribute("data-node-id");
+                const breadcrumbId = backlinkBreadcrumbItemElement.getAttribute("data-id") || backlinkBreadcrumbItemElement.getAttribute("data-node-id");
                 if (breadcrumbId) {
                     fetchPost("/api/block/checkBlockFold", {id: breadcrumbId}, (foldResponse) => {
                         openFileById({

+ 35 - 0
app/src/boot/globalEvent/touch.ts

@@ -12,6 +12,41 @@ import {Tab} from "../../layout/Tab";
 import {Editor} from "../../editor";
 import {hideTooltip} from "../../dialog/tooltip";
 
+export const globalTouchStart = (event: TouchEvent) => {
+    // 文档背景位置调整
+    const target = event.target as HTMLElement;
+    const backgroundElement = hasClosestByClassName(target, "protyle-background")
+    if (backgroundElement && target.tagName === "IMG" && backgroundElement.firstElementChild.querySelector(".protyle-icons").classList.contains("fn__none")) {
+        const contentElement = hasClosestByClassName(target, "protyle-content", true);
+        if (!contentElement) {
+            return false;
+        }
+        contentElement.style.overflow = "hidden";
+        const y = event.touches[0].clientY;
+        const height = (target as HTMLImageElement).naturalHeight * target.clientWidth / (target as HTMLImageElement).naturalWidth - target.clientHeight;
+        let originalPositionY = parseFloat(target.style.objectPosition.substring(7)) || 50;
+        if (target.style.objectPosition.endsWith("px")) {
+            originalPositionY = -parseInt(target.style.objectPosition.substring(7)) / height * 100;
+        }
+
+        const documentSelf = document;
+        documentSelf.ontouchmove = (moveEvent) => {
+            target.style.objectPosition = `center ${((y - moveEvent.touches[0].clientY) / height * 100 + originalPositionY).toFixed(2)}%`;
+        };
+        documentSelf.ontouchend = () => {
+            contentElement.style.overflow = "";
+            documentSelf.ontouchmove = null;
+            documentSelf.ontouchstart = null;
+            documentSelf.ondragstart = null;
+            documentSelf.onselectstart = null;
+            documentSelf.onselect = null;
+        };
+        event.stopImmediatePropagation();
+        return true;
+    }
+    return false;
+}
+
 export const globalTouchEnd = (event: TouchEvent, yDiff: number, time: number, app: App) => {
     const target = event.target as HTMLElement;
     const isIPadBoolean = isIPad();

+ 4 - 1
app/src/mobile/util/touch.ts

@@ -8,7 +8,7 @@ import {popMenu} from "../menu";
 import {activeBlur, hideKeyboardToolbar} from "./keyboardToolbar";
 import {isIPhone} from "../../protyle/util/compatibility";
 import {App} from "../../index";
-import {globalTouchEnd} from "../../boot/globalEvent/touch";
+import {globalTouchEnd, globalTouchStart} from "../../boot/globalEvent/touch";
 
 let clientX: number;
 let clientY: number;
@@ -145,6 +145,9 @@ export const handleTouchEnd = (event: TouchEvent, app: App) => {
 };
 
 export const handleTouchStart = (event: TouchEvent) => {
+    if (globalTouchStart(event)) {
+        return;
+    }
     firstDirection = null;
     xDiff = undefined;
     yDiff = undefined;