CanvasSize

Author: bpostlethwaite

src/DefaultEditor.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import {
   AxesSelector,
   AxesRange,
+  CanvasSize,
   ColorPicker,
   DataSelector,
   Dropdown,
@@ -176,12 +177,43 @@ class DefaultEditor extends Component {
 
         <LayoutPanel group="Style" name={_('Layout')}>
           <Fold name={_('Canvas')}>
-            <Numeric
+            <Radio
+              attr="autosize"
+              options={[
+                {label: _('Auto'), value: true},
+                {label: _('Custom'), value: false},
+              ]}
+            />
+            <CanvasSize
               label={_('Fixed Width')}
               step={1}
               attr="width"
               postfix="px"
             />
+            <CanvasSize
+              label={_('Fixed Height')}
+              step={1}
+              attr="height"
+              postfix="px"
+            />
+            <ColorPicker label={_('Color')} attr="paper_bgcolor" />
+          </Fold>
+          <Fold name={_('Margins and Padding')}>
+            <Numeric label={_('Top')} step={1} attr="margin.t" postfix="px" />
+            <Numeric
+              label={_('Bottom')}
+              step={1}
+              attr="margin.b"
+              postfix="px"
+            />
+            <Numeric label={_('Left')} step={1} attr="margin.l" postfix="px" />
+            <Numeric label={_('Right')} step={1} attr="margin.r" postfix="px" />
+            <Numeric
+              label={_('Padding')}
+              step={1}
+              attr="margin.pad"
+              postfix="px"
+            />
           </Fold>
         </LayoutPanel>
 

src/components/fields/CanvasSize.js

@@ -0,0 +1,25 @@
+import Numeric from './Numeric';
+import React, {Component} from 'react';
+import {connectToContainer} from '../../lib';
+
+class CanvasSize extends Component {
+  static modifyPlotProps(props, context, plotProps) {
+    if (!plotProps.isVisible) {
+      return;
+    }
+    const {fullContainer} = plotProps;
+    if (fullContainer && fullContainer.autosize) {
+      plotProps.isVisible = false;
+    }
+  }
+
+  render() {
+    return <Numeric {...this.props} />;
+  }
+}
+
+CanvasSize.propTypes = {
+  ...Numeric.propTypes,
+};
+
+export default connectToContainer(CanvasSize);

src/components/fields/index.js

@@ -1,5 +1,6 @@
 import AxesRange from './AxesRange';
 import AxesSelector from './AxesSelector';
+import CanvasSize from './CanvasSize';
 import ColorPicker from './Color';
 import Dropdown from './Dropdown';
 import Flaglist from './Flaglist';
@@ -13,6 +14,7 @@ import TraceSelector from './TraceSelector';
 export {
   AxesRange,
   AxesSelector,
+  CanvasSize,
   ColorPicker,
   Dropdown,
   Flaglist,

src/components/index.js

@@ -1,6 +1,7 @@
 import {
   AxesRange,
   AxesSelector,
+  CanvasSize,
   ColorPicker,
   Dropdown,
   Flaglist,
@@ -26,6 +27,7 @@ export {
   AxesSelector,
   AxesRange,
   MenuPanel,
+  CanvasSize,
   ColorPicker,
   DataSelector,
   Dropdown,

src/index.js

@@ -12,6 +12,7 @@ import {EDITOR_ACTIONS} from './constants';
 import {
   AxesRange,
   AxesSelector,
+  CanvasSize,
   ColorPicker,
   DataSelector,
   Dropdown,
@@ -35,6 +36,7 @@ export {
   AxesRange,
   AxesSelector,
   MenuPanel,
+  CanvasSize,
   ColorPicker,
   DataSelector,
   Dropdown,