From 405b170c6abfa34c5f4f0ff8f88d93803d34b930 Mon Sep 17 00:00:00 2001 From: Ian Gulliver Date: Sat, 13 Jul 2019 21:44:51 +0000 Subject: [PATCH] Grid Id tracking --- Architype.js | 8 ++++++-- Grid.js | 36 ++++++++++++++++++++++++------------ LayoutLink.js | 6 +++++- LayoutNode.js | 1 + 4 files changed, 36 insertions(+), 15 deletions(-) diff --git a/Architype.js b/Architype.js index 17a847e..4905469 100644 --- a/Architype.js +++ b/Architype.js @@ -15,13 +15,15 @@ class Architype { document.addEventListener('keydown', (e) => { this.onKeyDown(e); }); + let gridElementsById = new Map(); + this.editorElem_ = document.createElement('ul'); this.container_.appendChild(this.editorElem_); - this.editor_ = new Editor(this.editorElem_); + this.editor_ = new Editor(this.editorElem_, gridElementsById); this.gridElem_ = document.createElement('div'); this.container_.appendChild(this.gridElem_); - this.grid_ = new Grid(this.gridElem_); + this.grid_ = new Grid(this.gridElem_, gridElementsById); this.generation_ = 0; this.renderGeneration_ = -1; @@ -291,4 +293,6 @@ class Architype { + + new Architype(document.getElementById('architype')); diff --git a/Grid.js b/Grid.js index b1af1ce..99e8078 100644 --- a/Grid.js +++ b/Grid.js @@ -1,8 +1,10 @@ class Grid { - constructor(container) { + constructor(container, elementsById) { this.container_ = container; this.container_.classList.add('grid'); + this.elementsById_ = elementsById; + this.toSize_ = []; addEventListener('resize', (e) => { this.onResize(e); }); } @@ -13,7 +15,8 @@ class Grid { draw(steps) { this.container_.innerHTML = ''; - this.toSize_ = []; + this.elementsById_.clear(); + this.toSize_.length = 0; for (let step of steps) { switch (step.type) { @@ -22,23 +25,24 @@ class Grid { break; case 'arrow': - this.drawArrow(step.pos, step.cls, step.highlight); + this.drawArrow(step.id, step.pos, step.cls, step.highlight); break; case 'graphLabel': - this.drawGraphLabel(step.min, step.max, step.label); + this.drawGraphLabel(step.id, step.min, step.max, step.label); break; case 'group': - this.drawGroup(step.min, step.max, step.label, step.highlight); + this.drawGroup(step.id, step.min, step.max, step.label, + step.highlight); break; case 'line': - this.drawLine(step.pos, step.cls, step.highlight); + this.drawLine(step.id, step.pos, step.cls, step.highlight); break; case 'linkLabel': - this.drawLinkLabel(step.pos, step.label); + this.drawLinkLabel(step.id, step.pos, step.label); break; case 'node': @@ -47,6 +51,8 @@ class Grid { } } + console.log(this.elementsById_); + this.fixSizes(); } @@ -59,8 +65,9 @@ class Grid { size[0] + ')))'; } - drawArrow(pos, cls, highlight) { + drawArrow(id, pos, cls, highlight) { let svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); + getOrSet(this.elementsById_, id, []).push(svg); svg.classList.add('gridArrow'); svg.classList.add(cls); svg.style.gridColumn = pos[0] + 1; @@ -73,8 +80,9 @@ class Grid { use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#' + cls); } - drawGraphLabel(min, max, label) { + drawGraphLabel(id, min, max, label) { let elem = document.createElement('div'); + getOrSet(this.elementsById_, id, []).push(elem); this.container_.appendChild(elem); elem.classList.add('gridGraphLabel'); elem.style.gridColumn = (min[0] + 1) + ' / ' + (max[0] + 2); @@ -83,8 +91,9 @@ class Grid { this.toSize_.push(elem); } - drawGroup(min, max, label, highlight) { + drawGroup(id, min, max, label, highlight) { let group = document.createElement('div'); + getOrSet(this.elementsById_, id, []).push(group); this.container_.appendChild(group); group.classList.add('gridGroup'); group.style.gridColumn = (min[0] + 1) + ' / ' + (max[0] + 2); @@ -102,8 +111,9 @@ class Grid { } } - drawLine(pos, cls, highlight) { + drawLine(id, pos, cls, highlight) { let svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); + getOrSet(this.elementsById_, id, []).push(svg); svg.classList.add('gridLines'); svg.style.gridColumn = pos[0] + 1; svg.style.gridRow = pos[1] + 1; @@ -115,8 +125,9 @@ class Grid { use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#' + cls); } - drawLinkLabel(pos, label) { + drawLinkLabel(id, pos, label) { let elem = document.createElement('div'); + getOrSet(this.elementsById_, id, []).push(elem); elem.classList.add('gridLinkLabel'); this.container_.appendChild(elem); elem.innerText = label; @@ -127,6 +138,7 @@ class Grid { drawNode(id, label, pos, highlight) { let node = document.createElement('div'); + getOrSet(this.elementsById_, id, []).push(node); node.classList.add('gridNode'); this.container_.appendChild(node); node.innerText = label; diff --git a/LayoutLink.js b/LayoutLink.js index bad5c70..49189ec 100644 --- a/LayoutLink.js +++ b/LayoutLink.js @@ -226,6 +226,7 @@ class LayoutLink { steps.push({ type: 'line', + id: this.id_, pos: Array.from(this.path[0]), cls: 's' + this.getOutPoint(this.path[0], this.path[1]), highlight: this.highlight_, @@ -236,9 +237,9 @@ class LayoutLink { let outPoint = this.getOutPoint(this.path[i], this.path[i + 1]); steps.push({ type: 'line', + id: this.id_, pos: Array.from(this.path[i]), cls: `i${inPoint}o${outPoint}`, - id: this.id_, highlight: this.highlight_, }); } @@ -248,6 +249,7 @@ class LayoutLink { steps.push({ type: 'line', + id: this.id_, pos: Array.from(this.path[this.path.length - 1]), cls: 's' + endInPoint, highlight: this.highlight_, @@ -255,6 +257,7 @@ class LayoutLink { steps.push({ type: 'arrow', + id: this.id_, pos: Array.from(this.path[this.path.length - 1]), cls: 'a' + endInPoint, highlight: this.highlight_, @@ -263,6 +266,7 @@ class LayoutLink { if (this.labelPos_) { steps.push({ type: 'linkLabel', + id: this.id_, pos: this.labelPos_, label: this.label_, }); diff --git a/LayoutNode.js b/LayoutNode.js index a6f5c54..371009a 100644 --- a/LayoutNode.js +++ b/LayoutNode.js @@ -19,6 +19,7 @@ class LayoutNode { for (let link of this.graphNode_.links) { this.links.push({ to: nodesByGraphNode.get(link.to), + id: link.id, label: link.label, highlight: link.highlight, });