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

Compare commits

base: Dwinzo-Beta:main
Branches Tags
Dwinzo-Beta:main
Dwinzo-Beta:feature/threaded-comments
Dwinzo-Beta:rough-comments
Dwinzo-Beta:v3-versionControl
Dwinzo-Beta:v3
Dwinzo-Beta:v3-wall
Dwinzo-Beta:v3-Demo
Dwinzo-Beta:dashboard
Dwinzo-Beta:v3-refactor
Dwinzo-Beta:v3-ui
Dwinzo-Beta:v3-agv
Dwinzo-Beta:api-integration
Dwinzo-Beta:analysis
Dwinzo-Beta:v2-compare
Dwinzo-Beta:zones-ui
Dwinzo-Beta:v2-ui
Dwinzo-Beta:v2
Dwinzo-Beta:simulation-agv-v2
Dwinzo-Beta:simulation-armbot-v2
Dwinzo-Beta:rtViz
Dwinzo-Beta:realTimeVisulization
Dwinzo-Beta:simulation
Dwinzo-Beta:simulation-animation
Dwinzo-Beta:simulation-arm
Dwinzo-Beta:ui
Dwinzo-Beta:simulation-agv
..
compare: Dwinzo-Beta:v3-Demo
Branches Tags
Dwinzo-Beta:feature/threaded-comments
Dwinzo-Beta:rough-comments
Dwinzo-Beta:v3-versionControl
Dwinzo-Beta:v3
Dwinzo-Beta:v3-wall
Dwinzo-Beta:main
Dwinzo-Beta:v3-Demo
Dwinzo-Beta:dashboard
Dwinzo-Beta:v3-refactor
Dwinzo-Beta:v3-ui
Dwinzo-Beta:v3-agv
Dwinzo-Beta:api-integration
Dwinzo-Beta:analysis
Dwinzo-Beta:v2-compare
Dwinzo-Beta:zones-ui
Dwinzo-Beta:v2-ui
Dwinzo-Beta:v2
Dwinzo-Beta:simulation-agv-v2
Dwinzo-Beta:simulation-armbot-v2
Dwinzo-Beta:rtViz
Dwinzo-Beta:realTimeVisulization
Dwinzo-Beta:simulation
Dwinzo-Beta:simulation-animation
Dwinzo-Beta:simulation-arm
Dwinzo-Beta:ui
Dwinzo-Beta:simulation-agv

No commits in common. "main" and "v3-Demo" have entirely different histories.
main ... v3-Demo

13 changed files with 320 additions and 370 deletions
Show Stats Expand all files Collapse all files

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

@ -1,151 +1,132 @@
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 { import { useCompareProductDataStore, useLoadingProgress, useSaveVersion } from '../../../store/builder/store';
useCompareProductDataStore, import useModuleStore from '../../../store/useModuleStore';
useLoadingProgress, import CompareLayOut from '../../ui/compareVersion/CompareLayOut';
useSaveVersion, import ComparisonResult from '../../ui/compareVersion/ComparisonResult';
} from "../../../store/builder/store"; import { useComparisonProduct, useMainProduct } from '../../../store/simulation/useSimulationStore';
import useModuleStore from "../../../store/useModuleStore"; import { usePlayButtonStore } from '../../../store/usePlayButtonStore';
import CompareLayOut from "../../ui/compareVersion/CompareLayOut"; import { useEffect, useState } from 'react';
import ComparisonResult from "../../ui/compareVersion/ComparisonResult"; import { useDuplicateProductStore } from '../../../modules/duplicate/duplicateStores/duplicateProductStore';
import { import ProductsDuplicate from '../../../modules/duplicate/duplicateSimulation/duplicateProduct/duplicateProduct';
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 } = const { compareProductsData, setCompareProductsData } = useCompareProductDataStore();
useCompareProductDataStore(); const [shouldShowComparisonResult, setShouldShowComparisonResult] = useState(false);
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: "70a4d942-f201-4364-bc19-de98ed41500a", "productUuid": "15193386-ec58-4ec6-8a92-e665a39eebf1",
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: "70a4d942-f201-4364-bc19-de98ed41500b", "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
}, }
}, }
]); ])
}, [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( const hasMain = compareProductsData.some(val => val.productUuid === mainProduct.productUuid);
(val) => val.productUuid === mainProduct.productUuid const hasComparison = compareProductsData.some(val => val.productUuid === comparisonProduct.productUuid);
); if (hasMain && hasComparison && mainProduct.productUuid !== comparisonProduct.productUuid) {
const hasComparison = compareProductsData.some( setShouldShowComparisonResult(true);
(val) => val.productUuid === comparisonProduct.productUuid } else {
); setShouldShowComparisonResult(false);
if ( }
hasMain && } else {
hasComparison && setShouldShowComparisonResult(false);
mainProduct.productUuid !== comparisonProduct.productUuid }
) { }, [compareProductsData, mainProduct, comparisonProduct]);
setShouldShowComparisonResult(true);
} else {
setShouldShowComparisonResult(false);
}
} else {
setShouldShowComparisonResult(false);
}
}, [compareProductsData, mainProduct, comparisonProduct]);
return ( return (
<>
{isVersionSaved && activeModule === "simulation" && selectedProduct && (
<> <>
{comparisonProduct && !isPlaying && ( {isVersionSaved && activeModule === "simulation" && selectedProduct && (
<div className="initial-selectLayout-wrapper"> <>
<RegularDropDown {comparisonProduct && !isPlaying &&
header={selectedProduct.productName} <div className="initial-selectLayout-wrapper">
options={products.map((l) => l.productName)} // Pass layout names as options <RegularDropDown
onSelect={handleSelectLayout} header={selectedProduct.productName}
search={false} options={products.map((l) => l.productName)} // Pass layout names as options
/> onSelect={handleSelectLayout}
</div> search={false}
)} />
<CompareLayOut /> </div>
}
<CompareLayOut />
<ProductsDuplicate projectId={"6842c683d4c6ce57664da93b"} /> <ProductsDuplicate projectId={"684bcd620a64bc2a815a88d6"} />
{shouldShowComparisonResult && !loadingProgress && ( {(shouldShowComparisonResult && !loadingProgress) && <ComparisonResult />}
<ComparisonResult /> </>
)} )}
</> </>
)} )
</>
);
} }
export default ComparisonScene; export default ComparisonScene;

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

@ -120,7 +120,9 @@ 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 = "#3466F1"; const purpleDark = "#6a0dad";
const purpleLight = "#FFC527"; const purpleLight = "#b19cd9";
const throughputData = { const throughputData = {
labels: [comparedProducts[0]?.productName, comparedProducts[1]?.productName], labels: [comparedProducts[0]?.productName, comparedProducts[1]?.productName],
@ -71,6 +71,7 @@ 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: 7 }, () => Math.floor(Math.random() * 10)); Array.from({ length: 5 }, () => Math.floor(Math.random() * (2000 - 300 + 1)) + 300);
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: "#3466F1", borderColor: "#6a0dad",
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: "#FFC527", borderColor: "#b19cd9",
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="#323232" color="black"
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 } = useDuplicateEventsStore(); const { events } = useEventsStore();
const { activeModule } = useModuleStore(); const { activeModule } = useModuleStore();
const { isPlaying } = usePlayButtonStore(); const { isPlaying } = usePlayButtonStore();
return ( return (
<>
{activeModule === "simulation" && (
<> <>
<group name="EventPointsGroup" visible={!isPlaying}> {activeModule === "simulation" && (
{events.map((event, index) => { <>
const usedEvent = event; <group name="EventPointsGroup" visible={!isPlaying}>
{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,5 +1,6 @@
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,13 +1,18 @@
import PointsDuplicate from "./duplicatePoint/duplicatePoint"; import React from 'react'
import TriggerDuplicate from "./duplicateTrigger/duplicateTrigger"; import ProductsDuplicate from './duplicateProduct/duplicateProduct'
import PointsDuplicate from './duplicatePoint/duplicatePoint'
import TriggerDuplicate from './duplicateTrigger/duplicateTrigger'
function SimulationDuplicate() { function SimulationDuplicate() {
return ( return (
<> <>
<PointsDuplicate />
<TriggerDuplicate /> <PointsDuplicate />
</>
); <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={"#FFC527"} color={"#c4abf1"}
lineWidth={4} lineWidth={4}
dashed={true} dashed={true}
dashSize={0.75} dashSize={0.75}
@ -157,7 +157,7 @@ function TriggerDuplicate() {
); );
})} })}
<Arrows connections={connections} color={'#FFC527'} /> <Arrows connections={connections} color={'#c4abf1'} />
</group> </group>
); );
} }

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

@ -12,42 +12,39 @@ import { Color } from "three";
import SimulationDuplicate from "./duplicateSimulation/duplicateSimulation"; import SimulationDuplicate from "./duplicateSimulation/duplicateSimulation";
export default function DuplicateScene() { export default function DuplicateScene() {
const projectId = "6842c683d4c6ce57664da93b"; const projectId = "684bcd620a64bc2a815a88d6";
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={{ gl={{ powerPreference: "high-performance", antialias: true, preserveDrawingBuffer: true }}
powerPreference: "high-performance", >
antialias: true,
preserveDrawingBuffer: true,
}}
>
<Sun />
<Shadows /> <Sun />
<ControlsDuplicate /> <Shadows />
<PostProcessingDuplicate /> <ControlsDuplicate />
<Environment files={background} environmentIntensity={1.5} /> <PostProcessingDuplicate />
<BuilderDuplicate projectId={projectId} /> <Environment files={background} environmentIntensity={1.5} />
<SimulationDuplicate /> <BuilderDuplicate projectId={projectId} />
</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 = "#3466F1", color = "#42a5f5",
}: { }: {
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 ? "#3466F1" : "red"); setHelperLineColor(sphereIntersects.length > 0 ? "#6cf542" : "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" : "#42a5f5"} color={toolMode === '3D-Delete' && hoveredLineKey === connection.id ? "red" : "#6f42c1"}
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="#42a5f5"/> <Arrows connections={connections} color="#6f42c1"/>
{currentLine && ( {currentLine && (
<> <>

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

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