added IMage store in idex db

app/src/modules/builder/Decal/decal.tsx

@@ -0,0 +1,14 @@
+import DecalCreator from './decalCreator/decalCreator'
+
+function Decal() {
+
+    return (
+        <>
+
+            <DecalCreator />
+
+        </>
+    )
+}
+
+export default Decal

app/src/modules/builder/Decal/decalCreator/decalCreator.tsx

@@ -0,0 +1,44 @@
+import { useEffect } from 'react';
+import { useThree } from '@react-three/fiber';
+import { useDroppedDecal } from '../../../../store/builder/store';
+import useModuleStore from '../../../../store/useModuleStore';
+
+function DecalCreator() {
+    const { droppedDecal } = useDroppedDecal();
+    const { activeModule } = useModuleStore();
+    const { controls, gl, pointer, camera, raycaster, scene } = useThree();
+
+    useEffect(() => {
+        const canvasElement = gl.domElement;
+
+        const onDrop = (event: DragEvent) => {
+            console.log('event: ', event);
+            console.log('droppedDecal: ', droppedDecal);
+            if (!event.dataTransfer?.files[0]) return;
+
+            if (droppedDecal) {
+            }
+        };
+
+        const onDragOver = (event: any) => {
+            event.preventDefault();
+        };
+
+        if (activeModule === "builder") {
+            canvasElement.addEventListener("drop", onDrop);
+            canvasElement.addEventListener("dragover", onDragOver);
+        }
+
+        return () => {
+            canvasElement.removeEventListener("drop", onDrop);
+            canvasElement.removeEventListener("dragover", onDragOver);
+        };
+    }, [droppedDecal, camera, activeModule, controls]);
+
+    return (
+        <>
+        </>
+    )
+}
+
+export default DecalCreator

app/src/modules/builder/Decal/decalInstance/decalInstance.tsx

@@ -1,19 +1,19 @@
 import * as THREE from 'three';
 import { CameraControls, Decal } from '@react-three/drei'
 import { useLoader, useThree } from '@react-three/fiber';
-import { useSocketStore, useToggleView, useToolMode } from '../../../store/builder/store';
-import { useBuilderStore } from '../../../store/builder/useBuilderStore';
+import { useSocketStore, useToggleView, useToolMode } from '../../../../store/builder/store';
+import { useBuilderStore } from '../../../../store/builder/useBuilderStore';
 
-import defaultMaterial from '../../../assets/textures/floor/wall-tex.png';
-import useModuleStore from '../../../store/useModuleStore';
-import { useSceneContext } from '../../scene/sceneContext';
+import defaultMaterial from '../../../../assets/textures/floor/wall-tex.png';
+import useModuleStore from '../../../../store/useModuleStore';
+import { useSceneContext } from '../../../scene/sceneContext';
 import { useEffect, useRef } from 'react';
-import { getUserData } from '../../../functions/getUserData';
-import { useVersionContext } from '../version/versionContext';
+import { getUserData } from '../../../../functions/getUserData';
+import { useVersionContext } from '../../version/versionContext';
 import { useParams } from 'react-router-dom';
 
-// import { upsertWallApi } from '../../../services/factoryBuilder/wall/upsertWallApi';
-// import { upsertFloorApi } from '../../../services/factoryBuilder/floor/upsertFloorApi';
+// import { upsertWallApi } from '../../../../services/factoryBuilder/wall/upsertWallApi';
+// import { upsertFloorApi } from '../../../../services/factoryBuilder/floor/upsertFloorApi';
 
 function DecalInstance({ parent, visible = true, decal, zPosition = decal.decalPosition[2] }: { parent: Wall | Floor; visible?: boolean, decal: Decal, zPosition?: number }) {
     const { setSelectedWall, setSelectedFloor, selectedDecal, deletableDecal, setSelectedDecal, setDeletableDecal } = useBuilderStore();

app/src/modules/builder/asset/assetsGroup.tsx

@@ -363,6 +363,7 @@ function AssetsGroup({ plane }: { readonly plane: RefMesh }) {
                 setLeft(relativeX);
             }
         };
+
         const onMouseUp = (evt: any) => {
             setIsRenameMode(false);
         }

app/src/modules/builder/builder.tsx

@@ -33,13 +33,14 @@ import AssetsGroup from "./asset/assetsGroup";
 import DxfFile from "./dfx/LoadBlueprint";
 import AislesGroup from "./aisle/aislesGroup";
 import WallGroup from "./wall/wallGroup";
+import WallAssetGroup from "./wallAsset/wallAssetGroup";
 import FloorGroup from "./floor/floorGroup";
 import ZoneGroup from "./zone/zoneGroup";
+import Decal from "./Decal/decal";
 
 import { useParams } from "react-router-dom";
 import { useBuilderStore } from "../../store/builder/useBuilderStore";
 import { getUserData } from "../../functions/getUserData";
-import WallAssetGroup from "./wallAsset/wallAssetGroup";
 
 export default function Builder() {
     const state = useThree<Types.ThreeState>();
@@ -106,6 +107,8 @@ export default function Builder() {
                 </Geometry>
             </mesh>
 
+            <Decal />
+
             <AislesGroup />
 
             <FloorGroup />

app/src/modules/builder/wall/Instances/instance/wall.tsx

@@ -10,7 +10,7 @@ import { useToggleView, useWallVisibility } from '../../../../../store/builder/s
 import { useBuilderStore } from '../../../../../store/builder/useBuilderStore';
 import * as Constants from '../../../../../types/world/worldConstants';
 
-import DecalInstance from '../../../Decal/decalInstance';
+import DecalInstance from '../../../Decal/decalInstance/decalInstance';
 
 import defaultMaterial from '../../../../../assets/textures/floor/wall-tex.png';
 import material1 from '../../../../../assets/textures/floor/factory wall texture.jpg';