all features working

Author: rachelnicole

package-lock.json

@@ -16,6 +16,7 @@
     "fabric": "^4.2.0",
     "get-image-orientation": "0.0.4",
     "get-orientation": "^1.1.2",
+    "jquery": "^3.5.1",
     "material-ui": "^0.20.2",
     "node-sass": "^4.14.1",
     "react": "^16.8.6",

package.json

@@ -13,18 +13,18 @@ const App = () => {
 
   const [stage, setStage] = React.useState("upload"),
         [photoTaken, photoTakenEncoded] = React.useState(null),
-        [aspectRatio, setAspectRatio] = React.useState(null);
+        [dimensions, setDimensions] = React.useState(null);
 
   return (
     <div>
       {stage === "landing" && <Landing {...{ setStage }} { ...{stage} }/>}
       {stage === "layout" && <Layout {...{ setStage }} { ...{stage} }/>}
       {stage === "mode" && <Mode {...{ setStage }} { ...{stage} }/>}
-      {stage === "upload" && <Upload {...{ setStage }} {...{ photoTakenEncoded }} {...{ setAspectRatio }} { ...{stage} }/>}
+      {stage === "upload" && <Upload {...{ setStage }} {...{ photoTakenEncoded }} {...{ setDimensions }} { ...{stage} }/>}
       {stage === "photo" && <Photo {...{ setStage }} {...{ photoTakenEncoded }} { ...{stage} } />}
       {stage === "filter" && <Filter {...{ setStage }} {...{ photoTakenEncoded }} {...{ photoTaken }} { ...{stage} }/>}
-      {stage === "decorate" && <Decorate {...{ setStage }} {...{ photoTakenEncoded }} {...{ photoTaken }} {...{ aspectRatio }} { ...{stage} }/>}
-      {stage === "share" && <Share {...{ setStage }} { ...{stage} } />}
+      {stage === "decorate" && <Decorate {...{ setStage }} {...{ photoTakenEncoded }} {...{ photoTaken }} {...{ dimensions }} { ...{stage} }/>}
+      {stage === "share" && <Share {...{ setStage }} {...{ photoTaken }} { ...{stage} } />}
     </div>
   )}
 

src/App.js

@@ -42,11 +42,16 @@ video {
 
 .decorate-page .main-container {
   float: left;
+  width: 800px;
 }
-.decorate-page.main-container {
-  max-width: 600px;
+.main-container {
+  max-width: 800px;
 }
 
 img.decoration {
   width: 100px;
+}
+
+.main-container.secondary.window {
+  width: 250px;
 }

src/app.scss

@@ -2,55 +2,58 @@ import React from 'react'
 import { useSpring, animated } from 'react-spring'
 import { fabric } from "fabric"
 
-// this was very helpful in figuring out how to get fabric in react https://codesandbox.io/s/react-fabric-example-87hh4
+const Decorate = ({ stage, setStage, photoTaken, photoTakenEncoded, dimensions }) => {
 
+  const opacity = useSpring({ opacity: 1, from: { opacity: 0 } });
 
-const Decorate = ( {stage, setStage, photoTaken, photoTakenEncoded, aspectRatio, ...props}) => {
-  // I would suggest against calling a variable "props", that's sort of reserved.
-  const opacity = useSpring({opacity: 1, from: {opacity: 0}});
-  // Also note my use of "...props" above. Now there is a variable called props which is
-  //   an object that contains anything we didn't destructure above.
-  // ex. if you had called this component thusly: <Decorate stage={something} setStage={somethingElse} herp="derp" hoop="doop" />
-  //   `props` would equal { herp: 'derp', hoop: 'doop' }
-  
   // Set up a persistent canvas
   let canvas;
 
+  const updateState = () => {
+    canvas.discardActiveObject();    
+    const filteredImage = document.getElementById('my-fabric-canvas'),
+      dataURL = filteredImage.toDataURL();
+    photoTakenEncoded(dataURL);
+  }
+
   React.useEffect(() => {
-      canvas = new fabric.Canvas("my-fabric-canvas");
-      canvas.setDimensions({
-        width: aspectRatio.width,
-        height: aspectRatio.height
-       });
-      console.log(aspectRatio)
-  }, []);
+    canvas = new fabric.Canvas("my-fabric-canvas");
+    canvas.setDimensions({
+      width: dimensions.width,
+      height: dimensions.height
+    });
+    console.log(dimensions)
+  }, [canvas]);
 
 
-   const addBackground = (photoTaken) => 
-     fabric.Image.fromURL(photoTaken, (oImg) => 
-     canvas.setBackgroundImage(oImg, canvas.renderAll.bind(canvas), {
+  const addBackground = (photoTaken) =>
+    fabric.Image.fromURL(photoTaken, (oImg) =>
+      canvas.setBackgroundImage(oImg, canvas.renderAll.bind(canvas), {
         // Optionally add an opacity lvl to the image
         backgroundImageOpacity: 0.5,
         // should the image be resized to fit the container?
         backgroundImageStretch: false,
         scaleX: canvas.width / oImg.width,
         scaleY: canvas.height / oImg.height
-    })
-   );
+      })
+    );
 
-   addBackground(photoTaken)
-  
-  // These two functions are equivalent, just sharing how to arrow-syntax for fun
-  const decorateImage = (url) => 
-    fabric.Image.fromURL(url, (oImg) => 
-    canvas.add(oImg)
-  );
+  const removeItem = () => {
+    let object = canvas.getActiveObject();
+    if (!object){
+      alert('Please select the element to remove');
+      return '';
+    }
+    canvas.remove(object);
+  }
+
+  addBackground(photoTaken)
 
-  // function decorateImage (url) {
-  //   fabric.Image.fromURL(url, function(oImg) {
-  //     canvas.add(oImg);
-  //   });
-  // }
+  // These two functions are equivalent, just sharing how to arrow-syntax for fun
+  const decorateImage = (url) =>
+    fabric.Image.fromURL(url, (oImg) =>
+      canvas.add(oImg)
+    );
 
   return (
     <animated.div style={opacity} className="decorate-page">
@@ -81,7 +84,8 @@ const Decorate = ( {stage, setStage, photoTaken, photoTakenEncoded, aspectRatio,
             type="button"
             className="btn"
             onClick={() => {
-            setStage("share")
+              setStage("share")
+              updateState()
             }}>
             Let's Share!
           </button>
@@ -117,31 +121,39 @@ const Decorate = ( {stage, setStage, photoTaken, photoTakenEncoded, aspectRatio,
         </div>
         <div className="container-inner decoration-container">
           <p>Let's decorate:</p>
-          <img 
-          className="decoration" 
-          src="images/panda_ears.png"
-          alt="panda bear ears"
-          onClick={e => decorateImage(e.target.src)}
+          <button
+            type="button"
+            className="btn"
+            onClick={() => {
+              removeItem()
+            }}>
+            Remove Active Object
+          </button>
+          <img
+            className="decoration"
+            src="images/panda_ears.png"
+            alt="panda bear ears"
+            onClick={e => decorateImage(e.target.src)}
           ></img>
-          <img 
-          className="decoration" 
-          src="images/cat-ears.png"
-          alt="cat ears"
-          onClick={e => decorateImage(e.target.src)}
+          <img
+            className="decoration"
+            src="images/cat-ears.png"
+            alt="cat ears"
+            onClick={e => decorateImage(e.target.src)}
           ></img>
-          <img 
-          className="decoration" 
-          src="images/sparkles.png"
-          alt="sparkles"
-          onClick={e => decorateImage(e.target.src)}
+          <img
+            className="decoration"
+            src="images/sparkles.png"
+            alt="sparkles"
+            onClick={e => decorateImage(e.target.src)}
           ></img>
-          <img 
-          className="decoration" 
-          src="images/devil.png"
-          alt="devil horns"
-          onClick={e => decorateImage(e.target.src)}
+          <img
+            className="decoration"
+            src="images/devil.png"
+            alt="devil horns"
+            onClick={e => decorateImage(e.target.src)}
           ></img>
-          
+
         </div>
         <div className="statusbar">
           <div className="left">3 object(s)</div>

src/decorate/Decorate.js

@@ -1,7 +1,7 @@
 import React  from 'react'
 import { useSpring, animated } from 'react-spring'
 
-const Share = ( {stage, setStage} ) => {
+const Share = ( {stage, setStage, photoTaken} ) => {
   const props = useSpring({opacity: 1, from: {opacity: 0}})
 
   return (
@@ -29,6 +29,13 @@ const Share = ( {stage, setStage} ) => {
       <div className="container-inner">
         <p>this is the share page</p>
         <p>the end</p>
+        {photoTaken && (
+          <img
+            src={photoTaken} 
+            alt="photobooth snapshot"
+            className="photoPreview"
+          />
+        )}
 
       </div>
       <div className="statusbar">

src/share/Share.js

@@ -2,7 +2,7 @@ import React from "react";
 import { useSpring, animated } from 'react-spring'
 import ImageUploader from "react-images-upload";
 
-const Upload = ({ stage, setStage, photoTakenEncoded, setAspectRatio }) => {
+const Upload = ({ stage, setStage, photoTakenEncoded, setDimensions }) => {
   const props = useSpring({ opacity: 1, from: { opacity: 0 } });
 
 
@@ -21,7 +21,7 @@ const Upload = ({ stage, setStage, photoTakenEncoded, setAspectRatio }) => {
         width: imageUploaded.naturalWidth,
         height: imageUploaded.naturalHeight
     };
-    setAspectRatio(image);
+    setDimensions(image);
   }