(add) Finished proper dispatch which makes the onHover feature compatible for both Recoil and non-recoil applications

Co-authored-By: Sanjay Lavingia <[email protected]>

Author: VNguyenCode

src/app/components/ComponentMap.tsx

@@ -151,12 +151,12 @@ export default function ComponentMap({
                             node.data.isExpanded = !node.data.isExpanded;
                             forceUpdate();
                           }}
+                          
                           onMouseEnter={()=> {
-
-                            if(node.data.recoilDomNode){
+                            if(Object.keys(node.data.recoilDomNode).length > 0){
                               dispatch(onHover(node.data.recoilDomNode[node.data.name]))
                             } else {
-                              dispatch(onHover(rtid))
+                              dispatch(onHover(node.data.rtid))
                             }
 
                           }

src/backend/index.ts

@@ -59,7 +59,8 @@ window.addEventListener('message', ({ data: { action, payload } }: MsgData) => {
       mode.paused = payload;
       break;
     case 'onHover':
-
+      console.log(payload);
+      
       if(Array.isArray(payload)){ 
         for (let i=0; i<payload.length;i++){
           let element = document.getElementById(payload[i])
@@ -70,6 +71,14 @@ window.addEventListener('message', ({ data: { action, payload } }: MsgData) => {
                 }, 500)
               }
         }
+      } else {
+        let element = document.getElementById(payload)
+        if (element !== null) {
+          element.style.backgroundColor = '#C0D9D9'; 
+          setTimeout( () => {
+            element.style.backgroundColor = "";
+          }, 500)
+        }
       }
 
       // if (payload !== null) {