diff --git a/ivette/src/dome/renderer/dark.css b/ivette/src/dome/renderer/dark.css
index 8d9c73f223cec385d87aae75bdce30655340e5c4..d6c3f4d64f36be23fe41d672d12220fe81ce982c 100644
--- a/ivette/src/dome/renderer/dark.css
+++ b/ivette/src/dome/renderer/dark.css
@@ -165,18 +165,18 @@
--graph-fg-color-blue: black;
--graph-fg-color-pink: white;
/** edge colors */
- --graph-ed-color-default: #FFFFFF;
- --graph-ed-color-white: #FFFFFF;
+ --graph-ed-color-default: #FFFFFF; /* white */
+ --graph-ed-color-white: #FFFFFF; /* white */
--graph-ed-color-grey: #DDDDDD;
- --graph-ed-color-dark: #000000;
- --graph-ed-color-primary: #1E90FF;
- --graph-ed-color-selected: #00BFFF;
- --graph-ed-color-green: #00FF00;
- --graph-ed-color-orange: #FFA500;
- --graph-ed-color-red: #FF0000;
+ --graph-ed-color-dark: #000000; /* black */
+ --graph-ed-color-primary: #1E90FF; /* dodgerblue */
+ --graph-ed-color-selected: #00BFFF; /* deepskyblue */
+ --graph-ed-color-green: #00FF00; /* green */
+ --graph-ed-color-orange: #FFA500; /* orange */
+ --graph-ed-color-red: #FF0000; /* red */
--graph-ed-color-yellow: #E5E100;
- --graph-ed-color-blue: #00BFFF;
- --graph-ed-color-pink: #FF82AB;
+ --graph-ed-color-blue: #00BFFF; /* deepskyblue */
+ --graph-ed-color-pink: #FF82AB; /* palevioletred1 */
}
}
diff --git a/ivette/src/dome/renderer/light.css b/ivette/src/dome/renderer/light.css
index dbf69c08f6b29054dab85f97d103a1de83dd03d1..c4a1240af55c4fbde3136a9ad6f746cd4d492d4e 100644
--- a/ivette/src/dome/renderer/light.css
+++ b/ivette/src/dome/renderer/light.css
@@ -165,17 +165,17 @@
--graph-fg-color-blue: black;
--graph-fg-color-pink: white;
/** edge colors */
- --graph-ed-color-default: #000000;
+ --graph-ed-color-default: #000000; /* black */
--graph-ed-color-white: #CCCCCC;
--graph-ed-color-grey: #888888;
- --graph-ed-color-dark: #000000;
- --graph-ed-color-primary: #1E90FF;
- --graph-ed-color-selected: #00BFFF;
- --graph-ed-color-green: #00FF00;
- --graph-ed-color-orange: #FFA500;
- --graph-ed-color-red: #FF0000;
+ --graph-ed-color-dark: #000000; /* black */
+ --graph-ed-color-primary: #1E90FF; /* dodgerblue */
+ --graph-ed-color-selected: #00BFFF; /* deepskyblue */
+ --graph-ed-color-green: #00FF00; /* green */
+ --graph-ed-color-orange: #FFA500; /* orange */
+ --graph-ed-color-red: #FF0000; /* red */
--graph-ed-color-yellow: #E5E100;
- --graph-ed-color-blue: #00BFFF;
- --graph-ed-color-pink: #FF82AB;
+ --graph-ed-color-blue: #00BFFF; /* deepskyblue */
+ --graph-ed-color-pink: #FF82AB; /* palevioletred1 */
}
}
diff --git a/ivette/src/frama-c/plugins/callgraph/components/toolbar.tsx b/ivette/src/frama-c/plugins/callgraph/components/toolbar.tsx
index 8db0c470f8e204ae773e22592429903f69dc8b19..34b8428e38d581d815c4918a43d54c6f78dbb959 100644
--- a/ivette/src/frama-c/plugins/callgraph/components/toolbar.tsx
+++ b/ivette/src/frama-c/plugins/callgraph/components/toolbar.tsx
@@ -147,9 +147,9 @@ export function CallgraphToolsBar(props: CallgraphToolsBarProps): JSX.Element {
<Filler/>
<div className='cg-spinner'>
- edges: <Spinner
+ Edges: <Spinner
value={linkThickness}
- title="Tickness of edges"
+ title="Thickness of edges"
vmin={1}
vmax={10}
vstep={1}
diff --git a/ivette/src/frama-c/plugins/callgraph/definitions.tsx b/ivette/src/frama-c/plugins/callgraph/definitions.tsx
index 914830cd7f712f6ab0ce0b6759e58ff22bdc40d2..252ff921e8555a7fa3f5a8956b52e34c66c74c1c 100644
--- a/ivette/src/frama-c/plugins/callgraph/definitions.tsx
+++ b/ivette/src/frama-c/plugins/callgraph/definitions.tsx
@@ -93,28 +93,35 @@ function getIDFromLink(link: LinkObject3D<CGNode, CGLink>)
return { sourceId, targetId };
}
-export function changeLinkColor(hex: string, amount: number): string {
+/**
+ * Each RGB component of the color is modified by :
+ * - adding a percentage of the (255 - component value) for lighten
+ * - removing a percentage of the component value for darken.
+ *
+ * A negative percentage darkens and a positive percentage lightens the color.
+ *
+ * @param hex color to transform
+ * @param amount percentage in [-100, 100]
+ * @returns new hexadecimal color
+*/
+export function transformColor(hex: string, amount: number): string {
+ const percentage = Math.max(-100, Math.min(100, amount));
+
function hexToRgb(hex: string): [number, number, number] {
hex = hex.replace('#', '');
const bigint = parseInt(hex, 16);
- const r = (bigint >> 16) & 255;
- const g = (bigint >> 8) & 255;
- const b = bigint & 255;
- return [r, g, b];
+ return [(bigint >> 16) & 255, (bigint >> 8) & 255, bigint & 255];
}
function rgbToHex(r: number, g: number, b: number): string {
return `#${((1 << 24) + (r << 16) + (g << 8) + b)
- .toString(16)
- .slice(1)
- .toUpperCase()}`;
+ .toString(16).slice(1).toUpperCase()}`;
+ }
+ function newColor(color: number): number {
+ const base = percentage < 0 ? color : (255 - color);
+ return color + Math.floor(base * percentage / 100);
}
- let [r, g, b] = hexToRgb(hex);
- r = Math.min(255, r + Math.round(255 * (amount / 100)));
- g = Math.min(255, g + Math.round(255 * (amount / 100)));
- b = Math.min(255, b + Math.round(255 * (amount / 100)));
- r = r < 0 ? 0 : r;
- g = g < 0 ? 0 : g;
- b = b < 0 ? 0 : b;
+
+ const [r, g, b] = hexToRgb(hex).map(color => newColor(color));
return rgbToHex(r, g, b);
}
diff --git a/ivette/src/frama-c/plugins/callgraph/index.tsx b/ivette/src/frama-c/plugins/callgraph/index.tsx
index e4ca10afa82576a41b4319dae9217c0a0e4db0e6..3adefe5177606bd7bc1e27d388b8ee9d13de6836 100644
--- a/ivette/src/frama-c/plugins/callgraph/index.tsx
+++ b/ivette/src/frama-c/plugins/callgraph/index.tsx
@@ -46,7 +46,7 @@ import {
callGraphFunction, SelectedNodes, ModeDisplay,
CGNode, CGLink, CGData,
CallGraphFunc, SelectedNodesData,
- changeLinkColor
+ transformColor
} from "frama-c/plugins/callgraph/definitions";
import './callgraph.css';
@@ -291,7 +291,7 @@ function Callgraph(): JSX.Element {
return (C.getLinkWidth(link, linkThickness) * 150 / 100);
},
particleColor: (link) => {
- return changeLinkColor(
+ return transformColor(
C.getLinkColor(link), theme[0] === "light" ? -50 : 50
);
},