From d6504ce0ce3069c9e9a2e0d42d3bb35f55d817fd Mon Sep 17 00:00:00 2001
From: Triston Armstrong <tarmstrong95@proton.me>
Date: Thu, 10 Oct 2024 23:08:47 -0400
Subject: [PATCH] feat(text): fix bug trying to resize text moving element

---
 src/components/ImageCard.tsx | 14 ++++++---
 src/components/TextItem.tsx  | 59 ++++++++++++++++++++++--------------
 2 files changed, 45 insertions(+), 28 deletions(-)

diff --git a/src/components/ImageCard.tsx b/src/components/ImageCard.tsx
index 1f750ff..3601c73 100644
--- a/src/components/ImageCard.tsx
+++ b/src/components/ImageCard.tsx
@@ -88,6 +88,12 @@ export function ImageCard({ key: itemKey, data: item }: ImageCard.ImageCardProps
     window.removeEventListener('mouseup', _handleResizeMouseUp)
   }
 
+  function _handleClose(_e: Event) {
+    ImagesSignal.default.removeImage(item.id)
+    ImagesSignal.default.images.notify()
+    debounceLSUpdate()
+  }
+
   return (
     <div
       onmousedown={_handleMouseDown}
@@ -105,11 +111,9 @@ export function ImageCard({ key: itemKey, data: item }: ImageCard.ImageCardProps
         backgroundPosition: 'center'
       }}
     >
-      <button className="flex justify-center items-center hover:bg-blue-500 rounded w-5 h-5 dark:text-[#777] dark:hover:text-white text-white text-md absolute right-0 top-0" onclick={(_e: Event) => {
-        ImagesSignal.default.removeImage(item.id)
-        ImagesSignal.default.images.notify()
-        debounceLSUpdate()
-      }}>x</button>
+      <button
+        className="flex justify-center items-center hover:bg-blue-500 rounded w-5 h-5 dark:text-[#777] dark:hover:text-white text-white text-md absolute right-0 top-0"
+        onclick={_handleClose}>x</button>
 
       <ExpandIcon cb={_handleResizeMouseDown} />
     </div >
diff --git a/src/components/TextItem.tsx b/src/components/TextItem.tsx
index 8a61688..a12bc49 100644
--- a/src/components/TextItem.tsx
+++ b/src/components/TextItem.tsx
@@ -47,8 +47,9 @@ export function TextItem({ key: itemKey, data: item }: TextItem.TextCardProps) {
   }
 
   function _handleMouseDown(e: MouseEvent) {
-    e.preventDefault()
     focusedItem.value = itemKey
+    e.preventDefault()
+    e.stopPropagation()
     offsetX.current = e.offsetX
     offsetY.current = e.offsetY
     pressed.value = true
@@ -69,23 +70,24 @@ export function TextItem({ key: itemKey, data: item }: TextItem.TextCardProps) {
 
 
   function _handleResizeMouseDown(e: MouseEvent) {
+    e.stopPropagation()
     initialResizeX.current = e.pageX
     pressed.value = true
     window.addEventListener('mousemove', _handleResizeMove)
     window.addEventListener('mouseup', _handleResizeMouseUp)
   }
 
-  function _handleResizeMouseUp() {
+  function _handleResizeMouseUp(_e: MouseEvent) {
     pressed.value = false
-    updateLocalStorage()
     window.removeEventListener('mousemove', _handleResizeMove)
     window.removeEventListener('mouseup', _handleResizeMouseUp)
+    updateLocalStorage()
   }
 
   return (
     <div
       onmousedown={_handleMouseDown}
-      className="px-4 select-none transition flex flex-col justify-stretch rounded absolute"
+      className="px-4  transition flex flex-col justify-stretch rounded absolute"
       style={{
         outline: `${focusedItem.value === item.id ? '1px solid' : ''}`,
         fontSize: `${item.dimensions.w / 6}px`,
@@ -94,30 +96,41 @@ export function TextItem({ key: itemKey, data: item }: TextItem.TextCardProps) {
         left: `${item.position.x}px`,
       }}
     >
-      <div className={'drop-shadow relative'}>
+      <div className={'select-none drop-shadow relative'}>
         {item.contents}
       </div>
 
-      <svg
-        onclick={_handleResizeMouseDown}
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        viewBox="0 0 24 24"
-        fill="currentColor"
-        stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        className="h-4 w-4 absolute right-[-4px] bottom-[-4px] cursor-se-resize"
-        style={{
-          display: focusedItem.value === item.id ? 'unset' : 'none'
-        }}
-      >
-        <rect width="18" height="18" x="3" y="3" rx="2" />
-      </svg>
+
+
+      <ExpandIcon cb={_handleResizeMouseDown} item={item} />
     </div >
 
   )
 }
 
+function ExpandIcon({ cb, item }: {
+  cb: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null | undefined,
+  item: TextSignal.TextCardType
+}) {
+
+  return (
+    <svg
+      onmousedown={cb}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      className="h-4 w-4 absolute right-[-6px] bottom-[-6px] cursor-se-resize"
+      style={{
+        display: focusedItem.value === item.id ? 'unset' : 'none'
+      }}
+    >
+      <rect width="18" height="18" x="3" y="3" rx="2" />
+    </svg>
+  )
+}