Highlight groups

EditorGroup.js

@@ -24,6 +24,7 @@ class EditorGroup extends EditorEntryBase {
       type: 'group',
       label: this.getLabel(),
       members: this.nodes_.serialize(EditorNode),
+      highlight: this.elem_.classList.contains('highlight'),
     };
   }
 
@@ -46,6 +47,10 @@ class EditorGroup extends EditorEntryBase {
     }
   }
 
+  setHighlight(highlight) {
+    this.elem_.classList.toggle('highlight', highlight);
+  }
+
   onKeyDown(e) {
     super.onKeyDown(e);
 
@@ -57,6 +62,13 @@ class EditorGroup extends EditorEntryBase {
         e.stopPropagation();
         e.preventDefault();
         break;
+
+      case ' ':
+        this.elem_.classList.toggle('highlight');
+        this.elem_.setAttribute('data-arch-value', '');
+        e.stopPropagation();
+        e.preventDefault();
+        break;
     }
   }
 
@@ -66,6 +78,7 @@ class EditorGroup extends EditorEntryBase {
     if (ser.label != null) {
       group.setLabel(ser.label);
     }
+    group.setHighlight(ser.highlight);
     group.nodes_.unserialize(ser.members);
     return group.getElement();
   }

GraphGroup.js

@@ -27,6 +27,7 @@ class GraphGroup {
   static process(item) {
     let group = new GraphGroup();
     group.label = item.label;
+    group.highlight = item.highlight;
     group.nodeLabels = new Set();
     for (let member of item.members) {
       if (member.label == '') {

Grid.js

@@ -30,7 +30,7 @@ class Grid {
           break;
 
         case 'group':
-          this.drawGroup(step.min, step.max, step.label);
+          this.drawGroup(step.min, step.max, step.label, step.highlight);
           break;
 
         case 'line':
@@ -83,12 +83,13 @@ class Grid {
     this.toSize_.push(elem);
   }
 
-  drawGroup(min, max, label) {
+  drawGroup(min, max, label, highlight) {
     let group = document.createElement('div');
     this.container_.appendChild(group);
     group.classList.add('gridGroup');
     group.style.gridColumn = (min[0] + 1) + ' / ' + (max[0] + 2);
     group.style.gridRow = (min[1] + 1) + ' / ' + (max[1] + 2);
+    group.classList.toggle('highlight', highlight);
 
     if (label != '') {
       let labelNode = document.createElement('div');

LayoutGroup.js

@@ -89,6 +89,7 @@ class LayoutGroup {
       min: min,
       max: max,
       label: this.graphGroup_.label,
+      highlight: this.graphGroup_.highlight,
     };
   }
 

architype.css

@@ -96,6 +96,14 @@ body {
   background-color: var(--group);
 }
 
+.editor li.group.highlight {
+  background: repeating-linear-gradient(
+    -45deg,
+    transparent 0 10px,
+    rgba(255,0,0,0.3) 10px 20px
+  ), var(--group);
+}
+
 .editor li.link {
   background-color: var(--link);
 }
@@ -232,6 +240,11 @@ body {
   z-index: 1;
 }
 
+.gridGroup.highlight {
+  border-color: var(--focus);
+  border-width: 3px;
+}
+
 .gridGroupLabel {
   width: calc(100% - 10px);
   height: calc(100% - 10px);