From ae830bb6d7cdb79723047be06d4b7621b1eb7069 Mon Sep 17 00:00:00 2001 From: Laura Fuentes Grau 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';