Interface changes for better usability

www/css/styles.css

@@ -1,6 +1,7 @@
 body {
   font-family: "Noto Sans", sans-serif;
-  margin: 0; }
+  margin: 0;
+  font-size: 10pt; }
 
 .btn, input[type="submit"] {
   display: inline-block;
@@ -33,7 +34,7 @@ img.icon {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-  width: 430px;
+  width: 380px;
   height: 100%;
   overflow-y: scroll; }
   #status > div {
@@ -154,7 +155,7 @@ img.icon {
     position: absolute;
     top: 0;
     right: 0;
-    width: 420px;
+    width: 385px;
     max-height: 100%;
     overflow-y: auto; }
     #story #msg .msg__info, #story #msg .directions > div {

www/js/hugvey_console.js

@@ -398,7 +398,16 @@ class Graph {
         }
         let directionsEl = crel( 'div', { 'class': 'directions' },
             crel( 'h2', 'Directions' ),
-            ...toDirections, ...fromDirections
+            ...toDirections,
+            crel('div',{
+                'class': 'btn btn--create',
+                    'on': {
+                        'click': function(e) {
+                            panopticon.graph.createConnectedMsg(msg);
+                        }
+                    }
+                }, 'Create new message'),
+            ...fromDirections
         );
         msgEl.appendChild( directionsEl );
 
@@ -716,6 +725,15 @@ class Graph {
         this.addMsg();
         this.build();
     }
+    
+    createConnectedMsg(sourceMsg) {
+        let newMsg = this.addMsg();
+        this.addDirection(sourceMsg, newMsg);
+        this.build();
+
+        // reselect so that overview is updated
+        this.selectMsg(newMsg);
+    }
 
     getNodeById( id ) {
         return this.data.filter( node => node['@id'] == id )[0];
@@ -875,10 +893,11 @@ class Graph {
     build( isInit ) {
         this.simulation = d3.forceSimulation( this.messages )
             .force( "link", d3.forceLink( this.directions ).id( d => d['@id'] ) )
-            .force( "charge", d3.forceManyBody().strength( -1000 ) )
+            .force( "charge", d3.forceManyBody().strength( 100 ) )
             .force( "center", d3.forceCenter( this.width / 2, this.height / 2 ) )
-            .force( "collide", d3.forceCollide( this.nodeSize * 2 ) )
+            .force( "collide", d3.forceCollide( this.nodeSize * 1.7 ) )
             ;
+        this.simulation.velocityDecay(.99);
 
         // Update existing nodes
         let node = this.nodesG
@@ -901,6 +920,7 @@ class Graph {
             .attr( 'r', this.nodeSize )
             // .text(d => d.id)
             ;
+        
         let textId = newNodeG.append( "text" ).attr( 'class', 'msg_id' );
         let textContent = newNodeG.append( "text" ).attr( 'class', 'msg_txt' );
         let statusIcon = newNodeG.append( "image" )

www/scss/styles.scss

@@ -4,6 +4,7 @@ $status_width_open: 860px;
 body{
 	font-family: "Noto Sans", sans-serif;
 	margin: 0;
+	font-size: 10pt;
 }
 
 .btn, input[type="submit"]{
@@ -47,7 +48,7 @@ img.icon{
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
-	width: 430px;
+	width: 380px;
 	height: 100%;
 	overflow-y: scroll;
 	
@@ -255,7 +256,7 @@ img.icon{
         position: absolute;
         top:0;
         right:0;
-        width: 420px;
+        width: 385px;
         max-height:100%;
         overflow-y: auto;