Got functionality of snapping working with pics

Author: tonyito

src/components/KonvaStage.tsx

@@ -1,10 +1,12 @@
 import React, { Component } from "react";
-import { Stage, Layer, Line } from "react-konva";
+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 isEmpty from '../utils/isEmpty';
 
 interface PropsInt {
+  image: HTMLImageElement;
   components: ComponentsInt;
   focusComponent: ComponentInt;
   selectableChildren: Array<number>;
@@ -107,6 +109,8 @@ class KonvaStage extends Component<PropsInt, StateInt> {
     if (e.target === e.target.getStage()) {
       return;
     }
+    console.log(this.props.image.width);
+
     // // clicked on transformer - do nothing
     const clickedOnTransformer =
       e.target.getParent().className === "Transformer";
@@ -167,6 +171,7 @@ class KonvaStage extends Component<PropsInt, StateInt> {
 
   render() {
     const {
+      image,
       components,
       handleTransform,
       focusComponent,
@@ -202,7 +207,8 @@ class KonvaStage extends Component<PropsInt, StateInt> {
             }}
           >
             {this.state.grid}
-            {this.getDirectChildrenCopy(focusComponent)
+            <Image image={image} draggable width={this.state.stageWidth*0.8} height={this.state.stageHeight*0.9}/>
+            {!isEmpty(focusComponent) && this.getDirectChildrenCopy(focusComponent) 
               .map((child: ChildInt, i: number) => (
                 <Rectangle
                   childType={child.childType}

src/components/Rectangle.tsx

@@ -62,7 +62,7 @@ class Rectangle extends Component<PropsInt, StateInt> {
       x: target.x() + focChild.position.x,
       y: target.y() + focChild.position.y
     };
-
+    console.log('width:', transformation.width, 'height:', transformation.height, 'x', transformation.x, 'y', transformation.y);
     this.props.handleTransform(componentId, childId, transformation);
   }
 
@@ -146,9 +146,10 @@ class Rectangle extends Component<PropsInt, StateInt> {
           draggable={false}
           fill={childId === -1 ? 'white' : null}
           shadowBlur={childId === -1 ? 6 : null}
-          fillPatternImage={this.state.image ? this.state.image : this.setImage(imageSource)}
+          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}
+          _useStrictMode
         />
         <Label>
           <Text

src/containers/MainContainer.tsx

@@ -11,8 +11,10 @@ import {
 } from "../actions/components.ts";
 import KonvaStage from "../components/KonvaStage.tsx";
 import { ComponentInt, ComponentsInt } from "../utils/Interfaces.ts";
+import * as actions from '../actions/components';
 
 interface PropsInt {
+  image: HTMLImageElement | null;
   components: ComponentsInt;
   focusComponent: ComponentInt;
   selectableChildren: Array<number>;
@@ -21,6 +23,7 @@ interface PropsInt {
   addChild: any;
   changeFocusComponent: any;
   changeFocusChild: any;
+  changeImagePath: any;
   deleteComponent: any;
   createApp: any;
   deleteAllData: any;
@@ -62,6 +65,8 @@ const mapDispatchToProps = (dispatch: any) => ({
       })
     ),
   // openPanel: component => dispatch(openExpansionPanel(component)),
+  changeImagePath: (imageSource: string) => dispatch(actions.changeImagePath(imageSource)),
+
   changeFocusChild: ({ childId }: { childId: number }) =>
     dispatch(changeFocusChild({ childId })),
   changeComponentFocusChild: ({
@@ -101,8 +106,10 @@ class MainContainer extends Component<PropsInt, StateInt> {
       changeFocusChild,
       changeComponentFocusChild,
       deleteChild,
-      classes
+      classes,
+      image
     } = this.props;
+
     const { main }: { main: HTMLDivElement } = this;
 
     return (
@@ -111,6 +118,7 @@ class MainContainer extends Component<PropsInt, StateInt> {
           {modal}
           <div className="main" ref={main}>
             <KonvaStage
+              image={image}
               scaleX={1}
               scaleY={1}
               draggable={draggable}