Finished commenting Reactangle, GrandChild, most of Konva

tonyito · tonyito · commit ec7dcbebbaf8 · 2020-03-15T16:07:28.000-07:00
diff --git a/src/components/GrandchildRectangle.tsx b/src/components/GrandchildRectangle.tsx
@@ -2,6 +2,11 @@ import React, { Component } from "react";
 import { Rect, Group } from "react-konva";
 import { ComponentsInt, ComponentInt, ChildInt } from "../utils/Interfaces.ts";
 
+//////////////////////////////////////////////////////////////////////////////
+/////Logic in this component is mainly the same as Rectangle.tsx./////////////
+/////Not going to bother commenting too much in here for this reason./////////
+//////////////////////////////////////////////////////////////////////////////
+
 interface PropsInt {
   x: number;
   y: number;
@@ -45,6 +50,7 @@ class GrandchildRectangle extends Component<PropsInt, StateInt> {
     );
   }
 
+  //pretty sure this does nothing here because an image source is never passed down this deep...
   setImage = (imageSource: string): void => {
     if (!imageSource) return;
     const image = new window.Image();
@@ -75,7 +81,7 @@ class GrandchildRectangle extends Component<PropsInt, StateInt> {
     // the Rect emits changes to child width and height with help from Transformer
     return (
       <Group
-        draggable={false}
+        draggable={false} //this logic is necessary to make sure the user can't click on any grandchildren
         x={x}
         y={y}
         scaleX={scaleX}
diff --git a/src/components/KonvaStage.tsx b/src/components/KonvaStage.tsx
@@ -82,6 +82,7 @@ class KonvaStage extends Component<PropsInt, StateInt> {
     return childrenArrCopy;
   }
 
+  //currently, only the handlekeydown event listener does anything.
   componentDidMount() {
     this.checkSize();
     // here we should add listener for "container" resize
@@ -92,11 +93,14 @@ class KonvaStage extends Component<PropsInt, StateInt> {
     this.createGrid();
   }
 
+  // I wonder if this lifecycle method is necessary. When I remove it,
+  //I can't find any noticable changes. Possibly to prevent memory leaks?
   componentWillUnmount() {
     window.removeEventListener("resize", this.checkSize);
     this.container.removeEventListener("keydown", this.handleKeyDown);
   }
 
+  //something about the logic here isn't working. Will need to check some other time. 
   checkSize = () => {
     const width = this.container.offsetWidth;
     const height = this.container.offsetHeight;
@@ -135,7 +139,9 @@ class KonvaStage extends Component<PropsInt, StateInt> {
       childId: rectChildId
     });
   };
-
+  //this function creates a grid with those 10x10 squares. 
+  //it first draws a grid or horizaontal lines, and then 
+  //draws the vertical ones. 
   createGrid = () => {
     const output = [];
     for (let i = 0; i < this.state.stageWidth / this.state.blockSnapSize; i++) {
diff --git a/src/components/Rectangle.tsx b/src/components/Rectangle.tsx
@@ -29,30 +29,53 @@ interface PropsInt {
 
 
 class Rectangle extends Component<PropsInt> {
-
+  //This assigns the color to the Rect based on componentId's color in the state
   getComponentColor(componentId: number) {
     const color = this.props.components.find(
       (comp: ComponentInt) => comp.id === componentId
     ).color;
     return color;
   }
 
+  //this grabs the component ID of the child component when in the parent component's display mode
+  //mysteriously name pseudochild although it is the true child of the component currently rendered on the stage...
+  //maybe some poeple don't consider children to be real children, kind of how my grandmother treated me better than 
+  //she treated my mother
   getPseudoChild() {
     return this.props.components.find(
       (comp: ComponentInt) => comp.id === this.props.childComponentId
     );
   }
 
+  //resize function
   handleResize(componentId: number, childId: number, target: Konva.Group, blockSnapSize: number) {
+    //find the id of the component where the componentID in the state equals the currently focused component
+    //and then find the numberID for that component
+    //So, this would be assigning "Container 1", with component ID being whatever the ID for "Container" is
+    //and 1 being the child ID
     let focChild: ChildInt | ComponentInt = this.props.components
       .find((comp: ComponentInt) => comp.id === this.props.componentId)
       .childrenArray.find((child: ChildInt) => child.childId === childId);
 
+    //If this is the parent component, it would not have a childID (hence -1), so it just would assign the forChild
+    //variable to the parent.
     if (childId === -1) {
       focChild = this.props.components.find(
         (comp: ComponentInt) => comp.id === this.props.componentId
       );
     }
+
+    //The math here is easier than it looks
+    //Basically, the height and width is first rounded up to a whole number (behind the whole snapping phenomenon)
+    //after scaling it by multiplying it by scaleX/Y (height and width are the original height and width, the scale is the CHANGE in w/h),  
+    //dividing it by the 'snapsize' or grid unit area (which is 10x10 for this entire application) and re-multiplied by
+    //that same snapsize. I'm not entirely sure why this had to be divided before the rounding, and re-multiplied,
+    //since having positions that aren't a whole number doesn't seem to be that big of a deal. 
+
+    //So there's a bit of redundancy in the x and y info. target.x() or y() only log the CHANGE of position of the Rect component.
+    //Since when you change the width or height of the component you do not change the actual position, the 
+    //value for x an y dispatched to the action creator will always be the same as the current x,y position, unless you can somehow
+    //resize AND reposition at the same time.  
     const transformation = {
       width:
         Math.round((target.width() * target.scaleX()) / blockSnapSize) *
@@ -66,6 +89,8 @@ class Rectangle extends Component<PropsInt> {
     this.props.handleTransform(componentId, childId, transformation);
   }
 
+  //mostly the same logic as above, just grabbing the change in position for the focused child and sending it 
+  //to the action creator.
   handleDrag(componentId: number, childId: number, target: Konva.Group, blockSnapSize: number) {
     const transformation = {
       x: Math.round(target.x() / blockSnapSize) * blockSnapSize,
@@ -108,15 +133,15 @@ class Rectangle extends Component<PropsInt> {
         onDragEnd={event =>
           this.handleDrag(componentId, childId, event.target, blockSnapSize)
         }
-        ref={node => {
+        ref={node => { //this refference actually isn't doing anything since it isn't within the transformer component
           this.group = node;
         }}
         tabIndex='0' // required for keypress event to be heard by this.group
       >
-        <Rect
+        <Rect //basically the entire canvas
           // a Konva Rect is generated for each child of the focusComponent (including the pseudochild, representing the focusComponent itself)
           ref={node => {
-            this.rect = node;
+            this.rect = node; //same as above, the reference isn't assigned or pointing to anything
           }}
           tabIndex='0' // required for keypress event to be heard by this.group
           name={`${childId}`}
@@ -133,45 +158,45 @@ class Rectangle extends Component<PropsInt> {
           stroke={
             childType === 'COMP'
               ? this.getComponentColor(childComponentId)
-              : '#000000'
+              : '#000000' //sets the parent component color to black, this logic actually doesn't need to exist at the level of this component
           }
           onTransformEnd={event =>
             this.handleResize(componentId, childId, event.target, blockSnapSize)
           }
-          strokeWidth={childType === 'COMP' ? 4 : 2}
+          strokeWidth={childType === 'COMP' ? 4 : 2} 
           strokeScaleEnabled={false}
           draggable={false}
           fill={null}
           shadowBlur={childId === -1 ? 6 : null}
           fillPatternImage={childId === -1  ? this.props.image : null} //spooky addition, image if uploaded will only be background of App component
-          fillPatternScaleX={this.props.image ? width / this.props.image.width : 1}
-          fillPatternScaleY={this.props.image? height / this.props.image.height : 1}
+          fillPatternScaleX={this.props.image ? width / this.props.image.width : 1} //here we are making sure the width of the image will stretch of shrink
+          fillPatternScaleY={this.props.image? height / this.props.image.height : 1} //based on the width or height of the App component
           _useStrictMode
         />
         <Label>
-          <Text
+          <Text //this is just the text that goes above each Rect, 
             fontStyle={'bold'}
             fontVariant={'small-caps'}
             // pseudochild's label should look different than normal children:
-            text={childId === -1 ? title.slice(0, title.length - 2) : title}
+            text={childId === -1 ? title.slice(0, title.length - 2) : title} //slices the number off of the title of the top component
             fill={
               childId === -1
                 ? this.getComponentColor(childComponentId)
-                : '#000000'
+                : '#000000' //opposite logic of the stroke
             }
             fontSize={childId === -1 ? 15 : 10}
             x={4}
             y={childId === -1 ? -20 : -12}
           />
         </Label>
         {// for all children other than the pseudoChild, find their component's children array and recursively render the children found there
-        childId !== -1 &&
-          childType === 'COMP' &&
-          components
+        childId !== -1 && //inline conditional to check if a child exists
+          childType === 'COMP' && //inline conditional to see if the child is a component, not an HTML element
+          components //map all 'grandchildren' in the child on display to this new component
             .find((comp: ComponentInt) => comp.title === childComponentName)
             .childrenArray.filter((child: ChildInt) => child.childId !== -1)
             .map((grandchild: ChildInt, i: number) => (
-              <GrandchildRectangle
+              <GrandchildRectangle 
                 key={i}
                 components={components}
                 componentId={componentId}
@@ -181,15 +206,15 @@ class Rectangle extends Component<PropsInt> {
                 childComponentId={grandchild.childComponentId}
                 focusChild={focusChild}
                 childId={childId} // scary addition, grandchildren rects default to childId of "direct" children
-                width={
+                width={ //this is the logic used to display the grandchildren with proper scaling based on the parent (technically child) h/w
                   grandchild.position.width *
                   (width / this.getPseudoChild().position.width)
                 }
                 height={
                   grandchild.position.height *
                   (height / this.getPseudoChild().position.height)
                 }
-                x={
+                x={ //similar logic to above
                   (grandchild.position.x - this.getPseudoChild().position.x) *
                   (width / this.getPseudoChild().position.width)
                 }
@@ -199,7 +224,7 @@ class Rectangle extends Component<PropsInt> {
                 }
               />
             ))}
-        {focusChild && focusChild.childId === childId && draggable && (
+        {focusChild && focusChild.childId === childId && draggable && ( //this conditional logic binds the transformer to the focused child, and Draggable is checked to make sure grandchildren can't be selected
           <TransformerComponent //This is the component that binds the Rect nodes to the Transformer node so they can be resized.
             focusChild={focusChild}
             rectClass={'childRect'}
diff --git a/src/containers/MainContainer.tsx b/src/containers/MainContainer.tsx
@@ -25,7 +25,7 @@ interface PropsInt {
   // addChild: any; **It's expecting this prop in the interface, but is never used.**
   // changeFocusComponent: any; **It's expecting this prop in the interface, but is never used.**
   changeFocusChild: any;
-  changeImagePath: any;
+  // changeImagePath: any; **It's declared but function below doesn't do anything**
   // deleteComponent: any; **It's expecting this prop in the interface, but is never used.**
   // createApp: any; **It's expecting this prop in the interface, but is never used.**
   // deleteAllData: any; **It's expecting this prop in the interface, but is never used.**
diff --git a/src/utils/componentRender.util.ts b/src/utils/componentRender.util.ts
@@ -175,7 +175,7 @@ const componentRender = (
         ${cloneDeep(childrenArray)
           .sort((a: ChildInt, b: ChildInt) => a.childSort - b.childSort)
           .map((child: ChildInt) => {
-            console.log('this is childrenArray', child.HTMLInfo);
+            //console.log('this is childrenArray', child.HTMLInfo); //Did someone leave this here?//
             if (child.componentName == 'Button') {
               return `
               <${componentNameGenerator(child)} ${propDrillTextGenerator(
