Finished making editor feedback pane resizable.

IntersectMBO · Jan 14, 2021 · 8da6c1e · 8da6c1e
1 parent ef6ecfb
commit 8da6c1e
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 25 deletions.
diff --git a/plutus-playground-client/src/Editor/State.purs b/plutus-playground-client/src/Editor/State.purs
@@ -3,7 +3,8 @@ module Editor.State where
 import Control.Alternative ((<|>))
 import Data.Lens (assign, modifying, use)
 import Data.Maybe (Maybe(..), fromMaybe, maybe)
-import Editor.Types (State(State), Action(..), keybindingsLocalStorageKey, readKeyBindings, _currentCodeIsCompiled, _feedbackPaneDragStart, _feedbackPaneDrag, _feedbackPaneExtend, _feedbackPaneMinimised, _keyBindings, _lastCompiledCode)
+import Data.Ord (clamp)
+import Editor.Types (State(State), Action(..), keybindingsLocalStorageKey, readKeyBindings, _currentCodeIsCompiled, _feedbackPaneDragStart, _feedbackPaneExtend, _feedbackPaneMinimised, _feedbackPanePreviousExtend, _keyBindings, _lastCompiledCode)
 import Effect.Aff.Class (class MonadAff, liftAff)
 import Effect.Class (class MonadEffect)
 import FileEvents (preventDefault, readFileFromDragEvent)
@@ -14,7 +15,7 @@ import Language.Haskell.Interpreter (SourceCode(SourceCode))
 import LocalStorage (Key)
 import LocalStorage as LocalStorage
 import Monaco (Editor, getModel, layout, focus, setPosition, setValue) as Monaco
-import Prelude (Unit, bind, discard, not, pure, show, unit, void, (/), (-), ($), (<$>), (==))
+import Prelude (Unit, bind, discard, not, pure, show, unit, void, (+), (-), ($), (<$>), (==))
 import Types (ChildSlots, _editorSlot)
 
 initialState :: forall m. MonadEffect m => m State
@@ -28,8 +29,8 @@ initialState =
           , lastCompiledCode: Nothing
           , currentCodeIsCompiled: false
           , feedbackPaneDragStart: Nothing
-          , feedbackPaneDrag: Nothing
           , feedbackPaneExtend: 0
+          , feedbackPanePreviousExtend: 0
           }
 
 handleAction ::
@@ -75,14 +76,18 @@ handleAction bufferLocalStorageKey (HandleDropEvent event) = do
 
 handleAction _ (SetFeedbackPaneDragStart feedbackPaneDragStart) = assign _feedbackPaneDragStart feedbackPaneDragStart
 
-handleAction _ (SetFeedbackPaneDrag feedbackPaneDrag) = assign _feedbackPaneDrag feedbackPaneDrag
+handleAction _ ClearFeedbackPaneDragStart = do
+  feedbackPaneExtend <- use _feedbackPaneExtend
+  assign _feedbackPaneDragStart Nothing
+  assign _feedbackPanePreviousExtend feedbackPaneExtend
 
-handleAction _ FixFeedbackPaneExtend = do
+handleAction _ (FixFeedbackPaneExtend mouseY) = do
   feedbackPaneDragStart <- use _feedbackPaneDragStart
-  feedbackPaneDrag <- use _feedbackPaneDrag
-  assign _feedbackPaneExtend 6
-  assign _feedbackPaneDragStart Nothing
-  assign _feedbackPaneDrag Nothing
+  feedbackPanePreviousExtend <- use _feedbackPanePreviousExtend
+  case feedbackPaneDragStart of
+    Nothing -> pure unit
+    Just startMouseY ->
+      assign _feedbackPaneExtend $ clamp 0 100 (startMouseY - mouseY + feedbackPanePreviousExtend)
 
 ------------------------------------------------------------
 loadKeyBindings :: forall m. MonadEffect m => m KeyBindings

diff --git a/plutus-playground-client/src/Editor/Types.purs b/plutus-playground-client/src/Editor/Types.purs
@@ -24,8 +24,8 @@ data Action
   | SetKeyBindings KeyBindings
   | ToggleFeedbackPane
   | SetFeedbackPaneDragStart (Maybe Int)
-  | SetFeedbackPaneDrag (Maybe Int)
-  | FixFeedbackPaneExtend
+  | ClearFeedbackPaneDragStart
+  | FixFeedbackPaneExtend Int
 
 ------------------------------------------------------------
 allKeyBindings :: Array KeyBindings
@@ -46,8 +46,8 @@ newtype State
   , lastCompiledCode :: Maybe SourceCode
   , currentCodeIsCompiled :: Boolean
   , feedbackPaneDragStart :: Maybe Int
-  , feedbackPaneDrag :: Maybe Int
   , feedbackPaneExtend :: Int
+  , feedbackPanePreviousExtend :: Int
   }
 
 derive instance newtypeState :: Newtype State _
@@ -74,8 +74,8 @@ _currentCodeIsCompiled = _Newtype <<< prop (SProxy :: SProxy "currentCodeIsCompi
 _feedbackPaneDragStart :: Lens' State (Maybe Int)
 _feedbackPaneDragStart = _Newtype <<< prop (SProxy :: SProxy "feedbackPaneDragStart")
 
-_feedbackPaneDrag :: Lens' State (Maybe Int)
-_feedbackPaneDrag = _Newtype <<< prop (SProxy :: SProxy "feedbackPaneDrag")
-
 _feedbackPaneExtend :: Lens' State Int
 _feedbackPaneExtend = _Newtype <<< prop (SProxy :: SProxy "feedbackPaneExtend")
+
+_feedbackPanePreviousExtend :: Lens' State Int
+_feedbackPanePreviousExtend = _Newtype <<< prop (SProxy :: SProxy "feedbackPanePreviousExtend")
diff --git a/plutus-playground-client/src/Editor/View.purs b/plutus-playground-client/src/Editor/View.purs
@@ -17,8 +17,8 @@ import Editor.State (initEditor)
 import Editor.Types (Action(..), State(..), _warnings, allKeyBindings)
 import Effect.Aff.Class (class MonadAff)
 import Halogen.HTML (ClassName(ClassName), ComponentHTML, HTML, a, button, code_, div, div_, option, p_, pre, pre_, select, slot, text)
-import Halogen.HTML.Events (onClick, onDrag, onDragEnd, onDragOver, onDragStart, onDrop, onSelectedIndexChange)
-import Halogen.HTML.Properties (class_, classes, disabled, draggable, id_, selected, value)
+import Halogen.HTML.Events (onClick, onDragOver, onDrop, onMouseDown, onMouseMove, onMouseUp, onSelectedIndexChange)
+import Halogen.HTML.Properties (class_, classes, disabled, id_, selected, value)
 import Halogen.Monaco (KeyBindings(..), monacoComponent)
 import Icons (Icon(..), icon)
 import Language.Haskell.Interpreter (CompilationError(CompilationError, RawError), InterpreterError(CompilationErrors, TimeoutError), Warning, _InterpreterResult, _Warning)
@@ -27,6 +27,7 @@ import LocalStorage (Key)
 import Network.RemoteData (RemoteData(..), _Success, isLoading)
 import Prelude (const, map, not, pure, show, unit, ($), (<$>), (<<<), (<>), (==))
 import Types (ChildSlots, _editorSlot, HAction(..), View(..), WebCompilationResult)
+import Web.UIEvent.MouseEvent (MouseEvent, pageY)
 
 editorPreferencesSelect :: forall p. KeyBindings -> HTML p Action
 editorPreferencesSelect active =
@@ -84,6 +85,9 @@ editorPane initialContents bufferLocalStorageKey editorState@(State { keyBinding
     [ class_ (ClassName "code-editor")
     , onDragOver $ Just <<< HandleDragEvent
     , onDrop $ Just <<< HandleDropEvent
+    -- note
+    , onMouseMove feedbackPaneResizeMouseMoveHandler
+    , onMouseUp feedbackPaneResizeMouseUpHandler
     ]
     [ slot
         _editorSlot
@@ -99,15 +103,19 @@ editorPane initialContents bufferLocalStorageKey editorState@(State { keyBinding
 editorFeedback :: forall p. State -> WebCompilationResult -> HTML p Action
 editorFeedback editorState@(State { currentCodeIsCompiled, feedbackPaneExtend, feedbackPaneMinimised }) compilationResult =
   div
-    [ class_ $ ClassName "editor-feedback-container" ]
+    [ class_ $ ClassName "editor-feedback-container"
+    -- note
+    , onMouseMove feedbackPaneResizeMouseMoveHandler
+    , onMouseUp feedbackPaneResizeMouseUpHandler
+    ]
     [ div
         [ classes feedbackPaneClasses ]
         [ div
             [ class_ $ ClassName "editor-feedback-resize-bar"
-            , draggable true
-            , onDragStart $ \event -> Just $ SetFeedbackPaneDragStart Nothing
-            , onDrag $ \event -> Just $ SetFeedbackPaneDrag Nothing
-            , onDragEnd $ \_ -> Just $ FixFeedbackPaneExtend
+            , onMouseDown $ \event -> Just $ SetFeedbackPaneDragStart $ Just $ pageY event
+            -- note
+            , onMouseMove feedbackPaneResizeMouseMoveHandler
+            , onMouseUp feedbackPaneResizeMouseUpHandler
             ]
             (if feedbackPaneMinimised then [] else [ nbsp ])
         , div
@@ -171,6 +179,12 @@ editorFeedback editorState@(State { currentCodeIsCompiled, feedbackPaneExtend, f
           )
           compilationResult
 
+feedbackPaneResizeMouseMoveHandler :: MouseEvent -> Maybe Action
+feedbackPaneResizeMouseMoveHandler event = Just $ FixFeedbackPaneExtend $ pageY event
+
+feedbackPaneResizeMouseUpHandler :: MouseEvent -> Maybe Action
+feedbackPaneResizeMouseUpHandler event = Just $ ClearFeedbackPaneDragStart
+
 interpreterErrorPane :: forall p. InterpreterError -> Array (HTML p Action)
 interpreterErrorPane (TimeoutError error) = [ listGroupItem_ [ div_ [ text error ] ] ]
 

diff --git a/plutus-playground-client/static/editor.scss b/plutus-playground-client/static/editor.scss
@@ -55,7 +55,6 @@
 
     $feedback-header-height: 19px;
     $feedback-body-height: 200px;
-    $feedback-grow-step: 10px;
     $feedback-padding: 1em;
 
     .editor-feedback-container {
@@ -73,9 +72,9 @@
         border: 1px solid $gray-border-color;
         font-family: $font-family-monospace;
 
-        @for $n from 1 through 10 {
+        @for $n from 1 through 100 {
             &.expanded-#{$n} {
-                max-height: $feedback-header-height + $feedback-body-height + ($feedback-grow-step * $n);
+                max-height: $feedback-header-height + $feedback-body-height + $n;
             }
         }