fix: incomplet dashed cutting hint (#214)

codepod-io · Feb 1, 2023 · 5b39efe · 5b39efe
1 parent b03e17c
commit 5b39efe
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 25 deletions.
diff --git a/ui/src/App.css b/ui/src/App.css
@@ -87,9 +87,3 @@
 .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;
-}
diff --git a/ui/src/components/Canvas.tsx b/ui/src/components/Canvas.tsx
@@ -442,7 +442,6 @@ function CanvasImpl() {
     setShowContextMenu(true);
     setPoints({ x: event.pageX, y: event.pageY });
     setClient({ x: event.clientX, y: event.clientY });
-    console.log(showContextMenu, points, client);
   };
 
   useEffect(() => {

diff --git a/ui/src/components/MyMonaco.tsx b/ui/src/components/MyMonaco.tsx
@@ -395,13 +395,13 @@ export const MyMonaco = memo<MyMonacoProps>(function MyMonaco({
   const setPodFocus = useStore(store, (state) => state.setPodFocus);
   const setPodBlur = useStore(store, (state) => state.setPodBlur);
   const nodesMap = useStore(store, (state) => state.ydoc.getMap<Node>("pods"));
-  const annotations = useStore(store, (state) => state.pods[id].annotations);
+  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";
+  const value = getPod(id)?.content || "";
+  let lang = getPod(id)?.lang || "javascript";
   const onChange = (value) => setPodContent({ id, content: value });
   let [editor, setEditor] =
     useState<monaco.editor.IStandaloneCodeEditor | null>(null);

diff --git a/ui/src/components/nodes/Code.tsx b/ui/src/components/nodes/Code.tsx
@@ -241,17 +241,18 @@ export const CodeNode = memo<NodeProps>(function ({
   const [layout, setLayout] = useState("bottom");
   const isRightLayout = layout === "right";
   const setPodName = useStore(store, (state) => state.setPodName);
+  const setPodGeo = useStore(store, (state) => state.setPodGeo);
   const getPod = useStore(store, (state) => state.getPod);
-  const setCutting = useStore(store, (state) => state.setCutting);
   const pod = getPod(id);
   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 inputRef = useRef<HTMLInputElement>(null);
+  const updateView = useStore(store, (state) => state.updateView);
+  const isCutting = useStore(store, (state) => state.cuttingId === id);
 
   const showResult = useStore(
     store,
@@ -270,9 +271,21 @@ export const CodeNode = memo<NodeProps>(function ({
       if (node) {
         node.style = { ...node.style, width: size.width };
         nodesMap.set(id, node);
+        setPodGeo(
+          id,
+          {
+            parent: node.parentNode ? node.parentNode : "ROOT",
+            x: node.position.x,
+            y: node.position.y,
+            width: size.width!,
+            height: node.height!,
+          },
+          true
+        );
+        updateView();
       }
     },
-    [id, nodesMap]
+    [id, nodesMap, setPodGeo, updateView]
   );
 
   useEffect(() => {
@@ -337,13 +350,16 @@ export const CodeNode = memo<NodeProps>(function ({
     <Box
       id={"reactflow_node_code_" + id}
       sx={{
-        border: "solid 1px #d6dee6",
+        border: "1px #d6dee6",
         borderWidth: pod.ispublic ? "4px" : "2px",
         borderRadius: "4px",
+        borderStyle: isCutting ? "dashed" : "solid",
         width: "100%",
         height: "100%",
         backgroundColor: "rgb(244, 246, 248)",
-        borderColor: pod.ispublic
+        borderColor: isCutting
+          ? "red"
+          : pod.ispublic
           ? "green"
           : selected
           ? "#003c8f"

diff --git a/ui/src/components/nodes/Rich.tsx b/ui/src/components/nodes/Rich.tsx
@@ -293,22 +293,39 @@ export const RichNode = memo<Props>(function ({
   // const pod = useStore(store, (state) => state.pods[id]);
   const setPodName = useStore(store, (state) => state.setPodName);
   const getPod = useStore(store, (state) => state.getPod);
+  const setPodGeo = useStore(store, (state) => state.setPodGeo);
   const pod = getPod(id);
   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 devMode = useStore(store, (state) => state.devMode);
   const inputRef = useRef<HTMLInputElement>(null);
-
-  const onResize = useCallback((e, data) => {
-    const { size } = data;
-    const node = nodesMap.get(id);
-    if (node) {
-      node.style = { ...node.style, width: size.width };
-      nodesMap.set(id, node);
-    }
-  }, []);
   const nodesMap = useStore(store, (state) => state.ydoc.getMap<Node>("pods"));
+  const updateView = useStore(store, (state) => state.updateView);
+
+  const onResize = useCallback(
+    (e, data) => {
+      const { size } = data;
+      const node = nodesMap.get(id);
+      if (node) {
+        node.style = { ...node.style, width: size.width };
+        nodesMap.set(id, node);
+        setPodGeo(
+          id,
+          {
+            parent: node.parentNode ? node.parentNode : "ROOT",
+            x: node.position.x,
+            y: node.position.y,
+            width: size.width!,
+            height: node.height!,
+          },
+          true
+        );
+        updateView();
+      }
+    },
+    [id, nodesMap, setPodGeo, updateView]
+  );
 
   useEffect(() => {
     if (!data.name) return;

diff --git a/ui/src/lib/store/canvasSlice.tsx b/ui/src/lib/store/canvasSlice.tsx
@@ -312,7 +312,6 @@ export const createCanvasSlice: StateCreator<MyState, [], [], CanvasSlice> = (
         // className: get().dragHighlight === node.id ? "active" : "",
         className: match(node.id)
           .with(get().dragHighlight, () => "active")
-          .with(get().cuttingId, () => "cutting")
           .otherwise(() => undefined),
       }));
     // 2. those from cuttingNode, pastingNode, which are temporary nodes