add nodes style based on text props

src/components/NodeMap.vue

@@ -12,8 +12,8 @@
       :key="index"
       :cx="node.x"
       :cy="node.y"
-      :fill="getNodeFill(node)"
-      :r="5"
+      :class="node.data.class"
+      :r="node.children ? 7 : 5"
     >
       <title>{{ node.data.name }}</title>
     </circle>
@@ -107,10 +107,6 @@ export default {
         .force('center', forceCenter(this.width * 0.5, this.height * 0.5))
     },
 
-    getNodeFill (node) {
-      return node.data.type === 'textref' ? 'red' : 'black'
-    },
-
     // DRAG EVENT HANDLER
 
     onNodeDragStart (e, node) {
@@ -142,4 +138,20 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+path {
+  stroke: grey;
+}
+
+@each $id in map-keys($families){
+  .family-#{$id} {
+    fill: setColorFromId($id);
+    @if $id == 9 {
+      stroke: black;
+    }
+  }
+}
+
+.first {
+  stroke-width: 2px;
+}
 </style>