Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 513bd6f

Browse files
various fixes for event addition/removal (#44)
1 parent 9e0674c commit 513bd6f

File tree

2 files changed

+24
-59
lines changed

2 files changed

+24
-59
lines changed

β€Žsrc/__tests__/react-plotly.test.js

Lines changed: 0 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -135,32 +135,6 @@ describe('<Plotly/>', () => {
135135
.catch(err => done.fail(err));
136136
});
137137

138-
test('clear event handlers on newPlot', done => {
139-
let wrapper;
140-
createPlot({
141-
fit: false,
142-
onClick: jest.fn(),
143-
onUpdate: once(() => {
144-
expect(
145-
wrapper.instance().clearLocalEventHandlers
146-
).toHaveBeenCalled();
147-
done();
148-
}),
149-
})
150-
.then(plot => {
151-
wrapper = plot;
152-
153-
// make sure real clearLocalEventHandlers does the job
154-
expect(Object.keys(wrapper.instance().handlers)).toEqual(['Click']);
155-
plot.instance().clearLocalEventHandlers();
156-
expect(Object.keys(wrapper.instance().handlers)).toEqual([]);
157-
158-
plot.instance().clearLocalEventHandlers = jest.fn();
159-
plot.setProps({layout: {title: 'test test'}});
160-
})
161-
.catch(err => done.fail(err));
162-
});
163-
164138
test('revision counter', done => {
165139
var callCnt = 0;
166140
createPlot({

β€Žsrc/factory.js

Lines changed: 24 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import React, {Component} from 'react';
22
import PropTypes from 'prop-types';
33
import isNumeric from 'fast-isnumeric';
44
import objectAssign from 'object-assign';
5-
// import throttle from "throttle-debounce/throttle";
65

76
// The naming convention is:
87
// - events are attached as `'plotly_' + eventName.toLowerCase()`
@@ -56,14 +55,13 @@ export default function plotComponentFactory(Plotly) {
5655

5756
this.p = Promise.resolve();
5857
this.fitHandler = null;
58+
this.resizeHandler = null;
5959
this.handlers = {};
6060

6161
this.syncWindowResize = this.syncWindowResize.bind(this);
6262
this.syncEventHandlers = this.syncEventHandlers.bind(this);
6363
this.attachUpdateEvents = this.attachUpdateEvents.bind(this);
6464
this.getRef = this.getRef.bind(this);
65-
66-
//this.handleUpdate = throttle(0, this.handleUpdate.bind(this));
6765
this.handleUpdate = this.handleUpdate.bind(this);
6866
}
6967

@@ -79,7 +77,7 @@ export default function plotComponentFactory(Plotly) {
7977
.then(() => {
8078
return Plotly.newPlot(this.el, {
8179
data: this.props.data,
82-
layout: this.sizeAdjustedLayout(this.props.layout),
80+
layout: this.resizedLayoutIfFit(this.props.layout),
8381
config: this.props.config,
8482
frames: this.props.frames,
8583
});
@@ -97,30 +95,30 @@ export default function plotComponentFactory(Plotly) {
9795
}
9896

9997
componentWillUpdate(nextProps) {
100-
let nextLayout = this.sizeAdjustedLayout(nextProps.layout);
101-
10298
this.p = this.p
10399
.then(() => {
104100
if (hasReactAPIMethod) {
105101
return Plotly.react(this.el, {
106102
data: nextProps.data,
107-
layout: nextLayout,
103+
layout: this.resizedLayoutIfFit(nextProps.layout),
108104
config: nextProps.config,
109105
frames: nextProps.frames,
110106
});
111107
} else {
112-
this.clearLocalEventHandlers();
108+
this.handlers={};
113109
return Plotly.newPlot(this.el, {
114110
data: nextProps.data,
115-
layout: nextLayout,
111+
layout: this.resizedLayoutIfFit(nextProps.layout),
116112
config: nextProps.config,
117113
frames: nextProps.frames,
118114
});
119115
}
120116
})
121117
.then(() => this.syncEventHandlers(nextProps))
122118
.then(() => this.syncWindowResize(nextProps))
123-
.then(this.attachUpdateEvents)
119+
.then(() => {
120+
if (!hasReactAPIMethod) this.attachUpdateEvents();
121+
})
124122
.then(() => this.handleUpdate(nextProps))
125123
.catch(err => {
126124
console.error('Error while plotting:', err);
@@ -147,25 +145,21 @@ export default function plotComponentFactory(Plotly) {
147145
}
148146

149147
attachUpdateEvents() {
148+
if (!this.el || !this.el.removeListener) return;
149+
150150
for (let i = 0; i < updateEvents.length; i++) {
151-
this.el.on(updateEvents[i], () => {
152-
this.handleUpdate();
153-
});
151+
this.el.on(updateEvents[i], this.handleUpdate);
154152
}
155153
}
156154

157155
removeUpdateEvents() {
158-
if (!this.el || !this.el.off) return;
156+
if (!this.el || !this.el.removeListener) return;
159157

160158
for (let i = 0; i < updateEvents.length; i++) {
161-
this.el.off(updateEvents[i], this.handleUpdate);
159+
this.el.removeListener(updateEvents[i], this.handleUpdate);
162160
}
163161
}
164162

165-
clearLocalEventHandlers() {
166-
this.handlers = [];
167-
}
168-
169163
handleUpdate(props) {
170164
props = props || this.props;
171165
if (props.onUpdate && typeof props.onUpdate === 'function') {
@@ -219,11 +213,14 @@ export default function plotComponentFactory(Plotly) {
219213
const hasHandler = !!this.handlers[eventName];
220214

221215
if (prop && !hasHandler) {
222-
let handler = (this.handlers[eventName] = props['on' + eventName]);
223-
this.el.on('plotly_' + eventName.toLowerCase(), handler);
216+
this.handlers[eventName] = prop;
217+
this.el.on(
218+
'plotly_' + eventName.toLowerCase(),
219+
this.handlers[eventName]
220+
);
224221
} else if (!prop && hasHandler) {
225222
// Needs to be removed:
226-
this.el.off(
223+
this.el.removeListener(
227224
'plotly_' + eventName.toLowerCase(),
228225
this.handlers[eventName]
229226
);
@@ -232,17 +229,11 @@ export default function plotComponentFactory(Plotly) {
232229
}
233230
}
234231

235-
sizeAdjustedLayout(layout) {
236-
if (this.props.fit) {
237-
layout = objectAssign({}, layout);
238-
objectAssign(layout, this.getSize(layout));
232+
resizedLayoutIfFit(layout) {
233+
if (!this.props.fit) {
234+
return layout;
239235
}
240-
241-
return layout;
242-
}
243-
244-
getParentSize() {
245-
return this.el.parentElement.getBoundingClientRect();
236+
return objectAssign({}, layout, this.getSize(layout));
246237
}
247238

248239
getSize(layout) {
@@ -254,7 +245,7 @@ export default function plotComponentFactory(Plotly) {
254245
const hasHeight = isNumeric(layoutHeight);
255246

256247
if (!hasWidth || !hasHeight) {
257-
rect = this.getParentSize();
248+
rect = this.el.parentElement.getBoundingClientRect();
258249
}
259250

260251
return {

0 commit comments

Comments
(0)

AltStyle γ«γ‚ˆγ£γ¦ε€‰ζ›γ•γ‚ŒγŸγƒšγƒΌγ‚Έ (->γ‚ͺγƒͺγ‚ΈγƒŠγƒ«) /