feat: connection removing

src/Component/Editor.purs

@@ -40,7 +40,7 @@ import Lunarbox.Data.Editor.Node.NodeDescriptor (onlyEditable)
 import Lunarbox.Data.Editor.Node.NodeId (NodeId(..))
 import Lunarbox.Data.Editor.Node.PinLocation (Pin(..))
 import Lunarbox.Data.Editor.Project (_projectNodeGroup, emptyProject)
-import Lunarbox.Data.Editor.State (State, Tab(..), _atColorMap, _atNode, _atNodeData, _currentFunction, _currentTab, _expression, _function, _functionData, _functions, _isSelected, _lastMousePosition, _nextId, _nodeData, _panelIsOpen, _partialFrom, _partialTo, _typeMap, compile, getSceneMousePosition, initializeFunction, setCurrentFunction, tabIcon, tryConnecting)
+import Lunarbox.Data.Editor.State (State, Tab(..), _atColorMap, _atNode, _atNodeData, _currentFunction, _currentTab, _expression, _function, _functionData, _functions, _isSelected, _lastMousePosition, _nextId, _nodeData, _panelIsOpen, _partialFrom, _partialTo, _typeMap, compile, getSceneMousePosition, initializeFunction, removeConnection, setCurrentFunction, tabIcon, tryConnecting)
 import Lunarbox.Data.Graph as G
 import Lunarbox.Data.Vector (Vec2)
 import Lunarbox.Page.Editor.EmptyEditor (emptyEditor)
@@ -59,6 +59,7 @@ data Action
   | SelectOutput NodeId
   | SelectNode NodeId
   | LoadNodes
+  | RemoveConnection NodeId (Tuple NodeId Int)
 
 data Query a
   = Void
@@ -191,6 +192,8 @@ component =
       modify_ $ tryConnecting <<< setFrom
       e <- gets $ view _expression
       printString $ printSource e
+    RemoveConnection from to -> do
+      modify_ $ removeConnection from to
 
   handleTreeOutput :: TreeC.Output -> Maybe Action
   handleTreeOutput = case _ of
@@ -291,6 +294,7 @@ component =
             , selectNode: Just <<< SelectNode
             , selectInput: (Just <<< _) <<< SelectInput
             , selectOutput: Just <<< SelectOutput
+            , removeConnection: (Just <<< _) <<< RemoveConnection
             }
 
   render :: State -> HH.HTML _ Action

src/Component/Editor/Add.purs

@@ -92,6 +92,7 @@ makeNode { edit, addNode } { isUsable, isEditable } name typeMap functionData =
             { select: Nothing
             , selectOutput: Nothing
             , selectInput: const Nothing
+            , removeConnection: const $ const Nothing
             }
         ]
     , container "node-data"

src/Component/Editor/Edge.purs

@@ -5,7 +5,7 @@ module Lunarbox.Component.Editor.Edge
 
 import Prelude
 import Control.MonadZero (guard)
-import Data.Maybe (Maybe(..))
+import Data.Maybe (Maybe(..), maybe)
 import Data.Typelevel.Num (d0, d1)
 import Data.Vec ((!!))
 import Halogen.HTML (HTML)
@@ -22,20 +22,26 @@ type Input
     , to :: Vec2 Number
     , color :: Color
     , dotted :: Boolean
+    , className :: Maybe String
+    }
+
+type Actions a
+  = { handleClick :: Maybe a
     }
 
 -- Used to render the connections between nodes
-renderEdge :: forall h a. Input -> HTML h a
-renderEdge { from, to, color, dotted } =
+renderEdge :: forall h a. Input -> Actions a -> HTML h a
+renderEdge { from, to, color, dotted, className } { handleClick } =
   SE.line
     $ [ SA.x1 $ from !! d0
       , SA.y1 $ from !! d1
       , SA.x2 $ to !! d0
       , SA.y2 $ to !! d1
       , SA.stroke $ Just color
-      , onClick $ const Nothing
+      , onClick $ const handleClick
       , strokeWidth connectionsWidth
       ]
     <> ( guard dotted
           $> strokeDashArray [ 10.0, 5.0 ]
       )
+    <> (maybe mempty (pure <<< SA.class_) className)

src/Component/Editor/Node.purs

@@ -5,6 +5,7 @@ module Lunarbox.Component.Editor.Node
   ) where
 
 import Prelude
+import Control.MonadZero (guard)
 import Data.Default (def)
 import Data.Int (toNumber)
 import Data.Lens (set, view)
@@ -62,6 +63,7 @@ type Actions a
   = { select :: Maybe a
     , selectInput :: Int -> Maybe a
     , selectOutput :: Maybe a
+    , removeConnection :: NodeId -> Int -> Maybe a
     }
 
 output :: forall r a. Boolean -> Maybe a -> Color -> HTML r a
@@ -105,6 +107,7 @@ renderNode { nodeData: nodeData
 } { select
 , selectOutput
 , selectInput
+, removeConnection
 } =
   SE.g
     [ SA.transform [ SA.Translate (centerPosition !! d0) (centerPosition !! d1) ]
@@ -154,6 +157,9 @@ renderNode { nodeData: nodeData
             , to: scaleConnectionPreview <$> (mousePosition - centerPosition)
             , color: outputColor
             , dotted: true
+            , className: Nothing
+            }
+            { handleClick: Nothing
             }
     _ -> mempty
 
@@ -189,12 +195,17 @@ renderNode { nodeData: nodeData
                             color <- Map.lookup (InputPin index) colorMap
                             let
                               targetPosition = view _NodeDataPosition targetData
+
+                              isMouse = nodeId == mouseId
                             pure
                               $ renderEdge
                                   { from: inputPosition
                                   , to: scaleConnection nodeId $ targetPosition - centerPosition
                                   , color
-                                  , dotted: nodeId == mouseId
+                                  , dotted: isMouse
+                                  , className: Just "node-connection"
+                                  }
+                                  { handleClick: guard (not isMouse) >>= const (removeConnection nodeId index)
                                   }
 
                         inputSvg =

src/Component/Editor/Scene.purs

@@ -64,6 +64,7 @@ type Actions a
     , mouseUp :: Maybe a
     , selectInput :: NodeId -> Int -> Maybe a
     , selectOutput :: NodeId -> Maybe a
+    , removeConnection :: NodeId -> Tuple NodeId Int -> Maybe a
     }
 
 -- Errors which could arise while creating the node svg
@@ -104,7 +105,7 @@ createNodeComponent { functionName
 , partialConnection
 , lastMousePosition
 , nodeData: nodeDataMap
-} { selectNode, selectInput, selectOutput } (Tuple id nodeData) = do
+} { selectNode, selectInput, selectOutput, removeConnection } (Tuple id nodeData) = do
   let
     generateLocation = DeepLocation functionName
 
@@ -147,6 +148,7 @@ createNodeComponent { functionName
         { select: selectNode id
         , selectInput: selectInput id
         , selectOutput: selectOutput id
+        , removeConnection: (_ <<< Tuple id) <<< removeConnection
         }
 
 scene :: forall h a. Input -> Actions a -> HH.HTML h a

src/Data/Editor/State.purs

@@ -8,6 +8,7 @@ module Lunarbox.Data.Editor.State
   , initializeFunction
   , setRelativeMousePosition
   , getSceneMousePosition
+  , removeConnection
   , _nodeData
   , _atNodeData
   , _project
@@ -269,8 +270,9 @@ initializeFunction name state =
   in
     compile state''''
 
-removeEdge :: NodeId -> (Tuple NodeId Int) -> State -> State
-removeEdge from (Tuple toId toIndex) state = state''
+-- Remove a conenction from the current function
+removeConnection :: NodeId -> (Tuple NodeId Int) -> State -> State
+removeConnection from (Tuple toId toIndex) state = state''
   where
   state' = set (_atCurrentNode toId <<< _Just <<< _nodeInput toIndex) Nothing state