Skip to content

Commit 84a2f7f

Browse files
nicolaskruchtennicolaskruchten
committed
renaming reshuffle
1 parent f64f93d commit 84a2f7f

File tree

5 files changed

+333
-333
lines changed

5 files changed

+333
-333
lines changed

‎dev/App.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import {hot} from 'react-hot-loader';
33
import plotly from 'plotly.js/dist/plotly';
44
import '../src/styles/main.scss';
55
import Nav from './Nav';
6-
import {PlotlyEditorWithPlot} from '../src';
6+
import PlotlyEditor from '../src';
77

88
// https://github.com/plotly/react-chart-editor#mapbox-access-tokens
99
import ACCESS_TOKENS from '../accessTokens';
@@ -63,7 +63,7 @@ class App extends Component {
6363
render() {
6464
return (
6565
<div className="app__container plotly-editor--theme-provider">
66-
<PlotlyEditorWithPlot
66+
<PlotlyEditor
6767
data={this.state.data}
6868
layout={this.state.layout}
6969
config={config}

‎src/EditorControls.js

Lines changed: 292 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,292 @@
1+
import DefaultEditor from './DefaultEditor';
2+
import PropTypes from 'prop-types';
3+
import React, {Component} from 'react';
4+
import {bem} from './lib';
5+
import {maybeClearAxisTypes} from './shame';
6+
import {EDITOR_ACTIONS} from './lib/constants';
7+
import isNumeric from 'fast-isnumeric';
8+
import nestedProperty from 'plotly.js/src/lib/nested_property';
9+
import {categoryLayout, traceTypes} from 'lib/traceTypes';
10+
import {ModalProvider} from 'components/containers';
11+
12+
class EditorControls extends Component {
13+
constructor(props, context) {
14+
super(props, context);
15+
16+
// we only need to compute this once.
17+
if (this.props.plotly) {
18+
this.plotSchema = this.props.plotly.PlotSchema.get();
19+
}
20+
}
21+
22+
getChildContext() {
23+
const gd = this.props.graphDiv || {};
24+
return {
25+
advancedTraceTypeSelector: this.props.advancedTraceTypeSelector,
26+
config: gd._context,
27+
data: gd.data,
28+
dataSources: this.props.dataSources,
29+
dataSourceOptions: this.props.dataSourceOptions,
30+
dataSourceValueRenderer: this.props.dataSourceValueRenderer,
31+
dataSourceOptionRenderer: this.props.dataSourceOptionRenderer,
32+
dictionaries: this.props.dictionaries || {},
33+
fullData: gd._fullData,
34+
fullLayout: gd._fullLayout,
35+
graphDiv: gd,
36+
layout: gd.layout,
37+
locale: this.props.locale,
38+
onUpdate: this.handleUpdate.bind(this),
39+
plotSchema: this.plotSchema,
40+
plotly: this.props.plotly,
41+
traceTypesConfig: this.props.traceTypesConfig,
42+
};
43+
}
44+
45+
maybeAdjustAxisRef(payload) {
46+
const {graphDiv} = this.props;
47+
if (payload.tracesNeedingAxisAdjustment) {
48+
payload.tracesNeedingAxisAdjustment.forEach(trace => {
49+
const axis = trace[payload.axisAttrToAdjust].charAt(0);
50+
const currentAxisIdNumber = Number(
51+
trace[payload.axisAttrToAdjust].slice(1)
52+
);
53+
const adjustedAxisIdNumber = currentAxisIdNumber - 1;
54+
55+
const currentAxisLayoutProperties = {
56+
...graphDiv.layout[payload.axisAttrToAdjust + currentAxisIdNumber],
57+
};
58+
59+
// for cases when we're adjusting x2 => x, so that it becomes x not x1
60+
graphDiv.data[trace.index][payload.axisAttrToAdjust] =
61+
adjustedAxisIdNumber === 1 ? axis : axis + adjustedAxisIdNumber;
62+
63+
graphDiv.layout[
64+
payload.axisAttrToAdjust + adjustedAxisIdNumber
65+
] = currentAxisLayoutProperties;
66+
});
67+
}
68+
}
69+
70+
handleUpdate({type, payload}) {
71+
const {graphDiv} = this.props;
72+
73+
switch (type) {
74+
case EDITOR_ACTIONS.UPDATE_TRACES:
75+
if (this.props.beforeUpdateTraces) {
76+
this.props.beforeUpdateTraces(payload);
77+
}
78+
79+
// until we start utilizing Plotly.react in `react-plotly.js`
80+
// force clear axes types when a `src` has changed.
81+
maybeClearAxisTypes(graphDiv, payload.traceIndexes, payload.update);
82+
83+
this.maybeAdjustAxisRef(payload);
84+
85+
for (let i = 0; i < payload.traceIndexes.length; i++) {
86+
for (const attr in payload.update) {
87+
const traceIndex = payload.traceIndexes[i];
88+
const prop = nestedProperty(graphDiv.data[traceIndex], attr);
89+
const value = payload.update[attr];
90+
91+
if (value !== void 0) {
92+
prop.set(value);
93+
}
94+
}
95+
}
96+
97+
if (this.props.afterUpdateTraces) {
98+
this.props.afterUpdateTraces(payload);
99+
}
100+
if (this.props.onUpdate) {
101+
this.props.onUpdate(graphDiv.data.slice(), graphDiv.layout);
102+
}
103+
break;
104+
105+
case EDITOR_ACTIONS.UPDATE_LAYOUT:
106+
if (this.props.beforeUpdateLayout) {
107+
this.props.beforeUpdateLayout(payload);
108+
}
109+
for (const attr in payload.update) {
110+
const prop = nestedProperty(graphDiv.layout, attr);
111+
const value = payload.update[attr];
112+
if (value !== void 0) {
113+
prop.set(value);
114+
}
115+
}
116+
if (this.props.afterUpdateLayout) {
117+
this.props.afterUpdateLayout(payload);
118+
}
119+
if (this.props.onUpdate) {
120+
this.props.onUpdate(
121+
graphDiv.data,
122+
Object.assign({}, graphDiv.layout)
123+
);
124+
}
125+
break;
126+
127+
case EDITOR_ACTIONS.ADD_TRACE:
128+
if (this.props.beforeAddTrace) {
129+
this.props.beforeAddTrace(payload);
130+
}
131+
graphDiv.data.push({type: 'scatter', mode: 'markers'});
132+
if (this.props.afterAddTrace) {
133+
this.props.afterAddTrace(payload);
134+
}
135+
if (this.props.onUpdate) {
136+
this.props.onUpdate(graphDiv.data.slice(), graphDiv.layout);
137+
}
138+
break;
139+
140+
case EDITOR_ACTIONS.DELETE_TRACE:
141+
if (payload.traceIndexes && payload.traceIndexes.length) {
142+
if (this.props.beforeDeleteTrace) {
143+
this.props.beforeDeleteTrace(payload);
144+
}
145+
graphDiv.data.splice(payload.traceIndexes[0], 1);
146+
if (this.props.afterDeleteTrace) {
147+
this.props.afterDeleteTrace(payload);
148+
}
149+
if (this.props.onUpdate) {
150+
this.props.onUpdate(graphDiv.data.slice(), graphDiv.layout);
151+
}
152+
}
153+
break;
154+
155+
case EDITOR_ACTIONS.DELETE_ANNOTATION:
156+
if (isNumeric(payload.annotationIndex)) {
157+
if (this.props.beforeDeleteAnnotation) {
158+
this.props.beforeDeleteAnnotation(payload);
159+
}
160+
graphDiv.layout.annotations.splice(payload.annotationIndex, 1);
161+
if (this.props.afterDeleteAnnotation) {
162+
this.props.afterDeleteAnnotation(payload);
163+
}
164+
if (this.props.onUpdate) {
165+
this.props.onUpdate(
166+
graphDiv.data,
167+
Object.assign({}, graphDiv.layout)
168+
);
169+
}
170+
}
171+
break;
172+
173+
case EDITOR_ACTIONS.DELETE_SHAPE:
174+
if (isNumeric(payload.shapeIndex)) {
175+
if (this.props.beforeDeleteShape) {
176+
this.props.beforeDeleteShape(payload);
177+
}
178+
graphDiv.layout.shapes.splice(payload.shapeIndex, 1);
179+
if (this.props.afterDeleteShape) {
180+
this.props.afterDeleteShape(payload);
181+
}
182+
if (this.props.onUpdate) {
183+
this.props.onUpdate(
184+
graphDiv.data,
185+
Object.assign({}, graphDiv.layout)
186+
);
187+
}
188+
}
189+
break;
190+
191+
case EDITOR_ACTIONS.DELETE_IMAGE:
192+
if (isNumeric(payload.imageIndex)) {
193+
if (this.props.beforeDeleteImage) {
194+
this.props.beforeDeleteImage(payload);
195+
}
196+
graphDiv.layout.images.splice(payload.imageIndex, 1);
197+
if (this.props.afterDeleteImage) {
198+
this.props.afterDeleteImage(payload);
199+
}
200+
if (this.props.onUpdate) {
201+
this.props.onUpdate(
202+
graphDiv.data,
203+
Object.assign({}, graphDiv.layout)
204+
);
205+
}
206+
}
207+
break;
208+
209+
default:
210+
throw new Error('must specify an action type to handleEditorUpdate');
211+
}
212+
}
213+
214+
render() {
215+
return (
216+
<div
217+
className={
218+
bem('plotly-editor') +
219+
' plotly-editor--theme-provider' +
220+
`${this.props.className ? ` ${this.props.className}` : ''}`
221+
}
222+
>
223+
<ModalProvider>
224+
{this.props.graphDiv &&
225+
this.props.graphDiv._fullLayout &&
226+
(this.props.children ? this.props.children : <DefaultEditor />)}
227+
</ModalProvider>
228+
</div>
229+
);
230+
}
231+
}
232+
233+
EditorControls.propTypes = {
234+
advancedTraceTypeSelector: PropTypes.bool,
235+
afterAddTrace: PropTypes.func,
236+
afterDeleteAnnotation: PropTypes.func,
237+
afterDeleteShape: PropTypes.func,
238+
afterDeleteImage: PropTypes.func,
239+
afterDeleteTrace: PropTypes.func,
240+
afterUpdateLayout: PropTypes.func,
241+
afterUpdateTraces: PropTypes.func,
242+
beforeAddTrace: PropTypes.func,
243+
beforeDeleteAnnotation: PropTypes.func,
244+
beforeDeleteShape: PropTypes.func,
245+
beforeDeleteImage: PropTypes.func,
246+
beforeDeleteTrace: PropTypes.func,
247+
beforeUpdateLayout: PropTypes.func,
248+
beforeUpdateTraces: PropTypes.func,
249+
children: PropTypes.node,
250+
className: PropTypes.string,
251+
dataSourceOptionRenderer: PropTypes.func,
252+
dataSourceOptions: PropTypes.array,
253+
dataSources: PropTypes.object,
254+
dataSourceValueRenderer: PropTypes.func,
255+
dictionaries: PropTypes.object,
256+
graphDiv: PropTypes.object,
257+
locale: PropTypes.string,
258+
onUpdate: PropTypes.func,
259+
plotly: PropTypes.object,
260+
traceTypesConfig: PropTypes.object,
261+
};
262+
263+
EditorControls.defaultProps = {
264+
locale: 'en',
265+
traceTypesConfig: {
266+
categories: _ => categoryLayout(_),
267+
traces: _ => traceTypes(_),
268+
complex: true,
269+
},
270+
};
271+
272+
EditorControls.childContextTypes = {
273+
advancedTraceTypeSelector: PropTypes.bool,
274+
config: PropTypes.object,
275+
data: PropTypes.array,
276+
dataSourceOptionRenderer: PropTypes.func,
277+
dataSourceOptions: PropTypes.array,
278+
dataSources: PropTypes.object,
279+
dataSourceValueRenderer: PropTypes.func,
280+
dictionaries: PropTypes.object,
281+
fullData: PropTypes.array,
282+
fullLayout: PropTypes.object,
283+
graphDiv: PropTypes.any,
284+
layout: PropTypes.object,
285+
locale: PropTypes.string,
286+
onUpdate: PropTypes.func,
287+
plotly: PropTypes.object,
288+
plotSchema: PropTypes.object,
289+
traceTypesConfig: PropTypes.object,
290+
};
291+
292+
export default EditorControls;

0 commit comments

Comments
 (0)