From ae830bb6d7cdb79723047be06d4b7621b1eb7069 Mon Sep 17 00:00:00 2001
From: Laura Fuentes Grau <laurafuentesgrau@gmail.com>
Date: Tue, 12 May 2020 19:18:27 +0200
Subject: [PATCH] Label Widget: maxWidth now changes dynamically with text and
 textSize #12

---
 src/widget/edit-widget/edit-widget.js | 18 +++++++++++++++---
 src/widget/widget-factory.js          |  2 +-
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/widget/edit-widget/edit-widget.js b/src/widget/edit-widget/edit-widget.js
index c8517bd..9a9778a 100644
--- a/src/widget/edit-widget/edit-widget.js
+++ b/src/widget/edit-widget/edit-widget.js
@@ -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;
   }
diff --git a/src/widget/widget-factory.js b/src/widget/widget-factory.js
index 7fc407d..b1899c4 100644
--- a/src/widget/widget-factory.js
+++ b/src/widget/widget-factory.js
@@ -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';