Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-02 19:36:12 +01:00
Code Issues Packages Projects Releases Activity

chore(prettier): fix all files

Browse Source
This commit is contained in:
Elian Doran
2025-01-09 18:07:02 +02:00
parent 19ee861699
commit 4cbb529fd4
571 changed files with 23226 additions and 23940 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
src/public/app/widgets/note_map.js
View File

@@ -104,39 +104,38 @@ export default class NoteMapWidget extends NoteContextAwareWidget {
this.$widget = $(TPL);
const documentStyle = window.getComputedStyle(document.documentElement);
this.themeStyle = documentStyle.getPropertyValue('--theme-style')?.trim();
this.themeStyle = documentStyle.getPropertyValue("--theme-style")?.trim();
this.$container = this.$widget.find(".note-map-container");
this.$styleResolver = this.$widget.find('.style-resolver');
this.$styleResolver = this.$widget.find(".style-resolver");
new ResizeObserver(() => this.setDimensions()).observe(this.$container[0]);
this.$widget.find(".map-type-switcher button").on("click", async e => {
this.$widget.find(".map-type-switcher button").on("click", async (e) => {
const type = $(e.target).closest("button").attr("data-type");
await attributeService.setLabel(this.noteId, 'mapType', type);
await attributeService.setLabel(this.noteId, "mapType", type);
});
// Reading the status of the Drag nodes Ui element. Changing it´s color when activated. Reading Force value of the link distance.
this.$widget.find('.fixnodes-type-switcher').on('click', async event => {
this.$widget.find(".fixnodes-type-switcher").on("click", async (event) => {
this.fixNodes = !this.fixNodes;
event.target.style.backgroundColor = this.fixNodes ? '#661822' : 'transparent';
event.target.style.backgroundColor = this.fixNodes ? "#661822" : "transparent";
});
super.doRender();
}
setDimensions() {
if (!this.graph) { // no graph has been even rendered
if (!this.graph) {
// no graph has been even rendered
return;
}
const $parent = this.$widget.parent();
this.graph
.height($parent.height())
.width($parent.width());
this.graph.height($parent.height()).width($parent.width());
}
async refreshWithNote(note) {
@@ -161,12 +160,12 @@ export default class NoteMapWidget extends NoteContextAwareWidget {
this.graph = ForceGraph()(this.$container[0])
.width(this.$container.width())
.height(this.$container.height())
.onZoom(zoom => this.setZoomLevel(zoom.k))
.onZoom((zoom) => this.setZoomLevel(zoom.k))
.d3AlphaDecay(0.01)
.d3VelocityDecay(0.08)
//Code to fixate nodes when dragged
.onNodeDragEnd(node => {
.onNodeDragEnd((node) => {
if (this.fixNodes) {
node.fx = node.x;
node.fy = node.y;
@@ -176,23 +175,25 @@ export default class NoteMapWidget extends NoteContextAwareWidget {
}
})
//check if hovered and set the hovernode variable, saving the hovered node object into it. Clear links variable everytime you hover. Without clearing links will stay highlighted
.onNodeHover(node => {
.onNodeHover((node) => {
hoverNode = node || null;
highlightLinks.clear();
})
// set link width to immitate a highlight effekt. Checking the condition if any links are saved in the previous defined set highlightlinks
.linkWidth(link => (highlightLinks.has(link) ? 3 : 0.4))
.linkColor(link => (highlightLinks.has(link) ? 'white' : this.css.mutedTextColor))
.linkWidth((link) => (highlightLinks.has(link) ? 3 : 0.4))
.linkColor((link) => (highlightLinks.has(link) ? "white" : this.css.mutedTextColor))
.linkDirectionalArrowLength(4)
.linkDirectionalArrowRelPos(0.95)
// main code for highlighting hovered nodes and neighbours. here we "style" the nodes. the nodes are rendered several hundred times per second.
.nodeCanvasObject((node, ctx) => {
if (hoverNode == node) { //paint only hovered node
this.paintNode(node, '#661822', ctx);
if (hoverNode == node) {
//paint only hovered node
this.paintNode(node, "#661822", ctx);
neighbours.clear(); //clearing neighbours or the effect would be maintained after hovering is over
for (const link of data.links) { //check if node is part of a link in the canvas, if so add it´s neighbours and related links to the previous defined variables to paint the nodes
for (const link of data.links) {
//check if node is part of a link in the canvas, if so add it´s neighbours and related links to the previous defined variables to paint the nodes
if (link.source.id == node.id || link.target.id == node.id) {
neighbours.add(link.source);
neighbours.add(link.target);
@@ -200,8 +201,9 @@ export default class NoteMapWidget extends NoteContextAwareWidget {
neighbours.delete(node);
}
}
} else if (neighbours.has(node) && hoverNode != null) { //paint neighbours
this.paintNode(node, '#9d6363', ctx);
} else if (neighbours.has(node) && hoverNode != null) {
//paint neighbours
this.paintNode(node, "#9d6363", ctx);
} else {
this.paintNode(node, this.getColorForNode(node), ctx); //paint rest of nodes in canvas
}
@@ -214,15 +216,15 @@ export default class NoteMapWidget extends NoteContextAwareWidget {
ctx.arc(node.x, node.y, this.noteIdToSizeMap[node.id], 0, 2 * Math.PI, false);
ctx.fill();
})
.nodeLabel(node => esc(node.name))
.nodeLabel((node) => esc(node.name))
.maxZoom(7)
.warmupTicks(30)
.onNodeClick(node => appContext.tabManager.getActiveContext().setNote(node.id))
.onNodeClick((node) => appContext.tabManager.getActiveContext().setNote(node.id))
.onNodeRightClick((node, e) => linkContextMenuService.openContextMenu(node.id, e));
if (this.mapType === 'link') {
if (this.mapType === "link") {
this.graph
.linkLabel(l => `${esc(l.source.name)} - <strong>${esc(l.name)}</strong> - ${esc(l.target.name)}`)
.linkLabel((l) => `${esc(l.source.name)} - <strong>${esc(l.name)}</strong> - ${esc(l.target.name)}`)
.linkCanvasObject((link, ctx) => this.paintLink(link, ctx))
.linkCanvasObjectMode(() => "after");
}
@@ -236,28 +238,28 @@ export default class NoteMapWidget extends NoteContextAwareWidget {
const boundedCharge = Math.min(-3, charge);
let distancevalue = 40; // default value for the link force of the nodes
this.$widget.find('.fixnodes-type-switcher input').on('change', async e => {
distancevalue = e.target.closest('input').value;
this.graph.d3Force('link').distance(distancevalue);
this.$widget.find(".fixnodes-type-switcher input").on("change", async (e) => {
distancevalue = e.target.closest("input").value;
this.graph.d3Force("link").distance(distancevalue);
this.renderData(data);
});
this.graph.d3Force('center').strength(0.2);
this.graph.d3Force('charge').strength(boundedCharge);
this.graph.d3Force('charge').distanceMax(1000);
this.graph.d3Force("center").strength(0.2);
this.graph.d3Force("charge").strength(boundedCharge);
this.graph.d3Force("charge").distanceMax(1000);
this.renderData(data);
}
getMapRootNoteId() {
if (this.widgetMode === 'ribbon') {
if (this.widgetMode === "ribbon") {
return this.noteId;
}
let mapRootNoteId = this.note.getLabelValue("mapRootNoteId");
if (mapRootNoteId === 'hoisted') {
if (mapRootNoteId === "hoisted") {
mapRootNoteId = hoistedNoteService.getHoistedNoteId();
} else if (!mapRootNoteId) {
mapRootNoteId = appContext.tabManager.getActiveContext().parentNoteId;
@@ -269,8 +271,8 @@ export default class NoteMapWidget extends NoteContextAwareWidget {
getColorForNode(node) {
if (node.color) {
return node.color;
} else if (this.widgetMode === 'ribbon' && node.id === this.noteId) {
return 'red'; // subtree root mark as red
} else if (this.widgetMode === "ribbon" && node.id === this.noteId) {
return "red"; // subtree root mark as red
} else {
return this.generateColorFromString(node.type);
}
@@ -286,20 +288,21 @@ export default class NoteMapWidget extends NoteContextAwareWidget {
hash = str.charCodeAt(i) + ((hash << 5) - hash);
}
let color = '#';
let color = "#";
for (let i = 0; i < 3; i++) {
const value = (hash >> (i * 8)) & 0xFF;
const value = (hash >> (i * 8)) & 0xff;
color += (`00${value.toString(16)}`).substr(-2);
color += `00${value.toString(16)}`.substr(-2);
}
return color;
}
rgb2hex(rgb) {
return `#${rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/)
return `#${rgb
.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/)
.slice(1)
.map(n => parseInt(n, 10).toString(16).padStart(2, '0'))
.join('')}`
.map((n) => parseInt(n, 10).toString(16).padStart(2, "0"))
.join("")}`;
}
setZoomLevel(level) {
@@ -307,17 +310,15 @@ export default class NoteMapWidget extends NoteContextAwareWidget {
}
paintNode(node, color, ctx) {
const {x, y} = node;
const { x, y } = node;
const size = this.noteIdToSizeMap[node.id];
ctx.fillStyle = color;
ctx.beginPath();
ctx.arc(x, y, size*0.8, 0, 2 * Math.PI, false);
ctx.arc(x, y, size * 0.8, 0, 2 * Math.PI, false);
ctx.fill();
const toRender = this.zoomLevel > 2
|| (this.zoomLevel > 1 && size > 6)
|| (this.zoomLevel > 0.3 && size > 10);
const toRender = this.zoomLevel > 2 || (this.zoomLevel > 1 && size > 6) || (this.zoomLevel > 0.3 && size > 10);
if (!toRender) {
return;
@@ -325,8 +326,8 @@ export default class NoteMapWidget extends NoteContextAwareWidget {
ctx.fillStyle = this.css.textColor;
ctx.font = `${size}px ${this.css.fontFamily}`;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.textAlign = "center";
ctx.textBaseline = "middle";
let title = node.name;
@@ -343,11 +344,11 @@ export default class NoteMapWidget extends NoteContextAwareWidget {
}
ctx.font = `3px ${this.css.fontFamily}`;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillStyle = this.css.mutedTextColor;
const {source, target} = link;
const { source, target } = link;
const x = (source.x + target.x) / 2;
const y = (source.y + target.y) / 2;
@@ -387,7 +388,7 @@ export default class NoteMapWidget extends NoteContextAwareWidget {
return {
nodes: this.nodes,
links: links.map(link => ({
links: links.map((link) => ({
id: `${link.sourceNoteId}-${link.targetNoteId}`,
source: link.sourceNoteId,
target: link.targetNoteId,
@@ -412,7 +413,7 @@ export default class NoteMapWidget extends NoteContextAwareWidget {
sourceNoteId: link.sourceNoteId,
targetNoteId: link.targetNoteId,
names: [link.name]
}
};
}
}
@@ -422,8 +423,8 @@ export default class NoteMapWidget extends NoteContextAwareWidget {
calculateNodeSizes(resp) {
this.noteIdToSizeMap = {};
if (this.mapType === 'tree') {
const {noteIdToDescendantCountMap} = resp;
if (this.mapType === "tree") {
const { noteIdToDescendantCountMap } = resp;
for (const noteId in noteIdToDescendantCountMap) {
this.noteIdToSizeMap[noteId] = 4;
@@ -434,8 +435,7 @@ export default class NoteMapWidget extends NoteContextAwareWidget {
this.noteIdToSizeMap[noteId] += 1 + Math.round(Math.log(count) / Math.log(1.5));
}
}
}
else if (this.mapType === 'link') {
} else if (this.mapType === "link") {
const noteIdToLinkCount = {};
for (const link of resp.links) {
@@ -455,20 +455,19 @@ export default class NoteMapWidget extends NoteContextAwareWidget {
renderData(data) {
this.graph.graphData(data);
if (this.widgetMode === 'ribbon' && this.note?.type !== 'search') {
if (this.widgetMode === "ribbon" && this.note?.type !== "search") {
setTimeout(() => {
this.setDimensions();
const subGraphNoteIds = this.getSubGraphConnectedToCurrentNote(data);
this.graph.zoomToFit(400, 50, node => subGraphNoteIds.has(node.id));
this.graph.zoomToFit(400, 50, (node) => subGraphNoteIds.has(node.id));
if (subGraphNoteIds.size < 30) {
this.graph.d3VelocityDecay(0.4);
}
}, 1000);
}
else {
} else {
if (data.nodes.length > 1) {
setTimeout(() => {
this.setDimensions();
@@ -476,7 +475,7 @@ export default class NoteMapWidget extends NoteContextAwareWidget {
const noteIdsWithLinks = this.getNoteIdsWithLinks(data);
if (noteIdsWithLinks.size > 0) {
this.graph.zoomToFit(400, 30, node => noteIdsWithLinks.has(node.id));
this.graph.zoomToFit(400, 30, (node) => noteIdsWithLinks.has(node.id));
}
if (noteIdsWithLinks.size < 30) {
@@ -537,16 +536,11 @@ export default class NoteMapWidget extends NoteContextAwareWidget {
}
cleanup() {
this.$container.html('');
this.$container.html("");
}
entitiesReloadedEvent({loadResults}) {
if (loadResults.getAttributeRows(this.componentId).find(
attr =>
attr.type === 'label'
&& ['mapType', 'mapRootNoteId'].includes(attr.name)
&& attributeService.isAffecting(attr, this.note)
)) {
entitiesReloadedEvent({ loadResults }) {
if (loadResults.getAttributeRows(this.componentId).find((attr) => attr.type === "label" && ["mapType", "mapRootNoteId"].includes(attr.name) && attributeService.isAffecting(attr, this.note))) {
this.refresh();
}
}