From d52c8206a6660ca66fe8e8a1c0c1744a8c1bd329 Mon Sep 17 00:00:00 2001
From: Ian Gulliver <ian@flamingcow.tv>
Date: Wed, 10 Jul 2019 23:19:39 +0000
Subject: [PATCH] Node highlighting

---
 EditorNode.js | 13 +++++++++++++
 GraphNode.js  |  1 +
 Grid.js       |  5 +++--
 LayoutNode.js |  1 +
 architype.css | 13 +++++++++++++
 5 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/EditorNode.js b/EditorNode.js
index bfc196a..cfec01b 100644
--- a/EditorNode.js
+++ b/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();
   }
 }
diff --git a/GraphNode.js b/GraphNode.js
index 924db88..e6e66b8 100644
--- a/GraphNode.js
+++ b/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;
   }
 }
diff --git a/Grid.js b/Grid.js
index ccb7b25..11f289a 100644
--- a/Grid.js
+++ b/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);
diff --git a/LayoutNode.js b/LayoutNode.js
index 009800b..8850519 100644
--- a/LayoutNode.js
+++ b/LayoutNode.js
@@ -105,6 +105,7 @@ class LayoutNode {
       type: 'node',
       pos: this.pos,
       label: this.graphNode_.label,
+      highlight: this.graphNode_.highlight,
     };
   }
 }
diff --git a/architype.css b/architype.css
index 62c1d6a..3f4fa3e 100644
--- a/architype.css
+++ b/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%;