Node highlighting

EditorNode.js

@@ -20,6 +20,7 @@ class EditorNode extends EditorEntryBase {
     return {
       type: 'node',
       label: this.getLabel(),
+      highlight: this.elem_.classList.contains('highlight'),
     };
   }
 
@@ -32,6 +33,10 @@ class EditorNode extends EditorEntryBase {
     this.onInput();
   }
 
+  setHighlight(highlight) {
+    this.elem_.classList.toggle('highlight', highlight);
+  }
+
   wantFocus() {
     return this.getLabel() == '';
   }
@@ -91,6 +96,13 @@ class EditorNode extends EditorEntryBase {
         e.stopPropagation();
         e.preventDefault();
         break;
+
+      case ' ':
+        this.elem_.classList.toggle('highlight');
+        this.onInput();
+        e.stopPropagation();
+        e.preventDefault();
+        break;
     }
   }
 
@@ -105,6 +117,7 @@ class EditorNode extends EditorEntryBase {
   static unserialize(ser) {
     let node = new EditorNode();
     node.setLabel(ser.label);
+    node.setHighlight(ser.highlight);
     return node.getElement();
   }
 }

GraphNode.js

@@ -108,6 +108,7 @@ class GraphNode {
     let node = new GraphNode();
     node.label = item.label;
     node.soft = soft;
+    node.highlight = item.highlight;
     return node;
   }
 }

Grid.js

@@ -42,7 +42,7 @@ class Grid {
           break;
 
         case 'node':
-          this.drawNode(step.label, step.pos);
+          this.drawNode(step.label, step.pos, step.highlight);
           break;
       }
     }
@@ -122,11 +122,12 @@ class Grid {
     this.toSize_.push(elem);
   }
 
-  drawNode(label, pos) {
+  drawNode(label, pos, highlight) {
     let node = document.createElement('div');
     node.classList.add('gridNode');
     this.container_.appendChild(node);
     node.innerText = label;
+    node.classList.toggle('highlight', highlight);
     node.style.gridColumn = pos[0] + 1;
     node.style.gridRow = pos[1] + 1;
     this.toSize_.push(node);

LayoutNode.js

@@ -105,6 +105,7 @@ class LayoutNode {
       type: 'node',
       pos: this.pos,
       label: this.graphNode_.label,
+      highlight: this.graphNode_.highlight,
     };
   }
 }

architype.css

@@ -84,6 +84,14 @@ body {
   background-color: var(--node);
 }
 
+.editor li.node.highlight {
+  background: repeating-linear-gradient(
+    -45deg,
+    transparent 0 10px,
+    rgba(255,0,0,0.3) 10px 20px
+  ), var(--node);
+}
+
 .editor li.group {
   background-color: var(--group);
 }
@@ -195,6 +203,11 @@ body {
   z-index: 3;
 }
 
+.gridNode.highlight {
+  border-color: var(--focus);
+  border-width: 3px;
+}
+
 .gridGraphLabel {
   height: 100%;
   width: 100%;