Merge pull request #7 from jzuniga206/feature

Fixed resizing bug for component rectangle

Author: ibeeliot

src/components/CodePreview.tsx

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { format } from 'prettier';
-import componentRender from '../utils/componentRender.util.ts';
-import { ComponentInt, ComponentsInt } from '../utils/Interfaces.ts';
+import componentRender from '../utils/componentRender.util';
+import { ComponentInt, ComponentsInt } from '../utils/Interfaces';
 /** **   SortCHildren will be fixed , dont XXX the file  *** */
 // import SortChildren from './SortChildren.jsx';
 import SyntaxHighlighter from 'react-syntax-highlighter';

src/components/Rectangle.tsx

@@ -36,7 +36,9 @@ class Rectangle extends Component<PropsInt, StateInt> {
   };
 
   getComponentColor(componentId: number) {
-    const color = this.props.components.find((comp: ComponentInt) => comp.id === componentId).color;
+    const color = this.props.components.find(
+      (comp: ComponentInt) => comp.id === componentId
+    ).color;
     return color;
   }
 
@@ -46,7 +48,12 @@ class Rectangle extends Component<PropsInt, StateInt> {
     );
   }
 
-  handleResize(componentId: number, childId: number, target: any, blockSnapSize: number) {
+  handleResize(
+    componentId: number,
+    childId: number,
+    target: any,
+    blockSnapSize: number
+  ) {
     let focChild: ChildInt = this.props.components
       .find((comp: ComponentInt) => comp.id === this.props.componentId)
       .childrenArray.find((child: ChildInt) => child.childId === childId);
@@ -57,16 +64,25 @@ class Rectangle extends Component<PropsInt, StateInt> {
       );
     }
     const transformation = {
-      width: Math.round((target.width() * target.scaleX()) / blockSnapSize) * blockSnapSize,
-      height: Math.round((target.height() * target.scaleY()) / blockSnapSize) * blockSnapSize,
+      width:
+        Math.round((target.width() * target.scaleX()) / blockSnapSize) *
+        blockSnapSize,
+      height:
+        Math.round((target.height() * target.scaleY()) / blockSnapSize) *
+        blockSnapSize,
       x: target.x() + focChild.position.x,
       y: target.y() + focChild.position.y
     };
 
     this.props.handleTransform(componentId, childId, transformation);
   }
 
-  handleDrag(componentId: number, childId: number, target: any, blockSnapSize: any) {
+  handleDrag(
+    componentId: number,
+    childId: number,
+    target: any,
+    blockSnapSize: any
+  ) {
     const transformation = {
       x: Math.round(target.x() / blockSnapSize) * blockSnapSize,
       y: Math.round(target.y() / blockSnapSize) * blockSnapSize
@@ -114,18 +130,20 @@ class Rectangle extends Component<PropsInt, StateInt> {
         scaleY={scaleY}
         width={width}
         height={height}
-        onDragEnd={event => this.handleDrag(componentId, childId, event.target, blockSnapSize)}
+        onDragEnd={event =>
+          this.handleDrag(componentId, childId, event.target, blockSnapSize)
+        }
         ref={node => {
           this.group = node;
         }}
-        tabIndex="0" // required for keypress event to be heard by this.group
+        tabIndex='0' // required for keypress event to be heard by this.group
       >
         <Rect
           // a Konva Rect is generated for each child of the focusComponent (including the pseudochild, representing the focusComponent itself)
           ref={node => {
             this.rect = node;
           }}
-          tabIndex="0" // required for keypress event to be heard by this.group
+          tabIndex='0' // required for keypress event to be heard by this.group
           name={`${childId}`}
           className={'childRect'}
           x={0}
@@ -137,7 +155,11 @@ class Rectangle extends Component<PropsInt, StateInt> {
           scaleY={1}
           width={width}
           height={height}
-          stroke={childType === 'COMP' ? this.getComponentColor(childComponentId) : '#000000'}
+          stroke={
+            childType === 'COMP'
+              ? this.getComponentColor(childComponentId)
+              : '#000000'
+          }
           onTransformEnd={event =>
             this.handleResize(componentId, childId, event.target, blockSnapSize)
           }
@@ -146,17 +168,28 @@ class Rectangle extends Component<PropsInt, StateInt> {
           draggable={false}
           fill={childId === -1 ? 'white' : null}
           shadowBlur={childId === -1 ? 6 : null}
-          fillPatternImage={this.state.image ? this.state.image : this.setImage(imageSource)}
-          fillPatternScaleX={this.state.image ? width / this.state.image.width : 1}
-          fillPatternScaleY={this.state.image ? height / this.state.image.height : 1}
+          fillPatternImage={
+            this.state.image ? this.state.image : this.setImage(imageSource)
+          }
+          fillPatternScaleX={
+            this.state.image ? width / this.state.image.width : 1
+          }
+          fillPatternScaleY={
+            this.state.image ? height / this.state.image.height : 1
+          }
+          _useStrictMode
         />
         <Label>
           <Text
             fontStyle={'bold'}
             fontVariant={'small-caps'}
             // pseudochild's label should look different than normal children:
             text={childId === -1 ? title.slice(0, title.length - 2) : title}
-            fill={childId === -1 ? this.getComponentColor(childComponentId) : '#000000'}
+            fill={
+              childId === -1
+                ? this.getComponentColor(childComponentId)
+                : '#000000'
+            }
             fontSize={childId === -1 ? 15 : 10}
             x={4}
             y={childId === -1 ? -20 : -12}
@@ -175,14 +208,20 @@ class Rectangle extends Component<PropsInt, StateInt> {
                 componentId={componentId}
                 directParentName={childComponentName}
                 childType={grandchild.childType}
-                imageSource={grandchild.htmlElement === 'Image' && grandchild.HTMLInfo.Src}
+                imageSource={
+                  grandchild.htmlElement === 'Image' && grandchild.HTMLInfo.Src
+                }
                 childComponentName={grandchild.componentName}
                 childComponentId={grandchild.childComponentId}
                 focusChild={focusChild}
                 childId={childId} // scary addition, grandchildren rects default to childId of "direct" children
-                width={grandchild.position.width * (width / this.getPseudoChild().position.width)}
+                width={
+                  grandchild.position.width *
+                  (width / this.getPseudoChild().position.width)
+                }
                 height={
-                  grandchild.position.height * (height / this.getPseudoChild().position.height)
+                  grandchild.position.height *
+                  (height / this.getPseudoChild().position.height)
                 }
                 x={
                   (grandchild.position.x - this.getPseudoChild().position.x) *
@@ -194,16 +233,14 @@ class Rectangle extends Component<PropsInt, StateInt> {
                 }
               />
             ))}
-        {focusChild &&
-          focusChild.childId === childId &&
-          draggable && (
-            <TransformerComponent
-              focusChild={focusChild}
-              rectClass={'childRect'}
-              anchorSize={8}
-              color={'grey'}
-            />
-          )}
+        {focusChild && focusChild.childId === childId && draggable && (
+          <TransformerComponent
+            focusChild={focusChild}
+            rectClass={'childRect'}
+            anchorSize={8}
+            color={'grey'}
+          />
+        )}
       </Group>
     );
   }