Feature/external layout options (#3178)

Improve scene selection and help text for an external layout

Author: ClementPasteau

Core/GDCore/Project/ExternalEvents.cpp

@@ -1,5 +1,5 @@
-#if defined(GD_IDE_ONLY)
 #include "GDCore/Project/ExternalEvents.h"
+
 #include "ExternalEvents.h"
 #include "GDCore/Events/Event.h"
 #include "GDCore/Events/Serialization.h"
@@ -48,4 +48,3 @@ void ExternalEvents::UnserializeFrom(gd::Project& project,
 }
 
 }  // namespace gd
-#endif

Core/GDCore/Project/ExternalEvents.h

@@ -3,12 +3,12 @@
  * Copyright 2008-2016 Florian Rival ([email protected]). All rights
  * reserved. This project is released under the MIT License.
  */
-#if defined(GD_IDE_ONLY)
 #ifndef GDCORE_EXTERNALEVENTS_H
 #define GDCORE_EXTERNALEVENTS_H
 #include <ctime>
 #include <memory>
 #include <vector>
+
 #include "GDCore/Events/EventsList.h"
 #include "GDCore/String.h"
 namespace gd {
@@ -135,4 +135,3 @@ struct ExternalEventsHasName
 }  // namespace gd
 
 #endif  // GDCORE_EXTERNALEVENTS_H
-#endif

Core/GDCore/Project/ExternalLayout.cpp

@@ -5,6 +5,7 @@
  */
 
 #include "GDCore/Project/ExternalLayout.h"
+
 #include "GDCore/IDE/Dialogs/LayoutEditorCanvas/EditorSettings.h"
 #include "GDCore/Project/InitialInstancesContainer.h"
 #include "GDCore/Serialization/SerializerElement.h"
@@ -15,19 +16,15 @@ namespace gd {
 void ExternalLayout::UnserializeFrom(const SerializerElement& element) {
   name = element.GetStringAttribute("name", "", "Name");
   instances.UnserializeFrom(element.GetChild("instances", 0, "Instances"));
-#if defined(GD_IDE_ONLY)
   editorSettings.UnserializeFrom(element.GetChild("editionSettings"));
-#endif
   associatedLayout = element.GetStringAttribute("associatedLayout");
 }
 
-#if defined(GD_IDE_ONLY)
 void ExternalLayout::SerializeTo(SerializerElement& element) const {
   element.SetAttribute("name", name);
   instances.SerializeTo(element.AddChild("instances"));
   editorSettings.SerializeTo(element.AddChild("editionSettings"));
   element.SetAttribute("associatedLayout", associatedLayout);
 }
-#endif
 
 }  // namespace gd

Core/GDCore/Project/ExternalLayout.h

@@ -7,14 +7,13 @@
 #ifndef GDCORE_EXTERNALLAYOUT_H
 #define GDCORE_EXTERNALLAYOUT_H
 #include <memory>
+
 #include "GDCore/Project/InitialInstancesContainer.h"
 #include "GDCore/String.h"
 namespace gd {
 class SerializerElement;
 }
-#if defined(GD_IDE_ONLY)
 #include "GDCore/IDE/Dialogs/LayoutEditorCanvas/EditorSettings.h"
-#endif
 
 namespace gd {
 
@@ -54,7 +53,6 @@ class GD_CORE_API ExternalLayout {
    */
   gd::InitialInstancesContainer& GetInitialInstances() { return instances; }
 
-#if defined(GD_IDE_ONLY)
   /**
    * \brief Get the user settings for the IDE.
    */
@@ -65,10 +63,7 @@ class GD_CORE_API ExternalLayout {
   /**
    * \brief Get the user settings for the IDE.
    */
-  gd::EditorSettings& GetAssociatedEditorSettings() {
-    return editorSettings;
-  }
-#endif
+  gd::EditorSettings& GetAssociatedEditorSettings() { return editorSettings; }
 
   /**
    * \brief Get the name of the layout last used to edit the external layout.
@@ -80,15 +75,13 @@ class GD_CORE_API ExternalLayout {
    */
   void SetAssociatedLayout(const gd::String& name) { associatedLayout = name; }
 
-/** \name Serialization
- */
-///@{
-#if defined(GD_IDE_ONLY)
+  /** \name Serialization
+   */
+  ///@{
   /**
    * \brief Serialize external layout.
    */
   void SerializeTo(SerializerElement& element) const;
-#endif
 
   /**
    * \brief Unserialize the external layout.
@@ -99,9 +92,7 @@ class GD_CORE_API ExternalLayout {
  private:
   gd::String name;
   gd::InitialInstancesContainer instances;
-#if defined(GD_IDE_ONLY)
   gd::EditorSettings editorSettings;
-#endif
   gd::String associatedLayout;
 };
 

newIDE/app/src/MainFrame/EditorContainers/ExternalEventsEditorContainer.js

@@ -8,7 +8,9 @@ import {
   type RenderEditorContainerProps,
   type RenderEditorContainerPropsWithRef,
 } from './BaseEditor';
-import LayoutChooserDialog from './LayoutChooserDialog';
+import ExternalPropertiesDialog, {
+  type ExternalProperties,
+} from './ExternalPropertiesDialog';
 import Text from '../../UI/Text';
 import { Line } from '../../UI/Grid';
 
@@ -20,7 +22,7 @@ const styles = {
 };
 
 type State = {|
-  layoutChooserOpen: boolean,
+  externalPropertiesDialogOpen: boolean,
 |};
 
 export class ExternalEventsEditorContainer extends React.Component<
@@ -30,7 +32,7 @@ export class ExternalEventsEditorContainer extends React.Component<
   editor: ?EventsSheet;
 
   state = {
-    layoutChooserOpen: false,
+    externalPropertiesDialogOpen: false,
   };
 
   shouldComponentUpdate(nextProps: RenderEditorContainerProps) {
@@ -65,32 +67,43 @@ export class ExternalEventsEditorContainer extends React.Component<
     const { project } = this.props;
     if (!project) return null;
 
+    const layoutName = this.getAssociatedLayoutName();
+    if (!layoutName) return null;
+
+    return project.getLayout(layoutName);
+  }
+
+  getAssociatedLayoutName(): ?string {
+    const { project } = this.props;
+    if (!project) return null;
+
     const externalEvents = this.getExternalEvents();
     if (!externalEvents) return null;
 
     const layoutName = externalEvents.getAssociatedLayout();
     if (!project.hasLayoutNamed(layoutName)) {
       return null;
     }
-    return project.getLayout(layoutName);
+
+    return layoutName;
   }
 
-  setAssociatedLayout = (layoutName: string) => {
+  saveExternalProperties = (externalProps: ExternalProperties) => {
     const externalEvents = this.getExternalEvents();
     if (!externalEvents) return;
 
-    externalEvents.setAssociatedLayout(layoutName);
+    externalEvents.setAssociatedLayout(externalProps.layoutName);
     this.setState(
       {
-        layoutChooserOpen: false,
+        externalPropertiesDialogOpen: false,
       },
       () => this.updateToolbar()
     );
   };
 
-  openLayoutChooser = () => {
+  openExternalPropertiesDialog = () => {
     this.setState({
-      layoutChooserOpen: true,
+      externalPropertiesDialogOpen: true,
     });
   };
 
@@ -124,7 +137,7 @@ export class ExternalEventsEditorContainer extends React.Component<
             globalObjectsContainer={project}
             objectsContainer={layout}
             events={externalEvents.getEvents()}
-            onOpenSettings={this.openLayoutChooser}
+            onOpenSettings={this.openExternalPropertiesDialog}
             onOpenExternalEvents={this.props.onOpenExternalEvents}
           />
         )}
@@ -140,18 +153,24 @@ export class ExternalEventsEditorContainer extends React.Component<
               <RaisedButton
                 label={<Trans>Choose the scene</Trans>}
                 primary
-                onClick={this.openLayoutChooser}
+                onClick={this.openExternalPropertiesDialog}
               />
             </Line>
           </PlaceholderMessage>
         )}
-        <LayoutChooserDialog
-          title={<Trans>Choose the associated scene</Trans>}
-          helpText="You still need to add a Link event in the scene to import the external events"
-          open={this.state.layoutChooserOpen}
+        <ExternalPropertiesDialog
+          title={<Trans>Configure the external events</Trans>}
+          helpTexts={[
+            <Trans>
+              In order to use these external events, you still need to add a
+              "Link" event in the events sheet of the corresponding scene
+            </Trans>,
+          ]}
+          open={this.state.externalPropertiesDialogOpen}
           project={project}
-          onChoose={this.setAssociatedLayout}
-          onClose={() => this.setState({ layoutChooserOpen: false })}
+          onChoose={this.saveExternalProperties}
+          layoutName={this.getAssociatedLayoutName()}
+          onClose={() => this.setState({ externalPropertiesDialogOpen: false })}
         />
       </div>
     );

newIDE/app/src/MainFrame/EditorContainers/ExternalLayoutEditorContainer.js

@@ -13,7 +13,9 @@ import {
   type RenderEditorContainerProps,
   type RenderEditorContainerPropsWithRef,
 } from './BaseEditor';
-import LayoutChooserDialog from './LayoutChooserDialog';
+import ExternalPropertiesDialog, {
+  type ExternalProperties,
+} from './ExternalPropertiesDialog';
 import { Line } from '../../UI/Grid';
 import Text from '../../UI/Text';
 import { prepareInstancesEditorSettings } from '../../InstancesEditor/InstancesEditorSettings';
@@ -26,7 +28,7 @@ const styles = {
 };
 
 type State = {|
-  layoutChooserOpen: boolean,
+  externalPropertiesDialogOpen: boolean,
 |};
 
 export class ExternalLayoutEditorContainer extends React.Component<
@@ -35,7 +37,7 @@ export class ExternalLayoutEditorContainer extends React.Component<
 > {
   editor: ?SceneEditor;
   state = {
-    layoutChooserOpen: false,
+    externalPropertiesDialogOpen: false,
   };
 
   getProject(): ?gdProject {
@@ -98,32 +100,43 @@ export class ExternalLayoutEditorContainer extends React.Component<
     const { project } = this.props;
     if (!project) return null;
 
+    const layoutName = this.getAssociatedLayoutName();
+    if (!layoutName) return;
+
+    return project.getLayout(layoutName);
+  }
+
+  getAssociatedLayoutName(): ?string {
+    const { project } = this.props;
+    if (!project) return null;
+
     const externalLayout = this.getExternalLayout();
     if (!externalLayout) return null;
 
     const layoutName = externalLayout.getAssociatedLayout();
     if (!project.hasLayoutNamed(layoutName)) {
       return null;
     }
-    return project.getLayout(layoutName);
+
+    return layoutName;
   }
 
-  setAssociatedLayout = (layoutName: string) => {
+  saveExternalProperties = (externalProps: ExternalProperties) => {
     const externalLayout = this.getExternalLayout();
     if (!externalLayout) return;
 
-    externalLayout.setAssociatedLayout(layoutName);
+    externalLayout.setAssociatedLayout(externalProps.layoutName);
     this.setState(
       {
-        layoutChooserOpen: false,
+        externalPropertiesDialogOpen: false,
       },
       () => this.updateToolbar()
     );
   };
 
-  openLayoutChooser = () => {
+  openExternalPropertiesDialog = () => {
     this.setState({
-      layoutChooserOpen: true,
+      externalPropertiesDialogOpen: true,
     });
   };
 
@@ -170,7 +183,7 @@ export class ExternalLayoutEditorContainer extends React.Component<
                 )
               )
             }
-            onOpenMoreSettings={this.openLayoutChooser}
+            onOpenMoreSettings={this.openExternalPropertiesDialog}
             isActive={isActive}
           />
         )}
@@ -186,17 +199,30 @@ export class ExternalLayoutEditorContainer extends React.Component<
               <RaisedButton
                 label={<Trans>Choose the scene</Trans>}
                 primary
-                onClick={this.openLayoutChooser}
+                onClick={this.openExternalPropertiesDialog}
               />
             </Line>
           </PlaceholderMessage>
         )}
-        <LayoutChooserDialog
-          title={<Trans>Choose the associated scene</Trans>}
-          open={this.state.layoutChooserOpen}
+        <ExternalPropertiesDialog
+          title={<Trans>Configure the external layout</Trans>}
+          helpTexts={[
+            <Trans>
+              In order to see your objects in the scene, you need to add an
+              action "Create objects from external layout" in your events sheet.
+            </Trans>,
+            <Trans>
+              You can also launch a preview from this external layout, but
+              remember that it will still create objects from the scene, as well
+              as trigger its events. Make sure to disable any action loading the
+              external layout before doing so to avoid having duplicate objects!
+            </Trans>,
+          ]}
+          open={this.state.externalPropertiesDialogOpen}
           project={project}
-          onChoose={this.setAssociatedLayout}
-          onClose={() => this.setState({ layoutChooserOpen: false })}
+          layoutName={this.getAssociatedLayoutName()}
+          onChoose={this.saveExternalProperties}
+          onClose={() => this.setState({ externalPropertiesDialogOpen: false })}
         />
       </div>
     );