merging with styling changes from christian

Author: tolgamizrakci

README.md

@@ -1,18 +1,22 @@
 # ReacType
 
-**ReacType** is a prototyping tool for developers employing **React** component architecture while utilizing the comprehensive type checking of **TypeScript**.
 
-**ReacType** allows the user to _visualize_ their application architecture dynamically, employing a _canvas display_, an _application tree_, and a _component code preview_. The user can create components and load _instances_ of these components, as well as nested HTML elements, onto the canvas. These visual representations quickly reveal parent-child relationships between components and the embedded instances, with component views that can be toggled between and draggable representations that resized on the canvas itself. This architecture can then be _exported_ as TypeScript application files to be used as a starter template for any repository.
+[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/team-reactype/ReacType/pulls)
+![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)
 
-Download for [MacOS](), [Windows](), [Linux]().
+**ReacType** is a visual prototyping tool for developers employing **React** component architecture alongside the comprehensive type checking of **TypeScript**.
+
+**ReacType** allows the user to _visualize_ their application architecture dynamically, employing a _canvas display_, an _application tree_, and a _component code preview_. The user can create components and load _instances_ of these components, as well as nested HTML elements, onto the canvas. This architecture can then be _exported_ as TypeScript application files to be used as a starter template for any repository.
+
+ Download for [MacOS](), [Windows](), [Linux]().
 
 ### How to use
 
 - Open the application to start a new project. It will open in the root App component, with its name listed in the left panel and the component represented by the white box on the canvas.
-- To add a new component, type its name in the upper right panel, in the field '**Add class component**', and press the plus button.
+- To add a new component, type its name in the upper left panel, in the field '**Add class component**', and press enter.
 - To render a component **_instance_** to the screen, first select the component, or _parent_, that the instance will be rendered within. This selected component will be represented in a new canvas view, with its own white box. Then press the plus button next to the component name. An instance, or _child_, representation will appear on the canvas.
 - To add draggable HTML elements, select the image icons on the lower left panel.
-- The bottom panel allows the user to toggle between 4 different views: a tree diagram of the application, a preview of the code, a form to enter component props, and a form to add HTML attributes.
+- The bottom panel allows the user to toggle between 4 different views: a tree diagram of the application, a preview of the exportable code, a form to enter component props, and a form to add HTML attributes.
 - **_Props_** can be added to each component within its tab on bottom panel. Enter in a _key-value pair_, select its data _type_ and press the bottom 'ADD PROP'.
 - **_HTML Element Attributes_** of class name and ID can be added to each HTML element after an HTML element has been rendered to the canvas.
 - To **_delete_** a _child_ or instance from the canvas, select the desired instance and either press the _delete_ key or click the 'DELETE CHILD' button.
@@ -22,7 +26,7 @@ Download for [MacOS](), [Windows](), [Linux]().
 ### To Export Files
 
 - Once finished setting up the application template, press the green 'EXPORT PROJECT' button at the bottom of the left panel and choose between two options to export your files:
-  1. Export the component files into a src folder. This option will allow a developer to add these files to an existing project.
+  1. Export the component files into a components folder. This option will allow a developer to add these files to an existing project.
   1. Export a new project with TypeScript config files and the component files. This option will allow a developer to immediately begin a new project.
 
 #### Authors
@@ -67,4 +71,4 @@ yarn run electron
 
 ## License
 
-This project is licensed under the MIT License - see the [LICENSE.md]() file for details.
+This project is licensed under the MIT License - see the [LICENSE.md](https://github.com/team-reactype/ReacType/blob/development/LICENSE.md) file for details.

main.js

@@ -33,11 +33,6 @@ function openFile() {
   mainWindow.webContents.send('new-file', file);
 }
 
-// export files
-function exportComponents() {
-  console.log('hi from exportComponents');
-}
-
 // Choose directory
 ipcMain.on('choose_app_dir', (event) => {
   const directory = dialog.showOpenDialog(mainWindow, {
@@ -66,7 +61,7 @@ const createWindow = () => {
     width,
     height,
     webPreferences: {
-      zoomFactor: 0.8,
+      zoomFactor: 0.9,
       'node-Integration': false,
     },
     show: false,

src/components/GrandchildRectangle.jsx

@@ -3,6 +3,11 @@ import { Rect, Group } from 'react-konva';
 // import findComponentById from '../utils/findComponentById.ts';
 
 class GrandchildRectangle extends Component {
+  state = {
+    imageHeight: 0,
+    imageWidth: 0,
+  };
+
   getComponentColor(componentId) {
     // const color = findComponentById(componentId, this.props.components).color;
     const color = this.props.components.find(comp => comp.id === componentId).color;
@@ -14,11 +19,12 @@ class GrandchildRectangle extends Component {
   }
 
   setImage = imageSource => {
-    //console.log("IMAGE SOURCE", imageSource);
+    // console.log("IMAGE SOURCE", imageSource);
     if (!imageSource) return;
     const image = new window.Image();
     image.src = imageSource;
     if (!image.height) return null;
+    this.setState({ imageHeight: image.height, imageWidth: image.width });
     return image;
   };
 
@@ -57,11 +63,15 @@ class GrandchildRectangle extends Component {
           height={height}
           stroke={childType === 'COMP' ? this.getComponentColor(childComponentId) : '#000000'}
           fillPatternImage={imageSource ? this.setImage(imageSource) : null}
+          fillPatternScaleX={0.1}
+          fillPatternScaleY={0.1}
           // fill={color}
           // opacity={0.8}
-          strokeWidth={4}
+          strokeWidth={10}
           strokeScaleEnabled={false}
           draggable={false}
+          // centerScaling={true}
+          // enabledAnchors={['top-left', 'top-right', 'bottom-left', 'bottom-right']}
         />
         {childType === 'COMP' &&
           components

src/components/HtmlAttr.jsx

@@ -26,7 +26,7 @@ const styles = theme => ({
   input: {
     color: '#fff',
     opacity: '0.7',
-    marginBottom: '15px',
+    marginBottom: '17px',
   },
 });
 
@@ -46,7 +46,6 @@ class HtmlAttr extends Component {
   }, {});
 
   handleSave = attr => {
-    console.log(attr, this.state[attr]);
     this.props.updateHtmlAttr({ attr, value: this.state[attr] });
     this.setState({
       [attr]: '',

src/components/KonvaStage.tsx

@@ -37,7 +37,7 @@ class KonvaStage extends Component<PropsInt, StateInt> {
   constructor(props) {
     super(props);
     this.state = {
-      stageWidth: 1500,
+      stageWidth: 1800,
       stageHeight: 1500,
       blockSnapSize: 10,
       grid: [],
@@ -74,13 +74,13 @@ class KonvaStage extends Component<PropsInt, StateInt> {
     // here we should add listener for "container" resize
     // take a look here https://developers.google.com/web/updates/2016/10/resizeobserver
     // for simplicity I will just listen window resize
-    // window.addEventListener('resize', this.checkSize);
+    window.addEventListener('resize', this.checkSize);
     this.container.addEventListener('keydown', this.handleKeyDown);
     this.createGrid();
   }
 
   componentWillUnmount() {
-    // window.removeEventListener('resize', this.checkSize);
+    window.removeEventListener('resize', this.checkSize);
     this.container.removeEventListener('keydown', this.handleKeyDown);
   }