This commit is contained in:
Vanessa 2023-09-22 20:49:47 +08:00
parent a55b980512
commit 293638a813
4 changed files with 43 additions and 43 deletions

View file

@ -133,7 +133,7 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
return true; return true;
} }
const imgElement = hasClosestByClassName(event.target, "av__cellassetimg") as HTMLImageElement const imgElement = hasClosestByClassName(event.target, "av__cellassetimg") as HTMLImageElement;
if (imgElement) { if (imgElement) {
previewImage(imgElement.src); previewImage(imgElement.src);
event.preventDefault(); event.preventDefault();

View file

@ -24,21 +24,21 @@ export const bindAssetEvent = (options: {
return; return;
} }
uploadFiles(options.protyle, event.target.files, event.target, (res) => { uploadFiles(options.protyle, event.target.files, event.target, (res) => {
const resData = JSON.parse(res) const resData = JSON.parse(res);
const value: IAVCellAssetValue[] = [] const value: IAVCellAssetValue[] = [];
Object.keys(resData.data.succMap).forEach((key) => { Object.keys(resData.data.succMap).forEach((key) => {
value.push({ value.push({
name: key, name: key,
content: resData.data.succMap[key], content: resData.data.succMap[key],
type: Constants.SIYUAN_ASSETS_IMAGE.includes(pathPosix().extname(resData.data.succMap[key]).toLowerCase()) ? "image" : "file" type: Constants.SIYUAN_ASSETS_IMAGE.includes(pathPosix().extname(resData.data.succMap[key]).toLowerCase()) ? "image" : "file"
}) });
}) });
updateAssetCell({ updateAssetCell({
protyle: options.protyle, protyle: options.protyle,
data: options.data, data: options.data,
cellElements: options.cellElements, cellElements: options.cellElements,
value value
}) });
}); });
}); });
}; };
@ -46,39 +46,39 @@ export const bindAssetEvent = (options: {
export const getAssetHTML = (data: IAVTable, cellElements: HTMLElement[]) => { export const getAssetHTML = (data: IAVTable, cellElements: HTMLElement[]) => {
const cellId = cellElements[0].dataset.id; const cellId = cellElements[0].dataset.id;
const rowId = cellElements[0].parentElement.dataset.id; const rowId = cellElements[0].parentElement.dataset.id;
let cellData: IAVCell let cellData: IAVCell;
data.rows.find(row => { data.rows.find(row => {
if (row.id === rowId) { if (row.id === rowId) {
row.cells.find(cell => { row.cells.find(cell => {
if (cell.id === cellId) { if (cell.id === cellId) {
cellData = cell cellData = cell;
return true return true;
} }
}) });
return true return true;
} }
}) });
let html = "" let html = "";
if (cellData?.value?.mAsset) { if (cellData?.value?.mAsset) {
cellData.value.mAsset.forEach(item => { cellData.value.mAsset.forEach(item => {
if (!item.content) { if (!item.content) {
return return;
} }
let contentHTML let contentHTML;
if (item.type === "image") { if (item.type === "image") {
contentHTML = `<span class="fn__flex-1"> contentHTML = `<span class="fn__flex-1">
<img style="max-height: 180px;max-width: 360px;border-radius: var(--b3-border-radius);margin: 4px 0;" src="${item.content}"/> <img style="max-height: 180px;max-width: 360px;border-radius: var(--b3-border-radius);margin: 4px 0;" src="${item.content}"/>
</span>` </span>`;
} else { } else {
contentHTML = `<span class="fn__ellipsis b3-menu__label" style="max-width: 360px">${item.name}</span>` contentHTML = `<span class="fn__ellipsis b3-menu__label" style="max-width: 360px">${item.name}</span>`;
} }
html += `<button class="b3-menu__item" draggable="true" data-name="${item.name}" data-type="${item.type}" data-content="${item.content}"> html += `<button class="b3-menu__item" draggable="true" data-name="${item.name}" data-type="${item.type}" data-content="${item.content}">
<svg class="b3-menu__icon"><use xlink:href="#iconDrag"></use></svg> <svg class="b3-menu__icon"><use xlink:href="#iconDrag"></use></svg>
${contentHTML} ${contentHTML}
<svg class="b3-menu__action" data-type="editAssetItem"><use xlink:href="#iconEdit"></use></svg> <svg class="b3-menu__action" data-type="editAssetItem"><use xlink:href="#iconEdit"></use></svg>
</button>` </button>`;
}) });
} }
return `<div class="b3-menu__items"> return `<div class="b3-menu__items">
${html} ${html}
@ -130,14 +130,14 @@ const updateAssetCell = (options: {
if (options.removeContent) { if (options.removeContent) {
cellData.value.mAsset.find((oldItem, index) => { cellData.value.mAsset.find((oldItem, index) => {
if (oldItem.content === options.removeContent) { if (oldItem.content === options.removeContent) {
cellData.value.mAsset.splice(index, 1) cellData.value.mAsset.splice(index, 1);
return true; return true;
} }
}); });
} else { } else {
options.value.forEach(newitem => { options.value.forEach(newitem => {
if (!newitem.content) { if (!newitem.content) {
return return;
} }
const hasMatch = cellData.value.mAsset.find(oldItem => { const hasMatch = cellData.value.mAsset.find(oldItem => {
if (oldItem.content === newitem.content) { if (oldItem.content === newitem.content) {
@ -145,14 +145,14 @@ const updateAssetCell = (options: {
oldItem.type = newitem.type; oldItem.type = newitem.type;
return true; return true;
} }
}) });
if (!hasMatch) { if (!hasMatch) {
if (newitem.type === "file" && !newitem.name) { if (newitem.type === "file" && !newitem.name) {
newitem.name = newitem.content newitem.name = newitem.content;
} }
cellData.value.mAsset.push(newitem); cellData.value.mAsset.push(newitem);
} }
}) });
} }
cellDoOperations.push({ cellDoOperations.push({
action: "updateAttrViewCell", action: "updateAttrViewCell",
@ -178,20 +178,20 @@ const updateAssetCell = (options: {
const menuElement = document.querySelector(".av__panel > .b3-menu") as HTMLElement; const menuElement = document.querySelector(".av__panel > .b3-menu") as HTMLElement;
if (menuElement) { if (menuElement) {
menuElement.innerHTML = getAssetHTML(options.data.view, options.cellElements); menuElement.innerHTML = getAssetHTML(options.data.view, options.cellElements);
bindAssetEvent({protyle: options.protyle, data: options.data, menuElement, cellElements: options.cellElements}) bindAssetEvent({protyle: options.protyle, data: options.data, menuElement, cellElements: options.cellElements});
const cellRect = options.protyle.wysiwyg.element.querySelector(`.av__cell[data-id="${options.cellElements[0].dataset.id}"]`).getBoundingClientRect(); const cellRect = options.protyle.wysiwyg.element.querySelector(`.av__cell[data-id="${options.cellElements[0].dataset.id}"]`).getBoundingClientRect();
setTimeout(() => { setTimeout(() => {
setPosition(menuElement, cellRect.left, cellRect.bottom, cellRect.height); setPosition(menuElement, cellRect.left, cellRect.bottom, cellRect.height);
}, Constants.TIMEOUT_LOAD); // 等待图片加载 }, Constants.TIMEOUT_LOAD); // 等待图片加载
} }
} };
export const editAssetItem = (protyle: IProtyle, data: IAV, cellElements: HTMLElement[], target: HTMLElement) => { export const editAssetItem = (protyle: IProtyle, data: IAV, cellElements: HTMLElement[], target: HTMLElement) => {
const linkAddress = target.dataset.content const linkAddress = target.dataset.content;
const type = target.dataset.type as "image" | "file" const type = target.dataset.type as "image" | "file";
const menu = new Menu("av-asset-edit", () => { const menu = new Menu("av-asset-edit", () => {
if (!textElement || !textElement.value || textElement.value === target.dataset.name) { if (!textElement || !textElement.value || textElement.value === target.dataset.name) {
return return;
} }
updateAssetCell({ updateAssetCell({
protyle, protyle,
@ -202,8 +202,8 @@ export const editAssetItem = (protyle: IProtyle, data: IAV, cellElements: HTMLEl
name: textElement.value, name: textElement.value,
type type
}] }]
}) });
}) });
if (menu.isOpen) { if (menu.isOpen) {
return; return;
} }
@ -230,7 +230,7 @@ export const editAssetItem = (protyle: IProtyle, data: IAV, cellElements: HTMLEl
data, data,
cellElements, cellElements,
removeContent: linkAddress removeContent: linkAddress
}) });
} }
}); });
openMenu(protyle.app, linkAddress, false, true); openMenu(protyle.app, linkAddress, false, true);
@ -239,7 +239,7 @@ export const editAssetItem = (protyle: IProtyle, data: IAV, cellElements: HTMLEl
window.siyuan.menus.menu.append(new MenuItem(exportAsset(linkAddress)).element); window.siyuan.menus.menu.append(new MenuItem(exportAsset(linkAddress)).element);
} }
/// #endif /// #endif
const textElement = menu.element.querySelector("textarea") const textElement = menu.element.querySelector("textarea");
if (textElement) { if (textElement) {
textElement.value = target.dataset.name; textElement.value = target.dataset.name;
} }
@ -250,13 +250,13 @@ export const editAssetItem = (protyle: IProtyle, data: IAV, cellElements: HTMLEl
w: rect.width, w: rect.width,
h: rect.height, h: rect.height,
}); });
} };
export const addAssetLink = (protyle: IProtyle, data: IAV, cellElements: HTMLElement[], target: HTMLElement) => { export const addAssetLink = (protyle: IProtyle, data: IAV, cellElements: HTMLElement[], target: HTMLElement) => {
const menu = new Menu("av-asset-link", () => { const menu = new Menu("av-asset-link", () => {
const textElements = menu.element.querySelectorAll("textarea") const textElements = menu.element.querySelectorAll("textarea");
if (!textElements[0].value) { if (!textElements[0].value) {
return return;
} }
updateAssetCell({ updateAssetCell({
protyle, protyle,
@ -267,8 +267,8 @@ export const addAssetLink = (protyle: IProtyle, data: IAV, cellElements: HTMLEle
name: textElements[1].value, name: textElements[1].value,
content: textElements[0].value, content: textElements[0].value,
}] }]
}) });
}) });
if (menu.isOpen) { if (menu.isOpen) {
return; return;
} }
@ -287,4 +287,4 @@ export const addAssetLink = (protyle: IProtyle, data: IAV, cellElements: HTMLEle
w: rect.width, w: rect.width,
h: rect.height, h: rect.height,
}); });
} };

View file

@ -639,12 +639,12 @@ export const openMenuPanel = (options: {
event.stopPropagation(); event.stopPropagation();
break; break;
} else if (type === "addAssetLink") { } else if (type === "addAssetLink") {
addAssetLink(options.protyle, data, options.cellElements, target) addAssetLink(options.protyle, data, options.cellElements, target);
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
break; break;
} else if (type === "editAssetItem") { } else if (type === "editAssetItem") {
editAssetItem(options.protyle, data, options.cellElements, target.parentElement) editAssetItem(options.protyle, data, options.cellElements, target.parentElement);
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
break; break;

View file

@ -1268,7 +1268,7 @@ const inputEvent = (element: Element, config: ISearchOption, inputTimeout: numbe
searchElement: searchInputElement, searchElement: searchInputElement,
}); });
}); });
const searchResultElement = element.querySelector("#searchResult") const searchResultElement = element.querySelector("#searchResult");
if (inputValue === "" && (!config.idPath || config.idPath.length === 0)) { if (inputValue === "" && (!config.idPath || config.idPath.length === 0)) {
fetchPost("/api/block/getRecentUpdatedBlocks", {}, (response) => { fetchPost("/api/block/getRecentUpdatedBlocks", {}, (response) => {
onSearch(response.data, edit, element, config); onSearch(response.data, edit, element, config);
@ -1304,7 +1304,7 @@ const inputEvent = (element: Element, config: ISearchOption, inputTimeout: numbe
searchResultElement.innerHTML = `${config.page}/${response.data.pageCount || 1}<span class="fn__space"></span> searchResultElement.innerHTML = `${config.page}/${response.data.pageCount || 1}<span class="fn__space"></span>
<span class="ft__on-surface">${window.siyuan.languages.findInDoc.replace("${x}", response.data.matchedRootCount).replace("${y}", response.data.matchedBlockCount)}</span>`; <span class="ft__on-surface">${window.siyuan.languages.findInDoc.replace("${x}", response.data.matchedRootCount).replace("${y}", response.data.matchedBlockCount)}</span>`;
loadingElement.classList.add("fn__none"); loadingElement.classList.add("fn__none");
searchResultElement.setAttribute("data-pagecount", response.data.pageCount || 1) searchResultElement.setAttribute("data-pagecount", response.data.pageCount || 1);
}); });
} }
}, Constants.TIMEOUT_INPUT); }, Constants.TIMEOUT_INPUT);