Merge pull request #98 from ChristianEdwardPadilla/development

image src scaling correctly, html attr set snapback bug fix

Author: ChristianEdwardPadilla

src/components/GrandchildRectangle.jsx

@@ -4,12 +4,12 @@ import { Rect, Group } from 'react-konva';
 
 class GrandchildRectangle extends Component {
   state = {
+    image: null,
     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;
     return color;
   }
@@ -19,13 +19,11 @@ class GrandchildRectangle extends Component {
   }
 
   setImage = (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;
+    this.setState({ image });
   };
 
   render() {
@@ -70,16 +68,12 @@ class GrandchildRectangle extends Component {
           width={width}
           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={10}
+          fillPatternImage={this.state.image ? this.state.image : this.setImage(imageSource)}
+          fillPatternScaleX={this.state.image ? width / this.state.image.width : 1}
+          fillPatternScaleY={this.state.image ? height / this.state.image.height : 1}
+          strokeWidth={2}
           strokeScaleEnabled={false}
           draggable={false}
-          // centerScaling={true}
-          // enabledAnchors={['top-left', 'top-right', 'bottom-left', 'bottom-right']}
         />
         {childType === 'COMP'
           && components
@@ -91,21 +85,11 @@ class GrandchildRectangle extends Component {
                 components={components}
                 componentId={componentId}
                 childType={grandchild.childType}
-                imageSource={
-                  grandchild.htmlElement == 'Image' && grandchild.HTMLInfo.Src
-                    ? grandchild.HTMLInfo.Src
-                    : null
-                }
+                imageSource={grandchild.htmlElement === 'Image' && grandchild.HTMLInfo.Src}
                 childComponentName={grandchild.componentName}
                 childComponentId={grandchild.childComponentId}
                 focusChild={focusChild}
                 childId={childId}
-                // fillPatternImage={
-                //   grandchild.HTMLInfo.Src
-                //     ? this.setImage(grandchild.HTMLInfo.Src)
-                //     : null
-                // }
-                // test test
                 width={grandchild.position.width * (width / this.getPseudoChild().position.width)}
                 height={
                   grandchild.position.height * (height / this.getPseudoChild().position.height)

src/components/KonvaStage.jsx

@@ -49,13 +49,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);
   }
 
@@ -216,9 +216,7 @@ class KonvaStage extends Component {
                   handleTransform={handleTransform}
                   draggable={true}
                   blockSnapSize={this.state.blockSnapSize}
-                  imageSource={
-                    child.htmlElement === 'Image' && child.HTMLInfo.Src ? child.HTMLInfo.Src : null
-                  }
+                  imageSource={child.htmlElement === 'Image' && child.HTMLInfo.Src}
                 />
               ))
               .sort((rectA, rectB) => {

src/components/Rectangle.jsx

@@ -1,26 +1,24 @@
-import React, { Component, Fragment } from "react";
-import { Rect, Group, Label, Text } from "react-konva";
-import TransformerComponent from "./TransformerComponent.jsx";
-import GrandchildRectangle from "./GrandchildRectangle.jsx";
+import React, { Component, Fragment } from 'react';
+import {
+  Rect, Group, Label, Text,
+} from 'react-konva';
+import TransformerComponent from './TransformerComponent.jsx';
+import GrandchildRectangle from './GrandchildRectangle.jsx';
 
 class Rectangle extends Component {
   state = {
-    rectImage: null
+    image: null,
+    imageHeight: 0,
+    imageWidth: 0,
   };
 
   getComponentColor(componentId) {
-    if (componentId === "888") {
-      return "#000000";
-    }
-    const color = this.props.components.find(comp => comp.id === componentId)
-      .color;
+    const color = this.props.components.find(comp => comp.id === componentId).color;
     return color;
   }
 
   getPseudoChild() {
-    return this.props.components.find(
-      comp => comp.id === this.props.childComponentId
-    );
+    return this.props.components.find(comp => comp.id === this.props.childComponentId);
   }
 
   handleResize(componentId, childId, target, blockSnapSize) {
@@ -31,19 +29,13 @@ class Rectangle extends Component {
       .childrenArray.find(child => child.childId === childId);
 
     if (childId === -1) {
-      focChild = this.props.components.find(
-        comp => comp.id === this.props.componentId
-      );
+      focChild = this.props.components.find(comp => comp.id === this.props.componentId);
     }
     const transformation = {
-      width:
-        Math.round((target.width() * target.scaleX()) / blockSnapSize) *
-        blockSnapSize,
-      height:
-        Math.round((target.height() * target.scaleY()) / blockSnapSize) *
-        blockSnapSize,
+      width: Math.round((target.width() * target.scaleX()) / blockSnapSize) * blockSnapSize,
+      height: Math.round((target.height() * target.scaleY()) / blockSnapSize) * blockSnapSize,
       x: target.x() + focChild.position.x,
-      y: target.y() + focChild.position.y
+      y: target.y() + focChild.position.y,
     };
 
     this.props.handleTransform(componentId, childId, transformation);
@@ -52,19 +44,17 @@ class Rectangle extends Component {
   handleDrag(componentId, childId, target, blockSnapSize) {
     const transformation = {
       x: Math.round(target.x() / blockSnapSize) * blockSnapSize,
-      y: Math.round(target.y() / blockSnapSize) * blockSnapSize
+      y: Math.round(target.y() / blockSnapSize) * blockSnapSize,
     };
     this.props.handleTransform(componentId, childId, transformation);
   }
 
-  setImage = imageSource => {
+  setImage = (imageSource) => {
     if (!imageSource) return;
     const image = new window.Image();
- 
     image.src = imageSource;
-    // if there was an error grtting img; heigth should b Zero
     if (!image.height) return null;
-    return image;
+    this.setState({ image });
   };
 
   render() {
@@ -85,7 +75,7 @@ class Rectangle extends Component {
       draggable,
       blockSnapSize,
       childType,
-      imageSource
+      imageSource,
     } = this.props;
 
     // the Group is responsible for dragging of all children
@@ -99,22 +89,20 @@ class Rectangle extends Component {
         scaleY={scaleY}
         width={width}
         height={height}
-        onDragEnd={event =>
-          this.handleDrag(componentId, childId, event.target, blockSnapSize)
-        }
-        ref={node => {
+        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 => {
+          ref={(node) => {
             this.rect = node;
           }}
           tabIndex="0" // required for keypress event to be heard by this.group
           name={`${childId}`}
-          className={"childRect"}
+          className={'childRect'}
           x={0}
           y={0}
           childId={childId}
@@ -124,47 +112,34 @@ class Rectangle extends Component {
           scaleY={1}
           width={width}
           height={height}
-          stroke={
-            childType === "COMP"
-              ? this.getComponentColor(childComponentId)
-              : "#000000"
-          }
-          // fill={color}
-          // opacity={0.8}
-          onTransformEnd={event =>
-            this.handleResize(componentId, childId, event.target, blockSnapSize)
+          stroke={childType === 'COMP' ? this.getComponentColor(childComponentId) : '#000000'}
+          onTransformEnd={event => this.handleResize(componentId, childId, event.target, blockSnapSize)
           }
-          strokeWidth={childType === "COMP" ? 4 : 1}
+          strokeWidth={childType === 'COMP' ? 4 : 2}
           strokeScaleEnabled={false}
           draggable={false}
-          fill={childId === -1 ? "white" : null}
+          fill={childId === -1 ? 'white' : null}
           shadowBlur={childId === -1 ? 6 : null}
-          fillPatternImage={imageSource ? this.setImage(imageSource) : null}
-
-          // fillPatternImage={null}
-          // dashEnabled={childId === "-1"} // dash line only enabled for pseudochild
-          // dash={[10, 3]} // 10px dashes with 3px gaps
+          fillPatternImage={this.state.image ? this.state.image : this.setImage(imageSource)}
+          fillPatternScaleX={this.state.image ? width / this.state.image.width : 1}
+          fillPatternScaleY={this.state.image ? height / this.state.image.height : 1}
         />
         <Label>
           <Text
-            fontStyle={"bold"}
-            fontVariant={"small-caps"}
+            fontStyle={'bold'}
+            fontVariant={'small-caps'}
             // pseudochild's label should look different than normal children:
             text={childId === -1 ? title.slice(0, title.length - 2) : title}
-            fill={
-              childId === -1
-                ? this.getComponentColor(childComponentId)
-                : "#000000"
-            }
+            fill={childId === -1 ? this.getComponentColor(childComponentId) : '#000000'}
             fontSize={childId === -1 ? 15 : 10}
             x={4}
             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
-        childId !== -1 &&
-          childType === "COMP" &&
-          components
+        childId !== -1
+          && childType === 'COMP'
+          && components
             .find(comp => comp.title === childComponentName)
             .childrenArray.filter(child => child.childId !== -1)
             .map((grandchild, i) => (
@@ -174,43 +149,35 @@ class Rectangle extends Component {
                 componentId={componentId}
                 directParentName={childComponentName}
                 childType={grandchild.childType}
-                imageSource={
-                  grandchild.htmlElement == "Image" && grandchild.HTMLInfo.Src
-                    ? grandchild.HTMLInfo.Src
-                    : null
-                }
+                imageSource={grandchild.htmlElement === 'Image' && grandchild.HTMLInfo.Src}
                 childComponentName={grandchild.componentName}
                 childComponentId={grandchild.childComponentId}
                 focusChild={focusChild}
                 childId={childId} // scary addition, grandchildren rects default to childId of "direct" children
-                width={
-                  grandchild.position.width *
-                  (width / this.getPseudoChild().position.width)
-                }
+                width={grandchild.position.width * (width / this.getPseudoChild().position.width)}
                 height={
-                  grandchild.position.height *
-                  (height / this.getPseudoChild().position.height)
+                  grandchild.position.height * (height / this.getPseudoChild().position.height)
                 }
                 x={
-                  (grandchild.position.x - this.getPseudoChild().position.x) *
-                  (width / this.getPseudoChild().position.width)
+                  (grandchild.position.x - this.getPseudoChild().position.x)
+                  * (width / this.getPseudoChild().position.width)
                 }
                 y={
-                  (grandchild.position.y - this.getPseudoChild().position.y) *
-                  (height / this.getPseudoChild().position.height)
+                  (grandchild.position.y - this.getPseudoChild().position.y)
+                  * (height / this.getPseudoChild().position.height)
                 }
               />
             ))}
-        {focusChild &&
-          focusChild.childId === childId &&
-          draggable && (
+        {focusChild
+          && focusChild.childId === childId
+          && draggable && (
             <TransformerComponent
               focusChild={focusChild}
-              rectClass={"childRect"}
+              rectClass={'childRect'}
               anchorSize={8}
-              color={"grey"}
+              color={'grey'}
             />
-          )}
+        )}
       </Group>
     );
   }

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]: string }; // 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;