@nodeject/ui-components
Version:
UI library for non-trivial components
149 lines (148 loc) • 6.84 kB
JavaScript
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);
};
var __spreadArrays = (this && this.__spreadArrays) || function () {
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
r[k] = a[j];
return r;
};
import { Tree } from 'antd';
import * as React from 'react';
import { useEffect, useRef, useState } from 'react';
import { Edge } from './Edge';
import { onDragEnter, onDrop } from './TreeView.DragDrop';
import { cytoscapeToSchedioTreeView } from '../tree-view/CytoscapeToSchedioTreeView';
import * as styles from './TreeView.module.less';
var TreeNode = Tree.TreeNode;
export var TreeView = function (props) {
var ref = useRef(null);
var cytoGraph = props.cytoGraph, moveNodeTo = props.moveNodeTo, NodeContainer = props.NodeContainer, options = props.options;
var _a = useState(undefined), domElement = _a[0], setDomElement = _a[1];
var _b = useState({
left: 0,
right: 0,
bottom: 0,
top: 0,
height: 0,
width: 0
}), treeCoordinates = _b[0], setTreeCoordinates = _b[1];
// console.log('length', cytoGraph.nodes.length)
useEffect(function () {
// console.log(' ref.current Refreshed...')
setDomElement(ref.current);
}, [ref.current]);
useEffect(function () {
if (domElement !== undefined) {
// console.log('Refreshed...')
setTreeCoordinates(domElement.getBoundingClientRect());
}
}, [
domElement && JSON.stringify(domElement.getBoundingClientRect()),
JSON.stringify(treeCoordinates),
cytoGraph.nodes.length
]);
// These offsets are in case getBoundingClientRect can't get proper coordinates,
// it allows to adjust the coordinates of the edges
var offsetLeft = options.offsetLeft || 0;
var offsetTop = options.offsetTop || 0;
var _c = useState(cytoGraph.nodes.filter(function (n) { return n.data.parent !== undefined; }).map(function (n) {
return {
id: n.data.parent + "-" + n.data.id,
coordinates: {
fromX: 0,
toX: 0,
fromY: 0,
toY: 0
},
group: 'edges',
from: n.data.parent,
to: n.data.id,
type: cytoGraph.nodes.filter(function (n2) { return n2.data.id === n.data.parent; })[0].data.layoutStyle
};
})), edges = _c[0], setEdges = _c[1];
var treeData = cytoscapeToSchedioTreeView({ cytoGraph: cytoGraph, NodeContainer: NodeContainer });
// const treeData = cytoscapeToSchedioTreeView({ cytoGraph, NodeContainer: () => <div>NODE</div> })
var onDropNode = function (info) {
onDrop(info, __spreadArrays(treeData), moveNodeTo);
};
var addExtraProps = function (Component, extraProps) { return React.createElement(Component.type, __assign({}, Component.props, extraProps)); };
var getCoordinates = function (nodeId, coordinates) {
var edgesList = __spreadArrays(edges);
var height = coordinates.height, left = coordinates.left, top = coordinates.top, width = coordinates.width;
var leftCoordinate = left - offsetLeft;
var topCoordinate = top - offsetTop;
var middleHorizontal = leftCoordinate + width / 2;
var middleVertical = topCoordinate + height / 2;
var bottom = topCoordinate + height;
edgesList.filter(function (e) { return e.from === nodeId; }).forEach(function (e) {
if (e.type === 0) {
e.coordinates.fromX = middleHorizontal;
e.coordinates.fromY = bottom;
}
else {
e.coordinates.fromX = leftCoordinate + 10;
e.coordinates.fromY = bottom;
}
});
edgesList.filter(function (e) { return e.to === nodeId; }).forEach(function (e) {
if (e.type === 0) {
e.coordinates.toX = middleHorizontal;
e.coordinates.toY = topCoordinate;
}
else {
e.coordinates.toX = leftCoordinate;
e.coordinates.toY = middleVertical;
}
});
setEdges(edgesList);
};
var edgesComponents = function (edgesList) {
var edges = edgesList.map(function (e) {
if (e.coordinates.fromX + e.coordinates.fromY + e.coordinates.toX + e.coordinates.toY !== 0) {
var edgesProps = {
type: e.type,
xTarget: e.coordinates.fromX,
yTarget: e.coordinates.fromY,
xSource: e.coordinates.toX,
ySource: e.coordinates.toY
};
return React.createElement(Edge, __assign({ key: e.id }, edgesProps));
}
});
return edges;
};
var buildTreeRecursively = function (treeData) {
return treeData.map(function (node) {
var TreeNodeComponent = addExtraProps(node.TreeNodeComponent, {
mode: options.mode
// getCoordinates,
// treeCoordinates
});
if (node.children && node.children.length) {
return (React.createElement(TreeNode, { key: node.nodeKey, title: React.createElement("div", { id: node.nodeKey },
React.createElement("div", { className: 'node' }, TreeNodeComponent)) }, buildTreeRecursively(node.children)));
}
return React.createElement(TreeNode, { key: node.nodeKey, title: TreeNodeComponent });
});
};
var tree = buildTreeRecursively(treeData);
return (React.createElement("div", { className: styles.treeViewContainer },
React.createElement("div", { className: styles.treeView, id: props.id, ref: ref },
React.createElement(Tree
// key={props.treeStructure.treeData[0].key + 'f'}
// defaultExpandedKeys={state.expandedKeys}
, {
// key={props.treeStructure.treeData[0].key + 'f'}
// defaultExpandedKeys={state.expandedKeys}
defaultExpandAll: true, draggable: options.draggable, onDragEnter: onDragEnter, onDrop: onDropNode }, tree))));
};