WIP - Editor updates

src/client/App.mad

@@ -1,72 +1,22 @@
-
 import type { Action, Element } from "MadUI"
-
 import type { State } from "@client/State"
-import { generateCustomVariables } from "@client/Style"
 
 import Math from "Math"
 
 import { MouseEvent, className, div, id, onMouseMove, style, onMouseUp, text, throttleAction } from "MadUI"
 
+import { dragOff, handleDrag } from "@client/actions/DragPlayground"
 import { Router } from "@client/Router"
 
-VERTICAL_SPLIT_MIN_LEFT :: Integer
-VERTICAL_SPLIT_MIN_LEFT = 200
-
-handleDrag :: Action State
-handleDrag = throttleAction(
-  40,
-  (currentState, event) => if (currentState.playground.dragData.dragging) {
-    where(event) {
-      MouseEvent({ clientX }) =>
-        [
-          of(
-            (state) => (
-              {
-                ...state,
-                playground: {
-                  ...state.playground,
-                  dragData: {
-                    verticalSplitPosition: Math.max(VERTICAL_SPLIT_MIN_LEFT, clientX - 40),
-                    dragging: true,
-                  },
-                },
-              }
-            ),
-          ),
-        ]
-
-      _ =>
-        []
-    }
-  } else { [] },
-)
-
-
-handleDragEnd :: Action State
-handleDragEnd = (_, _) => [
-  of(
-    (state) => (
-      {
-        ...state,
-        playground: {
-          ...state.playground,
-          dragData: { ...state.playground.dragData, dragging: false },
-        },
-      }
-    ),
-  ),
-]
 
 
 App :: State -> Element State
 export App = (state) =>
   <div
-    onMouseMove={handleDrag}
-    onMouseUp={handleDragEnd}
     id="madlib-website"
     className="madlib-website-app"
-    style={generateCustomVariables(state)}
+    onMouseUp={dragOff}
+    onMouseMove={handleDrag}
   >
     {Router(state)}
   </div>

src/client/Router.mad

@@ -1,7 +1,7 @@
 import type { Element } from "MadUI"
-
 import type { State } from "@client/State"
 
+
 import { switchRoute } from "MadUI"
 
 import Community from "@client/pages/Community"
@@ -32,7 +32,7 @@ ROUTES = [
 Router :: State -> Element State
 export Router = (state) => pipe(
   map(where {
-    #[str, view] => #[preSlash(str), () => view(state)]
+    #[str, view] => #[str != "*" ? preSlash(str) : str, () => view(state)]
   }),
   switchRoute,
 )(ROUTES)

src/client/State.mad

@@ -99,19 +99,31 @@ export alias Content = {
 
 export type LoadingState = Loading | Transitioning | Ready
 
+export type PlaypenStatus = PlaypenHidden | PlaypenActive | PlaypenEditor
+
 export alias State = {
   content :: Content,
   loadingState :: LoadingState,
   showNav :: Boolean,
   showDocNav :: Boolean,
   search :: String,
+  playpen :: {
+    status :: PlaypenStatus,
+    history :: List String
+  },
   playground :: {
     data :: Playground,
-    dragData :: { dragging :: Boolean, verticalSplitPosition :: Integer },
+    dragData :: {
+      draggingVertical :: Boolean,
+      draggingHorizontal :: Boolean,
+      outputEdge :: Integer,
+      playgroundEdge :: Integer
+    },
   },
   debug :: Boolean
 }
 
+
 INITIAL_STATE :: State
 export INITIAL_STATE = {
   content: DEFAULT_CONTENT,
@@ -121,9 +133,13 @@ export INITIAL_STATE = {
   // same
   showDocNav: false,
   search: "",
+  playpen: {
+    status: PlaypenHidden,
+    history: []
+  },
   playground: {
     data: { code: INITIAL_CODE, id: Nothing, output: Nothing },
-    dragData: { verticalSplitPosition: 9999, dragging: false },
+    dragData: { outputEdge: 240, playgroundEdge: 352, draggingVertical: false, draggingHorizontal: false },
   },
   debug: false
 }

src/client/_zindex.scss

@@ -8,6 +8,11 @@ $z-three: 3000;
 $z-two: 2000;
 $z-one: 1000;
 
+$z-playpen: 7100;
+$z-playpen-edge: 7102;
+$z-playpen-container: 7103;
+$z-playpen-run-button: 7101;
+
 $z-nav: 9001;
 $z-subnav: 8001;
 $z-subnav-base: 8000;

src/client/actions/CopyToClipboard.mad

@@ -0,0 +1,22 @@
+import type { Action } from "MadUI"
+import type { State } from "@client/State"
+import { Wish } from "Wish"
+
+copyToClipboardHandler :: String -> Action State
+export copyToClipboardHandler = (c) => (s, _) => [
+  Wish((_, good) => good((_) => {
+    #- navigator.clipboard.writeText(c) -#
+
+    return {
+      ...s,
+      playground: {
+        ...s.playground,
+        data: {
+          ...s.playground.data,
+          code: c
+        }
+      }
+    }
+  }))
+]
+

src/client/actions/DragPlayground.mad

@@ -0,0 +1,110 @@
+import IO from "IO"
+import Math from "Math"
+import type { Action } from "MadUI"
+import type { State } from "@client/State"
+import { throttleAction, MouseEvent, onMouseMove, onMouseUp } from "MadUI"
+
+HORIZONTAL_SPLIT_MIN_LEFT :: Integer
+HORIZONTAL_SPLIT_MIN_LEFT = 240
+// dragOff
+// dragMove
+
+
+EDGE_POSITION :: Integer
+EDGE_POSITION = 200
+
+handleDrag :: Action State
+export handleDrag = throttleAction(
+  40,
+  (currentState, event) => {
+    vv = currentState.playground.dragData.draggingVertical
+    hh = currentState.playground.dragData.draggingHorizontal
+    ve = currentState.playground.dragData.playgroundEdge
+    he = currentState.playground.dragData.outputEdge
+    if ( vv || hh ) {
+      where(event) {
+        MouseEvent({ clientX, clientY }) =>
+          [
+            of(
+              (state) => (
+                {
+                  ...state,
+                  playground: {
+                    ...state.playground,
+                    dragData: {
+                      ...state.playground.dragData,
+                      playgroundEdge: vv ? Math.max(EDGE_POSITION, clientY - 32) : ve,
+                      outputEdge: hh ? Math.max(HORIZONTAL_SPLIT_MIN_LEFT, clientX - 32) : he,
+                      draggingVertical: vv,
+                      draggingHorizontal: hh,
+                    },
+                  },
+                }
+              ),
+            ),
+          ]
+        _ =>
+          []
+      }
+    } else {
+      []
+    }
+  }
+)
+
+
+dragOff :: Action State
+export dragOff = (_, _) => [
+  of(
+    (state) => (
+      {
+        ...state,
+        playground: {
+          ...state.playground,
+          dragData: {
+            ...state.playground.dragData,
+            draggingVertical: false,
+            draggingHorizontal: false
+          },
+        },
+      }
+    ),
+  ),
+]
+
+dragVertical :: Action State
+export dragVertical = (_, _) => [
+  of(
+    (state) => (
+      {
+        ...state,
+        playground: {
+          ...state.playground,
+          dragData: {
+            ...state.playground.dragData,
+            draggingVertical: true
+          }
+        }
+      }
+    )
+  )
+]
+
+
+dragHorizontal :: Action State
+export dragHorizontal = (_, _) => [
+  of(
+    (state) => (
+      {
+        ...state,
+        playground: {
+          ...state.playground,
+          dragData: {
+            ...state.playground.dragData,
+            draggingHorizontal: true
+          }
+        }
+      }
+    )
+  )
+]

src/client/actions/DragPlaygroundOutput.mad

@@ -0,0 +1,56 @@
+import type { Action } from "MadUI"
+import type { State } from "@client/State"
+import Math from "Math"
+import { throttleAction, MouseEvent, onMouseMove, onMouseUp } from "MadUI"
+
+HORIZONTAL_SPLIT_MIN_LEFT :: Integer
+HORIZONTAL_SPLIT_MIN_LEFT = 240
+
+handleDragOutput :: Action State
+export handleDragOutput = throttleAction(
+  40,
+  (currentState, event) => if (currentState.playground.dragData.draggingHorizontal) {
+    where(event) {
+      MouseEvent({ clientX }) =>
+        [
+          of(
+            (state) => (
+              {
+                ...state,
+                playground: {
+                  ...state.playground,
+                  dragData: {
+                    ...state.playground.dragData,
+                    outputEdge: Math.max(HORIZONTAL_SPLIT_MIN_LEFT, clientX - 40),
+                    draggingHorizontal: true,
+                  },
+                },
+              }
+            ),
+          ),
+        ]
+
+      _ =>
+        []
+    }
+  } else { [] },
+)
+
+
+handleDragOutputEnd :: Action State
+export handleDragOutputEnd = (_, _) => [
+  of(
+    (state) => (
+      {
+        ...state,
+        playground: {
+          ...state.playground,
+          dragData: {
+            ...state.playground.dragData,
+            draggingHorizontal: false
+          },
+        },
+      }
+    ),
+  ),
+]