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

refactor: Clean up code by removing unused imports, enhancing component props, and improving styles for better maintainability

This commit is contained in:
Vishnu 2025-05-15 11:06:01 +05:30
parent c77b62db19
commit 304ccf134a
9 changed files with 152 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/src/components/footer/Footer.tsx
View File

@ -10,7 +10,6 @@ import {
import ShortcutHelper from "./shortcutHelper";
import { useShortcutStore } from "../../store/builder/store";
import { usePlayButtonStore } from "../../store/usePlayButtonStore";
import OuterClick from "../../utils/outerClick";
const Footer: React.FC = () => {
const { logs, setIsLogListVisible } = useLogger();
@ -19,11 +18,6 @@ const Footer: React.FC = () => {
const { isPlaying } = usePlayButtonStore();
const { showShortcuts, setShowShortcuts } = useShortcutStore();
OuterClick({
contextClassName: ["shortcut-helper-overlay"],
setMenuVisible: () => setShowShortcuts(false),
});
return (
<div className="footer-container">
<div className="footer-wrapper">
@ -82,7 +76,7 @@ const Footer: React.FC = () => {
showShortcuts ? "visible" : ""
}`}
>
<ShortcutHelper />
<ShortcutHelper setShowShortcuts={setShowShortcuts}/>
</div>
)}
</div>

35
app/src/components/footer/shortcutHelper.tsx
View File

@ -29,8 +29,8 @@ import {
DublicateIcon,
DuplicateInstanceIcon,
PlayIcon,
BrowserIcon,
} from "../icons/ShortcutIcons";
import { CloseIcon } from "../icons/ExportCommonIcons";
interface ShortcutItem {
keys: string[];
@ -44,7 +44,13 @@ interface ShortcutGroup {
items: ShortcutItem[];
}
const ShortcutHelper = () => {
interface ShortcutHelperProps {
setShowShortcuts: (value: boolean) => void;
}
const ShortcutHelper: React.FC<ShortcutHelperProps> = ({
setShowShortcuts,
}) => {
const shortcuts: ShortcutGroup[] = [
{
category: "Essential",
@ -256,27 +262,26 @@ const ShortcutHelper = () => {
},
],
},
{
category: "Miscellaneous",
items: [
{
keys: ["F5", "F11", "F12", "CTRL", "+", "R"],
name: "Browser Defaults",
description: "Reserved for browser defaults",
icon: <BrowserIcon />,
},
],
},
];
const [activeCategory, setActiveCategory] =
React.useState<string>("Essential");
const activeShortcuts =
shortcuts.find((group) => group.category === activeCategory)?.items || [];
shortcuts.find((group) => group.category === activeCategory)?.items ?? [];
return (
<div className="shortcut-helper-container">
<button
id="close-shortcuts-helper"
className="close-button"
title="close-btn"
onClick={() => {
setShowShortcuts(false);
}}
>
<CloseIcon />
</button>
<div className="header">
<div className="header-wrapper">
{shortcuts.map((group) => (
@ -313,7 +318,7 @@ const ShortcutHelper = () => {
{item.keys.map((key, i) => (
<span
key={`${key}-${i}`}
className={`key ${key === "+" || key === "OR" ? "add" : ""}`}
className={`key${key === "+" || key === "OR" ? " add" : ""}`}
>
{key}
</span>

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

@ -335,6 +335,7 @@ const Tools: React.FC = () => {
{activeModule !== "visualization" && (
<button
id="drop-down-button"
title="drop-down"
className="drop-down-option-button"
ref={dropdownRef}
onClick={() => setOpenDrop(!openDrop)}

25
app/src/modules/visualization/widgets/panel/Panel.tsx
View File

@ -1,7 +1,7 @@
import React, { useEffect, useMemo, useRef, useState } from "react";
import { arrayMove } from "@dnd-kit/sortable";
import { useAsset3dWidget, useSocketStore } from "../../../../store/builder/store";
import { useSocketStore } from "../../../../store/builder/store";
import { usePlayButtonStore } from "../../../../store/usePlayButtonStore";
import { useWidgetStore } from "../../../../store/useWidgetStore";
import { DraggableWidget } from "../2d/DraggableWidget";
@ -47,7 +47,7 @@ interface PanelProps {
}
const generateUniqueId = () =>
`${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
`${Date.now()}-${Math.random().toString(36).slice(2, 11)}`;
const Panel: React.FC<PanelProps> = ({
selectedZone,
@ -56,7 +56,6 @@ const Panel: React.FC<PanelProps> = ({
setZonesData,
waitingPanels,
}) => {
const { widgetSelect, setWidgetSelect } = useAsset3dWidget();
const panelRefs = useRef<{ [side in Side]?: HTMLDivElement }>({});
const [panelDimensions, setPanelDimensions] = useState<{
[side in Side]?: { width: number; height: number };
@ -183,7 +182,7 @@ const Panel: React.FC<PanelProps> = ({
// Add widget to panel
const addWidgetToPanel = async (asset: any, panel: Side) => {
const email = localStorage.getItem("email") || "";
const email = localStorage.getItem("email") ?? "";
const organization = email?.split("@")[1]?.split(".")[0];
const newWidget = {
@ -285,7 +284,7 @@ const Panel: React.FC<PanelProps> = ({
{selectedZone.activeSides.map((side) => (
<div
key={side}
id="panel-wrapper"
id={`panel-wrapper-${side}`}
className={`panel ${side}-panel absolute ${
hiddenPanels[selectedZone.zoneId]?.includes(side) ? "hidePanel" : ""
}`}
@ -301,14 +300,14 @@ const Panel: React.FC<PanelProps> = ({
}}
>
<div
className={`panel-content
${waitingPanels === side ? `${side}-closing` : ""}
${
!hiddenPanels[selectedZone.zoneId]?.includes(side) && waitingPanels !== side
? `${side}-opening`
: ""
}
${isPlaying ? "fullScreen" : ""}`}
className={`panel-content ${
waitingPanels === side ? `${side}-closing` : ""
}${
!hiddenPanels[selectedZone.zoneId]?.includes(side) &&
waitingPanels !== side
? `${side}-opening`
: ""
} ${isPlaying ? "fullScreen" : ""}`}
style={{
pointerEvents:
selectedZone.lockedPanels.includes(side) ||

2
app/src/pages/Project.tsx
View File

@ -71,7 +71,7 @@ const Project: React.FC = () => {
const { toggleThreeD } = useThreeDStore();
// simulation store
const { isPlaying, setIsPlaying } = usePlayButtonStore();
const { isPlaying } = usePlayButtonStore();
// collaboration store
const { selectedUser } = useSelectedUserStore();

1
app/src/services/visulization/zone/panel.ts
View File

@ -1,5 +1,4 @@
let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
// let url_Backend_dwinzo = `http://192.168.0.102:5000`;
type Side = "top" | "bottom" | "left" | "right";
export const panelData = async (

48
app/src/styles/components/footer/footer.scss
View File

@ -1,7 +1,6 @@
@use "../../abstracts/variables" as *;
@use "../../abstracts/mixins" as *;
.footer-container {
width: 100%;
position: fixed;
@ -34,7 +33,7 @@
.selector {
color: var(--text-color);
font-size: var(--font-size-small)
font-size: var(--font-size-small);
}
.icon {
@ -48,7 +47,7 @@
gap: 6px;
position: relative;
pointer-events: all;
// dummy
// dummy
.bg-dummy {
background: var(--background-color-solid);
position: absolute;
@ -166,11 +165,23 @@
min-height: 320px;
height: 320px;
border-radius: 18px;
pointer-events: all;
background: var(--background-color);
backdrop-filter: blur(20px);
.close-button {
position: absolute;
@include flex-center;
height: 26px;
width: 26px;
right: 12px;
top: 10px;
background: var(--background-color);
border-radius: #{$border-radius-medium};
outline: 1px solid var(--border-color);
&:hover{
background: var(--background-color-solid);
}
}
.header {
display: flex;
justify-content: center;
@ -192,7 +203,7 @@
padding-left: 10px;
&::before {
content: '';
content: "";
position: absolute;
top: 0;
left: 0;
@ -244,7 +255,6 @@
.shortcut-intro {
display: flex;
// align-items: center;
gap: 6px;
.value-wrapper {
@ -254,7 +264,6 @@
.description {
font-size: var(--font-size-tiny);
}
}
}
@ -265,14 +274,22 @@
gap: 6px;
flex-wrap: wrap;
.key {
background: linear-gradient(135.11deg, #656DC2 3.48%, #9526E5 91.33%);
background: linear-gradient(
135.11deg,
#656dc2 3.48%,
#9526e5 91.33%
);
@include flex-center;
padding: 4px 10px;
height: 25px;
border-radius: 4px;
font-family: monospace;
font-size: var(--font-size-tiny);
color: var(--icon-default-color-active);
&:last-child{
background: var(--background-color-button);
}
}
.key.add {
@ -295,19 +312,12 @@
align-items: flex-start;
/* or center if vertical centering is desired */
}
}
}
.shortcut-helper-overlay {
max-height: 0;
overflow: hidden;
// opacity: 0;
transform: translateY(20px);
transition: all 0.3s ease-in-out;
@ -316,4 +326,4 @@
opacity: 1;
transform: translateY(0);
}
}
}

73
app/src/styles/components/simulation/simulation.scss
View File

@ -347,6 +347,77 @@
}
}
.controls-player-container {
max-width: 50vw;
border-radius: 15px;
gap: 40px;
background: var(--background-color);
backdrop-filter: blur(20px);
cursor: pointer;
@include flex-center;
justify-content: space-between;
position: fixed;
bottom: 40px;
left: 50%;
transform: translate(-50%, 0);
color: var(--accent-color);
z-index: 100;
isolation: isolate;
font-weight: 700;
padding: 8px;
.controls-left,
.controls-right {
display: flex;
align-items: center;
gap: 12px;
font-size: var(--font-size-small);
.label {
text-transform: capitalize;
font-size: var(--font-size-small);
}
.walkMode-wrapper {
display: flex;
align-items: center;
gap: 4px;
.input-toggle-container {
padding: 0;
gap: 4px;
.label {
font-size: var(--font-size-small);
}
}
}
.btn-wrapper {
display: flex;
justify-content: center;
align-items: center;
gap: 2px;
padding: 4px 8px;
min-width: 64px;
background: var(--background-color);
border-radius: 20px;
height: fit-content;
cursor: pointer;
transition: color .2s;
&:hover {
outline: 1px solid var(--border-color);
color: var(--accent-color);
}
.icon {
width: 16px;
height: 16px;
@include flex-center;
}
}
}
}
.processDisplayer {
border-radius: #{$border-radius-large};
outline: 1px solid var(--border-color);
@ -454,7 +525,7 @@
}
}
}
.storage-container{
.storage-container {
font-size: var(--font-size-tiny);
color: var(--highlight-text-color);
}

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

@ -12,12 +12,16 @@
box-shadow: #{$box-shadow-medium};
border-radius: #{$border-radius-large};
width: fit-content;
transition: width 0.2s;
background: var(--background-color);
backdrop-filter: blur(20px);
z-index: 2;
outline: 1px solid var(--border-color);
outline-offset: -1px;
transition: transform 0.4s ease-in-out 0.01s;
&.visible {
transform: translate(-50%, -310px);
}
.split {
height: 20px;
@ -47,9 +51,11 @@
position: relative;
&:hover {
background: color-mix(in srgb,
var(--highlight-accent-color) 60%,
transparent);
background: color-mix(
in srgb,
var(--highlight-accent-color) 60%,
transparent
);
.tooltip {
opacity: 1;
@ -78,9 +84,11 @@
position: relative;
&:hover {
background: color-mix(in srgb,
var(--highlight-accent-color) 60%,
transparent);
background: color-mix(
in srgb,
var(--highlight-accent-color) 60%,
transparent
);
}
.drop-down-container {
@ -178,88 +186,6 @@
}
.tools-container {
transition: transform 0.4s ease-in-out 0.01s;
&.visible {
transform: translate(-50%, -310px);
}
}
.controls-player-container {
width: 663px;
height: 30px;
border-radius: 15px;
background: var(--background-color);
backdrop-filter: blur(20px);
cursor: pointer;
@include flex-center;
justify-content: space-between;
position: fixed;
bottom: 40px;
left: 50%;
transform: translate(-50%, 0);
color: var(--accent-color);
z-index: 100;
isolation: isolate;
font-weight: 700;
padding: 8px;
.controls-left,
.controls-right {
display: flex;
align-items: center;
gap: 12px;
font-size: var(--font-size-small);
.label {
text-transform: capitalize;
font-size: var(--font-size-small);
}
.walkMode-wrapper {
display: flex;
align-items: center;
gap: 4px;
.input-toggle-container {
padding: 0;
gap: 4px;
.label {
font-size: var(--font-size-small);
}
}
}
.btn-wrapper {
background: var(--background-color);
backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: space-between;
gap: 5px;
border-radius: 15px;
padding: 2px 8px;
color: var(--highlight-text-color);
cursor: pointer;
font-size: var(--font-size-small);
.icon {
width: 16px;
height: 16px;
@include flex-center;
}
}
}
}
@keyframes pulse {
0% {
opacity: 0;
@ -286,4 +212,4 @@
width: fit-content;
opacity: 1;
}
}
}