diff --git a/app/src/protyle/header/Background.ts b/app/src/protyle/header/Background.ts index 7b370f587..2455503b7 100644 --- a/app/src/protyle/header/Background.ts +++ b/app/src/protyle/header/Background.ts @@ -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(); } diff --git a/app/src/protyle/preview/image.ts b/app/src/protyle/preview/image.ts index 7f15f5147..57639d22d 100644 --- a/app/src/protyle/preview/image.ts +++ b/app/src/protyle/preview/image.ts @@ -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 = `
  • `; + let html = ""; + let initialViewIndex = -1; + srcList.forEach((item: string, index: number) => { + if (item) { + html += `
  • `; + 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 += `
  • `; - 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 += `
  • `; - 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); }); }; diff --git a/app/src/protyle/render/av/action.ts b/app/src/protyle/render/av/action.ts index 08e553ddc..0bb72c03a 100644 --- a/app/src/protyle/render/av/action.ts +++ b/app/src/protyle/render/av/action.ts @@ -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(); diff --git a/app/src/protyle/render/av/asset.ts b/app/src/protyle/render/av/asset.ts index 95b97869a..6df51c3cd 100644 --- a/app/src/protyle/render/av/asset.ts +++ b/app/src/protyle/render/av/asset.ts @@ -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) { diff --git a/app/src/protyle/render/av/blockAttr.ts b/app/src/protyle/render/av/blockAttr.ts index 50dead316..0512eddad 100644 --- a/app/src/protyle/render/av/blockAttr.ts +++ b/app/src/protyle/render/av/blockAttr.ts @@ -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); } diff --git a/app/src/protyle/render/av/openMenuPanel.ts b/app/src/protyle/render/av/openMenuPanel.ts index 8d9ab2d66..ad2bf02de 100644 --- a/app/src/protyle/render/av/openMenuPanel.ts +++ b/app/src/protyle/render/av/openMenuPanel.ts @@ -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); }