github/siyuan
4
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-05-15 00:21:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

🎨 fix https://github.com/siyuan-note/siyuan/issues/9313

Browse Source
This commit is contained in:
Vanessa 2023-10-01 10:26:31 +08:00
parent 05cfcf7c2b
commit 64900706b2
13 changed files with 119 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/src/menus/Menu.ts
View File

@ -125,7 +125,7 @@ export class Menu {
this.element.lastElementChild.append(element);
}
public popup(options: { x: number, y: number, h?: number, w?: number }, isLeft = false) {
public popup(options: IPosition, isLeft = false) {
if (this.element.lastElementChild.innerHTML === "") {
return;
}

5
app/src/plugin/API.ts
View File

@ -27,10 +27,7 @@ openWindow = () => {
};
/// #else
openWindow = (options: {
position?: {
x: number,
y: number,
},
position?: IPosition,
height?: number,
width?: number,
tab?: Tab,

2
app/src/plugin/Menu.ts
View File

@ -41,7 +41,7 @@ export class Menu {
this.menu.addSeparator(index);
}
open(options: { x: number, y: number, h?: number, w?: number, isLeft?: boolean }) {
open(options:IPosition) {
if (this.isOpen) {
return;
}

2
app/src/protyle/breadcrumb/index.ts
View File

@ -240,7 +240,7 @@ export class Breadcrumb {
}
}
public showMenu(protyle: IProtyle, position: { x: number, y: number }) {
public showMenu(protyle: IProtyle, position:IPosition) {
if (!window.siyuan.menus.menu.element.classList.contains("fn__none") &&
window.siyuan.menus.menu.element.getAttribute("data-name") === "breadcrumbMore") {
window.siyuan.menus.menu.remove();

2
app/src/protyle/gutter/index.ts
View File

@ -698,6 +698,7 @@ export class Gutter {
protyle.toolbar.subElement.style.width = "";
protyle.toolbar.subElement.style.padding = "";
protyle.toolbar.subElement.append(appearanceMenu(protyle, selectsElement));
protyle.toolbar.subElement.style.zIndex = (++window.siyuan.zIndex).toString();
protyle.toolbar.subElement.classList.remove("fn__none");
protyle.toolbar.subElementCloseCB = undefined;
const position = selectsElement[0].getBoundingClientRect();
@ -1497,6 +1498,7 @@ export class Gutter {
protyle.toolbar.subElement.style.width = "";
protyle.toolbar.subElement.style.padding = "";
protyle.toolbar.subElement.append(appearanceMenu(protyle, [nodeElement]));
protyle.toolbar.subElement.style.zIndex = (++window.siyuan.zIndex).toString();
protyle.toolbar.subElement.classList.remove("fn__none");
protyle.toolbar.subElementCloseCB = undefined;
const position = nodeElement.getBoundingClientRect();

6
app/src/protyle/header/openTitleMenu.ts
View File

@ -28,11 +28,7 @@ import {openNewWindowById} from "../../window/openNewWindow";
import {genImportMenu} from "../../menus/navigation";
import {transferBlockRef} from "../../menus/block";
export const openTitleMenu = (protyle: IProtyle, position: {
x: number
y: number
isLeft?: boolean
}) => {
export const openTitleMenu = (protyle: IProtyle, position: IPosition) => {
hideTooltip();
if (!window.siyuan.menus.menu.element.classList.contains("fn__none") &&
window.siyuan.menus.menu.element.getAttribute("data-name") === "titleMenu") {

4
app/src/protyle/hint/index.ts
View File

@ -600,7 +600,9 @@ ${genHintItemHTML(item)}
} else if (value === Constants.ZWSP + 2) {
range.deleteContents();
this.fixImageCursor(range);
protyle.toolbar.showAssets(protyle, nodeElement, range);
protyle.toolbar.range = range;
const rangePosition = getSelectionPosition(nodeElement, range);
protyle.toolbar.showAssets(protyle, {x: rangePosition.left, y: rangePosition.top + 26, w: 0, h: 26});
updateTransaction(protyle, id, nodeElement.outerHTML, html);
return;
} else if (value === Constants.ZWSP + 3) {

8
app/src/protyle/render/av/asset.ts
View File

@ -84,6 +84,10 @@ ${contentHTML}
}
return `<div class="b3-menu__items">
${html}
<button data-type="addAssetExist" class="b3-menu__item">
<svg class="b3-menu__icon"><use xlink:href="#iconImage"></use></svg>
<span class="b3-menu__label">${window.siyuan.languages.assets}</span>
</button>
<button class="b3-menu__item">
<svg class="b3-menu__icon"><use xlink:href="#iconDownload"></use></svg>
<span class="b3-menu__label">${window.siyuan.languages.insertAsset}</span>
@ -314,8 +318,8 @@ export const addAssetLink = (protyle: IProtyle, data: IAV, cellElements: HTMLEle
const rect = target.getBoundingClientRect();
menu.open({
x: rect.right,
y: rect.top,
w: rect.width,
y: rect.bottom,
w: target.parentElement.clientWidth + 8,
h: rect.height,
});
};

38
app/src/protyle/render/av/openMenuPanel.ts
View File

@ -12,6 +12,8 @@ import {formatNumber} from "./number";
import {removeAttrViewColAnimation} from "./action";
import {addAssetLink, bindAssetEvent, editAssetItem, getAssetHTML, updateAssetCell} from "./asset";
import {Constants} from "../../../constants";
import {hideElements} from "../../ui/hideElements";
import {pathPosix} from "../../../util/pathName";
export const openMenuPanel = (options: {
protyle: IProtyle,
@ -322,7 +324,12 @@ export const openMenuPanel = (options: {
while (target && !target.isSameNode(avPanelElement)) {
const type = target.dataset.type;
if (type === "close") {
avPanelElement.remove();
if (options.protyle.toolbar.subElement.className.includes("fn__none")) {
avPanelElement.remove();
} else {
// 优先关闭资源文件搜索
hideElements(["util"], options.protyle)
}
window.siyuan.menus.menu.remove();
event.preventDefault();
event.stopPropagation();
@ -672,6 +679,35 @@ export const openMenuPanel = (options: {
event.preventDefault();
event.stopPropagation();
break;
} else if (type === "addAssetExist") {
const rect = target.getBoundingClientRect()
options.protyle.toolbar.showAssets(options.protyle, {x: rect.right, y: rect.bottom, w: target.parentElement.clientWidth + 8, h: rect.height}, (url) => {
let value: IAVCellAssetValue;
if (Constants.SIYUAN_ASSETS_IMAGE.includes(pathPosix().extname(url).toLowerCase())) {
value = {
type: "image",
content: url,
name: ""
}
} else {
value = {
type: "file",
content: url,
name: pathPosix().basename(url).substring(0, Constants.SIZE_LINK_TEXT_MAX)
}
}
updateAssetCell({
protyle: options.protyle,
data,
cellElements: options.cellElements,
type: "addUpdate",
addUpdateValue: [value]
});
hideElements(["util"], options.protyle);
});
event.preventDefault();
event.stopPropagation();
break;
} else if (type === "editAssetItem") {
editAssetItem(options.protyle, data, options.cellElements, target.parentElement);
event.preventDefault();

1
app/src/protyle/toolbar/Font.ts
View File

@ -18,6 +18,7 @@ export class Font extends ToolbarItem {
protyle.toolbar.subElement.style.width = "";
protyle.toolbar.subElement.style.padding = "";
protyle.toolbar.subElement.append(appearanceMenu(protyle, getFontNodeElements(protyle)));
protyle.toolbar.subElement.style.zIndex = (++window.siyuan.zIndex).toString();
protyle.toolbar.subElement.classList.remove("fn__none");
protyle.toolbar.subElementCloseCB = undefined;
focusByRange(protyle.toolbar.range);

85
app/src/protyle/toolbar/index.ts
View File

@ -1115,6 +1115,7 @@ export class Toolbar {
}
updateTransaction(protyle, id, newHTML, html);
};
this.subElement.style.zIndex = (++window.siyuan.zIndex).toString();
this.subElement.classList.remove("fn__none");
const nodeRect = renderElement.getBoundingClientRect();
this.element.classList.add("fn__none");
@ -1255,6 +1256,7 @@ export class Toolbar {
focusByRange(this.range);
}
});
this.subElement.style.zIndex = (++window.siyuan.zIndex).toString();
this.subElement.classList.remove("fn__none");
this.subElementCloseCB = undefined;
/// #if !MOBILE
@ -1410,6 +1412,7 @@ export class Toolbar {
event.stopPropagation();
}
});
this.subElement.style.zIndex = (++window.siyuan.zIndex).toString();
this.subElement.classList.remove("fn__none");
this.subElementCloseCB = undefined;
this.element.classList.add("fn__none");
@ -1490,6 +1493,7 @@ export class Toolbar {
}
hintRenderWidget(listElement.textContent, protyle);
});
this.subElement.style.zIndex = (++window.siyuan.zIndex).toString();
this.subElement.classList.remove("fn__none");
this.subElementCloseCB = undefined;
this.element.classList.add("fn__none");
@ -1511,8 +1515,25 @@ export class Toolbar {
});
}
public showAssets(protyle: IProtyle, nodeElement: HTMLElement, range: Range) {
this.range = range;
private renderAssetList(listElement: Element, previewElement: Element, k: string, position: IPosition) {
fetchPost("/api/search/searchAsset", {
k,
}, (response) => {
let searchHTML = "";
response.data.forEach((item: { path: string, hName: string }, index: number) => {
searchHTML += `<div data-value="${item.path}" class="b3-list-item${index === 0 ? " b3-list-item--focus" : ""}"><div class="b3-list-item__text">${item.hName}</div></div>`;
});
listElement.innerHTML = searchHTML || `<li class="b3-list--empty">${window.siyuan.languages.emptyContent}</li>`;
if (response.data.length > 0) {
previewElement.innerHTML = renderAssetsPreview(response.data[0].path);
}
/// #if !MOBILE
setPosition(this.subElement, position.x, position.y, position.h, position.w);
/// #endif
});
}
public showAssets(protyle: IProtyle, position: IPosition, avCB?: (url: string) => void) {
hideElements(["hint"], protyle);
window.siyuan.menus.menu.remove();
this.subElement.style.width = "";
@ -1531,6 +1552,7 @@ export class Toolbar {
<div style="width: 260px;display: ${isMobile() || window.outerWidth < window.outerWidth / 2 + 260 ? "none" : "flex"};padding: 8px;overflow: auto;justify-content: center;align-items: center;"></div>
</div>`;
const listElement = this.subElement.querySelector(".b3-list");
const previewElement = this.subElement.firstElementChild.lastElementChild;
listElement.addEventListener("mouseover", (event) => {
const target = event.target as HTMLElement;
const hoverItemElement = hasClosestByClassName(target, "b3-list-item");
@ -1539,15 +1561,13 @@ export class Toolbar {
}
previewElement.innerHTML = renderAssetsPreview(hoverItemElement.getAttribute("data-value"));
});
const previewElement = this.subElement.firstElementChild.lastElementChild;
previewElement.innerHTML = renderAssetsPreview(listElement.firstElementChild.getAttribute("data-value"));
const inputElement = this.subElement.querySelector("input");
inputElement.addEventListener("keydown", (event: KeyboardEvent) => {
event.stopPropagation();
if (event.isComposing) {
return;
}
const isEmpty = !this.subElement.querySelector(".b3-list-item");
const isEmpty = this.subElement.querySelector(".b3-list--empty");
if (!isEmpty) {
const currentElement = upDownHint(listElement, event);
if (currentElement) {
@ -1557,8 +1577,13 @@ export class Toolbar {
if (event.key === "Enter") {
if (!isEmpty) {
hintRenderAssets(this.subElement.querySelector(".b3-list-item--focus").getAttribute("data-value"), protyle);
} else {
const currentURL = this.subElement.querySelector(".b3-list-item--focus").getAttribute("data-value")
if (avCB) {
avCB(currentURL)
} else {
hintRenderAssets(currentURL, protyle);
}
} else if (!avCB) {
focusByRange(this.range);
}
this.subElement.classList.add("fn__none");
@ -1566,21 +1591,14 @@ export class Toolbar {
event.preventDefault();
} else if (event.key === "Escape") {
this.subElement.classList.add("fn__none");
focusByRange(this.range);
if (!avCB) {
focusByRange(this.range);
}
}
});
inputElement.addEventListener("input", (event) => {
event.stopPropagation();
fetchPost("/api/search/searchAsset", {
k: inputElement.value,
}, (response) => {
let searchHTML = "";
response.data.forEach((item: { path: string, hName: string }, index: number) => {
searchHTML += `<div data-value="${item.path}" class="b3-list-item${index === 0 ? " b3-list-item--focus" : ""}">${item.hName}</div>`;
});
listElement.innerHTML = searchHTML || `<li class="b3-list--empty">${window.siyuan.languages.emptyContent}</li>`;
previewElement.innerHTML = renderAssetsPreview(listElement.firstElementChild.getAttribute("data-value"));
});
this.renderAssetList(listElement, previewElement, inputElement.value, position);
});
this.subElement.lastElementChild.addEventListener("click", (event) => {
const target = event.target as HTMLElement;
@ -1598,38 +1616,32 @@ export class Toolbar {
}
if (target.classList.contains("b3-list--empty")) {
this.subElement.classList.add("fn__none");
focusByRange(this.range);
if (!avCB) {
focusByRange(this.range);
}
event.stopPropagation();
return;
}
const listItemElement = hasClosestByClassName(target, "b3-list-item");
if (listItemElement) {
event.stopPropagation();
hintRenderAssets(listItemElement.getAttribute("data-value"), protyle);
const currentURL = listItemElement.getAttribute("data-value")
if (avCB) {
avCB(currentURL)
} else {
hintRenderAssets(currentURL, protyle);
}
}
});
this.subElement.style.zIndex = (++window.siyuan.zIndex).toString();
this.subElement.classList.remove("fn__none");
this.subElementCloseCB = undefined;
/// #if !MOBILE
const rangePosition = getSelectionPosition(nodeElement, range);
setPosition(this.subElement, rangePosition.left, rangePosition.top + 18, Constants.SIZE_TOOLBAR_HEIGHT);
/// #else
/// #if MOBILE
setPosition(this.subElement, 0, 0);
/// #endif
this.element.classList.add("fn__none");
inputElement.select();
fetchPost("/api/search/searchAsset", {
k: "",
}, (response) => {
let html = "";
response.data.forEach((item: { hName: string, path: string }, index: number) => {
html += `<div data-value="${item.path}" class="b3-list-item${index === 0 ? " b3-list-item--focus" : ""}"><div class="b3-list-item__text">${item.hName}</div></div>`;
});
if (html === "") {
html = `<li class="b3-list--empty">${window.siyuan.languages.emptyContent}</li>`;
}
this.subElement.querySelector(".b3-list--background").innerHTML = html;
});
this.renderAssetList(listElement, previewElement, "", position);
}
public showContent(protyle: IProtyle, range: Range, nodeElement: Element) {
@ -1721,6 +1733,7 @@ export class Toolbar {
setPosition(this.subElement, rangePosition.left, rangePosition.top + 28, Constants.SIZE_TOOLBAR_HEIGHT);
}
});
this.subElement.style.zIndex = (++window.siyuan.zIndex).toString();
this.subElement.classList.remove("fn__none");
this.subElementCloseCB = undefined;
this.element.classList.add("fn__none");

14
app/src/protyle/ui/hideElements.ts
View File

@ -1,7 +1,7 @@
/// #if MOBILE
import {getCurrentEditor} from "../../mobile/editor";
/// #else
import {getAllModels} from "../../layout/getAll";
import {getAllEditor} from "../../layout/getAll";
/// #endif
// "gutter", "toolbar", "select", "hint", "util", "dialog"
@ -67,11 +67,13 @@ export const hideAllElements = (types: string[]) => {
editor.protyle.toolbar.subElementCloseCB = undefined;
}
/// #else
getAllModels().editor.forEach(item => {
item.editor.protyle.toolbar.subElement.classList.add("fn__none");
if (item.editor.protyle.toolbar.subElementCloseCB) {
item.editor.protyle.toolbar.subElementCloseCB();
item.editor.protyle.toolbar.subElementCloseCB = undefined;
getAllEditor().forEach(item => {
if (item.protyle.toolbar) {
item.protyle.toolbar.subElement.classList.add("fn__none");
if (item.protyle.toolbar.subElementCloseCB) {
item.protyle.toolbar.subElementCloseCB();
item.protyle.toolbar.subElementCloseCB = undefined;
}
}
});
/// #endif

8
app/src/types/index.d.ts vendored
View File

@ -152,6 +152,14 @@ interface Window {
openFileByURL(URL: string): boolean
}
interface IPosition {
x: number,
y: number,
w?: number,
h?: number,
isLeft?: boolean
}
interface ISaveLayout {
name: string,
layout: IObject