From e27438c735c23d41badaeef864634c818103cfae Mon Sep 17 00:00:00 2001 From: Berci Kormendy Date: Mon, 19 Feb 2024 12:20:13 +0100 Subject: [PATCH 1/2] dim prop values --- .../component-section/data-picker-popup.tsx | 4 ++ .../variables-in-scope-utils.ts | 51 +++++++++++++++---- 2 files changed, 46 insertions(+), 9 deletions(-) diff --git a/editor/src/components/inspector/sections/component-section/data-picker-popup.tsx b/editor/src/components/inspector/sections/component-section/data-picker-popup.tsx index 82a3ab81687d..98d25540a8b5 100644 --- a/editor/src/components/inspector/sections/component-section/data-picker-popup.tsx +++ b/editor/src/components/inspector/sections/component-section/data-picker-popup.tsx @@ -19,6 +19,7 @@ export interface VariableOption { depth: number variableChildren?: Array variableType: 'primitive' | 'array' | 'object' + valueMatchesPropType: boolean } export interface DataPickerPopupProps { @@ -129,6 +130,7 @@ function ValueRow({ variableOption, idx, onTweakProperty }: ValueRowProps) { displayName, depth = 0, variableChildren, + valueMatchesPropType, } = variableOption const isArray = variableOption.variableType === 'array' const tweakProperty = onTweakProperty(variableName, definedElsewhere) @@ -187,6 +189,7 @@ function ValueRow({ variableOption, idx, onTweakProperty }: ValueRowProps) { style={{ textOverflow: 'ellipsis', overflow: 'hidden', + opacity: valueMatchesPropType ? 1 : 0.5, }} > {displayName} @@ -208,6 +211,7 @@ function ValueRow({ variableOption, idx, onTweakProperty }: ValueRowProps) { textOverflow: 'ellipsis', maxWidth: 130, overflow: 'hidden', + opacity: valueMatchesPropType ? 1 : 0.5, }} > {isArray ? ( diff --git a/editor/src/components/inspector/sections/component-section/variables-in-scope-utils.ts b/editor/src/components/inspector/sections/component-section/variables-in-scope-utils.ts index 7c893e65d3b9..eb0d89c50467 100644 --- a/editor/src/components/inspector/sections/component-section/variables-in-scope-utils.ts +++ b/editor/src/components/inspector/sections/component-section/variables-in-scope-utils.ts @@ -4,7 +4,7 @@ import type { ObjectControlDescription, } from 'utopia-api/core' import type { ElementPath, PropertyPath } from '../../../../core/shared/project-file-types' -import type { VariableData, VariablesInScope } from '../../../canvas/ui-jsx-canvas' +import type { VariableData } from '../../../canvas/ui-jsx-canvas' import { useEditorState, Substores } from '../../../editor/store/store-hook' import type { VariableOption } from './data-picker-popup' import * as EP from '../../../../core/shared/element-path' @@ -17,6 +17,7 @@ function valuesFromObject( value: object | null, depth: number, displayName: string, + valueMatchesPropType: boolean, ): Array { if (value == null) { return [ @@ -27,6 +28,7 @@ function valuesFromObject( value: `null`, depth: depth, variableType: 'primitive', + valueMatchesPropType: valueMatchesPropType, }, ] } @@ -39,6 +41,7 @@ function valuesFromObject( depth: variable.depth, variableChildren: variable.variableChildren, variableType: variable.variableType, + valueMatchesPropType: variable.valueMatchesPropType, }) if (Array.isArray(value)) { @@ -50,6 +53,7 @@ function valuesFromObject( value: `[ ]`, depth: depth, variableType: 'array', + valueMatchesPropType: valueMatchesPropType, variableChildren: value.flatMap((v, idx) => valuesFromVariable( `${name}[${idx}]`, @@ -57,6 +61,7 @@ function valuesFromObject( depth + 1, `${displayName}[${idx}]`, objectName, + valueMatchesPropType, ).map((variable) => patchDefinedElsewhereInfo(variable)), ), }), @@ -71,10 +76,16 @@ function valuesFromObject( value: `{ }`, depth: depth, variableType: 'object', + valueMatchesPropType: valueMatchesPropType, variableChildren: Object.entries(value).flatMap(([key, field]) => - valuesFromVariable(`${name}['${key}']`, field, depth + 1, key, objectName).map((variable) => - patchDefinedElsewhereInfo(variable), - ), + valuesFromVariable( + `${name}['${key}']`, + field, + depth + 1, + key, + objectName, + valueMatchesPropType, + ).map((variable) => patchDefinedElsewhereInfo(variable)), ), }), ] @@ -86,6 +97,7 @@ function valuesFromVariable( depth: number, displayName: string, originalObjectName: string, + valueMatchesPropType: boolean, ): Array { switch (typeof value) { case 'bigint': @@ -101,10 +113,18 @@ function valuesFromVariable( value: `${value}`, depth: depth, variableType: 'primitive', + valueMatchesPropType: valueMatchesPropType, }, ] case 'object': - return valuesFromObject(name, originalObjectName, value, depth, displayName) + return valuesFromObject( + name, + originalObjectName, + value, + depth, + displayName, + valueMatchesPropType, + ) case 'function': case 'symbol': return [] @@ -117,11 +137,17 @@ function usePropertyControlDescriptions(): Array { ) } +interface VariablesInScopeByPriority { + valuesMatchingPropertyDescription: [string, unknown][] + valuesMatchingPropertyShape: [string, unknown][] + restOfValues: [string, unknown][] +} + function orderVariablesInScope( variableNamesInScope: VariableData, controlDescriptions: Array, currentPropertyValue: PropertyValue, -): Array<[string, unknown]> { +): VariablesInScopeByPriority { let valuesMatchingPropertyDescription: [string, unknown][] = [] let valuesMatchingPropertyShape: [string, unknown][] = [] let restOfValues: [string, unknown][] = [] @@ -143,7 +169,7 @@ function orderVariablesInScope( } } - return [...valuesMatchingPropertyDescription, ...valuesMatchingPropertyShape, ...restOfValues] + return { valuesMatchingPropertyDescription, valuesMatchingPropertyShape, restOfValues } } const filterKeyFromObject = @@ -216,9 +242,16 @@ export function useVariablesInScopeForSelectedElement( currentPropertyValue, ) - return orderedVariablesInScope.flatMap(([name, variable]) => - valuesFromVariable(name, variable, 0, name, name), + const priorityValues = [ + ...orderedVariablesInScope.valuesMatchingPropertyDescription, + ...orderedVariablesInScope.valuesMatchingPropertyShape, + ].flatMap(([name, variable]) => valuesFromVariable(name, variable, 0, name, name, true)) + + const restOfValues = orderedVariablesInScope.restOfValues.flatMap(([name, variable]) => + valuesFromVariable(name, variable, 0, name, name, false), ) + + return [...priorityValues, ...restOfValues] }, [controlDescriptions, currentPropertyValue, selectedViewPath, variablesInScope]) return variableNamesInScope From ad3af4bc3cd1b163040e9d9c4bd2c00795790014 Mon Sep 17 00:00:00 2001 From: Berci Kormendy Date: Mon, 19 Feb 2024 12:40:12 +0100 Subject: [PATCH 2/2] dim object props --- .../sections/component-section/data-picker-popup.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/editor/src/components/inspector/sections/component-section/data-picker-popup.tsx b/editor/src/components/inspector/sections/component-section/data-picker-popup.tsx index 98d25540a8b5..717cd56e384d 100644 --- a/editor/src/components/inspector/sections/component-section/data-picker-popup.tsx +++ b/editor/src/components/inspector/sections/component-section/data-picker-popup.tsx @@ -132,11 +132,13 @@ function ValueRow({ variableOption, idx, onTweakProperty }: ValueRowProps) { variableChildren, valueMatchesPropType, } = variableOption + const isArray = variableOption.variableType === 'array' const tweakProperty = onTweakProperty(variableName, definedElsewhere) const stopPropagation = useCallback((e: React.MouseEvent) => { e.stopPropagation() }, []) + const shouldDim = depth > 0 || !valueMatchesPropType return ( <>