From 35b7eaad2364bade08c6f3e8a27ef36f5dd96b46 Mon Sep 17 00:00:00 2001
From: andres <andres99.dev@gmail.com>
Date: Wed, 29 Nov 2023 14:39:05 +0100
Subject: [PATCH] wip: editable text working

---
 src/components/canvas.tsx              | 74 +++++++++++++-------------
 src/components/editable-text-input.tsx |  2 +-
 src/components/transformable-image.tsx |  2 +-
 3 files changed, 38 insertions(+), 40 deletions(-)

diff --git a/src/components/canvas.tsx b/src/components/canvas.tsx
index 769446b..4c97171 100644
--- a/src/components/canvas.tsx
+++ b/src/components/canvas.tsx
@@ -5,14 +5,12 @@ import { useAppDispatch, useAppSelector } from "@/hooks";
 import {
   appSlice,
   deselectItem,
-  setStageScale,
   StageItemType,
   updateImage,
   updateText,
 } from "@/store/app.slice";
-import { useEffect, useState, type MouseEvent } from "react";
+import { useEffect, useState } from "react";
 import { Toolbar } from "@/components/toolbar";
-import type Konva from "konva";
 import TransformableText from "@/components/transformable-text";
 
 const Canvas = () => {
@@ -56,41 +54,41 @@ const Canvas = () => {
     setSelected(!isEditing);
   }
 
-  function toggleTransforming() {
-    setIsTransforming(!isTransforming);
-    setSelected(!isTransforming);
-  }
-
-  const handleWheel = (e: Konva.KonvaEventObject<WheelEvent>) => {
-    e.evt.preventDefault();
-
-    const scaleBy = 1.02;
-    const targetStage = e.target.getStage()!;
-    const oldScale = targetStage.scaleX();
-
-    const mousePointTo = {
-      x:
-        targetStage.getPointerPosition().x / oldScale -
-        targetStage.x() / oldScale,
-      y:
-        targetStage.getPointerPosition().y / oldScale -
-        targetStage.y() / oldScale,
-    };
-
-    const newScale = e.evt.deltaY < 0 ? oldScale * scaleBy : oldScale / scaleBy;
-
-    dispatch(
-      setStageScale({
-        scale: newScale,
-        x:
-          (targetStage.getPointerPosition().x / newScale - mousePointTo.x) *
-          newScale,
-        y:
-          (targetStage.getPointerPosition().y / newScale - mousePointTo.y) *
-          newScale,
-      }),
-    );
-  };
+  // function toggleTransforming() {
+  //   setIsTransforming(!isTransforming);
+  //   setSelected(!isTransforming);
+  // }
+  //
+  // const handleWheel = (e: Konva.KonvaEventObject<WheelEvent>) => {
+  //   e.evt.preventDefault();
+  //
+  //   const scaleBy = 1.02;
+  //   const targetStage = e.target.getStage()!;
+  //   const oldScale = targetStage.scaleX();
+  //
+  //   const mousePointTo = {
+  //     x:
+  //       targetStage.getPointerPosition().x / oldScale -
+  //       targetStage.x() / oldScale,
+  //     y:
+  //       targetStage.getPointerPosition().y / oldScale -
+  //       targetStage.y() / oldScale,
+  //   };
+  //
+  //   const newScale = e.evt.deltaY < 0 ? oldScale * scaleBy : oldScale / scaleBy;
+  //
+  //   dispatch(
+  //     setStageScale({
+  //       scale: newScale,
+  //       x:
+  //         (targetStage.getPointerPosition().x / newScale - mousePointTo.x) *
+  //         newScale,
+  //       y:
+  //         (targetStage.getPointerPosition().y / newScale - mousePointTo.y) *
+  //         newScale,
+  //     }),
+  //   );
+  // };
 
   return (
     <div className="relative flex h-full w-full flex-col items-center">
diff --git a/src/components/editable-text-input.tsx b/src/components/editable-text-input.tsx
index 6a5b1f0..fda2be6 100644
--- a/src/components/editable-text-input.tsx
+++ b/src/components/editable-text-input.tsx
@@ -37,7 +37,7 @@ export function EditableTextInput({
         textAreaRef.current.scrollHeight + 3 + "px";
       textAreaRef.current.focus();
     }
-  }, []);
+  }, [height]);
   const style: CSSProperties = {
     textAlign: align,
     width: `${width}px`,
diff --git a/src/components/transformable-image.tsx b/src/components/transformable-image.tsx
index c0fbace..f3bcef7 100644
--- a/src/components/transformable-image.tsx
+++ b/src/components/transformable-image.tsx
@@ -55,7 +55,7 @@ export const TransformableImage = ({
             y: e.target.y(),
           });
         }}
-        onTransformEnd={(e) => {
+        onTransformEnd={() => {
           const node = imageRef.current;
           if (!node) return;