Comments (7)
Going to try working on this now that I have a little more free time. Will update here as I go.
from revery.
@OhadRau - awesome, thank you! Let me know if you need any help.
from revery.
One quick question, is there any specific order that the borders should be resolved in? For example, if I were to make <view style=Style.make(~border=Border.make(~width=1, ()), ~borderLeft=Border.make(~width=2, ()), ())/>
would the correct way to resolve this be always applying the most specific border? Or should they overlap if multiple are provided?
from revery.
One quick question, is there any specific order that the borders should be resolved in?
That is a good question! My expectation would be that the more-specific border overrides the previous settings - so in the <view style=Style.make(~border=Border.make(~width=1, ()), ~borderLeft=Border.make(~width=2, ()), ())/>
case, we'd end up with a top/right/bottom border of width 1, and a left border of width 2.
from revery.
Perfect. One more question, for drawing the border quads should I treat all the borders as interior items in the ViewNode (i.e. the main quad starts at (leftWidth, topWidth) instead of (0, 0))? If that's the case my understanding is that I'll have to adjust all positions to be relative to the top left corner of the main quad. The other alternative would be rendering the borders at a negative position (not sure if this would cause problems).
from revery.
Went ahead and implemented triangle geometry. The way I'm calculating the texture coordinates is really bad, I just wasn't sure what the proper math was so I left it WIP.
I also finished rendering the borders:
Still not sure how to approach the inner coordinates for the contents of the view node, so let me know if there's a certain way I should go about it. I couldn't see any obvious way to tell the super class to render inside the actual view area (rather than the entire area including the border) but I might've missed something.
from revery.
Perfect. One more question, for drawing the border quads should I treat all the borders as interior items in the ViewNode (i.e. the main quad starts at (leftWidth, topWidth) instead of (0, 0))? If that's the case my understanding is that I'll have to adjust all positions to be relative to the top left corner of the main quad. The other alternative would be rendering the borders at a negative position (not sure if this would cause problems).
Ah, this is what i had a question about on the PR (I guess this is the root cause for the text rendering on the border). What I'd recommend for this is to account for the borderLeft/borderTop
sizes in the local transform, here:
https://github.com/bryphe/revery/blob/b3c4274f6b5ec20c6847751927f54ea5bab761f7/src/UI/Node.re#L31
In other words, where we add in the top
/left
position:
let matrix = Mat4.create();
Mat4.fromTranslation(
matrix,
Vec3.create(
float_of_int(dimensions.left),
float_of_int(dimensions.top),
0.,
),
);
We also account for the borderTop/borderLeft sizes.
This puts all the children in a space where the coordinate system for the interior starts at (0, 0)
, which will put the children in the correct place - seems like the simplest approach.
However, as you mentioned, this would necessitate rendering the top and left borders at a negative position - that should be fine since those negative values will get adjusted when we transform the element to screen space. I think it's a reasonable price to pay to keep the rest of the transform chain simple.
Hope that helps!
from revery.
Related Issues (20)
- Ubuntu 20.10: revery-ui/esy-skia build failed HOT 3
- Ubuntu 18.10 / 19.04: @opam/ocamlfind@opam:1.8.1 build failed HOT 5
- esy '@examples' run output has no text (Revery.FontCache: Error loading typeface (skia)) HOT 4
- Uncaught Division_by_zero crash on window resize. (maxHeight vs flexGrow ?) HOT 1
- Revery roadmap in face of Reason->Rescript rebrand HOT 2
- Having problem with building revery-quick-start project on Mac HOT 7
- MacOS: Allow selective modifier key mapping
- esy install failing on Windows. HOT 3
- Build Revery is presenting failure in shell.c HOT 2
- ScrollView does not work if children are added after initial mount
- CI: esy-skia won't build on Linux HOT 1
- createWindow with visible=false does not create a hidden window HOT 3
- Update the build guide for Fedora HOT 4
- SVG drawing mangled if OS locale does use a different floating point presentation HOT 4
- Quickstart build step error HOT 1
- Windows10 esy is installed but revery-ui can not be installed
- Build revery with esy on mac failed HOT 9
- Can't build on Fedora 35 due to glibc bug HOT 4
- OCaml <=14.12 doesn't support glibc>=2.34 HOT 9
- Support for FreeBSD HOT 1
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 revery.