(add) Merged from a different local branch to receive functionality of onMouseEnter and onMouseLeave

VNguyenCode · VNguyenCode · commit ed8db3a9074d · 2020-10-19T13:12:26.000-07:00
Co-authored-by: Sanjay Lavingia &lt;sanjaylavingia@gmail.com&gt;
diff --git a/src/app/actions/actions.ts b/src/app/actions/actions.ts
@@ -82,4 +82,9 @@ export const onHover = (rtid) => ({
   type: types.ON_HOVER, 
   //the payload should be something to relate the component we're hovering and highlight that component on the DOM
   payload: rtid
+})
+
+export const onHoverExit = (rtid) => ({
+  type: types.ON_HOVER_EXIT,
+  payload: rtid
 })
diff --git a/src/app/components/AtomsRelationship.tsx b/src/app/components/AtomsRelationship.tsx
@@ -5,7 +5,7 @@ import { Cluster, hierarchy } from '@visx/hierarchy';
 import { LinkVertical } from '@visx/shape';
 import { LinearGradient } from '@visx/gradient';
 import { StateRouteProps} from './StateRoute'
-import { onHover } from '../actions/actions'
+import { onHover, onHoverExit } from '../actions/actions'
 import { useStoreContext } from '../store'
 import Legend from './AtomsRelationshipLegend'
 
@@ -159,6 +159,11 @@ function Node({ node, snapshots, dispatch, bothObj}) {
           r={12}
           fill={isParent ? orange : blue}
           stroke={isParent ? orange : blue}
+          onMouseLeave={()=> {
+            for (let i=0; i<bothObj[node.data.name].length; i++){
+              dispatch(onHoverExit(snapshots[0].recoilDomNode[bothObj[node.data.name][i]]))
+            }
+          }}
           onMouseEnter={()=> {
             for (let i=0; i<bothObj[node.data.name].length; i++){
               dispatch(onHover(snapshots[0].recoilDomNode[bothObj[node.data.name][i]]))
@@ -224,6 +229,11 @@ function SelectorNode({ node, snapshots, dispatch, bothObj}) {
           r={12}
           fill={selectWhite}
           stroke={selectWhite}
+          onMouseLeave={()=> {
+            for (let i=0; i<bothObj[node.data.name].length; i++){
+              dispatch(onHoverExit(snapshots[0].recoilDomNode[bothObj[node.data.name][i]]))
+            }
+          }}
           onMouseEnter={()=> {
             for (let i=0; i<bothObj[node.data.name].length; i++){
               dispatch(onHover(snapshots[0].recoilDomNode[bothObj[node.data.name][i]]))
diff --git a/src/app/components/ComponentMap.tsx b/src/app/components/ComponentMap.tsx
@@ -11,7 +11,7 @@ import { pointRadial } from 'd3-shape';
 import useForceUpdate from './useForceUpdate';
 import LinkControls from './LinkControls';
 import getLinkComponent from './getLinkComponent';
-import { onHover } from '../actions/actions'
+import { onHover, onHoverExit } from '../actions/actions'
 import { useStoreContext } from '../store'
 
 const defaultMargin = { top: 30, left: 30, right: 30, bottom: 70 };
@@ -130,7 +130,6 @@ export default function ComponentMap({
                           fill="url('#links-gradient')"
                           onClick={() => {
                             node.data.isExpanded = !node.data.isExpanded;
-                            console.log('node',node);
                             forceUpdate();
                           }}
                         />
@@ -151,14 +150,19 @@ export default function ComponentMap({
                             node.data.isExpanded = !node.data.isExpanded;
                             forceUpdate();
                           }}
-                          
+                          onMouseLeave={()=> {
+                            if(Object.keys(node.data.recoilDomNode).length > 0){
+                              dispatch(onHoverExit(node.data.recoilDomNode[node.data.name]))
+                            } else {
+                              dispatch(onHoverExit(node.data.rtid))
+                            }
+                          }}
                           onMouseEnter={()=> {
                             if(Object.keys(node.data.recoilDomNode).length > 0){
                               dispatch(onHover(node.data.recoilDomNode[node.data.name]))
                             } else {
                               dispatch(onHover(node.data.rtid))
-                            }
-                                                    
+                            }   
                           }
                         />
                       )}
diff --git a/src/app/constants/actionTypes.ts b/src/app/constants/actionTypes.ts
@@ -14,3 +14,4 @@ export const SET_TAB = 'SET_TAB';
 export const DELETE_TAB = 'DELETE_TAB';
 export const SLIDER_ZERO = 'SLIDER_ZERO';
 export const ON_HOVER = 'ON_HOVER'; 
+export const ON_HOVER_EXIT = 'ON_HOVER_EXIT'; 
diff --git a/src/app/reducers/mainReducer.js b/src/app/reducers/mainReducer.js
@@ -39,6 +39,15 @@ export default (state, action) => produce(state, draft => {
   };
 
   switch (action.type) {
+    case types.ON_HOVER_EXIT: {
+      port.postMessage({
+        action: 'onHoverExit',
+        payload: action.payload,
+        tabId: currentTab,
+      })
+      break; 
+    }
+
     case types.ON_HOVER: {
       port.postMessage({
         action: 'onHover',
@@ -199,7 +208,6 @@ export default (state, action) => produce(state, draft => {
       break;
     }
     case types.INITIAL_CONNECT: {
-      console.log(action.paylooad)
       const { payload } = action;
       Object.keys(payload).forEach(tab => {
         // check if tab exists in memory
diff --git a/src/backend/index.ts b/src/backend/index.ts
@@ -44,6 +44,7 @@ function getRouteURL(node: SnapshotNode): string {
 
 // * Event listener for time-travel actions
 window.addEventListener('message', ({ data: { action, payload } }: MsgData) => {
+  console.log('payload',action)
   switch (action) {
     case 'jumpToSnap':
       timeJump(payload, true); // * This sets state with given payload
@@ -58,43 +59,35 @@ window.addEventListener('message', ({ data: { action, payload } }: MsgData) => {
     case 'setPause':
       mode.paused = payload;
       break;
-    case 'onHover':
-      console.log(payload);
-      
+    case 'onHover':    
       if(Array.isArray(payload)){ 
         for (let i=0; i<payload.length;i++){
           let element = document.getElementById(payload[i])
           if (element !== null) {
                 element.style.backgroundColor = '#C0D9D9'; 
-                setTimeout( () => {
-                  element.style.backgroundColor = "";
-                }, 500)
               }
         }
       } else {
         let element = document.getElementById(payload)
         if (element !== null) {
           element.style.backgroundColor = '#C0D9D9'; 
-          setTimeout( () => {
-            element.style.backgroundColor = "";
-          }, 500)
         }
       }
-
-      // if (payload !== null) {
-      //   let element = document.getElementById(payload)
-
-      //   if (element !== null) {
-
-      //     element.style.backgroundColor = '#C0D9D9'; 
-      //     setTimeout( () => {
-      //       element.style.backgroundColor = "";
-      //     }, 500)
-      //   }
-      
-      //   // console.log('WE MADE IT ALL THE WAY FROM THE FRONTEND! HERE\'S THE PAYLOAD:', payload);
-      //   // console.log(element);
-      // }
+      break;
+    case 'onHoverExit': 
+        if(Array.isArray(payload)){ 
+        for (let i=0; i<payload.length;i++){
+          let element = document.getElementById(payload[i])
+          if (element !== null) {
+                element.style.backgroundColor = ''; 
+              }
+        }
+      } else {
+        let element = document.getElementById(payload)
+        if (element !== null) {
+          element.style.backgroundColor = ''; 
+        }
+      }
       break;
     default:
       break;
diff --git a/src/extension/contentScript.ts b/src/extension/contentScript.ts
@@ -36,6 +36,8 @@ chrome.runtime.onMessage.addListener(request => { // seems to never fire
     case 'onHover': 
       window.postMessage(request, '*'); 
     default:
+    case 'onHoverExit': 
+      window.postMessage(request, '*'); 
       break;
   }
   return true; // attempt to fix port closing console error

Original file line number	Diff line number	Diff line change
`@@ -36,6 +36,8 @@ chrome.runtime.onMessage.addListener(request => { // seems to never fire`
`36`	`36`	`case 'onHover':`
`37`	`37`	`window.postMessage(request, '*');`
`38`	`38`	`default:`
	`39`	`+ case 'onHoverExit':`
	`40`	`+ window.postMessage(request, '*');`
`39`	`41`	`break;`
`40`	`42`	`}`
`41`	`43`	`return true; // attempt to fix port closing console error`