Skip to content

Commit 7c4799e

Browse files
KeithWoodsKeithWoods
committed
adding various controls to the devtools window
1 parent af06a0a commit 7c4799e

7 files changed

Lines changed: 101 additions & 24 deletions

File tree

‎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.4",
3+
"version": "0.0.6",
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.10",
16+
"esp-js": "^0.5.13",
1717
"install": "^0.4.2",
1818
"jquery": "^2.2.0",
1919
"jquery-ui": "^1.10.5",

‎src/analyticsMonitor.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@ export default class AnalyticsMonitor {
88
if(modelId === DebugToolsModel.modelId) return;
99
this._router.publishEvent('modelAdded', {modelId: modelId});
1010
}
11-
publishEvent(modelId, eventType) {
11+
publishEvent(modelId, eventType, event) {
1212
if(modelId === DebugToolsModel.modelId) return;
13-
this._router.publishEvent('eventPublished', {modelId: modelId, eventType: eventType});
13+
this._router.publishEvent('eventPublished', {modelId: modelId, eventType: eventType, event:event});
1414
}
1515
broadcastEvent(eventType) {
1616
}

‎src/debugToolsModel.js‎

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ export default class DebugToolsModel extends esp.model.DisposableBase {
99
super();
1010
this._router = router;
1111
this._registeredModels = {};
12-
this._registeredModels = {};
1312
this._eventsByNumber = {};
1413
this._lastEvent = null;
1514
this._selectedEvent = null;
@@ -23,6 +22,8 @@ export default class DebugToolsModel extends esp.model.DisposableBase {
2322
});
2423
this._now = moment();
2524
this._shouldAutoScroll = true;
25+
this._shouldCaptureEvents = true;
26+
this._shouldLogToConsole = false;
2627
}
2728
static get modelId() {
2829
return 'esp-debugTools-modelId';
@@ -45,13 +46,24 @@ export default class DebugToolsModel extends esp.model.DisposableBase {
4546
get shouldAutoScroll() {
4647
return this._shouldAutoScroll;
4748
}
49+
get totalEventCount() {
50+
return this._eventCounter;
51+
}
4852
observeEvents() {
4953
this.addDisposable(this._router.observeEventsOn(this));
5054
}
5155
preProcess() {
5256
this._updateType = UpdateType.none;
5357
this._lastEvent = null;
5458
}
59+
@esp.observeEvent('modelAdded', esp.ObservationStage.preview)
60+
@esp.observeEvent('modelRemoved', esp.ObservationStage.preview)
61+
@esp.observeEvent('eventPublished', esp.ObservationStage.preview)
62+
_previewEvents(event, context) {
63+
if(!this._shouldCaptureEvents) {
64+
context.cancel();
65+
}
66+
}
5567
@esp.observeEvent('initEvent')
5668
_onInitEvent() {
5769
this._startTimer();
@@ -76,6 +88,9 @@ export default class DebugToolsModel extends esp.model.DisposableBase {
7688
this._eventCounter++;
7789
this._lastEvent = registeredModel.eventPublished(this._eventCounter, event.modelId, event.eventType);
7890
this._eventsByNumber[this._eventCounter] = this._lastEvent;
91+
if(this._shouldLogToConsole) {
92+
console.log(`[ESP-Event] ModelId:[${event.modelId}] EventType:[${event.eventType}]`, event.event);
93+
}
7994
}
8095
_addModel(modelId) {
8196
this._updateType = UpdateType.modelsChanged;
@@ -100,6 +115,19 @@ export default class DebugToolsModel extends esp.model.DisposableBase {
100115
_onAutoscrollToggled(event) {
101116
this._shouldAutoScroll = event.shouldAutoScroll;
102117
}
118+
@esp.observeEvent('captureEventsToggled')
119+
_onCaptureEventsToggled(event) {
120+
this._shouldCaptureEvents = event.shouldCaptureEvents;
121+
}
122+
@esp.observeEvent('logEventsConsoleToggled')
123+
_onLogEventsConsoleToggled(event) {
124+
this._shouldLogToConsole = event.shouldLogToConsole;
125+
}
126+
@esp.observeEvent('resetChart')
127+
_onResetChart() {
128+
this._updateType = UpdateType.reset;
129+
this._registeredModels = {};
130+
}
103131
_startTimer() {
104132
// start a timer so we can keep moving the chart forward
105133
this._timerSubscription = setInterval(() => {

‎src/devToolsView.js‎

Lines changed: 46 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,11 @@ export default class DevToolsView extends esp.model.DisposableBase {
2020
this._timelineData = new vis.DataSet();
2121
this._timeline = null;
2222
this._autoscrollCheckbox = null;
23+
this._captureEventsCheckbox = null;
24+
this._logEventsConsoleCheckbox = null;
25+
this._resetChartButton = null;
2326
this._eventDetailsDescriptionP = null;
27+
this._footer = null;
2428
}
2529

2630
start() {
@@ -42,21 +46,26 @@ export default class DevToolsView extends esp.model.DisposableBase {
4246
group: model.lastEvent.modelId,
4347
title: model.lastEvent.eventType,
4448
start: model.lastEvent.publishedTime,
49+
className: 'eventDot'
4550
});
51+
} else if (model.updateType === UpdateType.reset) {
52+
this._timelineGroups.clear();
53+
this._timelineData.clear();
4654
}
4755

48-
if (this._timeline && this._autoscrollCheckbox) {
56+
if (this._timeline) {
4957
this._timeline.setOptions({max: moment().add(2, 'm')})
5058
if (model.shouldAutoScroll) {
5159
this._setTimelineWindow();
5260
}
53-
if(this._autoscrollCheckbox.prop('checked') !== model.shouldAutoScroll) {
61+
if (this._autoscrollCheckbox.prop('checked') !== model.shouldAutoScroll) {
5462
this._autoscrollCheckbox.prop('checked', model.shouldAutoScroll);
5563
}
5664

57-
if(this._eventDetailsDescriptionP && model.selectedEvent) {
65+
if (this._eventDetailsDescriptionP && model.selectedEvent) {
5866
this._eventDetailsDescriptionP.html(JSON.stringify(model.selectedEvent));
5967
}
68+
this._footer.html(`Total events: ${model.totalEventCount}`);
6069
}
6170
})
6271
);
@@ -66,18 +75,27 @@ export default class DevToolsView extends esp.model.DisposableBase {
6675
let _this = this;
6776
$(() => {
6877
let container = $(template);
78+
// note use of function so 'this' is the checkbox
6979
this._autoscrollCheckbox = container.find('#autoscrollCheckbox');
70-
this._autoscrollCheckbox.change(function () { // note use of function so 'this' is the checkbox
80+
this._autoscrollCheckbox.change(function () {
7181
_this._router.publishEvent('autoscrollToggled', {shouldAutoScroll: this.checked});
7282
});
83+
this._captureEventsCheckbox = container.find('#captureEvents');
84+
this._captureEventsCheckbox.change(function () {
85+
_this._router.publishEvent('captureEventsToggled', {shouldCaptureEvents: this.checked});
86+
});
87+
this._logEventsConsoleCheckbox = container.find('#logEventsConsole');
88+
this._logEventsConsoleCheckbox.change(function () {
89+
_this._router.publishEvent('logEventsConsoleToggled', {shouldLogToConsole: this.checked});
90+
});
91+
this._resetChartButton = container.find('#resetChart');
92+
this._resetChartButton.click(function () {
93+
_this._router.publishEvent('resetChart', {});
94+
});
7395
this._eventDetailsDescriptionP = container.find('#eventDetailsDescription');
96+
this._footer = container.find('#footer');
7497

75-
let inner = $("<div class='inner'></div>");
76-
container.append(inner);
77-
container.draggable({
78-
cursor: 'move',
79-
handle: '#header'
80-
});
98+
let chartContainer = container.find('#chartContainer');
8199
let options = {
82100
groupOrder: 'content',
83101
showCurrentTime: true,
@@ -90,13 +108,18 @@ export default class DevToolsView extends esp.model.DisposableBase {
90108
// zoomMin: 1000 * 60 * 60 * 24, // one day in milliseconds
91109
//zoomMax: 1000 * 60 * 60 * 24 // one day in milliseconds
92110
};
93-
this._timeline = new vis.Timeline(inner[0]);
111+
this._timeline = new vis.Timeline(chartContainer[0]);
94112
this._timeline.setOptions(options);
95113
this._timeline.setGroups(this._timelineGroups);
96114
this._timeline.setItems(this._timelineData);
97115
this._wireUpTimelineEvents(this._timeline);
98116
this._setTimelineWindow();
99117
$('body').append(container);
118+
// need to do this after it's been appended to the dome, else it addes a relative styling
119+
container.draggable({
120+
cursor: 'move',
121+
handle: '#header'
122+
});
100123
});
101124
}
102125

@@ -113,10 +136,18 @@ export default class DevToolsView extends esp.model.DisposableBase {
113136
}
114137
);
115138
});
116-
timeline.on('click', properties => { this._disableAutoScroll() });
117-
timeline.on('doubleClick', properties => { this._disableAutoScroll() });
118-
timeline.on('timechanged', properties => { this._disableAutoScroll() });
119-
timeline.on('groupDragged', properties => { this._disableAutoScroll() });
139+
timeline.on('click', properties => {
140+
this._disableAutoScroll()
141+
});
142+
timeline.on('doubleClick', properties => {
143+
this._disableAutoScroll()
144+
});
145+
timeline.on('timechanged', properties => {
146+
this._disableAutoScroll()
147+
});
148+
timeline.on('groupDragged', properties => {
149+
this._disableAutoScroll()
150+
});
120151
}
121152

122153
_disableAutoScroll() {

‎src/devToolsView.less‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,33 @@
11
div#esp-js-devtool-container {
2-
position: absolute ! important;
2+
position: absolute;
33
background: white;
44
left: 0;
55
top: 0;
66
z-index: 1000001;
77
width: 800px;
8+
height: auto;
89
border: solid 2px #5F5F5F;
910
font-family: Arial, Helvetica, sans-serif;
11+
margin: 0;
12+
padding: 0;
13+
14+
* {
15+
color: #5F5F5F;
16+
}
17+
18+
.vis-item.vis-line.eventDot {
19+
border-color: #e7e7e7;
20+
}
1021

1122
a:link, a:hover, a:visited, a:active {
1223
text-decoration: none;
13-
color:#F1F1F1;
1424
font-size: 16px;
25+
color: #e4e7e7;
1526
}
1627

1728
#header {
1829
display: flex;
1930
background: #5F5F5F;
20-
color: #F1F1F1;
2131
padding: 3px 10px 3px 10px;
2232
flex-direction: row;
2333
justify-content: space-between;
@@ -28,7 +38,7 @@ div#esp-js-devtool-container {
2838
.controls {
2939
}
3040

31-
.eventDetails {
41+
.eventDetails p {
3242
display: block;
3343
padding: 10px;
3444
color: #5F5F5F;

‎src/devToolsView.template.html‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,14 @@
44
<div class='handle'></div>
55
</div>
66
<div class="controls">
7+
<input id="captureEvents" type="checkbox" name="captureEvents" checked><label for="autoscrollCheckbox">capture events</label>
78
<input id="autoscrollCheckbox" type="checkbox" name="autoscroll" checked><label for="autoscrollCheckbox">autoscroll</label>
9+
<input id="logEventsConsole" type="checkbox" name="logEventsConsole"><label for="logEventsConsole">log events console</label>
10+
<input id="resetChart" type="button" name="resetChart" value="reset chart">
811
</div>
912
<div class="eventDetails">
1013
<p id="eventDetailsDescription"></p>
1114
</div>
15+
<div id="chartContainer"></div>
16+
<div id="footer"></div>
1217
</div>

‎src/updateType.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,8 @@ class UpdateType {
33
static get modelsChanged() { return 'modelsChanged'; };
44
static get eventsChanged() { return 'eventsChanged'; };
55
static get timeChanged() { return 'timeChanged'; };
6+
static get reset() { return 'reset'; };
67
}
78
export default UpdateType;
9+
10+

0 commit comments

Comments
 (0)