Add story for 3D instance properties editor

newIDE/app/src/fixtures/TestExtensions.js

@@ -351,4 +351,48 @@ export const makeTestExtensions = (gd: libGDevelop) => {
     platform.addNewExtension(extension);
     extension.delete(); // Release the extension as it was copied inside gd.JsPlatform
   }
+  {
+    const extension = new gd.PlatformExtension();
+    extension
+      .setExtensionInformation(
+        'FakeScene3D',
+        'Fake 3D',
+        'Fake support for 3D in GDevelop.',
+        '',
+        'MIT'
+      )
+      .setCategory('General');
+    extension
+      .addInstructionOrExpressionGroupMetadata('3D')
+      .setIcon('res/conditions/3d_box.svg');
+    const Cube3DObject = new gd.ObjectJsImplementation();
+    // $FlowExpectedError
+    Cube3DObject.getProperties = function(objectContent) {
+      const objectProperties = new gd.MapStringPropertyDescriptor();
+      return objectProperties;
+    };
+    // $FlowExpectedError
+    Cube3DObject.getInitialInstanceProperties = function(
+      content,
+      instance,
+      project,
+      layout
+    ) {
+      const instanceProperties = new gd.MapStringPropertyDescriptor();
+      return instanceProperties;
+    };
+
+    extension
+      .addObject(
+        'Cube3DObject',
+        '3D Box',
+        'A box with images for each face',
+        'JsPlatform/Extensions/3d_box.svg',
+        Cube3DObject
+      )
+      .setCategoryFullName('General')
+      .markAsRenderedIn3D();
+    platform.addNewExtension(extension);
+    extension.delete(); // Release the extension as it was copied inside gd.JsPlatform
+  }
 };

newIDE/app/src/fixtures/TestProject.js

@@ -10,6 +10,7 @@ export type TestProject = {|
   panelSpriteObject: gdObject,
   spriteObjectConfiguration: gdSpriteObject,
   emptySpriteObjectConfiguration: gdSpriteObject,
+  cube3dObject: gdObject,
   customObject: gdObject,
   spriteObject: gdObject,
   emptySpriteObject: gdObject,
@@ -21,6 +22,7 @@ export type TestProject = {|
   group2: gdObjectGroup,
   group4WithLongsNames: gdObjectGroup,
   testLayoutInstance1: gdInitialInstance,
+  testLayoutInstance2: gdInitialInstance,
   testInstruction: gdInstruction,
   testExternalEvents1: gdExternalEvents,
   testExternalEvents2: gdExternalEvents,
@@ -213,6 +215,12 @@ export const makeTestProject = (gd /*: libGDevelop */) /*: TestProject */ => {
     'MyTiledSpriteObject',
     0
   );
+  const cube3dObject = testLayout.insertNewObject(
+    project,
+    'FakeScene3D::Cube3DObject',
+    'CubeObject',
+    0
+  );
   const panelSpriteObject = testLayout.insertNewObject(
     project,
     'PanelSpriteObject::PanelSprite',
@@ -386,6 +394,14 @@ export const makeTestProject = (gd /*: libGDevelop */) /*: TestProject */ => {
   testLayoutInstance1.setX(10);
   testLayoutInstance1.setY(15);
 
+  const testLayoutInstance2 = testLayout
+    .getInitialInstances()
+    .insertNewInitialInstance();
+  testLayoutInstance2.setX(120);
+  testLayoutInstance2.setY(-15);
+  testLayoutInstance2.setZ(32);
+  testLayoutInstance2.setObjectName(cube3dObject.getName());
+
   const testSpriteObjectInstance = testLayout
     .getInitialInstances()
     .insertNewInitialInstance();
@@ -880,6 +896,7 @@ export const makeTestProject = (gd /*: libGDevelop */) /*: TestProject */ => {
     tiledSpriteObjectConfiguration: tiledSpriteObject.getConfiguration(),
     panelSpriteObject,
     customObject,
+    cube3dObject,
     spriteObject,
     spriteObjectConfiguration,
     emptySpriteObject,
@@ -892,6 +909,7 @@ export const makeTestProject = (gd /*: libGDevelop */) /*: TestProject */ => {
     group2,
     group4WithLongsNames,
     testLayoutInstance1,
+    testLayoutInstance2,
     testInstruction,
     testExternalEvents1,
     testExternalEvents2,

newIDE/app/src/stories/componentStories/LayoutEditor/InstancePropertiesEditor.stories.js

@@ -18,7 +18,7 @@ export default {
   decorators: [paperDecorator],
 };
 
-export const Default = () => (
+export const Instance2d = () => (
   <DragAndDropContextProvider>
     <I18n>
       {({ i18n }) => (
@@ -37,3 +37,23 @@ export const Default = () => (
     </I18n>
   </DragAndDropContextProvider>
 );
+
+export const Instance3d = () => (
+  <DragAndDropContextProvider>
+    <I18n>
+      {({ i18n }) => (
+        <SerializedObjectDisplay object={testProject.testLayout}>
+          <InstancePropertiesEditor
+            i18n={i18n}
+            project={testProject.project}
+            layout={testProject.testLayout}
+            instances={[testProject.testLayoutInstance2]}
+            editInstanceVariables={action('edit instance variables')}
+            onGetInstanceSize={() => [100, 101, 102]}
+            onEditObjectByName={action('edit object')}
+          />
+        </SerializedObjectDisplay>
+      )}
+    </I18n>
+  </DragAndDropContextProvider>
+);