@nodeject/ui-components
Version:
UI library for non-trivial components
134 lines (133 loc) • 7.38 kB
JavaScript
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);
};
import * as React from 'react';
import styles from './NodeContainer.module.less';
import { getBasicProps } from '../../helpers';
import { DeleteButton, AddChildNodeButton, AddWorkItemButton, InsertParentButton, AddSiblingBeforeButton, AddSiblingAfterButton, MoveNodeButton, NodeMenu } from './node-buttons';
import { Edge } from '../edge';
import { hasParent, hasChildren } from '../Graph';
export var isDomNodeRendered = function (domNode) {
return domNode !== null;
};
export var getNodeDom = function (nodeId) {
return document.getElementById(nodeId);
};
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 = getBasicProps(styles.nodeWrapper, cyNodeData.id);
var nodeWrapperProps = __assign(__assign({}, nodeWrapperBasicProps), { onMouseDownCapture: onPausePanzoomHandler, onMouseOver: onPausePanzoomHandler, onMouseLeave: onResumePanzoomHandler });
var nodeBoxWrapperStyle = hasChildren(this.props.cyNode)
? styles.nodeBoxWrapper
: styles.leafNode;
var nodeBoxWrapperProps = 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(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(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 = getBasicProps(styles.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: hasParent(this.props.cyNode) &&
cyNodeAny.parent().data().layoutStyle
};
var edge = hasParent(this.props.cyNode) && React.createElement(Edge, __assign({}, edgeProps));
return (React.createElement("div", __assign({}, nodeWrapperProps, { className: styles.nodeWrapper }),
React.createElement(InsertParentButton, __assign({}, insertParentButtonProps)),
React.createElement(DeleteButton, __assign({}, deleteNodeButtonProps)),
React.createElement(AddSiblingBeforeButton, __assign({}, addSiblingBeforeButtonProps)),
React.createElement("div", { className: styles.nodeWrapperCenter, style: { background: 'red' } },
React.createElement("div", __assign({}, nodeBoxWrapperProps),
React.createElement("div", __assign({}, nodeBoxProps), this.props.nodeContent),
edge)),
React.createElement(AddSiblingAfterButton, __assign({}, addSiblingAfterButtonProps)),
React.createElement(NodeMenu, __assign({}, nodeMenuProps)),
React.createElement(AddChildNodeButton, __assign({}, addChildNodeButtonProps)),
React.createElement(NodeMenu, __assign({}, nodeMoveMenuProps))));
};
return NodeContainer;
}(React.Component));
export { NodeContainer };