M: Minor fix to AST viewer

This commit is contained in:
Ivan 2024-09-18 15:53:43 +03:00
parent 7f06777237
commit a753273d6d
2 changed files with 16 additions and 5 deletions

View File

@ -53,11 +53,19 @@ function DlgShowAST({ hideWindow, syntaxTree, expression }: DlgShowASTProps) {
const handleHoverOut = useCallback(() => setHoverID(undefined), []); const handleHoverOut = useCallback(() => setHoverID(undefined), []);
return ( return (
<Modal readonly hideWindow={hideWindow} className='px-6'> <Modal
<Overlay position='left-[-1rem] top-[0.25rem]'> readonly
hideWindow={hideWindow}
className='flex flex-col justify-stretch w-[calc(100dvw-3rem)] h-[calc(100dvh-6rem)]'
>
<Overlay position='left-[0.5rem] top-[0.25rem]'>
<BadgeHelp topic={HelpTopic.UI_FORMULA_TREE} className={PARAMETER.TOOLTIP_WIDTH} /> <BadgeHelp topic={HelpTopic.UI_FORMULA_TREE} className={PARAMETER.TOOLTIP_WIDTH} />
</Overlay> </Overlay>
<div className='my-2 text-lg text-center'> <Overlay
position='top-2 right-1/2 translate-x-1/2'
className='px-2 py-1 rounded-2xl cc-blur max-w-[60ch] text-lg text-center'
style={{ backgroundColor: colors.bgBlur }}
>
{!hoverNode ? expression : null} {!hoverNode ? expression : null}
{hoverNode ? ( {hoverNode ? (
<div> <div>
@ -66,8 +74,8 @@ function DlgShowAST({ hideWindow, syntaxTree, expression }: DlgShowASTProps) {
<span>{expression.slice(hoverNode.finish)}</span> <span>{expression.slice(hoverNode.finish)}</span>
</div> </div>
) : null} ) : null}
</div> </Overlay>
<div className='relative w-[calc(100vw-6rem-2px)] h-[calc(100svh-14rem-2px)]'> <div className='flex-grow relative'>
<GraphUI <GraphUI
animated={false} animated={false}
nodes={nodes} nodes={nodes}

View File

@ -12,6 +12,7 @@ import { ISyntaxTreeNode, TokenID } from '@/models/rslang';
*/ */
export interface IColorTheme { export interface IColorTheme {
bgDefault: string; bgDefault: string;
bgBlur: string;
bgInput: string; bgInput: string;
bgControls: string; bgControls: string;
bgDisabled: string; bgDisabled: string;
@ -52,6 +53,7 @@ export interface IColorTheme {
// prettier-ignore // prettier-ignore
export const lightT: IColorTheme = { export const lightT: IColorTheme = {
bgDefault: 'hsl(000, 000%, 098%)', //var(--cl-bg-100)', bgDefault: 'hsl(000, 000%, 098%)', //var(--cl-bg-100)',
bgBlur: 'hsla(000, 000%, 098%, 0.8)',
bgInput: 'var(--cl-bg-120)', bgInput: 'var(--cl-bg-120)',
bgControls: 'var(--cl-bg-80)', bgControls: 'var(--cl-bg-80)',
bgDisabled: 'var(--cl-bg-60)', bgDisabled: 'var(--cl-bg-60)',
@ -92,6 +94,7 @@ export const lightT: IColorTheme = {
// prettier-ignore // prettier-ignore
export const darkT: IColorTheme = { export const darkT: IColorTheme = {
bgDefault: 'hsl(000, 000%, 005%)', //'var(--cd-bg-100)', bgDefault: 'hsl(000, 000%, 005%)', //'var(--cd-bg-100)',
bgBlur: 'hsla(000, 000%, 005%, 0.3)',
bgInput: 'var(--cd-bg-120)', bgInput: 'var(--cd-bg-120)',
bgControls: 'var(--cd-bg-80)', bgControls: 'var(--cd-bg-80)',
bgDisabled: 'var(--cd-bg-60)', bgDisabled: 'var(--cd-bg-60)',