diff --git a/src/widget/edit-widget/edit-widget.js b/src/widget/edit-widget/edit-widget.js index 8e79531..c8517bd 100644 --- a/src/widget/edit-widget/edit-widget.js +++ b/src/widget/edit-widget/edit-widget.js @@ -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 ; } diff --git a/src/widget/editable-widget-container.js b/src/widget/editable-widget-container.js index f49312e..f96e02c 100644 --- a/src/widget/editable-widget-container.js +++ b/src/widget/editable-widget-container.js @@ -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} diff --git a/src/widget/widget-factory.js b/src/widget/widget-factory.js index fec9e91..3673a63 100644 --- a/src/widget/widget-factory.js +++ b/src/widget/widget-factory.js @@ -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':