Edge status card

src/BFS/BFS.tsx

@@ -4,6 +4,7 @@ import Konva from 'konva';
 import IntroSection from '../shared/IntroSection/IntroSection';
 import Graph from './GraphSection/Graph'
 import NodeStatusCard from './NodeStatusCard/NodeStatusCard';
+import EdgeStatusCard from './EdgeStatusCard/EdgeStatusCard';
 import { useDispatch, useSelector } from "react-redux";
 import * as graphActionType from '../redux/BFS/store/graph/graphActionType';
 import { bfsRootReducerInterface } from "../redux/BFS/store/rootReducer";
@@ -19,7 +20,7 @@ const BFS: FunctionComponent = () => {
     const dispatch = useDispatch();
     const graph = useSelector((state: bfsRootReducerInterface) => state.graph);
 
-    const nodeStatusCardTransition = useTransition(graph.nodeStatusCardToggled, null, {
+    const statusCardTransition = useTransition(graph.nodeStatusCardToggled || graph.edgeStatusCardToggled, null, {
         from: { opacity: 0, transform: 'translate3d(0, -1rem, 0)' },
         enter: { opacity: 1, transform: 'translate3d(0, 0, 0)' },
         leave: { opacity: 0, transform: 'translate3d(0, -1rem, 0)' },
@@ -75,20 +76,26 @@ const BFS: FunctionComponent = () => {
 
                 <div className="search-status-stack-section">
 
-                    {nodeStatusCardTransition.map(({ item, key, props }) => {
+                    {statusCardTransition.map(({ item, key, props }) => {
                         return (
                             item &&
-                            <animated.div style={props} key={key}>
-                                <NodeStatusCard
-                                    onMouseEnterNeighbor={mouseOverNodeHandler}
-                                    onMouseLeaveNeighbor={mouseOutHandler}
-                                    onMouseEnterAvailableNeighbor={mouseOverNodeHandler}
-                                    onMouseLeaveAvailableNeighbor={mouseOutHandler}
-                                />
-                            </animated.div>
+                                <animated.div style={props} key={key}>
+                                    {graph.nodeStatusCardToggled && 
+                                    <NodeStatusCard
+                                        onMouseEnterNeighbor={mouseOverNodeHandler}
+                                        onMouseLeaveNeighbor={mouseOutHandler}
+                                        onMouseEnterAvailableNeighbor={mouseOverNodeHandler}
+                                        onMouseLeaveAvailableNeighbor={mouseOutHandler}
+                                    />}
+                                    {graph.edgeStatusCardToggled &&
+                                        <EdgeStatusCard
+                                        onMouseEnterNeighbor={mouseOverNodeHandler}
+                                        onMouseLeaveNeighbor={mouseOutHandler}
+                                    />
+                                    }
+                                </animated.div>     
                         );
                     })}
-
                 </div>
 
                 <div className="add-node-button">

src/BFS/EdgeStatusCard/EdgeNeighborList/EdgeNeighborList.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { Elevation } from '@rmwc/elevation';
+import { nodeListStateInterface } from '../../../redux/BFS/store/graph/Interfaces/nodeListStateInterface';
+import { EdgeListInterface } from '../../../redux/BFS/store/graph/Interfaces/EdgeListInterface';
+import { useTransition, animated } from 'react-spring';
+import { useSelector, useDispatch } from 'react-redux';
+import * as graphActionType from '../../../redux/BFS/store/graph/graphActionType';
+import { bfsRootReducerInterface } from '../../../redux/BFS/store/rootReducer';
+
+import '@rmwc/elevation/styles';
+
+export type EdgeNeighborListProps = {
+    edgeList: EdgeListInterface[],
+    nodeList: nodeListStateInterface[],
+    currentEdgeIndex: number,
+    onMouseEnter: (index: number) => void,
+    onMouseLeave: (index: number) => void
+}
+
+const EdgeNeighborList = (props: EdgeNeighborListProps) => {
+    const { edgeList, nodeList, currentEdgeIndex, onMouseEnter, onMouseLeave} = props;
+
+    const currentEdge = edgeList[currentEdgeIndex].edge;
+    const newNodeList = [nodeList[currentEdge[0]], nodeList[currentEdge[1]]];
+
+    const dispatch = useDispatch();
+
+    const transition = useTransition(newNodeList, node => node.index, {
+        from: { opacity: 0, transform: 'translate3d(0, 1rem, 0)' },
+        enter: { opacity: 1, transform: 'translate3d(0, 0, 0)' },
+        leave: { opacity: 0}
+    });
+
+    return (
+        <div className="neighbor-list">
+            {transition.map(({ item, key, props }) => {
+                const currentSelectedNodeIndex = nodeList.indexOf(item);
+                return (
+                    <animated.div style={props} key={key}>
+                        <Elevation
+                            style={{
+                                paddingTop: '1%',
+                                backgroundColor: 'white',
+                                color: 'black'
+                            }}
+                            key={key}
+                            z={2}
+                            onMouseEnter={() => { onMouseEnter(currentSelectedNodeIndex) }}
+                            onMouseLeave={() => { onMouseLeave(currentSelectedNodeIndex) }}
+                            onClick={() => { dispatch({ type: graphActionType.CLICK_EXISTING_NEIGHBOR, payload: { neighborIndex: currentSelectedNodeIndex } }) }}
+                            className="neighbor-node"
+                        >
+                            <p>{currentSelectedNodeIndex}</p>
+                        </Elevation>
+                    </animated.div>
+                );
+            })
+            }
+        </div>
+    );
+}
+
+export default EdgeNeighborList;

src/BFS/EdgeStatusCard/EdgeStatusCard.tsx

@@ -0,0 +1,58 @@
+import React, { useRef } from 'react';
+import { Elevation } from '@rmwc/elevation';
+import EdgeStatusTitle from './EdgeStatusTitle/EdgeStatusTitle';
+import EdgeNeihborList from './EdgeNeighborList/EdgeNeighborList'
+import { Button } from '@rmwc/button';
+import * as graphActionType from '../../redux/BFS/store/graph/graphActionType';
+
+import '@rmwc/elevation/styles';
+import '@rmwc/button/styles';
+import { useSelector, useDispatch } from 'react-redux';
+import { bfsRootReducerInterface } from '../../redux/BFS/store/rootReducer';
+import { CurrentPageContext } from '../../Context/CurrentPageContext';
+
+export type edgeStatusCardProps = {
+    onMouseEnterNeighbor: (index: number) => void,
+    onMouseLeaveNeighbor: (index: number) => void
+}
+
+const EdgeStatusCard = (props: edgeStatusCardProps) => {
+    const {onMouseEnterNeighbor, onMouseLeaveNeighbor} = props;
+
+    const graph = useSelector((state: bfsRootReducerInterface) => state.graph);
+    const buttonRef = useRef() as React.RefObject<HTMLButtonElement>;
+    const dispatch = useDispatch();
+
+    return (
+        <div className="node-status-section">
+            <Elevation className='node-status-card' z={3} height={10}>
+
+                <EdgeStatusTitle
+                    currentEdgeIndex={graph.currentEdgeIndex}
+                    backgroundColor={graph.clickedFill}
+                    ref={buttonRef}
+                />
+
+                <div className="node-status-card-content">
+                    <div className='node-status-card-neighbor-section'>
+                        <EdgeNeihborList
+                            edgeList={graph.edgeList}
+                            nodeList={graph.nodeList}
+                            currentEdgeIndex={graph.currentEdgeIndex}
+                            onMouseEnter={onMouseEnterNeighbor}
+                            onMouseLeave={onMouseLeaveNeighbor}
+                        />
+                    </div>
+
+                </div>
+
+                <div className="node-status-card-manipulation">
+                    <Button label='delete' danger onClick={() => dispatch({ type: graphActionType.DELETE_EDGE, payload: { index: graph.currentEdgeIndex } })} />
+                </div>
+
+            </Elevation>
+        </div>
+    )
+}
+
+export default EdgeStatusCard;

src/BFS/EdgeStatusCard/EdgeStatusTitle/EdgeStatusTitle.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Button } from '@rmwc/button';
+
+import '@rmwc/button/styles';
+
+export type EdgeStatusTitleProps = {
+    currentEdgeIndex: number,
+    backgroundColor: string,
+}
+
+const NodeStatusTitle = React.forwardRef((props: EdgeStatusTitleProps, ref?: React.Ref<HTMLButtonElement>) => {
+    const { currentEdgeIndex,
+        backgroundColor,
+        } = props;
+
+    return (
+        <React.Fragment>
+            <div className="node-status-card-title" style={{ backgroundColor: backgroundColor }}>
+                <h2 style={{ wordSpacing: '-5px' }}>{`edge ${currentEdgeIndex}`}</h2>
+            </div>
+
+            <div className='neighbor-title'>
+                <h4 style={{ marginTop: '0.4rem' }}>neighbor</h4>
+            </div>
+        </React.Fragment>
+    );
+})
+
+export default NodeStatusTitle;

src/BFS/GraphSection/Edges/Edge.tsx

@@ -5,6 +5,7 @@ import { nodeListStateInterface } from '../../../redux/BFS/store/graph/Interface
 interface EdgeInterface {
     edge: number[],
     nodeListState: nodeListStateInterface[]
+    onClick: ()=>void
 }
 
 const Edge: FunctionComponent<EdgeInterface> = ({ edge, nodeListState }) => {

src/BFS/GraphSection/Edges/EdgeList.tsx

@@ -1,13 +1,42 @@
-import React from 'react';
-import Edge from './Edge';
-import { useSelector } from 'react-redux';
+import React, { useRef, useState } from 'react';
 import { Line } from 'react-konva';
-import { bfsRootReducerInterface } from '../../../redux/BFS/store/rootReducer';
 import { useTransition, animated } from '@react-spring/konva';
+import { useSelector, useDispatch } from 'react-redux';
+import { bfsRootReducerInterface } from '../../../redux/BFS/store/rootReducer';
+import * as graphActionType from '../../../redux/BFS/store/graph/graphActionType';
+import Konva from 'konva';
 
 const EdgeList = () => {
     const edgeList = useSelector((state: bfsRootReducerInterface) => state.graph.edgeList);
     const nodeList = useSelector((state: bfsRootReducerInterface) => state.graph.nodeList);
+    const dispatch = useDispatch();
+
+    const lineRef = useRef() as React.MutableRefObject<Konva.Line>;
+
+    const onMouseEnterHandler = (index: number) => {
+        dispatch({ type: graphActionType.MOUSE_ENTER_EDGE, payload: { index, ref: lineRef } });
+
+        setTimeout(() => {
+            if (lineRef.current) {
+                lineRef.current.to({
+                    shadowBlur: 7,
+                    duration: 0.1
+                });
+            }
+        }, 0)
+
+    }
+
+    const onMouseLeaveHandler = (index: number) => {
+        if (lineRef.current) {
+            lineRef.current.to({
+                shadowBlur: 2,
+                duration: 0.15
+            });
+        }
+
+        dispatch({ type: graphActionType.MOUSE_LEAVE_EDGE, payload: { index } });
+    }
 
     // const transition = useTransition(edgeList, edge => edge.key, {
     //     from: edge => [{}],
@@ -17,7 +46,7 @@ const EdgeList = () => {
     return (
         <React.Fragment>
             {edgeList.length !== 0 &&
-                edgeList.map((edge) => {
+                edgeList.map((edge, index) => {
                     let locationVector: number[] = [];
                     if (nodeList[edge.edge[0]] && nodeList[edge.edge[1]]) {
                         const x1 = nodeList[edge.edge[0]].xPosition;
@@ -33,6 +62,11 @@ const EdgeList = () => {
                             points={locationVector}
                             stroke='black'
                             strokeWidth={4}
+                            shadowBlur={2}
+                            onClick={() => dispatch({ type: graphActionType.CLICK_EDGE, payload: { index } })}
+                            onMouseEnter={() => onMouseEnterHandler(index)}
+                            onMouseLeave={() => onMouseLeaveHandler(index)}
+                            ref={edgeList[index].ref}
                         />
                     );
                 })

src/BFS/GraphSection/Graph.tsx

@@ -21,6 +21,7 @@ const Graph: React.FunctionComponent<GraphInterface> = ({
 
     const dispatch = useDispatch();
     const nodeList = useSelector((state: bfsRootReducerInterface) => state.graph.nodeList);
+    console.log(nodeList);
     const store = useStore();
 
     return (

src/redux/BFS/store/graph/Interfaces/EdgeListInterface.ts

@@ -1,4 +1,7 @@
+import Konva from 'konva';
+
 export interface EdgeListInterface {
     key: number,
-    edge: number[]
+    edge: number[],
+    ref: React.MutableRefObject<Konva.Line> | null
 }

src/redux/BFS/store/graph/PresetValues/presetEdges.ts

@@ -2,58 +2,72 @@ import { EdgeListInterface } from '../Interfaces/EdgeListInterface';
 export const presetEdges: EdgeListInterface[] = [
     {
         key: 0,
-        edge:[6, 0]
+        edge:[6, 0],
+        ref: null
     },
     {
         key: 1,
-        edge: [12, 0]
+        edge: [12, 0],
+        ref: null
     },
     {
         key: 2,
-        edge: [6, 2]
+        edge: [6, 2],
+        ref: null
     },
     {
         key: 3,
-        edge: [2, 5]
+        edge: [2, 5],
+        ref: null
     },
     {
         key: 4,
-        edge: [12, 4]
+        edge: [12, 4],
+        ref: null
     },
     {
         key: 5,
-        edge: [5, 10]
+        edge: [5, 10],
+        ref: null
     },
     {
         key: 6,
-        edge: [13, 10]
+        edge: [13, 10],
+        ref: null
     },
     {
         key: 7,
-        edge: [4, 10]
+        edge: [4, 10],
+        ref: null
     },
     {
         key: 8,
-        edge: [8, 13]
+        edge: [8, 13],
+        ref: null
     },
     {
         key: 9,
-        edge: [9, 13]
+        edge: [9, 13],
+        ref: null
     },
     {
         key: 10,
-        edge: [13, 11]
+        edge: [13, 11],
+        ref: null
     },
     {
         key: 11,
-        edge: [11, 7]
+        edge: [11, 7],
+        ref: null
     },
     {
         key: 12,
-        edge: [11, 1]
+        edge: [11, 1],
+        ref: null
     },
     {
         key: 13,
-        edge: [1, 3]
+        edge: [1, 3],
+        ref: null
     }
 ]