Tweaking appearance of convergent maps to make them more legible.

edumeneses · Jul 28, 2021 · 167e4a1 · 167e4a1
1 parent 0fe60e5
commit 167e4a1
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 12 deletions.
diff --git a/js/views/ListView.js b/js/views/ListView.js
@@ -136,14 +136,25 @@ class ListMapPainter extends MapPainter
 
         if (Math.abs(src.x - dst.x) < 1)
             this.vertical(src, dst, i);
-        else this.betweenTables(src, dst, i);
+        else
+            this.betweenTables(src, dst, i);
     }
 
     betweenTables(src, dst, i, dstPos)
     {
-        let mpx = dstPos ? dst.x : (src.x + dst.x) * 0.5;
-        this.pathspecs[i] = [['M', src.x, src.y],
-                             ['C', mpx, src.y, mpx, dst.y, dst.x, dst.y]];
+        let mpx = this.frame.cx;
+        if (src.isnode)
+            mpx = dstPos ? dst.x : (src.x + dst.x) * 0.5;
+
+        if (dst.isnode == true) {
+            let offset = 50;
+            this.pathspecs[i] = [['M', src.x, src.y],
+                                 ['C', mpx, src.y, dst.x + dst.vx * offset, dst.y, dst.x, dst.y]];
+        }
+        else {
+            this.pathspecs[i] = [['M', src.x, src.y],
+                                 ['C', mpx, src.y, mpx, dst.y, dst.x, dst.y]];
+        }
     }
 
     vertical(src, dst, i) 
@@ -196,7 +207,9 @@ class ListMapPainter extends MapPainter
     }
 
     getNodePosition() {
-        return super.getNodePosition(50);
+        let offset = 50;
+        let dst = this.map.dst.position;
+        return {x: dst.x + dst.vx * offset, y: dst.y, vx: dst.vx, vy: 0, isnode: 1};
     }
 }
 

diff --git a/js/views/MapPainter.js b/js/views/MapPainter.js
@@ -213,7 +213,7 @@ class MapPainter {
                 attributes = this.attributes[0];
 
             // hide arrowhead if path is short to avoid Raphael error message
-            if (len < 50)
+            if (len < 30)
                 attributes['arrow-end'] = 'none';
 
             if (typeof path === 'undefined' || path[0] == null) 
@@ -291,7 +291,7 @@ class MapPainter {
                 y += offset * dst.vy;
         }
 
-        return {x: x, y: y, vy: 0};
+        return {x: x, y: y, vx: x < dst.x ? -1 : 1, vy: 0, isnode: true};
     }
 
     circle_spec(x, y, radius = 7)

diff --git a/js/views/View.js b/js/views/View.js
@@ -462,7 +462,7 @@ class View {
                     self.newMap =
                         {
                             'srcs': [sig],
-                            'dst': {'position': {'x': x, 'y': y}, 'device': {'hidden' : false}, 'view': {}},
+                            'dst': {'position': {x: x, y: y, vx: 0, vy: 0}, 'device': {'hidden' : false}, 'view': {}},
                             'selected': true,
                             'hidden': false
                         };
@@ -476,7 +476,7 @@ class View {
                     }
                     if (!self._continue_map_snap(x, y)) {
                         self._unsnap_to_map();
-                        self.newMap.dst.position = {'x': x, 'y': y};
+                        self.newMap.dst.position = {x: x, y: y, vx: 0, vy: 0};
                     }
                 }
                 self.newMap.view.draw(0);
@@ -786,7 +786,7 @@ class View {
                 self.newMap = 
                 {
                     'srcs': [self.draggingFrom],
-                    'dst': {position: {x: 0, y: 0}},
+                    'dst': {position: {x: 0, y: 0, vx: 0, vy: 0}},
                     'selected': true
                 };
                 self.newMap.view = new self.mapPainter(self.newMap, self.canvas,
@@ -838,7 +838,7 @@ class View {
                                 break;
                             }
                             if (!dst) {
-                                self.newMap.dst = {position: {x: svgx, y: svgy}};
+                                self.newMap.dst = {position: {x: svgx, y: svgy, vx: 0, vy: 0}};
                             }
                         }
                     }
@@ -952,7 +952,10 @@ class View {
     {
         let selected_path = map.view.intersected;
         let selected_len = selected_path.getTotalLength();
-        return selected_path.getPointAtLength(selected_len / 2);
+        let pos = selected_path.getPointAtLength(selected_len / 2);
+        pos.vx = 0;
+        pos.vy = 0;
+        return pos;
     }
 
     _snap_to_map(snap_map)