committing konva type changes

Author: jzuniga206

src/components/Rectangle.tsx

@@ -5,6 +5,7 @@ import TransformerComponent from './TransformerComponent';
 import GrandchildRectangle from './GrandchildRectangle';
 import { ComponentsInt, ChildInt } from '../utils/Interfaces';
 import { ComponentInt } from '../utils/Interfaces';
+import KonvaStage from './KonvaStage';
 
 interface PropsInt {
   x: number;
@@ -27,8 +28,10 @@ interface PropsInt {
   image: HTMLImageElement;
 }
 
-
 class Rectangle extends Component<PropsInt> {
+  rect: Konva.Rect;
+  group: Konva.Group;
+
   //This assigns the color to the Rect based on componentId's color in the state
   getComponentColor(componentId: number) {
     const color = this.props.components.find(
@@ -46,7 +49,12 @@ class Rectangle extends Component<PropsInt> {
   }
 
   //resize function
-  handleResize(componentId: number, childId: number, target: Konva.Group, blockSnapSize: number) {
+  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
@@ -65,15 +73,15 @@ class Rectangle extends Component<PropsInt> {
 
     //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),  
+    //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. 
+    //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 
+    //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.  
+    //resize AND reposition at the same time.
     const transformation = {
       width:
         Math.round((target.width() * target.scaleX()) / blockSnapSize) *
@@ -87,9 +95,14 @@ 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 
+  //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) {
+  handleDrag(
+    componentId: number,
+    childId: number,
+    target: Konva.Group,
+    blockSnapSize: number
+  ) {
     const transformation = {
       x: Math.round(target.x() / blockSnapSize) * blockSnapSize,
       y: Math.round(target.y() / blockSnapSize) * blockSnapSize
@@ -131,7 +144,8 @@ class Rectangle extends Component<PropsInt> {
         onDragEnd={event =>
           this.handleDrag(componentId, childId, event.target, blockSnapSize)
         }
-        ref={node => { //this refference actually isn't doing anything since it isn't within the transformer component
+        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
@@ -161,18 +175,22 @@ class Rectangle extends Component<PropsInt> {
           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} //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
+          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
+          } //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 //this is just the text that goes above each Rect, 
+          <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:
@@ -189,12 +207,12 @@ class Rectangle extends Component<PropsInt> {
         </Label>
         {// for all children other than the pseudoChild, find their component's children array and recursively render the children found there
         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
+        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}
@@ -204,15 +222,17 @@ class Rectangle extends Component<PropsInt> {
                 childComponentId={grandchild.childComponentId}
                 focusChild={focusChild}
                 childId={childId} // scary addition, grandchildren rects default to childId of "direct" children
-                width={ //this is the logic used to display the grandchildren with proper scaling based on the parent (technically child) h/w
+                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={ //similar logic to above
+                x={
+                  //similar logic to above
                   (grandchild.position.x - this.getPseudoChild().position.x) *
                   (width / this.getPseudoChild().position.width)
                 }
@@ -222,14 +242,16 @@ class Rectangle extends Component<PropsInt> {
                 }
               />
             ))}
-        {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'}
-            anchorSize={8}
-            color={'grey'}
-          />
-        )}
+        {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'}
+              anchorSize={8}
+              color={'grey'}
+            />
+          )}
       </Group>
     );
   }