Merge pull request #16 from tonyito/mvp

Image resize functionality on Konva and typing updates

Author: ibeeliot

src/actionTypes/index.js

@@ -146,7 +146,6 @@ export const exportFiles = ({
   dispatch({
     type: EXPORT_FILES
   });
-
   createFiles(components, path, appName, exportAppBool)
     .then((dir: string) =>
       dispatch({

src/actions/components.ts

@@ -26,7 +26,13 @@ class CodePreview extends Component<Props> {
         }}
       >
         <SyntaxHighlighter style={hybrid}>
-          {format(componentRender(focusComponent, components))}
+          {format(componentRender(focusComponent, components), {
+          singleQuote: true,
+          trailingComma: 'es5',
+          bracketSpacing: true,
+          jsxBracketSameLine: true,
+          parser: 'typescript'
+        })}
         </SyntaxHighlighter>
       </div>
     );

src/components/CodePreview.tsx

@@ -2,10 +2,10 @@
 //and also the parent rectangle components.
 
 import React, { Component } from "react";
-import { Stage, Layer, Line, Image } from "react-konva";
-import Rectangle from "./Rectangle.tsx";
-import cloneDeep from "../utils/cloneDeep.ts";
-import { ComponentInt, ComponentsInt, ChildInt } from "../utils/Interfaces.ts";
+import { Stage, Layer, Line } from "react-konva";
+import Rectangle from "./Rectangle";
+import cloneDeep from "../utils/cloneDeep";
+import { ComponentInt, ComponentsInt, ChildInt } from "../utils/Interfaces";
 import isEmpty from '../utils/isEmpty';
 
 interface PropsInt {
@@ -25,6 +25,9 @@ interface PropsInt {
   focusChild: any;
   changeComponentFocusChild: any;
   deleteChild: any;
+  scaleX: number;
+  scaleY: number;
+  draggable: boolean;
 }
 
 interface StateInt {
@@ -208,9 +211,6 @@ class KonvaStage extends Component<PropsInt, StateInt> {
             }}
           >
             {this.state.grid}
-            <Image image={this.props.focusComponent.id === 1 ? image : null //only display background image if the focused component is <App>
-            } draggable width={this.state.stageWidth*0.8} height={this.state.stageHeight*0.9 } //for background image uploaded, fix to fit screen
-            />
             {!isEmpty(focusComponent) && this.getDirectChildrenCopy(focusComponent) 
               .map((child: ChildInt, i: number) => (
                 <Rectangle
@@ -232,9 +232,7 @@ class KonvaStage extends Component<PropsInt, StateInt> {
                   handleTransform={handleTransform}
                   draggable={true}
                   blockSnapSize={this.state.blockSnapSize}
-                  imageSource={
-                    child.htmlElement === "Image" && child.HTMLInfo.Src
-                  }
+                  image={this.props.focusComponent.id === 1 ? image : null}
                 />
               ))
               .sort((rectA, rectB) => {

src/components/KonvaStage.tsx

@@ -1,9 +1,10 @@
 import React, { Component } from 'react';
+import Konva from 'konva';
 import { Rect, Group, Label, Text } from 'react-konva';
-import TransformerComponent from './TransformerComponent.tsx';
-import GrandchildRectangle from './GrandchildRectangle.tsx';
-import { ComponentsInt, ChildInt } from '../utils/Interfaces.ts';
-import { ComponentInt } from '../utils/Interfaces.ts';
+import TransformerComponent from './TransformerComponent';
+import GrandchildRectangle from './GrandchildRectangle';
+import { ComponentsInt, ChildInt } from '../utils/Interfaces';
+import { ComponentInt } from '../utils/Interfaces';
 
 interface PropsInt {
   x: number;
@@ -22,18 +23,12 @@ interface PropsInt {
   draggable: boolean;
   blockSnapSize: number;
   childType: string;
-  imageSource: string;
   handleTransform: any;
+  image: HTMLImageElement;
 }
 
-interface StateInt {
-  image: any;
-}
 
-class Rectangle extends Component<PropsInt, StateInt> {
-  state = {
-    image: null
-  };
+class Rectangle extends Component<PropsInt> {
 
   getComponentColor(componentId: number) {
     const color = this.props.components.find(
@@ -48,13 +43,8 @@ class Rectangle extends Component<PropsInt, StateInt> {
     );
   }
 
-  handleResize(
-    componentId: number,
-    childId: number,
-    target: any,
-    blockSnapSize: number
-  ) {
-    let focChild: ChildInt = this.props.components
+  handleResize(componentId: number, childId: number, target: Konva.Group, blockSnapSize: number) {
+    let focChild: ChildInt | ComponentInt = this.props.components
       .find((comp: ComponentInt) => comp.id === this.props.componentId)
       .childrenArray.find((child: ChildInt) => child.childId === childId);
 
@@ -76,27 +66,14 @@ class Rectangle extends Component<PropsInt, StateInt> {
     this.props.handleTransform(componentId, childId, transformation);
   }
 
-  handleDrag(
-    componentId: number,
-    childId: number,
-    target: any,
-    blockSnapSize: any
-  ) {
+  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
     };
     this.props.handleTransform(componentId, childId, transformation);
   }
 
-  setImage = (imageSource: string): void => {
-    if (!imageSource) return;
-    const image = new window.Image();
-    image.src = imageSource;
-    if (!image.height) return null;
-    this.setState({ image });
-  };
-
   render() {
     const {
       x,
@@ -114,8 +91,7 @@ class Rectangle extends Component<PropsInt, StateInt> {
       components,
       draggable,
       blockSnapSize,
-      childType,
-      imageSource
+      childType
     } = this.props;
 
     // the Group is responsible for dragging of all children
@@ -167,13 +143,9 @@ class Rectangle extends Component<PropsInt, StateInt> {
           draggable={false}
           fill={null}
           shadowBlur={childId === -1 ? 6 : null}
-          fillPatternImage={this.state.image ? this.state.image : null}
-          fillPatternScaleX={
-            this.state.image ? width / this.state.image.width : 1
-          }
-          fillPatternScaleY={
-            this.state.image ? height / this.state.image.height : 1
-          }
+          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}
           _useStrictMode
         />
         <Label>
@@ -205,9 +177,6 @@ class Rectangle extends Component<PropsInt, StateInt> {
                 componentId={componentId}
                 directParentName={childComponentName}
                 childType={grandchild.childType}
-                imageSource={
-                  grandchild.htmlElement === 'Image' && grandchild.HTMLInfo.Src
-                }
                 childComponentName={grandchild.componentName}
                 childComponentId={grandchild.childComponentId}
                 focusChild={focusChild}
@@ -231,7 +200,7 @@ class Rectangle extends Component<PropsInt, StateInt> {
               />
             ))}
         {focusChild && focusChild.childId === childId && draggable && (
-          <TransformerComponent
+          <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}

src/components/Rectangle.tsx

@@ -70,7 +70,7 @@ const SimpleModal = (props: any) => {
           >
             <CloseIcon />
           </IconButton>
-          <Typography variant="title" id="modal-title">
+          <Typography variant="h6" id="modal-title">
             {message}
           </Typography>
           <div>{children}</div>

src/components/SimpleModal.tsx

@@ -15,6 +15,7 @@ import {
 import KonvaStage from '../components/KonvaStage';
 import { ComponentInt, ComponentsInt } from '../utils/Interfaces';
 import * as actions from '../actions/components';
+import { changeImageSource } from "../utils/componentReducer.util";
 
 interface PropsInt {
   image: HTMLImageElement | null;

src/containers/MainContainer.tsx

@@ -46,7 +46,6 @@ const createFiles = (
 
     promises.push(newPromise);
   });
-
   return Promise.all(promises);
 };