WIP

GDevelop.js/Bindings/Bindings.idl

@@ -271,6 +271,7 @@ interface Variable {
     void UnserializeFrom([Const, Ref] SerializerElement element);
     [Ref] Variable ResetPersistentUuid();
     [Ref] Variable ClearPersistentUuid();
+    [Const, Ref] DOMString GetPersistentUuid();
 };
 
 interface VariablesContainer {
@@ -1854,7 +1855,7 @@ interface BehaviorMetadata {
 
     [Ref] Behavior Get();
     BehaviorsSharedData GetSharedDataInstance();
-    
+
     [Value] MapStringPropertyDescriptor GetProperties();
     [Value] MapStringPropertyDescriptor GetSharedProperties();
 };

GDevelop.js/types.d.ts

@@ -264,6 +264,7 @@ export class Variable extends EmscriptenObject {
   unserializeFrom(element: SerializerElement): void;
   resetPersistentUuid(): Variable;
   clearPersistentUuid(): Variable;
+  getPersistentUuid(): string;
 }
 
 export class VariablesContainer extends EmscriptenObject {

GDevelop.js/types/gdvariable.js

@@ -36,6 +36,7 @@ declare class gdVariable {
   unserializeFrom(element: gdSerializerElement): void;
   resetPersistentUuid(): gdVariable;
   clearPersistentUuid(): gdVariable;
+  getPersistentUuid(): string;
   delete(): void;
   ptr: number;
 };

newIDE/app/src/Utils/VariablesUtils.js

@@ -62,10 +62,10 @@ export const insertInVariablesContainer = (
   const newVariable = new gd.Variable();
   if (serializedVariable) {
     unserializeFromJSObject(newVariable, serializedVariable);
-    newVariable.resetPersistentUuid();
   } else {
     newVariable.setString('');
   }
+  newVariable.resetPersistentUuid();
   const variable = variablesContainer.insert(newName, newVariable, index);
   newVariable.delete();
   return { name: newName, variable };

newIDE/app/src/VariablesList/VariablesList.js

@@ -12,7 +12,7 @@ import ChevronRight from '../UI/CustomSvgIcons/ChevronArrowRight';
 import ChevronBottom from '../UI/CustomSvgIcons/ChevronArrowBottom';
 import ButtonBase from '@material-ui/core/ButtonBase';
 
-import { Column, Line, Spacer } from '../UI/Grid';
+import { Column, Line, marginsSize, Spacer } from '../UI/Grid';
 import IconButton from '../UI/IconButton';
 import { DragHandleIcon } from '../UI/DragHandle';
 import { makeDragSourceAndDropTarget } from '../UI/DragAndDrop/DragSourceAndDropTarget';
@@ -84,7 +84,11 @@ const DragSourceAndDropTarget = makeDragSourceAndDropTarget('variable-editor');
 const stopEventPropagation = (event: SyntheticPointerEvent<HTMLInputElement>) =>
   event.stopPropagation();
 
-const styles = { inlineIcon: { padding: 0 }, handlePlaceholder: { width: 24 } };
+const styles = {
+  inlineIcon: { padding: 0 },
+  handlePlaceholder: { width: 24 },
+  undeclaredVariablePaper: { marginTop: marginsSize },
+};
 
 export type HistoryHandler = {|
   saveToHistory: () => void,
@@ -528,6 +532,48 @@ const VariablesList = (props: Props) => {
     () => (onComputeAllVariableNames ? onComputeAllVariableNames() : null),
     [onComputeAllVariableNames]
   );
+
+  const computeVariableNamesToVariablesUuid = React.useCallback(
+    () => {
+      console.log('salut', allVariablesNames);
+      if (!allVariablesNames) return {};
+      return allVariablesNames.reduce((acc, variableName) => {
+        if (props.variablesContainer.has(variableName)) {
+          console.log(`got it ${variableName}`);
+          acc[variableName] = props.variablesContainer
+            .get(variableName)
+            .getPersistentUuid();
+        } else if (
+          props.inheritedVariablesContainer &&
+          props.inheritedVariablesContainer.has(variableName)
+        ) {
+          acc[variableName] = props.inheritedVariablesContainer
+            .get(variableName)
+            .getPersistentUuid();
+        } else {
+          acc[variableName] = null;
+        }
+        return acc;
+      }, {});
+    },
+    [
+      allVariablesNames,
+      props.variablesContainer,
+      props.inheritedVariablesContainer,
+    ]
+  );
+
+  const initialVariableNamesToVariablesUuid = React.useRef<{
+    [variableName: string]: ?string,
+  }>(computeVariableNamesToVariablesUuid());
+
+  const [
+    variableNamesToVariablesUuid,
+    setVariableNamesToVariablesUuid,
+  ] = React.useState<{
+    [variableName: string]: ?string,
+  }>(computeVariableNamesToVariablesUuid);
+
   const [selectedNodes, setSelectedNodes] = React.useState<Array<string>>([]);
   const [searchMatchingNodes, setSearchMatchingNodes] = React.useState<
     Array<string>
@@ -596,15 +642,12 @@ const VariablesList = (props: Props) => {
     [containerWidth, props.size]
   );
 
-  const undefinedVariableNames = allVariablesNames
+  const undeclaredVariableNames = Object.entries(variableNamesToVariablesUuid)
-    ? allVariablesNames.filter(variableName => {
+    .map(([variableName, variableUuid]) =>
-        return (
+      variableUuid !== null ? null : variableName
-          !props.variablesContainer.has(variableName) &&
+    )
-          (!props.inheritedVariablesContainer ||
+    .filter(Boolean);
-            !props.inheritedVariablesContainer.has(variableName))
+  console.log(variableNamesToVariablesUuid, undeclaredVariableNames);
-        );
-      })
-    : [];
 
   const { historyHandler, onVariablesUpdated, variablesContainer } = props;
   const _onChange = React.useCallback(
@@ -844,9 +887,10 @@ const VariablesList = (props: Props) => {
       if (success) {
         _onChange();
         forceUpdate();
+        setVariableNamesToVariablesUuid(computeVariableNamesToVariablesUuid);
       }
     },
-    [_onChange, forceUpdate, _deleteNode]
+    [_onChange, forceUpdate, _deleteNode, computeVariableNamesToVariablesUuid]
   );
 
   const deleteSelection = React.useCallback(
@@ -864,9 +908,10 @@ const VariablesList = (props: Props) => {
       if (deleteSuccesses.some(Boolean)) {
         _onChange();
         setSelectedNodes([]);
+        setVariableNamesToVariablesUuid(computeVariableNamesToVariablesUuid);
       }
     },
-    [_onChange, _deleteNode, selectedNodes]
+    [_onChange, _deleteNode, selectedNodes, computeVariableNamesToVariablesUuid]
   );
 
   const updateExpandedAndSelectedNodesFollowingNameChange = React.useCallback(
@@ -1463,6 +1508,7 @@ const VariablesList = (props: Props) => {
 
       if (!parentVariable) {
         props.variablesContainer.rename(name, safeAndUniqueNewName);
+        setVariableNamesToVariablesUuid(computeVariableNamesToVariablesUuid);
       } else {
         parentVariable.renameChild(name, safeAndUniqueNewName);
       }
@@ -1478,6 +1524,7 @@ const VariablesList = (props: Props) => {
       _onChange,
       props.variablesContainer,
       updateExpandedAndSelectedNodesFollowingNameChange,
+      computeVariableNamesToVariablesUuid,
       refocusNameField,
     ]
   );
@@ -1709,13 +1756,17 @@ const VariablesList = (props: Props) => {
                           ? renderTree(i18n, true)
                           : null}
                         {renderTree(i18n)}
-                        {!!undefinedVariableNames.length && (
+                        {!!undeclaredVariableNames.length && (
-                          <Paper background="dark" variant="outlined">
+                          <Paper
+                            background="dark"
+                            variant="outlined"
+                            style={styles.undeclaredVariablePaper}
+                          >
                             <Column>
                               <Text>
                                 <MarkdownText
                                   translatableSource={t`There are variables used in events but not declared in this list: ${'`' +
-                                    undefinedVariableNames.join('`, `') +
+                                    undeclaredVariableNames.join('`, `') +
                                     '`'}.`}
                                 />
                               </Text>