Merge pull request #68 from kieler/jep/edgeLabels

added background for edge labels to make them more readable

Author: Drakae

extension/src-webview/css/diagram.css

@@ -22,6 +22,12 @@
 @import "./fta-diagram.css";
 @import "./context-menu.css";
 
+.label-background {
+    fill: white;
+    stroke: none;
+    opacity: 0.8;
+}
+
 .collapse-expand-triangle {
     fill: darkgrey;
 }

extension/src-webview/fta/fta-views.tsx

@@ -20,7 +20,7 @@ import { injectable } from 'inversify';
 import { VNode } from "snabbdom";
 import { IViewArgs, PolylineEdgeView, RectangularNodeView, RenderingContext, SEdgeImpl, SGraphImpl, SGraphView, svg } from 'sprotty';
 import { Point } from "sprotty-protocol";
-import { renderAndGate, renderEllipse, renderHorizontalLine, renderInhibitGate, renderKnGate, renderOrGate, renderRectangle, renderRoundedRectangle, renderVerticalLine } from "../views-rendering";
+import { renderAndGate, renderEllipse, renderHorizontalLine, renderInhibitGate, renderKnGate, renderOrGate, renderRectangleForNode, renderRoundedRectangle, renderVerticalLine } from "../views-rendering";
 import { DescriptionNode, FTAEdge, FTAGraph, FTANode, FTAPort, FTA_DESCRIPTION_NODE_TYPE, FTA_EDGE_TYPE, FTA_NODE_TYPE, FTA_PORT_TYPE, FTNodeType } from './fta-model';
 
 @injectable()
@@ -58,7 +58,7 @@ export class FTAInvisibleEdgeView extends PolylineArrowEdgeViewFTA {
 export class DescriptionNodeView extends RectangularNodeView {
     render(node: DescriptionNode, context: RenderingContext): VNode | undefined {
         // render the description node similar to an on edge label
-        const element = renderRectangle(node);
+        const element = renderRectangleForNode(node);
         const border1 = renderHorizontalLine(node);
         const border2 = renderHorizontalLine(node);
         const edge = renderVerticalLine(node);
@@ -93,7 +93,7 @@ export class FTANodeView extends RectangularNodeView {
                     {context.renderChildren(node)}
                 </g>;
             case FTNodeType.TOPEVENT:
-                element = renderRectangle(node);
+                element = renderRectangleForNode(node);
                 break;
             case FTNodeType.COMPONENT:
             case FTNodeType.CONDITION:
@@ -112,7 +112,7 @@ export class FTANodeView extends RectangularNodeView {
                 element = renderInhibitGate(node);
                 break;
             default:
-                element = renderRectangle(node);
+                element = renderRectangleForNode(node);
                 break;
         }
 

extension/src-webview/stpa/stpa-views.tsx

@@ -23,7 +23,7 @@ import { Point, toDegrees } from "sprotty-protocol";
 import { DISymbol } from '../di.symbols';
 import { ColorStyleOption, DifferentFormsOption, FeedbackStyleOption, RenderOptionsRegistry, dottedFeedback, lightGreyFeedback } from '../options/render-options-registry';
 import { SendModelRendererAction } from '../snippets/actions';
-import { renderCollapseIcon, renderDiamond, renderEllipse, renderExpandIcon, renderHexagon, renderMirroredTriangle, renderOval, renderPentagon, renderRectangle, renderRoundedRectangle, renderTrapez, renderTriangle } from '../views-rendering';
+import { renderCollapseIcon, renderDiamond, renderEllipse, renderExpandIcon, renderHexagon, renderMirroredTriangle, renderOval, renderPentagon, renderRectangle, renderRectangleForNode, renderRoundedRectangle, renderTrapez, renderTriangle } from '../views-rendering';
 import { collectAllChildren } from './helper-methods';
 import { CSEdge, CSNode, CS_EDGE_TYPE, CS_INTERMEDIATE_EDGE_TYPE, CS_NODE_TYPE, EdgeType, STPAAspect, STPAEdge, STPANode, STPA_EDGE_TYPE, STPA_INTERMEDIATE_EDGE_TYPE } from './stpa-model';
 
@@ -179,7 +179,7 @@ export class STPANodeView extends RectangularNodeView {
                     element = renderTrapez(node);
                     break;
                 case STPAAspect.HAZARD:
-                    element = renderRectangle(node);
+                    element = renderRectangleForNode(node);
                     break;
                 case STPAAspect.SYSTEMCONSTRAINT:
                     element = renderHexagon(node);
@@ -200,7 +200,7 @@ export class STPANodeView extends RectangularNodeView {
                     element = renderDiamond(node);
                     break;
                 default:
-                    element = renderRectangle(node);
+                    element = renderRectangleForNode(node);
                     break;
             }
         } else if (lessColoredNode) {
@@ -210,7 +210,7 @@ export class STPANodeView extends RectangularNodeView {
                 case STPAAspect.SYSTEMCONSTRAINT:
                 case STPAAspect.UCA:
                 case STPAAspect.SCENARIO:
-                    element = renderRectangle(node);
+                    element = renderRectangleForNode(node);
                     break;
                 case STPAAspect.HAZARD:
                 case STPAAspect.RESPONSIBILITY:
@@ -219,11 +219,11 @@ export class STPANodeView extends RectangularNodeView {
                     element = renderRoundedRectangle(node);
                     break;
                 default:
-                    element = renderRectangle(node);
+                    element = renderRectangleForNode(node);
                     break;
             }
         } else {
-            element = renderRectangle(node);
+            element = renderRectangleForNode(node);
         }
 
         // if an STPANode is selected, the components not connected to it should fade out
@@ -344,8 +344,12 @@ export class EdgeLabelView extends SLabelView {
         if (vnode?.data?.class) {
             vnode.data.class['missing-feedback-label'] = missingFeedbackLabel ?? false;
         }
-
-        return vnode;
+        // add a background to the label to make it better readable
+        const background = renderRectangle(0, 2-label.bounds.height, label.bounds.width, label.bounds.height);
+        return <g>
+            <g class-label-background={true}>{background}</g>
+            {vnode}
+        </g>;
     }
 }
 

extension/src-webview/views-rendering.tsx

@@ -56,13 +56,28 @@ export function renderEllipse(x: number | undefined, y: number | undefined, widt
  * @param node The node that should be represented by a rectangle.
  * @returns A rectangle for {@code node}.
  */
-export function renderRectangle(node: SNodeImpl): VNode {
+export function renderRectangleForNode(node: SNodeImpl): VNode {
     return <rect
         x="0" y="0"
         width={Math.max(node.size.width, 0)} height={Math.max(node.size.height, 0)}
     />;
 }
 
+/**
+ * Creates a rectangle for with the given parameters.
+ * @param x The x-coordinate of the rectangle.
+ * @param y The y-coordinate of the rectangle.
+ * @param width The width of the rectangle.
+ * @param height The height of the rectangle.
+ * @returns A rectangle with the given parameters.
+ */
+export function renderRectangle(x: number, y: number, width: number, height: number): VNode {
+    return <rect
+        x={x} y={y}
+        width={Math.max(width, 0)} height={Math.max(height, 0)}
+    />;
+}
+
 export function renderPort(x:number, y: number, width: number, height: number): VNode {
     return <rect
         x={x} y={y}