to iterate on it. I don’t think we can fix or even think of everything to fix from the beginning, it needs to evolve. — Daniel Glazman, CSS WG co-chair
allow user customisation static get inputProperties() { return ['--circle-color']; } paint(context, geometry, styleMap) { const color = styleMap.get('--circle-color'); context.fillStyle = color; // Paint happens after layout so we have access to the box geometry const x = geometry.width / 2; const y = geometry.height / 2; const radius = Math.min(x, y); // paint worklet gives you a canvas like API context.beginPath(); context.arc(x, y, radius, 0, 2 * Math.PI, false); context.fill(); } });
'height'] } static get childrenInputProperties() { return ['x', 'y'] } layout(children, constraintSpace, styleMap) { // The dimensions of the space we have to work with const { width, height } = constraintSpace; // Loop over all direct children and lay them out. for (let child of children) { // Complex code to layout out each child child.doLayout(); } return { minContent: 0, maxContent: 0, width: width, height: height, fragments: [], unPositionedChildren: [], breakToken: null }; } });