diff --git a/extension/src/EvaluationWatchService/EvaluationEngine/JsEvaluationEngine.ts b/extension/src/EvaluationWatchService/EvaluationEngine/JsEvaluationEngine.ts
index c9703e6..dc95c6f 100644
--- a/extension/src/EvaluationWatchService/EvaluationEngine/JsEvaluationEngine.ts
+++ b/extension/src/EvaluationWatchService/EvaluationEngine/JsEvaluationEngine.ts
@@ -25,6 +25,7 @@ export class JsEvaluationEngine implements EvaluationEngine {
"extensionHost",
"chrome",
"pwa-chrome",
+ "pwa-node",
];
if (supportedDebugAdapters.indexOf(session.session.type) !== -1) {
return new JsEvaluator(session);
@@ -38,6 +39,13 @@ class JsEvaluator implements Evaluator {
constructor(private readonly session: VsCodeDebugSession) {}
+ private getContext(): "copy" | "repl" {
+ if (this.session.session.type.startsWith("pwa-")) {
+ return "copy";
+ }
+ return "repl";
+ }
+
public async evaluate({
expression,
preferredExtractorId,
@@ -75,10 +83,13 @@ class JsEvaluator implements Evaluator {
const reply = await this.session.evaluate({
expression: wrappedExpr,
frameId,
- context: "repl",
+ context: this.getContext(),
});
const resultStr = reply.result;
- const jsonData = resultStr.substr(1, resultStr.length - 2);
+ const jsonData =
+ this.getContext() === "copy"
+ ? resultStr
+ : resultStr.substr(1, resultStr.length - 2);
const result = JSON.parse(jsonData) as DataResult;
if (result.kind === "NoExtractors") {
@@ -117,7 +128,7 @@ class JsEvaluator implements Evaluator {
await this.session.evaluate({
expression,
frameId,
- context: "repl",
+ context: this.getContext(),
});
return true;
diff --git a/extension/src/VsCodeDebugger.ts b/extension/src/VsCodeDebugger.ts
index add35a4..df2e897 100644
--- a/extension/src/VsCodeDebugger.ts
+++ b/extension/src/VsCodeDebugger.ts
@@ -35,9 +35,6 @@ export class VsCodeDebugger {
createDebugAdapterTracker: session => {
const extendedSession = this.getDebugSession(session);
return {
- onWillReceiveMessage: msg => {
- console.log(msg.type, msg.event, msg);
- },
onDidSendMessage: async msg => {
type Message =
| StoppedEvent
@@ -167,7 +164,7 @@ export class VsCodeDebugSession {
public async evaluate(args: {
expression: string;
frameId: number | undefined;
- context: "watch" | "repl";
+ context: "watch" | "repl" | "copy";
}): Promise<{ result: string }> {
const reply = await this.session.customRequest("evaluate", {
expression: args.expression,
diff --git a/visualization/src/visualizers/AstVisualizer.tsx b/visualization/src/visualizers/AstVisualizer.tsx
index 5c33c2e..2927b11 100644
--- a/visualization/src/visualizers/AstVisualizer.tsx
+++ b/visualization/src/visualizers/AstVisualizer.tsx
@@ -12,7 +12,7 @@ import { createTreeViewModelFromTreeNodeData } from "./TreeVisualizer/TreeVisual
import { TreeWithPathView, TreeViewModel } from "./TreeVisualizer/Views";
import * as React from "react";
import { observer, disposeOnUnmount } from "mobx-react";
-import { observable, autorun, trace } from "mobx";
+import { observable, autorun, trace, computed } from "mobx";
import * as monaco from "monaco-editor";
import { getLanguageId } from "./text-visualizers/MonacoTextVisualizer";
import LineColumn from "line-column";
@@ -115,80 +115,116 @@ export class MonacoEditor extends React.Component<{
}
}
+ @computed.struct
+ private get markedRanges(): monaco.IRange[] {
+ if (!this.editor || !this.model) {
+ return [];
+ }
+
+ const editorModel = this.model;
+ const ranges = this.props.model.marked.map(s =>
+ this.props.nodeInfoToRange(s.data)
+ );
+ return ranges;
+ }
+
@disposeOnUnmount
private _updateMarkedDecorations = autorun(
() => {
- if (this.editor && this.model) {
- const editorModel = this.model;
- const ranges = this.props.model.marked.map(s =>
- this.props.nodeInfoToRange(s.data)
+ if (!this.editor) {
+ return;
+ }
+ const ranges = this.markedRanges;
+ this.markedDecorations = this.editor.deltaDecorations(
+ this.markedDecorations,
+ ranges.map(range => ({
+ range,
+ options: { className: "marked" },
+ }))
+ );
+ if (ranges.length > 0) {
+ this.editor.revealRange(
+ ranges[0],
+ monaco.editor.ScrollType.Smooth
);
- this.markedDecorations = this.editor.deltaDecorations(
- this.markedDecorations,
- ranges.map(range => ({
- range,
- options: { className: "marked" },
- }))
- );
- if (ranges.length > 0) {
- this.editor.revealRange(
- ranges[0],
- monaco.editor.ScrollType.Smooth
- );
- }
}
},
{ name: "updateMarkedDecorations" }
);
+ @computed.struct
+ private get selected(): monaco.IRange | undefined {
+ if (this.editor && this.model) {
+ const selected = this.props.model.selected;
+ if (selected) {
+ const range = this.props.nodeInfoToRange(selected.data);
+ return range;
+ }
+ }
+ return undefined;
+ }
+
@disposeOnUnmount
private _updateSelectedDecoration = autorun(
() => {
- if (this.editor && this.model) {
- const selected = this.props.model.selected;
- if (selected) {
- const range = this.props.nodeInfoToRange(selected.data);
- this.selectedDecorations = this.editor.deltaDecorations(
- this.selectedDecorations,
- [
- {
- range,
- options: { className: "selected" },
- },
- ]
- );
- this.editor.revealRange(
- range,
- monaco.editor.ScrollType.Smooth
- );
- } else {
- this.selectedDecorations = this.editor.deltaDecorations(
- this.selectedDecorations,
- []
- );
- }
+ console.log("_updateSelectedDecoration");
+ if (!this.editor) {
+ return;
+ }
+ const range = this.selected;
+ if (range) {
+ this.selectedDecorations = this.editor.deltaDecorations(
+ this.selectedDecorations,
+ [
+ {
+ range,
+ options: { className: "selected" },
+ },
+ ]
+ );
+ this.editor.revealRange(range, monaco.editor.ScrollType.Smooth);
+ } else {
+ this.selectedDecorations = this.editor.deltaDecorations(
+ this.selectedDecorations,
+ []
+ );
}
},
{ name: "updateDecorations" }
);
+ private test = (() => {
+ console.log("test created");
+ })();
+
+ @computed.struct
+ private get modelData(): { text: string; languageId: string } {
+ const { text, languageId } = this.props;
+ return { text, languageId };
+ }
+
@disposeOnUnmount
- private _updateText = autorun(() => {
- if (this.editor) {
- const model = monaco.editor.createModel(
- this.props.text,
- this.props.languageId,
- undefined
- );
+ private _updateText = autorun(
+ () => {
+ console.log("_updateText rerun");
+ if (this.editor) {
+ const model = monaco.editor.createModel(
+ this.modelData.text,
+ this.modelData.languageId,
+ undefined
+ );
- this.editor.setModel(model);
+ this.editor.setModel(model);
- if (this.modelNotObservable) {
- this.modelNotObservable.dispose();
+ if (this.modelNotObservable) {
+ this.modelNotObservable.dispose();
+ }
+ this.modelNotObservable = model;
+ this.model = model;
}
- this.model = model;
- }
- });
+ },
+ { name: "Update Model" }
+ );
private readonly setEditorDiv = (editorDiv: HTMLDivElement) => {
if (!editorDiv) {
diff --git a/webview/package.json b/webview/package.json
index ac20c23..65808f2 100644
--- a/webview/package.json
+++ b/webview/package.json
@@ -19,7 +19,8 @@
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-measure": "^2.3.0",
- "@hediet/debug-visualizer-data-extraction": "*"
+ "@hediet/debug-visualizer-data-extraction": "*",
+ "@knuddels/mobx-logger": "^1.1.1"
},
"devDependencies": {
"@types/html-webpack-plugin": "^3.2.2",
diff --git a/webview/src/components/GUI.tsx b/webview/src/components/GUI.tsx
index 3678cbd..010799a 100644
--- a/webview/src/components/GUI.tsx
+++ b/webview/src/components/GUI.tsx
@@ -103,19 +103,20 @@ export class VisualizerHeaderMain extends React.Component<{ model: Model }> {