Allow always-on interstate edge labels

src/renderer/renderer_elements.ts

@@ -814,8 +814,6 @@ export class InterstateEdge extends Edge {
         this.create_arrow_line(ctx);
 
         let style = this.strokeStyle(renderer);
-        if (this.hovered)
-            renderer.set_tooltip((c) => this.tooltip(c, renderer));
 
         // Interstate edge
         if (style === this.getCssProperty(renderer, '--color-default'))
@@ -840,11 +838,16 @@ export class InterstateEdge extends Edge {
             ctx, this.points[this.points.length - 2],
             this.points[this.points.length - 1], 3
         );
+
+        if (SDFVSettings.alwaysOnISEdgeLabels) {
+            this.drawLabel(renderer, ctx);
+        } else {
+            if (this.hovered)
+                renderer.set_tooltip((c) => this.tooltip(c, renderer));
+        }
     }
 
-    public tooltip(
-        container: HTMLElement, renderer: SDFGRenderer | undefined = undefined
-    ): void {
+    public tooltip(container: HTMLElement, renderer?: SDFGRenderer): void {
         if (!renderer)
             return;
         super.tooltip(container);
@@ -854,6 +857,25 @@ export class InterstateEdge extends Edge {
             container.style.display = 'none';
     }
 
+    public drawLabel(
+        renderer: SDFGRenderer, ctx: CanvasRenderingContext2D
+    ): void {
+        ctx.fillStyle = this.getCssProperty(renderer, '--color-default');
+        const oldFont = ctx.font;
+        ctx.font = '8px sans-serif';
+        const labelMetrics = ctx.measureText(this.label());
+        const labelW = Math.abs(labelMetrics.actualBoundingBoxLeft) +
+            Math.abs(labelMetrics.actualBoundingBoxRight);
+        const labelH = Math.abs(labelMetrics.actualBoundingBoxDescent) +
+            Math.abs(labelMetrics.actualBoundingBoxAscent);
+        const offsetX = this.points[0].x > this.points[1].x ? -(labelW + 5) : 5;
+        const offsetY = this.points[0].y > this.points[1].y ? -5 : (labelH + 5);
+        ctx.fillText(
+            this.label(), this.points[0].x + offsetX, this.points[0].y + offsetY
+        );
+        ctx.font = oldFont;
+    }
+
 }
 
 export class Connector extends SDFGElement {
@@ -1720,10 +1742,12 @@ export class LibraryNode extends SDFGNode {
  */
 function batched_draw_edges(
     renderer: SDFGRenderer, graph: DagreSDFG, ctx: CanvasRenderingContext2D,
-    visible_rect: SimpleRect | null, mousepos: Point2D | null, color: string
+    visible_rect: SimpleRect | null, mousepos: Point2D | null, color: string,
+    labelled: boolean = false
 ): void {
     const deferredEdges: any[] = [];
     const arrowEdges: any[] = [];
+    const labelEdges: any[] = [];
     ctx.beginPath();
     graph.edges().forEach((e: any) => {
         const edge: Edge = (graph.edge(e) as Edge);
@@ -1751,6 +1775,13 @@ function batched_draw_edges(
             lPoint.y <= visible_rect.y + visible_rect.h)
             arrowEdges.push(edge);
 
+        const fPoint = edge.points[0];
+        if (labelled && visible_rect && fPoint.x >= visible_rect.x &&
+            fPoint.x <= visible_rect.x + visible_rect.w &&
+            fPoint.y >= visible_rect.y &&
+            fPoint.y <= visible_rect.y + visible_rect.h)
+            labelEdges.push(edge);
+
         edge.create_arrow_line(ctx);
     });
     ctx.setLineDash([1, 0]);
@@ -1763,6 +1794,10 @@ function batched_draw_edges(
         );
     });
 
+    labelEdges.forEach(e => {
+        (e as InterstateEdge).drawLabel(renderer, ctx);
+    });
+
     deferredEdges.forEach(e => {
         e.draw(renderer, ctx, mousepos);
     });
@@ -1792,7 +1827,8 @@ export function draw_sdfg(
     const g = sdfg_dagre;
     if (!(ctx as any).lod || ppp < SDFV.EDGE_LOD)
         batched_draw_edges(
-            renderer, g, ctx, visible_rect, mousepos, '--interstate-edge-color'
+            renderer, g, ctx, visible_rect, mousepos, '--interstate-edge-color',
+            SDFVSettings.alwaysOnISEdgeLabels
         );
 
 
@@ -1861,7 +1897,8 @@ export function draw_sdfg(
                 return;
 
             batched_draw_edges(
-                renderer, ng, ctx, visible_rect, mousepos, '--color-default'
+                renderer, ng, ctx, visible_rect, mousepos, '--color-default',
+                false
             );
         }
     });
@@ -1951,7 +1988,7 @@ type AdaptiveTextPadding = {
     top?: number,
     right?: number,
     bottom?: number,
-}
+};
 
 export function drawAdaptiveText(
     ctx: CanvasRenderingContext2D, renderer: SDFGRenderer, far_text: string,

src/utils/sdfv_settings.ts

@@ -25,6 +25,7 @@ export class SDFVSettings {
     private readonly settingsDict: Record<string, boolean | string | number> = {
         // User modifiable settings fields.
         'minimap': true,
+        'alwaysOnISEdgeLabels': true,
         'showAccessNodes': true,
         'showStateNames': true,
         'showMapSchedules': true,
@@ -85,6 +86,10 @@ export class SDFVSettings {
                     this.renderer?.disableMinimap();
             }
         );
+        this.addToggle(
+            root, 'Always show interstate edge labels', 'alwaysOnISEdgeLabels',
+            true
+        );
         this.addToggle(root, 'Show access nodes', 'showAccessNodes', true);
         this.addToggle(root, 'Show state names', 'showStateNames');
         this.addToggle(root, 'Show map schedules', 'showMapSchedules');
@@ -208,6 +213,12 @@ export class SDFVSettings {
         return SDFVSettings.getInstance().settingsDict['minimap'] as boolean;
     }
 
+    public static get alwaysOnISEdgeLabels(): boolean {
+        return SDFVSettings.getInstance().settingsDict[
+            'alwaysOnISEdgeLabels'
+        ] as boolean;
+    }
+
     public static get showAccessNodes(): boolean {
         return SDFVSettings.getInstance().settingsDict[
             'showAccessNodes'