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

feat: update color scheme and layout adjustments across components

This commit is contained in:
Vishnu 2025-06-16 12:14:16 +05:30
parent 29de49443a
commit 197554ffa8
13 changed files with 370 additions and 320 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
app/src/components/layout/scenes/ComparisonScene.tsx
View File

@ -1,14 +1,21 @@
import { useProductContext } from '../../../modules/simulation/products/productContext' import { useProductContext } from "../../../modules/simulation/products/productContext";
import RegularDropDown from '../../ui/inputs/RegularDropDown'; import RegularDropDown from "../../ui/inputs/RegularDropDown";
import { useCompareProductDataStore, useLoadingProgress, useSaveVersion } from '../../../store/builder/store'; import {
import useModuleStore from '../../../store/useModuleStore'; useCompareProductDataStore,
import CompareLayOut from '../../ui/compareVersion/CompareLayOut'; useLoadingProgress,
import ComparisonResult from '../../ui/compareVersion/ComparisonResult'; useSaveVersion,
import { useComparisonProduct, useMainProduct } from '../../../store/simulation/useSimulationStore'; } from "../../../store/builder/store";
import { usePlayButtonStore } from '../../../store/usePlayButtonStore'; import useModuleStore from "../../../store/useModuleStore";
import { useEffect, useState } from 'react'; import CompareLayOut from "../../ui/compareVersion/CompareLayOut";
import { useDuplicateProductStore } from '../../../modules/duplicate/duplicateStores/duplicateProductStore'; import ComparisonResult from "../../ui/compareVersion/ComparisonResult";
import ProductsDuplicate from '../../../modules/duplicate/duplicateSimulation/duplicateProduct/duplicateProduct'; import {
useComparisonProduct,
useMainProduct,
} from "../../../store/simulation/useSimulationStore";
import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
import { useEffect, useState } from "react";
import { useDuplicateProductStore } from "../../../modules/duplicate/duplicateStores/duplicateProductStore";
import ProductsDuplicate from "../../../modules/duplicate/duplicateSimulation/duplicateProduct/duplicateProduct";
function ComparisonScene() { function ComparisonScene() {
const { isPlaying } = usePlayButtonStore(); const { isPlaying } = usePlayButtonStore();
@ -20,8 +27,10 @@ function ComparisonScene() {
const { comparisonProduct, setComparisonProduct } = useComparisonProduct(); const { comparisonProduct, setComparisonProduct } = useComparisonProduct();
const { mainProduct } = useMainProduct(); const { mainProduct } = useMainProduct();
const { loadingProgress } = useLoadingProgress(); const { loadingProgress } = useLoadingProgress();
const { compareProductsData, setCompareProductsData } = useCompareProductDataStore(); const { compareProductsData, setCompareProductsData } =
const [shouldShowComparisonResult, setShouldShowComparisonResult] = useState(false); useCompareProductDataStore();
const [shouldShowComparisonResult, setShouldShowComparisonResult] =
useState(false);
const handleSelectLayout = (option: string) => { const handleSelectLayout = (option: string) => {
const product = products.find((product) => product.productName === option); const product = products.find((product) => product.productName === option);
@ -62,39 +71,47 @@ function ComparisonScene() {
setCompareProductsData([ setCompareProductsData([
{ {
"productUuid": "15193386-ec58-4ec6-8a92-e665a39eebf1", productUuid: "70a4d942-f201-4364-bc19-de98ed41500a",
"productName": "Product 1", productName: "Product 1",
"simulationData": { simulationData: {
"roiPercentage": 273.9428571428571, roiPercentage: 273.9428571428571,
"paybackPeriod": 1.8251981643721318, paybackPeriod: 1.8251981643721318,
"netProfit": 9588000, netProfit: 9588000,
"productionCapacity": 4508.5, productionCapacity: 4508.5,
"machineIdleTime": 1450, machineIdleTime: 1450,
"machineActiveTime": 430, machineActiveTime: 430,
"throughputData": 180.34 throughputData: 180.34,
} },
}, },
{ {
"productUuid": "15193386-ec58-4ec6-8a92-e665a39eebf2", productUuid: "70a4d942-f201-4364-bc19-de98ed41500b",
"productName": "Product 2", productName: "Product 2",
"simulationData": { simulationData: {
"roiPercentage": 281.7214285714286, roiPercentage: 281.7214285714286,
"paybackPeriod": 1.7748028701097842, paybackPeriod: 1.7748028701097842,
"netProfit": 9860250, netProfit: 9860250,
"productionCapacity": 4599.25, productionCapacity: 4599.25,
"machineIdleTime": 1885, machineIdleTime: 1885,
"machineActiveTime": 646, machineActiveTime: 646,
"throughputData": 183.97 throughputData: 183.97,
} },
} },
]) ]);
}, [compareProductsData]); // ✅ Runs only once on mount }, [compareProductsData]); // ✅ Runs only once on mount
useEffect(() => { useEffect(() => {
if (mainProduct && comparisonProduct && compareProductsData.length > 1) { if (mainProduct && comparisonProduct && compareProductsData.length > 1) {
const hasMain = compareProductsData.some(val => val.productUuid === mainProduct.productUuid); const hasMain = compareProductsData.some(
const hasComparison = compareProductsData.some(val => val.productUuid === comparisonProduct.productUuid); (val) => val.productUuid === mainProduct.productUuid
if (hasMain && hasComparison && mainProduct.productUuid !== comparisonProduct.productUuid) { );
const hasComparison = compareProductsData.some(
(val) => val.productUuid === comparisonProduct.productUuid
);
if (
hasMain &&
hasComparison &&
mainProduct.productUuid !== comparisonProduct.productUuid
) {
setShouldShowComparisonResult(true); setShouldShowComparisonResult(true);
} else { } else {
setShouldShowComparisonResult(false); setShouldShowComparisonResult(false);
@ -108,7 +125,7 @@ function ComparisonScene() {
<> <>
{isVersionSaved && activeModule === "simulation" && selectedProduct && ( {isVersionSaved && activeModule === "simulation" && selectedProduct && (
<> <>
{comparisonProduct && !isPlaying && {comparisonProduct && !isPlaying && (
<div className="initial-selectLayout-wrapper"> <div className="initial-selectLayout-wrapper">
<RegularDropDown <RegularDropDown
header={selectedProduct.productName} header={selectedProduct.productName}
@ -117,16 +134,18 @@ function ComparisonScene() {
search={false} search={false}
/> />
</div> </div>
} )}
<CompareLayOut /> <CompareLayOut />
<ProductsDuplicate projectId={"684bcd620a64bc2a815a88d6"} /> <ProductsDuplicate projectId={"6842c683d4c6ce57664da93b"} />
{(shouldShowComparisonResult && !loadingProgress) && <ComparisonResult />} {shouldShowComparisonResult && !loadingProgress && (
<ComparisonResult />
)}
</> </>
)} )}
</> </>
) );
} }
export default ComparisonScene; export default ComparisonScene;

4
app/src/components/layout/scenes/MainScene.tsx
View File

@ -120,9 +120,7 @@ function MainScene() {
</> </>
)} )}
<div <div
className={`scene-container${ className={`scene-container`}
comparisonProduct?.productUuid ? " half-view" : ""
}`}
id="work-space-three-d-canvas" id="work-space-three-d-canvas"
style={{ style={{
height: isPlaying || activeModule !== "visualization" ? "100vh" : "", height: isPlaying || activeModule !== "visualization" ? "100vh" : "",

5
app/src/components/ui/compareVersion/ComparisonResult.tsx
View File

@ -53,8 +53,8 @@ const ComparisonResult = () => {
); );
// Color palette // Color palette
const purpleDark = "#6a0dad"; const purpleDark = "#3466F1";
const purpleLight = "#b19cd9"; const purpleLight = "#FFC527";
const throughputData = { const throughputData = {
labels: [comparedProducts[0]?.productName, comparedProducts[1]?.productName], labels: [comparedProducts[0]?.productName, comparedProducts[1]?.productName],
@ -71,7 +71,6 @@ const ComparisonResult = () => {
], ],
}; };
const cycleTimePieData = { const cycleTimePieData = {
labels: [comparedProducts[0]?.productName, comparedProducts[1]?.productName], labels: [comparedProducts[0]?.productName, comparedProducts[1]?.productName],
datasets: [ datasets: [

6
app/src/components/ui/compareVersion/result-card/EnergyUsage.tsx
View File

@ -22,7 +22,7 @@ ChartJS.register(
const EnergyUsage = ({comparedProducts}:any) => { const EnergyUsage = ({comparedProducts}:any) => {
const data = useMemo(() => { const data = useMemo(() => {
const randomizeData = () => const randomizeData = () =>
Array.from({ length: 5 }, () => Math.floor(Math.random() * (2000 - 300 + 1)) + 300); Array.from({ length: 7 }, () => Math.floor(Math.random() * 10));
return { return {
labels: ["Mon", "Tue", "Wed", "Thu", "Fri"], labels: ["Mon", "Tue", "Wed", "Thu", "Fri"],
@ -30,7 +30,7 @@ const EnergyUsage = ({comparedProducts}:any) => {
{ {
label: "Simulation 1", label: "Simulation 1",
data: randomizeData(), data: randomizeData(),
borderColor: "#6a0dad", borderColor: "#3466F1",
fill: false, fill: false,
tension: 0.5, // More curved line tension: 0.5, // More curved line
pointRadius: 0, // Remove point indicators pointRadius: 0, // Remove point indicators
@ -38,7 +38,7 @@ const EnergyUsage = ({comparedProducts}:any) => {
{ {
label: "Simulation 2", label: "Simulation 2",
data: randomizeData(), data: randomizeData(),
borderColor: "#b19cd9", borderColor: "#FFC527",
fill: false, fill: false,
tension: 0.5, tension: 0.5,
pointRadius: 0, pointRadius: 0,

2
app/src/modules/duplicate/duplicateSetup/postProcessingDuplicate.tsx
View File

@ -5,7 +5,7 @@ export default function PostProcessingDuplicate() {
return ( return (
<EffectComposer autoClear={false}> <EffectComposer autoClear={false}>
<N8AO <N8AO
color="black" color="#323232"
aoRadius={20} aoRadius={20}
intensity={7} intensity={7}
distanceFalloff={4} distanceFalloff={4}

4
app/src/modules/duplicate/duplicateSimulation/duplicatePoint/duplicatePoint.tsx
View File

@ -1,10 +1,10 @@
import * as THREE from "three"; import * as THREE from "three";
import { useEventsStore } from "../../../../store/simulation/useEventsStore";
import useModuleStore from "../../../../store/useModuleStore"; import useModuleStore from "../../../../store/useModuleStore";
import { usePlayButtonStore } from "../../../../store/usePlayButtonStore"; import { usePlayButtonStore } from "../../../../store/usePlayButtonStore";
import { useDuplicateEventsStore } from "../../duplicateStores/duplicateEventStore";
function PointsDuplicate() { function PointsDuplicate() {
const { events } = useEventsStore(); const { events } = useDuplicateEventsStore();
const { activeModule } = useModuleStore(); const { activeModule } = useModuleStore();
const { isPlaying } = usePlayButtonStore(); const { isPlaying } = usePlayButtonStore();

1
app/src/modules/duplicate/duplicateSimulation/duplicateProduct/duplicateProduct.tsx
View File

@ -1,6 +1,5 @@
import * as THREE from 'three'; import * as THREE from 'three';
import { useEffect } from 'react'; import { useEffect } from 'react';
import { upsertProductOrEventApi } from '../../../../services/simulation/products/UpsertProductOrEventApi';
import { getAllProductsApi } from '../../../../services/simulation/products/getallProductsApi'; import { getAllProductsApi } from '../../../../services/simulation/products/getallProductsApi';
import { usePlayButtonStore, useResetButtonStore } from '../../../../store/usePlayButtonStore'; import { usePlayButtonStore, useResetButtonStore } from '../../../../store/usePlayButtonStore';
import { useSceneContext } from '../../../scene/sceneContext'; import { useSceneContext } from '../../../scene/sceneContext';

13
app/src/modules/duplicate/duplicateSimulation/duplicateSimulation.tsx
View File

@ -1,18 +1,13 @@
import React from 'react' import PointsDuplicate from "./duplicatePoint/duplicatePoint";
import ProductsDuplicate from './duplicateProduct/duplicateProduct' import TriggerDuplicate from "./duplicateTrigger/duplicateTrigger";
import PointsDuplicate from './duplicatePoint/duplicatePoint'
import TriggerDuplicate from './duplicateTrigger/duplicateTrigger'
function SimulationDuplicate() { function SimulationDuplicate() {
return ( return (
<> <>
<PointsDuplicate /> <PointsDuplicate />
<TriggerDuplicate /> <TriggerDuplicate />
</> </>
) );
} }
export default SimulationDuplicate export default SimulationDuplicate;

4
app/src/modules/duplicate/duplicateSimulation/duplicateTrigger/duplicateTrigger.tsx
View File

@ -147,7 +147,7 @@ function TriggerDuplicate() {
start={startPoint.toArray()} start={startPoint.toArray()}
end={endPoint.toArray()} end={endPoint.toArray()}
mid={midPoint.toArray()} mid={midPoint.toArray()}
color={"#c4abf1"} color={"#FFC527"}
lineWidth={4} lineWidth={4}
dashed={true} dashed={true}
dashSize={0.75} dashSize={0.75}
@ -157,7 +157,7 @@ function TriggerDuplicate() {
); );
})} })}
<Arrows connections={connections} color={'#c4abf1'} /> <Arrows connections={connections} color={'#FFC527'} />
</group> </group>
); );
} }

11
app/src/modules/duplicate/sceneDuplicate.tsx
View File

@ -12,7 +12,7 @@ import { Color } from "three";
import SimulationDuplicate from "./duplicateSimulation/duplicateSimulation"; import SimulationDuplicate from "./duplicateSimulation/duplicateSimulation";
export default function DuplicateScene() { export default function DuplicateScene() {
const projectId = "684bcd620a64bc2a815a88d6"; const projectId = "6842c683d4c6ce57664da93b";
return ( return (
<Canvas <Canvas
@ -21,7 +21,7 @@ export default function DuplicateScene() {
color="#aaaa" color="#aaaa"
eventPrefix="client" eventPrefix="client"
style={{ style={{
pointerEvents: 'none' pointerEvents: "none",
}} }}
onContextMenu={(e) => { onContextMenu={(e) => {
e.preventDefault(); e.preventDefault();
@ -29,9 +29,12 @@ export default function DuplicateScene() {
onCreated={(e) => { onCreated={(e) => {
e.scene.background = new Color(0x19191d); e.scene.background = new Color(0x19191d);
}} }}
gl={{ powerPreference: "high-performance", antialias: true, preserveDrawingBuffer: true }} gl={{
powerPreference: "high-performance",
antialias: true,
preserveDrawingBuffer: true,
}}
> >
<Sun /> <Sun />
<Shadows /> <Shadows />

2
app/src/modules/simulation/events/arrows/arrows.tsx
View File

@ -150,7 +150,7 @@ export function ArrowOnQuadraticBezier({
start, start,
mid, mid,
end, end,
color = "#42a5f5", color = "#3466F1",
}: { }: {
start: number[]; start: number[];
mid: number[]; mid: number[];

6
app/src/modules/simulation/events/triggerConnections/triggerConnector.tsx
View File

@ -421,7 +421,7 @@ function TriggerConnector() {
end: endPoint, end: endPoint,
}); });
setHelperLineColor(sphereIntersects.length > 0 ? "#6cf542" : "red"); setHelperLineColor(sphereIntersects.length > 0 ? "#3466F1" : "red");
} else { } else {
setCurrentLine(null); setCurrentLine(null);
} }
@ -477,7 +477,7 @@ function TriggerConnector() {
start={startPoint.toArray()} start={startPoint.toArray()}
end={endPoint.toArray()} end={endPoint.toArray()}
mid={midPoint.toArray()} mid={midPoint.toArray()}
color={toolMode === '3D-Delete' && hoveredLineKey === connection.id ? "red" : "#6f42c1"} color={toolMode === '3D-Delete' && hoveredLineKey === connection.id ? "red" : "#42a5f5"}
lineWidth={4} lineWidth={4}
dashed={toolMode === '3D-Delete' && hoveredLineKey === connection.id ? false : true} dashed={toolMode === '3D-Delete' && hoveredLineKey === connection.id ? false : true}
dashSize={0.75} dashSize={0.75}
@ -496,7 +496,7 @@ function TriggerConnector() {
); );
})} })}
<Arrows connections={connections} color="#6f42c1"/> <Arrows connections={connections} color="#42a5f5"/>
{currentLine && ( {currentLine && (
<> <>

67
app/src/styles/layout/compareLayout.scss
View File

@ -8,7 +8,12 @@
z-index: 10; z-index: 10;
.regularDropdown-container { .regularDropdown-container {
background: var(--background-color); background: #FFC527;
.key,
.icon {
color: #323232;
font-weight: 600;
}
} }
} }
@ -19,7 +24,11 @@
z-index: 10; z-index: 10;
.regularDropdown-container { .regularDropdown-container {
background: var(--background-color); background: #3466f1;
.key,
.icon {
color: #fff;
}
} }
} }
@ -55,8 +64,8 @@
cursor: ew-resize; cursor: ew-resize;
transition: transform 0.1s ease; transition: transform 0.1s ease;
z-index: 100; z-index: 100;
// pointer-events: all; pointer-events: all;
opacity: 0; // opacity: 0;
} }
.chooseLayout-container { .chooseLayout-container {
@ -71,7 +80,7 @@
.compare-layout-canvas-container { .compare-layout-canvas-container {
position: absolute; position: absolute;
height: 100vh; height: 100vh;
width: 50vw; width: 100vw;
top: 0; top: 0;
right: 0; right: 0;
} }
@ -265,7 +274,7 @@
.metric-value { .metric-value {
padding-top: 6px; padding-top: 6px;
font-size: var(--font-size-xlarge); font-size: var(--font-size-xlarge);
color: var(--background-color-accent); color: #14ca44;
font-weight: 600; font-weight: 600;
} }
} }
@ -401,9 +410,9 @@
} }
.simulation-tag { .simulation-tag {
background: var(--background-color-button); background: #FFC527;
color: #323232;
color: var(--icon-default-color-active); font-weight: 600;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
right: 0; right: 0;
@ -431,7 +440,7 @@
.energy-usage-wrapper { .energy-usage-wrapper {
.value { .value {
padding-top: 25px; padding-top: 100px;
font-size: var(--font-size-xxxlarge); font-size: var(--font-size-xxxlarge);
color: var(--background-color-accent); color: var(--background-color-accent);
} }
@ -439,7 +448,7 @@
.simulation-details { .simulation-details {
position: absolute; position: absolute;
bottom: 12px; top: 12px;
right: 12px; right: 12px;
.simulation-wrapper { .simulation-wrapper {
@ -447,6 +456,16 @@
align-items: center; align-items: center;
gap: 6px; gap: 6px;
&.sim-1 {
.icon {
background-color: #3466f1;
}
}
&.sim-2 {
.icon {
background-color: #FFC527;
}
}
.icon { .icon {
width: 20px; width: 20px;
height: 20px; height: 20px;
@ -457,9 +476,10 @@
} }
.chart { .chart {
height: 80px;
width: 90%; width: 90%;
position: absolute; position: absolute;
top: 10px; top: 40px;
left: 0; left: 0;
} }
} }
@ -476,9 +496,16 @@
.layer-wrapper { .layer-wrapper {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
&:first-child {
&:last-child { .key {
justify-content: end; color: #3466f1;
}
}
&:nth-child(2) {
// justify-content: end;
.key {
color: #FFC527;
}
} }
} }
@ -516,6 +543,16 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 4px; gap: 4px;
&:first-child {
.layer-name {
color: #3466f1;
}
}
&:last-child {
.layer-name {
color: #FFC527;
}
}
.layer-name { .layer-name {
color: var(--background-color-accent); color: var(--background-color-accent);