2d:null 2e:["$","title",null,{"children":"Editable SVG text | Christian Wilcox | Observable"}] 33:T4fd,textClickHandler = function(evt) { if (document.querySelector("#overlay") !== null) return; // kludgy singleton approach const bbox = evt.target.getBBox(), //evt.target.getBoundingClientRect(), value = evt.target.innerHTML, wrapper = document.querySelector("#wrapper").appendChild(overlay(bbox)), input = wrapper.appendChild(html` `), btn = wrapper.appendChild(html``); btn.addEventListener("click", evt => document.querySelector("#overlay").remove() ); //console.log(bbox); input.focus(); input.setSelectionRange(0, value.length); input.addEventListener("input", evt => { const updateElem = document.querySelector(`#${evt.target.dataset.src}`), maxTextWidth = evt.target.dataset.maxtextwidth ? evt.target.dataset.maxtextwidth : 0; updateElem.textContent = updateElem.dataset.template.replace( "{0}", evt.target.value ); //evt.target.value; adjustTextWidth( updateElem, updateElem.getAttribute("font-size"), maxTextWidth ); }); }34:[] 31:{"id":"52ed242224f25621","slug":"editable-svg-text","title":"Editable SVG text","thumbnail":"d70610b085cb3da753252d92ee2ffd347f8e2879544f1eae94486d1eb9c5f867","access_level":"public","create_time":"$D2018-09-07T15:49:53.068Z","update_time":"$D2018-10-19T13:13:37.910Z","view_time":null,"first_public_time":"$D2018-09-12T18:57:25.380Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"735c6ab969f7c460","login":"cw","name":"Christian Wilcox","avatar_url":"https://avatars-next.observableusercontent.com/368b113ade86a6e356457fa1261dbc0a8f5385612c10809be6aa5d0f98fb0643","tier":"starter_2024"},"version":465,"publish_version":465,"role":null,"authored":false,"authors":[{"type":"individual","id":"d860027f59f6cb70","login":"cw","name":"Christian Wilcox","avatar_url":"https://avatars-next.observableusercontent.com/368b113ade86a6e356457fa1261dbc0a8f5385612c10809be6aa5d0f98fb0643","tier":null}],"members":[{"type":"individual","id":"d860027f59f6cb70","login":"cw","name":"Christian Wilcox","avatar_url":"https://avatars-next.observableusercontent.com/368b113ade86a6e356457fa1261dbc0a8f5385612c10809be6aa5d0f98fb0643","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"d8dadca5ed3ab33f","slug":"svg-exploration","title":"Exploring SVG 💯","owner":{"id":"735c6ab969f7c460","login":"cw","name":"Christian Wilcox"}},"type":"notebook","body":{"title":"Editable SVG text","cells":[{"id":0,"value":"md`# Editable SVG text\n\\`\\`import {text} from \"@cw/editable-svg-text\"\\`\\`\n\nExpects the parent svg element to live within an html div with id of \"wrapper\"\n\nOverlay is currently a simple input element with gray background and OK button\n\nLots of improvements needed here, including a better thought out singleton approach for overlay. \n\nCould do all sorts of custom UI based on context on top of the base overlay.\n\n[foreignObject](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject#Browser_compatibility) would simplify this, but IE/Edge(?) doesn't support it (at least last I checked).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"text = function(\n x,\n y,\n value,\n fontSize,\n maxWidth,\n textAnchor = \"middle\",\n template\n) {\n const id = DOM.uid(\"text\");\n let t = svg`${value}`;\n t.addEventListener(\"click\", textClickHandler);\n\n return t;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":411,"value":"tspan = function({\n x,\n y,\n value,\n fontSize,\n maxWidth,\n textAnchor = \"middle\",\n alignmentBaseline,\n template\n}) {\n const id = DOM.uid(\"text\"),\n xVal = x ? `x=${x}` : ``,\n yVal = y ? `y=${y}` : ``,\n abVal = alignmentBaseline ? `alignment-baseline=${alignmentBaseline}` : ``,\n t = svg`${value}`;\n t.addEventListener(\"click\", textClickHandler);\n return t;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"example = {\n let size = 200,\n maxWidth = size * 0.85,\n fontSize = 25;\n return html`

`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"overlay = function(bbox) {\n const ostyle = `\nposition: absolute;\ntop: 0;\nleft: 0;\nwidth: 100%;\nheight: 100%;\nbackground: yellow;\n`,\n style = `\nposition: absolute;\ntop: ${bbox.y}px;\nleft: ${bbox.x}px;\n//margin: 2em;\npadding: 1em;\nmax-width: ${bbox.width}px;\nmin-width: 100px;\nbackground: lightgray;\nborder-radius: 10px;\nborder: black 1px solid;\ntext-align: center;\n`,\n o = html`

`;\n return o;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":329,"value":"adjustTextWidth = function(elem, fontSize, maxWidth) {\n // native element\n // fontSize in decimal inches\n // maxWidth in decimal inches\n elem.removeAttribute(\"lengthAdjust\");\n elem.removeAttribute(\"textLength\");\n if (\n measureText({\n value: elem.innerHTML,\n fontSize: fontSize\n }) > maxWidth\n ) {\n elem.setAttribute(\"lengthAdjust\", \"spacingAndGlyphs\");\n elem.setAttribute(\"textLength\", maxWidth);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":296,"value":"import {measureText} from \"@cw/canvas-utils\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"