Add a "layer" property type for custom behaviors

Core/GDCore/Extensions/Metadata/ValueTypeMetadata.cpp

@@ -124,6 +124,7 @@ const gd::String ValueTypeMetadata::leaderboardIdValueType = "leaderboardId";
 const gd::String ValueTypeMetadata::objectAnimationNameValueType = "objectAnimationName";
 const gd::String ValueTypeMetadata::objectSkinNameValueType = "objectSkinName";
 const gd::String ValueTypeMetadata::keyboardKeyValueType = "keyboardKey";
+const gd::String ValueTypeMetadata::layerValueType = "layer";
 
 const gd::String &ValueTypeMetadata::ConvertPropertyTypeToValueType(
     const gd::String &propertyType) {
@@ -145,6 +146,8 @@ const gd::String &ValueTypeMetadata::ConvertPropertyTypeToValueType(
     return objectAnimationNameValueType;
   } else if (propertyType == "KeyboardKey") {
     return keyboardKeyValueType;
+  } else if (propertyType == "Layer") {
+    return layerValueType;
   }
   // For "String", "Resource", "MultilineString" or default
   return stringValueType;

Core/GDCore/Extensions/Metadata/ValueTypeMetadata.h

@@ -354,6 +354,7 @@ class GD_CORE_API ValueTypeMetadata {
   static const gd::String objectAnimationNameValueType;
   static const gd::String objectSkinNameValueType;
   static const gd::String keyboardKeyValueType;
+  static const gd::String layerValueType;
 };
 
 }  // namespace gd

newIDE/app/src/BehaviorsEditor/BehaviorsEditorService.js

@@ -1,5 +1,6 @@
 // @flow
 import BehaviorPropertiesEditor from './Editors/BehaviorPropertiesEditor';
+import { type BehaviorEditorProps } from './Editors/BehaviorEditorProps.flow';
 import Physics2Editor from './Editors/Physics2Editor';
 import Physics3DEditor from './Editors/Physics3DEditor';
 import AnchorBehaviorEditor from './Editors/AnchorBehaviorEditor';
@@ -8,7 +9,7 @@ import AnchorBehaviorEditor from './Editors/AnchorBehaviorEditor';
  * A service returning editor components for each behavior type.
  */
 const BehaviorsEditorService = {
-  getEditor(behaviorType: string): any {
+  getEditor(behaviorType: string): React.ComponentType<BehaviorEditorProps> {
     // $FlowFixMe[object-this-reference]
     if (!this.components[behaviorType]) {
       return BehaviorPropertiesEditor; // Default properties editor

newIDE/app/src/BehaviorsEditor/Editors/AnchorBehaviorEditor.js

@@ -299,6 +299,7 @@ const AnchorBehaviorEditor = ({
   project,
   behavior,
   object,
+  layersContainer,
   onBehaviorUpdated,
   resourceManagementProps,
   projectScopedContainersAccessor,
@@ -351,6 +352,7 @@ const AnchorBehaviorEditor = ({
         project={project}
         object={object}
         behavior={behavior}
+        layersContainer={layersContainer}
         onBehaviorUpdated={_onBehaviorUpdated}
         resourceManagementProps={resourceManagementProps}
         projectScopedContainersAccessor={projectScopedContainersAccessor}

newIDE/app/src/BehaviorsEditor/Editors/BehaviorEditorProps.flow.js

@@ -10,6 +10,7 @@ export type BehaviorEditorProps = {|
   project: gdProject,
   projectScopedContainersAccessor: ProjectScopedContainersAccessor,
   object: gdObject,
+  layersContainer: gdLayersContainer,
   resourceManagementProps: ResourceManagementProps,
   onBehaviorUpdated: () => void,
   isAdvancedSectionInitiallyUncollapsed?: boolean,

newIDE/app/src/BehaviorsEditor/Editors/BehaviorPropertiesEditor.js

@@ -15,6 +15,7 @@ const BehaviorPropertiesEditor = ({
   project,
   behavior,
   object,
+  layersContainer,
   onBehaviorUpdated,
   resourceManagementProps,
   projectScopedContainersAccessor,
@@ -39,9 +40,10 @@ const BehaviorPropertiesEditor = ({
           instance.updateProperty(name, value);
         },
         object,
+        layersContainer,
         visibility: 'All',
       }),
-    [behavior, behaviorMetadata, object]
+    [behavior, behaviorMetadata, layersContainer, object]
   );
 
   return (

newIDE/app/src/BehaviorsEditor/index.js

@@ -88,6 +88,7 @@ type BehaviorConfigurationEditorProps = {|
     behaviorName: string
   ) => void,
   isListLocked: boolean,
+  layersContainer: gdLayersContainer,
 |};
 
 const BehaviorConfigurationEditor = React.forwardRef<
@@ -111,6 +112,7 @@ const BehaviorConfigurationEditor = React.forwardRef<
       openExtension,
       openBehaviorPropertiesQuickCustomizationDialog,
       isListLocked,
+      layersContainer,
     },
     ref
   ) => {
@@ -286,6 +288,7 @@ const BehaviorConfigurationEditor = React.forwardRef<
                 behavior={behavior}
                 project={project}
                 object={object}
+                layersContainer={layersContainer}
                 resourceManagementProps={resourceManagementProps}
                 projectScopedContainersAccessor={
                   projectScopedContainersAccessor
@@ -633,6 +636,7 @@ type Props = {|
   project: gdProject,
   eventsFunctionsExtension: gdEventsFunctionsExtension | null,
   object: gdObject,
+  layersContainer: gdLayersContainer,
   isChildObject: boolean,
   onUpdateBehaviorsSharedData: () => void,
   onSizeUpdated?: ?() => void,
@@ -660,6 +664,7 @@ const BehaviorsEditor = (props: Props): React.Node => {
     isChildObject,
     project,
     eventsFunctionsExtension,
+    layersContainer,
     onSizeUpdated,
     onBehaviorsUpdated,
     onUpdateBehaviorsSharedData,
@@ -810,6 +815,7 @@ const BehaviorsEditor = (props: Props): React.Node => {
                   key={behaviorName}
                   project={project}
                   object={object}
+                  layersContainer={layersContainer}
                   isChildObject={isChildObject}
                   behavior={behavior}
                   copyBehavior={copyBehavior}

newIDE/app/src/EventsFunctionsExtensionEditor/EventsBasedBehaviorOrObjectEditor/EventsBasedBehaviorOrObjectPropertiesEditor.js

@@ -36,6 +36,7 @@ import AdvancedIcon from '../../UI/CustomSvgIcons/AddCircle';
 import BehaviorIcon from '../../UI/CustomSvgIcons/Behavior';
 import SceneIcon from '../../UI/CustomSvgIcons/Scene';
 import ResourceIcon from '../../UI/CustomSvgIcons/ProjectResources';
+import LayerIcon from '../../UI/CustomSvgIcons/Layers';
 import VariableStringIcon from '../../VariablesList/Icons/VariableStringIcon';
 import VariableNumberIcon from '../../VariablesList/Icons/VariableNumberIcon';
 import VariableBooleanIcon from '../../VariablesList/Icons/VariableBooleanIcon';
@@ -81,6 +82,9 @@ const renderValueTypeIcon = (type: string, className: string): React.Node => {
     case 'Resource':
       return <ResourceIcon className={className} />;
 
+    case 'Layer':
+      return <LayerIcon className={className} />;
+
     default:
       return null;
   }
@@ -508,6 +512,12 @@ export const EventsBasedBehaviorPropertiesEditor: React.ComponentType<{
                                       value="Resource"
                                       label={t`Resource`}
                                     />
+                                    {eventsBasedBehavior && (
+                                      <SelectOption
+                                        value="Layer"
+                                        label={t`Layer (text)`}
+                                      />
+                                    )}
                                     {eventsBasedBehavior &&
                                       !isSharedProperties && (
                                         <SelectOption
@@ -576,7 +586,8 @@ export const EventsBasedBehaviorPropertiesEditor: React.ComponentType<{
                                 property.getType() === 'Number' ||
                                 property.getType() === 'ObjectAnimationName' ||
                                 property.getType() === 'KeyboardKey' ||
-                                property.getType() === 'MultilineString') && (
+                                property.getType() === 'MultilineString' ||
+                                property.getType() === 'Layer') && (
                                 <CompactPropertiesEditorRowField
                                   label={i18n._(t`Default value`)}
                                   field={

newIDE/app/src/EventsSheet/InlineParameterEditor.js

@@ -1,7 +1,9 @@
 // @flow
 import * as React from 'react';
 import InlinePopover from './InlinePopover';
-import ParameterRenderingService from './ParameterRenderingService';
+import ParameterRenderingService, {
+  type ParameterField,
+} from './ParameterRenderingService';
 import { type ResourceManagementProps } from '../ResourcesList/ResourceSource';
 import { type EventsScope } from '../InstructionOrExpression/EventsScope';
 import { setupInstructionParameters } from '../InstructionOrExpression/SetupInstructionParameters';
@@ -65,7 +67,10 @@ const InlineParameterEditor = ({
     instructionMetadata,
     setInstructionMetadata,
   ] = React.useState<?gdInstructionMetadata>(null);
-  const [ParameterComponent, setParameterComponent] = React.useState(null);
+  const [
+    ParameterComponent,
+    setParameterComponent,
+  ] = React.useState<ParameterField | null>(null);
   const field = React.useRef<?ParameterFieldInterface>(null);
 
   const softKeyboardBottomOffset = useSoftKeyboardBottomOffset();

newIDE/app/src/EventsSheet/ParameterFields/LayerField.js

@@ -1,7 +1,7 @@
 // @flow
 import React from 'react';
 import { Trans, t } from '@lingui/macro';
-import { mapFor } from '../../Utils/MapFor';
+import { mapReverseFor } from '../../Utils/MapFor';
 import {
   type ParameterFieldProps,
   type ParameterFieldInterface,
@@ -39,7 +39,7 @@ export default (React.forwardRef<ParameterFieldProps, ParameterFieldInterface>(
     const layersSource = layout || eventsBasedObject;
     const layersContainer = layersSource ? layersSource.getLayers() : null;
     const layerNames = layersContainer
-      ? mapFor(0, layersContainer.getLayersCount(), i => {
+      ? mapReverseFor(0, layersContainer.getLayersCount(), i => {
           const layer = layersContainer.getLayerAt(i);
           return layer.getName();
         })

newIDE/app/src/EventsSheet/ParameterRenderingService.js

@@ -83,10 +83,21 @@ import TilemapResourceField from './ParameterFields/TilemapResourceField';
 import TilesetResourceField from './ParameterFields/TilesetResourceField';
 import Model3DResourceField from './ParameterFields/Model3DResourceField';
 import AtlasResourceField from './ParameterFields/AtlasResourceField';
+import {
+  type ParameterFieldProps,
+  type ParameterFieldInterface,
+} from './ParameterFields/ParameterFieldCommons';
 
 const gd: libGDevelop = global.gd;
 
-const components = {
+export type ParameterField = React.ComponentType<{
+  ...ParameterFieldProps,
+  +ref?: React.RefSetter<ParameterFieldInterface>,
+}>;
+
+const components: {
+  [string]: ParameterField,
+} = {
   default: DefaultField,
   mouse: MouseField,
   mouseButton: MouseButtonField,
@@ -208,7 +219,7 @@ const userFriendlyTypeName: { [string]: MessageDescriptor } = {
 
 const ParameterRenderingService = {
   components,
-  getParameterComponent: (rawType: string): any => {
+  getParameterComponent: (rawType: string): ParameterField => {
     const fieldType = gd.ParameterMetadata.isObject(rawType)
       ? 'object'
       : rawType;

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

@@ -271,6 +271,7 @@ export const CompactInstancePropertiesEditor = ({
             globalObjectsContainer || objectsContainer,
             objectsContainer
           ),
+        layersContainer,
       });
 
       const reorderedInstanceSchemaForCustomProperties = reorderInstanceSchemaForCustomProperties(
@@ -449,6 +450,7 @@ export const CompactInstancePropertiesEditor = ({
                                   behavior={behavior}
                                   behaviorOverriding={behaviorOverriding}
                                   object={object}
+                                  layersContainer={layersContainer}
                                   initialInstance={instance}
                                   onBehaviorUpdated={() => {
                                     if (

newIDE/app/src/ObjectEditor/CompactObjectPropertiesEditor/ChildObjectPropertiesEditor.js

@@ -68,6 +68,7 @@ export const ChildObjectPropertiesEditor = ({
         onUpdateProperty: ({ object, objectConfiguration }, name, value) =>
           objectConfiguration.updateProperty(name, value),
         visibility: 'All',
+        layersContainer: null,
       });
     },
     [schemaRecomputeTrigger, childObjectConfigurationAsGd]

newIDE/app/src/ObjectEditor/CompactObjectPropertiesEditor/CompactAnchorBehaviorEditor.js

@@ -19,6 +19,7 @@ const CompactAnchorBehaviorEditor = ({
   project,
   behavior,
   object,
+  layersContainer,
   behaviorMetadata,
   behaviorOverriding,
   initialInstance,
@@ -60,6 +61,7 @@ const CompactAnchorBehaviorEditor = ({
       <CompactBehaviorPropertiesEditor
         project={project}
         object={object}
+        layersContainer={layersContainer}
         behavior={behavior}
         behaviorMetadata={behaviorMetadata}
         behaviorOverriding={behaviorOverriding}

newIDE/app/src/ObjectEditor/CompactObjectPropertiesEditor/CompactBehaviorPropertiesEditor.js

@@ -118,6 +118,7 @@ export const CompactBehaviorPropertiesEditor = ({
   behaviorMetadata,
   behavior,
   object,
+  layersContainer,
   behaviorOverriding,
   initialInstance,
   onOpenFullEditor,
@@ -149,6 +150,7 @@ export const CompactBehaviorPropertiesEditor = ({
               initialInstance
             ),
           object,
+          layersContainer,
           visibility: 'All',
           showcaseNonDefaultValues: true,
         });
@@ -166,15 +168,17 @@ export const CompactBehaviorPropertiesEditor = ({
           instance.updateProperty(name, value);
         },
         object,
+        layersContainer,
         visibility: 'All',
       });
     },
     [
       schemaRecomputeTrigger,
       initialInstance,
-      behavior,
       behaviorMetadata,
       object,
+      layersContainer,
+      behavior,
       project,
     ]
   );

newIDE/app/src/ObjectEditor/CompactObjectPropertiesEditor/CompactBehaviorPropertiesEditorProps.flow.js

@@ -9,6 +9,7 @@ export type CompactBehaviorPropertiesEditorProps = {|
   behaviorMetadata: gdBehaviorMetadata,
   behavior: gdBehavior,
   object: gdObject,
+  layersContainer: gdLayersContainer,
   behaviorOverriding: gdBehavior | null,
   initialInstance: gdInitialInstance | null,
   onOpenFullEditor?: () => void,

newIDE/app/src/ObjectEditor/CompactObjectPropertiesEditor/CompactBehaviorsEditorService.js

@@ -1,12 +1,15 @@
 // @flow
 import { CompactBehaviorPropertiesEditor } from './CompactBehaviorPropertiesEditor';
+import { type CompactBehaviorPropertiesEditorProps } from './CompactBehaviorPropertiesEditorProps.flow';
 import CompactAnchorBehaviorEditor from './CompactAnchorBehaviorEditor';
 
 /**
  * A service returning editor components for each behavior type.
  */
 const CompactBehaviorsEditorService = {
-  getEditor(behaviorType: string): any {
+  getEditor(
+    behaviorType: string
+  ): React.ComponentType<CompactBehaviorPropertiesEditorProps> {
     // $FlowFixMe[object-this-reference]
     if (!this.components[behaviorType]) {
       return CompactBehaviorPropertiesEditor; // Default properties editor

newIDE/app/src/ObjectEditor/CompactObjectPropertiesEditor/index.js

@@ -560,6 +560,7 @@ export const CompactObjectPropertiesEditor = ({
           onObjectsModified([object]);
         },
         object,
+        layersContainer,
         visibility: 'All',
       });
 
@@ -573,6 +574,7 @@ export const CompactObjectPropertiesEditor = ({
       objectConfigurationAsGd,
       customObjectEventsBasedObject,
       object,
+      layersContainer,
       layout,
       onObjectsModified,
       i18n,
@@ -824,6 +826,7 @@ export const CompactObjectPropertiesEditor = ({
                           behaviorOverriding={null}
                           initialInstance={null}
                           object={object}
+                          layersContainer={layersContainer}
                           onBehaviorUpdated={() => {}}
                           resourceManagementProps={resourceManagementProps}
                           onOpenFullEditor={() =>

newIDE/app/src/ObjectEditor/Editors/CustomObjectPropertiesEditor/index.js

@@ -449,6 +449,7 @@ const CustomObjectPropertiesEditor = (props: Props): React.Node => {
         },
         object,
         visibility: 'All',
+        layersContainer: null,
       }),
     [customObjectConfiguration, customObjectEventsBasedObject, object]
   );

newIDE/app/src/ObjectEditor/Editors/ObjectPropertiesEditor.js

@@ -50,6 +50,7 @@ const ObjectPropertiesEditor = (props: Props): React.Node => {
         .getValue(),
     onUpdateProperty: (object, name, value) =>
       object.updateProperty(name, value),
+    layersContainer: null,
   });
 
   const extraInformation = getExtraObjectsInformation()[