${name}

31:T9cf,viewof xml = { let example_xml = ` `; return textarea({ title: "XML", value: example_xml, placeholder: "Insert XML here", width: "100%", rows: 10 }); }32:Td25,EXAMPLES = ({ ANDROID_BASIC: ` `, LIMBIC_LOGO: ` ` })33:[] 2f:{"title":"Android XML to SVG","cells":[{"id":0,"value":"md`\n# Android XML to SVG\n\nPartly adapted from https://gitlab.com/alessandrolucchet/VectorDrawable2Svg/-/blob/master/VectorDrawable2Svg.py\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":293,"value":"{\n let set_xml = value => {\n let textarea = viewof xml.querySelector('textarea');\n textarea.value = value;\n textarea.dispatchEvent(new CustomEvent('input', { bubbles: true }));\n };\n return htl.html`\n ${Object.entries(EXAMPLES).map(\n ([key, value]) => htl.html.fragment`\n \n `\n )}\n `;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"vector = xmljs.xml2js(xml, { compact: true, ignoreComment: true }).vector","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"{\n let vector_attr = vector._attributes;\n let ratio =\n vector_attr['android:viewportWidth'] /\n vector_attr['android:viewportHeight'];\n let height = 300;\n let width = height * ratio;\n let svg_element = htl.svg`\n ${possibly_array(vector.path).map(map_path)}\n ${possibly_array(vector.group).map(map_group)}\n `;\n\n return htl.html`${svg_element}`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":267,"value":"map_gradient = gradient => {\n let attrs = gradient._attributes;\n\n let id = uuid();\n let fragment = htl.svg.fragment`\n \n ${gradient.item.map(\n ({ _attributes: attrs }) => htl.svg.fragment`\n \n `\n )}\n \n `;\n return {\n fragment: fragment,\n attributes: {\n ['android:fillColor']: `url('#${id}')`\n }\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":71,"value":"map_aapt_attr = attr => {\n return [...possibly_array(attr.gradient).map(map_gradient)];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":228,"value":"map_group = group => {\n let transforms = [];\n\n if (group._attributes['android:rotation']) {\n let rotation = group._attributes['android:rotation'];\n // Important: This rotation is unitless, uses degree\n transforms.push(`rotate(${rotation})`);\n }\n\n let transform_origin = `${group._attributes['android:pivotX'] || 0}px ${group\n ._attributes['android:pivotY'] || 0}px`;\n\n return htl.svg.fragment`\n \n ${svg_title(group._attributes['android:name'])}\n ${possibly_array(group.path).map(map_path)}\n \n `;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":63,"value":"map_path = path => {\n let complex_attrs = path['aapt:attr']\n ? map_aapt_attr(not_an_array(path['aapt:attr']))\n : [];\n\n let attrs = { ...path._attributes };\n for (let complex_attr of complex_attrs) {\n attrs = {\n ...attrs,\n ...complex_attr.attributes\n };\n }\n\n return htl.svg.fragment`\n ${complex_attrs.map(x => x.fragment)}\n \n ${svg_title(path._attributes['android:name'])}\n \n `;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":264,"value":"svg_title = name => {\n if (name == null) {\n return null;\n }\n\n return htl.svg.fragment`${name}`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":203,"value":"md`\n### Adapt color\n\nAndroid hex colors with alpha are structured like \\`#AARRGGBB\\` where css uses \\`#RRGGBBAA\\`.\nThis code adapts that colors for now, and doesn't touch other colors.\n\n~~~js\ntransform_color('#AA001122') // Changed: \"${transform_color('#AA001122')}\"\ntransform_color('#00aabbcc') // Changed: \"${transform_color('#00aabbcc')}\"\ntransform_color('red') // Unchanged: \"${transform_color('red')}\"\ntransform_color('#KKLLIIAA') // Unchanged: \"${transform_color('#KKLLIIAA')}\"\ntransform_color('#AABBCC') // Unchanged: \"${transform_color('#AABBCC')}\"\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"transform_color = color => {\n if (typeof color !== 'string') return color;\n\n let aarrggbb_match = color.match(/^#([0-9A-F]{2})([0-9A-F]{6})$/i);\n if (aarrggbb_match) {\n return `#${aarrggbb_match[2]}${aarrggbb_match[1]}`;\n }\n return color;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"md`\n### XML-js array adapters\nXML-js will make \"smartly\" adapt elements into either an array (when there are multiple elements of a type) or into a value (when there is only one element of a type).\n\n##### Possibly Array\nSometimes I am expecting an array, but then I could use one item (and put it in an array).\n\n##### Not an Array\nSometimes I expect only one item, and then an array would actually be an error.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":198,"value":"possibly_array = item_or_array => {\n if (item_or_array == null) {\n return [];\n } else if (Array.isArray(item_or_array)) {\n return item_or_array; // array\n } else {\n return [item_or_array]; // item\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":214,"value":"not_an_array = item_or_array => {\n if (Array.isArray(item_or_array)) {\n throw new Error(`Can't be an array`);\n } else {\n return item_or_array;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":281,"value":"md`### Examples`","pinned":false,"hidden":false,"mode":"ojs"},{"id":285,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":192,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"import { textarea } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"xmljs = require('https://bundle.run/xml-js@1.6.11')","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"html = htl.html","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"htl = require('htl')","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"uuid = (await require('uuid@7.0.2/dist/umd/uuid.min.js')).v4","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}