Comments (15)
+1 this would be awesome!
from famous-flex.
I think this would really show the strength of what you've build here. (Unlike effects, which seem to complicate the core to me)
from famous-flex.
+1 would love this!
from famous-flex.
+1 this would be the best thing to happen to famo.us
from famous-flex.
Here's a javascript implementation of cassowary constraints. Doesn't use famo.us. Made from scratch.
https://github.com/iamralpht/slalom
from famous-flex.
Nice!
from famous-flex.
It would be great if someone else than me could make a start with this. I will support/help in any way I can.
from famous-flex.
+1
from famous-flex.
I've begun work on this feature. It will be supported on famo.us v0.3.x through famous-flex, and also on mixed mode.
It is still work in progress, but documentation should follow soon:
https://github.com/IjzerenHein/autolayout.js
https://rawgit.com/IjzerenHein/visualformat-editor/master/dist/index.html
Oh and star if you like :)
from famous-flex.
Hi guys, a quick note on this. I've been hard at work bringing autolayout and the visual format language to famo.us. Because the standard Visual Format Language prefers good notation over completeness of expressibility, I've had to create a extended visual format (EVFL) notation, which is a superset of VFL. It contains z-ordering, view stacking, and much more useful features you'll need doing layouts with famo.us.
You can read about it here: https://github.com/IjzerenHein/autolayout.js#extended-visual-format-language-evfl
I will be releasing this as part of famous-flex soon, but if you want to get started today, this is how you can do it:
- Include
autolayout.js
in your project
Include this function in your project:
var AutoLayout = require('autolayout.js');
function vflToLayout(visualFormat, options) {
var view = new AutoLayout.View(options);
try {
var constraints = AutoLayout.VisualFormat.parse(visualFormat, {extended: true, strict: false});
view.addConstraints(constraints);
return function(context) {
view.setSize(context.size[0], context.size[1]);
var subView;
for (var key in view.subViews) {
if (key.indexOf('_') !== 0) {
subView = view.subViews[key];
context.set(subView.name, {
size: [subView.width, subView.height],
translate: [subView.left, subView.top, subView.zIndex * 5]
});
}
}
};
}
catch (err) {
console.log(err); //eslint-disable-line no-console
}
}
You can now use the vfl with a LayoutController, like this:
var layoutController = new LayoutController({
layout: vflToLayout([
'|-[row:[child(==child2/2)]-[child2]]-|',
'V:|-[row]-|'
]),
...
});
Or when you're using ES6, the back-tick symbol (template strings) makes it really easy to cut & paste layouts between the Visual Format Editor and your code:
var layoutController = new LayoutController({
layout: vflToLayout(`
|-[row:[child(==child2/2)]-[child2]]-|
V:|-[row]-|
`),
...
});
You can even decorate the VFL with meta info, which the Visual Format Editor then renders accordingly. This can be useful if you have lots of views, and colouring them or setting the shape makes it easier to edit.
//viewport aspect-ratio:3/1 max-height:300
//colors red:#FF0000 green:#00FF00 blue:#0000FF
//shapes red:circle green:circle blue:circle
H:|-[row:[red(green,blue)]-[green]-[blue]]-|
V:|[row]|
from famous-flex.
Hi, I've officially released autolayout for famo.us v0.3. Mixed mode integration will follow in the near future:
https://github.com/IjzerenHein/famous-autolayout
from famous-flex.
+1 for the Famous Engine integration
from famous-flex.
I've got it up & running, should be real soon now.
from famous-flex.
Alright, mixed mode is now supported through the AutoLayoutController class :)
https://github.com/IjzerenHein/famous-autolayout
from famous-flex.
This is terrific! Thanks for the great work Hein
from famous-flex.
Related Issues (20)
- velocity limit HOT 10
- Scrollview is only partially shown (after blurring an input element, window scroll position isnt reset) HOT 9
- Pull to refresh on desktop HOT 3
- any plans to support https://github.com/Famous/engine/tree/v1.0.0? HOT 7
- Scrollview: scroll without animation HOT 3
- Invalid bower version HOT 2
- FlexScrollView - mousepad two finger scrolling doesn't work in paginated view
- LayoutController insert 0 not working HOT 6
- CollectionLayout last row just partial visible HOT 1
- WheelLayout (DatePicker) sometimes wrong number sequence HOT 7
- Possible Bug in CollectionLayout HOT 5
- Is mixed-mode really good(right) ? HOT 7
- What is the state of Famous-Flex? HOT 6
- Surface leakage issue because of Entity.register HOT 2
- Bug in DatePicker.Component.FullDay HOT 7
- SamsaraJS support
- Error: HOT 6
- Correction in documentation HOT 2
- Use famous-sizeconstraint with FlexScrollView
- Changes to LinkedListViewSequence does not get reflected in FlexScrollView
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 famous-flex.