Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2026-01-03 15:28:49 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

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

Browse source
This commit is contained in:
Vanessa 2023-06-08 19:21:33 +08:00
parent b5d9968237
commit d9d3db1920
4 changed files with 62 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

45
app/src/protyle/render/av/action.ts Normal file
View file

@ -0,0 +1,45 @@
import {hasClosestBlock, hasClosestByAttribute, hasClosestByClassName} from "../../util/hasClosest";
import {transaction} from "../../wysiwyg/transaction";
import {Menu} from "../../../plugin/API";
export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLElement }) => {
const blockElement = hasClosestBlock(event.target)
const addElement = hasClosestByAttribute(event.target, "data-type", "av-header-add")
if (addElement && blockElement) {
const menu = new Menu("av-header-add")
menu.addItem({
icon: "iconAlignLeft",
label: window.siyuan.languages.text,
click() {
const id = Lute.NewNodeID()
transaction(protyle, [{
action: "addAttrViewCol",
name: "Text",
parentID: blockElement.getAttribute("data-av-id"),
type: "text",
id
}], [{
action: "removeAttrViewCol",
id,
parentID: blockElement.getAttribute("data-av-type"),
}]);
}
})
const addRect = addElement.getBoundingClientRect()
menu.open({
x: addRect.left,
y: addRect.bottom
})
event.preventDefault();
event.stopPropagation();
return true
}
const cellElement = hasClosestByClassName(event.target, "av__cell")
if (cellElement && blockElement) {
event.preventDefault();
event.stopPropagation();
return true
}
return false
}

51
app/src/protyle/render/av/index.ts
View file

@ -16,62 +16,27 @@ export const avRender = (element: Element) => {
if (e.getAttribute("data-render") === "true") {
return;
}
// const data = {
// title: "table",
// filter: {},
// sorts: {},
// columns: [{
// width: 500,
// icon: "",
// id: "",
// name: "columnA",
// wrap: false,
// type: "",
// }, {
// width: 500,
// icon: "",
// id: "",
// name: "columnB",
// wrap: false,
// type: "",
// }],
// rows: [{
// id: "",
// cells: [{
// value: "a",
// }, {
// color: "var(--b3-card-error-color)",
// bgColor: "var(--b3-card-error-background)",
// value: "a1",
// }]
// }, {
// id: "",
// cells: [{
// color: "var(--b3-card-success-color)",
// bgColor: "var(--b3-card-success-background)",
// value: "b",
// }, {
// value: "b1",
// }]
// }]
// };
fetchPost("/api/av/renderAttributeView", {id: e.getAttribute("data-av-id")}, (response) => {
const data = response.data.av;
// header
let tableHTML = '<div class="av__row av__row--header" style="background-color: var(--b3-theme-background)"><div class="av__firstcol"><input style="margin-top: 14px" type="checkbox"></div>';
data.columns.forEach((column: IAVColumn) => {
tableHTML += `
<div class="av__cell" style="width: ${column.width}px;">${column.name}</div>`
<div class="av__cell" style="width: ${column.width || 200}px;">${column.name}</div>`
});
tableHTML += `<div class="block__icons">
<div class="block__icon block__icon--show"><svg><use xlink:href="#iconAdd"></use></svg></div>
<div class="block__icon block__icon--show" data-type="av-header-add"><svg><use xlink:href="#iconAdd"></use></svg></div>
<div class="fn__space"></div>
<div class="block__icon block__icon--show"><svg><use xlink:href="#iconMore"></use></svg></div>
<div class="block__icon block__icon--show" data-type="av-header-more"><svg><use xlink:href="#iconMore"></use></svg></div>
</div>
</div>`;
// body
data.rows.forEach((row: IAVRow) => {
tableHTML += `<div class="av__row" data-id="${row.id}"><div class="av__firstcol"><input type="checkbox"></div>`;
row.cells.forEach((cell, index) => {
tableHTML += `<div class="av__cell" style="width: ${data.columns[index].width}px;background-color: ${cell.bgColor || ""};color: ${cell.color || ""}">${cell.value}</div>`
tableHTML += `<div class="av__cell" style="width: ${data.columns[index].width || 200}px;background-color: ${cell.bgColor || ""};color: ${cell.color || ""}">${cell.value}</div>`
});
tableHTML += `<div></div></div>`;
});

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

@ -66,6 +66,7 @@ import {getBacklinkHeadingMore, loadBreadcrumb} from "./renderBacklink";
import {removeSearchMark} from "../toolbar/util";
import {activeBlur, hideKeyboardToolbar} from "../../mobile/util/keyboardToolbar";
import {commonClick} from "./commonClick";
import {avClick} from "../render/av/action";
export class WYSIWYG {
public lastHTMLs: { [key: string]: string } = {};
@ -1912,6 +1913,10 @@ export class WYSIWYG {
return;
}
if (avClick(protyle, event)) {
return;
}
// 点击空白
if (event.target.contains(this.element) && this.element.lastElementChild && !protyle.disabled) {
const lastRect = this.element.lastElementChild.getBoundingClientRect();

4
app/src/types/index.d.ts vendored
View file

@ -18,6 +18,8 @@ type TOperation =
| "append"
| "insertAttrViewBlock"
| "removeAttrViewBlock"
| "addAttrViewCol"
| "removeAttrViewCol"
| "addFlashcards"
| "removeFlashcards"
type TBazaarType = "templates" | "icons" | "widgets" | "themes" | "plugins"
@ -279,6 +281,8 @@ interface IOperation {
retData?: any
nextID?: string // insert 专享
srcIDs?: string[] // insertAttrViewBlock 专享
name?: string // addAttrViewCol 专享
type?: "text" | "date" | "number" | "relation" | "rollup" | "select" // addAttrViewCol 专享
deckID?: string // add/removeFlashcards 专享
blockIDs?: string[] // add/removeFlashcards 专享
}