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; }