SlideButton.purs 2.38 KB
Newer Older
1 2 3 4
module Gargantext.Components.GraphExplorer.SlideButton
  ( Props
  , sizeButton
  , labelSizeButton
5
  , mouseSelectorSizeButton
6 7 8 9 10
  ) where

import Global (readFloat)
import Prelude
import Data.Tuple.Nested ((/\))
11
import Effect (Effect)
12 13 14
import Reactix as R
import Reactix.DOM.HTML as H

15 16
import Gargantext.Hooks.Sigmax as Sigmax
import Gargantext.Hooks.Sigmax.Sigma as Sigma
17 18
import Gargantext.Utils.Reactix as R2

19 20
thisModule = "Gargantext.Components.GraphExplorer.SlideButton"

21 22 23 24 25 26 27
type Props = (
    state :: R.State Number
  , caption :: String
  , min :: Number
  , max :: Number
  , onChange :: forall e. e -> Effect Unit
  )
28 29 30 31 32

sizeButton :: Record Props -> R.Element
sizeButton props = R.createElement sizeButtonCpt props []

sizeButtonCpt :: R.Component Props
33
sizeButtonCpt = R.hooksComponentWithModule thisModule "sizeButton" cpt
34
  where
35
    cpt {state, caption, min, max, onChange} _ = do
36 37 38 39 40 41 42 43 44
      let (value /\ setValue) = state
      pure $
        H.span {}
          [ H.label {} [ H.text caption ]
          , H.input { type: "range"
                    , className: "form-control"
                    , min: show min
                    , max: show max
                    , defaultValue: value
45
                    , on: {input: onChange}
46 47 48
                    }
          ]

49
labelSizeButton :: R.Ref Sigmax.Sigma -> R.State Number -> R.Element
50 51
labelSizeButton sigmaRef state =
  sizeButton {
52
      state
53
    , caption: "Label Size"
54 55
    , min: 5.0
    , max: 30.0
56
    , onChange: \e -> do
57
      let sigma = R.readRef sigmaRef
58
      let newValue = readFloat $ R.unsafeEventValue e
59
      let (_ /\ setValue) = state
60 61
      Sigmax.dependOnSigma sigma "[labelSizeButton] sigma: Nothing" $ \s -> do
        Sigma.setSettings s {
62
          defaultLabelSize: newValue
63 64
        , drawLabels: true
        , labelSizeRatio: newValue / 2.5
65
        }
66 67
      setValue $ const newValue
    }
68 69 70 71 72 73 74 75 76 77 78

mouseSelectorSizeButton :: R.Ref Sigmax.Sigma -> R.State Number -> R.Element
mouseSelectorSizeButton sigmaRef state =
  sizeButton {
      state
    , caption: "Selector Size"
    , min: 1.0
    , max: 50.0
    , onChange: \e -> do
      let sigma = R.readRef sigmaRef
      let (_ /\ setValue) = state
79
      let newValue = readFloat $ R.unsafeEventValue e
80 81 82 83 84 85
      Sigmax.dependOnSigma sigma "[mouseSelectorSizeButton] sigma: Nothing" $ \s -> do
        Sigma.setSettings s {
          mouseSelectorSize: newValue
        }
      setValue $ const newValue
  }