src/components/CardSelector.tsx

@@ -1,8 +1,5 @@
 import { useRef } from "kaioken"
 import { ImagesSignal, NotesSigal } from "../signals"
-import { updateLocalStorage } from "../utils/localStorage"
-import notes from "../signals/notes"
-import images from "../signals/images"
 
 export function CardSelector() {
   const containerRef = useRef<HTMLDivElement>(null)
@@ -22,6 +19,7 @@ export function CardSelector() {
 
 function StickyNote() {
   function _handleClick(e: MouseEvent) {
+
     NotesSigal.default.addNote({
       type: "note",
       title: "New Note",
@@ -35,7 +33,6 @@ function StickyNote() {
         h: 200
       }
     })
-    updateLocalStorage("notes", notes.notes.value)
   }
 
   return (
@@ -62,23 +59,14 @@ function StickyNote() {
 }
 
 function Image() {
-  function _handleClick(mouseEvent: MouseEvent) {
+  function _handleClick() {
     const input = document.createElement('input')
     input.type = 'file'
     input.onchange = (e: any) => {
       const file = e.target.files[0]
       const reader = new FileReader()
       reader.readAsDataURL(file)
-      reader.onload = function(readerEvent) {
-        let image = document.createElement('img')
-        image.onload = function() {
-          const { width, height } = image
-
-          // normalize the dimensions so that they fit within a constraint
-          const len = Math.sqrt(width * width + height * height)
-          const normalizedW = (width / len) * 300
-          const normalizedH = (height / len) * 300
-
+      reader.onload = readerEvent => {
         const content = readerEvent.target?.result;
         let img: string = '';
         if (typeof content == 'string') img = content?.split(':')[1]
@@ -89,17 +77,14 @@ function Image() {
           title: "New Image",
           contents: content as string,
           position: {
-              x: mouseEvent.pageX - 100,
-              y: mouseEvent.pageY + (window.innerHeight / 2) - 100
+            x: e.pageX - 100,
+            y: e.pageY + (window.innerHeight / 2) - 100
           },
           dimensions: {
-              w: normalizedW,
-              h: normalizedH
+            w: 200,
+            h: 200
           }
         })
-          updateLocalStorage("images", images.images.value)
-        }
-        image.src = readerEvent.target?.result as string
       }
     }
     input.click()

src/components/ImageCard.tsx

@@ -3,7 +3,6 @@ import { ImagesSignal, focusedItem } from "../signals"
 import { useDebounce } from "../utils/useDebounce"
 import { LayerEnum } from "../utils/enums"
 import images, { ImageCardType } from "../signals/images"
-import { updateLocalStorage } from "../utils/localStorage"
 
 namespace ImageCard {
   export interface ImageCardProps {
@@ -20,9 +19,9 @@ export function ImageCard({ key: itemKey, data: item }: ImageCard.ImageCardProps
   const offsetY = useRef(0)
   const { debounce } = useDebounce()
 
-  function debounceLSUpdate(time?: number) {
+  function updateLocalStorage(time?: number) {
     debounce(() => {
-      updateLocalStorage("images", images.images.value)
+      localStorage.setItem("images", JSON.stringify(images.images.value))
     }, time)
   }
 
@@ -35,7 +34,7 @@ export function ImageCard({ key: itemKey, data: item }: ImageCard.ImageCardProps
     const newPos = { x: newX.current, y: newY.current }
 
     ImagesSignal.default.updateImageProperty(itemKey, 'position', newPos)
-    debounceLSUpdate()
+    updateLocalStorage()
   }
 
   function _handleMouseUp(e: MouseEvent) {
@@ -63,8 +62,7 @@ export function ImageCard({ key: itemKey, data: item }: ImageCard.ImageCardProps
         zIndex: `${focusedItem.value == itemKey ? LayerEnum.CARD_ELEVATED : LayerEnum.CARD}`,
         top: `${item.position.y}px`,
         left: `${item.position.x}px`,
-        width: `${item.dimensions.w}px`,
-        height: `${item.dimensions.h}px`,
+        maxWidth: '300px',
         backgroundColor: '#181818'
       }}
     >
@@ -72,7 +70,7 @@ export function ImageCard({ key: itemKey, data: item }: ImageCard.ImageCardProps
       <button className="flex justify-center items-center hover:bg-blue-500 w-5 h-5 text-white text-md absolute right-0 top-0" onclick={(_e: Event) => {
         ImagesSignal.default.removeImage(item.id)
         ImagesSignal.default.images.notify()
-        debounceLSUpdate()
+        updateLocalStorage()
       }}>x</button>
       <img
         src={item.contents}

src/components/MiniMap.tsx

@@ -46,7 +46,6 @@ export function MiniMap() {
 
       {Object.keys(images.images.value).map((imageKey: ImageCardType['id']) => {
         const image = images.images.value[imageKey]
-        const el = useRef(null)
 
         function _handleItemClick(_e: MouseEvent) {
           window.scrollTo({
@@ -57,7 +56,7 @@ export function MiniMap() {
         }
 
         return (
-          <div ref={el} className={"bg-green-500 hover:bg-blue-500 cursor-pointer"}
+          <div className={"bg-green-500 hover:bg-blue-500 cursor-pointer"}
             onclick={_handleItemClick}
             style={{
               position: 'absolute',

src/signals/images.ts

@@ -1,6 +1,5 @@
 import { signal } from "kaioken"
 import { Card } from "../types"
-import { focusedItem } from "."
 
 export type ImageCardType = Card<"image">
 
@@ -17,7 +16,6 @@ function addImage(data: Omit<ImageCardType, "id">) {
   }
   images.value[newCard.id] = newCard
   images.notify()
-  focusedItem.value = newCard.id
 }
 
 function removeImage(id: ImageCardType["id"]) {

src/signals/notes.ts

@@ -1,6 +1,5 @@
 import { signal } from "kaioken"
 import { Card } from "../types"
-import { focusedItem } from "."
 
 export type NoteCardType = Card<"note">
 
@@ -17,7 +16,6 @@ function addNote(data: Omit<NoteCardType, "id">) {
   }
   notes.value[newCard.id] = newCard
   notes.notify()
-  focusedItem.value = newCard.id
 }
 
 function removeNote(id: NoteCardType["id"]) {

src/utils/localStorage.ts

@@ -1,6 +0,0 @@
-export function updateLocalStorage(
-  location: "notes" | "images",
-  collection: unknown[] | Record<string, unknown>
-) {
-  localStorage.setItem(location, JSON.stringify(collection))
-}