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/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/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()
 
@@ -60,14 +62,20 @@ 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()
@@ -86,11 +94,12 @@ export function TextItem({ key: itemKey, data: item }: TextItem.TextCardProps) {
 
   return (
     <div
+      ref={elRef}
       onmousedown={_handleMouseDown}
       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`,

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>>({})