Fix: Minor fixes

ui/src/components/Canvas.tsx

@@ -121,15 +121,17 @@ function verifyConsistency(nodes: Node[], nodesMap: YMap<Node>) {
       );
       return false;
     }
-    if (Math.abs(node1.position.x - node2.position.x) > Number.EPSILON) {
+
+    // FIXME: Number.EPSILON is still too huge to compare two floats
+    if (Math.abs(node1.position.x - node2.position.x) > 0.01) {
       console.error(
         "node x are not the same",
         node1.position.x,
         node2.position.x
       );
       return false;
     }
-    if (Math.abs(node1.position.y - node2.position.y) > Number.EPSILON) {
+    if (Math.abs(node1.position.y - node2.position.y) > 0.01) {
       console.error(
         "node y are not the same",
         node1.position.y,

ui/src/components/MyMonaco.tsx

@@ -398,6 +398,7 @@ export const MyMonaco = memo<MyMonacoProps>(function MyMonaco({
   const annotations = useStore(store, (state) => state.pods[id].annotations);
   const showAnnotations = useStore(store, (state) => state.showAnnotations);
   const scopedVars = useStore(store, (state) => state.scopedVars);
+  const updateView = useStore(store, (state) => state.updateView);
 
   const value = getPod(id).content || "";
   let lang = getPod(id).lang || "javascript";
@@ -461,9 +462,7 @@ export const MyMonaco = memo<MyMonacoProps>(function MyMonaco({
     });
     editor.onDidFocusEditorText(() => {
       setPodFocus(id);
-
-      // FIXME: this is ugly, but useReactFlow.setNodes doesn't work to reset the selection
-      if (resetSelection()) nodesMap.set(id, nodesMap.get(id) as Node);
+      if (resetSelection()) updateView();
       setCurrentEditor(id);
     });
     editor.onDidContentSizeChange(updateHeight);

ui/src/components/nodes/Rich.tsx

@@ -93,8 +93,6 @@ import { GenIcon, IconBase } from "@remirror/react-components";
 import { htmlToProsemirrorNode } from "remirror";
 import { styled } from "@mui/material";
 
-const selectionKeys = ["Enter", "Space", "Escape", "Tab"];
-
 export interface SetHighlightButtonProps
   extends Omit<
     CommandButtonProps,
@@ -163,6 +161,7 @@ const MyEditor = ({
   const setPodFocus = useStore(store, (state) => state.setPodFocus);
   const setPodBlur = useStore(store, (state) => state.setPodBlur);
   const resetSelection = useStore(store, (state) => state.resetSelection);
+  const updateView = useStore(store, (state) => state.updateView);
   const isPodFocused = useStore(store, (state) => state.pods[id]?.focus);
   const ref = useRef<HTMLDivElement>(null);
   const { manager, state, setState } = useRemirror({
@@ -197,27 +196,12 @@ const MyEditor = ({
     stringHandler: htmlToProsemirrorNode,
   });
 
-  useEffect(() => {
-    const handler = (event: KeyboardEvent) => {
-      if (selectionKeys.indexOf(event.code) !== -1) {
-        // avoid to re-select this node
-        event.stopPropagation();
-      }
-    };
-    if (!isPodFocused || !ref.current) return;
-    ref.current?.addEventListener("keydown", handler);
-    return () => {
-      if (ref.current) ref.current.removeEventListener("keydown", handler);
-    };
-  }, [ref.current, isPodFocused]);
-
   return (
     <Box
       className="remirror-theme"
       onFocus={() => {
-        // FIXME: it's a dummy update in nodesMap to trigger the local update to clear all selection
-        if (resetSelection()) nodesMap.set(id, nodesMap.get(id) as Node);
         setPodFocus(id);
+        if (resetSelection()) updateView();
       }}
       onBlur={() => {
         setPodBlur(id);
@@ -301,6 +285,8 @@ export const RichNode = memo<Props>(function ({
   id,
   isConnectable,
   selected,
+  xPos,
+  yPos,
 }) {
   const store = useContext(RepoContext);
   if (!store) throw new Error("Missing BearContext.Provider in the tree");
@@ -311,10 +297,7 @@ export const RichNode = memo<Props>(function ({
   const isGuest = useStore(store, (state) => state.role === "GUEST");
   const width = useStore(store, (state) => state.pods[id]?.width);
   const isPodFocused = useStore(store, (state) => state.pods[id]?.focus);
-  const index = useStore(
-    store,
-    (state) => state.pods[id]?.result?.count || " "
-  );
+  const devMode = useStore(store, (state) => state.devMode);
   const inputRef = useRef<HTMLInputElement>(null);
 
   const onResize = useCallback((e, data) => {
@@ -396,6 +379,21 @@ export const RichNode = memo<Props>(function ({
         isConnectable={isConnectable}
       />
       <Box className="custom-drag-handle">
+        {devMode && (
+          <Box
+            sx={{
+              position: "absolute",
+              top: "-48px",
+              bottom: "0px",
+              userSelect: "text",
+              cursor: "auto",
+            }}
+            className="nodrag"
+          >
+            {id} at ({Math.round(xPos)}, {Math.round(yPos)}, w: {pod.width}, h:{" "}
+            {pod.height})
+          </Box>
+        )}
         <Box
           sx={{
             height: "1em",