2a:null 2b:["$","title",null,{"children":"coarse | ento | Observable"}] 30:T964,/** * Convert an svg with rough * @kind function * @param {Node} input An svg node to render with rough * @param {Object} [options={}] Global configuration options for rough * @returns {Node} The converted svg as a DOM Node */ coarse = (input, options = {}) => { // Parse svg and initialize rough const container = document.createElement('template'); container.appendChild(input.cloneNode(true)); const svg = container.querySelector('svg'); const rc = rough.svg(svg, { options }); // Get all descendants of the svg that should be processed const children = svg.querySelectorAll( 'circle, rect, ellipse, line, polygon, polyline, path' ); // Loop through all child elements for (let i = 0; i < children.length; i += 1) { const original = children[i]; const params = []; let shapeType; switch (original.tagName) { case 'circle': params.push( ...getNum(original, ['cx', 'cy']), ...getDiam(original, ['r']) ); shapeType = 'circle'; break; case 'rect': params.push(...getNum(original, ['x', 'y', 'width', 'height'])); shapeType = 'rectangle'; break; case 'ellipse': params.push( ...getNum(original, ['cx', 'cy']), ...getDiam(original, ['rx', 'ry']) ); shapeType = 'ellipse'; break; case 'line': params.push(...getNum(original, ['x1', 'y1', 'x2', 'y2'])); shapeType = 'line'; break; case 'polygon': params.push(getCoords(original, 'points')); shapeType = 'polygon'; break; case 'polyline': params.push(getCoords(original, 'points')); shapeType = 'linearPath'; break; case 'path': params.push(original.getAttribute('d')); shapeType = 'path'; break; } // Generate the new shape const replacement = rc[shapeType](...params, getSettings(original)); // Get all attributes from the original element that should be copied over const attributes = getAttributes(original).filter( attribute => !blacklist.includes(attribute.name) ); // Copy all valid attributes to the replacement attributes.forEach(({ name, value }) => { replacement.setAttribute(name, value); }); original.replaceWith(replacement); } return svg.parentNode.removeChild(svg); }31:T520,/** * Converts attributes to settings for rough * * Port-specific: pulls relevant attributes out of the style attribute */ getSettings = element => { const settings = {}; if (element.hasAttribute('stroke')) { settings.stroke = element.getAttribute('stroke'); } if (element.hasAttribute('fill')) { settings.fill = element.getAttribute('fill'); } if (element.hasAttribute('data-fill-style')) { settings.fillStyle = element.getAttribute('data-fill-style'); } if ( element.hasAttribute('stroke-width') && !element.getAttribute('stroke-width').includes('%') ) { settings.strokeWidth = parseFloat(element.getAttribute('stroke-width'), 10); } // Attributes on SVG elements are lower priority than what the style attribute specifies: // https://www.w3.org/TR/SVG/styling.html#PresentationAttributes if (element.hasAttribute('style')) { const originalStyle = element.getAttribute('style'); const style = parseStyle(originalStyle); if ('stroke' in style) { settings.stroke = style['stroke']; } if ('fill' in style) { settings.fill = style['fill']; } if ('stroke-width' in style && !style['stroke-width'].includes('%')) { settings.strokeWidth = parseFloat(style['stroke-width'], 10); } } return settings; }32:T4662,inkscapeSvg = html` `33:[] 2e:{"id":"9777f88a637f8de1","slug":"coarse","title":"coarse","thumbnail":"fe328d763f348f29de17bc65fe0dd4c46cd6cb3da343ef77c674c97e16d3a9a5","access_level":"public","create_time":"$D2020-10-17T05:57:11.326Z","update_time":"$D2020-10-28T23:24:47.558Z","view_time":null,"first_public_time":"$D2020-10-17T06:57:47.439Z","fork":false,"stars":5,"starred":false,"owner":{"type":"team","id":"29c3cae0b7a46ab0","login":"ento","name":"ento","avatar_url":"https://avatars-next.observableusercontent.com/243e0c0d5a7636b3c2ec7be518b54666640203cca9008428e1f02a36bcd0488b","tier":"starter_2024"},"version":297,"publish_version":297,"role":null,"authored":false,"authors":[{"type":"individual","id":"9e583a9c2f29bc70","login":"ento","name":"ento","avatar_url":"https://avatars-next.observableusercontent.com/243e0c0d5a7636b3c2ec7be518b54666640203cca9008428e1f02a36bcd0488b","tier":null}],"members":[{"type":"individual","id":"9e583a9c2f29bc70","login":"ento","name":"ento","avatar_url":"https://avatars-next.observableusercontent.com/243e0c0d5a7636b3c2ec7be518b54666640203cca9008428e1f02a36bcd0488b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":1,"collection":{"id":"a938e0a9295452a5","slug":"tools","title":"Authoring Tools","owner":{"id":"29c3cae0b7a46ab0","login":"ento","name":"ento"}},"type":"notebook","body":{"title":"coarse","cells":[{"id":0,"value":"md`# coarse\n[coarse](https://www.npmjs.com/package/coarse), a simple wrapper that converts SVGs server-side to a more rough version with [rough](https://roughjs.com/), slightly modified so that it runs in Observable notebooks. You can browse the original source on [unpkg.com](https://unpkg.com/browse/coarse@0.8.3/). `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":213,"value":"coarse(dot`digraph { a -> b; }`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":96,"value":"md`## package.json`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":98,"value":"originalPackageJson = ({\n name: \"coarse\",\n description: \"convert an svg server-side with rough\",\n author: \"ismay\",\n version: \"0.8.3\",\n license: \"MIT\",\n main: \"lib/index.js\",\n scripts: {\n test: \"jest\",\n \"lint:js\": \"eslint '**/*.js'\",\n \"lint:prettier\": \"prettier --list-different '**/*.js'\",\n precommit: \"lint-staged\"\n },\n dependencies: {\n jsdom: \"^15.0.0\",\n roughjs: \"^3.0.0\"\n },\n jest: {\n testEnvironment: \"node\"\n },\n greenkeeper: {\n ignore: [\n \"coveralls\",\n \"eslint\",\n \"eslint-config-airbnb-base\",\n \"eslint-config-prettier\",\n \"eslint-plugin-import\",\n \"husky\",\n \"is-svg\",\n \"jest\",\n \"lint-staged\",\n \"prettier\"\n ]\n },\n devDependencies: {\n eslint: \"^5.0.0\",\n \"eslint-config-airbnb-base\": \"^13.0.0\",\n \"eslint-config-prettier\": \"^2.9.0\",\n \"eslint-plugin-import\": \"^2.12.0\",\n husky: \"^0.14.3\",\n \"is-svg\": \"^3.0.0\",\n jest: \"^23.1.0\",\n \"lint-staged\": \"^7.1.0\",\n prettier: \"^1.12.1\"\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":22,"value":"md`## lib/index.js`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":23,"value":"rough = require('roughjs@3.0.0/dist/rough.js').catch(() => window.rough)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":27,"value":"/**\n * Attributes that should not be transferred to the new shape\n */\n\nblacklist = [\n 'cx',\n 'cy',\n 'd',\n 'fill',\n 'height',\n 'points',\n 'r',\n 'rx',\n 'ry',\n 'stroke-width',\n 'stroke',\n 'width',\n 'x',\n 'x1',\n 'x2',\n 'y',\n 'y1',\n 'y2'\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":30,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":46,"value":"md`## lib/index.test.js\nNote: \\`isSvg\\` checks are simplified, as they require the 'is-svg' module which wasn't easily importable. Added \\`.outerHTML\\` to \\`result\\` where necessary and added the \\`html\\` tag around input values, as this port takes and returns node objects, not a string.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":165,"value":"isSvg = node => node.tagName.toLowerCase() === 'svg'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":47,"value":"it('converts an svg with a circle to a valid svg', () => {\n const svg = html``;\n\n const result = coarse(svg);\n expect(result.outerHTML.includes('path')).toBe(true);\n expect(isSvg(result)).toBe(true);\n expect(svg).not.toEqual(result);\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":55,"value":"it('converts an svg with a rect to a valid svg', () => {\n const svg = html``;\n\n const result = coarse(svg);\n expect(result.outerHTML.includes('path')).toBe(true);\n expect(isSvg(result)).toBe(true);\n expect(svg).not.toEqual(result);\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":58,"value":"it('converts an svg with a polygon to a valid svg', () => {\n const svg = html``;\n\n const result = coarse(svg);\n expect(result.outerHTML.includes('path')).toBe(true);\n expect(isSvg(result)).toBe(true);\n expect(svg).not.toEqual(result);\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":64,"value":"it('converts an svg with a polyline to a valid svg', () => {\n const svg = html`