Graph based design (#5)

* Initial graph-based design with react-flow.

* add scope resize

* pan-on-scroll for touchpad panning

* Use mouse pos for drag; do not drag out of scope.

* Let getScopeAt see up-to-date nodes.

* Do not set parent as dirty when a node moves.

* calculate absolute pos for all ancestors when drop

* sort nodes by level after scope-drop

* fix node.positionAbsolute not found issue

* add monaco editor to CodeNode

* fix navigation-unsave-alert due to react-router-dom v6

* typo: add back update_intervalId

* add execution output

* remove debugging info on signin header

Author: lihebi

api/prisma/schema.prisma

@@ -60,16 +60,31 @@ model Repo {
 
 enum PodType {
     CODE
+    SCOPE
     DECK
     WYSIWYG
     MD
     REPL
 }
 
+model Edge {
+    // id     String  @id @default(uuid())
+    from   Pod    @relation("FROM", fields: [fromId], references: [id])
+    fromId String
+    to     Pod    @relation("TO", fields: [toId], references: [id])
+    toId   String
+
+    @@id([fromId, toId])
+}
+
 model Pod {
     id        String  @id @default(uuid())
     parent    Pod?    @relation("PARENT", fields: [parentId], references: [id])
     parentId  String?
+    x         Float   @default(0)
+    y         Float   @default(0)
+    width     Float   @default(0)
+    height    Float   @default(0)
     index     Int
     // TODO how to specify the order of children
     //
@@ -112,6 +127,8 @@ model Pod {
 
     repoId String
     // this is just a place holder. Not useful
+    to     Edge[] @relation("TO")
+    from   Edge[] @relation("FROM")
 }
 
 // model Deck {

api/src/resolver.ts

@@ -367,6 +367,17 @@ export const resolvers = {
         },
         data: {
           ...input,
+          parent:
+            input.parent && input.parent !== "ROOT"
+              ? {
+                  connect: {
+                    id: input.parent,
+                  },
+                }
+              : undefined,
+          children: {
+            connect: input.children.map((id) => ({ id })),
+          },
         },
       });
       console.log("Updated pod", pod);

api/src/typedefs.ts

@@ -42,6 +42,10 @@ export const typeDefs = gql`
     thundar: Boolean
     utility: Boolean
     name: String
+    x: Float
+    y: Float
+    width: Float
+    height: Float
   }
 
   input PodInput {
@@ -61,6 +65,12 @@ export const typeDefs = gql`
     thundar: Boolean
     utility: Boolean
     name: String
+    x: Float
+    y: Float
+    width: Float
+    height: Float
+    parent: ID
+    children: [ID]
   }
 
   type Query {

ui/package.json

@@ -40,8 +40,10 @@
     "react": "^18.2.0",
     "react-app-rewired": "^2.1.8",
     "react-dom": "^18.2.0",
+    "react-flow-renderer": "^10.3.17",
     "react-icons": "^4.2.0",
     "react-monaco-editor": "^0.50.1",
+    "react-moveable": "^0.39.2",
     "react-redux": "^8.0.2",
     "react-router-dom": "^6.4.0",
     "react-scripts": "5.0.1",
@@ -52,7 +54,6 @@
     "socket.io-client": "^4.1.3",
     "stompjs": "^2.3.3",
     "strip-ansi": "^7.0.0",
-    "use-resize-observer": "^9.0.2",
     "web-vitals": "^3.0.1",
     "xterm": "^4.13.0",
     "xterm-addon-fit": "^0.5.0"

ui/src/components/Header.js

@@ -160,7 +160,6 @@ export function Header() {
             </Button>
           </Box>
 
-          {isSignedIn() ? "yes" : "no"}
           {isSignedIn() ? (
             <Box sx={{ flexGrow: 0 }}>
               <Tooltip title="Open settings">

ui/src/components/MyMonaco.js

@@ -416,6 +416,7 @@ export function MyMonaco({
         autoIndent: "full",
         // autoIndent: true,
         overviewRulerLanes: 0,
+        automaticLayout: true,
         scrollbar: {
           alwaysConsumeMouseWheel: false,
           vertical: "hidden",

ui/src/components/repo/edges.js

@@ -0,0 +1,10 @@
+export default [
+  { id: "e1-2", source: "1", target: "2", animated: true },
+  { id: "e1-3", source: "1", target: "3" },
+  { id: "e2a-4a", source: "2a", target: "4a" },
+  { id: "e3-4", source: "3", target: "4" },
+  { id: "e3-4b", source: "3", target: "4b" },
+  { id: "e4a-4b1", source: "4a", target: "4b1" },
+  { id: "e4a-4b2", source: "4a", target: "4b2" },
+  { id: "e4b1-4b2", source: "4b1", target: "4b2" },
+];