Shape and Image panels (#332)

Author: nicolaskruchten

README.md

@@ -32,7 +32,7 @@ This module's entry point is a React component called `<PlotlyEditor />` which c
 
 ## Connecting `<PlotlyEditor />` to `<Plot />`
 
-The binding between `<PlotlyEditor />` and `<Plot />` works a little differently that in most React apps because plotly.js mutates its properties. This is mapped onto React's one-way dataflow model via event handlers and shared revision numbers which trigger re-renders of mutated state. The following subset of the [simple example](https://github.com/plotly/react-plotly.js-editor/tree/master/examples/simple) shows how this works using a parent component to store state, but the principle is the same with a different state-manage approach, as shown in the [redux example](https://github.com/plotly/react-plotly.js-editor/tree/master/examples/simple):
+The binding between `<PlotlyEditor />` and `<Plot />` works a little differently that in most React apps because plotly.js mutates its properties. This is mapped onto React's one-way dataflow model via event handlers and shared revision numbers which trigger re-renders of mutated state. The following subset of the [simple example](https://github.com/plotly/react-plotly.js-editor/tree/master/examples/simple) shows how this works using a parent component to store state, but the principle is the same with a different state-manage approach, as shown in the [redux example](https://github.com/plotly/react-plotly.js-editor/tree/master/examples/redux):
 
 ```javascript
 import PlotlyEditor from 'react-plotly.js-editor';
@@ -86,10 +86,13 @@ class App extends Component {
 
 ## Development Setup
 
+This repo contains a [dev app](https://github.com/plotly/react-plotly.js-editor/tree/master/dev) that depends on the components locally and is configured for hot reloading, for easy local development. A `jest`-based test suite is also included.
+
 ```
 npm install
 npm start
-# start hacking
+# hacking happens here
+npm test
 ```
 
 ## Built-in Components
@@ -146,7 +149,9 @@ Simple component that takes in props and renders.
 * `<LayoutPanel />`: `<Panel />` whose children are connected to the `layout` figure key
 * `<TraceRequiredPanel />`: `<LayoutPanel />` renders `<PanelEmpty />` if no trace data is set
 * `<AnnotationAccordion />`: `<Panel />` whose children are replicated into `<Folds />` connected to annotations via `connectAnnotationToLayout()`. For use in a `<LayoutPanel />`.
-* `<AxesFold />`: `<Fold />` whose children are bound to axis-specific keys. For use in a `<LayoutPanel />` in concert with `<AxesSelector />` (see below).
+* `<ShapeAccordion />`: `<Panel />` whose children are replicated into `<Folds />` connected to shapes via `connectShapeToLayout()`. For use in a `<LayoutPanel />`.
+* `<ImageAccordion />`: `<Panel />` whose children are replicated into `<Folds />` connected to images via `connectImageToLayout()`. For use in a `<LayoutPanel />`.
+* `<AxesFold />`: `<Fold />` whose children are bound to axis-specific keys. For use in a `<LayoutPanel />`; and automatically contains an `<AxesSelector />` (see below).
 * `<TraceMarkerSection />`: `<Section />` with trace-specific name handling. For use in containers bound to traces e.g. as children of `<TraceAccordion />`.
 
 ### Special-Purpose Fields
@@ -159,6 +164,7 @@ For use in containers bound to traces e.g. as children of `<TraceAccordion />`:
 * `<LineShapeSelector />`: renders as a `<Dropdown />` useful for `data[].line.shape`
 * `<SymbolSelector />`: renders as a `<Dropdown />` useful for `data[].marker.symbol`
 * `<LayoutNumericFraction />` and `<LayoutNumericFractionInverse />`: renders as a `<Numeric />` for use in trace-connected containers where normal `<Numerics />` would be bound to the `data` key instead of the `layout` key in the figure e.g. `layout.bargap` or `layout.barwidth`.
+* `<PositioningRef />`: renders as a `<Dropdown />` useful for `layout.*.xref/yref` where the allowable values are `paper|[axis]`
 
 For use in containers bound to layout:
 
@@ -167,7 +173,7 @@ For use in containers bound to layout:
 
 For use in containers bound to axes:
 
-* `<AxesSelector />`: renders as a `<Radio />` to select one or all axes. Must be in a container bound to a figure via `connectAxesToPlot()` such as `<AxesFold />` and sets that container's context such that its children are bound to either all axes or just the selected one.
+* `<AxesSelector />`: renders as a `<Radio />` to select one or all axes. Must be in a container bound to a figure via `connectAxesToPlot()` and sets that container's context such that its children are bound to either all axes or just the selected one. `<AxesFold>`s automatically contain this component.
 * `<AxesRange />`: numeric with visibility coupled to `layout.*axis.autorange`
 
 For use in containers bound to annotations e.g. as children of `<AnnotationAccordion />`:
@@ -179,10 +185,12 @@ For use in containers bound to annotations e.g. as children of `<AnnotationAccor
 ### Connector functions
 
 * `connectToContainer( Component )`: returns a field component that can be bound to a figure value via the `attr` prop.
-* `connectTraceToPlot( Container )`: returns a wrapped container component that can be bound to a figure trace such that its children are bound to that trace's figure entry under the `data` key, e.g. `<TraceAccordion />` below.
+* `connectTraceToPlot( Container )`: returns a wrapped container component that can be bound to a figure trace such that its children are bound to that trace's figure entry under the `data` key, e.g. `<TraceAccordion />` above.
 * `connectLayoutToPlot( Container )`: returns a wrapped container component that can be bound to a figure such that its children are bound to that figure's layout under the `layout` key.
-* `connectAxesToLayout( Container )`: returns a wrapped container component that should contain an `<AxesSelector />` field (see below) and can be bound to a figure such that its children are bound to that figure's axes entries under the `layout.*axis` keys.
-* `connectAnnotationToLayout( Container )`: returns a wrapped container component that can be bound to a figure annotation such that its children are bound to that annotation's figure entry under the `layout.annotations` key, e.g. `<AnnotationAccordion />` below.
+* `connectAxesToLayout( Container )`: returns a wrapped container component that should contain an `<AxesSelector />` field (see above) and can be bound to a figure such that its children are bound to that figure's axes entries under the `layout.*axis` keys.
+* `connectAnnotationToLayout( Container )`: returns a wrapped container component that can be bound to a figure annotation such that its children are bound to that annotation's figure entry under the `layout.annotations` key, e.g. the `<Fold>`s in `<AnnotationAccordion />` above.
+* `connectShapeToLayout( Container )`: returns a wrapped container component that can be bound to a shape such that its children are bound to that shape's figure entry under the `layout.shapes` key, e.g. the `<Fold>`s in `<ShapeAccordion />` above.
+* `connectImagesToLayout( Container )`: returns a wrapped container component that can be bound to an image such that its children are bound to that image's figure entry under the `layout.image` key, e.g. the `<Fold>`s in `<ImageAccordion />` above.
 
 ## Mapbox Access Tokens
 

dev/App.js

@@ -86,7 +86,7 @@ class App extends Component {
           />
           <div className="app__main" style={{width: '100%', height: '100%'}}>
             <Plot
-              config={{mapboxAccessToken: ACCESS_TOKENS.MAPBOX}}
+              config={{mapboxAccessToken: ACCESS_TOKENS.MAPBOX, editable: true}}
               data={this.state.graphDiv.data}
               debug
               layout={this.state.graphDiv.layout}

examples/demo/src/App.js

@@ -73,6 +73,7 @@ class App extends Component {
       <div className="app__container plotly-editor--theme-provider">
         <div className="app">
           <PlotlyEditor
+            config={{editable: true}}
             graphDiv={this.state.graphDiv}
             onUpdate={this.handleEditorUpdate.bind(this)}
             revision={this.state.editorRevision}

examples/simple/src/App.js

@@ -53,6 +53,7 @@ class App extends Component {
           <Plot
             debug
             useResizeHandler
+            config={{editable: true}}
             data={this.state.graphDiv.data}
             layout={this.state.graphDiv.layout}
             onUpdate={this.handlePlotUpdate.bind(this)}

src/DefaultEditor.js

@@ -8,6 +8,8 @@ import {
   StyleAxesPanel,
   StyleLegendPanel,
   StyleNotesPanel,
+  StyleShapesPanel,
+  StyleImagesPanel,
   StyleTracesPanel,
   StyleColorbarsPanel,
 } from './default_panels';
@@ -21,6 +23,8 @@ const DefaultEditor = ({localize: _}) => (
     <StyleAxesPanel group={_('Style')} name={_('Axes')} />
     <StyleLegendPanel group={_('Style')} name={_('Legend')} />
     <StyleColorbarsPanel group={_('Style')} name={_('Color Bars')} />
+    <StyleShapesPanel group={_('Style')} name={_('Shapes')} />
+    <StyleImagesPanel group={_('Style')} name={_('Images')} />
   </PanelMenuWrapper>
 );
 

src/PlotlyEditor.js

@@ -145,6 +145,36 @@ class PlotlyEditor extends Component {
         }
         break;
 
+      case EDITOR_ACTIONS.DELETE_SHAPE:
+        if (isNumeric(payload.shapeIndex)) {
+          if (this.props.beforeDeleteShape) {
+            this.props.beforeDeleteShape(payload);
+          }
+          graphDiv.layout.shapes.splice(payload.shapeIndex, 1);
+          if (this.props.afterDeleteShape) {
+            this.props.afterDeleteShape(payload);
+          }
+          if (this.props.onUpdate) {
+            this.props.onUpdate();
+          }
+        }
+        break;
+
+      case EDITOR_ACTIONS.DELETE_IMAGE:
+        if (isNumeric(payload.imageIndex)) {
+          if (this.props.beforeDeleteImage) {
+            this.props.beforeDeleteImage(payload);
+          }
+          graphDiv.layout.images.splice(payload.imageIndex, 1);
+          if (this.props.afterDeleteImage) {
+            this.props.afterDeleteImage(payload);
+          }
+          if (this.props.onUpdate) {
+            this.props.onUpdate();
+          }
+        }
+        break;
+
       default:
         throw new Error('must specify an action type to handleEditorUpdate');
     }
@@ -170,11 +200,15 @@ class PlotlyEditor extends Component {
 PlotlyEditor.propTypes = {
   afterAddTrace: PropTypes.func,
   afterDeleteAnnotation: PropTypes.func,
+  afterDeleteShape: PropTypes.func,
+  afterDeleteImage: PropTypes.func,
   afterDeleteTrace: PropTypes.func,
   afterUpdateLayout: PropTypes.func,
   afterUpdateTraces: PropTypes.func,
   beforeAddTrace: PropTypes.func,
   beforeDeleteAnnotation: PropTypes.func,
+  beforeDeleteShape: PropTypes.func,
+  beforeDeleteImage: PropTypes.func,
   beforeDeleteTrace: PropTypes.func,
   beforeUpdateLayout: PropTypes.func,
   beforeUpdateTraces: PropTypes.func,

src/components/containers/AnnotationAccordion.js

@@ -35,7 +35,7 @@ class AnnotationAccordion extends Component {
         }
 
         const key = `annotations[${annotationIndex}]`;
-        const value = {text: 'new text'};
+        const value = {text: _('new text')};
 
         if (updateContainer) {
           updateContainer({[key]: value});

src/components/containers/ImageAccordion.js

@@ -0,0 +1,65 @@
+import Fold from './Fold';
+import TraceRequiredPanel from './TraceRequiredPanel';
+import PropTypes from 'prop-types';
+import React, {Component} from 'react';
+import {connectImageToLayout, localize} from 'lib';
+
+const ImageFold = connectImageToLayout(Fold);
+
+class ImageAccordion extends Component {
+  render() {
+    const {layout: {images = []}} = this.context;
+    const {canAdd, children, localize: _} = this.props;
+
+    const content =
+      images.length &&
+      images.map((ann, i) => (
+        <ImageFold key={i} imageIndex={i} name={ann.text} canDelete={canAdd}>
+          {children}
+        </ImageFold>
+      ));
+
+    const addAction = {
+      label: _('Image'),
+      handler: ({layout, updateContainer}) => {
+        let imageIndex;
+        if (Array.isArray(layout.images)) {
+          imageIndex = layout.images.length;
+        } else {
+          imageIndex = 0;
+        }
+
+        const key = `images[${imageIndex}]`;
+        const value = {
+          text: `${_('Image')} ${imageIndex}`,
+          sizex: 0.1,
+          sizey: 0.1,
+          x: 0.5,
+          y: 0.5,
+        };
+
+        if (updateContainer) {
+          updateContainer({[key]: value});
+        }
+      },
+    };
+
+    return (
+      <TraceRequiredPanel addAction={canAdd ? addAction : null}>
+        {content ? content : null}
+      </TraceRequiredPanel>
+    );
+  }
+}
+
+ImageAccordion.contextTypes = {
+  layout: PropTypes.object,
+};
+
+ImageAccordion.propTypes = {
+  children: PropTypes.node,
+  canAdd: PropTypes.bool,
+  localize: PropTypes.func,
+};
+
+export default localize(ImageAccordion);

src/components/containers/ShapeAccordion.js

@@ -0,0 +1,64 @@
+import Fold from './Fold';
+import TraceRequiredPanel from './TraceRequiredPanel';
+import PropTypes from 'prop-types';
+import React, {Component} from 'react';
+import {connectShapeToLayout, localize} from 'lib';
+
+const ShapeFold = connectShapeToLayout(Fold);
+
+class ShapeAccordion extends Component {
+  render() {
+    const {layout: {shapes = []}} = this.context;
+    const {canAdd, children, localize: _} = this.props;
+
+    const content =
+      shapes.length &&
+      shapes.map((ann, i) => (
+        <ShapeFold key={i} shapeIndex={i} name={ann.text} canDelete={canAdd}>
+          {children}
+        </ShapeFold>
+      ));
+
+    const addAction = {
+      label: _('Shape'),
+      handler: ({layout, updateContainer}) => {
+        let shapeIndex;
+        if (Array.isArray(layout.shapes)) {
+          shapeIndex = layout.shapes.length;
+        } else {
+          shapeIndex = 0;
+        }
+
+        const key = `shapes[${shapeIndex}]`;
+        const value = {
+          text: `${_('Shape')} ${shapeIndex}`,
+          line: {color: '#444444'},
+          fillcolor: '#7F7F7F',
+          opacity: 0.3,
+        };
+
+        if (updateContainer) {
+          updateContainer({[key]: value});
+        }
+      },
+    };
+
+    return (
+      <TraceRequiredPanel addAction={canAdd ? addAction : null}>
+        {content ? content : null}
+      </TraceRequiredPanel>
+    );
+  }
+}
+
+ShapeAccordion.contextTypes = {
+  layout: PropTypes.object,
+};
+
+ShapeAccordion.propTypes = {
+  children: PropTypes.node,
+  canAdd: PropTypes.bool,
+  localize: PropTypes.func,
+};
+
+export default localize(ShapeAccordion);

src/components/containers/index.js

@@ -1,4 +1,6 @@
 import AnnotationAccordion from './AnnotationAccordion';
+import ShapeAccordion from './ShapeAccordion';
+import ImageAccordion from './ImageAccordion';
 import AxesFold from './AxesFold';
 import Fold from './Fold';
 import MenuPanel from './MenuPanel';
@@ -12,6 +14,8 @@ import SingleSidebarItem from './SingleSidebarItem';
 
 export {
   AnnotationAccordion,
+  ShapeAccordion,
+  ImageAccordion,
   MenuPanel,
   Fold,
   Panel,