From 43ad9ac8e52f9ccc5cb5910c4257ff1e83b454b0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=AFc=20Correnson?= <loic.correnson@cea.fr>
Date: Fri, 7 Jun 2024 16:13:33 +0200
Subject: [PATCH] [dome] styling DOT diagrams
---
ivette/src/dome/renderer/graph/diagram.tsx | 22 ++++++++++++++++++----
1 file changed, 18 insertions(+), 4 deletions(-)
diff --git a/ivette/src/dome/renderer/graph/diagram.tsx b/ivette/src/dome/renderer/graph/diagram.tsx
index f2c2c732aff..abc9c7bcf00 100644
--- a/ivette/src/dome/renderer/graph/diagram.tsx
+++ b/ivette/src/dome/renderer/graph/diagram.tsx
@@ -35,6 +35,8 @@ import './style.css';
export type Direction = 'LR' | 'TD';
+export type Font = 'serif' | 'sans' | 'mono';
+
export type Color =
| 'white' | 'grey' | 'dark'
| 'primary' | 'selected'
@@ -45,7 +47,7 @@ export type Shape =
| 'point' | 'box'
| 'diamond' | 'hexagon'
| 'circle' | 'ellipse'
- | 'note' | 'tab' | 'folder';
+ | 'note' | 'tab' | 'folder' | 'cds';
export type Arrow = 'none' | 'arrow' | 'tee' | 'box' | 'dot';
@@ -64,6 +66,8 @@ export interface Node {
label?: string;
/** Node tooltip */
title?: string;
+ /** Node font (label) */
+ font?: Font;
/** Node color (filled background) */
color?: Color;
/**
@@ -94,6 +98,8 @@ export interface Edge {
head?: Arrow;
/** Default is `none` */
tail?: Arrow;
+ /** Label font */
+ font?: Font;
/** Label */
label?: string;
/** Tooltip */
@@ -148,9 +154,15 @@ export interface DiagramProps {
}
/* -------------------------------------------------------------------------- */
-/* --- Color Model --- */
+/* --- CSS Model --- */
/* -------------------------------------------------------------------------- */
+const FONTNAME = {
+ 'serif': 'Times',
+ 'sans': 'sans-serif',
+ 'mono': 'Courier',
+};
+
// node background colors
const BGCOLOR = {
'white': '#fff',
@@ -340,7 +352,8 @@ class Builder {
.print(' ')
.port(n.id)
.print(' [')
- .attr('id', n.id);
+ .attr('id', n.id)
+ .attr('fontname', n.font ? FONTNAME[n.font] : undefined);
if (typeof n.shape === 'object') {
this
.attr('shape', 'record')
@@ -399,6 +412,7 @@ class Builder {
.port(e.target, e.targetPort)
.print(' [')
.attr('label', e.label)
+ .attr('fontname', e.font ? FONTNAME[e.font] : undefined)
.attr('headlabel', e.headLabel)
.attr('taillabel', e.tailLabel)
.attr('labeltooltip', e.label ? tooltip : undefined)
@@ -476,7 +490,7 @@ function GraphvizView(props: GraphvizProps): JSX.Element {
setError(undefined);
graphviz(href, {
useWorker: false,
- fit: true, zoom: true, width, height,
+ fit: false, zoom: true, width, height,
}).onerror(setError)
.renderDot(model).on('end', function () {
if (onSelection) {
--
GitLab