disconnecting modules implemented, style needs refine

.gitignore

@@ -8,4 +8,5 @@ build
 *.swp
 src/backend/public
 soundcool.db
-dist/
+dist/
+src/backend/uploads/sounds

src/frontend/package.json

@@ -46,6 +46,7 @@
     "redux": "^4.0.4",
     "redux-thunk": "^2.3.0",
     "socket.io-client": "^2.3.0",
+    "styled-components": "^5.1.1",
     "universal-cookie": "^4.0.3"
   },
   "babel": {

src/frontend/src/components/projectEditor/Components/WithHeader.jsx

@@ -1,4 +1,5 @@
 import React from "react";
+import ReactTooltip from "react-tooltip";
 import { connect } from "react-redux";
 import { Collapse } from "reactstrap";
 import { FaMinus, FaTimes, FaArrowsAlt } from "react-icons/fa";
@@ -150,22 +151,34 @@ const WithHeader = ({
       padding: "0px",
       border: "0px"
     };
-    if (inNode[0]) {
+    if (inNode[0] && inNode[0].length > 0) {
       let backgroundColor = getCssPropById(inNode[0][0], "background-color");
-      style = { ...style, backgroundColor };
-      // console.log(style);
+      style = {
+        ...style,
+        backgroundColor
+      };
     }
     inButton = (
       <button
         id="inButton"
         className="btn btn-light btn-sm m-1 text-center"
-        style={style}
         onClick={() => {
-          dispatch({
-            type: "CONNECTING_BLOCK",
-            node: "nowIn",
-            value: [name, "0", id, audioObj]
-          });
+          if (inNode[0] && inNode[0].length > 0) {
+            dispatch({
+              type: "DISCONNECTING_BLOCK",
+              node: "nowIn",
+              value: [name, "0", id, audioObj]
+            });
+          } else {
+            dispatch({
+              type: "CONNECTING_BLOCK",
+              node: "nowIn",
+              value: [name, "0", id, audioObj]
+            });
+          }
+        }}
+        onMouseEnter={() => {
+          console.log("try hover");
         }}
         onContextMenu={e => {
           e.preventDefault();
@@ -174,8 +187,9 @@ const WithHeader = ({
             setCssPropById({ id: inNode[0][0], prop: "boxShadow", temp: true });
           }
         }}
+        style={style}
       >
-        <div>{inNode[0] === undefined ? "In" : inNode[0][0]}</div>
+        <div>{inNode[0] && inNode[0].length > 0 ? inNode[0][0] : "In"}</div>
       </button>
     );
   }
@@ -206,9 +220,10 @@ const WithHeader = ({
     outButton = <span />;
   } else {
     let style = outId === id ? { ...circleStyle } : { ...style1 };
-    if (outNode[0]) {
-      let backgroundColor = getCssPropById(outNode[0][0], "background-color");
-      style = { ...style, backgroundColor };
+    if (outNode[0] && outNode[0].length > 0) {
+      let backgroundColor = "black";
+      let color = "white";
+      style = { ...style, backgroundColor, color };
     }
     outButton = (
       <button
@@ -235,7 +250,7 @@ const WithHeader = ({
           });
         }}
       >
-        <div>{outNode[0] === undefined ? "Out" : outNode[0][0]}</div>
+        <div>{outNode[0] && outNode[0].length > 0 ? outNode[0][0] : "Out"}</div>
       </button>
     );
   }

src/frontend/src/reducers/block.js

@@ -1,4 +1,5 @@
 const block = (state, action) => {
+  let nameOut, idOut, portOut, nameIn, idIn, portIn;
   switch (action.type) {
     case "ADD_BLOCK":
       return {
@@ -55,24 +56,19 @@ const block = (state, action) => {
           : n;
       });
       return { ...state, inNode: newInNode, outNode: newOutNode };
-
     case "CONNECTING_BLOCK":
-      // The name of in and out blocks
-      let [nameIn, nameOut] = [action.nowIn[0], action.nowOut[0]];
-      // The numbering of in/out port (some blocks will have multiple in/out)
-      let [indexIn, indexOut] = [action.nowIn[1], action.nowOut[1]];
-      // The id of the blocks that we are connecting
-      let [idIn, idOut] = [action.nowIn[2], action.nowOut[2]];
-      // eslint-disable-next-line
-      let [audioObjIn, audioObjOut] = [action.nowIn[3], action.nowOut[3]];
+      [nameIn, portIn, idIn] = [...action.nowIn];
+      let audioObjIn = action.nowIn[3];
+      [nameOut, portOut, idOut] = [...action.nowOut];
+
       if (state.id === idIn) {
         if (state.id === idOut) {
-          // don't connect to itself, except special case (Routing)
+          // don't connect to itself, except special case (Routing), TBD
           return state;
         } else {
           // if this is the nowin node, we shoud update its inNode information
           let newInNode = [...state.inNode];
-          newInNode[indexIn] = [nameOut, idOut];
+          newInNode[portIn] = [nameOut, idOut, portOut];
           return { ...state, inNode: newInNode };
         }
       } else {
@@ -81,19 +77,34 @@ const block = (state, action) => {
           if (state.audioObj !== undefined) {
             state.audioObj.connectTo(
               audioObjIn,
-              parseInt(indexOut, 10),
-              parseInt(indexIn, 10)
+              parseInt(portOut, 10),
+              parseInt(portIn, 10)
             );
           }
           // then update the ui information
           let newOutNode = [...state.outNode];
-          newOutNode[indexOut] = [nameIn, idIn, indexOut, indexIn];
+          newOutNode[portOut] = [nameIn, idIn, portIn];
           return { ...state, outNode: newOutNode };
         } else {
           return state;
         }
       }
 
+    case "DISCONNECTING_BLOCK":
+      [nameOut, idOut, portOut] = action.outNode;
+      [nameIn, idIn, portIn] = action.inNode;
+      if (state.id === idOut) {
+        let newOutNode = state.outNode;
+        newOutNode[portOut] = [];
+        return { ...state, outNode: newOutNode };
+      } else if (state.id === idIn) {
+        console.log("here 1");
+        let newInNode = state.inNode;
+        newInNode[portIn] = [];
+        return { ...state, inNode: newInNode };
+      } else {
+        return state;
+      }
     default:
       return state;
   }

src/frontend/src/reducers/blocks.js

@@ -111,7 +111,7 @@ const blocks = (
         // console.log("not isload");
         s.cns = [...cns, action];
       }
-      // in or out?
+      // assign to nowIn or nowOut
       s[action.node] = action.value;
       // if both nowIn and nowOut are assigned and the blocks exists
       if (
@@ -120,7 +120,6 @@ const blocks = (
         s.bs.filter(t => t.id === s.nowIn[2]).length === 1 &&
         s.bs.filter(t => t.id === s.nowOut[2]).length === 1
       ) {
-        // console.log("connecting stuff 3.2..");
         return {
           // go to each block and change the inNode and outNode for the connected block
           ...s,
@@ -138,6 +137,31 @@ const blocks = (
         return s;
       }
 
+    case "DISCONNECTING_BLOCK":
+      console.log("disconnecting!");
+      // disconnecting only happens from destination
+      let [nameIn, portIn, idIn, audioObjIn] = action.value;
+      let inBlockInfo = state.bs.filter(t => t.id === idIn)[0];
+      // get the outNode info of the port that we are disconnecting
+      let [nameOut, idOut, portOut] = inBlockInfo.inNode[parseInt(portIn, 10)];
+      let outBlockInfo = state.bs.filter(t => t.id === idOut)[0];
+
+      // disconnect audioObjects
+      let audioObjOut = outBlockInfo.audioObj;
+      audioObjOut.disconnect(audioObjIn, 0, parseInt(portIn, 10));
+
+      return {
+        // go to each block and change the inNode and outNode for the connected block
+        ...state,
+        bs: state.bs.map(t =>
+          block(t, {
+            ...action,
+            inNode: [nameIn, idIn, portIn],
+            outNode: [nameOut, idOut, portOut]
+          })
+        )
+      };
+
     case "LOAD_STATE":
       let newState = action.content ? action.content : undefined;