F: Simplify TGFlow tooltips
This commit is contained in:
Ivan
parent
75106508e3
commit
dd79312056
|
|
@ -37,7 +37,7 @@ export const GlobalTooltips = () => {
|
|||
<Tooltip
|
||||
clickable
|
||||
id={globalIDs.constituenta_tooltip}
|
||||
layer='z-modalTooltip'
|
||||
layer='z-topmost'
|
||||
className='max-w-[30rem]'
|
||||
hidden={!hoverCst}
|
||||
>
|
||||
|
|
@ -47,7 +47,7 @@ export const GlobalTooltips = () => {
|
|||
</Tooltip>
|
||||
<Tooltip
|
||||
id={globalIDs.operation_tooltip}
|
||||
layer='z-modalTooltip'
|
||||
layer='z-topmost'
|
||||
className='max-w-[35rem] max-h-[40rem] dense'
|
||||
hidden={!hoverOperation}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -119,7 +119,6 @@ export function PickMultiConstituenta({
|
|||
isOwned={cstID => !schema.cstByID.get(cstID)?.is_inherited}
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
emptySelection={value.length === 0}
|
||||
className='w-fit'
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -21,7 +21,6 @@ interface ToolbarGraphSelectionProps extends Styling {
|
|||
graph: Graph;
|
||||
isCore: (item: number) => boolean;
|
||||
isOwned?: (item: number) => boolean;
|
||||
emptySelection?: boolean;
|
||||
}
|
||||
|
||||
export function ToolbarGraphSelection({
|
||||
|
|
@ -31,9 +30,10 @@ export function ToolbarGraphSelection({
|
|||
isCore,
|
||||
isOwned,
|
||||
onChange,
|
||||
emptySelection,
|
||||
...restProps
|
||||
}: ToolbarGraphSelectionProps) {
|
||||
const emptySelection = selected.length === 0;
|
||||
|
||||
function handleSelectCore() {
|
||||
const core = [...graph.nodes.keys()].filter(isCore);
|
||||
onChange([...core, ...graph.expandInputs(core)]);
|
||||
|
|
|
|||
|
|
@ -4,16 +4,10 @@ interface SelectedCounterProps {
|
|||
totalCount: number;
|
||||
selectedCount: number;
|
||||
position?: string;
|
||||
hideZero?: boolean;
|
||||
}
|
||||
|
||||
export function SelectedCounter({
|
||||
totalCount,
|
||||
selectedCount,
|
||||
hideZero,
|
||||
position = 'top-0 left-0'
|
||||
}: SelectedCounterProps) {
|
||||
if (selectedCount === 0 && hideZero) {
|
||||
export function SelectedCounter({ totalCount, selectedCount, position = 'top-0 left-0' }: SelectedCounterProps) {
|
||||
if (selectedCount === 0) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -1,11 +1,8 @@
|
|||
'use client';
|
||||
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import { toast } from 'react-toastify';
|
||||
import {
|
||||
type Edge,
|
||||
getNodesBounds,
|
||||
getViewportForBounds,
|
||||
MarkerType,
|
||||
type Node,
|
||||
ReactFlow,
|
||||
|
|
@ -15,21 +12,16 @@ import {
|
|||
useReactFlow,
|
||||
useStoreApi
|
||||
} from 'reactflow';
|
||||
import clsx from 'clsx';
|
||||
import { toPng } from 'html-to-image';
|
||||
import { useDebounce } from 'use-debounce';
|
||||
|
||||
import { Overlay } from '@/components/Container';
|
||||
import { useMainHeight } from '@/stores/appLayout';
|
||||
import { useDialogsStore } from '@/stores/dialogs';
|
||||
import { useTooltipsStore } from '@/stores/tooltips';
|
||||
import { APP_COLORS } from '@/styling/colors';
|
||||
import { PARAMETER } from '@/utils/constants';
|
||||
import { errorMsg } from '@/utils/labels';
|
||||
|
||||
import { CstType } from '../../../backend/types';
|
||||
import { useMutatingRSForm } from '../../../backend/useMutatingRSForm';
|
||||
import { colorBgGraphNode } from '../../../colors';
|
||||
import { InfoConstituenta } from '../../../components/InfoConstituenta';
|
||||
import { ToolbarGraphSelection } from '../../../components/ToolbarGraphSelection';
|
||||
import { type IConstituenta, type IRSForm } from '../../../models/rsform';
|
||||
import { isBasicConcept } from '../../../models/rsformAPI';
|
||||
|
|
@ -46,12 +38,8 @@ import { ToolbarFocusedCst } from './ToolbarFocusedCst';
|
|||
import { ToolbarTermGraph } from './ToolbarTermGraph';
|
||||
import { ViewHidden } from './ViewHidden';
|
||||
|
||||
const ZOOM_MAX = 3;
|
||||
const ZOOM_MIN = 0.25;
|
||||
|
||||
// ratio to client size used to determine which side of screen popup should be
|
||||
const HOVER_LIMIT_X = 0.4;
|
||||
const HOVER_LIMIT_Y = 0.6;
|
||||
export const ZOOM_MAX = 3;
|
||||
export const ZOOM_MIN = 0.25;
|
||||
|
||||
export function TGFlow() {
|
||||
const mainHeight = useMainHeight();
|
||||
|
|
@ -65,19 +53,17 @@ export function TGFlow() {
|
|||
selected,
|
||||
setSelected,
|
||||
navigateCst,
|
||||
createCst,
|
||||
toggleSelect,
|
||||
canDeleteSelected,
|
||||
promptDeleteCst
|
||||
} = useRSEdit();
|
||||
|
||||
const showParams = useDialogsStore(state => state.showGraphParams);
|
||||
|
||||
const filter = useTermGraphStore(state => state.filter);
|
||||
const setFilter = useTermGraphStore(state => state.setFilter);
|
||||
const coloring = useTermGraphStore(state => state.coloring);
|
||||
const setColoring = useTermGraphStore(state => state.setColoring);
|
||||
|
||||
const setActiveCst = useTooltipsStore(state => state.setActiveCst);
|
||||
|
||||
const [nodes, setNodes, onNodesChange] = useNodesState([]);
|
||||
const [edges, setEdges] = useEdgesState([]);
|
||||
|
||||
|
|
@ -85,14 +71,7 @@ export function TGFlow() {
|
|||
const filteredGraph = produceFilteredGraph(schema, filter, focusCst);
|
||||
const [hidden, setHidden] = useState<number[]>([]);
|
||||
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
const [hoverID, setHoverID] = useState<number | null>(null);
|
||||
const hoverCst = hoverID && schema.cstByID.get(hoverID);
|
||||
const [hoverCstDebounced] = useDebounce(hoverCst, PARAMETER.graphPopupDelay);
|
||||
const [hoverLeft, setHoverLeft] = useState(true);
|
||||
|
||||
const [needReset, setNeedReset] = useState(true);
|
||||
const [toggleResetView, setToggleResetView] = useState(false);
|
||||
|
||||
function onSelectionChange({ nodes }: { nodes: Node[] }) {
|
||||
const ids = nodes.map(node => Number(node.id));
|
||||
|
|
@ -115,7 +94,6 @@ export function TGFlow() {
|
|||
}
|
||||
});
|
||||
setHidden(newDismissed);
|
||||
setHoverID(null);
|
||||
}, [schema, filteredGraph]);
|
||||
|
||||
const resetNodes = useCallback(() => {
|
||||
|
|
@ -177,62 +155,11 @@ export function TGFlow() {
|
|||
resetNodes();
|
||||
}, [needReset, schema, resetNodes, flow.viewportInitialized]);
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
flow.fitView({ duration: PARAMETER.zoomDuration });
|
||||
}, PARAMETER.minimalTimeout);
|
||||
}, [toggleResetView, flow, focusCst, filter]);
|
||||
|
||||
function handleSetSelected(newSelection: number[]) {
|
||||
setSelected(newSelection);
|
||||
addSelectedNodes(newSelection.map(id => String(id)));
|
||||
}
|
||||
|
||||
function handleCreateCst() {
|
||||
const definition = selected.map(id => schema.cstByID.get(id)!.alias).join(' ');
|
||||
createCst(selected.length === 0 ? CstType.BASE : CstType.TERM, false, definition);
|
||||
}
|
||||
|
||||
function handleDeleteCst() {
|
||||
if (!canDeleteSelected) {
|
||||
return;
|
||||
}
|
||||
promptDeleteCst();
|
||||
}
|
||||
|
||||
function handleSaveImage() {
|
||||
const canvas: HTMLElement | null = document.querySelector('.react-flow__viewport');
|
||||
if (canvas === null) {
|
||||
toast.error(errorMsg.imageFailed);
|
||||
return;
|
||||
}
|
||||
|
||||
const imageWidth = PARAMETER.ossImageWidth;
|
||||
const imageHeight = PARAMETER.ossImageHeight;
|
||||
const nodesBounds = getNodesBounds(nodes);
|
||||
const viewport = getViewportForBounds(nodesBounds, imageWidth, imageHeight, ZOOM_MIN, ZOOM_MAX);
|
||||
toPng(canvas, {
|
||||
backgroundColor: APP_COLORS.bgDefault,
|
||||
width: imageWidth,
|
||||
height: imageHeight,
|
||||
style: {
|
||||
width: String(imageWidth),
|
||||
height: String(imageHeight),
|
||||
transform: `translate(${viewport.x}px, ${viewport.y}px) scale(${viewport.zoom * 2})`
|
||||
}
|
||||
})
|
||||
.then(dataURL => {
|
||||
const a = document.createElement('a');
|
||||
a.setAttribute('download', `${schema.alias}.png`);
|
||||
a.setAttribute('href', dataURL);
|
||||
a.click();
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(error);
|
||||
toast.error(errorMsg.imageFailed);
|
||||
});
|
||||
}
|
||||
|
||||
function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {
|
||||
if (isProcessing) {
|
||||
return;
|
||||
|
|
@ -240,7 +167,7 @@ export function TGFlow() {
|
|||
if (event.key === 'Escape') {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
setFocusCst(null);
|
||||
handleSetFocus(null);
|
||||
handleSetSelected([]);
|
||||
return;
|
||||
}
|
||||
|
|
@ -250,31 +177,24 @@ export function TGFlow() {
|
|||
if (event.key === 'Delete') {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
handleDeleteCst();
|
||||
if (canDeleteSelected) {
|
||||
promptDeleteCst();
|
||||
}
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
function handleFoldDerived() {
|
||||
setFilter({
|
||||
...filter,
|
||||
foldDerived: !filter.foldDerived
|
||||
});
|
||||
setTimeout(() => {
|
||||
setToggleResetView(prev => !prev);
|
||||
}, PARAMETER.graphRefreshDelay);
|
||||
}
|
||||
|
||||
function handleSetFocus(cstID: number | null) {
|
||||
if (cstID === null) {
|
||||
setFocusCst(null);
|
||||
} else {
|
||||
const target = schema.cstByID.get(cstID) ?? null;
|
||||
setFocusCst(prev => (prev === target ? null : target));
|
||||
if (target) {
|
||||
}
|
||||
setSelected([]);
|
||||
}
|
||||
}
|
||||
setTimeout(() => {
|
||||
flow.fitView({ duration: PARAMETER.zoomDuration });
|
||||
}, PARAMETER.minimalTimeout);
|
||||
}
|
||||
|
||||
function handleNodeContextMenu(event: React.MouseEvent, cstID: number) {
|
||||
|
|
@ -289,32 +209,18 @@ export function TGFlow() {
|
|||
navigateCst(cstID);
|
||||
}
|
||||
|
||||
function handleNodeEnter(event: React.MouseEvent, cstID: number) {
|
||||
setHoverID(cstID);
|
||||
setHoverLeft(
|
||||
event.clientX / window.innerWidth >= HOVER_LIMIT_X || event.clientY / window.innerHeight >= HOVER_LIMIT_Y
|
||||
);
|
||||
function handleNodeEnter(cstID: number) {
|
||||
const cst = schema.cstByID.get(cstID);
|
||||
if (cst) {
|
||||
setActiveCst(cst);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Overlay position='cc-tab-tools' className='flex flex-col items-center rounded-b-2xl cc-blur'>
|
||||
<ToolbarTermGraph
|
||||
noText={filter.noText}
|
||||
foldDerived={filter.foldDerived}
|
||||
showParamsDialog={() => showParams()}
|
||||
onCreate={handleCreateCst}
|
||||
onDelete={handleDeleteCst}
|
||||
onFitView={() => setToggleResetView(prev => !prev)}
|
||||
onSaveImage={handleSaveImage}
|
||||
toggleFoldDerived={handleFoldDerived}
|
||||
toggleNoText={() =>
|
||||
setFilter({
|
||||
...filter,
|
||||
noText: !filter.noText
|
||||
})
|
||||
}
|
||||
/>
|
||||
<ToolbarTermGraph />
|
||||
{focusCst ? <ToolbarFocusedCst focusedCst={focusCst} onResetFocus={() => handleSetFocus(null)} /> : null}
|
||||
{!focusCst ? (
|
||||
<ToolbarGraphSelection
|
||||
graph={schema.graph}
|
||||
|
|
@ -325,59 +231,17 @@ export function TGFlow() {
|
|||
isOwned={schema.inheritance.length > 0 ? cstID => !schema.cstByID.get(cstID)?.is_inherited : undefined}
|
||||
value={selected}
|
||||
onChange={handleSetSelected}
|
||||
emptySelection={selected.length === 0}
|
||||
/>
|
||||
) : null}
|
||||
{focusCst ? (
|
||||
<ToolbarFocusedCst
|
||||
center={focusCst}
|
||||
reset={() => handleSetFocus(null)}
|
||||
showInputs={filter.focusShowInputs}
|
||||
showOutputs={filter.focusShowOutputs}
|
||||
toggleShowInputs={() =>
|
||||
setFilter({
|
||||
...filter,
|
||||
focusShowInputs: !filter.focusShowInputs
|
||||
})
|
||||
}
|
||||
toggleShowOutputs={() =>
|
||||
setFilter({
|
||||
...filter,
|
||||
focusShowOutputs: !filter.focusShowOutputs
|
||||
})
|
||||
}
|
||||
/>
|
||||
) : null}
|
||||
</Overlay>
|
||||
|
||||
<div className='cc-fade-in' tabIndex={-1} onKeyDown={handleKeyDown}>
|
||||
<SelectedCounter
|
||||
hideZero
|
||||
totalCount={schema.stats?.count_all ?? 0}
|
||||
selectedCount={selected.length}
|
||||
position='top-[4.4rem] sm:top-[4.1rem] left-[0.5rem] sm:left-[0.65rem]'
|
||||
/>
|
||||
|
||||
{hoverCstDebounced ? (
|
||||
<Overlay
|
||||
layer='z-tooltip'
|
||||
position={clsx('top-[3.5rem]', { 'left-[2.6rem]': hoverLeft, 'right-[2.6rem]': !hoverLeft })}
|
||||
className={clsx(
|
||||
'w-[25rem] max-h-[calc(100dvh-15rem)]',
|
||||
'px-3',
|
||||
'cc-scroll-y cc-fade-in',
|
||||
'border shadow-md',
|
||||
'clr-input cc-fade-in',
|
||||
'text-sm'
|
||||
)}
|
||||
style={{
|
||||
opacity: !isDragging && hoverCst && hoverCst === hoverCstDebounced ? 1 : 0
|
||||
}}
|
||||
>
|
||||
<InfoConstituenta className='pt-1 pb-2' data={hoverCstDebounced} />
|
||||
</Overlay>
|
||||
) : null}
|
||||
|
||||
<Overlay position='top-[6.15rem] sm:top-[5.9rem] left-0' className='flex gap-1 pointer-events-none'>
|
||||
<div className='flex flex-col ml-2 w-[13.5rem]'>
|
||||
<GraphSelectors schema={schema} coloring={coloring} onChangeColoring={setColoring} />
|
||||
|
|
@ -405,10 +269,7 @@ export function TGFlow() {
|
|||
edgeTypes={TGEdgeTypes}
|
||||
maxZoom={ZOOM_MAX}
|
||||
minZoom={ZOOM_MIN}
|
||||
onNodeDragStart={() => setIsDragging(true)}
|
||||
onNodeDragStop={() => setIsDragging(false)}
|
||||
onNodeMouseEnter={(event, node) => handleNodeEnter(event, Number(node.id))}
|
||||
onNodeMouseLeave={() => setHoverID(null)}
|
||||
onNodeMouseEnter={(_, node) => handleNodeEnter(Number(node.id))}
|
||||
onNodeDoubleClick={(event, node) => handleNodeDoubleClick(event, Number(node.id))}
|
||||
onNodeContextMenu={(event, node) => handleNodeContextMenu(event, Number(node.id))}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
'use client';
|
||||
|
||||
import { useTermGraphStore } from '@/features/rsform/stores/termGraph';
|
||||
|
||||
import { MiniButton } from '@/components/Control';
|
||||
import { IconGraphInputs, IconGraphOutputs, IconReset } from '@/components/Icons';
|
||||
import { APP_COLORS } from '@/styling/colors';
|
||||
|
|
@ -8,35 +10,40 @@ import { type IConstituenta } from '../../../models/rsform';
|
|||
import { useRSEdit } from '../RSEditContext';
|
||||
|
||||
interface ToolbarFocusedCstProps {
|
||||
center: IConstituenta;
|
||||
showInputs: boolean;
|
||||
showOutputs: boolean;
|
||||
|
||||
reset: () => void;
|
||||
toggleShowInputs: () => void;
|
||||
toggleShowOutputs: () => void;
|
||||
focusedCst: IConstituenta;
|
||||
onResetFocus: () => void;
|
||||
}
|
||||
|
||||
export function ToolbarFocusedCst({
|
||||
center,
|
||||
reset,
|
||||
showInputs,
|
||||
showOutputs,
|
||||
toggleShowInputs,
|
||||
toggleShowOutputs
|
||||
}: ToolbarFocusedCstProps) {
|
||||
export function ToolbarFocusedCst({ focusedCst, onResetFocus }: ToolbarFocusedCstProps) {
|
||||
const { deselectAll } = useRSEdit();
|
||||
|
||||
const filter = useTermGraphStore(state => state.filter);
|
||||
const setFilter = useTermGraphStore(state => state.setFilter);
|
||||
|
||||
function resetSelection() {
|
||||
reset();
|
||||
onResetFocus();
|
||||
deselectAll();
|
||||
}
|
||||
|
||||
function handleShowInputs() {
|
||||
setFilter({
|
||||
...filter,
|
||||
focusShowInputs: !filter.focusShowInputs
|
||||
});
|
||||
}
|
||||
|
||||
function handleShowOutputs() {
|
||||
setFilter({
|
||||
...filter,
|
||||
focusShowOutputs: !filter.focusShowOutputs
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='items-center cc-icons'>
|
||||
<div className='w-[7.8rem] text-right select-none' style={{ color: APP_COLORS.fgPurple }}>
|
||||
Фокус
|
||||
<b className='px-1'> {center.alias} </b>
|
||||
<b className='px-1'> {focusedCst.alias} </b>
|
||||
</div>
|
||||
<MiniButton
|
||||
titleHtml='Сбросить фокус'
|
||||
|
|
@ -44,14 +51,14 @@ export function ToolbarFocusedCst({
|
|||
onClick={resetSelection}
|
||||
/>
|
||||
<MiniButton
|
||||
title={showInputs ? 'Скрыть поставщиков' : 'Отобразить поставщиков'}
|
||||
icon={<IconGraphInputs size='1.25rem' className={showInputs ? 'icon-green' : 'icon-primary'} />}
|
||||
onClick={toggleShowInputs}
|
||||
title={filter.focusShowInputs ? 'Скрыть поставщиков' : 'Отобразить поставщиков'}
|
||||
icon={<IconGraphInputs size='1.25rem' className={filter.focusShowInputs ? 'icon-green' : 'icon-primary'} />}
|
||||
onClick={handleShowInputs}
|
||||
/>
|
||||
<MiniButton
|
||||
title={showOutputs ? 'Скрыть потребителей' : 'Отобразить потребителей'}
|
||||
icon={<IconGraphOutputs size='1.25rem' className={showOutputs ? 'icon-green' : 'icon-primary'} />}
|
||||
onClick={toggleShowOutputs}
|
||||
title={filter.focusShowOutputs ? 'Скрыть потребителей' : 'Отобразить потребителей'}
|
||||
icon={<IconGraphOutputs size='1.25rem' className={filter.focusShowOutputs ? 'icon-green' : 'icon-primary'} />}
|
||||
onClick={handleShowOutputs}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,7 +1,12 @@
|
|||
import { toast } from 'react-toastify';
|
||||
import { getNodesBounds, getViewportForBounds, useNodes, useReactFlow } from 'reactflow';
|
||||
import clsx from 'clsx';
|
||||
import { toPng } from 'html-to-image';
|
||||
|
||||
import { BadgeHelp, HelpTopic } from '@/features/help';
|
||||
import { MiniSelectorOSS } from '@/features/library';
|
||||
import { CstType } from '@/features/rsform/backend/types';
|
||||
import { useTermGraphStore } from '@/features/rsform/stores/termGraph';
|
||||
|
||||
import { MiniButton } from '@/components/Control';
|
||||
import {
|
||||
|
|
@ -17,39 +22,34 @@ import {
|
|||
IconTypeGraph
|
||||
} from '@/components/Icons';
|
||||
import { useDialogsStore } from '@/stores/dialogs';
|
||||
import { usePreferencesStore } from '@/stores/preferences';
|
||||
import { APP_COLORS } from '@/styling/colors';
|
||||
import { PARAMETER } from '@/utils/constants';
|
||||
import { errorMsg } from '@/utils/labels';
|
||||
|
||||
import { useMutatingRSForm } from '../../../backend/useMutatingRSForm';
|
||||
import { useRSEdit } from '../RSEditContext';
|
||||
|
||||
interface ToolbarTermGraphProps {
|
||||
noText: boolean;
|
||||
foldDerived: boolean;
|
||||
import { ZOOM_MAX, ZOOM_MIN } from './TGFlow';
|
||||
|
||||
showParamsDialog: () => void;
|
||||
onCreate: () => void;
|
||||
onDelete: () => void;
|
||||
onFitView: () => void;
|
||||
onSaveImage: () => void;
|
||||
|
||||
toggleFoldDerived: () => void;
|
||||
toggleNoText: () => void;
|
||||
}
|
||||
|
||||
export function ToolbarTermGraph({
|
||||
noText,
|
||||
foldDerived,
|
||||
toggleNoText,
|
||||
toggleFoldDerived,
|
||||
showParamsDialog,
|
||||
onCreate,
|
||||
onDelete,
|
||||
onFitView,
|
||||
onSaveImage
|
||||
}: ToolbarTermGraphProps) {
|
||||
export function ToolbarTermGraph() {
|
||||
const isProcessing = useMutatingRSForm();
|
||||
const darkMode = usePreferencesStore(state => state.darkMode);
|
||||
const {
|
||||
schema, //
|
||||
selected,
|
||||
navigateOss,
|
||||
isContentEditable,
|
||||
canDeleteSelected,
|
||||
createCst,
|
||||
promptDeleteCst
|
||||
} = useRSEdit();
|
||||
const showTypeGraph = useDialogsStore(state => state.showShowTypeGraph);
|
||||
const { schema, navigateOss, isContentEditable, canDeleteSelected } = useRSEdit();
|
||||
const showParams = useDialogsStore(state => state.showGraphParams);
|
||||
const filter = useTermGraphStore(state => state.filter);
|
||||
const setFilter = useTermGraphStore(state => state.setFilter);
|
||||
const nodes = useNodes();
|
||||
const flow = useReactFlow();
|
||||
|
||||
function handleShowTypeGraph() {
|
||||
const typeInfo = schema.items.map(item => ({
|
||||
|
|
@ -60,6 +60,74 @@ export function ToolbarTermGraph({
|
|||
showTypeGraph({ items: typeInfo });
|
||||
}
|
||||
|
||||
function handleCreateCst() {
|
||||
const definition = selected.map(id => schema.cstByID.get(id)!.alias).join(' ');
|
||||
createCst(selected.length === 0 ? CstType.BASE : CstType.TERM, false, definition);
|
||||
}
|
||||
|
||||
function handleDeleteCst() {
|
||||
if (!canDeleteSelected || isProcessing) {
|
||||
return;
|
||||
}
|
||||
promptDeleteCst();
|
||||
}
|
||||
|
||||
function handleToggleNoText() {
|
||||
setFilter({
|
||||
...filter,
|
||||
noText: !filter.noText
|
||||
});
|
||||
}
|
||||
|
||||
function handleSaveImage() {
|
||||
const canvas: HTMLElement | null = document.querySelector('.react-flow__viewport');
|
||||
if (canvas === null) {
|
||||
toast.error(errorMsg.imageFailed);
|
||||
return;
|
||||
}
|
||||
|
||||
const imageWidth = PARAMETER.ossImageWidth;
|
||||
const imageHeight = PARAMETER.ossImageHeight;
|
||||
const nodesBounds = getNodesBounds(nodes);
|
||||
const viewport = getViewportForBounds(nodesBounds, imageWidth, imageHeight, ZOOM_MIN, ZOOM_MAX);
|
||||
toPng(canvas, {
|
||||
backgroundColor: darkMode ? APP_COLORS.bgDefaultDark : APP_COLORS.bgDefaultLight,
|
||||
width: imageWidth,
|
||||
height: imageHeight,
|
||||
style: {
|
||||
width: String(imageWidth),
|
||||
height: String(imageHeight),
|
||||
transform: `translate(${viewport.x}px, ${viewport.y}px) scale(${viewport.zoom * 2})`
|
||||
}
|
||||
})
|
||||
.then(dataURL => {
|
||||
const a = document.createElement('a');
|
||||
a.setAttribute('download', `${schema.alias}.png`);
|
||||
a.setAttribute('href', dataURL);
|
||||
a.click();
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(error);
|
||||
toast.error(errorMsg.imageFailed);
|
||||
});
|
||||
}
|
||||
|
||||
function handleFitView() {
|
||||
setTimeout(() => {
|
||||
flow.fitView({ duration: PARAMETER.zoomDuration });
|
||||
}, PARAMETER.minimalTimeout);
|
||||
}
|
||||
|
||||
function handleFoldDerived() {
|
||||
setFilter({
|
||||
...filter,
|
||||
foldDerived: !filter.foldDerived
|
||||
});
|
||||
setTimeout(() => {
|
||||
flow.fitView({ duration: PARAMETER.zoomDuration });
|
||||
}, PARAMETER.graphRefreshDelay);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='cc-icons'>
|
||||
{schema.oss.length > 0 ? (
|
||||
|
|
@ -71,41 +139,41 @@ export function ToolbarTermGraph({
|
|||
<MiniButton
|
||||
title='Настройки фильтрации узлов и связей'
|
||||
icon={<IconFilter size='1.25rem' className='icon-primary' />}
|
||||
onClick={showParamsDialog}
|
||||
onClick={showParams}
|
||||
/>
|
||||
<MiniButton
|
||||
icon={<IconFitImage size='1.25rem' className='icon-primary' />}
|
||||
title='Граф целиком'
|
||||
onClick={onFitView}
|
||||
onClick={handleFitView}
|
||||
/>
|
||||
<MiniButton
|
||||
title={!noText ? 'Скрыть текст' : 'Отобразить текст'}
|
||||
title={!filter.noText ? 'Скрыть текст' : 'Отобразить текст'}
|
||||
icon={
|
||||
!noText ? (
|
||||
!filter.noText ? (
|
||||
<IconText size='1.25rem' className='icon-green' />
|
||||
) : (
|
||||
<IconTextOff size='1.25rem' className='icon-primary' />
|
||||
)
|
||||
}
|
||||
onClick={toggleNoText}
|
||||
onClick={handleToggleNoText}
|
||||
/>
|
||||
<MiniButton
|
||||
title={!foldDerived ? 'Скрыть порожденные' : 'Отобразить порожденные'}
|
||||
title={!filter.foldDerived ? 'Скрыть порожденные' : 'Отобразить порожденные'}
|
||||
icon={
|
||||
!foldDerived ? (
|
||||
!filter.foldDerived ? (
|
||||
<IconClustering size='1.25rem' className='icon-green' />
|
||||
) : (
|
||||
<IconClusteringOff size='1.25rem' className='icon-primary' />
|
||||
)
|
||||
}
|
||||
onClick={toggleFoldDerived}
|
||||
onClick={handleFoldDerived}
|
||||
/>
|
||||
{isContentEditable ? (
|
||||
<MiniButton
|
||||
title='Новая конституента'
|
||||
icon={<IconNewItem size='1.25rem' className='icon-green' />}
|
||||
disabled={isProcessing}
|
||||
onClick={onCreate}
|
||||
onClick={handleCreateCst}
|
||||
/>
|
||||
) : null}
|
||||
{isContentEditable ? (
|
||||
|
|
@ -113,7 +181,7 @@ export function ToolbarTermGraph({
|
|||
title='Удалить выбранные'
|
||||
icon={<IconDestroy size='1.25rem' className='icon-red' />}
|
||||
disabled={!canDeleteSelected || isProcessing}
|
||||
onClick={onDelete}
|
||||
onClick={handleDeleteCst}
|
||||
/>
|
||||
) : null}
|
||||
<MiniButton
|
||||
|
|
@ -124,7 +192,7 @@ export function ToolbarTermGraph({
|
|||
<MiniButton
|
||||
icon={<IconImage size='1.25rem' className='icon-primary' />}
|
||||
title='Сохранить изображение'
|
||||
onClick={onSaveImage}
|
||||
onClick={handleSaveImage}
|
||||
/>
|
||||
<BadgeHelp
|
||||
topic={HelpTopic.UI_GRAPH_TERM}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
import { Handle, Position } from 'reactflow';
|
||||
|
||||
import { APP_COLORS } from '@/styling/colors';
|
||||
import { globalIDs } from '@/utils/constants';
|
||||
|
||||
const DESCRIPTION_THRESHOLD = 15;
|
||||
const LABEL_THRESHOLD = 3;
|
||||
|
|
@ -39,6 +40,7 @@ export function TGNode(node: TGNodeInternal) {
|
|||
backgroundColor: !node.selected ? node.data.fill : APP_COLORS.bgActiveSelection,
|
||||
fontSize: node.data.label.length > LABEL_THRESHOLD ? FONT_SIZE_MED : FONT_SIZE_MAX
|
||||
}}
|
||||
data-tooltip-id={globalIDs.constituenta_tooltip}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user