Add an icon for variables, parameters and properties in expression autocompletions (#6609)

This commit is contained in:
D8H
2024-06-02 17:14:22 +02:00
committed by GitHub
parent ddf426c2fd
commit 199d315e29
7 changed files with 69 additions and 13 deletions

View File

@@ -146,6 +146,19 @@ struct GD_CORE_API ExpressionCompletionDescription {
return *this;
}
/**
* \brief Return the scope of the variable, for a variable completion.
*/
gd::VariablesContainer::SourceType GetVariableScope() const {
return variableScope;
}
ExpressionCompletionDescription &
SetVariableScope(gd::VariablesContainer::SourceType variableScope_) {
variableScope = variableScope_;
return *this;
}
/**
* \brief Return the prefix that must be completed.
*/
@@ -324,6 +337,7 @@ struct GD_CORE_API ExpressionCompletionDescription {
private:
CompletionKind completionKind;
gd::Variable::Type variableType;
gd::VariablesContainer::SourceType variableScope;
gd::String type;
gd::String prefix;
gd::String completion;
@@ -1059,6 +1073,7 @@ class GD_CORE_API ExpressionCompletionFinder
location.GetEndPosition());
description.SetCompletion(variableName);
description.SetVariableType(variable.GetType());
description.SetVariableScope(projectScopedContainers.GetVariablesContainersList().GetVariablesContainerFromVariableName(variableName).GetSourceType());
completions.push_back(description);
if (eagerlyCompleteIfExactMatch && variableName == search) {

View File

@@ -2597,6 +2597,7 @@ interface ExpressionCompletionDescription {
ExpressionCompletionDescription_CompletionKind GetCompletionKind();
[Const, Ref] DOMString GetType();
Variable_Type GetVariableType();
VariablesContainer_SourceType GetVariableScope();
[Const, Ref] DOMString GetPrefix();
[Const, Ref] DOMString GetCompletion();
[Const, Ref] DOMString GetObjectName();

View File

@@ -1963,6 +1963,7 @@ export class ExpressionCompletionDescription extends EmscriptenObject {
getCompletionKind(): ExpressionCompletionDescription_CompletionKind;
getType(): string;
getVariableType(): Variable_Type;
getVariableScope(): VariablesContainer_SourceType;
getPrefix(): string;
getCompletion(): string;
getObjectName(): string;

View File

@@ -10,6 +10,7 @@ declare class gdExpressionCompletionDescription {
getCompletionKind(): ExpressionCompletionDescription_CompletionKind;
getType(): string;
getVariableType(): Variable_Type;
getVariableScope(): VariablesContainer_SourceType;
getPrefix(): string;
getCompletion(): string;
getObjectName(): string;

View File

@@ -11,13 +11,17 @@ import ScrollView, { type ScrollViewInterface } from '../../../UI/ScrollView';
import { getVisibleParameterTypes } from './FormatExpressionCall';
import { type ParameterRenderingServiceType } from '../ParameterFieldCommons';
import { type EnumeratedInstructionOrExpressionMetadata } from '../../../InstructionOrExpression/EnumeratedInstructionOrExpressionMetadata';
import { Column, Line, Spacer } from '../../../UI/Grid';
import { Column, Line } from '../../../UI/Grid';
import ObjectsRenderingService from '../../../ObjectsRendering/ObjectsRenderingService';
import Paper from '../../../UI/Paper';
import { mapVector } from '../../../Utils/MapFor';
import { Trans } from '@lingui/macro';
import GDevelopThemeContext from '../../../UI/Theme/GDevelopThemeContext';
import { getVariableTypeToIcon } from '../../../VariablesList/VariableTypeSelector';
import { getVariableSourceIcon } from '../../ParameterFields/VariableField';
import PropertyIcon from '../../../UI/CustomSvgIcons/Settings';
import ParameterIcon from '../../../UI/CustomSvgIcons/Parameter';
import { LineStackLayout } from '../../../UI/Layout';
const gd: libGDevelop = global.gd;
@@ -84,6 +88,7 @@ const AutocompletionRow = React.forwardRef(
{
icon,
iconSrc,
secondaryIcon,
label,
parametersLabel,
isSelected,
@@ -91,6 +96,7 @@ const AutocompletionRow = React.forwardRef(
}: {|
icon: React.Node | null,
iconSrc: string | null,
secondaryIcon: React.Node | null,
label: string,
parametersLabel: string | null,
isSelected: boolean,
@@ -111,16 +117,18 @@ const AutocompletionRow = React.forwardRef(
onClick={onClick}
ref={ref}
>
{icon || (iconSrc ? <AutocompletionIcon src={iconSrc} /> : null)}
<Spacer />
<Text style={defaultTextStyle} noMargin align="left">
{isSelected ? <b>{trimmedLabel}</b> : trimmedLabel}
{parametersLabel && (
<>
(<i>{parametersLabel}</i>)
</>
)}
</Text>
<LineStackLayout noMargin>
{icon || (iconSrc ? <AutocompletionIcon src={iconSrc} /> : null)}
{secondaryIcon}
<Text style={defaultTextStyle} noMargin align="left">
{isSelected ? <b>{trimmedLabel}</b> : trimmedLabel}
{parametersLabel && (
<>
(<i>{parametersLabel}</i>)
</>
)}
</Text>
</LineStackLayout>
</ButtonBase>
);
}
@@ -300,6 +308,20 @@ export default function ExpressionAutocompletionsDisplayer({
: null;
const IconComponent =
expressionAutocompletion.kind === 'Variable'
? getVariableSourceIcon(
expressionAutocompletion.variableScope
)
: expressionAutocompletion.kind === 'Property'
? PropertyIcon
: expressionAutocompletion.kind === 'Parameter'
? ParameterIcon
: null;
const icon = IconComponent ? (
<IconComponent style={autocompletionIconSizeStyle} />
) : null;
const SecondaryIconComponent =
expressionAutocompletion.kind === 'Variable'
? getVariableTypeToIcon()[
expressionAutocompletion.variableType
@@ -319,8 +341,10 @@ export default function ExpressionAutocompletionsDisplayer({
)
)
: null;
const icon = IconComponent ? (
<IconComponent style={autocompletionIconSizeStyle} />
const secondaryIcon = SecondaryIconComponent ? (
<SecondaryIconComponent
style={autocompletionIconSizeStyle}
/>
) : null;
if (expressionAutocompletion.kind === 'Expression') {
@@ -332,6 +356,7 @@ export default function ExpressionAutocompletionsDisplayer({
key={index}
icon={icon}
iconSrc={iconSrc}
secondaryIcon={secondaryIcon}
label={label}
parametersLabel={parametersLabel}
onClick={() => onChoose(expressionAutocompletion)}

View File

@@ -50,6 +50,7 @@ export type ExpressionAutocompletion =
...BaseExpressionAutocompletion,
kind: 'Variable',
variableType: Variable_Type,
variableScope: VariablesContainer_SourceType,
|}
| {|
...BaseExpressionAutocompletion,
@@ -467,6 +468,7 @@ export const getAutocompletionsFromDescriptions = (
replacementStartPosition: completionDescription.getReplacementStartPosition(),
replacementEndPosition: completionDescription.getReplacementEndPosition(),
variableType: completionDescription.getVariableType(),
variableScope: completionDescription.getVariableScope(),
},
];
} else if (

View File

@@ -0,0 +1,11 @@
import React from 'react';
import SvgIcon from '@material-ui/core/SvgIcon';
export default React.memo(props => (
<SvgIcon {...props} width="16" height="16" viewBox="0 0 16 16" fill="none">
<path
d="m3.254 1.746c-1.299 1.883-2.013 4.062-2.203 6.254-0.1918 2.208 0.1464 4.371 1.119 6.254l0.8203-0.6953c-0.8199-1.688-1.075-3.606-0.9043-5.559 0.1698-1.941 0.7583-3.87 1.877-5.559zm10.59 0-0.8535 0.6953c0.8268 1.688 1.073 3.606 0.9023 5.559-0.1698 1.941-0.7563 3.87-1.875 5.559l0.7285 0.6953c1.299-1.883 2.01-4.062 2.201-6.254 0.1915-2.201-0.1377-4.371-1.104-6.254zm-8.117 3.1 1.539 3.332-2.721 3.512 1.416-0.007812 1.852-2.57 1.086 2.607h1.248l-1.584-3.416 2.643-3.449-1.365-0.007812-1.834 2.535-1.02-2.527z"
fill="currentColor"
/>
</SvgIcon>
));