Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-10 23:35:50 +01:00
Code Issues Packages Projects Releases Activity

refactor(react): integrate get color for node in rendering

Browse Source
This commit is contained in:
Elian Doran
2025-10-04 13:12:04 +03:00
parent 9a1e7ca3ae
commit 35438d2599
3 changed files with 14 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
apps/client/src/widgets/note_map/rendering.ts
View File

@@ -1,7 +1,7 @@
import type ForceGraph from "force-graph";
import { Link, Node, NotesAndRelationsData } from "./data";
import { NodeObject } from "force-graph";
import { getColorForNode, MapType, NoteMapWidgetMode } from "./utils";
import { generateColorFromString, MapType, NoteMapWidgetMode } from "./utils";
import { escapeHtml } from "../../services/utils";
export interface CssData {
@@ -27,6 +27,16 @@ export function setupRendering(graph: ForceGraph, { noteId, themeStyle, widgetMo
let hoverNode: NodeObject | null = null;
let zoomLevel: number;
function getColorForNode(node: Node) {
if (node.color) {
return node.color;
} else if (widgetMode === "ribbon" && node.id === noteId) {
return "red"; // subtree root mark as red
} else {
return generateColorFromString(node.type, themeStyle);
}
}
function paintNode(node: Node, color: string, ctx: CanvasRenderingContext2D) {
const { x, y } = node;
if (!x || !y) {
@@ -125,7 +135,7 @@ export function setupRendering(graph: ForceGraph, { noteId, themeStyle, widgetMo
//paint neighbours
paintNode(node, "#9d6363", ctx);
} else {
paintNode(node, getColorForNode(node, noteId, themeStyle, widgetMode), ctx); //paint rest of nodes in canvas
paintNode(node, getColorForNode(node), ctx); //paint rest of nodes in canvas
}
})
//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
@@ -133,7 +143,7 @@ export function setupRendering(graph: ForceGraph, { noteId, themeStyle, widgetMo
hoverNode = node || null;
highlightLinks.clear();
})
.nodePointerAreaPaint((node, _, ctx) => paintNode(node as Node, getColorForNode(node as Node, noteId, themeStyle, widgetMode), ctx))
.nodePointerAreaPaint((node, _, ctx) => paintNode(node as Node, getColorForNode(node as Node), ctx))
.nodePointerAreaPaint((node, color, ctx) => {
if (!node.id) {
return;

13
apps/client/src/widgets/note_map/utils.ts
View File

@@ -1,7 +1,6 @@
import appContext from "../../components/app_context";
import FNote from "../../entities/fnote";
import hoisted_note from "../../services/hoisted_note";
import { Node } from "./data";
export type NoteMapWidgetMode = "ribbon" | "hoisted";
export type MapType = "tree" | "link";
@@ -29,17 +28,7 @@ export function getMapRootNoteId(noteId: string, note: FNote, widgetMode: NoteMa
return mapRootNoteId;
}
export function getColorForNode(node: Node, noteId: string, themeStyle: "light" | "dark", widgetMode: NoteMapWidgetMode) {
if (node.color) {
return node.color;
} else if (widgetMode === "ribbon" && node.id === noteId) {
return "red"; // subtree root mark as red
} else {
return generateColorFromString(node.type, themeStyle);
}
}
function generateColorFromString(str: string, themeStyle: "light" | "dark") {
export function generateColorFromString(str: string, themeStyle: "light" | "dark") {
if (themeStyle === "dark") {
str = `0${str}`; // magic lightning modifier
}