-
Notifications
You must be signed in to change notification settings - Fork 11
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
31 changed files
with
990 additions
and
1,016 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,12 +1,11 @@ | ||
| export default { | ||
| useTabs: true, | ||
| tabWidth: 4, | ||
| semi: true, | ||
| semi: false, | ||
| singleQuote: true, | ||
| trailingComma: 'all', | ||
| bracketSpacing: false, | ||
| printWidth: 120, | ||
| arrowParens: 'avoid', | ||
|
|
||
| overrides: [{files: '*.md', options: {tabWidth: 2}}], | ||
| }; | ||
| overrides: [{files: ['*.md', '*.yml'], options: {useTabs: false, tabWidth: 2}}], | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -11,36 +11,36 @@ Auto layout is a system which lets you perform layout using mathematical relatio | |
| ```js | ||
| // Define the layout constraints using VFL syntax: | ||
| var constraints = AutoLayout.VisualFormat.parse( | ||
| [ | ||
| 'H:|[view1(==view2)]-10-[view2]|', // The horizontal aspect of the layout | ||
| 'V:|[view1,view2]|', // The vertical aspect of the layout | ||
| ], | ||
| {extended: true}, | ||
| ); | ||
| [ | ||
| 'H:|[view1(==view2)]-10-[view2]|', // The horizontal aspect of the layout | ||
| 'V:|[view1,view2]|', // The vertical aspect of the layout | ||
| ], | ||
| {extended: true}, | ||
| ) | ||
|
|
||
| // Create a view, uses the constraints to calculate the actual positioning and sizing of spaces in the layout: | ||
| var view = new AutoLayout.View({constraints: constraints}); | ||
| view.setSize(400, 500); | ||
| var view = new AutoLayout.View({constraints: constraints}) | ||
| view.setSize(400, 500) | ||
|
|
||
| // Access each space in the calculated layout: | ||
| console.log(view.subViews.view1); // {left: 0, top: 0, width: 195, height: 500} | ||
| console.log(view.subViews.view2); // {left: 205, top: 0, width: 195, height: 500} | ||
| console.log(view.subViews.view1) // {left: 0, top: 0, width: 195, height: 500} | ||
| console.log(view.subViews.view2) // {left: 205, top: 0, width: 195, height: 500} | ||
|
|
||
| // Finally apply the layout to your rendering system. Autolayout is not coupled to any particular rendering system. | ||
|
|
||
| // For example, position DOM elements where they should be: | ||
| const el1 = document.querySelector('.view1'); | ||
| el1.style.transform = `transform(${view.subViews.view1.left}px, ${view.subViews.view1.top}px)`; | ||
| el1.style.width = view.subViews.view1.width + 'px'; | ||
| el1.style.height = view.subViews.view1.height + 'px'; | ||
| const el2 = document.querySelector('.view1'); | ||
| el2.style.transform = `transform(${view.subViews.view2.left}px, ${view.subViews.view2.top}px)`; | ||
| el2.style.width = view.subViews.view2.width + 'px'; | ||
| el2.style.height = view.subViews.view2.height + 'px'; | ||
| const el1 = document.querySelector('.view1') | ||
| el1.style.transform = `transform(${view.subViews.view1.left}px, ${view.subViews.view1.top}px)` | ||
| el1.style.width = view.subViews.view1.width + 'px' | ||
| el1.style.height = view.subViews.view1.height + 'px' | ||
| const el2 = document.querySelector('.view1') | ||
| el2.style.transform = `transform(${view.subViews.view2.left}px, ${view.subViews.view2.top}px)` | ||
| el2.style.width = view.subViews.view2.width + 'px' | ||
| el2.style.height = view.subViews.view2.height + 'px' | ||
|
|
||
| // Or if you're in WebGL using Three.js, then apply values to your meshes: | ||
| mesh.postion.set(view.subViews.view2.left, -view.subViews.view2.top, 0); | ||
| mesh.scale.set(view.subViews.view2.width, view.subViews.view2.height, 1); | ||
| mesh.postion.set(view.subViews.view2.left, -view.subViews.view2.top, 0) | ||
| mesh.scale.set(view.subViews.view2.width, view.subViews.view2.height, 1) | ||
| ``` | ||
|
|
||
| Layouts can be previewed and debugged using the [Visual Format Editor](https://github.com/IjzerenHein/visualformat-editor): | ||
|
|
@@ -76,29 +76,44 @@ Include the library in your HTML project: | |
|
|
||
| ```html | ||
| <script type="module"> | ||
| import AutoLayout from '//unpkg.com/@lume/[email protected]/dist/AutoLayout.js?module'; | ||
| // ...use AutoLayout here... | ||
| import AutoLayout from '//unpkg.com/@lume/[email protected]/dist/AutoLayout.js?module' | ||
| // ...use AutoLayout here... | ||
| </script> | ||
| ``` | ||
|
|
||
| Or when using a bundler like Webpack or Rollup, or [import maps](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap), use: | ||
|
|
||
| ```js | ||
| import AutoLayout from '@lume/autolayout'; | ||
| import AutoLayout from '@lume/autolayout' | ||
| // ...use AutoLayout here... | ||
| ``` | ||
|
|
||
| If you're using import maps, f.e. in a browser without a build, or in a JS | ||
| runtime like Deno, you'll need an importmap script that lists autolayout and its | ||
| dependency kiwi. F.e.: | ||
|
|
||
| ```html | ||
| <script type="importmap"> | ||
| { | ||
| "imports": { | ||
| "@lume/autolayout": "../../dist/AutoLayout.js", | ||
| "@lume/kiwi": "../node_modules/@lume/kiwi/dist/kiwi.js" | ||
| } | ||
| } | ||
| </script> | ||
| ``` | ||
|
|
||
| ### Using the API | ||
|
|
||
| To parse VFL into constraints, use: | ||
|
|
||
| ```javascript | ||
| try { | ||
| // The VFL can be either a string or an array of strings. | ||
| // strings may also contain '\n' which indicates that a new line of VFL will begin. | ||
| var constraints = AutoLayout.VisualFormat.parse(['|-[child(==child2)]-[child2]-|', 'V:|[child(==child2)]|']); | ||
| // The VFL can be either a string or an array of strings. | ||
| // strings may also contain '\n' which indicates that a new line of VFL will begin. | ||
| var constraints = AutoLayout.VisualFormat.parse(['|-[child(==child2)]-[child2]-|', 'V:|[child(==child2)]|']) | ||
| } catch (err) { | ||
| console.log('parse error: ' + err.toString()); | ||
| console.log('parse error: ' + err.toString()) | ||
| } | ||
| ``` | ||
|
|
||
|
|
@@ -108,33 +123,33 @@ relations and variables. You can set the size of the view and other properties s | |
| ```javascript | ||
| // Create a view with a set of constraints | ||
| var view = new AutoLayout.View({ | ||
| constraints: constraints, // initial constraints (optional) | ||
| width: 100, // initial width (optional) | ||
| height: 200, // initial height (optional) | ||
| spacing: 10, // spacing size to use (optional, default: 8) | ||
| }); | ||
| constraints: constraints, // initial constraints (optional) | ||
| width: 100, // initial width (optional) | ||
| height: 200, // initial height (optional) | ||
| spacing: 10, // spacing size to use (optional, default: 8) | ||
| }) | ||
|
|
||
| // get the size and position of the sub-views | ||
| for (var key in view.subViews) { | ||
| console.log(key + ': ' + view.subViews[key]); | ||
| // e.g. { | ||
| // name: 'child1', | ||
| // left: 20, | ||
| // top: 10, | ||
| // width: 70, | ||
| // height: 80 | ||
| // } | ||
| console.log(key + ': ' + view.subViews[key]) | ||
| // e.g. { | ||
| // name: 'child1', | ||
| // left: 20, | ||
| // top: 10, | ||
| // width: 70, | ||
| // height: 80 | ||
| // } | ||
| } | ||
| ``` | ||
|
|
||
| By changing the size, the layout is re-evaluated and the subView's are updated: | ||
|
|
||
| ```javascript | ||
| view.setSize(300, 600); | ||
| view.setSize(300, 600) | ||
|
|
||
| // get the new size & position of the sub-views | ||
| for (var key in view.subViews) { | ||
| console.log(key + ': ' + view.subViews[key]); | ||
| console.log(key + ': ' + view.subViews[key]) | ||
| } | ||
| ``` | ||
|
|
||
|
|
@@ -170,8 +185,8 @@ view.addConstraint({ | |
| Apple's Visual Format Language prefers good notation over completeness of expressibility. Because of this some useful constraints cannot be expressed by "Standard" VFL. LUME AutoLayout defines an extended syntax (superset of VFL) which you opt-in to use. To enable the extended syntax, set option `extended` to `true` when parsing the visual format: | ||
|
|
||
| ```javascript | ||
| var evfl = '|-[view1(==50%)]'; | ||
| var constraints = AutoLayout.VisualFormat.parse(evfl, {extended: true}); | ||
| var evfl = '|-[view1(==50%)]' | ||
| var constraints = AutoLayout.VisualFormat.parse(evfl, {extended: true}) | ||
| ``` | ||
|
|
||
| ### Language features | ||
|
|
@@ -370,16 +385,17 @@ feature complete is very welcome: | |
|
|
||
| ## Contribute | ||
|
|
||
| If you like this project and want to support it, show some love | ||
| and give it a star. | ||
| If you like this project and want to support it, show some love and give it a | ||
| star, try it and report any bugs, write new feature ideas, or even | ||
| open a pull request! | ||
|
|
||
| If you want to participate in development, drop me a line or just issue a pull request. | ||
| Also have a look at [CONTRIBUTING](./CONTRIBUTING.md). | ||
|
|
||
| ## License | ||
|
|
||
| © 2015 Hein Rutjes | ||
| © 2021 Joseph Orbegoso Pea (http://github.com/trusktr) | ||
| © 2021 Lume | ||
|
|
||
| [](https://tldrlegal.com/license/mit-license) | ||
|
|
||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.