Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-12-21 17:10:12 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

✨ https://github.com/siyuan-note/siyuan/issues/8895 block attr

Browse source
This commit is contained in:
Vanessa 2023-09-24 17:53:28 +08:00
parent 17055347db
commit 435ad45cb5
14 changed files with 258 additions and 186 deletions
Download patch file Download diff file Expand all files Collapse all files

14
app/src/menus/commonMenuItem.ts
View file

@ -149,7 +149,7 @@ export const openFileWechatNotify = (protyle: IProtyle) => {
});
};
export const openFileAttr = (attrs: IObject, focusName = "bookmark") => {
export const openFileAttr = (attrs: IObject, focusName = "bookmark", protyle?: IProtyle) => {
let customHTML = "";
let notifyHTML = "";
let hasAV = false;
@ -187,7 +187,7 @@ export const openFileAttr = (attrs: IObject, focusName = "bookmark") => {
<span class="item__text">${window.siyuan.languages.builtIn}</span>
<span class="fn__flex-1"></span>
</div>
<div class="item item--full${hasAV ? "" : " fn__none"}" data-type="av">
<div class="item item--full${hasAV ? "" : " fn__none"}" data-type="NodeAttributeView">
<span class="fn__flex-1"></span>
<span class="item__text">${window.siyuan.languages.database}</span>
<span class="fn__flex-1"></span>
@ -225,7 +225,7 @@ export const openFileAttr = (attrs: IObject, focusName = "bookmark") => {
</label>
${notifyHTML}
</div>
<div data-type="av" class="fn__none custom-attr"></div>
<div data-type="NodeAttributeView" class="fn__none custom-attr" data-av-id="${attrs["custom-avs"]}" data-node-id="${attrs.id}"></div>
<div data-type="custom" class="fn__none custom-attr">
${customHTML}
<div class="b3-label">
@ -252,8 +252,8 @@ export const openFileAttr = (attrs: IObject, focusName = "bookmark") => {
target.classList.add("item--focus");
dialog.element.querySelectorAll(".custom-attr").forEach((item: HTMLElement) => {
if (item.dataset.type === target.dataset.type) {
if (item.dataset.type === "av" && item.innerHTML === "") {
renderAVAttribute(item, attrs.id);
if (item.dataset.type === "NodeAttributeView" && item.innerHTML === "") {
renderAVAttribute(item, attrs.id, protyle);
}
item.classList.remove("fn__none");
} else {
@ -349,13 +349,13 @@ export const openFileAttr = (attrs: IObject, focusName = "bookmark") => {
});
};
export const openAttr = (nodeElement: Element, focusName = "bookmark") => {
export const openAttr = (nodeElement: Element, focusName = "bookmark", protyle?: IProtyle) => {
if (nodeElement.getAttribute("data-type") === "NodeThematicBreak") {
return;
}
const id = nodeElement.getAttribute("data-node-id");
fetchPost("/api/attr/getBlockAttrs", {id}, (response) => {
openFileAttr(response.data, focusName);
openFileAttr(response.data, focusName, protyle);
});
};

2
app/src/protyle/breadcrumb/index.ts
View file

@ -88,7 +88,7 @@ export class Breadcrumb {
fetchPost("/api/block/getDocInfo", {
id: protyle.block.rootID
}, (response) => {
openFileAttr(response.data.ial);
openFileAttr(response.data.ial, "bookmark", protyle);
});
} else {
const targetRect = target.getBoundingClientRect();

4
app/src/protyle/gutter/index.ts
View file

@ -211,7 +211,7 @@ export class Gutter {
}
foldElement.classList.remove("protyle-wysiwyg--hl");
} else if (window.siyuan.shiftIsPressed && !protyle.disabled) {
openAttr(protyle.wysiwyg.element.querySelector(`[data-node-id="${id}"]`));
openAttr(protyle.wysiwyg.element.querySelector(`[data-node-id="${id}"]`), "bookmark", protyle);
} else {
this.renderMenu(protyle, buttonElement);
// https://ld246.com/article/1648433751993
@ -1478,7 +1478,7 @@ export class Gutter {
icon: "iconAttr",
accelerator: window.siyuan.config.keymap.editor.general.attr.custom + "/" + updateHotkeyTip("⇧Click"),
click() {
openAttr(nodeElement);
openAttr(nodeElement, "bookmark", protyle);
}
}).element);
}

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

@ -140,7 +140,7 @@ export class Title {
fetchPost("/api/block/getDocInfo", {
id: protyle.block.rootID
}, (response) => {
openFileAttr(response.data.ial);
openFileAttr(response.data.ial, "bookmark", protyle);
});
event.preventDefault();
event.stopPropagation();
@ -179,7 +179,7 @@ export class Title {
fetchPost("/api/block/getDocInfo", {
id: protyle.block.rootID
}, (response) => {
openFileAttr(response.data.ial);
openFileAttr(response.data.ial, "bookmark", protyle);
});
} else {
const iconRect = iconElement.getBoundingClientRect();

2
app/src/protyle/header/openTitleMenu.ts
View file

@ -92,7 +92,7 @@ export const openTitleMenu = (protyle: IProtyle, position: {
icon: "iconAttr",
accelerator: window.siyuan.config.keymap.editor.general.attr.custom + "/" + updateHotkeyTip("⇧Click"),
click() {
openFileAttr(response.data.ial);
openFileAttr(response.data.ial, "bookmark", protyle);
}
}).element);
window.siyuan.menus.menu.append(new MenuItem({

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

@ -10,6 +10,7 @@ import {MenuItem} from "../../../menus/Menu";
import {exportAsset} from "../../../menus/util";
import {setPosition} from "../../../util/setPosition";
import {previewImage} from "../../preview/image";
import {genAVValueHTML} from "./blockAttr";
export const bindAssetEvent = (options: {
protyle: IProtyle,
@ -104,14 +105,13 @@ export const updateAssetCell = (options: {
addUpdateValue?: IAVCellAssetValue[],
removeContent?: string
}) => {
let cellIndex = 0;
let cellIndex: number;
Array.from(options.cellElements[0].parentElement.querySelectorAll(".av__cell")).find((item: HTMLElement, index) => {
if (item.dataset.id === options.cellElements[0].dataset.id) {
cellIndex = index;
return true;
}
});
const colId = options.cellElements[0].dataset.colId;
const cellDoOperations: IOperation[] = [];
const cellUndoOperations: IOperation[] = [];
@ -121,12 +121,20 @@ export const updateAssetCell = (options: {
const rowID = item.parentElement.dataset.id;
options.data.view.rows.find(row => {
if (row.id === rowID) {
if (typeof cellIndex === "number") {
cellData = row.cells[cellIndex];
// 为空时 cellId 每次请求都不一致
cellData.id = item.dataset.id;
if (!cellData.value || !cellData.value.mAsset) {
cellData.value = {mAsset: []} as IAVCellValue;
}
} else {
cellData = row.cells.find(cellItem => {
if (cellItem.id === item.dataset.id) {
return true;
}
});
}
return true;
}
});
@ -188,14 +196,18 @@ export const updateAssetCell = (options: {
mAsset: oldValue
}
});
if (item.classList.contains("custom-attr__avvalue")) {
item.innerHTML = genAVValueHTML(cellData.value)
} else {
updateAttrViewCellAnimation(item);
}
});
transaction(options.protyle, cellDoOperations, cellUndoOperations);
const menuElement = document.querySelector(".av__panel > .b3-menu") as HTMLElement;
if (menuElement) {
menuElement.innerHTML = getAssetHTML(options.data.view, 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.cellElements[0].classList.contains("custom-attr__avvalue") ? options.cellElements[0] : options.protyle.wysiwyg.element.querySelector(`.av__cell[data-id="${options.cellElements[0].dataset.id}"]`)).getBoundingClientRect();
setTimeout(() => {
setPosition(menuElement, cellRect.left, cellRect.bottom, cellRect.height);
}, Constants.TIMEOUT_LOAD); // 等待图片加载
@ -251,7 +263,7 @@ export const editAssetItem = (protyle: IProtyle, data: IAV, cellElements: HTMLEl
});
}
});
openMenu(protyle.app, linkAddress, false, true);
openMenu(protyle ? protyle.app : window.siyuan.ws.app, linkAddress, false, true);
/// #if !BROWSER
if (linkAddress?.startsWith("assets/")) {
window.siyuan.menus.menu.append(new MenuItem(exportAsset(linkAddress)).element);
@ -302,7 +314,7 @@ export const addAssetLink = (protyle: IProtyle, data: IAV, cellElements: HTMLEle
const rect = target.getBoundingClientRect();
menu.open({
x: rect.right,
y: rect.bottom,
y: rect.top,
w: rect.width,
h: rect.height,
});

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

@ -5,8 +5,9 @@ import {hasClosestByAttribute} from "../../util/hasClosest";
import {Menu} from "../../../plugin/Menu";
import {Constants} from "../../../constants";
import * as dayjs from "dayjs";
import {popTextCell} from "./cell";
const genAVValueHTML = (value: IAVCellValue) => {
export const genAVValueHTML = (value: IAVCellValue) => {
let html = "";
switch (value.type) {
case "text":
@ -57,50 +58,13 @@ const genAVValueHTML = (value: IAVCellValue) => {
return html;
};
export const renderAVAttribute = (element: HTMLElement, id: string) => {
fetchPost("/api/av/getAttributeViewKeys", {id}, (response) => {
let html = "";
response.data.forEach((table: {
keyValues: {
key: {
type: TAVCol,
name: string,
options?: { name: string, color: string }[]
},
values: { keyID: string, id: string, blockID: string, type?: TAVCol & IAVCellValue } []
}[],
avID: string
avName: string
}) => {
html += `<div class="block__logo custom-attr__avheader">
<svg><use xlink:href="#iconDatabase"></use></svg>
<span>${table.avName || window.siyuan.languages.database}</span>
</div>`;
table.keyValues?.forEach(item => {
html += `<div class="block__icons">
<div class="block__logo">
<svg><use xlink:href="#${getColIconByType(item.key.type)}"></use></svg>
<span>${item.key.name}</span>
</div>
<div data-av-id="${table.avID}" data-key-id="${item.values[0].keyID}" data-block-id="${item.values[0].blockID}" data-id="${item.values[0].id}" data-type="${item.values[0].type}"
data-options="${item.key?.options ? escapeAttr(JSON.stringify(item.key.options)) : "[]"}"
class="fn__flex-1 fn__flex${["url", "text", "number", "email", "phone"].includes(item.values[0].type) ? "" : " custom-attr__avvalue"}">
${genAVValueHTML(item.values[0])}
</div>
</div>`;
});
});
element.innerHTML = html;
element.addEventListener("click", (event) => {
const target = event.target as HTMLElement;
const dateElement = hasClosestByAttribute(target, "data-type", "date");
if (dateElement) {
const popDateMenu = (dateElement: HTMLElement) => {
const dateMenu = new Menu("custom-attr-av-date", () => {
const textElements = window.siyuan.menus.menu.element.querySelectorAll(".b3-text-field") as NodeListOf<HTMLInputElement>;
const hasEndDate = (window.siyuan.menus.menu.element.querySelector(".b3-switch") as HTMLInputElement).checked;
fetchPost("/api/av/setAttributeViewBlockAttr", {
avID: dateElement.dataset.avId,
keyID: dateElement.dataset.keyId,
keyID: dateElement.dataset.colId,
rowID: dateElement.dataset.blockId,
cellID: dateElement.dataset.id,
value: {
@ -170,12 +134,9 @@ class="fn__flex-1 fn__flex${["url", "text", "number", "email", "phone"].includes
x: datetRect.left,
y: datetRect.bottom
});
event.stopPropagation();
event.preventDefault();
return;
}
const mSelectElement = hasClosestByAttribute(target, "data-type", "select") || hasClosestByAttribute(target, "data-type", "mSelect");
if (mSelectElement) {
const popSelectMenu = (mSelectElement: HTMLElement) => {
const mSelectMenu = new Menu("custom-attr-av-select", () => {
const mSelect: { content: string, color: string }[] = [];
let mSelectHTML = "";
@ -191,7 +152,7 @@ class="fn__flex-1 fn__flex${["url", "text", "number", "email", "phone"].includes
});
fetchPost("/api/av/setAttributeViewBlockAttr", {
avID: mSelectElement.dataset.avId,
keyID: mSelectElement.dataset.keyId,
keyID: mSelectElement.dataset.colId,
rowID: mSelectElement.dataset.blockId,
cellID: mSelectElement.dataset.id,
value: {
@ -244,6 +205,61 @@ class="fn__flex-1 fn__flex${["url", "text", "number", "email", "phone"].includes
x: mSelecttRect.left,
y: mSelecttRect.bottom
});
}
export const renderAVAttribute = (element: HTMLElement, id: string, protyle?: IProtyle) => {
fetchPost("/api/av/getAttributeViewKeys", {id}, (response) => {
let html = "";
response.data.forEach((table: {
keyValues: {
key: {
type: TAVCol,
name: string,
options?: { name: string, color: string }[]
},
values: { keyID: string, id: string, blockID: string, type?: TAVCol & IAVCellValue } []
}[],
avID: string
avName: string
}) => {
html += `<div class="block__logo custom-attr__avheader">
<svg><use xlink:href="#iconDatabase"></use></svg>
<span>${table.avName || window.siyuan.languages.database}</span>
</div>`;
table.keyValues?.forEach(item => {
html += `<div class="block__icons" data-id="${id}">
<div class="block__logo">
<svg><use xlink:href="#${getColIconByType(item.key.type)}"></use></svg>
<span>${item.key.name}</span>
</div>
<div data-av-id="${table.avID}" data-col-id="${item.values[0].keyID}" data-block-id="${item.values[0].blockID}" data-id="${item.values[0].id}" data-type="${item.values[0].type}"
data-options="${item.key?.options ? escapeAttr(JSON.stringify(item.key.options)) : "[]"}"
class="fn__flex-1 fn__flex${["url", "text", "number", "email", "phone"].includes(item.values[0].type) ? "" : " custom-attr__avvalue"}">
${genAVValueHTML(item.values[0])}
</div>
</div>`;
});
});
element.innerHTML = html;
element.addEventListener("click", (event) => {
const target = event.target as HTMLElement;
const dateElement = hasClosestByAttribute(target, "data-type", "date");
if (dateElement) {
popDateMenu(dateElement);
event.stopPropagation();
event.preventDefault();
return;
}
const mSelectElement = hasClosestByAttribute(target, "data-type", "select") || hasClosestByAttribute(target, "data-type", "mSelect");
if (mSelectElement) {
popSelectMenu(mSelectElement);
event.stopPropagation();
event.preventDefault();
return;
}
const mAssetElement = hasClosestByAttribute(target, "data-type", "mAsset");
if (mAssetElement) {
popTextCell(protyle, [mAssetElement], "mAsset");
event.stopPropagation();
event.preventDefault();
return;
@ -267,7 +283,7 @@ class="fn__flex-1 fn__flex${["url", "text", "number", "email", "phone"].includes
}
fetchPost("/api/av/setAttributeViewBlockAttr", {
avID: item.parentElement.dataset.avId,
keyID: item.parentElement.dataset.keyId,
keyID: item.parentElement.dataset.colId,
rowID: item.parentElement.dataset.blockId,
cellID: item.parentElement.dataset.id,
value

6
app/src/protyle/render/av/cell.ts
View file

@ -339,8 +339,10 @@ export const openCalcMenu = (protyle: IProtyle, calcElement: HTMLElement) => {
menu.open({x: calcRect.left, y: calcRect.bottom, h: calcRect.height});
};
export const popTextCell = (protyle: IProtyle, cellElements: HTMLElement[]) => {
const type = cellElements[0].parentElement.parentElement.firstElementChild.querySelector(`[data-col-id="${cellElements[0].getAttribute("data-col-id")}"]`).getAttribute("data-dtype") as TAVCol;
export const popTextCell = (protyle: IProtyle, cellElements: HTMLElement[], type?: TAVCol) => {
if (!type) {
type = cellElements[0].parentElement.parentElement.firstElementChild.querySelector(`[data-col-id="${cellElements[0].getAttribute("data-col-id")}"]`).getAttribute("data-dtype") as TAVCol;
}
if (type === "block") {
return;
}

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

@ -58,7 +58,7 @@ export const openMenuPanel = (options: {
</div>`);
avPanelElement = document.querySelector(".av__panel");
const menuElement = avPanelElement.lastElementChild as HTMLElement;
const tabRect = options.blockElement.querySelector(".layout-tab-bar").getBoundingClientRect();
const tabRect = options.blockElement.querySelector(".layout-tab-bar")?.getBoundingClientRect();
if (["select", "date", "asset"].includes(options.type)) {
const cellRect = options.cellElements[options.cellElements.length - 1].getBoundingClientRect();
if (options.type === "select") {
@ -94,7 +94,12 @@ export const openMenuPanel = (options: {
window.siyuan.dragElement.style.opacity = "";
const sourceElement = window.siyuan.dragElement;
window.siyuan.dragElement = undefined;
if (options.protyle.disabled) {
if (options.protyle && options.protyle.disabled) {
event.preventDefault();
event.stopPropagation();
return;
}
if (!options.protyle && window.siyuan.config.readonly) {
event.preventDefault();
event.stopPropagation();
return;

25
app/src/protyle/upload/index.ts
View file

@ -152,6 +152,31 @@ export const uploadLocalFiles = (files: string[], protyle: IProtyle, isUpload: b
};
export const uploadFiles = (protyle: IProtyle, files: FileList | DataTransferItemList | File[], element?: HTMLInputElement, successCB?: (res: string) => void) => {
// 文档书中点开属性->数据库后的变更操作
if (!protyle) {
const formData = new FormData();
for (let i = 0, iMax = files.length; i < iMax; i++) {
formData.append("file[]", files[i] as File);
}
const xhr = new XMLHttpRequest();
xhr.open("POST", Constants.UPLOAD_ADDRESS);
xhr.onreadystatechange = () => {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
successCB(xhr.responseText);
} else if (xhr.status === 0) {
showMessage(window.siyuan.languages.fileTypeError);
} else {
showMessage(xhr.responseText);
}
if (element) {
element.value = "";
}
}
};
xhr.send(formData);
return;
}
// FileList | DataTransferItemList | File[] => File[]
let fileList = [];
for (let i = 0; i < files.length; i++) {

16
app/src/protyle/wysiwyg/commonClick.ts
View file

@ -17,9 +17,9 @@ export const commonClick = (event: MouseEvent & {
/// #endif
} else {
if (data) {
openFileAttr(data, "bookmark");
openFileAttr(data, "bookmark", protyle);
} else {
openAttr(attrBookmarkElement.parentElement.parentElement, "bookmark");
openAttr(attrBookmarkElement.parentElement.parentElement, "bookmark", protyle);
}
}
event.stopPropagation();
@ -34,9 +34,9 @@ export const commonClick = (event: MouseEvent & {
/// #endif
} else {
if (data) {
openFileAttr(data, "name");
openFileAttr(data, "name", protyle);
} else {
openAttr(attrNameElement.parentElement.parentElement, "name");
openAttr(attrNameElement.parentElement.parentElement, "name", protyle);
}
}
event.stopPropagation();
@ -51,9 +51,9 @@ export const commonClick = (event: MouseEvent & {
/// #endif
} else {
if (data) {
openFileAttr(data, "alias");
openFileAttr(data, "alias", protyle);
} else {
openAttr(attrAliasElement.parentElement.parentElement, "alias");
openAttr(attrAliasElement.parentElement.parentElement, "alias", protyle);
}
}
event.stopPropagation();
@ -68,9 +68,9 @@ export const commonClick = (event: MouseEvent & {
/// #endif
} else {
if (data) {
openFileAttr(data, "memo");
openFileAttr(data, "memo", protyle);
} else {
openAttr(attrMemoElement.parentElement.parentElement, "memo");
openAttr(attrMemoElement.parentElement.parentElement, "memo", protyle);
}
}
event.stopPropagation();

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

@ -1978,7 +1978,7 @@ export class WYSIWYG {
}
hideElements(["gutter"], protyle);
} else if (event.shiftKey && !protyle.disabled) {
openAttr(actionElement.parentElement);
openAttr(actionElement.parentElement, "bookmark", protyle);
} else if (ctrlIsPressed) {
zoomOut({protyle, id: actionId});
} else {

2
app/src/protyle/wysiwyg/keydown.ts
View file

@ -1056,7 +1056,7 @@ export const keydown = (protyle: IProtyle, editorElement: HTMLElement) => {
} else {
actionElement = topElement;
}
openAttr(actionElement);
openAttr(actionElement, "bookmark", protyle);
} else {
const oldHTML = topElement.outerHTML;
const name = Lute.EscapeHTMLStr(selectText);

12
app/src/protyle/wysiwyg/transaction.ts
View file

@ -945,6 +945,18 @@ const updateRef = (protyle: IProtyle, id: string, index = 0) => {
let transactionsTimeout: number;
export const transaction = (protyle: IProtyle, doOperations: IOperation[], undoOperations?: IOperation[]) => {
if (!protyle) {
// 文档书中点开属性->数据库后的变更操作
fetchPost("/api/transactions", {
session: Constants.SIYUAN_APPID,
app: Constants.SIYUAN_APPID,
transactions: [{
doOperations
}]
});
return;
}
const lastTransaction = window.siyuan.transactions[window.siyuan.transactions.length - 1];
let needDebounce = false;
const time = new Date().getTime();