seperated zone corner reference as a seperate component

app/src/modules/builder/zone/Instances/Instance/cornerReference.tsx

@@ -0,0 +1,80 @@
+import { Vector3 } from "three";
+import { RoundedBox } from "@react-three/drei";
+
+function CornerReference({
+    point,
+    prevPoint,
+    nextPoint,
+    zone,
+    showTop = true,
+    showBottom = true,
+    cornerThickness = 0.25,
+}: Readonly<{
+    point: Point;
+    prevPoint: Point;
+    nextPoint: Point;
+    zone: Zone;
+    showTop?: boolean;
+    showBottom?: boolean;
+    cornerThickness?: number;
+}>) {
+    const baseCorner = new Vector3(point.position[0], (zone.points[0].layer - 1) * zone.zoneHeight, point.position[2]);
+    const halfHeight = zone.zoneHeight / 4;
+
+    const dirNext = new Vector3(nextPoint.position[0] - point.position[0], 0, nextPoint.position[2] - point.position[2]).normalize();
+    const dirPrev = new Vector3(prevPoint.position[0] - point.position[0], 0, prevPoint.position[2] - point.position[2]).normalize();
+
+    const bottom1: [number, number, number] = [baseCorner.x, baseCorner.y + halfHeight / 2, baseCorner.z];
+    const bottom2: [number, number, number] = [
+        baseCorner.clone().add(dirNext.clone().multiplyScalar(halfHeight / 2)).x,
+        baseCorner.clone().add(dirNext.clone().multiplyScalar(halfHeight / 2)).y + cornerThickness / 2,
+        baseCorner.clone().add(dirNext.clone().multiplyScalar(halfHeight / 2)).z,
+    ];
+    const bottom3: [number, number, number] = [
+        baseCorner.clone().add(dirPrev.clone().multiplyScalar(halfHeight / 2)).x,
+        baseCorner.clone().add(dirPrev.clone().multiplyScalar(halfHeight / 2)).y + cornerThickness / 2,
+        baseCorner.clone().add(dirPrev.clone().multiplyScalar(halfHeight / 2)).z,
+    ];
+
+    const top1: [number, number, number] = [bottom1[0], bottom1[1] + zone.zoneHeight - halfHeight + cornerThickness / 2, bottom1[2]];
+    const top2: [number, number, number] = [bottom2[0], bottom2[1] + zone.zoneHeight - cornerThickness / 2, bottom2[2]];
+    const top3: [number, number, number] = [bottom3[0], bottom3[1] + zone.zoneHeight - cornerThickness / 2, bottom3[2]];
+
+    return (
+        <>
+            {showBottom && (
+                <>
+                    <RoundedBox radius={0.1} args={[cornerThickness, halfHeight, cornerThickness]} position={bottom1}>
+                        <meshStandardMaterial color={zone.zoneColor} />
+                    </RoundedBox>
+
+                    <RoundedBox radius={0.1} args={[halfHeight, cornerThickness, cornerThickness]} position={bottom2} rotation={[0, -Math.atan2(dirNext.z, dirNext.x), 0]}>
+                        <meshStandardMaterial color={zone.zoneColor} />
+                    </RoundedBox>
+
+                    <RoundedBox radius={0.1} args={[halfHeight, cornerThickness, cornerThickness]} position={bottom3} rotation={[0, -Math.atan2(dirPrev.z, dirPrev.x), 0]}>
+                        <meshStandardMaterial color={zone.zoneColor} />
+                    </RoundedBox>
+                </>
+            )}
+
+            {showTop && (
+                <>
+                    <RoundedBox radius={0.1} args={[cornerThickness, halfHeight, cornerThickness]} position={top1}>
+                        <meshStandardMaterial color={zone.zoneColor} />
+                    </RoundedBox>
+
+                    <RoundedBox radius={0.1} args={[halfHeight, cornerThickness, cornerThickness]} position={top2} rotation={[0, -Math.atan2(dirNext.z, dirNext.x), 0]}>
+                        <meshStandardMaterial color={zone.zoneColor} />
+                    </RoundedBox>
+
+                    <RoundedBox radius={0.1} args={[halfHeight, cornerThickness, cornerThickness]} position={top3} rotation={[0, -Math.atan2(dirPrev.z, dirPrev.x), 0]}>
+                        <meshStandardMaterial color={zone.zoneColor} />
+                    </RoundedBox>
+                </>
+            )}
+        </>
+    );
+}
+
+export default CornerReference;

app/src/modules/builder/zone/Instances/Instance/zoneInstance.tsx

@@ -6,7 +6,7 @@ import useShaderReader from "../../../../../utils/scene/useShaderReader";
 
 import vertexShaderUrl from "../../../../../assets/shaders/zone/zone1.vert.glsl";
 import fragmentShaderUrl from "../../../../../assets/shaders/zone/zone1.frag.glsl";
-import { RoundedBox } from "@react-three/drei";
+import CornerReference from "./cornerReference";
 
 function ZoneInstance({ zone }: { readonly zone: Zone }) {
     const vertexShader = useShaderReader(vertexShaderUrl);
@@ -14,7 +14,6 @@ function ZoneInstance({ zone }: { readonly zone: Zone }) {
     const zoneLayer = zone.points[0].layer;
     const { limitFps } = useSceneStore();
     const [time, setTime] = useState<number>();
-    const isCornerReferenceVisible = false;
 
     const zoneMaterial = useMemo(() => {
         if (!vertexShader || !fragmentShader) return null;
@@ -54,25 +53,6 @@ function ZoneInstance({ zone }: { readonly zone: Zone }) {
 
                 const midpoint = new Vector3((point1.x + point2.x) / 2, zone.zoneHeight / 2 + (zoneLayer - 1) * zone.zoneHeight, (point1.z + point2.z) / 2);
                 const angle = Math.atan2(point2.z - point1.z, point2.x - point1.x);
-                const bottomCorner = new Vector3(point.position[0], (zoneLayer - 1) * zone.zoneHeight, point.position[2]);
-                const halfHeight = zone.zoneHeight / 4;
-
-                const dirNext = new Vector3(nextPoint.position[0] - point.position[0], 0, nextPoint.position[2] - point.position[2]).normalize();
-                const dirPrev = new Vector3(prevPoint.position[0] - point.position[0], 0, prevPoint.position[2] - point.position[2]).normalize();
-
-                const frameThickness = 0.25;
-
-                const position1: [number, number, number] = [bottomCorner.x, bottomCorner.y + halfHeight / 2, bottomCorner.z];
-                const position2: [number, number, number] = [
-                    bottomCorner.clone().add(dirNext.clone().multiplyScalar(halfHeight / 2)).x,
-                    bottomCorner.clone().add(dirNext.clone().multiplyScalar(halfHeight / 2)).y + frameThickness / 2,
-                    bottomCorner.clone().add(dirNext.clone().multiplyScalar(halfHeight / 2)).z,
-                ];
-                const position3: [number, number, number] = [
-                    bottomCorner.clone().add(dirPrev.clone().multiplyScalar(halfHeight / 2)).x,
-                    bottomCorner.clone().add(dirPrev.clone().multiplyScalar(halfHeight / 2)).y + frameThickness / 2,
-                    bottomCorner.clone().add(dirPrev.clone().multiplyScalar(halfHeight / 2)).z,
-                ];
 
                 return (
                     <group key={index}>
@@ -80,21 +60,8 @@ function ZoneInstance({ zone }: { readonly zone: Zone }) {
                             <planeGeometry args={[planeWidth, planeHeight]} />
                             <primitive object={zoneMaterial.clone()} attach="material" />
                         </mesh>
-                        {isCornerReferenceVisible && (
-                            <>
-                                <RoundedBox radius={0.1} args={[frameThickness, halfHeight, frameThickness]} position={position1}>
-                                    <meshStandardMaterial depthWrite={true} color={zone.zoneColor} />
-                                </RoundedBox>
 
-                                <RoundedBox radius={0.1} args={[halfHeight, frameThickness, frameThickness]} position={position2} rotation={[0, -Math.atan2(dirNext.z, dirNext.x), 0]}>
+                        <CornerReference showTop={false} showBottom={false} point={point} prevPoint={prevPoint} nextPoint={nextPoint} zone={zone} cornerThickness={0.25} />
-                                    <meshStandardMaterial depthWrite={true} color={zone.zoneColor} />
-                                </RoundedBox>
-
-                                <RoundedBox radius={0.1} args={[halfHeight, frameThickness, frameThickness]} position={position3} rotation={[0, -Math.atan2(dirPrev.z, dirPrev.x), 0]}>
-                                    <meshStandardMaterial depthWrite={true} color={zone.zoneColor} />
-                                </RoundedBox>
-                            </>
-                        )}{" "}
                     </group>
                 );
             })}

app/src/modules/simulation/roboticArm/instances/armInstance/roboticArmInstance.tsx

@@ -109,7 +109,6 @@ function RoboticArmInstance({ armBot }: { readonly armBot: ArmBotStatus }) {
 
     useEffect(() => {
         if (isReset || !isPlaying) {
-            console.log('hii');
             logStatus(armBot.modelUuid, "Simulation Play Reset Successfully");
             setArmBotActive(armBot.modelUuid, false);
             setArmBotState(armBot.modelUuid, "idle");