From 5a1de494fbc4d7dd52a3e90b37ed62d13a4c16c6 Mon Sep 17 00:00:00 2001 From: Markus Grigull Date: Wed, 15 Mar 2017 15:34:51 +0100 Subject: [PATCH] Add visualization automatic resize Fix widget top and/or left edge resize --- src/components/dropzone.js | 2 +- src/containers/visualization.js | 17 ++++++++++++++++- src/containers/widget.js | 12 +++++++++++- 3 files changed, 28 insertions(+), 3 deletions(-) diff --git a/src/components/dropzone.js b/src/components/dropzone.js index 88572d2..dbb5dbc 100644 --- a/src/components/dropzone.js +++ b/src/components/dropzone.js @@ -47,7 +47,7 @@ class Dropzone extends Component { }); return this.props.connectDropTarget( -
this.wrapper = wrapper}> +
this.wrapper = wrapper}> {this.props.children}
); diff --git a/src/containers/visualization.js b/src/containers/visualization.js index 4c77bc2..14cbc96 100644 --- a/src/containers/visualization.js +++ b/src/containers/visualization.js @@ -142,6 +142,7 @@ class Visualization extends Component { visualization.widgets[index] = widget; this.setState({ visualization: visualization }); + this.forceUpdate(); } editWidget(e, data) { @@ -234,6 +235,20 @@ class Visualization extends Component { } render() { + // calculate widget area height + var height = 0; + + if (this.state.visualization.widgets) { + this.state.visualization.widgets.forEach((widget) => { + if (widget.y + widget.height > height) { + height = widget.y + widget.height; + } + }); + + // add padding + height += 40; + } + return (
@@ -264,7 +279,7 @@ class Visualization extends Component {
} - this.handleDrop(item, position)} editing={this.state.editing}> + this.handleDrop(item, position)} editing={this.state.editing}> {this.state.visualization.widgets != null && this.state.visualization.widgets.map((widget, index) => ( this.widgetChange(w, i)} editing={this.state.editing} index={index} grid={this.state.grid} /> diff --git a/src/containers/widget.js b/src/containers/widget.js index 968e5f6..6cdcdb8 100644 --- a/src/containers/widget.js +++ b/src/containers/widget.js @@ -54,6 +54,16 @@ class Widget extends Component { resizeStop(direction, styleSize, clientSize, delta) { // update widget var widget = this.props.data; + + // resize depends on direction + if (direction === 'left' || direction === 'topLeft' || direction === 'bottomLeft') { + widget.x -= delta.width; + } + + if (direction === 'top' || direction === 'topLeft' || direction === 'topRight') { + widget.y -= delta.height; + } + widget.width = styleSize.width; widget.height = styleSize.height; @@ -61,7 +71,7 @@ class Widget extends Component { } render() { - console.log('render widget ' + this.props.data.z + this.props.data.type); + //console.log('render widget ' + this.props.data.z + this.props.data.type); // configure grid var grid = this.props.grid;