Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-12-22 17:40:13 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

🎨 https://github.com/siyuan-note/siyuan/issues/9674

Browse source
This commit is contained in:
Vanessa 2023-11-17 21:57:08 +08:00
parent 7c1f49e862
commit aa208bb3fc
7 changed files with 113 additions and 113 deletions
Download patch file Download diff file Expand all files Collapse all files

4
app/src/assets/scss/component/_typography.scss
View file

@ -480,10 +480,6 @@
right: 4px; right: 4px;
top: 4px; top: 4px;
display: flex; display: flex;
&--show {
opacity: .86;
}
} }
&-icon { &-icon {

4
app/src/assets/scss/protyle/_wysiwyg.scss
View file

@ -559,6 +559,7 @@
} }
} }
} }
} }
// 只读情况下列表前的圆点需要可以点击进行缩放 // 只读情况下列表前的圆点需要可以点击进行缩放
@ -615,7 +616,8 @@
} }
.img:hover .protyle-icons, .img:hover .protyle-icons,
.render-node:hover > .protyle-icons { .render-node:hover > .protyle-icons,
.protyle-icons--show {
opacity: .86; opacity: .86;
} }
} }

27
app/src/block/popover.ts
View file

@ -4,6 +4,7 @@ import {fetchSyncPost} from "../util/fetch";
import {hideTooltip, showTooltip} from "../dialog/tooltip"; import {hideTooltip, showTooltip} from "../dialog/tooltip";
import {getIdFromSYProtocol} from "../util/pathName"; import {getIdFromSYProtocol} from "../util/pathName";
import {App} from "../index"; import {App} from "../index";
import {Constants} from "../constants";
let popoverTargetElement: HTMLElement; let popoverTargetElement: HTMLElement;
export const initBlockPopover = (app: App) => { export const initBlockPopover = (app: App) => {
@ -56,7 +57,7 @@ export const initBlockPopover = (app: App) => {
clearTimeout(timeoutHide); clearTimeout(timeoutHide);
timeoutHide = window.setTimeout(() => { timeoutHide = window.setTimeout(() => {
hidePopover(event); hidePopover(event);
}, 200); }, Constants.TIMEOUT_INPUT);
if (!getTarget(event, aElement)) { if (!getTarget(event, aElement)) {
return; return;
@ -84,7 +85,7 @@ export const initBlockPopover = (app: App) => {
if (!popoverTargetElement && !aElement) { if (!popoverTargetElement && !aElement) {
clearTimeout(timeout); clearTimeout(timeout);
} }
}, 200); }, Constants.TIMEOUT_INPUT);
timeout = window.setTimeout(() => { timeout = window.setTimeout(() => {
if (!getTarget(event, aElement)) { if (!getTarget(event, aElement)) {
return; return;
@ -95,32 +96,34 @@ export const initBlockPopover = (app: App) => {
}); });
}; };
const hidePopover = (event: MouseEvent & { target: HTMLElement, path: HTMLElement[] }) => { const hidePopover = (event: MouseEvent & { path: HTMLElement[] }) => {
if (hasClosestByClassName(event.target, "b3-menu") || // pad 端点击后 event.target 不会更新。
(event.target.id && event.target.tagName !== "svg" && (event.target.id.startsWith("minder_node") || event.target.id.startsWith("kity_") || event.target.id.startsWith("node_"))) const target = document.elementFromPoint(event.clientX, event.clientY);
|| event.target.classList.contains("counter") if (hasClosestByClassName(target, "b3-menu") ||
|| event.target.tagName === "circle" (target.id && target.tagName !== "svg" && (target.id.startsWith("minder_node") || target.id.startsWith("kity_") || target.id.startsWith("node_")))
|| target.classList.contains("counter")
|| target.tagName === "circle"
) { ) {
// b3-menu 需要处理，(( 后的 hint 上的图表移上去需显示预览 // b3-menu 需要处理，(( 后的 hint 上的图表移上去需显示预览
// gutter & mindmap & 文件树上的数字 & 关系图节点不处理 // gutter & mindmap & 文件树上的数字 & 关系图节点不处理
return false; return false;
} }
popoverTargetElement = hasClosestByAttribute(event.target, "data-type", "block-ref") as HTMLElement || popoverTargetElement = hasClosestByAttribute(target, "data-type", "block-ref") as HTMLElement ||
hasClosestByAttribute(event.target, "data-type", "virtual-block-ref") as HTMLElement; hasClosestByAttribute(target, "data-type", "virtual-block-ref") as HTMLElement;
if (popoverTargetElement && popoverTargetElement.classList.contains("b3-tooltips")) { if (popoverTargetElement && popoverTargetElement.classList.contains("b3-tooltips")) {
popoverTargetElement = undefined; popoverTargetElement = undefined;
} }
if (!popoverTargetElement) { if (!popoverTargetElement) {
popoverTargetElement = hasClosestByClassName(event.target, "popover__block") as HTMLElement; popoverTargetElement = hasClosestByClassName(target, "popover__block") as HTMLElement;
} }
const linkElement = hasClosestByAttribute(event.target, "data-type", "a", true); const linkElement = hasClosestByAttribute(target, "data-type", "a", true);
if (!popoverTargetElement && linkElement && linkElement.getAttribute("data-href")?.startsWith("siyuan://blocks")) { if (!popoverTargetElement && linkElement && linkElement.getAttribute("data-href")?.startsWith("siyuan://blocks")) {
popoverTargetElement = linkElement; popoverTargetElement = linkElement;
} }
if (!popoverTargetElement) { if (!popoverTargetElement) {
// 移动到弹窗的 loading 元素上，但经过 settimeout 后 loading 已经被移除了 // 移动到弹窗的 loading 元素上，但经过 settimeout 后 loading 已经被移除了
// https://ld246.com/article/1673596577519/comment/1673767749885#comments // https://ld246.com/article/1673596577519/comment/1673767749885#comments
let targetElement = event.target; let targetElement = target;
if (!targetElement.parentElement && event.path && event.path[1]) { if (!targetElement.parentElement && event.path && event.path[1]) {
targetElement = event.path[1]; targetElement = event.path[1];
} }

64
app/src/boot/globalEvent/event.ts
View file

@ -65,12 +65,60 @@ export const initWindowEvent = (app: App) => {
globalClick(event); globalClick(event);
}); });
if (isIPad()) { let time = 0;
let time = 0; document.addEventListener("touchstart", (event) => {
document.addEventListener("touchstart", () => { time = new Date().getTime();
time = new Date().getTime(); // https://github.com/siyuan-note/siyuan/issues/6328
}, false); const target = event.target as HTMLElement;
document.addEventListener("touchend", (event) => { if (hasClosestByClassName(target, "protyle-icons") ||
hasClosestByClassName(target, "item") ||
target.classList.contains("protyle-background__icon")) {
return;
}
// 触摸屏背景和嵌入块按钮显示
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 {
backgroundElement.classList.toggle("protyle-background--mobileshow");
}
return;
}
const embedBlockElement = hasClosestByAttribute(target, "data-type", "NodeBlockQueryEmbed");
if (embedBlockElement) {
embedBlockElement.firstElementChild.classList.toggle("protyle-icons--show");
return;
}
}, false);
document.addEventListener("touchend", (event) => {
if (isIPad()) {
// https://github.com/siyuan-note/siyuan/issues/9113
if (globalTouchEnd(event, undefined, time, app)) { if (globalTouchEnd(event, undefined, time, app)) {
event.stopImmediatePropagation(); event.stopImmediatePropagation();
event.preventDefault(); event.preventDefault();
@ -103,6 +151,6 @@ export const initWindowEvent = (app: App) => {
event.preventDefault(); event.preventDefault();
return; return;
} }
}, false); }
} }, false);
}; };

1
app/src/mobile/util/touch.ts
View file

@ -162,7 +162,6 @@ export const handleTouchStart = (event: TouchEvent) => {
} }
}; };
let previousClientX: number; let previousClientX: number;
export const handleTouchMove = (event: TouchEvent) => { export const handleTouchMove = (event: TouchEvent) => {
const target = event.target as HTMLElement; const target = event.target as HTMLElement;

105
app/src/protyle/header/Background.ts
View file

@ -131,76 +131,49 @@ export class Background {
this.tagsElement = this.element.querySelector(".b3-chips") as HTMLElement; this.tagsElement = this.element.querySelector(".b3-chips") as HTMLElement;
this.iconElement = this.element.querySelector(".protyle-background__icon") as HTMLElement; this.iconElement = this.element.querySelector(".protyle-background__icon") as HTMLElement;
this.imgElement = this.element.firstElementChild.firstElementChild as HTMLImageElement; this.imgElement = this.element.firstElementChild.firstElementChild as HTMLImageElement;
if (isTouchDevice()) {
this.imgElement.addEventListener("touchstart", (event: TouchEvent & { target: HTMLElement }) => {
event.preventDefault();
if (!this.element.firstElementChild.querySelector(".protyle-icons").classList.contains("fn__none")) {
return;
}
const y = event.touches[0].clientY;
const documentSelf = document;
const height = this.imgElement.naturalHeight * this.imgElement.clientWidth / this.imgElement.naturalWidth - this.imgElement.clientHeight;
let originalPositionY = parseFloat(this.imgElement.style.objectPosition.substring(7)) || 50;
if (this.imgElement.style.objectPosition.endsWith("px")) {
originalPositionY = -parseInt(this.imgElement.style.objectPosition.substring(7)) / height * 100;
}
documentSelf.ontouchmove = (moveEvent) => {
this.imgElement.style.objectPosition = `center ${((y - moveEvent.touches[0].clientY) / height * 100 + originalPositionY).toFixed(2)}%`;
event.preventDefault();
};
documentSelf.ontouchend = () => { this.element.addEventListener("dragover", async (event) => {
documentSelf.ontouchmove = null; event.preventDefault();
documentSelf.ontouchstart = null; });
documentSelf.ondragstart = null; this.element.addEventListener("drop", async (event: DragEvent & { target: HTMLElement }) => {
documentSelf.onselectstart = null; if (event.dataTransfer.types[0] === "Files" && event.dataTransfer.files[0].type.indexOf("image") !== -1) {
documentSelf.onselect = null; uploadFiles(protyle, [event.dataTransfer.files[0]], undefined, (responseText) => {
}; const response = JSON.parse(responseText);
}); const style = `background-image:url("${response.data.succMap[Object.keys(response.data.succMap)[0]]}")`;
} else { this.ial["title-img"] = style;
this.element.addEventListener("dragover", async (event) => { this.render(this.ial, protyle.block.rootID);
event.preventDefault(); fetchPost("/api/attr/setBlockAttrs", {
}); id: protyle.block.rootID,
this.element.addEventListener("drop", async (event: DragEvent & { target: HTMLElement }) => { attrs: {"title-img": style}
if (event.dataTransfer.types[0] === "Files" && event.dataTransfer.files[0].type.indexOf("image") !== -1) {
uploadFiles(protyle, [event.dataTransfer.files[0]], undefined, (responseText) => {
const response = JSON.parse(responseText);
const style = `background-image:url("${response.data.succMap[Object.keys(response.data.succMap)[0]]}")`;
this.ial["title-img"] = style;
this.render(this.ial, protyle.block.rootID);
fetchPost("/api/attr/setBlockAttrs", {
id: protyle.block.rootID,
attrs: {"title-img": style}
});
}); });
} });
}); }
this.imgElement.addEventListener("mousedown", (event: MouseEvent & { target: HTMLElement }) => { });
this.imgElement.addEventListener("mousedown", (event: MouseEvent & { target: HTMLElement }) => {
event.preventDefault();
if (!this.element.firstElementChild.querySelector(".protyle-icons").classList.contains("fn__none")) {
return;
}
const y = event.clientY;
const documentSelf = document;
const height = this.imgElement.naturalHeight * this.imgElement.clientWidth / this.imgElement.naturalWidth - this.imgElement.clientHeight;
let originalPositionY = parseFloat(this.imgElement.style.objectPosition.substring(7)) || 50;
if (this.imgElement.style.objectPosition.endsWith("px")) {
originalPositionY = -parseInt(this.imgElement.style.objectPosition.substring(7)) / height * 100;
}
documentSelf.onmousemove = (moveEvent: MouseEvent) => {
this.imgElement.style.objectPosition = `center ${((y - moveEvent.clientY) / height * 100 + originalPositionY).toFixed(2)}%`;
event.preventDefault(); event.preventDefault();
if (!this.element.firstElementChild.querySelector(".protyle-icons").classList.contains("fn__none")) { };
return;
}
const y = event.clientY;
const documentSelf = document;
const height = this.imgElement.naturalHeight * this.imgElement.clientWidth / this.imgElement.naturalWidth - this.imgElement.clientHeight;
let originalPositionY = parseFloat(this.imgElement.style.objectPosition.substring(7)) || 50;
if (this.imgElement.style.objectPosition.endsWith("px")) {
originalPositionY = -parseInt(this.imgElement.style.objectPosition.substring(7)) / height * 100;
}
documentSelf.onmousemove = (moveEvent: MouseEvent) => {
this.imgElement.style.objectPosition = `center ${((y - moveEvent.clientY) / height * 100 + originalPositionY).toFixed(2)}%`;
event.preventDefault();
};
documentSelf.onmouseup = () => { documentSelf.onmouseup = () => {
documentSelf.onmousemove = null; documentSelf.onmousemove = null;
documentSelf.onmouseup = null; documentSelf.onmouseup = null;
documentSelf.ondragstart = null; documentSelf.ondragstart = null;
documentSelf.onselectstart = null; documentSelf.onselectstart = null;
documentSelf.onselect = null; documentSelf.onselect = null;
}; };
}); });
}
this.element.querySelector("input").addEventListener("change", (event: InputEvent & { this.element.querySelector("input").addEventListener("change", (event: InputEvent & {
target: HTMLInputElement target: HTMLInputElement
}) => { }) => {

21
app/src/protyle/ui/initUI.ts
View file

@ -47,27 +47,6 @@ export const initUI = (protyle: IProtyle) => {
setEditMode(protyle, protyle.options.mode); setEditMode(protyle, protyle.options.mode);
document.execCommand("DefaultParagraphSeparator", false, "p"); document.execCommand("DefaultParagraphSeparator", false, "p");
// 触摸屏背景和嵌入块按钮显示
protyle.contentElement.addEventListener("touchstart", (event) => {
// https://github.com/siyuan-note/siyuan/issues/6328
if (protyle.disabled) {
return;
}
const target = event.target as HTMLElement;
if (hasClosestByClassName(target, "protyle-icons") ||
hasClosestByClassName(target, "item") ||
target.classList.contains("protyle-background__icon")) {
return;
}
if (hasClosestByClassName(target, "protyle-background")) {
protyle.background.element.classList.toggle("protyle-background--mobileshow");
return;
}
const embedBlockElement = hasClosestByAttribute(target, "data-type", "NodeBlockQueryEmbed");
if (embedBlockElement) {
embedBlockElement.firstElementChild.classList.toggle("protyle-icons--show");
}
});
let wheelTimeout: number; let wheelTimeout: number;
const isMacOS = isMac(); const isMacOS = isMac();
protyle.contentElement.addEventListener("mousewheel", (event: WheelEvent) => { protyle.contentElement.addEventListener("mousewheel", (event: WheelEvent) => {