- By selecting points, you can create events and triggers.
+ Configure vehicle's movement and interaction properties.
);
};
-export default VehicleMechanics;
\ No newline at end of file
+export default React.memo(VehicleMechanics);
\ No newline at end of file
diff --git a/app/src/components/layout/sidebarRight/properties/AssetProperties.tsx b/app/src/components/layout/sidebarRight/properties/AssetProperties.tsx
index 8309024..c47fd81 100644
--- a/app/src/components/layout/sidebarRight/properties/AssetProperties.tsx
+++ b/app/src/components/layout/sidebarRight/properties/AssetProperties.tsx
@@ -1,9 +1,11 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
import InputToggle from "../../../ui/inputs/InputToggle";
import InputWithDropDown from "../../../ui/inputs/InputWithDropDown";
import { RemoveIcon } from "../../../icons/ExportCommonIcons";
import PositionInput from "../customInput/PositionInputs";
import RotationInput from "../customInput/RotationInput";
+import { useselectedFloorItem } from "../../../../store/store";
+import * as THREE from "three";
interface UserData {
id: number; // Unique identifier for the user data
@@ -14,7 +16,13 @@ interface UserData {
const AssetProperties: React.FC = () => {
const [userData, setUserData] = useState([]); // State to track user data
const [nextId, setNextId] = useState(1); // Unique ID for new entries
+ const { selectedFloorItem } = useselectedFloorItem();
+ let xValue = selectedFloorItem.position.x;
+ let zValue = selectedFloorItem.position.z;
+ let rotationRad = selectedFloorItem.rotation.y;
+ let rotationDeg = THREE.MathUtils.radToDeg(rotationRad);
+ // useEffect(() => {}, [selectedFloorItem]);
// Function to handle adding new user data
const handleAddUserData = () => {
const newUserData: UserData = {
@@ -45,12 +53,16 @@ const AssetProperties: React.FC = () => {
return (
+ );
};
export default CollabUserIcon;
diff --git a/app/src/modules/collaboration/users/Avatar.tsx b/app/src/modules/collaboration/users/Avatar.tsx
new file mode 100644
index 0000000..f08a545
--- /dev/null
+++ b/app/src/modules/collaboration/users/Avatar.tsx
@@ -0,0 +1,59 @@
+import React, { useEffect, useState } from "react";
+import { getInitials } from "./functions/getInitials";
+import { getAvatarColor } from "./functions/getAvatarColor";
+
+interface AvatarProps {
+ name: string; // Name can be a full name or initials
+ size?: number;
+ index?: number;
+ textColor?: string;
+}
+
+const CustomAvatar: React.FC = ({
+ name,
+ size = 100,
+ index = 0,
+ textColor = "#ffffff",
+}) => {
+ const [imageSrc, setImageSrc] = useState(null);
+
+ useEffect(() => {
+ const canvas = document.createElement("canvas"); // Create an offscreen canvas
+ canvas.width = size;
+ canvas.height = size;
+ const ctx = canvas.getContext("2d");
+ if (ctx) {
+ const initials = getInitials(name); // Convert name to initials if needed
+
+ // Draw background
+ ctx.fillStyle = getAvatarColor(index);
+ ctx.fillRect(0, 0, size, size);
+
+ // Draw initials
+ ctx.fillStyle = textColor;
+ ctx.font = `bold ${size / 2}px Arial`;
+ ctx.textAlign = "center";
+ ctx.textBaseline = "middle";
+ ctx.fillText(initials, size / 2, size / 2);
+
+ // Generate image source
+ const dataURL = canvas.toDataURL("image/png");
+ setImageSrc(dataURL);
+ }
+ }, [name, size, textColor]);
+
+ if (!imageSrc) {
+ return null; // Return null while the image is being generated
+ }
+
+ return (
+
+ );
+};
+
+export default CustomAvatar;
diff --git a/app/src/modules/collaboration/users/functions/getAvatarColor.ts b/app/src/modules/collaboration/users/functions/getAvatarColor.ts
new file mode 100644
index 0000000..3deacca
--- /dev/null
+++ b/app/src/modules/collaboration/users/functions/getAvatarColor.ts
@@ -0,0 +1,26 @@
+const avatarColors: string[] = [
+ "#FF5733", // Red Orange
+ "#48ac2a", // Leaf Green
+ "#0050eb", // Royal Blue
+ "#FF33A1", // Hot Pink
+ "#FF8C33", // Deep Orange
+ "#8C33FF", // Violet
+ "#FF3333", // Bright Red
+ "#43c06d", // Emerald Green
+ "#A133FF", // Amethyst Purple
+ "#C70039", // Crimson
+ "#900C3F", // Maroon
+ "#581845", // Plum
+ "#3498DB", // Sky Blue
+ "#2ECC71", // Green Mint
+ "#E74C3C", // Tomato Red
+ "#00adff", // Azure
+ "#DBAD05", // Amber Yellow
+ "#FF5733", // Red Orange
+ "#FF33A1", // Hot Pink
+ "#900C3F", // Maroon
+];
+
+export function getAvatarColor(index: number): string {
+ return avatarColors[index % avatarColors.length];
+}
diff --git a/app/src/modules/collaboration/users/functions/getInitials.ts b/app/src/modules/collaboration/users/functions/getInitials.ts
new file mode 100644
index 0000000..572d49a
--- /dev/null
+++ b/app/src/modules/collaboration/users/functions/getInitials.ts
@@ -0,0 +1,10 @@
+export const getInitials = (fullName: string): string => {
+ // Extract initials from the name
+ const words = fullName.split(" ");
+ const initials = words
+ .map((word) => word[0])
+ .slice(0, 2)
+ .join("")
+ .toUpperCase();
+ return initials;
+};
\ No newline at end of file
diff --git a/app/src/modules/market/AssetPreview.tsx b/app/src/modules/market/AssetPreview.tsx
index 9a65990..854ebc4 100644
--- a/app/src/modules/market/AssetPreview.tsx
+++ b/app/src/modules/market/AssetPreview.tsx
@@ -9,10 +9,11 @@ import * as THREE from "three";
// Define the shape of the selected card
interface SelectedCard {
assetName: string;
- uploadedOn: string;
+ uploadedOn: number;
price: number;
rating: number;
views: number;
+ description: string;
}
// Define the props type for AssetPreview
@@ -24,7 +25,7 @@ interface AssetPreviewProps {
function Ui() {
return (
- Loading your model...
+ Loading preview...
);
}
@@ -93,19 +94,7 @@ const AssetPreview: React.FC = ({
{selectedCard.assetName}
- 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!
+ {`${selectedCard.assetName} is used in factories to improve efficiency and production speed It is designed to handle heavy workloads and perform repetitive tasks with precision. Many industries rely on this machine to manufacture products quickly and accurately. It reduces human effort and minimizes errors in the production process. Regular maintenance is required to keep the machine in good working condition.With advanced technology, this machine continues to enhance industrial operations and increase productivity.`}
+