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

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

Browse source
This commit is contained in:
Vanessa 2025-11-14 11:33:53 +08:00
parent 88be806dd7
commit b73f0cf676
4 changed files with 80 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

15
app/src/protyle/render/av/col.ts
View file

@ -402,12 +402,14 @@ export const bindEditEvent = (options: {
id: colId, id: colId,
avID, avID,
data: wrapElement.checked, data: wrapElement.checked,
blockID: options.blockID blockID: options.blockID,
viewID: options.data.viewID,
}], [{ }], [{
action: "setAttrViewColWrap", action: "setAttrViewColWrap",
id: colId, id: colId,
avID, avID,
data: !wrapElement.checked, data: !wrapElement.checked,
viewID: options.data.viewID,
blockID: options.blockID blockID: options.blockID
}]); }]);
colData.wrap = wrapElement.checked; colData.wrap = wrapElement.checked;
@ -693,6 +695,7 @@ export const showColMenu = (protyle: IProtyle, blockElement: Element, cellElemen
const colId = cellElement.getAttribute("data-col-id"); const colId = cellElement.getAttribute("data-col-id");
const avID = blockElement.getAttribute("data-av-id"); const avID = blockElement.getAttribute("data-av-id");
const blockID = blockElement.getAttribute("data-node-id"); const blockID = blockElement.getAttribute("data-node-id");
const viewID = blockElement.getAttribute(Constants.CUSTOM_SY_AV_VIEW);
const oldValue = cellElement.querySelector(".av__celltext").textContent.trim(); const oldValue = cellElement.querySelector(".av__celltext").textContent.trim();
const oldDesc = cellElement.dataset.desc; const oldDesc = cellElement.dataset.desc;
const menu = new Menu(Constants.MENU_AV_HEADER_CELL, () => { const menu = new Menu(Constants.MENU_AV_HEADER_CELL, () => {
@ -975,7 +978,7 @@ export const showColMenu = (protyle: IProtyle, blockElement: Element, cellElemen
action: "syncAttrViewTableColWidth", action: "syncAttrViewTableColWidth",
keyID: colId, keyID: colId,
avID, avID,
id: blockElement.getAttribute(Constants.CUSTOM_SY_AV_VIEW), id: viewID,
}]); }]);
} }
}); });
@ -992,13 +995,15 @@ export const showColMenu = (protyle: IProtyle, blockElement: Element, cellElemen
id: colId, id: colId,
avID, avID,
data: wrapElement.checked, data: wrapElement.checked,
blockID blockID,
viewID
}], [{ }], [{
action: "setAttrViewColWrap", action: "setAttrViewColWrap",
id: colId, id: colId,
avID, avID,
data: !wrapElement.checked, data: !wrapElement.checked,
blockID blockID,
viewID
}]); }]);
menu.close(); menu.close();
}); });
@ -1051,7 +1056,7 @@ export const showColMenu = (protyle: IProtyle, blockElement: Element, cellElemen
}, (response) => { }, (response) => {
duplicateCol({ duplicateCol({
blockElement, blockElement,
viewID: blockElement.getAttribute(Constants.CUSTOM_SY_AV_VIEW), viewID,
protyle, protyle,
colId, colId,
data: response.data data: response.data

27
app/src/protyle/render/av/gallery/util.ts
View file

@ -4,6 +4,7 @@ import {hasClosestByClassName} from "../../../util/hasClosest";
import {unicode2Emoji} from "../../../../emoji"; import {unicode2Emoji} from "../../../../emoji";
import {getColIconByType} from "../col"; import {getColIconByType} from "../col";
import {avContextmenu} from "../action"; import {avContextmenu} from "../action";
import {Constants} from "../../../../constants";
export const setGalleryCover = (options: { export const setGalleryCover = (options: {
view: IAVGallery view: IAVGallery
@ -128,6 +129,7 @@ export const setGallerySize = (options: {
const menu = new Menu(); const menu = new Menu();
const avID = options.nodeElement.getAttribute("data-av-id"); const avID = options.nodeElement.getAttribute("data-av-id");
const blockID = options.nodeElement.getAttribute("data-node-id"); const blockID = options.nodeElement.getAttribute("data-node-id");
const viewID = options.nodeElement.getAttribute(Constants.CUSTOM_SY_AV_VIEW);
const targetNameElement = options.target.querySelector(".b3-menu__accelerator"); const targetNameElement = options.target.querySelector(".b3-menu__accelerator");
menu.addItem({ menu.addItem({
iconHTML: "", iconHTML: "",
@ -138,12 +140,14 @@ export const setGallerySize = (options: {
action: "setAttrViewCardSize", action: "setAttrViewCardSize",
avID, avID,
blockID, blockID,
data: 0 data: 0,
viewID
}], [{ }], [{
action: "setAttrViewCardSize", action: "setAttrViewCardSize",
avID, avID,
blockID, blockID,
data: options.view.cardSize data: options.view.cardSize,
viewID
}]); }]);
options.view.cardSize = 0; options.view.cardSize = 0;
targetNameElement.textContent = window.siyuan.languages.small; targetNameElement.textContent = window.siyuan.languages.small;
@ -158,12 +162,14 @@ export const setGallerySize = (options: {
action: "setAttrViewCardSize", action: "setAttrViewCardSize",
avID, avID,
blockID, blockID,
data: 1 data: 1,
viewID
}], [{ }], [{
action: "setAttrViewCardSize", action: "setAttrViewCardSize",
avID, avID,
blockID, blockID,
data: options.view.cardSize data: options.view.cardSize,
viewID
}]); }]);
options.view.cardSize = 1; options.view.cardSize = 1;
targetNameElement.textContent = window.siyuan.languages.medium; targetNameElement.textContent = window.siyuan.languages.medium;
@ -178,12 +184,14 @@ export const setGallerySize = (options: {
action: "setAttrViewCardSize", action: "setAttrViewCardSize",
avID, avID,
blockID, blockID,
data: 2 data: 2,
viewID
}], [{ }], [{
action: "setAttrViewCardSize", action: "setAttrViewCardSize",
avID, avID,
blockID, blockID,
data: options.view.cardSize data: options.view.cardSize,
viewID
}]); }]);
options.view.cardSize = 2; options.view.cardSize = 2;
targetNameElement.textContent = window.siyuan.languages.large; targetNameElement.textContent = window.siyuan.languages.large;
@ -222,6 +230,7 @@ export const setGalleryRatio = (options: {
const menu = new Menu(); const menu = new Menu();
const avID = options.nodeElement.getAttribute("data-av-id"); const avID = options.nodeElement.getAttribute("data-av-id");
const blockID = options.nodeElement.getAttribute("data-node-id"); const blockID = options.nodeElement.getAttribute("data-node-id");
const viewID = options.nodeElement.getAttribute(Constants.CUSTOM_SY_AV_VIEW);
const targetNameElement = options.target.querySelector(".b3-menu__accelerator"); const targetNameElement = options.target.querySelector(".b3-menu__accelerator");
[0, 1, 2, 3, 4, 5, 6].forEach(ratio => { [0, 1, 2, 3, 4, 5, 6].forEach(ratio => {
menu.addItem({ menu.addItem({
@ -233,12 +242,14 @@ export const setGalleryRatio = (options: {
action: "setAttrViewCardAspectRatio", action: "setAttrViewCardAspectRatio",
avID, avID,
blockID, blockID,
data: ratio data: ratio,
viewID
}], [{ }], [{
action: "setAttrViewCardAspectRatio", action: "setAttrViewCardAspectRatio",
avID, avID,
blockID, blockID,
data: options.view.cardAspectRatio data: options.view.cardAspectRatio,
viewID
}]); }]);
options.view.cardAspectRatio = ratio; options.view.cardAspectRatio = ratio;
targetNameElement.textContent = getCardAspectRatio(ratio); targetNameElement.textContent = getCardAspectRatio(ratio);

45
app/src/protyle/render/av/layout.ts
View file

@ -118,57 +118,60 @@ export const bindLayoutEvent = (options: {
menuElement: HTMLElement menuElement: HTMLElement
blockElement: Element blockElement: Element
}) => { }) => {
const avID = options.blockElement.getAttribute("data-av-id");
const blockID = options.blockElement.getAttribute("data-node-id");
const viewID = options.blockElement.getAttribute(Constants.CUSTOM_SY_AV_VIEW);
const toggleTitleElement = options.menuElement.querySelector('.b3-switch[data-type="toggle-view-title"]') as HTMLInputElement; const toggleTitleElement = options.menuElement.querySelector('.b3-switch[data-type="toggle-view-title"]') as HTMLInputElement;
toggleTitleElement.addEventListener("change", () => { toggleTitleElement.addEventListener("change", () => {
const avID = options.blockElement.getAttribute("data-av-id");
const blockID = options.blockElement.getAttribute("data-node-id");
const checked = toggleTitleElement.checked; const checked = toggleTitleElement.checked;
transaction(options.protyle, [{ transaction(options.protyle, [{
action: "hideAttrViewName", action: "hideAttrViewName",
avID, avID,
blockID, blockID,
data: !checked data: !checked,
viewID
}], [{ }], [{
action: "hideAttrViewName", action: "hideAttrViewName",
avID, avID,
blockID, blockID,
data: checked data: checked,
viewID
}]); }]);
options.data.view.hideAttrViewName = !checked; options.data.view.hideAttrViewName = !checked;
}); });
const toggleIconElement = options.menuElement.querySelector('.b3-switch[data-type="toggle-entries-icons"]') as HTMLInputElement; const toggleIconElement = options.menuElement.querySelector('.b3-switch[data-type="toggle-entries-icons"]') as HTMLInputElement;
toggleIconElement.addEventListener("change", () => { toggleIconElement.addEventListener("change", () => {
const avID = options.blockElement.getAttribute("data-av-id");
const blockID = options.blockElement.getAttribute("data-node-id");
const checked = toggleIconElement.checked; const checked = toggleIconElement.checked;
transaction(options.protyle, [{ transaction(options.protyle, [{
action: "setAttrViewShowIcon", action: "setAttrViewShowIcon",
avID, avID,
blockID, blockID,
data: checked data: checked,
viewID
}], [{ }], [{
action: "setAttrViewShowIcon", action: "setAttrViewShowIcon",
avID, avID,
blockID, blockID,
data: !checked data: !checked,
viewID
}]); }]);
options.data.view.showIcon = checked; options.data.view.showIcon = checked;
}); });
const toggleWrapElement = options.menuElement.querySelector('.b3-switch[data-type="toggle-entries-wrap"]') as HTMLInputElement; const toggleWrapElement = options.menuElement.querySelector('.b3-switch[data-type="toggle-entries-wrap"]') as HTMLInputElement;
toggleWrapElement.addEventListener("change", () => { toggleWrapElement.addEventListener("change", () => {
const avID = options.blockElement.getAttribute("data-av-id");
const blockID = options.blockElement.getAttribute("data-node-id");
const checked = toggleWrapElement.checked; const checked = toggleWrapElement.checked;
transaction(options.protyle, [{ transaction(options.protyle, [{
action: "setAttrViewWrapField", action: "setAttrViewWrapField",
avID, avID,
blockID, blockID,
data: checked data: checked,
viewID
}], [{ }], [{
action: "setAttrViewWrapField", action: "setAttrViewWrapField",
avID, avID,
blockID, blockID,
data: !checked data: !checked,
viewID
}]); }]);
getFieldsByData(options.data).forEach(item => { getFieldsByData(options.data).forEach(item => {
item.wrap = checked; item.wrap = checked;
@ -180,26 +183,24 @@ export const bindLayoutEvent = (options: {
} }
const toggleFitElement = options.menuElement.querySelector('.b3-switch[data-type="toggle-gallery-fit"]') as HTMLInputElement; const toggleFitElement = options.menuElement.querySelector('.b3-switch[data-type="toggle-gallery-fit"]') as HTMLInputElement;
toggleFitElement.addEventListener("change", () => { toggleFitElement.addEventListener("change", () => {
const avID = options.blockElement.getAttribute("data-av-id");
const blockID = options.blockElement.getAttribute("data-node-id");
const checked = toggleFitElement.checked; const checked = toggleFitElement.checked;
transaction(options.protyle, [{ transaction(options.protyle, [{
action: "setAttrViewFitImage", action: "setAttrViewFitImage",
avID, avID,
blockID, blockID,
data: checked data: checked,
viewID
}], [{ }], [{
action: "setAttrViewFitImage", action: "setAttrViewFitImage",
avID, avID,
blockID, blockID,
data: !checked data: !checked,
viewID
}]); }]);
(options.data.view as IAVGallery).fitImage = checked; (options.data.view as IAVGallery).fitImage = checked;
}); });
const toggleNameElement = options.menuElement.querySelector('.b3-switch[data-type="toggle-gallery-name"]') as HTMLInputElement; const toggleNameElement = options.menuElement.querySelector('.b3-switch[data-type="toggle-gallery-name"]') as HTMLInputElement;
toggleNameElement.addEventListener("change", () => { toggleNameElement.addEventListener("change", () => {
const avID = options.blockElement.getAttribute("data-av-id");
const blockID = options.blockElement.getAttribute("data-node-id");
const checked = toggleNameElement.checked; const checked = toggleNameElement.checked;
transaction(options.protyle, [{ transaction(options.protyle, [{
action: "setAttrViewDisplayFieldName", action: "setAttrViewDisplayFieldName",
@ -219,19 +220,19 @@ export const bindLayoutEvent = (options: {
} }
const toggleBgElement = options.menuElement.querySelector('.b3-switch[data-type="toggle-kanban-bg"]') as HTMLInputElement; const toggleBgElement = options.menuElement.querySelector('.b3-switch[data-type="toggle-kanban-bg"]') as HTMLInputElement;
toggleBgElement.addEventListener("change", () => { toggleBgElement.addEventListener("change", () => {
const avID = options.blockElement.getAttribute("data-av-id");
const blockID = options.blockElement.getAttribute("data-node-id");
const checked = toggleBgElement.checked; const checked = toggleBgElement.checked;
transaction(options.protyle, [{ transaction(options.protyle, [{
action: "setAttrViewFillColBackgroundColor", action: "setAttrViewFillColBackgroundColor",
avID, avID,
blockID, blockID,
data: checked data: checked,
viewID
}], [{ }], [{
action: "setAttrViewFillColBackgroundColor", action: "setAttrViewFillColBackgroundColor",
avID, avID,
blockID, blockID,
data: !checked data: !checked,
viewID
}]); }]);
(options.data.view as IAVKanban).fillColBackgroundColor = checked; (options.data.view as IAVKanban).fillColBackgroundColor = checked;
}); });

31
app/src/protyle/render/av/render.ts
View file

@ -649,6 +649,9 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => {
} }
if (operation.action === "setAttrViewCardSize") { if (operation.action === "setAttrViewCardSize") {
Array.from(protyle.wysiwyg.element.querySelectorAll(`.av[data-av-id="${operation.avID}"]`)).forEach((item: HTMLElement) => { Array.from(protyle.wysiwyg.element.querySelectorAll(`.av[data-av-id="${operation.avID}"]`)).forEach((item: HTMLElement) => {
if (item.getAttribute(Constants.CUSTOM_SY_AV_VIEW) !== operation.viewID) {
return;
}
if (item.getAttribute("data-av-type") === "kanban") { if (item.getAttribute("data-av-type") === "kanban") {
item.querySelectorAll(".av__kanban-group").forEach(galleryItem => { item.querySelectorAll(".av__kanban-group").forEach(galleryItem => {
galleryItem.classList.remove("av__kanban-group--small", "av__kanban-group--big"); galleryItem.classList.remove("av__kanban-group--small", "av__kanban-group--big");
@ -673,6 +676,9 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => {
} }
if (operation.action === "setAttrViewCardAspectRatio") { if (operation.action === "setAttrViewCardAspectRatio") {
Array.from(protyle.wysiwyg.element.querySelectorAll(`.av[data-av-id="${operation.avID}"]`)).forEach((item: HTMLElement) => { Array.from(protyle.wysiwyg.element.querySelectorAll(`.av[data-av-id="${operation.avID}"]`)).forEach((item: HTMLElement) => {
if (item.getAttribute(Constants.CUSTOM_SY_AV_VIEW) !== operation.viewID) {
return;
}
item.querySelectorAll(".av__gallery-cover").forEach(coverItem => { item.querySelectorAll(".av__gallery-cover").forEach(coverItem => {
coverItem.className = "av__gallery-cover av__gallery-cover--" + operation.data; coverItem.className = "av__gallery-cover av__gallery-cover--" + operation.data;
}); });
@ -681,6 +687,9 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => {
} }
if (operation.action === "hideAttrViewName") { if (operation.action === "hideAttrViewName") {
Array.from(protyle.wysiwyg.element.querySelectorAll(`.av[data-av-id="${operation.avID}"]`)).forEach((item: HTMLElement) => { Array.from(protyle.wysiwyg.element.querySelectorAll(`.av[data-av-id="${operation.avID}"]`)).forEach((item: HTMLElement) => {
if (item.getAttribute(Constants.CUSTOM_SY_AV_VIEW) !== operation.viewID) {
return;
}
const titleElement = item.querySelector(".av__title"); const titleElement = item.querySelector(".av__title");
if (titleElement) { if (titleElement) {
if (!operation.data) { if (!operation.data) {
@ -704,6 +713,9 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => {
} }
if (operation.action === "setAttrViewWrapField") { if (operation.action === "setAttrViewWrapField") {
Array.from(protyle.wysiwyg.element.querySelectorAll(`.av[data-av-id="${operation.avID}"]`)).forEach((item: HTMLElement) => { Array.from(protyle.wysiwyg.element.querySelectorAll(`.av[data-av-id="${operation.avID}"]`)).forEach((item: HTMLElement) => {
if (item.getAttribute(Constants.CUSTOM_SY_AV_VIEW) !== operation.viewID) {
return;
}
item.querySelectorAll(".av__cell").forEach(fieldItem => { item.querySelectorAll(".av__cell").forEach(fieldItem => {
fieldItem.setAttribute("data-wrap", operation.data.toString()); fieldItem.setAttribute("data-wrap", operation.data.toString());
}); });
@ -712,6 +724,9 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => {
} }
if (operation.action === "setAttrViewFillColBackgroundColor") { if (operation.action === "setAttrViewFillColBackgroundColor") {
Array.from(protyle.wysiwyg.element.querySelectorAll(`.av[data-av-id="${operation.avID}"]`)).forEach((avItem: HTMLElement) => { Array.from(protyle.wysiwyg.element.querySelectorAll(`.av[data-av-id="${operation.avID}"]`)).forEach((avItem: HTMLElement) => {
if (avItem.getAttribute(Constants.CUSTOM_SY_AV_VIEW) !== operation.viewID) {
return;
}
avItem.querySelectorAll(".av__kanban-group").forEach(item => { avItem.querySelectorAll(".av__kanban-group").forEach(item => {
if (!operation.data) { if (!operation.data) {
item.removeAttribute("style"); item.removeAttribute("style");
@ -730,17 +745,24 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => {
return; return;
} }
if (operation.action === "setAttrViewFitImage") { if (operation.action === "setAttrViewFitImage") {
Array.from(protyle.wysiwyg.element.querySelectorAll(`.av[data-av-id="${operation.avID}"] .av__gallery-img`)).forEach((item: HTMLElement) => { Array.from(protyle.wysiwyg.element.querySelectorAll(`.av[data-av-id="${operation.avID}"]`)).forEach((item: HTMLElement) => {
if (item.getAttribute(Constants.CUSTOM_SY_AV_VIEW) !== operation.viewID) {
return;
}
const imgElement = item.querySelector(".av__gallery-img");
if (operation.data) { if (operation.data) {
item.classList.add("av__gallery-img--fit"); imgElement.classList.add("av__gallery-img--fit");
} else { } else {
item.classList.remove("av__gallery-img--fit"); imgElement.classList.remove("av__gallery-img--fit");
} }
}); });
return; return;
} }
if (operation.action === "setAttrViewShowIcon") { if (operation.action === "setAttrViewShowIcon") {
Array.from(protyle.wysiwyg.element.querySelectorAll(`.av[data-av-id="${operation.avID}"]`)).forEach((item: HTMLElement) => { Array.from(protyle.wysiwyg.element.querySelectorAll(`.av[data-av-id="${operation.avID}"]`)).forEach((item: HTMLElement) => {
if (item.getAttribute(Constants.CUSTOM_SY_AV_VIEW) !== operation.viewID) {
return;
}
item.querySelectorAll('.av__cell[data-dtype="block"] .b3-menu__avemoji, .av__cell[data-dtype="relation"] .b3-menu__avemoji').forEach(cellItem => { item.querySelectorAll('.av__cell[data-dtype="block"] .b3-menu__avemoji, .av__cell[data-dtype="relation"] .b3-menu__avemoji').forEach(cellItem => {
if (operation.data) { if (operation.data) {
cellItem.classList.remove("fn__none"); cellItem.classList.remove("fn__none");
@ -753,6 +775,9 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => {
} }
if (operation.action === "setAttrViewColWrap") { if (operation.action === "setAttrViewColWrap") {
Array.from(protyle.wysiwyg.element.querySelectorAll(`.av[data-av-id="${operation.avID}"]`)).forEach((item: HTMLElement) => { Array.from(protyle.wysiwyg.element.querySelectorAll(`.av[data-av-id="${operation.avID}"]`)).forEach((item: HTMLElement) => {
if (item.getAttribute(Constants.CUSTOM_SY_AV_VIEW) !== operation.viewID) {
return;
}
item.querySelectorAll(`.av__cell[data-col-id="${operation.id}"],.av__cell[data-field-id="${operation.id}"]`).forEach(cellItem => { item.querySelectorAll(`.av__cell[data-col-id="${operation.id}"],.av__cell[data-field-id="${operation.id}"]`).forEach(cellItem => {
cellItem.setAttribute("data-wrap", operation.data.toString()); cellItem.setAttribute("data-wrap", operation.data.toString());
}); });