src/components/ImageCard.tsx

@@ -88,12 +88,6 @@ 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}
@@ -111,9 +105,11 @@ export function ImageCard({ key: itemKey, data: item }: ImageCard.ImageCardProps
         backgroundPosition: 'center'
       }}
     >
-      <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={(_e: Event) => {
-        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.removeImage(item.id)
-        onclick={_handleClose}>x</button>
+        ImagesSignal.default.images.notify()
+        debounceLSUpdate()
+      }}>x</button>
 
       <ExpandIcon cb={_handleResizeMouseDown} />
     </div >

src/components/MiniMap.tsx

@@ -129,8 +129,8 @@ export function MiniMap() {
             onclick={_handleItemClick}
             style={{
               position: 'absolute',
-              width: `${text.dimensions.w / _MAP_SCALE_FACTOR}px`,
+              width: `${300 / _MAP_SCALE_FACTOR}px`,
-              height: `${text.dimensions.h / _MAP_SCALE_FACTOR}px`,
+              height: `${100 / _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-[#efeff0] 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-[#eee] 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,9 +1,8 @@
-import { signal, useEffect, useRef } from "kaioken"
+import { signal, 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 {
@@ -19,7 +18,6 @@ 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()
 
@@ -49,9 +47,8 @@ export function TextItem({ key: itemKey, data: item }: TextItem.TextCardProps) {
   }
 
   function _handleMouseDown(e: MouseEvent) {
-    focusedItem.value = itemKey
     e.preventDefault()
-    e.stopPropagation()
+    focusedItem.value = itemKey
     offsetX.current = e.offsetX
     offsetY.current = e.offsetY
     pressed.value = true
@@ -62,84 +59,65 @@ 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)
 
-    TextSignal.default.updateTextProperty(itemKey, 'fontSize', newFontSize)
+    const newW = -newX + item.dimensions.w
+    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(_e: MouseEvent) {
+  function _handleResizeMouseUp() {
     pressed.value = false
+    updateLocalStorage()
     window.removeEventListener('mousemove', _handleResizeMove)
     window.removeEventListener('mouseup', _handleResizeMouseUp)
-    updateLocalStorage()
   }
 
   return (
     <div
-      ref={elRef}
       onmousedown={_handleMouseDown}
-      className="px-4  transition flex flex-col justify-stretch rounded absolute"
+      className="px-4 select-none transition flex flex-col justify-stretch rounded absolute"
       style={{
         outline: `${focusedItem.value === item.id ? '1px solid' : ''}`,
-        fontSize: `${item.fontSize / 6}px`,
+        fontSize: `${item.dimensions.w / 6}px`,
         zIndex: `${focusedItem.value == itemKey ? LayerEnum.CARD_ELEVATED : LayerEnum.CARD}`,
         top: `${item.position.y}px`,
         left: `${item.position.x}px`,
       }}
     >
-      <div className={'select-none drop-shadow relative'}>
+      <div className={'relative'}>
         {item.contents}
       </div>
 
-
+      <svg
-
+        onclick={_handleResizeMouseDown}
-      <ExpandIcon cb={_handleResizeMouseDown} item={item} />
+        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>
     </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>
-  )
-}

src/components/cardSelector/TextButton.tsx

@@ -8,7 +8,6 @@ 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,9 +2,7 @@ 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>>({})