first commit

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

@@ -0,0 +1,59 @@
+import * as THREE from 'three';
+import { useMemo } from "react";
+import * as Constants from '../../../types/world/worldConstants';
+import { Tube } from '@react-three/drei';
+
+interface LineProps {
+    points: [Point, Point];
+}
+
+function Line({ points }: Readonly<LineProps>) {
+    const path = useMemo(() => {
+        const [start, end] = points.map(p => new THREE.Vector3(...p.position));
+        return new THREE.LineCurve3(start, end);
+    }, [points]);
+
+    const colors = getColor(points[0]);
+
+    function getColor(point: Point) {
+        if (point.pointType === 'Aisle') {
+            return {
+                defaultLineColor: Constants.lineConfig.aisleColor,
+                defaultDeleteColor: Constants.lineConfig.deleteColor,
+            }
+        } else if (point.pointType === 'Floor') {
+            return {
+                defaultLineColor: Constants.lineConfig.floorColor,
+                defaultDeleteColor: Constants.lineConfig.deleteColor,
+            }
+        } else if (point.pointType === 'Wall') {
+            return {
+                defaultLineColor: Constants.lineConfig.wallColor,
+                defaultDeleteColor: Constants.lineConfig.deleteColor,
+            }
+        } else if (point.pointType === 'Zone') {
+            return {
+                defaultLineColor: Constants.lineConfig.zoneColor,
+                defaultDeleteColor: Constants.lineConfig.deleteColor,
+            }
+        } else {
+            return {
+                defaultLineColor: Constants.lineConfig.defaultColor,
+                defaultDeleteColor: Constants.lineConfig.deleteColor,
+            }
+        }
+    }
+
+    return (
+        <Tube
+            key={`${points[0].pointUuid}-${points[1].pointUuid}`}
+            uuid={`${points[0].pointUuid}-${points[1].pointUuid}`}
+            userData={points}
+            args={[path, Constants.lineConfig.tubularSegments, Constants.lineConfig.radius, Constants.lineConfig.radialSegments, false]}
+        >
+            <meshStandardMaterial color={colors.defaultLineColor} />
+        </Tube>
+    );
+}
+
+export default Line;