[Graph] camera center button

src/Gargantext/Components/GraphExplorer/Button.purs

+module Gargantext.Components.GraphExplorer.Button
+  (
+    centerButton
+  , Props
+  , simpleButton
+  ) where
+
+import Global (readFloat)
+import Prelude
+import Data.Maybe (Maybe(..))
+import Data.Tuple (snd)
+import Data.Tuple.Nested ((/\))
+import DOM.Simple.Console (log, log2)
+import Effect (Effect)
+import Reactix as R
+import Reactix.DOM.HTML as H
+
+import Gargantext.Hooks.Sigmax as Sigmax
+import Gargantext.Hooks.Sigmax.Sigma as Sigma
+import Gargantext.Utils.Reactix as R2
+
+type Props = (
+    onClick :: forall e. e -> Effect Unit
+  , text :: String
+  )
+
+simpleButton :: Record Props -> R.Element
+simpleButton props = R.createElement simpleButtonCpt props []
+
+simpleButtonCpt :: R.Component Props
+simpleButtonCpt = R.hooksComponent "SimpleButton" cpt
+  where
+    cpt {onClick, text} _ = do
+      pure $
+        H.span {}
+          [
+            H.button
+              { className: "btn btn-primary", on: {click: onClick} }
+              [ H.text text ]
+          ]
+
+centerButton :: R.Ref (Maybe Sigmax.Sigma) -> R.Element
+centerButton sigmaRef = simpleButton {
+    onClick: \_ -> do
+      let mSigma = Sigmax.readSigma <$> R.readRef sigmaRef
+      log2 "[centerButton] mSigma" mSigma
+      case mSigma of
+        Just (Just s) -> Sigma.goToAllCameras s {x: 0.0, y: 0.0, ratio: 1.0, angle: 0.0}
+        _             -> pure unit
+  , text: "Center"
+  }

src/Gargantext/Components/GraphExplorer/Controls.purs

@@ -20,6 +20,7 @@ import Reactix as R
 import Reactix.DOM.HTML as RH
 
 import Gargantext.Components.Graph as Graph
+import Gargantext.Components.GraphExplorer.Button (centerButton)
 import Gargantext.Components.GraphExplorer.RangeControl (edgeSizeControl, nodeSizeControl)
 import Gargantext.Components.GraphExplorer.SlideButton (cursorSizeButton, labelSizeButton)
 import Gargantext.Components.GraphExplorer.ToggleButton (edgesToggleButton, pauseForceAtlasButton)
@@ -79,7 +80,8 @@ controlsCpt = R.hooksComponent "GraphControls" cpt
             [ R2.menu { id: "toolbar" }
               [ RH.ul {}
                 [ -- change type button (?)
-                  RH.li {} [ pauseForceAtlasButton props.sigmaRef localControls.pauseForceAtlas ] -- spatialization (pause ForceAtlas2)
+                  RH.li {} [ centerButton props.sigmaRef ]
+                , RH.li {} [ pauseForceAtlasButton props.sigmaRef localControls.pauseForceAtlas ] -- spatialization (pause ForceAtlas2)
                 , RH.li {} [ edgesToggleButton props.sigmaRef localControls.showEdges ]
                 , RH.li {} [ edgeSizeControl props.sigmaRef localControls.edgeSize ] -- edge size : 0-3
                   -- change level

src/Gargantext/Hooks/Sigmax/Sigma.js

@@ -55,6 +55,15 @@ function stopForceAtlas2(sigma) { sigma.stopForceAtlas2(); }
 function killForceAtlas2(sigma) { sigma.killForceAtlas2(); }
 function isForceAtlas2Running(sigma) { return sigma.isForceAtlas2Running(); }
 
+function getCameras(sigma) {
+  // For some reason, sigma.cameras is an object with integer keys
+  return Object.values(sigma.cameras);
+};
+
+function goTo(cam, props) {
+  return cam.goTo(props);
+};
+
 exports._sigma = _sigma;
 exports._graphRead = graphRead;
 exports._refresh = refresh;
@@ -68,3 +77,5 @@ exports._startForceAtlas2 = startForceAtlas2;
 exports._stopForceAtlas2 = stopForceAtlas2;
 exports._killForceAtlas2 = killForceAtlas2;
 exports._isForceAtlas2Running = isForceAtlas2Running;
+exports._getCameras = getCameras;
+exports._goTo = goTo;

src/Gargantext/Hooks/Sigmax/Sigma.purs

@@ -2,14 +2,16 @@ module Gargantext.Hooks.Sigmax.Sigma where
 
 import Prelude
 
+import Data.Array (head)
 import Data.Either (Either(..))
+import Data.Maybe (Maybe(..))
 import Data.Nullable (null)
 import Data.Unit (Unit)
 import DOM.Simple.Console (log, log2)
-import Effect (Effect)
+import Effect (Effect, foreachE)
 import Effect.Timer (setTimeout)
 import Effect.Uncurried (EffectFn1, mkEffectFn1, runEffectFn1, EffectFn2, runEffectFn2, EffectFn3, runEffectFn3, EffectFn4, runEffectFn4)
-import FFI.Simple.Objects (named)
+import FFI.Simple.Objects (named, getProperty)
 import Type.Row (class Union)
 
 foreign import data Sigma :: Type
@@ -158,3 +160,29 @@ sigmaEasing =
   , cubicOut : SigmaEasing "cubicOut"
   , cubicInOut : SigmaEasing "cubicInOut"
   }
+
+type CameraProps =
+  ( x :: Number
+  , y :: Number
+  , ratio :: Number
+  , angle :: Number
+  )
+
+foreign import data CameraInstance' :: # Type
+type CameraInstance = { | CameraInstance' }
+
+cameras :: Sigma -> Effect (Array CameraInstance)
+cameras = runEffectFn1 _getCameras
+
+foreign import _getCameras :: EffectFn1 Sigma (Array CameraInstance)
+
+goTo :: Record CameraProps -> CameraInstance -> Effect Unit
+goTo props cam = do
+  runEffectFn2 _goTo cam props
+
+foreign import _goTo :: EffectFn2 CameraInstance (Record CameraProps) Unit
+
+goToAllCameras :: Sigma -> Record CameraProps -> Effect Unit
+goToAllCameras sigma props = do
+  cs <- cameras sigma
+  foreachE cs (goTo props)