diff --git a/architype.css b/architype.css
index d32bb69..e1bb3ee 100644
--- a/architype.css
+++ b/architype.css
@@ -139,4 +139,12 @@ body {
border: 1px solid white;
overflow: hidden;
+
+ background: var(--background);
+ z-index: 1;
+}
+
+.gridLines {
+ width: 100%;
+ height: 100%;
}
diff --git a/architype.js b/architype.js
index a461f2f..32f7b7a 100644
--- a/architype.js
+++ b/architype.js
@@ -28,6 +28,12 @@ class Architype {
this.targets_.id = 'arch-targets';
this.container_.appendChild(this.targets_);
+ this.lines_ = document.createElement('div');
+ this.lines_.innerHTML = ``;
+ this.lines_ = this.lines_.firstElementChild;
+ this.lines_.classList.add('gridLines');
+ this.lines_.classList.add('white');
+
this.grid_ = document.createElement('div');
this.grid_.classList.add('grid');
this.container_.appendChild(this.grid_);
@@ -42,6 +48,7 @@ class Architype {
subtree: true,
});
+ // TODO: handle case when value change alters link graph
this.observeContent_ = new MutationObserver(e => { this.onContentChange(e); });
this.observeContent_.observe(editorElem, {
attributes: true,
@@ -455,6 +462,15 @@ class Architype {
this.drawGridNodes(graph);
}
+ addLines(pos, cls) {
+ let lines = this.lines_.cloneNode(true);
+ lines.classList.add(cls);
+ lines.style.gridColumn = pos[0] + 1;
+ lines.style.gridRow = pos[1] + 1;
+ this.grid_.appendChild(lines);
+ return lines;
+ }
+
iterate(graph) {
let nodes = Array.from(graph.nodes);
this.sortByMostTension(nodes);
diff --git a/index.html b/index.html
index 5372d95..17d6ac0 100644
--- a/index.html
+++ b/index.html
@@ -2,9 +2,9 @@
-
- Architype
-
diff --git a/lines.svg b/lines.svg
new file mode 100644
index 0000000..ef25afe
--- /dev/null
+++ b/lines.svg
@@ -0,0 +1,141 @@
+