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

Merge branch 'main-demo' into dev-resourceManagement

Browse Source
This commit is contained in:
Gomathi
2025-08-25 17:05:53 +05:30
parent 6aeef163d2 706f587e72
commit ff22152d8c
6 changed files with 876 additions and 681 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app/src/components/layout/sidebarRight/resourceManagement/hrm/assetManagement/AssetManagement.tsx
View File

@@ -125,7 +125,10 @@ const AssetManagement = () => {
<div className="header-wrapper">
{expandedAssetId === asset.id ?
<>
<div className="drop-icon" onClick={() => setExpandedAssetId(null)}>▾</div>
<img className='asset-image' src={asset.image} alt="" />
</>
:
<div className="icon"><ForkLiftIcon /></div>
}
@@ -167,7 +170,7 @@ const AssetManagement = () => {
</div>
</div>
<div className="asset-estimate__view-button" onClick={() => setExpandedAssetId(null)}>
<div className="asset-estimate__view-button">
<EyeIcon isClosed={false} />
<div className="asset-estimate__view-text" onClick={() => handleAssetClick(asset.id)}>View in Scene</div>
</div>

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

@@ -36,6 +36,7 @@ import {
} from "../../store/visualization/useDroppedObjectsStore";
import { useParams } from "react-router-dom";
import { useVersionContext } from "../../modules/builder/version/versionContext";
import { MoveIcon, RotateIcon } from "../icons/ShortcutIcons";
// Utility component
const ToolButton = ({
@@ -65,12 +66,8 @@ const Tools: React.FC = () => {
const { isPlaying, setIsPlaying } = usePlayButtonStore();
const { showShortcuts } = useShortcutStore();
const {
activeTool,
setActiveTool,
setToolMode,
setAddAction,
} = useStoreHooks();
const { activeTool, setActiveTool, setToolMode, setAddAction } =
useStoreHooks();
const { setActiveSubTool, activeSubTool } = useActiveSubTool();
const { setSelectedWallItem } = useSelectedWallItem();
@@ -81,14 +78,15 @@ const Tools: React.FC = () => {
const { selectedZone } = useSelectedZoneStore();
const { floatingWidget } = useFloatingWidget();
const { widgets3D } = use3DWidget();
const { visualizationSocket } = useSocketStore();
const dropdownRef = useRef<HTMLButtonElement>(null);
const [openDrop, setOpenDrop] = useState(false);
const { visualizationSocket } = useSocketStore();
const { selectedVersionStore } = useVersionContext();
const { selectedVersion } = selectedVersionStore();
const { projectId } = useParams();
const dropdownRef = useRef<HTMLButtonElement>(null);
const [openDrop, setOpenDrop] = useState(false);
// 1. Set UI toggles on initial render
useEffect(() => {
setToggleUI(
@@ -155,7 +153,7 @@ const Tools: React.FC = () => {
if (!is2D) setAddAction("Pillar");
break;
case "delete":
is2D ? setToolMode('2D-Delete') : setToolMode('3D-Delete');
is2D ? setToolMode("2D-Delete") : setToolMode("3D-Delete");
break;
}
};
@@ -251,7 +249,7 @@ const Tools: React.FC = () => {
templates,
visualizationSocket,
projectId,
versionId: selectedVersion?.versionId || ''
versionId: selectedVersion?.versionId || "",
})
}
/>
@@ -278,6 +276,10 @@ const Tools: React.FC = () => {
return FreeMoveIcon;
case "delete":
return DeleteIcon;
case "move":
return MoveIcon;
case "rotate":
return RotateIcon;
default:
return CursorIcon;
}
@@ -304,6 +306,10 @@ const Tools: React.FC = () => {
return <FreeMoveIcon isActive={false} />;
case "delete":
return <DeleteIcon isActive={false} />;
case "move":
return <MoveIcon />;
case "rotate":
return <RotateIcon />;
default:
return null;
}
@@ -362,6 +368,24 @@ const Tools: React.FC = () => {
)}
</div>
{activeModule !== "visualization" && (
<>
<div className="split"></div>
<div className="transform-tools">
{["move", "rotate"].map((tool) => (
<ToolButton
key={tool}
toolId={tool}
icon={getIconByTool(tool)}
tooltip={`${tool}`}
active={activeTool === tool}
onClick={() => setActiveTool(tool)}
/>
))}
</div>
</>
)}
<div className="split"></div>
{activeModule === "builder" && renderBuilderTools()}
{activeModule === "simulation" && renderSimulationTools()}

178
app/src/modules/scene/tools/measurementTool.tsx
View File

@@ -2,33 +2,15 @@ import * as THREE from "three";
import { useEffect, useRef, useState } from "react";
import { useThree, useFrame } from "@react-three/fiber";
import { useToolMode } from "../../../store/builder/store";
import { Html } from "@react-three/drei";
import { Html, Line } from "@react-three/drei";
const MeasurementTool = () => {
const { gl, raycaster, pointer, camera, scene } = useThree();
const { toolMode } = useToolMode();
const [points, setPoints] = useState<THREE.Vector3[]>([]);
const [tubeGeometry, setTubeGeometry] = useState<THREE.TubeGeometry | null>(
null
);
const [linePoints, setLinePoints] = useState<THREE.Vector3[] | null>(null);
const groupRef = useRef<THREE.Group>(null);
const [startConePosition, setStartConePosition] =
useState<THREE.Vector3 | null>(null);
const [endConePosition, setEndConePosition] = useState<THREE.Vector3 | null>(
null
);
const [startConeQuaternion, setStartConeQuaternion] = useState(
new THREE.Quaternion()
);
const [endConeQuaternion, setEndConeQuaternion] = useState(
new THREE.Quaternion()
);
const [coneSize, setConeSize] = useState({ radius: 0.2, height: 0.5 });
const MIN_RADIUS = 0.001, MAX_RADIUS = 0.1;
const MIN_CONE_RADIUS = 0.01, MAX_CONE_RADIUS = 0.4;
const MIN_CONE_HEIGHT = 0.035, MAX_CONE_HEIGHT = 2.0;
useEffect(() => {
const canvasElement = gl.domElement;
@@ -54,7 +36,9 @@ const MeasurementTool = () => {
!intersect.object.name.includes("zonePlane") &&
!intersect.object.name.includes("SelectionGroup") &&
!intersect.object.name.includes("selectionAssetGroup") &&
!intersect.object.name.includes("SelectionGroupBoundingBoxLine") &&
!intersect.object.name.includes(
"SelectionGroupBoundingBoxLine"
) &&
!intersect.object.name.includes("SelectionGroupBoundingBox") &&
!intersect.object.name.includes("SelectionGroupBoundingLine") &&
intersect.object.type !== "GridHelper"
@@ -78,9 +62,8 @@ const MeasurementTool = () => {
const onContextMenu = (evt: any) => {
evt.preventDefault();
if (!drag) {
evt.preventDefault();
setPoints([]);
setTubeGeometry(null);
setLinePoints(null);
}
};
@@ -90,8 +73,8 @@ const MeasurementTool = () => {
canvasElement.addEventListener("pointerup", onMouseUp);
canvasElement.addEventListener("contextmenu", onContextMenu);
} else {
resetMeasurement();
setPoints([]);
setLinePoints(null);
}
return () => {
@@ -100,10 +83,12 @@ const MeasurementTool = () => {
canvasElement.removeEventListener("pointerup", onMouseUp);
canvasElement.removeEventListener("contextmenu", onContextMenu);
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [toolMode, camera, raycaster, pointer, scene, points]);
useFrame(() => {
if (points.length === 1) {
// live preview for second point
raycaster.setFromCamera(pointer, camera);
const intersects = raycaster
.intersectObjects(scene.children, true)
@@ -122,116 +107,79 @@ const MeasurementTool = () => {
);
if (intersects.length > 0) {
updateMeasurement(points[0], intersects[0].point);
const tempEnd = intersects[0].point.clone();
updateMeasurement(points[0], tempEnd);
}
} else if (points.length === 2) {
// second point already fixed
updateMeasurement(points[0], points[1]);
} else {
resetMeasurement();
setLinePoints(null);
}
});
const updateMeasurement = (start: THREE.Vector3, end: THREE.Vector3) => {
const distance = start.distanceTo(end);
const radius = THREE.MathUtils.clamp(distance * 0.02, MIN_RADIUS, MAX_RADIUS);
const coneRadius = THREE.MathUtils.clamp(distance * 0.05, MIN_CONE_RADIUS, MAX_CONE_RADIUS);
const coneHeight = THREE.MathUtils.clamp(distance * 0.2, MIN_CONE_HEIGHT, MAX_CONE_HEIGHT);
setConeSize({ radius: coneRadius, height: coneHeight });
const direction = new THREE.Vector3().subVectors(end, start).normalize();
const offset = direction.clone().multiplyScalar(coneHeight * 0.5);
let tubeStart = start.clone().add(offset);
let tubeEnd = end.clone().sub(offset);
tubeStart.y = Math.max(tubeStart.y, 0);
tubeEnd.y = Math.max(tubeEnd.y, 0);
const curve = new THREE.CatmullRomCurve3([tubeStart, tubeEnd]);
setTubeGeometry(new THREE.TubeGeometry(curve, 20, radius, 8, false));
setStartConePosition(tubeStart);
setEndConePosition(tubeEnd);
setStartConeQuaternion(getArrowOrientation(start, end));
setEndConeQuaternion(getArrowOrientation(end, start));
setLinePoints([start.clone(), end.clone()]);
};
const resetMeasurement = () => {
setTubeGeometry(null);
setStartConePosition(null);
setEndConePosition(null);
};
const getArrowOrientation = (start: THREE.Vector3, end: THREE.Vector3) => {
const direction = new THREE.Vector3()
.subVectors(end, start)
.normalize()
.negate();
const quaternion = new THREE.Quaternion();
quaternion.setFromUnitVectors(new THREE.Vector3(0, 1, 0), direction);
return quaternion;
};
useEffect(() => {
if (points.length === 2) {
// console.log(points[0].distanceTo(points[1]));
}
}, [points]);
return (
<group ref={groupRef} name="MeasurementGroup">
{startConePosition && (
<mesh
name="MeasurementReference"
position={startConePosition}
quaternion={startConeQuaternion}
>
<coneGeometry args={[coneSize.radius, coneSize.height, 16]} />
<meshBasicMaterial color="yellow" />
</mesh>
)}
{endConePosition && (
<mesh
name="MeasurementReference"
position={endConePosition}
quaternion={endConeQuaternion}
>
<coneGeometry args={[coneSize.radius, coneSize.height, 16]} />
<meshBasicMaterial color="yellow" />
</mesh>
)}
{tubeGeometry && (
<mesh name="MeasurementReference" geometry={tubeGeometry}>
<meshBasicMaterial color="yellow" />
</mesh>
{linePoints && (
<>
{/* Outline line */}
<Line
points={linePoints}
color="black"
lineWidth={6} // thicker than main line
depthTest={false}
depthWrite={false}
renderOrder={998} // render behind main line
/>
{/* Main line */}
<Line
points={linePoints}
color="#b18ef1"
lineWidth={2} // actual line width
depthTest={false}
depthWrite={false}
transparent={false}
opacity={1}
renderOrder={999} // render on top
/>
</>
)}
{startConePosition && endConePosition && (
{points.map((point, index) => (
<Html
scale={THREE.MathUtils.clamp(
startConePosition.distanceTo(endConePosition) * 0.25,
0,
10
)}
position={[
(startConePosition.x + endConePosition.x) / 2,
(startConePosition.y + endConePosition.y) / 2,
(startConePosition.z + endConePosition.z) / 2,
]}
// class
wrapperClass="distance-text-wrapper"
className="distance-text"
// other
key={index}
position={point}
scale={0.5}
wrapperClass="measurement-label-wrapper"
className="measurement-label"
zIndexRange={[1, 0]}
prepend
sprite
>
<div>
{(startConePosition.distanceTo(endConePosition) + (coneSize.height)).toFixed(2)} m
</div>
<div className="measurement-point"></div>
</Html>
))}
{linePoints && linePoints.length === 2 && (
<Html
position={[
(linePoints[0].x + linePoints[1].x) / 2,
(linePoints[0].y + linePoints[1].y) / 2,
(linePoints[0].z + linePoints[1].z) / 2,
]}
scale={0.5}
wrapperClass="distance-text-wrapper"
className="distance-text"
zIndexRange={[2, 1]}
prepend
sprite
>
<div>{linePoints[0].distanceTo(linePoints[1]).toFixed(2)} m</div>
</Html>
)}
</group>

1
app/src/styles/components/tools.scss
View File

@@ -31,6 +31,7 @@
}
.draw-tools,
.transform-tools,
.general-options,
.activeDropicon {
@include flex-center;

291
app/src/styles/layout/resourceManagement.scss
View File

@@ -1,15 +1,12 @@
@use "../abstracts/variables" as *;
@use "../abstracts/mixins" as *;
.resourceManagement-container {
.navigation-wrapper {
@include flex-space-between;
justify-content: space-around;
.navigation {
padding: 4px 12px;
border-radius: 20px;
text-wrap: nowrap;
@@ -20,7 +17,6 @@
background: var(--background-color-button);
}
}
}
.search-container {
@@ -74,7 +70,6 @@
border-radius: 100px;
background: var(--background-color-button);
}
}
}
}
@@ -104,7 +99,7 @@
background: var(--background-color);
&.active {
outline: 1px solid var(--Color-Hover, #CCACFF);
outline: 1px solid var(--Color-Hover, #ccacff);
}
header {
@@ -127,29 +122,28 @@
border-radius: 50%;
width: 6px;
height: 6px;
outline: 1px solid #2F2C32;
outline: 1px solid #2f2c32;
position: absolute;
bottom: 0;
right: 0;
&.Active {
background-color: #44E5C6;
background-color: #44e5c6;
}
}
}
.details {
max-width: 144px;
.employee-id {
color: #B7B7C6;
color: #b7b7c6;
font-size: $tiny;
}
}
}
.see-more {
padding: 4px 12px;
border-radius: 20px;
text-wrap: nowrap;
@@ -165,7 +159,7 @@
left: 0;
width: 100%;
height: 1px;
background-color: #6F6F7A;
background-color: #6f6f7a;
}
}
@@ -191,7 +185,7 @@
gap: 3px;
.label-text {
color: #B7B7C6;
color: #b7b7c6;
}
}
}
@@ -205,10 +199,12 @@
.stat-item {
border-radius: 100px;
@include flex-space-between;
background: linear-gradient(162.53deg,
background: linear-gradient(
162.53deg,
rgba(51, 51, 51, 0.7) 0%,
rgba(45, 36, 55, 0.7) 106.84%);
border: 1px solid #FFFFFF0D;
rgba(45, 36, 55, 0.7) 106.84%
);
border: 1px solid #ffffff0d;
padding: 6px;
.stat-wrapper {
@@ -241,7 +237,7 @@
.header {
font-size: 12px;
color: #B7B7C6;
color: #b7b7c6;
}
}
}
@@ -255,16 +251,15 @@
button {
line-height: 133%;
font-size: 11px;
border: 1px solid var(--Linear-Border, #564B69);
border: 1px solid var(--Linear-Border, #564b69);
border-radius: 100px;
padding: 4px 0;
&:last-child {
background-color: #CC2C1E;
background-color: #cc2c1e;
}
}
}
}
}
}
@@ -277,17 +272,14 @@
.assetManagement-card-wrapper {
padding: 16px;
border: 1px solid #564B69;
border: 1px solid #564b69;
border-radius: 20px;
gap: 10px;
header {
border-bottom: 1px solid #595965;
padding-bottom: 8px;
.header-wrapper {
display: flex;
gap: 8px;
@@ -312,20 +304,23 @@
@include flex-space-between;
.asset-details {
// .asset-name{
// overflow: hidden;
// }
display: flex;
gap: 4px;
width: 100%;
max-width: 160px;
.input-value {
width: fit-content;
}
.asset-model {
color: var(--text-disabled);
display: none;
}
}
}
.asset-status-wrapper {
padding: 4px 8px;
border: 1px solid var(--text-color-dark, #F3F3FDD9);
border: 1px solid var(--text-color-dark, #f3f3fdd9);
border-radius: 100px;
@include flex-space-between;
gap: 4px;
@@ -336,7 +331,7 @@
border-radius: 100%;
&.Online {
background-color: #44E5C6;
background-color: #44e5c6;
}
}
@@ -384,7 +379,7 @@
width: 100%;
height: 5px;
border-radius: 20px;
background-color: #6F6F7A;
background-color: #6f6f7a;
position: relative;
.filled-value {
@@ -393,7 +388,7 @@
left: 0;
height: 100%;
width: 10px;
background-color: #CCACFF;
background-color: #ccacff;
border-radius: 20px;
}
}
@@ -407,7 +402,7 @@
gap: 10px;
&__label {
color: #B7B7C6;
color: #b7b7c6;
font-size: 14px;
}
@@ -448,7 +443,7 @@
&.openViewMore {
outline-offset: -1px;
outline: 1px solid var(--Color-Hover, #CCACFF);
outline: 1px solid var(--Color-Hover, #ccacff);
header {
display: flex;
@@ -456,7 +451,227 @@
gap: 6px;
.header-wrapper {
gap: 14px;
.asset-details-container {
flex-direction: column;
align-items: start;
justify-content: start;
.asset-details {
display: flex;
flex-direction: column;
gap: 4px;
max-width: 144px;
.input-value {
text-wrap: wrap;
font-size: 1rem;
}
}
.asset-status-wrapper {
margin-top: 8px;
}
}
}
}
}
}
}
}
// ASSET MANAGEMENT
.assetManagement-container {
display: flex;
flex-direction: column;
gap: 6px;
position: relative;
.assetManagement-card-wrapper {
padding: 16px;
border: 1px solid #564b69;
border-radius: 20px;
gap: 10px;
position: relative;
header {
border-bottom: 1px solid #595965;
padding-bottom: 8px;
.header-wrapper {
display: flex;
gap: 8px;
.icon {
min-width: 28px;
height: 28px;
border-radius: 7px;
@include flex-center;
background: var(--background-color-button);
}
.drop-icon {
position: absolute;
top: 18px;
right: 16px;
cursor: pointer;
}
.asset-image {
width: 114px;
height: 112px;
border-radius: 15.2px;
object-fit: cover;
}
.asset-details-container {
width: 100%;
@include flex-space-between;
.asset-details {
// .asset-name{
// overflow: hidden;
// }
.asset-model {
color: var(--text-disabled);
}
}
}
.asset-status-wrapper {
padding: 4px 8px;
border: 1px solid var(--text-color-dark, #f3f3fdd9);
border-radius: 100px;
@include flex-space-between;
gap: 4px;
.indication {
width: 6px;
height: 6px;
border-radius: 100%;
&.Online {
background-color: #44e5c6;
}
}
.status {
font-size: $small;
}
}
}
}
.asset-contents {
display: flex;
flex-direction: column;
gap: 3px;
.asset-wrapper {
@include flex-space-between;
padding: 6px 0;
gap: 20px;
.key-wrapper,
.viewMore {
display: flex;
align-items: center;
gap: 6px;
.icon {
@include flex-center;
}
}
.viewMore {
padding: 8px;
border-radius: 100px;
background: var(--background-color-button);
cursor: pointer;
}
.progress-wrapper {
flex: 1;
@include flex-space-between;
gap: 4px;
.progress-bar {
width: 100%;
height: 5px;
border-radius: 20px;
background-color: #6f6f7a;
position: relative;
.filled-value {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 10px;
background-color: #ccacff;
border-radius: 20px;
}
}
}
}
}
.asset-estimate {
margin-top: 5px;
display: flex;
flex-direction: column;
gap: 10px;
&__label {
color: #b7b7c6;
font-size: 14px;
}
&__value {
font-weight: 500;
font-size: 16px;
}
&__unit-cost {
display: flex;
flex-direction: column;
gap: 4px;
}
&__breakdown {
display: flex;
flex-direction: row;
justify-content: space-between;
gap: 2px;
}
&__view-button {
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
gap: 4px;
background-color: var(--background-color-button);
border-radius: 20px;
padding: 8px 0;
}
&__view-text {
font-weight: 500;
// color: #4A4AFF;
}
}
&.openViewMore {
outline-offset: -1px;
outline: 1px solid var(--Color-Hover, #ccacff);
header {
display: flex;
flex-direction: column;
gap: 6px;
.header-wrapper {
gap: 20px;
.asset-details-container {
@@ -480,12 +695,6 @@
}
}
}
}
}
}
}

10
app/src/styles/scene/scene.scss
View File

@@ -142,3 +142,13 @@
border-radius: 6px;
overflow: hidden;
}
.measurement-point {
height: 12px;
width: 12px;
border-radius: 50%;
background: #b18ef1;
outline: 2px solid black;
outline-offset: -1px;
transform: translate(-50%, -50%);
}