From c6d53a22501349ff97a0d745c49372b11637b090 Mon Sep 17 00:00:00 2001
From: Dennis Collaris <d.collaris@me.com>
Date: Fri, 26 Jul 2024 15:01:04 +0200
Subject: [PATCH] feat: dark mode for node-link edge labels
---
.../nodelinkvis/components/NLPixi.tsx | 21 ++++++++++++++++---
1 file changed, 18 insertions(+), 3 deletions(-)
diff --git a/libs/shared/lib/vis/visualizations/nodelinkvis/components/NLPixi.tsx b/libs/shared/lib/vis/visualizations/nodelinkvis/components/NLPixi.tsx
index 0fc07eb7d..297e6062e 100644
--- a/libs/shared/lib/vis/visualizations/nodelinkvis/components/NLPixi.tsx
+++ b/libs/shared/lib/vis/visualizations/nodelinkvis/components/NLPixi.tsx
@@ -23,6 +23,8 @@ import { Viewport } from 'pixi-viewport';
import { NodelinkVisProps } from '../nodelinkvis';
import { Tooltip, TooltipContent, TooltipTrigger } from '@graphpolaris/shared/lib/components/tooltip';
import { MovedEvent } from 'pixi-viewport/dist/types';
+import { Theme } from '@graphpolaris/shared/lib/data-access/store/configSlice';
+import { useConfig } from '@graphpolaris/shared/lib/data-access/store';
type Props = {
onClick: (event?: { node: NodeTypeD3; pos: IPointData }) => void;
@@ -47,6 +49,12 @@ export const NLPixi = (props: Props) => {
const [quickPopup, setQuickPopup] = useState<{ node: NodeType; pos: IPointData } | undefined>();
const [popups, setPopups] = useState<{ node: NodeTypeD3; pos: IPointData }[]>([]);
+ const globalConfig = useConfig();
+
+ useEffect(() => {
+ update();
+ }, [globalConfig.currentTheme]);
+
const app = useMemo(
() =>
new Application({
@@ -314,7 +322,12 @@ export const NLPixi = (props: Props) => {
getLinkWidth() {
return props.configuration.edges.width.width || config.LINE_WIDTH_DEFAULT;
- }
+ },
+
+ getBackgroundColor() {
+ // Colors corresponding to .bg-light class
+ return globalConfig.currentTheme === Theme.dark ? 0x121621 : 0xffffff;
+ },
}));
function resize() {
@@ -458,7 +471,7 @@ export const NLPixi = (props: Props) => {
const text = new Text(linkMeta.name, {
fontSize: 60,
fill: config.LINE_COLOR_DEFAULT,
- stroke: 0xffffff,
+ stroke: imperative.current.getBackgroundColor(),
strokeThickness: 30,
});
text.cullable = true;
@@ -588,7 +601,9 @@ export const NLPixi = (props: Props) => {
} else {
text.rotation = rads;
}
- }
+
+ text.style.stroke = imperative.current.getBackgroundColor();
+ };
const updateNodeLabel = (node: NodeTypeD3) => {
if (graph.current.nodes.length > config.LABEL_MAX_NODES) return;
--
GitLab