Skip to content

Commit 373dc53

Browse files
dmt0dmt0
authored
Merge pull request #596 from plotly/autosize-fix
Autosize fix
2 parents 7770225 + 14616f2 commit 373dc53

File tree

7 files changed

+148
-115
lines changed

7 files changed

+148
-115
lines changed

‎src/components/fields/CanvasSize.js‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
import React, {Component} from 'react';
2+
import PropTypes from 'prop-types';
3+
import {connectToContainer} from 'lib';
4+
import Field from './Field';
5+
import Numeric from './Numeric';
6+
import Radio from './Radio';
7+
8+
class UnconnectedCanvasSize extends Component {
9+
constructor(props, context) {
10+
super(props, context);
11+
12+
this.state = {
13+
auto: props.container.autosize,
14+
width: props.container.width || props.fullContainer.width || '',
15+
height: props.container.height || props.fullContainer.height || '',
16+
};
17+
18+
this.setAuto = this.setAuto.bind(this);
19+
this.setWidth = this.setWidth.bind(this);
20+
this.setHeight = this.setHeight.bind(this);
21+
}
22+
23+
setAuto(auto) {
24+
this.setState({auto: auto});
25+
this.props.updatePlot(auto);
26+
this.context.updateContainer(
27+
auto
28+
? {width: '', height: ''}
29+
: {width: this.state.width, height: this.state.height}
30+
);
31+
}
32+
33+
setWidth(inputValue) {
34+
this.setState({width: inputValue});
35+
this.props.updateContainer({width: inputValue});
36+
}
37+
38+
setHeight(inputValue) {
39+
this.setState({height: inputValue});
40+
this.props.updateContainer({height: inputValue});
41+
}
42+
43+
render() {
44+
const {attr} = this.props;
45+
const {localize: _} = this.context;
46+
const {auto, width, height} = this.state;
47+
48+
return (
49+
<div>
50+
<Radio
51+
attr={attr}
52+
label={_('Size')}
53+
options={[
54+
{label: _('Auto'), value: true},
55+
{label: _('Custom'), value: false},
56+
]}
57+
fullValue={auto}
58+
updatePlot={this.setAuto}
59+
/>
60+
{auto ? (
61+
''
62+
) : (
63+
<div>
64+
<Numeric
65+
label={_('Fixed Width')}
66+
suppressMultiValuedMessage
67+
attr="width"
68+
updatePlot={this.setWidth}
69+
fullValue={width}
70+
units="px"
71+
/>
72+
<Numeric
73+
label={_('Fixed height')}
74+
suppressMultiValuedMessage
75+
attr="height"
76+
updatePlot={this.setHeight}
77+
fullValue={height}
78+
units="px"
79+
/>
80+
</div>
81+
)}
82+
</div>
83+
);
84+
}
85+
}
86+
87+
UnconnectedCanvasSize.propTypes = {
88+
fullValue: PropTypes.any,
89+
updatePlot: PropTypes.func,
90+
...Field.propTypes,
91+
};
92+
93+
UnconnectedCanvasSize.contextTypes = {
94+
localize: PropTypes.func,
95+
updateContainer: PropTypes.func,
96+
};
97+
98+
export default connectToContainer(UnconnectedCanvasSize);

‎src/components/fields/MarkerColor.js‎

Lines changed: 28 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -93,37 +93,35 @@ class UnconnectedMarkerColor extends Component {
9393
container.marker.color.includes(MULTI_VALUED));
9494

9595
return (
96-
<div>
97-
<Field {...this.props} multiValued={multiValued} attr={attr}>
98-
<RadioBlocks
99-
options={options}
100-
activeOption={type}
101-
onOptionChange={this.setType}
96+
<Field {...this.props} multiValued={multiValued} attr={attr}>
97+
<RadioBlocks
98+
options={options}
99+
activeOption={type}
100+
onOptionChange={this.setType}
101+
/>
102+
{!type ? null : type === 'constant' ? (
103+
<Color
104+
suppressMultiValuedMessage
105+
attr="marker.color"
106+
updatePlot={this.setValue}
107+
fullValue={value.constant}
102108
/>
103-
{!type ? null : type === 'constant' ? (
104-
<Color
105-
suppressMultiValuedMessage
106-
attr="marker.color"
107-
updatePlot={this.setValue}
108-
fullValue={value.constant}
109-
/>
110-
) : container.marker &&
111-
container.marker.colorsrc === MULTI_VALUED ? null : (
112-
<div>
113-
<DataSelector suppressMultiValuedMessage attr="marker.color" />
114-
{container.marker &&
115-
container.marker.colorscale === MULTI_VALUED ? null : (
116-
<Colorscale
117-
suppressMultiValuedMessage
118-
attr="marker.colorscale"
119-
updatePlot={this.setColorScale}
120-
colorscale={colorscale}
121-
/>
122-
)}
123-
</div>
124-
)}
125-
</Field>
126-
</div>
109+
) : container.marker &&
110+
container.marker.colorsrc === MULTI_VALUED ? null : (
111+
<div>
112+
<DataSelector suppressMultiValuedMessage attr="marker.color" />
113+
{container.marker &&
114+
container.marker.colorscale === MULTI_VALUED ? null : (
115+
<Colorscale
116+
suppressMultiValuedMessage
117+
attr="marker.colorscale"
118+
updatePlot={this.setColorScale}
119+
colorscale={colorscale}
120+
/>
121+
)}
122+
</div>
123+
)}
124+
</Field>
127125
);
128126
}
129127
}

‎src/components/fields/MarkerSize.js‎

Lines changed: 20 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -75,29 +75,27 @@ class UnconnectedMarkerSize extends Component {
7575
(Array.isArray(fullValue) && fullValue.includes(MULTI_VALUED));
7676

7777
return (
78-
<div>
79-
<Field {...this.props} multiValued={multiValued} attr={attr}>
80-
<RadioBlocks
81-
options={options}
82-
activeOption={type}
83-
onOptionChange={this.setType}
78+
<Field {...this.props} multiValued={multiValued} attr={attr}>
79+
<RadioBlocks
80+
options={options}
81+
activeOption={type}
82+
onOptionChange={this.setType}
83+
/>
84+
{type === 'constant' ? (
85+
<Numeric
86+
suppressMultiValuedMessage
87+
attr="marker.size"
88+
updatePlot={this.setValue}
89+
fullValue={value.constant}
8490
/>
85-
{type === 'constant' ? (
86-
<Numeric
87-
suppressMultiValuedMessage
88-
attr="marker.size"
89-
updatePlot={this.setValue}
90-
fullValue={value.constant}
91-
/>
92-
) : multiValued ? null : (
93-
<DataSelector
94-
suppressMultiValuedMessage
95-
attr="marker.size"
96-
updatePlot={this.setValue}
97-
/>
98-
)}
99-
</Field>
100-
</div>
91+
) : multiValued ? null : (
92+
<DataSelector
93+
suppressMultiValuedMessage
94+
attr="marker.size"
95+
updatePlot={this.setValue}
96+
/>
97+
)}
98+
</Field>
10199
);
102100
}
103101
}

‎src/components/fields/__tests__/CanvasSize-test.js‎

Lines changed: 0 additions & 40 deletions
This file was deleted.

‎src/components/fields/derived.js‎

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -124,18 +124,6 @@ export const AxisSide = connectToContainer(UnconnectedRadio, {
124124
},
125125
});
126126

127-
export const CanvasSize = connectToContainer(UnconnectedNumeric, {
128-
modifyPlotProps: (props, context, plotProps) => {
129-
const {fullContainer, updateContainer, container} = plotProps;
130-
if (plotProps.isVisible && fullContainer && fullContainer.autosize) {
131-
plotProps.isVisible = false;
132-
if (container[props.attr]) {
133-
updateContainer({[props.attr]: {}});
134-
}
135-
}
136-
},
137-
});
138-
139127
export const ContourNumeric = connectToContainer(UnconnectedNumeric, {
140128
modifyPlotProps: (props, context, plotProps) => {
141129
const {fullContainer} = plotProps;

‎src/components/fields/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import AxisCreator from './AxisCreator';
2020
import UpdateMenuButtons from './UpdateMenuButtons';
2121
import {FilterOperation, FilterValue} from './FilterOperation';
2222
import MarkerSize from './MarkerSize';
23+
import CanvasSize from './CanvasSize';
2324
import {
2425
AnnotationArrowRef,
2526
AnnotationRef,
@@ -28,7 +29,6 @@ import {
2829
NTicks,
2930
DTicks,
3031
AxisAnchorDropdown,
31-
CanvasSize,
3232
ContourNumeric,
3333
FillDropdown,
3434
HoverInfo,

‎src/default_panels/StyleLayoutPanel.js‎

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -16,16 +16,7 @@ import {
1616
const StyleLayoutPanel = (props, {localize: _}) => (
1717
<TraceRequiredPanel>
1818
<PlotlyFold name={_('Canvas')}>
19-
<Radio
20-
label={_('Size')}
21-
attr="autosize"
22-
options={[
23-
{label: _('Auto'), value: true},
24-
{label: _('Custom'), value: false},
25-
]}
26-
/>
27-
<CanvasSize label={_('Fixed Width')} attr="width" units="px" />
28-
<CanvasSize label={_('Fixed Height')} attr="height" units="px" />
19+
<CanvasSize attr="autosize" />
2920
<ColorPicker label={_('Plot Background')} attr="plot_bgcolor" />
3021
<ColorPicker label={_('Plot Background')} attr="polar.bgcolor" />
3122
<ColorPicker label={_('Margin Color')} attr="paper_bgcolor" />

0 commit comments

Comments
 (0)