src/components/ImageCard.tsx

@@ -21,6 +21,7 @@ export function ImageCard({ key: itemKey, data: item }: ImageCard.ImageCardProps
 
   function updateLocalStorage(time?: number) {
     debounce(() => {
+      console.log(itemKey, "updated storage")
       localStorage.setItem("images", JSON.stringify(images.images.value))
     }, time)
   }
@@ -60,20 +61,23 @@ export function ImageCard({ key: itemKey, data: item }: ImageCard.ImageCardProps
       className="select-none transition flex flex-col justify-stretch shadow-lg rounded border border-[#3c3c3c] absolute"
       style={{
         zIndex: `${focusedItem.value == itemKey ? LayerEnum.CARD_ELEVATED : LayerEnum.CARD}`,
+        width: `${item.dimensions.w}px`,
+        height: `${item.dimensions.h}px`,
         top: `${item.position.y}px`,
         left: `${item.position.x}px`,
-        maxWidth: '300px',
         backgroundColor: '#181818'
       }}
     >
 
-      <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) => {
+      <button className="text-md" onclick={(_e: Event) => {
         ImagesSignal.default.removeImage(item.id)
         ImagesSignal.default.images.notify()
         updateLocalStorage()
       }}>x</button>
       <img
         src={item.contents}
+        width={'100%'}
+        height={'100%'}
         alt={item.title}
       />
     </div >

src/components/InfinateCanvas.tsx

@@ -10,6 +10,7 @@ import images from "../signals/images"
 export default function InfiniteCanvas() {
   const containerRef = useRef<HTMLDivElement>(null)
 
+
   useEffect(() => {
     window.scrollTo({
       left: (canvasDimentsion.value.width / 2) - (window.innerWidth / 2),
@@ -35,36 +36,40 @@ export default function InfiniteCanvas() {
 
   return (
     <>
-      <CardSelector />
-      <MiniMap />
+      <>
+        <>
+          <CardSelector />
+          <MiniMap />
 
-      <div
-        className="h-screen w-full absolute top-0 left-0"
-      >
-        <div
-          className="absolute top-0 left-0"
-          ref={containerRef}
-          style={{
-            width: `${canvasDimentsion.value.width}px`,
-            height: `${canvasDimentsion.value.width}px`,
-            backgroundSize: "30px 30px",
-            backgroundImage: "radial-gradient(circle, rgba(255, 255, 255, 0.2) 1px, transparent 1px)",
-          }}>
-          {Object.keys(NotesSigal.default.notes.value).map((itemKey: string) => {
-            const item = NotesSigal.default.notes.value[itemKey]
-            return (
-              <NoteCard key={itemKey} data={item} />
-            )
-          })}
+          <div
+            className="h-screen w-full absolute top-0 left-0"
+          >
+            <div
+              className="absolute top-0 left-0"
+              ref={containerRef}
+              style={{
+                width: `${canvasDimentsion.value.width}px`,
+                height: `${canvasDimentsion.value.width}px`,
+                backgroundSize: "30px 30px",
+                backgroundImage: "radial-gradient(circle, rgba(255, 255, 255, 0.2) 1px, transparent 1px)",
+              }}>
+              {Object.keys(NotesSigal.default.notes.value).map((itemKey: string) => {
+                const item = NotesSigal.default.notes.value[itemKey]
+                return (
+                  <NoteCard key={itemKey} data={item} />
+                )
+              })}
 
-          {Object.keys(ImagesSignal.default.images.value).map((itemKey: string) => {
-            const item = ImagesSignal.default.images.value[itemKey]
-            return (
-              <ImageCard key={itemKey} data={item} />
-            )
-          })}
-        </div>
-      </div>
+              {Object.keys(ImagesSignal.default.images.value).map((itemKey: string) => {
+                const item = ImagesSignal.default.images.value[itemKey]
+                return (
+                  <ImageCard key={itemKey} data={item} />
+                )
+              })}
+            </div>
+          </div>
+        </>
+      </>
     </>
   )
 }

vite.config.ts

@@ -1,9 +1,17 @@
-import { defineConfig } from "vite"
-import kaioken from "vite-plugin-kaioken"
+import { defineConfig } from "vite";
+import kaioken from "vite-plugin-kaioken";
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [kaioken()],
+  esbuild: {
+    jsxInject: `import * as kaioken from "kaioken"`,
+    jsx: "transform",
+    jsxFactory: "kaioken.createElement",
+    jsxFragment: "kaioken.fragment",
+    loader: "tsx",
+    include: ["**/*.tsx", "**/*.ts", "**/*.jsx", "**/*.js"],
+  },
   // Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`
   //
   // 1. prevent vite from obscuring rust errors
@@ -17,4 +25,4 @@ export default defineConfig({
       ignored: ["**/src-tauri/**"],
     },
   },
-})
+});