diff --git a/Architype.js b/Architype.js
index 14f7a44..afc462d 100644
--- a/Architype.js
+++ b/Architype.js
@@ -116,6 +116,10 @@ class Architype {
this.drawGrid(step.size);
break;
+ case 'arrow':
+ this.drawArrow(step.pos, step.cls);
+ break;
+
case 'group':
this.drawGroup(step.min, step.max, step.label);
break;
@@ -140,6 +144,19 @@ class Architype {
size[0] + ')))';
}
+ drawArrow(pos, cls) {
+ let svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+ svg.classList.add('gridArrow');
+ svg.classList.add(cls);
+ 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);
+ }
+
drawGroup(min, max, label) {
let group = document.createElement('div');
this.grid_.appendChild(group);
diff --git a/LayoutLink.js b/LayoutLink.js
index 03d8660..9fd88a3 100644
--- a/LayoutLink.js
+++ b/LayoutLink.js
@@ -38,6 +38,11 @@ class LayoutLink {
best.path.reverse();
next.path.splice(next.path.length - 1, 1);
this.path = next.path.concat(best.path);
+ if (next.source == 2) {
+ // path is backward because this half of the path started from the
+ // end point. Fix it so the arrows end up in the right places.
+ this.path.reverse();
+ }
break;
}
@@ -157,11 +162,19 @@ class LayoutLink {
});
}
+ let endInPoint = this.getInPoint(this.path[this.path.length - 2],
+ this.path[this.path.length - 1])
+
steps.push({
type: 'line',
pos: Array.from(this.path[this.path.length - 1]),
- cls: 's' + this.getInPoint(
- this.path[this.path.length - 2], this.path[this.path.length - 1]),
+ cls: 's' + endInPoint,
+ });
+
+ steps.push({
+ type: 'arrow',
+ pos: Array.from(this.path[this.path.length - 1]),
+ cls: 'a' + endInPoint,
});
return steps;
diff --git a/architype.css b/architype.css
index 6239436..f215b66 100644
--- a/architype.css
+++ b/architype.css
@@ -134,7 +134,7 @@ body {
text-align: center;
font-size: 20px;
- border-radius: 10px;
+ border-radius: 10%;
overflow-wrap: anywhere;
overflow: hidden;
cursor: default;
@@ -142,11 +142,10 @@ body {
}
.gridNode {
- width: calc(100% - 24px);
- height: calc(100% - 24px);
+ width: 85%;
+ height: 85%;
background: var(--background);
justify-content: center;
- padding: 3px;
border: 1px solid white;
z-index: 3;
}
@@ -184,3 +183,10 @@ body {
z-index: 2;
--line-color: white;
}
+
+.gridArrow {
+ width: 100%;
+ height: 100%;
+ z-index: 4;
+ --arrow-color: white;
+}
diff --git a/arrows.svg b/arrows.svg
new file mode 100644
index 0000000..503559a
--- /dev/null
+++ b/arrows.svg
@@ -0,0 +1,46 @@
+
diff --git a/index.html b/index.html
index 5ae41e6..a6fa073 100644
--- a/index.html
+++ b/index.html
@@ -11,6 +11,7 @@
+
diff --git a/lines.svg b/lines.svg
index d8c5e21..7569011 100644
--- a/lines.svg
+++ b/lines.svg
@@ -4,7 +4,7 @@
style="display: none">