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 main-demo

Browse Source
This commit is contained in:
Vishnu
2025-07-11 18:18:27 +05:30
parent a42007ec14 7dc85b2edd
commit 99b51df468
20 changed files with 970 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app/src/assets/cursors/comment.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 1C11.866 1 15 4.13401 15 8C15 11.866 11.866 15 8 15H2C1.44772 15 1 14.5523 1 14V8C1 4.13401 4.13401 1 8 1Z" fill="black" stroke="white" stroke-width="2"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 270 B

6
app/src/assets/cursors/default.svg
View File

@@ -1,4 +1,4 @@
<svg width="12" height="17" viewBox="0 0 12 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 16.8284L4.5 11.5L11.4142 11.4142L0 0V16.8284Z" fill="white"/>
<path d="M1 14.4141V2.41406L9 10.4141L4 10.5L1 14.4141Z" fill="black"/>
<svg width="16" height="20" viewBox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.70849 18.2848L6.01914 13.9573C6.20421 13.7715 6.45487 13.6658 6.71711 13.663L13.3181 13.5936C14.2439 13.5839 14.6604 12.4297 13.9542 11.8309L1.64669 1.39613C0.996961 0.845261 0 1.30706 0 2.15888V17.5791C0 18.4709 1.07909 18.9167 1.70849 18.2848Z" fill="white"/>
<path d="M1.30078 14.5353V5.02997C1.30078 4.17815 2.29774 3.71636 2.94747 4.26722L10.4817 10.655C11.1864 11.2525 10.7733 12.4042 9.84957 12.4177L5.94136 12.4746C5.66374 12.4787 5.40031 12.5979 5.21412 12.8039L3.04259 15.206C2.42871 15.885 1.30078 15.4507 1.30078 14.5353Z" fill="black"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 249 B

After

Width:  |  Height:  |  Size: 665 B

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

@@ -10,6 +10,7 @@ import { useVersionContext } from '../version/versionContext';
import { useParams } from 'react-router-dom';
import { getUserData } from '../../../functions/getUserData';
import { handleCanvasCursors } from '../../../utils/mouseUtils/handleCanvasCursors';
import { useSelectedPoints } from '../../../store/simulation/useSimulationStore';
// import { upsertWallApi } from '../../../services/factoryBuilder/wall/upsertWallApi';
// import { deleteWallApi } from '../../../services/factoryBuilder/wall/deleteWallApi';
@@ -39,6 +40,7 @@ function Line({ points }: Readonly<LineProps>) {
const { projectId } = useParams();
const [dragOffset, setDragOffset] = useState<THREE.Vector3 | null>(null);
const { hoveredLine, setHoveredLine, hoveredPoint } = useBuilderStore();
const { selectedPoints } = useSelectedPoints();
const path = useMemo(() => {
const [start, end] = points.map(p => new THREE.Vector3(...p.position));
@@ -373,8 +375,8 @@ function Line({ points }: Readonly<LineProps>) {
onClick={() => {
handlePointClick(points);
}}
onPointerOver={() => {
if (!hoveredLine) {
onPointerOver={(e) => {
if (!hoveredLine && selectedPoints.length === 0 && e.buttons === 0 && !e.ctrlKey) {
setHoveredLine(points);
setIsHovered(true)
if (toolMode === 'move' && !hoveredPoint) {
@@ -385,7 +387,9 @@ function Line({ points }: Readonly<LineProps>) {
onPointerOut={() => {
if (hoveredLine) {
setHoveredLine(null);
handleCanvasCursors('default');
if(!hoveredPoint){
handleCanvasCursors('default');
}
}
setIsHovered(false)
}}

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

@@ -5,6 +5,7 @@ import { useSocketStore, useToolMode } from '../../../store/builder/store';
import { DragControls } from '@react-three/drei';
import { useThree } from '@react-three/fiber';
import { useBuilderStore } from '../../../store/builder/useBuilderStore';
import { useSelectedPoints } from '../../../store/simulation/useSimulationStore';
import { usePointSnapping } from './helpers/usePointSnapping';
import { useParams } from 'react-router-dom';
import { useVersionContext } from '../version/versionContext';
@@ -27,6 +28,7 @@ function Point({ point }: { readonly point: Point }) {
const { raycaster, camera, pointer } = useThree();
const plane = useMemo(() => new THREE.Plane(new THREE.Vector3(0, 1, 0), 0), []);
const [isHovered, setIsHovered] = useState(false);
const [isSelected, setIsSelected] = useState(false);
const [dragOffset, setDragOffset] = useState<THREE.Vector3 | null>(null);
const { socket } = useSocketStore();
const { toolMode } = useToolMode();
@@ -36,7 +38,8 @@ function Point({ point }: { readonly point: Point }) {
const { setPosition: setFloorPosition, removePoint: removeFloorPoint, getFloorsByPointId } = floorStore();
const { setPosition: setZonePosition, removePoint: removeZonePoint, getZonesByPointId } = zoneStore();
const { snapAislePoint, snapAisleAngle, snapWallPoint, snapWallAngle, snapFloorPoint, snapFloorAngle, snapZonePoint, snapZoneAngle } = usePointSnapping({ uuid: point.pointUuid, pointType: point.pointType, position: point.position });
const { hoveredPoint, setHoveredPoint } = useBuilderStore();
const { hoveredPoint,hoveredLine, setHoveredPoint } = useBuilderStore();
const { selectedPoints } = useSelectedPoints();
const { userId, organization } = getUserData();
const { selectedVersionStore } = useVersionContext();
const { selectedVersion } = selectedVersionStore();
@@ -407,50 +410,63 @@ function Point({ point }: { readonly point: Point }) {
}
}, [hoveredPoint])
useEffect(() => {
if (selectedPoints.length > 0 && selectedPoints.some((selectedPoint) => (selectedPoint.userData.pointUuid && selectedPoint.userData.pointUuid === point.pointUuid))) {
setIsSelected(true);
} else {
setIsSelected(false);
}
}, [selectedPoints])
if (!point) {
return null;
}
return (
<DragControls
axisLock='y'
autoTransform={false}
onDragStart={() => handleDragStart(point)}
onDrag={() => handleDrag(point)}
onDragEnd={() => handleDragEnd(point)}
>
<mesh
key={point.pointUuid}
uuid={point.pointUuid}
name={`${point.pointType}-Point`}
position={new THREE.Vector3(...point.position)}
onClick={() => {
handlePointClick(point);
}}
onPointerOver={() => {
if (!hoveredPoint) {
setHoveredPoint(point);
setIsHovered(true);
if (toolMode === 'move') {
handleCanvasCursors('grab');
}
}
}}
onPointerOut={() => {
if (hoveredPoint) {
setHoveredPoint(null);
handleCanvasCursors('default');
}
setIsHovered(false)
}}
userData={point}
>
<boxGeometry args={boxScale} />
<shaderMaterial
ref={materialRef}
uniforms={uniforms}
vertexShader={
`
<>
{!isSelected ?
<DragControls
axisLock='y'
autoTransform={false}
onDragStart={() => handleDragStart(point)}
onDrag={() => handleDrag(point)}
onDragEnd={() => handleDragEnd(point)}
>
<mesh
key={point.pointUuid}
uuid={point.pointUuid}
name={`${point.pointType}-Point`}
position={[...point.position]}
onClick={() => {
handlePointClick(point);
}}
onPointerOver={(e) => {
if (!hoveredPoint && selectedPoints.length === 0 && e.buttons === 0 && !e.ctrlKey) {
setHoveredPoint(point);
setIsHovered(true);
if (toolMode === 'move') {
handleCanvasCursors('grab');
}
}
}}
onPointerOut={() => {
if (hoveredPoint) {
setHoveredPoint(null);
if(!hoveredLine){
handleCanvasCursors('default');
}
}
setIsHovered(false)
}}
userData={point}
>
<boxGeometry args={boxScale} />
<shaderMaterial
ref={materialRef}
uniforms={uniforms}
vertexShader={
`
varying vec2 vUv;
void main() {
@@ -458,9 +474,9 @@ function Point({ point }: { readonly point: Point }) {
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`
}
fragmentShader={
`
}
fragmentShader={
`
varying vec2 vUv;
uniform vec3 uOuterColor;
uniform vec3 uInnerColor;
@@ -475,10 +491,32 @@ function Point({ point }: { readonly point: Point }) {
}
}
`
}
/>
</mesh>
</DragControls>
}
/>
</mesh>
</DragControls>
:
<group
key={point.pointUuid}
uuid={point.pointUuid}
name={`${point.pointType}-Point`}
position={[point.position[0], 0.3, point.position[2]]}
userData={point}
rotation={[Math.PI / 2, 0, 0]}
>
<mesh>
<torusGeometry args={[0.4, 0.1, 2, 16]} />
<meshBasicMaterial color="#6F42C1" />
</mesh>
<mesh position={[0, 0, 0]}>
<sphereGeometry args={[0.3, 8, 16]} />
<meshBasicMaterial color="white" />
</mesh>
</group>
}
</>
);
}

7
app/src/modules/scene/controls/controls.tsx
View File

@@ -9,10 +9,11 @@ import { getCamera } from "../../../services/factoryBuilder/camera/getCameraApi"
import updateCamPosition from "../camera/updateCameraPosition";
import CamMode from "../camera/camMode";
import SwitchView from "../camera/switchView";
import SelectionControls from "./selectionControls/selectionControls";
import SelectionControls3D from "./selectionControls/selection3D/selectionControls3D";
import TransformControl from "./transformControls/transformControls";
import { useParams } from "react-router-dom";
import { getUserData } from "../../../functions/getUserData";
import SelectionControls2D from "./selectionControls/selection2D/selectionControls2D";
export default function Controls() {
const controlsRef = useRef<CameraControls>(null);
@@ -137,7 +138,9 @@ export default function Controls() {
</CameraControls>
<SelectionControls />
<SelectionControls3D />
<SelectionControls2D />
<TransformControl />

341
app/src/modules/scene/controls/selectionControls/selection2D/moveControls2D.tsx Normal file
View File

@@ -0,0 +1,341 @@
import * as THREE from "three";
import { useCallback, useEffect, useMemo, useState } from "react";
import { useFrame, useThree } from "@react-three/fiber";
import { useSocketStore, useToggleView, useToolMode, } from "../../../../../store/builder/store";
import { detectModifierKeys } from "../../../../../utils/shortcutkeys/detectModifierKeys";
import { useParams } from "react-router-dom";
import { getUserData } from "../../../../../functions/getUserData";
import { useSceneContext } from "../../../sceneContext";
import { useVersionContext } from "../../../../builder/version/versionContext";
import { useSelectedPoints } from "../../../../../store/simulation/useSimulationStore";
import useModuleStore from "../../../../../store/useModuleStore";
// import { upsertAisleApi } from "../../../../../services/factoryBuilder/aisle/upsertAisleApi";
// import { upsertWallApi } from "../../../../../services/factoryBuilder/wall/upsertWallApi";
// import { upsertFloorApi } from "../../../../../services/factoryBuilder/floor/upsertFloorApi";
// import { upsertZoneApi } from "../../../../../services/factoryBuilder/zone/upsertZoneApi";
function MoveControls2D({
movedObjects,
setMovedObjects,
pastedObjects,
setpastedObjects,
duplicatedObjects,
setDuplicatedObjects,
rotatedObjects,
setRotatedObjects,
}: any) {
const { camera, controls, gl, scene, pointer, raycaster } = useThree();
const plane = useMemo(() => new THREE.Plane(new THREE.Vector3(0, 1, 0), 0), []);
const { toolMode } = useToolMode();
const { toggleView } = useToggleView();
const { activeModule } = useModuleStore();
const { selectedPoints, clearSelectedPoints } = useSelectedPoints();
const { socket } = useSocketStore();
const { userId, organization } = getUserData();
const { projectId } = useParams();
const { selectedVersionStore } = useVersionContext();
const { selectedVersion } = selectedVersionStore();
const { aisleStore, wallStore, floorStore, zoneStore } = useSceneContext();
const { setPosition: setAislePosition, getAislesByPointId } = aisleStore();
const { setPosition: setWallPosition, getWallsByPointId } = wallStore();
const { setPosition: setFloorPosition, getFloorsByPointId } = floorStore();
const { setPosition: setZonePosition, getZonesByPointId } = zoneStore();
const [dragOffset, setDragOffset] = useState<THREE.Vector3 | null>(null);
const [initialPositions, setInitialPositions] = useState<Record<string, THREE.Vector3>>({});
const [initialStates, setInitialStates] = useState<Record<string, { position: THREE.Vector3; rotation?: THREE.Euler; }>>({});
const [isMoving, setIsMoving] = useState(false);
useEffect(() => {
if (!camera || !scene || !toggleView) return;
const canvasElement = gl.domElement;
canvasElement.tabIndex = 0;
let isMoving = false;
const onPointerDown = () => {
isMoving = false;
};
const onPointerMove = () => {
isMoving = true;
};
const onPointerUp = (event: PointerEvent) => {
if (!isMoving && movedObjects.length > 0 && event.button === 0) {
event.preventDefault();
placeMovedAssets();
}
if (!isMoving && movedObjects.length > 0 && event.button === 2) {
event.preventDefault();
clearSelection();
setMovedObjects([]);
resetToInitialPositions();
}
};
const onKeyDown = (event: KeyboardEvent) => {
const keyCombination = detectModifierKeys(event);
if (pastedObjects.length > 0 || duplicatedObjects.length > 0 || rotatedObjects.length > 0) return;
if (keyCombination === "G") {
if (selectedPoints.length > 0) {
moveAssets();
}
}
if (keyCombination === "ESCAPE") {
event.preventDefault();
clearSelection();
setMovedObjects([]);
resetToInitialPositions();
}
};
if (toggleView && selectedPoints.length > 0) {
canvasElement.addEventListener("pointerdown", onPointerDown);
canvasElement.addEventListener("pointermove", onPointerMove);
canvasElement.addEventListener("pointerup", onPointerUp);
canvasElement.addEventListener("keydown", onKeyDown);
}
return () => {
canvasElement.removeEventListener("pointerdown", onPointerDown);
canvasElement.removeEventListener("pointermove", onPointerMove);
canvasElement.removeEventListener("pointerup", onPointerUp);
canvasElement.removeEventListener("keydown", onKeyDown);
};
}, [camera, controls, scene, toggleView, selectedPoints, socket, pastedObjects, duplicatedObjects, movedObjects, rotatedObjects]);
useEffect(() => {
if (toolMode !== 'move' || !toggleView) {
if (movedObjects.length > 0) {
resetToInitialPositions();
}
clearSelection();
}
}, [activeModule, toolMode, toggleView, movedObjects]);
useFrame(() => {
if (!isMoving || movedObjects.length === 0 || !dragOffset) return;
raycaster.setFromCamera(pointer, camera);
const intersectionPoint = new THREE.Vector3();
const hit = raycaster.ray.intersectPlane(plane, intersectionPoint);
if (hit) {
const baseNewPosition = new THREE.Vector3().addVectors(hit, dragOffset);
movedObjects.forEach((movedPoint: THREE.Object3D) => {
if (movedPoint.userData.pointUuid) {
const point: Point = movedPoint.userData as Point;
const initialPosition = initialPositions[movedPoint.uuid];
if (initialPosition) {
const relativeOffset = new THREE.Vector3().subVectors(
initialPosition,
initialPositions[movedObjects[0].uuid]
);
const newPosition = new THREE.Vector3().addVectors(baseNewPosition, relativeOffset);
const positionArray: [number, number, number] = [newPosition.x, newPosition.y, newPosition.z];
if (point.pointType === 'Aisle') {
setAislePosition(point.pointUuid, positionArray);
} else if (point.pointType === 'Wall') {
setWallPosition(point.pointUuid, positionArray);
} else if (point.pointType === 'Floor') {
setFloorPosition(point.pointUuid, positionArray);
} else if (point.pointType === 'Zone') {
setZonePosition(point.pointUuid, positionArray);
}
}
}
});
}
});
const calculateDragOffset = useCallback((point: THREE.Object3D, hitPoint: THREE.Vector3) => {
const pointPosition = new THREE.Vector3().copy(point.position);
return new THREE.Vector3().subVectors(pointPosition, hitPoint);
}, []);
const moveAssets = useCallback(() => {
if (selectedPoints.length === 0) return;
const states: Record<string, { position: THREE.Vector3; rotation?: THREE.Euler; }> = {};
selectedPoints.forEach((point: THREE.Object3D) => {
states[point.uuid] = {
position: new THREE.Vector3().copy(point.position),
rotation: point.rotation ? new THREE.Euler().copy(point.rotation) : undefined
};
});
setInitialStates(states);
const positions: Record<string, THREE.Vector3> = {};
selectedPoints.forEach((point: THREE.Object3D) => { positions[point.uuid] = new THREE.Vector3().copy(point.position); });
setInitialPositions(positions);
raycaster.setFromCamera(pointer, camera);
const intersectionPoint = new THREE.Vector3();
const hit = raycaster.ray.intersectPlane(plane, intersectionPoint);
if (hit && selectedPoints[0]) {
const offset = calculateDragOffset(selectedPoints[0], hit);
setDragOffset(offset);
}
setMovedObjects(selectedPoints);
setIsMoving(true);
}, [selectedPoints, camera, pointer, plane, raycaster, calculateDragOffset]);
const resetToInitialPositions = useCallback(() => {
setTimeout(() => {
movedObjects.forEach((movedPoint: THREE.Object3D) => {
if (movedPoint.userData.pointUuid && initialStates[movedPoint.uuid]) {
const point: Point = movedPoint.userData as Point;
const initialState = initialStates[movedPoint.uuid];
const positionArray: [number, number, number] = [
initialState.position.x,
initialState.position.y,
initialState.position.z
];
if (point.pointType === 'Aisle') {
setAislePosition(point.pointUuid, positionArray);
} else if (point.pointType === 'Wall') {
setWallPosition(point.pointUuid, positionArray);
} else if (point.pointType === 'Floor') {
setFloorPosition(point.pointUuid, positionArray);
} else if (point.pointType === 'Zone') {
setZonePosition(point.pointUuid, positionArray);
}
}
});
}, 0)
}, [movedObjects, initialStates, setAislePosition, setWallPosition, setFloorPosition, setZonePosition]);
const placeMovedAssets = () => {
if (movedObjects.length === 0) return;
movedObjects.forEach((movedObject: THREE.Object3D) => {
if (movedObject.userData.pointUuid) {
const point: Point = movedObject.userData as Point;
if (point.pointType === 'Aisle') {
const updatedAisles = getAislesByPointId(point.pointUuid);
if (updatedAisles.length > 0 && projectId) {
updatedAisles.forEach((updatedAisle) => {
// API
// upsertAisleApi(updatedAisle.aisleUuid, updatedAisle.points, updatedAisle.type, projectId, selectedVersion?.versionId || '');
// SOCKET
socket.emit('v1:model-aisle:add', {
projectId: projectId,
versionId: selectedVersion?.versionId || '',
userId: userId,
organization: organization,
aisleUuid: updatedAisle.aisleUuid,
points: updatedAisle.points,
type: updatedAisle.type
})
})
}
} else if (point.pointType === 'Wall') {
const updatedWalls = getWallsByPointId(point.pointUuid);
if (updatedWalls && updatedWalls.length > 0 && projectId) {
updatedWalls.forEach((updatedWall) => {
// API
// upsertWallApi(projectId, selectedVersion?.versionId || '', updatedWall);
// SOCKET
const data = {
wallData: updatedWall,
projectId: projectId,
versionId: selectedVersion?.versionId || '',
userId: userId,
organization: organization
}
socket.emit('v1:model-Wall:add', data);
});
}
} else if (point.pointType === 'Floor') {
const updatedFloors = getFloorsByPointId(point.pointUuid);
if (updatedFloors && updatedFloors.length > 0 && projectId) {
updatedFloors.forEach((updatedFloor) => {
// API
// upsertFloorApi(projectId, selectedVersion?.versionId || '', updatedFloor);
// SOCKET
const data = {
floorData: updatedFloor,
projectId: projectId,
versionId: selectedVersion?.versionId || '',
userId: userId,
organization: organization
}
socket.emit('v1:model-Floor:add', data);
});
}
} else if (point.pointType === 'Zone') {
const updatedZones = getZonesByPointId(point.pointUuid);
if (updatedZones && updatedZones.length > 0 && projectId) {
updatedZones.forEach((updatedZone) => {
// API
// upsertZoneApi(projectId, selectedVersion?.versionId || '', updatedZone);
// SOCKET
const data = {
zoneData: updatedZone,
projectId: projectId,
versionId: selectedVersion?.versionId || '',
userId: userId,
organization: organization
}
socket.emit('v1:zone:add', data);
});
}
}
}
})
echo.success("Object moved!");
clearSelection();
};
const clearSelection = () => {
setpastedObjects([]);
setDuplicatedObjects([]);
setMovedObjects([]);
setRotatedObjects([]);
clearSelectedPoints();
};
return (
<>
</>
);
}
export default MoveControls2D;

389
app/src/modules/scene/controls/selectionControls/selection2D/selectionControls2D.tsx Normal file
View File

@@ -0,0 +1,389 @@
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import * as THREE from "three";
import { useThree } from "@react-three/fiber";
import { SelectionHelper } from "../selectionHelper";
import { SelectionBox } from "three/examples/jsm/interactive/SelectionBox";
import useModuleStore from "../../../../../store/useModuleStore";
import { useParams } from "react-router-dom";
import { getUserData } from "../../../../../functions/getUserData";
import { useSceneContext } from "../../../sceneContext";
import { useVersionContext } from "../../../../builder/version/versionContext";
import { useSocketStore, useToggleView, useToolMode, } from "../../../../../store/builder/store";
import { useSelectedPoints } from "../../../../../store/simulation/useSimulationStore";
import { useBuilderStore } from "../../../../../store/builder/useBuilderStore";
import MoveControls2D from "./moveControls2D";
// import { deleteAisleApi } from "../../../../../services/factoryBuilder/aisle/deleteAisleApi";
// import { deleteWallApi } from "../../../../../services/factoryBuilder/wall/deleteWallApi";
// import { deleteFloorApi } from "../../../../../services/factoryBuilder/floor/deleteFloorApi";
// import { upsertFloorApi } from "../../../../../services/factoryBuilder/floor/upsertFloorApi";
// import { deleteZoneApi } from "../../../../../services/factoryBuilder/zone/deleteZoneApi";
// import { upsertZoneApi } from "../../../../../services/factoryBuilder/zone/upsertZoneApi";
const SelectionControls2D: React.FC = () => {
const { camera, controls, gl, scene, raycaster, pointer } = useThree();
const { toggleView } = useToggleView();
const { selectedPoints, setSelectedPoints, clearSelectedPoints } = useSelectedPoints();
const [movedObjects, setMovedObjects] = useState<THREE.Object3D[]>([]);
const [rotatedObjects, setRotatedObjects] = useState<THREE.Object3D[]>([]);
const [copiedObjects, setCopiedObjects] = useState<THREE.Object3D[]>([]);
const [pastedObjects, setpastedObjects] = useState<THREE.Object3D[]>([]);
const [duplicatedObjects, setDuplicatedObjects] = useState<THREE.Object3D[]>([]);
const { activeModule } = useModuleStore();
const { socket } = useSocketStore();
const selectionBox = useMemo(() => new SelectionBox(camera, scene), [camera, scene]);
const { toolMode } = useToolMode();
const { selectedVersionStore } = useVersionContext();
const { selectedVersion } = selectedVersionStore();
const { projectId } = useParams();
const { hoveredLine, hoveredPoint } = useBuilderStore();
const { aisleStore, wallStore, floorStore, zoneStore } = useSceneContext();
const { removePoint: removeAislePoint } = aisleStore();
const { removePoint: removeWallPoint } = wallStore();
const { removePoint: removeFloorPoint } = floorStore();
const { removePoint: removeZonePoint } = zoneStore();
const isDragging = useRef(false);
const isLeftMouseDown = useRef(false);
const isSelecting = useRef(false);
const isRightClick = useRef(false);
const rightClickMoved = useRef(false);
const isCtrlSelecting = useRef(false);
const isShiftSelecting = useRef(false);
const { userId, organization } = getUserData();
useEffect(() => {
if (!camera || !scene || !toggleView) return;
const canvasElement = gl.domElement;
canvasElement.tabIndex = 0;
const helper = new SelectionHelper(gl);
const onPointerDown = (event: PointerEvent) => {
if (event.button === 2) {
isRightClick.current = true;
rightClickMoved.current = false;
} else if (event.button === 0) {
isSelecting.current = false;
isCtrlSelecting.current = event.ctrlKey;
isShiftSelecting.current = event.shiftKey;
isLeftMouseDown.current = true;
isDragging.current = false;
if (event.ctrlKey && duplicatedObjects.length === 0) {
if (controls) (controls as any).enabled = false;
selectionBox.startPoint.set(pointer.x, pointer.y, 0);
}
}
};
const onPointerMove = (event: PointerEvent) => {
if (isRightClick.current) {
rightClickMoved.current = true;
}
if (isLeftMouseDown.current) {
isDragging.current = true;
}
isSelecting.current = true;
if (helper.isDown && event.ctrlKey && duplicatedObjects.length === 0 && isCtrlSelecting.current) {
selectionBox.endPoint.set(pointer.x, pointer.y, 0);
}
};
const onPointerUp = (event: PointerEvent) => {
if (event.button === 2 && !event.ctrlKey && !event.shiftKey) {
isRightClick.current = false;
if (!rightClickMoved.current) {
clearSelection();
}
return;
}
if (isSelecting.current && isCtrlSelecting.current) {
isCtrlSelecting.current = false;
isSelecting.current = false;
if (event.ctrlKey && duplicatedObjects.length === 0) {
selectAssets();
}
} else if (!isSelecting.current && selectedPoints.length > 0 && ((!event.ctrlKey && !event.shiftKey && pastedObjects.length === 0 && duplicatedObjects.length === 0 && movedObjects.length === 0 && rotatedObjects.length === 0) || event.button !== 0)) {
clearSelection();
helper.enabled = true;
isCtrlSelecting.current = false;
} else if (controls) {
(controls as any).enabled = true;
}
if (!isDragging.current && isLeftMouseDown.current && isShiftSelecting.current && event.shiftKey) {
isShiftSelecting.current = false;
isLeftMouseDown.current = false;
isDragging.current = false;
} else if (controls) {
(controls as any).enabled = true;
}
};
const onKeyDown = (event: KeyboardEvent) => {
if (movedObjects.length > 0 || rotatedObjects.length > 0) return;
if (event.key.toLowerCase() === "escape") {
event.preventDefault();
clearSelection();
}
if (event.key.toLowerCase() === "delete") {
event.preventDefault();
deleteSelection();
}
};
const onContextMenu = (event: MouseEvent) => {
event.preventDefault();
if (!rightClickMoved.current) {
clearSelection();
}
rightClickMoved.current = false;
};
if (toggleView && toolMode === 'move') {
helper.enabled = true;
canvasElement.addEventListener("pointermove", onPointerMove);
canvasElement.addEventListener("pointerup", onPointerUp);
canvasElement.addEventListener("pointerdown", onPointerDown);
canvasElement.addEventListener("contextmenu", onContextMenu);
canvasElement.addEventListener("keydown", onKeyDown);
} else {
helper.enabled = false;
helper.dispose();
}
return () => {
canvasElement.removeEventListener("pointerdown", onPointerDown);
canvasElement.removeEventListener("pointermove", onPointerMove);
canvasElement.removeEventListener("contextmenu", onContextMenu);
canvasElement.removeEventListener("pointerup", onPointerUp);
canvasElement.removeEventListener("keydown", onKeyDown);
helper.enabled = false;
helper.dispose();
};
}, [camera, controls, scene, toggleView, selectedPoints, copiedObjects, pastedObjects, duplicatedObjects, movedObjects, socket, rotatedObjects, toolMode, hoveredLine, hoveredPoint]);
useEffect(() => {
if (toolMode !== 'move' || !toggleView) {
clearSelection();
}
}, [activeModule, toolMode, toggleView]);
const selectAssets = useCallback(() => {
selectionBox.endPoint.set(pointer.x, pointer.y, 0);
if (controls) (controls as any).enabled = true;
let selectedObjects = selectionBox.select();
let Objects = new Set<THREE.Object3D>();
selectedObjects.forEach((object) => {
let currentObject: THREE.Object3D | null = object;
while (currentObject) {
if (currentObject.userData.pointUuid) {
Objects.add(currentObject);
break;
}
currentObject = currentObject.parent || null;
}
});
if (Objects.size === 0) {
clearSelection();
return;
}
const updatedSelections = new Set<THREE.Object3D>(selectedPoints);
Objects.forEach((obj) => {
const existing = Array.from(updatedSelections).find((o) => o.userData?.pointUuid === obj.userData?.pointUuid);
if (existing) {
updatedSelections.delete(existing);
} else {
updatedSelections.add(obj);
}
});
const selected = Array.from(updatedSelections);
setSelectedPoints(selected);
}, [selectionBox, pointer, controls, selectedPoints, setSelectedPoints]);
const clearSelection = () => {
setpastedObjects([]);
setDuplicatedObjects([]);
clearSelectedPoints();
};
const deleteSelection = () => {
if (selectedPoints.length > 0 && duplicatedObjects.length === 0) {
selectedPoints.forEach((selectedPoint) => {
if (selectedPoint.userData.pointUuid) {
const point: Point = selectedPoint.userData as Point;
if (point.pointType === 'Aisle') {
const removedAisles = removeAislePoint(point.pointUuid);
if (removedAisles.length > 0) {
removedAisles.forEach(aisle => {
if (projectId) {
// API
// deleteAisleApi(aisle.aisleUuid, projectId, selectedVersion?.versionId || '');
// SOCKET
const data = {
projectId: projectId,
versionId: selectedVersion?.versionId || '',
userId: userId,
organization: organization,
aisleUuid: aisle.aisleUuid
}
socket.emit('v1:model-aisle:delete', data);
}
});
}
}
if (point.pointType === 'Wall') {
const removedWalls = removeWallPoint(point.pointUuid);
if (removedWalls.length > 0) {
removedWalls.forEach(wall => {
if (projectId) {
// API
// deleteWallApi(projectId, selectedVersion?.versionId || '', wall.wallUuid);
// SOCKET
const data = {
wallUuid: wall.wallUuid,
projectId: projectId,
versionId: selectedVersion?.versionId || '',
userId: userId,
organization: organization
}
socket.emit('v1:model-Wall:delete', data);
}
});
}
}
if (point.pointType === 'Floor') {
const { removedFloors, updatedFloors } = removeFloorPoint(point.pointUuid);
if (removedFloors.length > 0) {
removedFloors.forEach(floor => {
if (projectId) {
// API
// deleteFloorApi(projectId, selectedVersion?.versionId || '', floor.floorUuid);
// SOCKET
const data = {
floorUuid: floor.floorUuid,
projectId: projectId,
versionId: selectedVersion?.versionId || '',
userId: userId,
organization: organization
}
socket.emit('v1:model-Floor:delete', data);
}
});
}
if (updatedFloors.length > 0) {
updatedFloors.forEach(floor => {
if (projectId) {
// API
// upsertFloorApi(projectId, selectedVersion?.versionId || '', floor);
// SOCKET
const data = {
floorData: floor,
projectId: projectId,
versionId: selectedVersion?.versionId || '',
userId: userId,
organization: organization
}
socket.emit('v1:model-Floor:add', data);
}
});
}
}
if (point.pointType === 'Zone') {
const { removedZones, updatedZones } = removeZonePoint(point.pointUuid);
if (removedZones.length > 0) {
removedZones.forEach(zone => {
if (projectId) {
// API
// deleteZoneApi(projectId, selectedVersion?.versionId || '', zone.zoneUuid);
// SOCKET
const data = {
zoneUuid: zone.zoneUuid,
projectId: projectId,
versionId: selectedVersion?.versionId || '',
userId: userId,
organization: organization
}
socket.emit('v1:zone:delete', data);
}
});
}
if (updatedZones.length > 0) {
updatedZones.forEach(zone => {
if (projectId) {
// API
// upsertZoneApi(projectId, selectedVersion?.versionId || '', zone);
// SOCKET
const data = {
zoneData: zone,
projectId: projectId,
versionId: selectedVersion?.versionId || '',
userId: userId,
organization: organization
}
socket.emit('v1:zone:add', data);
}
});
}
}
}
})
}
echo.success("Selected points removed!");
clearSelection();
};
return (
<>
<MoveControls2D movedObjects={movedObjects} setMovedObjects={setMovedObjects} pastedObjects={pastedObjects} setpastedObjects={setpastedObjects} duplicatedObjects={duplicatedObjects} setDuplicatedObjects={setDuplicatedObjects} rotatedObjects={rotatedObjects} setRotatedObjects={setRotatedObjects} />
</>
);
};
export default SelectionControls2D;

2
app/src/modules/scene/controls/selectionControls/boundingBoxHelper.tsx → app/src/modules/scene/controls/selectionControls/selection3D/boundingBoxHelper3D.tsx
View File

@@ -1,7 +1,7 @@
import { Line } from "@react-three/drei";
import { useMemo } from "react";
import * as THREE from "three";
import { useSelectedAssets } from "../../../../store/builder/store";
import { useSelectedAssets } from "../../../../../store/builder/store";
interface BoundingBoxProps {
boundingBoxRef?: any;

18
app/src/modules/scene/controls/selectionControls/copyPasteControls.tsx → app/src/modules/scene/controls/selectionControls/selection3D/copyPasteControls3D.tsx
View File

@@ -2,17 +2,17 @@ import * as THREE from "three";
import { useEffect, useMemo } from "react";
import { useFrame, useThree } from "@react-three/fiber";
import { SkeletonUtils } from "three-stdlib";
import { useSelectedAssets, useSocketStore, useToggleView } from "../../../../store/builder/store";
import * as Types from "../../../../types/world/worldTypes";
import { detectModifierKeys } from "../../../../utils/shortcutkeys/detectModifierKeys";
import { useSelectedAssets, useSocketStore, useToggleView } from "../../../../../store/builder/store";
import * as Types from "../../../../../types/world/worldTypes";
import { detectModifierKeys } from "../../../../../utils/shortcutkeys/detectModifierKeys";
import { useParams } from "react-router-dom";
import { getUserData } from "../../../../functions/getUserData";
import { useSceneContext } from "../../sceneContext";
import { useVersionContext } from "../../../builder/version/versionContext";
import { getUserData } from "../../../../../functions/getUserData";
import { useSceneContext } from "../../../sceneContext";
import { useVersionContext } from "../../../../builder/version/versionContext";
// import { setAssetsApi } from '../../../../services/factoryBuilder/asset/floorAsset/setAssetsApi';
// import { setAssetsApi } from '../../../../../services/factoryBuilder/asset/floorAsset/setAssetsApi';
const CopyPasteControls = ({
const CopyPasteControls3D = ({
copiedObjects,
setCopiedObjects,
pastedObjects,
@@ -490,4 +490,4 @@ const CopyPasteControls = ({
return null;
};
export default CopyPasteControls;
export default CopyPasteControls3D;

0
app/src/modules/scene/controls/selectionControls/distanceFindingControls.tsx → app/src/modules/scene/controls/selectionControls/selection3D/distanceFindingControls.tsx
View File

18
app/src/modules/scene/controls/selectionControls/duplicationControls.tsx → app/src/modules/scene/controls/selectionControls/selection3D/duplicationControls3D.tsx
View File

@@ -2,17 +2,17 @@ import * as THREE from "three";
import { useEffect, useMemo } from "react";
import { useFrame, useThree } from "@react-three/fiber";
import { SkeletonUtils } from "three-stdlib";
import { useSelectedAssets, useSocketStore, useToggleView } from "../../../../store/builder/store";
import * as Types from "../../../../types/world/worldTypes";
import { detectModifierKeys } from "../../../../utils/shortcutkeys/detectModifierKeys";
import { useSelectedAssets, useSocketStore, useToggleView } from "../../../../../store/builder/store";
import * as Types from "../../../../../types/world/worldTypes";
import { detectModifierKeys } from "../../../../../utils/shortcutkeys/detectModifierKeys";
import { useParams } from "react-router-dom";
import { getUserData } from "../../../../functions/getUserData";
import { useSceneContext } from "../../sceneContext";
import { useVersionContext } from "../../../builder/version/versionContext";
import { getUserData } from "../../../../../functions/getUserData";
import { useSceneContext } from "../../../sceneContext";
import { useVersionContext } from "../../../../builder/version/versionContext";
// import { setAssetsApi } from '../../../../services/factoryBuilder/asset/floorAsset/setAssetsApi';
// import { setAssetsApi } from '../../../../../services/factoryBuilder/asset/floorAsset/setAssetsApi';
const DuplicationControls = ({
const DuplicationControls3D = ({
duplicatedObjects,
setDuplicatedObjects,
setpastedObjects,
@@ -459,4 +459,4 @@ const DuplicationControls = ({
return null;
};
export default DuplicationControls;
export default DuplicationControls3D;

25
app/src/modules/scene/controls/selectionControls/moveControls.tsx → app/src/modules/scene/controls/selectionControls/selection3D/moveControls3D.tsx
View File

@@ -1,20 +1,21 @@
import * as THREE from "three";
import { useEffect, useMemo, useRef, useState } from "react";
import { useFrame, useThree } from "@react-three/fiber";
import { useSelectedAssets, useSocketStore, useToggleView, } from "../../../../store/builder/store";
// import { setAssetsApi } from '../../../../services/factoryBuilder/asset/floorAsset/setAssetsApi';
import * as Types from "../../../../types/world/worldTypes";
import { detectModifierKeys } from "../../../../utils/shortcutkeys/detectModifierKeys";
import { upsertProductOrEventApi } from "../../../../services/simulation/products/UpsertProductOrEventApi";
import { snapControls } from "../../../../utils/handleSnap";
import { useSelectedAssets, useSocketStore, useToggleView, } from "../../../../../store/builder/store";
import * as Types from "../../../../../types/world/worldTypes";
import { detectModifierKeys } from "../../../../../utils/shortcutkeys/detectModifierKeys";
import { upsertProductOrEventApi } from "../../../../../services/simulation/products/UpsertProductOrEventApi";
import { snapControls } from "../../../../../utils/handleSnap";
import DistanceFindingControls from "./distanceFindingControls";
import { useParams } from "react-router-dom";
import { useProductContext } from "../../../simulation/products/productContext";
import { getUserData } from "../../../../functions/getUserData";
import { useSceneContext } from "../../sceneContext";
import { useVersionContext } from "../../../builder/version/versionContext";
import { useProductContext } from "../../../../simulation/products/productContext";
import { getUserData } from "../../../../../functions/getUserData";
import { useSceneContext } from "../../../sceneContext";
import { useVersionContext } from "../../../../builder/version/versionContext";
function MoveControls({
// import { setAssetsApi } from '../../../../../services/factoryBuilder/asset/floorAsset/setAssetsApi';
function MoveControls3D({
movedObjects,
setMovedObjects,
pastedObjects,
@@ -364,4 +365,4 @@ function MoveControls({
);
}
export default MoveControls;
export default MoveControls3D;

21
app/src/modules/scene/controls/selectionControls/rotateControls.tsx → app/src/modules/scene/controls/selectionControls/selection3D/rotateControls3D.tsx
View File

@@ -1,17 +1,18 @@
import * as THREE from "three";
import { useEffect, useMemo, useRef } from "react";
import { useFrame, useThree } from "@react-three/fiber";
import { useSelectedAssets, useSocketStore, useToggleView } from "../../../../store/builder/store";
// import { setAssetsApi } from '../../../../services/factoryBuilder/asset/floorAsset/setAssetsApi';
import * as Types from "../../../../types/world/worldTypes";
import { upsertProductOrEventApi } from "../../../../services/simulation/products/UpsertProductOrEventApi";
import { useSelectedAssets, useSocketStore, useToggleView } from "../../../../../store/builder/store";
import * as Types from "../../../../../types/world/worldTypes";
import { upsertProductOrEventApi } from "../../../../../services/simulation/products/UpsertProductOrEventApi";
import { useParams } from "react-router-dom";
import { useProductContext } from "../../../simulation/products/productContext";
import { getUserData } from "../../../../functions/getUserData";
import { useSceneContext } from "../../sceneContext";
import { useVersionContext } from "../../../builder/version/versionContext";
import { useProductContext } from "../../../../simulation/products/productContext";
import { getUserData } from "../../../../../functions/getUserData";
import { useSceneContext } from "../../../sceneContext";
import { useVersionContext } from "../../../../builder/version/versionContext";
function RotateControls({
// import { setAssetsApi } from '../../../../../services/factoryBuilder/asset/floorAsset/setAssetsApi';
function RotateControls3D({
rotatedObjects,
setRotatedObjects,
movedObjects,
@@ -300,4 +301,4 @@ function RotateControls({
return null;
}
export default RotateControls
export default RotateControls3D

49
app/src/modules/scene/controls/selectionControls/selectionControls.tsx → app/src/modules/scene/controls/selectionControls/selection3D/selectionControls3D.tsx
View File

@@ -1,26 +1,27 @@
import * as THREE from "three";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { SelectionBox } from "three/examples/jsm/interactive/SelectionBox";
import { SelectionHelper } from "./selectionHelper";
import * as THREE from "three";
import { useFrame, useThree } from "@react-three/fiber";
import { useSelectedAssets, useSocketStore, useToggleView, useToolMode, } from "../../../../store/builder/store";
import BoundingBox from "./boundingBoxHelper";
// import { deleteFloorItem } from '../../../../services/factoryBuilder/asset/floorAsset/deleteFloorItemApi';
import * as Types from "../../../../types/world/worldTypes";
import { SelectionHelper } from "../selectionHelper";
import { SelectionBox } from "three/examples/jsm/interactive/SelectionBox";
import * as Types from "../../../../../types/world/worldTypes";
import DuplicationControls from "./duplicationControls";
import CopyPasteControls from "./copyPasteControls";
import MoveControls from "./moveControls";
import RotateControls from "./rotateControls";
import useModuleStore from "../../../../store/useModuleStore";
import useModuleStore from "../../../../../store/useModuleStore";
import { useParams } from "react-router-dom";
import { getUserData } from "../../../../functions/getUserData";
import { useSceneContext } from "../../sceneContext";
import { useVersionContext } from "../../../builder/version/versionContext";
import { useProductContext } from "../../../simulation/products/productContext";
import { upsertProductOrEventApi } from "../../../../services/simulation/products/UpsertProductOrEventApi";
import { getUserData } from "../../../../../functions/getUserData";
import { useSceneContext } from "../../../sceneContext";
import { useVersionContext } from "../../../../builder/version/versionContext";
import { useProductContext } from "../../../../simulation/products/productContext";
import { useSelectedAssets, useSocketStore, useToggleView, useToolMode, } from "../../../../../store/builder/store";
import { upsertProductOrEventApi } from "../../../../../services/simulation/products/UpsertProductOrEventApi";
import BoundingBox from "./boundingBoxHelper3D";
import DuplicationControls3D from "./duplicationControls3D";
import CopyPasteControls3D from "./copyPasteControls3D";
import MoveControls3D from "./moveControls3D";
import RotateControls3D from "./rotateControls3D";
const SelectionControls: React.FC = () => {
// import { deleteFloorItem } from '../../../../../services/factoryBuilder/asset/floorAsset/deleteFloorItemApi';
const SelectionControls3D: React.FC = () => {
const { camera, controls, gl, scene, raycaster, pointer } = useThree();
const selectionGroup = useRef() as Types.RefGroup;
const { toggleView } = useToggleView();
@@ -253,7 +254,7 @@ const SelectionControls: React.FC = () => {
});
if (Objects.size === 0) {
clearSelection();
// clearSelection();
return;
}
@@ -350,15 +351,15 @@ const SelectionControls: React.FC = () => {
</group>
</group>
<MoveControls movedObjects={movedObjects} setMovedObjects={setMovedObjects} pastedObjects={pastedObjects} setpastedObjects={setpastedObjects} duplicatedObjects={duplicatedObjects} setDuplicatedObjects={setDuplicatedObjects} rotatedObjects={rotatedObjects} setRotatedObjects={setRotatedObjects} selectionGroup={selectionGroup} boundingBoxRef={boundingBoxRef} />
<MoveControls3D movedObjects={movedObjects} setMovedObjects={setMovedObjects} pastedObjects={pastedObjects} setpastedObjects={setpastedObjects} duplicatedObjects={duplicatedObjects} setDuplicatedObjects={setDuplicatedObjects} rotatedObjects={rotatedObjects} setRotatedObjects={setRotatedObjects} selectionGroup={selectionGroup} boundingBoxRef={boundingBoxRef} />
<RotateControls rotatedObjects={rotatedObjects} setRotatedObjects={setRotatedObjects} movedObjects={movedObjects} setMovedObjects={setMovedObjects} pastedObjects={pastedObjects} setpastedObjects={setpastedObjects} duplicatedObjects={duplicatedObjects} setDuplicatedObjects={setDuplicatedObjects} selectionGroup={selectionGroup} />
<RotateControls3D rotatedObjects={rotatedObjects} setRotatedObjects={setRotatedObjects} movedObjects={movedObjects} setMovedObjects={setMovedObjects} pastedObjects={pastedObjects} setpastedObjects={setpastedObjects} duplicatedObjects={duplicatedObjects} setDuplicatedObjects={setDuplicatedObjects} selectionGroup={selectionGroup} />
<DuplicationControls duplicatedObjects={duplicatedObjects} setDuplicatedObjects={setDuplicatedObjects} setpastedObjects={setpastedObjects} selectionGroup={selectionGroup} movedObjects={movedObjects} setMovedObjects={setMovedObjects} rotatedObjects={rotatedObjects} setRotatedObjects={setRotatedObjects} boundingBoxRef={boundingBoxRef} />
<DuplicationControls3D duplicatedObjects={duplicatedObjects} setDuplicatedObjects={setDuplicatedObjects} setpastedObjects={setpastedObjects} selectionGroup={selectionGroup} movedObjects={movedObjects} setMovedObjects={setMovedObjects} rotatedObjects={rotatedObjects} setRotatedObjects={setRotatedObjects} boundingBoxRef={boundingBoxRef} />
<CopyPasteControls copiedObjects={copiedObjects} setCopiedObjects={setCopiedObjects} pastedObjects={pastedObjects} setpastedObjects={setpastedObjects} selectionGroup={selectionGroup} setDuplicatedObjects={setDuplicatedObjects} movedObjects={movedObjects} setMovedObjects={setMovedObjects} rotatedObjects={rotatedObjects} setRotatedObjects={setRotatedObjects} boundingBoxRef={boundingBoxRef} />
<CopyPasteControls3D copiedObjects={copiedObjects} setCopiedObjects={setCopiedObjects} pastedObjects={pastedObjects} setpastedObjects={setpastedObjects} selectionGroup={selectionGroup} setDuplicatedObjects={setDuplicatedObjects} movedObjects={movedObjects} setMovedObjects={setMovedObjects} rotatedObjects={rotatedObjects} setRotatedObjects={setRotatedObjects} boundingBoxRef={boundingBoxRef} />
</>
);
};
export default SelectionControls;
export default SelectionControls3D;

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

@@ -6,11 +6,12 @@ import {
useSelectedFloorItem,
} from "../../../store/builder/store";
import * as CONSTANTS from "../../../types/world/worldConstants";
import { useDeletableEventSphere, useSelectedEventSphere } from "../../../store/simulation/useSimulationStore";
import { useDeletableEventSphere, useSelectedEventSphere, useSelectedPoints } from "../../../store/simulation/useSimulationStore";
import { useEffect } from "react";
import { useBuilderStore } from "../../../store/builder/useBuilderStore";
export default function PostProcessing() {
const { selectedPoints } = useSelectedPoints();
const { deletableFloorItem } = useDeletableFloorItem();
const { selectedWallItem } = useSelectedWallItem();
const { selectedFloorItem } = useSelectedFloorItem();
@@ -61,6 +62,10 @@ export default function PostProcessing() {
// console.log('deletableEventSphere: ', deletableEventSphere);
}, [deletableEventSphere])
useEffect(() => {
// console.log('selectedPoints: ', selectedPoints);
}, [selectedPoints])
return (
<EffectComposer autoClear={false}>
<N8AO

18
app/src/modules/simulation/events/arrows/arrows.tsx
View File

@@ -103,9 +103,21 @@ export function Arrows({ connections }: { readonly connections: ConnectionLine[]
return (
<group
key={key}
onPointerOver={() => setHoveredArrowTrigger(trigger.triggerUuid)}
onPointerOut={() => setHoveredArrowTrigger(null)}
onClick={() => { removeConnection(trigger) }}
onPointerOver={() => {
if (toolMode === '3D-Delete') {
setHoveredArrowTrigger(trigger.triggerUuid)
}
}}
onPointerOut={() => {
if (toolMode === '3D-Delete') {
setHoveredArrowTrigger(null)
}
}}
onClick={() => {
if (toolMode === '3D-Delete') {
removeConnection(trigger)
}
}}
>
<mesh
geometry={shaftGeometry}

36
app/src/store/simulation/useSimulationStore.ts
View File

@@ -276,4 +276,40 @@ export const useComparisonProduct = create<ComparisonProductState>()(
});
},
}))
);
interface SelectedPointsState {
selectedPoints: THREE.Object3D[];
setSelectedPoints: (points: THREE.Object3D[]) => void;
addSelectedPoint: (point: THREE.Object3D) => void;
removeSelectedPoint: (uuid: string) => void;
clearSelectedPoints: () => void;
}
export const useSelectedPoints = create<SelectedPointsState>()(
immer((set) => ({
selectedPoints: [],
setSelectedPoints: (points) => {
set((state) => {
state.selectedPoints = points;
});
},
addSelectedPoint: (point) => {
set((state) => {
if (!state.selectedPoints.find(p => p.uuid === point.uuid)) {
state.selectedPoints.push(point);
}
});
},
removeSelectedPoint: (uuid) => {
set((state) => {
state.selectedPoints = state.selectedPoints.filter(p => p.uuid !== uuid);
});
},
clearSelectedPoints: () => {
set((state) => {
state.selectedPoints = [];
});
},
}))
);

7
app/src/styles/scene/cursors.scss
View File

@@ -1,6 +1,7 @@
$cursor-default: url("../../assets/cursors/default.svg") 0 0, default;
$cursor-pen: url("../../assets/cursors/pen.svg") 0 0, default;
$cursor-delete: url("../../assets/cursors/pointing.svg") 4 0, default;
$cursor-comment: url("../../assets/cursors/comment.svg") 0 16, default;
$cursor-draw: url("../../assets/cursors/cell.svg") 8 8, default;
$cursor-cross: url("../../assets/cursors/cross.svg") 8 8, default;
$cursor-grab: url("../../assets/cursors/open.svg") 8 8, default;
@@ -51,3 +52,9 @@ $cursor-grabing: url("../../assets/cursors/close.svg") 8 8, default;
}
}
.scene-container.comment {
canvas {
cursor: $cursor-comment !important;
}
}

1
app/src/utils/mouseUtils/handleCanvasCursors.ts
View File

@@ -16,6 +16,7 @@ export const handleCanvasCursors = (name: string) => {
pen: 'pen',
'free-hand': 'hand',
move: 'move',
comment: 'comment',
// Add more mappings as needed
};

5
app/src/utils/shortcutkeys/handleShortcutKeys.ts
View File

@@ -53,7 +53,7 @@ const KeyPressListener: React.FC = () => {
const { setCreateNewVersion } = useVersionHistoryStore();
const { setVersionHistoryVisible } = useVersionHistoryVisibleStore();
const { setSelectedComment } = useSelectedComment();
const { setDfxUploaded, setDxfWallGenerate } = useDfxUpload();
const { setDfxUploaded } = useDfxUpload();
const isTextInput = (element: Element | null): boolean =>
element instanceof HTMLInputElement ||
element instanceof HTMLTextAreaElement ||
@@ -128,6 +128,9 @@ const KeyPressListener: React.FC = () => {
setActiveTool("measure");
setToolMode("MeasurementScale");
}
if (key === "C") {
setActiveTool("comment");
}
};
const handleSidebarShortcuts = (key: string) => {