0ct0pu5/siyuan
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Vanessa 2024-05-15 11:17:34 +08:00
parent 2226234b56
commit 3e508b76d0
5 changed files with 40 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -18,7 +18,6 @@ import {genCellValueByElement, getTypeByCellElement} from "./cell";
export const bindAssetEvent = (options: {
protyle: IProtyle,
data: IAV,
menuElement: HTMLElement,
cellElements: HTMLElement[],
blockElement: Element
@ -41,7 +40,6 @@ export const bindAssetEvent = (options: {
});
updateAssetCell({
protyle: options.protyle,
data: options.data,
cellElements: options.cellElements,
addValue: value,
blockElement: options.blockElement
@ -91,7 +89,6 @@ ${contentHTML}
export const updateAssetCell = (options: {
protyle: IProtyle,
data: IAV,
cellElements: HTMLElement[],
replaceValue?: IAVCellAssetValue[],
addValue?: IAVCellAssetValue[],
@ -107,7 +104,10 @@ export const updateAssetCell = (options: {
if (!options.blockElement.contains(item)) {
const rowElement = hasClosestByClassName(item, "av__row");
if (rowElement) {
item = options.cellElements[elementIndex] = options.blockElement.querySelector(`.av__row[data-id="${rowElement.dataset.id}"] .av__cell[data-col-id="${item.dataset.colId}"]`) as HTMLElement;
item = options.cellElements[elementIndex] =
(options.blockElement.querySelector(`.av__row[data-id="${rowElement.dataset.id}"] .av__cell[data-col-id="${item.dataset.colId}"]`) ||
// block attr
options.blockElement.querySelector(`.fn__flex-1[data-col-id="${item.dataset.colId}"]`)) as HTMLElement;
}
}
const cellValue = genCellValueByElement(getTypeByCellElement(item) || item.dataset.type as TAVCol, item);
@ -134,12 +134,13 @@ export const updateAssetCell = (options: {
} else {
cellValue.mAsset = mAssetValue;
}
const avID = options.blockElement.getAttribute("data-av-id")
cellDoOperations.push({
action: "updateAttrViewCell",
id: cellValue.id,
keyID: colId,
rowID,
avID: options.data.id,
avID,
data: cellValue
});
cellUndoOperations.push({
@ -147,20 +148,9 @@ export const updateAssetCell = (options: {
id: cellValue.id,
keyID: colId,
rowID,
avID: options.data.id,
avID,
data: oldValue
});
options.data.view.rows.find(row => {
if (row.id === rowID) {
row.cells.find(cell => {
if (cell.id === cellValue.id) {
cell.value = cellValue;
return true;
}
});
return true;
}
});
if (item.classList.contains("custom-attr__avvalue")) {
item.innerHTML = genAVValueHTML(cellValue);
} else {
@ -173,7 +163,6 @@ export const updateAssetCell = (options: {
menuElement.innerHTML = getAssetHTML(options.cellElements);
bindAssetEvent({
protyle: options.protyle,
data: options.data,
menuElement,
cellElements: options.cellElements,
blockElement: options.blockElement
@ -185,7 +174,7 @@ export const updateAssetCell = (options: {
}
};
export const editAssetItem = (protyle: IProtyle, data: IAV, cellElements: HTMLElement[], target: HTMLElement, blockElement: Element) => {
export const editAssetItem = (protyle: IProtyle, cellElements: HTMLElement[], target: HTMLElement, blockElement: Element) => {
const linkAddress = target.dataset.content;
const type = target.dataset.type as "image" | "file";
const menu = new Menu("av-asset-edit", () => {
@ -195,7 +184,6 @@ export const editAssetItem = (protyle: IProtyle, data: IAV, cellElements: HTMLEl
}
updateAssetCell({
protyle,
data,
cellElements,
blockElement,
updateValue: {
@ -236,14 +224,13 @@ ${window.siyuan.languages.title}
click() {
updateAssetCell({
protyle,
data,
cellElements,
blockElement,
removeIndex: parseInt(target.dataset.index)
});
}
});
openMenu(protyle ? protyle.app : window.siyuan.ws.app, linkAddress, false, true);
openMenu(protyle ? protyle.app : window.siyuan.ws.app, linkAddress, false, false);
if (linkAddress?.startsWith("assets/")) {
window.siyuan.menus.menu.append(new MenuItem(exportAsset(linkAddress)).element);
}
@ -263,7 +250,7 @@ ${window.siyuan.languages.title}
}
};
export const addAssetLink = (protyle: IProtyle, data: IAV, cellElements: HTMLElement[], target: HTMLElement, blockElement: Element) => {
export const addAssetLink = (protyle: IProtyle, cellElements: HTMLElement[], target: HTMLElement, blockElement: Element) => {
const menu = new Menu("av-asset-link", () => {
const textElements = menu.element.querySelectorAll("textarea");
if (!textElements[0].value) {
@ -271,7 +258,6 @@ export const addAssetLink = (protyle: IProtyle, data: IAV, cellElements: HTMLEle
}
updateAssetCell({
protyle,
data,
cellElements,
blockElement,
addValue: [{
@ -303,7 +289,7 @@ ${window.siyuan.languages.title}
menu.element.querySelector("textarea").focus();
};
export const dragUpload = (files: string[], protyle: IProtyle, cellElement: HTMLElement, avID: string) => {
export const dragUpload = (files: string[], protyle: IProtyle, cellElement: HTMLElement) => {
const msgId = showMessage(window.siyuan.languages.uploading, 0);
fetchPost("/api/asset/insertLocalAssets", {
assetPaths: files,
@ -331,18 +317,11 @@ export const dragUpload = (files: string[], protyle: IProtyle, cellElement: HTML
});
}
});
fetchPost("/api/av/renderAttributeView", {
id: avID,
pageSize: parseInt(blockElement.getAttribute("data-page-size")) || undefined,
viewID: blockElement.getAttribute(Constants.CUSTOM_SY_AV_VIEW)
}, (response) => {
updateAssetCell({
protyle,
blockElement,
data: response.data as IAV,
cellElements: [cellElement],
addValue
});
updateAssetCell({
protyle,
blockElement,
cellElements: [cellElement],
addValue
});
}
});

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

@ -167,14 +167,13 @@ export const renderAVAttribute = (element: HTMLElement, id: string, protyle: IPr
avID: string
avName: string
}) => {
html += `<div data-av-id="${table.avID}" data-node-id="${id}" data-type="NodeAttributeView">
<div class="custom-attr__avheader block__logo popover__block" data-id='${JSON.stringify(table.blockIDs)}'>
let innerHTML = `<div class="custom-attr__avheader block__logo popover__block" data-id='${JSON.stringify(table.blockIDs)}'>
<div class="fn__flex-1"></div>
<svg class="block__logoicon"><use xlink:href="#iconDatabase"></use></svg><span>${table.avName || window.siyuan.languages.database}</span>
<div class="fn__flex-1"></div>
</div>`;
table.keyValues?.forEach(item => {
html += `<div class="block__icons av__row" data-id="${id}" data-col-id="${item.key.id}">
innerHTML += `<div class="block__icons av__row" data-id="${id}" data-col-id="${item.key.id}">
<div class="block__icon" draggable="true"><svg><use xlink:href="#iconDrag"></use></svg></div>
<div class="block__logo ariaLabel fn__pointer" data-type="editCol" data-position="parentW" aria-label="${escapeAttr(item.key.name)}">
${item.key.icon ? unicode2Emoji(item.key.icon, "block__logoicon", true) : `<svg class="block__logoicon"><use xlink:href="#${getColIconByType(item.key.type)}"></use></svg>`}
@ -187,11 +186,17 @@ class="fn__flex-1 fn__flex${["url", "text", "number", "email", "phone", "block"]
</div>
</div>`;
});
html += `<div class="fn__hr"></div>
innerHTML += `<div class="fn__hr"></div>
<div class="fn__flex">
<div class="fn__space"></div><div class="fn__space"></div>
<button data-type="addColumn" class="b3-button b3-button--outline"><svg><use xlink:href="#iconAdd"></use></svg>${window.siyuan.languages.addAttr}</button>
</div><div class="fn__hr--b"></div></div>`;
</div><div class="fn__hr--b"></div>`;
html += `<div data-av-id="${table.avID}" data-node-id="${id}" data-type="NodeAttributeView">${innerHTML}</div>`
if (element.innerHTML) {
// 防止 blockElement 找不到
element.querySelector(`div[data-node-id="${id}"]`).innerHTML = innerHTML;
}
});
if (element.innerHTML === "") {
let dragBlockElement: HTMLElement;
@ -355,8 +360,8 @@ class="fn__flex-1 fn__flex${["url", "text", "number", "email", "phone", "block"]
target = target.parentElement;
}
});
element.innerHTML = html;
}
element.innerHTML = html;
element.querySelectorAll(".b3-text-field--text").forEach((item: HTMLInputElement) => {
item.addEventListener("change", () => {
let value;

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

@ -137,7 +137,6 @@ export const openMenuPanel = (options: {
} else if (options.type === "asset") {
bindAssetEvent({
protyle: options.protyle,
data,
menuElement,
cellElements: options.cellElements,
blockElement: options.blockElement
@ -182,6 +181,11 @@ export const openMenuPanel = (options: {
return;
});
avPanelElement.addEventListener("drop", (event) => {
if (!window.siyuan.dragElement) {
event.preventDefault();
event.stopPropagation();
return;
}
window.siyuan.dragElement.style.opacity = "";
const sourceElement = window.siyuan.dragElement;
window.siyuan.dragElement = undefined;
@ -314,7 +318,6 @@ export const openMenuPanel = (options: {
});
updateAssetCell({
protyle: options.protyle,
data,
cellElements: options.cellElements,
replaceValue,
blockElement: options.blockElement
@ -436,6 +439,10 @@ export const openMenuPanel = (options: {
});
let dragoverElement: HTMLElement;
avPanelElement.addEventListener("dragover", (event: DragEvent) => {
if (event.dataTransfer.types.includes("Files")) {
event.preventDefault();
return;
}
const target = event.target as HTMLElement;
let targetElement = hasClosestByAttribute(target, "draggable", "true");
if (!targetElement) {
@ -1133,7 +1140,7 @@ export const openMenuPanel = (options: {
event.stopPropagation();
break;
} else if (type === "addAssetLink") {
addAssetLink(options.protyle, data, options.cellElements, target, options.blockElement);
addAssetLink(options.protyle, options.cellElements, target, options.blockElement);
event.preventDefault();
event.stopPropagation();
break;
@ -1161,7 +1168,6 @@ export const openMenuPanel = (options: {
}
updateAssetCell({
protyle: options.protyle,
data,
cellElements: options.cellElements,
addValue: [value],
blockElement: options.blockElement
@ -1197,7 +1203,7 @@ export const openMenuPanel = (options: {
event.stopPropagation();
break;
} else if (type === "editAssetItem") {
editAssetItem(options.protyle, data, options.cellElements, target.parentElement, options.blockElement);
editAssetItem(options.protyle, options.cellElements, target.parentElement, options.blockElement);
event.preventDefault();
event.stopPropagation();
break;

2
app/src/protyle/util/editorCommonEvent.ts
View file

@ -1058,7 +1058,7 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => {
for (let i = 0; i < event.dataTransfer.files.length; i++) {
files.push(event.dataTransfer.files[i].path);
}
dragUpload(files, protyle, cellElement, avElement.dataset.avId);
dragUpload(files, protyle, cellElement);
}
}
}

1
app/src/protyle/wysiwyg/index.ts
View file

@ -92,6 +92,7 @@ import {
import {openEmojiPanel, unicode2Emoji} from "../../emoji";
import {openLink} from "../../editor/openLink";
import {mathRender} from "../render/mathRender";
import {editAssetItem} from "../render/av/asset";
export class WYSIWYG {
public lastHTMLs: { [key: string]: string } = {};