added screenSizer to line

app/src/modules/builder/line/line.tsx

@@ -1,6 +1,6 @@
 import * as THREE from "three";
 import { useMemo } from "react";
-import { DragControls, Tube } from "@react-three/drei";
+import { DragControls, Line as DreiLine } from "@react-three/drei";
 import * as Constants from "../../../types/world/worldConstants";
 
 import { useLineEventHandler } from "./eventHandler/useLineEventHandler";
@@ -14,7 +14,7 @@ function Line({ points }: Readonly<LineProps>) {
         const [start, end] = points.map((p) => new THREE.Vector3(...p.position));
         return new THREE.LineCurve3(start, end);
     }, [points]);
-
+    const positions = useMemo(() => points.map((p) => new THREE.Vector3(...p.position)), [points]);
     const colors = getColor(points[0]);
 
     function getColor(point: Point) {
@@ -50,18 +50,18 @@ function Line({ points }: Readonly<LineProps>) {
 
     return (
         <DragControls axisLock="y" autoTransform={false} onDragStart={handleDragStart} onDrag={handleDrag} onDragEnd={handleDragEnd}>
-            <Tube
+            <DreiLine
                 name={`${points[0].pointType}-Line`}
                 key={`${points[0].pointUuid}-${points[1].pointUuid}`}
                 uuid={`${points[0].pointUuid}-${points[1].pointUuid}`}
                 userData={{ points, path }}
-                args={[path, Constants.lineConfig.tubularSegments, Constants.lineConfig.radius, Constants.lineConfig.radialSegments, false]}
+                points={positions}
+                lineWidth={7.5}
+                color={isDeletable ? colors.defaultDeleteColor : colors.defaultLineColor}
                 onClick={handleLineClick}
                 onPointerOver={handlePointerOver}
                 onPointerOut={handlePointerOut}
-            >
-                <meshStandardMaterial color={isDeletable ? colors.defaultDeleteColor : colors.defaultLineColor} />
-            </Tube>
+            />
         </DragControls>
     );
 }

app/src/modules/builder/line/reference/referenceLine.tsx

@@ -1,25 +1,16 @@
-import * as THREE from 'three';
 import { useMemo } from "react";
-import * as Constants from '../../../../types/world/worldConstants';
-import { Tube } from '@react-three/drei';
+import * as THREE from "three";
+import { Line as DreiLine } from "@react-three/drei";
+import * as Constants from "../../../../types/world/worldConstants";
 
 interface ReferenceLineProps {
     points: [Point, Point];
 }
 
 function ReferenceLine({ points }: Readonly<ReferenceLineProps>) {
-    const path = useMemo(() => {
-        const [start, end] = points.map(p => new THREE.Vector3(...p.position));
-        return new THREE.LineCurve3(start, end);
-    }, [points]);
+    const positions = useMemo(() => points.map((p) => new THREE.Vector3(...p.position)), [points]);
 
-    return (
-        <Tube
-            args={[path, Constants.lineConfig.tubularSegments, Constants.lineConfig.radius, Constants.lineConfig.radialSegments, false]}
-        >
-            <meshStandardMaterial color={Constants.lineConfig.helperColor} />
-        </Tube>
-    );
+    return <DreiLine points={positions} lineWidth={7.5} color={Constants.lineConfig.helperColor} />;
 }
 
-export default ReferenceLine;
+export default ReferenceLine;

app/src/types/world/worldConstants.ts

@@ -127,6 +127,7 @@ export type PointConfig = {
 export type LineConfig = {
     tubularSegments: number;
     radius: number;
+    width: number;
     radialSegments: number;
     wallName: string;
     floorName: string;
@@ -330,6 +331,7 @@ export const pointConfig: PointConfig = {
 export const lineConfig: LineConfig = {
     tubularSegments: 64, // Number of tubular segments
     radius: 0.15, // Radius of the lines
+    width: 20, // Width of the lines
     radialSegments: 8, // Number of radial segments
     wallName: "WallLine", // Name of the wall lines
     floorName: "FloorLine", // Name of the floor lines