Commented most of Konva Stage

Author: tonyito

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,
@@ -180,8 +184,8 @@ class KonvaStage extends Component<PropsInt, StateInt> {
       handleTransform,
       focusComponent,
       focusChild,
-      deleteChild,
-      classes
+      // deleteChild, **neither of these are read**
+      // classes
     } = this.props;
 
     return (

src/containers/AppContainer.tsx

@@ -36,8 +36,9 @@ type State = {
 
 //I'm still trying to figure out the typing for the 'workspace' property,
 //feel free to assign it the correct type. It seems to point to componentReducer.
+//Details on some of these are listed in the render where they are passed down.
 const mapStateToProps = (store: {workspace: any}) => ({
-  imageSource: store.workspace.imageSource,
+  imageSource: store.workspace.imageSource, 
   components: store.workspace.components,
   totalComponents: store.workspace.totalComponents,
   focusComponent: store.workspace.focusComponent,

src/containers/MainContainer.tsx

@@ -46,9 +46,10 @@ interface StateInt {
   modal: any;
 }
 
-const IPC = require('electron').ipcRenderer;
+// const IPC = require('electron').ipcRenderer; **Variable declared but never used**
 
 const mapDispatchToProps = (dispatch: any) => ({
+  //this passes the coordinate info from any component bound to the Konva Transformer to the store
   handleTransformation: (
     componentId: number,
     childId: number,
@@ -67,19 +68,25 @@ const mapDispatchToProps = (dispatch: any) => ({
         height
       })
     ),
-  changeImagePath: (imageSource: string) =>
-    dispatch(actions.changeImagePath(imageSource)),
+    //this doesn't do anything here
+  // changeImagePath: (imageSource: string) =>
+  //   dispatch(actions.changeImagePath(imageSource)),
 
+
+  //this function changes the focus of the child within the focused component, thereby binding it to the transformer as a node
   changeFocusChild: ({ childId }: { childId: number }) =>
     dispatch(changeFocusChild({ childId })),
+
+  //the difference between this dispatch function and the one above, is that this once alters the focused child status within the array of components,
+  //vs the one above changes the focusChild property in the state
   changeComponentFocusChild: ({
     componentId,
     childId
   }: {
     componentId: number;
     childId: number;
   }) => dispatch(changeComponentFocusChild({ componentId, childId })),
-  deleteChild: ({}) => dispatch(deleteChild({})) // if u send no prms, function will delete focus child.
+  deleteChild: ({}) => dispatch(deleteChild({})) // if u send no prms, function will delete focus child. <-- This comment was already here, unsure what exactly it means. 
 });
 
 const mapStateToProps = (store: any) => ({
@@ -89,18 +96,20 @@ const mapStateToProps = (store: any) => ({
 });
 
 class MainContainer extends Component<PropsInt, StateInt> {
-  state = {
-    draggable: false,
-    toggleClass: true,
-    scaleX: 1,
-    scaleY: 1,
-    x: 0,
-    y: 0,
-    modal: ''
-  };
+  //Again, state should not be created outside of the single source of truth
+  //Actually upon further examination, it looks like this state isn't manipulated at all.
+  // state = {
+  //   draggable: false,
+  //   toggleClass: true,
+  //   scaleX: 1,
+  //   scaleY: 1,
+  //   x: 0,
+  //   y: 0,
+  //   modal: ''
+  // };
 
   render() {
-    const { draggable, scaleX, scaleY, modal, toggleClass } = this.state;
+    //const { draggable, modal } = this.state; //this is being destructured but never read. 
     const {
       components,
       handleTransformation,
@@ -113,18 +122,19 @@ class MainContainer extends Component<PropsInt, StateInt> {
       image
     } = this.props;
 
-    const { main }: { main: HTMLDivElement } = this;
+    // const { main }: { main: HTMLDivElement } = this; **I don't think this has any function**
 
     return (
       <MuiThemeProvider theme={theme}>
         <div className='main-container'>
-          {modal}
-          <div className='main' ref={main}>
+          {/* {modal} */}
+          <div className='main' //ref={main} **no function, commenting out**
+          >
             <KonvaStage
               image={image}
               scaleX={1}
               scaleY={1}
-              draggable={draggable}
+              // draggable={draggable} this is also from this local state but never read past this container
               components={components}
               handleTransform={handleTransformation}
               focusComponent={focusComponent}