@nodeject/ui-components
Version:
UI library for non-trivial components
139 lines (138 loc) • 7.86 kB
JavaScript
"use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.NodeContainer = exports.getNodeDom = exports.isDomNodeRendered = void 0;
var React = require("react");
var NodeContainer_module_less_1 = require("./NodeContainer.module.less");
var helpers_1 = require("../../helpers");
var node_buttons_1 = require("./node-buttons");
var edge_1 = require("../edge");
var Graph_1 = require("../Graph");
var isDomNodeRendered = function (domNode) {
return domNode !== null;
};
exports.isDomNodeRendered = isDomNodeRendered;
var getNodeDom = function (nodeId) {
return document.getElementById(nodeId);
};
exports.getNodeDom = getNodeDom;
var NodeContainer = /** @class */ (function (_super) {
__extends(NodeContainer, _super);
function NodeContainer() {
return _super !== null && _super.apply(this, arguments) || this;
}
//export const NodeContainer: React.SFC<NodeContainerProps> = props => {
NodeContainer.prototype.render = function () {
var _this = this;
var cyNodeAny = this.props.cyNode;
var cyNodeData = cyNodeAny.data();
var onPausePanzoomHandler = function () {
_this.props.panzoomController && _this.props.panzoomController.pause();
};
var onResumePanzoomHandler = function () {
_this.props.panzoomController &&
_this.props.panzoomController.resume();
};
var onNodeRightClick = function (e) {
e.preventDefault();
_this.props.onComponentOpenMenu &&
_this.props.onComponentOpenMenu(cyNodeData.id);
};
var nodeWrapperBasicProps = helpers_1.getBasicProps(NodeContainer_module_less_1.default.nodeWrapper, cyNodeData.id);
var nodeWrapperProps = __assign(__assign({}, nodeWrapperBasicProps), { onMouseDownCapture: onPausePanzoomHandler, onMouseOver: onPausePanzoomHandler, onMouseLeave: onResumePanzoomHandler });
var nodeBoxWrapperStyle = Graph_1.hasChildren(this.props.cyNode)
? NodeContainer_module_less_1.default.nodeBoxWrapper
: NodeContainer_module_less_1.default.leafNode;
var nodeBoxWrapperProps = helpers_1.getBasicProps(nodeBoxWrapperStyle, cyNodeData.id);
var addNodeCommonProps = {
nodeKind: cyNodeData.nodeKind,
nodeGuid: cyNodeData.id,
showButton: this.props.isEditMode && this.props.canAddChild
};
var nodeMenuProps = {
content: this.props.nodeMenuContent &&
React.cloneElement(this.props.nodeMenuContent, {
id: cyNodeData.id
}),
button: (React.createElement(node_buttons_1.AddWorkItemButton, { nodeKind: cyNodeData.nodeKind, nodeGuid: cyNodeData.id, onClick: this.props.onRequestNodeMenu, showButton: !this.props.isEditMode && this.props.canAddWorkItem }))
};
var nodeMoveMenuProps = this.props
.nodeMoveMenuContent && {
content: React.cloneElement(this.props.nodeMoveMenuContent, {
id: cyNodeData.id
}),
button: (React.createElement(node_buttons_1.MoveNodeButton, { nodeKind: cyNodeData.nodeKind, nodeGuid: cyNodeData.id, onClick: this.props.onRequestNodeMoveMenu, showButton: this.props.isEditMode && this.props.canAddChild }))
};
var addChildNodeButtonProps = __assign(__assign({}, addNodeCommonProps), { onClick: this.props.onAddChild });
var insertParentButtonProps = __assign(__assign({}, addNodeCommonProps), { onClick: this.props.onInsertParent });
var addSiblingBeforeButtonProps = __assign(__assign({}, addNodeCommonProps), { onClick: this.props.onAddSiblingBefore });
var addSiblingAfterButtonProps = __assign(__assign({}, addNodeCommonProps), { onClick: this.props.onAddSiblingAfter });
var deleteNodeButtonProps = __assign(__assign({}, addNodeCommonProps), { onClick: this.props.onRemoveNode });
var moveNodeButtonProps = {
// ...addNodeCommonProps,
// onClick: this.props.onRemoveNode
};
var nodeContentProps = {
data: cyNodeData,
canRename: this.props.canRename,
canedit: this.props.isEditMode ? 1 : null
};
var expandCollapseButtonProps = {
node: this.props.cyNode,
canCollapse: this.props.canCollapse,
onCollapseExpandNode: this.props.onCollapseExpandNode
};
var nodeBoxBasicProps = helpers_1.getBasicProps(NodeContainer_module_less_1.default.nodeBox, cyNodeData.id);
var nodeBoxProps = __assign(__assign({}, nodeBoxBasicProps), { tabIndex: 1, onClick: function (e) {
return _this.props.onComponentSelected &&
_this.props.onComponentSelected(cyNodeData.id);
}, onContextMenu: function (e) { return onNodeRightClick(e); } });
// console.log(this.props.xSource, this.props.ySource, this.props.xTarget, this.props.yTarget)
var edgeProps = {
xSource: this.props.xSource,
ySource: this.props.ySource,
xTarget: this.props.xTarget,
yTarget: this.props.yTarget,
parentLayoutStyle: Graph_1.hasParent(this.props.cyNode) &&
cyNodeAny.parent().data().layoutStyle
};
var edge = Graph_1.hasParent(this.props.cyNode) && React.createElement(edge_1.Edge, __assign({}, edgeProps));
return (React.createElement("div", __assign({}, nodeWrapperProps, { className: NodeContainer_module_less_1.default.nodeWrapper }),
React.createElement(node_buttons_1.InsertParentButton, __assign({}, insertParentButtonProps)),
React.createElement(node_buttons_1.DeleteButton, __assign({}, deleteNodeButtonProps)),
React.createElement(node_buttons_1.AddSiblingBeforeButton, __assign({}, addSiblingBeforeButtonProps)),
React.createElement("div", { className: NodeContainer_module_less_1.default.nodeWrapperCenter, style: { background: 'red' } },
React.createElement("div", __assign({}, nodeBoxWrapperProps),
React.createElement("div", __assign({}, nodeBoxProps), this.props.nodeContent),
edge)),
React.createElement(node_buttons_1.AddSiblingAfterButton, __assign({}, addSiblingAfterButtonProps)),
React.createElement(node_buttons_1.NodeMenu, __assign({}, nodeMenuProps)),
React.createElement(node_buttons_1.AddChildNodeButton, __assign({}, addChildNodeButtonProps)),
React.createElement(node_buttons_1.NodeMenu, __assign({}, nodeMoveMenuProps))));
};
return NodeContainer;
}(React.Component));
exports.NodeContainer = NodeContainer;