2f: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; }30: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; }31: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; }32:[{"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}] 2d:{"title":"Textbox features demo","cells":[{"id":0,"value":"md`# Textbox features demo`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":59,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":167,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":220,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":170,"value":"extToParser = ({\n 'txt': Textbox.textparser,\n 'html': Textbox.htmlparser,\n 'tex': Textbox.latexparser\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":174,"value":"margin = ({ top: 10, right: 10, bottom: 10, left: 10 })","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":5,"value":"Textbox = require(\"@borgar/textbox\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"import {select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}