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 >

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,12 +96,26 @@ 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>
 
+
+
+      <ExpandIcon cb={_handleResizeMouseDown} item={item} />
+    </div >
+
+  )
+}
+
+function ExpandIcon({ cb, item }: {
+  cb: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null | undefined,
+  item: TextSignal.TextCardType
+}) {
+
+  return (
     <svg
-        onclick={_handleResizeMouseDown}
+      onmousedown={cb}
       xmlns="http://www.w3.org/2000/svg"
       width="24"
       height="24"
@@ -109,15 +125,12 @@ export function TextItem({ key: itemKey, data: item }: TextItem.TextCardProps) {
       stroke-width="2"
       stroke-linecap="round"
       stroke-linejoin="round"
-        className="h-4 w-4 absolute right-[-4px] bottom-[-4px] cursor-se-resize"
+      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>
-    </div >
-
   )
 }
-