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/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
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: { export const bindAssetEvent = (options: {
protyle: IProtyle, protyle: IProtyle,
data: IAV,
menuElement: HTMLElement, menuElement: HTMLElement,
cellElements: HTMLElement[], cellElements: HTMLElement[],
blockElement: Element blockElement: Element
@ -41,7 +40,6 @@ export const bindAssetEvent = (options: {
}); });
updateAssetCell({ updateAssetCell({
protyle: options.protyle, protyle: options.protyle,
data: options.data,
cellElements: options.cellElements, cellElements: options.cellElements,
addValue: value, addValue: value,
blockElement: options.blockElement blockElement: options.blockElement
@ -91,7 +89,6 @@ ${contentHTML}
export const updateAssetCell = (options: { export const updateAssetCell = (options: {
protyle: IProtyle, protyle: IProtyle,
data: IAV,
cellElements: HTMLElement[], cellElements: HTMLElement[],
replaceValue?: IAVCellAssetValue[], replaceValue?: IAVCellAssetValue[],
addValue?: IAVCellAssetValue[], addValue?: IAVCellAssetValue[],
@ -107,7 +104,10 @@ export const updateAssetCell = (options: {
if (!options.blockElement.contains(item)) { if (!options.blockElement.contains(item)) {
const rowElement = hasClosestByClassName(item, "av__row"); const rowElement = hasClosestByClassName(item, "av__row");
if (rowElement) { 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); const cellValue = genCellValueByElement(getTypeByCellElement(item) || item.dataset.type as TAVCol, item);
@ -134,12 +134,13 @@ export const updateAssetCell = (options: {
} else { } else {
cellValue.mAsset = mAssetValue; cellValue.mAsset = mAssetValue;
} }
const avID = options.blockElement.getAttribute("data-av-id")
cellDoOperations.push({ cellDoOperations.push({
action: "updateAttrViewCell", action: "updateAttrViewCell",
id: cellValue.id, id: cellValue.id,
keyID: colId, keyID: colId,
rowID, rowID,
avID: options.data.id, avID,
data: cellValue data: cellValue
}); });
cellUndoOperations.push({ cellUndoOperations.push({
@ -147,20 +148,9 @@ export const updateAssetCell = (options: {
id: cellValue.id, id: cellValue.id,
keyID: colId, keyID: colId,
rowID, rowID,
avID: options.data.id, avID,
data: oldValue 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")) { if (item.classList.contains("custom-attr__avvalue")) {
item.innerHTML = genAVValueHTML(cellValue); item.innerHTML = genAVValueHTML(cellValue);
} else { } else {
@ -173,7 +163,6 @@ export const updateAssetCell = (options: {
menuElement.innerHTML = getAssetHTML(options.cellElements); menuElement.innerHTML = getAssetHTML(options.cellElements);
bindAssetEvent({ bindAssetEvent({
protyle: options.protyle, protyle: options.protyle,
data: options.data,
menuElement, menuElement,
cellElements: options.cellElements, cellElements: options.cellElements,
blockElement: options.blockElement 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 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", () => {
@ -195,7 +184,6 @@ export const editAssetItem = (protyle: IProtyle, data: IAV, cellElements: HTMLEl
} }
updateAssetCell({ updateAssetCell({
protyle, protyle,
data,
cellElements, cellElements,
blockElement, blockElement,
updateValue: { updateValue: {
@ -236,14 +224,13 @@ ${window.siyuan.languages.title}
click() { click() {
updateAssetCell({ updateAssetCell({
protyle, protyle,
data,
cellElements, cellElements,
blockElement, blockElement,
removeIndex: parseInt(target.dataset.index) 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/")) { if (linkAddress?.startsWith("assets/")) {
window.siyuan.menus.menu.append(new MenuItem(exportAsset(linkAddress)).element); 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 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) {
@ -271,7 +258,6 @@ export const addAssetLink = (protyle: IProtyle, data: IAV, cellElements: HTMLEle
} }
updateAssetCell({ updateAssetCell({
protyle, protyle,
data,
cellElements, cellElements,
blockElement, blockElement,
addValue: [{ addValue: [{
@ -303,7 +289,7 @@ ${window.siyuan.languages.title}
menu.element.querySelector("textarea").focus(); 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); const msgId = showMessage(window.siyuan.languages.uploading, 0);
fetchPost("/api/asset/insertLocalAssets", { fetchPost("/api/asset/insertLocalAssets", {
assetPaths: files, assetPaths: files,
@ -331,18 +317,11 @@ export const dragUpload = (files: string[], protyle: IProtyle, cellElement: HTML
}); });
} }
}); });
fetchPost("/api/av/renderAttributeView", { updateAssetCell({
id: avID, protyle,
pageSize: parseInt(blockElement.getAttribute("data-page-size")) || undefined, blockElement,
viewID: blockElement.getAttribute(Constants.CUSTOM_SY_AV_VIEW) cellElements: [cellElement],
}, (response) => { addValue
updateAssetCell({
protyle,
blockElement,
data: response.data as IAV,
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 avID: string
avName: string avName: string
}) => { }) => {
html += `<div data-av-id="${table.avID}" data-node-id="${id}" data-type="NodeAttributeView"> let innerHTML = `<div class="custom-attr__avheader block__logo popover__block" data-id='${JSON.stringify(table.blockIDs)}'>
<div class="custom-attr__avheader block__logo popover__block" data-id='${JSON.stringify(table.blockIDs)}'>
<div class="fn__flex-1"></div> <div class="fn__flex-1"></div>
<svg class="block__logoicon"><use xlink:href="#iconDatabase"></use></svg><span>${table.avName || window.siyuan.languages.database}</span> <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 class="fn__flex-1"></div>
</div>`; </div>`;
table.keyValues?.forEach(item => { 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__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)}"> <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>`} ${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>
</div>`; </div>`;
}); });
html += `<div class="fn__hr"></div> innerHTML += `<div class="fn__hr"></div>
<div class="fn__flex"> <div class="fn__flex">
<div class="fn__space"></div><div class="fn__space"></div> <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> <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 === "") { if (element.innerHTML === "") {
let dragBlockElement: HTMLElement; let dragBlockElement: HTMLElement;
@ -355,8 +360,8 @@ class="fn__flex-1 fn__flex${["url", "text", "number", "email", "phone", "block"]
target = target.parentElement; target = target.parentElement;
} }
}); });
element.innerHTML = html;
} }
element.innerHTML = html;
element.querySelectorAll(".b3-text-field--text").forEach((item: HTMLInputElement) => { element.querySelectorAll(".b3-text-field--text").forEach((item: HTMLInputElement) => {
item.addEventListener("change", () => { item.addEventListener("change", () => {
let value; 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") { } else if (options.type === "asset") {
bindAssetEvent({ bindAssetEvent({
protyle: options.protyle, protyle: options.protyle,
data,
menuElement, menuElement,
cellElements: options.cellElements, cellElements: options.cellElements,
blockElement: options.blockElement blockElement: options.blockElement
@ -182,6 +181,11 @@ export const openMenuPanel = (options: {
return; return;
}); });
avPanelElement.addEventListener("drop", (event) => { avPanelElement.addEventListener("drop", (event) => {
if (!window.siyuan.dragElement) {
event.preventDefault();
event.stopPropagation();
return;
}
window.siyuan.dragElement.style.opacity = ""; window.siyuan.dragElement.style.opacity = "";
const sourceElement = window.siyuan.dragElement; const sourceElement = window.siyuan.dragElement;
window.siyuan.dragElement = undefined; window.siyuan.dragElement = undefined;
@ -314,7 +318,6 @@ export const openMenuPanel = (options: {
}); });
updateAssetCell({ updateAssetCell({
protyle: options.protyle, protyle: options.protyle,
data,
cellElements: options.cellElements, cellElements: options.cellElements,
replaceValue, replaceValue,
blockElement: options.blockElement blockElement: options.blockElement
@ -436,6 +439,10 @@ export const openMenuPanel = (options: {
}); });
let dragoverElement: HTMLElement; let dragoverElement: HTMLElement;
avPanelElement.addEventListener("dragover", (event: DragEvent) => { avPanelElement.addEventListener("dragover", (event: DragEvent) => {
if (event.dataTransfer.types.includes("Files")) {
event.preventDefault();
return;
}
const target = event.target as HTMLElement; const target = event.target as HTMLElement;
let targetElement = hasClosestByAttribute(target, "draggable", "true"); let targetElement = hasClosestByAttribute(target, "draggable", "true");
if (!targetElement) { if (!targetElement) {
@ -1133,7 +1140,7 @@ 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, options.blockElement); addAssetLink(options.protyle, options.cellElements, target, options.blockElement);
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
break; break;
@ -1161,7 +1168,6 @@ export const openMenuPanel = (options: {
} }
updateAssetCell({ updateAssetCell({
protyle: options.protyle, protyle: options.protyle,
data,
cellElements: options.cellElements, cellElements: options.cellElements,
addValue: [value], addValue: [value],
blockElement: options.blockElement blockElement: options.blockElement
@ -1197,7 +1203,7 @@ export const openMenuPanel = (options: {
event.stopPropagation(); event.stopPropagation();
break; break;
} else if (type === "editAssetItem") { } 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.preventDefault();
event.stopPropagation(); event.stopPropagation();
break; 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++) { for (let i = 0; i < event.dataTransfer.files.length; i++) {
files.push(event.dataTransfer.files[i].path); 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 {openEmojiPanel, unicode2Emoji} from "../../emoji";
import {openLink} from "../../editor/openLink"; import {openLink} from "../../editor/openLink";
import {mathRender} from "../render/mathRender"; import {mathRender} from "../render/mathRender";
import {editAssetItem} from "../render/av/asset";
export class WYSIWYG { export class WYSIWYG {
public lastHTMLs: { [key: string]: string } = {}; public lastHTMLs: { [key: string]: string } = {};