alm
Version:
The best IDE for TypeScript
231 lines (230 loc) • 10.5 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 styles = require("../../styles/styles");
var typeIcon = require("../../components/typeIcon");
var gls = require("../../base/gls");
var typestyle = require("typestyle");
var blackHighlightColor = styles.blackHighlightColor;
var UmlViewStyles;
(function (UmlViewStyles) {
UmlViewStyles.classNameHeaderSection = typestyle.style({
border: '1px solid grey',
padding: '5px',
/** A nice clickable look */
cursor: 'pointer',
$nest: {
'&:hover': {
textDecoration: 'underline'
}
}
});
UmlViewStyles.classMemberSection = typestyle.style({
// Common with header
border: '1px solid grey',
padding: '5px',
cursor: 'pointer',
$nest: {
'&:hover': {
textDecoration: 'underline'
}
},
// To eat top border
marginTop: '-1px'
});
})(UmlViewStyles = exports.UmlViewStyles || (exports.UmlViewStyles = {}));
var UmlView = /** @class */ (function (_super) {
__extends(UmlView, _super);
function UmlView(props) {
var _this = _super.call(this, props) || this;
_this.handleKey = function (e) {
var unicode = e.charCode;
if (String.fromCharCode(unicode).toLowerCase() === "r") {
_this.loadData();
}
};
_this.filter = function () {
// TODO:
};
_this.loadData = function () {
socketClient_1.server.getUmlDiagramForFile({ filePath: _this.filePath }).then(function (res) {
// Preserve selected
var selected = _this.state.selected && res.classes.find(function (c) { return c.name === _this.state.selected.name; });
// otherwise auto select first
if (!selected && res.classes.length) {
selected = res.classes[0];
}
_this.setState({ classes: res.classes, selected: selected });
_this.filter();
});
};
/**
* TAB implementation
*/
_this.resize = function () {
// Not needed
};
_this.focus = function () {
_this.refs.root.focus();
};
_this.save = function () {
};
_this.close = function () {
};
_this.gotoPosition = function (position) {
};
_this.search = {
doSearch: function (options) {
_this.setState({ filter: options.query });
},
hideSearch: function () {
_this.setState({ filter: '' });
},
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;
}
};
_this.filePath = utils.getFilePathFromUrl(props.url);
_this.state = {
filter: '',
classes: [],
selected: null,
};
return _this;
}
UmlView.prototype.componentDidMount = function () {
var _this = this;
/**
* Initial load + load on project change
*/
this.loadData();
this.disposible.add(socketClient_1.cast.activeProjectFilePathsUpdated.on(function () {
_this.loadData();
}));
/**
* If a file is selected and it gets edited, reload the file module information
*/
var loadDataDebounced = utils.debounce(this.loadData, 3000);
this.disposible.add(commands.fileContentsChanged.on(function (res) {
if (_this.filePath !== res.filePath)
return;
loadDataDebounced();
}));
/**
* Handle focus to inform tab container
*/
var focused = function () {
_this.props.onFocused();
};
this.refs.root.addEventListener('focus', focused);
this.disposible.add({
dispose: function () {
_this.refs.root.removeEventListener('focus', focused);
}
});
// 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));
};
UmlView.prototype.render = function () {
return (React.createElement("div", { ref: "root", tabIndex: 0, style: csx.extend(csx.vertical, csx.flex, csx.newLayerParent, styles.someChildWillScroll, { color: styles.textColor }), onKeyPress: this.handleKey },
React.createElement("div", { style: { overflow: 'hidden', padding: '10px 0px 10px 10px', display: 'flex' } },
React.createElement(gls.FlexHorizontal, { style: {} },
React.createElement(gls.Content, { style: { minWidth: '150px', maxWidth: '250px', overflow: 'auto' } },
React.createElement(typeIcon.SectionHeader, { text: "Classes" }),
React.createElement(gls.SmallVerticalSpace, null),
this.state.classes.length
? this.renderClasses()
: "No classes in file"),
React.createElement(gls.FlexVertical, { style: { marginLeft: '5px', overflow: 'auto' } },
this.state.selected
? this.renderSelectedClass()
: 'Select a class from the left to view its diagram 🌹 🎼',
React.createElement("div", { style: { marginTop: '10px', marginRight: '10px' } },
React.createElement("hr", null),
React.createElement(typeIcon.TypeIconClassDiagramLegend, null)))))));
};
UmlView.prototype.renderClasses = function () {
var _this = this;
return this.state.classes.map(function (c, i) {
var backgroundColor = _this.state.selected && _this.state.selected.name === c.name
? blackHighlightColor
: 'transparent';
return (React.createElement("div", { title: c.name + ' ' + c.location.position.line, key: i, style: { cursor: 'pointer', backgroundColor: backgroundColor, paddingTop: '2px', paddingBottom: '2px', paddingLeft: '2px' }, onClick: function () { return _this.handleClassSelected(c); } },
React.createElement(typeIcon.DocumentedTypeHeader, { name: c.name, icon: c.icon })));
});
};
UmlView.prototype.renderSelectedClass = function () {
var c = this.state.selected;
return React.createElement(gls.Content, { style: { textAlign: 'center' } },
React.createElement("code", { style: { fontWeight: 'bold' } }, c.name),
React.createElement(gls.SmallVerticalSpace, null),
this.renderClass(c));
};
UmlView.prototype.renderClass = function (c) {
var _this = this;
var renderSection = function (section, i) {
return React.createElement("div", { key: i, style: { border: '1px solid grey', padding: '5px', marginTop: '-1px' } }, section);
};
return (React.createElement(gls.Content, { style: { textAlign: 'center' } },
React.createElement(gls.InlineBlock, { style: { paddingTop: '1px' } },
React.createElement("div", { className: UmlViewStyles.classNameHeaderSection, onClick: function () { return _this.handleGotoTypeLocation(c.location); } },
React.createElement(typeIcon.DocumentedTypeHeader, { name: c.name, icon: c.icon })),
c.members.map(function (m, i) {
return React.createElement("div", { key: i, className: UmlViewStyles.classMemberSection, onClick: function () { return _this.handleGotoTypeLocation(m.location); } },
React.createElement(typeIcon.DocumentedTypeHeader, { name: m.name, icon: m.icon, visibility: m.visibility, lifetime: m.lifetime, override: !!m.override }));
}),
!!c.extends &&
React.createElement(gls.Content, null,
React.createElement("code", null, "extends"),
this.renderClass(c.extends)))));
};
UmlView.prototype.handleClassSelected = function (c) {
this.setState({ selected: c });
};
UmlView.prototype.handleGotoTypeLocation = function (location) {
commands.doOpenOrFocusFile.emit({
filePath: location.filePath,
position: location.position
});
};
return UmlView;
}(ui.BaseComponent));
exports.UmlView = UmlView;