{
const svgNode = svg`<svg viewBox="0 0 ${width} 200">
<circle r=120 fill="#fafafa"></circle>
<circle r=100 fill="#f1f1f1"></circle>
<circle r=80 fill="#e1e1e1"></circle>
<circle r=60 fill="#d1d1d1"></circle>
<circle r=40 fill="#c1c1c1"></circle>
<text transform="translate(10,20)" contentEditable> Hello editable </text>
<text transform="translate(10,50)" > not me </text>
<text transform="translate(10,80)" contentEditable> edit me </text>
`;
editableSVG(svgNode, "text[contentEditable]");
yield svgNode;
}
function editableSVG(node, selector = "text") {
node.addEventListener("mousemove", () => {
node.parentElement.classList.add("editablesvg");
for (const t of node.querySelectorAll(selector + ":not(.editableset)")) {
t.classList.add("editableset");
t.addEventListener("mouseenter", () => {
node.parentElement.setAttribute("contentEditable", true);
node.classList.add('editable');
});
t.addEventListener("mouseout", () => {
node.parentElement.setAttribute("contentEditable", null);
node.classList.remove('editable');
});
}
});
}
editableSVGStyle = html`
<style>
.editablesvg[contentEditable="true"]:focus {outline: none;}
.editablesvg[contentEditable="true"] svg {outline: 1px solid yellow;}
.editablesvg text { cursor: default; }
.editablesvg .editable text[contentEditable] { cursor: text; }
</style>
`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
