Merge pull request #98 from ChristianEdwardPadilla/development

image src scaling correctly, html attr set snapback bug fix

Author: ChristianEdwardPadilla

src/components/KonvaStage.tsx

@@ -10,7 +10,7 @@ class KonvaStage extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      stageWidth: 1500,
+      stageWidth: 1800,
       stageHeight: 1500,
       blockSnapSize: 10,
       grid: [],
@@ -47,13 +47,13 @@ class KonvaStage extends Component {
     // 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);
   }
 

src/utils/Interfaces.ts

@@ -22,7 +22,7 @@ export interface ChildInt {
   position: PositionInt;
   color: string | null; // maybe optional instead, look up null vs undefined
   htmlElement: string | null; // maybe should be optional instead
-  HTMLInfo: object; // replace with HTMLinfo specifics
+  HTMLInfo: { [index: string]: { info: any } }; // replace with HTMLinfo specifics
 }
 
 export interface ChildrenInt extends Array<ChildInt> {}
@@ -48,8 +48,8 @@ export interface ApplicationStateInt {
   successOpen: boolean;
   errorOpen: boolean;
   focusComponent: ComponentInt;
-  selectableChildren: Array<number>;
-  ancestors: Array<number>;
+  selectableChildren: number[];
+  ancestors: number[];
   initialApplicationFocusChild: ChildInt;
   focusChild: ChildInt;
   components: ComponentsInt;

src/utils/componentReducer.util.ts

@@ -1,8 +1,16 @@
 import getSelectable from './getSelectable.util';
 import getColor from './colors.util';
-import { getSize } from './htmlElements.util.ts';
+import { getSize } from './htmlElements.util';
 import cloneDeep from './cloneDeep';
-import { ComponentInt, ApplicationStateInt, ChildrenInt, ChildInt, ComponentsInt, PropInt } from './interfaces';
+import {
+  ComponentInt,
+  ApplicationStateInt,
+  ChildrenInt,
+  ChildInt,
+  ComponentsInt,
+  PropInt,
+  PositionInt,
+} from './interfaces';
 
 const initialComponentState: ComponentInt = {
   id: 0,
@@ -107,7 +115,12 @@ export const addChild = (
     parentComponent = state.components.find(comp => comp.title === title);
   }
 
-  let htmlElemPosition;
+  interface htmlElemPositionInt {
+    width: number;
+    height: number;
+  }
+
+  let htmlElemPosition: htmlElemPositionInt = { width: null, height: null };
   if (childType === 'HTML') {
     htmlElemPosition = getSize(htmlElement);
     // if above function doesnt reutn anything, it means html element is not in our database
@@ -314,6 +327,7 @@ export const handleTransform = (
   return {
     ...state,
     components,
+    focusChild: newFocusChild,
   };
 };
 
@@ -533,19 +547,27 @@ export const updateHtmlAttr = (state: ApplicationStateInt, { attr, value }: { at
   };
 };
 
-export const updateChildrenSort = (
-  state: ApplicationStateInt,
-  { newChildrenArray }: { newChildrenArray: ChildrenInt },
-) => {
-  console.log('hello from updateChildrenSort. newChildrenArray: ', newChildrenArray);
-  // the new Array has the same data exactly. the array index is the new sort...
-  // const modifiedChldrenArray = cloneDeep(state.focusComponent.childrenArray)
-  // modifiedChldrenArray.forEach( (child: ChildInt, idx:number, arr:any ) => {
-  //   console.log(`chidl id:${child.childId} currSort:${child.childSort}`)
-  //  const newSort = newChildrenArray.findIndex( (newChild:ChildInt) => newChild.childId === child.childId) + 1 ;
-  //   console.log(`new sort: ${newSort}`)
-  // })
-  // console.log('modifiedCHildArrrrrr',modifiedChldrenArray)
+export const updateChildrenSort = (state: ApplicationStateInt, { newSortValues }: { newSortValues: any }) => {
+  console.log('hello from updateChildrenSort. newSortValues: ', newSortValues);
+
+  // const modifiedChildrenArray:ChildrenInt = JSON.parse(JSON.stringify(state.focusComponent.childrenArray)) ;
+  const modifiedChildrenArray: ChildrenInt = cloneDeep(state.focusComponent.childrenArray);
+
+  for (let i = 0; i < modifiedChildrenArray.length; i += 1) {
+    const currChild = modifiedChildrenArray[i];
+    const currChildId = currChild.childId;
+    const newValueObj = newSortValues.find((n: any) => n.childId === currChildId);
+    const newSortValue = newValueObj.childSort;
+    console.log(` currChildId  ${currChildId} currSortValue: ${currChild.childSort} newSortValue:${newSortValue}`);
+    currChild.childSort = newSortValue;
+  }
+
+  const modifiedComponent = state.components.find(comp => comp.id === state.focusComponent.id);
+  modifiedComponent.childrenArray = modifiedChildrenArray;
+
+  const modifiedComponentsArray = state.components.filter(comp => comp.id !== state.focusComponent.id);
+  modifiedComponentsArray.push(modifiedComponent);
+
   return {
     ...state,
     components: modifiedComponentsArray,

src/utils/componentRender.util.ts

@@ -145,8 +145,8 @@ const componentRender = (component: ComponentInt, components: ComponentsInt) =>
       return (
         <div>
         ${cloneDeep(childrenArray)
-          .sort((a, b) => a.childSort - b.childSort)
-          .map(child => `<${componentNameGenerator(child)} ${propDrillTextGenerator(child)}/>`)
+          .sort((a: ChildInt, b: ChildInt) => a.childSort - b.childSort)
+          .map((child: ChildInt) => `<${componentNameGenerator(child)} ${propDrillTextGenerator(child)}/>`)
           .join('\n')}
         </div>
       );