Skip to content

Commit ed8db3a

Browse files
VNguyenCodeVNguyenCode
committed
(add) Merged from a different local branch to receive functionality of onMouseEnter and onMouseLeave
Co-authored-by: Sanjay Lavingia <sanjaylavingia@gmail.com>
2 parents bf3222f + 32527d4 commit ed8db3a

File tree

7 files changed

+54
-31
lines changed

7 files changed

+54
-31
lines changed

‎src/app/actions/actions.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,4 +82,9 @@ export const onHover = (rtid) => ({
8282
type: types.ON_HOVER,
8383
//the payload should be something to relate the component we're hovering and highlight that component on the DOM
8484
payload: rtid
85+
})
86+
87+
export const onHoverExit = (rtid) => ({
88+
type: types.ON_HOVER_EXIT,
89+
payload: rtid
8590
})

‎src/app/components/AtomsRelationship.tsx‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { Cluster, hierarchy } from '@visx/hierarchy';
55
import { LinkVertical } from '@visx/shape';
66
import { LinearGradient } from '@visx/gradient';
77
import { StateRouteProps} from './StateRoute'
8-
import { onHover } from '../actions/actions'
8+
import { onHover, onHoverExit } from '../actions/actions'
99
import { useStoreContext } from '../store'
1010
import Legend from './AtomsRelationshipLegend'
1111

@@ -159,6 +159,11 @@ function Node({ node, snapshots, dispatch, bothObj}) {
159159
r={12}
160160
fill={isParent ? orange : blue}
161161
stroke={isParent ? orange : blue}
162+
onMouseLeave={()=> {
163+
for (let i=0; i<bothObj[node.data.name].length; i++){
164+
dispatch(onHoverExit(snapshots[0].recoilDomNode[bothObj[node.data.name][i]]))
165+
}
166+
}}
162167
onMouseEnter={()=> {
163168
for (let i=0; i<bothObj[node.data.name].length; i++){
164169
dispatch(onHover(snapshots[0].recoilDomNode[bothObj[node.data.name][i]]))
@@ -224,6 +229,11 @@ function SelectorNode({ node, snapshots, dispatch, bothObj}) {
224229
r={12}
225230
fill={selectWhite}
226231
stroke={selectWhite}
232+
onMouseLeave={()=> {
233+
for (let i=0; i<bothObj[node.data.name].length; i++){
234+
dispatch(onHoverExit(snapshots[0].recoilDomNode[bothObj[node.data.name][i]]))
235+
}
236+
}}
227237
onMouseEnter={()=> {
228238
for (let i=0; i<bothObj[node.data.name].length; i++){
229239
dispatch(onHover(snapshots[0].recoilDomNode[bothObj[node.data.name][i]]))

‎src/app/components/ComponentMap.tsx‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { pointRadial } from 'd3-shape';
1111
import useForceUpdate from './useForceUpdate';
1212
import LinkControls from './LinkControls';
1313
import getLinkComponent from './getLinkComponent';
14-
import { onHover } from '../actions/actions'
14+
import { onHover, onHoverExit } from '../actions/actions'
1515
import { useStoreContext } from '../store'
1616

1717
const defaultMargin = { top: 30, left: 30, right: 30, bottom: 70 };
@@ -130,7 +130,6 @@ export default function ComponentMap({
130130
fill="url('#links-gradient')"
131131
onClick={() => {
132132
node.data.isExpanded = !node.data.isExpanded;
133-
console.log('node',node);
134133
forceUpdate();
135134
}}
136135
/>
@@ -151,14 +150,19 @@ export default function ComponentMap({
151150
node.data.isExpanded = !node.data.isExpanded;
152151
forceUpdate();
153152
}}
154-
153+
onMouseLeave={()=> {
154+
if(Object.keys(node.data.recoilDomNode).length > 0){
155+
dispatch(onHoverExit(node.data.recoilDomNode[node.data.name]))
156+
} else {
157+
dispatch(onHoverExit(node.data.rtid))
158+
}
159+
}}
155160
onMouseEnter={()=> {
156161
if(Object.keys(node.data.recoilDomNode).length > 0){
157162
dispatch(onHover(node.data.recoilDomNode[node.data.name]))
158163
} else {
159164
dispatch(onHover(node.data.rtid))
160-
}
161-
165+
}
162166
}
163167
/>
164168
)}

‎src/app/constants/actionTypes.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,3 +14,4 @@ export const SET_TAB = 'SET_TAB';
1414
export const DELETE_TAB = 'DELETE_TAB';
1515
export const SLIDER_ZERO = 'SLIDER_ZERO';
1616
export const ON_HOVER = 'ON_HOVER';
17+
export const ON_HOVER_EXIT = 'ON_HOVER_EXIT';

‎src/app/reducers/mainReducer.js‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,15 @@ export default (state, action) => produce(state, draft => {
3939
};
4040

4141
switch (action.type) {
42+
case types.ON_HOVER_EXIT: {
43+
port.postMessage({
44+
action: 'onHoverExit',
45+
payload: action.payload,
46+
tabId: currentTab,
47+
})
48+
break;
49+
}
50+
4251
case types.ON_HOVER: {
4352
port.postMessage({
4453
action: 'onHover',
@@ -199,7 +208,6 @@ export default (state, action) => produce(state, draft => {
199208
break;
200209
}
201210
case types.INITIAL_CONNECT: {
202-
console.log(action.paylooad)
203211
const { payload } = action;
204212
Object.keys(payload).forEach(tab => {
205213
// check if tab exists in memory

‎src/backend/index.ts‎

Lines changed: 17 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ function getRouteURL(node: SnapshotNode): string {
4444

4545
// * Event listener for time-travel actions
4646
window.addEventListener('message', ({ data: { action, payload } }: MsgData) => {
47+
console.log('payload',action)
4748
switch (action) {
4849
case 'jumpToSnap':
4950
timeJump(payload, true); // * This sets state with given payload
@@ -58,43 +59,35 @@ window.addEventListener('message', ({ data: { action, payload } }: MsgData) => {
5859
case 'setPause':
5960
mode.paused = payload;
6061
break;
61-
case 'onHover':
62-
console.log(payload);
63-
62+
case 'onHover':
6463
if(Array.isArray(payload)){
6564
for (let i=0; i<payload.length;i++){
6665
let element = document.getElementById(payload[i])
6766
if (element !== null) {
6867
element.style.backgroundColor = '#C0D9D9';
69-
setTimeout( () => {
70-
element.style.backgroundColor = "";
71-
}, 500)
7268
}
7369
}
7470
} else {
7571
let element = document.getElementById(payload)
7672
if (element !== null) {
7773
element.style.backgroundColor = '#C0D9D9';
78-
setTimeout( () => {
79-
element.style.backgroundColor = "";
80-
}, 500)
8174
}
8275
}
83-
84-
// if (payload !== null) {
85-
// let element = document.getElementById(payload)
86-
87-
// if (element !== null) {
88-
89-
// element.style.backgroundColor = '#C0D9D9';
90-
// setTimeout( () => {
91-
// element.style.backgroundColor = "";
92-
// }, 500)
93-
// }
94-
95-
// // console.log('WE MADE IT ALL THE WAY FROM THE FRONTEND! HERE\'S THE PAYLOAD:', payload);
96-
// // console.log(element);
97-
// }
76+
break;
77+
case 'onHoverExit':
78+
if(Array.isArray(payload)){
79+
for (let i=0; i<payload.length;i++){
80+
let element = document.getElementById(payload[i])
81+
if (element !== null) {
82+
element.style.backgroundColor = '';
83+
}
84+
}
85+
} else {
86+
let element = document.getElementById(payload)
87+
if (element !== null) {
88+
element.style.backgroundColor = '';
89+
}
90+
}
9891
break;
9992
default:
10093
break;

‎src/extension/contentScript.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,8 @@ chrome.runtime.onMessage.addListener(request => { // seems to never fire
3636
case 'onHover':
3737
window.postMessage(request, '*');
3838
default:
39+
case 'onHoverExit':
40+
window.postMessage(request, '*');
3941
break;
4042
}
4143
return true; // attempt to fix port closing console error

0 commit comments

Comments
 (0)