Merge pull request #5 from oslabs-beta/freya/stroke

Freya/stroke

Author: FreyaWu

src/app/components/ComponentMap.tsx

@@ -196,6 +196,7 @@ export default function ComponentMap({
                   const handleMouseOver = event => {
                     () => dispatch(onHover(node.data.rtid));
                     console.log('line 197', event.target.ownerSVGElement);
+                    console.log('line 199: ', node);
                     const coords = localPoint(
                       event.target.ownerSVGElement,
                       event,
@@ -230,10 +231,15 @@ export default function ComponentMap({
                           width={width}
                           y={-height / 2}
                           x={-width / 2}
+                          //node.children = if node has children
                           fill={node.children ? '#161521' : '#62d6fb'}
-                          stroke={node.data.isExpanded ? '#95fb62' : '#a69ff5'} // if already child in fill do not all stroke to change change color later but it works!!!!!!!!
+                          //node.data.isExpanded = if node is collapsed
+                          // stroke={(node.data.isExpanded && node.child) ? '#95fb62' : '#a69ff5'} => node.child is gone when clicked, even if it actually has children. Maybe better call node.children => node.leaf
+                          stroke={(node.data.isExpanded && node.data.children.length > 0) ? '#95fb62' : '#a69ff5'}
+
+                          // if already child in fill do not all stroke to change change color later but it works!!!!!!!!
                           strokeWidth={3}
-                          strokeDasharray={node.children ? '0' : '1,2'}
+                          // strokeDasharray={node.children ? '0' : '2,2'}
                           strokeOpacity="1"
                           rx={node.children ? 4 : 10}
                           onDoubleClick={() => {

src/app/reducers/mainReducer.js

@@ -259,6 +259,7 @@ export default (state, action) => produce(state, draft => {
     }
     case types.NEW_SNAPSHOTS: {
       const { payload } = action;
+      // console.log("in NEW_SANPSHOTS", payload);
       Object.keys(tabs).forEach(tab => {
         if (!payload[tab]) {
           delete tabs[tab];

src/backend/linkFiber.ts

@@ -49,9 +49,13 @@ const recoilDomNode = {};
 
 // Simple check for whether our target app uses Recoil
 // can these be regular
-if (window.$recoilDebugStates) {
-  isRecoil = true;
-}
+
+
+// if (window.$recoilDebugStates) {
+//   isRecoil = true;
+// }
+
+
 // This is deprecated Recoil code.  Recoil as of 01-03-2021
 // does not work well with Reactime.  Leaving any Recoil
 // code in codebase to assist with Recoil implementations
@@ -91,7 +95,7 @@ function sendSnapshot(snap: Snapshot, mode: Mode): void {
   const payload = snap.tree.cleanTreeCopy();
   // if it's Recoil - run different actions?
   if (isRecoil) {
-      console.log('This is recoil and we\'re in sendSnapshot!');
+    console.log('This is recoil and we\'re in sendSnapshot!');
     // getRecoilState()
     payload.atomsComponents = atomsComponents;
     payload.atomSelectors = atomsSelectors;
@@ -403,8 +407,8 @@ function createTree(
           //  remove existing rtid before adding a new one
           if (pointer.stateNode.classList.length > 0) {
             const lastClass = pointer.stateNode.classList[
-                pointer.stateNode.classList.length - 1
-              ];
+              pointer.stateNode.classList.length - 1
+            ];
             if (lastClass.includes('fromLinkFiber')) {
               pointer.stateNode.classList.remove(lastClass);
             }
@@ -425,8 +429,8 @@ function createTree(
         //  remove existing rtid before adding a new one
         if (currentFiber.child.stateNode.classList.length > 0) {
           const lastClass = currentFiber.child.stateNode.classList[
-              currentFiber.child.stateNode.classList.length - 1
-            ];
+            currentFiber.child.stateNode.classList.length - 1
+          ];
           if (lastClass.includes('fromLinkFiber')) {
             currentFiber.child.stateNode.classList.remove(lastClass);
           }
@@ -497,7 +501,8 @@ export default (snap: Snapshot, mode: Mode): (() => void) => {
       () => {
         console.log('how many times in line 497');
         console.log('THIS IS SNAP AND MODEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE', snap, mode);
-        updateSnapShotTree(snap, mode); },
+        updateSnapShotTree(snap, mode);
+      },
       70
     );
     document.addEventListener('visibilitychange', onVisibilityChange);