All known bugs removed for Native Mode on Konva

Author: tonyito

package.json

@@ -110,7 +110,7 @@
     "d3": "^5.9.2",
     "electron-reload": "^1.4.0",
     "enzyme": "^3.4.1",
-    "konva": "^4.1.6",
+    "konva": "^4.2.0",
     "localforage": "^1.7.2",
     "lodash.throttle": "^4.1.1",
     "material-table": "^1.25.2",

src/components/left/LeftColExpansionPanel.tsx

@@ -67,6 +67,7 @@ const LeftColExpansionPanel = (props: LeftColExpPanPropsInt) => {
     handleChangeName,
     handleEditComponent,
     focusChild,
+    changeFocusChild
   } = props;
   const { title, id, color, stateful, classBased } = component;
   function isFocused() {
@@ -99,7 +100,6 @@ const LeftColExpansionPanel = (props: LeftColExpPanPropsInt) => {
     if (focusComponent.props.length > 0) {
       focusComponent.props.forEach(key => parentKeys.push(key.key));
     }
-    console.log('this is parentKeys', parentKeys);
     // sorting through object keys of the focusComponent
 
     let i = 0;
@@ -187,6 +187,11 @@ const LeftColExpansionPanel = (props: LeftColExpPanPropsInt) => {
                     if (focusComponent.title !== title)
                       //changed the logic here so it only focuses if you click on a different card. Otherwise, you can't double click into edit mode for the title.
                       changeFocusComponent({ title });
+                      changeFocusChild({childId : -1});
+                      changeComponentFocusChild({
+                        componentId: 1,
+                        childId: -1
+                      });
                   }}
                 >
                   <ListItemText

src/components/main/Rectangle.tsx

@@ -33,6 +33,7 @@ interface RectanglePorpsInt extends PropsInt {
   native:boolean;
 }
 
+
 class Rectangle extends Component<RectanglePorpsInt> {
   rect: Konva.Rect;
   group: Konva.Group;
@@ -56,7 +57,7 @@ class Rectangle extends Component<RectanglePorpsInt> {
   handleResize(
     componentId: number,
     childId: number,
-    target: Konva.Group,
+    target:  Konva.Rect | Konva.Stage, //unsolved bug in Konva typescript for this type
     blockSnapSize: number
   ) {
     //find the id of the component where the componentID in the state equals the currently focused component
@@ -105,7 +106,7 @@ class Rectangle extends Component<RectanglePorpsInt> {
   handleDrag(
     componentId: number,
     childId: number,
-    target: Konva.Group,
+    target: any,
     blockSnapSize: number
   ) {
     const transformation = {
@@ -177,7 +178,7 @@ class Rectangle extends Component<RectanglePorpsInt> {
           stroke={
             childType === 'COMP'
               ? this.getComponentColor(childComponentId)
-              : native && componentId === 1 ? null : '#000000' //sets the parent component color to black
+              : native && componentId === 1 && childType !== 'HTML' ? null : '#000000' //sets the parent component color to black
           }
           onTransformEnd={event =>
             this.handleResize(componentId, childId, event.target, blockSnapSize)

src/containers/LeftContainer.tsx

@@ -310,6 +310,7 @@ class LeftContainer extends Component<LeftContPropsInt, StateInt> {
           toggleEditMode={toggleEditMode}
           handleChangeName={this.handleChangeName}
           handleEditComponent={this.handleEditComponent}
+          changeFocusChild={changeFocusChild}
           changeComponentFocusChild={changeComponentFocusChild}
           focusChild={focusChild}
         />

tsconfig.json

@@ -7,7 +7,8 @@
     "target": "es6",
     "jsx": "react",
     "lib": ["es6", "dom", "es2017"],
-    "allowSyntheticDefaultImports": true
+    "allowSyntheticDefaultImports": true,
+    "strictFunctionTypes": false
   },
   "include": ["./src/**/*"]
 }