From 96fce93aff11f244b086a4a6e0196df79a5149cf Mon Sep 17 00:00:00 2001 From: Florian Scholz Date: Thu, 13 Jan 2022 04:49:07 +0100 Subject: [PATCH] InheritanceDiagram: cleanup code; avoid iframe hack; use single parameter (#5056) * Cleanup code; avoid iframe hack * feedback * Prevent cutoffs when xpos is negative * No inheritance diagram when there is no inheritance chain --- kumascript/macros/InheritanceDiagram.ejs | 191 +++++++++++------------ 1 file changed, 94 insertions(+), 97 deletions(-) diff --git a/kumascript/macros/InheritanceDiagram.ejs b/kumascript/macros/InheritanceDiagram.ejs index a72eee7d2662..78e00636c0aa 100644 --- a/kumascript/macros/InheritanceDiagram.ejs +++ b/kumascript/macros/InheritanceDiagram.ejs @@ -1,132 +1,129 @@ <% /* - 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")[0]; +const href = `/${env.locale}/docs/Web/API/`; +const mainInterfaceName = $0 || env.slug.replace('Web/API/','').split('/')[0]; + +let height = 40; +let offset = 0; +let xpos = 1; +let ypos = 1; + +let inheritanceChain = [mainInterfaceName]; +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)) { - var inh = data[0][inh].inh; + if (data[inh]) { + inh = data[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 '' + - '' + - ''+interface+'' + - ''; + return ` + + + + ${interfaceName} + + `; } 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 += ''; - x -= 10; - str += ''; - } else { - str += ''; - x += 10; - str += ''; + 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 += ``; + x -= 10; + str += ``; + return str; } -var padding = (height / width) * 100; -var xpos = 1; -var ypos = 1; -var viewbox = 'viewbox="-'+ offset + ' 0 '+ width + ' ' + height +'"'; +function connectingLineWithTriangle() { + let str = ''; -if (rtl) { - viewbox = 'viewbox="510 0 '+ width + ' ' + height +'" transform="scale(-1 1)"'; + str += ``; + xpos += 10; + str += ``; + xpos += 8; + str += ``; + ypos = 60; + str += ``; + + return str; } -result = '
' + - ''; - -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 += '' - xpos += 10; - result += ''; - xpos += 8; - result += ''; - ypos = 90; - result += ''; - 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) { + 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) { + str += connectingLineWithTriangle(); + xpos -= 18; + ypos = 47; } - } else { + // first row + if (i < 4) { + str += rectWithText(xpos, ypos, fill, inheritanceChain[i]); + if (i != inheritanceChain.length - 1 && i != 3) { + str += 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 + 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; } -result +='
'; -} -%> - +if (inheritanceChain.length > 1) { + let diagram = drawDiagram(inheritanceChain); // needs to run first to calculate offset and height + output = ``; + output += diagram; + output +=''; +} -<%-await template("EmbedLiveSample", ["inheritance_diagram", width, height, '', '', 'inheritance-diagram-frame'])%> +%> +<%-output%>