Stylist
Extends:
Stylist takes the KSS derived JSON emitted by postcss-potassium and applies it to a Three.js Scene
For purposes of layout, a Spatial Object Model (SOM) node has:
- a optional THREE.Geometry
- edges: margin, border, and padding
- a Layout: right now, only GridLayout
- children
The layout algorithm is similar but not identical to CSS:
The KSS cascade is calculated so each SOM node's ComputedStyles is up to date.
In a depth-first traversal of all SOM nodes: If node.styles.geometryIsDirty: recalculate node.styles.geometryBounds
If any of the dirty flags (geometry, hierarchy, layout) are true: perform layout using node.styles.geometryBounds and childrens' styles.marginBounds attributes recalculate edge bounds: content, padding, border, margin set dirty flags to false
Constructor Summary
| Public Constructor | ||
| public |
|
|
Member Summary
| Public Members | ||
| public get |
stylesheets: * |
|
Method Summary
| Public Methods | ||
| public |
loadData(kssData: *) |
|
| public |
async loadLinks() Looks in the document for one or more <head> <link rel='spatial-stylesheet' href='./path/to/styles.json'> </head> |
|
| public |
style(scene: *, renderer: *) |
|
Inherited Summary
| From class EventHandler | ||
| public get |
listeners: EventListener[]: * |
|
| public |
addListener(callback: function(eventName: string, eventSource: EventHandler), eventName: Object | Symbol, once: bool) |
|
| public |
cleanup() |
|
| public |
removeListener(callback: *, eventName: undefined) |
|
| public |
trigger(eventName: *, params: ...*) Send an event to listeners |
|
Public Constructors
public constructor() source
Public Members
public get stylesheets: * source
Public Methods
public loadData(kssData: *) source
Params:
| Name | Type | Attribute | Description |
| kssData | * |
public async loadLinks() source
Looks in the document for one or more link elements with a rel attribute of spatial-stylesheet and then attempts to load them as KSS data
For example:
<head> <link rel='spatial-stylesheet' href='./path/to/styles.json'> </head>
public style(scene: *, renderer: *) source
Params:
| Name | Type | Attribute | Description |
| scene | * | ||
| renderer | * |