feat(ui): require parentId when adding form elements

invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/dnd-hooks.ts

@@ -200,12 +200,12 @@ export const useBuilderDndMonitor = () => {
               log.error(parseify({ target, source }), 'Expected target to be a container');
               return;
             }
-            sourceElement.parentId = targetElement.id;
             dispatchAndFlash(
               formElementAdded({
                 element: sourceElement,
-                initialValue: getInitialValue(sourceElement),
+                parentId: targetElement.id,
                 index: 0,
+                initialValue: getInitialValue(sourceElement),
               }),
               sourceElement.id
             );
@@ -224,10 +224,10 @@ export const useBuilderDndMonitor = () => {
               closestEdgeOfTarget,
               axis: parent.data.layout === 'row' ? 'horizontal' : 'vertical',
             });
-            sourceElement.parentId = parent.id;
             dispatchAndFlash(
               formElementAdded({
                 element: sourceElement,
+                parentId: parent.id,
                 index,
                 initialValue: getInitialValue(sourceElement),
               }),

invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/form-manipulation.ts

@@ -78,14 +78,14 @@ export const reparentElement = (args: {
     return false;
   }
 
-  if (!element.parentId) {
+  if (form.rootElementId === element.id || !element.parentId) {
     // Can't reparent the root element
     return false;
   }
 
   if (newParentId === element.parentId) {
-    // Nothing to do
-    return false;
+    // Nothing to do if the element is already a child of the new parent
+    return true;
   }
 
   const oldParent = elements[element.parentId];
@@ -116,20 +116,21 @@ export const reparentElement = (args: {
  *
  * @returns True if the element was added, false otherwise
  */
-export const addElement = (args: { form: BuilderForm; element: FormElement; index: number }): boolean => {
-  const { form, element, index } = args;
+export const addElement = (args: {
+  form: BuilderForm;
+  element: FormElement;
+  parentId: string;
+  index: number;
+}): boolean => {
+  const { form, element, parentId, index } = args;
   const { elements } = form;
 
-  if (!element.parentId) {
-    // We cannot add a root element
-    return false;
-  }
-
-  const parent = elements[element.parentId];
+  const parent = elements[parentId];
   if (!parent || !isContainerElement(parent)) {
     return false;
   }
 
+  element.parentId = parentId;
   elements[element.id] = element;
   parent.data.children.splice(index, 0, element.id);
   return true;

invokeai/frontend/web/src/features/nodes/store/workflowSlice.ts

@@ -164,15 +164,16 @@ export const workflowSlice = createSlice({
       state,
       action: PayloadAction<{
         element: FormElement;
+        parentId: ElementId;
         index: number;
         initialValue?: StatefulFieldValue;
       }>
     ) => {
       const { form } = state;
-      const { element, index } = action.payload;
-      addElement({ form, element, index });
+      const { element, parentId, index, initialValue } = action.payload;
+      addElement({ form, element, parentId, index });
       if (isNodeFieldElement(element)) {
-        state.formFieldInitialValues[element.id] = action.payload.initialValue;
+        state.formFieldInitialValues[element.id] = initialValue;
       }
     },
     formElementRemoved: (state, action: PayloadAction<{ id: string }>) => {