onedeuxtriseigo.nullpo.dev
A privacy-first, self-hosted, fully open source personal knowledge management software, written in typescript and golang. (PERSONAL FORK)
1import {addScript} from "../util/addScript";
2import {Constants} from "../../constants";
3import {hasClosestByClassName} from "../util/hasClosest";
4import {genIconHTML} from "./util";
5
6export const mindmapRender = (element: Element, cdn = Constants.PROTYLE_CDN) => {
7 let mindmapElements: Element[] = [];
8 if (element.getAttribute("data-subtype") === "mindmap") {
9 // 编辑器内代码块编辑渲染
10 mindmapElements = [element];
11 } else {
12 mindmapElements = Array.from(element.querySelectorAll('[data-subtype="mindmap"]'));
13 }
14 if (mindmapElements.length === 0) {
15 return;
16 }
17 addScript(`${cdn}/js/echarts/echarts.min.js?v=0.0.0`, "protyleEchartsScript").then(() => {
18 const wysiswgElement = hasClosestByClassName(element, "protyle-wysiwyg", true);
19 let width: number = undefined;
20 if (wysiswgElement && wysiswgElement.clientWidth > 0 && mindmapElements[0].firstElementChild.clientWidth === 0 && wysiswgElement.firstElementChild) {
21 width = wysiswgElement.firstElementChild.clientWidth;
22 }
23 mindmapElements.forEach((e: HTMLDivElement) => {
24 if (e.getAttribute("data-render") === "true") {
25 return;
26 }
27 if (!e.firstElementChild.classList.contains("protyle-icons")) {
28 e.insertAdjacentHTML("afterbegin", genIconHTML(wysiswgElement));
29 }
30 const renderElement = e.firstElementChild.nextElementSibling as HTMLElement;
31 if (!e.getAttribute("data-content")) {
32 renderElement.innerHTML = `<span style="position: absolute;left:0;top:0;width: 1px;">${Constants.ZWSP}</span>`;
33 return;
34 }
35 try {
36 if (!renderElement.lastElementChild || renderElement.childElementCount === 1) {
37 renderElement.innerHTML = `<span style="position: absolute;left:0;top:0;width: 1px;">${Constants.ZWSP}</span><div style="height:${e.style.height || "420px"}" contenteditable="false"></div>`;
38 } else {
39 renderElement.lastElementChild.classList.remove("ft__error");
40 }
41 window.echarts.init(renderElement.lastElementChild, window.siyuan.config.appearance.mode === 1 ? "dark" : undefined, {
42 width,
43 }).setOption({
44 series: [
45 {
46 data: [JSON.parse(Lute.EChartsMindmapStr(Lute.UnEscapeHTMLStr(e.getAttribute("data-content"))))],
47 initialTreeDepth: -1,
48 itemStyle: {
49 borderWidth: 0,
50 color: "#4285f4",
51 },
52 label: {
53 backgroundColor: "#f6f8fa",
54 borderColor: "#d1d5da",
55 borderRadius: 6,
56 borderWidth: 0.5,
57 color: "#586069",
58 lineHeight: 20,
59 offset: [-5, 0],
60 padding: [0, 5],
61 position: "insideRight",
62 },
63 lineStyle: {
64 color: "#d1d5da",
65 width: 1,
66 },
67 roam: true,
68 symbol: (value: number, params: { data?: { children?: string } }) => {
69 if (params?.data?.children) {
70 return "circle";
71 } else {
72 return "path://";
73 }
74 },
75 type: "tree",
76 },
77 ],
78 tooltip: {
79 trigger: "item",
80 triggerOn: "mousemove",
81 },
82 backgroundColor: "transparent",
83 });
84 } catch (error) {
85 window.echarts.dispose(renderElement.lastElementChild);
86 renderElement.innerHTML = `<span style="position: absolute;left:0;top:0;width: 1px;">${Constants.ZWSP}</span><div class="ft__error" style="height:${e.style.height || "420px"}" contenteditable="false">Mindmap render error: <br>${error}</div>`;
87 }
88 e.setAttribute("data-render", "true");
89 });
90 });
91};