1 page react.js interactive webapp with drag&drop,connect elements

This is a single page react.js app (SPA) supposed to work well on desktop browsers and touch screens like tablets & mobiles. Please refer snapshots attached while going through this requirement. There is fixed set of components displayed on left(side-panel), each component can be dragged one by one and dropped on the right side(workspace). Each component has a one or more ports/slots(small black squares) through they connect to other. The components auto-connect with each other based on proximity (closest distance) of ports on the components. Connections can be disconnected by double click/long press( or dragging to extreme left). Connection is represented by a curve which adjusts its length and shape when components are repositions/dragged on the screen. The right section of the screen containing the graph of components constructed by drag&drop (workspace) should have pan and zoom-in/out feature. Each node has a state that can be set & modified by user through a menu on the right side of the workspace (snaps shows a minimized menu that can be rolled out).Example menu for wait. if and code are in snapshots. We have implemented a similar project in react, so if it helps (good quality code)things like drag and drop and curve connections and zoom/pan can all be reused. Note: This is not an easy project, Only confident js/react devs apply.