Default fonts and correct plot schema access

src/DefaultEditor.js

@@ -1,11 +1,13 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import {
+  SubPanel,
   ColorPicker,
   DataSelector,
   Dropdown,
   Flaglist,
   Fold,
+  Info,
   Numeric,
   Panel,
   PanelMenuWrapper,
@@ -14,6 +16,7 @@ import {
   TraceAccordion,
   TraceSelector,
 } from './components';
+import {DEFAULT_FONTS} from './constants';
 import {localize, connectLayoutToPlot} from './lib';
 
 const LayoutPanel = connectLayoutToPlot(Panel);
@@ -105,13 +108,7 @@ class DefaultEditor extends Component {
         <Panel group="Style" name="Traces">
           <TraceAccordion>
             <Section name={_('Trace')}>
-              <Numeric
-                label={_('Opacity')}
-                min={0}
-                max={1}
-                step={0.1}
-                attr="opacity"
-              />
+              <Numeric label={_('Opacity')} step={0.1} attr="opacity" />
             </Section>
 
             <Section name={_('Display')}>
@@ -144,39 +141,28 @@ class DefaultEditor extends Component {
             <Section name={_('Points')}>
               <Numeric
                 label={_('Marker Opacity')}
-                min={0}
-                max={1}
                 step={0.1}
                 attr="marker.opacity"
               />
 
               <ColorPicker label={_('Marker Color')} attr="marker.color" />
 
-              <Numeric label={_('Size')} min={0} attr="marker.size" />
+              <Numeric label={_('Size')} attr="marker.size" />
 
-              <Numeric
-                label={_('Line width')}
-                min={0}
-                attr="marker.line.width"
-              />
+              <Numeric label={_('Line width')} attr="marker.line.width" />
             </Section>
 
             <Section name={_('Lines')}>
-              <Numeric
-                label={_('Width')}
-                min={0}
-                step={1.0}
-                attr="line.width"
-              />
+              <Numeric label={_('Width')} step={1.0} attr="line.width" />
 
               <ColorPicker label={_('Line color')} attr="line.color" />
 
               <Radio
                 label={_('Connect Gaps')}
                 attr="connectgaps"
                 options={[
-                  {value: true, label: 'Connect'},
-                  {value: false, label: 'Blank'},
+                  {label: _('Connect'), value: true},
+                  {label: _('Blank'), value: false},
                 ]}
               />
             </Section>
@@ -187,7 +173,6 @@ class DefaultEditor extends Component {
           <Fold name={_('Canvas')}>
             <Numeric
               label={_('Fixed Width')}
-              min={100}
               step={1}
               attr="width"
               postfix="px"
@@ -201,8 +186,97 @@ class DefaultEditor extends Component {
               <Radio
                 attr="showlegend"
                 options={[
-                  {value: true, label: _('Show')},
-                  {value: false, label: _('Hide')},
+                  {label: _('Show'), value: true},
+                  {label: _('Hide'), value: false},
+                ]}
+              />
+            </Section>
+            <Section name={_('Text')}>
+              <Dropdown
+                label={_('Typeface')}
+                attr="legend.font.family"
+                clearable={false}
+                options={[...DEFAULT_FONTS]}
+              />
+              <Numeric
+                label={_('Size')}
+                step={1}
+                attr="legend.font.size"
+                postfix="px"
+              />
+              <ColorPicker label={_('Color')} attr="legend.font.color" />
+            </Section>
+            <Section name={_('Legend Box')}>
+              <Numeric
+                label={_('Border Width')}
+                step={1}
+                attr="legend.borderwidth"
+                postfix="px"
+              />
+              <ColorPicker
+                label={_('Border Color')}
+                attr="legend.bordercolor"
+              />
+              <ColorPicker
+                label={_('Background Color')}
+                attr="legend.bgcolor"
+              />
+            </Section>
+            <Section name={_('Positioning')}>
+              <SubPanel>
+                <Section name={_('Anchor Point')}>
+                  <Info>
+                    {_(
+                      'The positioning inputs are relative to the ' +
+                        'anchor points on the text box'
+                    )}
+                  </Info>
+                  <Radio
+                    attr="legend.xanchor"
+                    options={[
+                      {label: _('Left'), value: 'left'},
+                      {label: _('Center'), value: 'center'},
+                      {label: _('Right'), value: 'right'},
+                    ]}
+                  />
+                  <Radio
+                    attr="legend.yanchor"
+                    options={[
+                      {label: _('Top'), value: 'top'},
+                      {label: _('Middle'), value: 'middle'},
+                      {label: _('Bottom'), value: 'bottom'},
+                    ]}
+                  />
+                </Section>
+              </SubPanel>
+              <Numeric
+                label={_('X Position')}
+                step={0.01}
+                attr="legend.x"
+                postfix="px"
+              />
+              <Numeric
+                label={_('Y Position')}
+                step={0.01}
+                attr="legend.y"
+                postfix="px"
+              />
+            </Section>
+            <Section name={_('Orientation')}>
+              <Radio
+                attr="legend.orientation"
+                options={[
+                  {label: _('Vertical'), value: 'v'},
+                  {label: _('Horizontal'), value: 'h'},
+                ]}
+              />
+            </Section>
+            <Section name={_('Trace Order')}>
+              <Radio
+                attr="legend.traceorder"
+                options={[
+                  {label: _('Normal'), value: 'normal'},
+                  {label: _('Reversed'), value: 'reversed'},
                 ]}
               />
             </Section>

src/PlotlyEditor.css

@@ -121,6 +121,10 @@
   padding: 0 12px;
 }
 
+.plotly-editor__field__no-title--center {
+  text-align: center;
+}
+
 .plotly-editor__field__title {
   padding-left: 0.5em;
   color: #69738a;
@@ -136,7 +140,7 @@
   padding-right: 12px;
 }
 
-.plotly-editor__field__widget--prefix {
+.plotly-editor__field__widget--postfix {
   width: 50%;
   padding-right: 0px;
 }

src/__tests__/connectLayoutToPlot-test.js

@@ -0,0 +1,71 @@
+import {Numeric} from '../components/fields';
+import {Fold, Panel, Section} from '../components/containers';
+import NumericInput from '../components/widgets/NumericInputStatefulWrapper';
+import React from 'react';
+import {EDITOR_ACTIONS} from '../constants';
+import {TestEditor, fixtures, plotly} from '../lib/test-utils';
+import {connectLayoutToPlot} from '../lib';
+import {mount} from 'enzyme';
+
+const Layouts = [Panel, Fold, Section].map(connectLayoutToPlot);
+const Editor = props => (
+  <TestEditor {...{plotly, onUpdate: jest.fn(), ...props}} />
+);
+
+Layouts.forEach(Layout => {
+  describe(`<${Layout.displayName}>`, () => {
+    it(`wraps container with fullValue pointing to gd._fullLayout`, () => {
+      const wrapper = mount(
+        <Editor {...fixtures.scatter({layout: {width: 100}})}>
+          <Layout>
+            <Numeric label="Width" step={10} attr="width" />
+          </Layout>
+        </Editor>
+      )
+        .find('[attr="width"]')
+        .find(NumericInput);
+
+      expect(wrapper.prop('value')).toBe(100);
+    });
+
+    it(`sends updates to gd._layout`, () => {
+      const onUpdate = jest.fn();
+      const wrapper = mount(
+        <Editor
+          onUpdate={onUpdate}
+          {...fixtures.scatter({layout: {width: 100}})}
+        >
+          <Layout>
+            <Numeric label="Width" step={10} attr="width" />
+          </Layout>
+        </Editor>
+      )
+        .find('[attr="width"]')
+        .find(NumericInput);
+
+      wrapper.prop('onChange')(200);
+      const event = onUpdate.mock.calls[0][0];
+      expect(event.type).toBe(EDITOR_ACTIONS.UPDATE_LAYOUT);
+      expect(event.payload).toEqual({update: {width: 200}});
+    });
+
+    it(`automatically computes min and max defaults`, () => {
+      const onUpdate = jest.fn();
+      const wrapper = mount(
+        <Editor
+          onUpdate={onUpdate}
+          {...fixtures.scatter({layout: {showlegend: true}})}
+        >
+          <Layout>
+            <Numeric label="Position x" step={0.01} attr="legend.x" />
+          </Layout>
+        </Editor>
+      )
+        .find('[attr="legend.x"]')
+        .find(NumericInput);
+
+      expect(wrapper.prop('min')).toBe(-2);
+      expect(wrapper.prop('max')).toBe(3);
+    });
+  });
+});

src/__tests__/connectTraceToPlot-test.js

@@ -0,0 +1,70 @@
+import {Numeric} from '../components/fields';
+import {Fold, Panel, Section} from '../components/containers';
+import NumericInput from '../components/widgets/NumericInputStatefulWrapper';
+import React from 'react';
+import {EDITOR_ACTIONS} from '../constants';
+import {TestEditor, fixtures, plotly} from '../lib/test-utils';
+import {connectTraceToPlot} from '../lib';
+import {mount} from 'enzyme';
+
+const Traces = [Panel, Fold, Section].map(connectTraceToPlot);
+const Editor = props => (
+  <TestEditor {...{plotly, onUpdate: jest.fn(), ...props}} />
+);
+
+const defaultMarkerSize = 6;
+
+Traces.forEach(Trace => {
+  describe(`<${Trace.displayName}>`, () => {
+    it('wraps container with fullValue pointing to gd._fullData[i]', () => {
+      const wrapper = mount(
+        <Editor {...fixtures.scatter({deref: true})}>
+          <Trace traceIndex={0}>
+            <Numeric label="Marker Size" attr="marker.size" />
+          </Trace>
+        </Editor>
+      )
+        .find('[attr="marker.size"]')
+        .find(NumericInput);
+
+      expect(wrapper.prop('value')).toBe(defaultMarkerSize);
+    });
+
+    it('sends updates to gd.data', () => {
+      const onUpdate = jest.fn();
+      const wrapper = mount(
+        <Editor onUpdate={onUpdate} {...fixtures.scatter({deref: true})}>
+          <Trace traceIndex={0}>
+            <Numeric label="Marker Size" attr="marker.size" />
+          </Trace>
+        </Editor>
+      )
+        .find('[attr="marker.size"]')
+        .find(NumericInput);
+
+      wrapper.prop('onChange')(200);
+      const event = onUpdate.mock.calls[0][0];
+      expect(event.type).toBe(EDITOR_ACTIONS.UPDATE_TRACES);
+      expect(event.payload).toEqual({
+        update: {'marker.size': 200},
+        traceIndexes: [0],
+      });
+    });
+
+    it('automatically computes min and max defaults', () => {
+      const onUpdate = jest.fn();
+      const wrapper = mount(
+        <Editor onUpdate={onUpdate} {...fixtures.scatter({deref: true})}>
+          <Trace traceIndex={0}>
+            <Numeric label="marker size" attr="marker.size" />
+          </Trace>
+        </Editor>
+      )
+        .find('[attr="marker.size"]')
+        .find(NumericInput);
+
+      expect(wrapper.prop('min')).toBe(0);
+      expect(wrapper.prop('max')).toBe(undefined);
+    });
+  });
+});

src/components/containers/Fold.js

@@ -8,11 +8,11 @@ export default class Fold extends Component {
     const {canDelete, name} = this.props;
     const doDelete = canDelete && typeof deleteContainer === 'function';
     return (
-      <div className={bem('accordion-panel', 'top', ['active'])}>
+      <div className={bem('fold', 'top', ['active'])}>
         {this.props.name}
         {doDelete ? (
           <a
-            className={bem('accordion-panel', 'delete')}
+            className={bem('fold', 'delete')}
             href="#"
             onClick={deleteContainer}
           >
@@ -28,9 +28,7 @@ export default class Fold extends Component {
     return (
       <div>
         {this.props.hideHeader ? null : this.renderHeader()}
-        <div className={bem('accordion-panel', 'panel', modifiers)}>
-          {this.props.children}
-        </div>
+        <div className={bem('fold', modifiers)}>{this.props.children}</div>
       </div>
     );
   }