diff --git a/ivette/src/dome/renderer/dark.css b/ivette/src/dome/renderer/dark.css
index 8282b2569fecae7b711f543a3d42a24f840de2e0..8d9c73f223cec385d87aae75bdce30655340e5c4 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: white;
- --graph-ed-color-white: #fff;
- --graph-ed-color-grey: #ddd;
- --graph-ed-color-dark: black;
- --graph-ed-color-primary: dodgerblue;
- --graph-ed-color-selected: deepskyblue;
- --graph-ed-color-green: green;
- --graph-ed-color-orange: orange;
- --graph-ed-color-red: red;
- --graph-ed-color-yellow: #e5e100;
- --graph-ed-color-blue: deepskyblue;
- --graph-ed-color-pink: palevioletred1;
+ --graph-ed-color-default: #FFFFFF;
+ --graph-ed-color-white: #FFFFFF;
+ --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-yellow: #E5E100;
+ --graph-ed-color-blue: #00BFFF;
+ --graph-ed-color-pink: #FF82AB;
}
}
diff --git a/ivette/src/dome/renderer/light.css b/ivette/src/dome/renderer/light.css
index 0975353f91073cfaea9e7b57b000e09502782c89..dbf69c08f6b29054dab85f97d103a1de83dd03d1 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: black;
- --graph-ed-color-white: #ccc;
- --graph-ed-color-grey: #888;
- --graph-ed-color-dark: black;
- --graph-ed-color-primary: dodgerblue;
- --graph-ed-color-selected: deepskyblue;
- --graph-ed-color-green: green;
- --graph-ed-color-orange: orange;
- --graph-ed-color-red: red;
- --graph-ed-color-yellow: #e5e100;
- --graph-ed-color-blue: deepskyblue;
- --graph-ed-color-pink: palevioletred1;
+ --graph-ed-color-default: #000000;
+ --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-yellow: #E5E100;
+ --graph-ed-color-blue: #00BFFF;
+ --graph-ed-color-pink: #FF82AB;
}
}
diff --git a/ivette/src/frama-c/plugins/callgraph/components/toolbar.tsx b/ivette/src/frama-c/plugins/callgraph/components/toolbar.tsx
index 6e0af5ad43503dfa51d069f8f8f390888d3ebda9..8db0c470f8e204ae773e22592429903f69dc8b19 100644
--- a/ivette/src/frama-c/plugins/callgraph/components/toolbar.tsx
+++ b/ivette/src/frama-c/plugins/callgraph/components/toolbar.tsx
@@ -47,6 +47,7 @@ interface CallgraphToolsBarProps {
panelVisibleState: [boolean, () => void],
verticalSpacingState: State<number>,
horizontalSpacingState: State<number>,
+ linkThicknessState: State<number>,
selectedFunctions:SelectedNodesData,
taintedFunctions: string[],
unprovenPropertiesFunctions: SelectedNodesData,
@@ -60,7 +61,7 @@ export function CallgraphToolsBar(props: CallgraphToolsBarProps): JSX.Element {
const {
displayModeState, selectedParentsState,
selectedChildrenState, panelVisibleState,
- verticalSpacingState, horizontalSpacingState,
+ verticalSpacingState, horizontalSpacingState, linkThicknessState,
selectedFunctions, taintedFunctions,
unprovenPropertiesFunctions, cycleFunctions, dagMode,
updateNodes
@@ -70,6 +71,7 @@ export function CallgraphToolsBar(props: CallgraphToolsBarProps): JSX.Element {
const [showInfos, flipShowInfos] = panelVisibleState;
const [verticalSpacing, setVerticalSpacing] = verticalSpacingState;
const [horizontalSpacing, setHorizontalSpacing] = horizontalSpacingState;
+ const [linkThickness, setLinkThickness] = linkThicknessState;
function menuItem(label: string, onClick: ()=>void, enabled?: boolean)
: Dome.PopupMenuItem {
@@ -144,6 +146,16 @@ export function CallgraphToolsBar(props: CallgraphToolsBarProps): JSX.Element {
<Filler/>
+ <div className='cg-spinner'>
+ edges: <Spinner
+ value={linkThickness}
+ title="Tickness of edges"
+ vmin={1}
+ vmax={10}
+ vstep={1}
+ onChange={setLinkThickness}
+ />
+ </div>
<div className='cg-spinner'>
hor: <Spinner
value={horizontalSpacing}
diff --git a/ivette/src/frama-c/plugins/callgraph/definitions.tsx b/ivette/src/frama-c/plugins/callgraph/definitions.tsx
index b6a3525240f0079dabc9612b29c543c0b6207e12..914830cd7f712f6ab0ce0b6759e58ff22bdc40d2 100644
--- a/ivette/src/frama-c/plugins/callgraph/definitions.tsx
+++ b/ivette/src/frama-c/plugins/callgraph/definitions.tsx
@@ -55,7 +55,9 @@ export interface CallGraphFunc {
/** Get link visibility */
getLinkVisibility: (node: LinkObject3D<CGNode, CGLink>) => boolean;
/** Get link width */
- getLinkWidth: (node: LinkObject3D<CGNode, CGLink>) => number;
+ getLinkWidth: (
+ node: LinkObject3D<CGNode, CGLink>, linkThickness: number
+ ) => number;
/** Get node visibility */
getNodeVisibility: (id: string) => boolean;
}
@@ -91,6 +93,31 @@ function getIDFromLink(link: LinkObject3D<CGNode, CGLink>)
return { sourceId, targetId };
}
+export function changeLinkColor(hex: string, amount: number): string {
+ 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];
+ }
+ function rgbToHex(r: number, g: number, b: number): string {
+ return `#${((1 << 24) + (r << 16) + (g << 8) + b)
+ .toString(16)
+ .slice(1)
+ .toUpperCase()}`;
+ }
+ 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;
+ return rgbToHex(r, g, b);
+}
+
export const callGraphFunction = (
selectNodes: [SelectedNodes, SetSelectedNodes],
graphData: CGData,
@@ -199,9 +226,13 @@ export const callGraphFunction = (
}
};
- const getLinkWidth = (node: LinkObject3D<CGNode, CGLink>): number => {
+ const getLinkWidth = (
+ node: LinkObject3D<CGNode, CGLink>, linkThickness: number
+ ): number => {
const { sourceId, targetId } = getIDFromLink(node);
- return (isSelectedNode(sourceId) || isSelectedNode(targetId)) ? 2 : 1;
+ return (isSelectedNode(sourceId) || isSelectedNode(targetId)) ?
+ (linkThickness + 1):
+ linkThickness;
};
const getNodeVisibility = (id: string): boolean => {
diff --git a/ivette/src/frama-c/plugins/callgraph/index.tsx b/ivette/src/frama-c/plugins/callgraph/index.tsx
index f295e454911c2bc1a2cc487a5d42b444e8e3177d..e4ca10afa82576a41b4319dae9217c0a0e4db0e6 100644
--- a/ivette/src/frama-c/plugins/callgraph/index.tsx
+++ b/ivette/src/frama-c/plugins/callgraph/index.tsx
@@ -45,7 +45,8 @@ import * as Eva from 'frama-c/plugins/eva/api/general';
import {
callGraphFunction, SelectedNodes, ModeDisplay,
CGNode, CGLink, CGData,
- CallGraphFunc, SelectedNodesData
+ CallGraphFunc, SelectedNodesData,
+ changeLinkColor
} from "frama-c/plugins/callgraph/definitions";
import './callgraph.css';
@@ -219,11 +220,13 @@ function Callgraph(): JSX.Element {
const panelVisibleState = Dome.useFlipSettings("ivette.callgraph.panelVisible", true);
const [ verticalSpacing, setVerticalSpacing ] = Dome.useNumberSettings("ivette.callgraph.verticalspacing", 75);
const [ horizontalSpacing, setHorizontalSpacing ] = Dome.useNumberSettings("ivette.callgraph.horizontalspacing", 500);
+ const [ linkThickness, setLinkThickness ] = Dome.useNumberSettings("ivette.callgraph.linkThickness", 1);
const [ autoCenter, flipAutoCenter ] = Dome.useFlipSettings("eva.callgraph.autocenter", true);
const [ autoSelect, flipAutoSelect ] = Dome.useFlipSettings('eva.callgraph.autoselect', true);
/* eslint-enable max-len */
const style = Themes.useStyle();
+ const theme = Themes.useColorTheme();
const C = React.useMemo<CallGraphFunc>(() => {
return callGraphFunction(
@@ -279,13 +282,19 @@ function Callgraph(): JSX.Element {
};
const linkOptions: ILinksOptions = {
- width: (link) => { return C.getLinkWidth(link); },
+ width: (link) => { return C.getLinkWidth(link, linkThickness); },
color: (link) => { return C.getLinkColor(link); },
visibility: (link) => { return C.getLinkVisibility(link); },
directionalArrow: 3,
directionalParticle: 3,
- particleWidth: (link) => { return C.getLinkWidth(link); },
- particleColor: (link) => { return C.getLinkColor(link); },
+ particleWidth: (link) => {
+ return (C.getLinkWidth(link, linkThickness) * 150 / 100);
+ },
+ particleColor: (link) => {
+ return changeLinkColor(
+ C.getLinkColor(link), theme[0] === "light" ? -50 : 50
+ );
+ },
};
const options3D: IGraphOptions3D = {
@@ -315,6 +324,7 @@ function Callgraph(): JSX.Element {
panelVisibleState={panelVisibleState}
verticalSpacingState={[ verticalSpacing, setVerticalSpacing ]}
horizontalSpacingState={[ horizontalSpacing, setHorizontalSpacing ]}
+ linkThicknessState={[ linkThickness, setLinkThickness ]}
selectedFunctions={selectedFunctions}
taintedFunctions={taintedFunctions}
unprovenPropertiesFunctions={unprovenPropertiesFunctions}