currently working on preventing image tiling

Author: spincycle01

main.js

@@ -66,7 +66,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/containers/MainContainer.tsx

@@ -71,70 +71,6 @@ class MainContainer extends Component {
 
   constructor(props) {
     super(props);
-
-    //   IPC.on('new-file', (event, file) => {
-    //     const image = new window.Image();
-    //     image.src = file;
-    //     this.props.changeImagePath(file);
-    //     image.onload = () => {
-    //       this.setState({ image });
-    //     };
-    //     this.draggableItems = [];
-    //   });
-
-    //   IPC.on('app_dir_selected', (event, path) => {
-    //     const { components } = this.props;
-    //     const { genOption } = this.state;
-    //     this.props.createApp({
-    //       path,
-    //       components,
-    //       genOption,
-    //     });
-    //   });
-    // }
-
-    // closeModal = () => this.setState({ modal: null });
-
-    // chooseAppDir = () => IPC.send('choose_app_dir');
-
-    // chooseGenOptions = (genOption) => {
-    //   // set option
-    //   this.setState({ genOption });
-    //   // closeModal
-    //   this.closeModal();
-    //   // Choose app dir
-    //   this.chooseAppDir();
-    // };
-
-    // showGenerateAppModal = () => {
-    //   console.log('clicked on export button');
-    //   const { closeModal, chooseGenOptions } = this;
-    //   const { genOptions } = this.state;
-    //   const children = (
-    //     <List className="export-preference">
-    //       {genOptions.map((option, i) => (
-    //         <ListItem
-    //           key={i}
-    //           button
-    //           onClick={() => chooseGenOptions(i)}
-    //           style={{
-    //             border: '1px solid #3f51b5',
-    //             marginBottom: '2%',
-    //             marginTop: '5%',
-    //           }}
-    //         >
-    //           <ListItemText primary={option} style={{ textAlign: 'center' }} />
-    //         </ListItem>
-    //       ))}
-    //     </List>
-    //   );
-    //   this.setState({
-    //     modal: createModal({
-    //       closeModal,
-    //       children,
-    //       message: 'Choose export preference:',
-    //     }),
-    //   });
   }
 
   render() {