1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
|
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
import { Component } from "react";
import PropTypes from "prop-types";
import { connect } from "../../utils/connect";
import {
getHighlightedCalls,
getThreadContext,
getCurrentThread,
} from "../../selectors";
import { getSourceLocationFromMouseEvent } from "../../utils/editor";
import actions from "../../actions";
import "./HighlightCalls.css";
export class HighlightCalls extends Component {
previousCalls = null;
static get propTypes() {
return {
continueToHere: PropTypes.func.isRequired,
cx: PropTypes.object.isRequired,
editor: PropTypes.object.isRequired,
highlightedCalls: PropTypes.array,
selectedSource: PropTypes.object,
};
}
componentDidUpdate() {
this.unhighlightFunctionCalls();
this.highlightFunctioCalls();
}
markCall = call => {
const { editor } = this.props;
const startLine = call.location.start.line - 1;
const endLine = call.location.end.line - 1;
const startColumn = call.location.start.column;
const endColumn = call.location.end.column;
const markedCall = editor.codeMirror.markText(
{ line: startLine, ch: startColumn },
{ line: endLine, ch: endColumn },
{ className: "highlight-function-calls" }
);
return markedCall;
};
onClick = e => {
const { editor, selectedSource, cx, continueToHere } = this.props;
if (selectedSource) {
const location = getSourceLocationFromMouseEvent(
editor,
selectedSource,
e
);
continueToHere(cx, location);
editor.codeMirror.execCommand("singleSelection");
editor.codeMirror.execCommand("goGroupLeft");
}
};
highlightFunctioCalls() {
const { highlightedCalls } = this.props;
if (!highlightedCalls) {
return;
}
let markedCalls = [];
markedCalls = highlightedCalls.map(this.markCall);
const allMarkedElements = document.getElementsByClassName(
"highlight-function-calls"
);
for (let i = 0; i < allMarkedElements.length; i++) {
allMarkedElements[i].addEventListener("click", this.onClick);
}
this.previousCalls = markedCalls;
}
unhighlightFunctionCalls() {
if (!this.previousCalls) {
return;
}
this.previousCalls.forEach(call => call.clear());
this.previousCalls = null;
}
render() {
return null;
}
}
const mapStateToProps = state => {
const thread = getCurrentThread(state);
return {
highlightedCalls: getHighlightedCalls(state, thread),
cx: getThreadContext(state),
};
};
const { continueToHere } = actions;
const mapDispatchToProps = { continueToHere };
export default connect(mapStateToProps, mapDispatchToProps)(HighlightCalls);
|
