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

M: Add distinguishing border for focusCst

Browse Source
This commit is contained in:
Ivan 2025-03-11 22:56:16 +03:00
parent 92d3d2676b
commit 15cd3fb306
1 changed files with 6 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorTermGraph/graph/TGNode.tsx
View File

@ -33,6 +33,7 @@ export function TGNode(node: TGNodeInternal) {
const { focusCst, setFocus: setFocusCst, navigateCst } = useRSEdit(); const { focusCst, setFocus: setFocusCst, navigateCst } = useRSEdit();
const filter = useTermGraphStore(state => state.filter); const filter = useTermGraphStore(state => state.filter);
const coloring = useTermGraphStore(state => state.coloring); const coloring = useTermGraphStore(state => state.coloring);
const isFocused = focusCst === node.data;
const label = node.data.alias; const label = node.data.alias;
const description = !filter.noText ? node.data.term_resolved : ''; const description = !filter.noText ? node.data.term_resolved : '';
@ -40,7 +41,7 @@ export function TGNode(node: TGNodeInternal) {
function handleContextMenu(event: React.MouseEvent<HTMLElement>) { function handleContextMenu(event: React.MouseEvent<HTMLElement>) {
event.stopPropagation(); event.stopPropagation();
event.preventDefault(); event.preventDefault();
setFocusCst(focusCst === node.data ? null : node.data); setFocusCst(isFocused ? null : node.data);
} }
function handleDoubleClick(event: React.MouseEvent) { function handleDoubleClick(event: React.MouseEvent) {
@ -57,10 +58,12 @@ export function TGNode(node: TGNodeInternal) {
style={{ style={{
backgroundColor: node.selected backgroundColor: node.selected
? APP_COLORS.bgActiveSelection ? APP_COLORS.bgActiveSelection
: focusCst === node.data : isFocused
? APP_COLORS.bgPurple ? APP_COLORS.bgPurple
: colorBgGraphNode(node.data, coloring), : colorBgGraphNode(node.data, coloring),
fontSize: label.length > LABEL_THRESHOLD ? FONT_SIZE_MED : FONT_SIZE_MAX fontSize: label.length > LABEL_THRESHOLD ? FONT_SIZE_MED : FONT_SIZE_MAX,
borderWidth: isFocused ? '2px' : '0px',
borderColor: isFocused ? APP_COLORS.bgSelected : 'transparent'
}} }}
data-tooltip-id={globalIDs.tooltip} data-tooltip-id={globalIDs.tooltip}
data-tooltip-html={describeCstNode(node.data)} data-tooltip-html={describeCstNode(node.data)}