From e4defbfe8281ab5b25dac7274505a2cbc568a1ff Mon Sep 17 00:00:00 2001
From: Rainer Simon <aboutgeo@gmail.com>
Date: Thu, 22 Sep 2022 13:37:50 +0200
Subject: [PATCH] Option to show first tag as arrow label

---
 public/index.html      |  4 +++-
 src/NetworkCanvas.js   |  6 ++++--
 src/NetworkCanvas.scss | 15 +++++++++++++++
 src/index.jsx          |  2 +-
 src/svg/SVGEdge.js     | 30 +++++++++++++++++++++++++++++-
 5 files changed, 52 insertions(+), 5 deletions(-)

diff --git a/public/index.html b/public/index.html
index bf4960e..98e387a 100644
--- a/public/index.html
+++ b/public/index.html
@@ -63,7 +63,9 @@ <h1>Homer: The Odyssey</h1>
           image: 'hallstatt'
         });
 
-        var connections = recogito.Connections([ r, a ]);
+        var connections = recogito.Connections([ r, a ], {
+          showLabels: true
+        });
 
         connections.on('createConnection', function(c) {
           console.log('created', c);
diff --git a/src/NetworkCanvas.js b/src/NetworkCanvas.js
index fac8d84..071f3f9 100644
--- a/src/NetworkCanvas.js
+++ b/src/NetworkCanvas.js
@@ -21,12 +21,14 @@ const isHandle = element =>
 
 export default class NetworkCanvas extends EventEmitter {
 
-  constructor(instances) {
+  constructor(instances, config) {
     super();
 
     // List of RecogitoJS/Annotorious instances
     this.instances = instances;
 
+    this.config = config;
+
     this.svg = SVG().addTo('body');
     this.svg.attr('class', 'r6o-connections-canvas');
 
@@ -42,7 +44,7 @@ export default class NetworkCanvas extends EventEmitter {
   }
 
   addEdge = edge => {
-    const svgEdge = new SVGEdge(edge, this.svg);
+    const svgEdge = new SVGEdge(edge, this.svg, this.config);
 
     svgEdge.on('click', () =>
       this.emit('selectConnection', edge.toAnnotation(), svgEdge.midpoint));
diff --git a/src/NetworkCanvas.scss b/src/NetworkCanvas.scss
index d7616ff..8fbda95 100644
--- a/src/NetworkCanvas.scss
+++ b/src/NetworkCanvas.scss
@@ -144,4 +144,19 @@ svg.r6o-connections-canvas {
 
   }
 
+  .r6o-connections-edge-label {
+
+    rect {
+      fill: rgba(255, 255, 255, 0.8);
+      stroke: rgba(0, 0, 0, 0.65);
+    }
+
+    text {
+      font-family: Arial, Helvetica, sans-serif;
+      font-size: 14px;
+      font-weight: bold;
+    }
+
+  }
+
 }
\ No newline at end of file
diff --git a/src/index.jsx b/src/index.jsx
index 5416c7f..6f9a6c3 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -30,7 +30,7 @@ class ConnectionsPlugin extends EventEmitter {
       instances : [ instances ];
 
     // Single network canvas, covering the browser viewport
-    this.canvas = new NetworkCanvas(this.instances);
+    this.canvas = new NetworkCanvas(this.instances, config);
 
     this.instances.forEach(this.patchInstance);
   
diff --git a/src/svg/SVGEdge.js b/src/svg/SVGEdge.js
index 6e3b868..d8aa324 100644
--- a/src/svg/SVGEdge.js
+++ b/src/svg/SVGEdge.js
@@ -9,7 +9,7 @@ import { ARROW_CONFIG } from './Config';
  */
 export default class SVGEdge extends EventEmitter {
 
-  constructor(edge, svg) {
+  constructor(edge, svg, config) {
     super();
 
     this.edge = edge;
@@ -40,6 +40,29 @@ export default class SVGEdge extends EventEmitter {
     this.g.polygon('0,-6 12,0, 0,6')
       .attr('class', 'r6o-connections-edge-head');
 
+    const firstTag = edge.bodies
+      .find(b => b.purpose === 'tagging');
+
+    if (firstTag && config.showLabels) {
+      const label = this.g.group()
+        .attr('class', 'r6o-connections-edge-label');
+
+      const rect = label.rect();
+
+      const text = label.text(firstTag.value)
+        .attr('y', 4.5);
+      
+      const { width, height } = text.node.getBBox();
+
+      rect
+        .attr('x', -5.5)
+        .attr('y', - Math.round(height / 2) - 1.5)
+        .attr('rx', 2)
+        .attr('ry', 2)
+        .attr('width', Math.round(width) + 10)
+        .attr('height', Math.round(height) + 4);
+    }
+
     // Initial render
     this.redraw();
   }
@@ -77,6 +100,11 @@ export default class SVGEdge extends EventEmitter {
       this.g.find('polygon')
         .attr('transform', `translate(${ex},${ey}) rotate(${endAngleAsDegrees})`);
 
+      // Label (if any)
+      const label = this.g.find('.r6o-connections-edge-label');
+      if (label)
+        label.attr('transform', `translate(${cx},${cy})`);
+
       // Expose essential anchor points
       this.startpoint = { x: sx, y: sy };
       this.midpoint = { x: cx, y: cy };