Fix (better drag-n-drop): Scope Handler & Scope right-click Menu for adding new nodes (#232)

li-xin-yi · web-flow · commit c194ac21bd78 · 2023-04-21T10:15:16.000-07:00
* add drag handler &amp; scope context menu

* clean up
diff --git a/ui/src/components/Canvas.tsx b/ui/src/components/Canvas.tsx
@@ -524,10 +524,22 @@ function CanvasImpl() {
   const [showContextMenu, setShowContextMenu] = useState(false);
   const [points, setPoints] = useState({ x: 0, y: 0 });
   const [client, setClient] = useState({ x: 0, y: 0 });
+  const [parentNode, setParentNode] = useState("ROOT");
 
   const onPaneContextMenu = (event) => {
     event.preventDefault();
     setShowContextMenu(true);
+    setParentNode("ROOT");
+    setPoints({ x: event.pageX, y: event.pageY });
+    setClient({ x: event.clientX, y: event.clientY });
+  };
+
+  const onNodeContextMenu = (event, node) => {
+    if (node?.type !== "scope") return;
+
+    event.preventDefault();
+    setShowContextMenu(true);
+    setParentNode(node.id);
     setPoints({ x: event.pageX, y: event.pageY });
     setClient({ x: event.clientX, y: event.clientY });
   };
@@ -603,6 +615,7 @@ function CanvasImpl() {
           maxZoom={10}
           minZoom={0.1}
           onPaneContextMenu={onPaneContextMenu}
+          onNodeContextMenu={onNodeContextMenu}
           nodeTypes={nodeTypes}
           // custom edge for easy connect
           edgeTypes={edgeTypes}
@@ -657,17 +670,22 @@ function CanvasImpl() {
             x={points.x}
             y={points.y}
             addCode={() =>
-              addNode("code", project({ x: client.x, y: client.y }))
+              addNode("code", project({ x: client.x, y: client.y }), parentNode)
             }
             addScope={() =>
-              addNode("scope", project({ x: client.x, y: client.y }))
+              addNode(
+                "scope",
+                project({ x: client.x, y: client.y }),
+                parentNode
+              )
             }
             addRich={() =>
-              addNode("rich", project({ x: client.x, y: client.y }))
+              addNode("rich", project({ x: client.x, y: client.y }), parentNode)
             }
             onShareClick={() => {
               setShareOpen(true);
             }}
+            parentNode={null}
           />
         )}
         {shareOpen && <ShareProjDialog open={shareOpen} id={repoId || ""} />}
diff --git a/ui/src/components/nodes/Scope.tsx b/ui/src/components/nodes/Scope.tsx
@@ -113,7 +113,6 @@ export const ScopeNode = memo<NodeProps>(function ScopeNode({
         border: isCutting ? "dashed 2px red" : "solid 1px #d6dee6",
         borderRadius: "4px",
       }}
-      className="custom-drag-handle"
     >
       {/* <NodeResizer color="#ff0071" minWidth={100} minHeight={30} /> */}
       <NodeResizeControl
@@ -194,6 +193,7 @@ export const ScopeNode = memo<NodeProps>(function ScopeNode({
       <Box
         // bgcolor={"rgb(225,225,225)"}
         sx={{ display: "flex" }}
+        className="custom-drag-handle"
       >
         {devMode && (
           <Box
diff --git a/ui/src/lib/store/canvasSlice.tsx b/ui/src/lib/store/canvasSlice.tsx
@@ -169,7 +169,8 @@ function getScopeAt(
 function getNodePositionInsideScope(
   node: Node,
   scope: Node,
-  nodesMap
+  nodesMap,
+  nodeHeight: number = 0
 ): XYPosition {
   // compute the actual position
   let [x, y] = getAbsPos(node, nodesMap);
@@ -178,11 +179,11 @@ function getNodePositionInsideScope(
   y -= dy;
   // auto-align the node to, keep it bound in the scope
   // FIXME: it assumes the scope must be larger than the node
-
   x = Math.max(x, 0);
   x = Math.min(x, scope.width! - node.width!);
   y = Math.max(y, 0);
-  y = Math.min(y, scope.height! - node.height!);
+  // FIXME: node.height can be undefined
+  y = Math.min(y, scope.height! - nodeHeight);
   return { x, y };
 }
 
@@ -250,7 +251,11 @@ export interface CanvasSlice {
   setPaneFocus: () => void;
   setPaneBlur: () => void;
 
-  addNode: (type: "code" | "scope" | "rich", position: XYPosition) => void;
+  addNode: (
+    type: "code" | "scope" | "rich",
+    position: XYPosition,
+    parent: string
+  ) => void;
 
   pastingNodes?: Node[];
   headPastingNodes?: Set<string>;
@@ -390,7 +395,7 @@ export const createCanvasSlice: StateCreator<MyState, [], [], CanvasSlice> = (
     get().addPod({
       id: node.id,
       children: [],
-      parent,
+      parent: "ROOT",
       type: nodetype2dbtype(node.type || ""),
       lang: "python",
       x: node.position.x,
@@ -401,6 +406,10 @@ export const createCanvasSlice: StateCreator<MyState, [], [], CanvasSlice> = (
       dirty: true,
       pending: true,
     });
+    if (parent !== "ROOT") {
+      // we don't assign its parent when created, because we have to adjust its position to make it inside its parent.
+      get().moveIntoScope(node.id, parent);
+    }
     get().updateView();
   },
 
@@ -610,7 +619,15 @@ export const createCanvasSlice: StateCreator<MyState, [], [], CanvasSlice> = (
     }
     // let [x, y] = getAbsPos(node, nodesMap);
     // let position = getNodePositionInsideParent(node, scope, { x, y });
-    let position = getNodePositionInsideScope(node, scope, nodesMap);
+
+    // FIXME: since richNode and codeNode doesn't have height when it's created, we have to pass its height manually in case crash.
+    const nodeHeight = get().getPod(nodeId)?.height || 0;
+    let position = getNodePositionInsideScope(
+      node,
+      scope,
+      nodesMap,
+      nodeHeight
+    );
     let newNode: Node = {
       ...node,
       position,
