function showTree(tree, name = "", desc = "") { let title = md`### ${name}`; let subtitle = md`##### ${desc}` let level = html``; let label = html` Highlight level: `; let area = html` Total area: ${tree.area}`; let cost = html` Average find cost: ${averageFindCost(tree)}`; let closestSteps = html``; let closestInfo = html` Steps to locate closest leaf to query point: `; let intersectingSteps = html``; let intersectingInfo = html` Steps to locate leaf containing query point: `; let smallestUnionSteps = html``; let smallestUnionInfo = html` Steps to locate leaf that yields smallest union with point: `; closestInfo.append(closestSteps); intersectingInfo.append(intersectingSteps); smallestUnionInfo.append(smallestUnionSteps); let width = _width; let canvas = DOM.canvas(width*2, width); let ctx = canvas.getContext("2d"); let mat2d = glmatrix.mat2d; let transform = mat2d.fromScaling([], [1, 1]); //mat2d.translate(transform, transform, [0.25, 0.25]); mat2d.translate(transform, transform, [50, 50]); //mat2d.scale(transform, transform, [0.5, 0.5]); let inverse = mat2d.invert([], transform); let queryBall = new Ball(queryPoint.x, queryPoint.y, 0.0); let refresh = () => { ctx.save(); ctx.clearRect(0, 0, width*2, width); ctx.lineWidth = 1; // / width; ctx.fillStyle = '#0000000a'; ctx.scale(1, 1); //ctx.translate(0.25, 0.25); //ctx.scale(0.5, 0.5); ctx.translate(50, 50); tree.draw(ctx); ctx.strokeStyle = 'red'; ctx.fillStyle = '#ff000020'; ctx.lineWidth = 3;// / width; tree.drawLevel(ctx,level.value); let closest = tree.closest(queryPoint)[0]; closestSteps.innerHTML = tree.closestSteps; let intersecting = tree.intersecting(queryPoint); intersectingSteps.innerHTML = (intersecting ? "(successful) " : "(unsuccessful) ") + tree.intersectingSteps; let smallestUnionNode = tree.smallestUnionLeaf(queryBall); let smallestUnion = smallestUnionNode.ball.union(queryBall); smallestUnionSteps.innerHTML = tree.smallestUnionSteps; ctx.fillStyle = '#0000ff70'; ctx.strokeStyle = 'blue'; closest.ball.draw(ctx); ctx.fillStyle = '#ffffff70'; if (intersecting) intersecting.ball.draw(ctx); ctx.setLineDash([3, 3]); ctx.strokeStyle = 'green'; smallestUnionNode.ball.draw(ctx); smallestUnion.draw(ctx, false, true); ctx.setLineDash([]); ctx.strokeStyle = 'blue'; ctx.beginPath(); ctx.moveTo(queryPoint.x - 2, queryPoint.y); ctx.lineTo(queryPoint.x + 2, queryPoint.y); ctx.moveTo(queryPoint.x, queryPoint.y - 2); ctx.lineTo(queryPoint.x, queryPoint.y + 2); ctx.stroke(); ctx.restore(); }; canvas.onclick = e => { let [x, y] = vec2.transformMat2d([], [e.offsetX, e.offsetY], inverse); mutable queryPoint = { x, y }; refresh(); }; refresh(); level.oninput = () => refresh(); return html`

${title}${subtitle}${label} ${level}
${area}
${cost}
${closestInfo}
${intersectingInfo}
${smallestUnionInfo}
${canvas}

`; }