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

v2-ui #84

Merged
Vishnu merged 53 commits from v2-ui into main 2025-05-10 13:42:19 +00:00
Conversation 0 Commits 53 Files Changed 92 +39 -75
7 changed files with 39 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 816196db1e - Show all commits

71
app/src/components/ui/Tools.tsx
View File

@ -24,7 +24,6 @@ import {
useAddAction,
useDeleteTool,
useDeletePointOrLine,
useMovePoint,
useRefTextUpdate,
useSelectedWallItem,
useSocketStore,
@ -64,7 +63,6 @@ const Tools: React.FC = () => {
const { setTransformMode } = useTransformMode();
const { setDeletePointOrLine } = useDeletePointOrLine();
const { setMovePoint } = useMovePoint();
const { setToolMode } = useToolMode();
const { activeTool, setActiveTool } = useActiveTool();
const { setRefTextUpdate } = useRefTextUpdate();
@ -77,7 +75,7 @@ const Tools: React.FC = () => {
: true
);
}, []);
useEffect(() => {}, [activeModule]);
useEffect(() => {
setActiveTool(activeSubTool);
setActiveSubTool(activeSubTool);
@ -129,14 +127,13 @@ const Tools: React.FC = () => {
setDeleteTool(false);
setAddAction(null);
setTransformMode(null);
setMovePoint(false);
setDeletePointOrLine(false);
setRefTextUpdate((prevUpdate) => prevUpdate - 1);
switch (activeTool) {
case "Move":
case "cursor":
if (toggleView) {
setMovePoint(true);
setToolMode('move');
} else {
setTransformMode("translate");
}
@ -201,7 +198,7 @@ const Tools: React.FC = () => {
}
setActiveTool(activeTool);
}, [activeTool]);
}, [activeTool, toggleView]);
return (
<>
@ -211,9 +208,8 @@ const Tools: React.FC = () => {
<div className="activeDropicon">
{activeSubTool == "cursor" && (
<div
className={`tool-button ${
activeTool === "cursor" ? "active" : ""
}`}
className={`tool-button ${activeTool === "cursor" ? "active" : ""
}`}
onClick={() => {
setActiveTool("cursor");
}}
@ -224,9 +220,8 @@ const Tools: React.FC = () => {
)}
{activeSubTool == "free-hand" && (
<div
className={`tool-button ${
activeTool === "free-hand" ? "active" : ""
}`}
className={`tool-button ${activeTool === "free-hand" ? "active" : ""
}`}
onClick={() => {
setActiveTool("free-hand");
}}
@ -237,9 +232,8 @@ const Tools: React.FC = () => {
)}
{activeSubTool == "delete" && (
<div
className={`tool-button ${
activeTool === "delete" ? "active" : ""
}`}
className={`tool-button ${activeTool === "delete" ? "active" : ""
}`}
onClick={() => {
setActiveTool("delete");
}}
@ -312,9 +306,8 @@ const Tools: React.FC = () => {
<div className="split"></div>
<div className="draw-tools">
<div
className={`tool-button ${
activeTool === "draw-wall" ? "active" : ""
}`}
className={`tool-button ${activeTool === "draw-wall" ? "active" : ""
}`}
onClick={() => {
setActiveTool("draw-wall");
}}
@ -323,9 +316,8 @@ const Tools: React.FC = () => {
<WallIcon isActive={activeTool === "draw-wall"} />
</div>
<div
className={`tool-button ${
activeTool === "draw-zone" ? "active" : ""
}`}
className={`tool-button ${activeTool === "draw-zone" ? "active" : ""
}`}
onClick={() => {
setActiveTool("draw-zone");
}}
@ -334,9 +326,8 @@ const Tools: React.FC = () => {
<ZoneIcon isActive={activeTool === "draw-zone"} />
</div>
<div
className={`tool-button ${
activeTool === "draw-aisle" ? "active" : ""
}`}
className={`tool-button ${activeTool === "draw-aisle" ? "active" : ""
}`}
onClick={() => {
setActiveTool("draw-aisle");
}}
@ -345,9 +336,8 @@ const Tools: React.FC = () => {
<AsileIcon isActive={activeTool === "draw-aisle"} />
</div>
<div
className={`tool-button ${
activeTool === "draw-floor" ? "active" : ""
}`}
className={`tool-button ${activeTool === "draw-floor" ? "active" : ""
}`}
onClick={() => {
setActiveTool("draw-floor");
}}
@ -363,9 +353,8 @@ const Tools: React.FC = () => {
<div className="split"></div>
<div className="draw-tools">
<div
className={`tool-button ${
activeTool === "measure" ? "active" : ""
}`}
className={`tool-button ${activeTool === "measure" ? "active" : ""
}`}
onClick={() => {
setActiveTool("measure");
}}
@ -381,9 +370,8 @@ const Tools: React.FC = () => {
<div className="split"></div>
<div className="draw-tools">
<div
className={`tool-button ${
activeTool === "pen" ? "active" : ""
}`}
className={`tool-button ${activeTool === "pen" ? "active" : ""
}`}
onClick={() => {
setActiveTool("pen");
}}
@ -420,9 +408,8 @@ const Tools: React.FC = () => {
<div className="split"></div>
<div className="general-options">
<div
className={`tool-button ${
activeTool === "comment" ? "active" : ""
}`}
className={`tool-button ${activeTool === "comment" ? "active" : ""
}`}
onClick={() => {
setActiveTool("comment");
}}
@ -432,9 +419,8 @@ const Tools: React.FC = () => {
</div>
{toggleThreeD && (
<div
className={`tool-button ${
activeTool === "play" ? "active" : ""
}`}
className={`tool-button ${activeTool === "play" ? "active" : ""
}`}
onClick={() => {
setIsPlaying(!isPlaying);
}}
@ -448,9 +434,8 @@ const Tools: React.FC = () => {
<>
<div className="split"></div>
<div
className={`toggle-threed-button${
toggleThreeD ? " toggled" : ""
}`}
className={`toggle-threed-button${toggleThreeD ? " toggled" : ""
}`}
onClick={toggleSwitch}
>
<div className="tooltip">toggle view (tab)</div>

6
app/src/modules/builder/builder.tsx
View File

@ -20,7 +20,6 @@ import Window from "../../assets/gltf-glb/window.glb";
import {
useToggleView,
useDeletePointOrLine,
useMovePoint,
useActiveLayer,
useWallVisibility,
useRoofVisibility,
@ -110,7 +109,6 @@ export default function Builder() {
const { activeLayer } = useActiveLayer(); // State that changes based on which layer the user chooses in Layers.jsx.
const { toggleView } = useToggleView(); // State for toggling between 2D and 3D.
const { toolMode, setToolMode } = useToolMode();
const { setMovePoint } = useMovePoint(); // State that stores a boolean which represents whether the move mode is active or not.
const { setDeletePointOrLine } = useDeletePointOrLine();
const { setRoofVisibility } = useRoofVisibility();
const { setWallVisibility } = useWallVisibility();
@ -160,9 +158,6 @@ export default function Builder() {
useEffect(() => {
setRefTextUpdate((prevUpdate: number) => prevUpdate - 1);
if (dragPointControls.current) {
dragPointControls.current.enabled = false;
}
if (toggleView) {
Layer2DVisibility(
activeLayer,
@ -175,7 +170,6 @@ export default function Builder() {
} else {
setToolMode(null);
setDeletePointOrLine(false);
setMovePoint(false);
loadWalls(lines, setWalls);
setUpdateScene(true);
line.current = [];

4
app/src/modules/builder/groups/floorGroupAisle.tsx
View File

@ -2,7 +2,7 @@ import * as THREE from 'three';
import * as Types from '../../../types/world/worldTypes';
import * as CONSTANTS from '../../../types/world/worldConstants';
import { useThree } from "@react-three/fiber";
import { useToggleView, useActiveLayer, useSocketStore, useDeletePointOrLine, useMovePoint, useUpdateScene, useNewLines, useToolMode } from "../../../store/store";
import { useToggleView, useActiveLayer, useSocketStore, useDeletePointOrLine, useUpdateScene, useNewLines, useToolMode } from "../../../store/store";
import { useEffect } from "react";
import removeSoloPoint from "../geomentries/points/removeSoloPoint";
import removeReferenceLine from "../geomentries/lines/removeReferenceLine";
@ -17,7 +17,6 @@ const FloorGroupAilse = ({ floorGroupAisle, plane, floorPlanGroupLine, floorPlan
const { toggleView, setToggleView } = useToggleView();
const { deletePointOrLine, setDeletePointOrLine } = useDeletePointOrLine();
const { toolMode, setToolMode } = useToolMode();
const { movePoint, setMovePoint } = useMovePoint();
const { socket } = useSocketStore();
const { activeLayer } = useActiveLayer();
const { gl, raycaster, camera, pointer } = useThree();
@ -34,7 +33,6 @@ const FloorGroupAilse = ({ floorGroupAisle, plane, floorPlanGroupLine, floorPlan
useEffect(() => {
if (toolMode === "Aisle") {
setDeletePointOrLine(false);
setMovePoint(false);
} else {
removeSoloPoint(line, floorPlanGroupLine, floorPlanGroupPoint);
removeReferenceLine(floorPlanGroup, ReferenceLineMesh, LineCreated, line);

12
app/src/modules/builder/groups/floorPlanGroup.tsx
View File

@ -1,6 +1,6 @@
import { useEffect } from "react";
import * as Types from '../../../types/world/worldTypes';
import { useActiveLayer, useDeletedLines, useDeletePointOrLine, useToolMode, useMovePoint, useNewLines, useRemovedLayer, useSocketStore, useToggleView, useUpdateScene } from "../../../store/store";
import { useActiveLayer, useDeletedLines, useDeletePointOrLine, useToolMode, useNewLines, useRemovedLayer, useSocketStore, useToggleView, useUpdateScene } from "../../../store/store";
import Layer2DVisibility from "../geomentries/layers/layer2DVisibility";
import { useFrame, useThree } from "@react-three/fiber";
import DeletableLineorPoint from "../functions/deletableLineOrPoint";
@ -24,7 +24,6 @@ const FloorPlanGroup = ({ floorPlanGroup, floorPlanGroupLine, floorPlanGroupPoin
const { toggleView, setToggleView } = useToggleView();
const { deletePointOrLine, setDeletePointOrLine } = useDeletePointOrLine();
const { toolMode, setToolMode } = useToolMode();
const { movePoint, setMovePoint } = useMovePoint();
const { removedLayer, setRemovedLayer } = useRemovedLayer();
const { updateScene, setUpdateScene } = useUpdateScene();
const { newLines, setNewLines } = useNewLines();
@ -33,7 +32,7 @@ const FloorPlanGroup = ({ floorPlanGroup, floorPlanGroupLine, floorPlanGroupPoin
useEffect(() => {
addDragControl(dragPointControls, currentLayerPoint, state, floorPlanGroupPoint, floorPlanGroupLine, lines, onlyFloorlines, socket);
}, [state]);
}, [toolMode, state]);
useEffect(() => {
const email = localStorage.getItem('email')
@ -65,7 +64,6 @@ const FloorPlanGroup = ({ floorPlanGroup, floorPlanGroupLine, floorPlanGroupPoin
useEffect(() => {
if (toolMode === "Wall" || toolMode === "Floor") {
setDeletePointOrLine(false);
setMovePoint(false);
} else {
removeSoloPoint(line, floorPlanGroupLine, floorPlanGroupPoint);
removeReferenceLine(floorPlanGroup, ReferenceLineMesh, LineCreated, line);
@ -73,8 +71,7 @@ const FloorPlanGroup = ({ floorPlanGroup, floorPlanGroupLine, floorPlanGroupPoin
}, [toolMode]);
useEffect(() => {
if (movePoint) {
setToolMode(null);
if (toolMode === 'move' && toggleView) {
setDeletePointOrLine(false);
if (dragPointControls.current) {
dragPointControls.current.enabled = true;
@ -84,12 +81,11 @@ const FloorPlanGroup = ({ floorPlanGroup, floorPlanGroupLine, floorPlanGroupPoin
dragPointControls.current.enabled = false;
}
}
}, [movePoint, toolMode]);
}, [toolMode, toggleView, state]);
useEffect(() => {
if (deletePointOrLine) {
setToolMode(null);
setMovePoint(false);
}
}, [deletePointOrLine]);

14
app/src/modules/builder/groups/zoneGroup.tsx
View File

@ -6,7 +6,6 @@ import {
useActiveLayer,
useDeleteTool,
useDeletePointOrLine,
useMovePoint,
useSocketStore,
useToggleView,
useToolMode,
@ -36,7 +35,6 @@ const ZoneGroup: React.FC = () => {
const { deletePointOrLine, setDeletePointOrLine } = useDeletePointOrLine();
const { removedLayer, setRemovedLayer } = useRemovedLayer();
const { toolMode } = useToolMode();
const { movePoint, setMovePoint } = useMovePoint();
const { setDeleteTool } = useDeleteTool();
const { activeLayer } = useActiveLayer();
const { socket } = useSocketStore();
@ -139,7 +137,6 @@ const ZoneGroup: React.FC = () => {
setEndPoint(null);
} else {
setDeletePointOrLine(false);
setMovePoint(false);
setDeleteTool(false);
}
if (!toggleView) {
@ -311,7 +308,7 @@ const ZoneGroup: React.FC = () => {
true
);
if (intersects.length > 0 && movePoint) {
if (intersects.length > 0 && toolMode === 'move') {
const clickedObject = intersects[0].object;
const sphereIndex = zonePoints.findIndex((point: any) =>
point.equals(clickedObject.position)
@ -329,7 +326,7 @@ const ZoneGroup: React.FC = () => {
if (evt.button === 0 && !drag && !isDragging && !deletePointOrLine) {
isLeftMouseDown = false;
if (!startPoint && !movePoint) {
if (!startPoint && toolMode !== 'move') {
raycaster.setFromCamera(pointer, camera);
const intersectionPoint = new THREE.Vector3();
const point = raycaster.ray.intersectPlane(plane, intersectionPoint);
@ -337,7 +334,7 @@ const ZoneGroup: React.FC = () => {
setStartPoint(point);
setEndPoint(null);
}
} else if (startPoint && !movePoint) {
} else if (startPoint && toolMode !== 'move') {
raycaster.setFromCamera(pointer, camera);
const intersectionPoint = new THREE.Vector3();
const point = raycaster.ray.intersectPlane(plane, intersectionPoint);
@ -439,7 +436,7 @@ const ZoneGroup: React.FC = () => {
intersects.length > 0 &&
intersects[0].object.name.includes("point")
) {
gl.domElement.style.cursor = movePoint ? "pointer" : "default";
gl.domElement.style.cursor = toolMode === 'move' ? "pointer" : "default";
} else {
gl.domElement.style.cursor = "default";
}
@ -479,7 +476,7 @@ const ZoneGroup: React.FC = () => {
setEndPoint(null);
};
if (toolMode === "Zone" || deletePointOrLine || movePoint) {
if (toolMode === "Zone" || deletePointOrLine || toolMode === 'move') {
canvasElement.addEventListener("mousedown", onMouseDown);
canvasElement.addEventListener("mouseup", onMouseUp);
canvasElement.addEventListener("mousemove", onMouseMove);
@ -503,7 +500,6 @@ const ZoneGroup: React.FC = () => {
deletePointOrLine,
zonePoints,
draggedSphere,
movePoint,
activeLayer,
raycaster,
pointer,

2
app/src/modules/simulation/vehicle/instances/animator/vehicleAnimator.tsx
View File

@ -146,7 +146,7 @@ function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid, agvDetai
return (
<>
{currentPath.length > 0 && (
<group >
<group visible={false}>
<Line points={currentPath} color="blue" lineWidth={3} />
{currentPath.map((point, index) => (
<mesh key={index} position={point}>

5
app/src/store/store.ts
View File

@ -139,11 +139,6 @@ export const useDeletedLines = create<any>((set: any) => ({
setDeletedLines: (x: any) => set(() => ({ deletedLines: x })),
}));
export const useMovePoint = create<any>((set: any) => ({
movePoint: false,
setMovePoint: (x: any) => set(() => ({ movePoint: x })),
}));
export const useTransformMode = create<any>((set: any) => ({
transformMode: null,
setTransformMode: (x: any) => set(() => ({ transformMode: x })),