From cec838aa0a61ef62ee908078aada47f0ba2cc9bb Mon Sep 17 00:00:00 2001
From: Brandon Ball <74022057+bhball22@users.noreply.github.com>
Date: Fri, 22 Apr 2022 14:20:32 -0500
Subject: [PATCH 1/6] Reset button on Hydraulic System

---
 src/Componets/HydrolicSystem.jsx        |  7 +++++++
 src/Componets/Styles/HydrolicSystem.css | 14 ++++++++++++++
 2 files changed, 21 insertions(+)

diff --git a/src/Componets/HydrolicSystem.jsx b/src/Componets/HydrolicSystem.jsx
index 225536b..45dde1b 100644
--- a/src/Componets/HydrolicSystem.jsx
+++ b/src/Componets/HydrolicSystem.jsx
@@ -11,6 +11,7 @@ class HydrolicSystem extends Component {
         super(props);
         //Simulation Variables / Default values
         this.state = {psi: 1500 , PsiColor: 'green',LHV: "Open", RHV: "Open", LHF: false, RHF: false, HYD: false, HydPress:"Norm", PRV:"Working", LeftEngine:"Functioning", RightEngine:"Functioning", LeftFilter:"Flowing", RightFilter:"Flowing", TopFilter:"Flowing"};
+        this.initialState = this.state;
         this.handleChange = this.handleChange.bind(this);
         this.updateSimVariables = this.updateSimVariables.bind(this);
     }
@@ -21,6 +22,9 @@ class HydrolicSystem extends Component {
 
         event.preventDefault();
 
+        if(event.target.id === 'RESET'){
+            await this.setState(this.initialState);
+        }
         if(event.target.id === 'LV'){ //ID: LV and LVENG both open and close the left valve.
            await this.setState({ LHV: this.state.LHV === "Open" ? "Closed" : "Open"});
         }
@@ -329,6 +333,9 @@ class HydrolicSystem extends Component {
                 <button className='sim-button-filter' onClick={this.updateSimVariables} id='RF'>Right Filter: {this.state.RightFilter}</button>
                 <button className='sim-button-filter' onClick={this.updateSimVariables} id='TF'>Return Filter: {this.state.TopFilter}</button>
             </div>
+            <div id= "RESET">
+                <button className='sim-button-reset' onClick={this.updateSimVariables} id="RESET">RESET</button>
+            </div>
         </>)
     }
 }
diff --git a/src/Componets/Styles/HydrolicSystem.css b/src/Componets/Styles/HydrolicSystem.css
index 243ead6..96367fa 100644
--- a/src/Componets/Styles/HydrolicSystem.css
+++ b/src/Componets/Styles/HydrolicSystem.css
@@ -59,6 +59,20 @@
     font-size: 16px;
 }
 
+.sim-button-reset{
+    background-color: #1c2224;
+    width: 150PX;
+    border: 3px;
+    border-color: #ffffff00;
+    color: white;
+    padding: 10px 10px;
+    margin: 5px;
+    text-align:center;
+    text-decoration: none;
+    font-size: 16px;
+    float: right;
+}
+
 h3{
     color: white;
     display: inline;

From 979d50d7919856b36fd223d1b6e7ed2554b8dd6a Mon Sep 17 00:00:00 2001
From: Brandon Ball <74022057+bhball22@users.noreply.github.com>
Date: Fri, 22 Apr 2022 14:47:09 -0500
Subject: [PATCH 2/6] Remove zoom buttons

---
 src/App.jsx | 28 ++--------------------------
 1 file changed, 2 insertions(+), 26 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index e0a3e67..f2ff5ee 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -14,30 +14,10 @@ function App(props) {
   
   const shouldRender = false;
 
-  function setRadarView(){
-    setZoom(40)
-    setPosy(-10)
-    setPosx(-88)
-  }
-  function setSystemView(){
-    setZoom(50)
-    setPosy(30)
-    setPosx(-168)
-  }
-  function setDisplayView(){
-    setZoom(40)
-    setPosy(-26)
-    setPosx(10)
-  }
-  function setNavView(){
-    setZoom(30)
-    setPosy(-12)
-    setPosx(-130)
-  }
   function setWideView(){
     setZoom(1)
-    setPosy(30)
-    setPosx(6)
+    setPosy(0)
+    setPosx(0)
   }
   function hideNavBar() {
       if (document.getElementById('navBar').style.width != '0px'){
@@ -82,10 +62,6 @@ function App(props) {
             <ClosedDrawer onChange={() => hideNavBar()} id="NavBarClosed" />
         </div>
         <div className="NavBar" id="navBar">
-            <NavButton onChange={()=>setRadarView()}tag="Radar Controls"/>
-            <NavButton onChange={()=>setSystemView()}tag="System Information"/>
-            <NavButton onChange={()=>setDisplayView()}tag="Flight Display"/>
-            <NavButton onChange={()=>setNavView()}tag="Navigation Controls"/>
             <NavButton onChange={() => setWideView()} tag="Wide View" />
             <Slider onSlider={(i)=>setZoom(i)}></Slider>
             <div className="button-grid-container">

From 61bfa96d1afa5d6d6ceb9dd929eb0603b9a9551b Mon Sep 17 00:00:00 2001
From: Jonathan Diamond <jwdiamond39@gmail.com>
Date: Mon, 25 Apr 2022 20:22:47 -0500
Subject: [PATCH 3/6] scroll wheel works with image but image doesnt appear on
 start up.

---
 package-lock.json | 20 +++++++++++++
 package.json      |  1 +
 src/App.jsx       | 72 +++++++++++++++++++++++++++--------------------
 3 files changed, 63 insertions(+), 30 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f867122..655741f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,7 @@
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-img-mapper": "^1.3.0",
+        "react-zoom-pan-pinch": "^2.1.3",
         "web-vitals": "^2.1.4"
       },
       "devDependencies": {
@@ -15421,6 +15422,19 @@
         "react-dom": ">=16.6.0"
       }
     },
+    "node_modules/react-zoom-pan-pinch": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/react-zoom-pan-pinch/-/react-zoom-pan-pinch-2.1.3.tgz",
+      "integrity": "sha512-a5AChOWhjo0RmxsNZXGQIlNh3e3nLU6m4V6M+6dlbPNk5d+MtMxgKWyA5zpR06Lp3OZkZVF9nR8JeWSvKwck9g==",
+      "engines": {
+        "node": ">=8",
+        "npm": ">=5"
+      },
+      "peerDependencies": {
+        "react": "^17.0.2",
+        "react-dom": "^17.0.2"
+      }
+    },
     "node_modules/readable-stream": {
       "version": "2.3.7",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
@@ -29795,6 +29809,12 @@
         "prop-types": "^15.6.2"
       }
     },
+    "react-zoom-pan-pinch": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/react-zoom-pan-pinch/-/react-zoom-pan-pinch-2.1.3.tgz",
+      "integrity": "sha512-a5AChOWhjo0RmxsNZXGQIlNh3e3nLU6m4V6M+6dlbPNk5d+MtMxgKWyA5zpR06Lp3OZkZVF9nR8JeWSvKwck9g==",
+      "requires": {}
+    },
     "readable-stream": {
       "version": "2.3.7",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
diff --git a/package.json b/package.json
index 33c1330..12202b7 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-img-mapper": "^1.3.0",
+    "react-zoom-pan-pinch": "^2.1.3",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
diff --git a/src/App.jsx b/src/App.jsx
index f2ff5ee..ec783f9 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -4,9 +4,11 @@ import NavButton from './Componets/NavButton';
 import Slider from './Componets/Slider';
 import ScrollButton from './Componets/ScrollButton';
 import AnimationPane from './Componets/AnimationPane';
+import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
 import { ClosedDrawer, OpenedDrawer } from './Componets/DrawerButton';
 import { useEffect, useState } from 'react';
 
+
 function App(props) {
   const [ Zoom, setZoom] = useState(1);
   const [ posx, setPosx] = useState(0);
@@ -54,39 +56,49 @@ function App(props) {
 
   return (
 
-    <div className="App grid-container">
-        <div className="int-toggle-container" id="int-toggle-container">
-            <ClosedDrawer onChange={() => hideHydrolic()} id="InteractiveClosed" />
-        </div>
-        <div className="nav-toggle-container" id="nav-toggle-container">
-            <ClosedDrawer onChange={() => hideNavBar()} id="NavBarClosed" />
-        </div>
-        <div className="NavBar" id="navBar">
-            <NavButton onChange={() => setWideView()} tag="Wide View" />
-            <Slider onSlider={(i)=>setZoom(i)}></Slider>
-            <div className="button-grid-container">
-              <ScrollButton onChange={()=>setPosx(posx + 2)} id='UP' />
-              <ScrollButton onChange={()=>setPosx(posx - 2)} id='DOWN'/>
-              <ScrollButton onChange={()=>setPosy(posy + 2)} id='LEFT'/>
-              <ScrollButton onChange={()=>setPosy(posy - 2)} id='RIGHT'/>
+    <TransformWrapper
+    initialScale ={1}
+    initialPositionX={posx}
+    initialPositionY={posy}
+    >
+      {({ zoomIn, zoomOut, resetTransform, ...rest }) => (
+
+        <div className="App grid-container">
+            <div className="int-toggle-container" id="int-toggle-container">
+                <ClosedDrawer onChange={() => hideHydrolic()} id="InteractiveClosed" />
             </div>
-            <OpenedDrawer onChange={() => hideNavBar()} id="NavBarOpened" />
-        </div>
-        <div className = "ViewPort">
-              <Mapper Zoom={Zoom} posx={posx} posy={posy} id="mapper" />
-              <div className="button-grid-container" id="buttonGridViewPort">
-                <ScrollButton onChange={()=>setPosx(posx + 2)} id='UP' />
-                <ScrollButton onChange={()=>setPosx(posx - 2)} id='DOWN'/>
-                <ScrollButton onChange={()=>setPosy(posy + 2)} id='LEFT'/>
-                <ScrollButton onChange={()=>setPosy(posy - 2)} id='RIGHT'/>
+            <div className="nav-toggle-container" id="nav-toggle-container">
+                <ClosedDrawer onChange={() => hideNavBar()} id="NavBarClosed" />
+            </div>
+            <div className="NavBar" id="navBar">
+                <NavButton onChange={() => setWideView()} tag="Wide View" />
+                <Slider onSlider={(i)=>setZoom(i)}></Slider>
+                <div className="button-grid-container">
+                  <ScrollButton onChange={()=>setPosx(posx + 2)} id='UP' />
+                  <ScrollButton onChange={()=>setPosx(posx - 2)} id='DOWN'/>
+                  <ScrollButton onChange={()=>setPosy(posy + 2)} id='LEFT'/>
+                  <ScrollButton onChange={()=>setPosy(posy - 2)} id='RIGHT'/>
+                </div>
+                <OpenedDrawer onChange={() => hideNavBar()} id="NavBarOpened" />
+            </div>
+            <div className = "ViewPort">
+              <TransformComponent>
+                  <Mapper Zoom={Zoom} posx={posx} posy={posy} id="mapper" />
+                  <div className="button-grid-container" id="buttonGridViewPort">
+                    <ScrollButton onChange={()=>setPosx(posx + 2)} id='UP' />
+                    <ScrollButton onChange={()=>setPosx(posx - 2)} id='DOWN'/>
+                    <ScrollButton onChange={()=>setPosy(posy + 2)} id='LEFT'/>
+                    <ScrollButton onChange={()=>setPosy(posy - 2)} id='RIGHT'/>
+                </div>
+              </TransformComponent>
+            </div>
+            <div className='InteractivePane' id = 'interactivePane'>
+              <AnimationPane />
+              <OpenedDrawer onChange={() => hideHydrolic()} id="InteractiveOpened" />
             </div>
         </div>
-        <div className='InteractivePane' id = 'interactivePane'>
-          <AnimationPane />
-          <OpenedDrawer onChange={() => hideHydrolic()} id="InteractiveOpened" />
-        </div>
-    </div>
-
+      )}
+    </TransformWrapper>
   );
 }
 

From 7e87d1602f3fee9b5c20161f66a7d2f950239cbc Mon Sep 17 00:00:00 2001
From: Wil Permenter <wilpermenter@gmail.com>
Date: Tue, 26 Apr 2022 11:46:57 -0500
Subject: [PATCH 4/6] Added Backbone for Main View To Communicate to our Sim

---
 src/App.jsx                     | 12 +++++++++---
 src/Componets/AnimationPane.jsx | 13 +++++++++----
 src/Componets/Mapper.jsx        |  2 +-
 3 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index f2ff5ee..3fb7687 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -11,6 +11,8 @@ function App(props) {
   const [ Zoom, setZoom] = useState(1);
   const [ posx, setPosx] = useState(0);
   const [ posy, setPosy] = useState(0);
+
+  const [ mainViewInteraction, setMainViewInteraction ] = useState(null);
   
   const shouldRender = false;
 
@@ -45,10 +47,14 @@ function App(props) {
           document.getElementById('InteractiveOpened').style.display = 'none'
       }
   }
+  function onButtonClicked(area){
+    setMainViewInteraction(area.name);
+    //console.log(area.name);
+  }
 
   useEffect(()=> {
     if(shouldRender){
-
+      setMainViewInteraction(null);
     }
   })
 
@@ -73,7 +79,7 @@ function App(props) {
             <OpenedDrawer onChange={() => hideNavBar()} id="NavBarOpened" />
         </div>
         <div className = "ViewPort">
-              <Mapper Zoom={Zoom} posx={posx} posy={posy} id="mapper" />
+              <Mapper Zoom={Zoom} posx={posx} posy={posy} id="mapper" onButtonClicked={onButtonClicked}/>
               <div className="button-grid-container" id="buttonGridViewPort">
                 <ScrollButton onChange={()=>setPosx(posx + 2)} id='UP' />
                 <ScrollButton onChange={()=>setPosx(posx - 2)} id='DOWN'/>
@@ -82,7 +88,7 @@ function App(props) {
             </div>
         </div>
         <div className='InteractivePane' id = 'interactivePane'>
-          <AnimationPane />
+          <AnimationPane buttonPressed = {mainViewInteraction}/>
           <OpenedDrawer onChange={() => hideHydrolic()} id="InteractiveOpened" />
         </div>
     </div>
diff --git a/src/Componets/AnimationPane.jsx b/src/Componets/AnimationPane.jsx
index f849a0d..b2e4eb4 100644
--- a/src/Componets/AnimationPane.jsx
+++ b/src/Componets/AnimationPane.jsx
@@ -1,4 +1,4 @@
-import { React , useState } from 'react'
+import { React , useEffect, useState } from 'react'
 import "./Styles/AnimationPane.css"
 import HydrolicSystem from './HydrolicSystem'
 import InteractiveDiagramHydrolic from "../Assets/result.jsx"
@@ -8,6 +8,8 @@ import NoninteractiveDiagramHydrolic from  "../Assets/hydrolics.png"
 const AnimationPane = (props) => {
     const [displayType, setDisplayType] = useState(true);
 
+    const shouldRender = true;
+
     const handelChange = () => {
         setDisplayType(!displayType);
         if(displayType){
@@ -18,9 +20,12 @@ const AnimationPane = (props) => {
             document.getElementById("HydrolicPng").style.display = "none";
         }
         
-
     }
-    
+    useEffect(()=>{
+        if(shouldRender){
+            console.log(props.buttonPressed + " yes ");
+        }
+    })
         return(
             <>
                 <div className="AnimationContainer grid-element grid-container">
@@ -33,7 +38,7 @@ const AnimationPane = (props) => {
                     <InteractiveDiagramHydrolic/>
                 </div>
                 <div className="InfoProcessing grid-element">
-                    <HydrolicSystem />
+                    <HydrolicSystem  buttonPressed = {props.buttonPressed}/>
                 </div>
             </>
         )
diff --git a/src/Componets/Mapper.jsx b/src/Componets/Mapper.jsx
index 7d0df64..a7571d6 100644
--- a/src/Componets/Mapper.jsx
+++ b/src/Componets/Mapper.jsx
@@ -31,7 +31,7 @@ const Mapper = (props) =>{
         imgWidth = {3500}
         responsive = {true}
         parentWidth = {WIDTH}
-        onClick={(area) => { console.log(area.name)}}
+        onClick={(area) => {props.onButtonClicked(area)}}
         />
       </div>
 

From cb5e3c023e739325dbe1b85bba587ed8da0e5998 Mon Sep 17 00:00:00 2001
From: Wil Permenter <wilpermenter@gmail.com>
Date: Thu, 28 Apr 2022 14:55:18 -0500
Subject: [PATCH 5/6] Removed Nav Bar, Fixed Scroll / Drag /zoom

Removed some of the code for porting buttons from main view to sim, The Main view buttons were broken with the new scroll pkg.
---
 src/App.css                     | 19 +++----
 src/App.jsx                     | 90 ++++++++++-----------------------
 src/Componets/AnimationPane.jsx |  3 +-
 src/Componets/Mapper.jsx        | 21 +++-----
 src/Componets/NavButton.jsx     | 10 ++--
 5 files changed, 48 insertions(+), 95 deletions(-)

diff --git a/src/App.css b/src/App.css
index 76bc5f5..666a54c 100644
--- a/src/App.css
+++ b/src/App.css
@@ -7,16 +7,6 @@
     grid-area: viewPort;
     box-shadow: inset 0px 6px 10px black;
 }
-.NavBar{
-    padding-top: 2vh;
-    overflow: hidden;
-    background-color: #1c2224;
-    text-align: center;
-    width: 200px;
-    grid-area: navBar;
-    z-index: 1;
-    height: 95vh;
-}
 
 .InteractivePane{
     grid-area: interactivePane;
@@ -50,8 +40,8 @@
     grid-template-columns: auto minmax(0, 1fr);
     display:grid;
     grid-template-areas:
-        'navBar viewPort interactivePane'
-        'navBar viewPort interactivePane'
+        'viewport viewPort interactivePane'
+        'viewport viewPort interactivePane'
 }
 
 ::-webkit-scrollbar{
@@ -108,4 +98,9 @@
 
 #buttonGridViewPort{
     display: none;
+}
+
+/*Not Ideal but can't figure out why height = 0 */ 
+#img-mapper{
+    height:1000px !important;
 }
\ No newline at end of file
diff --git a/src/App.jsx b/src/App.jsx
index fc02194..29ed492 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,44 +1,19 @@
 import './App.css';
 import Mapper from './Componets/Mapper'
 import NavButton from './Componets/NavButton';
-import Slider from './Componets/Slider';
-import ScrollButton from './Componets/ScrollButton';
 import AnimationPane from './Componets/AnimationPane';
 import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
 import { ClosedDrawer, OpenedDrawer } from './Componets/DrawerButton';
-import { useEffect, useState } from 'react';
 
 
 function App(props) {
-  const [ Zoom, setZoom] = useState(1);
-  const [ posx, setPosx] = useState(0);
-  const [ posy, setPosy] = useState(0);
 
-  const [ mainViewInteraction, setMainViewInteraction ] = useState(null);
+  //const [ mainViewInteraction, setMainViewInteraction ] = useState(null);
   
-  const shouldRender = false;
+  //const shouldRender = false;
 
-  function setWideView(){
-    setZoom(1)
-    setPosy(0)
-    setPosx(0)
-  }
-  function hideNavBar() {
-      if (document.getElementById('navBar').style.width != '0px'){
-          document.getElementById('navBar').style.width = '0px'
-          document.getElementById('nav-toggle-container').style.display = 'block'
-          document.getElementById('NavBarOpened').style.display = 'none'
-          document.getElementById('buttonGridViewPort').style.display = 'grid'
-      }
-      else {
-          document.getElementById('navBar').style.width = '200px'
-          document.getElementById('nav-toggle-container').style.display = 'none'
-          document.getElementById('NavBarOpened').style.display = 'block'
-          document.getElementById('buttonGridViewPort').style.display = 'none'
-      }
-   }
   function hideHydrolic() {
-      if (document.getElementById('interactivePane').style.display == 'none') {
+      if (document.getElementById('interactivePane').style.display === 'none') {
           document.getElementById('interactivePane').style.display = 'block'
           document.getElementById('int-toggle-container').style.display = 'none'
           document.getElementById('InteractiveOpened').style.display = 'block'
@@ -49,54 +24,41 @@ function App(props) {
           document.getElementById('InteractiveOpened').style.display = 'none'
       }
   }
-  function onButtonClicked(area){
-    setMainViewInteraction(area.name);
-    //console.log(area.name);
-  }
 
-  useEffect(()=> {
-    if(shouldRender){
-      setMainViewInteraction(null);
-    }
-  })
+  //This is for passind area info from mapper to sim
+  //function onButtonClicked(area){
+  //  setMainViewInteraction(area.name);
+  //}
+
+ // useEffect(()=> {
+ //   if(shouldRender){
+  //    setMainViewInteraction(null);
+  //  }
+ // })
 
   return (
 
     <TransformWrapper
-    initialScale ={1}
-    initialPositionX={posx}
-    initialPositionY={posy}
-    >
-      {({ zoomIn, zoomOut, resetTransform, ...rest }) => (
+    initialScale ={.5}
+    initialPositionX={200}
+    initialPositionY={0}
+    minScale = {.5}
+    limitToBounds = {false}
+    centerOnInit = {true}
 
+    >
+      {({ resetTransform, ...rest }) => (
         <div className="App grid-container">
             <div className="int-toggle-container" id="int-toggle-container">
                 <ClosedDrawer onChange={() => hideHydrolic()} id="InteractiveClosed" />
             </div>
-            <div className="nav-toggle-container" id="nav-toggle-container">
-                <ClosedDrawer onChange={() => hideNavBar()} id="NavBarClosed" />
-            </div>
-            <div className="NavBar" id="navBar">
-                <NavButton onChange={() => setWideView()} tag="Wide View" />
-                <Slider onSlider={(i)=>setZoom(i)}></Slider>
-                <div className="button-grid-container">
-                  <ScrollButton onChange={()=>setPosx(posx + 2)} id='UP' />
-                  <ScrollButton onChange={()=>setPosx(posx - 2)} id='DOWN'/>
-                  <ScrollButton onChange={()=>setPosy(posy + 2)} id='LEFT'/>
-                  <ScrollButton onChange={()=>setPosy(posy - 2)} id='RIGHT'/>
-                </div>
-                <OpenedDrawer onChange={() => hideNavBar()} id="NavBarOpened" />
-            </div>
             <div className = "ViewPort">
+            <div className="tools">
+              <NavButton tag= "Reset View" transform = {() => resetTransform()}></NavButton>
+            </div>
               <TransformComponent>
-                  <Mapper Zoom={Zoom} posx={posx} posy={posy} id="mapper" />
-                  <div className="button-grid-container" id="buttonGridViewPort">
-                    <ScrollButton onChange={()=>setPosx(posx + 2)} id='UP' />
-                    <ScrollButton onChange={()=>setPosx(posx - 2)} id='DOWN'/>
-                    <ScrollButton onChange={()=>setPosy(posy + 2)} id='LEFT'/>
-                    <ScrollButton onChange={()=>setPosy(posy - 2)} id='RIGHT'/>
-                </div>
-              </TransformComponent>
+                  <Mapper id="mapper" />
+                </TransformComponent>
             </div>
             <div className='InteractivePane' id = 'interactivePane'>
               <AnimationPane />
diff --git a/src/Componets/AnimationPane.jsx b/src/Componets/AnimationPane.jsx
index b2e4eb4..5af7e13 100644
--- a/src/Componets/AnimationPane.jsx
+++ b/src/Componets/AnimationPane.jsx
@@ -23,7 +23,8 @@ const AnimationPane = (props) => {
     }
     useEffect(()=>{
         if(shouldRender){
-            console.log(props.buttonPressed + " yes ");
+            //console.log(props.buttonPressed);
+            //This is redacted for this build but this gets info on buttons if passed in
         }
     })
         return(
diff --git a/src/Componets/Mapper.jsx b/src/Componets/Mapper.jsx
index a7571d6..f8b90ba 100644
--- a/src/Componets/Mapper.jsx
+++ b/src/Componets/Mapper.jsx
@@ -1,5 +1,4 @@
-import { Hidden } from '@mui/material';
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import ImageMapper from 'react-img-mapper';
 import url from '../Assets/img.png';
 import area from '../Assets/MAP.json';
@@ -7,12 +6,6 @@ import area from '../Assets/MAP.json';
 
 const Mapper = (props) =>{
 
-  const [ WIDTH, setWidth] = useState((props.Zoom * 40) + 800);
-
-  useEffect(()=>{
-    setWidth((props.Zoom * 40) + 800)
-  })
-
   const URL = url;
   const MAP = {
       name: 'my-map',
@@ -21,17 +14,19 @@ const Mapper = (props) =>{
     return (
       <div id='map-container' style={{ 
         position: "relative",
-        left: `${props.posy}vw`,
-        top: `${props.posx}vh`,
+        width: '100%',
+        height: '100%',
         'zindex': '2',
       }}>
  <ImageMapper
         src = {URL} 
         map = {MAP} 
-        imgWidth = {3500}
+        imgWidth = {4200}
         responsive = {true}
-        parentWidth = {WIDTH}
-        onClick={(area) => {props.onButtonClicked(area)}}
+        imgheight = {3500}
+        parentWidth = {2000}
+        natural = {true}
+        onClick={(area) => {/*props.onButtonClicked(area)*/ console.log(area.name)}}
         />
       </div>
 
diff --git a/src/Componets/NavButton.jsx b/src/Componets/NavButton.jsx
index 8289ff5..706343b 100644
--- a/src/Componets/NavButton.jsx
+++ b/src/Componets/NavButton.jsx
@@ -1,15 +1,15 @@
+import zIndex from '@mui/material/styles/zIndex'
 import React from 'react'
 import "./Styles/Button.css"
 
 const NavButton = (props) => {
 
-    function Change(event) {
-        props.onChange();
-        console.log(props.tag)
-        };
+    function transform(event) {
+        props.transform()
+    };
     
         return(
-            <div onClick={(i)=>Change(i)} className='Button'>
+            <div onClick={(i)=> transform(i) } className='Button' style = {{position: 'absolute', zIndex: '1'}}>
             <p style={{ userSelect: 'none'}}>{props.tag}</p>
         </div>
         )

From eab9e8dfb39d929665dbe22ffa71a00c97638014 Mon Sep 17 00:00:00 2001
From: Brandon Ball <74022057+bhball22@users.noreply.github.com>
Date: Thu, 28 Apr 2022 16:12:55 -0500
Subject: [PATCH 6/6] Bug Fixes on Img-mapper

---
 src/App.css | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/App.css b/src/App.css
index 666a54c..d111f88 100644
--- a/src/App.css
+++ b/src/App.css
@@ -88,6 +88,10 @@
     left: 140px;
 }
 
+.transform-component-module_wrapper__1_Fgj{
+    overflow: visible !important;
+}
+
 #InteractiveOpened{
     position: fixed;
     z-index: 2;
@@ -102,5 +106,5 @@
 
 /*Not Ideal but can't figure out why height = 0 */ 
 #img-mapper{
-    height:1000px !important;
+    height:2343px !important;
 }
\ No newline at end of file