Dwinzo-Beta/Dwinzo_Demo
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/main-dev' into dev-collaboration

Browse Source
This commit is contained in:
Poovizhi99
2025-06-26 10:59:22 +05:30
parent b3b0831a7f b4745451d2
commit e5e92d2b9f
41 changed files with 1495 additions and 857 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
app/src/modules/builder/Decal/decalInstance.tsx Normal file
View File

@@ -0,0 +1,48 @@
import * as THREE from 'three';
import { Decal } from '@react-three/drei'
import { useLoader } from '@react-three/fiber';
import { useToggleView } from '../../../store/builder/store';
import { useBuilderStore } from '../../../store/builder/useBuilderStore';
import defaultMaterial from '../../../assets/textures/floor/wall-tex.png';
import useModuleStore from '../../../store/useModuleStore';
function DecalInstance({ visible = true, decal }: { visible?: boolean, decal: Decal }) {
const { setSelectedWall, selectedDecal, setSelectedDecal } = useBuilderStore();
const { togglView } = useToggleView();
const { activeModule } = useModuleStore();
const material = useLoader(THREE.TextureLoader, defaultMaterial);
return (
<Decal
// debug
visible={visible}
position={decal.decalPosition}
rotation={[0, 0, decal.decalRotation]}
scale={[decal.decalScale, decal.decalScale, 0.01]}
userData={decal}
onClick={(e) => {
if (visible && !togglView && activeModule === 'builder') {
if (e.object.userData.decalUuid) {
setSelectedDecal(e.object);
setSelectedWall(null);
}
}
}}
onPointerMissed={() => {
if (selectedDecal && selectedDecal.userData.decalUuid === decal.decalUuid) {
setSelectedDecal(null);
}
}}
>
<meshBasicMaterial
map={material}
side={THREE.DoubleSide}
polygonOffset
polygonOffsetFactor={-1}
/>
</Decal>
)
}
export default DecalInstance

1
app/src/modules/builder/dfx/LoadBlueprint.tsx
View File

@@ -79,6 +79,7 @@ const DxfFile = ({
userId
}
console.log('input: ', input);
socket.emit('v1:Line:create', input);
})

2
app/src/modules/builder/geomentries/floors/drawOnlyFloor.ts
View File

@@ -158,6 +158,7 @@ async function drawOnlyFloor(
userId,
};
console.log('input: ', input);
socket.emit("v1:Line:create", input);
setNewLines([newLines[0], newLines[1], line.current]);
@@ -248,6 +249,7 @@ async function drawOnlyFloor(
userId,
};
console.log('input: ', input);
socket.emit("v1:Line:create", input);
setNewLines([line.current]);

367
app/src/modules/builder/geomentries/lines/drawWall.ts
View File

@@ -14,232 +14,205 @@ import { Socket } from "socket.io-client";
import { getUserData } from "../../../../functions/getUserData";
async function drawWall(
raycaster: THREE.Raycaster,
plane: Types.RefMesh,
floorPlanGroupPoint: Types.RefGroup,
snappedPoint: Types.RefVector3,
isSnapped: Types.RefBoolean,
isSnappedUUID: Types.RefString,
line: Types.RefLine,
ispreSnapped: Types.RefBoolean,
anglesnappedPoint: Types.RefVector3,
isAngleSnapped: Types.RefBoolean,
lines: Types.RefLines,
floorPlanGroupLine: Types.RefGroup,
floorPlanGroup: Types.RefGroup,
ReferenceLineMesh: Types.RefMesh,
LineCreated: Types.RefBoolean,
currentLayerPoint: Types.RefMeshArray,
dragPointControls: Types.RefDragControl,
setNewLines: any,
setDeletedLines: any,
activeLayer: Types.Number,
socket: Socket<any>,
projectId?: string,
versionId?: string,
raycaster: THREE.Raycaster,
plane: Types.RefMesh,
floorPlanGroupPoint: Types.RefGroup,
snappedPoint: Types.RefVector3,
isSnapped: Types.RefBoolean,
isSnappedUUID: Types.RefString,
line: Types.RefLine,
ispreSnapped: Types.RefBoolean,
anglesnappedPoint: Types.RefVector3,
isAngleSnapped: Types.RefBoolean,
lines: Types.RefLines,
floorPlanGroupLine: Types.RefGroup,
floorPlanGroup: Types.RefGroup,
ReferenceLineMesh: Types.RefMesh,
LineCreated: Types.RefBoolean,
currentLayerPoint: Types.RefMeshArray,
dragPointControls: Types.RefDragControl,
setNewLines: any,
setDeletedLines: any,
activeLayer: Types.Number,
socket: Socket<any>,
projectId?: string,
versionId?: string,
): Promise<void> {
const { userId, organization, email } = getUserData();
////////// Creating lines Based on the positions clicked //////////
const { userId, organization } = getUserData();
////////// Creating lines Based on the positions clicked //////////
////////// Allows the user lines that represents walls and roof, floor if forms a polygon //////////
////////// Allows the user lines that represents walls and roof, floor if forms a polygon //////////
if (!plane.current) return;
let intersects = raycaster.intersectObject(plane.current, true);
if (!plane.current) return;
let intersects = raycaster.intersectObject(plane.current, true);
let intersectsLines = raycaster.intersectObjects(
floorPlanGroupLine.current.children,
true
);
let intersectsPoint = raycaster.intersectObjects(
floorPlanGroupPoint.current.children,
true
);
let intersectsLines = raycaster.intersectObjects(floorPlanGroupLine.current.children, true);
let intersectsPoint = raycaster.intersectObjects(floorPlanGroupPoint.current.children, true);
const VisibleintersectsPoint = intersectsPoint.find(
(intersect) => intersect.object.visible
);
const visibleIntersect = intersectsLines.find(
(intersect) =>
intersect.object.visible &&
intersect.object.name !== CONSTANTS.lineConfig.referenceName &&
intersect.object.userData.linePoints[0][3] ===
CONSTANTS.lineConfig.wallName
);
const VisibleintersectsPoint = intersectsPoint.find((intersect) => intersect.object.visible);
const visibleIntersect = intersectsLines.find(
(intersect) =>
intersect.object.visible &&
intersect.object.name !== CONSTANTS.lineConfig.referenceName &&
intersect.object.userData.linePoints[0][3] ===
CONSTANTS.lineConfig.wallName
);
if (
(intersectsPoint.length === 0 || VisibleintersectsPoint === undefined) &&
intersectsLines.length > 0 &&
!isSnapped.current &&
!ispreSnapped.current
) {
////////// Clicked on a preexisting Line //////////
if ((intersectsPoint.length === 0 || VisibleintersectsPoint === undefined) && intersectsLines.length > 0 && !isSnapped.current && !ispreSnapped.current) {
////////// Clicked on a preexisting Line //////////
if (visibleIntersect && intersects) {
let IntersectsPoint = new THREE.Vector3(
intersects[0].point.x,
0.01,
intersects[0].point.z
);
if (visibleIntersect && intersects) {
let IntersectsPoint = new THREE.Vector3(intersects[0].point.x, 0.01, intersects[0].point.z);
if (isAngleSnapped.current && anglesnappedPoint.current) {
IntersectsPoint = anglesnappedPoint.current;
}
if (visibleIntersect.object instanceof THREE.Mesh) {
const ThroughPoint =
visibleIntersect.object.geometry.parameters.path.getPoints(
CONSTANTS.lineConfig.lineIntersectionPoints
);
let intersectionPoint = getClosestIntersection(
ThroughPoint,
IntersectsPoint
);
if (isAngleSnapped.current && anglesnappedPoint.current) {
IntersectsPoint = anglesnappedPoint.current;
}
if (visibleIntersect.object instanceof THREE.Mesh) {
const ThroughPoint = visibleIntersect.object.geometry.parameters.path.getPoints(CONSTANTS.lineConfig.lineIntersectionPoints);
let intersectionPoint = getClosestIntersection(ThroughPoint, IntersectsPoint);
if (intersectionPoint) {
const newLines = splitLine(
visibleIntersect,
intersectionPoint,
currentLayerPoint,
floorPlanGroupPoint,
dragPointControls,
isSnappedUUID,
lines,
setDeletedLines,
floorPlanGroupLine,
socket,
CONSTANTS.pointConfig.wallOuterColor,
CONSTANTS.lineConfig.wallColor,
CONSTANTS.lineConfig.wallName,
projectId,
versionId
);
setNewLines([newLines[0], newLines[1]]);
if (intersectionPoint) {
const newLines = splitLine(
visibleIntersect,
intersectionPoint,
currentLayerPoint,
floorPlanGroupPoint,
dragPointControls,
isSnappedUUID,
lines,
setDeletedLines,
floorPlanGroupLine,
socket,
CONSTANTS.pointConfig.wallOuterColor,
CONSTANTS.lineConfig.wallColor,
CONSTANTS.lineConfig.wallName,
projectId,
versionId
);
setNewLines([newLines[0], newLines[1]]);
(line.current as Types.Line).push([
new THREE.Vector3(intersectionPoint.x, 0.01, intersectionPoint.z),
isSnappedUUID.current!,
activeLayer,
CONSTANTS.lineConfig.wallName,
]);
(line.current as Types.Line).push([
new THREE.Vector3(intersectionPoint.x, 0.01, intersectionPoint.z),
isSnappedUUID.current!,
activeLayer,
CONSTANTS.lineConfig.wallName,
]);
if (line.current.length >= 2 && line.current[0] && line.current[1]) {
const data = arrayLineToObject(line.current as Types.Line);
if (line.current.length >= 2 && line.current[0] && line.current[1]) {
const data = arrayLineToObject(line.current as Types.Line);
//REST
//REST
// setLine(organization, data.layer!, data.line!, data.type!);
// setLine(organization, data.layer!, data.line!, data.type!);
//SOCKET
//SOCKET
const input = {
organization,
layer: data.layer,
line: data.line,
type: data.type,
socketId: socket.id,
versionId,
projectId,
userId,
};
const input = {
organization,
layer: data.layer,
line: data.line,
type: data.type,
socketId: socket.id,
versionId,
projectId,
userId,
};
socket.emit("v1:Line:create", input);
socket.emit("v1:Line:create", input);
setNewLines([newLines[0], newLines[1], line.current]);
lines.current.push(line.current as Types.Line);
addLineToScene(
line.current[0][0],
line.current[1][0],
CONSTANTS.lineConfig.wallColor,
line.current,
floorPlanGroupLine
);
let lastPoint = line.current[line.current.length - 1];
line.current = [lastPoint];
}
return;
}
}
}
}
setNewLines([newLines[0], newLines[1], line.current]);
lines.current.push(line.current as Types.Line);
addLineToScene(
line.current[0][0],
line.current[1][0],
CONSTANTS.lineConfig.wallColor,
line.current,
floorPlanGroupLine
);
let lastPoint = line.current[line.current.length - 1];
line.current = [lastPoint];
}
return;
}
}
}
}
if (intersects && intersects.length > 0) {
////////// Clicked on a emply place or a point //////////
if (intersects && intersects.length > 0) {
////////// Clicked on a emply place or a point //////////
let intersectionPoint = intersects[0].point;
let intersectionPoint = intersects[0].point;
if (
isAngleSnapped.current &&
line.current.length > 0 &&
anglesnappedPoint.current
) {
intersectionPoint = anglesnappedPoint.current;
}
if (isSnapped.current && line.current.length > 0 && snappedPoint.current) {
intersectionPoint = snappedPoint.current;
}
if (ispreSnapped.current && snappedPoint.current) {
intersectionPoint = snappedPoint.current;
}
if (isAngleSnapped.current && line.current.length > 0 && anglesnappedPoint.current) {
intersectionPoint = anglesnappedPoint.current;
}
if (isSnapped.current && line.current.length > 0 && snappedPoint.current) {
intersectionPoint = snappedPoint.current;
}
if (ispreSnapped.current && snappedPoint.current) {
intersectionPoint = snappedPoint.current;
}
if (!isSnapped.current && !ispreSnapped.current) {
addPointToScene(
intersectionPoint,
CONSTANTS.pointConfig.wallOuterColor,
currentLayerPoint,
floorPlanGroupPoint,
dragPointControls,
isSnappedUUID,
CONSTANTS.lineConfig.wallName
);
} else {
ispreSnapped.current = false;
isSnapped.current = false;
}
if (!isSnapped.current && !ispreSnapped.current) {
addPointToScene(
intersectionPoint,
CONSTANTS.pointConfig.wallOuterColor,
currentLayerPoint,
floorPlanGroupPoint,
dragPointControls,
isSnappedUUID,
CONSTANTS.lineConfig.wallName
);
} else {
ispreSnapped.current = false;
isSnapped.current = false;
}
(line.current as Types.Line).push([
new THREE.Vector3(intersectionPoint.x, 0.01, intersectionPoint.z),
isSnappedUUID.current!,
activeLayer,
CONSTANTS.lineConfig.wallName,
]);
(line.current as Types.Line).push([
new THREE.Vector3(intersectionPoint.x, 0.01, intersectionPoint.z),
isSnappedUUID.current!,
activeLayer,
CONSTANTS.lineConfig.wallName,
]);
if (line.current.length >= 2 && line.current[0] && line.current[1]) {
const data = arrayLineToObject(line.current as Types.Line);
if (line.current.length >= 2 && line.current[0] && line.current[1]) {
const data = arrayLineToObject(line.current as Types.Line);
//REST
//REST
// setLine(organization, data.layer!, data.line!, data.type!);
// setLine(organization, data.layer!, data.line!, data.type!);
//SOCKET
//SOCKET
const input = {
organization,
layer: data.layer,
line: data.line,
type: data.type,
socketId: socket.id,
versionId,
projectId,
userId,
};
const input = {
organization,
layer: data.layer,
line: data.line,
type: data.type,
socketId: socket.id,
versionId,
projectId,
userId,
};
socket.emit("v1:Line:create", input);
socket.emit("v1:Line:create", input);
setNewLines([line.current]);
lines.current.push(line.current as Types.Line);
addLineToScene(
line.current[0][0],
line.current[1][0],
CONSTANTS.lineConfig.wallColor,
line.current,
floorPlanGroupLine
);
let lastPoint = line.current[line.current.length - 1];
line.current = [lastPoint];
}
if (isSnapped.current) {
removeReferenceLine(floorPlanGroup, ReferenceLineMesh, LineCreated, line);
}
}
setNewLines([line.current]);
lines.current.push(line.current as Types.Line);
addLineToScene(
line.current[0][0],
line.current[1][0],
CONSTANTS.lineConfig.wallColor,
line.current,
floorPlanGroupLine
);
let lastPoint = line.current[line.current.length - 1];
line.current = [lastPoint];
}
if (isSnapped.current) {
removeReferenceLine(floorPlanGroup, ReferenceLineMesh, LineCreated, line);
}
}
}
export default drawWall;

2
app/src/modules/builder/geomentries/lines/splitLine.ts
View File

@@ -107,6 +107,7 @@ function splitLine(
userId,
};
console.log('input1: ', input1);
socket.emit("v1:Line:create", input1);
//REST
@@ -126,6 +127,7 @@ function splitLine(
userId,
};
console.log('input2: ', input2);
socket.emit("v1:Line:create", input2);
lines.current.push(newLine1, newLine2);

10
app/src/modules/builder/line/line.tsx
View File

@@ -1,11 +1,11 @@
import * as THREE from 'three';
import { useThree } from '@react-three/fiber';
import { useEffect, useMemo, useState } from "react";
import * as Constants from '../../../types/world/worldConstants';
import { DragControls, Tube } from '@react-three/drei';
import { useToolMode } from '../../../store/builder/store';
import { useBuilderStore } from '../../../store/builder/useBuilderStore';
import { useWallStore } from '../../../store/builder/useWallStore';
import { useThree } from '@react-three/fiber';
import { useSceneContext } from '../../scene/sceneContext';
import * as Constants from '../../../types/world/worldConstants';
interface LineProps {
points: [Point, Point];
@@ -17,7 +17,8 @@ function Line({ points }: Readonly<LineProps>) {
const plane = useMemo(() => new THREE.Plane(new THREE.Vector3(0, 1, 0), 0), []);
const [isDeletable, setIsDeletable] = useState(false);
const { toolMode } = useToolMode();
const { removeWallByPoints, setPosition } = useWallStore();
const { wallStore } = useSceneContext();
const { removeWallByPoints, setPosition } = wallStore();
const [dragOffset, setDragOffset] = useState<THREE.Vector3 | null>(null);
const { hoveredLine, setHoveredLine, hoveredPoint } = useBuilderStore();
@@ -79,6 +80,7 @@ function Line({ points }: Readonly<LineProps>) {
if (toolMode === '2D-Delete') {
if (points[0].pointType === 'Wall' && points[1].pointType === 'Wall') {
removeWallByPoints(points);
setHoveredLine(null);
}
gl.domElement.style.cursor = 'default';
}

5
app/src/modules/builder/point/helpers/usePointSnapping.tsx
View File

@@ -1,6 +1,5 @@
import * as THREE from 'three';
import { useCallback } from 'react';
import { useWallStore } from '../../../../store/builder/useWallStore';
import { useSceneContext } from '../../../scene/sceneContext';
const POINT_SNAP_THRESHOLD = 0.5; // Distance threshold for snapping in meters
@@ -12,9 +11,9 @@ const ANGLE_SNAP_DISTANCE_THRESHOLD = 0.5; // Distance threshold for snapping i
const CAN_ANGLE_SNAP = true; // Whether snapping is enabled or not
export const usePointSnapping = (currentPoint: { uuid: string, pointType: string, position: [number, number, number] } | null) => {
const { aisleStore } = useSceneContext();
const { aisleStore, wallStore } = useSceneContext();
const { aisles, getConnectedPoints: getConnectedAislePoints } = aisleStore();
const { walls, getConnectedPoints: getConnectedWallPoints } = useWallStore();
const { walls, getConnectedPoints: getConnectedWallPoints } = wallStore();
// Wall Snapping

9
app/src/modules/builder/point/point.tsx
View File

@@ -6,7 +6,6 @@ import { DragControls } from '@react-three/drei';
import { useThree } from '@react-three/fiber';
import { useBuilderStore } from '../../../store/builder/useBuilderStore';
import { usePointSnapping } from './helpers/usePointSnapping';
import { useWallStore } from '../../../store/builder/useWallStore';
import { deleteAisleApi } from '../../../services/factoryBuilder/aisle/deleteAisleApi';
import { useParams } from 'react-router-dom';
import { createAisleApi } from '../../../services/factoryBuilder/aisle/createAisleApi';
@@ -20,9 +19,9 @@ function Point({ point }: { readonly point: Point }) {
const [isHovered, setIsHovered] = useState(false);
const [dragOffset, setDragOffset] = useState<THREE.Vector3 | null>(null);
const { toolMode } = useToolMode();
const { aisleStore } = useSceneContext();
const { aisleStore, wallStore } = useSceneContext();
const { setPosition: setAislePosition, removePoint: removeAislePoint, getAislesByPointId } = aisleStore();
const { setPosition: setWallPosition, removePoint: removeWallPoint } = useWallStore();
const { setPosition: setWallPosition, removePoint: removeWallPoint } = wallStore();
const { snapAislePoint, snapAisleAngle, snapWallPoint, snapWallAngle } = usePointSnapping({ uuid: point.pointUuid, pointType: point.pointType, position: point.position });
const { hoveredPoint, setHoveredPoint } = useBuilderStore();
const { selectedVersionStore } = useVersionContext();
@@ -31,6 +30,10 @@ function Point({ point }: { readonly point: Point }) {
const boxScale: [number, number, number] = Constants.pointConfig.boxScale;
const colors = getColor(point);
useEffect(() => {
gl.domElement.style.cursor = 'default';
}, [toolMode])
function getColor(point: Point) {
if (point.pointType === 'Aisle') {
return {

83
app/src/modules/builder/wall/Instances/instance/wall.tsx
View File

@@ -1,18 +1,26 @@
import * as THREE from 'three';
import { Base } from '@react-three/csg';
import { useMemo, useRef, useState } from 'react';
import * as Constants from '../../../../../types/world/worldConstants';
import { Decal, MeshDiscardMaterial } from '@react-three/drei';
import { useFrame, useThree } from '@react-three/fiber';
import defaultMaterial from '../../../../../assets/textures/floor/wall-tex.png';
import material1 from '../../../../../assets/textures/floor/factory wall texture.jpg';
import { useWallStore } from '../../../../../store/builder/useWallStore';
import useModuleStore from '../../../../../store/useModuleStore';
import { useSceneContext } from '../../../../scene/sceneContext';
import { useWallClassification } from './helpers/useWallClassification';
import { useFrame, useThree } from '@react-three/fiber';
import { useWallVisibility } from '../../../../../store/builder/store';
import { Decal } from '@react-three/drei';
import { Base } from '@react-three/csg';
import { useToggleView, useWallVisibility } from '../../../../../store/builder/store';
import { useBuilderStore } from '../../../../../store/builder/useBuilderStore';
import * as Constants from '../../../../../types/world/worldConstants';
import DecalInstance from '../../../Decal/decalInstance';
function Wall({ wall }: { readonly wall: Wall }) {
const { walls } = useWallStore();
const { wallStore } = useSceneContext();
const { walls, addDecal } = wallStore();
const { selectedWall, setSelectedWall, setSelectedDecal } = useBuilderStore();
const { togglView } = useToggleView();
const { activeModule } = useModuleStore();
const { camera } = useThree();
const { wallVisibility } = useWallVisibility();
const { getWallType, isWallFlipped } = useWallClassification(walls);
@@ -67,7 +75,7 @@ function Wall({ wall }: { readonly wall: Wall }) {
new THREE.MeshStandardMaterial({
color: Constants.wallConfig.defaultColor,
side: THREE.DoubleSide,
map: wall.outsideMaterial === 'Default Material`' ? defaultWallTexture : material1WallTexture,
map: wall.outsideMaterial === 'Default Material' ? defaultWallTexture : material1WallTexture,
}),
];
}, [defaultWallTexture, material1WallTexture, wall]);
@@ -100,29 +108,52 @@ function Wall({ wall }: { readonly wall: Wall }) {
geometry={geometry}
position={[centerX, centerY, centerZ]}
rotation={[0, -angle, 0]}
userData={wall}
>
{materials.map((material, index) => (
<primitive key={index} visible={visible} object={material} attach={`material-${index}`} />
))}
{wall.decals.map((decal) => {
return (
<Decal
// debug
position={[decal.decalPosition[0], decal.decalPosition[1], wall.wallThickness / 2]}
rotation={[0, 0, decal.decalRotation]}
scale={[decal.decalScale, decal.decalScale, 0.001]}
>
<meshBasicMaterial
map={material1WallTexture}
side={THREE.DoubleSide}
polygonOffset
polygonOffsetFactor={-1}
/>
</Decal>
)
})}
</Base>
<mesh
castShadow
geometry={geometry}
position={[centerX, centerY, centerZ]}
rotation={[0, -angle, 0]}
userData={wall}
name={`WallReference_${wall.wallUuid}`}
onClick={(e) => {
if (visible && !togglView && activeModule === 'builder') {
if (e.object.userData.wallUuid) {
setSelectedWall(e.object);
setSelectedDecal(null);
if (wall.decals.length > 0) return;
const decal: Decal = {
decalUuid: THREE.MathUtils.generateUUID(),
decalName: 'Decal',
decalId: 'Default Decal',
decalPosition: [0, 0, wall.wallThickness / 2 + 0.001],
decalRotation: 0,
decalScale: 1,
decalType: { type: 'Wall', wallUuid: wall.wallUuid }
}
addDecal(wall.wallUuid, decal);
}
}
}}
onPointerMissed={() => {
if (selectedWall && selectedWall.userData.wallUuid === wall.wallUuid) {
setSelectedWall(null);
}
}}
>
<MeshDiscardMaterial />
{wall.decals.map((decal) => (
<DecalInstance visible={visible} key={decal.decalUuid} decal={decal} />
))}
</mesh>
</mesh>
);
}

11
app/src/modules/builder/wall/Instances/wallInstances.tsx
View File

@@ -2,9 +2,10 @@ import React, { useEffect, useMemo } from 'react';
import { DoubleSide, RepeatWrapping, Shape, SRGBColorSpace, TextureLoader, Vector2, Vector3 } from 'three';
import { Geometry } from '@react-three/csg';
import { Html, Extrude } from '@react-three/drei';
import { useWallStore } from '../../../../store/builder/useWallStore'
import { useWallClassification } from './instance/helpers/useWallClassification';
import { useLoader } from '@react-three/fiber';
import { useSceneContext } from '../../../scene/sceneContext';
import { useToggleView } from '../../../../store/builder/store';
import { useWallClassification } from './instance/helpers/useWallClassification';
import Line from '../../line/line';
import Point from '../../point/point';
import WallInstance from './instance/wallInstance';
@@ -12,10 +13,10 @@ import * as Constants from '../../../../types/world/worldConstants';
import texturePath from "../../../../assets/textures/floor/white.png";
import texturePathDark from "../../../../assets/textures/floor/black.png";
import { useLoader } from '@react-three/fiber';
function WallInstances() {
const { walls } = useWallStore();
const { wallStore } = useSceneContext();
const { walls } = wallStore();
const { rooms } = useWallClassification(walls)
const { toggleView } = useToggleView();
@@ -41,7 +42,7 @@ function WallInstances() {
return (
<>
{!toggleView && (
{!toggleView && walls.length > 1 && (
<>
<mesh name='Walls-Group'>
<Geometry useGroups>

5
app/src/modules/builder/wall/wallCreator/wallCreator.tsx
View File

@@ -3,7 +3,7 @@ import { useEffect, useMemo, useRef, useState } from 'react'
import { useThree } from '@react-three/fiber';
import { useActiveLayer, useSocketStore, useToggleView, useToolMode } from '../../../../store/builder/store';
import * as Constants from '../../../../types/world/worldConstants';
import { useWallStore } from '../../../../store/builder/useWallStore';
import { useSceneContext } from '../../../scene/sceneContext';
import { useBuilderStore } from '../../../../store/builder/useBuilderStore';
import ReferencePoint from '../../point/reference/referencePoint';
import ReferenceWall from './referenceWall';
@@ -16,7 +16,8 @@ function WallCreator() {
const { toolMode } = useToolMode();
const { activeLayer } = useActiveLayer();
const { socket } = useSocketStore();
const { addWall, getWallPointById, removeWall, getWallByPoints } = useWallStore();
const { wallStore } = useSceneContext();
const { addWall, getWallPointById, removeWall, getWallByPoints } = wallStore();
const drag = useRef(false);
const isLeftMouseDown = useRef(false);
const { wallThickness, wallHeight, insideMaterial, outsideMaterial, snappedPosition, snappedPoint } = useBuilderStore();

15
app/src/modules/builder/wall/wallGroup.tsx
View File

@@ -1,7 +1,22 @@
import { useEffect } from 'react';
import { useToggleView } from '../../../store/builder/store'
import { useBuilderStore } from '../../../store/builder/useBuilderStore';
import WallCreator from './wallCreator/wallCreator'
import WallInstances from './Instances/wallInstances'
import useModuleStore from '../../../store/useModuleStore';
function WallGroup() {
const { togglView } = useToggleView();
const { setSelectedWall, setSelectedDecal } = useBuilderStore();
const { activeModule } = useModuleStore();
useEffect(() => {
if (togglView || activeModule !== 'builder') {
setSelectedWall(null);
setSelectedDecal(null);
}
}, [togglView, activeModule])
return (
<>

36
app/src/modules/scene/postProcessing/postProcessing.tsx
View File

@@ -15,7 +15,7 @@ export default function PostProcessing() {
const { selectedWallItem } = useSelectedWallItem();
const { selectedFloorItem } = useSelectedFloorItem();
const { selectedEventSphere } = useSelectedEventSphere();
const { selectedAisle } = useBuilderStore();
const { selectedAisle, selectedWall, selectedDecal } = useBuilderStore();
function flattenChildren(children: any[]) {
const allChildren: any[] = [];
@@ -40,6 +40,10 @@ export default function PostProcessing() {
// console.log('selectedAisle: ', selectedAisle);
}, [selectedAisle])
useEffect(() => {
// console.log('selectedWall: ', selectedWall);
}, [selectedWall])
return (
<EffectComposer autoClear={false}>
<N8AO
@@ -66,6 +70,36 @@ export default function PostProcessing() {
xRay={false}
/>
)}
{selectedWall && (
<Outline
selection={selectedWall}
selectionLayer={10}
width={2000}
blendFunction={BlendFunction.ALPHA}
edgeStrength={5}
resolutionScale={2}
pulseSpeed={0}
visibleEdgeColor={CONSTANTS.outlineConfig.assetSelectColor}
hiddenEdgeColor={CONSTANTS.outlineConfig.assetSelectColor}
blur={true}
xRay={true}
/>
)}
{selectedDecal && (
<Outline
selection={selectedDecal}
selectionLayer={10}
width={2000}
blendFunction={BlendFunction.ALPHA}
edgeStrength={5}
resolutionScale={2}
pulseSpeed={0}
visibleEdgeColor={CONSTANTS.outlineConfig.assetSelectColor}
hiddenEdgeColor={CONSTANTS.outlineConfig.assetSelectColor}
blur={true}
xRay={true}
/>
)}
{deletableFloorItem && (
<Outline
selection={flattenChildren(deletableFloorItem.children)}

24
app/src/modules/scene/sceneContext.tsx
View File

@@ -1,7 +1,11 @@
import { createContext, useContext, useMemo } from 'react';
import { createAssetStore, AssetStoreType } from '../../store/builder/useAssetStore';
import { createWallAssetStore, WallAssetStoreType } from '../../store/builder/useWallAssetStore';
import { createWallStore, WallStoreType } from '../../store/builder/useWallStore';
import { createAisleStore, AisleStoreType } from '../../store/builder/useAisleStore';
import { createZoneStore, ZoneStoreType } from '../../store/builder/useZoneStore';
import { createFloorStore, FloorStoreType } from '../../store/builder/useFloorStore';
import { createEventStore, EventStoreType } from '../../store/simulation/useEventsStore';
import { createProductStore, ProductStoreType } from '../../store/simulation/useProductStore';
@@ -16,7 +20,11 @@ import { createStorageUnitStore, StorageUnitStoreType } from '../../store/simula
type SceneContextValue = {
assetStore: AssetStoreType,
wallAssetStore: WallAssetStoreType,
wallStore: WallStoreType,
aisleStore: AisleStoreType,
zoneStore: ZoneStoreType,
floorStore: FloorStoreType,
eventStore: EventStoreType,
productStore: ProductStoreType,
@@ -44,7 +52,11 @@ export function SceneProvider({
}) {
const assetStore = useMemo(() => createAssetStore(), []);
const wallAssetStore = useMemo(() => createWallAssetStore(), []);
const wallStore = useMemo(() => createWallStore(), []);
const aisleStore = useMemo(() => createAisleStore(), []);
const zoneStore = useMemo(() => createZoneStore(), []);
const floorStore = useMemo(() => createFloorStore(), []);
const eventStore = useMemo(() => createEventStore(), []);
const productStore = useMemo(() => createProductStore(), []);
@@ -58,7 +70,11 @@ export function SceneProvider({
const clearStores = useMemo(() => () => {
assetStore.getState().clearAssets();
wallAssetStore.getState().clearWallAssets();
wallStore.getState().clearWalls();
aisleStore.getState().clearAisles();
zoneStore.getState().clearZones();
floorStore.getState().clearFloors();
eventStore.getState().clearEvents();
productStore.getState().clearProducts();
materialStore.getState().clearMaterials();
@@ -67,12 +83,16 @@ export function SceneProvider({
conveyorStore.getState().clearConveyors();
vehicleStore.getState().clearVehicles();
storageUnitStore.getState().clearStorageUnits();
}, [assetStore, aisleStore, eventStore, productStore, materialStore, armBotStore, machineStore, conveyorStore, vehicleStore, storageUnitStore]);
}, [assetStore, wallAssetStore, wallStore, aisleStore, zoneStore, floorStore, eventStore, productStore, materialStore, armBotStore, machineStore, conveyorStore, vehicleStore, storageUnitStore]);
const contextValue = useMemo(() => (
{
assetStore,
wallAssetStore,
wallStore,
aisleStore,
zoneStore,
floorStore,
eventStore,
productStore,
materialStore,
@@ -84,7 +104,7 @@ export function SceneProvider({
clearStores,
layout
}
), [assetStore, aisleStore, eventStore, productStore, materialStore, armBotStore, machineStore, conveyorStore, vehicleStore, storageUnitStore, clearStores, layout]);
), [assetStore, wallAssetStore, wallStore, aisleStore, zoneStore, floorStore, eventStore, productStore, materialStore, armBotStore, machineStore, conveyorStore, vehicleStore, storageUnitStore, clearStores, layout]);
return (
<SceneContext.Provider value={contextValue}>

30
app/src/modules/visualization/widgets/3d/Dropped3dWidget.tsx
View File

@@ -106,17 +106,17 @@ export default function Dropped3dWidgets() {
const hasEntered = { current: false };
const handleDragEnter = (event: DragEvent) => {
console.log("dragEnter");
event.preventDefault();
event.stopPropagation();
if (hasEntered.current || !widgetSelect.startsWith("ui")) return;
console.log('hasEntered.current : ', hasEntered.current );
hasEntered.current = true;
const group1 = scene.getObjectByName("itemsGroup");
console.log('group1: ', group1);
if (!group1) return;
// const group1 = scene.getObjectByName("itemsGroup");
//
// if (!group1) return;
const rect = canvasElement.getBoundingClientRect();
mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
@@ -139,7 +139,7 @@ export default function Dropped3dWidgets() {
intersect.object.type !== "GridHelper"
);
console.log('intersects: ', intersects);
if (intersects.length > 0) {
const { x, y, z } = intersects[0].point;
const newWidget: WidgetData = {
@@ -238,10 +238,11 @@ export default function Dropped3dWidgets() {
organization,
widget: newWidget,
zoneUuid: selectedZone.zoneUuid,
version: selectedVersion?.versionId || '',
versionId: selectedVersion?.versionId || '',
projectId,
userId
};
if (visualizationSocket) {
visualizationSocket.emit("v1:viz-3D-widget:add", add3dWidget);
@@ -276,7 +277,7 @@ export default function Dropped3dWidgets() {
const widgetToDuplicate = activeZoneWidgets.find(
(w: WidgetData) => w.id === rightClickSelected
);
console.log("3d widget to duplecate", widgetToDuplicate);
if (!widgetToDuplicate) return;
const newWidget: any = {
@@ -301,6 +302,7 @@ export default function Dropped3dWidgets() {
projectId,
userId
};
if (visualizationSocket) {
visualizationSocket.emit("v1:viz-3D-widget:add", adding3dWidget);
}
@@ -470,20 +472,20 @@ export default function Dropped3dWidgets() {
}
// if (rightSelect === "Vertical Move") {
// // console.log('rightSelect: ', rightSelect);
// //
// // console.log('floorPlanesVertical: ', floorPlanesVertical);
// // console.log('planeIntersect.current: ', planeIntersect.current);
// //
// //
// // const intersect = raycaster.ray.intersectPlane(
// // floorPlanesVertical,
// // planeIntersect.current
// // );
// // console.log('intersect: ', intersect);
// //
// let intersect = event.clientY
// if (intersect && typeof intersectcontextmenu === "number") {
// console.log('intersect: ', intersect);
//
// const diff = intersect - intersectcontextmenu;
// const unclampedY = selectedWidget.position[1] + diff;
// const newY = Math.max(0, unclampedY); // Prevent going below floor (y=0)
@@ -495,7 +497,7 @@ export default function Dropped3dWidgets() {
// newY,
// selectedWidget.position[2],
// ];
// console.log('newPosition: ', newPosition);
//
// updateWidgetPosition(selectedzoneUuid, rightClickSelected, newPosition);

20
app/src/modules/visualization/widgets/3d/cards/ProductionCapacity.tsx
View File

@@ -18,6 +18,8 @@ import { useWidgetStore } from "../../../../../store/useWidgetStore";
import useChartStore from "../../../../../store/visualization/useChartStore";
import { getUserData } from "../../../../../functions/getUserData";
import { get3dWidgetInput } from "../../../../../services/visulization/zone/get3dWidgetInput";
import { useVersionContext } from "../../../../builder/version/versionContext";
import { useParams } from "react-router-dom";
// Register ChartJS components
ChartJS.register(
@@ -70,6 +72,9 @@ const ProductionCapacity: React.FC<ProductionCapacityProps> = ({
});
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
const { userName, userId, organization, email } = getUserData();
const { selectedVersionStore } = useVersionContext();
const { selectedVersion } = selectedVersionStore();
const { projectId } = useParams()
// Chart data for a week
const defaultChartData = {
labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], // Days of the week
@@ -171,12 +176,15 @@ const ProductionCapacity: React.FC<ProductionCapacityProps> = ({
const fetchSavedInputes = async () => {
if (id !== "") {
let response = await get3dWidgetInput(id, organization)
console.log('response: ', response);
let response = await get3dWidgetInput(id, organization, projectId, selectedVersion?.versionId || "")
if (response.message === "Widget not found") {
return
}
if (response) {
setmeasurements(response.data.Data.measurements);
setDuration(response.data.Data.duration);
setName(response.data.widgetName);
setmeasurements(response.Datastructure.measurements);
setDuration(response.Datastructure.duration);
setName(response.widgetName);
}
// try {
// const response = await axios.get(
@@ -215,7 +223,7 @@ const ProductionCapacity: React.FC<ProductionCapacityProps> = ({
scale={scale}
rotation={rotation}
// class
wrapperClass="pointer-none"
// wrapperClass="pointer-none"
// other
transform
zIndexRange={[1, 0]}

16
app/src/modules/visualization/widgets/3d/cards/ReturnOfInvestment.tsx
View File

@@ -19,6 +19,8 @@ import useChartStore from "../../../../../store/visualization/useChartStore";
import { WavyIcon } from "../../../../../components/icons/3dChartIcons";
import { getUserData } from "../../../../../functions/getUserData";
import { get3dWidgetInput } from "../../../../../services/visulization/zone/get3dWidgetInput";
import { useVersionContext } from "../../../../builder/version/versionContext";
import { useParams } from "react-router-dom";
// Register Chart.js components
ChartJS.register(
@@ -79,6 +81,9 @@ const ReturnOfInvestment: React.FC<ReturnOfInvestmentProps> = ({
datasets: [],
});
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
const { selectedVersionStore } = useVersionContext();
const { selectedVersion } = selectedVersionStore();
const { projectId } = useParams()
const { userName, userId, organization, email } = getUserData();
// Improved sample data for the smooth curve graph (single day)
const graphData: ChartData<"line"> = {
@@ -200,8 +205,11 @@ const ReturnOfInvestment: React.FC<ReturnOfInvestmentProps> = ({
const fetchSavedInputes = async () => {
if (id !== "") {
let response = await get3dWidgetInput(id, organization)
console.log('response: ', response);
let response = await get3dWidgetInput(id, organization, projectId, selectedVersion?.versionId || "")
if (response.message === "Widget not found") {
return
}
if (response) {
setmeasurements(response.data.Data.measurements);
setDuration(response.data.Data.duration);
@@ -216,11 +224,11 @@ const ReturnOfInvestment: React.FC<ReturnOfInvestmentProps> = ({
// setDuration(response.data.Data.duration);
// setName(response.data.widgetName);
// } else {
// // console.log("Unexpected response:", response);
// //
// }
// } catch (error) {
// echo.error("Failed to fetch saved inputs");
// console.error("There was an error!", error);
//
// }
}
};

24
app/src/modules/visualization/widgets/3d/cards/StateWorking.tsx
View File

@@ -7,6 +7,8 @@ import { useWidgetStore } from "../../../../../store/useWidgetStore";
import useChartStore from "../../../../../store/visualization/useChartStore";
import { getUserData } from "../../../../../functions/getUserData";
import { get3dWidgetInput } from "../../../../../services/visulization/zone/get3dWidgetInput";
import { useVersionContext } from "../../../../builder/version/versionContext";
import { useParams } from "react-router-dom";
// import image from "../../../../assets/image/temp/image.png";
interface StateWorkingProps {
@@ -41,6 +43,9 @@ const StateWorking: React.FC<StateWorkingProps> = ({
const [datas, setDatas] = useState<any>({});
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
const { userName, userId, organization, email } = getUserData();
const { selectedVersionStore } = useVersionContext();
const { selectedVersion } = selectedVersionStore();
const { projectId } = useParams()
// const datas = [
// { key: "Oil Tank:", value: "24/341" },
// { key: "Oil Refin:", value: 36.023 },
@@ -78,12 +83,15 @@ const StateWorking: React.FC<StateWorkingProps> = ({
const fetchSavedInputes = async () => {
if (id !== "") {
let response = await get3dWidgetInput(id, organization)
console.log('response: ', response);
let response = await get3dWidgetInput(id, organization, projectId, selectedVersion?.versionId || "")
if (response.message === "Widget not found") {
return
}
if (response) {
setmeasurements(response.data.Data.measurements);
setDuration(response.data.Data.duration);
setName(response.data.widgetName);
setmeasurements(response.Datastructure.measurements);
setDuration(response.Datastructure.duration);
setName(response.widgetName);
}
// try {
// const response = await axios.get(
@@ -94,17 +102,17 @@ const StateWorking: React.FC<StateWorkingProps> = ({
// setDuration(response.data.Data.duration);
// setName(response.data.widgetName);
// } else {
// // console.log("Unexpected response:", response);
// //
// }
// } catch (error) {
// echo.error("Failed to fetch saved inputs");
// console.error("There was an error!", error);
//
// }
}
};
useEffect(() => {
fetchSavedInputes();
// fetchSavedInputes();
}, []);
useEffect(() => {

24
app/src/modules/visualization/widgets/3d/cards/Throughput.tsx
View File

@@ -21,6 +21,8 @@ import useChartStore from "../../../../../store/visualization/useChartStore";
import { ThroughputIcon } from "../../../../../components/icons/3dChartIcons";
import { getUserData } from "../../../../../functions/getUserData";
import { get3dWidgetInput } from "../../../../../services/visulization/zone/get3dWidgetInput";
import { useVersionContext } from "../../../../builder/version/versionContext";
import { useParams } from "react-router-dom";
// Register Chart.js components
ChartJS.register(
@@ -83,6 +85,9 @@ const Throughput: React.FC<ThroughputProps> = ({
});
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
const { userName, userId, organization, email } = getUserData();
const { selectedVersionStore } = useVersionContext();
const { selectedVersion } = selectedVersionStore();
const { projectId } = useParams()
@@ -180,12 +185,15 @@ const Throughput: React.FC<ThroughputProps> = ({
const fetchSavedInputes = async () => {
if (id !== "") {
let response = await get3dWidgetInput(id, organization)
console.log('response: ', response);
let response = await get3dWidgetInput(id, organization, projectId, selectedVersion?.versionId || "")
if (response.message === "Widget not found") {
return
}
if (response) {
setmeasurements(response.data.Data.measurements);
setDuration(response.data.Data.duration);
setName(response.data.widgetName);
setmeasurements(response.Datastructure.measurements);
setDuration(response.Datastructure.duration);
setName(response.widgetName);
}
// try {
// const response = await axios.get(
@@ -196,17 +204,17 @@ const Throughput: React.FC<ThroughputProps> = ({
// setDuration(response.data.Data.duration);
// setName(response.data.widgetName);
// } else {
// // console.log("Unexpected response:", response);
// //
// }
// } catch (error) {
// echo.error("Failed to fetch saved inputs");
// console.error("There was an error!", error);
//
// }
}
};
useEffect(() => {
fetchSavedInputes();
// fetchSavedInputes();
}, []);
useEffect(() => {