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

refactor(MenuBar): replace divs with spans for menu buttons to improve semantics

Browse Source 
refactor(Controls): format code for better readability and maintainability
This commit is contained in:
Vishnu
2025-09-22 13:20:19 +05:30
parent 34205f930b
commit 09027fe9f1
2 changed files with 78 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
app/src/components/ui/menu/menu.tsx
View File

@@ -172,15 +172,15 @@ const MenuBar: React.FC<MenuBarProps> = ({ setOpenMenu }) => {
setActiveSubMenu(null);
}}
>
<div className="menu-button">
<span className="menu-button">
{menu}
<span className="dropdown-icon">
<ArrowIcon />
</span>
</div>
</span>
{activeMenu === menu && (
<div className="dropdown-menu">
<span className="dropdown-menu">
{items.map((item) =>
item.submenu ? (
<button
@@ -190,19 +190,19 @@ const MenuBar: React.FC<MenuBarProps> = ({ setOpenMenu }) => {
onMouseEnter={() => setActiveSubMenu(item.label)}
onMouseLeave={() => setActiveSubMenu(null)}
>
<div className="menu-item">
<span className="menu-item">
<span>{item.label}</span>
<span className="dropdown-icon">
<ArrowIcon />
</span>
</div>
</span>
{activeSubMenu === item.label && renderSubMenu(item.submenu, item.label)}
</button>
) : (
renderMenuItem(item)
)
)}
</div>
</span>
)}
</button>
))}
@@ -222,9 +222,9 @@ const MenuBar: React.FC<MenuBarProps> = ({ setOpenMenu }) => {
setActiveModule("builder");
}}
>
<div className="menu-button">
Version history <div className="value">Ctrl + H</div>
</div>
<span className="menu-button">
Version history <span className="value">Ctrl + H</span>
</span>
</button>
{/* Theme */}
@@ -238,14 +238,14 @@ const MenuBar: React.FC<MenuBarProps> = ({ setOpenMenu }) => {
}}
onClick={handleThemeChange}
>
<div className="menu-button">
Theme <div className="value">{savedTheme}</div>
</div>
<span className="menu-button">
Theme <span className="value">{savedTheme}</span>
</span>
</button>
{/* Log out */}
<button id="logout" className="menu-button-container" onClick={handleLogout}>
<div className="menu-button">Log out</div>
<span className="menu-button">Log out</span>
</button>
</div>
</div>

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

@@ -37,15 +37,21 @@ export default function Controls() {
useEffect(() => {
if (controlsRef.current) {
(controlsRef.current as any).mouseButtons.left = CONSTANTS.thirdPersonControls.leftMouse;
(controlsRef.current as any).mouseButtons.right = CONSTANTS.thirdPersonControls.rightMouse;
(controlsRef.current as any).mouseButtons.left =
CONSTANTS.thirdPersonControls.leftMouse;
(controlsRef.current as any).mouseButtons.right =
CONSTANTS.thirdPersonControls.rightMouse;
}
if (!projectId) return;
getCameraApi(projectId)
.then((data) => {
if (data?.position && data?.target) {
controlsRef.current?.setPosition(data.position.x, data.position.y, data.position.z);
controlsRef.current?.setPosition(
data.position.x,
data.position.y,
data.position.z
);
controlsRef.current?.setTarget(data.target.x, data.target.y, data.target.z);
} else {
controlsRef.current?.setPosition(...CONSTANTS.threeDimension.defaultPosition);
@@ -56,46 +62,68 @@ export default function Controls() {
}, [projectId]);
useEffect(() => {
if (resetCamera && projectId && (layoutType === "default" || (layoutType === "useCase" && organization === ALPHA_ORG))) {
if (resetCamera && projectId) {
controlsRef.current?.setPosition(...CONSTANTS.threeDimension.defaultPosition);
controlsRef.current?.setTarget(...CONSTANTS.threeDimension.defaultTarget);
controlsRef.current?.rotateAzimuthTo(CONSTANTS.threeDimension.defaultAzimuth);
if (!builderSocket?.connected) {
setCameraApi(
projectId,
new THREE.Vector3(...CONSTANTS.threeDimension.defaultPosition),
new THREE.Vector3(...CONSTANTS.threeDimension.defaultTarget),
new THREE.Vector3(...CONSTANTS.threeDimension.defaultRotation)
);
} else {
const camData = {
organization,
userId: userId,
position: new THREE.Vector3(...CONSTANTS.threeDimension.defaultPosition),
target: new THREE.Vector3(...CONSTANTS.threeDimension.defaultTarget),
rotation: new THREE.Vector3(...CONSTANTS.threeDimension.defaultRotation),
socketId: builderSocket.id,
projectId,
};
builderSocket.emit("v1:Camera:set", camData);
}
if (
layoutType === "default" ||
(layoutType === "useCase" && organization === ALPHA_ORG)
)
if (!builderSocket?.connected) {
setCameraApi(
projectId,
new THREE.Vector3(...CONSTANTS.threeDimension.defaultPosition),
new THREE.Vector3(...CONSTANTS.threeDimension.defaultTarget),
new THREE.Vector3(...CONSTANTS.threeDimension.defaultRotation)
);
} else {
const camData = {
organization,
userId: userId,
position: new THREE.Vector3(...CONSTANTS.threeDimension.defaultPosition),
target: new THREE.Vector3(...CONSTANTS.threeDimension.defaultTarget),
rotation: new THREE.Vector3(...CONSTANTS.threeDimension.defaultRotation),
socketId: builderSocket.id,
projectId,
};
builderSocket.emit("v1:Camera:set", camData);
}
setResetCamera(false);
}
}, [resetCamera, builderSocket, projectId, layoutType]);
useEffect(() => {
controlsRef.current?.setBoundary(new THREE.Box3(new THREE.Vector3(...CONSTANTS.threeDimension.boundaryBottom), new THREE.Vector3(...CONSTANTS.threeDimension.boundaryTop)));
controlsRef.current?.setBoundary(
new THREE.Box3(
new THREE.Vector3(...CONSTANTS.threeDimension.boundaryBottom),
new THREE.Vector3(...CONSTANTS.threeDimension.boundaryTop)
)
);
// state.scene.add(new THREE.Box3Helper(new THREE.Box3(new THREE.Vector3(...CONSTANTS.threeDimension.boundaryBottom), new THREE.Vector3(...CONSTANTS.threeDimension.boundaryTop)), 0xffff00));
let hasInteracted = false;
let intervalId: NodeJS.Timeout | null = null;
const handleRest = () => {
if (hasInteracted && controlsRef.current && state.camera.position && !toggleView && builderSocket && camType === "perspective") {
if (
hasInteracted &&
controlsRef.current &&
state.camera.position &&
!toggleView &&
builderSocket &&
camType === "perspective"
) {
const position = state.camera.position;
if (position.x === 0 && position.y === 0 && position.z === 0) return;
updateCamPosition(controlsRef, builderSocket, position, state.camera.rotation, projectId);
updateCamPosition(
controlsRef,
builderSocket,
position,
state.camera.rotation,
projectId
);
stopInterval();
}
};
@@ -119,7 +147,12 @@ export default function Controls() {
};
const controls = controlsRef.current;
if (controls && !toggleView && camType === "perspective" && (layoutType === "default" || (layoutType === "useCase" && organization === ALPHA_ORG))) {
if (
controls &&
!toggleView &&
camType === "perspective" &&
(layoutType === "default" || (layoutType === "useCase" && organization === ALPHA_ORG))
) {
controls.addEventListener("sleep", handleRest);
controls.addEventListener("control", startInterval);
controls.addEventListener("controlend", stopInterval);
@@ -140,7 +173,11 @@ export default function Controls() {
<CameraControls
makeDefault
ref={controlsRef}
minDistance={toggleView || camType === "orthographic" ? CONSTANTS.twoDimension.minDistance : CONSTANTS.threeDimension.minDistance}
minDistance={
toggleView || camType === "orthographic"
? CONSTANTS.twoDimension.minDistance
: CONSTANTS.threeDimension.minDistance
}
maxDistance={CONSTANTS.thirdPersonControls.maxDistance}
minZoom={CONSTANTS.thirdPersonControls.minZoom}
maxZoom={CONSTANTS.thirdPersonControls.maxZoom}