contiune text editing

src/components/canvas.tsx

@@ -1,24 +1,13 @@
-import {
-  TransformableImage,
-  TransformableImageProps,
-} from "@/components/transformable-image";
+import { TransformableImage } from "@/components/transformable-image";
 
 import type { KonvaEventObject } from "konva/lib/Node";
-import { ChangeEvent, FormEventHandler, useState } from "react";
+
 import { Layer, Stage } from "react-konva";
-
-import { v1 } from "uuid";
-import TransformableText, {
-  TransformableTextProps,
-} from "./transformable-text";
-import { Button } from "./ui/button";
-import { Input } from "./ui/input";
+import TransformableText from "./transformable-text";
 import { useAppDispatch, useAppSelector } from "@/hooks";
-import { appSlice, checkDeselect } from "@/store/app.slice";
+import { appSlice, deselectItem } from "@/store/app.slice";
 import { Toolbar } from "./toolbar";
 
-// Provider *
-
 const Canvas = () => {
   const dispatch = useAppDispatch();
 
@@ -27,15 +16,21 @@ const Canvas = () => {
   const texts = useAppSelector((state) => state.app.texts);
   const images = useAppSelector((state) => state.app.images);
 
-  const deselectHandler = (e) => {
-    dispatch(checkDeselect(e));
+  const deselectHandler = (
+    e: KonvaEventObject<MouseEvent> | KonvaEventObject<TouchEvent>,
+  ) => {
+    const clickedOnEmpty = e.target === e.target.getStage();
+    if (!clickedOnEmpty) {
+      return;
+    }
+    dispatch(deselectItem());
   };
 
   return (
-    <div className="flex h-screen w-full flex-col items-center justify-between">
+    <div className="flex h-screen w-full flex-col items-center">
       <Toolbar />
       <Stage
-        className="bg-white"
+        className="m-[3rem] bg-white"
         width={600}
         height={500}
         onTouchStart={deselectHandler}