2c:null 2d:["$","title",null,{"children":"Textbox features demo | jveres | Observable"}] 32:Td8f,viewof options = { const dom = html`` const readValues = () => { const elms = dom.querySelectorAll('input,select'); return Array.from(elms).reduce((a, c) => { if (c.type === 'range') { a[c.name] = c.valueAsNumber; } else { a[c.name] = c.value; } return a; }, {}); }; dom.oninput = e => { e && e.preventDefault(); dom.value = readValues(); }; dom.value = readValues(); return dom; }33:Tae5,demo = { const dom = html`

`; const context = DOM.context2d(320, 320); dom.appendChild(context.canvas); const rot = new Textbox.Rotator({ width: options.width, height: options.height, rotate: options.rotate, anchor: `${options.valign} ${options.halign}` }); // configure text layout const parser = extToParser[text.id.split('.')[1]]; const box = new Textbox({ width: options.width, height: options.height, valign: options.gravity, align: options.align, parser: parser, overflowLine: "ellipsis", font: `${options.size}px/${options.leading}px ${options.font}` }); const textbox = dom.querySelector('#textbox'); textbox.innerHTML = ''; textbox.appendChild(rot.render(box.render(passage))); // draw a bounding frame const anchor = rot.anchor(); const frame = dom.querySelector('#bbox'); frame.setAttribute('width', options.width); frame.setAttribute('height', options.height); frame.setAttribute('x', anchor[0]); frame.setAttribute('y', anchor[1]); frame.setAttribute('transform', `rotate(${rot.rotate()})`); // render canvas context.save(); context.fillStyle = '#fff'; context.fillRect(0, 0, 320, 320); context.translate(margin.left, margin.top); // workspace context.fillStyle = '#eee'; context.fillRect(0, 0, 300, 300); context.font = '12px sans-serif'; context.fillStyle = '#ccc'; context.fillText('CANVAS', 5, 295) context.translate(300 / 2, 300 / 2); rot.render(ctx => { box.render(ctx, passage); context.strokeStyle = 'red'; context.strokeDashArray = '2 2'; context.setLineDash([ 2, 2 ]); context.strokeRect(0, 0, options.width, options.height); }, context); context.strokeStyle = 'red'; context.fillStyle = 'pink'; context.beginPath(); context.ellipse(0, 0, 3, 3, 0, 0, 2 * Math.PI); context.stroke(); context.fill(); context.restore(); return dom; }34:T566,viewof text = { const dom = html`` const readValues = () => { const elms = dom.querySelectorAll('input,select'); return Array.from(elms).reduce((a, c) => { if (c.type === 'range') { a[c.name] = c.valueAsNumber; } else { a[c.name] = c.value; } return a; }, {}); }; dom.oninput = e => { e && e.preventDefault(); dom.value = readValues(); }; dom.value = readValues(); return dom; }35:[{"id":"60018eb0ab3ab4d598c6e51665b2a64b908e65fca51e80986da88b4ae591511656b968cfb15c1bddf3a2494e7071821bc2715e867357375b392e93b7c407a6a1","href":"https://static.observableusercontent.com/files/60018eb0ab3ab4d598c6e51665b2a64b908e65fca51e80986da88b4ae591511656b968cfb15c1bddf3a2494e7071821bc2715e867357375b392e93b7c407a6a1","name":"html.html","type":"text/html","lastModified":1664044716276.522,"size":755},{"id":"5b8540a0b60486c4a938097b50bd81d6351c2edf07a0517a4985503c80b578b23576cbc2c93027be96da3d95f6cdeec7e0867416a4d59e3cc9ef6564866e3c9e","href":"https://static.observableusercontent.com/files/5b8540a0b60486c4a938097b50bd81d6351c2edf07a0517a4985503c80b578b23576cbc2c93027be96da3d95f6cdeec7e0867416a4d59e3cc9ef6564866e3c9e","name":"latex.tex","type":"application/octet-stream","lastModified":1664044716276.522,"size":652},{"id":"a47e006f0563974c4a1d9cf02ca4692f9d6339ca6214e7f131bf773b42509574cd5bb52ad95b4ae2391ba1a45529c71896b0c308e10422cf9406659a6959b0a1","href":"https://static.observableusercontent.com/files/a47e006f0563974c4a1d9cf02ca4692f9d6339ca6214e7f131bf773b42509574cd5bb52ad95b4ae2391ba1a45529c71896b0c308e10422cf9406659a6959b0a1","name":"lines.html","type":"text/html","lastModified":1664044716276.522,"size":158},{"id":"92e8ab6ccaf4d5d226c8aa1be8202bba90a1ce02276a023a790aec0028f453df4f7c23e7a72ffdb02744a15c9ae60b673306c39fba5366eff9278728d8d30133","href":"https://static.observableusercontent.com/files/92e8ab6ccaf4d5d226c8aa1be8202bba90a1ce02276a023a790aec0028f453df4f7c23e7a72ffdb02744a15c9ae60b673306c39fba5366eff9278728d8d30133","name":"short.txt","type":"text/plain","lastModified":1664044716276.522,"size":68},{"id":"27ee3b6740ce5f51a81f0d4b3af45939011d374efbeae3c0c3199919ca9edd1f982d85c19ce002c692143056bf5c05ab803061ae11690274193ee7bc02762ee8","href":"https://static.observableusercontent.com/files/27ee3b6740ce5f51a81f0d4b3af45939011d374efbeae3c0c3199919ca9edd1f982d85c19ce002c692143056bf5c05ab803061ae11690274193ee7bc02762ee8","name":"tough.html","type":"text/html","lastModified":1664044716276.522,"size":265}] 30:{"id":"927e78636412095b","slug":null,"title":"Textbox features demo","thumbnail":"c9136e6302cf9092733f5c7d8c070c4887956460fb162c32097bc08bf2eeb2f0","access_level":"public","create_time":"$D2022-09-24T18:38:36.276Z","update_time":"$D2023-05-15T08:11:53.532Z","view_time":null,"first_public_time":"$D2023-05-15T06:32:05.294Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"8a2dcc9f6b5f01d8","login":"jveres","name":"jveres","avatar_url":"https://avatars-next.observableusercontent.com/b9bf1d26ee6269e64f7ba9d50c1f3402049de225f9b31d52deba7748d83b30ac","tier":"starter_2024"},"version":308,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b206b888f99b6c9d","login":"jveres","name":"jveres","avatar_url":"https://avatars-next.observableusercontent.com/b9bf1d26ee6269e64f7ba9d50c1f3402049de225f9b31d52deba7748d83b30ac","tier":null}],"members":[{"type":"individual","id":"b206b888f99b6c9d","login":"jveres","name":"jveres","avatar_url":"https://avatars-next.observableusercontent.com/b9bf1d26ee6269e64f7ba9d50c1f3402049de225f9b31d52deba7748d83b30ac","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Textbox features demo","cells":[{"id":0,"value":"md`# Textbox features demo`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"md`[Textbox](https://github.com/borgar/textbox) is a simple JavaScript library to layout rich text for display on SVG or Canvas. It can fairly decently line-break and render rich text given some boundaries. It understands simple text, and a subset of HTML and LaTeX syntax. The original purpose of this software is to aid labeling charts.\n\n#### Some features:\n\n- Line-break text to fit dimensions.\n- Can overflow text into \\`...\\` if it doesn't fit designated area.\n- Understands common text features: **bold**, *italic*, [links](https://en.wikipedia.org/wiki/Hyperlink), etc...\n- Knows that there is different whitespace like thin, or non-breaking.\n- Tries to be smart about line-breaking before or after certain characters (breaks can occur after \\`-\\` but not before).\n- Supports hyphenation if text is prepared with [soft-hyphens](https://en.wikipedia.org/wiki/Soft_hyphen).\n\nCheck it out out on [GitHub](https://github.com/borgar/textbox) or [npm](https://www.npmjs.com/package/@borgar/textbox).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":" passage = texts[text.id].replace(/\\^([- ])/g, (a, m) => {\n // transform \"^ \" and \"^-\" to non-break and soft-hyphen\n return String.fromCharCode(m.charCodeAt(0) + 128);\n });","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"extToParser = ({\n 'txt': Textbox.textparser,\n 'html': Textbox.htmlparser,\n 'tex': Textbox.latexparser\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"margin = ({ top: 10, right: 10, bottom: 10, left: 10 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"texts = ({\n 'text.txt': `* Lorem emopji ipsum 😎😎😎😎😎 🎉🎉 ✅ 👌👌👌👌👌 🤩⬇️ ⚪️⚪️⚪️⚪️⚪️⚪️⚪️⚪️⚪️⚪️⚪️⚪️⚪️⚪️⚪️⚪️⚪️⚪️⚪️⚪️⚪️⚪️⚪️⚪️`\n,\n 'short.txt': (await FileAttachment('short.txt').text()).trim(),\n 'tough.html': (await FileAttachment('tough.html').text()).trim(),\n 'html.html': (await FileAttachment('html.html').text()).trim(),\n 'latex.tex': (await FileAttachment('latex.tex').text()).trim(),\n 'lines.html': (await FileAttachment('lines.html').text()).trim()\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"Textbox = require(\"@borgar/textbox\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"import {select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 31:"$30:body"