M: Improve Typification UI
Some checks are pending
Frontend CI / build (22.x) (push) Waiting to run

This commit is contained in:
Ivan 2024-11-21 22:14:22 +03:00
parent 5eace56968
commit 8634fa14ea
4 changed files with 26 additions and 7 deletions

View File

@ -15,7 +15,8 @@ import {
IconSave, IconSave,
IconSettings, IconSettings,
IconStatusOK, IconStatusOK,
IconTree IconTree,
IconTypeGraph
} from '@/components/Icons'; } from '@/components/Icons';
import LinkTopic from '@/components/ui/LinkTopic'; import LinkTopic from '@/components/ui/LinkTopic';
import { useConceptOptions } from '@/context/ConceptOptionsContext'; import { useConceptOptions } from '@/context/ConceptOptionsContext';
@ -90,6 +91,10 @@ function HelpRSEditor() {
<li> <li>
<IconControls className='inline-icon' /> специальная клавиатура и горячие клавиши <IconControls className='inline-icon' /> специальная клавиатура и горячие клавиши
</li> </li>
<li>
<IconTypeGraph className='inline-icon' /> отображение{' '}
<LinkTopic text='графа ступеней типизации' topic={HelpTopic.UI_TYPE_GRAPH} />
</li>
<li> <li>
<IconTree className='inline-icon' /> отображение{' '} <IconTree className='inline-icon' /> отображение{' '}
<LinkTopic text='дерева разбора' topic={HelpTopic.UI_FORMULA_TREE} /> <LinkTopic text='дерева разбора' topic={HelpTopic.UI_FORMULA_TREE} />

View File

@ -144,7 +144,7 @@ function FormConstituenta({
cstUpdate(data, () => toast.success(information.changesSaved)); cstUpdate(data, () => toast.success(information.changesSaved));
} }
function handleTypificationClick(event: CProps.EventMouse) { function handleTypeGraph(event: CProps.EventMouse) {
if (!state || (localParse && !localParse.parseResult) || state.parse.status !== ParsingStatus.VERIFIED) { if (!state || (localParse && !localParse.parseResult) || state.parse.status !== ParsingStatus.VERIFIED) {
toast.error(errors.typeStructureFailed); toast.error(errors.typeStructureFailed);
return; return;
@ -196,10 +196,8 @@ function FormConstituenta({
noOutline noOutline
readOnly readOnly
label='Типизация' label='Типизация'
title='Отобразить структуру типизации'
value={typification} value={typification}
colors='clr-app clr-text-default cursor-pointer' colors='clr-app clr-text-default cursor-default'
onClick={event => handleTypificationClick(event)}
/> />
) : null} ) : null}
{state ? ( {state ? (
@ -229,6 +227,7 @@ function FormConstituenta({
onChangeTypification={setTypification} onChangeTypification={setTypification}
onChangeLocalParse={setLocalParse} onChangeLocalParse={setLocalParse}
onOpenEdit={onOpenEdit} onOpenEdit={onOpenEdit}
onShowTypeGraph={handleTypeGraph}
/> />
</AnimateFade> </AnimateFade>
<AnimateFade key='cst_definition_fade' hideContent={!state.definition_raw && isElementary}> <AnimateFade key='cst_definition_fade' hideContent={!state.definition_raw && isElementary}>

View File

@ -43,6 +43,7 @@ interface EditorRSExpressionProps {
onChangeLocalParse: (typification: IExpressionParse | undefined) => void; onChangeLocalParse: (typification: IExpressionParse | undefined) => void;
onChangeExpression: (newValue: string) => void; onChangeExpression: (newValue: string) => void;
onOpenEdit?: (cstID: ConstituentaID) => void; onOpenEdit?: (cstID: ConstituentaID) => void;
onShowTypeGraph: (event: CProps.EventMouse) => void;
} }
function EditorRSExpression({ function EditorRSExpression({
@ -54,6 +55,7 @@ function EditorRSExpression({
onChangeLocalParse, onChangeLocalParse,
onChangeExpression, onChangeExpression,
onOpenEdit, onOpenEdit,
onShowTypeGraph,
...restProps ...restProps
}: EditorRSExpressionProps) { }: EditorRSExpressionProps) {
const model = useRSForm(); const model = useRSForm();
@ -171,6 +173,7 @@ function EditorRSExpression({
showControls={showControls} showControls={showControls}
showAST={handleShowAST} showAST={handleShowAST}
toggleControls={() => setShowControls(prev => !prev)} toggleControls={() => setShowControls(prev => !prev)}
showTypeGraph={onShowTypeGraph}
/> />
<Overlay <Overlay

View File

@ -1,4 +1,4 @@
import { IconControls, IconTree } from '@/components/Icons'; import { IconControls, IconTree, IconTypeGraph } from '@/components/Icons';
import { CProps } from '@/components/props'; import { CProps } from '@/components/props';
import MiniButton from '@/components/ui/MiniButton'; import MiniButton from '@/components/ui/MiniButton';
import Overlay from '@/components/ui/Overlay'; import Overlay from '@/components/ui/Overlay';
@ -10,9 +10,16 @@ interface ToolbarRSExpressionProps {
toggleControls: () => void; toggleControls: () => void;
showAST: (event: CProps.EventMouse) => void; showAST: (event: CProps.EventMouse) => void;
showTypeGraph: (event: CProps.EventMouse) => void;
} }
function ToolbarRSExpression({ disabled, showControls, toggleControls, showAST }: ToolbarRSExpressionProps) { function ToolbarRSExpression({
disabled,
showControls,
showTypeGraph,
toggleControls,
showAST
}: ToolbarRSExpressionProps) {
const model = useRSForm(); const model = useRSForm();
return ( return (
@ -24,6 +31,11 @@ function ToolbarRSExpression({ disabled, showControls, toggleControls, showAST }
onClick={toggleControls} onClick={toggleControls}
/> />
) : null} ) : null}
<MiniButton
icon={<IconTypeGraph size='1.25rem' className='icon-primary' />}
title='Граф ступеней типизации'
onClick={showTypeGraph}
/>
<MiniButton <MiniButton
title='Дерево разбора выражения' title='Дерево разбора выражения'
onClick={showAST} onClick={showAST}