Skip to content

Commit e4edb02

Browse files
KeithWoodsKeithWoods
committed
code cleanup
added ability to close devtools
1 parent 9b99c31 commit e4edb02

12 files changed

Lines changed: 111 additions & 63 deletions

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "esp-js-devtools",
3-
"version": "0.0.6",
3+
"version": "0.0.7",
44
"description": "Evented State Processor (ESP) dev tools",
55
"main": "dist/esp-js-devtools.js",
66
"scripts": {
@@ -13,7 +13,7 @@
1313
"repository": "https://github.com/esp/esp-js",
1414
"dependencies": {
1515
"babel-plugin-transform-runtime": "^6.4.3",
16-
"esp-js": "^0.5.13",
16+
"esp-js": "^0.5.14",
1717
"install": "^0.4.2",
1818
"jquery": "^2.2.0",
1919
"jquery-ui": "^1.10.5",

‎src/devtoolsHooks.js‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import esp from 'esp-js';
2+
import AnalyticsMonitor from './model/analyticsMonitor';
3+
import DevToolsModel from './model/devToolsModel';
4+
import DevToolsView from './views/devToolsView';
5+
6+
class Controller {
7+
constructor() {
8+
this._model = null;
9+
this._view = null;
10+
this._router = null;
11+
}
12+
start() {
13+
this._router = new esp.Router();
14+
let modelRouter = this._router.createModelRouter(DevToolsModel.modelId);
15+
this._model = new DevToolsModel(modelRouter);
16+
this._router.addModel(DevToolsModel.modelId, this._model);
17+
this._view = new DevToolsView(modelRouter);
18+
window.__espAnalyticsMonitor = new AnalyticsMonitor(modelRouter);
19+
this._view.start();
20+
this._model.observeEvents();
21+
this._router.publishEvent(DevToolsModel.modelId, 'initEvent', {});
22+
}
23+
dispose() {
24+
window.__espAnalyticsMonitor = null;
25+
this._router.dispose();
26+
this._model.dispose();
27+
this._view.dispose();
28+
}
29+
}
30+
31+
let isRegistered = false;
32+
let controller;
33+
34+
export function registerDevTools() {
35+
if (isRegistered) {
36+
return;
37+
}
38+
if (typeof window === 'undefined') {
39+
throw new Error('window is undefined. esp-devtools needs window to add a hook to window for all routers to interact with');
40+
}
41+
isRegistered = true;
42+
controller = new Controller();
43+
controller.start();
44+
}
45+
46+
export function unregisterDevTools() {
47+
controller.dispose();
48+
controller = null;
49+
isRegistered = false;
50+
}

‎src/index.js‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
1-
//import 'script!jquery';
2-
//import 'script!jquery-ui/draggable';
3-
4-
import { default as registerDevTools } from './registerDevTools';
5-
1+
import { registerDevTools, unregisterDevTools } from './devtoolsHooks';
62
export { registerDevTools };
3+
export { unregisterDevTools };
74
export default {
8-
registerDevTools
5+
registerDevTools,
6+
unregisterDevTools
97
}

src/analyticsMonitor.js renamed to src/model/analyticsMonitor.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import DebugToolsModel from './debugToolsModel';
1+
import DebugToolsModel from './devToolsModel';
22

33
export default class AnalyticsMonitor {
44
constructor(router) {

src/debugToolsModel.js renamed to src/model/devToolsModel.js

Lines changed: 22 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,9 @@ import _ from 'lodash';
33
import moment from 'moment';
44
import UpdateType from './updateType';
55
import RegisteredModel from './registeredModel';
6+
import { unregisterDevTools } from '../devtoolsHooks';
67

7-
export default class DebugToolsModel extends esp.model.DisposableBase {
8+
export default class DevToolsModel extends esp.model.DisposableBase {
89
constructor(router) {
910
super();
1011
this._router = router;
@@ -15,18 +16,13 @@ export default class DebugToolsModel extends esp.model.DisposableBase {
1516
this._updateType = UpdateType.none;
1617
this._eventCounter = 0;
1718
this._timerSubscription = null;
18-
this.addDisposable(() => {
19-
if(this._timerSubscription != null) {
20-
clearInterval(this._timerSubscription);
21-
}
22-
});
2319
this._now = moment();
2420
this._shouldAutoScroll = true;
2521
this._shouldCaptureEvents = true;
2622
this._shouldLogToConsole = false;
2723
}
2824
static get modelId() {
29-
return 'esp-debugTools-modelId';
25+
return 'esp-debugTools';
3026
}
3127
get updateType() {
3228
return this._updateType;
@@ -60,7 +56,7 @@ export default class DebugToolsModel extends esp.model.DisposableBase {
6056
@esp.observeEvent('modelRemoved', esp.ObservationStage.preview)
6157
@esp.observeEvent('eventPublished', esp.ObservationStage.preview)
6258
_previewEvents(event, context) {
63-
if(!this._shouldCaptureEvents) {
59+
if(!this._shouldCaptureEvents || this.isDisposed) {
6460
context.cancel();
6561
}
6662
}
@@ -125,8 +121,15 @@ export default class DebugToolsModel extends esp.model.DisposableBase {
125121
}
126122
@esp.observeEvent('resetChart')
127123
_onResetChart() {
128-
this._updateType = UpdateType.reset;
129-
this._registeredModels = {};
124+
this._reset();
125+
}
126+
@esp.observeEvent('close')
127+
_onClose() {
128+
unregisterDevTools();
129+
}
130+
dispose() {
131+
super.dispose();
132+
this._stopTimer();
130133
}
131134
_startTimer() {
132135
// start a timer so we can keep moving the chart forward
@@ -137,4 +140,13 @@ export default class DebugToolsModel extends esp.model.DisposableBase {
137140
});
138141
}, 1000);
139142
}
143+
_reset() {
144+
this._updateType = UpdateType.reset;
145+
this._registeredModels = {};
146+
}
147+
_stopTimer() {
148+
if(this._timerSubscription != null) {
149+
clearInterval(this._timerSubscription);
150+
}
151+
}
140152
}

src/eventRecord.js renamed to src/model/eventRecord.js

File renamed without changes.

src/registeredModel.js renamed to src/model/registeredModel.js

File renamed without changes.

src/updateType.js renamed to src/model/updateType.js

File renamed without changes.

‎src/registerDevTools.js‎

Lines changed: 0 additions & 25 deletions
This file was deleted.

src/devToolsView.js renamed to src/views/devToolsView.js

Lines changed: 25 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
1-
import './devToolsView.less'
2-
31
import $ from 'jquery';
42
import "jquery-ui/draggable";
5-
63
import esp from 'esp-js';
74
import _ from 'lodash';
85
import moment from 'moment';
96
import vis from 'vis';
107
import 'vis/dist/vis.css';
11-
import UpdateType from './updateType';
8+
import './devToolsView.less'
9+
import UpdateType from '../model/updateType';
1210
import template from './devToolsView.template.html';
1311

1412
export default class DevToolsView extends esp.model.DisposableBase {
@@ -23,6 +21,7 @@ export default class DevToolsView extends esp.model.DisposableBase {
2321
this._captureEventsCheckbox = null;
2422
this._logEventsConsoleCheckbox = null;
2523
this._resetChartButton = null;
24+
this._closeButton = null;
2625
this._eventDetailsDescriptionP = null;
2726
this._footer = null;
2827
}
@@ -37,16 +36,15 @@ export default class DevToolsView extends esp.model.DisposableBase {
3736
var registeredModel = model.registeredModels[i];
3837
this._timelineGroups.update({
3938
id: registeredModel.modelId,
40-
content: `Model id <span style="color:#97B0F8;">[${registeredModel.modelId}]</span>`
39+
content: registeredModel.modelId
4140
});
4241
}
4342
} else if (model.updateType === UpdateType.eventsChanged) {
4443
this._timelineData.add({
4544
id: model.lastEvent.eventNumber,
4645
group: model.lastEvent.modelId,
4746
title: model.lastEvent.eventType,
48-
start: model.lastEvent.publishedTime,
49-
className: 'eventDot'
47+
start: model.lastEvent.publishedTime
5048
});
5149
} else if (model.updateType === UpdateType.reset) {
5250
this._timelineGroups.clear();
@@ -70,28 +68,42 @@ export default class DevToolsView extends esp.model.DisposableBase {
7068
})
7169
);
7270
}
73-
7471
_createDevToolsElements() {
7572
let _this = this;
7673
$(() => {
7774
let container = $(template);
75+
7876
// note use of function so 'this' is the checkbox
7977
this._autoscrollCheckbox = container.find('#autoscrollCheckbox');
8078
this._autoscrollCheckbox.change(function () {
8179
_this._router.publishEvent('autoscrollToggled', {shouldAutoScroll: this.checked});
8280
});
81+
this.addDisposable(() => {this._autoscrollCheckbox.off();});
82+
8383
this._captureEventsCheckbox = container.find('#captureEvents');
8484
this._captureEventsCheckbox.change(function () {
8585
_this._router.publishEvent('captureEventsToggled', {shouldCaptureEvents: this.checked});
8686
});
87+
this.addDisposable(() => {this._captureEventsCheckbox.off();});
88+
8789
this._logEventsConsoleCheckbox = container.find('#logEventsConsole');
8890
this._logEventsConsoleCheckbox.change(function () {
8991
_this._router.publishEvent('logEventsConsoleToggled', {shouldLogToConsole: this.checked});
9092
});
93+
this.addDisposable(() => {this._logEventsConsoleCheckbox.off();});
94+
9195
this._resetChartButton = container.find('#resetChart');
9296
this._resetChartButton.click(function () {
9397
_this._router.publishEvent('resetChart', {});
9498
});
99+
this.addDisposable(() => {this._resetChartButton.off();});
100+
101+
this._closeButton = container.find('#closeButton');
102+
this._closeButton.click(function () {
103+
_this._router.publishEvent('close', {});
104+
});
105+
this.addDisposable(() => {this._closeButton.off();});
106+
95107
this._eventDetailsDescriptionP = container.find('#eventDetailsDescription');
96108
this._footer = container.find('#footer');
97109

@@ -102,13 +114,10 @@ export default class DevToolsView extends esp.model.DisposableBase {
102114
selectable: true,
103115
stack: false,
104116
min: moment().subtract(1, 'm'),
105-
max: moment().add(10, 'm'),
106-
//min: new Date(), // lower limit of visible range
107-
////max: new Date(2013, 0, 1), // upper limit of visible range
108-
// zoomMin: 1000 * 60 * 60 * 24, // one day in milliseconds
109-
//zoomMax: 1000 * 60 * 60 * 24 // one day in milliseconds
117+
max: moment().add(10, 'm')
110118
};
111119
this._timeline = new vis.Timeline(chartContainer[0]);
120+
this.addDisposable(() => {this._timeline.destroy();}); // also cleans up event listeners
112121
this._timeline.setOptions(options);
113122
this._timeline.setGroups(this._timelineGroups);
114123
this._timeline.setItems(this._timelineData);
@@ -120,6 +129,9 @@ export default class DevToolsView extends esp.model.DisposableBase {
120129
cursor: 'move',
121130
handle: '#header'
122131
});
132+
this.addDisposable(() => {
133+
container.remove();
134+
});
123135
});
124136
}
125137

0 commit comments

Comments
 (0)