feat: unselect pins

When left clicking on the background all the pins are unselected.

Closes #40

src/Component/Editor.purs

@@ -53,12 +53,12 @@ import Lunarbox.Data.Editor.Node.NodeId (NodeId(..))
 import Lunarbox.Data.Editor.Node.PinLocation (Pin(..))
 import Lunarbox.Data.Editor.Project (_projectNodeGroup)
 import Lunarbox.Data.Editor.Save (stateToJson)
-import Lunarbox.Data.Editor.State (State, Tab(..), _atCurrentNodeData, _atInputCount, _currentCamera, _currentFunction, _currentNodes, _currentTab, _functions, _isAdmin, _isExample, _isSelected, _lastMousePosition, _name, _nextId, _nodeData, _nodeSearchTerm, _panelIsOpen, _partialFrom, _partialTo, _sceneScale, _unconnectablePins, adjustSceneScale, compile, createNode, deleteFunction, deleteSelection, functionExists, getSceneMousePosition, initializeFunction, makeUnconnetacbleList, pan, removeConnection, resetNodeOffset, searchNode, setCurrentFunction, setRuntimeValue, tabIcon, tryConnecting)
+import Lunarbox.Data.Editor.State (State, Tab(..), _atCurrentNodeData, _atInputCount, _currentCamera, _currentFunction, _currentNodes, _currentTab, _functions, _isAdmin, _isExample, _isSelected, _lastMousePosition, _name, _nextId, _nodeData, _nodeSearchTerm, _panelIsOpen, _partialFrom, _partialTo, _sceneScale, _unconnectablePins, adjustSceneScale, clearPartialConnection, compile, createNode, deleteFunction, deleteSelection, functionExists, getSceneMousePosition, initializeFunction, makeUnconnetacbleList, pan, preventDefaults, removeConnection, resetNodeOffset, searchNode, setCurrentFunction, setRuntimeValue, tabIcon, tryConnecting)
 import Lunarbox.Data.Graph (wouldCreateCycle)
 import Lunarbox.Data.Graph as G
 import Lunarbox.Data.MouseButton (MouseButton(..), isPressed)
 import Lunarbox.Page.Editor.EmptyEditor (emptyEditor)
-import Web.Event.Event (EventType(..), preventDefault, stopPropagation)
+import Web.Event.Event (Event, EventType(..), preventDefault, stopPropagation)
 import Web.Event.Event as Event
 import Web.HTML (window) as Web
 import Web.HTML.HTMLDocument as HTMLDocument
@@ -81,12 +81,13 @@ data Action
   | CreateNode FunctionName
   | StartFunctionCreation
   | SceneMouseUp
+  | SceneMouseDown MouseEvent
   | SceneMouseMove MouseEvent
-  | SelectInput NodeId Int
-  | SelectOutput NodeId
-  | SelectNode NodeId
+  | SelectInput NodeId Int Event
+  | SelectOutput NodeId Event
+  | SelectNode NodeId Event
   | SceneZoom Number
-  | RemoveConnection NodeId (Tuple NodeId Int)
+  | RemoveConnection NodeId (Tuple NodeId Int) Event
   | SetRuntimeValue FunctionName NodeId RuntimeValue
   | AdjustSceneScale
   | TogglePanel
@@ -97,6 +98,7 @@ data Action
   | HandleAddPanelKeyPress KeyboardEvent
   | DeleteFunction FunctionName
   | Autosave Json
+  | PreventDefaults Event
 
 data Output
   = Save Json
@@ -122,11 +124,12 @@ sceneActions :: Scene.Actions Action
 sceneActions =
   { mouseUp: Just SceneMouseUp
   , zoom: Just <<< SceneZoom
-  , selectNode: Just <<< SelectNode
-  , selectOutput: Just <<< SelectOutput
+  , mouseDown: Just <<< SceneMouseDown
   , mouseMove: Just <<< SceneMouseMove
-  , selectInput: (Just <<< _) <<< SelectInput
-  , removeConnection: (Just <<< _) <<< RemoveConnection
+  , selectNode: (Just <<< _) <<< SelectNode
+  , selectOutput: (Just <<< _) <<< SelectOutput
+  , removeConnection: ((Just <<< _) <<< _) <<< RemoveConnection
+  , selectInput: ((Just <<< _) <<< _) <<< SelectInput
   , setValue: ((Just <<< _) <<< _) <<< SetRuntimeValue
   }
 
@@ -247,6 +250,10 @@ component =
       when (oldFunction == Nothing) adjustSceneScale
     StartFunctionCreation -> do
       void $ query (SProxy :: _ "tree") unit $ tell TreeC.StartCreation
+    SceneMouseDown event -> do
+      let
+        bits = MouseEvent.buttons event
+      when (isPressed LeftButton bits) $ modify_ clearPartialConnection
     SceneMouseMove event -> do
       let
         bits = MouseEvent.buttons event
@@ -276,7 +283,8 @@ component =
       put $ update state'
     SceneMouseUp -> do
       modify_ $ resetNodeOffset <<< (over _nodeData $ map $ set _NodeDataSelected false)
-    SelectNode id -> do
+    SelectNode id event -> do
+      preventDefaults event
       maybeCurrentFunction <- gets $ view _currentFunction
       nodes <- gets $ preview _currentNodes
       state <- get
@@ -292,7 +300,7 @@ component =
         modify_
           $ set (_atCurrentNodeData id <<< _Just <<< _NodeDataZPosition) zPosition
           <<< set (_isSelected currentFunction id) true
-    SelectInput id index -> do
+    SelectInput id index event -> do
       unconnectableList <- gets $ view _unconnectablePins
       let
         setTo = set _partialTo $ Just $ Tuple id index
@@ -301,7 +309,7 @@ component =
 
         shouldConnect = isNothing $ find (_ == location) unconnectableList
       when shouldConnect $ modify_ $ tryConnecting <<< makeUnconnetacbleList <<< setTo
-    SelectOutput id -> do
+    SelectOutput id event -> do
       unconnectableList <- gets $ view _unconnectablePins
       let
         setFrom = set _partialFrom $ Just id
@@ -310,7 +318,7 @@ component =
 
         shouldConnect = isNothing $ find (_ == location) unconnectableList
       when shouldConnect $ modify_ $ tryConnecting <<< makeUnconnetacbleList <<< setFrom
-    RemoveConnection from to -> do
+    RemoveConnection from to event -> do
       modify_ $ removeConnection from to
     SetRuntimeValue functionName nodeId runtimeValue -> do
       modify_ $ setRuntimeValue functionName nodeId runtimeValue
@@ -336,6 +344,7 @@ component =
         handleAction $ Autosave newState
       else
         handleAction $ Autosave oldState
+    PreventDefaults event -> preventDefaults event
 
   handleTreeOutput :: TreeC.Output -> Maybe Action
   handleTreeOutput = case _ of

src/Component/Editor/Add.purs

@@ -110,11 +110,11 @@ makeNode { edit, addNode, changeInputCount, delete } { isUsable, isEditable, can
         ]
         [ renderNode
             (nodeInput inputCount typeMap name functionData)
-            { select: Nothing
-            , selectOutput: Nothing
-            , selectInput: const Nothing
+            { select: const Nothing
+            , selectOutput: const Nothing
+            , selectInput: const $ const Nothing
             , setValue: const Nothing
-            , removeConnection: const $ const Nothing
+            , removeConnection: const $ const $ const Nothing
             }
         ]
     , container "node-data"

src/Component/Editor/Edge.purs

@@ -19,6 +19,8 @@ import Math (floor)
 import Svg.Attributes (Color)
 import Svg.Attributes as SA
 import Svg.Elements as SE
+import Web.Event.Internal.Types (Event)
+import Web.UIEvent.MouseEvent as MouseEvent
 
 type Input
   = { from :: Vec2 Number
@@ -29,7 +31,7 @@ type Input
     }
 
 type Actions a
-  = { handleClick :: Maybe a
+  = { handleClick :: Event -> Maybe a
     }
 
 renderEdge :: forall s a m. Input -> Actions a -> ComponentHTML a s m
@@ -44,7 +46,7 @@ renderEdge' { from, to, color, dotted, className } { handleClick } =
       , SA.x2 $ floor $ to !! d0
       , SA.y2 $ floor $ to !! d1
       , SA.stroke $ Just color
-      , onMouseUp $ const handleClick
+      , onMouseUp $ handleClick <<< MouseEvent.toEvent
       , strokeWidth connectionsWidth
       ]
     <> ( guard dotted

src/Component/Editor/Node.purs

@@ -19,7 +19,7 @@ import Data.Set as Set
 import Data.Tuple (Tuple(..))
 import Data.Typelevel.Num (d0, d1)
 import Data.Vec (vec2, (!!))
-import Halogen.HTML (HTML, IProp, ComponentHTML)
+import Halogen.HTML (ComponentHTML, HTML)
 import Halogen.HTML.Events (onMouseDown, onMouseUp)
 import Lunarbox.Capability.Editor.Node.Arc (Arc(..))
 import Lunarbox.Capability.Editor.Node.Arc as Arc
@@ -45,7 +45,8 @@ import Math (cos, floor, pi, sin)
 import Svg.Attributes (Color)
 import Svg.Attributes as SA
 import Svg.Elements as SE
-import Web.UIEvent.MouseEvent (MouseEvent)
+import Web.Event.Internal.Types (Event)
+import Web.UIEvent.MouseEvent as MouseEvent
 
 -- A node can either have one of it's inputs, it's output or nothing selected
 data SelectionStatus
@@ -69,21 +70,21 @@ type Input a s m
     }
 
 type Actions a
-  = { select :: Maybe a
-    , selectInput :: Int -> Maybe a
-    , selectOutput :: Maybe a
+  = { select :: Event -> Maybe a
+    , selectInput :: Int -> Event -> Maybe a
+    , selectOutput :: Event -> Maybe a
     , setValue :: RuntimeValue -> Maybe a
-    , removeConnection :: NodeId -> Int -> Maybe a
+    , removeConnection :: NodeId -> Int -> Event -> Maybe a
     }
 
-output :: forall r a. Boolean -> String -> Maybe a -> Color -> HTML r a
+output :: forall r a. Boolean -> String -> (Event -> Maybe a) -> Color -> HTML r a
 output unconnectable label selectOutput color =
   withLabel label
     $ SE.circle
         [ SA.r 10.0
         , SA.fill $ Just color
         , SA.class_ $ "node-output" <> if unconnectable then " unconnectable" else ""
-        , onMouseUp $ const selectOutput
+        , onMouseUp $ selectOutput <<< MouseEvent.toEvent
         ]
 
 constant :: forall r a. HTML r a
@@ -125,7 +126,7 @@ renderNode { nodeData: nodeData
   SE.g
     [ SA.transform [ SA.Translate (centerPosition !! d0) (centerPosition !! d1) ]
     , SA.class_ "node"
-    , allowMoving
+    , onMouseDown $ select <<< MouseEvent.toEvent
     ]
     $ [ overlays maxRadius labels
       ]
@@ -149,9 +150,6 @@ renderNode { nodeData: nodeData
       , SA.fill $ Just transparent
       ]
 
-  allowMoving :: forall r. IProp ( onMouseDown ∷ MouseEvent | r ) _
-  allowMoving = onMouseDown $ const select
-
   outputColor =
     fromMaybe transparent
       $ Map.lookup OutputPin colorMap
@@ -178,7 +176,7 @@ renderNode { nodeData: nodeData
             , dotted: true
             , className: Nothing
             }
-            { handleClick: Nothing
+            { handleClick: const Nothing
             }
     _ -> mempty
 
@@ -265,7 +263,7 @@ renderNode { nodeData: nodeData
                                   , dotted: isMouse
                                   , className: Just "node-connection"
                                   }
-                                  { handleClick: guard (not isMouse) >>= const (removeConnection nodeId index)
+                                  { handleClick: \event -> guard (not isMouse) >>= const (removeConnection nodeId index event)
                                   }
 
                         inputSvg =

src/Component/Editor/Node/Input.purs

@@ -13,6 +13,8 @@ import Lunarbox.Svg.Element (withLabel)
 import Svg.Attributes (Color, D(..))
 import Svg.Attributes as SA
 import Svg.Elements as SE
+import Web.Event.Internal.Types (Event)
+import Web.UIEvent.MouseEvent as MouseEvent
 
 type Input a
   = { radius :: Number
@@ -23,7 +25,7 @@ type Input a
     , tooltip :: String
     }
 
-input :: forall h a i. Input i -> Maybe a -> HTML h a
+input :: forall h a i. Input i -> (Event -> Maybe a) -> HTML h a
 input { radius, spacing, tooltip, arc: Arc start end _, color, unconnectable } selectInput =
   withLabel tooltip
     $ SE.path
@@ -33,5 +35,5 @@ input { radius, spacing, tooltip, arc: Arc start end _, color, unconnectable } s
         , SA.class_ $ "node-input" <> if unconnectable then " unconnectable" else ""
         , strokeWidth arcWidth
         , strokeLinecap Butt
-        , onMouseUp $ const selectInput
+        , onMouseUp $ selectInput <<< MouseEvent.toEvent
         ]

src/Component/Editor/Scene.purs

@@ -24,7 +24,7 @@ import Data.Typelevel.Num (d0, d1)
 import Data.Vec ((!!))
 import Halogen.HTML (ComponentHTML)
 import Halogen.HTML as HH
-import Halogen.HTML.Events (onMouseMove, onMouseUp, onWheel)
+import Halogen.HTML.Events (onMouseDown, onMouseMove, onMouseUp, onWheel)
 import Halogen.HTML.Properties as HP
 import Lunarbox.Capability.Editor.Type (ColoringError, generateTypeMap, prettify)
 import Lunarbox.Component.Editor.HighlightedType (highlightTypeToSvg)
@@ -55,6 +55,7 @@ import Math (pow)
 import Svg.Attributes (Color(..))
 import Svg.Attributes as SA
 import Svg.Elements as SE
+import Web.Event.Internal.Types (Event)
 import Web.UIEvent.MouseEvent (MouseEvent)
 import Web.UIEvent.WheelEvent (deltaY)
 
@@ -76,12 +77,13 @@ type Input a s m
 
 type Actions a
   = { mouseMove :: MouseEvent -> Maybe a
+    , mouseDown :: MouseEvent -> Maybe a
     , mouseUp :: Maybe a
-    , selectNode :: NodeId -> Maybe a
+    , selectNode :: NodeId -> Event -> Maybe a
     , zoom :: Number -> Maybe a
-    , selectInput :: NodeId -> Int -> Maybe a
-    , selectOutput :: NodeId -> Maybe a
-    , removeConnection :: NodeId -> Tuple NodeId Int -> Maybe a
+    , selectInput :: NodeId -> Int -> Event -> Maybe a
+    , selectOutput :: NodeId -> Event -> Maybe a
+    , removeConnection :: NodeId -> Tuple NodeId Int -> Event -> Maybe a
     , setValue :: FunctionName -> NodeId -> RuntimeValue -> Maybe a
     }
 
@@ -198,7 +200,7 @@ createNodeComponent { functionName
         }
 
 scene :: forall a s m. Actions a -> Input a s m -> ComponentHTML a s m
-scene actions@{ mouseMove, mouseUp, selectNode, zoom } state@{ nodeData, camera, scale, lastMousePosition } =
+scene actions@{ mouseMove, mouseUp, mouseDown, selectNode, zoom } state@{ nodeData, camera, scale, lastMousePosition } =
   either
     (\err -> erroredEditor $ show err)
     success
@@ -222,6 +224,7 @@ scene actions@{ mouseMove, mouseUp, selectNode, zoom } state@{ nodeData, camera,
           , SA.id "scene"
           , toViewBox scale camera
           , onMouseMove mouseMove
+          , onMouseDown mouseDown
           , onWheel \e -> zoom $ pow scrollStep $ signum $ deltaY e
           , onMouseUp $ const mouseUp
           ]

src/Data/Editor/State.purs

@@ -62,6 +62,8 @@ import Lunarbox.Data.Vector (Vec2)
 import Math (pow)
 import Svg.Attributes (Color)
 import Web.DOM.Node as WebNode
+import Web.Event.Event as Event
+import Web.Event.Internal.Types (Event)
 import Web.HTML.HTMLElement (DOMRect, toNode)
 
 data Tab
@@ -346,6 +348,10 @@ canConnect from (Tuple toId toIndex) state =
     guard $ canUnify toType fromType
     pure true
 
+-- Removes the partial connection. Here to solve #40
+clearPartialConnection :: forall a s m. State a s m -> State a s m
+clearPartialConnection = set _partialFrom Nothing <<< set _partialTo Nothing <<< set _unconnectablePins mempty
+
 -- Tries connecting the pins the user selected
 tryConnecting :: forall a s m. State a s m -> State a s m
 tryConnecting state =
@@ -597,6 +603,10 @@ searchNode state = sortBySearch show searchTerm nodes
 functionExists :: forall a s m. FunctionName -> State a s m -> Boolean
 functionExists name = Map.member name <<< view _functionData
 
+-- Prevent and stop the propagation for any dom event
+preventDefaults :: forall q i o m a s. MonadEffect m => Event -> HalogenM (State a s m) q i o m Unit
+preventDefaults event = liftEffect $ Event.preventDefault event *> Event.stopPropagation event
+
 -- Lenses
 _inputCountMap :: forall a s m. Lens' (State a s m) (Map FunctionName Int)
 _inputCountMap = prop (SProxy :: _ "inputCountMap")

src/Data/MouseButton.purs

@@ -16,8 +16,8 @@ data MouseButton
 -- Turns a button into it's code
 buttonCode :: MouseButton -> Int
 buttonCode = case _ of
-  LeftButton -> 0
-  Wheel -> 1
+  LeftButton -> 1
+  Wheel -> -1 -- Todo: find the correct code for this
   RightButton -> 2
 
 -- Check if a button is pressed