Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-11 07:45:51 +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

4
apps/client/src/widgets/note_map.ts
View File

@@ -115,10 +115,6 @@ export default class NoteMapWidget extends NoteContextAwareWidget {
this.renderData(data); this.renderData(data);
} }
setZoomLevel(level: number) {
this.zoomLevel = level;
}
renderData(data: Data) { renderData(data: Data) {
if (this.widgetMode === "ribbon" && this.note?.type !== "search") { if (this.widgetMode === "ribbon" && this.note?.type !== "search") {
setTimeout(() => { setTimeout(() => {

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

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

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

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