TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Cola.js – Constraint-Based Layout in the Browser

130 pointsby moklickalmost 10 years ago

7 comments

thechaoalmost 10 years ago
HotDrink is a declarative, constraint-based UI system that models the flow of <i>data</i> across the elements in the UI[1]. Trivially, it can repurposed for layout; although, most UI designers balk at the loss of control. The basic idea comes from a sizing dialog:<p><pre><code> height: [ ] width : [ ] area : [ ] </code></pre> If the user enters a height &amp; width, the form should update area [2]. If the user then updates area, then height is the free constraint (last recently updated). The whole system scales to work with incredibly large interfaces [3]. The experience section in [4] describes Adobe&#x27;s experience porting chunks of Photoshop to using this system. (I did the figures for [4]; I&#x27;m quite proud of them.)<p>[1] <a href="https:&#x2F;&#x2F;code.google.com&#x2F;p&#x2F;hotdrink&#x2F;" rel="nofollow">https:&#x2F;&#x2F;code.google.com&#x2F;p&#x2F;hotdrink&#x2F;</a><p>[2] <a href="http:&#x2F;&#x2F;dl.acm.org&#x2F;citation.cfm?id=2371413" rel="nofollow">http:&#x2F;&#x2F;dl.acm.org&#x2F;citation.cfm?id=2371413</a><p>[3] <a href="http:&#x2F;&#x2F;dl.acm.org&#x2F;citation.cfm?id=2047892&amp;CFID=690849385&amp;CFTOKEN=46545378;" rel="nofollow">http:&#x2F;&#x2F;dl.acm.org&#x2F;citation.cfm?id=2047892&amp;CFID=690849385&amp;CFT...</a> <a href="http:&#x2F;&#x2F;dl.acm.org&#x2F;citation.cfm?id=1449927&amp;CFID=690849385&amp;CFTOKEN=46545378;" rel="nofollow">http:&#x2F;&#x2F;dl.acm.org&#x2F;citation.cfm?id=1449927&amp;CFID=690849385&amp;CFT...</a> <a href="http:&#x2F;&#x2F;dl.acm.org&#x2F;citation.cfm?id=1621630&amp;CFID=690849385&amp;CFTOKEN=46545378" rel="nofollow">http:&#x2F;&#x2F;dl.acm.org&#x2F;citation.cfm?id=1621630&amp;CFID=690849385&amp;CFT...</a><p>[4] <a href="https:&#x2F;&#x2F;parasol.tamu.edu&#x2F;~jarvi&#x2F;papers&#x2F;gpce08.pdf" rel="nofollow">https:&#x2F;&#x2F;parasol.tamu.edu&#x2F;~jarvi&#x2F;papers&#x2F;gpce08.pdf</a>
ameliusalmost 10 years ago
Nice. But as with most of these libraries, I don&#x27;t think it can handle large numbers of nodes&#x2F;edges and show such graphs in a meaningful way. It really takes more than a force-directed algorithm to present data in an understandable way.<p>Here is a nice collection of large graphs: [1] Visualize that in a useful way, and I&#x27;m impressed.<p>[1] <a href="https:&#x2F;&#x2F;snap.stanford.edu&#x2F;data&#x2F;" rel="nofollow">https:&#x2F;&#x2F;snap.stanford.edu&#x2F;data&#x2F;</a>
supercoderalmost 10 years ago
This is interesting, but had hoped it would be something like iOS&#x27;s Auto Layout for the browser.
评论 #9842936 未加载
评论 #9843475 未加载
评论 #9843648 未加载
voltagex_almost 10 years ago
Offtopic - why does monash.edu.au redirect to monash.edu? This is an Australian university.<p>Edit: also, <a href="http:&#x2F;&#x2F;nic.monash&#x2F;" rel="nofollow">http:&#x2F;&#x2F;nic.monash&#x2F;</a>
评论 #9843769 未加载
评论 #9844402 未加载
techwizrdalmost 10 years ago
Wow. How long did this take to build? This is pretty impressive.
pyvpxalmost 10 years ago
can anyone recommend more papers&#x2F;algorithms&#x2F;reading material on layout algorithms in general? I&#x27;m very interested in layout algorithms of smaller node&#x2F;edge counts (less than 1000). most material I&#x27;ve found is geared towards &quot;big data&quot; and hundreds of thousands (or more) of nodes&#x2F;edges.
评论 #9844624 未加载
istvan__almost 10 years ago
Wow, this is pretty cool.