2f:T483,chart = { const chart = renderExpression(tree); yield chart; const svg = d3.select(chart).select("svg"); const color = "rgba(0, 0, 255, 0.3)"; // const groups = svg.selectAll("g:has(>use)"); const groups = svg.selectAll("g"); groups .insert("rect", ":first-child") // .style("pointer-events", "none") .attr("fill", "white") // .style("visibility", "hidden") .each(function (selection) { const { x, y, width, height } = this.parentElement.getBBox(); d3.select(this) .attr("x", x) .attr("y", y) .attr("width", width) .attr("height", height); }) groups .on("mouseenter", function (event) { console.log("a", this, event); // d3.select(this).select("rect").style("visibility", "visible"); d3.select(this).select("rect").attr("fill", color); // event.stopPropagation(); }) .on("mouseleave", function (event) { console.log("b", this); // d3.select(this).select("rect").style("visibility", "hidden"); d3.select(this).select("rect").attr("fill", "white"); // event.stopPropagation(); }); // return chart; }30:[] 2d:{"title":"MathJax Test","cells":[{"id":0,"value":"# MathJax Test","pinned":false,"hidden":false,"mode":"md"},{"id":34,"value":"viewof eq = Inputs.textarea({\n label: \"Description\",\n value: \"x = 1\",\n _value: \"x = 3/(2 * y)\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"tree = mathjs.parse(eq)","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":687,"value":"all = renderExpression(tree);","pinned":false,"hidden":false,"mode":"ojs"},{"id":583,"value":"viewof target = {\n const nodes = [];\n tree.traverse(node => nodes.push(node));\n \n return Inputs.select(nodes, {label: \"Select one\"});\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":508,"value":"findExpressionChart(all, target)","pinned":true,"hidden":false,"mode":"ojs"},{"id":778,"value":"{\n const expressionText = getHtml1(getMath1(renderExpression(target)));\n return htl.html`

${prettify(`dog
`)}

`;\n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":504,"value":"findExpressionChart = (chart, expression) => {\n const expressionText = getHtml1(getMath1(renderExpression(expression)));\n console.log(\"expression:\\n\", prettify(expressionText));\n const chartText = getHtml1(getMath1(chart));\n console.log(\"chart:\\n\", prettify(chartText));\n\n function find(element) {\n const test = getHtml1(element);\n console.log({ eq: test === expressionText });\n console.log(\"test:\\n\", prettify(test));\n\n if (test === expressionText) {\n console.log({ found: element });\n return element;\n }\n\n for (let child of element.children) {\n const found = find(child);\n if (!!found) return found;\n }\n return null;\n }\n\n return find(getMath1(chart));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":672,"value":"compare = (a, b) => htl.html`

${getHtml(a) === getHtml(b) ? \"TRUE\" : \"FALSE\"}

${[a, b].map(el => renderInnerHtmlText(getHtml(el)))}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":551,"value":"getMath = (svg) => d3.select(svg).select('[data-mml-node=\"math\"]')","pinned":false,"hidden":false,"mode":"ojs"},{"id":735,"value":"getMath1 = (svg) => d3.select(svg).select('[data-mml-node=\"math\"]').node();","pinned":false,"hidden":false,"mode":"ojs"},{"id":554,"value":"getHtml = (selection) =>\n selection\n .node()\n .innerHTML.replace(/(xlink:href=\"#MJX)([^\"]*)(\")/g, \"$1$3\")\n .replace(/( ?transform=\"[^\"]*\")/g, \"\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":710,"value":"getHtml1 = (node) =>\n node.innerHTML\n .replace(/(xlink:href=\"#MJX)([^\"]*)(\")/g, \"$1$3\")\n .replace(/( ?transform=\"[^\"]*\")/g, \"\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":540,"value":"renderInnerHtmlText = text => htl.html`

${text}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":319,"value":"renderExpression = (node) => {\n// window.MathJax.options.enableMenu = false;\n\n const svg = MathJax.tex2svg(node.toTex({ parenthesis: \"all\" }), {\n display: true,\n em: 80,\n ex: 40,\n containerWidth: 500,\n scale: 10,\n// zoom: 200\n });\n\n return svg;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":356,"value":"d3.select(chart).select(\"#math\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":440,"value":"MATHJAX_OPTIONS = ({\n enableMenu: false,\n zscale: 300\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":768,"value":"prettify = (text) => beautify(text, { format: \"html\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"MathJax = {\n if (!!window.MathJax) {\n return window.MathJax;\n } else {\n window.MathJax = { options: MATHJAX_OPTIONS };\n return require(\"https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js\").catch(\n () => window[\"MathJax\"]\n );\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"mathjs = require('mathjs')","pinned":false,"hidden":false,"mode":"ojs"},{"id":801,"value":"beautify = import(\"https://cdn.skypack.dev/beautify@0.0.8?min\").then(\n (d) => d.default\n)","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}