feat: add new-pod buttons

ui/src/components/nodes/Code.tsx

@@ -59,7 +59,7 @@ import { useApolloClient } from "@apollo/client";
 import { NodeResizeControl, NodeResizer } from "reactflow";
 
 import "@reactflow/node-resizer/dist/style.css";
-import { ResizeIcon } from "./utils";
+import { NewPodButtons, ResizeIcon } from "./utils";
 
 export const ResultBlock = memo<any>(function ResultBlock({ id }) {
   const store = useContext(RepoContext)!;
@@ -536,6 +536,8 @@ export const CodeNode = memo<NodeProps>(function ({
               />
             </Box>
 
+            <NewPodButtons pod={pod} xPos={xPos} yPos={yPos} />
+
             {/* The header of code pods. */}
             <Box>
               {devMode && (
@@ -549,7 +551,7 @@ export const CodeNode = memo<NodeProps>(function ({
                   className="nodrag"
                 >
                   {id} at ({Math.round(xPos)}, {Math.round(yPos)}, w:{" "}
-                  {pod.width}, h: {pod.height})
+                  {pod.width}, h: {pod.height}), parent: {pod.parent}
                 </Box>
               )}
               <Box

ui/src/components/nodes/Rich.tsx

@@ -108,6 +108,7 @@ import { ProsemirrorPlugin, cx, htmlToProsemirrorNode } from "remirror";
 import { styled } from "@mui/material";
 
 import { MyYjsExtension } from "./YjsRemirror";
+import { NewPodButtons } from "./utils";
 
 function useLinkShortcut() {
   const [linkShortcut, setLinkShortcut] = useState<
@@ -808,6 +809,7 @@ export const RichNode = memo<Props>(function ({
                 isConnectable={isConnectable}
               />
             </Box>
+            <NewPodButtons pod={pod} xPos={xPos} yPos={yPos} />
             <Box>
               {devMode && (
                 <Box

ui/src/components/nodes/utils.tsx

@@ -6,6 +6,14 @@ import {
   XYPosition,
 } from "reactflow";
 
+import { useContext } from "react";
+
+import Button from "@mui/material/Button";
+
+import { useStore } from "zustand";
+
+import { RepoContext } from "../../lib/store";
+
 export function ResizeIcon() {
   return (
     <svg
@@ -275,3 +283,160 @@ export function getHelperLines(
       return result;
     }, defaultResult);
 }
+
+export function NewPodButtons({ pod, xPos, yPos }) {
+  const store = useContext(RepoContext);
+  if (!store) throw new Error("Missing BearContext.Provider in the tree");
+  const addNode = useStore(store, (state) => state.addNode);
+  return (
+    <>
+      {/* Bottom 1 */}
+      <Button
+        variant="outlined"
+        size="small"
+        sx={{
+          // place it at the BOTTOM of the pod, centered
+          position: "absolute",
+          bottom: "0px",
+          left: "25%",
+          transform: "translate(-50%, 50%)",
+          zIndex: 100,
+          whiteSpace: "nowrap",
+          // opacity: showToolbar ? 0.5 : 0,
+          opacity: 0,
+          "&:hover": {
+            opacity: 1,
+          },
+        }}
+        onClick={() => {
+          addNode("CODE", { x: xPos, y: yPos + pod!.height! + 50 }, pod.parent);
+        }}
+      >
+        + Code
+      </Button>
+
+      {/* Bottom 2 */}
+      <Button
+        variant="outlined"
+        size="small"
+        sx={{
+          position: "absolute",
+          bottom: "0px",
+          left: "75%",
+          transform: "translate(-50%, 50%)",
+          zIndex: 100,
+          whiteSpace: "nowrap",
+          // opacity: showToolbar ? 0.5 : 0,
+          opacity: 0,
+          "&:hover": {
+            opacity: 1,
+          },
+        }}
+        onClick={() => {
+          addNode("RICH", { x: xPos, y: yPos + pod!.height! + 50 }, pod.parent);
+        }}
+      >
+        + Note
+      </Button>
+      {/* Left 1 */}
+      <Button
+        variant="outlined"
+        size="small"
+        sx={{
+          // place it at the LEFT of the pod, centered
+          position: "absolute",
+          top: "25%",
+          left: "0px",
+          transform: "translate(-50%, -50%)",
+          zIndex: 100,
+          whiteSpace: "nowrap",
+          // opacity: showToolbar ? 0.5 : 0,
+          opacity: 0,
+          "&:hover": {
+            opacity: 1,
+          },
+        }}
+        onClick={() => {
+          addNode("CODE", { x: xPos - pod!.width! - 50, y: yPos }, pod.parent);
+        }}
+      >
+        + Code
+      </Button>
+
+      {/* Left 2 */}
+      <Button
+        variant="outlined"
+        size="small"
+        sx={{
+          // place it at the LEFT of the pod, centered
+          position: "absolute",
+          top: "75%",
+          left: "0px",
+          transform: "translate(-50%, -50%)",
+          zIndex: 100,
+          whiteSpace: "nowrap",
+          // opacity: showToolbar ? 0.5 : 0,
+          opacity: 0,
+          "&:hover": {
+            opacity: 1,
+          },
+        }}
+        onClick={() => {
+          addNode("RICH", { x: xPos - pod!.width! - 50, y: yPos }, pod.parent);
+        }}
+      >
+        + Note
+      </Button>
+
+      {/* Right 1 */}
+      <Button
+        variant="outlined"
+        size="small"
+        sx={{
+          // place at the RIGHT of the pod, centered
+          position: "absolute",
+          top: "25%",
+          right: "0px",
+          transform: "translate(50%, -50%)",
+          zIndex: 100,
+          whiteSpace: "nowrap",
+          // opacity: showToolbar ? 0.5 : 0,
+          opacity: 0,
+          "&:hover": {
+            opacity: 1,
+          },
+        }}
+        onClick={() => {
+          addNode("CODE", { x: xPos + pod!.width! + 50, y: yPos }, pod.parent);
+        }}
+      >
+        + Code
+      </Button>
+
+      {/* Right 2 */}
+      <Button
+        variant="outlined"
+        size="small"
+        sx={{
+          // place at the RIGHT of the pod, centered
+          position: "absolute",
+          top: "75%",
+          right: "0px",
+          transform: "translate(50%, -50%)",
+          zIndex: 100,
+          whiteSpace: "nowrap",
+          // opacity: showToolbar ? 0.5 : 0,
+          opacity: 0,
+          "&:hover": {
+            opacity: 1,
+          },
+        }}
+        onClick={() => {
+          addNode("RICH", { x: xPos + pod!.width! + 50, y: yPos }, pod.parent);
+        }}
+      >
+        + Note
+      </Button>
+    </>
+  );
+}