Comments (8)
Nice find, do you want to take a stab at fixing it?
from yoga.
Yup, I've got the basics working now. Hacking in the C code atm, I'll put it back to JS once I'm done.
I've added support for alignContent since that's the root of the problem. I'm referring to http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/#align-content-property for the specs, its a bit light on math, but I believe I got the algo part sorted out now.
There's still an issue though, which is that I need an array - at least as far as I can tell now - to keep the size & nodes of the lines (on the crossAxis) so that I can re-distribute them afterward when you use alignContent to distribute them in stretch mode. I'll try to see if I can rework the algo without needing it, but per the spec - and as I've observed in Chrome/IE/FF, in the case of 'stretch' the result is computed 'after the fact', basically the new "row" height is a function of the computed size of the elements within the div (hopefully that makes sense ;)).
So, I probably need to add some "API" to allocate/free the temporary array needed, seems it shouldn't be too problematic. Either an external API or another "interface" function (like measure/get_dirty) in the css node...
If you have any suggestion in that regard let me know.
from yoga.
Instead of allocating an array, can you add another field on the node object that you are going to use while doing the update? This way you don't need to allocate arrays, it's already allocated?
from yoga.
Yes, it should be possible to do the same thing by just adding a line_index field to the css_node, and then recomputing what's necessary in the multi-line + alignContent with fixed size case. I suppose that's a better option since the code is basically allocation free atm.
from yoga.
Submitted a pull request with the implementation, going to integrate in react-native and add more test cases in Jasmine next.
from yoga.
alignContent is 'stretch' by default, same as alignItems and as Chrome/Specs. However the previous version of the code was behaving more like flex-start not sure if its better to be more like the previous behavior or to follow the specs...
from yoga.
A react component that 'tests' alignContent:
var React = require('react-native');
var {
StyleSheet,
Text,
View,
TouchableHighlight
} = React;
var styles = StyleSheet.create({
container: {
backgroundColor: '#333333',
width: 300,
height: 380,
flexDirection: 'row',
flexWrap: 'wrap',
padding: 3,
},
box: {
backgroundColor: '#ffffff',
width: 50,
height: 50,
margin: 10,
},
box2: {
backgroundColor: '#ffffff',
width: 50,
height: 100,
margin: 10,
},
lighter_grey: {
backgroundColor: '#606060',
},
red: {
backgroundColor: '#ff0000',
},
green: {
backgroundColor: '#00ff00',
},
cyan: {
backgroundColor: '#00ffff',
},
button: {
margin: 5,
fontWeight: 'normal',
},
selected: {
fontWeight: '800',
},
});
module.exports = React.createClass({
getInitialState: function() {
return {
alignItems: 'flex-start',
alignContent: 'stretch'
};
},
alignItems: function(aNewAlignItems) {
this.setState({
alignItems: aNewAlignItems
});
},
alignContent: function(aNewAlignContent) {
this.setState({
alignContent: aNewAlignContent
});
},
render: function() {
var button = (aName,aKind) => {
return (
<TouchableHighlight onPress={() => { this[aKind](aName) } }>
<Text style={[
styles.button,
this.state[aKind] == aName ? styles.selected : undefined
]}>
{aName}
</Text>
</TouchableHighlight>
);
}
return (
<View>
<View style={
[styles.container,{
alignItems: this.state.alignItems,
alignContent: this.state.alignContent
}]}>
<View style={[styles.box,styles.red]}><Text>0</Text></View>
<View style={[styles.box,styles.red]}><Text>1</Text></View>
<View style={[styles.box,styles.red]}><Text>2</Text></View>
<View style={[styles.box,styles.red]}><Text>3</Text></View>
<View style={[styles.box2,styles.red]}><Text>4</Text></View>
<View style={[styles.box,styles.green,{alignSelf:'flex-start'}]}><Text>5</Text></View>
<View style={[styles.box,styles.green]}><Text>6</Text></View>
<View style={[styles.box2,styles.green]}><Text>7</Text></View>
<View style={[styles.box,styles.green]}><Text>8</Text></View>
<View style={[styles.box,styles.green]}><Text>9</Text></View>
<View style={[styles.box,styles.cyan,{alignSelf:'flex-start'}]}><Text>10</Text></View>
<View style={[styles.box,styles.cyan]}><Text>11</Text></View>
<View style={[styles.box,styles.cyan]}><Text>12</Text></View>
<View style={[styles.box,styles.cyan,{alignSelf:'flex-start'}]}><Text>13</Text></View>
<View style={[styles.box,styles.cyan,{alignSelf:'stretch'}]}><Text>14</Text></View>
</View>
<View style={{flexDirection:'row'}}>
<View style={{flex:0.5}}>
<Text>AlignItems:</Text>
{button('flex-start','alignItems')}
{button('center','alignItems')}
{button('flex-end','alignItems')}
{button('stretch','alignItems')}
</View>
<View style={{flex:0.5}}>
<Text>AlignContent:</Text>
{button('flex-start','alignContent')}
{button('center','alignContent')}
{button('flex-end','alignContent')}
{button('stretch','alignContent')}
</View>
</View>
</View>
);
}
});
from yoga.
#79 has been merge, so closing this.
from yoga.
Related Issues (20)
- Try using explicit modulemap in CocoaPods build HOT 1
- Typo in recent module.modulemap change that breaks Swift PM-based builds HOT 1
- [JS] Move from embind to manual bindings HOT 1
- Flex shorthand in UseWebDefaults should set basis to 0 instead of auto HOT 3
- React Native iOS build failed HOT 1
- top position is wrong when previous item's height is 0.5, on 3x scale screen HOT 1
- API proposal to get the computed measure size of a node HOT 9
- Proposal: Integrate with google/oss-fuzz for continuous fuzz testing? HOT 8
- Can a Yoga Node have multiple owners? HOT 3
- [JS] Reduce WASM call overhead HOT 6
- Add App Privacy Manifest? HOT 1
- `flexBasis` doesn't recalculate when rotating the screen HOT 1
- __dirname is not defined in ES module scope HOT 3
- RuntimeError with WebAssembly in @react-pdf/yoga on Node.js Server HOT 3
- Why can't we round node width/height directly in roundLayoutResultsToPixelGrid()? HOT 3
- The typescript definitions link in the standalone documentation is incorrect HOT 2
- Build of v3 with GCC11 fails HOT 3
- Add a CMake option to not build the tests HOT 2
- Add Conan badge HOT 1
- Percentage padding not updated when the parent size changes HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from yoga.