Update styles, add marketplace components, and enhance drag-and-drop functionality

app/src/modules/builder/geomentries/assets/assetManager.ts

@@ -112,7 +112,7 @@ export default async function assetManager(
         ) {
             if (!activePromises.get(taskId)) return; // Stop processing if task is canceled
 
-            const existingModel = itemsGroup.current.getObjectByProperty("uuid", item.modeluuid);
+            const existingModel = itemsGroup?.current?.getObjectByProperty("uuid", item.modeluuid);
             if (existingModel) {
                 // console.log(`Model ${item.modelname} already exists in the scene.`);
                 resolve();

app/src/modules/builder/groups/zoneGroup.tsx

@@ -65,6 +65,8 @@ const ZoneGroup: React.FC = () => {
                     zoneId: zone.zoneId,
                     zoneName: zone.zoneName,
                     points: zone.points,
+                    viewPortCenter: zone.viewPortCenter,
+                    viewPortposition: zone.viewPortposition,
                     layer: zone.layer
                 }));
 
@@ -145,7 +147,7 @@ const ZoneGroup: React.FC = () => {
 
         const target: [number, number, number] | null = calculateCenter(zone.points);
         if (!target) return;
-        const position = [target[0], 50, target[2]];
+        const position = [target[0], 10, target[2]];
 
         const input = {
             userId: userId,
@@ -186,7 +188,7 @@ const ZoneGroup: React.FC = () => {
 
         const target: [number, number, number] | null = calculateCenter(zone.points);
         if (!target) return;
-        const position = [target[0], 75, target[2]];
+        const position = [target[0], 10, target[2]];
 
         const input = {
             userId: userId,

app/src/modules/collaboration/socketResponses.dev.tsx

@@ -745,6 +745,7 @@ export default function SocketResponses({
                 return
             }
             if (data.message === "zone deleted") {
+                console.log('data: ', data);
                 const updatedZones = zones.filter((zone: any) => zone.zoneId !== data.data.zoneId);
                 setZones(updatedZones);
 

app/src/modules/market/AssetPreview.tsx

@@ -0,0 +1,95 @@
+import React from "react";
+import assetImage from "../../assets/image/image.png";
+import { FiileedStarsIconSmall } from "../../components/icons/marketPlaceIcons";
+
+// Define the shape of the selected card
+interface SelectedCard {
+  assetName: string;
+  uploadedOn: string;
+  price: number;
+  rating: number;
+  views: number;
+}
+
+// Define the props type for AssetPreview
+interface AssetPreviewProps {
+  selectedCard: SelectedCard;
+  setSelectedCard: React.Dispatch<React.SetStateAction<SelectedCard | null>>; // Type for setter function
+}
+
+const AssetPreview: React.FC<AssetPreviewProps> = ({
+  selectedCard,
+  setSelectedCard,
+}) => {
+  // Ensure rating is a valid number between 0 and 5
+  const rating = Math.max(
+    0,
+    Math.min(5, isNaN(selectedCard.rating) ? 0 : selectedCard.rating)
+  );
+
+  console.log("selectedCard: ", selectedCard);
+
+  // Ensure that the rating is a valid positive integer for array length
+  const starsArray = Array.from({ length: rating }, (_, index) => index);
+
+  return (
+    <div className="assetPreview-wrapper">
+      <div className="assetPreview">
+        <div className="image-preview">
+          <img src={assetImage} alt="" />
+        </div>
+
+        <div className="asset-details-preview">
+          <div className="organization">
+            <div className="image">H</div>
+            <div className="organization-details">
+              <div className="organization-name">HERX FACTORY</div>
+              <div className="follow">Follow +</div>
+            </div>
+          </div>
+
+          {/* asset details */}
+          <div className="asset-details">
+            <div className="asset-name">{selectedCard.assetName}</div>
+            <div className="asset-description">
+              Lorem ipsum dolor sit amet consectetur adipisicing elit.
+              Doloremque nisi beatae facilis architecto quaerat delectus velit
+              aliquid assumenda cumque vitae! Tempore quibusdam ab natus in
+              minima voluptates, aliquid corrupti excepturi consectetur
+              distinctio sequi beatae odit autem? Distinctio ab, voluptatem
+              omnis quibusdam, incidunt eum ipsa aliquid enim eaque eveniet nisi
+              autem, accusantium vel! Laborum in iste voluptates ad! Harum eum
+              amet pariatur fugit laudantium dolorem maxime voluptates atque
+              molestiae modi inventore quidem maiores dolore numquam, natus
+              quisquam optio distinctio eveniet aliquam, aut eligendi laboriosam
+              eaque! Porro cumque cum distinctio ullam debitis, dolorum
+              similique! Harum cupiditate perferendis voluptatum molestiae,
+              fugiat quisquam assumenda!
+            </div>
+            <div className="asset-review">
+              <div className="asset-rating">
+                <FiileedStarsIconSmall />
+                {selectedCard.rating}
+              </div>
+              <div className="asset-view">{selectedCard.views} views</div>
+            </div>
+            <div className="asset-price">₹ {selectedCard.price}</div>
+          </div>
+
+          {/* buttons */}
+          <div className="button-container">
+            <div className="button">Add to cart</div>
+            <div className="button">Buy now</div>
+          </div>
+
+          {/* close button */}
+          <div className="closeButton" onClick={() => setSelectedCard(null)}>
+            {`<-back`}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AssetPreview;

app/src/modules/market/Card.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import {
+  CommentsIcon,
+  DownloadIcon,
+  EyeIconBig,
+  StarsIconSmall,
+  VerifiedIcon,
+} from "../../components/icons/marketPlaceIcons";
+
+import assetImage from "../../assets/image/image.png";
+const Card: React.FC = () => {
+  return (
+    <div className="card-container">
+      <div className="icon">
+        <DownloadIcon />
+      </div>
+      <div className="image-container">
+        <img src={assetImage} alt="" />
+      </div>
+      <div className="assets-container">
+        <div className="name-container">
+          <div className="asstes-container">Asset name</div>
+          <div className="assets-date">Uploaded on-12 Jan 23</div>
+        </div>
+        <div className="details">
+          <div className="content">
+            <EyeIconBig />
+            1.5k
+          </div>
+          <div className="content">
+            <CommentsIcon />
+            32
+          </div>
+        </div>
+      </div>
+
+      <div className="vendor-icon">
+        HEXR FACTORY <VerifiedIcon />
+      </div>
+      <div className="stars-container">
+        <div className="stars-wrapper">
+          <StarsIconSmall />
+          <StarsIconSmall />
+          <StarsIconSmall />
+          <StarsIconSmall />
+          <StarsIconSmall />
+        </div>
+        <div className="units">
+          ₹ 36,500/<span>unit</span>
+        </div>
+      </div>
+      <div className="buy-now-button">Buy now</div>
+    </div>
+  );
+};
+
+export default Card;

app/src/modules/market/CardsContainer.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import Card from "./Card";
+
+const CardsContainer: React.FC = () => {
+  const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+  return (
+    <div className="cards-container-container">
+      <div className="header">Products You May Like</div>
+      <div className="cards-wrapper-container">
+        {array.map((index) => (
+          <Card key={index} />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default CardsContainer;

app/src/modules/market/FilterSearch.tsx

@@ -0,0 +1,39 @@
+import React, { useState } from "react";
+// import RegularDropDown from "./ui/inputs/RegularDropDown";
+
+import Search from "../../components/ui/inputs/Search";
+import { StarsIcon } from "../../components/icons/marketPlaceIcons";
+import RegularDropDown from "../../components/ui/inputs/RegularDropDown";
+
+const FilterSearch: React.FC = () => {
+  const [activeOption, setActiveOption] = useState("Sort by"); // State for active option
+
+  const handleSelect = (option: string) => {
+    setActiveOption(option);
+  };
+  return (
+    <div className="filter-search-container">
+      <Search onChange={() => {}} />
+      <RegularDropDown
+        header={activeOption}
+        options={["Alphabet ascending", "Alphabet descending", ""]}
+        onSelect={handleSelect}
+        search={false}
+      />
+      <div className="button">Free</div>
+      <div className="button">Animated</div>
+      <div className="rating-container">
+        <div className="label">Rating</div>
+        <div className="stars">
+          <StarsIcon />
+          <StarsIcon />
+          <StarsIcon />
+          <StarsIcon />
+          <StarsIcon />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default FilterSearch;

app/src/modules/market/MarketPlace.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import FilterSearch from "./FilterSearch";
+import CardsContainer from "./CardsContainer";
+
+const MarketPlace = () => {
+  return (
+    <div className="marketplace-wrapper">
+      <div className="marketplace-container">
+        <div className="marketPlace">
+          <FilterSearch />
+          <CardsContainer />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MarketPlace;

app/src/modules/scene/scene.tsx

@@ -15,7 +15,8 @@ import background from "../../assets/textures/hdr/mudroadpuresky2k.hdr";
 import SelectionControls from "./controls/selection/selectionControls";
 import MeasurementTool from "./tools/measurementTool";
 import Simulation from "../simulation/simulation";
-// import Simulation from "../simulation/simulationtemp/simulation";
+// import Simulation from "./simulationtemp/simulation";
+import ZoneCentreTarget from "../../components/ui/componets/zoneCameraTarget";
 
 export default function Scene() {
 
@@ -41,6 +42,7 @@ export default function Scene() {
         <SelectionControls />
         <MeasurementTool />
         <World />
+        <ZoneCentreTarget />
         <Simulation />
         <PostProcessing />
         <Sun />