Few fixes for the compact instance properties editor (#6547)

- Improve panel spacing
- Remove Restore icon on dimension fields if the instance uses the default size.
- When locking/unlocking multiple instances, apply same value to every instances

newIDE/app/src/CompactPropertiesEditor/index.js

@@ -55,7 +55,7 @@ export type PrimitiveValueField =
         label: string,
         tooltipContent: React.Node,
       |},
-      getEndAdornmentIcon?: () => React.Node,
+      getEndAdornmentIcon?: Instance => ?(className: string) => React.Node,
       onClickEndAdornment?: Instance => void,
       renderLeftIcon?: (className?: string) => React.Node,
       ...ValueFieldCommonProperties,
@@ -69,7 +69,7 @@ export type PrimitiveValueField =
         label: string,
         labelIsUserDefined?: boolean,
       |}>,
-      getEndAdornmentIcon?: () => React.Node,
+      getEndAdornmentIcon?: Instance => ?(className: string) => React.Node,
       onClickEndAdornment?: Instance => void,
       renderLeftIcon?: (className?: string) => React.Node,
       ...ValueFieldCommonProperties,
@@ -86,6 +86,7 @@ export type PrimitiveValueField =
       getValue: Instance => any,
       isHighlighted: (value: any) => boolean,
       setValue: (instance: Instance, newValue: any) => void,
+      getNextValue: (currentValue: any) => any,
       ...ValueFieldCommonProperties,
     |}
   | {|
@@ -257,16 +258,40 @@ const getFieldValue = ({
   if (!getValue) return null;
 
   let value = getValue(instances[0]);
-  for (var i = 1; i < instances.length; ++i) {
-    if (value !== getValue(instances[i])) {
-      if (typeof defaultValue !== 'undefined') value = defaultValue;
-      break;
+  if (typeof defaultValue !== 'undefined') {
+    for (var i = 1; i < instances.length; ++i) {
+      if (value !== getValue(instances[i])) {
+        value = defaultValue;
+        break;
+      }
     }
   }
 
   return value;
 };
 
+const getFieldEndAdornmentIcon = ({
+  instances,
+  field,
+}: {|
+  instances: Instances,
+  field: ValueField,
+|}): ?(className: string) => React.Node => {
+  if (!instances[0]) {
+    console.warn(
+      'getFieldEndAdornmentIcon was called with an empty list of instances (or containing undefined). This is a bug that should be fixed.'
+    );
+    return null;
+  }
+  if (!field.getEndAdornmentIcon) return null;
+
+  for (const instance of instances) {
+    const getEndAdornmentIcon = field.getEndAdornmentIcon(instance);
+    if (getEndAdornmentIcon) return getEndAdornmentIcon;
+  }
+  return null;
+};
+
 const getFieldLabel = ({
   instances,
   field,
@@ -386,7 +411,8 @@ const CompactPropertiesEditor = ({
             _onInstancesModified(instances);
           },
           disabled: getDisabled({ instances, field }),
-          renderEndAdornmentOnHover: field.getEndAdornmentIcon || undefined,
+          renderEndAdornmentOnHover:
+            getFieldEndAdornmentIcon({ instances, field }) || undefined,
           onClickEndAdornment: () => {
             if (!onClickEndAdornment) return;
             instances.forEach(i => onClickEndAdornment(i));
@@ -466,7 +492,9 @@ const CompactPropertiesEditor = ({
             tooltip={getFieldLabel({ instances, field })}
             selected={field.isHighlighted(value)}
             onClick={event => {
-              instances.forEach(i => field.setValue(i, !value));
+              instances.forEach(i =>
+                field.setValue(i, field.getNextValue(value))
+              );
               _onInstancesModified(instances);
             }}
           >
@@ -515,7 +543,8 @@ const CompactPropertiesEditor = ({
             _onInstancesModified(instances);
           },
           disabled: getDisabled({ instances, field }),
-          renderEndAdornmentOnHover: field.getEndAdornmentIcon || undefined,
+          renderEndAdornmentOnHover:
+            getFieldEndAdornmentIcon({ instances, field }) || undefined,
           onClickEndAdornment: () => {
             if (!onClickEndAdornment) return;
             instances.forEach(i => onClickEndAdornment(i));

newIDE/app/src/InstancesEditor/CompactInstancePropertiesEditor/CompactPropertiesSchema.js

@@ -186,17 +186,21 @@ const getTitleRow = ({ i18n }: {| i18n: I18nType |}) => ({
           : instance.isLocked()
           ? 'locked'
           : 'free',
-      setValue: (instance: gdInitialInstance, newValue: boolean) => {
-        if (instance.isSealed()) {
-          instance.setSealed(false);
-          instance.setLocked(false);
-          return;
-        }
-        if (instance.isLocked()) {
-          instance.setSealed(true);
-          return;
-        }
-        instance.setLocked(true);
+      setValue: (
+        instance: gdInitialInstance,
+        newValue: 'sealed' | 'locked' | 'free'
+      ) => {
+        instance.setSealed(newValue === 'sealed' ? true : false);
+        instance.setLocked(
+          newValue === 'sealed' || newValue === 'locked' ? true : false
+        );
+      },
+      getNextValue: (
+        currentValue: 'sealed' | 'locked' | 'free'
+      ): 'sealed' | 'locked' | 'free' => {
+        if (currentValue === 'free') return 'locked';
+        if (currentValue === 'locked') return 'sealed';
+        return 'free';
       },
     },
   ],
@@ -251,7 +255,12 @@ const getWidthField = ({
     forceUpdate();
   },
   renderLeftIcon: className => <LetterW className={className} />,
-  getEndAdornmentIcon: className => <Restore className={className} />,
+  getEndAdornmentIcon: (instance: gdInitialInstance) => {
+    if (instance.hasCustomDepth() || instance.hasCustomSize()) {
+      return className => <Restore className={className} />;
+    }
+    return null;
+  },
   onClickEndAdornment: (instance: gdInitialInstance) => {
     instance.setHasCustomSize(false);
     instance.setHasCustomDepth(false);
@@ -307,7 +316,12 @@ const getHeightField = ({
     forceUpdate();
   },
   renderLeftIcon: className => <LetterH className={className} />,
-  getEndAdornmentIcon: className => <Restore className={className} />,
+  getEndAdornmentIcon: (instance: gdInitialInstance) => {
+    if (instance.hasCustomDepth() || instance.hasCustomSize()) {
+      return className => <Restore className={className} />;
+    }
+    return null;
+  },
   onClickEndAdornment: (instance: gdInitialInstance) => {
     instance.setHasCustomSize(false);
     instance.setHasCustomDepth(false);
@@ -363,7 +377,12 @@ const getDepthField = ({
     forceUpdate();
   },
   renderLeftIcon: className => <LetterD className={className} />,
-  getEndAdornmentIcon: className => <Restore className={className} />,
+  getEndAdornmentIcon: (instance: gdInitialInstance) => {
+    if (instance.hasCustomDepth() || instance.hasCustomSize()) {
+      return className => <Restore className={className} />;
+    }
+    return null;
+  },
   onClickEndAdornment: (instance: gdInitialInstance) => {
     instance.setHasCustomSize(false);
     instance.setHasCustomDepth(false);
@@ -392,6 +411,7 @@ const getKeepRatioField = ({
   getValue: (instance: gdInitialInstance) => instance.shouldKeepRatio(),
   setValue: (instance: gdInitialInstance, newValue: boolean) =>
     instance.setShouldKeepRatio(newValue),
+  getNextValue: (currentValue: boolean) => !currentValue,
 });
 
 export const makeSchema = ({

newIDE/app/src/InstancesEditor/CompactInstancePropertiesEditor/index.js

@@ -12,7 +12,7 @@ import propertiesMapToSchema from '../../CompactPropertiesEditor/PropertiesMapTo
 import { type Schema } from '../../CompactPropertiesEditor';
 import getObjectByName from '../../Utils/GetObjectByName';
 import IconButton from '../../UI/IconButton';
-import { Line, Column, Spacer } from '../../UI/Grid';
+import { Line, Column, Spacer, marginsSize } from '../../UI/Grid';
 import Text from '../../UI/Text';
 import { type UnsavedChanges } from '../../MainFrame/UnsavedChangesContext';
 import ScrollView from '../../UI/ScrollView';
@@ -38,6 +38,7 @@ export const styles = {
   icon: {
     fontSize: 18,
   },
+  scrollView: { paddingTop: marginsSize },
 };
 
 const gd: libGDevelop = global.gd;
@@ -149,6 +150,7 @@ const CompactInstancePropertiesEditor = ({
     >
       <ScrollView
         autoHideScrollbar
+        style={styles.scrollView}
         key={instances
           .map((instance: gdInitialInstance) => '' + instance.ptr)
           .join(';')}

newIDE/app/src/UI/CompactSemiControlledNumberField/index.js

@@ -57,7 +57,7 @@ const CompactSemiControlledNumberField = ({
         onBlur={event => {
           const newValue = parseFloat(event.currentTarget.value);
           const isNewValueValid = !Number.isNaN(newValue);
-          if (isNewValueValid) {
+          if (isNewValueValid && newValue !== value) {
             onChange(newValue);
           }
           setFocused(false);

newIDE/app/src/UI/CompactSemiControlledTextField/index.js

@@ -44,7 +44,9 @@ const CompactSemiControlledTextField = ({
           if (!commitOnBlur) onChange(newValue);
         }}
         onBlur={event => {
-          onChange(event.currentTarget.value);
+          if (value !== event.currentTarget.value) {
+            onChange(event.currentTarget.value);
+          }
           setFocused(false);
           setText('');
         }}