Display properties and effects of layers in the side panel when selected (#8055)

- This allows to quickly edit properties, notably effect properties. When the 3D editor is activated, the result are visible in real-time, which is useful to tweak lighting, shadows and other effects. This also work for layer 2D effects!

Author: D8H

newIDE/app/src/CompactPropertiesEditor/index.js

@@ -47,7 +47,7 @@ export type ValueFieldCommonProperties = {|
   getExtraDescription?: Instance => string,
   hasImpactOnAllOtherFields?: boolean,
   canBeUnlimitedUsingMinus1?: boolean,
-  disabled?: (instances: Array<gdInitialInstance>) => boolean,
+  disabled?: (instances: Array<Instance>) => boolean,
   onEditButtonBuildMenuTemplate?: (i18n: I18nType) => Array<MenuItemTemplate>,
   onEditButtonClick?: () => void,
   getValueFromDisplayedValue?: string => string,
@@ -204,6 +204,7 @@ export type Field =
       removeSpacers?: boolean,
       title?: ?string,
       children: Array<Field>,
+      isHidden?: (Array<Instance>) => boolean,
     |};
 
 // The schema is the tree of all fields.
@@ -217,6 +218,7 @@ type Props = {|
   mode?: 'column' | 'row',
   preventWrap?: boolean,
   removeSpacers?: boolean,
+  isHidden?: (Array<Instance>) => boolean,
 
   // If set, render the "extra" description content from fields
   // (see getExtraDescription).
@@ -380,6 +382,7 @@ const CompactPropertiesEditor = ({
   resourceManagementProps,
   preventWrap,
   removeSpacers,
+  isHidden,
 }: Props) => {
   const forceUpdate = useForceUpdate();
 
@@ -871,7 +874,9 @@ const CompactPropertiesEditor = ({
     );
 
   const renderContainer =
-    mode === 'row'
+    isHidden && isHidden(instances)
+      ? (fields: React.Node) => null
+      : mode === 'row'
       ? (fields: React.Node) =>
           preventWrap ? (
             removeSpacers ? (
@@ -1018,6 +1023,7 @@ const CompactPropertiesEditor = ({
               onRefreshAllFields={onRefreshAllFields}
               preventWrap={field.preventWrap}
               removeSpacers={field.removeSpacers}
+              isHidden={field.isHidden}
             />
           ) : (
             <div key={field.name} style={styles.container}>
@@ -1032,6 +1038,7 @@ const CompactPropertiesEditor = ({
                 onRefreshAllFields={onRefreshAllFields}
                 preventWrap={field.preventWrap}
                 removeSpacers={field.removeSpacers}
+                isHidden={field.isHidden}
               />
             </div>
           );

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

@@ -695,7 +695,7 @@ export const reorderInstanceSchemaForCustomProperties = (
   const contentSectionTitle: SectionTitle = {
     nonFieldType: 'sectionTitle',
     name: 'Content',
-    title: 'Content',
+    title: i18n._(t`Content`),
     getValue: undefined,
   };
   if (animationFieldIndex === -1) {

newIDE/app/src/InstancesEditor/index.js

@@ -100,7 +100,7 @@ export type InstancesEditorPropsWithoutSizeAndScroll = {|
   layersContainer: gdLayersContainer,
   globalObjectsContainer: gdObjectsContainer | null,
   objectsContainer: gdObjectsContainer,
-  selectedLayer: string,
+  chosenLayer: string,
   initialInstances: gdInitialInstancesContainer,
   instancesEditorSettings: InstancesEditorSettings,
   isInstanceOf3DObject: gdInitialInstance => boolean,
@@ -1686,7 +1686,7 @@ export default class InstancesEditor extends Component<Props, State> {
           _instancesAdder.createOrUpdateTemporaryInstancesFromObjectNames(
             pos,
             this.props.selectedObjectNames,
-            this.props.selectedLayer
+            this.props.chosenLayer
           );
         }}
         drop={monitor => {

newIDE/app/src/LayersList/BackgroundColorRow.js

@@ -0,0 +1,94 @@
+// @flow
+import { type I18n as I18nType } from '@lingui/core';
+import { t } from '@lingui/macro';
+
+import * as React from 'react';
+import { TreeViewItemContent } from '.';
+import { type HTMLDataset } from '../Utils/HTMLDataset';
+import ColorPicker from '../UI/ColorField/ColorPicker';
+
+export const backgroundColorId = 'background-color';
+
+export class BackgroundColorTreeViewItemContent implements TreeViewItemContent {
+  layout: gdLayout;
+  onBackgroundColorChanged: () => void;
+
+  constructor(layout: gdLayout, onBackgroundColorChanged: () => void) {
+    this.layout = layout;
+    this.onBackgroundColorChanged = onBackgroundColorChanged;
+  }
+
+  getName(i18n: I18nType): string | React.Node {
+    return i18n._(t`Background color`);
+  }
+
+  getId(): string {
+    return backgroundColorId;
+  }
+
+  getRightButton(i18n: I18nType) {
+    return [];
+  }
+
+  getHtmlId(index: number): ?string {
+    return backgroundColorId;
+  }
+
+  getDataSet(): ?HTMLDataset {
+    return null;
+  }
+
+  getThumbnail(): ?string {
+    return null;
+  }
+
+  onClick(): void {}
+
+  buildMenuTemplate(i18n: I18nType, index: number) {
+    return [];
+  }
+
+  renderRightComponent(i18n: I18nType): ?React.Node {
+    return (
+      <ColorPicker
+        disableAlpha
+        color={{
+          r: this.layout.getBackgroundColorRed(),
+          g: this.layout.getBackgroundColorGreen(),
+          b: this.layout.getBackgroundColorBlue(),
+          a: 255,
+        }}
+        onChangeComplete={color => {
+          this.layout.setBackgroundColor(color.rgb.r, color.rgb.g, color.rgb.b);
+          this.onBackgroundColorChanged();
+        }}
+      />
+    );
+  }
+
+  rename(newName: string): void {}
+
+  edit(): void {}
+
+  delete(): void {}
+
+  copy(): void {}
+
+  paste(): void {}
+
+  cut(): void {}
+
+  getIndex(): number {
+    return 0;
+  }
+
+  moveAt(destinationIndex: number): void {}
+
+  isDescendantOf(itemContent: TreeViewItemContent): boolean {
+    return false;
+  }
+
+  getRootId(): string {
+    return '';
+  }
+}