Merge pull request #64 from ChristianEdwardPadilla/development

Props styling changes, fixed export modal, bad color removed

Author: ChristianEdwardPadilla

src/actionTypes/index.js

@@ -26,4 +26,3 @@ export const ADD_PROP = 'ADD_PROP';
 export const DELETE_ALL_DATA = 'DELETE_ALL_DATA';
 export const CHANGE_IMAGE_PATH = 'CHANGE_IMAGE_PATH';
 export const UPDATE_HTML_ATTR = 'UPDATE_HTML_ATTR';
-export const GENERATE_COMPONENT_TREE = 'GENERATE_COMPONENT_TREE';

src/components/KonvaStage.tsx

@@ -10,21 +10,12 @@ class KonvaStage extends Component {
     this.state = {
       stageWidth: 1000,
       stageHeight: 1000,
-      blockSnapSize: 5,
+      blockSnapSize: 10,
       grid: [],
       gridStroke: 1,
     };
   }
 
-  componentDidMount() {
-    this.checkSize();
-    // 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);
-    this.createGrid();
-  }
-
   getDirectChildrenCopy(focusComponent) {
     const component = this.props.components.find(comp => comp.id === focusComponent.id);
 
@@ -49,36 +40,19 @@ class KonvaStage extends Component {
     return childrenArrCopy;
   }
 
-  // cloneDeep(value) {
-  //   let result;
-
-  //   if (Array.isArray(value)) {
-  //     result = [];
-  //     value.forEach((elm) => {
-  //       if (typeof elm === 'object') {
-  //         result.push(this.cloneDeep(elm));
-  //       } else {
-  //         result.push(elm);
-  //       }
-  //     });
-  //     return result;
-  //   }
-  //   if (typeof value === 'object' && value !== null) {
-  //     result = {};
-  //     Object.keys(value).forEach((key) => {
-  //       if (typeof value[key] === 'object') {
-  //         result[key] = this.cloneDeep(value[key]);
-  //       } else {
-  //         result[key] = value[key];
-  //       }
-  //     });
-  //     return result;
-  //   }
-  //   return value;
-  // }
+  componentDidMount() {
+    this.checkSize();
+    // 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);
+    this.container.addEventListener('keydown', this.handleKeyDown);
+    this.createGrid();
+  }
 
   componentWillUnmount() {
     window.removeEventListener('resize', this.checkSize);
+    this.container.removeEventListener('keydown', this.handleKeyDown);
   }
 
   checkSize = () => {
@@ -90,6 +64,12 @@ class KonvaStage extends Component {
     });
   };
 
+  handleKeyDown = e => {
+    if (e.key === 'Delete' || e.key === 'Backspace') {
+      this.props.deleteChild({});
+    }
+  };
+
   handleStageMouseDown = e => {
     // // clicked on stage - clear selection
     if (e.target === e.target.getStage()) {
@@ -157,12 +137,13 @@ class KonvaStage extends Component {
     return (
       <div
         style={{
-          width: '100%',
-          height: '100%',
+          width: '95%',
+          height: '95%',
         }}
         ref={node => {
           this.container = node;
         }}
+        tabIndex="0" // required for keydown event to be heard by this.container
       >
         <Button
           onClick={deleteChild}

src/components/Props.jsx

@@ -109,7 +109,7 @@ class Props extends Component {
   state = {
     propKey: '',
     propValue: '',
-    propRequired: false,
+    propRequired: true,
     propType: '',
   };
 
@@ -153,7 +153,7 @@ class Props extends Component {
     this.setState({
       propKey: '',
       propValue: '',
-      propRequired: false,
+      propRequired: true,
       propType: '',
     });
   };
@@ -243,7 +243,7 @@ class Props extends Component {
                             checked={this.state.propRequired}
                             onChange={this.togglePropRequired}
                             value="propRequired"
-                            color="secondary"
+                            color="primary"
                             id="propRequired"
                           />
                         </div>
@@ -253,7 +253,7 @@ class Props extends Component {
                           color="primary"
                           aria-label="Add"
                           type="submit"
-                          disabled={!this.state.propKey || !this.state.propType}
+                          // disabled={!this.state.propKey || !this.state.propType}
                           variant="contained"
                           size="large"
                         >

src/components/Rectangle.tsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import { Rect, Group, Label, Text } from 'react-konva';
 import TransformerComponent from './TransformerComponent.jsx';
 import GrandchildRectangle from './GrandchildRectangle.jsx';
@@ -81,9 +81,17 @@ class Rectangle extends Component {
         width={width}
         height={height}
         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
       >
         <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
           name={`${childId}`}
           className={'childRect'}
           x={0}
@@ -116,7 +124,7 @@ class Rectangle extends Component {
             fill={childId === '-1' ? this.getComponentColor(childComponentId) : '#000000'}
             fontSize={childId === '-1' ? 15 : 10}
             x={4}
-            y={childId === '-1' ? -15 : 5}
+            y={childId === '-1' ? -20 : -12}
           />
         </Label>
         {// for all children other than the pseudoChild, find their component's children array and recursively render the children found there

src/components/RightTabs.jsx

@@ -180,8 +180,8 @@ class RightTabs extends Component {
             <Tree
               data={[this.findChildren(focusComponent, components, tree)]}
               // data={[this.generateComponentTree(focusComponent.id, components)]}
-              separation={{ siblings: 0.2, nonSiblings: 0.3 }}
-              transitionDuration={350}
+              separation={{ siblings: 0.3, nonSiblings: 0.3 }}
+              transitionDuration={0}
               translate={this.state.translate}
               styles={{
                 nodes: {

src/components/SimpleModal.jsx

@@ -46,39 +46,52 @@ const SimpleModal = (props) => {
         onClose={closeModal}
         open={open}
       >
-        <div style={{
-          top: '50%',
-          left: '50%',
-          transform: 'translate(-50%, -50%)',
-        }} className={classes.paper}>
+        <div
+          style={{
+            top: '50%',
+            left: '50%',
+            transform: 'translate(-50%, -50%)',
+          }}
+          className={classes.paper}
+        >
           <Icon
             onClick={closeModal}
-            className='closeIcon'
+            className="closeIcon"
             style={{
               position: 'absolute',
               top: '2%',
               right: '1%',
               fontSize: '17px',
               fontWeight: 'bold',
             }}
-          >close</Icon>
+          >
+            close
+          </Icon>
           <Typography variant="title" id="modal-title">
             {message}
           </Typography>
+          <div>{children}</div>
           <div>
-            {children}
-          </div>
-          <div>
-            {
-              secBtnLabel ? <Button variant='extendedFab' color="secondary" className={classes.button} onClick={secBtnAction}>
+            {secBtnLabel ? (
+              <Button
+                variant="extendedFab"
+                color="secondary"
+                className={classes.button}
+                onClick={secBtnAction}
+              >
                 {secBtnLabel}
-              </Button> : null
-            }
-            {
-              primBtnLabel ? <Button variant='extendedFab' color="primary" className={classes.button} onClick={primBtnAction}>
+              </Button>
+            ) : null}
+            {primBtnLabel ? (
+              <Button
+                variant="extendedFab"
+                color="primary"
+                className={classes.button}
+                onClick={primBtnAction}
+              >
                 {primBtnLabel}
-              </Button> : null
-            }
+              </Button>
+            ) : null}
           </div>
         </div>
       </Modal>

src/containers/MainContainer.tsx

@@ -115,6 +115,15 @@ class MainContainer extends Component {
   //   IPC.send('update-file');
   // };
 
+  // deleteImage = () => {
+  //   this.props.changeImagePath('');
+  //   this.setState({ image: '' });
+  // };
+
+  closeModal = () => this.setState({ modal: null });
+
+  chooseAppDir = () => IPC.send('choose_app_dir');
+
   // showImageDeleteModal = () => {
   //   const { closeModal, deleteImage } = this;
   //   this.setState({
@@ -149,6 +158,7 @@ class MainContainer extends Component {
   };
 
   showGenerateAppModal = () => {
+    console.log('clicked on export button');
     const { closeModal, chooseGenOptions } = this;
     const { genOptions } = this.state;
     const children = (

src/public/styles/style.css

@@ -269,3 +269,7 @@ div.rst__rowContents {
 .rst__rowLabel {
   padding-right: 5px;
 }
+
+.closeIcon:hover {
+  cursor: pointer;
+}

src/utils/colors.util.js

@@ -4,25 +4,23 @@ const colors = [
   '#E8A87C',
   '#C38D9E',
   '#41B3A3',
-  '#2F2FA2',
+  '#D12FA2',
   '#F64C72',
   '#DAAD86',
   '#8EE4AF',
   '#5CDB95',
-  '#7395AE',
-  '#501B1D',
-  '#190061',
+  '#7395AE', // light grey
+  '#b90061',
   '#AFD275',
   '#45A29E',
   '#D79922',
-  '#C5CBE3',
+  '#C5CBE3', // lightish grey
   '#FFCB9A',
   '#E98074',
   '#8860D0',
   '#5AB9EA',
   '#5860E9',
   '#84CEEB',
-  '#F8E9A1',
   '#61892F',
 ];
 

src/utils/componentReducer.util.js

@@ -124,14 +124,14 @@ export const addChild = (state, { title, childType = '', HTMLInfo = {} }) => {
   const newPosition =
     childType === 'COMP'
       ? {
-          x: view.position.x + view.nextChildId * 5, // new children are offset by 5px, x and y
-          y: view.position.y + view.nextChildId * 5,
+          x: view.position.x + view.nextChildId * 16, // new children are offset by 5px, x and y
+          y: view.position.y + view.nextChildId * 16,
           width: parentComponent.position.width * 0.9, // new children have an initial position of their CLASS (maybe don't need 90%)
           height: parentComponent.position.height * 0.9,
         }
       : {
-          x: view.position.x + view.nextChildId * 5,
-          y: view.position.y + view.nextChildId * 5,
+          x: view.position.x + view.nextChildId * 16,
+          y: view.position.y + view.nextChildId * 16,
           width: htmlElemPosition.width,
           height: htmlElemPosition.height,
         };
@@ -194,6 +194,7 @@ export const deleteChild = (
     return state;
   }
   if (!calledFromDeleteComponent && childId === '-1') {
+    window.alert('Cannot delete root child of a component');
     return state;
   }
   // make a DEEP copy of the parent component (the one thats about to loose a child)