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

import Global (readFloat)
import Prelude
10
import Effect (Effect)
11 12
import Reactix as R
import Reactix.DOM.HTML as H
13
import Toestand as T
14

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

19
here :: R2.Here
20
here = R2.here "Gargantext.Components.GraphExplorer.SlideButton"
21

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

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

sizeButtonCpt :: R.Component Props
34 35 36
sizeButtonCpt = here.component "sizeButton" cpt where
  cpt { state, caption, min, max, onChange } _ = do
    defaultValue <- T.useLive T.unequal state
37
    pure $ H.span { className: "range-simple" }
38 39 40 41 42 43 44
      [ H.label {} [ R2.small {} [ H.text caption ] ]
      , H.input { type: "range"
                , className: "form-control"
                , min: show min
                , max: show max
                , defaultValue
                , on: { input: onChange } }]
45

46
labelSizeButton :: R.Ref Sigmax.Sigma -> T.Box Number -> R.Element
47 48
labelSizeButton sigmaRef state =
  sizeButton {
49
      state
50
    , caption: "Label Size"
51 52
    , min: 1.0
    , max: 30.0
53
    , onChange: \e -> do
54
      let sigma = R.readRef sigmaRef
55
      let newValue = readFloat $ R.unsafeEventValue e
56 57
      Sigmax.dependOnSigma sigma "[labelSizeButton] sigma: Nothing" $ \s -> do
        Sigma.setSettings s {
58
          defaultLabelSize: newValue
59
        , drawLabels: true
60 61
        , maxNodeSize: newValue / 2.5
        --, labelSizeRatio: newValue / 2.5
62
        }
63
      T.write_ newValue state
64
    }
65

66
mouseSelectorSizeButton :: R.Ref Sigmax.Sigma -> T.Box Number -> R.Element
67 68 69 70 71 72 73 74
mouseSelectorSizeButton sigmaRef state =
  sizeButton {
      state
    , caption: "Selector Size"
    , min: 1.0
    , max: 50.0
    , onChange: \e -> do
      let sigma = R.readRef sigmaRef
75
      let newValue = readFloat $ R.unsafeEventValue e
76 77 78 79
      Sigmax.dependOnSigma sigma "[mouseSelectorSizeButton] sigma: Nothing" $ \s -> do
        Sigma.setSettings s {
          mouseSelectorSize: newValue
        }
80
      T.write_ newValue state
81
  }