Mirrors/VILLASweb
1
0
Fork 0
mirror of https://git.rwth-aachen.de/acs/public/villas/web/ synced 2025-03-09 00:00:01 +01:00
Code Issues Releases Wiki Activity

Add grid snapping

Browse source
This commit is contained in:
Markus Grigull 2017-07-28 16:17:48 +02:00
parent 32f2c719da
commit 8b0854c49f
3 changed files with 31 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/components/dropzone.js
View file

@ -33,13 +33,16 @@ const dropzoneTarget = {
// Z-Index is one more the top most children
let foundZ = props.children.reduce( (maxZ, currentChildren) => {
// Is there a simpler way? Is not easy to expose a getter in a Container.create(Component)
let widget = currentChildren.props.data;
if (widget && widget.z) {
if (widget.z > maxZ) {
return widget.z;
if (currentChildren.props != null) {
// Is there a simpler way? Is not easy to expose a getter in a Container.create(Component)
let widget = currentChildren.props.data;
if (widget && widget.z) {
if (widget.z > maxZ) {
return widget.z;
}
}
}
return maxZ;
}, 0);
position.z = foundZ >= 100? foundZ : ++foundZ;

6
src/containers/visualization.js
View file

@ -296,14 +296,14 @@ class Visualization extends Component {
moveWidget(e, data, applyDirection) {
var widget = this.state.visualization.widgets[data.key];
var updated_widgets = {};
updated_widgets[data.key] = applyDirection(widget);
updated_widgets[data.key] = applyDirection(widget);
var new_widgets = Object.assign({}, this.state.visualization.widgets, updated_widgets);
var visualization = Object.assign({}, this.state.visualization, {
widgets: new_widgets
});
this.setState({ visualization: visualization });
this.setState({ visualization: visualization });
}
moveAbove(widget) {
@ -405,7 +405,7 @@ class Visualization extends Component {
<Dropzone height={this.state.dropZoneHeight} onDrop={(item, position) => this.handleDrop(item, position)} editing={this.state.editing}>
{current_widgets != null &&
Object.keys(current_widgets).map( (widget_key) => (
<Widget key={widget_key} data={current_widgets[widget_key]} simulation={this.state.simulation} onWidgetChange={(w, k) => this.widgetChange(w, k)} onWidgetStatusChange={(w, k) => this.widgetStatusChange(w, k)} editing={this.state.editing} index={widget_key} grid={[this.state.visualization.grid, this.state.visualization.grid]} />
<Widget key={widget_key} data={current_widgets[widget_key]} simulation={this.state.simulation} onWidgetChange={(w, k) => this.widgetChange(w, k)} onWidgetStatusChange={(w, k) => this.widgetStatusChange(w, k)} editing={this.state.editing} index={widget_key} grid={this.state.visualization.grid} />
))}
<Grid size={this.state.visualization.grid} disabled={this.state.visualization.grid === 1 || !this.state.editing} />

27
src/containers/widget.js
View file

@ -89,11 +89,26 @@ class Widget extends Component {
}
}
snapToGrid(value) {
if (this.props.grid === 1) return value;
return Math.round(value / this.props.grid) * this.props.grid;
}
drag(event, ui) {
let x = this.snapToGrid(ui.position.left);
let y = this.snapToGrid(ui.position.top);
if (x !== ui.position.left || y !== ui.position.top) {
this.rnd.updatePosition({ x, y });
}
}
dragStop(event, ui) {
// update widget
var widget = this.props.data;
widget.x = ui.position.left;
widget.y = ui.position.top;
widget.x = this.snapToGrid(ui.position.left);
widget.y = this.snapToGrid(ui.position.top);
this.props.onWidgetChange(widget, this.props.index);
}
@ -129,17 +144,14 @@ class Widget extends Component {
render() {
// configure grid
var grid = this.props.grid;
if (!grid) {
grid = [ 1, 1 ];
}
let grid = [this.props.grid, this.props.grid];
// get widget element
const widget = this.props.data;
var borderedWidget = false;
var element = null;
//console.log(widget.type + ': ' + widget.z);
//console.log('render: ' + widget.x + ', ' + widget.y);
// dummy is passed to widgets to keep updating them while in edit mode
if (widget.type === 'Value') {
@ -187,6 +199,7 @@ class Widget extends Component {
className={ widgetClasses }
onResizeStart={ (direction, styleSize, clientSize, event) => this.borderWasClicked(event) }
onResizeStop={(direction, styleSize, clientSize, delta) => this.resizeStop(direction, styleSize, clientSize, delta)}
onDrag={(event, ui) => this.drag(event, ui)}
onDragStop={(event, ui) => this.dragStop(event, ui)}
moveGrid={grid}
resizeGrid={grid}