diff --git a/Architype.js b/Architype.js index 5087b68..112907c 100644 --- a/Architype.js +++ b/Architype.js @@ -15,10 +15,6 @@ class Architype { this.container_.appendChild(editorElem); this.editor_ = new Editor(editorElem); - this.targets_ = document.createElement('datalist'); - this.targets_.id = 'arch-targets'; - this.container_.appendChild(this.targets_); - this.lines_ = document.createElement('div'); this.lines_.innerHTML = ``; this.lines_ = this.lines_.firstElementChild; @@ -67,11 +63,9 @@ class Architype { onChange(e) { let serialized = this.serialize(); - onmessage(serialized); + this.draw(render(serialized)); localStorage.setItem('currentState', JSON.stringify(serialized)); - - //this.updateTargets(this.graph_); - //this.fixSizes(this.graph_.nodes); + this.fixSizes(); } onKeyDown(e) { @@ -104,50 +98,56 @@ class Architype { navigator.clipboard.writeText(lines.join('\n')); } - updateTargets(graph) { - // Lots of effort to avoid churning the datalist + draw(steps) { + console.log(steps); - let curTargets = new Map(); - for (let option of this.targets_.options) { - curTargets.set(option.value, option); - } - - for (let [label, entries] of graph.nodesByLabel.entries()) { - if (curTargets.has(label)) { - continue; - } - if (entries.length == 1 && - document.activeElement.parentElement.xArchObj && - document.activeElement.parentElement.xArchObj == entries[0]) { - // Skip an element currently being edited - continue; - } - let option = document.createElement('option'); - option.value = label; - this.targets_.appendChild(option); - } - - for (let [label, option] of curTargets.entries()) { - if (graph.nodesByLabel.has(label)) { - continue; - } - option.remove(); - } - } - - buildGrid(graph) { this.grid_.innerHTML = ''; + this.gridNodes_ = []; - this.grid_.style.gridTemplateColumns = - 'repeat(' + graph.size[0] + ',1fr)'; - this.grid_.style.gridTemplateRows = - 'repeat(' + graph.size[1] + - ',minmax(0, calc((100vw - var(--editor-width)) / ' + - graph.size[0] + ')))'; + for (let step of steps) { + switch (step.type) { + case 'size': + this.drawGrid(step.size); + break; - this.drawGridNodes(graph); + case 'node': + this.drawGridNode(step.label, step.pos); + break; + } + } } + drawGrid(size) { + this.grid_.style.gridTemplateColumns = + 'repeat(' + size[0] + ',1fr)'; + this.grid_.style.gridTemplateRows = + 'repeat(' + size[1] + + ',minmax(0, calc((100vw - var(--editor-width)) / ' + + size[0] + ')))'; + } + + drawGridNode(label, pos) { + let node = document.createElement('div'); + node.classList.add('gridNode'); + this.grid_.appendChild(node); + node.innerText = label; + node.style.gridColumn = pos[0] + 1; + node.style.gridRow = pos[1] + 1; + } + + fixSizes() { + for (let node of this.gridNodes_) { + node.style.fontSize = null; + for (let size = 20; + size && (node.scrollWidth > node.clientWidth || + node.scrollHeight > node.clientHeight); + --size) { + node.style.fontSize = size + 'px'; + } + } + } + + // TODO: fix this addLines(pos, cls) { let lines = this.lines_.cloneNode(true); lines.classList.add(cls); @@ -156,30 +156,6 @@ class Architype { this.grid_.appendChild(lines); return lines; } - - drawGridNodes(graph) { - for (let node of graph.nodes) { - node.gridElem = document.createElement('div'); - node.gridElem.classList.add('gridNode'); - this.grid_.appendChild(node.gridElem); - node.gridElem.innerText = node.getLabel(); - node.gridElem.style.gridColumn = node.pos[0] + 1; - node.gridElem.style.gridRow = node.pos[1] + 1; - } - } - - fixSizes(nodes) { - for (let node of nodes) { - let elem = node.gridElem; - elem.style.fontSize = null; - for (let size = 20; - size && (elem.scrollWidth > elem.clientWidth || - elem.scrollHeight > elem.clientHeight); - --size) { - elem.style.fontSize = size + 'px'; - } - } - } } diff --git a/EditorNode.js b/EditorNode.js index 7913fa0..aa64273 100644 --- a/EditorNode.js +++ b/EditorNode.js @@ -8,7 +8,6 @@ class EditorNode extends EditorEntryBase { this.input_ = document.createElement('input'); this.input_.type = 'text'; this.input_.placeholder = 'node name'; - this.input_.setAttribute('list', 'arch-targets'); this.listen(this.input_, 'keydown', (e) => this.onInputKeyDown(e)); this.listen(this.input_, 'input', (e) => this.onInput()); this.listen(this.input_, 'blur', (e) => this.onInput()); diff --git a/Layout.js b/Layout.js index c13507e..8386aab 100644 --- a/Layout.js +++ b/Layout.js @@ -143,6 +143,29 @@ class Layout { max[1] - min[1] + 1, ]; } + + getDrawSteps() { + let steps = [ + { + type: 'size', + size: this.size, + }, + ]; + + let nodes = Array.from(this.nodesByPos_.values()); + for (let i of [1, 0]) { + nodes.sort((a, b) => a.pos[i] - b.pos[i]); + } + for (let node of nodes) { + steps.push({ + type: 'node', + pos: node.pos, + label: node.graphNode.label, + }); + } + + return steps; + } } diff --git a/LayoutNode.js b/LayoutNode.js index fb90d09..934522c 100644 --- a/LayoutNode.js +++ b/LayoutNode.js @@ -1,6 +1,6 @@ class LayoutNode { constructor(graphNode, nodesByPos, pos) { - this.graphNode_ = graphNode; + this.graphNode = graphNode; this.nodesByPos_ = nodesByPos; this.pos = pos; @@ -9,7 +9,7 @@ class LayoutNode { resolveAffinity(nodesByGraphNode) { this.affinity_ = []; - for (let aff of this.graphNode_.affinity) { + for (let aff of this.graphNode.affinity) { this.affinity_.push({ node: nodesByGraphNode.get(aff.node), distanceToWeight: aff.distanceToWeight, diff --git a/render.js b/render.js index 9cb0a86..762c287 100644 --- a/render.js +++ b/render.js @@ -1,6 +1,7 @@ -function onmessage(def) { +function render(def) { let graph = new Graph(def); let layout = new Layout(graph); + return layout.getDrawSteps(); }