feat: more work on canvas rendering

.vscode/settings.json

@@ -12,11 +12,14 @@
     "oxanium",
     "prebuild",
     "purescript",
+    "purs",
+    "purs ts",
     "scenegraph",
     "scrollbar",
     "seedrandom",
     "spago",
     "textfield",
+    "ts",
     "tslib",
     "unconnectable",
     "unmount",

nodemon.json

@@ -1,6 +1,6 @@
 {
   "$schema": "http://json.schemastore.org/nodemon",
-  "exec": "pnpm run build:purescript",
+  "exec": "yarn build:purescript",
   "watch": ["src"],
-  "ext": "purs"
+  "ext": "purs,ts"
 }

package.json

@@ -20,6 +20,7 @@
     "@thi.ng/vectors": "^4.4.3",
     "normalize.css": "^8.0.1",
     "seedrandom": "^3.0.5",
+    "src": "^1.1.2",
     "tslib": "^1.13.0"
   },
   "devDependencies": {
@@ -43,5 +44,8 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/Mateiadrielrafael/lunarbox.git"
+  },
+  "alias": {
+    "src": "./src"
   }
 }

packages.dhall

@@ -1,24 +1,24 @@
 let upstream =
-      https://github.com/purescript/package-sets/releases/download/psc-0.13.6-20200423/packages.dhall sha256:c180a06bb5444fd950f8cbdd6605c644fd246deb397e62572b8f4a6b9dbcaf22
+      https://github.com/purescript/package-sets/releases/download/psc-0.13.6-20200507/packages.dhall sha256:9c1e8951e721b79de1de551f31ecb5a339e82bbd43300eb5ccfb1bf8cf7bbd62
 
 let overrides = {=}
 
 let additions =
       { colehaus-graphs =
-          { dependencies = [ "ordered-collections", "catenable-lists" ]
-          , repo = "https://github.com/colehaus/purescript-graphs"
-          , version = "v7.0.0"
-          }
+        { dependencies = [ "ordered-collections", "catenable-lists" ]
+        , repo = "https://github.com/colehaus/purescript-graphs"
+        , version = "v7.0.0"
+        }
       , halogen-svg =
-          { dependencies = [ "strings", "halogen", "dom-indexed" ]
-          , repo = "https://github.com/statebox/purescript-halogen-svg"
-          , version = "master"
-          }
+        { dependencies = [ "strings", "halogen", "dom-indexed" ]
+        , repo = "https://github.com/statebox/purescript-halogen-svg"
+        , version = "master"
+        }
       , data-default =
-          { dependencies = [ "maybe", "record", "psci-support", "lists" ]
-          , repo = "https://github.com/thought2/purescript-data-default"
-          , version = "v0.3.2"
-          }
+        { dependencies = [ "maybe", "record", "psci-support", "lists" ]
+        , repo = "https://github.com/thought2/purescript-data-default"
+        , version = "v0.3.2"
+        }
       }
 
 in  upstream // overrides // additions

public/index.js

@@ -2,11 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 require("./styles/index.scss");
 const Main_1 = require("../output/Main");
-const typescript_1 = require("../src/typescript");
 const main = Main_1.main;
 const production = process.env.NODE_ENV === "production";
-const app = typescript_1.makeApp(production);
-const start = main(app);
+const start = main(production);
 if (!production && module.hot) {
     module.hot.accept(() => location.reload(true));
 }

public/index.ts

@@ -1,13 +1,11 @@
 import "./styles/index.scss"
 import { main as mainImpl } from "../output/Main"
-import { makeApp } from "../src/typescript"
-import { App, Effect } from "../src/Foreign/Render"
+import { Effect } from "../src/Foreign/Render"
 
-const main = mainImpl as (app: App) => Effect<void>
+const main = mainImpl as (prod: boolean) => Effect<void>
 
 const production = process.env.NODE_ENV === "production"
-const app = makeApp(production)
-const start = main(app)
+const start = main(production)
 
 if (!production && module.hot) {
   module.hot.accept(() => location.reload(true))

public/styles/pages/editor/scene.scss

@@ -9,7 +9,7 @@
   overflow: hidden;
 }
 
-#editor > #scene svg {
+#editor > #scene canvas {
   height: 100%;
   width: 100%;
 }

src/Component/Editor.purs

@@ -12,7 +12,6 @@ import Control.Monad.State (execState, get, gets, modify_, put)
 import Control.MonadZero (guard)
 import Data.Argonaut (Json)
 import Data.Array ((!!))
-import Data.Default (def)
 import Data.Foldable (find, foldr, for_, traverse_)
 import Data.Int (toNumber)
 import Data.Lens (_Just, over, preview, set, view)
@@ -49,14 +48,13 @@ import Lunarbox.Data.Editor.ExtendedLocation (ExtendedLocation(..))
 import Lunarbox.Data.Editor.FunctionName (FunctionName(..))
 import Lunarbox.Data.Editor.Node.NodeData (NodeData(..), _NodeDataPosition, _NodeDataSelected, _NodeDataZPosition)
 import Lunarbox.Data.Editor.Node.NodeDescriptor (onlyEditable)
-import Lunarbox.Data.Editor.Node.NodeId (NodeId(..))
+import Lunarbox.Data.Editor.Node.NodeId (NodeId)
 import Lunarbox.Data.Editor.Node.PinLocation (Pin(..))
 import Lunarbox.Data.Editor.Project (_projectNodeGroup)
 import Lunarbox.Data.Editor.Save (stateToJson)
-import Lunarbox.Data.Editor.State (State, Tab(..), _atCurrentNodeData, _atInputCount, _currentCamera, _currentFunction, _currentNodes, _currentTab, _functions, _isAdmin, _isExample, _isSelected, _isVisible, _lastMousePosition, _name, _nextId, _nodeData, _nodeSearchTerm, _panelIsOpen, _partialFrom, _partialTo, _sceneScale, _unconnectablePins, adjustSceneScale, clearPartialConnection, compile, createNode, deleteFunction, deleteSelection, functionExists, getSceneMousePosition, initializeFunction, makeUnconnetacbleList, pan, preventDefaults, removeConnection, resetNodeOffset, searchNode, setCurrentFunction, setRuntimeValue, tabIcon, tryConnecting)
+import Lunarbox.Data.Editor.State (State, Tab(..), _atCurrentNodeData, _atInputCount, _currentCamera, _currentFunction, _currentNodes, _currentTab, _functions, _isAdmin, _isExample, _isSelected, _isVisible, _lastMousePosition, _name, _nodeData, _nodeSearchTerm, _panelIsOpen, _partialFrom, _partialTo, _sceneScale, _unconnectablePins, adjustSceneScale, clearPartialConnection, compile, createNode, deleteFunction, deleteSelection, functionExists, getSceneMousePosition, initializeFunction, makeUnconnetacbleList, pan, preventDefaults, removeConnection, resetNodeOffset, searchNode, setCurrentFunction, setRuntimeValue, tabIcon, tryConnecting)
 import Lunarbox.Data.Graph (wouldCreateCycle)
 import Lunarbox.Data.Graph as G
-import Lunarbox.Data.Map (maybeBimap)
 import Lunarbox.Data.MouseButton (MouseButton(..), isPressed)
 import Lunarbox.Data.Route (Route(..))
 import Lunarbox.Page.Editor.EmptyEditor (emptyEditor)
@@ -103,12 +101,14 @@ data Action
   | Autosave Json
   | PreventDefaults Event
   | Navigate Route
+  | LoadNodes
 
 data Output
   = Save Json
 
 type ChildSlots
   = ( tree :: Slot TreeC.Query TreeC.Output Unit
+    , scene :: Slot Scene.Query Void Unit
     )
 
 -- Shorthand for manually passing the types of the actions and child slots
@@ -123,30 +123,6 @@ searchNodeInputRef = RefLabel "search node"
 searchNodeClassName :: String
 searchNodeClassName = "search-node"
 
--- Actions to run the scene component with
-sceneActions :: Scene.Actions Action
-sceneActions =
-  { mouseUp: Just SceneMouseUp
-  , zoom: Just <<< SceneZoom
-  , mouseDown: Just <<< SceneMouseDown
-  , mouseMove: Just <<< SceneMouseMove
-  , selectNode: (Just <<< _) <<< SelectNode
-  , selectOutput: (Just <<< _) <<< SelectOutput
-  , removeConnection: ((Just <<< _) <<< _) <<< RemoveConnection
-  , selectInput: ((Just <<< _) <<< _) <<< SelectInput
-  , setValue: ((Just <<< _) <<< _) <<< SetRuntimeValue
-  }
-
--- Create a scene with the set of actions above
-createScene :: forall m. Scene.Input Action ChildSlots m -> HH.ComponentHTML Action ChildSlots m
-createScene = Scene.scene sceneActions
-
--- This is a helper monad which just generates an id
-createId :: forall m. HalogenM (EditorState m) Action ChildSlots Void m (Tuple NodeId (State Action ChildSlots m -> State Action ChildSlots m))
-createId = do
-  { nextId } <- get
-  pure $ Tuple (NodeId $ show nextId) $ over _nextId (_ + 1)
-
 component :: forall m q. MonadAff m => MonadEffect m => MonadReader Config m => Navigate m => Component HH.HTML q (EditorState m) Output m
 component =
   mkComponent
@@ -352,6 +328,8 @@ component =
         handleAction $ Autosave oldState
     PreventDefaults event -> preventDefaults event
     Navigate route -> navigate route
+    LoadNodes -> do
+      pure unit
 
   handleTreeOutput :: TreeC.Output -> Maybe Action
   handleTreeOutput = case _ of
@@ -479,29 +457,7 @@ component =
       group <-
         preview (_projectNodeGroup currentFunction) project
       pure
-        $ createScene
-            { unconnectablePins
-            , project
-            , typeMap
-            , lastMousePosition
-            , functionData
-            , partialConnection
-            , valueMap
-            , functionUis
-            , scale: sceneScale
-            , typeColors: colorMap
-            , functionName: currentFunction
-            , camera: fromMaybe def $ Map.lookup currentFunction cameras
-            , nodeData:
-              maybeBimap
-                ( \(Tuple name id) value ->
-                    if name /= currentFunction then
-                      Nothing
-                    else
-                      Just $ Tuple id value
-                )
-                nodeData
-            }
+        $ HH.slot (SProxy :: _ "scene") unit Scene.component unit absurd
 
   logoElement =
     container "sidebar-logo-container"