diff --git a/EditorGroup.js b/EditorGroup.js index 1cbfc3b..9a9dd09 100644 --- a/EditorGroup.js +++ b/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(); } diff --git a/GraphGroup.js b/GraphGroup.js index a1ac6ba..fc8f93c 100644 --- a/GraphGroup.js +++ b/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 == '') { diff --git a/Grid.js b/Grid.js index f9618bd..908ace6 100644 --- a/Grid.js +++ b/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'); diff --git a/LayoutGroup.js b/LayoutGroup.js index 03da1ac..3d4775f 100644 --- a/LayoutGroup.js +++ b/LayoutGroup.js @@ -89,6 +89,7 @@ class LayoutGroup { min: min, max: max, label: this.graphGroup_.label, + highlight: this.graphGroup_.highlight, }; } diff --git a/architype.css b/architype.css index 94f82ec..5438868 100644 --- a/architype.css +++ b/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);