From bf0df06589b9d57da0dd243b7e52f2ac9e058452 Mon Sep 17 00:00:00 2001
From: Florian Scholz <fs@florianscholz.com>
Date: Thu, 9 Dec 2021 18:15:04 +0100
Subject: [PATCH 1/4] Cleanup code; avoid iframe hack

---
 kumascript/macros/InheritanceDiagram.ejs | 180 +++++++++++------------
 1 file changed, 84 insertions(+), 96 deletions(-)

diff --git a/kumascript/macros/InheritanceDiagram.ejs b/kumascript/macros/InheritanceDiagram.ejs
index a72eee7d2662..5af249020194 100644
--- a/kumascript/macros/InheritanceDiagram.ejs
+++ b/kumascript/macros/InheritanceDiagram.ejs
@@ -1,132 +1,120 @@
 <%
 /*
-  Draws an responsive SVG diagram for the inheritance chain (inverted in rtl)
+  Draws an SVG diagram to display an interface's inheritance chain
 
-  $0 - width - defaults to 600
-  $1 - height  - defaults to 70
-  $2 - offset - defaults to 50
-  $3 - Interface name
+  $0 - Interface name (defaults to the interface page the macro is called on)
+
+  Test pages
+
+    - http://localhost:3000/en-US/docs/Web/API/SVGTextPositioningElement
+    - http://localhost:3000/en-US/docs/Web/API/WheelEvent
+    - http://localhost:3000/en-US/docs/Web/API/USB/connect_event
 */
 
-var data = web.getJSONData("InterfaceData");
-var slug = env.slug;
-var result = "";
-// slug is not available in preview mode.
-if (slug) {
-var locale = env.locale;
-var href = 'https://developer.mozilla.org/' + locale + '/docs/Web/API/';
-var mainIF = $3 || slug.replace('Web/API/','').split('/')[0];
-var rtlLocales = ['ar', 'he', 'fa'];
-var inheritanceChain = [mainIF];
-var inh = data[0][mainIF] != undefined ? data[0][mainIF].inh : '';
-var width = $0 || 600;
-var height = $1 || 70;
-var offset = $2 || 50;
-var rtl = false;
-if (rtlLocales.indexOf(locale) != -1) {
-    rtl = true;
-}
+const data = web.getJSONData("InterfaceData");
+const href = '/' + env.locale + '/docs/Web/API/';
+const mainInterfaceName = $0 || env.slug.replace('Web/API/','').split('/')[0];
+
+let out = "";
+let height = 40;
+let offset = 0;
+let xpos = 1;
+let ypos = 1;
+
+let inheritanceChain = [mainInterfaceName];
+let inh = data[0][mainInterfaceName] != undefined ? data[0][mainInterfaceName].inh : '';
 
 function getInheritance(inh) {
   if (inh.length > 0) {
     inheritanceChain.unshift(inh);
     if (Object.prototype.hasOwnProperty.call(data[0], inh)) {
-        var inh = data[0][inh].inh;
+        inh = data[0][inh].inh;
         getInheritance(inh);
     }
   }
 }
 getInheritance(inh);
 
-var l = 0;
-
-function rectWithText(x, y, fill, interface, reverse) {
-  var flip = rtl ? 'transform="scale(-1 1)"' : '';
-  var inv = rtl ? '-' : '';
-  l = interface.length * 10 < 75 ? 75 : interface.length * 10;
+function rectWithText(x, y, fill, interfaceName, reverse) {
+  const rectWidth = interfaceName.length * 8 < 75 ? 75 : interfaceName.length * 8;
   if (reverse) {
-    xpos -= l;
+    xpos -= rectWidth;
     x = xpos;
+  } else {
+    xpos += rectWidth;
   }
-  if (!reverse) {
-    xpos += l;
-  }
-  return '<a xlink:href="' + href + interface + '" target="_top">' +
-           '<rect x="'+x+'" y="'+y+'" width="'+l+'" height="50" fill="'+fill+'" stroke="#D4DDE4" stroke-width="2px" />' +
-           '<text '+flip+' x="'+inv+(x+l/2)+'" y="'+(y+29)+'" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace"' +
-           ' fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">'+interface+'</text>' +
-         '</a>';
+  return `
+  <a style="text-decoration: none;" xlink:href="${href+interfaceName}">
+    <rect x="${x}" y="${y}" width="${rectWidth}" height="25" fill="${fill}" stroke="#D4DDE4" stroke-width="2px" />
+    <text x="${x+rectWidth/2}" y="${y+16}" font-size="10px" fill="#4D4E53" text-anchor="middle">
+      ${interfaceName}
+    </text>
+  </a>`;
 }
 
 function lineWithTriangle(x, y, reverse) {
-  var str = '';
+  let str = '';
+  let polylinePoints = `${x},${y+14} ${x+10},${y+9} ${x+10},${y+19} ${x},${y+14}`;
+  let linePoints = `x1="${x+10}" y1="${y+14}" x2="${x+30}" y2="${y+14}"`;
+
   if (reverse) {
-    str += '<polyline points="'+x+','+(y+24)+'  '+(x-10)+','+(y+19)+'  '+(x-10)+','+(y+29)+'  '+x+','+(y+24)+'" stroke="#D4DDE4" fill="none"/>';
-    x -= 10;
-    str += '<line x1="'+x+'" y1="'+(y+24)+'" x2="'+(x-30)+'" y2="'+(y+24)+'" stroke="#D4DDE4"/>';
-  } else {
-    str += '<polyline points="'+x+','+(y+24)+'  '+(x+10)+','+(y+19)+'  '+(x+10)+','+(y+29)+'  '+x+','+(y+24)+'" stroke="#D4DDE4" fill="none"/>';
-    x += 10;
-    str += '<line x1="'+x+'" y1="'+(y+24)+'" x2="'+(x+30)+'" y2="'+(y+24)+'" stroke="#D4DDE4"/>';
+    polylinePoints = `${x},${y+14} ${x-10},${y+9} ${x-10},${y+19} ${x},${y+14}`;
+    linePoints = `x1="${x-10}" y1="${y+14}" x2="${x-30}" y2="${y+14}"`;
   }
+
+  str += `<polyline points="${polylinePoints}" stroke="#D4DDE4" fill="none"/>`;
+  x -= 10;
+  str += `<line ${linePoints} stroke="#D4DDE4"/>`;
+
   return str;
 }
 
-var padding = (height / width) * 100;
-var xpos = 1;
-var ypos = 1;
-var viewbox = 'viewbox="-'+ offset + ' 0 '+ width + ' ' + height +'"';
-
-if (rtl) {
-  viewbox = 'viewbox="510 0 '+ width + ' ' + height +'" transform="scale(-1 1)"';
+function connectingLineWithTriangle() {
+  out += `<polyline points="${xpos},${ypos+14} ${xpos+10},${ypos+9} ${xpos+10},${ypos+19} ${xpos},${ypos+14}" stroke="#D4DDE4" fill="none"/>`;
+  xpos += 10;
+  out += `<line x1="${xpos}" y1="${ypos+14}" x2="${xpos+8}" y2="${ypos+14}" stroke="#D4DDE4"/>`;
+  xpos += 8;
+  out += `<line x1="${xpos}" y1="${ypos+14}" x2="${xpos}" y2="${ypos+59}" stroke="#D4DDE4"/>`;
+  ypos = 60;
+  out += `<line x1="${xpos}" y1="${ypos}" x2="${xpos-17}" y2="${ypos}" stroke="#D4DDE4"/>`;
+  xpos -= 18;
+  ypos = 47
 }
-result = '<div id="interfaceDiagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: '+ padding +'%; vertical-align: middle; overflow: hidden;">' +
-             '<svg style="display: inline-block; position: absolute; top: 0; left: 0;" '+ viewbox +' preserveAspectRatio="xMinYMin meet">';
-
-for (var i = 0; i < inheritanceChain.length; i++) {
-  var fill = (inheritanceChain[i] == mainIF) ? '#F4F7F8': '#fff';
-  // we are going to the second row with a special line
-  if (i == 4) {
-    result += '<polyline points="'+xpos+','+(ypos+24)+'  '+(xpos+10)+','+(ypos+19)+'  '+(xpos+10)+','+(ypos+29)+'  '+xpos+','+(ypos+24)+'" stroke="#D4DDE4" fill="none"/>'
-    xpos += 10;
-    result += '<line x1="'+xpos+'" y1="'+(ypos+24)+'" x2="'+(xpos+8)+'" y2="'+(ypos+24)+'" stroke="#D4DDE4"/>';
-    xpos += 8;
-    result += '<line x1="'+xpos+'" y1="'+(ypos+24)+'" x2="'+xpos+'" y2="'+(ypos+89)+'" stroke="#D4DDE4"/>';
-    ypos = 90;
-    result += '<line x1="'+xpos+'" y1="'+ypos+'" x2="'+(xpos-17)+'" y2="'+ypos+'" stroke="#D4DDE4"/>';
-    xpos -= 18;
-    ypos = 65;
-  }
-  // first row
-  if (i < 4) {
-    result += rectWithText(xpos, ypos, fill, inheritanceChain[i]);
-    if (i != inheritanceChain.length - 1 && i != 3) {
-      result += lineWithTriangle(xpos, ypos);
-      xpos += 40;
+
+function drawDiagram(inheritanceChain) {
+  for (let i = 0; i < inheritanceChain.length; i++) {
+    const fill = (inheritanceChain[i] == mainInterfaceName) ? '#F4F7F8': '#fff';
+    // we are going to the second row with a connecting line
+    if (i === 4) {
+      connectingLineWithTriangle()
     }
-  } else {
+    // first row
+    if (i < 4) {
+      out += rectWithText(xpos, ypos, fill, inheritanceChain[i]);
+      if (i != inheritanceChain.length - 1 && i != 3) {
+        out += lineWithTriangle(xpos, ypos);
+        xpos += 30;
+      }
     // second row
-    result += rectWithText(xpos, ypos, fill, inheritanceChain[i], true);
-    if (i != inheritanceChain.length - 1 && i != 3) {
-      result += lineWithTriangle(xpos, ypos, true);
-      xpos -= 40;
+    } else {
+      height = 80; // need more space
+      if (i > 5) {
+        offset = 200; // in case of a really long chain, like SVGTextPositioningElement
+      }
+      out += rectWithText(xpos, ypos, fill, inheritanceChain[i], true);
+      if (i != inheritanceChain.length - 1 && i != 3) {
+        out += lineWithTriangle(xpos, ypos, true);
+        xpos -= 30;
+      }
     }
   }
 }
 
-result +='</svg></div>';
-}
-%>
-<div class="hidden" id="inheritance_diagram">
-
-<pre class="brush: html">
-  <%=result%>
-</pre>
+drawDiagram(inheritanceChain);
 
-<pre class="brush: css">
-  a:hover text { fill: #0095DD; pointer-events: all;}
-</pre>
+let output = `<svg viewbox="-${offset} 0 650 ${height}" preserveAspectRatio="xMinYMin meet">`;
+output += out;
+output +='</svg>';
 
-</div>
-
-<%-await template("EmbedLiveSample", ["inheritance_diagram", width, height, '', '', 'inheritance-diagram-frame'])%>
+%>
+<%-output%>

From 4c5a397a105519d3e9bbba6cf17957cfe5602c3d Mon Sep 17 00:00:00 2001
From: Florian Scholz <fs@florianscholz.com>
Date: Thu, 23 Dec 2021 15:16:46 +0100
Subject: [PATCH 2/4] feedback

---
 kumascript/macros/InheritanceDiagram.ejs | 47 +++++++++++++-----------
 1 file changed, 26 insertions(+), 21 deletions(-)

diff --git a/kumascript/macros/InheritanceDiagram.ejs b/kumascript/macros/InheritanceDiagram.ejs
index 5af249020194..ae2a33752534 100644
--- a/kumascript/macros/InheritanceDiagram.ejs
+++ b/kumascript/macros/InheritanceDiagram.ejs
@@ -11,24 +11,23 @@
     - http://localhost:3000/en-US/docs/Web/API/USB/connect_event
 */
 
-const data = web.getJSONData("InterfaceData");
-const href = '/' + env.locale + '/docs/Web/API/';
+const data = web.getJSONData("InterfaceData")[0];
+const href = `/${env.locale}/docs/Web/API/`;
 const mainInterfaceName = $0 || env.slug.replace('Web/API/','').split('/')[0];
 
-let out = "";
 let height = 40;
 let offset = 0;
 let xpos = 1;
 let ypos = 1;
 
 let inheritanceChain = [mainInterfaceName];
-let inh = data[0][mainInterfaceName] != undefined ? data[0][mainInterfaceName].inh : '';
+let inh = data[mainInterfaceName] != undefined ? data[mainInterfaceName].inh : '';
 
 function getInheritance(inh) {
-  if (inh.length > 0) {
+  if (inh !== '') {
     inheritanceChain.unshift(inh);
-    if (Object.prototype.hasOwnProperty.call(data[0], inh)) {
-        inh = data[0][inh].inh;
+    if (data[inh]) {
+        inh = data[inh].inh;
         getInheritance(inh);
     }
   }
@@ -70,29 +69,34 @@ function lineWithTriangle(x, y, reverse) {
 }
 
 function connectingLineWithTriangle() {
-  out += `<polyline points="${xpos},${ypos+14} ${xpos+10},${ypos+9} ${xpos+10},${ypos+19} ${xpos},${ypos+14}" stroke="#D4DDE4" fill="none"/>`;
+  let str = '';
+
+  str += `<polyline points="${xpos},${ypos+14} ${xpos+10},${ypos+9} ${xpos+10},${ypos+19} ${xpos},${ypos+14}" stroke="#D4DDE4" fill="none"/>`;
   xpos += 10;
-  out += `<line x1="${xpos}" y1="${ypos+14}" x2="${xpos+8}" y2="${ypos+14}" stroke="#D4DDE4"/>`;
+  str += `<line x1="${xpos}" y1="${ypos+14}" x2="${xpos+8}" y2="${ypos+14}" stroke="#D4DDE4"/>`;
   xpos += 8;
-  out += `<line x1="${xpos}" y1="${ypos+14}" x2="${xpos}" y2="${ypos+59}" stroke="#D4DDE4"/>`;
+  str += `<line x1="${xpos}" y1="${ypos+14}" x2="${xpos}" y2="${ypos+59}" stroke="#D4DDE4"/>`;
   ypos = 60;
-  out += `<line x1="${xpos}" y1="${ypos}" x2="${xpos-17}" y2="${ypos}" stroke="#D4DDE4"/>`;
-  xpos -= 18;
-  ypos = 47
+  str += `<line x1="${xpos}" y1="${ypos}" x2="${xpos-17}" y2="${ypos}" stroke="#D4DDE4"/>`;
+
+  return str;
 }
 
 function drawDiagram(inheritanceChain) {
+  let str = '';
   for (let i = 0; i < inheritanceChain.length; i++) {
     const fill = (inheritanceChain[i] == mainInterfaceName) ? '#F4F7F8': '#fff';
     // we are going to the second row with a connecting line
     if (i === 4) {
-      connectingLineWithTriangle()
+      str += connectingLineWithTriangle();
+      xpos -= 18;
+      ypos = 47;
     }
     // first row
     if (i < 4) {
-      out += rectWithText(xpos, ypos, fill, inheritanceChain[i]);
+      str += rectWithText(xpos, ypos, fill, inheritanceChain[i]);
       if (i != inheritanceChain.length - 1 && i != 3) {
-        out += lineWithTriangle(xpos, ypos);
+        str += lineWithTriangle(xpos, ypos);
         xpos += 30;
       }
     // second row
@@ -101,19 +105,20 @@ function drawDiagram(inheritanceChain) {
       if (i > 5) {
         offset = 200; // in case of a really long chain, like SVGTextPositioningElement
       }
-      out += rectWithText(xpos, ypos, fill, inheritanceChain[i], true);
-      if (i != inheritanceChain.length - 1 && i != 3) {
-        out += lineWithTriangle(xpos, ypos, true);
+      str += rectWithText(xpos, ypos, fill, inheritanceChain[i], true);
+      if (i != inheritanceChain.length - 1) {
+        str += lineWithTriangle(xpos, ypos, true);
         xpos -= 30;
       }
     }
   }
+  return str;
 }
 
-drawDiagram(inheritanceChain);
+let diagram = drawDiagram(inheritanceChain);
 
 let output = `<svg viewbox="-${offset} 0 650 ${height}" preserveAspectRatio="xMinYMin meet">`;
-output += out;
+output += diagram;
 output +='</svg>';
 
 %>

From 45975eacd60f194c122d103b98d0f8e6e2c6c4fb Mon Sep 17 00:00:00 2001
From: Florian Scholz <fs@florianscholz.com>
Date: Wed, 12 Jan 2022 10:55:37 +0100
Subject: [PATCH 3/4] Prevent cutoffs when xpos is negative

---
 kumascript/macros/InheritanceDiagram.ejs | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/kumascript/macros/InheritanceDiagram.ejs b/kumascript/macros/InheritanceDiagram.ejs
index ae2a33752534..95f2e5a15a9d 100644
--- a/kumascript/macros/InheritanceDiagram.ejs
+++ b/kumascript/macros/InheritanceDiagram.ejs
@@ -102,14 +102,15 @@ function drawDiagram(inheritanceChain) {
     // second row
     } else {
       height = 80; // need more space
-      if (i > 5) {
-        offset = 200; // in case of a really long chain, like SVGTextPositioningElement
-      }
       str += rectWithText(xpos, ypos, fill, inheritanceChain[i], true);
       if (i != inheritanceChain.length - 1) {
         str += lineWithTriangle(xpos, ypos, true);
         xpos -= 30;
       }
+      if (xpos < 0) {
+        // prevent cut off in case of a really long chain (see e.g. SVGTextPositioningElement)
+        offset = 1 + Math.abs(xpos);
+      }
     }
   }
   return str;
@@ -120,6 +121,5 @@ let diagram = drawDiagram(inheritanceChain);
 let output = `<svg viewbox="-${offset} 0 650 ${height}" preserveAspectRatio="xMinYMin meet">`;
 output += diagram;
 output +='</svg>';
-
 %>
 <%-output%>

From 0b91af2bf7d864469d8b36a2b8348e8b1aeb397e Mon Sep 17 00:00:00 2001
From: Florian Scholz <fs@florianscholz.com>
Date: Wed, 12 Jan 2022 11:05:23 +0100
Subject: [PATCH 4/4] No inheritance diagram when there is no inheritance chain

---
 kumascript/macros/InheritanceDiagram.ejs | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/kumascript/macros/InheritanceDiagram.ejs b/kumascript/macros/InheritanceDiagram.ejs
index 95f2e5a15a9d..78e00636c0aa 100644
--- a/kumascript/macros/InheritanceDiagram.ejs
+++ b/kumascript/macros/InheritanceDiagram.ejs
@@ -116,10 +116,14 @@ function drawDiagram(inheritanceChain) {
   return str;
 }
 
-let diagram = drawDiagram(inheritanceChain);
+let output = '';
+
+if (inheritanceChain.length > 1) {
+  let diagram = drawDiagram(inheritanceChain); // needs to run first to calculate offset and height
+  output = `<svg viewbox="-${offset} 0 650 ${height}" preserveAspectRatio="xMinYMin meet">`;
+  output += diagram;
+  output +='</svg>';
+}
 
-let output = `<svg viewbox="-${offset} 0 650 ${height}" preserveAspectRatio="xMinYMin meet">`;
-output += diagram;
-output +='</svg>';
 %>
 <%-output%>