Make nodes selectable from the grid

Architype.js

@@ -121,6 +121,7 @@ class Architype {
 
 <!--# include file="Editor.js" -->
 <!--# include file="Grid.js" -->
+<!--# include file="IdSource.js" -->
 
 <!--# include file="utils.js" -->
 

EditorEntryBase.js

@@ -6,6 +6,7 @@ class EditorEntryBase extends ListenUtils {
 
     this.elem_ = document.createElement('li');
     this.elem_.tabIndex = 0;
+    this.elem_.id = 'entry' + idSource.getId();
     this.listen(this.elem_, 'focus', () => this.onElemFocus());
     this.listen(this.elem_, 'keydown', (e) => this.onKeyDown(e));
 
@@ -37,6 +38,10 @@ class EditorEntryBase extends ListenUtils {
     return this.elem_;
   }
 
+  getId() {
+    return this.elem_.id;
+  }
+
   onElemFocus() {
     this.elem_.scrollIntoView({block: 'nearest'});
   }

EditorGroup.js

@@ -28,6 +28,7 @@ class EditorGroup extends EditorEntryBase {
   serialize() {
     return {
       type: 'group',
+      id: this.getId(),
       label: this.getLabel(),
       members: this.nodes_.serialize(EditorNode),
       highlight: this.elem_.classList.contains('highlight'),

EditorLink.js

@@ -25,6 +25,7 @@ class EditorLink extends EditorEntryBase {
   serialize() {
     return {
       type: 'link',
+      id: this.getId(),
       label: this.getLabel(),
       from: this.getFrom().serialize(),
       to: this.getTo().serialize(),

EditorNode.js

@@ -23,6 +23,7 @@ class EditorNode extends EditorEntryBase {
   serialize() {
     return {
       type: 'node',
+      id: this.getId(),
       label: this.getLabel(),
       highlight: this.elem_.classList.contains('highlight'),
     };

GraphGroup.js

@@ -26,6 +26,7 @@ class GraphGroup {
 
   static process(item) {
     let group = new GraphGroup();
+    group.id = item.id;
     group.label = item.label;
     group.highlight = item.highlight;
     group.nodeLabels = new Set();

GraphLink.js

@@ -9,11 +9,13 @@ class GraphLink {
       for (let to of this.to) {
         from.links.push({
           to: to,
+          id: this.id,
           label: this.label,
           highlight: this.highlight,
         });
         to.linksIn.push({
           from: from,
+          id: this.id,
           label: this.label,
           highlight: this.highlight,
         });
@@ -29,6 +31,7 @@ class GraphLink {
 
   static process(item) {
     let link = new GraphLink();
+    link.id = item.id;
     link.label = item.label;
     link.fromLabel = item.from.label;
     link.toLabel = item.to.label;

GraphNode.js

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

Grid.js

@@ -42,7 +42,7 @@ class Grid {
           break;
 
         case 'node':
-          this.drawNode(step.label, step.pos, step.highlight);
+          this.drawNode(step.id, step.label, step.pos, step.highlight);
           break;
       }
     }
@@ -125,7 +125,7 @@ class Grid {
     this.toSize_.push(elem);
   }
 
-  drawNode(label, pos, highlight) {
+  drawNode(id, label, pos, highlight) {
     let node = document.createElement('div');
     node.classList.add('gridNode');
     this.container_.appendChild(node);
@@ -134,6 +134,12 @@ class Grid {
     node.style.gridColumn = pos[0] + 1;
     node.style.gridRow = pos[1] + 1;
     this.toSize_.push(node);
+
+    node.addEventListener('click', (e) => {
+      let editorElem = document.getElementById(id);
+      editorElem.classList.toggle('highlight');
+      editorElem.setAttribute('data-arch-refresh', '');
+    });
   }
 
   fixSizes() {

IdSource.js

@@ -0,0 +1,15 @@
+class IdSource {
+  constructor() {
+    this.nextId_ = 1;
+  }
+
+  getId() {
+    return ++this.nextId_;
+  }
+
+  setId(nextId) {
+    this.nextId_ = nextId;
+  }
+}
+
+const idSource = new IdSource();

Layout.js

@@ -225,6 +225,7 @@ class Layout {
         links.push({
           from: from,
           to: link.to,
+          id: link.id,
           label: link.label,
           highlight: link.highlight,
         });
@@ -238,7 +239,8 @@ class Layout {
 
     for (let link of links) {
       this.links_.push(
-          new LayoutLink(link.from, link.to, link.label, link.highlight,
+          new LayoutLink(link.from, link.to, link.id, link.label,
+                         link.highlight,
                          this.nodesByPos_, this.linksByPos_,
                          this.labelsByPos_));
     }

LayoutGroup.js

@@ -88,6 +88,7 @@ class LayoutGroup {
       type: 'group',
       min: min,
       max: max,
+      id: this.graphGroup_.id,
       label: this.graphGroup_.label,
       highlight: this.graphGroup_.highlight,
     };

LayoutLink.js

@@ -1,7 +1,8 @@
 class LayoutLink {
-  constructor(from, to, label, highlight, nodesByPos, linksByPos, labelsByPos) {
+  constructor(from, to, id, label, highlight, nodesByPos, linksByPos, labelsByPos) {
     this.from_ = from;
     this.to_ = to;
+    this.id_ = id;
     this.label_ = label;
     this.highlight_ = highlight;
     this.nodesByPos_ = nodesByPos;
@@ -234,6 +235,7 @@ class LayoutLink {
         type: 'line',
         pos: Array.from(this.path[i]),
         cls: `i${inPoint}o${outPoint}`,
+        id: this.id_,
         highlight: this.highlight_,
       });
     }

LayoutNode.js

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

architype.css

@@ -238,6 +238,7 @@ body {
   justify-content: flex-start;
   border: 1px dashed white;
   z-index: 1;
+  pointer-events: none;
 }
 
 .gridGroup.highlight {
@@ -253,12 +254,14 @@ body {
   overflow: hidden;
   overflow-wrap: anywhere;
   z-index: 1;
+  pointer-events: none;
 }
 
 .gridLines {
   width: 100%;
   height: 100%;
   z-index: 2;
+  pointer-events: none;
   --line-color: white;
 }
 
@@ -275,12 +278,14 @@ body {
   z-index: 3;
   border-radius: 4px;
   padding: 3px;
+  pointer-events: none;
 }
 
 .gridArrow {
   width: 100%;
   height: 100%;
   z-index: 4;
+  pointer-events: none;
   --arrow-color: white;
 }