Draw directional arrows

2019-07-09 04:19:09 +00:00
parent 311c32b2c5
commit a68471d1da
6 changed files with 154 additions and 71 deletions
--- 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);
--- 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;
--- 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;
+}
--- a/arrows.svg
+++ b/arrows.svg
@@ -0,0 +1,46 @@
+<svg version="1.1"
+     baseProfile="full"
+     xmlns="http://www.w3.org/2000/svg"
+     style="display: none">
+  <style>
+/* <![CDATA[ */
+path.arrow {
+  stroke: var(--arrow-color, black);
+  fill: var(--arrow-color, black);
+  shape-rendering: geometricPrecision;
+}
+    /* ]]> */
+  </style>
+
+  <symbol id="a0" viewBox="0 0 100 100" preserveAspectRatio="none">
+    <path d="M 43,0   L 57,0   L  50,6   Z" class="arrow" />
+  </symbol>
+
+  <symbol id="a1" viewBox="0 0 100 100" preserveAspectRatio="none">
+    <path d="M 90,0   L 99,9   L  90,9   Z" class="arrow" />
+  </symbol>
+
+  <symbol id="a2" viewBox="0 0 100 100" preserveAspectRatio="none">
+    <path d="M 99,43  L 99,57  L  93,50  Z" class="arrow" />
+  </symbol>
+
+  <symbol id="a3" viewBox="0 0 100 100" preserveAspectRatio="none">
+    <path d="M 99,90  L 90,99  L  90,90  Z" class="arrow" />
+  </symbol>
+
+  <symbol id="a4" viewBox="0 0 100 100" preserveAspectRatio="none">
+    <path d="M 57,99  L 43,99  L  50,93  Z" class="arrow" />
+  </symbol>
+
+  <symbol id="a5" viewBox="0 0 100 100" preserveAspectRatio="none">
+    <path d="M  9,99  L  0,90  L   9,90  Z" class="arrow" />
+  </symbol>
+
+  <symbol id="a6" viewBox="0 0 100 100" preserveAspectRatio="none">
+    <path d="M  0,57  L 0,43   L   6,50  Z" class="arrow" />
+  </symbol>
+
+  <symbol id="a7" viewBox="0 0 100 100" preserveAspectRatio="none">
+    <path d="M  0,9   L  9,0   L   9,9   Z" class="arrow" />
+  </symbol>
+</svg>
--- a/index.html
+++ b/index.html
@@ -11,6 +11,7 @@

 <body>

+<!--# include file="arrows.svg" -->
 <!--# include file="lines.svg" -->

 <div id=architype></div>
--- a/lines.svg
+++ b/lines.svg
@@ -4,7 +4,7 @@
     style="display: none">
  <style>
 /* <![CDATA[ */
-path {
+path.line {
  stroke: var(--line-color, black);
  stroke-width: 1.5;
  fill: transparent;
@@ -15,266 +15,266 @@ path {

  <!-- Stop in the middle lines -->
  <symbol id="s0" viewBox="0 0 100 100" preserveAspectRatio="none">
-    <path d="M  50,0    L 50 50" />
+    <path d="M  50,0    L 50,50" class="line" />
  </symbol>

  <symbol id="s1" viewBox="0 0 100 100" preserveAspectRatio="none">
-    <path d="M 100,0    L 50,50" />
+    <path d="M 100,0    L 50,50" class="line" />
  </symbol>

  <symbol id="s2" viewBox="0 0 100 100" preserveAspectRatio="none">
-    <path d="M 100,50   L 50,50" />
+    <path d="M 100,50   L 50,50" class="line" />
  </symbol>

  <symbol id="s3" viewBox="0 0 100 100" preserveAspectRatio="none">
-    <path d="M 100,100  L 50,50" />
+    <path d="M 100,100  L 50,50" class="line" />
  </symbol>

  <symbol id="s4" viewBox="0 0 100 100" preserveAspectRatio="none">
-    <path d="M  50,100  L 50,50" />
+    <path d="M  50,100  L 50,50" class="line" />
  </symbol>

  <symbol id="s5" viewBox="0 0 100 100" preserveAspectRatio="none">
-    <path d="M   0,100  L 50,50" />
+    <path d="M   0,100  L 50,50" class="line" />
  </symbol>

  <symbol id="s6" viewBox="0 0 100 100" preserveAspectRatio="none">
-    <path d="M   0,50   L 50,50" />
+    <path d="M   0,50   L 50,50" class="line" />
  </symbol>

  <symbol id="s7" viewBox="0 0 100 100" preserveAspectRatio="none">
-    <path d="M   0,0    L 50,50" />
+    <path d="M   0,0    L 50,50" class="line" />
  </symbol>

  <!-- Point to point links -->
  <symbol id="i0o1" viewBox="0 0 100 100" preserveAspectRatio="none">
-    <path d="M  50,0    Q 50,50 100,0  " />
+    <path d="M  50,0    Q 50,50 100,0  " class="line" />
  </symbol>

  <symbol id="i0o2" viewBox="0 0 100 100" preserveAspectRatio="none">
-    <path d="M  50,0    Q 50,50 100,50 " />
+    <path d="M  50,0    Q 50,50 100,50 " class="line" />
  </symbol>

  <symbol id="i0o3" viewBox="0 0 100 100" preserveAspectRatio="none">
-    <path d="M  50,0    Q 50,50 100,100" />
+    <path d="M  50,0    Q 50,50 100,100" class="line" />
  </symbol>

  <symbol id="i0o4" viewBox="0 0 100 100" preserveAspectRatio="none">
-    <path d="M  50,0    Q 50,50  50,100" />
+    <path d="M  50,0    Q 50,50  50,100" class="line" />
  </symbol>

  <symbol id="i0o5" viewBox="0 0 100 100" preserveAspectRatio="none">
-    <path d="M  50,0    Q 50,50   0,100" />
+    <path d="M  50,0    Q 50,50   0,100" class="line" />
  </symbol>

  <symbol id="i0o6" viewBox="0 0 100 100" preserveAspectRatio="none">
-    <path d="M  50,0    Q 50,50   0,50 " />
+    <path d="M  50,0    Q 50,50   0,50 " class="line" />
  </symbol>

  <symbol id="i0o7" viewBox="0 0 100 100" preserveAspectRatio="none">
-    <path d="M  50,0    Q 50,50   0,0  " />
+    <path d="M  50,0    Q 50,50   0,0  " class="line" />
  </symbol>


  <symbol id="i1o0" viewBox="0 0 100 100" preserveAspectRatio="none">
-    <path d="M 100,0    Q 50,50  50,0  " />
+    <path d="M 100,0    Q 50,50  50,0  " class="line" />
  </symbol>

  <symbol id="i1o2" viewBox="0 0 100 100" preserveAspectRatio="none">
-    <path d="M 100,0    Q 50,50 100,50 " />
+    <path d="M 100,0    Q 50,50 100,50 " class="line" />
  </symbol>

  <symbol id="i1o3" viewBox="0 0 100 100" preserveAspectRatio="none">
-    <path d="M 100,0    Q 50,50 100,100" />
+    <path d="M 100,0    Q 50,50 100,100" class="line" />
  </symbol>

  <symbol id="i1o4" viewBox="0 0 100 100" preserveAspectRatio="none">
-    <path d="M 100,0    Q 50,50  50,100" />
+    <path d="M 100,0    Q 50,50  50,100" class="line" />
  </symbol>

  <symbol id="i1o5" viewBox="0 0 100 100" preserveAspectRatio="none">
-    <path d="M 100,0    Q 50,50   0,100" />
+    <path d="M 100,0    Q 50,50   0,100" class="line" />
  </symbol>

  <symbol id="i1o6" viewBox="0 0 100 100" preserveAspectRatio="none">
-    <path d="M 100,0    Q 50,50   0,50 " />
+    <path d="M 100,0    Q 50,50   0,50 " class="line" />
  </symbol>

  <symbol id="i1o7" viewBox="0 0 100 100" preserveAspectRatio="none">
-    <path d="M 100,0    Q 50,50   0,0  " />
+    <path d="M 100,0    Q 50,50   0,0  " class="line" />
  </symbol>


  <symbol id="i2o0" viewBox="0 0 100 100" preserveAspectRatio="none">
-    <path d="M 100,50   Q 50,50  50,0  " />
+    <path d="M 100,50   Q 50,50  50,0  " class="line" />
  </symbol>

  <symbol id="i2o1" viewBox="0 0 100 100" preserveAspectRatio="none">
-    <path d="M 100,50   Q 50,50 100,0  " />
+    <path d="M 100,50   Q 50,50 100,0  " class="line" />
  </symbol>

  <symbol id="i2o3" viewBox="0 0 100 100" preserveAspectRatio="none">
-    <path d="M 100,50   Q 50,50 100,100" />
+    <path d="M 100,50   Q 50,50 100,100" class="line" />
  </symbol>

  <symbol id="i2o4" viewBox="0 0 100 100" preserveAspectRatio="none">
-    <path d="M 100,50   Q 50,50  50,100" />
+    <path d="M 100,50   Q 50,50  50,100" class="line" />
  </symbol>

  <symbol id="i2o5" viewBox="0 0 100 100" preserveAspectRatio="none">
-    <path d="M 100,50   Q 50,50   0,100" />
+    <path d="M 100,50   Q 50,50   0,100" class="line" />
  </symbol>

  <symbol id="i2o6" viewBox="0 0 100 100" preserveAspectRatio="none">
-    <path d="M 100,50   Q 50,50   0,50 " />
+    <path d="M 100,50   Q 50,50   0,50 " class="line" />
  </symbol>

  <symbol id="i2o7" viewBox="0 0 100 100" preserveAspectRatio="none">
-    <path d="M 100,50   Q 50,50   0,0  " />
+    <path d="M 100,50   Q 50,50   0,0  " class="line" />
  </symbol>


  <symbol id="i3o0" viewBox="0 0 100 100" preserveAspectRatio="none">
-    <path d="M 100,100  Q 50,50  50,0  " />
+    <path d="M 100,100  Q 50,50  50,0  " class="line" />
  </symbol>

  <symbol id="i3o1" viewBox="0 0 100 100" preserveAspectRatio="none">
-    <path d="M 100,100  Q 50,50 100,0  " />
+    <path d="M 100,100  Q 50,50 100,0  " class="line" />
  </symbol>

  <symbol id="i3o2" viewBox="0 0 100 100" preserveAspectRatio="none">
-    <path d="M 100,100  Q 50,50 100,50 " />
+    <path d="M 100,100  Q 50,50 100,50 " class="line" />
  </symbol>

  <symbol id="i3o4" viewBox="0 0 100 100" preserveAspectRatio="none">
-    <path d="M 100,100  Q 50,50  50,100" />
+    <path d="M 100,100  Q 50,50  50,100" class="line" />
  </symbol>

  <symbol id="i3o5" viewBox="0 0 100 100" preserveAspectRatio="none">
-    <path d="M 100,100  Q 50,50   0,100" />
+    <path d="M 100,100  Q 50,50   0,100" class="line" />
  </symbol>

  <symbol id="i3o6" viewBox="0 0 100 100" preserveAspectRatio="none">
-    <path d="M 100,100  Q 50,50   0,50 " />
+    <path d="M 100,100  Q 50,50   0,50 " class="line" />
  </symbol>

  <symbol id="i3o7" viewBox="0 0 100 100" preserveAspectRatio="none">
-    <path d="M 100,100  Q 50,50   0,0  " />
+    <path d="M 100,100  Q 50,50   0,0  " class="line" />
  </symbol>


  <symbol id="i4o0" viewBox="0 0 100 100" preserveAspectRatio="none">
-    <path d="M  50,100  Q 50,50  50,0  " />
+    <path d="M  50,100  Q 50,50  50,0  " class="line" />
  </symbol>

  <symbol id="i4o1" viewBox="0 0 100 100" preserveAspectRatio="none">
-    <path d="M  50,100  Q 50,50 100,0  " />
+    <path d="M  50,100  Q 50,50 100,0  " class="line" />
  </symbol>

  <symbol id="i4o2" viewBox="0 0 100 100" preserveAspectRatio="none">
-    <path d="M  50,100  Q 50,50 100,50 " />
+    <path d="M  50,100  Q 50,50 100,50 " class="line" />
  </symbol>

  <symbol id="i4o3" viewBox="0 0 100 100" preserveAspectRatio="none">
-    <path d="M  50,100  Q 50,50 100,100" />
+    <path d="M  50,100  Q 50,50 100,100" class="line" />
  </symbol>

  <symbol id="i4o5" viewBox="0 0 100 100" preserveAspectRatio="none">
-    <path d="M  50,100  Q 50,50   0,100" />
+    <path d="M  50,100  Q 50,50   0,100" class="line" />
  </symbol>

  <symbol id="i4o6" viewBox="0 0 100 100" preserveAspectRatio="none">
-    <path d="M  50,100  Q 50,50   0,50 " />
+    <path d="M  50,100  Q 50,50   0,50 " class="line" />
  </symbol>

  <symbol id="i4o7" viewBox="0 0 100 100" preserveAspectRatio="none">
-    <path d="M  50,100  Q 50,50   0,0  " />
+    <path d="M  50,100  Q 50,50   0,0  " class="line" />
  </symbol>


  <symbol id="i5o0" viewBox="0 0 100 100" preserveAspectRatio="none">
-    <path d="M   0,100  Q 50,50  50,0  " />
+    <path d="M   0,100  Q 50,50  50,0  " class="line" />
  </symbol>

  <symbol id="i5o1" viewBox="0 0 100 100" preserveAspectRatio="none">
-    <path d="M   0,100  Q 50,50 100,0  " />
+    <path d="M   0,100  Q 50,50 100,0  " class="line" />
  </symbol>

  <symbol id="i5o2" viewBox="0 0 100 100" preserveAspectRatio="none">
-    <path d="M   0,100  Q 50,50 100,50 " />
+    <path d="M   0,100  Q 50,50 100,50 " class="line" />
  </symbol>

  <symbol id="i5o3" viewBox="0 0 100 100" preserveAspectRatio="none">
-    <path d="M   0,100  Q 50,50 100,100" />
+    <path d="M   0,100  Q 50,50 100,100" class="line" />
  </symbol>

  <symbol id="i5o4" viewBox="0 0 100 100" preserveAspectRatio="none">
-    <path d="M   0,100  Q 50,50  50,100" />
+    <path d="M   0,100  Q 50,50  50,100" class="line" />
  </symbol>

  <symbol id="i5o6" viewBox="0 0 100 100" preserveAspectRatio="none">
-    <path d="M   0,100  Q 50,50   0,50 " />
+    <path d="M   0,100  Q 50,50   0,50 " class="line" />
  </symbol>

  <symbol id="i5o7" viewBox="0 0 100 100" preserveAspectRatio="none">
-    <path d="M   0,100  Q 50,50   0,0  " />
+    <path d="M   0,100  Q 50,50   0,0  " class="line" />
  </symbol>


  <symbol id="i6o0" viewBox="0 0 100 100" preserveAspectRatio="none">
-    <path d="M   0,50   Q 50,50  50,0  " />
+    <path d="M   0,50   Q 50,50  50,0  " class="line" />
  </symbol>

  <symbol id="i6o1" viewBox="0 0 100 100" preserveAspectRatio="none">
-    <path d="M   0,50   Q 50,50 100,0  " />
+    <path d="M   0,50   Q 50,50 100,0  " class="line" />
  </symbol>

  <symbol id="i6o2" viewBox="0 0 100 100" preserveAspectRatio="none">
-    <path d="M   0,50   Q 50,50 100,50 " />
+    <path d="M   0,50   Q 50,50 100,50 " class="line" />
  </symbol>

  <symbol id="i6o3" viewBox="0 0 100 100" preserveAspectRatio="none">
-    <path d="M   0,50   Q 50,50 100,100" />
+    <path d="M   0,50   Q 50,50 100,100" class="line" />
  </symbol>

  <symbol id="i6o4" viewBox="0 0 100 100" preserveAspectRatio="none">
-    <path d="M   0,50   Q 50,50  50,100" />
+    <path d="M   0,50   Q 50,50  50,100" class="line" />
  </symbol>

  <symbol id="i6o5" viewBox="0 0 100 100" preserveAspectRatio="none">
-    <path d="M   0,50   Q 50,50   0,100" />
+    <path d="M   0,50   Q 50,50   0,100" class="line" />
  </symbol>

  <symbol id="i6o7" viewBox="0 0 100 100" preserveAspectRatio="none">
-    <path d="M   0,50   Q 50,50   0,0  " />
+    <path d="M   0,50   Q 50,50   0,0  " class="line" />
  </symbol>


  <symbol id="i7o0" viewBox="0 0 100 100" preserveAspectRatio="none">
-    <path d="M   0,0    Q 50,50  50,0  " />
+    <path d="M   0,0    Q 50,50  50,0  " class="line" />
  </symbol>

  <symbol id="i7o1" viewBox="0 0 100 100" preserveAspectRatio="none">
-    <path d="M   0,0    Q 50,50 100,0  " />
+    <path d="M   0,0    Q 50,50 100,0  " class="line" />
  </symbol>

  <symbol id="i7o2" viewBox="0 0 100 100" preserveAspectRatio="none">
-    <path d="M   0,0    Q 50,50 100,50 " />
+    <path d="M   0,0    Q 50,50 100,50 " class="line" />
  </symbol>

  <symbol id="i7o3" viewBox="0 0 100 100" preserveAspectRatio="none">
-    <path d="M   0,0    Q 50,50 100,100" />
+    <path d="M   0,0    Q 50,50 100,100" class="line" />
  </symbol>

  <symbol id="i7o4" viewBox="0 0 100 100" preserveAspectRatio="none">
-    <path d="M   0,0    Q 50,50  50,100" />
+    <path d="M   0,0    Q 50,50  50,100" class="line" />
  </symbol>

  <symbol id="i7o5" viewBox="0 0 100 100" preserveAspectRatio="none">
-    <path d="M   0,0    Q 50,50   0,100" />
+    <path d="M   0,0    Q 50,50   0,100" class="line" />
  </symbol>

  <symbol id="i7o6" viewBox="0 0 100 100" preserveAspectRatio="none">
-    <path d="M   0,0    Q 50,50   0,50 " />
+    <path d="M   0,0    Q 50,50   0,50 " class="line" />
  </symbol>
 </svg>