From ae830bb6d7cdb79723047be06d4b7621b1eb7069 Mon Sep 17 00:00:00 2001 From: Laura Fuentes Grau Date: Tue, 12 May 2020 19:18:27 +0200 Subject: [PATCH 1/2] 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'; From bb08991e9cdf7b037383dfef9bb9aa7b4b134716 Mon Sep 17 00:00:00 2001 From: Laura Fuentes Grau Date: Tue, 12 May 2020 19:27:51 +0200 Subject: [PATCH 2/2] fix for issues while adding a new dashboard --- src/dashboard/new-dashboard.js | 2 +- src/scenario/scenario.js | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/dashboard/new-dashboard.js b/src/dashboard/new-dashboard.js index e71fdbc..6f4b9da 100644 --- a/src/dashboard/new-dashboard.js +++ b/src/dashboard/new-dashboard.js @@ -69,7 +69,7 @@ class NewDashboardDialog extends React.Component { return ( this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}>
- + Name this.handleChange(e)} /> diff --git a/src/scenario/scenario.js b/src/scenario/scenario.js index 1cd8706..ba55f34 100644 --- a/src/scenario/scenario.js +++ b/src/scenario/scenario.js @@ -292,12 +292,12 @@ class Scenario extends React.Component { closeNewDashboardModal(data) { this.setState({ newDashboardModal : false }); - let newDashboard = data; - // add default grid value and scenarioID - newDashboard["grid"] = 15; - newDashboard["scenarioID"] = this.state.scenario.id; - if (data) { + let newDashboard = data; + // add default grid value and scenarioID + newDashboard["grid"] = 15; + newDashboard["scenarioID"] = this.state.scenario.id; + AppDispatcher.dispatch({ type: 'dashboards/start-add', data,