feat(text): change logic to properly use fontsize and update minimap

previously the minimap was hardcoded and thus wouldnt update the size of the text relative to its
real size. Im using a useEffect, which im not happy with. IMO you should not use state to set state,
but at the moment i dont really know what else to do, thus ithis is the solution.

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) => {
+      <button
-        ImagesSignal.default.removeImage(item.id)
+        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"
-        ImagesSignal.default.images.notify()
+        onclick={_handleClose}>x</button>
-        debounceLSUpdate()
-      }}>x</button>
 
       <ExpandIcon cb={_handleResizeMouseDown} />
     </div >

src/components/MiniMap.tsx

@@ -129,8 +129,8 @@ export function MiniMap() {
             onclick={_handleItemClick}
             style={{
               position: 'absolute',
-              width: `${300 / _MAP_SCALE_FACTOR}px`,
+              width: `${text.dimensions.w / _MAP_SCALE_FACTOR}px`,
-              height: `${100 / _MAP_SCALE_FACTOR}px`,
+              height: `${text.dimensions.h / _MAP_SCALE_FACTOR}px`,
               top: `${(text.position.y / _MAP_SCALE_FACTOR)}px`,
               left: `${(text.position.x / _MAP_SCALE_FACTOR)}px`,
               border: '1px solid #222',

src/components/NoteCard.tsx

@@ -129,7 +129,7 @@ export function NoteCard({ key: itemKey, data: item }: NoteCard.NoteCardProps) {
     <div
       onmousedown={_handleFocusCard}
       style={cardPositionStyle}
-      className="overflow-hidden text-[#333] dark:bg-[#1a1a1a] dark:border-[#1c1c1c] bg-[#eee] select-none transition flex flex-col justify-stretch shadow-md rounded border border-[#ddd] absolute"
+      className="overflow-hidden text-[#333] dark:bg-[#1a1a1a] dark:border-[#1c1c1c] bg-[#efeff0] select-none transition flex flex-col justify-stretch shadow-md rounded border border-[#ddd] absolute"
     >
       <div className="overflow-hidden flex-1 flex flex-col gap-1">
         {/* Header Bar */}

src/components/TextItem.tsx

@@ -1,8 +1,9 @@
-import { signal, useRef } from "kaioken"
+import { signal, useEffect, useRef } from "kaioken"
 import { TextSignal, focusedItem } from "../signals"
 import { useDebounce } from "../utils/useDebounce"
 import texts, { TextCardType } from "../signals/texts"
 import { LayerEnum } from "../utils/enums"
+import { Card } from "../types"
 
 namespace TextItem {
   export interface TextCardProps {
@@ -18,6 +19,7 @@ export function TextItem({ key: itemKey, data: item }: TextItem.TextCardProps) {
   const offsetX = useRef(0)
   const offsetY = useRef(0)
   const initialResizeX = useRef(0)
+  const elRef = useRef<HTMLDivElement>(null)
 
   const { debounce } = useDebounce()
 
@@ -47,8 +49,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
@@ -59,47 +62,69 @@ export function TextItem({ key: itemKey, data: item }: TextItem.TextCardProps) {
   function _handleResizeMove(e: MouseEvent) {
     const { pageX } = e
     const newX = initialResizeX.current - pageX
+    const newFontSize = Math.floor(-newX + item.fontSize)
 
-    const newW = -newX + item.dimensions.w
+    TextSignal.default.updateTextProperty(itemKey, 'fontSize', newFontSize)
-    const newDim = { w: newW, h: 0 }
-
-    TextSignal.default.updateTextProperty(itemKey, 'dimensions', newDim)
     TextSignal.default.texts.notify()
   }
 
+  useEffect(() => {
+    const elDems = elRef.current?.getBoundingClientRect()
+    const elW = elDems?.width ?? 100
+    const elH = elDems?.height ?? 100
+    const newDems: Card<'texts'>['dimensions'] = { w: elW, h: elH }
+    TextSignal.default.updateTextProperty(itemKey, 'dimensions', newDems)
+    TextSignal.default.texts.notify()
+  }, [elRef.current, item.fontSize])
 
   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
+      ref={elRef}
       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`,
+        fontSize: `${item.fontSize / 6}px`,
         zIndex: `${focusedItem.value == itemKey ? LayerEnum.CARD_ELEVATED : LayerEnum.CARD}`,
         top: `${item.position.y}px`,
         left: `${item.position.x}px`,
       }}
     >
-      <div className={'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 +134,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 >
-
   )
 }
-

src/components/cardSelector/TextButton.tsx

@@ -8,6 +8,7 @@ export function TextButton() {
 
   function _handleClick(e: MouseEvent) {
     TextSignal.default.addText({
+      fontSize: 10,
       type: "texts",
       title: "New Note",
       contents: "todo: fill me",

src/signals/texts.ts

@@ -2,7 +2,9 @@ import { signal } from "kaioken"
 import { Card } from "../types"
 import { focusedItem } from "."
 
-export type TextCardType = Card<"texts">
+export type TextCardType = Card<"texts"> & {
+  fontSize: number
+}
 
 const texts = signal<Record<TextCardType["id"], TextCardType>>({})