@nodeject/ui-components
Version:
UI library for non-trivial components
140 lines (139 loc) • 6.96 kB
JavaScript
;
/**
* Created by v-grfore on 17/09/2016.
* Container class, orchestrates how the hierarchy chart renderer and hierarchy chart layout operate together.
*/
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.HierarchyChart = void 0;
var React = require("react");
var HierarchyChart_module_less_1 = require("./HierarchyChart.module.less");
var NodeContainer_module_less_1 = require("./node-container/NodeContainer.module.less");
var node_container_1 = require("./node-container");
var edge_1 = require("./edge");
var Graph_1 = require("./Graph");
var HierarchyChart = /** @class */ (function (_super) {
__extends(HierarchyChart, _super);
function HierarchyChart() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.onComponentSelected = function (id) {
var selectedNode = Graph_1.toCytoscape(_this.props.graph).getElementById(id);
_this.setState({ selectedNode: selectedNode });
_this.props.onComponentSelected && _this.props.onComponentSelected(id);
};
// onCollapseExpandNode = (parentId: string, title: string): void => {
_this.onCollapseExpandNode = function () {
_this.props.rerender();
};
return _this;
}
HierarchyChart.prototype.componentDidUpdate = function (prevProps) {
if (this.props !== prevProps) {
this.setState({});
}
};
HierarchyChart.prototype.render = function () {
var _this = this;
// Recursive function to build the HTML tree
var branch = function (cyNode) {
if (!cyNode) {
return;
}
var isNodeSelected;
var cyNodeAny = cyNode;
var selectedNode = _this.state
? _this.state.selectedNode
: undefined;
if (selectedNode !== undefined &&
selectedNode.data().id === cyNodeAny.data().id) {
isNodeSelected = true;
}
else {
isNodeSelected = false;
}
var nodeParentAny = cyNode.parent();
var nodeParentId = nodeParentAny.length > 0 ? nodeParentAny.data().id : '';
var isParentNodeOrgStyle;
if (nodeParentAny.length > 0) {
isParentNodeOrgStyle = nodeParentAny.data().layoutStyle === 0;
}
var edgeConnectorsCoordinates = edge_1.getEdgeConnectorsCoordinates(cyNodeAny.data().id, nodeParentId, isParentNodeOrgStyle, NodeContainer_module_less_1.default.nodeBox);
var nodeData = cyNodeAny.data();
var nodeContainerProps = {
cyNode: cyNode,
isNodeSelected: isNodeSelected,
panzoomController: _this.props.panzoomController,
rerender: _this.props.rerender,
debugMessages: _this.props.debugMessages,
nodeContent: _this.props.nodeContent,
nodeContentStyles: _this.props.nodeContentStyles,
nodeMenuContent: _this.props.nodeMenuContent,
nodeMoveMenuContent: _this.props.nodeMoveMenuContent,
data: nodeData,
isEditMode: _this.props.isEditMode,
canAddChild: _this.props.canAddChild,
canRename: _this.props.canRename,
canAddWorkItem: _this.props.canAddWorkItem,
canCollapse: _this.props.canCollapse,
onChangeParent: _this.props.onChangeParent,
onChangeSiblingIndex: _this.props.onChangeSiblingIndex,
onAddChild: _this.props.onAddChild,
onInsertParent: _this.props.onInsertParent,
onAddSiblingBefore: _this.props.onAddSiblingBefore,
onAddSiblingAfter: _this.props.onAddSiblingAfter,
onRemoveNode: _this.props.onRemoveNode,
onRequestNodeMenu: _this.props.onRequestNodeMenu,
onComponentSelected: _this.onComponentSelected,
onComponentOpenMenu: _this.props.onComponentOpenMenu,
onTitleEditRequest: _this.props.onTitleEditRequest,
// onCollapseExpandNode: this.props.onCollapseExpandNode,
onCollapseExpandNode: _this.onCollapseExpandNode,
xSource: edgeConnectorsCoordinates.xSource,
ySource: edgeConnectorsCoordinates.ySource,
xTarget: edgeConnectorsCoordinates.xTarget,
yTarget: edgeConnectorsCoordinates.yTarget
};
var childrenList = cyNode
.children()
.map(function (nodeChild) {
return (React.createElement("li", { className: "branch", key: nodeChild.data().id }, branch(nodeChild)));
});
return (React.createElement("div", { className: Graph_1.isOrgStyle(cyNodeAny) ? HierarchyChart_module_less_1.default.orgView : HierarchyChart_module_less_1.default.listView },
React.createElement("input", { type: "checkbox", defaultChecked: true, id: nodeData.id }),
React.createElement(node_container_1.NodeContainer, __assign({ key: nodeData.id }, nodeContainerProps)),
Graph_1.hasChildren(cyNodeAny) && React.createElement("ol", null, childrenList)));
};
var rootNode = Graph_1.toCytoscape(this.props.graph)
.nodes()
.roots()
.first();
return (React.createElement("div", { className: HierarchyChart_module_less_1.default.hierarchyChart },
React.createElement("ol", null,
React.createElement("li", { className: "branch" }, branch(rootNode)))));
};
return HierarchyChart;
}(React.Component));
exports.HierarchyChart = HierarchyChart;