[dome/diagram] edge styling

ivette/src/dome/renderer/graph/diagram.tsx

@@ -36,17 +36,10 @@ import './style.css';
 export type Direction = 'LR' | 'TD';
 
 export type Color =
-  | 'white'
-  | 'grey'
-  | 'dark'
-  | 'primary'
-  | 'selected'
-  | 'green'
-  | 'orange'
-  | 'red'
-  | 'yellow'
-  | 'blue'
-  | 'pink';
+  | 'white' | 'grey' | 'dark'
+  | 'primary' | 'selected'
+  | 'green' | 'orange' | 'red'
+  | 'yellow' | 'blue' | 'pink';
 
 export type Shape =
   | 'point' | 'box'
@@ -54,6 +47,10 @@ export type Shape =
   | 'circle' | 'ellipse'
   | 'note' | 'tab' | 'folder';
 
+export type Arrow = 'none' | 'arrow' | 'tee' | 'box' | 'dot';
+
+export type Line = 'solid' | 'dashed' | 'dotted';
+
 export type Cell = string | { label: string, port: string };
 
 export type Box = Cell | Box[];
@@ -83,9 +80,26 @@ export interface Edge {
   source: string;
   /** Source port (provided source node has box shape) */
   sourcePort?: string;
+  /** Target node identifier */
   target: string;
   /** Target port (provided target node has box shape) */
   targetPort?: string;
+  /** Default is `solid` */
+  line?: Line;
+  /** Default is `dark` */
+  color?: Color;
+  /** Default is `arrow` */
+  head?: Arrow;
+  /** Default is `none` */
+  tail?: Arrow;
+  /** Label */
+  label?: string;
+  /** Tooltip */
+  title?: string;
+  /** Head label */
+  headLabel?: string,
+  /** Tail label */
+  tailLabel?: string,
 }
 
 /* -------------------------------------------------------------------------- */
@@ -151,6 +165,29 @@ const FGCOLOR = {
   'pink': 'white',
 };
 
+const EDCOLOR = {
+  'white': '#ccc',
+  'grey': '#888',
+  'dark': 'black',
+  'primary': 'dodgerblue',
+  'selected': 'deepskyblue',
+  'green': 'green',
+  'orange': 'orange',
+  'red': 'red',
+  'yellow': '#e5e100',
+  'blue': 'deepskyblue',
+  'pink': 'palevioletred1',
+};
+
+/* -------------------------------------------------------------------------- */
+/* --- Edge Model                                                         --- */
+/* -------------------------------------------------------------------------- */
+
+const DIR = (h: Arrow, t: Arrow): string | undefined =>
+  h === 'none'
+    ? (t === 'none' ? 'none' : 'back')
+    : (t === 'none' ? undefined : 'both');
+
 /* -------------------------------------------------------------------------- */
 /* --- Dot Model                                                          --- */
 /* -------------------------------------------------------------------------- */
@@ -235,12 +272,22 @@ class DotModel {
 
   // --- Edge
   edge(e: Edge): void {
+    const { line = 'solid', head = 'arrow', tail = 'none' } = e;
     this
       .print('  ')
       .port(e.source, e.sourcePort)
       .print(' -> ')
       .port(e.target, e.targetPort)
       .print(' [')
+      .attr('label', e.label)
+      .attr('headlabel', e.headLabel)
+      .attr('taillabel', e.tailLabel)
+      .attr('labeltooltip', e.title)
+      .attr('dir', DIR(head, tail))
+      .attr('color', e.color ? EDCOLOR[e.color] : undefined)
+      .attr('style', line === 'solid' ? undefined : line)
+      .attr('arrowhead', head === 'arrow' ? undefined : head)
+      .attr('arrowtail', tail === 'arrow' ? undefined : tail)
       .println('];');
   }
 }

ivette/src/sandbox/dotdiagram.tsx

@@ -40,9 +40,9 @@ const nodes: Node[] = [
   {
     id: 'R',
     shape: [
-      { label: 'C', port: 'c' },
+      { label: 'Dotted (c)', port: 'c' },
       ['D1', 'D2'],
-      { label: 'E', port: 'e' },
+      { label: 'Dashed (e)', port: 'e' },
     ]
   },
   { id: 'white', color: 'white' },
@@ -56,18 +56,35 @@ const nodes: Node[] = [
   { id: 'yellow', color: 'yellow' },
   { id: 'blue', color: 'blue' },
   { id: 'pink', color: 'pink' },
+  { id: 'X' }, { id: 'Y' }
 ];
 
 const edges: Edge[] = [
-  { source: 'A', target: 'R', targetPort: 'c' },
-  { source: 'R', target: 'B', sourcePort: 'e' },
+  { source: 'A', target: 'R', targetPort: 'c', headLabel: 'c', line: 'dotted' },
+  { source: 'R', target: 'B', sourcePort: 'e', tailLabel: 'e', line: 'dashed' },
   { source: 'primary', target: 'selected' },
   { source: 'white', target: 'grey' },
   { source: 'grey', target: 'dark' },
   { source: 'green', target: 'orange' },
   { source: 'orange', target: 'red' },
   { source: 'yellow', target: 'pink' },
-  { source: 'pink', target: 'blue' }
+  { source: 'pink', target: 'blue' },
+  { source: 'white', target: 'white', color: 'white' },
+  { source: 'grey', target: 'grey', color: 'grey' },
+  { source: 'dark', target: 'dark', color: 'dark' },
+  { source: 'primary', target: 'primary', color: 'primary' },
+  { source: 'selected', target: 'selected', color: 'selected' },
+  { source: 'green', target: 'green', color: 'green' },
+  { source: 'orange', target: 'orange', color: 'orange' },
+  { source: 'red', target: 'red', color: 'red' },
+  { source: 'yellow', target: 'yellow', color: 'yellow' },
+  { source: 'blue', target: 'blue', color: 'blue' },
+  { source: 'pink', target: 'pink', color: 'pink' },
+  {
+    source: 'X', target: 'Y',
+    tail: 'box', head: 'dot',
+    label: '*', title: 'box to dot'
+  },
 ];
 
 function DiagramSample(): JSX.Element {