diff --git a/architype.css b/architype.css index cf2effd..6d67954 100644 --- a/architype.css +++ b/architype.css @@ -31,6 +31,7 @@ body { background: var(--background); color: var(--text); font-family: 'Courier', monospace; + font-size: 16px; display: grid; grid-template: @@ -114,16 +115,24 @@ body { } .grid { - width: 100%; - height: 100%; + width: calc(100% - 20px); + height: calc(100% - 20px); display: grid; - align-content: center; + align-items: center; + justify-items: center; + margin: 10px; } .gridNode { - width: 100%; - height: 100%; + width: calc(100% - 24px); + height: calc(100% - 24px); display: flex; align-items: center; justify-content: center; + + border-radius: 10px; + padding: 3px; + border: 1px solid white; + + overflow: hidden; } diff --git a/architype.js b/architype.js index 897639b..9f96f0f 100644 --- a/architype.js +++ b/architype.js @@ -18,6 +18,7 @@ class Architype { this.container_.classList.add('dark'); this.container_.addEventListener('keydown', (e) => { this.onKeyDown(e); }); + this.container_.addEventListener('resize', (e) => { this.onResize(e); }); let editorElem = document.createElement('ul'); this.container_.appendChild(editorElem); @@ -71,6 +72,7 @@ class Architype { this.graph_ = this.buildGraph(); this.buildGrid(this.graph_); this.updateTargets(this.graph_); + this.fixSizes(this.graph_.nodes); } onKeyDown(e) { @@ -81,6 +83,10 @@ class Architype { } } + onResize(e) { + this.fixSizes(this.graph_.nodes); + } + exportGraphviz() { let lines = [ 'digraph G {', @@ -513,6 +519,19 @@ class Architype { node.gridElem.style.gridRow = node.pos[1] + 1; } } + + fixSizes(nodes) { + for (let node of nodes) { + let elem = node.gridElem; + let size = 16; + for (let size = 16; + size && (elem.scrollWidth > elem.clientWidth || + elem.scrollHeight > elem.clientHeight); + --size) { + elem.style.fontSize = size + 'px'; + } + } + } } class ListenUtils {