From 8e9328607721fe0bd2b0591a6c831babdfeeb0cf Mon Sep 17 00:00:00 2001 From: Vanessa Date: Fri, 17 Nov 2023 22:35:16 +0800 Subject: [PATCH] :art: fix https://github.com/siyuan-note/siyuan/issues/9674 --- app/src/boot/globalEvent/event.ts | 33 +++-------------------------- app/src/boot/globalEvent/touch.ts | 35 +++++++++++++++++++++++++++++++ app/src/mobile/util/touch.ts | 5 ++++- 3 files changed, 42 insertions(+), 31 deletions(-) diff --git a/app/src/boot/globalEvent/event.ts b/app/src/boot/globalEvent/event.ts index b70300a05..f0cd6884e 100644 --- a/app/src/boot/globalEvent/event.ts +++ b/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({ diff --git a/app/src/boot/globalEvent/touch.ts b/app/src/boot/globalEvent/touch.ts index ac13d81d0..0b2099ec8 100644 --- a/app/src/boot/globalEvent/touch.ts +++ b/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(); diff --git a/app/src/mobile/util/touch.ts b/app/src/mobile/util/touch.ts index bf09a57d7..9d9e1b667 100644 --- a/app/src/mobile/util/touch.ts +++ b/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;