Commit 31851ae1 authored by Przemyslaw Kaminski's avatar Przemyslaw Kaminski

[CodeEditor] divider is working now

parent c803af68
...@@ -22,7 +22,6 @@ ...@@ -22,7 +22,6 @@
width: 100%; width: 100%;
} }
.code-editor .editor .code-area { .code-editor .editor .code-area {
flex-grow: 1;
max-height: 200px; max-height: 200px;
min-width: 25%; min-width: 25%;
overflow: auto; overflow: auto;
......
...@@ -39,7 +39,7 @@ ...@@ -39,7 +39,7 @@
display: flex display: flex
width: 100% width: 100%
.code-area .code-area
flex-grow: 1 //flex-grow: 1
max-height: 200px max-height: 200px
min-width: 25% min-width: 25%
overflow: auto overflow: auto
......
module Gargantext.Components.CodeEditor where module Gargantext.Components.CodeEditor where
import DOM.Simple.Types (Element)
import Data.Argonaut.Parser (jsonParser) import Data.Argonaut.Parser (jsonParser)
import Data.Either (either, Either(..)) import Data.Either (either, Either(..))
import Data.Generic.Rep (class Generic) import Data.Generic.Rep (class Generic)
...@@ -11,10 +10,15 @@ import Data.Nullable (Nullable, null, toMaybe) ...@@ -11,10 +10,15 @@ import Data.Nullable (Nullable, null, toMaybe)
import Data.String.Utils (endsWith) import Data.String.Utils (endsWith)
import Data.Tuple (fst, snd) import Data.Tuple (fst, snd)
import Data.Tuple.Nested ((/\)) import Data.Tuple.Nested ((/\))
import DOM.Simple.Console (log2)
import DOM.Simple.Element (boundingRect)
import DOM.Simple.Event (MouseEvent)
import DOM.Simple.Types (DOMRect, Element)
import Effect (Effect) import Effect (Effect)
import FFI.Simple ((.=)) import FFI.Simple ((..), (.=))
import Reactix as R import Reactix as R
import Reactix.DOM.HTML as H import Reactix.DOM.HTML as H
import Reactix.SyntheticEvent (SyntheticEvent)
import Text.Markdown.SlamDown.Parser (parseMd) import Text.Markdown.SlamDown.Parser (parseMd)
import Text.Markdown.SlamDown.Smolder as MD import Text.Markdown.SlamDown.Smolder as MD
import Text.Markdown.SlamDown.Syntax (SlamDownP) import Text.Markdown.SlamDown.Syntax (SlamDownP)
...@@ -87,6 +91,24 @@ renderHaskell s = s ...@@ -87,6 +91,24 @@ renderHaskell s = s
codeEditor :: Record Props -> R.Element codeEditor :: Record Props -> R.Element
codeEditor p = R.createElement codeEditorCpt p [] codeEditor p = R.createElement codeEditorCpt p []
type Divider = (
codeAreaRef:: R.Ref (Nullable Element)
, codeAreaPositionRef:: R.Ref (Maybe DOMRect)
, dividerInitialPositionRef:: R.Ref (Maybe R2.Point)
)
initDivider :: R.Hooks (Record Divider)
initDivider = do
codeAreaRef <- R.useRef null
codeAreaPositionRef <- R.useRef Nothing
dividerInitialPositionRef <- R.useRef Nothing
pure $ {
codeAreaRef
, codeAreaPositionRef
, dividerInitialPositionRef
}
-- The code editor contains 3 components: -- The code editor contains 3 components:
-- - a hidden textarea -- - a hidden textarea
-- - textarea code overlay -- - textarea code overlay
...@@ -99,18 +121,26 @@ codeEditorCpt = R.hooksComponent "G.C.CE.CodeEditor" cpt ...@@ -99,18 +121,26 @@ codeEditorCpt = R.hooksComponent "G.C.CE.CodeEditor" cpt
cpt {code, defaultCodeType, onChange} _ = do cpt {code, defaultCodeType, onChange} _ = do
controls <- initControls code defaultCodeType controls <- initControls code defaultCodeType
divider <- initDivider
R.useEffect2' (fst controls.codeS) (fst controls.codeType) $ do R.useEffect2' (fst controls.codeS) (fst controls.codeType) $ do
let code' = fst controls.codeS let code' = fst controls.codeS
setCodeOverlay controls code' setCodeOverlay controls code'
renderHtml code' controls renderHtml code' controls
pure $ H.div { className: "code-editor" } [ pure $ H.div { className: "code-editor"
, on: {
mouseMove: onDividerMouseMove divider
, mouseUp: onDividerMouseUp divider
}
} [
toolbar {controls, onChange} toolbar {controls, onChange}
, H.div { className: "row error" } [ , H.div { className: "row error" } [
errorComponent {error: controls.error} errorComponent {error: controls.error}
] ]
, H.div { className: "row editor" } [ , H.div { className: "row editor" } [
H.div { className: "code-area " <> (codeHidden $ fst controls.viewType) } [ H.div { className: "code-area " <> (codeHidden $ fst controls.viewType)
, ref: divider.codeAreaRef } [
H.div { className: "code-container" } [ H.div { className: "code-container" } [
H.textarea { defaultValue: code H.textarea { defaultValue: code
, on: { change: onEditChange controls onChange } , on: { change: onEditChange controls onChange }
...@@ -125,7 +155,10 @@ codeEditorCpt = R.hooksComponent "G.C.CE.CodeEditor" cpt ...@@ -125,7 +155,10 @@ codeEditorCpt = R.hooksComponent "G.C.CE.CodeEditor" cpt
] ]
] ]
, H.div { className: "v-divider " <> (dividerHidden $ fst controls.viewType) } [ , H.div { className: "v-divider " <> (dividerHidden $ fst controls.viewType) } [
H.span { className: "fa fa-bars handle" } [] H.span { className: "fa fa-bars handle"
, on: {
mouseDown: onDividerMouseDown divider
} } []
] ]
, H.div { className: "html " <> (langClass $ fst controls.codeType) <> (previewHidden $ fst controls.viewType) , H.div { className: "html " <> (langClass $ fst controls.codeType) <> (previewHidden $ fst controls.viewType)
, ref: controls.htmlElRef , ref: controls.htmlElRef
...@@ -158,6 +191,36 @@ codeEditorCpt = R.hooksComponent "G.C.CE.CodeEditor" cpt ...@@ -158,6 +191,36 @@ codeEditorCpt = R.hooksComponent "G.C.CE.CodeEditor" cpt
snd codeS $ const code snd codeS $ const code
onChange codeType code onChange codeType code
onDividerMouseDown :: Record Divider -> SyntheticEvent MouseEvent -> Effect Unit
onDividerMouseDown {codeAreaRef, codeAreaPositionRef, dividerInitialPositionRef} e = do
case (toMaybe $ R.readRef codeAreaRef) of
Nothing -> pure unit
Just codeAreaEl -> do
R.setRef codeAreaPositionRef $ Just $ boundingRect codeAreaEl
R.setRef dividerInitialPositionRef $ Just $ R2.mousePosition e
onDividerMouseMove :: Record Divider -> SyntheticEvent MouseEvent -> Effect Unit
onDividerMouseMove {codeAreaRef, codeAreaPositionRef, dividerInitialPositionRef} e = do
case (toMaybe $ R.readRef codeAreaRef) of
Nothing -> pure unit
Just codeAreaEl -> do
case (R.readRef codeAreaPositionRef) of
Nothing -> pure unit
Just codeAreaPosition -> do
case (R.readRef dividerInitialPositionRef) of
Nothing -> pure unit
Just (R2.Point dividerInitialPosition) -> do
let (R2.Point pos) = R2.mousePosition e
let diff = dividerInitialPosition.x - codeAreaPosition.right
let width = pos.x - codeAreaPosition.left - diff
let style = codeAreaEl .. "style"
pure $ (style .= "width") width
onDividerMouseUp :: forall e. Record Divider -> e -> Effect Unit
onDividerMouseUp {codeAreaPositionRef, dividerInitialPositionRef} _ = do
R.setRef codeAreaPositionRef Nothing
R.setRef dividerInitialPositionRef Nothing
setCodeOverlay :: Record Controls -> Code -> Effect Unit setCodeOverlay :: Record Controls -> Code -> Effect Unit
setCodeOverlay {codeOverlayElRef, codeType: (codeType /\ _)} code = do setCodeOverlay {codeOverlayElRef, codeType: (codeType /\ _)} code = do
let mCodeOverlayEl = toMaybe $ R.readRef codeOverlayElRef let mCodeOverlayEl = toMaybe $ R.readRef codeOverlayElRef
......
...@@ -3,7 +3,6 @@ module Gargantext.Utils.Reactix where ...@@ -3,7 +3,6 @@ module Gargantext.Utils.Reactix where
import Prelude import Prelude
import DOM.Simple as DOM import DOM.Simple as DOM
import DOM.Simple.Console (log2)
import DOM.Simple.Document (document) import DOM.Simple.Document (document)
import DOM.Simple.Element as Element import DOM.Simple.Element as Element
import DOM.Simple.Event as DE import DOM.Simple.Event as DE
...@@ -21,7 +20,7 @@ import Effect (Effect) ...@@ -21,7 +20,7 @@ import Effect (Effect)
import Effect.Aff (Aff, launchAff, launchAff_, killFiber) import Effect.Aff (Aff, launchAff, launchAff_, killFiber)
import Effect.Class (liftEffect) import Effect.Class (liftEffect)
import Effect.Exception (error) import Effect.Exception (error)
import Effect.Uncurried (EffectFn1, mkEffectFn1, mkEffectFn2, runEffectFn1) import Effect.Uncurried (EffectFn1, mkEffectFn1, mkEffectFn2, runEffectFn1, EffectFn2, runEffectFn2)
import Effect.Unsafe (unsafePerformEffect) import Effect.Unsafe (unsafePerformEffect)
import FFI.Simple ((..), (...), defineProperty, delay, args2, args3) import FFI.Simple ((..), (...), defineProperty, delay, args2, args3)
import Partial.Unsafe (unsafePartial) import Partial.Unsafe (unsafePartial)
...@@ -196,8 +195,6 @@ appendChild n c = delay unit $ \_ -> pure $ n ... "appendChild" $ [c] ...@@ -196,8 +195,6 @@ appendChild n c = delay unit $ \_ -> pure $ n ... "appendChild" $ [c]
appendChildToParentId :: forall c. IsNode c => String -> c -> Effect Unit appendChildToParentId :: forall c. IsNode c => String -> c -> Effect Unit
appendChildToParentId ps c = delay unit $ \_ -> do appendChildToParentId ps c = delay unit $ \_ -> do
parentEl <- getElementById ps parentEl <- getElementById ps
log2 "[appendChildToParentId] ps" ps
log2 "[appendChildToParentId] parentEl" parentEl
case parentEl of case parentEl of
Nothing -> pure unit Nothing -> pure unit
Just el -> appendChild el c Just el -> appendChild el c
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment