Added comments from previous contributor

Author: null267

src/components/GrandchildRectangle.tsx

@@ -4,7 +4,8 @@ import { Rect, Group } from 'react-konva';
 import { ComponentsInt, ComponentInt, ChildInt } from '../utils/interfaces';
 
 // ** this file might restrict you from making the child of a component one of its references - prevents circular references
-
+// Component does enable nesting of arbitrary numbers of child components, but it does NOT prevent circular references
+// Only check for that is in LeftColExpansionPanel on or around line 138
 interface PropsInt {
   x: number;
   y: number;

src/components/KonvaStage.tsx

@@ -4,6 +4,7 @@ import Rectangle from './Rectangle.tsx';
 import { cloneDeep } from '../utils/index.util';
 import { ComponentInt, ComponentsInt, ChildInt } from '../utils/interfaces.ts';
 
+//Props are intended to totally describe configuration of a single Rectangle
 interface PropsInt {
   components: ComponentsInt;
   focusComponent: ComponentInt;
@@ -43,14 +44,20 @@ class KonvaStage extends Component<PropsInt, StateInt> {
   }
 
   getDirectChildrenCopy(focusComponent: ComponentInt) {
+    //Finds the component currently selected by the user
     const component = this.props.components.find(
       (comp: ComponentInt) => comp.id === focusComponent.id,
     );
-
+    // Removes the pseudoChild from the array
     const childrenArr = component.children.filter((child: ChildInt) => child.childId !== -1);
-
+    
+    //childrenArr is a different array than component children
+    //However, it may have nested references (to original component.children array)
+    //Therefore, a deep copy is necessary to ensure that state is not accidentally mutated
     let childrenArrCopy = cloneDeep(childrenArr);
-
+    
+    //pseudoChild is a convenience object; other than its childID, it is a copy of the parent
+    //Not intended to be rendered
     const pseudoChild = {
       childId: -1,
       childComponentId: component.id,
@@ -99,7 +106,9 @@ class KonvaStage extends Component<PropsInt, StateInt> {
       this.props.deleteChild({});
     }
   };
-
+  //Handles a user click event on the Konva Stage (see line 199)
+  //Changes the focusChild of the selected component
+  //The focusChild's props may be changed in the right tab
   handleStageMouseDown = (e: any) => {
     // clicked on stage - clear selection
     if (e.target === e.target.getStage()) {
@@ -111,7 +120,7 @@ class KonvaStage extends Component<PropsInt, StateInt> {
       return;
     }
 
-    // find clicked rect by its name
+    // find clicked rect by its childId
     const rectChildId = e.target.attrs.childId;
     // console.log("user clicked on child rectangle with childId: ", rectChildId);
     this.props.changeFocusChild({ childId: rectChildId });
@@ -121,6 +130,9 @@ class KonvaStage extends Component<PropsInt, StateInt> {
     });
   };
 
+  //Generates an array of Konva Line components (vertical and horizontal) spaced by blockSnapSize pixels
+  //Rectangle components are aligned to this grid
+  //blockSnapSize is used elsewhere to snap same to nearest grid line
   createGrid = () => {
     const output = [];
     for (let i = 0; i < this.state.stageWidth / this.state.blockSnapSize; i++) {
@@ -195,6 +207,9 @@ class KonvaStage extends Component<PropsInt, StateInt> {
             }}
           >
             {this.state.grid}
+            {// Given the current focusComponent (selected by clicking in LeftContainer),
+             // the below code maps over its children and renders a Rectangle component for each
+            }
             {this.getDirectChildrenCopy(focusComponent)
               .map((child: ChildInt, i: number) => (
                 <Rectangle

src/utils/componentRender.util.ts

@@ -79,6 +79,10 @@ const componentNameGenerator = (child: ChildState) => {
   }
 }
 
+//Given a component's state (obtained via iteration through state object)
+//This generates a React component file using template literals
+//(Including import statements, component props, and a render function)
+//The other functions in this file are subsidiary to the below
 const componentRender = (component: ComponentState, components: ComponentState[]) => {
   const { children, title, props } : {
   children: ChildState[];

src/utils/reducer.util.ts

@@ -102,6 +102,8 @@ export const closeExpanded = (components: ComponentState[], id? : number): void
   });
 }
 
+// This action adds a child to the current focusComponent 
+// (The component currently selected in LeftContainer)
 export const addChild = (
   state: ApplicationState,
   { title, childType = '', HTMLInfo = {} }: { title: string; childType: string; HTMLInfo: object },
@@ -117,8 +119,8 @@ export const addChild = (
     childType = 'HTML';
   }
 
-  // view represents the curretn FOCUSED COMPONENT - this is the component where the child is being added to
-  // we only add childrent (or do any action) to the focused omconent
+  // view represents the current FOCUSED COMPONENT - this is the component where the child is being added to
+  // we only add children (perform any action) to the focused component
   const view: ComponentState = state.components.find(comp => comp.title === state.focusComponent.title);
 
   // parentComponent is the component this child is generated from (ex. instance of Box has comp of Box)
@@ -137,21 +139,22 @@ export const addChild = (
   let htmlElemPosition: htmlElemPositionInt = { width: null, height: null };
   if (childType === 'HTML') {
     htmlElemPosition = getSize(htmlElement);
-    // if above function doesnt reutn anything, it means html element is not in our database
+    // if above function doesn't return anything, it means html element is not yet implemented
     if (!htmlElemPosition.width) {
       console.log(
         `Did not add html child: ${htmlElement} the GetSize function indicated that it isnt in our DB`
       );
       return;
     }
   }
-
+  // The postion of the new child is dependent on its parent, the focusComponent (called view here)
   const newPosition =
     childType === 'COMP'
       ? {
+          //In order to avoid the overlap of newly added children, this adds an x and y offset
           x: view.position.x + ((view.nextChildId * 16) % 150), // new children are offset by some amount, map of 150px
           y: view.position.y + ((view.nextChildId * 16) % 150),
-          width: parentComponent.position.width - 1, // new children have an initial position of their CLASS (maybe don't need 90%)
+          width: parentComponent.position.width - 1, // the size of new children is based on that of parent component
           height: parentComponent.position.height - 1
         }
       : {
@@ -160,15 +163,15 @@ export const addChild = (
           width: htmlElemPosition.width,
           height: htmlElemPosition.height
         };
-
+  // Creation of the actual new child object with all data necessary to render a Rectangle
   const newChild: ChildState = {
     childId: view.nextChildId,
     childSort: view.nextChildId,
     childType,
     childComponentId: childType === 'COMP' ? parentComponent.id : null, // only relevant fot children of type COMPONENT
     componentName: strippedTitle,
     position: newPosition,
-    color: null, // parentComponent.color, // only relevant fot children of type COMPONENT
+    color: null, // parentComponent.color, // only relevant for children of type COMPONENT 
     htmlElement, // only relevant fot children of type HTML
     HTMLInfo
   };