A port of simple reactive layout engine running in browsers.
Give it a layout description, wire external views, button click handlers and put resulting React.JS component to your page. Layout will auto-update itself.
import React, {Component} from 'react';
import './App.css';
import {Engine, Layout} from '@adarovsky/vlayout';
import {EMPTY, interval} from "rxjs";
import {delay, pluck, scan, startWith} from "rxjs/operators";
class App extends Component {
state = {
error: null,
isLoaded: false,
layout: null
};
constructor(props) {
super(props);
this.engine = new Engine();
this.engine.inputs.registerInput("counter", this.engine.numberType(), interval(1000).pipe(
startWith(0),
scan((acc, one) => {
const [cur, delta] = acc;
let d = delta;
if (cur + d > 4 || cur + d < 0) {
d = -d;
}
return [cur + d, d];
}, [1, -1]),
pluck(0)
));
// this.engine.registerView('myView', x => <SampleView parentView={x} key={'123'}/>);
this.engine.registerButton('myButton', async () => {
console.log('clicked');
await EMPTY.pipe(delay(1000)).toPromise();
});
}
componentDidMount() {
fetch("/test.vlayout")
.then(res => res.text())
.then(
(result) => {
try {
this.setState({
isLoaded: true,
layout: <Layout engine={this.engine} content={result}/>
});
}
catch (e) {
this.setState({
isLoaded: true,
error: e
});
}
},
(error) => {
this.setState({
isLoaded: true,
error
});
}
)
}
render() {
const {error, isLoaded, layout} = this.state;
if (error) {
return <div>Ошибка: {error.message}</div>;
} else if (!isLoaded) {
return <div>Loading...</div>;
} else {
return layout;
}
}
}
export default App;Let's highlight key points here: Here we create a central point where we register all connections between layout and outer world
this.engine = new Engine();
this.engine.inputs.registerInput(name, type, source)To pass external values inside layout, we use
engine.inputs.registerInput(name: string, type: Engine.type, source: rxjs.Observable)To receive button press event from layout, register button:
this.engine.registerButton(name: string, handler: () => Promise);Please note that button will be disabled until handler's promise finishes or fails. Button look is defined in layout description
To render external component in layout, one need to derive from ReactView<S extends ReactViewState> and be sure to pass
style={self.state.style} in render code
Once preparations are done, we can create and use Layout component like so
render() {
return <Layout engine={this.engine} content={content}/>
}In the example above, layout content is downloaded using AJAX, but it's up to you where to get it.
Layout description has 4 declarations. Let us show it by example. For full description, refer layout syntax
bindings {
myButton: button
}
inputs {
counter: Number
}
layout {
layer {
id: "background"
z_order: 1
roundRect {
center { x: 0.5 y: 0.5 }
size { width: 0.8 }
aspect: 16/9
backgroundColor: #cccccc
}
}
layer {
id: "label"
z_order: 2
vertical {
alignment: .center
center { x: 0.5 y: 0.5 }
label {
text: String(counter)
}
myButton {
backgroundColor: #dddddd
strokeColor: #aaaaaa
strokeWidth: 4
text: "Click me"
cornerRadius: 0.5
}
}
}
}
it results with an image like so: 
Try to experiment with changing propery values. These are all expressions, not constants! For example, you can change button corner radius like so
cornerRadius: switch(counter) {
case 0|1 => 0.5 // you can match against a set of constants
case 2 => 10 // note, that corner radius > 0.5 is absolute, specified in pixels
case _ => 4 // set up a default value
}
MIT license. Copyright ©️ Alexander Darovsky.
Credits: Marc J. Schmidt for ideas of handling element resize
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent