ConceptProd/Portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

R: Refactor graph rendering and selection update

Browse Source
This commit is contained in:
Ivan 2025-02-26 20:46:33 +03:00
parent a470a6c475
commit 41aa6106da
1 changed files with 13 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorTermGraph/TGFlow.tsx
View File

@ -1,6 +1,6 @@
'use client'; 'use client';
import { useCallback, useEffect, useState } from 'react'; import { useEffect } from 'react';
import { import {
type Edge, type Edge,
MarkerType, MarkerType,
@ -55,7 +55,6 @@ export function TGFlow() {
deselectAll deselectAll
} = useRSEdit(); } = useRSEdit();
const [needReset, setNeedReset] = useState(true);
const [nodes, setNodes, onNodesChange] = useNodesState([]); const [nodes, setNodes, onNodesChange] = useNodesState([]);
const [edges, setEdges] = useEdgesState([]); const [edges, setEdges] = useEdgesState([]);
@ -75,10 +74,9 @@ export function TGFlow() {
}); });
useEffect(() => { useEffect(() => {
setNeedReset(true); if (!viewportInitialized) {
}, [schema, filter, focusCst]); return;
}
const resetNodes = useCallback(() => {
const newNodes: Node<IConstituenta>[] = []; const newNodes: Node<IConstituenta>[] = [];
filteredGraph.nodes.forEach(node => { filteredGraph.nodes.forEach(node => {
const cst = schema.cstByID.get(node.id); const cst = schema.cstByID.get(node.id);
@ -86,7 +84,6 @@ export function TGFlow() {
newNodes.push({ newNodes.push({
id: String(node.id), id: String(node.id),
type: 'concept', type: 'concept',
selected: selected.includes(node.id),
position: { x: 0, y: 0 }, position: { x: 0, y: 0 },
data: cst data: cst
}); });
@ -123,15 +120,19 @@ export function TGFlow() {
setTimeout(() => { setTimeout(() => {
fitView({ duration: PARAMETER.zoomDuration, padding: VIEW_PADDING }); fitView({ duration: PARAMETER.zoomDuration, padding: VIEW_PADDING });
}, PARAMETER.minimalTimeout); }, PARAMETER.minimalTimeout);
}, [schema, filteredGraph, setNodes, setEdges, filter.noText, selected, fitView]); }, [schema, filteredGraph, setNodes, setEdges, filter.noText, fitView, viewportInitialized, focusCst]);
useEffect(() => { useEffect(() => {
if (!needReset || !viewportInitialized) { if (!viewportInitialized) {
return; return;
} }
setNeedReset(false); setNodes(prev =>
resetNodes(); prev.map(node => ({
}, [needReset, schema, resetNodes, viewportInitialized]); ...node,
selected: selected.includes(Number(node.id))
}))
);
}, [selected, setNodes, viewportInitialized]);
function handleSetSelected(newSelection: number[]) { function handleSetSelected(newSelection: number[]) {
setSelected(newSelection); setSelected(newSelection);