feat(nodes): automatic resize

This commit is contained in:
moklick
2019-09-13 17:01:56 +02:00
parent 5ce476ff81
commit b1be0eb4d0
+22 -3
View File
@@ -98,14 +98,33 @@ export default NodeComponent => {
const nodeClasses = cx('react-graph__node', { selected }); const nodeClasses = cx('react-graph__node', { selected });
const nodeStyle = { zIndex: selected ? 10 : 3, transform: `translate(${xPos}px,${yPos}px)` }; const nodeStyle = { zIndex: selected ? 10 : 3, transform: `translate(${xPos}px,${yPos}px)` };
useEffect(() => { const updateNode = () => {
const storeState = store.getState()
const bounds = nodeElement.current.getBoundingClientRect(); const bounds = nodeElement.current.getBoundingClientRect();
const dimensions = getDimensions(nodeElement.current); const dimensions = getDimensions(nodeElement.current);
const handleBounds = { const handleBounds = {
source: getHandleBounds('.source', nodeElement.current, bounds, transform[2]), source: getHandleBounds('.source', nodeElement.current, bounds, storeState.transform[2]),
target: getHandleBounds('.target', nodeElement.current, bounds, transform[2]) target: getHandleBounds('.target', nodeElement.current, bounds, storeState.transform[2])
}; };
store.dispatch.updateNodeData({ id, ...dimensions, handleBounds }); store.dispatch.updateNodeData({ id, ...dimensions, handleBounds });
}
useEffect(() => {
updateNode();
if (ResizeObserver) {
const resizeObserver = new ResizeObserver(entries => {
for (let entry of entries) {
updateNode();
}
});
resizeObserver.observe(nodeElement.current);
}
return () => {
resizeObserver.unobserve(nodeElement.current);
}
}, []); }, []);
return ( return (