diff --git a/Architype.js b/Architype.js index aad322c..9d62417 100644 --- a/Architype.js +++ b/Architype.js @@ -116,8 +116,16 @@ class Architype { this.drawGrid(step.size); break; + case 'group': + this.drawGroup(step.min, step.max, step.label); + break; + + case 'line': + this.drawLine(step.pos, step.cls); + break; + case 'node': - this.drawGridNode(step.label, step.pos); + this.drawNode(step.label, step.pos); break; } } @@ -132,7 +140,28 @@ class Architype { size[0] + ')))'; } - drawGridNode(label, pos) { + drawGroup(min, max, label) { + let group = document.createElement('div'); + group.classList.add('gridGroup'); + this.grid_.appendChild(group); + group.innerText = label; + group.style.gridColumn = (min[0] + 1) + ' / ' + (max[0] + 2); + group.style.gridRow = (min[1] + 1) + ' / ' + (max[1] + 2); + } + + drawLine(pos, cls) { + let svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); + svg.classList.add('gridLines'); + svg.style.gridColumn = pos[0] + 1; + svg.style.gridRow = pos[1] + 1; + this.grid_.appendChild(svg); + + let use = document.createElementNS('http://www.w3.org/2000/svg', 'use'); + svg.appendChild(use); + use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#' + cls); + } + + drawNode(label, pos) { let node = document.createElement('div'); node.classList.add('gridNode'); this.grid_.appendChild(node); @@ -153,18 +182,6 @@ class Architype { } } } - - addLine(pos, cls) { - let svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); - svg.classList.add('gridLines'); - svg.style.gridColumn = pos[0] + 1; - svg.style.gridRow = pos[1] + 1; - this.grid_.appendChild(svg); - - let use = document.createElementNS('http://www.w3.org/2000/svg', 'use'); - svg.appendChild(use); - use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#' + cls); - } } diff --git a/architype.css b/architype.css index 00c3167..8a83d91 100644 --- a/architype.css +++ b/architype.css @@ -133,6 +133,7 @@ body { justify-content: center; text-align: center; font-size: 20px; + word-break: break-all; border-radius: 10px; padding: 3px; @@ -140,10 +141,37 @@ body { overflow: hidden; + background: var(--background); + z-index: 2; +} + +.gridGroup { + width: 100%; + height: calc(100% - 20px); + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; + text-align: center; + font-size: 20px; + word-break: break-all; + + border-radius: 10px; + margin-top: 20px; + padding: 3px; + border: 1px dashed white; + + overflow: hidden; + background: var(--background); z-index: 1; } +.gridGroup:empty { + height: 100%; + margin-top: 0; +} + .gridLines { width: 100%; height: 100%;