Skip to content

Commit 8fd6370

Browse files
D8HD8H
committed
Add a button in the extension editor to select behaviors with the dialog
1 parent d81a689 commit 8fd6370

14 files changed

Lines changed: 242 additions & 67 deletions

File tree

‎newIDE/app/src/BehaviorTypeSelector/CompactBehaviorTypeSelector.js‎

Lines changed: 56 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,16 @@ import {
1111
import CompactPropertiesEditorRowField from '../CompactPropertiesEditor/CompactPropertiesEditorRowField';
1212
import ListIcon from '../UI/ListIcon';
1313
import ExtensionIcon from '../UI/CustomSvgIcons/Extension';
14+
import { LineStackLayout } from '../UI/Layout';
15+
import IconButton from '../UI/IconButton';
16+
import OpenIconButton from '../UI/CustomSvgIcons/ShareExternal';
17+
import { Column } from '../UI/Grid';
18+
19+
export const styles = {
20+
icon: {
21+
fontSize: 18,
22+
},
23+
};
1424

1525
type Props = {|
1626
project: gdProject,
@@ -20,6 +30,7 @@ type Props = {|
2030
disabled?: boolean,
2131
eventsFunctionsExtension: gdEventsFunctionsExtension | null,
2232
onFocus?: () => void,
33+
onOpenBehaviorTypeDialog: () => void,
2334
|};
2435

2536
export default function CompactBehaviorTypeSelector({
@@ -30,6 +41,7 @@ export default function CompactBehaviorTypeSelector({
3041
onChange,
3142
objectType,
3243
onFocus,
44+
onOpenBehaviorTypeDialog,
3345
}: Props): React.Node {
3446
const behaviorMetadataList: Array<EnumeratedBehaviorMetadata> = React.useMemo(
3547
() =>
@@ -56,42 +68,51 @@ export default function CompactBehaviorTypeSelector({
5668
<CompactPropertiesEditorRowField
5769
label={i18n._(t`Behavior type`)}
5870
field={
59-
<CompactSelectField
60-
value={value}
61-
onChange={value => {
62-
onChange(value);
63-
}}
64-
disabled={disabled}
65-
onFocus={onFocus}
66-
renderOptionIcon={className =>
67-
behaviorMetadata ? (
68-
<ListIcon
69-
src={behaviorMetadata.previewIconUrl}
70-
iconSize={16}
71-
brightness={disabled ? 0.5 : null}
72-
/>
73-
) : (
74-
<ExtensionIcon className={className} />
75-
)
76-
}
77-
>
78-
{behaviorMetadataList.map(
79-
(metadata: EnumeratedBehaviorMetadata) => (
80-
<SelectOption
81-
key={metadata.type}
82-
value={metadata.type}
83-
label={metadata.fullName}
84-
disabled={
85-
metadata.objectType !== '' &&
86-
metadata.objectType !== objectType
87-
}
88-
/>
89-
)
90-
)}
91-
{!valueIsListed && value && (
92-
<SelectOption value={value} label={value} />
71+
<LineStackLayout alignItems="center" noMargin>
72+
<Column noMargin expand noOverflowParent>
73+
<CompactSelectField
74+
value={value}
75+
onChange={value => {
76+
onChange(value);
77+
}}
78+
disabled={disabled}
79+
onFocus={onFocus}
80+
renderOptionIcon={className =>
81+
behaviorMetadata ? (
82+
<ListIcon
83+
src={behaviorMetadata.previewIconUrl}
84+
iconSize={16}
85+
brightness={disabled ? 0.5 : null}
86+
/>
87+
) : (
88+
<ExtensionIcon className={className} />
89+
)
90+
}
91+
>
92+
{behaviorMetadataList.map(
93+
(metadata: EnumeratedBehaviorMetadata) => (
94+
<SelectOption
95+
key={metadata.type}
96+
value={metadata.type}
97+
label={metadata.fullName}
98+
disabled={
99+
metadata.objectType !== '' &&
100+
metadata.objectType !== objectType
101+
}
102+
/>
103+
)
104+
)}
105+
{!valueIsListed && value && (
106+
<SelectOption value={value} label={value} />
107+
)}
108+
</CompactSelectField>
109+
</Column>
110+
{!disabled && (
111+
<IconButton size="small" onClick={onOpenBehaviorTypeDialog}>
112+
<OpenIconButton style={styles.icon} />
113+
</IconButton>
93114
)}
94-
</CompactSelectField>
115+
</LineStackLayout>
95116
}
96117
/>
97118
)}

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

Lines changed: 49 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ import LayerIcon from '../../UI/CustomSvgIcons/Layers';
4040
import VariableStringIcon from '../../VariablesList/Icons/VariableStringIcon';
4141
import VariableNumberIcon from '../../VariablesList/Icons/VariableNumberIcon';
4242
import VariableBooleanIcon from '../../VariablesList/Icons/VariableBooleanIcon';
43+
import NewBehaviorDialog from '../../BehaviorsEditor/NewBehaviorDialog';
4344

4445
const gd: libGDevelop = global.gd;
4546

@@ -141,6 +142,8 @@ type Props = {|
141142
onPropertyTypeChanged: (propertyName: string) => void,
142143
onEventsFunctionsAdded: () => void,
143144
behaviorObjectType: string,
145+
onWillInstallExtension: (extensionNames: Array<string>) => void,
146+
onExtensionInstalled: (extensionNames: Array<string>) => void,
144147
|};
145148

146149
// Those names are used internally by GDevelop.
@@ -173,15 +176,18 @@ const getChoicesArray = (
173176
}));
174177
};
175178

176-
export type EventsBasedBehaviorPropertiesEditorInterface = {|
179+
export type EventsBasedBehaviorOrObjectPropertiesEditorInterface = {|
177180
forceUpdate: () => void,
178181
getPropertyEditorRef: (propertyName: string) => React.ElementRef<any>,
179182
|};
180183

181-
export const EventsBasedBehaviorPropertiesEditor: React.ComponentType<{
184+
export const EventsBasedBehaviorOrObjectPropertiesEditor: React.ComponentType<{
182185
...Props,
183-
+ref?: React.RefSetter<EventsBasedBehaviorPropertiesEditorInterface>,
184-
}> = React.forwardRef<Props, EventsBasedBehaviorPropertiesEditorInterface>(
186+
+ref?: React.RefSetter<EventsBasedBehaviorOrObjectPropertiesEditorInterface>,
187+
}> = React.forwardRef<
188+
Props,
189+
EventsBasedBehaviorOrObjectPropertiesEditorInterface
190+
>(
185191
(
186192
{
187193
project,
@@ -197,6 +203,8 @@ export const EventsBasedBehaviorPropertiesEditor: React.ComponentType<{
197203
onPropertyTypeChanged,
198204
onEventsFunctionsAdded,
199205
behaviorObjectType,
206+
onWillInstallExtension,
207+
onExtensionInstalled,
200208
}: Props,
201209
ref
202210
) => {
@@ -208,6 +216,10 @@ export const EventsBasedBehaviorPropertiesEditor: React.ComponentType<{
208216
propertyRefs ? propertyRefs.current.get(propertyName) : null,
209217
}));
210218

219+
const [newBehaviorDialogOpen, setNewBehaviorDialogOpen] = React.useState<{
220+
behaviorProperty: gdNamedPropertyDescriptor,
221+
} | null>(null);
222+
211223
const gdevelopTheme = React.useContext(GDevelopThemeContext);
212224

213225
const showPropertyOverridingConfirmation = usePropertyOverridingAlertDialog();
@@ -716,6 +728,11 @@ export const EventsBasedBehaviorPropertiesEditor: React.ComponentType<{
716728
onFocus={() =>
717729
onFocusProperty(property.getName())
718730
}
731+
onOpenBehaviorTypeDialog={() => {
732+
setNewBehaviorDialogOpen({
733+
behaviorProperty: property,
734+
});
735+
}}
719736
disabled={false}
720737
/>
721738
)}
@@ -837,6 +854,34 @@ export const EventsBasedBehaviorPropertiesEditor: React.ComponentType<{
837854
}
838855
}
839856
)}
857+
{newBehaviorDialogOpen && eventsBasedBehavior && (
858+
<NewBehaviorDialog
859+
project={project}
860+
eventsFunctionsExtension={extension}
861+
open={!!newBehaviorDialogOpen}
862+
objectType={eventsBasedBehavior.getObjectType()}
863+
// It doesn't matter if there is 2 parameters with the same
864+
// behavior for an object at some point.
865+
objectBehaviorsTypes={[]}
866+
isChildObject={false}
867+
onClose={() => setNewBehaviorDialogOpen(null)}
868+
onChoose={type => {
869+
const property = newBehaviorDialogOpen.behaviorProperty;
870+
fillBehaviorProperty(
871+
projectScopedContainersAccessor,
872+
eventsBasedBehavior,
873+
property,
874+
type
875+
);
876+
forceUpdate();
877+
onPropertiesUpdated();
878+
setNewBehaviorDialogOpen(null);
879+
}}
880+
onWillInstallExtension={onWillInstallExtension}
881+
onExtensionInstalled={onExtensionInstalled}
882+
shouldShowCapabilityBehaviors={true}
883+
/>
884+
)}
840885
</Column>
841886
) : (
842887
<Column noMargin justifyContent="center" expand noOverflowParent>

‎newIDE/app/src/EventsFunctionsExtensionEditor/EventsBasedBehaviorOrObjectEditor/index.js‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ import { Trans } from '@lingui/macro';
33
import * as React from 'react';
44
import EventsBasedBehaviorEditor from './EventsBasedBehaviorEditor';
55
import {
6-
EventsBasedBehaviorPropertiesEditor,
7-
type EventsBasedBehaviorPropertiesEditorInterface,
6+
EventsBasedBehaviorOrObjectPropertiesEditor,
7+
type EventsBasedBehaviorOrObjectPropertiesEditorInterface,
88
} from './EventsBasedBehaviorOrObjectPropertiesEditor';
99
import Background from '../../UI/Background';
1010
import { type UnsavedChanges } from '../../MainFrame/UnsavedChangesContext';
@@ -40,6 +40,8 @@ type Props = {|
4040
onEventsBasedObjectChildrenEdited: (
4141
eventsBasedObject: gdEventsBasedObject
4242
) => void,
43+
onWillInstallExtension: (extensionNames: Array<string>) => void,
44+
onExtensionInstalled: (extensionNames: Array<string>) => void,
4345
|};
4446

4547
export type EventsBasedBehaviorOrObjectEditorInterface = {|
@@ -69,6 +71,8 @@ export const EventsBasedBehaviorOrObjectEditor: React.ComponentType<{
6971
onFocusProperty,
7072
onOpenCustomObjectEditor,
7173
onEventsBasedObjectChildrenEdited,
74+
onWillInstallExtension,
75+
onExtensionInstalled,
7276
}: Props,
7377
ref
7478
) => {
@@ -85,10 +89,10 @@ export const EventsBasedBehaviorOrObjectEditor: React.ComponentType<{
8589
);
8690

8791
const scrollView = React.useRef<?ScrollViewInterface>(null);
88-
const propertiesEditor = React.useRef<?EventsBasedBehaviorPropertiesEditorInterface>(
92+
const propertiesEditor = React.useRef<?EventsBasedBehaviorOrObjectPropertiesEditorInterface>(
8993
null
9094
);
91-
const scenePropertiesEditor = React.useRef<?EventsBasedBehaviorPropertiesEditorInterface>(
95+
const scenePropertiesEditor = React.useRef<?EventsBasedBehaviorOrObjectPropertiesEditorInterface>(
9296
null
9397
);
9498

@@ -204,7 +208,7 @@ export const EventsBasedBehaviorOrObjectEditor: React.ComponentType<{
204208
)}
205209
</Text>
206210
{eventsBasedEntity && (
207-
<EventsBasedBehaviorPropertiesEditor
211+
<EventsBasedBehaviorOrObjectPropertiesEditor
208212
ref={propertiesEditor}
209213
project={project}
210214
projectScopedContainersAccessor={
@@ -226,6 +230,8 @@ export const EventsBasedBehaviorOrObjectEditor: React.ComponentType<{
226230
}
227231
onPropertyTypeChanged={onPropertyTypeChanged}
228232
onEventsFunctionsAdded={onEventsFunctionsAdded}
233+
onWillInstallExtension={onWillInstallExtension}
234+
onExtensionInstalled={onExtensionInstalled}
229235
/>
230236
)}
231237
{eventsBasedBehavior && (
@@ -234,7 +240,7 @@ export const EventsBasedBehaviorOrObjectEditor: React.ComponentType<{
234240
</Text>
235241
)}
236242
{eventsBasedBehavior && (
237-
<EventsBasedBehaviorPropertiesEditor
243+
<EventsBasedBehaviorOrObjectPropertiesEditor
238244
ref={scenePropertiesEditor}
239245
isSharedProperties
240246
project={project}
@@ -257,6 +263,8 @@ export const EventsBasedBehaviorOrObjectEditor: React.ComponentType<{
257263
}
258264
onPropertyTypeChanged={onPropertyTypeChanged}
259265
onEventsFunctionsAdded={onEventsFunctionsAdded}
266+
onWillInstallExtension={onWillInstallExtension}
267+
onExtensionInstalled={onExtensionInstalled}
260268
/>
261269
)}
262270
</ColumnStackLayout>

0 commit comments

Comments
 (0)