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

Refactor logging components and styles; remove unused CSS; enhance log icon functionality

Browse Source 
- Removed the random color generation function from ProductionCapacity component.
- Updated ThroughputSummary component to remove unused imports.
- Simplified LogList component by removing unnecessary icons and integrating GetLogIcon for log types.
- Enhanced LoggerContext to support a new "success" log type and optimized logger methods with useMemo.
- Adjusted SimulationPlayer to conditionally render analysis components.
- Deleted index.css and removed its import from index.tsx.
- Cleaned up builder module by removing unused imports and optimizing state management.
- Removed savedTheme from Ground component.
- Changed log message from info to warning in Project component.
- Updated log color variables in SCSS files for better visibility and consistency.
- Added new log icons for success, error, info, and warning in LogIcons component.
- Created GetLogIcon utility to streamline log icon rendering based on log type.
This commit is contained in:
Vishnu
2025-05-03 15:20:52 +05:30
parent 2c37472928
commit 135633ef7a
20 changed files with 306 additions and 297 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,25 +1,7 @@
import React from "react";
import { HelpIcon } from "../icons/DashboardIcon";
import {
LogInfoIcon,
ErrorIcon,
WarningIcon,
} from "../icons/ExportCommonIcons"; // Adjust path as needed
import { useLogger } from "../ui/log/LoggerContext";
const getLogIcon = (type: string) => {
switch (type) {
case "info":
return <LogInfoIcon />;
case "error":
return <ErrorIcon />;
case "warning":
return <WarningIcon />;
case "log":
default:
return <LogInfoIcon />;
}
};
import { GetLogIcon } from "./getLogIcons";
const Footer: React.FC = () => {
const { logs, setIsLogListVisible } = useLogger();
@@ -43,18 +25,22 @@ const Footer: React.FC = () => {
</div>
<div className="logs-wrapper">
<div
className={`logs-detail ${lastLog ? lastLog.type : ""}`}
onClick={() => setIsLogListVisible(true)}
>
{lastLog ? (
<>
<span className="log-icon">{getLogIcon(lastLog.type)}</span>
<span className="log-message">{lastLog.message}</span>
</>
) : (
"No logs yet."
)}
<div className="bg-dummy left-top"></div>
<div className="bg-dummy right-bottom"></div>
<div className="log-container">
<button
className={`logs-detail ${lastLog ? lastLog.type : ""}`}
onClick={() => setIsLogListVisible(true)}
>
{lastLog ? (
<>
<span className="log-icon">{GetLogIcon(lastLog.type)}</span>
<span className="log-message">{lastLog.message}</span>
</>
) : (
"No logs yet."
)}
</button>
</div>
<div className="version">
V 0.01

19
app/src/components/footer/getLogIcons.tsx Normal file
View File

@@ -0,0 +1,19 @@
import { ErrorIcon, LogIcon, LogInfoIcon, SucessIcon, WarningIcon } from "../icons/LogIcons";
import { LogType } from "../ui/log/LoggerContext";
export const GetLogIcon = (type: LogType): JSX.Element => {
switch (type) {
case "info":
return <LogInfoIcon />;
case "log":
return <LogIcon />;
case "error":
return <ErrorIcon />;
case "warning":
return <WarningIcon />;
case "success":
return <SucessIcon />;
default:
return <LogIcon />;
}
};

91
app/src/components/icons/ExportCommonIcons.tsx
View File

@@ -826,7 +826,7 @@ export const LogListIcon = () => {
>
<path
d="M14.5 18.25H5.5M18.5 21.7272V19.3568H17.3829C16.8245 19.3568 16.375 18.9072 16.375 18.3489V18.08C16.375 17.5216 16.8246 17.0721 17.3829 17.0721H18.5V13.7318H17.2579C16.6995 13.7318 16.25 13.2822 16.25 12.7239V12.4551C16.25 11.8967 16.6996 11.4472 17.2579 11.4472H18.5V7.98185H17.2579C16.6995 7.98185 16.25 7.5323 16.25 6.97395V6.70515C16.25 6.14675 16.6996 5.69725 17.2579 5.69725H18.5V3.27065M14.5 12.75H5.5M12 7.24995H5.5M20.25 3.25H3.75C3.1977 3.25 2.75 3.6977 2.75 4.25V20.75C2.75 21.3023 3.1977 21.75 3.75 21.75H20.25C20.8023 21.75 21.25 21.3023 21.25 20.75V4.25C21.25 3.6977 20.8023 3.25 20.25 3.25Z"
stroke="#2B3344"
stroke="var(--text-color)"
strokeWidth="1.2"
strokeLinecap="round"
strokeLinejoin="round"
@@ -858,92 +858,3 @@ export const LogTickIcon = () => {
</svg>
);
};
export const LogInfoIcon = () => {
return (
<svg
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0.75 2.64438V7.41438C0.75 7.92094 0.951232 8.40675 1.30943 8.76495C1.66762 9.12314 2.15344 9.32438 2.66 9.32438H3.615V10.7544L6.5 9.32438H9.365C9.87156 9.32438 10.3574 9.12314 10.7156 8.76495C11.0738 8.40675 11.275 7.92094 11.275 7.41438V2.64438C11.275 2.13781 11.0738 1.652 10.7156 1.2938C10.3574 0.935607 9.87156 0.734375 9.365 0.734375H2.66C2.15344 0.734375 1.66762 0.935607 1.30943 1.2938C0.951232 1.652 0.75 2.13781 0.75 2.64438Z"
fill="#8E8E93"
/>
<path
d="M5.04492 6.94531H6.95492"
stroke="white"
strokeWidth="0.955"
strokeMiterlimit="10"
/>
<path
d="M5.04492 4.07812H5.99992V6.94313"
stroke="white"
strokeWidth="0.955"
strokeMiterlimit="10"
/>
<path
d="M5.52539 2.65625H6.47539"
stroke="white"
strokeWidth="0.955"
strokeMiterlimit="10"
/>
</svg>
);
};
export const WarningIcon = () => {
return (
<svg
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0.75 2.64438V7.41438C0.75 7.92094 0.951232 8.40675 1.30943 8.76495C1.66762 9.12314 2.15344 9.32438 2.66 9.32438H3.615V10.7544L6.5 9.32438H9.365C9.87156 9.32438 10.3574 9.12314 10.7156 8.76495C11.0738 8.40675 11.275 7.92094 11.275 7.41438V2.64438C11.275 2.13781 11.0738 1.652 10.7156 1.2938C10.3574 0.935607 9.87156 0.734375 9.365 0.734375H2.66C2.15344 0.734375 1.66762 0.935607 1.30943 1.2938C0.951232 1.652 0.75 2.13781 0.75 2.64438Z"
fill="#8E8E93"
/>
<path
d="M5.04492 6.94531H6.95492"
stroke="white"
strokeWidth="0.955"
strokeMiterlimit="10"
/>
<path
d="M5.04492 4.07812H5.99992V6.94313"
stroke="white"
strokeWidth="0.955"
strokeMiterlimit="10"
/>
<path
d="M5.52539 2.65625H6.47539"
stroke="white"
strokeWidth="0.955"
strokeMiterlimit="10"
/>
</svg>
);
};
export const ErrorIcon = () => {
return (
<svg
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M11 6C11 8.7614 8.7614 11 6 11C3.23857 11 1 8.7614 1 6C1 3.23857 3.23857 1 6 1C8.7614 1 11 3.23857 11 6ZM4.48482 4.48483C4.63126 4.33838 4.8687 4.33838 5.01515 4.48483L6 5.46965L6.9848 4.48484C7.13125 4.33839 7.3687 4.33839 7.51515 4.48484C7.6616 4.63128 7.6616 4.86872 7.51515 5.01515L6.5303 6L7.51515 6.9848C7.6616 7.13125 7.6616 7.3687 7.51515 7.51515C7.3687 7.6616 7.13125 7.6616 6.9848 7.51515L6 6.53035L5.01515 7.51515C4.86871 7.6616 4.63127 7.6616 4.48483 7.51515C4.33838 7.3687 4.33838 7.13125 4.48483 6.98485L5.46965 6L4.48482 5.01515C4.33837 4.86871 4.33837 4.63127 4.48482 4.48483Z"
fill="#ED5342"
/>
</svg>
);
};

98
app/src/components/icons/LogIcons.tsx Normal file
View File

@@ -0,0 +1,98 @@
export const LogInfoIcon = () => {
return (
<svg
width="14"
height="14"
viewBox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle cx="7" cy="7" r="4" fill="white" />
<path
fillRule="evenodd"
clipRule="evenodd"
d="M12.8327 6.99935C12.8327 10.221 10.221 12.8327 6.99935 12.8327C3.77769 12.8327 1.16602 10.221 1.16602 6.99935C1.16602 3.77769 3.77769 1.16602 6.99935 1.16602C10.221 1.16602 12.8327 3.77769 12.8327 6.99935ZM6.99935 10.3535C7.24097 10.3535 7.43685 10.1576 7.43685 9.91602V6.41602C7.43685 6.1744 7.24097 5.97852 6.99935 5.97852C6.75773 5.97852 6.56185 6.1744 6.56185 6.41602V9.91602C6.56185 10.1576 6.75773 10.3535 6.99935 10.3535ZM6.99935 4.08268C7.32152 4.08268 7.58268 4.34385 7.58268 4.66602C7.58268 4.98818 7.32152 5.24935 6.99935 5.24935C6.67717 5.24935 6.41602 4.98818 6.41602 4.66602C6.41602 4.34385 6.67717 4.08268 6.99935 4.08268Z"
fill="#1773fd"
/>
</svg>
);
};
export const WarningIcon = () => {
return (
<svg
width="14"
height="14"
viewBox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle cx="7" cy="7" r="5" fill="#FFFFFF" />
<path
d="M6.99935 1.16602C5.84563 1.16602 4.71781 1.50813 3.75853 2.14911C2.79924 2.79008 2.05157 3.70113 1.61005 4.76703C1.16854 5.83293 1.05302 7.00582 1.2781 8.13737C1.50318 9.26893 2.05876 10.3083 2.87456 11.1241C3.69037 11.9399 4.72977 12.4955 5.86132 12.7206C6.99288 12.9457 8.16577 12.8302 9.23167 12.3886C10.2976 11.9471 11.2086 11.1995 11.8496 10.2402C12.4906 9.28089 12.8327 8.15307 12.8327 6.99935C12.8327 6.2333 12.6818 5.47476 12.3886 4.76703C12.0955 4.0593 11.6658 3.41623 11.1241 2.87456C10.5825 2.33288 9.9394 1.9032 9.23167 1.61005C8.52394 1.3169 7.7654 1.16602 6.99935 1.16602ZM6.41602 4.08268C6.41602 3.92797 6.47748 3.7796 6.58687 3.6702C6.69627 3.56081 6.84464 3.49935 6.99935 3.49935C7.15406 3.49935 7.30243 3.56081 7.41183 3.6702C7.52123 3.7796 7.58268 3.92797 7.58268 4.08268V7.58268C7.58268 7.73739 7.52123 7.88576 7.41183 7.99516C7.30243 8.10456 7.15406 8.16601 6.99935 8.16601C6.84464 8.16601 6.69627 8.10456 6.58687 7.99516C6.47748 7.88576 6.41602 7.73739 6.41602 7.58268V4.08268ZM6.99935 11.0827C6.82629 11.0827 6.65712 11.0314 6.51323 10.9352C6.36933 10.8391 6.25718 10.7024 6.19096 10.5425C6.12473 10.3826 6.1074 10.2067 6.14116 10.037C6.17493 9.86724 6.25826 9.71133 6.38063 9.58896C6.503 9.46659 6.65891 9.38326 6.82865 9.34949C6.99838 9.31573 7.17431 9.33306 7.3342 9.39929C7.49408 9.46551 7.63074 9.57766 7.72689 9.72156C7.82303 9.86545 7.87435 10.0346 7.87435 10.2077C7.87435 10.4397 7.78216 10.6623 7.61807 10.8264C7.45398 10.9905 7.23142 11.0827 6.99935 11.0827Z"
fill="#EDAE01"
/>
</svg>
);
};
export const ErrorIcon = () => {
return (
<svg
width="14"
height="14"
viewBox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle cx="7" cy="7" r="5" fill="white" />
<path
d="M6.99935 1.16602C3.78518 1.16602 1.16602 3.78518 1.16602 6.99935C1.16602 10.2135 3.78518 12.8327 6.99935 12.8327C10.2135 12.8327 12.8327 10.2135 12.8327 6.99935C12.8327 3.78518 10.2135 1.16602 6.99935 1.16602ZM8.95935 8.34102C9.12852 8.51018 9.12852 8.79018 8.95935 8.95935C8.87185 9.04685 8.76102 9.08768 8.65018 9.08768C8.53935 9.08768 8.42852 9.04685 8.34102 8.95935L6.99935 7.61768L5.65768 8.95935C5.57018 9.04685 5.45935 9.08768 5.34852 9.08768C5.23768 9.08768 5.12685 9.04685 5.03935 8.95935C4.87018 8.79018 4.87018 8.51018 5.03935 8.34102L6.38102 6.99935L5.03935 5.65768C4.87018 5.48852 4.87018 5.20852 5.03935 5.03935C5.20852 4.87018 5.48852 4.87018 5.65768 5.03935L6.99935 6.38102L8.34102 5.03935C8.51018 4.87018 8.79018 4.87018 8.95935 5.03935C9.12852 5.20852 9.12852 5.48852 8.95935 5.65768L7.61768 6.99935L8.95935 8.34102Z"
fill="#FD4E22"
/>
</svg>
);
};
export const SucessIcon = () => {
return (
<svg
width="14"
height="14"
viewBox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle cx="7" cy="7" r="4" fill="white" />
<path
fillRule="evenodd"
clipRule="evenodd"
d="M12.8327 6.99935C12.8327 10.221 10.221 12.8327 6.99935 12.8327C3.77769 12.8327 1.16602 10.221 1.16602 6.99935C1.16602 3.77769 3.77769 1.16602 6.99935 1.16602C10.221 1.16602 12.8327 3.77769 12.8327 6.99935ZM9.35036 5.23166C9.52122 5.40251 9.52122 5.67952 9.35036 5.85036L6.43369 8.76702C6.26283 8.93788 5.98587 8.93788 5.81499 8.76702L4.64832 7.60036C4.47747 7.4295 4.47747 7.15253 4.64832 6.98167C4.81918 6.81082 5.09619 6.81082 5.26704 6.98167L6.12435 7.83894L7.42798 6.53531L8.73167 5.23166C8.90253 5.0608 9.1795 5.0608 9.35036 5.23166Z"
fill="#2EAC41"
/>
</svg>
);
};
export const LogIcon = () => {
return (
<svg
width="14"
height="14"
viewBox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7 1C5.81331 1 4.65328 1.35189 3.66658 2.01118C2.67989 2.67047 1.91085 3.60754 1.45673 4.7039C1.0026 5.80025 0.88378 7.00665 1.11529 8.17054C1.3468 9.33443 1.91825 10.4035 2.75736 11.2426C3.59648 12.0818 4.66557 12.6532 5.82946 12.8847C6.99335 13.1162 8.19975 12.9974 9.2961 12.5433C10.3925 12.0891 11.3295 11.3201 11.9888 10.3334C12.6481 9.34673 13 8.18669 13 7C13 6.21207 12.8448 5.43185 12.5433 4.7039C12.2417 3.97595 11.7998 3.31451 11.2426 2.75736C10.6855 2.20021 10.0241 1.75825 9.2961 1.45672C8.56815 1.15519 7.78793 1 7 1Z"
fill="#A73CF9"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M3.63086 10.3252C3.63086 9.95291 3.93268 9.6511 4.30498 9.6511H9.69798C10.0703 9.6511 10.3721 9.95291 10.3721 10.3252C10.3721 10.6975 10.0703 10.9993 9.69798 10.9993H4.30498C3.93268 10.9993 3.63086 10.6975 3.63086 10.3252ZM4.78165 3.78142C4.51838 3.51816 4.09156 3.51818 3.8283 3.78144C3.56504 4.04471 3.56505 4.47154 3.82832 4.73479L5.37406 6.28048L3.82832 7.82618C3.56505 8.08943 3.56504 8.51628 3.8283 8.77953C4.09156 9.04277 4.51838 9.04277 4.78165 8.77953L6.8041 6.75715C6.93056 6.63075 7.00155 6.45926 7.00155 6.28048C7.00155 6.1017 6.93056 5.93021 6.8041 5.80381L4.78165 3.78142Z"
fill="white"
/>
</svg>
);
};

10
app/src/components/ui/analysis/ProductionCapacity.tsx
View File

@@ -11,16 +11,6 @@ import { PowerIcon, ProductionCapacityIcon } from "../../icons/analysis";
ChartJS.register(LineElement, CategoryScale, LinearScale, PointElement);
// Helper function to generate random colors
const getRandomColor = () => {
const letters = "0123456789ABCDEF";
let color = "#";
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
};
const ThroughputSummary = () => {
// Define all data internally within the component
const timeRange = {

1
app/src/components/ui/analysis/ThroughputSummary.tsx
View File

@@ -1,4 +1,3 @@
import React, { useState } from "react";
import { ThroughputSummaryIcon } from "../../icons/analysis";
const ProductionCapacity = ({

38
app/src/components/ui/log/LogList.tsx
View File

@@ -1,34 +1,15 @@
// LogList.tsx
import React, { useState } from "react";
import {
LogListIcon,
LogInfoIcon,
WarningIcon,
ErrorIcon,
CloseIcon,
} from "../../icons/ExportCommonIcons"; // Adjust path as needed
import { LogListIcon, CloseIcon } from "../../icons/ExportCommonIcons"; // Adjust path as needed
import { useLogger } from "./LoggerContext";
import { GetLogIcon } from "../../footer/getLogIcons";
const LogList: React.FC = () => {
const { logs, clear, setIsLogListVisible } = useLogger();
const [selectedTab, setSelectedTab] = useState<
"all" | "info" | "warning" | "error" | "log"
"all" | "info" | "warning" | "error" | "log" | "success"
>("all");
const getLogIcon = (type: string) => {
switch (type) {
case "info":
return <LogInfoIcon />;
case "error":
return <ErrorIcon />;
case "warning":
return <WarningIcon />;
case "log":
default:
return <LogInfoIcon />;
}
};
const formatTimestamp = (date: Date) => new Date(date).toLocaleTimeString();
const filteredLogs =
@@ -55,7 +36,11 @@ const LogList: React.FC = () => {
</div>
<div className="head">Log List</div>
</div>
<button className="close" onClick={() => setIsLogListVisible(false)}>
<button
title="close-btn"
className="close"
onClick={() => setIsLogListVisible(false)}
>
<CloseIcon />
</button>
</div>
@@ -63,13 +48,14 @@ const LogList: React.FC = () => {
{/* Tabs */}
<div className="log-nav-wrapper">
{["all", "info", "warning", "error"].map((type) => (
<div
<button
title="log-type"
key={type}
className={`log-nav ${selectedTab === type ? "active" : ""}`}
onClick={() => setSelectedTab(type as any)}
>
{`${type.charAt(0).toUpperCase() + type.slice(1)} Logs`}
</div>
</button>
))}
</div>
@@ -77,7 +63,7 @@ const LogList: React.FC = () => {
<div className="log-entry-wrapper">
{filteredLogs.map((log) => (
<div key={log.id} className={`log-entry ${log.type}`}>
<div className="log-icon">{getLogIcon(log.type)}</div>
<div className="log-icon">{GetLogIcon(log.type)}</div>
<div className="log-entry-message-container">
<div className="log-entry-message">{log.message}</div>
<div className="message-time">

14
app/src/components/ui/log/LoggerContext.tsx
View File

@@ -1,6 +1,6 @@
import React, { createContext, useContext, useState, useCallback } from "react";
import React, { createContext, useContext, useState, useCallback, useMemo } from "react";
export type LogType = "log" | "info" | "warning" | "error";
export type LogType = "log" | "info" | "warning" | "error" | "success";
export interface LogEntry {
id: string;
@@ -18,6 +18,7 @@ interface LoggerContextValue {
info: (message: string) => void;
warn: (message: string) => void;
error: (message: string) => void;
success: (message: string) => void;
clear: () => void;
}
@@ -47,7 +48,7 @@ export const LoggerProvider: React.FC<{ children: React.ReactNode }> = ({
[generateId]
);
const loggerMethods: LoggerContextValue = {
const loggerMethods: LoggerContextValue = useMemo(() => ({
logs,
setLogs,
isLogListVisible,
@@ -56,10 +57,9 @@ export const LoggerProvider: React.FC<{ children: React.ReactNode }> = ({
info: (message: string) => addLog("info", message),
warn: (message: string) => addLog("warning", message),
error: (message: string) => addLog("error", message),
clear: () => {
setLogs([]);
},
};
success: (message: string) => addLog("success", message),
clear: () => setLogs([]),
}), [logs, setLogs, isLogListVisible, setIsLogListVisible, addLog]);
return (
<LoggerContext.Provider value={loggerMethods}>

14
app/src/components/ui/simulation/simulationPlayer.tsx
View File

@@ -368,13 +368,15 @@ const SimulationPlayer: React.FC = () => {
)}
</div>
</div>
<div className="analysis">
<div className="analysis-wrapper">
<ProductionCapacity />
<ThroughputSummary />
{subModule === "analysis" && (
<div className="analysis">
<div className="analysis-wrapper">
<ProductionCapacity />
<ThroughputSummary />
</div>
<ROISummary />
</div>
<ROISummary />
</div>
)}
</>
);
};

13
app/src/index.css
View File

@@ -1,13 +0,0 @@
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}

1
app/src/index.tsx
View File

@@ -1,6 +1,5 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './app';
import reportWebVitals from './reportWebVitals';

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

@@ -22,7 +22,6 @@ import {
useDeletePointOrLine,
useMovePoint,
useActiveLayer,
useSocketStore,
useWallVisibility,
useRoofVisibility,
useShadows,
@@ -48,15 +47,11 @@ import FloorGroupAilse from "./groups/floorGroupAisle";
import Draw from "./functions/draw";
import WallsAndWallItems from "./groups/wallsAndWallItems";
import Ground from "../scene/environment/ground";
// import ZoneGroup from "../groups/zoneGroup1";
import { findEnvironment } from "../../services/factoryBuilder/environment/findEnvironment";
import Layer2DVisibility from "./geomentries/layers/layer2DVisibility";
import DrieHtmlTemp from "../visualization/mqttTemp/drieHtmlTemp";
import ZoneGroup from "./groups/zoneGroup";
import useModuleStore from "../../store/useModuleStore";
import MeasurementTool from "../scene/tools/measurementTool";
import NavMesh from "../simulation/vehicle/navMesh/navMesh";
import ProductionCapacity from "../../components/ui/analysis/ThroughputSummary";
export default function Builder() {
const state = useThree<Types.ThreeState>(); // Importing the state from the useThree hook, which contains the scene, camera, and other Three.js elements.
@@ -113,21 +108,19 @@ export default function Builder() {
const [selectedItemsIndex, setSelectedItemsIndex] =
useState<Types.Number | null>(null); // State for tracking the index of the selected item.
const { activeLayer, setActiveLayer } = useActiveLayer(); // State that changes based on which layer the user chooses in Layers.jsx.
const { toggleView, setToggleView } = useToggleView(); // State for toggling between 2D and 3D.
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 { movePoint, setMovePoint } = useMovePoint(); // State that stores a boolean which represents whether the move mode is active or not.
const { deletePointOrLine, setDeletePointOrLine } = useDeletePointOrLine();
const { socket } = useSocketStore();
const { roofVisibility, setRoofVisibility } = useRoofVisibility();
const { wallVisibility, setWallVisibility } = useWallVisibility();
const { shadows, setShadows } = useShadows();
const { renderDistance, setRenderDistance } = useRenderDistance();
const { limitDistance, setLimitDistance } = useLimitDistance();
const { updateScene, setUpdateScene } = useUpdateScene();
const { walls, setWalls } = useWalls();
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();
const { setShadows } = useShadows();
const { setRenderDistance } = useRenderDistance();
const { setLimitDistance } = useLimitDistance();
const { setUpdateScene } = useUpdateScene();
const { setWalls } = useWalls();
const { refTextupdate, setRefTextUpdate } = useRefTextUpdate();
const { activeModule } = useModuleStore();
// const loader = new GLTFLoader();
// const dracoLoader = new DRACOLoader();

1
app/src/modules/scene/environment/ground.tsx
View File

@@ -3,7 +3,6 @@ import * as CONSTANTS from "../../../types/world/worldConstants";
const Ground = ({ grid, plane }: any) => {
const { toggleView } = useToggleView();
const savedTheme: string | null = localStorage.getItem("theme");
const { planeValue, gridValue } = useTileDistance();
return (

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

@@ -58,7 +58,7 @@ const Project: React.FC = () => {
setOrganization(Organization);
setUserName(name);
}
echo.info("Log in success full");
echo.warn("Log in success full");
} else {
navigate("/");
}

18
app/src/styles/abstracts/variables.scss
View File

@@ -115,17 +115,23 @@ $color5: #c7a8ff;
// log indication colors
// ------------ text -------------
$log-default-text-color: #6f42c1;
$log-info-text-color: #488ef6;
$log-info-text-color: #1773fd;
$log-warn-text-color: #f3a50c;
$log-error-text-color: #f65648;
$log-success-text-color: #43c06d;
$log-error-text-color: #fc230f;
$log-success-text-color: #23a84f;
// ----------- dark ---------------
$log-default-text-color-dark: #b18ef1;
$log-info-text-color-dark: #7eb0fa;
$log-warn-text-color-dark: #ffaa00;
$log-error-text-color-dark: #ff887d;
$log-success-text-color-dark: #43ff81;
// ------------ background -------------
$log-default-backgroung-color: #6e42c133;
$log-info-background-color: #488ef633;
$log-info-background-color: #1773fd5d;
$log-warn-background-color: #f3a50c33;
$log-error-background-color: #f6564833;
$log-success-background-color: #43c06d33;
$log-error-background-color: #fc230f33;
$log-success-background-color: #0ef75b33;
// old variables
$accent-color: #6f42c1;

44
app/src/styles/base/base.scss
View File

@@ -35,6 +35,18 @@
--icon-default-color: #{$icon-default-color};
--icon-default-color-active: #{$icon-default-color-active};
// log colors
--default-text-color: #{$log-default-text-color};
--log-info-text-color: #{$log-info-text-color};
--log-warn-text-color: #{$log-warn-text-color};
--log-error-text-color: #{$log-error-text-color};
--log-success-text-color: #{$log-success-text-color};
--log-default-background-color: #{$log-default-backgroung-color};
--log-info-background-color: #{$log-info-background-color};
--log-warn-background-color: #{$log-warn-background-color};
--log-error-background-color: #{$log-error-background-color};
--log-success-background-color: #{$log-success-background-color};
// old colors
--accent-color: #{$accent-color};
--accent-gradient-color: #{$acent-gradient};
@@ -85,6 +97,18 @@
--icon-default-color: #{$icon-default-color-dark};
--icon-default-color-active: #{$icon-default-color-active-dark};
// log colors
--default-text-color: #{$log-default-text-color-dark};
--log-info-text-color: #{$log-info-text-color-dark};
--log-warn-text-color: #{$log-warn-text-color-dark};
--log-error-text-color: #{$log-error-text-color-dark};
--log-success-text-color: #{$log-success-text-color-dark};
--log-default-background-color: #{$log-default-backgroung-color};
--log-info-background-color: #{$log-info-background-color};
--log-warn-background-color: #{$log-warn-background-color};
--log-error-background-color: #{$log-error-background-color};
--log-success-background-color: #{$log-success-background-color};
// old colors
--accent-color: #{$accent-color-dark};
--accent-gradient-color: #{$acent-gradient-dark};
@@ -115,7 +139,6 @@
}
body {
background: var(--background-color);
--font-size-tiny: #{$tiny};
--font-size-small: #{$small};
--font-size-regular: #{$regular};
@@ -133,23 +156,6 @@ body {
--color3: #{$color3};
--color4: #{$color4};
--color5: #{$color5};
--default-text-color: #{$log-default-text-color};
--log-info-text-color: #{$log-info-text-color};
--log-warn-text-color: #{$log-warn-text-color};
--log-error-text-color: #{$log-error-text-color};
--log-success-text-color: #{$log-success-text-color};
// ------------ background -------------
--log-default-background-color: #{$log-default-backgroung-color};
--log-info-background-color: #{$log-info-background-color};
--log-warn-background-color: #{$log-warn-background-color};
--log-error-background-color: #{$log-error-background-color};
--log-success-background-color: #{$log-success-background-color};
}
::-webkit-scrollbar {
@@ -173,4 +179,4 @@ body {
::-webkit-scrollbar-corner {
background: transparent;
}
}

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

@@ -23,6 +23,7 @@
padding: 3px 6px;
border-radius: 12px;
color: var(--text-color);
backdrop-filter: blur(14px);
.selector {
color: var(--text-color);
@@ -33,70 +34,51 @@
.logs-wrapper {
display: flex;
gap: 6px;
position: relative;
// dummy
.bg-dummy{
background: var(--background-color-solid);
position: absolute;
z-index: -1;
}
.bg-dummy.left-top{
top: 1px;
left: 4px;
width: 60%;
height: 16px;
border-radius: 20px;
}
.bg-dummy.right-bottom{
right: 68px;
bottom: 0;
width: 20%;
height: 100%;
border-radius: 50%;
}
.log-container {
background: var(--background-color);
backdrop-filter: blur(20px);
border-radius: 12px;
@include flex-center;
overflow: hidden;
}
.logs-detail,
.version {
@include flex-center;
border-radius: 12px;
background: var(--background-color);
padding: 3px 6px;
height: 100%;
color: var(--text-color);
display: flex;
align-items: center;
gap: 6px;
}
.log {
background-color: var(--log-default-background-color);
.log-message {
color: var(--default-text-color);
}
}
.info {
background-color: var(--log-info-background-color);
.log-message {
color: var(--log-info-text-color);
}
}
.error {
background-color: var(--log-error-background-color);
.log-message {
color: var(--log-error-text-color);
}
}
.warning {
background-color: var(--log-warn-background-color);
.log-message {
color: var(--log-warn-text-color);
}
}
.success {
background-color: var(--log-success-background-color);
.log-message {
color: var(--log-success-text-color);
}
}
.logs-detail {
padding: 2px 12px;
cursor: pointer;
outline: 0 solid var(--border-color);
outline-offset: -1px;
.log-icon {
@include flex-center;
}
@@ -110,13 +92,51 @@
}
.version {
background: var(--background-color);
font-size: var(--font-size-tiny);
display: flex;
gap: 6px;
.icon {
@include flex-center;
}
}
.log {
background: var(--log-default-background-color);
outline-color: var(--default-text-color);
.log-message {
color: var(--default-text-color);
}
}
.info {
background: var(--log-info-background-color);
outline-color: var(--log-info-text-color);
.log-message {
color: var(--log-info-text-color);
}
}
.error {
background: var(--log-error-background-color);
outline-color: var(--log-error-text-color);
.log-message {
color: var(--log-error-text-color);
}
}
.warning {
background: var(--log-warn-background-color);
outline-color: var(--log-warn-text-color);
.log-message {
color: var(--log-warn-text-color);
}
}
.success {
background: var(--log-success-background-color);
.log-message {
color: var(--log-success-text-color);
}
}
}
}
}

27
app/src/styles/components/logs/logs.scss
View File

@@ -5,14 +5,11 @@
width: 100vw;
height: 100vh;
background: var(--background-color-secondary);
@include flex-center;
.log-list-wrapper {
height: 50%;
min-width: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 60%;
min-width: 55%;
z-index: 5;
background: var(--background-color);
padding: 14px 12px;
@@ -31,6 +28,10 @@
display: flex;
align-items: center;
gap: 6px;
.icon{
@include flex-center;
scale: .8;
}
}
.close {
@@ -38,9 +39,13 @@
height: 28px;
width: 28px;
cursor: pointer;
border-radius: #{$border-radius-medium};
svg {
scale: 1.6;
}
&:hover{
background: var(--background-color);
}
}
}
@@ -60,25 +65,26 @@
}
.log-entry-wrapper {
height: 100%;
height: calc(100% - 80px);
display: flex;
flex-direction: column;
gap: 4px;
background: var(--background-color);
padding: 18px 10px;
padding: 10px;
border-radius: 16px;
outline: 1px solid var(--border-color);
outline-offset: -1px;
overflow: auto;
.log-entry {
padding: 4px;
border-radius: 4px;
font-size: var(--font-size-small);
display: flex;
align-items: center;
gap: 6px;
.log-icon {
height: 24px;
width: 24px;
@include flex-center;
}
.log-entry-message-container {
@@ -90,6 +96,7 @@
font-weight: 300;
opacity: 0.8;
text-wrap: nowrap;
height: 100%;
}
.log-entry-message{
width: 100%;

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

@@ -36,6 +36,7 @@
width: 0;
opacity: 0;
animation: expandWidth 0.2s ease-in-out forwards;
will-change: width;
.tool-button {
@include flex-center;

4
app/src/styles/pages/userAuth.scss
View File

@@ -89,7 +89,7 @@
border-radius: #{$border-radius-extra-large};
background: var(--background-color);
font-size: 14px;
color: var(--input-text-color);
color: var(--text-button-color);
&:focus {
border-color: var(--accent-color);
@@ -121,7 +121,7 @@
width: 100%;
padding: 10px;
background: var(--background-color-button);
color: var(--background-color);
color: var(--text-button-color);
font-size: 14px;
border: none;
outline: none;