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 +38 -74
6 changed files with 38 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit dd5f7faf34 - Show all commits

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

@ -24,7 +24,6 @@ import {
useAddAction, useAddAction,
useDeleteTool, useDeleteTool,
useDeletePointOrLine, useDeletePointOrLine,
useMovePoint,
useRefTextUpdate, useRefTextUpdate,
useSelectedWallItem, useSelectedWallItem,
useSocketStore, useSocketStore,
@ -64,7 +63,6 @@ const Tools: React.FC = () => {
const { setTransformMode } = useTransformMode(); const { setTransformMode } = useTransformMode();
const { setDeletePointOrLine } = useDeletePointOrLine(); const { setDeletePointOrLine } = useDeletePointOrLine();
const { setMovePoint } = useMovePoint();
const { setToolMode } = useToolMode(); const { setToolMode } = useToolMode();
const { activeTool, setActiveTool } = useActiveTool(); const { activeTool, setActiveTool } = useActiveTool();
const { setRefTextUpdate } = useRefTextUpdate(); const { setRefTextUpdate } = useRefTextUpdate();
@ -77,7 +75,7 @@ const Tools: React.FC = () => {
: true : true
); );
}, []); }, []);
useEffect(() => {}, [activeModule]);
useEffect(() => { useEffect(() => {
setActiveTool(activeSubTool); setActiveTool(activeSubTool);
setActiveSubTool(activeSubTool); setActiveSubTool(activeSubTool);
@ -129,14 +127,13 @@ const Tools: React.FC = () => {
setDeleteTool(false); setDeleteTool(false);
setAddAction(null); setAddAction(null);
setTransformMode(null); setTransformMode(null);
setMovePoint(false);
setDeletePointOrLine(false); setDeletePointOrLine(false);
setRefTextUpdate((prevUpdate) => prevUpdate - 1); setRefTextUpdate((prevUpdate) => prevUpdate - 1);
switch (activeTool) { switch (activeTool) {
case "Move": case "cursor":
if (toggleView) { if (toggleView) {
setMovePoint(true); setToolMode('move');
} else { } else {
setTransformMode("translate"); setTransformMode("translate");
} }
@ -201,7 +198,7 @@ const Tools: React.FC = () => {
} }
setActiveTool(activeTool); setActiveTool(activeTool);
}, [activeTool]); }, [activeTool, toggleView]);
return ( return (
<> <>
@ -211,9 +208,8 @@ const Tools: React.FC = () => {
<div className="activeDropicon"> <div className="activeDropicon">
{activeSubTool == "cursor" && ( {activeSubTool == "cursor" && (
<div <div
className={`tool-button ${ className={`tool-button ${activeTool === "cursor" ? "active" : ""
activeTool === "cursor" ? "active" : "" }`}
}`}
onClick={() => { onClick={() => {
setActiveTool("cursor"); setActiveTool("cursor");
}} }}
@ -224,9 +220,8 @@ const Tools: React.FC = () => {
)} )}
{activeSubTool == "free-hand" && ( {activeSubTool == "free-hand" && (
<div <div
className={`tool-button ${ className={`tool-button ${activeTool === "free-hand" ? "active" : ""
activeTool === "free-hand" ? "active" : "" }`}
}`}
onClick={() => { onClick={() => {
setActiveTool("free-hand"); setActiveTool("free-hand");
}} }}
@ -237,9 +232,8 @@ const Tools: React.FC = () => {
)} )}
{activeSubTool == "delete" && ( {activeSubTool == "delete" && (
<div <div
className={`tool-button ${ className={`tool-button ${activeTool === "delete" ? "active" : ""
activeTool === "delete" ? "active" : "" }`}
}`}
onClick={() => { onClick={() => {
setActiveTool("delete"); setActiveTool("delete");
}} }}
@ -312,9 +306,8 @@ const Tools: React.FC = () => {
<div className="split"></div> <div className="split"></div>
<div className="draw-tools"> <div className="draw-tools">
<div <div
className={`tool-button ${ className={`tool-button ${activeTool === "draw-wall" ? "active" : ""
activeTool === "draw-wall" ? "active" : "" }`}
}`}
onClick={() => { onClick={() => {
setActiveTool("draw-wall"); setActiveTool("draw-wall");
}} }}
@ -323,9 +316,8 @@ const Tools: React.FC = () => {
<WallIcon isActive={activeTool === "draw-wall"} /> <WallIcon isActive={activeTool === "draw-wall"} />
</div> </div>
<div <div
className={`tool-button ${ className={`tool-button ${activeTool === "draw-zone" ? "active" : ""
activeTool === "draw-zone" ? "active" : "" }`}
}`}
onClick={() => { onClick={() => {
setActiveTool("draw-zone"); setActiveTool("draw-zone");
}} }}
@ -334,9 +326,8 @@ const Tools: React.FC = () => {
<ZoneIcon isActive={activeTool === "draw-zone"} /> <ZoneIcon isActive={activeTool === "draw-zone"} />
</div> </div>
<div <div
className={`tool-button ${ className={`tool-button ${activeTool === "draw-aisle" ? "active" : ""
activeTool === "draw-aisle" ? "active" : "" }`}
}`}
onClick={() => { onClick={() => {
setActiveTool("draw-aisle"); setActiveTool("draw-aisle");
}} }}
@ -345,9 +336,8 @@ const Tools: React.FC = () => {
<AsileIcon isActive={activeTool === "draw-aisle"} /> <AsileIcon isActive={activeTool === "draw-aisle"} />
</div> </div>
<div <div
className={`tool-button ${ className={`tool-button ${activeTool === "draw-floor" ? "active" : ""
activeTool === "draw-floor" ? "active" : "" }`}
}`}
onClick={() => { onClick={() => {
setActiveTool("draw-floor"); setActiveTool("draw-floor");
}} }}
@ -363,9 +353,8 @@ const Tools: React.FC = () => {
<div className="split"></div> <div className="split"></div>
<div className="draw-tools"> <div className="draw-tools">
<div <div
className={`tool-button ${ className={`tool-button ${activeTool === "measure" ? "active" : ""
activeTool === "measure" ? "active" : "" }`}
}`}
onClick={() => { onClick={() => {
setActiveTool("measure"); setActiveTool("measure");
}} }}
@ -381,9 +370,8 @@ const Tools: React.FC = () => {
<div className="split"></div> <div className="split"></div>
<div className="draw-tools"> <div className="draw-tools">
<div <div
className={`tool-button ${ className={`tool-button ${activeTool === "pen" ? "active" : ""
activeTool === "pen" ? "active" : "" }`}
}`}
onClick={() => { onClick={() => {
setActiveTool("pen"); setActiveTool("pen");
}} }}
@ -420,9 +408,8 @@ const Tools: React.FC = () => {
<div className="split"></div> <div className="split"></div>
<div className="general-options"> <div className="general-options">
<div <div
className={`tool-button ${ className={`tool-button ${activeTool === "comment" ? "active" : ""
activeTool === "comment" ? "active" : "" }`}
}`}
onClick={() => { onClick={() => {
setActiveTool("comment"); setActiveTool("comment");
}} }}
@ -432,9 +419,8 @@ const Tools: React.FC = () => {
</div> </div>
{toggleThreeD && ( {toggleThreeD && (
<div <div
className={`tool-button ${ className={`tool-button ${activeTool === "play" ? "active" : ""
activeTool === "play" ? "active" : "" }`}
}`}
onClick={() => { onClick={() => {
setIsPlaying(!isPlaying); setIsPlaying(!isPlaying);
}} }}
@ -448,9 +434,8 @@ const Tools: React.FC = () => {
<> <>
<div className="split"></div> <div className="split"></div>
<div <div
className={`toggle-threed-button${ className={`toggle-threed-button${toggleThreeD ? " toggled" : ""
toggleThreeD ? " toggled" : "" }`}
}`}
onClick={toggleSwitch} onClick={toggleSwitch}
> >
<div className="tooltip">toggle view (tab)</div> <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 { import {
useToggleView, useToggleView,
useDeletePointOrLine, useDeletePointOrLine,
useMovePoint,
useActiveLayer, useActiveLayer,
useWallVisibility, useWallVisibility,
useRoofVisibility, 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 { 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 { toggleView } = useToggleView(); // State for toggling between 2D and 3D.
const { toolMode, setToolMode } = useToolMode(); 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 { setDeletePointOrLine } = useDeletePointOrLine();
const { setRoofVisibility } = useRoofVisibility(); const { setRoofVisibility } = useRoofVisibility();
const { setWallVisibility } = useWallVisibility(); const { setWallVisibility } = useWallVisibility();
@ -160,9 +158,6 @@ export default function Builder() {
useEffect(() => { useEffect(() => {
setRefTextUpdate((prevUpdate: number) => prevUpdate - 1); setRefTextUpdate((prevUpdate: number) => prevUpdate - 1);
if (dragPointControls.current) {
dragPointControls.current.enabled = false;
}
if (toggleView) { if (toggleView) {
Layer2DVisibility( Layer2DVisibility(
activeLayer, activeLayer,
@ -175,7 +170,6 @@ export default function Builder() {
} else { } else {
setToolMode(null); setToolMode(null);
setDeletePointOrLine(false); setDeletePointOrLine(false);
setMovePoint(false);
loadWalls(lines, setWalls); loadWalls(lines, setWalls);
setUpdateScene(true); setUpdateScene(true);
line.current = []; 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 Types from '../../../types/world/worldTypes';
import * as CONSTANTS from '../../../types/world/worldConstants'; import * as CONSTANTS from '../../../types/world/worldConstants';
import { useThree } from "@react-three/fiber"; 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 { useEffect } from "react";
import removeSoloPoint from "../geomentries/points/removeSoloPoint"; import removeSoloPoint from "../geomentries/points/removeSoloPoint";
import removeReferenceLine from "../geomentries/lines/removeReferenceLine"; import removeReferenceLine from "../geomentries/lines/removeReferenceLine";
@ -17,7 +17,6 @@ const FloorGroupAilse = ({ floorGroupAisle, plane, floorPlanGroupLine, floorPlan
const { toggleView, setToggleView } = useToggleView(); const { toggleView, setToggleView } = useToggleView();
const { deletePointOrLine, setDeletePointOrLine } = useDeletePointOrLine(); const { deletePointOrLine, setDeletePointOrLine } = useDeletePointOrLine();
const { toolMode, setToolMode } = useToolMode(); const { toolMode, setToolMode } = useToolMode();
const { movePoint, setMovePoint } = useMovePoint();
const { socket } = useSocketStore(); const { socket } = useSocketStore();
const { activeLayer } = useActiveLayer(); const { activeLayer } = useActiveLayer();
const { gl, raycaster, camera, pointer } = useThree(); const { gl, raycaster, camera, pointer } = useThree();
@ -34,7 +33,6 @@ const FloorGroupAilse = ({ floorGroupAisle, plane, floorPlanGroupLine, floorPlan
useEffect(() => { useEffect(() => {
if (toolMode === "Aisle") { if (toolMode === "Aisle") {
setDeletePointOrLine(false); setDeletePointOrLine(false);
setMovePoint(false);
} else { } else {
removeSoloPoint(line, floorPlanGroupLine, floorPlanGroupPoint); removeSoloPoint(line, floorPlanGroupLine, floorPlanGroupPoint);
removeReferenceLine(floorPlanGroup, ReferenceLineMesh, LineCreated, line); removeReferenceLine(floorPlanGroup, ReferenceLineMesh, LineCreated, line);

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

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

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

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

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 })), 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) => ({ export const useTransformMode = create<any>((set: any) => ({
transformMode: null, transformMode: null,
setTransformMode: (x: any) => set(() => ({ transformMode: x })), setTransformMode: (x: any) => set(() => ({ transformMode: x })),