Rendering nodes in order means contentEditable TextNodes could be unfocusable

[BlastWind]

with something along the lines of

    if (nodeData.type === "circle") {
      viewContainer
        .append("svg")
        .style("position", "absolute")
        .attr("width", "100%")
        .attr("height", "100%")
        .attr("class", "circleNodeContainer")
        .append("circle")
        .attr("r", 30)
        .attr("cx", nodeData.x)
        .attr("cy", nodeData.y);
    } else if (nodeData.type === "text") {
      viewContainer
        .append("div")
        .style("position", "absolute")
        .attr("contenteditable", true)
        .text("akdlfj");
    }
  });

I can append circle node and text node in order. However, circle nodes are currently rendered with a full sized SVG, which means: if a text node is rendered before a circle node, it can never be focused.

Two potential solutions (or really 1?):

1. Don't render in order. Render circles first, text nodes second. Only display in order when text nodes need not to be edited/focused (e.g., when users are viewing a published roadmap?).
2. Render circles at cx=cy=0 with an adjusted SVG (issue, still, SVG are squared, which means if a text node lies beneath the squared portion, it is unfocusable although it might appear it is.

Using solution 1 for now.