feat(text): make text insert work with move and resize functionality

src/components/MiniMap.tsx

@@ -3,7 +3,7 @@ import notes, { NoteCardType } from "../signals/notes"
 import { canvasDimentsion } from "../signals"
 import { LayerEnum } from "../utils/enums"
 import images, { ImageCardType } from "../signals/images"
-import texts from "../signals/texts"
+import texts, { TextCardType } from "../signals/texts"
 
 const _MAP_OFFSET = 20
 const _MAP_SCALE_FACTOR = 10
@@ -112,7 +112,7 @@ export function MiniMap() {
         )
       })}
 
-      {Object.keys(texts.texts.value).map((textKey: textCardType['id']) => {
+      {Object.keys(texts.texts.value).map((textKey: TextCardType['id']) => {
         const text = texts.texts.value[textKey]
         const el = useRef(null)
 
@@ -129,12 +129,11 @@ export function MiniMap() {
             onclick={_handleItemClick}
             style={{
               position: 'absolute',
-              width: `${text.dimensions.w / _MAP_SCALE_FACTOR}px`,
-              height: `${text.dimensions.h / _MAP_SCALE_FACTOR}px`,
+              width: `${300 / _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',
-              borderRadius: '2px',
               zIndex: `${LayerEnum.MINIMAP + 1}`
             }}
           ></div>

src/components/TextItem.tsx

@@ -18,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 initialResizeY = useRef(0)
 
   const { debounce } = useDebounce()
 
@@ -49,6 +48,7 @@ export function TextItem({ key: itemKey, data: item }: TextItem.TextCardProps) {
 
   function _handleMouseDown(e: MouseEvent) {
     e.preventDefault()
+    focusedItem.value = itemKey
     offsetX.current = e.offsetX
     offsetY.current = e.offsetY
     pressed.value = true
@@ -57,12 +57,11 @@ export function TextItem({ key: itemKey, data: item }: TextItem.TextCardProps) {
   }
 
   function _handleResizeMove(e: MouseEvent) {
-    const { pageX, pageY } = e
-    const [newX, newY] = [initialResizeX.current - pageX, initialResizeY.current - pageY]
+    const { pageX } = e
+    const newX = initialResizeX.current - pageX
 
     const newW = -newX + item.dimensions.w
-    const newH = -newY + item.dimensions.h
-    const newDim = { w: newW, h: newH }
+    const newDim = { w: newW, h: 0 }
 
     TextSignal.default.updateTextProperty(itemKey, 'dimensions', newDim)
     TextSignal.default.texts.notify()
@@ -71,7 +70,6 @@ export function TextItem({ key: itemKey, data: item }: TextItem.TextCardProps) {
 
   function _handleResizeMouseDown(e: MouseEvent) {
     initialResizeX.current = e.pageX
-    initialResizeY.current = e.pageY
     pressed.value = true
     window.addEventListener('mousemove', _handleResizeMove)
     window.addEventListener('mouseup', _handleResizeMouseUp)
@@ -87,18 +85,37 @@ export function TextItem({ key: itemKey, data: item }: TextItem.TextCardProps) {
   return (
     <div
       onmousedown={_handleMouseDown}
-      className="select-none transition flex flex-col justify-stretch rounded border border-[#3c3c3c] absolute border-dashed"
+      className="px-4 select-none transition flex flex-col justify-stretch rounded absolute"
       style={{
+        outline: `${focusedItem.value === item.id ? '1px solid' : ''}`,
+        fontSize: `${item.dimensions.w / 6}px`,
         zIndex: `${focusedItem.value == itemKey ? LayerEnum.CARD_ELEVATED : LayerEnum.CARD}`,
-        width: `${item.dimensions.w}px`,
-        height: `${item.dimensions.h + 100}px`,
         top: `${item.position.y}px`,
         left: `${item.position.x}px`,
       }}
     >
-      <div className={'relative w-full h-full'}>
-        <p className={'w-full h-full'}>{item.contents}</p>
+      <div className={'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>
     </div >
 
   )

src/components/cardSelector/ImportButton.tsx

@@ -21,15 +21,15 @@ export function ImportButton() {
         let content = readerEvent.target?.result;
         // get only the base64 parts and not any identifiers
         content = (content as string).split(',')[1]
-        const data: Record<string, Card<'note'> | Card<'image'>> = convertBase64ToJson(content)
+        const data: Record<string, Card<'notes'> | Card<'images'>> = convertBase64ToJson(content)
         for (let key in data) {
           const item = data[key]
-          if (item.type == 'image') {
+          if (item.type == 'images') {
             const { id, ...rest } = item
             images.addImage(rest)
           }
 
-          if (item.type == 'note') {
+          if (item.type == 'notes') {
             const { id, ...rest } = item
             notes.addNote(rest)
           }

src/components/cardSelector/TextButton.tsx

@@ -8,7 +8,7 @@ export function TextButton() {
 
   function _handleClick(e: MouseEvent) {
     TextSignal.default.addText({
-      type: "text",
+      type: "texts",
       title: "New Note",
       contents: "todo: fill me",
       position: {
@@ -20,12 +20,13 @@ export function TextButton() {
         h: 100
       }
     })
-    updateLocalStorage("text", texts.texts.value)
+    updateLocalStorage("texts", texts.texts.value)
   }
 
   return (
     <Tooltip message="Create a Text Node">
       <svg
+        onclick={_handleClick}
         xmlns="http://www.w3.org/2000/svg"
         width="24"
         height="24"

src/signals/images.ts

@@ -2,7 +2,7 @@ import { signal } from "kaioken"
 import { Card } from "../types"
 import { focusedItem } from "."
 
-export type ImageCardType = Card<"image">
+export type ImageCardType = Card<"images">
 
 const images = signal<Record<ImageCardType["id"], ImageCardType>>({})
 

src/signals/notes.ts

@@ -2,7 +2,7 @@ import { signal } from "kaioken"
 import { Card } from "../types"
 import { focusedItem } from "."
 
-export type NoteCardType = Card<"note">
+export type NoteCardType = Card<"notes">
 
 const notes = signal<Record<NoteCardType["id"], NoteCardType>>({})
 

src/signals/texts.ts

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

src/types/Card.ts

@@ -1,4 +1,4 @@
-export type CardTypes = "note" | "image" | "text"
+export type CardTypes = "notes" | "images" | "texts"
 export type positionCoords = { x: number; y: number }
 export type dimensionCoords = { w: number; h: number }