alm
Version:
The best IDE for TypeScript
275 lines (274 loc) • 15.1 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 types_1 = require("../../common/types");
var icon_1 = require("./icon");
/**
* This maps into the iconTypes.svg [x,y]
*
* (0,0)-------x
* |
* |
* y
*
*/
var iconLocations = (_a = {},
_a[types_1.IconType.Global] = { x: 10, y: 0 },
_a[types_1.IconType.Namespace] = { x: 0, y: 6 },
_a[types_1.IconType.Variable] = { x: 0, y: 1 },
_a[types_1.IconType.Function] = { x: 8, y: 4 },
_a[types_1.IconType.FunctionGeneric] = { x: 8, y: 5 },
_a[types_1.IconType.Enum] = { x: 0, y: 7 },
_a[types_1.IconType.EnumMember] = { x: 0, y: 8 },
_a[types_1.IconType.Interface] = { x: 0, y: 4 },
_a[types_1.IconType.InterfaceGeneric] = { x: 0, y: 5 },
_a[types_1.IconType.InterfaceConstructor] = { x: 12, y: 6 },
_a[types_1.IconType.InterfaceProperty] = { x: 12, y: 0 },
_a[types_1.IconType.InterfaceMethod] = { x: 12, y: 4 },
_a[types_1.IconType.InterfaceMethodGeneric] = { x: 12, y: 5 },
_a[types_1.IconType.InterfaceIndexSignature] = { x: 12, y: 7 },
_a[types_1.IconType.Class] = { x: 0, y: 2 },
_a[types_1.IconType.ClassGeneric] = { x: 0, y: 3 },
_a[types_1.IconType.ClassConstructor] = { x: 3, y: 6 },
_a[types_1.IconType.ClassProperty] = { x: 3, y: 0 },
_a[types_1.IconType.ClassMethod] = { x: 3, y: 4 },
_a[types_1.IconType.ClassMethodGeneric] = { x: 3, y: 5 },
_a[types_1.IconType.ClassIndexSignature] = { x: 3, y: 7 },
_a);
var _typeIconLocations = iconLocations;
var ui = require("../ui");
var React = require("react");
var pure = require("../../common/pure");
var csx = require("../base/csx");
var styles = require("../styles/styles");
var TypeIconStyles;
(function (TypeIconStyles) {
TypeIconStyles.spriteSize = 17; // px
/** We want to eat a bit of the icon otherwise we get neighbours at certain scales */
TypeIconStyles.iconClipWidth = 1;
TypeIconStyles.root = {
width: TypeIconStyles.spriteSize - TypeIconStyles.iconClipWidth + "px",
height: TypeIconStyles.spriteSize + "px",
display: 'inline-block',
};
})(TypeIconStyles || (TypeIconStyles = {}));
/**
* Draws the icon for a type
*/
var TypeIcon = /** @class */ (function (_super) {
__extends(TypeIcon, _super);
function TypeIcon() {
return _super !== null && _super.apply(this, arguments) || this;
}
TypeIcon.prototype.shouldComponentUpdate = function () {
return pure.shouldComponentUpdate.apply(this, arguments);
};
TypeIcon.prototype.render = function () {
var imageLocation = iconLocations[this.props.iconType];
var left = imageLocation.x * -TypeIconStyles.spriteSize - TypeIconStyles.iconClipWidth;
var top = imageLocation.y * -TypeIconStyles.spriteSize;
var backgroundImage = 'url(assets/typeIcons.svg)';
var backgroundPosition = left + "px " + top + "px";
var style = csx.extend(TypeIconStyles.root, { backgroundImage: backgroundImage, backgroundPosition: backgroundPosition });
return React.createElement("div", { style: style });
};
return TypeIcon;
}(ui.BaseComponent));
exports.TypeIcon = TypeIcon;
/**
* Draws an icon for `private` visibility indication
*/
var VisibilityIndicator = /** @class */ (function (_super) {
__extends(VisibilityIndicator, _super);
function VisibilityIndicator() {
return _super !== null && _super.apply(this, arguments) || this;
}
VisibilityIndicator.prototype.shouldComponentUpdate = function () {
return pure.shouldComponentUpdate.apply(this, arguments);
};
VisibilityIndicator.prototype.render = function () {
// Maybe add others if needed. I doubt it though.
var classIconColorTheme = "#4DA6FF";
if (this.props.visibility === types_1.UMLClassMemberVisibility.Public)
return React.createElement("span", null);
if (this.props.visibility === types_1.UMLClassMemberVisibility.Private)
return React.createElement(icon_1.Icon, { name: "lock", style: { color: classIconColorTheme } });
else
return React.createElement(icon_1.Icon, { name: "shield", style: { color: classIconColorTheme } });
};
return VisibilityIndicator;
}(ui.BaseComponent));
/**
* Draws an icon for `override` visibility indication
*/
var OverrideIndicator = /** @class */ (function (_super) {
__extends(OverrideIndicator, _super);
function OverrideIndicator() {
return _super !== null && _super.apply(this, arguments) || this;
}
OverrideIndicator.prototype.shouldComponentUpdate = function () {
return pure.shouldComponentUpdate.apply(this, arguments);
};
OverrideIndicator.prototype.render = function () {
// Maybe add others if needed. I doubt it though.
var classIconColorTheme = "#4DA6FF";
return React.createElement(icon_1.Icon, { name: "arrow-circle-up", style: { color: classIconColorTheme } });
};
return OverrideIndicator;
}(ui.BaseComponent));
/**
* Draws an icon for `static` indication
*/
var LifetimeIndicator = /** @class */ (function (_super) {
__extends(LifetimeIndicator, _super);
function LifetimeIndicator() {
return _super !== null && _super.apply(this, arguments) || this;
}
LifetimeIndicator.prototype.render = function () {
// Maybe add others if needed. I doubt it though.
var classIconColorTheme = "#4DA6FF";
if (this.props.lifetime === types_1.UMLClassMemberLifetime.Instance)
return React.createElement("span", null);
else
return React.createElement(icon_1.Icon, { name: "bullhorn", style: { color: classIconColorTheme } });
};
return LifetimeIndicator;
}(React.PureComponent));
/**
* Draws the icon followed by name
*/
var DocumentedTypeHeaderStyles;
(function (DocumentedTypeHeaderStyles) {
DocumentedTypeHeaderStyles.root = csx.extend({
fontWeight: 'bold',
fontSize: '.6rem',
color: styles.textColor,
// Center
display: 'flex',
alignItems: 'center',
whiteSpace: 'pre'
});
})(DocumentedTypeHeaderStyles || (DocumentedTypeHeaderStyles = {}));
var DocumentedTypeHeader = /** @class */ (function (_super) {
__extends(DocumentedTypeHeader, _super);
function DocumentedTypeHeader() {
return _super !== null && _super.apply(this, arguments) || this;
}
DocumentedTypeHeader.prototype.render = function () {
var hasLifetime = (this.props.lifetime != null) && this.props.lifetime !== types_1.UMLClassMemberLifetime.Instance;
var hasVisibility = (this.props.visibility != null) && this.props.visibility !== types_1.UMLClassMemberVisibility.Public;
return React.createElement("div", { style: DocumentedTypeHeaderStyles.root },
React.createElement(TypeIcon, { iconType: this.props.icon }),
hasLifetime && React.createElement(LifetimeIndicator, { lifetime: this.props.lifetime }),
hasLifetime && "\u00a0",
hasVisibility && React.createElement(VisibilityIndicator, { visibility: this.props.visibility }),
hasVisibility && "\u00a0",
" " + this.props.name,
this.props.override && "\u00a0",
this.props.override && React.createElement(OverrideIndicator, null));
};
return DocumentedTypeHeader;
}(React.PureComponent));
exports.DocumentedTypeHeader = DocumentedTypeHeader;
exports.SectionHeader = function (props) {
return React.createElement("div", { style: { fontSize: '1rem', fontWeight: 'bold' } }, props.text);
};
/**
* Draws the legend
*/
var TypeIconLegendStyles;
(function (TypeIconLegendStyles) {
TypeIconLegendStyles.root = csx.extend({
fontWeight: 'bold',
fontSize: '.6rem',
color: styles.textColor,
});
TypeIconLegendStyles.legendColumnContainer = csx.horizontal;
TypeIconLegendStyles.legendColumn = csx.extend(csx.vertical, {
padding: '10px'
});
})(TypeIconLegendStyles || (TypeIconLegendStyles = {}));
var TypeIconLegend = /** @class */ (function (_super) {
__extends(TypeIconLegend, _super);
function TypeIconLegend() {
return _super !== null && _super.apply(this, arguments) || this;
}
TypeIconLegend.prototype.render = function () {
return (React.createElement("div", { style: TypeIconLegendStyles.root },
React.createElement("div", { style: { paddingLeft: '10px' } },
React.createElement(exports.SectionHeader, { text: "Legend" })),
React.createElement("div", { style: TypeIconLegendStyles.legendColumnContainer },
React.createElement("div", { style: TypeIconLegendStyles.legendColumn },
React.createElement(DocumentedTypeHeader, { name: "Global", icon: types_1.IconType.Global }),
React.createElement(DocumentedTypeHeader, { name: "Namespace", icon: types_1.IconType.Namespace }),
React.createElement(DocumentedTypeHeader, { name: "Variable", icon: types_1.IconType.Variable }),
React.createElement(DocumentedTypeHeader, { name: "Function", icon: types_1.IconType.Function }),
React.createElement(DocumentedTypeHeader, { name: "Function Generic", icon: types_1.IconType.FunctionGeneric }),
React.createElement("div", { style: { height: TypeIconStyles.spriteSize + 'px' } }),
React.createElement(DocumentedTypeHeader, { name: "Enum", icon: types_1.IconType.Enum }),
React.createElement(DocumentedTypeHeader, { name: "Enum Member", icon: types_1.IconType.EnumMember })),
React.createElement("div", { style: TypeIconLegendStyles.legendColumn },
React.createElement(DocumentedTypeHeader, { name: "Interface", icon: types_1.IconType.Interface }),
React.createElement(DocumentedTypeHeader, { name: "Interface Generic", icon: types_1.IconType.InterfaceGeneric }),
React.createElement(DocumentedTypeHeader, { name: "Interface Constructor", icon: types_1.IconType.InterfaceConstructor }),
React.createElement(DocumentedTypeHeader, { name: "Interface Property", icon: types_1.IconType.InterfaceProperty }),
React.createElement(DocumentedTypeHeader, { name: "Interface Method", icon: types_1.IconType.InterfaceMethod }),
React.createElement(DocumentedTypeHeader, { name: "Interface Method Generic", icon: types_1.IconType.InterfaceMethodGeneric }),
React.createElement(DocumentedTypeHeader, { name: "Interface Index Signature", icon: types_1.IconType.InterfaceIndexSignature })),
React.createElement("div", { style: TypeIconLegendStyles.legendColumn },
React.createElement(DocumentedTypeHeader, { name: "Class", icon: types_1.IconType.Class }),
React.createElement(DocumentedTypeHeader, { name: "Class Generic", icon: types_1.IconType.ClassGeneric }),
React.createElement(DocumentedTypeHeader, { name: "Class Constructor", icon: types_1.IconType.ClassConstructor }),
React.createElement(DocumentedTypeHeader, { name: "Class Property", icon: types_1.IconType.ClassProperty }),
React.createElement(DocumentedTypeHeader, { name: "Class Method", icon: types_1.IconType.ClassMethod }),
React.createElement(DocumentedTypeHeader, { name: "Class Method Generic", icon: types_1.IconType.ClassMethodGeneric }),
React.createElement(DocumentedTypeHeader, { name: "Class Index Signature", icon: types_1.IconType.ClassIndexSignature })))));
};
return TypeIconLegend;
}(React.PureComponent));
exports.TypeIconLegend = TypeIconLegend;
var TypeIconClassDiagramLegend = /** @class */ (function (_super) {
__extends(TypeIconClassDiagramLegend, _super);
function TypeIconClassDiagramLegend() {
return _super !== null && _super.apply(this, arguments) || this;
}
TypeIconClassDiagramLegend.prototype.render = function () {
return (React.createElement("div", { style: TypeIconLegendStyles.root },
React.createElement("div", { style: { paddingLeft: '10px' } },
React.createElement(exports.SectionHeader, { text: "Class Diagram Legend" })),
React.createElement("div", { style: TypeIconLegendStyles.legendColumnContainer },
React.createElement("div", { style: TypeIconLegendStyles.legendColumn },
React.createElement(DocumentedTypeHeader, { name: "Class", icon: types_1.IconType.Class }),
React.createElement(DocumentedTypeHeader, { name: "Class Generic", icon: types_1.IconType.ClassGeneric }),
React.createElement(DocumentedTypeHeader, { name: "Class Constructor", icon: types_1.IconType.ClassConstructor }),
React.createElement(DocumentedTypeHeader, { name: "Class Property", icon: types_1.IconType.ClassProperty }),
React.createElement(DocumentedTypeHeader, { name: "Class Method", icon: types_1.IconType.ClassMethod }),
React.createElement(DocumentedTypeHeader, { name: "Class Method Generic", icon: types_1.IconType.ClassMethodGeneric }),
React.createElement(DocumentedTypeHeader, { name: "Class Index Signature", icon: types_1.IconType.ClassIndexSignature })),
React.createElement("div", { style: TypeIconLegendStyles.legendColumn },
React.createElement("div", null,
React.createElement(VisibilityIndicator, { visibility: types_1.UMLClassMemberVisibility.Private }),
" \u00A0 Private"),
React.createElement("div", { style: { marginTop: '5px' } },
React.createElement(VisibilityIndicator, { visibility: types_1.UMLClassMemberVisibility.Protected }),
" \u00A0 Protected"),
React.createElement("div", { style: { marginTop: '5px' } },
React.createElement(LifetimeIndicator, { lifetime: types_1.UMLClassMemberLifetime.Static }),
" \u00A0 Static"),
React.createElement("div", { style: { marginTop: '5px' } },
React.createElement(OverrideIndicator, null),
" \u00A0 Override")))));
};
return TypeIconClassDiagramLegend;
}(React.PureComponent));
exports.TypeIconClassDiagramLegend = TypeIconClassDiagramLegend;
var _a;