diff --git a/Architype.js b/Architype.js index 4e0624d..5c3d60e 100644 --- a/Architype.js +++ b/Architype.js @@ -121,6 +121,7 @@ class Architype { + diff --git a/EditorEntryBase.js b/EditorEntryBase.js index f9b6162..070d5ae 100644 --- a/EditorEntryBase.js +++ b/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'}); } diff --git a/EditorGroup.js b/EditorGroup.js index cf67e7b..f861b9c 100644 --- a/EditorGroup.js +++ b/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'), diff --git a/EditorLink.js b/EditorLink.js index 9ab6126..3f5b428 100644 --- a/EditorLink.js +++ b/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(), diff --git a/EditorNode.js b/EditorNode.js index e545b8a..00cf360 100644 --- a/EditorNode.js +++ b/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'), }; diff --git a/GraphGroup.js b/GraphGroup.js index fc8f93c..712b6f2 100644 --- a/GraphGroup.js +++ b/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(); diff --git a/GraphLink.js b/GraphLink.js index 8369a4e..c30861b 100644 --- a/GraphLink.js +++ b/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; diff --git a/GraphNode.js b/GraphNode.js index e6e66b8..3261068 100644 --- a/GraphNode.js +++ b/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; diff --git a/Grid.js b/Grid.js index 908ace6..7c0433c 100644 --- a/Grid.js +++ b/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() { diff --git a/IdSource.js b/IdSource.js new file mode 100644 index 0000000..4fec2b2 --- /dev/null +++ b/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(); diff --git a/Layout.js b/Layout.js index aa08ed2..918e27a 100644 --- a/Layout.js +++ b/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_)); } diff --git a/LayoutGroup.js b/LayoutGroup.js index 3d4775f..51259fc 100644 --- a/LayoutGroup.js +++ b/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, }; diff --git a/LayoutLink.js b/LayoutLink.js index b3521d0..19f196e 100644 --- a/LayoutLink.js +++ b/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_, }); } diff --git a/LayoutNode.js b/LayoutNode.js index 9e565c3..c477cb8 100644 --- a/LayoutNode.js +++ b/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, }; diff --git a/architype.css b/architype.css index e34ea67..a8ab50f 100644 --- a/architype.css +++ b/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; }