alm
Version:
The best IDE for TypeScript
271 lines (270 loc) • 12.4 kB
JavaScript
"use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var ui = require("../../ui");
var csx = require("../../base/csx");
var React = require("react");
var socketClient_1 = require("../../../socket/socketClient");
var commands = require("../../commands/commands");
var utils = require("../../../common/utils");
var d3 = require("d3");
var $ = require("jquery");
var styles = require("../../styles/styles");
var errorMessage_1 = require("../errorMessage");
var typestyle = require("typestyle");
var socketContract_1 = require("../../../socket/socketContract");
exports.noFocusOutlineClassName = typestyle.style(styles.noFocusOutlineBase);
var EOL = '\n';
/**
* The styles
*/
require('./astView.less');
var ASTView = /** @class */ (function (_super) {
__extends(ASTView, _super);
function ASTView(props) {
var _this = _super.call(this, props) || this;
_this.display = function (node) {
_this.setState({ selectedNode: node });
};
/**
* TAB implementation
*/
_this.resize = function () {
// This layout doesn't need it
};
_this.focus = function () {
_this.refs.root.focus();
// if its not there its because an XHR is lagging and it will show up when that xhr completes anyways
_this.astViewRenderer && _this.astViewRenderer.update();
};
_this.save = function () {
};
_this.close = function () {
};
_this.gotoPosition = function (position) {
};
_this.search = {
doSearch: function (options) {
// TODO
},
hideSearch: function () {
// TODO
},
findNext: function (options) {
},
findPrevious: function (options) {
},
replaceNext: function (_a) {
var newText = _a.newText;
},
replacePrevious: function (_a) {
var newText = _a.newText;
},
replaceAll: function (_a) {
var newText = _a.newText;
}
};
var _a = utils.getFilePathAndProtocolFromUrl(props.url), protocol = _a.protocol, filePath = _a.filePath;
_this.mode = protocol === 'ast' ? socketContract_1.Types.ASTMode.visitor : socketContract_1.Types.ASTMode.children;
_this.filePath = filePath;
_this.state = {};
return _this;
}
ASTView.prototype.componentDidMount = function () {
var _this = this;
var reloadData = function () {
_this.setState({ error: null });
socketClient_1.server.openFile({ filePath: _this.filePath }).then(function (res) {
_this.setState({ text: res.contents });
});
socketClient_1.server.getAST({ mode: _this.mode, filePath: _this.filePath })
.then(function (res) {
_this.astViewRenderer = new ASTViewRenderer({
rootNode: res.root,
_mainContent: $(_this.refs.graphRoot),
display: _this.display
});
})
.catch(function (err) {
_this.setState({
error: "Failed to get the AST details for the file " + _this.filePath + ". Make sure it is in the active project. Change project using Alt+Shift+P."
});
});
};
var reloadDataDebounced = utils.debounce(reloadData, 2000);
reloadData();
this.disposible.add(socketClient_1.cast.activeProjectConfigDetailsUpdated.on(function () {
reloadDataDebounced();
}));
this.disposible.add(commands.fileContentsChanged.on(function (res) {
if (res.filePath === _this.filePath) {
reloadDataDebounced();
}
}));
// Listen to tab events
var api = this.props.api;
this.disposible.add(api.resize.on(this.resize));
this.disposible.add(api.focus.on(this.focus));
this.disposible.add(api.save.on(this.save));
this.disposible.add(api.close.on(this.close));
this.disposible.add(api.gotoPosition.on(this.gotoPosition));
// Listen to search tab events
this.disposible.add(api.search.doSearch.on(this.search.doSearch));
this.disposible.add(api.search.hideSearch.on(this.search.hideSearch));
this.disposible.add(api.search.findNext.on(this.search.findNext));
this.disposible.add(api.search.findPrevious.on(this.search.findPrevious));
this.disposible.add(api.search.replaceNext.on(this.search.replaceNext));
this.disposible.add(api.search.replacePrevious.on(this.search.replacePrevious));
this.disposible.add(api.search.replaceAll.on(this.search.replaceAll));
};
ASTView.prototype.render = function () {
var node = this.state.selectedNode;
var display = node
? ("\n" + node.kind + "\n-------------------- AST --------------------\n" + node.rawJson + "\n-------------------- TEXT -------------------\n" + this.state.text.substring(node.pos, node.end) + "\n ").trim()
: "The selected AST node details will go here";
var content = this.state.error
? React.createElement(errorMessage_1.ErrorMessage, { text: this.state.error })
: React.createElement("div", { style: csx.extend(csx.flex, csx.horizontal, { maxWidth: '100%' }) },
React.createElement("div", { style: csx.extend(csx.flex, csx.scroll), ref: "graphRoot", className: "ast-view" }),
React.createElement("div", { style: csx.extend(csx.flex, csx.flexRoot, csx.scroll, styles.padded1, { background: 'white' }) },
React.createElement("pre", { style: csx.extend(csx.flex, { margin: '0px' }) }, display)));
return (React.createElement("div", { ref: "root", tabIndex: 0, className: exports.noFocusOutlineClassName, style: csx.extend(csx.horizontal, csx.flex, styles.someChildWillScroll) }, content));
};
return ASTView;
}(ui.BaseComponent));
exports.ASTView = ASTView;
var ASTViewRenderer = /** @class */ (function () {
function ASTViewRenderer(config) {
var _this = this;
this.config = config;
// General D3 utlis
this.tree = d3.layout.tree().nodeSize([0, 20]);
this.diagonal = d3.svg.diagonal()
.projection(function (d) { return [d.y, d.x]; });
// vodoo
this.i = 0;
// layout constants
this.margin = { top: 30, right: 20, bottom: 30, left: 20 };
this.barHeight = 30;
this.duration = 400;
/** display details on click */
this.select = function (node) {
_this.config.display(node);
_this.selected = node;
_this.update();
};
this.getWidth = function () { return _this.root.jq.width() - _this.margin.left - _this.margin.right; };
this.update = function () {
var width = _this.getWidth();
// If width is less than 0 means its insignificant to render anyways.
// Just return and way for update to be called again when it is significant
if (width < 0) {
return;
}
_this.svgRoot.attr("width", width);
var barWidth = width * .8;
// Compute the flattened node list. TODO use d3.layout.hierarchy.
var nodes = _this.tree.nodes(_this.rootNode);
var height = Math.max(500, nodes.length * _this.barHeight + _this.margin.top + _this.margin.bottom);
_this.svgRoot.transition()
.duration(_this.duration)
.attr("height", height);
d3.select(self.frameElement).transition()
.duration(_this.duration)
.style("height", height + "px");
// Compute the "layout".
nodes.forEach(function (n, i) {
n.x = i * _this.barHeight;
});
// Update the nodes…
var node = _this.graph.selectAll("g.node")
.data(nodes, function (d) { return d.id || (d.id = ++_this.i); });
var nodeEnter = node.enter().append("g")
.attr("class", "node")
.attr("transform", function (d) { return "translate(" + _this.rootNode.depth + "," + _this.rootNode.nodeIndex + ")"; })
.style("opacity", 1e-6);
// Enter any new nodes at the parent's previous position.
nodeEnter.append("rect")
.attr("y", -_this.barHeight / 2)
.attr("height", _this.barHeight)
.attr("width", barWidth)
.style("fill", _this.color)
.on("click", _this.select);
nodeEnter.append("text")
.attr("dy", 3.5)
.attr("dx", 5.5)
.text(function (d) {
return d.kind;
});
// Transition nodes to their new position.
nodeEnter.transition()
.duration(_this.duration)
.attr("transform", function (d) { return "translate(" + d.y + "," + d.x + ")"; })
.style("opacity", 1);
node.transition()
.duration(_this.duration)
.attr("transform", function (d) { return "translate(" + d.y + "," + d.x + ")"; })
.style("opacity", 1)
.select("rect")
.style("fill", _this.color);
// Transition exiting nodes to the parent's new position.
node.exit().transition()
.duration(_this.duration)
.attr("transform", function (d) { return "translate(" + this.rootNode.nodeIndex + "," + this.rootNode.depth + ")"; })
.style("opacity", 1e-6)
.remove();
// Update the links…
var link = _this.graph.selectAll("path.link")
.data(_this.tree.links(nodes), function (d) { return d.target.id; });
// Enter any new links at the parent's previous position.
link.enter().insert("path", "g")
.attr("class", "link")
.attr("d", function (d) {
var o = { x: _this.rootNode.depth, y: _this.rootNode.nodeIndex };
return _this.diagonal({ source: o, target: o });
})
.transition()
.duration(_this.duration)
.attr("d", _this.diagonal);
// Transition links to their new position.
link.transition()
.duration(_this.duration)
.attr("d", _this.diagonal);
// Transition exiting nodes to the parent's new position.
link.exit().transition()
.duration(_this.duration)
.attr("d", function (d) {
var o = { x: _this.rootNode.depth, y: _this.rootNode.nodeIndex };
return _this.diagonal({ source: o, target: o });
}).remove();
};
this.color = function (d) {
if (_this.selected == d) {
return "rgb(140, 0, 0)";
}
return d.children ? "#000000" : "rgb(29, 166, 0)";
};
config._mainContent.html('');
this.root = {
dom: config._mainContent[0],
jq: config._mainContent
};
this.rootNode = config.rootNode;
this.svgRoot = d3.select(this.root.dom).append("svg");
this.graph = this.svgRoot.append("g")
.attr("transform", "translate(" + this.margin.left + "," + this.margin.top + ")");
d3.select(this.root.dom).on("resize", this.update);
// Kick off by selecting the root node
this.select(this.rootNode);
}
return ASTViewRenderer;
}());