From 33742326f677c2db4cbc903bfbdc802b7f7ef36a Mon Sep 17 00:00:00 2001 From: Markus Grigull Date: Sat, 29 Jul 2017 10:52:03 +0200 Subject: [PATCH] Add image default size and start aspect ratio lock control --- .../dialog/edit-widget-aspect-control.js | 37 +++++++++++++++++++ .../dialog/edit-widget-control-creator.js | 4 +- src/components/dialog/edit-widget.js | 9 +++++ src/components/widget-factory.js | 1 + src/components/widget-image.js | 20 ++++------ src/containers/widget.js | 4 +- 6 files changed, 60 insertions(+), 15 deletions(-) create mode 100644 src/components/dialog/edit-widget-aspect-control.js diff --git a/src/components/dialog/edit-widget-aspect-control.js b/src/components/dialog/edit-widget-aspect-control.js new file mode 100644 index 0000000..1288704 --- /dev/null +++ b/src/components/dialog/edit-widget-aspect-control.js @@ -0,0 +1,37 @@ +/** + * File: edit-widget-aspect-control.js + * Author: Markus Grigull + * Date: 29.07.2017 + * + * This file is part of VILLASweb. + * + * VILLASweb is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * VILLASweb is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with VILLASweb. If not, see . + ******************************************************************************/ + +import React from 'react'; +import { FormGroup, Checkbox } from 'react-bootstrap'; + +class EditWidgetAspectControl extends React.Component { + render() { + console.log(this.props.lockAspect); + + return ( + + this.props.handleChange(e)}>Lock Aspect + + ); + } +} + +export default EditWidgetAspectControl; \ No newline at end of file diff --git a/src/components/dialog/edit-widget-control-creator.js b/src/components/dialog/edit-widget-control-creator.js index 455ca2f..a5d2072 100644 --- a/src/components/dialog/edit-widget-control-creator.js +++ b/src/components/dialog/edit-widget-control-creator.js @@ -29,6 +29,7 @@ import EditWidgetSimulatorControl from './edit-widget-simulator-control'; import EditWidgetSignalControl from './edit-widget-signal-control'; import EditWidgetSignalsControl from './edit-widget-signals-control'; import EditWidgetOrientation from './edit-widget-orientation'; +import EditWidgetAspectControl from './edit-widget-aspect-control'; export default function createControls(widgetType = null, widget = null, sessionToken = null, files = null, validateForm, simulation, handleChange) { // Use a list to concatenate the controls according to the widget type @@ -63,7 +64,8 @@ export default function createControls(widgetType = null, widget = null, session break; case 'Image': { dialogControls.push( - validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />) + validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />, + handleChange(e)} />); } break; case 'Gauge': { diff --git a/src/components/dialog/edit-widget.js b/src/components/dialog/edit-widget.js index 398fd5a..335e264 100644 --- a/src/components/dialog/edit-widget.js +++ b/src/components/dialog/edit-widget.js @@ -73,6 +73,15 @@ class EditWidgetDialog extends Component { let changeObject = {}; if (e.target.id === 'simulator') { changeObject[e.target.id] = JSON.parse(e.target.value); + } else if (e.target.id === 'file') { + changeObject[e.target.id] = e.target.value; + + // get file and update size + let file = this.props.files.find(element => element._id === e.target.value); + + // set default size + changeObject.width = file.dimensions.width; + changeObject.height = file.dimensions.height; } else { changeObject[e.target.id] = e.target.value; } diff --git a/src/components/widget-factory.js b/src/components/widget-factory.js index 364562a..b2104f2 100644 --- a/src/components/widget-factory.js +++ b/src/components/widget-factory.js @@ -71,6 +71,7 @@ class WidgetFactory { widget.minHeight = 100; widget.width = 200; widget.height = 200; + widget.lockAspect = true; break; case 'Button': widget.minWidth = 100; diff --git a/src/components/widget-image.js b/src/components/widget-image.js index 2bbba8c..afacaa6 100644 --- a/src/components/widget-image.js +++ b/src/components/widget-image.js @@ -19,35 +19,31 @@ * along with VILLASweb. If not, see . ******************************************************************************/ -import React, { Component } from 'react'; +import React from 'react'; import AppDispatcher from '../app-dispatcher'; import config from '../config'; -class WidgetImage extends Component { - +class WidgetImage extends React.Component { componentWillReceiveProps(nextProps) { - - // Query the image referenced by the widget (public request, no token required) + // Query the image referenced by the widget let widgetFile = nextProps.widget.file; - if (widgetFile && !nextProps.files.find( file => file._id === widgetFile ) ) { - + if (widgetFile && !nextProps.files.find(file => file._id === widgetFile)) { AppDispatcher.dispatch({ type: 'files/start-load', - data: widgetFile + data: widgetFile, + token: nextProps.token }); - } } render() { - - let file = this.props.files.find( (file) => file._id === this.props.widget.file ); + let file = this.props.files.find(file => file._id === this.props.widget.file); return (
{file && - {file.name} e.preventDefault() } /> + {file.name} e.preventDefault()} /> }
); diff --git a/src/containers/widget.js b/src/containers/widget.js index c16cd50..a67fb80 100644 --- a/src/containers/widget.js +++ b/src/containers/widget.js @@ -168,7 +168,7 @@ class Widget extends Component { element = this.props.onWidgetStatusChange(w, this.props.index) } /> borderedWidget = true; } else if (widget.type === 'Image') { - element = + element = } else if (widget.type === 'Button') { element = } else if (widget.type === 'NumberInput') { @@ -195,7 +195,7 @@ class Widget extends Component { initial={{ x: Number(widget.x), y: Number(widget.y), width: widget.width, height: widget.height }} minWidth={ widget.minWidth } minHeight={ widget.minHeight } - lockAspectRatio={ widget.lockedAspectRatio } + lockAspectRatio={Boolean(widget.lockAspect)} bounds={'parent'} className={ widgetClasses } onResizeStart={ (direction, styleSize, clientSize, event) => this.borderWasClicked(event) }