2c:null 2d:["$","title",null,{"children":"Flexbox layout in SVG with Yoga - Version 2 | Thijs Vogels | Observable"}] 32:T4de,render(htm`

Demo 2

`)33:T1b19,Flex = { function Flex(props) { const { children, svg, left = 0, top = 0, ...otherProps } = props; const layout = flexLayout({ props }); const flexed = htm`<${FlexResolved} left=${parseFloat(left) + layout.left} top=${parseFloat(top) + layout.top} width=${layout.width} height=${layout.height} layout=${layout} ...${otherProps} > ${children} `; if (svg) { return htm``; } else { return flexed; } } function FlexResolved(props) { return htm`<${Preact.Fragment}>${[ ...childrenToArray(props.children) .filter(child => typeof child === "function") .map((child, i) => { const { width, height, left, top } = props; return htm`<${Preact.Fragment}> ${child({ width, height, left, top, right: left + width, bottom: top + height, hcenter: left + width / 2, vcenter: top + height / 2 })} `; }), ...childrenToArray(props.children) .filter(child => child.type === Flex) .map((child, i) => { const layout = props.layout.children[i]; return htm`<${FlexResolved} key=${`a${i}`} left=${(props.left || 0) + layout.left} top=${(props.top || 0) + layout.top} width=${layout.width} height=${layout.height} layout=${layout} ...${child.attributes} > ${child.props.children} `; }) ]}`; } function childrenToArray(children) { // This works a bit different from React.Children.toArray // React.Children.toArray didn't work with a function as a child. if (children == null) { return []; } else if (typeof children === "function") { return flatten([children]); } else if (typeof children === "object") { return flatten([children]); } } function flatten(array) { const result = []; for (let entry of array) { if (Array.isArray(entry)) { for (let a of flatten(entry)) { result.push(a); } } else { result.push(entry); } } return result; } function flexLayout(reactElement) { const layoutTree = buildTree(reactElement); layoutTree.calculateLayout(undefined, undefined, yoga.DIRECTION_LTR); const computed = getComputedLayout(layoutTree); layoutTree.freeRecursive(); return computed; } function buildTree(reactElement) { const attr = reactElement.props; const tree = yoga.Node.create(); // this needs to be freed with node.freeRecursive() // Apply properties from the dom nodes with defaults from the CSS spec tree.setAlignContent( attr.hasOwnProperty("align-content") ? parse.align(attr["align-content"]) : yoga.ALIGN_STRETCH ); tree.setAlignItems( attr.hasOwnProperty("align-items") ? parse.align(attr["align-items"]) : yoga.ALIGN_STRETCH ); tree.setAlignSelf( attr.hasOwnProperty("align-self") ? parse.align(attr["align-self"]) : yoga.ALIGN_AUTO ); tree.setDisplay(yoga.DISPLAY_FLEX); tree.setFlexDirection( attr.hasOwnProperty("flex-direction") ? parse.direction(attr["flex-direction"]) : yoga.FLEX_DIRECTION_ROW ); tree.setFlexGrow( attr.hasOwnProperty("flex-grow") ? parseFloat(attr["flex-grow"]) : 0 ); tree.setFlexShrink( attr.hasOwnProperty("flex-shrink") ? parseFloat(attr["flex-shrink"]) : 1 ); tree.setFlexWrap( attr.hasOwnProperty("flex-wrap") ? parse.wrap(attr["flex-wrap"]) : yoga.WRAP_NO_WRAP ); tree.setHeight(attr.hasOwnProperty("height") ? attr.height : "auto"); tree.setWidth(attr.hasOwnProperty("width") ? attr.width : "auto"); tree.setJustifyContent( attr.hasOwnProperty("justify-content") ? parse.justifyContent(attr["justify-content"]) : yoga.JUSTIFY_FLEX_START ); if (attr.hasOwnProperty("aspect-ratio")) tree.setAspectRatio(parseFloat(attr["aspect-ratio"])); if (attr.hasOwnProperty("flex-basis")) tree.setFlexBasis(attr["flex-basis"]); if (attr.hasOwnProperty("margin")) tree.setMargin(yoga.EDGE_ALL, attr["margin"]); if (attr.hasOwnProperty("margin-left")) tree.setMargin(yoga.EDGE_LEFT, attr["margin-left"]); if (attr.hasOwnProperty("margin-right")) tree.setMargin(yoga.EDGE_RIGHT, attr["margin-right"]); if (attr.hasOwnProperty("margin-top")) tree.setMargin(yoga.EDGE_TOP, attr["margin-top"]); if (attr.hasOwnProperty("margin-bottom")) tree.setMargin(yoga.EDGE_BOTTOM, attr["margin-bottom"]); if (attr.hasOwnProperty("max-height")) tree.setMaxHeight(attr["max-height"]); if (attr.hasOwnProperty("max-width")) tree.setMaxWidth(attr["max-width"]); if (attr.hasOwnProperty("min-height")) tree.setMaxHeight(attr["min-height"]); if (attr.hasOwnProperty("min-width")) tree.setMaxWidth(attr["min-width"]); if (attr.hasOwnProperty("overflow")) tree.setOverflow(parse.overflow(attr.overflow)); if (attr.hasOwnProperty("padding")) tree.setPadding(yoga.EDGE_ALL, attr["padding"]); if (attr.hasOwnProperty("padding-left")) tree.setPadding(yoga.EDGE_LEFT, attr["padding-left"]); if (attr.hasOwnProperty("padding-right")) tree.setPadding(yoga.EDGE_RIGHT, attr["padding-right"]); if (attr.hasOwnProperty("padding-top")) tree.setPadding(yoga.EDGE_TOP, attr["padding-top"]); if (attr.hasOwnProperty("padding-bottom")) tree.setPadding(yoga.EDGE_BOTTOM, attr["padding-bottom"]); // Recurse into the child nodes to build a tree childrenToArray(reactElement.props.children) .filter(child => child.type === Flex) .forEach((child, i) => { tree.insertChild(buildTree(child), i); }); return tree; } function getComputedLayout(yogaTree) { const layout = yogaTree.getComputedLayout(); const children = []; for (let i = 0; i < yogaTree.getChildCount(); ++i) { children.push(getComputedLayout(yogaTree.getChild(i))); } return { ...layout, children }; } return Flex; }34:T7df,parse = ({ direction(direction) { if (direction === "column") return yoga.FLEX_DIRECTION_COLUMN; else if (direction === "column-reverse") return yoga.FLEX_DIRECTION_COLUMN_REVERSE; else if (direction === "row") return yoga.FLEX_DIRECTION_ROW; else if (direction === "row-reverse") return yoga.FLEX_DIRECTION_ROW_REVERSE; else throw new Error(`Unknown direction ${direction}.`); }, wrap(wrap) { if (wrap === "nowrap") return yoga.WRAP_NO_WRAP; else if (wrap === "wrap") return yoga.WRAP_WRAP; else if (wrap === "wrap-reverse") return yoga.WRAP_WRAP_REVERSE; else throw new Error(`Unknown wrap ${wrap}.`); }, overflow(value) { if (value === "visible") return yoga.OVERFLOW_VISIBLE; else if (value === "hidden") return yoga.OVERFLOW_HIDDEN; else if (value === "scroll") return yoga.OVERFLOW_SCROLL; else throw new Error(`Unknown overflow ${value}.`); }, align(value) { if (value === "stretch") return yoga.ALIGN_STRETCH; else if (value === "auto") return yoga.ALIGN_AUTO; else if (value === "center") return yoga.ALIGN_CENTER; else if (value === "flex-start") return yoga.ALIGN_FLEX_START; else if (value === "flex-end") return yoga.ALIGN_FLEX_END; else if (value === "baseline") return yoga.ALIGN_BASELINE; else if (value === "space-around") return yoga.ALIGN_SPACE_AROUND; else if (value === "space-between") return yoga.ALIGN_SPACE_BETWEEN; else throw new Error(`Unknown align ${value}.`); }, justifyContent(value) { if (value === "flex-start") return yoga.JUSTIFY_FLEX_START; else if (value === "flex-end") return yoga.JUSTIFY_FLEX_END; else if (value === "center") return yoga.JUSTIFY_CENTER; else if (value === "space-between") return yoga.JUSTIFY_SPACE_BETWEEN; else if (value === "space-around") return yoga.JUSTIFY_SPACE_AROUND; else if (value === "space-evenly") return yoga.JUSTIFY_SPACE_EVENLY; else throw new Error(`Unknown justify-content ${value}.`); } })35:[] 30:{"id":"581a289263a8efdc","slug":"flexbox-layout-in-svg-with-yoga-version-2","title":"Flexbox layout in SVG with Yoga - Version 2","thumbnail":"30be97d59c9606e028a92c5d1464f2feb5997710acec7d481137e9f1063a2e05","access_level":"public","create_time":"$D2020-01-23T15:05:46.137Z","update_time":"$D2020-11-16T13:22:01.095Z","view_time":null,"first_public_time":"$D2020-01-23T15:41:05.923Z","has_unpublished_edits":null,"fork":true,"stars":9,"starred":false,"owner":{"type":"team","id":"63d4ae9351b957f2","login":"tvogels","name":"Thijs Vogels","avatar_url":"https://avatars-next.observableusercontent.com/caecb0802edbb2531d0d2883357c53d701439f3641bbc772df9d728d289a6905","tier":"starter_2024"},"version":961,"publish_version":961,"role":null,"authored":false,"authors":[{"type":"individual","id":"7ebda7165bbc067e","login":"tvogels","name":"Thijs Vogels","avatar_url":"https://avatars-next.observableusercontent.com/caecb0802edbb2531d0d2883357c53d701439f3641bbc772df9d728d289a6905","tier":null}],"members":[{"type":"individual","id":"7ebda7165bbc067e","login":"tvogels","name":"Thijs Vogels","avatar_url":"https://avatars-next.observableusercontent.com/caecb0802edbb2531d0d2883357c53d701439f3641bbc772df9d728d289a6905","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Flexbox layout in SVG with Yoga - Version 2","cells":[{"id":0,"value":"md`# Flexbox layout in SVG with Yoga - Version 2`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":699,"value":"md`Code for complex visualizations in SVG is often messy.\nAn important cause of this issue is that SVG lacks a layout engine. \nIt only supports absolute positioning, so you need to do all the math by hand.\nCode like \\`left + (width - margin) / size\\` is no fun to read and hard to debug.\nTools like \\`d3\\` scales can help in some highly regular situations such as bar charts, but they have their limits.\n\nThis project uses Facebook's [Yoga](https://yogalayout.com/) Flexbox layout engine to ‘enhance’ SVG with \\`\\` nodes that behave just like \\`

\\`'s.\n\nI am currently working on a more mature version of this project that can be used as an NPM library in React (and possibly other frameworks.) It will include a small library of visualization components.\nIf you are excited about that, keep an eye on my [Github](https://github.com/tvogels). If you would like to collaborate, feel free to [reach out](http://thijs.link).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":718,"value":"md`---\n\n## Demo 1`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"render(htm`\n <${Flex} svg width=${width} justify-items=\"stretch\">\n <${Flex} margin-right=10 flex-grow=2 aspect-ratio=1.618>\n ${coloredRectangle(\"orange\")}\n \n <${Flex} flex-direction=\"column\" flex-grow=1>\n <${Flex} margin-bottom=10 flex-grow=2>\n ${coloredRectangle(\"blue\")}\n \n <${Flex} flex-grow=1>\n ${coloredRectangle(\"purple\")}\n \n \n \n`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":482,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":564,"value":"viewof numberOfBins = slider({\n min: 0, \n max: 100, \n step: 1, \n value: 30, \n title: \"Number of bins shown in Demo 2\", \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":558,"value":"md`---\n\nA little helper to draw rectangles the size of the current flexbox cell:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":318,"value":"coloredRectangle = (color, showLayoutParameters = true) => ({\n left,\n top,\n width,\n height,\n hcenter,\n vcenter\n}) =>\n htm`\n \n ${\n showLayoutParameters\n ? htm`\n ${JSON.stringify({ left, top, width, height })}\n `\n : undefined\n }\n `","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":540,"value":"md`---\n\n## Resolving the flexbox layout\n\nIn order to interface with normal SVG, a \\`\\` node can have children that are functions of the form \n\n\\`\\`\\`js\n({ left, top, width, height }) => htm\\`\\`\n\\`\\`\\`\n\nwhere the inputs will be the resolved layout parameters.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":806,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":768,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"md`---\n## Library imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"htm = (await require(\"htm@2/dist/htm.umd.js\")).bind(Preact.h)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"Preact = require(\"preact@10/dist/preact.min.js\").catch(() => window.preact)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":895,"value":"function render(tree) {\n const div = html`

`;\n Preact.render(tree, div);\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"vhtml = require(\"vhtml\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"yoga = require(\"https://bundle.run/yoga-layout-prebuilt@1.9.3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":733,"value":"md`Just for the demos:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":517,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":736,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":938,"value":"LICENSE = \"cc-by-sa-4.0\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1"}} 31:"$30:body"