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

Label Widget: maxWidth now changes dynamically with text and textSize #12

Browse source
This commit is contained in:
Laura Fuentes Grau 2020-05-12 19:18:27 +02:00
parent 6acaf007e0
commit ae830bb6d7
2 changed files with 16 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/widget/edit-widget/edit-widget.js
View file

@ -65,12 +65,24 @@ class EditWidgetDialog extends React.Component {
return changeObject;
}
getTextWidth(text, fontSize) {
let font = fontSize + "px ariel";
let canvas = this.getTextWidth.canvas || (this.getTextWidth.canvas = document.createElement("canvas"));
let context = canvas.getContext("2d");
context.font = font;
let metrics = context.measureText(text);
return metrics.width;
}
setMaxWidth(changeObject){
if(changeObject.type === 'Label'){
changeObject.customProperties.maxWidth = (changeObject.customProperties.textSize* 0.34) * changeObject.name.length;
changeObject.customProperties.maxWidth = Math.ceil(this.getTextWidth(changeObject.name, changeObject.customProperties.textSize));
}
else if (changeObject.type === 'Value'){
// changeObject.customProperties.maxWidth = (changeObject.customProperties.textSize* 0.5) * (changeObject.name.length+13);
/*else if (changeObject.type === 'Value'){
changeObject.customProperties.maxWidth = Math.ceil(this.getTextWidth(changeObject.name, changeObject.customProperties.textSize));
}*/
if(this.state.temporal.width > changeObject.customProperties.maxWidth){
changeObject.width = changeObject.customProperties.maxWidth;
}
return changeObject;
}

2
src/widget/widget-factory.js
View file

@ -70,7 +70,7 @@ class WidgetFactory {
case 'Value':
widget.minWidth = 70;
widget.minHeight = 20;
widget.width = 150;
widget.width = 110;
widget.height = 30;
widget.customProperties.textSize = 16;
widget.name = 'Value';