mirror of
https://git.rwth-aachen.de/acs/public/villas/web/
synced 2025-03-16 00:00:03 +01:00
wip: add new size restrictions #12
This commit is contained in:
parent
9eb4246633
commit
edfae8f024
3 changed files with 52 additions and 9 deletions
|
@ -65,6 +65,28 @@ class EditWidgetDialog extends React.Component {
|
|||
return changeObject;
|
||||
}
|
||||
|
||||
setMaxWidth(changeObject){
|
||||
if(changeObject.type === 'Label'){
|
||||
changeObject.customProperties.maxWidth = (changeObject.customProperties.textSize* 0.34) * changeObject.name.length;
|
||||
}
|
||||
else if (changeObject.type === 'Value'){
|
||||
// changeObject.customProperties.maxWidth = (changeObject.customProperties.textSize* 0.5) * (changeObject.name.length+13);
|
||||
}
|
||||
return changeObject;
|
||||
}
|
||||
|
||||
setNewLockRestrictions(changeObject){
|
||||
if(changeObject.customProperties.orientation === 0){
|
||||
changeObject.customProperties.resizeTopBottomLock = true;
|
||||
changeObject.customProperties.resizeRightLeftLock = false;
|
||||
}
|
||||
else if(changeObject.customProperties.orientation === 1){
|
||||
changeObject.customProperties.resizeTopBottomLock = false;
|
||||
changeObject.customProperties.resizeRightLeftLock = true;
|
||||
}
|
||||
return changeObject;
|
||||
}
|
||||
|
||||
handleChange(e) {
|
||||
|
||||
// TODO: check what we really need in this function. Can we reduce its complexity?
|
||||
|
@ -93,7 +115,15 @@ class EditWidgetDialog extends React.Component {
|
|||
// TODO this if condition requires changes to work!!!
|
||||
changeObject = this.assignAspectRatio(changeObject, e.target.value);
|
||||
}
|
||||
} else if (e.target.type === 'number') {
|
||||
}else if (parts[1] === 'textSize'){
|
||||
changeObject[parts[0]][parts[1]] = Number(e.target.value);
|
||||
changeObject = this.setMaxWidth(changeObject);
|
||||
|
||||
}else if(parts[1] === 'orientation'){
|
||||
customProperty ? changeObject[parts[0]][parts[1]] = e.target.value : changeObject[e.target.id] = e.target.value ;
|
||||
changeObject = this.setNewLockRestrictions(changeObject);
|
||||
}
|
||||
else if (e.target.type === 'number') {
|
||||
customProperty ? changeObject[parts[0]][parts[1]] = Number(e.target.value) : changeObject[e.target.id] = Number(e.target.value);
|
||||
} else if(e.target.id === 'name'){
|
||||
if(customProperty ? (changeObject[parts[0]][parts[1]] != null) : (changeObject[e.target.id] != null)){
|
||||
|
@ -101,6 +131,7 @@ class EditWidgetDialog extends React.Component {
|
|||
} else{
|
||||
customProperty ? changeObject[parts[0]][parts[1]]= 'default' : changeObject[e.target.id] = 'default';
|
||||
}
|
||||
changeObject = this.setMaxWidth(changeObject);
|
||||
} else {
|
||||
customProperty ? changeObject[parts[0]][parts[1]] = e.target.value : changeObject[e.target.id] = e.target.value ;
|
||||
}
|
||||
|
|
|
@ -84,16 +84,21 @@ class EditableWidgetContainer extends React.Component {
|
|||
|
||||
render() {
|
||||
const widget = this.props.widget;
|
||||
let resizingRestricted = false;
|
||||
if(widget.customProperties.resizeRightLeftLock || widget.customProperties.resizeTopBottomLock){
|
||||
resizingRestricted = true;
|
||||
}
|
||||
|
||||
|
||||
const resizing = {
|
||||
bottom: !widget.isLocked,
|
||||
bottomLeft: !widget.isLocked,
|
||||
bottomRight: !widget.isLocked,
|
||||
left: !widget.isLocked,
|
||||
right: !widget.idLocked,
|
||||
top: !widget.isLocked,
|
||||
topLeft: !widget.isLocked,
|
||||
topRight: !widget.isLocked
|
||||
bottom: !(widget.customProperties.resizeTopBottomLock || widget.isLocked),
|
||||
bottomLeft: !(resizingRestricted|| widget.isLocked),
|
||||
bottomRight: !(resizingRestricted || widget.isLocked),
|
||||
left: !(widget.customProperties.resizeRightLeftLock || widget.isLocked),
|
||||
right: !(widget.customProperties.resizeRightLeftLock || widget.isLocked),
|
||||
top: !(widget.customProperties.resizeTopBottomLock || widget.isLocked),
|
||||
topLeft: !(resizingRestricted || widget.isLocked),
|
||||
topRight: !(resizingRestricted || widget.isLocked)
|
||||
};
|
||||
|
||||
const gridArray = [ this.props.grid, this.props.grid ];
|
||||
|
@ -108,6 +113,7 @@ class EditableWidgetContainer extends React.Component {
|
|||
default={{ x: Number(widget.x), y: Number(widget.y), width: widget.width, height: widget.height }}
|
||||
minWidth={widget.minWidth}
|
||||
minHeight={widget.minHeight}
|
||||
maxWidth ={widget.customProperties.maxWidth || '100%' }
|
||||
lockAspectRatio={Boolean(widget.isLocked)}
|
||||
bounds={'parent'}
|
||||
className={widgetClasses}
|
||||
|
|
|
@ -75,6 +75,7 @@ class WidgetFactory {
|
|||
widget.customProperties.textSize = 16;
|
||||
widget.name = 'Value';
|
||||
widget.customProperties.showUnit = false;
|
||||
widget.customProperties.resizeTopBottomLock = true;
|
||||
break;
|
||||
case 'Plot':
|
||||
widget.customProperties.ylabel = '';
|
||||
|
@ -96,11 +97,13 @@ class WidgetFactory {
|
|||
case 'Label':
|
||||
widget.minWidth = 20;
|
||||
widget.minHeight = 20;
|
||||
widget.customProperties.maxWidth = 100;
|
||||
widget.width = 100;
|
||||
widget.height = 35;
|
||||
widget.name = 'Label';
|
||||
widget.customProperties.textSize = 32;
|
||||
widget.customProperties.fontColor = 0;
|
||||
widget.customProperties.resizeTopBottomLock = true;
|
||||
break;
|
||||
case 'PlotTable':
|
||||
widget.customProperties.ylabel = '';
|
||||
|
@ -138,6 +141,7 @@ class WidgetFactory {
|
|||
widget.width = 200;
|
||||
widget.height = 50;
|
||||
widget.customProperties.showUnit = false;
|
||||
widget.customProperties.resizeTopBottomLock = true;
|
||||
break;
|
||||
case 'Slider':
|
||||
widget.minWidth = 380;
|
||||
|
@ -151,6 +155,8 @@ class WidgetFactory {
|
|||
widget.customProperties.showUnit = true;
|
||||
widget.customProperties.continous_update = false;
|
||||
widget.customProperties.default_value = 0;
|
||||
widget.customProperties.resizeLeftRightLock = false;
|
||||
widget.customProperties.resizeTopBottomLock = true;
|
||||
|
||||
break;
|
||||
case 'Gauge':
|
||||
|
|
Loading…
Add table
Reference in a new issue