refactor and improve image logic

src/components/CardSelector.tsx

@@ -1,5 +1,8 @@
 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)
@@ -32,6 +35,7 @@ function StickyNote() {
         h: 200
       }
     })
+    updateLocalStorage("notes", notes.notes.value)
   }
 
   return (
@@ -58,32 +62,44 @@ function StickyNote() {
 }
 
 function Image() {
-  function _handleClick() {
+  function _handleClick(mouseEvent: MouseEvent) {
     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 = readerEvent => {
+      reader.onload = function(readerEvent) {
-        const content = readerEvent.target?.result;
+        let image = document.createElement('img')
-        let img: string = '';
+        image.onload = function() {
-        if (typeof content == 'string') img = content?.split(':')[1]
+          const { width, height } = image
-        if (!img) return
 
-        ImagesSignal.default.addImage({
+          // normalize the dimensions so that they fit within a constraint
-          type: "image",
+          const len = Math.sqrt(width * width + height * height)
-          title: "New Image",
+          const normalizedW = (width / len) * 300
-          contents: content as string,
+          const normalizedH = (height / len) * 300
-          position: {
+
-            x: e.pageX - 100,
+          const content = readerEvent.target?.result;
-            y: e.pageY + (window.innerHeight / 2) - 100
+          let img: string = '';
-          },
+          if (typeof content == 'string') img = content?.split(':')[1]
-          dimensions: {
+          if (!img) return
-            w: 200,
+
-            h: 200
+          ImagesSignal.default.addImage({
-          }
+            type: "image",
-        })
+            title: "New Image",
+            contents: content as string,
+            position: {
+              x: mouseEvent.pageX - 100,
+              y: mouseEvent.pageY + (window.innerHeight / 2) - 100
+            },
+            dimensions: {
+              w: normalizedW,
+              h: normalizedH
+            }
+          })
+          updateLocalStorage("images", images.images.value)
+        }
+        image.src = readerEvent.target?.result as string
       }
     }
     input.click()

src/components/ImageCard.tsx

@@ -3,6 +3,7 @@ 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 {
@@ -19,9 +20,9 @@ export function ImageCard({ key: itemKey, data: item }: ImageCard.ImageCardProps
   const offsetY = useRef(0)
   const { debounce } = useDebounce()
 
-  function updateLocalStorage(time?: number) {
+  function debounceLSUpdate(time?: number) {
     debounce(() => {
-      localStorage.setItem("images", JSON.stringify(images.images.value))
+      updateLocalStorage("images", images.images.value)
     }, time)
   }
 
@@ -34,7 +35,7 @@ export function ImageCard({ key: itemKey, data: item }: ImageCard.ImageCardProps
     const newPos = { x: newX.current, y: newY.current }
 
     ImagesSignal.default.updateImageProperty(itemKey, 'position', newPos)
-    updateLocalStorage()
+    debounceLSUpdate()
   }
 
   function _handleMouseUp(e: MouseEvent) {
@@ -62,7 +63,8 @@ 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`,
-        maxWidth: '300px',
+        width: `${item.dimensions.w}px`,
+        height: `${item.dimensions.h}px`,
         backgroundColor: '#181818'
       }}
     >
@@ -70,7 +72,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()
-        updateLocalStorage()
+        debounceLSUpdate()
       }}>x</button>
       <img
         src={item.contents}

src/components/MiniMap.tsx

@@ -46,6 +46,7 @@ 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({
@@ -56,7 +57,7 @@ export function MiniMap() {
         }
 
         return (
-          <div className={"bg-green-500 hover:bg-blue-500 cursor-pointer"}
+          <div ref={el} className={"bg-green-500 hover:bg-blue-500 cursor-pointer"}
             onclick={_handleItemClick}
             style={{
               position: 'absolute',

src/utils/localStorage.ts

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