Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-12-16 14:40:12 +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,
avID,
data: wrapElement.checked,
blockID: options.blockID
blockID: options.blockID,
viewID: options.data.viewID,
}], [{
action: "setAttrViewColWrap",
id: colId,
avID,
data: !wrapElement.checked,
viewID: options.data.viewID,
blockID: options.blockID
}]);
colData.wrap = wrapElement.checked;
@ -693,6 +695,7 @@ export const showColMenu = (protyle: IProtyle, blockElement: Element, cellElemen
const colId = cellElement.getAttribute("data-col-id");
const avID = blockElement.getAttribute("data-av-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 oldDesc = cellElement.dataset.desc;
const menu = new Menu(Constants.MENU_AV_HEADER_CELL, () => {
@ -975,7 +978,7 @@ export const showColMenu = (protyle: IProtyle, blockElement: Element, cellElemen
action: "syncAttrViewTableColWidth",
keyID: colId,
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,
avID,
data: wrapElement.checked,
blockID
blockID,
viewID
}], [{
action: "setAttrViewColWrap",
id: colId,
avID,
data: !wrapElement.checked,
blockID
blockID,
viewID
}]);
menu.close();
});
@ -1051,7 +1056,7 @@ export const showColMenu = (protyle: IProtyle, blockElement: Element, cellElemen
}, (response) => {
duplicateCol({
blockElement,
viewID: blockElement.getAttribute(Constants.CUSTOM_SY_AV_VIEW),
viewID,
protyle,
colId,
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 {getColIconByType} from "../col";
import {avContextmenu} from "../action";
import {Constants} from "../../../../constants";
export const setGalleryCover = (options: {
view: IAVGallery
@ -128,6 +129,7 @@ export const setGallerySize = (options: {
const menu = new Menu();
const avID = options.nodeElement.getAttribute("data-av-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");
menu.addItem({
iconHTML: "",
@ -138,12 +140,14 @@ export const setGallerySize = (options: {
action: "setAttrViewCardSize",
avID,
blockID,
data: 0
data: 0,
viewID
}], [{
action: "setAttrViewCardSize",
avID,
blockID,
data: options.view.cardSize
data: options.view.cardSize,
viewID
}]);
options.view.cardSize = 0;
targetNameElement.textContent = window.siyuan.languages.small;
@ -158,12 +162,14 @@ export const setGallerySize = (options: {
action: "setAttrViewCardSize",
avID,
blockID,
data: 1
data: 1,
viewID
}], [{
action: "setAttrViewCardSize",
avID,
blockID,
data: options.view.cardSize
data: options.view.cardSize,
viewID
}]);
options.view.cardSize = 1;
targetNameElement.textContent = window.siyuan.languages.medium;
@ -178,12 +184,14 @@ export const setGallerySize = (options: {
action: "setAttrViewCardSize",
avID,
blockID,
data: 2
data: 2,
viewID
}], [{
action: "setAttrViewCardSize",
avID,
blockID,
data: options.view.cardSize
data: options.view.cardSize,
viewID
}]);
options.view.cardSize = 2;
targetNameElement.textContent = window.siyuan.languages.large;
@ -222,6 +230,7 @@ export const setGalleryRatio = (options: {
const menu = new Menu();
const avID = options.nodeElement.getAttribute("data-av-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");
[0, 1, 2, 3, 4, 5, 6].forEach(ratio => {
menu.addItem({
@ -233,12 +242,14 @@ export const setGalleryRatio = (options: {
action: "setAttrViewCardAspectRatio",
avID,
blockID,
data: ratio
data: ratio,
viewID
}], [{
action: "setAttrViewCardAspectRatio",
avID,
blockID,
data: options.view.cardAspectRatio
data: options.view.cardAspectRatio,
viewID
}]);
options.view.cardAspectRatio = 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
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;
toggleTitleElement.addEventListener("change", () => {
const avID = options.blockElement.getAttribute("data-av-id");
const blockID = options.blockElement.getAttribute("data-node-id");
const checked = toggleTitleElement.checked;
transaction(options.protyle, [{
action: "hideAttrViewName",
avID,
blockID,
data: !checked
data: !checked,
viewID
}], [{
action: "hideAttrViewName",
avID,
blockID,
data: checked
data: checked,
viewID
}]);
options.data.view.hideAttrViewName = !checked;
});
const toggleIconElement = options.menuElement.querySelector('.b3-switch[data-type="toggle-entries-icons"]') as HTMLInputElement;
toggleIconElement.addEventListener("change", () => {
const avID = options.blockElement.getAttribute("data-av-id");
const blockID = options.blockElement.getAttribute("data-node-id");
const checked = toggleIconElement.checked;
transaction(options.protyle, [{
action: "setAttrViewShowIcon",
avID,
blockID,
data: checked
data: checked,
viewID
}], [{
action: "setAttrViewShowIcon",
avID,
blockID,
data: !checked
data: !checked,
viewID
}]);
options.data.view.showIcon = checked;
});
const toggleWrapElement = options.menuElement.querySelector('.b3-switch[data-type="toggle-entries-wrap"]') as HTMLInputElement;
toggleWrapElement.addEventListener("change", () => {
const avID = options.blockElement.getAttribute("data-av-id");
const blockID = options.blockElement.getAttribute("data-node-id");
const checked = toggleWrapElement.checked;
transaction(options.protyle, [{
action: "setAttrViewWrapField",
avID,
blockID,
data: checked
data: checked,
viewID
}], [{
action: "setAttrViewWrapField",
avID,
blockID,
data: !checked
data: !checked,
viewID
}]);
getFieldsByData(options.data).forEach(item => {
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;
toggleFitElement.addEventListener("change", () => {
const avID = options.blockElement.getAttribute("data-av-id");
const blockID = options.blockElement.getAttribute("data-node-id");
const checked = toggleFitElement.checked;
transaction(options.protyle, [{
action: "setAttrViewFitImage",
avID,
blockID,
data: checked
data: checked,
viewID
}], [{
action: "setAttrViewFitImage",
avID,
blockID,
data: !checked
data: !checked,
viewID
}]);
(options.data.view as IAVGallery).fitImage = checked;
});
const toggleNameElement = options.menuElement.querySelector('.b3-switch[data-type="toggle-gallery-name"]') as HTMLInputElement;
toggleNameElement.addEventListener("change", () => {
const avID = options.blockElement.getAttribute("data-av-id");
const blockID = options.blockElement.getAttribute("data-node-id");
const checked = toggleNameElement.checked;
transaction(options.protyle, [{
action: "setAttrViewDisplayFieldName",
@ -219,19 +220,19 @@ export const bindLayoutEvent = (options: {
}
const toggleBgElement = options.menuElement.querySelector('.b3-switch[data-type="toggle-kanban-bg"]') as HTMLInputElement;
toggleBgElement.addEventListener("change", () => {
const avID = options.blockElement.getAttribute("data-av-id");
const blockID = options.blockElement.getAttribute("data-node-id");
const checked = toggleBgElement.checked;
transaction(options.protyle, [{
action: "setAttrViewFillColBackgroundColor",
avID,
blockID,
data: checked
data: checked,
viewID
}], [{
action: "setAttrViewFillColBackgroundColor",
avID,
blockID,
data: !checked
data: !checked,
viewID
}]);
(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") {
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") {
item.querySelectorAll(".av__kanban-group").forEach(galleryItem => {
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") {
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 => {
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") {
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");
if (titleElement) {
if (!operation.data) {
@ -704,6 +713,9 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => {
}
if (operation.action === "setAttrViewWrapField") {
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 => {
fieldItem.setAttribute("data-wrap", operation.data.toString());
});
@ -712,6 +724,9 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => {
}
if (operation.action === "setAttrViewFillColBackgroundColor") {
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 => {
if (!operation.data) {
item.removeAttribute("style");
@ -730,17 +745,24 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => {
return;
}
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) {
item.classList.add("av__gallery-img--fit");
imgElement.classList.add("av__gallery-img--fit");
} else {
item.classList.remove("av__gallery-img--fit");
imgElement.classList.remove("av__gallery-img--fit");
}
});
return;
}
if (operation.action === "setAttrViewShowIcon") {
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 => {
if (operation.data) {
cellItem.classList.remove("fn__none");
@ -753,6 +775,9 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => {
}
if (operation.action === "setAttrViewColWrap") {
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 => {
cellItem.setAttribute("data-wrap", operation.data.toString());
});