Symbol selector

src/DefaultEditor.js

@@ -143,24 +143,17 @@ class DefaultEditor extends Component {
             </Section>
 
             <Section name={_('Points')}>
-              <Numeric
-                label={_('Marker Opacity')}
-                step={0.1}
-                attr="marker.opacity"
-              />
-
-              <ColorPicker label={_('Marker Color')} attr="marker.color" />
-
+              <ColorPicker label={_('Color')} attr="marker.color" />
+              <Numeric label={_('Opacity')} step={0.1} attr="marker.opacity" />
               <Numeric label={_('Size')} attr="marker.size" />
-
-              <Numeric label={_('Line width')} attr="marker.line.width" />
+              <SymbolSelector label={_('Symbol')} attr="marker.symbol" />
+              <Numeric label={_('Border Width')} attr="marker.line.width" />
+              <ColorPicker label={_('Border Color')} attr="marker.line.color" />
             </Section>
 
             <Section name={_('Lines')}>
               <Numeric label={_('Width')} step={1.0} attr="line.width" />
-
-              <ColorPicker label={_('Line color')} attr="line.color" />
-
+              <ColorPicker label={_('Line Color')} attr="line.color" />
               <Radio
                 label={_('Connect Gaps')}
                 attr="connectgaps"

src/components/fields/SymbolSelector.js

@@ -0,0 +1,58 @@
+import Field from './Field';
+import PropTypes from 'prop-types';
+import React, {Component} from 'react';
+import SymbolSelectorWidget from '../widgets/SymbolSelector';
+import nestedProperty from 'plotly.js/src/lib/nested_property';
+import {SYMBOLS} from '../../lib/constants';
+import {connectToContainer} from '../../lib';
+
+class SymbolSelector extends Component {
+  render() {
+    const {fullContainer, fullValue, updatePlot} = this.props;
+
+    const markerColor = nestedProperty(fullContainer, 'marker.color').get();
+    const borderWidth = nestedProperty(
+      fullContainer,
+      'marker.line.width'
+    ).get();
+
+    let borderColor = markerColor;
+    if (borderWidth) {
+      borderColor = nestedProperty(fullContainer, 'marker.line.color').get();
+    }
+
+    let symbolOptions;
+    if (this.props.is3D) {
+      symbolOptions = SYMBOLS.filter(option => {
+        return option.threeD;
+      });
+    } else {
+      symbolOptions = [...SYMBOLS];
+    }
+
+    return (
+      <Field {...this.props}>
+        <SymbolSelectorWidget
+          markerColor={markerColor}
+          borderColor={borderColor}
+          value={fullValue()}
+          onChange={updatePlot}
+          symbolOptions={symbolOptions}
+        />
+      </Field>
+    );
+  }
+}
+
+SymbolSelector.propTypes = {
+  defaultValue: PropTypes.number,
+  fullValue: PropTypes.func,
+  updatePlot: PropTypes.func,
+  ...Field.propTypes,
+};
+
+SymbolSelector.defaultProps = {
+  showArrows: true,
+};
+
+export default connectToContainer(SymbolSelector);

src/components/fields/index.js

@@ -7,6 +7,7 @@ import Info from './Info';
 import Radio from './Radio';
 import DataSelector from './DataSelector';
 import Numeric from './Numeric';
+import SymbolSelector from './SymbolSelector';
 import TraceSelector from './TraceSelector';
 
 export {
@@ -19,5 +20,6 @@ export {
   Radio,
   DataSelector,
   Numeric,
+  SymbolSelector,
   TraceSelector,
 };

src/components/index.js

@@ -8,6 +8,7 @@ import {
   Radio,
   DataSelector,
   Numeric,
+  SymbolSelector,
   TraceSelector,
 } from './fields';
 
@@ -29,6 +30,7 @@ export {
   PanelMenuWrapper,
   Radio,
   Section,
+  SymbolSelector,
   TraceAccordion,
   TraceSelector,
 };

src/components/widgets/SymbolSelector.js

@@ -0,0 +1,143 @@
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import tinyColor from 'tinycolor2';
+import ModalBox from '../containers/ModalBox';
+
+const tooLightFactor = 0.8;
+
+function tooLight(color) {
+  const hslColor = tinyColor(color).toHsl();
+  return hslColor.l > tooLightFactor;
+}
+
+export default class SymbolSelector extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isOpen: false,
+    };
+    this.togglePanel = this.togglePanel.bind(this);
+  }
+
+  shouldComponentUpdate(nextProps, nextState) {
+    const {markerColor, borderColor} = this.props;
+    const {
+      markerColor: nextMarkerColor,
+      borderColor: nextBorderColor,
+    } = nextProps;
+
+    return (
+      this.props.value !== nextProps.value ||
+      this.state.isOpen !== nextState.isOpen ||
+      markerColor !== nextMarkerColor ||
+      borderColor !== nextBorderColor
+    );
+  }
+
+  togglePanel() {
+    this.setState({isOpen: !this.state.isOpen});
+  }
+
+  renderActiveOption() {
+    const {markerColor, borderColor, symbolOptions, value} = this.props;
+    const currentSymbol = symbolOptions.find(symbol => symbol.value === value);
+    if (!currentSymbol) {
+      return (
+        <span
+          style={{
+            paddingTop: '5px',
+            paddingLeft: '15px',
+          }}
+        >
+          {'-'}
+        </span>
+      );
+    }
+
+    const symbolStyle = {
+      stroke: currentSymbol.fill === 'none' ? markerColor : borderColor,
+      strokeOpacity: '1',
+      strokeWidth: '2px',
+      fill: currentSymbol.fill === 'none' ? 'none' : markerColor,
+    };
+
+    return (
+      <span>
+        <svg width="18" height="18">
+          <g transform="translate(8,8)">
+            <path d={currentSymbol.label} style={symbolStyle} />
+          </g>
+        </svg>
+      </span>
+    );
+  }
+
+  renderOptions() {
+    const {markerColor, borderColor, symbolOptions} = this.props;
+    return symbolOptions.map(option => {
+      const {fill, value, label} = option;
+
+      const symbolStyle = {
+        stroke: fill === 'none' ? markerColor : borderColor,
+        strokeOpacity: '1',
+        strokeWidth: '2px',
+        fill: fill === 'none' ? 'none' : markerColor,
+      };
+      return (
+        <div
+          className="symbol-selector__item"
+          key={value}
+          onClick={this.props.onChange}
+        >
+          <svg
+            width="28"
+            height="28"
+            className="symbol-selector__symbol"
+            data-value={value}
+          >
+            <g transform="translate(14,14)">
+              <path d={label} style={symbolStyle} />
+            </g>
+          </svg>
+        </div>
+      );
+    });
+  }
+
+  render() {
+    const {isOpen} = this.state;
+    const {markerColor} = this.props;
+
+    // TODO link these colors into theme
+    const backgroundColor = tooLight(markerColor) ? '#bec8d9' : 'white';
+
+    return (
+      <div>
+        <div className="symbol-selector__toggle" onClick={this.togglePanel}>
+          <span className="symbol-selector__toggle_option">
+            {this.renderActiveOption()}
+          </span>
+          <span className="symbol-selector__toggle__caret">
+            <i className="icon-caret-down" />
+          </span>
+        </div>
+        {isOpen ? (
+          <ModalBox
+            onClose={this.togglePanel}
+            backgroundColor={backgroundColor}
+          >
+            {this.renderOptions()}
+          </ModalBox>
+        ) : null}
+      </div>
+    );
+  }
+}
+
+SymbolSelector.propTypes = {
+  markerColor: PropTypes.string,
+  borderColor: PropTypes.string,
+  value: PropTypes.string,
+  onChange: PropTypes.func,
+  symbolOptions: PropTypes.array,
+};

src/index.js

@@ -25,6 +25,7 @@ import {
   Radio,
   Section,
   MenuPanel,
+  SymbolSelector,
   TraceAccordion,
   TraceSelector,
 } from './components';
@@ -47,6 +48,7 @@ export {
   PanelMenuWrapper,
   Radio,
   Section,
+  SymbolSelector,
   TraceAccordion,
   TraceSelector,
   connectAxesToLayout,