Merge pull request #17 from tonyito/mvp

Comments Batch #1

Author: sean1292

.gitignore

@@ -1,5 +1,6 @@
 # Created by https://www.gitignore.io/api/node,linux,macos,windows,visualstudio,yarn
 yarn.lock
+package-lock.json
 ### Linux ###
 *~
 

src/actions/components.ts

@@ -1,6 +1,6 @@
 import {
-  ComponentInt, ComponentsInt, PropInt, ChildInt, Action, ApplicationStateInt, LoadInitData, AddComponent
-} from '../utils/Interfaces.ts';
+  ComponentInt, ComponentsInt, PropInt, ChildInt, Action
+} from '../utils/Interfaces';
 
 import {
   LOAD_INIT_DATA,
@@ -26,14 +26,14 @@ import {
   ADD_PROP,
   DELETE_ALL_DATA,
   UPDATE_HTML_ATTR,
-  UPDATE_CHILDREN_SORT,
+ // UPDATE_CHILDREN_SORT, --The reason why this is commented out is because of the unused reducer of the same name, for the component that is unfinished with the same name. Check out the Sort Children component to see what it does.
   CHANGE_IMAGE_SOURCE,
   DELETE_IMAGE
-} from '../actionTypes/index.ts';
+} from '../actionTypes/index';
 
-import { loadState } from '../localStorage';
-import createFiles from '../utils/createFiles.util.ts';
-import createApplicationUtil from '../utils/createApplication.util.ts';
+import { loadState } from '../localStorage'; //this is a warning from 'localStorage' being a .js file instead of .ts. Convert to .ts to remove this warning.
+import createFiles from '../utils/createFiles.util';
+import createApplicationUtil from '../utils/createApplication.util';
 
 export const changeImagePath = (imageSource: string) => ({
   type: CHANGE_IMAGE_SOURCE,
@@ -51,7 +51,7 @@ export const loadInitData = () => (dispatch: (arg: Action) => void) => {
   });
 };
 
-export const addComponent = ({ title }: { title: string }) => (dispatch: (arg: AddComponent) => void) => {
+export const addComponent = ({ title }: { title: string }) => (dispatch: (arg: Action) => void) => {
   dispatch({ type: ADD_COMPONENT, payload: { title } });
 };
 
@@ -81,7 +81,7 @@ export const deleteComponent = ({
 }) => (dispatch: (arg: Action) => void) => {
   // find all places where the "to be deleted" is a child and do what u gotta do
   stateComponents.forEach((parent: ComponentInt) => {
-    parent.childrenArray
+    parent.childrenArrayChildInt
       .filter((child: ChildInt) => child.childComponentId === componentId)
       .forEach((child: ChildInt) => {
         dispatch({
@@ -147,7 +147,7 @@ export const exportFiles = ({
     type: EXPORT_FILES
   });
   createFiles(components, path, appName, exportAppBool)
-    .then((dir: string) =>
+    .then((dir: any) =>
       dispatch({
         type: EXPORT_FILES_SUCCESS,
         payload: { status: true, dir: dir[0] }
@@ -194,7 +194,7 @@ export const createApplication = ({
   genOption: number;
   appName: string;
   exportAppBool: boolean;
-}) => (dispatch: (arg: Action) => void) => {
+}) => (dispatch: (arg: any) => void) => {
   if (genOption === 0) {
     exportAppBool = false;
     dispatch(

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}

src/components/KonvaStage.tsx

@@ -12,22 +12,22 @@ interface PropsInt {
   image: HTMLImageElement;
   components: ComponentsInt;
   focusComponent: ComponentInt;
-  selectableChildren: Array<number>;
+  // selectableChildren: Array<number>; **It's expecting this prop in the interface, but is never used.**
   classes: any;
-  addComponent: any;
-  addChild: any;
-  changeFocusComponent: any;
+  // addComponent: any; **It's expecting this prop in the interface, but is never used.**
+  // 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;
-  deleteComponent: any;
-  createApp: any;
-  deleteAllData: any;
+  // 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.**
   handleTransform: any;
   focusChild: any;
   changeComponentFocusChild: any;
   deleteChild: any;
   scaleX: number;
   scaleY: number;
-  draggable: boolean;
+  // draggable: boolean; **THIS ONE is actually never passed down from the parent but reassigned in a seperate object below in this file.**
 }
 
 interface StateInt {
@@ -41,6 +41,10 @@ interface StateInt {
 class KonvaStage extends Component<PropsInt, StateInt> {
   constructor(props: PropsInt) {
     super(props);
+    //the main purpose of this state, although not supposed to be here per redux rules I believe, 
+    //is to initialize the values of the canvas height and width in pixels, and 'blockSnapSize' refers to
+    //the height and width of the squares on the grid so it looks like graphing paper. The grid property doesn't do 
+    //anything, and the gridStroke is the stroke width of the squares. 
     this.state = {
       stageWidth: 1800,
       stageHeight: 1300,
@@ -50,17 +54,21 @@ class KonvaStage extends Component<PropsInt, StateInt> {
     };
   }
 
+  //makes a copy of the array of children plus the parent component pushed onto it
   getDirectChildrenCopy(focusComponent: ComponentInt) {
+    //assign component to the docused component
     const component = this.props.components.find(
       (comp: ComponentInt) => comp.id === focusComponent.id
     );
-
+    //assign childrenArr to an array of all the children of focused component
     const childrenArr = component.childrenArray.filter(
       (child: ChildInt) => child.childId !== -1
     );
 
+    //deep clone of childrenArr so addition of parent doesn't mutate the children saved in the state
     let childrenArrCopy = cloneDeep(childrenArr);
 
+    //adds a pseudochild witrh the parent component's property to the copied children array
     const pseudoChild = {
       childId: -1,
       childComponentId: component.id,
@@ -75,9 +83,11 @@ class KonvaStage extends Component<PropsInt, StateInt> {
       color: component.color
     };
     childrenArrCopy = childrenArrCopy.concat(pseudoChild); // could just use push here, concat needlessly generate new array
+    //returns that new childrenArr + parent component
     return childrenArrCopy;
   }
 
+  //currently, only the handlekeydown event listener does anything.
   componentDidMount() {
     this.checkSize();
     // here we should add listener for "container" resize
@@ -88,11 +98,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;
@@ -131,7 +144,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++) {
@@ -180,8 +195,8 @@ class KonvaStage extends Component<PropsInt, StateInt> {
       handleTransform,
       focusComponent,
       focusChild,
-      deleteChild,
-      classes
+      // deleteChild, **neither of these are read**
+      // classes
     } = this.props;
 
     return (
@@ -211,6 +226,8 @@ class KonvaStage extends Component<PropsInt, StateInt> {
             }}
           >
             {this.state.grid}
+            {/* {The logic hereis that it creates a new rectangle or each component that belongs to this parent component, plus the parent component.
+            The parent component is rendered last. It renders based on the values in the return value of getDirectChildrenCopy. } */}
             {!isEmpty(focusComponent) && this.getDirectChildrenCopy(focusComponent) 
               .map((child: ChildInt, i: number) => (
                 <Rectangle

src/components/Rectangle.tsx

@@ -29,30 +29,51 @@ 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
+  //named pseudochild because it isn't saved as a child in the childrenArray.
   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 +87,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 +131,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 +156,45 @@ class Rectangle extends Component<PropsInt> {
           stroke={
             childType === 'COMP'
               ? this.getComponentColor(childComponentId)
-              : '#000000'
+              : '#000000' //sets the parent component color to black
           }
           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 +204,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 +222,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'}