rework yjs-store-db syncing (#205)

* rework yjs-store-db syncing

* fix update dimension for paste/cut; do not moveIntoScope when already in it

* fix: update parent node's children in cutEnd

Author: lihebi

api/src/resolver.ts

@@ -7,7 +7,6 @@ import {
   users,
 } from "./resolver_user";
 import {
-  addPod,
   createRepo,
   deletePod,
   deleteRepo,
@@ -73,7 +72,6 @@ export const resolvers = {
     updateRepo,
     deleteRepo,
     clearUser: () => {},
-    addPod,
     updatePod,
     deletePod,
     addCollaborator,

api/src/resolver_repo.ts

@@ -284,83 +284,69 @@ export async function deleteCollaborator(
   return true;
 }
 
-export async function addPod(_, { repoId, parent, index, input }, { userId }) {
-  // make sure the repo is writable by this user
+export async function updatePod(_, { id, repoId, input }, { userId }) {
   if (!userId) throw new Error("Not authenticated.");
   await ensureRepoEditAccess({ repoId, userId });
-
-  // update all other records
-  await prisma.pod.updateMany({
+  // if repoId has id, just update
+  let pod_found = await prisma.pod.findFirst({
     where: {
+      id,
       repo: {
         id: repoId,
       },
-      index: {
-        gte: index,
-      },
-      parent:
-        parent === "ROOT"
-          ? null
-          : {
-              id: parent,
-            },
-    },
-    data: {
-      index: {
-        increment: 1,
-      },
     },
   });
-
-  let { id: podId } = input;
-  const pod = await prisma.pod.create({
-    data: {
-      id: podId,
-      ...input,
-      // In case of [], create will throw an error. Thus I have to pass undefined.
-      children: input.children.length > 0 ? input.children : undefined,
-      index,
-      repo: {
-        connect: {
-          id: repoId,
+  if (pod_found) {
+    // if repoId doesn't have id, create it IF input.parent exists
+    const pod = await prisma.pod.update({
+      where: {
+        id,
+      },
+      data: {
+        ...input,
+        parent:
+          input.parent && input.parent !== "ROOT"
+            ? {
+                connect: {
+                  id: input.parent,
+                },
+              }
+            : undefined,
+        children: {
+          connect: input.children?.map((id) => ({ id })),
         },
       },
-      parent:
-        parent === "ROOT"
-          ? undefined
-          : {
-              connect: {
-                id: parent,
-              },
-            },
-    },
-  });
-
-  return true;
-}
-
-export async function updatePod(_, { id, input }, { userId }) {
-  if (!userId) throw new Error("Not authenticated.");
-  await ensurePodEditAccess({ id, userId });
-  const pod = await prisma.pod.update({
-    where: {
-      id,
-    },
-    data: {
-      ...input,
-      parent:
-        input.parent && input.parent !== "ROOT"
-          ? {
-              connect: {
-                id: input.parent,
-              },
-            }
-          : undefined,
-      children: {
-        connect: input.children?.map((id) => ({ id })),
+    });
+  } else {
+    // if repoId doesn't have id, create it IF input.parent exists, otherwise throw error.
+    await prisma.pod.create({
+      data: {
+        id,
+        ...input,
+        // Dummy index because it is a required field for historical reasons.
+        index: 0,
+        parent:
+          input.parent && input.parent !== "ROOT"
+            ? {
+                connect: {
+                  id: input.parent,
+                },
+              }
+            : undefined,
+        // In case of [], create will throw an error. Thus I have to pass undefined.
+        // children: input.children.length > 0 ? input.children : undefined,
+        children: {
+          connect: input.children?.map((id) => ({ id })),
+        },
+        repo: {
+          connect: {
+            id: repoId,
+          },
+        },
       },
-    },
-  });
+    });
+  }
+
   return true;
 }
 

api/src/typedefs.ts

@@ -116,9 +116,8 @@ export const typeDefs = gql`
     createRepo: Repo
     updateRepo(id: ID, name: String): Boolean
     deleteRepo(id: ID): Boolean
-    addPod(repoId: String, parent: String, index: Int, input: PodInput): Boolean
     deletePod(id: String, toDelete: [String]): Boolean
-    updatePod(id: String, input: PodInput): Boolean
+    updatePod(id: String, repoId: String, input: PodInput): Boolean
     clearUser: Boolean
     clearRepo: Boolean
     clearPod: Boolean

ui/package.json

@@ -10,6 +10,7 @@
     "@emotion/styled": "^11.10.5",
     "@mui/icons-material": "^5.10.9",
     "@mui/material": "^5.10.10",
+    "@reactflow/node-resizer": "^1.2.0",
     "@remirror/extension-react-tables": "^2.2.9",
     "@remirror/extension-sub": "^2.0.9",
     "@remirror/extension-text-highlight": "^2.0.10",
@@ -41,7 +42,7 @@
     "react-resizable": "^3.0.4",
     "react-router-dom": "^6.4.2",
     "react-scripts": "5.0.1",
-    "reactflow": "^11.3.0",
+    "reactflow": "^11.4.0",
     "remirror": "^2.0.21",
     "slate": "^0.82.1",
     "slate-history": "^0.66.0",

ui/src/App.css

@@ -74,3 +74,22 @@
 .my-underline {
   text-decoration: wavy underline red;
 }
+
+.react-flow__node-scope.active {
+  box-shadow: 0px 0px 12px 0px rgba(100, 100, 100, 0.9);
+}
+
+.react-flow__node-scope.selected,
+.react-flow__node-scope:hover {
+  box-shadow: 0px 0px 8px 0px rgba(100, 100, 100, 0.5);
+}
+
+.react-flow__node-scope.selected {
+  border-width: 2px;
+}
+
+.react-flow__node.cutting {
+  /* box-shadow: 0px 0px 8px 0px rgba(100, 100, 100, 0.5); */
+  /* a dashed red border */
+  border: 2px dashed red;
+}