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

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

@ -1,132 +1,151 @@
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();
const { products, getProductById } = useDuplicateProductStore(); const { products, getProductById } = useDuplicateProductStore();
const { isVersionSaved } = useSaveVersion(); const { isVersionSaved } = useSaveVersion();
const { activeModule } = useModuleStore(); const { activeModule } = useModuleStore();
const { selectedProductStore } = useProductContext(); const { selectedProductStore } = useProductContext();
const { selectedProduct } = selectedProductStore(); const { selectedProduct } = selectedProductStore();
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);
if (product) { if (product) {
setComparisonProduct(product.productUuid, product.productName); setComparisonProduct(product.productUuid, product.productName);
} }
}; };
useEffect(() => { useEffect(() => {
if (compareProductsData.length === 2) return; if (compareProductsData.length === 2) return;
// const productData = getProductById(selectedProduct.productUuid); // const productData = getProductById(selectedProduct.productUuid);
// const newData = { // const newData = {
// "productUuid": "15193386-ec58-4ec6-8a92-e665a39eebf2", // "productUuid": "15193386-ec58-4ec6-8a92-e665a39eebf2",
// "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
// } // }
// } // }
// const existingIndex = compareProductsData.findIndex((item) => // const existingIndex = compareProductsData.findIndex((item) =>
// item.productUuid === productData?.productUuid // item.productUuid === productData?.productUuid
// ); // );
// if (existingIndex !== -1) { // if (existingIndex !== -1) {
// const updated = [...compareProductsData]; // const updated = [...compareProductsData];
// updated[existingIndex] = newData; // updated[existingIndex] = newData;
// setCompareProductsData(updated); // setCompareProductsData(updated);
// } else { // } else {
// setCompareProductsData([...compareProductsData, newData]); // setCompareProductsData([...compareProductsData, newData]);
// } // }
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) { );
setShouldShowComparisonResult(true); const hasComparison = compareProductsData.some(
} else { (val) => val.productUuid === comparisonProduct.productUuid
setShouldShowComparisonResult(false); );
} if (
} else { hasMain &&
setShouldShowComparisonResult(false); hasComparison &&
} mainProduct.productUuid !== comparisonProduct.productUuid
}, [compareProductsData, mainProduct, comparisonProduct]); ) {
setShouldShowComparisonResult(true);
} else {
setShouldShowComparisonResult(false);
}
} else {
setShouldShowComparisonResult(false);
}
}, [compareProductsData, mainProduct, comparisonProduct]);
return ( return (
<>
{isVersionSaved && activeModule === "simulation" && selectedProduct && (
<> <>
{isVersionSaved && activeModule === "simulation" && selectedProduct && ( {comparisonProduct && !isPlaying && (
<> <div className="initial-selectLayout-wrapper">
{comparisonProduct && !isPlaying && <RegularDropDown
<div className="initial-selectLayout-wrapper"> header={selectedProduct.productName}
<RegularDropDown options={products.map((l) => l.productName)} // Pass layout names as options
header={selectedProduct.productName} onSelect={handleSelectLayout}
options={products.map((l) => l.productName)} // Pass layout names as options search={false}
onSelect={handleSelectLayout} />
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}

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

@ -1,142 +1,142 @@
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();
return ( return (
<>
{activeModule === "simulation" && (
<> <>
{activeModule === "simulation" && ( <group name="EventPointsGroup" visible={!isPlaying}>
<> {events.map((event, index) => {
<group name="EventPointsGroup" visible={!isPlaying}> const usedEvent = event;
{events.map((event, index) => {
const usedEvent = event;
if (usedEvent.type === "transfer") { if (usedEvent.type === "transfer") {
return ( return (
<group <group
key={`${index}-${usedEvent.modelUuid}`} key={`${index}-${usedEvent.modelUuid}`}
position={usedEvent.position} position={usedEvent.position}
rotation={usedEvent.rotation} rotation={usedEvent.rotation}
> >
{usedEvent.points.map((point, j) => ( {usedEvent.points.map((point, j) => (
<mesh <mesh
name="Event-Sphere" name="Event-Sphere"
uuid={point.uuid} uuid={point.uuid}
key={`${index}-${point.uuid}`} key={`${index}-${point.uuid}`}
position={new THREE.Vector3(...point.position)} position={new THREE.Vector3(...point.position)}
userData={{ userData={{
modelUuid: usedEvent.modelUuid, modelUuid: usedEvent.modelUuid,
pointUuid: point.uuid, pointUuid: point.uuid,
}} }}
> >
<sphereGeometry args={[0.1, 16, 16]} /> <sphereGeometry args={[0.1, 16, 16]} />
<meshStandardMaterial color="orange" /> <meshStandardMaterial color="orange" />
</mesh> </mesh>
))} ))}
</group> </group>
); );
} else if (usedEvent.type === "vehicle") { } else if (usedEvent.type === "vehicle") {
const point = usedEvent.point; const point = usedEvent.point;
return ( return (
<group <group
key={`${index}-${usedEvent.modelUuid}`} key={`${index}-${usedEvent.modelUuid}`}
position={usedEvent.position} position={usedEvent.position}
rotation={usedEvent.rotation} rotation={usedEvent.rotation}
> >
<mesh <mesh
name="Event-Sphere" name="Event-Sphere"
uuid={point.uuid} uuid={point.uuid}
position={new THREE.Vector3(...point.position)} position={new THREE.Vector3(...point.position)}
userData={{ userData={{
modelUuid: usedEvent.modelUuid, modelUuid: usedEvent.modelUuid,
pointUuid: point.uuid, pointUuid: point.uuid,
}} }}
> >
<sphereGeometry args={[0.1, 16, 16]} /> <sphereGeometry args={[0.1, 16, 16]} />
<meshStandardMaterial color="blue" /> <meshStandardMaterial color="blue" />
</mesh> </mesh>
</group> </group>
); );
} else if (usedEvent.type === "roboticArm") { } else if (usedEvent.type === "roboticArm") {
const point = usedEvent.point; const point = usedEvent.point;
return ( return (
<group <group
key={`${index}-${usedEvent.modelUuid}`} key={`${index}-${usedEvent.modelUuid}`}
position={usedEvent.position} position={usedEvent.position}
rotation={usedEvent.rotation} rotation={usedEvent.rotation}
> >
<mesh <mesh
name="Event-Sphere" name="Event-Sphere"
uuid={point.uuid} uuid={point.uuid}
position={new THREE.Vector3(...point.position)} position={new THREE.Vector3(...point.position)}
userData={{ userData={{
modelUuid: usedEvent.modelUuid, modelUuid: usedEvent.modelUuid,
pointUuid: point.uuid, pointUuid: point.uuid,
}} }}
> >
<sphereGeometry args={[0.1, 16, 16]} /> <sphereGeometry args={[0.1, 16, 16]} />
<meshStandardMaterial color="green" /> <meshStandardMaterial color="green" />
</mesh> </mesh>
</group> </group>
); );
} else if (usedEvent.type === "machine") { } else if (usedEvent.type === "machine") {
const point = usedEvent.point; const point = usedEvent.point;
return ( return (
<group <group
key={`${index}-${usedEvent.modelUuid}`} key={`${index}-${usedEvent.modelUuid}`}
position={usedEvent.position} position={usedEvent.position}
rotation={usedEvent.rotation} rotation={usedEvent.rotation}
> >
<mesh <mesh
name="Event-Sphere" name="Event-Sphere"
uuid={point.uuid} uuid={point.uuid}
position={new THREE.Vector3(...point.position)} position={new THREE.Vector3(...point.position)}
userData={{ userData={{
modelUuid: usedEvent.modelUuid, modelUuid: usedEvent.modelUuid,
pointUuid: point.uuid, pointUuid: point.uuid,
}} }}
> >
<sphereGeometry args={[0.1, 16, 16]} /> <sphereGeometry args={[0.1, 16, 16]} />
<meshStandardMaterial color="purple" /> <meshStandardMaterial color="purple" />
</mesh> </mesh>
</group> </group>
); );
} else if (usedEvent.type === "storageUnit") { } else if (usedEvent.type === "storageUnit") {
const point = usedEvent.point; const point = usedEvent.point;
return ( return (
<group <group
key={`${index}-${usedEvent.modelUuid}`} key={`${index}-${usedEvent.modelUuid}`}
position={usedEvent.position} position={usedEvent.position}
rotation={usedEvent.rotation} rotation={usedEvent.rotation}
> >
<mesh <mesh
name="Event-Sphere" name="Event-Sphere"
uuid={point.uuid} uuid={point.uuid}
position={new THREE.Vector3(...point.position)} position={new THREE.Vector3(...point.position)}
userData={{ userData={{
modelUuid: usedEvent.modelUuid, modelUuid: usedEvent.modelUuid,
pointUuid: point.uuid, pointUuid: point.uuid,
}} }}
> >
<sphereGeometry args={[0.1, 16, 16]} /> <sphereGeometry args={[0.1, 16, 16]} />
<meshStandardMaterial color="red" /> <meshStandardMaterial color="red" />
</mesh> </mesh>
</group> </group>
); );
} else { } else {
return null; return null;
} }
})} })}
</group> </group>
</>
)}
</> </>
); )}
</>
);
} }
export default PointsDuplicate; export default PointsDuplicate;

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';

23
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>
); );
} }

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

@ -12,39 +12,42 @@ 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
id="sceneCanvas" id="sceneCanvas"
shadows shadows
color="#aaaa" color="#aaaa"
eventPrefix="client" eventPrefix="client"
style={{ style={{
pointerEvents: 'none' pointerEvents: "none",
}} }}
onContextMenu={(e) => { onContextMenu={(e) => {
e.preventDefault(); e.preventDefault();
}} }}
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 /> <ControlsDuplicate />
<ControlsDuplicate /> <PostProcessingDuplicate />
<PostProcessingDuplicate /> <Environment files={background} environmentIntensity={1.5} />
<Environment files={background} environmentIntensity={1.5} /> <BuilderDuplicate projectId={projectId} />
<BuilderDuplicate projectId={projectId} /> <SimulationDuplicate />
</Canvas>
<SimulationDuplicate /> );
</Canvas>
);
} }

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);