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/pull/14843

Browse source
This commit is contained in:
Vanessa 2025-05-18 12:06:19 +08:00
parent 2b03a364af
commit 15c7bc42b3
6 changed files with 31 additions and 126 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -14,7 +14,7 @@ import {getEventName} from "../util/compatibility";
import {Dialog} from "../../dialog";
import {Constants} from "../../constants";
import {assetMenu} from "../../menus/protyle";
import {previewImage} from "../preview/image";
import {previewImages} from "../preview/image";
import {Menu} from "../../plugin/Menu";
import {escapeHtml} from "../../util/escape";
@ -217,7 +217,7 @@ export class Background {
if (target.tagName === "IMG" && target.parentElement.classList.contains("protyle-background__img")) {
const imgSrc = target.getAttribute("src");
if (event.detail > 1 && !imgSrc.startsWith("data:image/png;base64")) {
previewImage(imgSrc);
previewImages([imgSrc]);
event.preventDefault();
event.stopPropagation();
}

127
app/src/protyle/preview/image.ts
View file

@ -2,11 +2,22 @@ import {Constants} from "../../constants";
import {addScript} from "../util/addScript";
import {fetchPost} from "../../util/fetch";
export const previewImage = (src: string) => {
export const previewImages = (srcList: string[], currentSrc?: string) => {
addScript(`${Constants.PROTYLE_CDN}/js/viewerjs/viewer.js?v=1.11.7`, "protyleViewerScript").then(() => {
const imagesElement = document.createElement("ul");
imagesElement.innerHTML = `<li><img src="${src}"></li>`;
let html = "";
let initialViewIndex = -1;
srcList.forEach((item: string, index: number) => {
if (item) {
html += `<li><img src="${item}"></li>`;
if (currentSrc && initialViewIndex === -1 && (currentSrc.endsWith(encodeURI(item)) || currentSrc.endsWith(item))) {
initialViewIndex = index;
}
}
});
imagesElement.innerHTML = html;
window.siyuan.viewer = new Viewer(imagesElement, {
initialViewIndex: currentSrc ? initialViewIndex : 0,
title: [1, (image: HTMLImageElement, imageData: IObject) => {
let name = image.alt;
if (!name) {
@ -41,111 +52,17 @@ export const previewImage = (src: string) => {
});
};
export const previewDocImage = (src: string, id: string) => {
addScript(`${Constants.PROTYLE_CDN}/js/viewerjs/viewer.js?v=1.11.7`, "protyleViewerScript").then(() => {
fetchPost("/api/asset/getDocImageAssets", {id}, (response) => {
const imagesElement = document.createElement("ul");
let html = "";
let initialViewIndex = -1;
response.data.forEach((item: string, index: number) => {
if (item) {
html += `<li><img src="${item}"></li>`;
if (initialViewIndex === -1 && (src.endsWith(encodeURI(item)) || src.endsWith(item))) {
initialViewIndex = index;
}
}
});
imagesElement.innerHTML = html;
window.siyuan.viewer = new Viewer(imagesElement, {
title: [1, (image: HTMLImageElement, imageData: IObject) => {
let name = image.alt;
if (!name) {
name = image.src.substring(image.src.lastIndexOf("/") + 1);
}
name = name.substring(0, name.lastIndexOf(".")).replace(/-\d{14}-\w{7}$/, "");
return `${name} [${imageData.naturalWidth} × ${imageData.naturalHeight}]`;
}],
button: false,
initialViewIndex,
transition: false,
hidden: function () {
window.siyuan.viewer.destroy();
},
toolbar: {
zoomIn: true,
zoomOut: true,
oneToOne: true,
reset: true,
prev: true,
play: true,
next: true,
rotateLeft: true,
rotateRight: true,
flipHorizontal: true,
flipVertical: true,
close: function () {
window.siyuan.viewer.destroy();
},
},
});
window.siyuan.viewer.show();
});
export const previewDocImage = (currentSrc: string, id: string) => {
fetchPost("/api/asset/getDocImageAssets", {id}, (response) => {
previewImages(response.data, currentSrc);
});
};
export const previewAttrViewImages = (src: string, avID: string,viewID: string,query?:string,pageSize?: number) => {
addScript(`${Constants.PROTYLE_CDN}/js/viewerjs/viewer.js?v=1.11.7`, "protyleViewerScript").then(() => {
fetchPost("/api/av/getCurrentAttrViewImages", {
id: avID,
query: query,
pageSize: pageSize,
viewID: viewID
}, (response) => {
const imagesElement = document.createElement("ul");
let html = "";
let initialViewIndex = -1;
response.data.forEach((item: string, index: number) => {
if (item) {
html += `<li><img src="${item}"></li>`;
if (initialViewIndex === -1 && (src.endsWith(encodeURI(item)) || src.endsWith(item))) {
initialViewIndex = index;
}
}
});
imagesElement.innerHTML = html;
window.siyuan.viewer = new Viewer(imagesElement, {
title: [1, (image: HTMLImageElement, imageData: IObject) => {
let name = image.alt;
if (!name) {
name = image.src.substring(image.src.lastIndexOf("/") + 1);
}
name = name.substring(0, name.lastIndexOf(".")).replace(/-\d{14}-\w{7}$/, "");
return `${name} [${imageData.naturalWidth} × ${imageData.naturalHeight}]`;
}],
button: false,
initialViewIndex,
transition: false,
hidden: function () {
window.siyuan.viewer.destroy();
},
toolbar: {
zoomIn: true,
zoomOut: true,
oneToOne: true,
reset: true,
prev: true,
play: true,
next: true,
rotateLeft: true,
rotateRight: true,
flipHorizontal: true,
flipVertical: true,
close: function () {
window.siyuan.viewer.destroy();
},
},
});
window.siyuan.viewer.show();
});
export const previewAttrViewImages = (currentSrc: string, avID: string, viewID: string) => {
fetchPost("/api/av/getCurrentAttrViewImages", {
id: avID,
viewID: viewID
}, (response) => {
previewImages(response.data, currentSrc);
});
};

2
app/src/protyle/render/av/action.ts
View file

@ -68,8 +68,6 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
(imgElement as HTMLImageElement).src,
blockElement.getAttribute("data-av-id"),
blockElement.getAttribute(Constants.CUSTOM_SY_AV_VIEW),
(blockElement.querySelector('[data-type="av-search"]') as HTMLInputElement)?.value.trim() || "",
parseInt(blockElement.dataset.pageSize) || undefined
);
event.preventDefault();
event.stopPropagation();

7
app/src/protyle/render/av/asset.ts
View file

@ -341,10 +341,9 @@ export const editAssetItem = (options: {
previewAttrViewImages(
linkAddress,
options.blockElement.getAttribute("data-av-id"),
options.blockElement.getAttribute(Constants.CUSTOM_SY_AV_VIEW),
(options.blockElement.querySelector('[data-type="av-search"]') as HTMLInputElement)?.value.trim() || "",
parseInt(options.blockElement.getAttribute("data-page-size")) || undefined
)}
options.blockElement.getAttribute(Constants.CUSTOM_SY_AV_VIEW)
);
}
});
}
if (openSubMenu.length > 0) {

4
app/src/protyle/render/av/blockAttr.ts
View file

@ -10,7 +10,7 @@ import {openMenuPanel} from "./openMenuPanel";
import {uploadFiles} from "../../upload";
import {openLink} from "../../../editor/openLink";
import {dragUpload, editAssetItem} from "./asset";
import {previewImage} from "../../preview/image";
import {previewImages} from "../../preview/image";
/// #if !BROWSER
import {webUtils} from "electron";
/// #endif
@ -477,7 +477,7 @@ const openEdit = (protyle: IProtyle, element: HTMLElement, event: MouseEvent) =>
});
} else {
if (target.tagName === "IMG") {
previewImage(target.getAttribute("src"));
previewImages([target.getAttribute("src")]);
} else {
openLink(protyle, target.dataset.url, event, event.ctrlKey || event.metaKey);
}

13
app/src/protyle/render/av/openMenuPanel.ts
View file

@ -1259,22 +1259,13 @@ export const openMenuPanel = (options: {
)) {
openAsset(options.protyle.app, assetLink.trim(), parseInt(getSearch("page", assetLink)), "right");
} else if (Constants.SIYUAN_ASSETS_IMAGE.includes(suffix)) {
previewAttrViewImages(assetLink,avID,
options.blockElement.getAttribute(Constants.CUSTOM_SY_AV_VIEW),
(options.blockElement.querySelector('[data-type="av-search"]') as HTMLInputElement)?.value.trim() || "",
parseInt(options.blockElement.getAttribute("data-page-size")) || undefined
)
previewAttrViewImages(assetLink, avID, options.blockElement.getAttribute(Constants.CUSTOM_SY_AV_VIEW));
} else {
window.open(assetLink);
}
/// #else
if (Constants.SIYUAN_ASSETS_IMAGE.includes(suffix)) {
previewAttrViewImages(assetLink,avID,
options.blockElement.getAttribute(Constants.CUSTOM_SY_AV_VIEW),
(options.blockElement.querySelector('[data-type="av-search"]') as HTMLInputElement)?.value.trim() || "",
parseInt(options.blockElement.getAttribute("data-page-size")) || undefined
)
previewAttrViewImages(assetLink, avID, options.blockElement.getAttribute(Constants.CUSTOM_SY_AV_VIEW));
} else {
window.open(assetLink);
}