From 4152e611a9f0081c8edaf3f5b1ff503190e96796 Mon Sep 17 00:00:00 2001
From: Vishnu <vishnu@hexrfactory.com>
Date: Wed, 30 Apr 2025 10:10:39 +0530
Subject: [PATCH 01/17] refactor: Update dropdown items to include active
state, enhance List and DropDownList components, and improve sidebar styles
for better layout and accessibility
---
.../components/layout/sidebarLeft/Outline.tsx | 2 +-
app/src/components/ui/list/DropDownList.tsx | 63 ++++----
app/src/components/ui/list/List.tsx | 74 ++++-----
app/src/styles/abstracts/variables.scss | 6 +-
app/src/styles/components/lists.scss | 26 ++--
app/src/styles/layout/sidebar.scss | 140 ++++++------------
6 files changed, 139 insertions(+), 172 deletions(-)
diff --git a/app/src/components/layout/sidebarLeft/Outline.tsx b/app/src/components/layout/sidebarLeft/Outline.tsx
index 417f069..152c357 100644
--- a/app/src/components/layout/sidebarLeft/Outline.tsx
+++ b/app/src/components/layout/sidebarLeft/Outline.tsx
@@ -11,7 +11,7 @@ const Outline: React.FC = () => {
};
const dropdownItems = [
- { id: "1", name: "Ground Floor" },
+ { id: "1", name: "Ground Floor", active: true },
// { id: "2", name: "Floor 1" },
]; // Example dropdown items
diff --git a/app/src/components/ui/list/DropDownList.tsx b/app/src/components/ui/list/DropDownList.tsx
index 0416a9e..20c6951 100644
--- a/app/src/components/ui/list/DropDownList.tsx
+++ b/app/src/components/ui/list/DropDownList.tsx
@@ -3,7 +3,6 @@ import List from "./List";
import { AddIcon, ArrowIcon, FocusIcon } from "../../icons/ExportCommonIcons";
import KebabMenuListMultiSelect from "./KebebMenuListMultiSelect";
import { useFloorItems, useZones } from "../../../store/store";
-import { useSelectedZoneStore } from "../../../store/visualization/useZoneStore";
interface DropDownListProps {
value?: string; // Value to display in the DropDownList
@@ -17,6 +16,17 @@ interface DropDownListProps {
remove?: boolean;
}
+interface Zone {
+ zoneId: string;
+ zoneName: string;
+ points: [number, number, number][]; // polygon vertices
+}
+interface ZoneData {
+ id: string;
+ name: string;
+ assets: { id: string; name: string; position?: []; rotation?: {} }[];
+}
+
const DropDownList: React.FC<DropDownListProps> = ({
value = "Dropdown",
items = [],
@@ -33,38 +43,30 @@ const DropDownList: React.FC<DropDownListProps> = ({
remove,
}) => {
const [isOpen, setIsOpen] = useState<boolean>(defaultOpen);
- const { zones, setZones } = useZones();
+ const { zones } = useZones();
const handleToggle = () => {
setIsOpen((prev) => !prev); // Toggle the state
};
- interface Asset {
- id: string;
- name: string;
- position: [number, number, number]; // x, y, z
- }
- interface Zone {
- zoneId: string;
- zoneName: string;
- points: [number, number, number][]; // polygon vertices
- }
- interface ZoneData {
- id: string;
- name: string;
- assets: { id: string; name: string; position?: []; rotation?: {} }[];
- }
const [zoneDataList, setZoneDataList] = useState<ZoneData[]>([]);
const { floorItems } = useFloorItems();
- const isPointInsidePolygon = (point: [number, number], polygon: [number, number][]) => {
+ const isPointInsidePolygon = (
+ point: [number, number],
+ polygon: [number, number][]
+ ) => {
let inside = false;
for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
- const xi = polygon[i][0], zi = polygon[i][1];
- const xj = polygon[j][0], zj = polygon[j][1];
+ const xi = polygon[i][0],
+ zi = polygon[i][1];
+ const xj = polygon[j][0],
+ zj = polygon[j][1];
- const intersect = ((zi > point[1]) !== (zj > point[1])) &&
- (point[0] < (xj - xi) * (point[1] - zi) / (zj - zi + 0.000001) + xi);
+ const intersect =
+ // eslint-disable-next-line no-mixed-operators
+ zi > point[1] !== zj > point[1] &&
+ point[0] < ((xj - xi) * (point[1] - zi)) / (zj - zi + 0.000001) + xi;
if (intersect) inside = !inside;
}
@@ -73,18 +75,21 @@ const DropDownList: React.FC<DropDownListProps> = ({
useEffect(() => {
const updatedZoneList: ZoneData[] = zones?.map((zone: Zone) => {
- const polygon2D = zone.points.map((p: [number, number, number]) => [p[0], p[2]]) as [number, number][];
+ const polygon2D = zone.points.map((p: [number, number, number]) => [
+ p[0],
+ p[2],
+ ]);
const assetsInZone = floorItems
.filter((item: any) => {
const [x, , z] = item.position;
- return isPointInsidePolygon([x, z], polygon2D);
+ return isPointInsidePolygon([x, z], polygon2D as [number, number][]);
})
.map((item: any) => ({
id: item.modeluuid,
name: item.modelname,
position: item.position,
- rotation: item.rotation
+ rotation: item.rotation,
}));
return {
@@ -99,9 +104,9 @@ const DropDownList: React.FC<DropDownListProps> = ({
return (
<div className="dropdown-list-container">
<div className="head">
- <div className="value" onClick={handleToggle}>
+ <button className="value" onClick={handleToggle}>
{value}
- </div>
+ </button>
<div className="options">
{showFocusIcon && (
<div className="focus option">
@@ -118,13 +123,13 @@ const DropDownList: React.FC<DropDownListProps> = ({
<KebabMenuListMultiSelect items={kebabMenuItems} />
</div>
)}
- <div
+ <button
className="collapse-icon option"
style={{ transform: isOpen ? "rotate(0deg)" : "rotate(-90deg)" }}
onClick={handleToggle}
>
<ArrowIcon />
- </div>
+ </button>
</div>
</div>
{isOpen && (
diff --git a/app/src/components/ui/list/List.tsx b/app/src/components/ui/list/List.tsx
index 06419af..bd8725b 100644
--- a/app/src/components/ui/list/List.tsx
+++ b/app/src/components/ui/list/List.tsx
@@ -12,7 +12,6 @@ import {
LockIcon,
RemoveIcon,
} from "../../icons/ExportCommonIcons";
-import { useThree } from "@react-three/fiber";
import { useFloorItems, useZoneAssetId, useZones } from "../../../store/store";
import { zoneCameraUpdate } from "../../../services/visulization/zone/zoneCameraUpdation";
import { setFloorItemApi } from "../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi";
@@ -32,20 +31,19 @@ interface ZoneItem {
interface ListProps {
items?: ZoneItem[];
- placeholder?: string;
remove?: boolean;
}
const List: React.FC<ListProps> = ({ items = [], remove }) => {
- const { activeModule, setActiveModule } = useModuleStore();
+ const { activeModule } = useModuleStore();
const { selectedZone, setSelectedZone } = useSelectedZoneStore();
const { zoneAssetId, setZoneAssetId } = useZoneAssetId();
- const { zones, setZones } = useZones();
+ const { zones } = useZones();
const { setSubModule } = useSubModuleStore();
const [expandedZones, setExpandedZones] = useState<Record<string, boolean>>(
{}
);
- const { floorItems, setFloorItems } = useFloorItems();
+ const { setFloorItems } = useFloorItems();
useEffect(() => {
useSelectedZoneStore.getState().setSelectedZone({
@@ -70,39 +68,36 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
async function handleSelectZone(id: string) {
try {
if (selectedZone?.zoneId === id) {
-
return;
}
setSubModule("zoneProperties");
const email = localStorage.getItem("email");
- const organization = email?.split("@")[1]?.split(".")[0] || "";
+ const organization = email?.split("@")[1]?.split(".")[0] ?? "";
let response = await getZoneData(id, organization);
setSelectedZone({
zoneName: response?.zoneName,
- activeSides: response?.activeSides || [],
- panelOrder: response?.panelOrder || [],
- lockedPanels: response?.lockedPanels || [],
- widgets: response?.widgets || [],
+ activeSides: response?.activeSides ?? [],
+ panelOrder: response?.panelOrder ?? [],
+ lockedPanels: response?.lockedPanels ?? [],
+ widgets: response?.widgets ?? [],
zoneId: response?.zoneId,
- zoneViewPortTarget: response?.viewPortCenter || [],
- zoneViewPortPosition: response?.viewPortposition || [],
+ zoneViewPortTarget: response?.viewPortCenter ?? [],
+ zoneViewPortPosition: response?.viewPortposition ?? [],
});
-
-
} catch (error) {
-
+ console.log(error);
}
}
function handleAssetClick(asset: Asset) {
- setZoneAssetId(asset)
+ setZoneAssetId(asset);
}
async function handleZoneNameChange(newName: string) {
- const email = localStorage.getItem("email") || "";
+ const email = localStorage.getItem("email") ?? "";
const organization = email?.split("@")[1]?.split(".")[0];
const isDuplicate = zones.some(
@@ -128,12 +123,16 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
}
async function handleZoneAssetName(newName: string) {
- const email = localStorage.getItem("email") || "";
+ const email = localStorage.getItem("email") ?? "";
const organization = email?.split("@")[1]?.split(".")[0];
if (zoneAssetId?.id) {
- let response = await setFloorItemApi(organization, zoneAssetId.id, newName)
- console.log('response: ', response);
+ let response = await setFloorItemApi(
+ organization,
+ zoneAssetId.id,
+ newName
+ );
+ console.log("response: ", response);
setFloorItems((prevFloorItems: any[]) =>
prevFloorItems.map((floorItems) =>
floorItems.modeluuid === zoneAssetId.id
@@ -160,7 +159,7 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
<li className="list-container">
<div className="list-item">
<div className="zone-header">
- <div
+ <button
className="value"
onClick={() => handleSelectZone(item.id)}
>
@@ -169,8 +168,7 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
onRename={handleZoneNameChange}
checkDuplicate={checkZoneNameDuplicate}
/>
-
- </div>
+ </button>
</div>
<div className="options-container">
<div className="lock option">
@@ -185,12 +183,12 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
</div>
)}
{item.assets && item.assets.length > 0 && (
- <div
+ <button
className="expand-icon option"
onClick={() => toggleZoneExpansion(item.id)}
>
<ArrowIcon />
- </div>
+ </button>
)}
</div>
</div>
@@ -206,20 +204,26 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
className="list-container asset-item"
>
<div className="list-item">
- <div className="value" onClick={() => handleAssetClick(asset)} >
- <RenameInput value={asset.name} onRename={handleZoneAssetName} />
- </div>
+ <button
+ className="value"
+ onClick={() => handleAssetClick(asset)}
+ >
+ <RenameInput
+ value={asset.name}
+ onRename={handleZoneAssetName}
+ />
+ </button>
<div className="options-container">
- <div className="lock option">
+ <button className="lock option">
<LockIcon isLocked />
- </div>
- <div className="visibe option">
+ </button>
+ <button className="visibe option">
<EyeIcon isClosed />
- </div>
+ </button>
{remove && (
- <div className="remove option">
+ <button className="remove option">
<RemoveIcon />
- </div>
+ </button>
)}
</div>
</div>
diff --git a/app/src/styles/abstracts/variables.scss b/app/src/styles/abstracts/variables.scss
index 2913425..37d9971 100644
--- a/app/src/styles/abstracts/variables.scss
+++ b/app/src/styles/abstracts/variables.scss
@@ -16,7 +16,7 @@ $text-button-color: #f3f3fd;
$text-color-dark: #f3f3fd;
$text-disabled-dark: #6f6f7a;
$input-text-color-dark: #b5b5c8;
-$highlight-text-color-dark: #b392f0;
+$highlight-text-color-dark: #d2baff;
$text-button-color-dark: #f3f3fd;
// background colors
@@ -105,8 +105,8 @@ $color5: #c7a8ff;
// old variables
$accent-color: #6f42c1;
$accent-color-dark: #c4abf1;
-$highlight-accent-color: #e0dfff;
-$highlight-accent-color-dark: #403e6a;
+// $highlight-accent-color: #e0dfff;
+// $highlight-accent-color-dark: #403e6a;
// $background-color: #fcfdfd;
// $background-color-dark: #19191d;
diff --git a/app/src/styles/components/lists.scss b/app/src/styles/components/lists.scss
index 3b52e69..894eac1 100644
--- a/app/src/styles/components/lists.scss
+++ b/app/src/styles/components/lists.scss
@@ -34,9 +34,8 @@
padding: 12px;
}
- .list-container {
+ li.list-container {
padding: 2px;
- // margin-left: 10px;
overflow: hidden;
.list-item {
@@ -45,11 +44,13 @@
text-align: center;
padding: 4px 8px;
border-radius: #{$border-radius-large};
-
- .value {
- width: 100%;
- text-align: start;
- max-width: 180px;
+ .zone-header{
+ @include flex-center;
+ .value {
+ width: 100%;
+ text-align: start;
+ max-width: 180px;
+ }
}
.options-container {
@@ -61,11 +62,18 @@
cursor: pointer;
}
}
+ &:first-child{
+ background: var(--highlight-accent-color);
+ .input-value{
+ color: var(--highlight-text-color);
+ }
+ }
}
-
.active {
background: var(--highlight-accent-color);
- color: var(--primary-color);
+ .input-value{
+ color: var(--highlight-text-color);
+ }
}
}
diff --git a/app/src/styles/layout/sidebar.scss b/app/src/styles/layout/sidebar.scss
index 01715ec..583dc0a 100644
--- a/app/src/styles/layout/sidebar.scss
+++ b/app/src/styles/layout/sidebar.scss
@@ -434,7 +434,7 @@
button {
path {
stroke: var(--accent-color);
- strokeWidth: 1.5px;
+ stroke-width: 1.5px;
}
color: var(--accent-color);
&:before {
@@ -456,6 +456,9 @@
.sidebar-right-content-container {
.dataSideBar {
.inputs-wrapper {
+ display: flex;
+ flex-direction: column;
+ gap: 6px;
.datas {
.input-value {
padding: 5px 10px;
@@ -487,6 +490,7 @@
.datas__class {
display: flex;
align-items: center;
+ gap: 12px;
.multi-level-dropdown {
width: 170px;
@@ -496,22 +500,13 @@
justify-content: space-between;
gap: 6px;
}
- }
- }
-
- .datas__class {
- display: flex;
- gap: 12px;
-
- // .datas__separator {
- // }
-
- .disable {
- cursor: not-allowed;
- pointer-events: none;
- /* Disables all mouse interactions */
- opacity: 0.5;
- /* Optional: Makes the button look visually disabled */
+ .disable {
+ cursor: not-allowed;
+ pointer-events: none;
+ /* Disables all mouse interactions */
+ opacity: 0.5;
+ /* Optional: Makes the button look visually disabled */
+ }
}
}
}
@@ -522,12 +517,6 @@
padding-bottom: 6px;
}
- .inputs-wrapper {
- display: flex;
- flex-direction: column;
- gap: 6px;
- }
-
.selectedMain-container {
display: flex;
flex-direction: column;
@@ -627,10 +616,8 @@
width: 100%;
height: 150px;
background: #f0f0f0;
- // border-radius: 8px;
display: flex;
align-items: center;
- // justify-content: center;
}
.optionsContainer {
@@ -713,7 +700,7 @@
path {
stroke: var(--accent-color);
- strokeWidth: 1.5px;
+ stroke-width: 1.5px;
}
&:hover {
@@ -742,14 +729,14 @@
.add-button {
@include flex-center;
padding: 2px 4px;
- background: var(--accent-color);
- color: var(--primary-color);
+ background: var(--background-color-button);
+ color: var(--text-button-color);
border-radius: #{$border-radius-small};
cursor: pointer;
outline: none;
border: none;
path {
- stroke: var(--primary-color);
+ stroke: var(--text-button-color);
}
&:disabled {
background: var(--text-disabled);
@@ -804,11 +791,10 @@
}
.lists-main-container {
- margin: 2px 8px;
- width: calc(100% - 12px);
- margin-right: 4px;
+ margin: 2px;
+ width: calc(100% - 4px);
background: var(--background-color-gray);
- border-radius: #{$border-radius-small};
+ border-radius: 8px;
min-height: 120px;
.list-container {
@@ -818,10 +804,10 @@
.list-item {
@include flex-space-between;
- padding: 2px 12px;
+ padding: 4px 12px;
width: 100%;
margin: 2px 0;
- border-radius: #{$border-radius-small};
+ border-radius: #{$border-radius-medium};
.value {
display: flex;
justify-content: flex-start;
@@ -1156,7 +1142,13 @@
}
.assets-container {
- padding: 0 6px;
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ height: 100%;
+ gap: 3px;
+ padding: 10px 0;
.assets-wrapper {
width: 100%;
@@ -1175,14 +1167,16 @@
flex-direction: row;
flex-wrap: wrap;
height: 100%;
- gap: 8px;
+ gap: 0px 4px;
padding: 10px 0;
.category {
- width: 121px;
+ width: 123px;
height: 95px;
- border-radius: 3.59px;
- background: var(--background-color-gray);
+ border-radius: #{$border-radius-large};
+ background: var(--background-color);
+ outline: 1px solid var(--border-color);
+ outline-offset: -1px;
padding: 8px;
padding-top: 12px;
font-weight: $bold-weight;
@@ -1193,8 +1187,6 @@
position: relative;
z-index: 3;
font-size: var(--font-size-regular);
- // -webkit-text-fill-color: transparent;
- // -webkit-text-stroke: 1px black;
}
&::after {
@@ -1260,7 +1252,6 @@
.category-image {
position: absolute;
- // top: 50%;
bottom: 0;
right: -10px;
transform: translate(0, 0%) scale(0.8);
@@ -1276,14 +1267,15 @@
flex-direction: row;
flex-wrap: wrap;
height: 100%;
- gap: 3px;
+ gap: 0px 4px;
padding: 10px 0;
.assets {
- width: 117px;
+ width: 123px;
height: 95px;
- border-radius: #{$border-radius-small};
- background: var(--background-color-gray);
+ border-radius: #{$border-radius-large};
+ background: var(--background-color);
+ outline: 1px solid var(--border-color);
font-weight: $medium-weight;
position: relative;
overflow: hidden;
@@ -1301,18 +1293,16 @@
z-index: 3;
padding: 8px;
width: 100%;
- max-height: 38px;
+ height: 100%;
font-size: var(--font-size-regular);
- background: color-mix(
- in srgb,
- var(--background-color) 40%,
- transparent
- );
- backdrop-filter: blur(5px);
+ background: linear-gradient(0deg,rgba(37, 24, 51, 0) 0%, rgba(78, 22, 128, 0.4) 100%);
+ pointer-events: none;
+ backdrop-filter: blur(8px);
opacity: 0;
transition: opacity 0.3s ease;
display: -webkit-box;
- -webkit-line-clamp: 2;
+ -webkit-line-clamp: 3;
+ line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
@@ -1337,46 +1327,6 @@
}
}
-.assets-container {
- width: 100%;
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- height: 100%;
- gap: 3px;
- padding: 10px 0;
-
- .assets {
- width: 117px;
- height: 95px;
- border-radius: 3.59px;
- background: var(--background-color-gray);
- padding: 8px;
- padding-top: 12px;
- font-weight: $medium-weight;
- position: relative;
- overflow: hidden;
-
- .asset-name {
- position: relative;
- z-index: 3;
- font-size: var(--font-size-regular);
- }
-
- .asset-image {
- height: 100%;
- width: 100%;
- position: absolute;
- // top: 50%;
- // right: 5px;
- // transform: translate(0, -50%);
- top: 0;
- left: 0;
- z-index: 2;
- }
- }
-}
-
.assets-result {
width: 100%;
height: 100%;
From 5119b014b711a3db7ebd61f39b0b399714fdd088 Mon Sep 17 00:00:00 2001
From: Vishnu <vishnu@hexrfactory.com>
Date: Wed, 30 Apr 2025 16:23:24 +0530
Subject: [PATCH 02/17] Refactor Assets component layout and styling; enhance
Trigger dropdowns with labels; update MenuBar theme retrieval; fix icon
import in AssetPreview; adjust Card component star rating display; modify
AddButtons styles and functionality; improve variable definitions in SCSS
files; streamline input component styles; refine marketplace card layout;
enhance menu dropdown styles; update module toggle styles; adjust tools
component styles; improve visualization floating styles; clean up sidebar
styles; optimize realTimeViz styles for better responsiveness.
---
app/src/components/icons/ContextMenuIcons.tsx | 35 +--
app/src/components/icons/DashboardIcon.tsx | 86 +++----
.../components/icons/ExportCommonIcons.tsx | 93 +++----
.../components/icons/ExportModuleIcons.tsx | 38 +--
app/src/components/icons/HeaderIcons.tsx | 10 +-
.../icons/RealTimeVisulationIcons.tsx | 14 +-
app/src/components/icons/marketPlaceIcons.tsx | 8 +-
.../components/layout/sidebarLeft/Assets.tsx | 230 +++++++++---------
.../eventProperties/trigger/Trigger.tsx | 64 +++--
app/src/components/ui/menu/menu.tsx | 2 +-
app/src/modules/market/AssetPreview.tsx | 4 +-
app/src/modules/market/Card.tsx | 9 +-
.../widgets/panel/AddButtons.tsx | 6 +-
app/src/styles/abstracts/variables.scss | 13 +-
app/src/styles/base/base.scss | 2 +
app/src/styles/components/input.scss | 82 +++----
.../components/marketPlace/marketPlace.scss | 16 +-
app/src/styles/components/menu/menu.scss | 32 +--
app/src/styles/components/moduleToggle.scss | 2 +-
app/src/styles/components/tools.scss | 33 ++-
.../visualization/floating/common.scss | 3 +-
app/src/styles/layout/sidebar.scss | 122 +++++-----
app/src/styles/pages/realTimeViz.scss | 65 ++---
23 files changed, 470 insertions(+), 499 deletions(-)
diff --git a/app/src/components/icons/ContextMenuIcons.tsx b/app/src/components/icons/ContextMenuIcons.tsx
index f48cf3b..e249bad 100644
--- a/app/src/components/icons/ContextMenuIcons.tsx
+++ b/app/src/components/icons/ContextMenuIcons.tsx
@@ -9,31 +9,31 @@ export function FlipXAxisIcon() {
>
<path
d="M1 9.0568V2.94321C1 2.09213 1 1.6666 1.27121 1.52703C1.54242 1.38746 1.88869 1.6348 2.58123 2.12947L3.37186 2.6942C3.67979 2.91415 3.83375 3.02413 3.91687 3.18565C4 3.34718 4 3.53639 4 3.9148V8.08525C4 8.46365 4 8.65285 3.91687 8.8144C3.83375 8.9759 3.67979 9.0859 3.37186 9.30585L2.58124 9.87055C1.88869 10.3653 1.54242 10.6126 1.27121 10.473C1 10.3335 1 9.9079 1 9.0568Z"
- fill="var(--icon-default-color)"
+ fill="var(--text-color)"
/>
<path
d="M8.84612 2.99935L8.8461 2.99936C8.68674 3.11318 8.58748 3.18452 8.51591 3.2461C8.45011 3.30271 8.42848 3.33407 8.41656 3.3572L8.84612 2.99935ZM8.84612 2.99935L9.63671 2.43462C9.63671 2.43462 9.63672 2.43462 9.63672 2.43462C9.99337 2.17987 10.2264 2.01464 10.403 1.92406C10.487 1.88093 10.5331 1.86801 10.555 1.86465C10.5651 1.88444 10.5813 1.92948 10.5951 2.02293C10.624 2.21925 10.625 2.50491 10.625 2.94321V9.0568C10.625 9.49511 10.624 9.78078 10.5951 9.9771C10.5813 10.0705 10.5651 10.1156 10.5551 10.1354C10.5331 10.132 10.487 10.1191 10.403 10.076C10.2264 9.98539 9.99337 9.82016 9.63672 9.5654L9.63671 9.5654L8.84611 9.0007L8.84611 9.00069M8.84612 2.99935L8.84611 9.00069M8.84611 9.00069C8.68675 8.88688 8.58748 8.81553 8.51591 8.75395C8.45015 8.69737 8.4285 8.666 8.41657 8.64287C8.40466 8.61972 8.39169 8.5839 8.38386 8.49735C8.37535 8.40331 8.375 8.28108 8.375 8.08525V3.9148C8.375 3.71896 8.37535 3.59672 8.38386 3.50269M8.84611 9.00069L8.38386 3.50269M8.38386 3.50269C8.39168 3.41623 8.40463 3.38041 8.41652 3.35729L8.38386 3.50269ZM10.5715 1.86435C10.5713 1.86468 10.5689 1.86476 10.565 1.86363C10.5698 1.86345 10.5718 1.86402 10.5715 1.86435ZM10.5501 1.85597C10.5469 1.85343 10.5456 1.85142 10.5457 1.85105C10.5458 1.85068 10.5474 1.85195 10.5501 1.85597ZM10.5457 10.149C10.5456 10.1486 10.5469 10.1466 10.5501 10.1441C10.5475 10.1481 10.5458 10.1493 10.5457 10.149ZM10.565 10.1364C10.5689 10.1353 10.5713 10.1353 10.5716 10.1357C10.5718 10.136 10.5698 10.1366 10.565 10.1364Z"
- stroke="var(--icon-default-color)"
+ stroke="var(--text-color)"
strokeWidth="0.75"
/>
<path
opacity="0.5"
d="M6 7V5"
- stroke="var(--icon-default-color)"
+ stroke="var(--text-color)"
strokeWidth="0.75"
strokeLinecap="round"
/>
<path
opacity="0.5"
d="M6 3V1"
- stroke="var(--icon-default-color)"
+ stroke="var(--text-color)"
strokeWidth="0.75"
strokeLinecap="round"
/>
<path
opacity="0.5"
d="M6 11V9"
- stroke="var(--icon-default-color)"
+ stroke="var(--text-color)"
strokeWidth="0.75"
strokeLinecap="round"
/>
@@ -52,37 +52,38 @@ export function FlipYAxisIcon() {
>
<path
d="M9.0568 11H2.94321C2.09213 11 1.6666 11 1.52703 10.7288C1.38746 10.4576 1.6348 10.1113 2.12947 9.41877L2.6942 8.62814C2.91415 8.32021 3.02413 8.16625 3.18565 8.08313C3.34718 8 3.53639 8 3.9148 8H8.08525C8.46365 8 8.65285 8 8.8144 8.08313C8.9759 8.16625 9.0859 8.32021 9.30585 8.62814L9.87055 9.41876C10.3653 10.1113 10.6126 10.4576 10.473 10.7288C10.3335 11 9.9079 11 9.0568 11Z"
- fill="var(--icon-default-color)"
+ fill="var(--text-color)"
/>
<path
d="M2.99935 3.15388L2.99936 3.1539C3.11318 3.31326 3.18452 3.41252 3.2461 3.48409C3.30271 3.54989 3.33407 3.57152 3.3572 3.58344L2.99935 3.15388ZM2.99935 3.15388L2.43462 2.36329C2.43462 2.36329 2.43462 2.36328 2.43462 2.36328C2.17987 2.00663 2.01464 1.7736 1.92406 1.59704C1.88093 1.51299 1.86801 1.46687 1.86465 1.44495C1.88444 1.43495 1.92948 1.41866 2.02293 1.4049C2.21925 1.37599 2.50491 1.375 2.94321 1.375L9.0568 1.375C9.49511 1.375 9.78078 1.37599 9.9771 1.4049C10.0705 1.41866 10.1156 1.43494 10.1354 1.44495C10.132 1.46687 10.1191 1.51299 10.076 1.59705C9.98539 1.7736 9.82016 2.00663 9.5654 2.36328L9.5654 2.36329L9.0007 3.15389L9.00069 3.15389M2.99935 3.15388L9.00069 3.15389M9.00069 3.15389C8.88688 3.31325 8.81553 3.41252 8.75395 3.48409C8.69737 3.54985 8.666 3.5715 8.64287 3.58343C8.61972 3.59534 8.5839 3.60831 8.49735 3.61614C8.40331 3.62465 8.28108 3.625 8.08525 3.625L3.9148 3.625C3.71896 3.625 3.59672 3.62465 3.50269 3.61614M9.00069 3.15389L3.50269 3.61614M3.50269 3.61614C3.41623 3.60832 3.38041 3.59537 3.35729 3.58348L3.50269 3.61614ZM1.86435 1.42845C1.86468 1.42867 1.86476 1.43108 1.86363 1.43501C1.86345 1.4302 1.86402 1.42823 1.86435 1.42845ZM1.85597 1.4499C1.85343 1.45311 1.85142 1.45444 1.85105 1.4543C1.85068 1.45416 1.85195 1.45255 1.85597 1.4499ZM10.149 1.45429C10.1486 1.45443 10.1466 1.4531 10.1441 1.44989C10.1481 1.45254 10.1493 1.45415 10.149 1.45429ZM10.1364 1.435C10.1353 1.43107 10.1353 1.42867 10.1357 1.42845C10.136 1.42823 10.1366 1.4302 10.1364 1.435Z"
- stroke="var(--icon-default-color)"
+ stroke="var(--text-color)"
strokeWidth="0.75"
/>
<path
opacity="0.5"
d="M7 6H5"
- stroke="var(--icon-default-color)"
+ stroke="var(--text-color)"
strokeWidth="0.75"
strokeLinecap="round"
/>
<path
opacity="0.5"
d="M3 6H1"
- stroke="var(--icon-default-color)"
+ stroke="var(--text-color)"
strokeWidth="0.75"
strokeLinecap="round"
/>
<path
opacity="0.5"
d="M11 6H9"
- stroke="var(--icon-default-color)"
+ stroke="var(--text-color)"
strokeWidth="0.75"
strokeLinecap="round"
/>
</svg>
);
}
+
export function FlipZAxisIcon() {
return (
<svg
@@ -95,31 +96,31 @@ export function FlipZAxisIcon() {
<g clipPath="url(#clip0_111_550)">
<path
d="M9.04893 11.25H2.95106C2.10217 11.25 1.67773 11.25 1.53852 11.0466C1.39931 10.8432 1.64602 10.5835 2.13942 10.0641L2.7027 9.47111C2.92208 9.24016 3.03177 9.12469 3.19288 9.06234C3.35399 9 3.54271 9 3.92015 9H8.07988C8.4573 9 8.64602 9 8.80715 9.06234C8.96823 9.12469 9.07795 9.24016 9.29734 9.4711L9.86058 10.0641C10.354 10.5835 10.6007 10.8432 10.4615 11.0466C10.3223 11.25 9.89784 11.25 9.04893 11.25Z"
- fill="var(--icon-default-color)"
+ fill="var(--text-color)"
/>
<path
d="M2.97458 2.27061L2.97459 2.27063C3.21361 2.52227 3.26241 2.56246 3.32818 2.58793L2.97458 2.27061ZM2.97458 2.27061L2.4113 1.67767C2.4113 1.67767 2.4113 1.67766 2.4113 1.67766C2.1834 1.43775 2.03311 1.27814 1.94303 1.15861C1.96477 1.15501 1.99023 1.15144 2.01993 1.14815C2.22388 1.12557 2.51696 1.125 2.95106 1.125L9.04893 1.125C9.48304 1.125 9.77613 1.12557 9.98008 1.14815C10.0098 1.15144 10.0352 1.15501 10.057 1.15862C9.9669 1.27813 9.81662 1.43775 9.5887 1.67766L9.58869 1.67767L9.02545 2.27062L9.02544 2.27063M2.97458 2.27061L9.02544 2.27063M9.02544 2.27063C8.78635 2.52233 8.73756 2.56249 8.67176 2.58797C8.59172 2.6189 8.48853 2.625 8.07988 2.625L3.92015 2.625C3.51141 2.625 3.40826 2.61889 3.32825 2.58796L9.02544 2.27063Z"
- stroke="var(--icon-default-color)"
+ stroke="var(--text-color)"
strokeWidth="0.75"
/>
<path
opacity="0.5"
d="M7 6.75H5"
- stroke="var(--icon-default-color)"
+ stroke="var(--text-color)"
strokeWidth="0.75"
strokeLinecap="round"
/>
<path
opacity="0.5"
d="M3 6.75H1"
- stroke="var(--icon-default-color)"
+ stroke="var(--text-color)"
strokeWidth="0.75"
strokeLinecap="round"
/>
<path
opacity="0.5"
d="M7.5 4.94853H10.2794C10.7911 4.94853 11.2059 5.36332 11.2059 5.875C11.2059 6.38668 10.7911 6.80147 10.2794 6.80147H9.35294M7.5 4.94853L8.32353 4.125M7.5 4.94853L8.32353 5.77206"
- stroke="var(--icon-default-color)"
+ stroke="var(--text-color)"
strokeWidth="0.75"
strokeLinecap="round"
strokeLinejoin="round"
@@ -150,11 +151,11 @@ export function RenameIcon() {
>
<path
d="M5.03566 0.857117C4.85815 0.857117 4.71423 1.00103 4.71423 1.17855C4.71423 1.35606 4.85815 1.49997 5.03566 1.49997H5.67852V10.5H5.03566C4.85815 10.5 4.71423 10.6439 4.71423 10.8214C4.71423 10.9989 4.85815 11.1428 5.03566 11.1428H6.96423C7.14175 11.1428 7.28566 10.9989 7.28566 10.8214C7.28566 10.6439 7.14175 10.5 6.96423 10.5H6.32138V1.49997H6.96423C7.14175 1.49997 7.28566 1.35606 7.28566 1.17855C7.28566 1.00103 7.14175 0.857117 6.96423 0.857117H5.03566Z"
- fill="var(--icon-default-color)"
+ fill="var(--text-color)"
/>
<path
d="M5.25 3H2.625C2.21079 3 1.875 3.33579 1.875 3.75V8.25C1.875 8.66421 2.21079 9 2.625 9H5.25M6.75 9H9.375C9.78921 9 10.125 8.66421 10.125 8.25V3.75C10.125 3.33579 9.78921 3 9.375 3H6.75"
- stroke="var(--icon-default-color)"
+ stroke="var(--text-color)"
/>
</svg>
);
diff --git a/app/src/components/icons/DashboardIcon.tsx b/app/src/components/icons/DashboardIcon.tsx
index 314a3c8..f1f4d7d 100644
--- a/app/src/components/icons/DashboardIcon.tsx
+++ b/app/src/components/icons/DashboardIcon.tsx
@@ -9,13 +9,13 @@ export function NotificationIcon() {
>
<path
d="M10 12.8335C10 13.3639 9.78927 13.8726 9.4142 14.2477C9.03913 14.6228 8.5304 14.8335 8 14.8335C7.4696 14.8335 6.96087 14.6228 6.58579 14.2477C6.21072 13.8726 6 13.3639 6 12.8335"
- stroke="var(--icon-default-color)"
+ stroke="var(--text-color)"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M3.72064 12.1667C3.39434 12.0974 3.10586 11.9084 2.91209 11.6369C2.71832 11.3653 2.63337 11.0311 2.67399 10.7L3.34066 5.29332C3.51087 4.18175 4.07672 3.16901 4.93414 2.44143C5.79156 1.71384 6.88287 1.32036 8.00734 1.33332C9.1318 1.32036 10.2231 1.71384 11.0805 2.44143C11.9379 3.16901 12.5038 4.18175 12.674 5.29332L13.3407 10.7C13.3815 11.0301 13.2975 11.3636 13.1051 11.635C12.9127 11.9063 12.6257 12.096 12.3007 12.1667C9.47907 12.8297 6.54222 12.8297 3.72064 12.1667Z"
- stroke="var(--icon-default-color)"
+ stroke="var(--text-color)"
strokeLinecap="round"
strokeLinejoin="round"
/>
@@ -34,7 +34,7 @@ export function HomeIcon() {
>
<path
d="M6.91304 13.5V12.8333C6.91304 12.281 7.36076 11.8333 7.91304 11.8333H8.95652C9.50881 11.8333 9.95652 12.281 9.95652 12.8333V13.5C9.95652 14.0523 10.4042 14.5 10.9565 14.5H12C12.5523 14.5 13 14.0523 13 13.5V7.38889L8.21739 2.5L3 7.38889V13.5C3 14.0523 3.44772 14.5 4 14.5H5.91304C6.46533 14.5 6.91304 14.0523 6.91304 13.5Z"
- stroke="var(--icon-default-color)"
+ stroke="var(--text-color)"
/>
</svg>
);
@@ -51,7 +51,7 @@ export function ProjectsIcon() {
>
<path
d="M12.1538 1.5H5.69231C5.20268 1.5 4.7331 1.68437 4.38688 2.01256C4.04066 2.34075 3.84615 2.78587 3.84615 3.25C3.35652 3.25 2.88695 3.43437 2.54073 3.76256C2.1945 4.09075 2 4.53587 2 5V13.75C2 14.2141 2.1945 14.6592 2.54073 14.9874C2.88695 15.3156 3.35652 15.5 3.84615 15.5H10.3077C10.7973 15.5 11.2669 15.3156 11.6131 14.9874C11.9593 14.6592 12.1538 14.2141 12.1538 13.75C12.6435 13.75 13.1131 13.5656 13.4593 13.2374C13.8055 12.9092 14 12.4641 14 12V3.25C14 2.78587 13.8055 2.34075 13.4593 2.01256C13.1131 1.68437 12.6435 1.5 12.1538 1.5ZM12.1538 12.875V5C12.1538 4.53587 11.9593 4.09075 11.6131 3.76256C11.2669 3.43437 10.7973 3.25 10.3077 3.25H4.76923C4.76923 3.01794 4.86648 2.79538 5.03959 2.63128C5.2127 2.46719 5.44749 2.375 5.69231 2.375H12.1538C12.3987 2.375 12.6334 2.46719 12.8066 2.63128C12.9797 2.79538 13.0769 3.01794 13.0769 3.25V12C13.0769 12.2321 12.9797 12.4546 12.8066 12.6187C12.6334 12.7828 12.3987 12.875 12.1538 12.875ZM2.92308 5C2.92308 4.76794 3.02033 4.54538 3.19344 4.38128C3.36655 4.21719 3.60134 4.125 3.84615 4.125H10.3077C10.5525 4.125 10.7873 4.21719 10.9604 4.38128C11.1335 4.54538 11.2308 4.76794 11.2308 5V13.75C11.2308 13.9821 11.1335 14.2046 10.9604 14.3687C10.7873 14.5328 10.5525 14.625 10.3077 14.625H3.84615C3.60134 14.625 3.36655 14.5328 3.19344 14.3687C3.02033 14.2046 2.92308 13.9821 2.92308 13.75V5Z"
- fill="var(--icon-default-color)"
+ fill="var(--text-color)"
/>
</svg>
);
@@ -70,103 +70,103 @@ export function TutorialsIcon() {
cx="8.157"
cy="8.35866"
r="6.17928"
- stroke="var(--icon-default-color)"
+ stroke="var(--text-color)"
strokeWidth="0.562865"
/>
<path
d="M7.31894 7.8336L7.30273 7.72125C10.0583 7.32407 11.5796 5.74901 12.1058 5.09033L12.1945 5.1612C11.6598 5.83032 10.1146 7.43067 7.31894 7.8336Z"
- fill="var(--icon-default-color)"
- stroke="var(--icon-default-color)"
+ fill="var(--text-color)"
+ stroke="var(--text-color)"
strokeWidth="0.562865"
/>
<path
d="M7.3313 8.19434C7.56713 8.19434 7.7583 8.00316 7.7583 7.76734C7.7583 7.53151 7.56713 7.34033 7.3313 7.34033C7.09547 7.34033 6.9043 7.53151 6.9043 7.76734C6.9043 8.00316 7.09547 8.19434 7.3313 8.19434Z"
- fill="var(--icon-default-color)"
- stroke="var(--icon-default-color)"
+ fill="var(--text-color)"
+ stroke="var(--text-color)"
strokeWidth="0.562865"
/>
<path
d="M12.134 5.56787C12.3699 5.56787 12.561 5.3767 12.561 5.14087C12.561 4.90504 12.3699 4.71387 12.134 4.71387C11.8982 4.71387 11.707 4.90504 11.707 5.14087C11.707 5.3767 11.8982 5.56787 12.134 5.56787Z"
- fill="var(--icon-default-color)"
- stroke="var(--icon-default-color)"
+ fill="var(--text-color)"
+ stroke="var(--text-color)"
strokeWidth="0.562865"
/>
<path
d="M5.67763 13.0492C5.15009 12.385 4.31304 10.9992 4.63359 9.18018L4.74534 9.20001C4.43251 10.9751 5.25078 12.3292 5.76636 12.9785L5.67763 13.0492Z"
- fill="var(--icon-default-color)"
- stroke="var(--icon-default-color)"
+ fill="var(--text-color)"
+ stroke="var(--text-color)"
strokeWidth="0.562865"
/>
<path
d="M4.68921 9.63867C4.92504 9.63867 5.11621 9.4475 5.11621 9.21167C5.11621 8.97584 4.92504 8.78467 4.68921 8.78467C4.45338 8.78467 4.26221 8.97584 4.26221 9.21167C4.26221 9.4475 4.45338 9.63867 4.68921 9.63867Z"
- fill="var(--icon-default-color)"
- stroke="var(--icon-default-color)"
+ fill="var(--text-color)"
+ stroke="var(--text-color)"
strokeWidth="0.562865"
/>
<path
d="M5.70923 13.4238C5.94506 13.4238 6.13623 13.2327 6.13623 12.9968C6.13623 12.761 5.94506 12.5698 5.70923 12.5698C5.4734 12.5698 5.28223 12.761 5.28223 12.9968C5.28223 13.2327 5.4734 13.4238 5.70923 13.4238Z"
- fill="var(--icon-default-color)"
- stroke="var(--icon-default-color)"
+ fill="var(--text-color)"
+ stroke="var(--text-color)"
strokeWidth="0.562865"
/>
<path
d="M12.4429 9.6101L12.3293 9.60692C12.369 8.18736 11.8263 6.82867 10.801 5.7813C9.73352 4.69047 8.2434 4.07147 6.70876 4.0804L6.70801 3.96684C8.27081 3.96078 9.79333 4.58917 10.8822 5.70181C11.9291 6.77143 12.4833 8.1595 12.4429 9.6101Z"
- fill="var(--icon-default-color)"
- stroke="var(--icon-default-color)"
+ fill="var(--text-color)"
+ stroke="var(--text-color)"
strokeWidth="0.562865"
/>
<path
d="M12.3792 10.0142C12.615 10.0142 12.8062 9.82299 12.8062 9.58716C12.8062 9.35133 12.615 9.16016 12.3792 9.16016C12.1433 9.16016 11.9521 9.35133 11.9521 9.58716C11.9521 9.82299 12.1433 10.0142 12.3792 10.0142Z"
- fill="var(--icon-default-color)"
- stroke="var(--icon-default-color)"
+ fill="var(--text-color)"
+ stroke="var(--text-color)"
strokeWidth="0.562865"
/>
<path
d="M6.72974 4.4585C6.96556 4.4585 7.15674 4.26732 7.15674 4.0315C7.15674 3.79567 6.96556 3.60449 6.72974 3.60449C6.49391 3.60449 6.30273 3.79567 6.30273 4.0315C6.30273 4.26732 6.49391 4.4585 6.72974 4.4585Z"
- fill="var(--icon-default-color)"
- stroke="var(--icon-default-color)"
+ fill="var(--text-color)"
+ stroke="var(--text-color)"
strokeWidth="0.562865"
/>
<path
d="M8.93738 12.7561C5.51197 12.5871 3.18964 10.3443 2.15833 8.30167C1.40017 6.79989 1.28161 5.33657 1.84898 4.48256C2.21511 3.93139 2.7529 3.64179 3.57572 3.69903L3.45825 3.81649C2.67632 3.76183 2.28567 4.03042 1.94346 4.5454C1.39865 5.36549 1.51979 6.78505 2.25963 8.25049C3.27641 10.2647 5.56617 12.476 8.94298 12.6426L8.93738 12.7561Z"
- fill="var(--icon-default-color)"
- stroke="var(--icon-default-color)"
+ fill="var(--text-color)"
+ stroke="var(--text-color)"
strokeWidth="0.562865"
/>
<path
d="M4.12372 13.5272C2.54078 13.2677 1.46328 11.9915 1.38697 10.4835C1.31368 9.03292 2.2066 7.3084 4.36675 6.72559L4.39628 6.83521C2.2973 7.40152 1.42936 9.07259 1.50053 10.4778C1.54767 11.4101 2.02721 12.4642 3.18398 12.9967C3.46147 13.1244 3.45807 13.0965 3.77132 13.2139L4.12372 13.5272Z"
- fill="var(--icon-default-color)"
- stroke="var(--icon-default-color)"
+ fill="var(--text-color)"
+ stroke="var(--text-color)"
strokeWidth="0.562865"
/>
<path
d="M4.36157 7.21436C4.5974 7.21436 4.78858 7.02318 4.78858 6.78735C4.78858 6.55153 4.5974 6.36035 4.36157 6.36035C4.12575 6.36035 3.93457 6.55153 3.93457 6.78735C3.93457 7.02318 4.12575 7.21436 4.36157 7.21436Z"
- fill="var(--icon-default-color)"
- stroke="var(--icon-default-color)"
+ fill="var(--text-color)"
+ stroke="var(--text-color)"
strokeWidth="0.562865"
/>
<path
d="M11.5155 15.1026C11.4663 15.1026 11.4165 15.1003 11.3659 15.0956C10.4065 15.0064 9.53752 14.1202 9.04102 12.7247L9.14807 12.6865C9.62928 14.0393 10.4622 14.8976 11.3764 14.9825C11.8685 15.0293 12.3041 14.8309 12.5152 14.4681C12.7337 14.0928 12.7265 13.7453 12.3977 13.2744L12.5152 13.1569C12.8703 13.6657 12.8548 14.1099 12.6133 14.5252C12.4016 14.8889 11.9895 15.1026 11.5155 15.1026Z"
- fill="var(--icon-default-color)"
- stroke="var(--icon-default-color)"
+ fill="var(--text-color)"
+ stroke="var(--text-color)"
strokeWidth="0.562865"
/>
<path
d="M8.9187 13.1187C9.15453 13.1187 9.34571 12.9275 9.34571 12.6917C9.34571 12.4558 9.15453 12.2646 8.9187 12.2646C8.68287 12.2646 8.4917 12.4558 8.4917 12.6917C8.4917 12.9275 8.68287 13.1187 8.9187 13.1187Z"
- fill="var(--icon-default-color)"
- stroke="var(--icon-default-color)"
+ fill="var(--text-color)"
+ stroke="var(--text-color)"
strokeWidth="0.562865"
/>
<path
d="M10.0987 3.65056L9.99072 3.61513C10.2487 2.83274 10.7045 2.32867 11.2414 2.23252C11.572 2.17286 11.8969 2.28566 12.0886 2.52597C12.2781 2.76339 12.4042 2.98817 12.2684 3.30782L12.1509 3.19035C12.2699 2.91023 12.1625 2.80064 12.0001 2.59683C11.8344 2.38923 11.5514 2.29248 11.2616 2.34441C10.7669 2.43284 10.3432 2.90906 10.0987 3.65056Z"
- fill="var(--icon-default-color)"
- stroke="var(--icon-default-color)"
+ fill="var(--text-color)"
+ stroke="var(--text-color)"
strokeWidth="0.562865"
/>
<path
d="M10.0535 4.04004C10.2893 4.04004 10.4805 3.84887 10.4805 3.61304C10.4805 3.37721 10.2893 3.18604 10.0535 3.18604C9.81764 3.18604 9.62646 3.37721 9.62646 3.61304C9.62646 3.84887 9.81764 4.04004 10.0535 4.04004Z"
- fill="var(--icon-default-color)"
- stroke="var(--icon-default-color)"
+ fill="var(--text-color)"
+ stroke="var(--text-color)"
strokeWidth="0.562865"
/>
</svg>
@@ -184,12 +184,12 @@ export function DocumentationIcon() {
>
<path
d="M8 5.10589C7.2666 4.17245 6.13604 3.23901 3.33413 3.17051C3.15009 3.16602 3 3.3155 3 3.4996C3 4.86525 3 10.0354 3 11.5645C3 11.7486 3.1501 11.8932 3.33409 11.8992C6.13603 11.9908 7.2666 13.233 8 14.1665M8 5.10589C8.7334 4.17245 9.86393 3.23901 12.6659 3.17051C12.8499 3.16602 13 3.31214 13 3.49624C13 5.02281 13 10.0374 13 11.564C13 11.7481 12.8499 11.8932 12.6659 11.8992C9.864 11.9908 8.7334 13.233 8 14.1665M8 5.10589V14.1665"
- stroke="var(--icon-default-color)"
+ stroke="var(--text-color)"
strokeLinejoin="round"
/>
<path
d="M12.8232 4.5H14.333C14.5171 4.5 14.6663 4.64924 14.6663 4.83333V13.526C14.6663 13.7957 14.3485 13.9749 14.102 13.8654C13.5719 13.6299 12.6873 13.3421 11.5291 13.3421C9.56827 13.3421 7.99967 14.5 7.99967 14.5C7.99967 14.5 6.43105 13.3421 4.47026 13.3421C3.31197 13.3421 2.42738 13.6299 1.89732 13.8654C1.65079 13.9749 1.33301 13.7957 1.33301 13.526V4.83333C1.33301 4.64924 1.48225 4.5 1.66634 4.5H3.17615"
- stroke="var(--icon-default-color)"
+ stroke="var(--text-color)"
strokeLinejoin="round"
/>
</svg>
@@ -208,7 +208,7 @@ export function HelpIcon() {
<g clipPath="url(#clip0_764_1941)">
<path
d="M6 12.5C2.6862 12.5 0 9.8138 0 6.5C0 3.1862 2.6862 0.5 6 0.5C9.3138 0.5 12 3.1862 12 6.5C12 9.8138 9.3138 12.5 6 12.5ZM3.552 4.8404V4.9016C3.552 4.98117 3.58361 5.05747 3.63987 5.11373C3.69613 5.16999 3.77244 5.2016 3.852 5.2016H4.4502C4.48952 5.2016 4.52845 5.19386 4.56478 5.17881C4.6011 5.16376 4.63411 5.14171 4.66191 5.11391C4.68971 5.08611 4.71176 5.0531 4.72681 5.01678C4.74186 4.98045 4.7496 4.94152 4.7496 4.9022C4.7496 4.1282 5.3484 3.7148 6.1536 3.7148C6.9384 3.7148 7.4544 4.1282 7.4544 4.7168C7.4544 5.2736 7.1652 5.5322 6.4428 5.8628L6.2364 5.9552C5.6274 6.224 5.4 6.626 5.4 7.3286V7.4C5.4 7.47957 5.43161 7.55587 5.48787 7.61213C5.54413 7.66839 5.62044 7.7 5.7 7.7H6.2982C6.33752 7.7 6.37645 7.69226 6.41278 7.67721C6.4491 7.66216 6.48211 7.64011 6.50991 7.61231C6.53771 7.58451 6.55976 7.5515 6.57481 7.51518C6.58986 7.47885 6.5976 7.43992 6.5976 7.4006C6.5976 7.091 6.6804 6.9668 6.9276 6.8534L7.1346 6.7604C8.0016 6.368 8.652 5.852 8.652 4.7264V4.6646C8.652 3.4778 7.62 2.6 6.1536 2.6C4.6668 2.6 3.552 3.4568 3.552 4.8404ZM5.1 9.4946C5.1 10.0148 5.4954 10.4 5.9946 10.4C6.5046 10.4 6.9 10.0148 6.9 9.4946C6.9 8.9744 6.5046 8.6 5.9946 8.6C5.4954 8.6 5.1 8.9744 5.1 9.4946Z"
- fill="var(--icon-default-color)"
+ fill="var(--text-color)"
/>
</g>
<defs>
@@ -236,17 +236,17 @@ export function LogoutIcon() {
>
<path
d="M4 3.5C4.00605 2.41248 4.05428 1.82353 4.43847 1.43934C4.87781 1 5.58489 1 6.99914 1H7.49914C8.91334 1 9.62044 1 10.0598 1.43934C10.4991 1.87868 10.4991 2.58578 10.4991 4V8C10.4991 9.4142 10.4991 10.1213 10.0598 10.5606C9.62044 11 8.91334 11 7.49914 11H6.99914C5.58489 11 4.87781 11 4.43847 10.5606C4.05428 10.1764 4.00605 9.5875 4 8.5"
- stroke="var(--icon-default-color)"
+ stroke="var(--text-color)"
strokeLinecap="round"
/>
<path
opacity="0.5"
d="M4 9.75C2.82149 9.75 2.23223 9.75 1.86611 9.3839C1.5 9.01775 1.5 8.4285 1.5 7.25V4.75C1.5 3.57149 1.5 2.98224 1.86611 2.61612C2.23223 2.25 2.82149 2.25 4 2.25"
- stroke="var(--icon-default-color)"
+ stroke="var(--text-color)"
/>
<path
d="M7.5 6H3M3 6L4 7M3 6L4 5"
- stroke="var(--icon-default-color)"
+ stroke="var(--text-color)"
strokeLinecap="round"
strokeLinejoin="round"
/>
diff --git a/app/src/components/icons/ExportCommonIcons.tsx b/app/src/components/icons/ExportCommonIcons.tsx
index c78261e..9a9d96c 100644
--- a/app/src/components/icons/ExportCommonIcons.tsx
+++ b/app/src/components/icons/ExportCommonIcons.tsx
@@ -24,7 +24,7 @@ export function ArrowIcon() {
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
- <path d="M4 5L6.5 7.51615L9 5L4 5Z" fill="var(--icon-default-color-active)" />
+ <path d="M4 5L6.5 7.51615L9 5L4 5Z" fill="var(--text-color)" />
</svg>
);
}
@@ -40,14 +40,14 @@ export function FocusIcon() {
>
<path
d="M7.31999 1.56H9.89999C10.0325 1.56 10.14 1.66745 10.14 1.8V4.14M10.14 7.5V9.9C10.14 10.0325 10.0325 10.14 9.89999 10.14H7.31999M4.55999 10.14H1.91999C1.78744 10.14 1.67999 10.0325 1.67999 9.9V7.5M1.67999 4.14V1.8C1.67999 1.66745 1.78744 1.56 1.91999 1.56H4.55999"
- stroke="var(--icon-default-color)"
+ stroke="var(--text-color)"
strokeLinecap="round"
/>
<circle
cx="6"
cy="5.87999"
r="0.95"
- stroke="var(--icon-default-color)"
+ stroke="var(--text-color)"
strokeWidth="0.5"
/>
</svg>
@@ -65,7 +65,7 @@ export function LockIcon({ isLocked }: { isLocked: boolean }) {
>
<path
d="M3.5 5.0144C3.73571 5 4.0263 5 4.4 5H7.6C7.9737 5 8.2643 5 8.5 5.0144M3.5 5.0144C3.20584 5.03235 2.99715 5.07275 2.81902 5.1635C2.53677 5.3073 2.3073 5.53675 2.16349 5.819C2 6.1399 2 6.5599 2 7.4V8.1C2 8.9401 2 9.3601 2.16349 9.681C2.3073 9.96325 2.53677 10.1927 2.81902 10.3365C3.13988 10.5 3.55992 10.5 4.4 10.5H7.6C8.4401 10.5 8.8601 10.5 9.181 10.3365C9.46325 10.1927 9.6927 9.96325 9.8365 9.681C10 9.3601 10 8.9401 10 8.1V7.4C10 6.5599 10 6.1399 9.8365 5.819C9.6927 5.53675 9.46325 5.3073 9.181 5.1635C9.00285 5.07275 8.79415 5.03235 8.5 5.0144M3.5 5.0144V4C3.5 2.61929 4.61929 1.5 6 1.5C7.3807 1.5 8.5 2.61929 8.5 4V5.0144"
- stroke="var(--icon-default-color)"
+ stroke="var(--text-color)"
strokeLinecap="round"
strokeLinejoin="round"
/>
@@ -80,7 +80,7 @@ export function LockIcon({ isLocked }: { isLocked: boolean }) {
>
<path
d="M8.292 3C7.9062 2.11705 7.02515 1.5 6 1.5C4.61929 1.5 3.5 2.61929 3.5 4V5.0144M3.5 5.0144C3.73571 5 4.0263 5 4.4 5H7.6C8.4401 5 8.8601 5 9.181 5.1635C9.46325 5.3073 9.6927 5.53675 9.8365 5.819C10 6.1399 10 6.5599 10 7.4V8.1C10 8.9401 10 9.3601 9.8365 9.681C9.6927 9.96325 9.46325 10.1927 9.181 10.3365C8.8601 10.5 8.4401 10.5 7.6 10.5H4.4C3.55992 10.5 3.13988 10.5 2.81902 10.3365C2.53677 10.1927 2.3073 9.96325 2.16349 9.681C2 9.3601 2 8.9401 2 8.1V7.4C2 6.5599 2 6.1399 2.16349 5.819C2.3073 5.53675 2.53677 5.3073 2.81902 5.1635C2.99715 5.07275 3.20584 5.03235 3.5 5.0144Z"
- stroke="var(--icon-default-color)"
+ stroke="var(--text-color)"
strokeLinecap="round"
strokeLinejoin="round"
/>
@@ -100,7 +100,7 @@ export function EyeIcon({ isClosed }: { isClosed: boolean }) {
<g clipPath="url(#clip0_889_1582)">
<path
d="M1.52462 4.65539C1.50864 4.60647 1.5 4.55424 1.5 4.5C1.5 4.22386 1.72386 4 2 4C2.22985 4 2.42348 4.1551 2.48194 4.36634C3.52484 7.8593 8.4728 7.8601 9.5174 4.36868C9.5751 4.15624 9.7693 4 10 4C10.2761 4 10.5 4.22386 10.5 4.5C10.5 4.5534 10.4916 4.60485 10.4761 4.6531C10.2758 5.3241 9.96205 5.8938 9.56935 6.3622L10.2072 7C10.4024 7.19525 10.4024 7.51185 10.2072 7.7071C10.0119 7.90235 9.6953 7.90235 9.50005 7.7071L8.84435 7.0514C8.48725 7.3213 8.0956 7.53275 7.6843 7.6858L7.8632 8.35355C7.9347 8.6203 7.7764 8.89445 7.50965 8.9659C7.2429 9.0374 6.96875 8.8791 6.8973 8.61235L6.71555 7.9341C6.2418 8.0042 5.7582 8.0042 5.28445 7.9341L5.1027 8.61235C5.03125 8.8791 4.75708 9.0374 4.49035 8.9659C4.22361 8.89445 4.06533 8.6203 4.1368 8.35355L4.31572 7.6858C3.90446 7.53275 3.5128 7.3213 3.15573 7.05145L2.50009 7.7071C2.30482 7.90235 1.98824 7.90235 1.79298 7.7071C1.59771 7.51185 1.59771 7.19525 1.79298 7L2.43074 6.36225C2.03845 5.89435 1.72505 5.3254 1.52462 4.65539Z"
- fill="var(--icon-default-color)"
+ fill="var(--text-color)"
/>
</g>
<defs>
@@ -119,13 +119,13 @@ export function EyeIcon({ isClosed }: { isClosed: boolean }) {
>
<path
d="M7.50035 6C7.50035 6.82845 6.8288 7.5 6.00035 7.5C5.17195 7.5 4.50036 6.82845 4.50036 6C4.50036 5.17155 5.17195 4.5 6.00035 4.5C6.8288 4.5 7.50035 5.17155 7.50035 6Z"
- stroke="var(--icon-default-color)"
+ stroke="var(--text-color)"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M6.0006 2.5C3.76177 2.5 1.86663 3.97144 1.22949 6C1.86662 8.02855 3.76177 9.5 6.0006 9.5C8.2394 9.5 10.1345 8.02855 10.7717 6C10.1345 3.97146 8.2394 2.5 6.0006 2.5Z"
- stroke="var(--icon-default-color)"
+ stroke="var(--text-color)"
strokeLinecap="round"
strokeLinejoin="round"
/>
@@ -142,9 +142,9 @@ export function KebebIcon() {
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
- <circle cx="6" cy="3" r="1" fill="var(--icon-default-color)" />
- <circle cx="6" cy="6" r="1" fill="var(--icon-default-color)" />
- <circle cx="6" cy="9" r="1" fill="var(--icon-default-color)" />
+ <circle cx="6" cy="3" r="1" fill="var(--text-color)" />
+ <circle cx="6" cy="6" r="1" fill="var(--text-color)" />
+ <circle cx="6" cy="9" r="1" fill="var(--text-color)" />
</svg>
);
}
@@ -160,7 +160,7 @@ export function AddIcon() {
>
<path
d="M6 2L6 10M2 6H10"
- stroke="var(--icon-default-color)"
+ stroke="var(--text-color)"
strokeWidth="0.705882"
strokeLinecap="round"
/>
@@ -179,12 +179,12 @@ export function CloseIcon() {
>
<path
d="M3.87868 8.62132L8.12132 4.37868"
- stroke="var(--icon-default-color)"
+ stroke="var(--text-color)"
strokeLinecap="round"
/>
<path
d="M3.87866 4.37868L8.1213 8.62132"
- stroke="var(--icon-default-color)"
+ stroke="var(--text-color)"
strokeLinecap="round"
/>
</svg>
@@ -203,11 +203,11 @@ export function SettingsIcon() {
<g clipPath="url(#clip0_111_481)">
<path
d="M6 7.5C6.82843 7.5 7.5 6.82843 7.5 6C7.5 5.17157 6.82843 4.5 6 4.5C5.17157 4.5 4.5 5.17157 4.5 6C4.5 6.82843 5.17157 7.5 6 7.5Z"
- stroke="var(--icon-default-color)"
+ stroke="var(--text-color)"
/>
<path
d="M6.8827 1.07612C6.6989 1 6.46595 1 6 1C5.53405 1 5.3011 1 5.1173 1.07612C4.87228 1.17761 4.67761 1.37229 4.57611 1.61731C4.52978 1.72917 4.51165 1.85925 4.50455 2.04899C4.49413 2.32784 4.35113 2.58594 4.10947 2.72546C3.86782 2.86498 3.57279 2.85977 3.32609 2.72938C3.15822 2.64065 3.0365 2.59131 2.91647 2.57551C2.65352 2.54089 2.38759 2.61214 2.17718 2.7736C2.01937 2.89469 1.90288 3.09645 1.66991 3.49996C1.43694 3.90348 1.32046 4.10524 1.29449 4.30245C1.25988 4.5654 1.33113 4.83133 1.49259 5.04175C1.56628 5.1378 1.66985 5.2185 1.83059 5.3195C2.0669 5.468 2.21894 5.72095 2.21893 6C2.21891 6.27905 2.06687 6.53195 1.83059 6.6804C1.66982 6.78145 1.56624 6.8622 1.49254 6.95825C1.33108 7.16865 1.25983 7.43455 1.29445 7.6975C1.32041 7.8947 1.43689 8.0965 1.66986 8.5C1.90284 8.9035 2.01932 9.1053 2.17713 9.22635C2.38754 9.3878 2.65347 9.45905 2.91642 9.42445C3.03644 9.40865 3.15816 9.3593 3.32602 9.2706C3.57273 9.1402 3.86778 9.135 4.10945 9.2745C4.35112 9.41405 4.49413 9.67215 4.50455 9.95105C4.51165 10.1407 4.52978 10.2708 4.57611 10.3827C4.67761 10.6277 4.87228 10.8224 5.1173 10.9239C5.3011 11 5.53405 11 6 11C6.46595 11 6.6989 11 6.8827 10.9239C7.1277 10.8224 7.3224 10.6277 7.42385 10.3827C7.4702 10.2708 7.48835 10.1407 7.49545 9.951C7.50585 9.67215 7.64885 9.41405 7.8905 9.2745C8.13215 9.13495 8.4272 9.1402 8.67395 9.2706C8.8418 9.3593 8.9635 9.4086 9.0835 9.4244C9.34645 9.45905 9.6124 9.3878 9.8228 9.22635C9.9806 9.10525 10.0971 8.9035 10.33 8.49995C10.563 8.09645 10.6795 7.8947 10.7055 7.6975C10.7401 7.43455 10.6688 7.1686 10.5074 6.9582C10.4337 6.86215 10.3301 6.7814 10.1693 6.6804C9.9331 6.53195 9.78105 6.279 9.78105 5.99995C9.78105 5.7209 9.9331 5.46805 10.1693 5.3196C10.3301 5.21855 10.4337 5.13785 10.5074 5.04175C10.6689 4.83136 10.7401 4.56543 10.7055 4.30248C10.6796 4.10527 10.5631 3.90351 10.3301 3.5C10.0971 3.09648 9.98065 2.89472 9.82285 2.77363C9.61245 2.61218 9.3465 2.54092 9.08355 2.57554C8.96355 2.59134 8.84185 2.64068 8.67395 2.7294C8.42725 2.85979 8.1322 2.86501 7.89055 2.72548C7.64885 2.58595 7.50585 2.32783 7.49545 2.04897C7.48835 1.85924 7.4702 1.72916 7.42385 1.61731C7.3224 1.37229 7.1277 1.17761 6.8827 1.07612Z"
- stroke="var(--icon-default-color)"
+ stroke="var(--text-color)"
/>
</g>
<defs>
@@ -255,7 +255,7 @@ export function TrashIcon() {
<g clipPath="url(#clip0_111_486)">
<path
d="M4.70587 5.32353V9.02941M7.17646 5.32353V9.02941M9.64704 2.85294V10.2647C9.64704 10.947 9.094 11.5 8.41175 11.5H3.47057C2.78834 11.5 2.23528 10.947 2.23528 10.2647V2.85294M0.999985 2.85294H10.8823M7.7941 2.85294V2.23529C7.7941 1.55306 7.24106 1 6.55881 1H5.32351C4.64128 1 4.08822 1.55306 4.08822 2.23529V2.85294"
- stroke="var(--icon-default-color)"
+ stroke="var(--text-color)"
strokeLinecap="round"
strokeLinejoin="round"
/>
@@ -280,32 +280,32 @@ export function FilterIcon() {
>
<path
d="M6.86655 10V3.33333"
- stroke="var(--icon-default-color)"
+ stroke="var(--text-color)"
strokeLinecap="round"
/>
<path
d="M6.86655 16.6666V13.3333"
- stroke="var(--icon-default-color)"
+ stroke="var(--text-color)"
strokeLinecap="round"
/>
<path
d="M13.0667 5.83336V3.33336"
- stroke="var(--icon-default-color)"
+ stroke="var(--text-color)"
strokeLinecap="round"
/>
<path
d="M13.0667 16.6666V9.16664"
- stroke="var(--icon-default-color)"
+ stroke="var(--text-color)"
strokeLinecap="round"
/>
<path
d="M6.86666 13.3333C7.78714 13.3333 8.53333 12.5871 8.53333 11.6667C8.53333 10.7462 7.78714 10 6.86666 10C5.94619 10 5.2 10.7462 5.2 11.6667C5.2 12.5871 5.94619 13.3333 6.86666 13.3333Z"
- stroke="var(--icon-default-color)"
+ stroke="var(--text-color)"
strokeLinecap="round"
/>
<path
d="M13.0667 9.16669C13.9871 9.16669 14.7333 8.4205 14.7333 7.50003C14.7333 6.57955 13.9871 5.83336 13.0667 5.83336C12.1462 5.83336 11.4 6.57955 11.4 7.50003C11.4 8.4205 12.1462 9.16669 13.0667 9.16669Z"
- stroke="var(--icon-default-color)"
+ stroke="var(--text-color)"
strokeLinecap="round"
/>
</svg>
@@ -324,7 +324,7 @@ export function EyeDroperIcon({ isActive }: { isActive: boolean }) {
<path
d="M6.5625 3.5L10.0625 7"
stroke={
- isActive ? "var(--highlight-accent-color)" : "var(--icon-default-color)"
+ isActive ? "var(--icon-default-color-active)" : "var(--text-color)"
}
strokeWidth="0.875"
strokeMiterlimit="10"
@@ -334,7 +334,7 @@ export function EyeDroperIcon({ isActive }: { isActive: boolean }) {
<path
d="M7.4375 4.37266L10.0625 1.74766C10.5437 1.26641 11.3312 1.26641 11.8125 1.74766C12.2937 2.22891 12.2937 3.01641 11.8125 3.49766L9.1875 6.12266"
stroke={
- isActive ? "var(--highlight-accent-color)" : "var(--icon-default-color)"
+ isActive ? "var(--icon-default-color-active)" : "var(--text-color)"
}
strokeWidth="0.875"
strokeMiterlimit="10"
@@ -344,7 +344,7 @@ export function EyeDroperIcon({ isActive }: { isActive: boolean }) {
<path
d="M7.30625 4.50391L2.49375 9.31641C2.23125 9.57891 2.14375 9.88516 2.14375 10.2352C1.925 10.3664 1.75 10.6289 1.75 10.9352C1.75 11.4164 2.14375 11.8102 2.625 11.8102C2.93125 11.8102 3.19375 11.6352 3.36875 11.4164C3.675 11.4164 4.025 11.2852 4.2875 11.0664L9.1 6.25391"
stroke={
- isActive ? "var(--highlight-accent-color)" : "var(--icon-default-color)"
+ isActive ? "var(--icon-default-color-active)" : "var(--text-color)"
}
strokeWidth="0.875"
strokeMiterlimit="10"
@@ -366,7 +366,7 @@ export function TickIcon() {
>
<path
d="M3 6.5L4.84616 8.5L9 4"
- stroke="var(--icon-default-color)"
+ stroke="var(--text-color)"
strokeLinecap="round"
strokeLinejoin="round"
/>
@@ -442,7 +442,7 @@ export function RemoveIcon() {
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
- <path d="M3 6.5H9" stroke="var(--icon-default-color)" strokeLinecap="round" />
+ <path d="M3 6.5H9" stroke="var(--text-color)" strokeLinecap="round" />
</svg>
);
}
@@ -462,7 +462,7 @@ export function InfoIcon() {
/>
<path
d="M6.00006 10.3175C8.45219 10.3175 10.4401 8.32963 10.4401 5.8775C10.4401 3.42536 8.45219 1.4375 6.00006 1.4375C3.54792 1.4375 1.56006 3.42536 1.56006 5.8775C1.56006 8.32963 3.54792 10.3175 6.00006 10.3175Z"
- stroke="var(--icon-default-color)"
+ stroke="var(--text-color)"
strokeWidth="0.72"
strokeLinecap="round"
strokeLinejoin="round"
@@ -512,21 +512,21 @@ export const KebabIcon = () => {
cy="1.35112"
rx="1.4993"
ry="1.27477"
- fill="var(--icon-default-color)"
+ fill="var(--text-color)"
/>
<ellipse
cx="6.04868"
cy="1.35131"
rx="1.4993"
ry="1.27477"
- fill="var(--icon-default-color)"
+ fill="var(--text-color)"
/>
<ellipse
cx="10.5476"
cy="1.35131"
rx="1.4993"
ry="1.27477"
- fill="var(--icon-default-color)"
+ fill="var(--text-color)"
/>
</svg>
);
@@ -562,31 +562,31 @@ export const DeleteIcon = () => {
>
<path
d="M8.33301 10V13.3334"
- stroke="var(--icon-default-color)"
+ stroke="var(--text-color)"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M11 10V13.3334"
- stroke="var(--icon-default-color)"
+ stroke="var(--text-color)"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M4.33301 6.66406H15"
- stroke="var(--icon-default-color)"
+ stroke="var(--text-color)"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M5.66699 8.66406V13.9976C5.66699 15.1022 6.56245 15.9976 7.66705 15.9976H11.6672C12.7718 15.9976 13.6672 15.1022 13.6672 13.9976V8.66406"
- stroke="var(--icon-default-color)"
+ stroke="var(--text-color)"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M7.66699 5.33337C7.66699 4.59697 8.26396 4 9.00037 4H10.3337C11.0702 4 11.6671 4.59697 11.6671 5.33337V6.66675H7.66699V5.33337Z"
- stroke="var(--icon-default-color)"
+ stroke="var(--text-color)"
strokeLinecap="round"
strokeLinejoin="round"
/>
@@ -784,21 +784,4 @@ export const SpeedIcon = () => {
</svg>
);
};
-// export const DublicateIcon = () => {
-// return (
-// <svg
-// width="20"
-// height="20"
-// viewBox="0 0 20 20"
-// fill="none"
-// xmlns="http://www.w3.org/2000/svg"
-// >
-// <path
-// fillRule="evenodd"
-// clipRule="evenodd"
-// d="M14.3125 11.375C14.3125 11.7545 14.0045 12.0625 13.625 12.0625H8.125C7.7455 12.0625 7.4375 11.7545 7.4375 11.375V5.875C7.4375 5.4955 7.7455 5.1875 8.125 5.1875H13.625C14.0045 5.1875 14.3125 5.4955 14.3125 5.875V11.375ZM13.625 4.5H8.125C7.36566 4.5 6.75 5.11566 6.75 5.875V11.375C6.75 12.1343 7.36566 12.75 8.125 12.75H13.625C14.3843 12.75 15 12.1343 15 11.375V5.875C15 5.11566 14.3843 4.5 13.625 4.5ZM11.5625 14.125C11.5625 14.5045 11.2545 14.8125 10.875 14.8125H5.375C4.9955 14.8125 4.6875 14.5045 4.6875 14.125V8.625C4.6875 8.2455 4.9955 7.9375 5.375 7.9375H6.0625V7.25H5.375C4.61566 7.25 4 7.86566 4 8.625V14.125C4 14.8843 4.61566 15.5 5.375 15.5H10.875C11.6343 15.5 12.25 14.8843 12.25 14.125V13.4375H11.5625V14.125Z"
-// fill="var(--text-color)"
-// />
-// </svg>
-// );
-// };
+
diff --git a/app/src/components/icons/ExportModuleIcons.tsx b/app/src/components/icons/ExportModuleIcons.tsx
index 1dda323..c1a8432 100644
--- a/app/src/components/icons/ExportModuleIcons.tsx
+++ b/app/src/components/icons/ExportModuleIcons.tsx
@@ -10,7 +10,7 @@ export function BuilderIcon({ isActive }: { isActive: boolean }) {
>
<path
d="M12.25 6.25C12.25 6.66421 11.9142 7 11.5 7H3.5C3.08579 7 2.75 6.66421 2.75 6.25V4.5C2.75 4.08579 3.08579 3.75 3.5 3.75H11.5C11.9142 3.75 12.25 4.08579 12.25 4.5V6.25ZM13.375 4.5C13.375 4.08579 13.7108 3.75 14.125 3.75H16.5C16.9142 3.75 17.25 4.08579 17.25 4.5V6.25C17.25 6.66421 16.9142 7 16.5 7H14.125C13.7108 7 13.375 6.66421 13.375 6.25V4.5ZM3.5 15.75C3.08579 15.75 2.75 15.4142 2.75 15V13.25C2.75 12.8358 3.08579 12.5 3.5 12.5H11.5C11.9142 12.5 12.25 12.8358 12.25 13.25V15C12.25 15.4142 11.9142 15.75 11.5 15.75H3.5ZM14.125 15.75C13.7108 15.75 13.375 15.4142 13.375 15V13.25C13.375 12.8358 13.7108 12.5 14.125 12.5H16.5C16.9142 12.5 17.25 12.8358 17.25 13.25V15C17.25 15.4142 16.9142 15.75 16.5 15.75H14.125ZM8.5 11.375C8.08579 11.375 7.75 11.0392 7.75 10.625V8.875C7.75 8.46079 8.08579 8.125 8.5 8.125H16.5C16.9142 8.125 17.25 8.46079 17.25 8.875V10.625C17.25 11.0392 16.9142 11.375 16.5 11.375H8.5ZM5.875 8.125C6.28921 8.125 6.625 8.46079 6.625 8.875V10.625C6.625 11.0392 6.28921 11.375 5.875 11.375H3.5C3.08579 11.375 2.75 11.0392 2.75 10.625V8.875C2.75 8.46079 3.08579 8.125 3.5 8.125H5.875Z"
- stroke={isActive ? "none" : "var(--icon-default-color-active)"}
+ stroke={isActive ? "none" : "var(--text-color)"}
fill={isActive ? "var(--icon-default-color-active)" : "none"}
strokeWidth="1"
/>
@@ -29,41 +29,41 @@ export function SimulationIcon({ isActive }: { isActive: boolean }) {
>
<path
d="M12.3077 11.3433C12.3077 11.874 12.1503 12.3927 11.8555 12.834C11.5607 13.2752 11.1416 13.6191 10.6513 13.8222C10.1611 14.0253 9.62157 14.0784 9.10109 13.9749C8.58061 13.8713 8.10252 13.6158 7.72728 13.2406C7.35204 12.8653 7.09649 12.3872 6.99296 11.8667C6.88943 11.3463 6.94257 10.8068 7.14565 10.3165C7.34873 9.82622 7.69263 9.40717 8.13387 9.11235C8.57511 8.81752 9.09387 8.66016 9.62454 8.66016C10.3362 8.66016 11.0186 8.94284 11.5218 9.44603C12.025 9.94921 12.3077 10.6317 12.3077 11.3433Z"
- stroke="var(--icon-default-color-active)"
- fill={isActive ? "var(--icon-default-color-active)" : "none"}
+ stroke={isActive ? "var(--icon-default-color-active)" : "var(--text-color)"}
+ fill={isActive ? "var(--text-color)" : "none"}
strokeWidth="1"
/>
<path
d="M9.62477 5.30814C10.3657 5.30814 10.9663 4.70749 10.9663 3.96657C10.9663 3.22564 10.3657 2.625 9.62477 2.625C8.88384 2.625 8.2832 3.22564 8.2832 3.96657C8.2832 4.70749 8.88384 5.30814 9.62477 5.30814Z"
- stroke="var(--icon-default-color-active)"
- fill={isActive ? "var(--icon-default-color-active)" : "none"}
+ stroke={isActive ? "var(--icon-default-color-active)" : "var(--text-color)"}
+ fill={isActive ? "var(--text-color)" : "none"}
strokeWidth="1"
/>
<path
d="M3.59157 17.3745C4.33249 17.3745 4.93314 16.7739 4.93314 16.033C4.93314 15.292 4.33249 14.6914 3.59157 14.6914C2.85064 14.6914 2.25 15.292 2.25 16.033C2.25 16.7739 2.85064 17.3745 3.59157 17.3745Z"
- stroke="var(--icon-default-color-active)"
- fill={isActive ? "var(--icon-default-color-active)" : "none"}
+ stroke={isActive ? "var(--icon-default-color-active)" : "var(--text-color)"}
+ fill={isActive ? "var(--text-color)" : "none"}
strokeWidth="1"
/>
<path
d="M15.658 17.3745C16.3989 17.3745 16.9995 16.7739 16.9995 16.033C16.9995 15.292 16.3989 14.6914 15.658 14.6914C14.917 14.6914 14.3164 15.292 14.3164 16.033C14.3164 16.7739 14.917 17.3745 15.658 17.3745Z"
- stroke="var(--icon-default-color-active)"
- fill={isActive ? "var(--icon-default-color-active)" : "none"}
+ stroke={isActive ? "var(--icon-default-color-active)" : "var(--text-color)"}
+ fill={isActive ? "var(--text-color)" : "none"}
strokeWidth="1"
/>
<path
d="M7.50308 12.9844L4.65137 15.211"
- stroke="var(--icon-default-color-active)"
+ stroke={isActive ? "var(--icon-default-color-active)" : "var(--text-color)"}
strokeWidth="1"
/>
<path
d="M14.5978 15.211L11.7461 12.9844"
- stroke="var(--icon-default-color-active)"
+ stroke={isActive ? "var(--icon-default-color-active)" : "var(--text-color)"}
strokeWidth="1"
/>
<path
d="M9.625 8.659V5.30859"
- stroke="var(--icon-default-color-active)"
+ stroke={isActive ? "var(--icon-default-color-active)" : "var(--text-color)"}
strokeWidth="1"
/>
</svg>
@@ -81,19 +81,19 @@ export function VisualizationIcon({ isActive }: { isActive: boolean }) {
>
<path
d="M10 3.33203V16.6654"
- stroke="var(--icon-default-color-active)"
+ stroke={isActive ? "var(--icon-default-color-active)" : "var(--text-color)"}
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M14.1665 7.5V16.6667"
- stroke="var(--icon-default-color-active)"
+ stroke={isActive ? "var(--icon-default-color-active)" : "var(--text-color)"}
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M5.8335 7.5V16.6667"
- stroke="var(--icon-default-color-active)"
+ stroke={isActive ? "var(--icon-default-color-active)" : "var(--text-color)"}
strokeLinecap="round"
strokeLinejoin="round"
/>
@@ -112,20 +112,20 @@ export function CartIcon({ isActive }: { isActive: boolean }) {
>
<path
d="M1.33337 2L1.50998 2.05887C2.39001 2.35221 2.83002 2.49888 3.08169 2.84807C3.33337 3.19725 3.33337 3.66106 3.33337 4.58869V6.33333C3.33337 8.21893 3.33337 9.16173 3.91916 9.74753C4.50495 10.3333 5.44775 10.3333 7.33337 10.3333H8.66671M12.6667 10.3333H11.3334"
- stroke="var(--icon-default-color-active)"
+ stroke={isActive ? "var(--icon-default-color-active)" : "var(--text-color)"}
strokeLinecap="round"
/>
<path
d="M5.00005 12C5.55233 12 6.00005 12.4477 6.00005 13C6.00005 13.5523 5.55233 14 5.00005 14C4.44776 14 4.00005 13.5523 4.00005 13C4.00005 12.4477 4.44776 12 5.00005 12Z"
- stroke="var(--icon-default-color-active)"
+ stroke={isActive ? "var(--icon-default-color-active)" : "var(--text-color)"}
/>
<path
d="M11 12C11.5523 12 12 12.4477 12 13C12 13.5523 11.5523 14 11 14C10.4478 14 10 13.5523 10 13C10 12.4477 10.4478 12 11 12Z"
- stroke="var(--icon-default-color-active)"
+ stroke={isActive ? "var(--icon-default-color-active)" : "var(--text-color)"}
/>
<path
d="M3.33337 4H5.33337M3.66671 8.66667H10.6812C11.3208 8.66667 11.6406 8.66667 11.8911 8.50153C12.1416 8.33633 12.2676 8.0424 12.5195 7.45453L12.8052 6.78787C13.3449 5.52863 13.6148 4.89902 13.3184 4.44951C13.0219 4 12.337 4 10.967 4H8.00004"
- stroke="var(--icon-default-color-active)"
+ stroke={isActive ? "var(--icon-default-color-active)" : "var(--text-color)"}
strokeLinecap="round"
/>
</svg>
diff --git a/app/src/components/icons/HeaderIcons.tsx b/app/src/components/icons/HeaderIcons.tsx
index ef02f02..c2a0f62 100644
--- a/app/src/components/icons/HeaderIcons.tsx
+++ b/app/src/components/icons/HeaderIcons.tsx
@@ -9,7 +9,7 @@ export function ProjectIcon() {
>
<path
d="M11 5.29844V4.51127C11 3.70744 10.2251 3.1309 9.45518 3.36188L5.85518 4.44188C5.3476 4.59416 5 5.06134 5 5.59127V13.4056C5 13.9355 5.3476 14.4027 5.85518 14.555L9.45518 15.635C10.2251 15.866 11 15.2894 11 14.4856V13.6984M11 5.29844H13.4C13.7314 5.29844 14 5.56707 14 5.89844V13.0984C14 13.4298 13.7314 13.6984 13.4 13.6984H11M11 5.29844V13.6984"
- stroke="var(--accent-color)"
+ stroke="var(--text-color)"
strokeWidth="1.2"
/>
</svg>
@@ -31,26 +31,26 @@ export function ToggleSidebarIcon() {
width="17"
height="13.7273"
rx="3.59091"
- stroke="var(--accent-color)"
+ stroke="var(--text-color)"
/>
<rect
x="8.72729"
y="5.45312"
width="0.818182"
height="13.0909"
- fill="var(--accent-color)"
+ fill="var(--text-color)"
/>
<circle
cx="6.27271"
cy="8.72834"
r="0.818182"
- fill="var(--accent-color)"
+ fill="var(--text-color)"
/>
<circle
cx="6.27271"
cy="11.1815"
r="0.818182"
- fill="var(--accent-color)"
+ fill="var(--text-color)"
/>
</svg>
);
diff --git a/app/src/components/icons/RealTimeVisulationIcons.tsx b/app/src/components/icons/RealTimeVisulationIcons.tsx
index d418247..84d8cca 100644
--- a/app/src/components/icons/RealTimeVisulationIcons.tsx
+++ b/app/src/components/icons/RealTimeVisulationIcons.tsx
@@ -10,43 +10,43 @@ export function CleanPannel() {
<g clipPath="url(#clip0_1782_1158)">
<path
d="M12 0H0V12H12V0Z"
- fill="var(--icon-default-color)"
+ fill="var(--text-color)"
fillOpacity="0.01"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M5 1.47852H7V3.47853H10.75V5.47853H1.25V3.47853H5V1.47852Z"
- stroke="var(--icon-default-color)"
+ stroke="var(--text-color)"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M2 10H10V5.5H2V10Z"
- stroke="var(--icon-default-color)"
+ stroke="var(--text-color)"
strokeLinejoin="round"
/>
<path
d="M4 9.97439V8.47852"
- stroke="var(--icon-default-color)"
+ stroke="var(--text-color)"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M6 9.97461V8.47461"
- stroke="var(--icon-default-color)"
+ stroke="var(--text-color)"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M8 9.97439V8.47852"
- stroke="var(--icon-default-color)"
+ stroke="var(--text-color)"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M3 10H9"
- stroke="var(--icon-default-color)"
+ stroke="var(--text-color)"
strokeLinecap="round"
strokeLinejoin="round"
/>
diff --git a/app/src/components/icons/marketPlaceIcons.tsx b/app/src/components/icons/marketPlaceIcons.tsx
index 6952ae1..5a9f293 100644
--- a/app/src/components/icons/marketPlaceIcons.tsx
+++ b/app/src/components/icons/marketPlaceIcons.tsx
@@ -52,13 +52,13 @@ export function EyeIconBig() {
>
<path
d="M2.75 11.918C6.05 4.58464 15.95 4.58464 19.25 11.918"
- stroke="var(--icon-default-color)"
+ stroke="var(--text-color)"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M11 15.5859C10.6389 15.5859 10.2813 15.5148 9.94762 15.3766C9.61398 15.2384 9.31082 15.0358 9.05546 14.7805C8.80009 14.5251 8.59753 14.222 8.45933 13.8883C8.32113 13.5547 8.25 13.1971 8.25 12.8359C8.25 12.4748 8.32113 12.1172 8.45933 11.7836C8.59753 11.4499 8.80009 11.1468 9.05546 10.8914C9.31082 10.636 9.61398 10.4335 9.94762 10.2953C10.2813 10.1571 10.6389 10.0859 11 10.0859C11.7293 10.0859 12.4288 10.3757 12.9445 10.8914C13.4603 11.4071 13.75 12.1066 13.75 12.8359C13.75 13.5653 13.4603 14.2648 12.9445 14.7805C12.4288 15.2962 11.7293 15.5859 11 15.5859Z"
- stroke="var(--icon-default-color)"
+ stroke="var(--text-color)"
strokeLinecap="round"
strokeLinejoin="round"
/>
@@ -80,7 +80,7 @@ export function CommentsIcon() {
fillRule="evenodd"
clipRule="evenodd"
d="M8 13C7.416 13 6.852 12.932 6.31 12.8165L3.956 14.2315L3.9875 11.912C2.183 10.827 1 9.033 1 7C1 3.6865 4.134 1 8 1C11.866 1 15 3.6865 15 7C15 10.314 11.866 13 8 13ZM8 0C3.582 0 0 3.1345 0 7C0 9.2095 1.1725 11.177 3 12.4595V16L6.5045 13.8735C6.9895 13.9535 7.4885 14 8 14C12.418 14 16 10.866 16 7C16 3.1345 12.418 0 8 0ZM11.5 5.5H4.5C4.224 5.5 4 5.724 4 6C4 6.2765 4.224 6.5 4.5 6.5H11.5C11.776 6.5 12 6.2765 12 6C12 5.724 11.776 5.5 11.5 5.5ZM10.5 8.5H5.5C5.224 8.5 5 8.7235 5 9C5 9.2765 5.224 9.5 5.5 9.5H10.5C10.776 9.5 11 9.2765 11 9C11 8.7235 10.776 8.5 10.5 8.5Z"
- fill="var(--icon-default-color)"
+ fill="var(--text-color)"
/>
</g>
<defs>
@@ -131,7 +131,7 @@ export function StarsIconSmall() {
);
}
-export function FiileedStarsIconSmall() {
+export function FilledStarsIconSmall() {
return (
<svg
width="11"
diff --git a/app/src/components/layout/sidebarLeft/Assets.tsx b/app/src/components/layout/sidebarLeft/Assets.tsx
index 66e185a..7288bb5 100644
--- a/app/src/components/layout/sidebarLeft/Assets.tsx
+++ b/app/src/components/layout/sidebarLeft/Assets.tsx
@@ -139,122 +139,130 @@ const Assets: React.FC = () => {
}
};
return (
- <div className="assets-container">
+ <div className="assets-container-main">
<Search onChange={handleSearchChange} />
- {searchValue ? (
- <div className="assets-result">
- <div className="assets-wrapper">
- <div className="searched-content">
- <p>Results for {searchValue}</p>
+ <div className="assets-list-section">
+ <section>
+ {searchValue ? (
+ <div className="assets-result">
+ <div className="assets-wrapper">
+ <div className="searched-content">
+ <p>Results for {searchValue}</p>
+ </div>
+ <div className="assets-container">
+ {categoryAssets &&
+ categoryAssets?.map((asset: any, index: number) => (
+ <div
+ key={index}
+ className="assets"
+ id={asset.filename}
+ title={asset.filename}
+ >
+ <img
+ src={asset?.thumbnail}
+ alt={asset.filename}
+ className="asset-image"
+ />
+
+ <div className="asset-name">
+ {asset.filename
+ .split("_")
+ .map(
+ (word: any) =>
+ word.charAt(0).toUpperCase() + word.slice(1)
+ )
+ .join(" ")}
+ </div>
+ </div>
+ ))}
+ </div>
+ </div>
</div>
- </div>
- <div className="assets-container">
- {categoryAssets &&
- categoryAssets?.map((asset: any, index: number) => (
+ ) : selectedCategory ? (
+ <div className="assets-wrapper">
+ <h2>
+ {selectedCategory}{" "}
<div
- key={index}
- className="assets"
- id={asset.filename}
- title={asset.filename}
+ className="back-button"
+ id="asset-backButtom"
+ onClick={() => {
+ setSelectedCategory(null);
+ setCategoryAssets([]);
+ }}
>
- <img
- src={asset?.thumbnail}
- alt={asset.filename}
- className="asset-image"
- />
+ ← Back
+ </div>
+ </h2>
+ <div className="assets-container">
+ {categoryAssets &&
+ categoryAssets?.map((asset: any, index: number) => (
+ <div
+ key={index}
+ className="assets"
+ id={asset.filename}
+ title={asset.filename}
+ >
+ <img
+ src={asset?.thumbnail}
+ alt={asset.filename}
+ className="asset-image"
+ onPointerDown={() => {
+ setSelectedItem({
+ name: asset.filename,
+ id: asset.AssetID,
+ type:
+ asset.type === "undefined"
+ ? undefined
+ : asset.type,
+ });
+ }}
+ />
- <div className="asset-name">
- {asset.filename
- .split("_")
- .map(
- (word: any) =>
- word.charAt(0).toUpperCase() + word.slice(1)
- )
- .join(" ")}
- </div>
- </div>
- ))}
- </div>
- </div>
- ) : selectedCategory ? (
- <div className="assets-wrapper">
- <div
- className="back-button"
- id="asset-backButtom"
- onClick={() => {
- setSelectedCategory(null);
- setCategoryAssets([]);
- }}
- >
- ← Back
- </div>
- <h2>{selectedCategory}</h2>
- <div className="assets-container">
- {categoryAssets &&
- categoryAssets?.map((asset: any, index: number) => (
- <div
- key={index}
- className="assets"
- id={asset.filename}
- title={asset.filename}
- >
- <img
- src={asset?.thumbnail}
- alt={asset.filename}
- className="asset-image"
- onPointerDown={() => {
- setSelectedItem({
- name: asset.filename,
- id: asset.AssetID,
- type:
- asset.type === "undefined" ? undefined : asset.type,
- });
- }}
- />
-
- <div className="asset-name">
- {asset.filename
- .split("_")
- .map(
- (word: any) =>
- word.charAt(0).toUpperCase() + word.slice(1)
- )
- .join(" ")}
- </div>
- </div>
- ))}
- </div>
- </div>
- ) : (
- <div className="assets-wrapper">
- <h2>Categories</h2>
- <div className="categories-container">
- {Array.from(
- new Set(categoryList.map((asset) => asset.category))
- ).map((category, index) => {
- const categoryInfo = categoryList.find(
- (asset) => asset.category === category
- );
- return (
- <div
- key={index}
- className="category"
- id={category}
- onClick={() => fetchCategoryAssets(category)}
- >
- <img
- src={categoryInfo?.categoryImage || ""}
- alt={category}
- className="category-image"
- draggable={false}
- />
- <div className="category-name">{category}</div>
- </div>
- );
- })}
- </div>
- </div>
- )}
+ <div className="asset-name">
+ {asset.filename
+ .split("_")
+ .map(
+ (word: any) =>
+ word.charAt(0).toUpperCase() + word.slice(1)
+ )
+ .join(" ")}
+ </div>
+ </div>
+ ))}
+ </div>
+ </div>
+ ) : (
+ <div className="assets-wrapper">
+ <h2>Categories</h2>
+ <div className="categories-container">
+ {Array.from(
+ new Set(categoryList.map((asset) => asset.category))
+ ).map((category, index) => {
+ const categoryInfo = categoryList.find(
+ (asset) => asset.category === category
+ );
+ return (
+ <div
+ key={index}
+ className="category"
+ id={category}
+ onClick={() => fetchCategoryAssets(category)}
+ >
+ <img
+ src={categoryInfo?.categoryImage || ""}
+ alt={category}
+ className="category-image"
+ draggable={false}
+ />
+ <div className="category-name">{category}</div>
+ </div>
+ );
+ })}
+ </div>
+ </div>
+ )}
+ </section>
+ </div>
</div>
);
};
diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/trigger/Trigger.tsx b/app/src/components/layout/sidebarRight/properties/eventProperties/trigger/Trigger.tsx
index 3b2549a..1434446 100644
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/trigger/Trigger.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/trigger/Trigger.tsx
@@ -91,44 +91,42 @@ const Trigger: React.FC = () => {
<div className="trigger-item">
<div className="trigger-name">{selectedTrigger}</div>
<LabledDropdown
+ label="Trigger on"
defaultOption={activeOption}
options={["onComplete", "onStart", "onStop", "delay"]}
onSelect={(option) => setActiveOption(option)}
/>
<div className="trigger-options">
- <div>
- <LabledDropdown
- defaultOption={triggeredModel[0] || "Select Model"}
- options={["Model 1", "Model 2", "Model 3"]}
- onSelect={(option) => {
- const newModel = [...triggeredModel];
- newModel[0] = option;
- setTriggeredModel(newModel);
- }}
- />
- </div>
- <div>
- <LabledDropdown
- defaultOption={triggeredPoint[0] || "Select Point"}
- options={["Point 1", "Point 2", "Point 3"]}
- onSelect={(option) => {
- const newPoint = [...triggeredPoint];
- newPoint[0] = option;
- setTriggeredPoint(newPoint);
- }}
- />
- </div>
- <div>
- <LabledDropdown
- defaultOption={triggeredAction[0] || "Select Action"}
- options={["Action 1", "Action 2", "Action 3"]}
- onSelect={(option) => {
- const newAction = [...triggeredAction];
- newAction[0] = option;
- setTriggeredAction(newAction);
- }}
- />
- </div>
+ <LabledDropdown
+ label="Triggered Object"
+ defaultOption={triggeredModel[0] || "Select Model"}
+ options={["Model 1", "Model 2", "Model 3"]}
+ onSelect={(option) => {
+ const newModel = [...triggeredModel];
+ newModel[0] = option;
+ setTriggeredModel(newModel);
+ }}
+ />
+ <LabledDropdown
+ label="Triggered Point"
+ defaultOption={triggeredPoint[0] || "Select Point"}
+ options={["Point 1", "Point 2", "Point 3"]}
+ onSelect={(option) => {
+ const newPoint = [...triggeredPoint];
+ newPoint[0] = option;
+ setTriggeredPoint(newPoint);
+ }}
+ />
+ <LabledDropdown
+ label="Triggered Action"
+ defaultOption={triggeredAction[0] || "Select Action"}
+ options={["Action 1", "Action 2", "Action 3"]}
+ onSelect={(option) => {
+ const newAction = [...triggeredAction];
+ newAction[0] = option;
+ setTriggeredAction(newAction);
+ }}
+ />
</div>
</div>
</div>
diff --git a/app/src/components/ui/menu/menu.tsx b/app/src/components/ui/menu/menu.tsx
index a416c2c..39508b6 100644
--- a/app/src/components/ui/menu/menu.tsx
+++ b/app/src/components/ui/menu/menu.tsx
@@ -28,7 +28,7 @@ const MenuBar: React.FC<MenuBarProps> = ({ setOpenMenu }) => {
window.location.reload();
}
- const savedTheme: string | null = localStorage.getItem("theme") || "light";
+ const savedTheme: string | null = localStorage.getItem("theme") ?? "light";
return (
<div
diff --git a/app/src/modules/market/AssetPreview.tsx b/app/src/modules/market/AssetPreview.tsx
index 1d39920..a53a60d 100644
--- a/app/src/modules/market/AssetPreview.tsx
+++ b/app/src/modules/market/AssetPreview.tsx
@@ -1,6 +1,6 @@
import React, { Suspense, useEffect } from "react";
import assetImage from "../../assets/image/image.png";
-import { FiileedStarsIconSmall } from "../../components/icons/marketPlaceIcons";
+import { FilledStarsIconSmall } from "../../components/icons/marketPlaceIcons";
import { Canvas, useThree } from "@react-three/fiber";
import { ContactShadows, OrbitControls, Text } from "@react-three/drei";
import GltfLoader from "./GltfLoader";
@@ -98,7 +98,7 @@ const AssetPreview: React.FC<AssetPreviewProps> = ({
</div>
<div className="asset-review">
<div className="asset-rating">
- <FiileedStarsIconSmall />
+ <FilledStarsIconSmall />
{selectedCard.rating}
</div>
<div className="asset-view">{selectedCard.views} views</div>
diff --git a/app/src/modules/market/Card.tsx b/app/src/modules/market/Card.tsx
index ec9db06..a7010cc 100644
--- a/app/src/modules/market/Card.tsx
+++ b/app/src/modules/market/Card.tsx
@@ -3,6 +3,7 @@ import {
CommentsIcon,
DownloadIcon,
EyeIconBig,
+ FilledStarsIconSmall,
StarsIconSmall,
VerifiedIcon,
} from "../../components/icons/marketPlaceIcons";
@@ -80,7 +81,13 @@ const Card: React.FC<CardProps> = ({
<div className="stars-container">
<div className="stars-wrapper">
{[...Array(5)].map((_, index) => (
- <StarsIconSmall key={index} />
+ <>
+ {index < 3 ? (
+ <FilledStarsIconSmall key={index} />
+ ) : (
+ <StarsIconSmall key={index} />
+ )}
+ </>
))}
</div>
<div className="units">
diff --git a/app/src/modules/visualization/widgets/panel/AddButtons.tsx b/app/src/modules/visualization/widgets/panel/AddButtons.tsx
index 4877824..963f44d 100644
--- a/app/src/modules/visualization/widgets/panel/AddButtons.tsx
+++ b/app/src/modules/visualization/widgets/panel/AddButtons.tsx
@@ -6,8 +6,6 @@ import {
} from "../../../../components/icons/RealTimeVisulationIcons";
import { AddIcon } from "../../../../components/icons/ExportCommonIcons";
import { useSocketStore } from "../../../../store/store";
-import { clearPanel } from "../../../../services/visulization/zone/clearPanel";
-import { lockPanel } from "../../../../services/visulization/zone/lockPanel";
// Define the type for `Side`
type Side = "top" | "bottom" | "left" | "right";
@@ -305,7 +303,7 @@ const AddButtons: React.FC<ButtonsProps> = ({
fill={
hiddenPanels[selectedZone.zoneId]?.includes(side)
? "var(--icon-default-color-active)"
- : "var(--icon-default-color)"
+ : "var(--text-color)"
}
/>
</div>
@@ -342,7 +340,7 @@ const AddButtons: React.FC<ButtonsProps> = ({
fill={
selectedZone.lockedPanels.includes(side)
? "var(--icon-default-color-active)"
- : "var(--icon-default-color)"
+ : "var(--text-color)"
}
/>
</div>
diff --git a/app/src/styles/abstracts/variables.scss b/app/src/styles/abstracts/variables.scss
index 37d9971..f4a6495 100644
--- a/app/src/styles/abstracts/variables.scss
+++ b/app/src/styles/abstracts/variables.scss
@@ -21,7 +21,8 @@ $text-button-color-dark: #f3f3fd;
// background colors
// ---------- light mode ----------
-$background-color: linear-gradient(-45deg, #fcfdfdcc 0%, #fcfdfd99 100%);
+$background-color: linear-gradient(-45deg, #fcfdfd71 0%, #fcfdfd79 100%);
+$background-color-solid-gradient: linear-gradient(-45deg, #fcfdfd 0%, #fcfdfd 100%);
$background-color-solid: #fcfdfd;
$background-color-secondary: #fcfdfd4d;
$background-color-accent: #6f42c1;
@@ -44,6 +45,7 @@ $background-radial-gray-gradient: radial-gradient(
// ---------- dark mode ----------
$background-color-dark: linear-gradient(-45deg, #333333b3 0%, #2d2437b3 100%);
+$background-color-solid-gradient-dark: linear-gradient(-45deg, #333333 0%, #2d2437 100%);
$background-color-solid-dark: #19191d;
$background-color-secondary-dark: #19191d99;
$background-color-accent-dark: #6f42c1;
@@ -105,19 +107,10 @@ $color5: #c7a8ff;
// old variables
$accent-color: #6f42c1;
$accent-color-dark: #c4abf1;
-// $highlight-accent-color: #e0dfff;
-// $highlight-accent-color-dark: #403e6a;
-// $background-color: #fcfdfd;
-// $background-color-dark: #19191d;
-// $background-color-secondary: #e1e0ff80;
-// $background-color-secondary-dark: #39394f99;
$background-color-gray: #f3f3f3;
$background-color-gray-dark: #232323;
-// $border-color: #e0dfff;
-// $border-color-dark: #403e6a;
-
$shadow-color: #3c3c431a;
$shadow-color-dark: #8f8f8f1a;
diff --git a/app/src/styles/base/base.scss b/app/src/styles/base/base.scss
index 10fb87c..bf53164 100644
--- a/app/src/styles/base/base.scss
+++ b/app/src/styles/base/base.scss
@@ -11,6 +11,7 @@
// background colors
--background-color: #{$background-color};
--background-color-solid: #{$background-color-solid};
+ --background-color-solid-gradient: #{$background-color-solid-gradient};
--background-color-secondary: #{$background-color-secondary};
--background-color-accent: #{$background-color-accent};
--background-color-button: #{$background-color-button};
@@ -61,6 +62,7 @@
// background colors
--background-color: #{$background-color-dark};
+ --background-color-solid-gradient: #{$background-color-solid-gradient-dark};
--background-color-solid: #{$background-color-solid-dark};
--background-color-secondary: #{$background-color-secondary-dark};
--background-color-accent: #{$background-color-accent-dark};
diff --git a/app/src/styles/components/input.scss b/app/src/styles/components/input.scss
index b4e7651..e3b9585 100644
--- a/app/src/styles/components/input.scss
+++ b/app/src/styles/components/input.scss
@@ -51,9 +51,6 @@ input[type="number"] {
-webkit-appearance: none;
margin: 0;
}
-
- // Firefox
- -moz-appearance: textfield;
}
.input-value {
@@ -105,7 +102,7 @@ input[type="number"] {
.search-wrapper {
position: sticky;
top: 0;
- padding: 8px 10px;
+ padding: 0px 10px;
width: 100%;
z-index: 1;
@@ -140,15 +137,16 @@ input[type="number"] {
.clear-button {
@include flex-center;
position: absolute;
+ top: 4px;
right: 4px;
- width: 24px;
- height: 24px;
+ width: 21px;
+ height: 21px;
border: none;
+ border-radius: #{$border-radius-large};
cursor: pointer;
background: transparent;
-
&:hover {
- background: var(--highlight-accent-color);
+ background: var(--background-color-secondary);
}
}
}
@@ -219,9 +217,9 @@ input[type="number"] {
.regularDropdown-container {
width: 100%;
min-width: 80px;
- padding: 2px 4px;
+ padding: 4px 8px;
border: 1px solid var(--border-color);
- border-radius: 6px;
+ border-radius: #{$border-radius-large};
position: relative;
cursor: pointer;
@@ -230,7 +228,7 @@ input[type="number"] {
display: flex;
justify-content: space-between;
cursor: pointer;
- border-radius: 6px;
+ border-radius: #{$border-radius-large};
}
.dropdown-options {
@@ -238,7 +236,7 @@ input[type="number"] {
width: 100%;
background: var(--background-color);
border: 1px solid var(--border-color);
- border-radius: #{$border-radius-small};
+ border-radius: #{$border-radius-large};
z-index: 10;
max-height: 200px;
overflow-y: auto;
@@ -255,7 +253,7 @@ input[type="number"] {
padding: 2px 4px;
cursor: pointer;
flex-direction: row !important;
- border-radius: #{$border-radius-small};
+ border-radius: #{$border-radius-medium};
&:hover {
color: var(--highlight-text-color);
@@ -272,17 +270,19 @@ input[type="number"] {
.input.default {
width: 100%;
position: relative;
+ @include flex-center;
+ gap: 6px;
.dropdown {
- top: 2px;
- right: 2px;
- position: absolute;
- background: var(--highlight-accent-color);
- border-radius: #{$border-radius-small};
- padding: 1px 4px;
+ height: 100%;
+ background: var(--background-color-drop-down-gradient);
+ border-radius: #{$border-radius-extra-large};
+ padding: 1px 8px;
+ outline: 1px solid var(--border-color);
.active-option {
- color: var(--accent-color);
+ line-height: 22px;
+ color: var(--text-color);
font-size: var(--font-size-small);
}
}
@@ -304,10 +304,10 @@ input[type="number"] {
.eye-picker-button {
height: 24px;
- min-width: 24px;
+ min-width: 36px;
@include flex-center;
- border-radius: #{$border-radius-small};
- background: var(--background-color-secondary);
+ border-radius: #{$border-radius-large};
+ background: var(--background-color-drop-down-gradient);
cursor: pointer;
}
@@ -326,6 +326,9 @@ input[type="number"] {
background: var(--background-color) !important;
border: 1px solid var(--border-color) !important;
padding: 5px 10px;
+ cursor: pointer;
+ border-radius: #{$border-radius-extra-large};
+ transition: background-color 0.3s ease;
.label {
white-space: nowrap;
@@ -333,12 +336,6 @@ input[type="number"] {
max-width: 80%;
text-overflow: ellipsis;
}
-
- // font-size: 12px;
- cursor: pointer;
- border-radius: 5px;
- transition: background-color 0.3s ease;
-
&:hover {
background: #333333;
}
@@ -354,7 +351,8 @@ input[type="number"] {
right: -16px;
background: var(--background-color);
border: 1px solid var(--border-color);
- border-radius: 5px;
+ border-radius: #{$border-radius-large};
+ backdrop-filter: blur(18px);
box-shadow: #{$box-shadow-medium};
z-index: 1000;
min-width: 200px;
@@ -364,13 +362,11 @@ input[type="number"] {
.dropdown-content {
display: flex;
flex-direction: column;
- gap: 6px;
+ padding: 2px;
.nested-dropdown {
margin-left: 0;
}
-
- padding: 10px;
}
.loading {
@@ -409,15 +405,16 @@ input[type="number"] {
.dropdown-item {
display: block;
- padding: 5px 10px;
+ padding: 4px 10px;
text-decoration: none;
color: var(--text-color);
font-size: var(--font-size-regular);
cursor: pointer;
transition: background-color 0.3s ease;
-
+ border-radius: #{$border-radius-large};
&:hover {
- background: var(--background-color);
+ color: var(--accent-color);
+ background: var(--highlight-accent-color);
}
}
@@ -428,24 +425,25 @@ input[type="number"] {
display: flex;
align-items: center;
justify-content: space-between;
- padding: 5px 10px;
+ padding: 4px 10px;
cursor: pointer;
font-size: var(--font-size-regular);
color: var(--text-color);
transition: background-color 0.3s ease;
- border-radius: #{$border-radius-small};
+ border-radius: #{$border-radius-large};
.arrow-container {
@include flex-center;
}
&:hover {
- background: var(--background-color);
+ color: var(--accent-color);
+ background: var(--highlight-accent-color);
}
&.open {
- color: var(--accent-color);
- background: var(--highlight-accent-color);
+ color: var(--text-button-color);
+ background: var(--background-color-accent);
}
.icon {
@@ -649,7 +647,7 @@ input[type="number"] {
padding: 2px 32px;
border: none;
border-radius: #{$border-radius-large};
- color: var(--text-color);
+ color: var(--text-button-color);
background: var(--background-color-button);
transition: all 0.2s;
cursor: pointer;
diff --git a/app/src/styles/components/marketPlace/marketPlace.scss b/app/src/styles/components/marketPlace/marketPlace.scss
index b84a252..23b14b7 100644
--- a/app/src/styles/components/marketPlace/marketPlace.scss
+++ b/app/src/styles/components/marketPlace/marketPlace.scss
@@ -9,8 +9,8 @@
position: absolute;
left: 0;
top: 0;
- padding: 100px 50px;
- padding-bottom: 32px;
+ padding: 10px;
+ padding-top: 100px;
.marketplace-container {
position: relative;
@@ -59,8 +59,9 @@
.regularDropdown-container {
max-width: 159px;
height: 100%;
- border-radius: #{$border-radius-large};
+ border-radius: #{$border-radius-extra-large};
border: 1px solid var(--border-color);
+ padding: 0 10px;
.dropdown-header {
align-items: center;
}
@@ -68,8 +69,9 @@
.button {
padding: 5px 20px;
- border: 1px solid var(--accent-color);
border-radius: 14px;
+ background: var(--background-color-button);
+ color: var(--text-button-color);
}
.rating-container {
@@ -106,14 +108,14 @@
.cards-wrapper-container {
display: flex;
flex-wrap: wrap;
- gap: 28px;
+ gap: 18px;
.card-container {
- width: calc(25% - 23px);
+ width: calc(25% - 14px);
border-radius: 18px;
padding: 12px;
box-shadow: 0px 2px 10.5px 0px #0000000d;
- background: var(--background-color);
+ background: var(--background-color-solid-gradient);
border: 1px solid var(--border-color);
position: relative;
display: flex;
diff --git a/app/src/styles/components/menu/menu.scss b/app/src/styles/components/menu/menu.scss
index be9e17f..dffc6a4 100644
--- a/app/src/styles/components/menu/menu.scss
+++ b/app/src/styles/components/menu/menu.scss
@@ -7,7 +7,7 @@
gap: 2px;
position: relative;
border-radius: #{$border-radius-extra-large};
- background: var(--background-color-drop-down);
+ background: var(--background-color-drop-down-gradient);
padding: 3px 8px;
width: fit-content;
max-width: 100%;
@@ -25,11 +25,12 @@
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
+ color: var(--text-color);
}
}
.more-options-button {
@include flex-center;
- border-radius: #{$border-radius-small};
+ border-radius: #{$border-radius-medium};
height: 22px;
position: relative;
&:hover {
@@ -52,7 +53,7 @@
top: 32px;
left: 0;
z-index: 5;
- background: var(--background-color);
+ background: var(--background-color-solid);
color: var(--text-color);
box-shadow: var(--box-shadow-light);
border-radius: 8px;
@@ -69,7 +70,7 @@
position: relative;
height: 100%;
padding: 4px 8px 4px 12px;
- border-radius: #{$border-radius-small};
+ border-radius: #{$border-radius-medium};
.menu-button {
width: 100%;
cursor: pointer;
@@ -89,19 +90,21 @@
.dropdown-menu {
position: absolute;
top: 0;
- left: 100%;
- background: var(--background-color);
+ left: 103%;
+ background: var(--background-color-solid);
min-width: 220px;
- border-radius: 4px;
+ border-radius: #{$border-radius-medium};
box-shadow: var(--box-shadow-light);
- border: 1px solid var(--background-color);
+ outline: 1px solid var(--border-color);
+ backdrop-filter: blur(20px);
+ outline-offset: -1px;
z-index: 100;
padding: 4px;
.menu-item-container {
position: relative;
.menu-item {
padding: 4px 8px 4px 12px;
- border-radius: #{$border-radius-small};
+ border-radius: #{$border-radius-medium};
display: flex;
justify-content: space-between;
align-items: center;
@@ -138,18 +141,19 @@
.submenu {
position: absolute;
- left: 100%;
+ left: 102%;
top: 0;
- background: var(--background-color);
+ background: var(--background-color-solid);
min-width: 200px;
- border-radius: 0 4px 4px 4px;
+ border-radius: #{$border-radius-medium};
box-shadow: var(--box-shadow-light);
- border: 1px solid var(--background-color);
+ outline: 1px solid var(--border-color);
+ outline-offset: -1px;
z-index: 101;
padding: 4px;
.submenu-item {
padding: 4px 8px 4px 12px;
- border-radius: #{$border-radius-small};
+ border-radius: #{$border-radius-medium};
display: flex;
justify-content: space-between;
align-items: center;
diff --git a/app/src/styles/components/moduleToggle.scss b/app/src/styles/components/moduleToggle.scss
index c864cbf..7e5b727 100644
--- a/app/src/styles/components/moduleToggle.scss
+++ b/app/src/styles/components/moduleToggle.scss
@@ -38,7 +38,7 @@
left: 0;
width: 0%;
height: 100%;
- background: var(--highlight-accent-color);
+ background: var(--background-color-solid-gradient);
transition: width 0.2s;
border-radius: #{$border-radius-extra-large};
}
diff --git a/app/src/styles/components/tools.scss b/app/src/styles/components/tools.scss
index abea736..54c21e7 100644
--- a/app/src/styles/components/tools.scss
+++ b/app/src/styles/components/tools.scss
@@ -16,6 +16,8 @@
background: var(--background-color);
backdrop-filter: blur(8px);
z-index: #{$z-index-default};
+ outline: 1px solid var(--border-color);
+ outline-offset: -1px;
.split {
height: 20px;
@@ -39,7 +41,7 @@
height: 28px;
width: 28px;
cursor: pointer;
- border-radius: #{$border-radius-small};
+ border-radius: #{$border-radius-medium};
&:hover {
background: color-mix(in srgb,
@@ -116,10 +118,10 @@
.toggle-threed-button {
@include flex-center;
- padding: 3px;
- border-radius: #{$border-radius-small};
- background: var(--highlight-accent-color);
- gap: 2px;
+ padding: 4px;
+ border-radius: #{$border-radius-medium};
+ background: var(--background-color);
+ gap: 5px;
position: relative;
.toggle-option {
@@ -132,30 +134,25 @@
&::after {
content: "";
position: absolute;
- background: var(--accent-color);
- left: 3px;
- top: 3px;
- height: 18px;
- width: 18px;
- border-radius: #{$border-radius-small};
+ background: var(--background-color-accent);
+ left: 2px;
+ top: 2px;
+ height: 23px;
+ width: 23px;
+ border-radius: #{$border-radius-medium};
transition: all 0.2s;
}
.active {
- color: var(--highlight-accent-color);
+ color: var(--text-button-color);
}
}
.toggled {
&::after {
- left: 24px;
+ left: 25px;
}
}
-
-
-
-
-
}
.exitPlay {
diff --git a/app/src/styles/components/visualization/floating/common.scss b/app/src/styles/components/visualization/floating/common.scss
index 0084e7a..0bbbdc9 100644
--- a/app/src/styles/components/visualization/floating/common.scss
+++ b/app/src/styles/components/visualization/floating/common.scss
@@ -182,7 +182,6 @@
background: var(--background-color-secondary);
border-radius: 20px;
color: var(--text-color);
- background: #252525cc;
.header-wrapper {
width: 100%;
@@ -276,7 +275,7 @@
.icon {
width: 45px;
height: 45px;
- background: var(--accent-color);
+ background: var(--background-color-accent);
display: flex;
justify-content: center;
align-items: center;
diff --git a/app/src/styles/layout/sidebar.scss b/app/src/styles/layout/sidebar.scss
index 583dc0a..70d3a5d 100644
--- a/app/src/styles/layout/sidebar.scss
+++ b/app/src/styles/layout/sidebar.scss
@@ -7,7 +7,7 @@
top: 32px;
left: 8px;
background: var(--background-color);
- backdrop-filter: blur(150px);
+ backdrop-filter: blur(15px);
border-radius: #{$border-radius-extra-large};
outline: 1px solid var(--border-color);
box-shadow: #{$box-shadow-medium};
@@ -30,10 +30,6 @@
padding: 0 8px;
width: 100%;
max-width: calc(100% - 32px);
-
- .input-value {
- color: var(--accent-color);
- }
}
}
@@ -235,7 +231,6 @@
.outline-container {
height: 100%;
-
.outline-content-container {
position: relative;
height: 100%;
@@ -256,7 +251,7 @@
top: 32px;
right: 8px;
background: var(--background-color);
- backdrop-filter: blur(150px);
+ backdrop-filter: blur(15px);
border-radius: #{$border-radius-extra-large};
outline: 1px solid var(--border-color);
box-shadow: #{$box-shadow-medium};
@@ -276,7 +271,7 @@
.share-button {
padding: 4px 12px;
- color: var(--text-color);
+ color: var(--text-button-color);
background: var(--background-color-button);
font-weight: var(--font-weight-regular);
border-radius: #{$border-radius-large};
@@ -750,7 +745,7 @@
.value-field-container {
margin: 0;
input {
- padding: 5px 4px;
+ padding: 5px 10px;
}
.dropdown {
top: 4px;
@@ -772,8 +767,8 @@
padding: 6px 12px;
.regularDropdown-container {
padding: 5px 8px;
- outline: 2px solid var(--border-color);
- outline-offset: -2px;
+ outline: 1px solid var(--border-color);
+ outline-offset: -1px;
border: none;
}
}
@@ -806,7 +801,6 @@
@include flex-space-between;
padding: 4px 12px;
width: 100%;
- margin: 2px 0;
border-radius: #{$border-radius-medium};
.value {
display: flex;
@@ -939,6 +933,18 @@
}
}
+ .trigger-wrapper {
+ .trigger-item {
+ .trigger-name {
+ padding: 8px;
+ margin-top: 4px;
+ }
+ .value-field-container {
+ margin: 0;
+ }
+ }
+ }
+
.footer {
@include flex-center;
justify-content: flex-start;
@@ -948,10 +954,9 @@
}
.compare-simulations-container {
- margin: 6px;
background: var(--background-color-gray);
padding: 12px;
- border-radius: #{$border-radius-medium};
+ border-radius: #{$border-radius-large};
.compare-simulations-header {
font-weight: var(--font-weight-medium);
@@ -973,10 +978,12 @@
input {
width: fit-content;
- background: var(--accent-color);
- color: var(--highlight-accent-color);
- padding: 2px 8px;
+ background: var(--background-color-button);
+ color: var(--text-button-color);
+ padding: 3px 10px;
cursor: pointer;
+ border: none;
+ outline: none;
}
}
}
@@ -1084,24 +1091,24 @@
input {
border: none;
+ outline: none;
cursor: pointer;
- transition: all 0.2s;
&:hover {
- transform: translateY(-2px);
box-shadow: #{$box-shadow-medium};
- outline: 1px solid var(--accent-color);
+ outline: 1px solid var(--input-border-color);
}
}
.cancel {
background: transparent;
- color: var(--accent-color);
+ background: var(--background-color-secondary);
+ color: var(--text-color);
}
.submit {
- background: var(--accent-color);
- color: var(--highlight-accent-color);
+ background: var(--background-color-button);
+ color: var(--text-button-color);
}
}
@@ -1109,7 +1116,7 @@
margin: 6px;
background: var(--background-color-gray);
padding: 12px;
- border-radius: #{$border-radius-medium};
+ border-radius: #{$border-radius-large};
.custom-analysis-header {
font-weight: var(--font-weight-medium);
@@ -1131,34 +1138,53 @@
input {
width: fit-content;
- background: var(--accent-color);
- color: var(--highlight-accent-color);
- padding: 2px 8px;
+ background: var(--background-color-button);
+ color: var(--text-button-color);
+ padding: 3px 10px;
cursor: pointer;
+ border: none;
+ outline: none;
}
}
}
}
}
-.assets-container {
+.assets-container-main {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
height: 100%;
+ max-height: 50vh;
gap: 3px;
- padding: 10px 0;
+ overflow: auto;
+
+ .assets-result {
+ width: 100%;
+ .assets-wrapper {
+ margin: 0;
+ }
+ }
+ .assets-list-section {
+ width: 100%;
+ padding: 4px;
+ }
.assets-wrapper {
width: 100%;
position: relative;
- margin: 8px 10px;
- h2 {
+ h2,
+ .searched-content {
color: var(--text-color);
font-family: $large;
font-weight: $bold-weight;
+ padding: 8px;
+ @include flex-space-between;
+ .back-button {
+ cursor: pointer;
+ }
}
.categories-container {
@@ -1167,8 +1193,8 @@
flex-direction: row;
flex-wrap: wrap;
height: 100%;
- gap: 0px 4px;
- padding: 10px 0;
+ gap: 4px;
+ padding: 2px;
.category {
width: 123px;
@@ -1267,11 +1293,11 @@
flex-direction: row;
flex-wrap: wrap;
height: 100%;
- gap: 0px 4px;
- padding: 10px 0;
+ gap: 6px;
+ padding: 2px;
.assets {
- width: 123px;
+ width: 122px;
height: 95px;
border-radius: #{$border-radius-large};
background: var(--background-color);
@@ -1295,7 +1321,11 @@
width: 100%;
height: 100%;
font-size: var(--font-size-regular);
- background: linear-gradient(0deg,rgba(37, 24, 51, 0) 0%, rgba(78, 22, 128, 0.4) 100%);
+ background: linear-gradient(
+ 0deg,
+ rgba(37, 24, 51, 0) 0%,
+ rgba(78, 22, 128, 0.4) 100%
+ );
pointer-events: none;
backdrop-filter: blur(8px);
opacity: 0;
@@ -1316,23 +1346,5 @@
}
}
}
-
- .back-button {
- position: absolute;
- top: 0;
- right: 0;
- @include flex-center;
- cursor: pointer;
- }
- }
-}
-
-.assets-result {
- width: 100%;
- height: 100%;
- margin: 8px 10px;
-
- .assets-wrapper {
- margin: 0;
}
}
diff --git a/app/src/styles/pages/realTimeViz.scss b/app/src/styles/pages/realTimeViz.scss
index 3aa1bd5..a9dba89 100644
--- a/app/src/styles/pages/realTimeViz.scss
+++ b/app/src/styles/pages/realTimeViz.scss
@@ -4,7 +4,6 @@
// Main Container
.realTime-viz {
background: #131313;
- border-radius: 20px;
box-shadow: $box-shadow-medium;
width: calc(100% - (320px + 270px + 90px));
height: calc(100% - (250px));
@@ -24,19 +23,15 @@
}
.floating {
-
-
width: calc(var(--realTimeViz-container-width) * 0.2);
height: calc(var(--realTimeViz-container-width) * 0.05);
min-width: 250px;
max-width: 300px;
- // min-height: 83px !important;
- // max-height: 100px !important;
-
background: var(--background-color);
- border: 1.23px solid var(--border-color);
+ backdrop-filter: blur(10px);
+ border: 1px solid var(--border-color);
box-shadow: 0px 4.91px 4.91px 0px #0000001c;
border-radius: $border-radius-medium;
padding: 18px;
@@ -67,12 +62,12 @@
.zone-wrapper {
display: flex;
background: var(--background-color);
+ backdrop-filter: blur(10px);
position: absolute;
bottom: 0px;
left: 50%;
gap: 6px;
border-radius: 8px;
- max-width: 80%;
overflow: auto;
max-width: calc(100% - 500px);
min-width: 150px;
@@ -117,15 +112,13 @@
}
.active {
- background: var(--accent-color);
+ background: var(--background-color-accent);
color: var(--background-color);
- // color: #FCFDFD !important;
}
}
.zone-wrapper.bottom {
bottom: var(--bottomWidth);
- // bottom: 200px;
}
.content-container {
@@ -146,7 +139,6 @@
display: flex;
background: rgba(224, 223, 255, 0.5);
position: absolute;
- // bottom: 10px;
left: 50%;
transform: translate(-50%, 0);
gap: 6px;
@@ -189,7 +181,6 @@
border-radius: 6px;
overflow: auto;
z-index: $z-index-tools;
- overflow: auto;
&::-webkit-scrollbar {
display: none;
@@ -204,6 +195,7 @@
flex-direction: column;
gap: 6px;
background: var(--background-color);
+ backdrop-filter: blur(10px);
&::-webkit-scrollbar {
display: none;
@@ -211,12 +203,10 @@
.chart-container {
width: 100%;
-
max-height: 100%;
border: 1px dashed var(--background-color-gray);
border-radius: 8px;
box-shadow: var(--box-shadow-medium);
- padding: 6px 0;
background: var(--background-color);
position: relative;
padding: 0 10px;
@@ -255,14 +245,11 @@
color: var(--text-color);
&:hover {
+ background: var(--highlight-accent-color);
+ width: 100%;
.label {
color: var(--accent-color);
}
- }
-
- &:hover {
- background: var(--highlight-accent-color);
- width: 100%;
svg {
&:first-child {
@@ -285,7 +272,6 @@
}
}
-
.close-btn {
position: absolute;
top: 5px;
@@ -369,7 +355,6 @@
.playingFlase {
.zone-wrapper.bottom {
bottom: var(--bottomWidth);
- // bottom: 210px;
}
}
@@ -398,7 +383,7 @@
}
.active {
- background: var(--accent-color);
+ background: var(--background-color-accent);
}
&:hover {
@@ -413,8 +398,7 @@
height: 18px;
display: flex;
justify-content: center;
- // align-items: center;
- background: var(--accent-color);
+ background: var(--background-color-accent);
border: none;
color: var(--background-color);
border-radius: 4px;
@@ -425,20 +409,20 @@
}
path {
- stroke: var(--primary-color);
+ stroke: var(--text-color);
stroke-width: 2;
}
}
.active {
- background: #ffe3e0;
+ background: #f657482f;
.add-icon {
rotate: 45deg;
path {
stroke: #f65648;
- stroke-width: 2;
+ stroke-width: 1.3;
}
}
}
@@ -589,12 +573,6 @@
}
.floating-wrapper {
- .icon {
- // width: 25px !important;
- // height: 25px !important;
- // background: transparent;
- }
-
.kebab {
width: 25px;
height: 25px;
@@ -640,9 +618,6 @@
.label {
color: var(--accent-color);
}
- }
-
- &:hover {
background: var(--highlight-accent-color);
width: 100%;
@@ -662,22 +637,19 @@
}
.distance-line {
-
position: absolute;
border-style: dashed;
- border-color: var(--accent-color);
- /* Green color for visibility */
+ border-color: var(--background-color-accent);
border-width: 1px;
pointer-events: none;
- /* Ensure lins don't interfere with dragging */
z-index: 10000;
}
/* Label styles for displaying distance values */
.distance-label {
position: absolute;
- background: var(--accent-color);
- color: white;
+ background: var(--background-color-accent);
+ color: var(--text-button-color);
font-size: 12px;
padding: 2px 6px;
border-radius: 3px;
@@ -749,15 +721,12 @@
}
.activeChart {
- outline: 2px solid var(--accent-color);
+ outline: 1px solid var(--highlight-secondary-color);
z-index: 2 !important;
}
.chart-container.notLinked {
-
outline: 1px solid red;
-
-
}
.connectionSuccess {
@@ -801,4 +770,4 @@
}
}
}
-}
\ No newline at end of file
+}
From 5ea85f49f07bcde6d6d8d7a8efbfe2b9323daffa Mon Sep 17 00:00:00 2001
From: Vishnu <vishnu@hexrfactory.com>
Date: Wed, 30 Apr 2025 16:52:08 +0530
Subject: [PATCH 03/17] refactor: Update icon stroke and fill colors based on
active state; modify EventProperties component structure; adjust styles in
tools, sidebar, and realTimeViz for improved layout and responsiveness
---
app/src/components/icons/SimulationIcons.tsx | 36 ++++++--
.../eventProperties/EventProperties.tsx | 8 +-
app/src/styles/components/tools.scss | 2 +-
app/src/styles/layout/sidebar.scss | 83 +++++++++----------
app/src/styles/pages/realTimeViz.scss | 7 +-
5 files changed, 75 insertions(+), 61 deletions(-)
diff --git a/app/src/components/icons/SimulationIcons.tsx b/app/src/components/icons/SimulationIcons.tsx
index b4aa881..ef23c8f 100644
--- a/app/src/components/icons/SimulationIcons.tsx
+++ b/app/src/components/icons/SimulationIcons.tsx
@@ -9,13 +9,17 @@ export function AnalysisIcon({ isActive }: { isActive: boolean }) {
>
<path
d="M17.5002 12.4987L15.1418 10.1404M10.8335 14.1654H5.8335M7.50016 10.832H5.8335M10.8335 8.33203C10.8335 8.82648 10.9801 9.30983 11.2548 9.72096C11.5295 10.1321 11.92 10.4525 12.3768 10.6417C12.8336 10.8309 13.3363 10.8805 13.8212 10.784C14.3062 10.6875 14.7516 10.4494 15.1013 10.0998C15.4509 9.75017 15.689 9.30471 15.7855 8.81976C15.8819 8.3348 15.8324 7.83214 15.6432 7.37532C15.454 6.91851 15.1335 6.52806 14.7224 6.25336C14.3113 5.97865 13.8279 5.83203 13.3335 5.83203C12.6705 5.83203 12.0346 6.09542 11.5657 6.56426C11.0969 7.03311 10.8335 7.66899 10.8335 8.33203Z"
- stroke={"var(--icon-default-color-active)"}
+ stroke={
+ isActive ? "var(--icon-default-color-active)" : "var(--text-color)"
+ }
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M14.1667 14.1667V16.6667C14.1667 16.8877 14.0789 17.0996 13.9226 17.2559C13.7663 17.4122 13.5543 17.5 13.3333 17.5H3.33333C3.11232 17.5 2.90036 17.4122 2.74408 17.2559C2.5878 17.0996 2.5 16.8877 2.5 16.6667V3.33333C2.5 3.11232 2.5878 2.90036 2.74408 2.74408C2.90036 2.5878 3.11232 2.5 3.33333 2.5H13.3333"
- stroke={"var(--icon-default-color-active)"}
+ stroke={
+ isActive ? "var(--icon-default-color-active)" : "var(--text-color)"
+ }
strokeLinecap="round"
strokeLinejoin="round"
/>
@@ -34,11 +38,15 @@ export function MechanicsIcon({ isActive }: { isActive: boolean }) {
>
<path
d="M17.69 11.7629L16.4912 11.5885C16.4161 11.5828 16.3514 11.5356 16.3226 11.466L15.9339 10.5281C15.9049 10.4588 15.917 10.3794 15.9662 10.3224L16.6834 9.35896C16.7973 9.22544 16.7898 9.02639 16.6655 8.90212L16.098 8.3348C15.974 8.21053 15.7746 8.20247 15.6414 8.31697L14.6776 9.03387C14.621 9.08282 14.541 9.09546 14.4719 9.0667L13.5338 8.67776C13.4644 8.64929 13.417 8.58341 13.4109 8.50918L13.2372 7.31068C13.2234 7.1352 13.0772 7 12.9018 7H12.0991C11.9234 7 11.7772 7.1352 11.7637 7.31068L11.5893 8.50918C11.5839 8.58399 11.5364 8.64929 11.4671 8.67776L10.5286 9.0667C10.4593 9.09546 10.3799 9.08282 10.3227 9.03387L9.35945 8.31697C9.22628 8.20276 9.0272 8.2105 8.90264 8.3348L8.33532 8.90212C8.21105 9.02639 8.20357 9.22547 8.31746 9.35896L9.03439 10.3227C9.08302 10.3794 9.09598 10.4591 9.06693 10.5281L8.67825 11.466C8.65007 11.5356 8.58448 11.5828 8.50996 11.5889L7.31062 11.7629C7.13569 11.7767 7.00049 11.9229 7.00049 12.0986V12.901C7.00049 13.0765 7.13572 13.2232 7.31062 13.2364L8.50996 13.4105C8.58448 13.4165 8.65007 13.464 8.67825 13.5333L9.06693 14.4712C9.09598 14.5408 9.08305 14.6205 9.03439 14.6772L8.31746 15.641C8.20354 15.7744 8.21102 15.9729 8.33532 16.0978L8.90264 16.6651C9.0272 16.7894 9.22628 16.7969 9.35945 16.6827L10.3227 15.9654C10.3799 15.9171 10.4593 15.9042 10.5286 15.9333L11.4671 16.3216C11.5364 16.3507 11.5839 16.4157 11.5897 16.4908L11.7637 17.6893C11.7775 17.8645 11.9234 18 12.0991 18H12.9018C13.0776 18 13.2234 17.8645 13.2372 17.6893L13.411 16.4908C13.417 16.4157 13.4645 16.3507 13.5338 16.3216L14.4722 15.9333C14.5413 15.9042 14.6213 15.9171 14.6779 15.9654L15.6414 16.6827C15.7746 16.7969 15.974 16.7894 16.098 16.6651L16.6656 16.0978C16.7902 15.9729 16.7974 15.7744 16.6834 15.641L15.9662 14.6772C15.9179 14.6205 15.9049 14.5408 15.934 14.4712L16.3226 13.5333C16.3514 13.464 16.4161 13.4165 16.4912 13.4105L17.69 13.2364C17.8652 13.2232 18.0004 13.0765 18.0004 12.901V12.0986C18.0004 11.9228 17.8652 11.7767 17.69 11.7629ZM13.8191 13.8187C13.4667 14.1706 12.9987 14.3645 12.5004 14.3645C12.0024 14.3645 11.5337 14.1706 11.1816 13.8187C10.8295 13.466 10.6353 12.9979 10.6353 12.4997C10.6353 12.0017 10.8295 11.5333 11.1816 11.1812C11.5337 10.8285 12.0024 10.6351 12.5004 10.6351C12.9987 10.6351 13.4667 10.8285 13.8191 11.1812C14.1712 11.5333 14.3652 12.0017 14.3652 12.4997C14.3652 12.9979 14.1713 13.466 13.8191 13.8187Z"
- stroke={"var(--icon-default-color-active)"}
+ stroke={
+ isActive ? "var(--icon-default-color-active)" : "var(--text-color)"
+ }
/>
<path
d="M6.7961 8.78085C6.92052 8.73626 6.98909 8.60354 6.95416 8.47635L6.77216 7.58599C6.75759 7.53147 6.77438 7.47339 6.81595 7.43541L7.37949 6.92253C7.42078 6.88482 7.48083 6.87353 7.53285 6.89334L8.39565 7.15458C8.51874 7.20111 8.65747 7.1455 8.71367 7.02603L8.96969 6.48121C9.02637 6.36145 8.98098 6.21939 8.86644 6.1544L8.11541 5.65637C8.06665 5.62829 8.03718 5.57515 8.04024 5.51899L8.07603 4.75805C8.07906 4.70161 8.11263 4.65178 8.1636 4.62864L8.96614 4.20052C9.08642 4.14683 9.14452 4.00865 9.09994 3.88532L8.89619 3.31844C8.85132 3.19427 8.7186 3.12546 8.59144 3.16042L7.70081 3.34183C7.64628 3.35726 7.58873 3.34019 7.5505 3.29832L7.03784 2.73511C6.99958 2.69324 6.98804 2.63436 7.00837 2.58151L7.26967 1.71923C7.31617 1.59562 7.2606 1.45713 7.14084 1.40122L6.59627 1.14492C6.47679 1.08873 6.33417 1.13362 6.26894 1.24841L5.77118 1.99948C5.74335 2.04823 5.69024 2.07764 5.63405 2.07492L4.87311 2.03885C4.81695 2.03638 4.76629 2.00167 4.74345 1.951L4.31589 1.14877C4.26165 1.02849 4.12399 0.970357 4.0001 1.01498L3.43353 1.21897C3.30936 1.26359 3.24055 1.39603 3.27579 1.52319L3.45748 2.4141C3.47235 2.46804 3.45556 2.52642 3.41372 2.56413L2.85014 3.07729C2.8083 3.115 2.74912 3.12657 2.69626 3.10676L1.83398 2.84521C1.71093 2.79843 1.57244 2.85459 1.516 2.97404L1.25995 3.51864C1.20379 3.63812 1.24865 3.78074 1.3632 3.84569L2.11423 4.34373C2.16323 4.37156 2.19242 4.42442 2.1894 4.48058L2.1536 5.24152C2.15141 5.29824 2.11698 5.34779 2.06606 5.37091L1.26353 5.79899C1.14318 5.85296 1.08511 5.99089 1.12973 6.11423L1.33373 6.68107C1.37832 6.80524 1.51103 6.87405 1.63795 6.8394L2.52914 6.65716C2.58311 6.64228 2.64146 6.65935 2.67916 6.70119L3.19176 7.26449C3.23003 7.30633 3.24107 7.36579 3.2212 7.41838L2.95996 8.28065C2.91371 8.40399 2.96935 8.54247 3.08879 8.59863L3.63336 8.85466C3.75312 8.91109 3.89543 8.86567 3.9607 8.75141L4.45818 8.0001C4.48626 7.95165 4.53911 7.9219 4.59555 7.92517L5.35652 7.96097C5.41296 7.96375 5.46307 7.99732 5.48646 8.04879L5.91374 8.85074C5.96827 8.97108 6.10564 9.02971 6.2295 8.98509L6.7961 8.78085ZM5.58891 6.31659C5.23732 6.44295 4.85716 6.42533 4.51878 6.2662C4.18043 6.10707 3.92493 5.82571 3.79802 5.47385C3.67166 5.12201 3.68928 4.7421 3.84844 4.40403C4.00754 4.0654 4.28917 3.8099 4.64076 3.68329C4.99259 3.55662 5.37251 3.57424 5.71058 3.73393C6.04865 3.89251 6.3047 4.17389 6.43159 4.52573C6.55798 4.87759 6.54008 5.25723 6.38123 5.59561C6.22154 5.93365 5.94043 6.18967 5.58891 6.31659Z"
- stroke={"var(--icon-default-color-active)"}
+ stroke={
+ isActive ? "var(--icon-default-color-active)" : "var(--text-color)"
+ }
/>
</svg>
);
@@ -55,15 +63,21 @@ export function PropertiesIcon({ isActive }: { isActive: boolean }) {
>
<path
d="M17.4254 15.3839L8.67142 6.79353C8.79789 6.57037 8.90139 6.337 8.97464 6.09625C8.98245 6.01909 8.99808 5.93903 9.02639 5.85746C9.04151 5.81156 9.05423 5.76468 9.06692 5.71831C9.26711 4.6353 8.94923 3.4756 8.11182 2.63819C7.84716 2.37353 7.54982 2.16113 7.23341 2C7.21778 2 7.20216 2.00197 7.18703 2.00538L6.90578 2.07422C6.85303 2.08791 6.80762 2.12109 6.78028 2.16797C6.75294 2.21435 6.74562 2.2705 6.76025 2.32275L7.36475 4.49367C7.38722 4.57474 7.35694 4.66067 7.28906 4.70999L5.91552 5.70756C5.87352 5.73734 5.82177 5.75052 5.77049 5.74368L4.31101 5.54249C4.23142 5.53174 4.16648 5.47512 4.14498 5.39796L3.50685 3.10504C3.47754 3.00104 3.3711 2.93804 3.26613 2.96391L2.89697 3.05426C2.87794 3.05913 2.86085 3.06891 2.84375 3.07916C2.41994 3.67339 2.20606 4.37117 2.20312 5.0699C2.20947 5.94687 2.54541 6.82188 3.21435 7.49082C4.02148 8.29748 5.12649 8.61389 6.17581 8.46592C6.32718 8.44395 6.46537 8.42879 6.59231 8.42001C6.7134 8.38679 6.83256 8.34335 6.95072 8.29598C8.41851 9.78233 15.631 17.1784 15.631 17.1784C16.1266 17.674 16.9298 17.674 17.4254 17.1784C17.921 16.6828 17.921 15.8796 17.4254 15.3839ZM16.9767 16.7297C16.7291 16.9777 16.3277 16.9777 16.0797 16.7297C15.8316 16.4821 15.8316 16.0802 16.0797 15.8322C16.3277 15.5846 16.7291 15.5846 16.9767 15.8322C17.2247 16.0802 17.2247 16.4821 16.9767 16.7297Z"
- fill={"var(--icon-default-color-active)"}
+ fill={
+ isActive ? "var(--icon-default-color-active)" : "var(--text-color)"
+ }
/>
<path
d="M14.6953 6.25784L16.1182 5.89699L17.4878 3.50488L16.8243 2.8755L16.1612 2.24609L13.8442 3.73926L13.5586 5.17824L11.0991 7.77054L12.2183 8.8682L14.6953 6.25784Z"
- fill={"var(--icon-default-color-active)"}
+ fill={
+ isActive ? "var(--icon-default-color-active)" : "var(--text-color)"
+ }
/>
<path
d="M7.56537 10.7632C7.28215 11.0083 6.8808 10.7046 6.35539 11.2588L2.88271 14.918C2.18837 15.6494 2.21865 16.8057 2.95009 17.5C3.68153 18.1944 4.83732 18.1641 5.53164 17.4327L9.00482 13.7725C9.53023 13.2188 9.20647 12.8345 9.43598 12.5386C9.48285 12.4776 9.52582 12.4356 9.56879 12.4038C8.91157 11.731 8.28266 11.0874 7.73821 10.5312C7.71528 10.6084 7.66303 10.6792 7.56537 10.7632Z"
- fill={"var(--icon-default-color-active)"}
+ fill={
+ isActive ? "var(--icon-default-color-active)" : "var(--text-color)"
+ }
/>
</svg>
);
@@ -82,13 +96,17 @@ export function SimulationIcon({ isActive }: { isActive: boolean }) {
fillRule="evenodd"
clipRule="evenodd"
d="M6.44104 7.04762C6.57815 6.98413 6.73614 6.98413 6.87325 7.04762L12.0161 9.42958C12.198 9.51377 12.3143 9.69589 12.3143 9.89624V15.8512C12.3143 16.0347 12.2165 16.2043 12.0577 16.2962L6.9148 19.2736C6.75547 19.3659 6.55881 19.3659 6.39949 19.2736L1.25661 16.2962C1.09779 16.2043 1 16.0347 1 15.8512V9.89624C1 9.69589 1.11635 9.51377 1.29815 9.42958L6.44104 7.04762ZM2.02857 10.7297L6.14286 12.794V17.9366L2.02857 15.5546V10.7297ZM7.17143 17.9366L11.2857 15.5546V10.7297L7.17143 12.794V17.9366ZM6.65714 11.9013L10.6163 9.91477L6.65714 8.08106L2.69798 9.91477L6.65714 11.9013Z"
- fill={"var(--icon-default-color-active)"}
+ fill={
+ isActive ? "var(--icon-default-color-active)" : "var(--text-color)"
+ }
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M12.441 1.04762C12.5781 0.984127 12.7361 0.984127 12.8732 1.04762L18.0161 3.42958C18.198 3.51377 18.3143 3.69589 18.3143 3.89624V9.85116C18.3143 10.0347 18.2165 10.2043 18.0577 10.2962L12.9148 13.2736C12.7555 13.3659 12.5588 13.3659 12.3995 13.2736L7.25661 10.2962C7.09779 10.2043 7 10.0347 7 9.85116V3.89624C7 3.69589 7.11635 3.51377 7.29815 3.42958L12.441 1.04762ZM8.02857 4.72968L12.1429 6.79403V11.9366L8.02857 9.55463V4.72968ZM13.1714 11.9366L17.2857 9.55463V4.72968L13.1714 6.79403V11.9366ZM12.6571 5.90129L16.6163 3.91477L12.6571 2.08106L8.69798 3.91477L12.6571 5.90129Z"
- fill={"var(--icon-default-color-active)"}
+ fill={
+ isActive ? "var(--icon-default-color-active)" : "var(--text-color)"
+ }
/>
</svg>
);
diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/EventProperties.tsx b/app/src/components/layout/sidebarRight/properties/eventProperties/EventProperties.tsx
index 88ae240..a307c86 100644
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/EventProperties.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/EventProperties.tsx
@@ -92,9 +92,9 @@ const EventProperties: React.FC = () => {
<p>
<strong>Here are some products you can add it to:</strong>
</p>
- <ul>
+ <div className="product-item">
{products.map((product) => (
- <li key={product.productId}>
+ <div key={product.productId}>
<button
onClick={() =>
handleAddEventToProduct({
@@ -111,9 +111,9 @@ const EventProperties: React.FC = () => {
<AddIcon />
{product.productName}
</button>
- </li>
+ </div>
))}
- </ul>
+ </div>
</div>
</div>
)}
diff --git a/app/src/styles/components/tools.scss b/app/src/styles/components/tools.scss
index 54c21e7..0c1a9c3 100644
--- a/app/src/styles/components/tools.scss
+++ b/app/src/styles/components/tools.scss
@@ -30,7 +30,7 @@
.general-options,
.activeDropicon {
@include flex-center;
- gap: 8px;
+ gap: 2px;
interpolate-size: allow-keywords;
width: 0;
opacity: 0;
diff --git a/app/src/styles/layout/sidebar.scss b/app/src/styles/layout/sidebar.scss
index 70d3a5d..c7f1694 100644
--- a/app/src/styles/layout/sidebar.scss
+++ b/app/src/styles/layout/sidebar.scss
@@ -51,8 +51,6 @@
.active {
background: var(--background-color-accent);
- outline: 1px solid var(--border-color);
- outline-offset: -1px;
rect {
stroke: var(--icon-default-color-active);
}
@@ -60,7 +58,12 @@
fill: var(--icon-default-color-active);
}
&:hover {
- background: var(--background-color-secondary);
+ rect {
+ stroke: var(--icon-default-color);
+ }
+ circle {
+ fill: var(--icon-default-color);
+ }
}
}
}
@@ -365,14 +368,14 @@
width: 34px;
border-radius: #{$border-radius-circle};
background: var(--background-color-secondary);
- backdrop-filter: blur(8px);
- box-shadow: #{$box-shadow-medium};
+ backdrop-filter: blur(12px);
outline: 1px solid var(--border-color);
outline-offset: -1px;
}
.active {
background: var(--background-color-accent);
+ outline: none;
}
}
@@ -390,55 +393,43 @@
.no-event-selected {
color: #666;
- padding: 1.8rem 1rem;
+ padding: 16px;
grid-column: 1 / -1;
.products-list {
padding-top: 1rem;
+ .product-item {
+ text-align: start;
+ margin-top: 8px;
+ padding: 2px 0;
+ text-decoration: none;
+ display: flex;
+ flex-wrap: wrap;
+ gap: 6px;
+ button {
+ width: fit-content;
+ position: relative;
+ @include flex-center;
+ gap: 4px;
+ background: var(--background-color);
+ padding: 8px 12px;
+ border-radius: #{$border-radius-extra-large};
+ outline: 1px solid var(--border-color);
+ &:hover {
+ background: var(--background-color-accent);
+ color: var(--text-button-color);
+ outline: none;
+ path {
+ stroke: var(--text-button-color);
+ stroke-width: 1.3;
+ }
+ }
+ }
+ }
.products-list-title {
text-align: start;
color: var(--accent-color);
font-size: var(--font-size-regular);
}
- ul {
- li {
- text-align: start;
- margin: 8px 0;
- padding: 2px 0;
- text-decoration: none;
- &::marker {
- content: "";
- }
- button {
- width: fit-content;
- position: relative;
- transition: all 0.2s ease;
- @include flex-center;
- gap: 4px;
- &:before {
- content: "";
- position: absolute;
- left: 0;
- bottom: -4px;
- background: var(--accent-color);
- height: 1px;
- width: 0%;
- transition: all 0.3s ease;
- }
- }
- &:hover {
- button {
- path {
- stroke: var(--accent-color);
- stroke-width: 1.5px;
- }
- color: var(--accent-color);
- &:before {
- width: 100%;
- }
- }
- }
- }
- }
}
}
}
diff --git a/app/src/styles/pages/realTimeViz.scss b/app/src/styles/pages/realTimeViz.scss
index a9dba89..665e44b 100644
--- a/app/src/styles/pages/realTimeViz.scss
+++ b/app/src/styles/pages/realTimeViz.scss
@@ -113,7 +113,9 @@
.active {
background: var(--background-color-accent);
- color: var(--background-color);
+ color: var(--text-button-color);
+ border: none;
+ outline: none;
}
}
@@ -406,6 +408,9 @@
.add-icon {
@include flex-center;
transition: rotate 0.2s;
+ path{
+ stroke: var(--text-button-color);
+ }
}
path {
From bd402275b2781f34d560d37748e907d6a2bac8c0 Mon Sep 17 00:00:00 2001
From: Vishnu <vishnu@hexrfactory.com>
Date: Wed, 30 Apr 2025 17:05:28 +0530
Subject: [PATCH 04/17] refactor: Adjust styles for dropdown options; modify
padding, margin, and border-radius for improved layout and appearance
---
app/src/styles/components/tools.scss | 11 ++++++-----
1 file changed, 6 insertions(+), 5 deletions(-)
diff --git a/app/src/styles/components/tools.scss b/app/src/styles/components/tools.scss
index 0c1a9c3..5984dab 100644
--- a/app/src/styles/components/tools.scss
+++ b/app/src/styles/components/tools.scss
@@ -79,19 +79,20 @@
position: absolute;
bottom: 40px;
left: 0;
- box-shadow: #{$box-shadow-medium};
- padding: 8px;
- border-radius: #{$border-radius-large};
+ padding: 2px 4px;
+ border-radius: #{$border-radius-medium};
background: var(--background-color);
+ backdrop-filter: blur(8px);
.option-list {
- margin: 4px 0;
display: flex;
align-items: center;
white-space: nowrap;
border-radius: #{$border-radius-medium};
gap: 6px;
- padding: 4px;
+ padding: 2px;
+ padding-right: 12px;
+ margin: 2px 0;
&:hover {
background: var(--highlight-accent-color);
From 6a51fbca610ba1b9e5794de36aa20eeb7cf2e416 Mon Sep 17 00:00:00 2001
From: Nalvazhuthi <nalvazhuthi@hexrfactory.com>
Date: Wed, 30 Apr 2025 18:20:36 +0530
Subject: [PATCH 05/17] updated realTime vis panel smooth transition
---
.../components/icons/ExportCommonIcons.tsx | 33 +--
app/src/components/icons/analysis.tsx | 2 +-
.../ui/analysis/ProductionCapacity.tsx | 2 +-
.../ui/simulation/simulationPlayer.tsx | 4 +-
.../visualization/RealTimeVisulization.tsx | 14 +-
.../widgets/panel/AddButtons.tsx | 144 +++++++------
.../visualization/widgets/panel/Panel.tsx | 29 ++-
app/src/pages/Project.tsx | 10 +-
.../components/analysis/ROISummary.scss | 41 ++--
.../styles/components/analysis/analysis.scss | 6 +-
.../components/simulation/simulation.scss | 46 +++--
app/src/styles/pages/realTimeViz.scss | 192 +++++++++++++++++-
12 files changed, 369 insertions(+), 154 deletions(-)
diff --git a/app/src/components/icons/ExportCommonIcons.tsx b/app/src/components/icons/ExportCommonIcons.tsx
index c78261e..757bf54 100644
--- a/app/src/components/icons/ExportCommonIcons.tsx
+++ b/app/src/components/icons/ExportCommonIcons.tsx
@@ -607,7 +607,7 @@ export const HourlySimulationIcon = () => {
fillRule="evenodd"
clipRule="evenodd"
d="M9.22794 8.29297C9.22794 9.1131 9.69975 9.49575 10.1561 9.86512C10.7275 10.3286 11.371 10.8503 11.4375 12.4462H5.91087C5.97732 10.8503 6.62079 10.3286 7.19228 9.86512C7.64859 9.49575 8.1204 9.1131 8.1204 8.29297C8.1204 7.47284 7.64859 7.09018 7.19228 6.72082C6.62079 6.25732 5.97732 5.73567 5.91087 4.13971H11.4375C11.371 5.73567 10.7275 6.25732 10.1561 6.72082C9.69975 7.09018 9.22794 7.47284 9.22794 8.29297ZM10.5049 7.15054C11.1694 6.61173 11.9968 5.94112 11.9968 3.86282V3.58594H5.35156V3.86282C5.35156 5.94112 6.17889 6.61173 6.84342 7.15054C7.27867 7.50385 7.56663 7.73699 7.56663 8.29297C7.56663 8.84895 7.27867 9.08209 6.84342 9.4354C6.17889 9.97421 5.35156 10.6448 5.35156 12.7231V13H11.9968V12.7231C11.9968 10.6448 11.1695 9.97421 10.5049 9.4354C10.0697 9.08209 9.78171 8.84895 9.78171 8.29297C9.78171 7.73699 10.0697 7.50385 10.5049 7.15054ZM8.54764 9.83582L7.71588 10.5109C7.3515 10.806 7.03751 11.0602 6.86916 11.6156H10.4792C10.3108 11.0602 9.99685 10.806 9.63247 10.5109L8.80071 9.83582C8.72706 9.77602 8.62129 9.77602 8.54764 9.83582Z"
- fill="#2B3344"
+ fill="var(--text-color)"
/>
</svg>
);
@@ -624,15 +624,15 @@ export const DailyProductionIcon = () => {
>
<path
d="M13.4564 6.96778C13.3816 6.81906 13.2232 6.72864 13.0596 6.74287L12.5621 6.77922C12.0226 4.82899 10.2365 3.39063 8.11668 3.39063C5.57103 3.39059 3.5 5.46179 3.5 8.00724C3.5 10.5529 5.57103 12.6239 8.11664 12.6239C9.59017 12.6239 10.9876 11.911 11.8549 10.7172C11.988 10.5335 11.947 10.2772 11.7637 10.1437C11.5801 10.0105 11.3235 10.0519 11.1904 10.2347C10.477 11.2167 9.328 11.8032 8.11645 11.8032C6.02331 11.8032 4.32065 10.1003 4.32065 8.00737C4.32065 5.91438 6.02334 4.21163 8.11648 4.21163C9.80226 4.21163 11.2333 5.3171 11.7269 6.84049L11.4679 6.85944C11.3024 6.87139 11.1604 6.98234 11.1083 7.13969C11.0559 7.29735 11.104 7.47084 11.2294 7.57934L11.9746 8.22285C12.0471 8.33961 12.1753 8.41774 12.3224 8.41774C12.3301 8.41774 12.3373 8.41599 12.3449 8.41564C12.3474 8.41564 12.3493 8.4167 12.3516 8.4167C12.3614 8.4167 12.3714 8.41654 12.3816 8.41564C12.4901 8.40757 12.5909 8.35682 12.6622 8.27447L13.3998 7.42041C13.5087 7.2949 13.5308 7.11596 13.4564 6.96778Z"
- fill="#2B3344"
+ fill="var(--text-color)"
/>
<path
d="M5.94531 9.43859V9.04L6.30878 8.71149C6.92314 8.16192 7.22165 7.84585 7.23024 7.51715C7.23024 7.28766 7.09188 7.1061 6.76706 7.1061C6.52494 7.1061 6.31281 7.2269 6.16567 7.33979L5.97956 6.86783C6.19166 6.70822 6.52036 6.57812 6.90122 6.57812C7.53737 6.57812 7.88783 6.95018 7.88783 7.46078C7.88783 7.9324 7.54615 8.30903 7.1393 8.67234L6.87962 8.88866V8.89708H7.9398V9.43823H5.94531V9.43859Z"
- fill="#2B3344"
+ fill="var(--text-color)"
/>
<path
d="M9.51199 9.43788V8.76696H8.26587V8.33889L9.33028 6.625H10.1352V8.27375H10.4726V8.76696H10.1352V9.43788H9.51199ZM9.51199 8.27375V7.65077C9.51199 7.48187 9.52061 7.30909 9.53359 7.12718H9.51638C9.42525 7.30909 9.35168 7.47344 9.25671 7.65077L8.88026 8.26513V8.27375H9.51199Z"
- fill="#2B3344"
+ fill="var(--text-color)"
/>
</svg>
);
@@ -649,7 +649,7 @@ export const MonthlyROI = () => {
>
<path
d="M3.78955 11.9997V4.84175H4.84219V4.21016C4.84221 3.97761 5.03071 3.7891 5.26325 3.7891H6.10535C6.33789 3.7891 6.52639 3.97761 6.52641 4.21012V4.84175H9.47381L9.47379 4.21012C9.47379 3.97756 9.66231 3.78906 9.89485 3.78906H10.737C10.9695 3.78906 11.158 3.97756 11.158 4.21012V4.84175H12.2107V11.9997H3.78955ZM4.42113 11.3681H11.5791V6.52599H4.42113V11.3681ZM4.84219 9.89443H6.10535V10.9471H4.84219V9.89443ZM6.52641 9.89443H7.78957V10.9471H6.52641V9.89443ZM8.21063 9.89443H9.47379V10.9471H8.21063V9.89443ZM9.89485 9.89443H11.158V10.9471H9.89485V9.89443ZM4.84219 8.42073H6.10535V9.47337H4.84219V8.42073ZM6.52641 8.42073H7.78957V9.47337H6.52641V8.42073ZM8.21063 8.42073H9.47379V9.47337H8.21063V8.42073ZM9.89485 8.42073H11.158V9.47337H9.89485V8.42073ZM6.52641 6.94707H7.78957V7.99971H6.52641V6.94707ZM8.21063 6.94707H9.47379V7.99971H8.21063V6.94707ZM9.89485 6.94707H11.158V7.99971H9.89485V6.94707ZM10.2106 4.21019C10.0362 4.21019 9.89485 4.35156 9.89485 4.52598V5.15756C9.89485 5.33198 10.0362 5.47335 10.2106 5.47335H10.4212C10.5956 5.47335 10.737 5.33198 10.737 5.15756V4.52598C10.737 4.35156 10.5956 4.21019 10.4212 4.21019H10.2106ZM5.57904 4.21016C5.40462 4.21016 5.26325 4.35156 5.26325 4.52598V5.15756C5.26325 5.33195 5.40462 5.47335 5.57904 5.47335H5.78956C5.96398 5.47335 6.10535 5.33195 6.10535 5.15756V4.52598C6.10535 4.35156 5.96398 4.21016 5.78956 4.21016H5.57904ZM6.73695 8.63125V9.26285H7.57905V8.63125H6.73695ZM5.05271 8.63125V9.26285H5.89483V8.63125H5.05271ZM8.42117 8.63125V9.26285H9.26327V8.63125H8.42117ZM10.1054 8.63125V9.26283H10.9475V8.63125H10.1054Z"
- fill="#2B3344"
+ fill="var(--text-color)"
/>
</svg>
);
@@ -666,15 +666,15 @@ export const ExpandIcon = () => {
>
<path
d="M16 5.32324C16 5.09668 15.8018 4.89844 15.5752 4.89844H3.96387C3.7373 4.89844 3.53906 5.09668 3.53906 5.32324V6.17285C3.53906 6.39941 3.7373 6.59766 3.96387 6.59766H15.5752C15.8018 6.59766 16 6.39941 16 6.17285V5.32324Z"
- fill="#2B3344"
+ fill="var(--text-color)"
/>
<path
d="M16 13.8232C16 13.5967 15.8018 13.3984 15.5752 13.3984H3.96387C3.7373 13.3984 3.53906 13.5967 3.53906 13.8232V14.6729C3.53906 14.8994 3.7373 15.0977 3.96387 15.0977H15.5752C15.8018 15.0977 16 14.8994 16 14.6729V13.8232Z"
- fill="#2B3344"
+ fill="var(--text-color)"
/>
<path
d="M12.1768 10.8477C12.4033 10.8477 12.6016 10.6494 12.6016 10.4229V9.57324C12.6016 9.34668 12.4033 9.14844 12.1768 9.14844H7.3623C7.13574 9.14844 6.9375 9.34668 6.9375 9.57324V10.4229C6.9375 10.6494 7.13574 10.8477 7.3623 10.8477H12.1768Z"
- fill="#2B3344"
+ fill="var(--text-color)"
/>
</svg>
);
@@ -691,21 +691,21 @@ export const StartIcon = () => {
>
<path
d="M10.8542 7.58594V10.5918"
- stroke="#6F42C1"
+ stroke="var(--text-color)"
strokeWidth="0.901765"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M10.854 15.9971C7.95036 15.9971 5.59375 13.6405 5.59375 10.7369C5.59375 7.83317 7.95036 5.47656 10.854 5.47656C13.7577 5.47656 16.1143 7.83317 16.1143 10.7369"
- stroke="#6F42C1"
+ stroke="var(--text-color)"
strokeWidth="0.901765"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M9.05078 3.97656H12.6578"
- stroke="#6F42C1"
+ stroke="var(--text-color)"
strokeWidth="0.901765"
strokeMiterlimit="10"
strokeLinecap="round"
@@ -734,21 +734,21 @@ export const EndIcon = () => {
>
<path
d="M10.8542 7.58594V10.5918"
- stroke="#6F42C1"
+ stroke="var(--text-color)"
strokeWidth="0.901765"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M10.854 15.9971C7.95036 15.9971 5.59375 13.6405 5.59375 10.7369C5.59375 7.83317 7.95036 5.47656 10.854 5.47656C13.7577 5.47656 16.1143 7.83317 16.1143 10.7369"
- stroke="#6F42C1"
+ stroke="var(--text-color)"
strokeWidth="0.901765"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M9.05078 3.97656H12.6578"
- stroke="#6F42C1"
+ stroke="var(--text-color)"
strokeWidth="0.901765"
strokeMiterlimit="10"
strokeLinecap="round"
@@ -756,7 +756,7 @@ export const EndIcon = () => {
/>
<path
d="M12.5977 13.898V13.2007C12.5977 12.341 13.2109 11.9863 13.9563 12.4191L14.5575 12.7678L15.1587 13.1165C15.9041 13.5494 15.9041 14.2527 15.1587 14.6856L14.5575 15.0343L13.9563 15.3829C13.2109 15.8158 12.5977 15.4611 12.5977 14.6014V13.898Z"
- stroke="#6F42C1"
+ stroke="var(--text-color)"
strokeWidth="0.901765"
strokeMiterlimit="10"
strokeLinecap="round"
@@ -779,11 +779,12 @@ export const SpeedIcon = () => {
fillRule="evenodd"
clipRule="evenodd"
d="M9.55992 9.81727L4.10352 6.17969V14.7664L9.55992 11.1288V14.7664L16 10.4731L9.55992 6.17969V9.81727ZM5.1948 12.7273V8.21877L8.57624 10.4731L5.1948 12.7273ZM10.6512 12.7273V8.21877L14.0326 10.4731L10.6512 12.7273Z"
- fill="#2B3344"
+ fill="var(--text-color)"
/>
</svg>
);
};
+
// export const DublicateIcon = () => {
// return (
// <svg
diff --git a/app/src/components/icons/analysis.tsx b/app/src/components/icons/analysis.tsx
index d081a86..591df60 100644
--- a/app/src/components/icons/analysis.tsx
+++ b/app/src/components/icons/analysis.tsx
@@ -31,7 +31,7 @@ export function ProductionCapacityIcon() {
fillRule="evenodd"
clipRule="evenodd"
d="M13.9063 12.9046L14.2265 13.86L14.4378 14.5073C14.9906 16.2239 15.2594 17.2662 15.2594 17.7299C15.2594 18.8219 14.3742 19.7072 13.2822 19.7072C12.1902 19.7072 11.305 18.8219 11.305 17.7299C11.305 17.2106 11.6422 15.9654 12.3379 13.86L12.658 12.9046C12.8604 12.3082 13.704 12.3082 13.9063 12.9046ZM13.2822 7.84375C16.9222 7.84375 19.873 10.7945 19.873 14.4345C19.873 15.7565 19.4823 17.0219 18.7621 18.0974C18.5596 18.3999 18.1502 18.4809 17.8478 18.2784C17.5453 18.0758 17.4643 17.6665 17.6668 17.364C18.2428 16.5038 18.5548 15.4933 18.5548 14.4345C18.5548 11.5225 16.1942 9.16191 13.2822 9.16191C10.3702 9.16191 8.00956 11.5225 8.00956 14.4345C8.00956 15.4933 8.32153 16.5038 8.89752 17.364C9.10005 17.6665 9.01904 18.0758 8.71659 18.2784C8.41414 18.4809 8.00477 18.3999 7.80224 18.0974C7.08206 17.0219 6.69141 15.7565 6.69141 14.4345C6.69141 10.7945 9.6422 7.84375 13.2822 7.84375ZM13.2822 15.2247L13.0657 15.9238L12.9161 16.4319C12.7219 17.111 12.6231 17.5509 12.6231 17.7299C12.6231 18.0939 12.9182 18.389 13.2822 18.389C13.6462 18.389 13.9413 18.0939 13.9413 17.7299C13.9413 17.511 13.7936 16.9022 13.5044 15.9428L13.2822 15.2247Z"
- fill="white"
+ fill="var(--text-color)"
/>
</svg>
);
diff --git a/app/src/components/ui/analysis/ProductionCapacity.tsx b/app/src/components/ui/analysis/ProductionCapacity.tsx
index 192e009..31c3a02 100644
--- a/app/src/components/ui/analysis/ProductionCapacity.tsx
+++ b/app/src/components/ui/analysis/ProductionCapacity.tsx
@@ -2,7 +2,7 @@ import React, { useState } from "react";
import { ProductionCapacityIcon } from "../../icons/analysis";
const ProductionCapacity = ({
- progressPercent = 10,
+ progressPercent = 50,
avgProcessTime = "28.4 Secs/unit",
machineUtilization = "78%",
throughputValue = 128,
diff --git a/app/src/components/ui/simulation/simulationPlayer.tsx b/app/src/components/ui/simulation/simulationPlayer.tsx
index 5313710..22ad9fe 100644
--- a/app/src/components/ui/simulation/simulationPlayer.tsx
+++ b/app/src/components/ui/simulation/simulationPlayer.tsx
@@ -120,7 +120,7 @@ const SimulationPlayer: React.FC = () => {
const intervals = [10, 20, 30, 40, 50, 60]; // in minutes
const totalSegments = intervals.length;
- const progress = 80; // percent (example)
+ const progress = 20; // percent (example)
const processPlayerRef = useRef<HTMLDivElement>(null);
const processWrapperRef = useRef<HTMLDivElement>(null);
@@ -294,7 +294,7 @@ const SimulationPlayer: React.FC = () => {
Speed
</div>
<div className="slider-container" ref={sliderRef}>
- <div className="speed-label mix-value">0X</div>
+ <div className="speed-label mix-value">0.5X</div>
<div className="marker marker-10"></div>
<div className="marker marker-20"></div>
<div className="marker marker-30"></div>
diff --git a/app/src/modules/visualization/RealTimeVisulization.tsx b/app/src/modules/visualization/RealTimeVisulization.tsx
index 05f7371..caf37a1 100644
--- a/app/src/modules/visualization/RealTimeVisulization.tsx
+++ b/app/src/modules/visualization/RealTimeVisulization.tsx
@@ -11,10 +11,7 @@ import {
useDroppedObjectsStore,
useFloatingWidget,
} from "../../store/visualization/useDroppedObjectsStore";
-import {
- useSocketStore,
- useWidgetSubOption,
-} from "../../store/store";
+import { useSocketStore, useWidgetSubOption } from "../../store/store";
import { getZone2dData } from "../../services/visulization/zone/getZoneData";
import { generateUniqueId } from "../../functions/generateUniqueId";
import { determinePosition } from "./functions/determinePosition";
@@ -69,13 +66,17 @@ const RealTimeVisulization: React.FC = () => {
const { selectedZone, setSelectedZone } = useSelectedZoneStore();
const { setRightSelect } = useRightSelected();
- const { editWidgetOptions, setEditWidgetOptions } = useEditWidgetOptionsStore();
+ const { editWidgetOptions, setEditWidgetOptions } =
+ useEditWidgetOptionsStore();
const { rightClickSelected, setRightClickSelected } = useRightClickSelected();
const [openConfirmationPopup, setOpenConfirmationPopup] = useState(false);
const { setFloatingWidget } = useFloatingWidget();
const { widgetSubOption } = useWidgetSubOption();
const { visualizationSocket } = useSocketStore();
const { setSelectedChartId } = useWidgetStore();
+ const [waitingPanels, setWaitingPanels] = useState(null);
+
+ console.log("waitingPanels: ", waitingPanels);
OuterClick({
contextClassName: [
@@ -377,6 +378,8 @@ const RealTimeVisulization: React.FC = () => {
setHiddenPanels={setHiddenPanels}
selectedZone={selectedZone}
setSelectedZone={setSelectedZone}
+ waitingPanels={waitingPanels}
+ setWaitingPanels={setWaitingPanels}
/>
)}
@@ -385,6 +388,7 @@ const RealTimeVisulization: React.FC = () => {
setSelectedZone={setSelectedZone}
hiddenPanels={hiddenPanels}
setZonesData={setZonesData}
+ waitingPanels={waitingPanels}
/>
</>
)}
diff --git a/app/src/modules/visualization/widgets/panel/AddButtons.tsx b/app/src/modules/visualization/widgets/panel/AddButtons.tsx
index 4877824..778ded1 100644
--- a/app/src/modules/visualization/widgets/panel/AddButtons.tsx
+++ b/app/src/modules/visualization/widgets/panel/AddButtons.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
import {
CleanPannel,
EyeIcon,
@@ -57,6 +57,8 @@ interface ButtonsProps {
>;
hiddenPanels: HiddenPanels; // Updated prop type
setHiddenPanels: React.Dispatch<React.SetStateAction<HiddenPanels>>; // Updated prop type
+ waitingPanels: any;
+ setWaitingPanels: any;
}
const AddButtons: React.FC<ButtonsProps> = ({
@@ -64,6 +66,8 @@ const AddButtons: React.FC<ButtonsProps> = ({
setSelectedZone,
setHiddenPanels,
hiddenPanels,
+ waitingPanels,
+ setWaitingPanels,
}) => {
const { visualizationSocket } = useSocketStore();
@@ -174,65 +178,62 @@ const AddButtons: React.FC<ButtonsProps> = ({
// Function to handle "+" button click
const handlePlusButtonClick = async (side: Side) => {
+ const zoneId = selectedZone.zoneId;
+
if (selectedZone.activeSides.includes(side)) {
- console.log("open");
- // Panel already exists: Remove widgets from that side and update activeSides
- const email = localStorage.getItem("email") || "";
- const organization = email?.split("@")[1]?.split(".")[0]; // Fallback value
+ // Already active: Schedule removal
- // Remove all widgets associated with the side and update active sides
- const cleanedWidgets = selectedZone.widgets.filter(
- (widget) => widget.panel !== side
- );
- const newActiveSides = selectedZone.activeSides.filter((s) => s !== side);
+ setWaitingPanels(side); // Mark as waiting
- const updatedZone = {
- ...selectedZone,
- widgets: cleanedWidgets,
- activeSides: newActiveSides,
- panelOrder: newActiveSides,
- };
+ setTimeout(() => {
+ console.log("Removing after wait...");
- let deletePanel = {
- organization: organization,
- panelName: side,
- zoneId: selectedZone.zoneId,
- };
- if (visualizationSocket) {
- visualizationSocket.emit("v2:viz-panel:delete", deletePanel);
- }
- setSelectedZone(updatedZone);
-
- if (hiddenPanels[selectedZone.zoneId]?.includes(side)) {
- setHiddenPanels((prev) => ({
- ...prev,
- [selectedZone.zoneId]: prev[selectedZone.zoneId].filter(
- (s) => s !== side
- ),
- }));
- }
-
- // if(hiddenPanels[selectedZone.zoneId].includes(side))
-
- // API call to delete the panel
- // try {
- // const response = await deletePanelApi(selectedZone.zoneId, side, organization);
- //
- // if (response.message === "Panel deleted successfully") {
- // } else {
- //
- // }
- // } catch (error) {
- //
- // }
- } else {
- // Panel does not exist: Create panel
- try {
- // Get email and organization safely with a default fallback
const email = localStorage.getItem("email") || "";
- const organization = email?.split("@")[1]?.split(".")[0];
+ const organization = email?.split("@")[1]?.split(".")[0] || "";
+
+ // Remove widgets for that side
+ const cleanedWidgets = selectedZone.widgets.filter(
+ (widget) => widget.panel !== side
+ );
+ const newActiveSides = selectedZone.activeSides.filter(
+ (s) => s !== side
+ );
+
+ const updatedZone = {
+ ...selectedZone,
+ widgets: cleanedWidgets,
+ activeSides: newActiveSides,
+ panelOrder: newActiveSides,
+ };
+
+ const deletePanel = {
+ organization,
+ panelName: side,
+ zoneId,
+ };
+
+ if (visualizationSocket) {
+ visualizationSocket.emit("v2:viz-panel:delete", deletePanel);
+ }
+
+ setSelectedZone(updatedZone);
+
+ if (hiddenPanels[zoneId]?.includes(side)) {
+ setHiddenPanels((prev) => ({
+ ...prev,
+ [zoneId]: prev[zoneId].filter((s) => s !== side),
+ }));
+ }
+
+ // Remove from waiting state
+ setWaitingPanels(null);
+ }, 500); // Wait for 2 seconds
+ } else {
+ // Panel does not exist: Add it
+ try {
+ const email = localStorage.getItem("email") || "";
+ const organization = email?.split("@")[1]?.split(".")[0] || "";
- // Prevent duplicate side entries
const newActiveSides = selectedZone.activeSides.includes(side)
? [...selectedZone.activeSides]
: [...selectedZone.activeSides, side];
@@ -242,32 +243,31 @@ const AddButtons: React.FC<ButtonsProps> = ({
activeSides: newActiveSides,
panelOrder: newActiveSides,
};
- let addPanel = {
- organization: organization,
- zoneId: selectedZone.zoneId,
+
+ const addPanel = {
+ organization,
+ zoneId,
panelOrder: newActiveSides,
};
+
if (visualizationSocket) {
visualizationSocket.emit("v2:viz-panel:add", addPanel);
}
- setSelectedZone(updatedZone);
- // API call to create panels
- // const response = await panelData(organization, selectedZone.zoneId, newActiveSides);
- //
- // if (response.message === "Panels created successfully") {
- // } else {
- //
- // }
- } catch (error) {}
+ setSelectedZone(updatedZone);
+ } catch (error) {
+ console.error("Error adding panel:", error);
+ }
}
};
+
return (
<>
<div>
{(["top", "right", "bottom", "left"] as Side[]).map((side) => (
<div key={side} className={`side-button-container ${side}`}>
{/* "+" Button */}
+
<button
className={`side-button ${side}${
selectedZone.activeSides.includes(side) ? " active" : ""
@@ -286,7 +286,17 @@ const AddButtons: React.FC<ButtonsProps> = ({
{/* Extra Buttons */}
{selectedZone.activeSides.includes(side) && (
- <div className="extra-Bs">
+ <div
+ className={`extra-Bs
+ ${waitingPanels === side ? "extra-Bs-addclosing" : ""}
+ ${
+ !hiddenPanels[selectedZone.zoneId]?.includes(side) &&
+ waitingPanels !== side
+ ? "extra-Bs-addopening"
+ : ""
+ }
+ `}
+ >
{/* Hide Panel */}
<div
className={`icon ${
diff --git a/app/src/modules/visualization/widgets/panel/Panel.tsx b/app/src/modules/visualization/widgets/panel/Panel.tsx
index f53b0ea..c1eeefc 100644
--- a/app/src/modules/visualization/widgets/panel/Panel.tsx
+++ b/app/src/modules/visualization/widgets/panel/Panel.tsx
@@ -43,6 +43,7 @@ interface PanelProps {
>;
hiddenPanels: any;
setZonesData: React.Dispatch<React.SetStateAction<any>>;
+ waitingPanels: any;
}
const generateUniqueId = () =>
@@ -53,6 +54,7 @@ const Panel: React.FC<PanelProps> = ({
setSelectedZone,
hiddenPanels,
setZonesData,
+ waitingPanels,
}) => {
const { widgetSelect, setWidgetSelect } = useAsset3dWidget();
const panelRefs = useRef<{ [side in Side]?: HTMLDivElement }>({});
@@ -108,8 +110,9 @@ const Panel: React.FC<PanelProps> = ({
case "bottom":
return {
minWidth: "170px",
- width: `calc(100% - ${(leftActive ? panelSize : 0) + (rightActive ? panelSize : 0)
- }px)`,
+ width: `calc(100% - ${
+ (leftActive ? panelSize : 0) + (rightActive ? panelSize : 0)
+ }px)`,
minHeight: "170px",
height: `${panelSize}px`,
left: leftActive ? `${panelSize}px` : "0",
@@ -122,8 +125,9 @@ const Panel: React.FC<PanelProps> = ({
minWidth: "170px",
width: `${panelSize}px`,
minHeight: "170px",
- height: `calc(100% - ${(topActive ? panelSize : 0) + (bottomActive ? panelSize : 0)
- }px)`,
+ height: `calc(100% - ${
+ (topActive ? panelSize : 0) + (bottomActive ? panelSize : 0)
+ }px)`,
top: topActive ? `${panelSize}px` : "0",
bottom: bottomActive ? `${panelSize}px` : "0",
[side]: "0",
@@ -149,7 +153,6 @@ const Panel: React.FC<PanelProps> = ({
const currentWidgetsCount = getCurrentWidgetCount(panel);
const maxCapacity = calculatePanelCapacity(panel);
-
if (currentWidgetsCount < maxCapacity) {
addWidgetToPanel(draggedAsset, panel);
}
@@ -283,8 +286,9 @@ const Panel: React.FC<PanelProps> = ({
<div
key={side}
id="panel-wrapper"
- className={`panel ${side}-panel absolute ${hiddenPanels[selectedZone.zoneId]?.includes(side) ? "hidePanel" : ""
- }`}
+ className={`panel ${side}-panel absolute ${
+ hiddenPanels[selectedZone.zoneId]?.includes(side) ? "hidePanel" : ""
+ }`}
style={getPanelStyle(side)}
onDrop={(e) => handleDrop(e, side)}
onDragOver={(e) => e.preventDefault()}
@@ -297,11 +301,18 @@ const Panel: React.FC<PanelProps> = ({
}}
>
<div
- className={`panel-content ${isPlaying && "fullScreen"}`}
+ className={`panel-content
+ ${waitingPanels === side ? `${side}-closing` : ""}
+ ${
+ !hiddenPanels[selectedZone.zoneId]?.includes(side) && waitingPanels !== side
+ ? `${side}-opening`
+ : ""
+ }
+ ${isPlaying ? "fullScreen" : ""}`}
style={{
pointerEvents:
selectedZone.lockedPanels.includes(side) ||
- hiddenPanels[selectedZone.zoneId]?.includes(side)
+ hiddenPanels[selectedZone.zoneId]?.includes(side)
? "none"
: "auto",
opacity: selectedZone.lockedPanels.includes(side) ? "0.8" : "1",
diff --git a/app/src/pages/Project.tsx b/app/src/pages/Project.tsx
index c491583..bdefb8b 100644
--- a/app/src/pages/Project.tsx
+++ b/app/src/pages/Project.tsx
@@ -22,6 +22,9 @@ import SimulationPlayer from "../components/ui/simulation/simulationPlayer";
import KeyPressListener from "../utils/shortcutkeys/handleShortcutKeys";
import { useSelectedUserStore } from "../store/useCollabStore";
import FollowPerson from "../components/templates/FollowPerson";
+import ProductionCapacity from "../components/ui/analysis/ProductionCapacity";
+import ThroughputSummary from "../components/ui/analysis/ThroughputSummary";
+import ROISummary from "../components/ui/analysis/ROISummary";
const Project: React.FC = () => {
let navigate = useNavigate();
@@ -59,8 +62,10 @@ const Project: React.FC = () => {
return (
<div className="project-main">
{/* <div className="analysis">
- <ProductionCapacity />
- <ThroughputSummary />
+ <div className="analysis-wrapper">
+ <ProductionCapacity />
+ <ThroughputSummary />
+ </div>
<ROISummary />
</div> */}
<KeyPressListener />
@@ -79,6 +84,7 @@ const Project: React.FC = () => {
<RealTimeVisulization />
{activeModule !== "market" && <Tools />}
{isPlaying && activeModule === "simulation" && <SimulationPlayer />}
+ {/* {<SimulationPlayer />} */}
{selectedUser && <FollowPerson />}
</div>
);
diff --git a/app/src/styles/components/analysis/ROISummary.scss b/app/src/styles/components/analysis/ROISummary.scss
index c1ba7d5..96b4a5d 100644
--- a/app/src/styles/components/analysis/ROISummary.scss
+++ b/app/src/styles/components/analysis/ROISummary.scss
@@ -239,25 +239,25 @@
height: 125px;
overflow-y: hidden;
position: relative;
+ .semi-circle {
+ width: 100%;
+ height: 250px;
+ border-radius: 50%;
+ position: relative;
+ transition: background 0.5s ease;
+ }
+ .progress-cover {
+ position: absolute;
+ width: 75%;
+ height: 75%;
+ top: 12.5%;
+ left: 12.5%;
+ background: #000000cc;
+ border-radius: 50%;
+ }
}
- .semi-circle {
- width: 100%;
- height: 250px;
- border-radius: 50%;
- position: relative;
- transition: background 0.5s ease;
- }
- .progress-cover {
- position: absolute;
- width: 75%;
- height: 75%;
- top: 12.5%;
- left: 12.5%;
- background-color: var(--background-color);
- border-radius: 50%;
- }
.label-wrapper {
.label {
@@ -305,14 +305,7 @@
text-align: left;
}
- .total-row {
- background-color: #f4f4f4;
- font-weight: bold;
- }
- .net-profit-row {
- background-color: #dff0d8;
- font-weight: bold;
- }
+
}
}
\ No newline at end of file
diff --git a/app/src/styles/components/analysis/analysis.scss b/app/src/styles/components/analysis/analysis.scss
index 0af69c2..030a79f 100644
--- a/app/src/styles/components/analysis/analysis.scss
+++ b/app/src/styles/components/analysis/analysis.scss
@@ -7,7 +7,7 @@
align-items: start;
width: 100%;
height: 100vh;
- // pointer-events: none;k
+ // pointer-events: none;
z-index: 10000;
.analysis-wrapper {
@@ -25,6 +25,7 @@
padding: 8px;
.analysis-card-wrapper {
+ width: 100%;
background: var(--background-color);
border-radius: 14px;
padding: 16px;
@@ -66,7 +67,8 @@
.progress-bar {
position: relative;
- width: 36px;
+ // width: 36px;
+ width: 100%;
height: 4px;
border-radius: 13px;
overflow: hidden;
diff --git a/app/src/styles/components/simulation/simulation.scss b/app/src/styles/components/simulation/simulation.scss
index 9f748f8..ec53e6f 100644
--- a/app/src/styles/components/simulation/simulation.scss
+++ b/app/src/styles/components/simulation/simulation.scss
@@ -10,7 +10,7 @@
width: 70%;
.simulation-player-container {
- background-color: var(--background-color);
+ background: var(--background-color);
padding: 7px;
border-radius: 15px;
display: flex;
@@ -18,7 +18,10 @@
gap: 8px;
.progresser-wrapper {
- background-color: var(--highlight-accent-color);
+
+ outline: 1px solid var(--border-color);
+ background: var(--background-color);
+ // background-color: var(--highlight-accent-color);
padding: 4px 5px;
border-radius: 12px;
display: flex;
@@ -61,7 +64,8 @@
height: 8px;
border-radius: 5px;
// overflow: hidden;
- background-color: var(--highlight-accent-color);
+ outline: 1px solid var(--border-color);
+ background: var(--background-color);
.progress {
border-radius: 5px;
@@ -82,7 +86,8 @@
cursor: pointer;
&:hover {
- background: var(--highlight-accent-color);
+ outline: 1px solid var(--border-color);
+ background: var(--background-color);
color: var(--accent-color);
path {
@@ -94,7 +99,7 @@
.speed-control-container {
@include flex-center;
- gap: 18px;
+ gap: 32px;
padding: 5px 16px;
// background: var(--background-color);
border-radius: #{$border-radius-medium};
@@ -122,7 +127,8 @@
.speed-label {
font-size: var(--font-size-tiny);
position: absolute;
- bottom: -4px;
+ bottom: -7px;
+ transform: translate(-50%, -0%);
&:first-child {
left: 0;
@@ -171,13 +177,14 @@
z-index: 2;
}
}
- .marker{
- position: absolute;
- background-color: var(--text-disabled);
- width: 2px;
- height: 12px;
- border-radius: 1px;
- top: 8px;
+
+ .marker {
+ position: absolute;
+ background-color: var(--text-disabled);
+ width: 2px;
+ height: 12px;
+ border-radius: 1px;
+ top: 8px;
}
.marker.marker-10 {
@@ -239,9 +246,8 @@
.timeline {
padding: 16px;
- // background: #f5f3fa;
- background: linear-gradient(90.17deg, rgba(255, 255, 255, 0.64) 1.53%, rgba(255, 255, 255, 0.48) 98.13%);
-
+ outline: 1px solid var(--border-color);
+ background: var(--background-color);
border-radius: 30px;
display: flex;
align-items: center;
@@ -271,9 +277,8 @@
background-color: #d3d3e2;
&.filled {
- background-color: #8f5cf2;
-
- border: 4px solid var(--accent-color);
+ background-color: var(--accent-color);
+ border: 4px solid #8f5cf2;
}
}
}
@@ -302,7 +307,8 @@
.processDisplayer {
border-radius: 5px;
// overflow: hidden;
- background-color: var(--highlight-accent-color);
+ outline: 1px solid var(--border-color);
+ background: var(--background-color);
padding: 14px 6px;
position: relative;
diff --git a/app/src/styles/pages/realTimeViz.scss b/app/src/styles/pages/realTimeViz.scss
index 3aa1bd5..e89b9a7 100644
--- a/app/src/styles/pages/realTimeViz.scss
+++ b/app/src/styles/pages/realTimeViz.scss
@@ -78,7 +78,7 @@
min-width: 150px;
z-index: 3;
transform: translate(-50%, -10%);
-
+ transition: transform 0.5s linear;
&::-webkit-scrollbar {
display: none;
}
@@ -183,8 +183,8 @@
.panel {
position: absolute;
- background: var(--background-color);
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+ // background: var(--background-color);
+ // box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
border-radius: 6px;
overflow: auto;
@@ -203,7 +203,7 @@
display: flex;
flex-direction: column;
gap: 6px;
- background: var(--background-color);
+ // background: var(--background-color);
&::-webkit-scrollbar {
display: none;
@@ -383,6 +383,10 @@
transition: transform 0.3s ease;
box-shadow: #{$box-shadow-medium};
+ svg {
+ stroke: var(--icon-default-color) !important;
+ }
+
.extra-Bs {
display: flex;
align-items: center;
@@ -422,6 +426,7 @@
.add-icon {
@include flex-center;
transition: rotate 0.2s;
+
}
path {
@@ -440,6 +445,8 @@
stroke: #f65648;
stroke-width: 2;
}
+
+
}
}
@@ -662,7 +669,7 @@
}
.distance-line {
-
+
position: absolute;
border-style: dashed;
border-color: var(--accent-color);
@@ -801,4 +808,179 @@
}
}
}
+}
+
+
+
+
+.panel-content {
+ background: var(--background-color);
+
+}
+
+
+
+
+/* RIGHT */
+.panel-content.right-opening {
+ animation: rightExpand 0.5s ease-in-out forwards;
+ transform-origin: right;
+}
+
+@keyframes rightExpand {
+ from {
+ transform: scaleX(0);
+ }
+
+ to {
+ transform: scaleX(1);
+ }
+}
+
+.panel-content.right-closing {
+ animation: rightCollapse 0.5s ease-in-out forwards;
+ transform-origin: right;
+}
+
+@keyframes rightCollapse {
+ from {
+ transform: scaleX(1);
+ }
+
+ to {
+ transform: scaleX(0);
+ }
+}
+
+/* LEFT */
+.panel-content.left-opening {
+ animation: leftExpand 0.5s ease-in-out forwards;
+ transform-origin: left;
+}
+
+@keyframes leftExpand {
+ from {
+ transform: scaleX(0);
+ }
+
+ to {
+ transform: scaleX(1);
+ }
+}
+
+.left-closing {
+ animation: leftCollapse 0.5s ease-in-out forwards;
+ transform-origin: left;
+}
+
+@keyframes leftCollapse {
+ from {
+ transform: scaleX(1);
+ }
+
+ to {
+ transform: scaleX(0);
+ }
+}
+
+/* TOP */
+.panel-content.top-opening {
+ animation: topExpand 0.5s ease-in-out forwards;
+ transform-origin: top;
+}
+
+@keyframes topExpand {
+ from {
+ transform: scaleY(0);
+ }
+
+ to {
+ transform: scaleY(1);
+ }
+}
+
+.top-closing {
+ animation: topCollapse 0.5s ease-in-out forwards;
+ transform-origin: top;
+}
+
+@keyframes topCollapse {
+ from {
+ transform: scaleY(1);
+ }
+
+ to {
+ transform: scaleY(0);
+ }
+}
+
+/* BOTTOM */
+.panel-content.bottom-opening {
+ animation: bottomExpand 0.5s ease-in-out forwards;
+ transform-origin: bottom;
+}
+
+@keyframes bottomExpand {
+ from {
+ transform: scaleY(0);
+ }
+
+ to {
+ transform: scaleY(1);
+ }
+}
+
+.bottom-closing {
+ animation: bottomCollapse 0.5s ease-in-out forwards;
+ transform-origin: bottom;
+}
+
+@keyframes bottomCollapse {
+ from {
+ transform: scaleY(1);
+ }
+
+ to {
+ transform: scaleY(0);
+ }
+}
+
+
+
+
+// Add button
+
+.extra-Bs {}
+
+.extra-Bs-addopening {
+ animation: slideDown 0.3s ease forwards;
+}
+
+.extra-Bs-addclosing {
+ animation: slideUp 0.3s ease forwards;
+}
+
+
+@keyframes slideDown {
+ from {
+ opacity: 0;
+ transform: scaleY(0);
+ }
+
+ to {
+ opacity: 1;
+ transform: scaleY(1);
+ }
+}
+
+@keyframes slideUp {
+ from {
+ opacity: 1;
+ transform: scaleY(1);
+ }
+
+ to {
+ opacity: 0;
+ transform: scaleY(0);
+ }
}
\ No newline at end of file
From 4535be68b3a01ba1466ba1fe1f317cc2752ea78e Mon Sep 17 00:00:00 2001
From: Vishnu <vishnu@hexrfactory.com>
Date: Wed, 30 Apr 2025 19:45:29 +0530
Subject: [PATCH 06/17] refactor: Update ExpandIcon to accept isActive prop for
dynamic rendering; enhance ThroughputSummary and SimulationPlayer components
with getAvatarColor for consistent color usage; improve styles across
simulation and visualization components for better layout and responsiveness
---
.../components/icons/ExportCommonIcons.tsx | 53 ++++---
.../ui/analysis/ThroughputSummary.tsx | 9 +-
.../ui/simulation/simulationPlayer.tsx | 87 ++++++-----
.../components/simulation/simulation.scss | 147 +++++++++---------
app/src/styles/components/tools.scss | 2 +
.../visualization/floating/common.scss | 6 +-
.../floating/energyConsumed.scss | 10 +-
app/src/styles/pages/realTimeViz.scss | 6 +-
app/src/styles/scene/scene.scss | 2 +-
9 files changed, 167 insertions(+), 155 deletions(-)
diff --git a/app/src/components/icons/ExportCommonIcons.tsx b/app/src/components/icons/ExportCommonIcons.tsx
index 8e03fd0..eaa7701 100644
--- a/app/src/components/icons/ExportCommonIcons.tsx
+++ b/app/src/components/icons/ExportCommonIcons.tsx
@@ -655,8 +655,8 @@ export const MonthlyROI = () => {
);
};
-export const ExpandIcon = () => {
- return (
+export const ExpandIcon = ({ isActive }: { isActive: boolean }) => {
+ return isActive ? (
<svg
width="20"
height="20"
@@ -677,6 +677,36 @@ export const ExpandIcon = () => {
fill="var(--text-color)"
/>
</svg>
+ ) : (
+ <svg
+ width="21"
+ height="20"
+ viewBox="0 0 21 20"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M5 5.6875H15.5"
+ stroke="var(--text-color)"
+ strokeWidth="1.4"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ />
+ <path
+ d="M5 8.60156H15.5"
+ stroke="var(--text-color)"
+ strokeWidth="1.4"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ />
+ <path
+ d="M5 10.6484L10.25 14.7318L15.5 10.6484"
+ stroke="var(--text-color)"
+ strokeWidth="1.4"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ />
+ </svg>
);
};
@@ -784,22 +814,3 @@ export const SpeedIcon = () => {
</svg>
);
};
-
-// export const DublicateIcon = () => {
-// return (
-// <svg
-// width="20"
-// height="20"
-// viewBox="0 0 20 20"
-// fill="none"
-// xmlns="http://www.w3.org/2000/svg"
-// >
-// <path
-// fillRule="evenodd"
-// clipRule="evenodd"
-// d="M14.3125 11.375C14.3125 11.7545 14.0045 12.0625 13.625 12.0625H8.125C7.7455 12.0625 7.4375 11.7545 7.4375 11.375V5.875C7.4375 5.4955 7.7455 5.1875 8.125 5.1875H13.625C14.0045 5.1875 14.3125 5.4955 14.3125 5.875V11.375ZM13.625 4.5H8.125C7.36566 4.5 6.75 5.11566 6.75 5.875V11.375C6.75 12.1343 7.36566 12.75 8.125 12.75H13.625C14.3843 12.75 15 12.1343 15 11.375V5.875C15 5.11566 14.3843 4.5 13.625 4.5ZM11.5625 14.125C11.5625 14.5045 11.2545 14.8125 10.875 14.8125H5.375C4.9955 14.8125 4.6875 14.5045 4.6875 14.125V8.625C4.6875 8.2455 4.9955 7.9375 5.375 7.9375H6.0625V7.25H5.375C4.61566 7.25 4 7.86566 4 8.625V14.125C4 14.8843 4.61566 15.5 5.375 15.5H10.875C11.6343 15.5 12.25 14.8843 12.25 14.125V13.4375H11.5625V14.125Z"
-// fill="var(--text-color)"
-// />
-// </svg>
-// );
-// };
diff --git a/app/src/components/ui/analysis/ThroughputSummary.tsx b/app/src/components/ui/analysis/ThroughputSummary.tsx
index b92a82d..e9946ae 100644
--- a/app/src/components/ui/analysis/ThroughputSummary.tsx
+++ b/app/src/components/ui/analysis/ThroughputSummary.tsx
@@ -8,6 +8,7 @@ import {
PointElement,
} from "chart.js";
import { PowerIcon, ThroughputSummaryIcon } from "../../icons/analysis";
+import { getAvatarColor } from "../../../modules/collaboration/functions/getAvatarColor";
ChartJS.register(LineElement, CategoryScale, LinearScale, PointElement);
@@ -142,13 +143,13 @@ const ThroughputSummary = () => {
<div className="progress-wrapper">
{/* Dynamically create progress bars based on shiftUtilization array */}
- {shiftUtilization.map((shift) => (
+ {shiftUtilization.map((shift, index) => (
<div
key={shift.shift}
className={`progress shift-${shift.shift}`}
style={{
width: `${shift.percentage}%`,
- backgroundColor: getRandomColor(),
+ backgroundColor: getAvatarColor(index),
}}
></div>
))}
@@ -156,11 +157,11 @@ const ThroughputSummary = () => {
<div className="progress-indicator">
{/* Dynamically create shift indicators with random colors */}
- {shiftUtilization.map((shift) => (
+ {shiftUtilization.map((shift, index) => (
<div className="shift-wrapper" key={shift.shift}>
<span
className={`indicator shift-${shift.shift}`}
- style={{ backgroundColor: getRandomColor() }} // Random color for indicator
+ style={{ backgroundColor: getAvatarColor(index) }} // Random color for indicator
></span>
<label>Shift {shift.shift}</label>
</div>
diff --git a/app/src/components/ui/simulation/simulationPlayer.tsx b/app/src/components/ui/simulation/simulationPlayer.tsx
index 86c5372..4c7c76d 100644
--- a/app/src/components/ui/simulation/simulationPlayer.tsx
+++ b/app/src/components/ui/simulation/simulationPlayer.tsx
@@ -16,8 +16,13 @@ import {
SpeedIcon,
StartIcon,
} from "../../icons/ExportCommonIcons";
+import { getAvatarColor } from "../../../modules/collaboration/functions/getAvatarColor";
const SimulationPlayer: React.FC = () => {
+ const MAX_SPEED = 8; // Maximum speed
+
+ const [expand, setExpand] = useState(true);
+
const { speed, setSpeed } = useAnimationPlaySpeed();
const [playSimulation, setPlaySimulation] = useState(false);
const { setIsPlaying } = usePlayButtonStore();
@@ -29,8 +34,7 @@ const SimulationPlayer: React.FC = () => {
// Button functions
const handleReset = () => {
- setReset(true);
- // setReset(!isReset);
+ setReset(!isReset);
setSpeed(1);
};
const handlePlayStop = () => {
@@ -49,7 +53,7 @@ const SimulationPlayer: React.FC = () => {
};
const calculateHandlePosition = () => {
- return ((speed - 0.5) / (8 - 0.5)) * 100;
+ return ((speed - 0.5) / (MAX_SPEED - 0.5)) * 100;
};
const handleMouseDown = () => {
@@ -99,7 +103,6 @@ const SimulationPlayer: React.FC = () => {
{ name: "process 9", completed: 90 }, // 90% completed
{ name: "process 10", completed: 30 }, // 30% completed
];
- const [expand, setExpand] = useState(false);
// Move getRandomColor out of render
const getRandomColor = () => {
const letters = "0123456789ABCDEF";
@@ -125,7 +128,7 @@ const SimulationPlayer: React.FC = () => {
const processPlayerRef = useRef<HTMLDivElement>(null);
const processWrapperRef = useRef<HTMLDivElement>(null);
- const [playerPosition, setPlayerPosition] = useState(0);
+ const [playerPosition, setPlayerPosition] = useState(20); // initial position
const handleProcessMouseDown = (e: React.MouseEvent) => {
if (!processWrapperRef.current) return;
@@ -204,7 +207,7 @@ const SimulationPlayer: React.FC = () => {
</div>
</div>
<div className="controls-wrapper">
- <div
+ <button
className="simulation-button-container"
onClick={() => {
handleReset();
@@ -212,8 +215,8 @@ const SimulationPlayer: React.FC = () => {
>
<ResetIcon />
Reset
- </div>
- <div
+ </button>
+ <button
className="simulation-button-container"
onClick={() => {
handlePlayStop();
@@ -221,8 +224,8 @@ const SimulationPlayer: React.FC = () => {
>
<PlayStopIcon />
{playSimulation ? "Play" : "Stop"}
- </div>
- <div
+ </button>
+ <button
className="simulation-button-container"
onClick={() => {
handleExit();
@@ -230,13 +233,13 @@ const SimulationPlayer: React.FC = () => {
>
<ExitIcon />
Exit
- </div>
- <div
- className="simulation-button-container"
+ </button>
+ <button
+ className="expand-icon-container"
onClick={() => setExpand(!expand)}
>
- <ExpandIcon />
- </div>
+ <ExpandIcon isActive={!expand} />
+ </button>
</div>
</div>
<div className="progresser-wrapper">
@@ -306,53 +309,57 @@ const SimulationPlayer: React.FC = () => {
<div className="marker marker-80"></div>
<div className="marker marker-90"></div>
<div className="custom-slider">
- <div
+ <button
className={`slider-handle ${isDragging ? "dragging" : ""}`}
style={{ left: `${calculateHandlePosition()}%` }}
onMouseDown={handleMouseDown}
>
{speed.toFixed(1)}x
- </div>
+ </button>
<input
type="range"
min="0.5"
- max="8"
+ max={MAX_SPEED}
step="0.1"
value={speed}
onChange={handleSpeedChange}
className="slider-input"
/>
</div>
- <div className="speed-label max-value">8x</div>
+ <div className="speed-label max-value">4x</div>
</div>
</div>
</div>
<div className="processDisplayer">
- <div
- className="process-player"
- style={{ left: playerPosition, position: "absolute" }}
- ></div>
+ <div className="start-displayer timmer">00:00</div>
+ <div className="end-displayer timmer">24:00</div>
<div
className="process-wrapper"
- ref={processWrapperRef}
- onMouseDown={handleProcessMouseDown}
+ style={{ padding: expand ? "0px" : "5px 35px" }}
>
- {process.map((item, index) => (
- <div
- key={index}
- className="process"
- style={{
- width: `${item.completed}%`,
- backgroundColor: processColors[index],
- }}
- ></div>
- ))}
+ <div
+ className="process-container"
+ ref={processWrapperRef}
+ onMouseDown={handleProcessMouseDown}
+ >
+ {process.map((item, index) => (
+ <div
+ key={index}
+ className="process"
+ style={{
+ width: `${item.completed}%`,
+ backgroundColor: getAvatarColor(index),
+ }}
+ >
+ <div
+ className="process-player"
+ ref={processPlayerRef}
+ style={{ left: playerPosition, position: "absolute" }}
+ ></div>
+ </div>
+ ))}
+ </div>
</div>
- <div
- className="process-player"
- ref={processPlayerRef}
- style={{ left: playerPosition, position: "absolute" }}
- ></div>
</div>
</div>
</div>
diff --git a/app/src/styles/components/simulation/simulation.scss b/app/src/styles/components/simulation/simulation.scss
index ec53e6f..0fc3df8 100644
--- a/app/src/styles/components/simulation/simulation.scss
+++ b/app/src/styles/components/simulation/simulation.scss
@@ -3,11 +3,11 @@
.simulation-player-wrapper {
position: fixed;
- bottom: 50px;
+ bottom: 12px;
left: 50%;
z-index: 2;
transform: translate(-50%, 0);
- width: 70%;
+ width: 70vw;
.simulation-player-container {
background: var(--background-color);
@@ -16,24 +16,21 @@
display: flex;
flex-direction: column;
gap: 8px;
+ backdrop-filter: blur(10px);
+ outline: 1px solid var(--border-color);
.progresser-wrapper {
-
outline: 1px solid var(--border-color);
background: var(--background-color);
- // background-color: var(--highlight-accent-color);
- padding: 4px 5px;
border-radius: 12px;
display: flex;
flex-direction: column;
gap: 12px;
- padding-top: 30px;
+ padding: 12px 5px;
+ padding-top: 38px;
transition: height 0.2s linear;
}
-
-
-
.controls-container {
@include flex-center;
gap: 12px;
@@ -41,13 +38,12 @@
.production-details,
.controls-wrapper {
- display: flex;
+ @include flex-center;
gap: 6px;
}
.production-details {
.production-wrapper {
-
display: flex;
align-items: center;
flex-direction: column;
@@ -56,33 +52,38 @@
.header {
display: flex;
flex-direction: row;
- gap: 6px
+ gap: 6px;
}
.progress-wrapper {
width: 164px;
height: 8px;
border-radius: 5px;
- // overflow: hidden;
- outline: 1px solid var(--border-color);
- background: var(--background-color);
+ background: var(--background-color-solid);
.progress {
border-radius: 5px;
height: 100%;
- background-color: var(--accent-color);
+ background-color: var(--background-color-accent);
}
}
}
}
+ .expand-icon-container {
+ @include flex-center;
+ padding: 6px 8px;
+ cursor: pointer;
+ }
+
.simulation-button-container {
@include flex-center;
gap: 2px;
- padding: 6px 8px;
+ padding: 4px 8px;
min-width: 64px;
background: var(--background-color);
- border-radius: #{$border-radius-small};
+ border-radius: #{$border-radius-extra-large};
+ height: fit-content;
cursor: pointer;
&:hover {
@@ -101,10 +102,8 @@
@include flex-center;
gap: 32px;
padding: 5px 16px;
- // background: var(--background-color);
border-radius: #{$border-radius-medium};
box-sizing: #{$box-shadow-medium};
- border-radius: 20px;
position: relative;
.min-value,
@@ -118,11 +117,8 @@
width: 100%;
max-width: 80vw;
height: 28px;
- // background: var(--background-color-gray);
border-radius: #{$border-radius-small};
position: relative;
- // padding: 4px 26px;
-
.speed-label {
font-size: var(--font-size-tiny);
@@ -135,13 +131,13 @@
}
&:last-child {
- right: 0;
+ right: -10px;
}
}
&::after {
content: "";
- background-color: #E5E5EA;
+ background-color: #e5e5ea;
position: absolute;
top: 50%;
transform: translate(0, -50%);
@@ -166,13 +162,15 @@
.slider-handle {
position: absolute;
top: 50%;
- width: 42px;
+ min-width: 44px;
+ padding: 0 8px;
line-height: 20px;
text-align: center;
- background: var(--accent-color);
- color: var(--primary-color);
- border-radius: #{$border-radius-small};
+ background: var(--background-color-button);
+ color: var(--text-button-color);
+ border-radius: #{$border-radius-large};
transform: translate(-50%, -50%);
+ font-size: var(--font-size-small);
cursor: pointer;
z-index: 2;
}
@@ -226,23 +224,23 @@
}
.time-displayer {
- display: flex;
- justify-content: space-between;
+ @include flex-space-between;
+ gap: 24px;
height: auto;
opacity: 1;
- // overflow: hidden;
-
transition: all 0.5s ease;
.start-time-wrappper,
.end-time-wrappper {
- display: flex;
- align-items: center;
- gap: 12px;
+ @include flex-center;
+ gap: 4px;
+ .icon {
+ @include flex-center;
+ }
}
.time-progresser {
- width: 70%;
+ flex: 1;
.timeline {
padding: 16px;
@@ -255,18 +253,15 @@
height: 33px;
.label-dot-wrapper {
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: 6px;
+ @include flex-center;
position: relative;
.label {
position: absolute;
- top: -200%;
+ top: -36px;
transform: translate(0, -0);
font-size: 12px;
- color: #666;
+ color: var(--text-color);
white-space: nowrap;
}
@@ -296,22 +291,32 @@
}
}
}
-
-
-
}
-
-
}
.processDisplayer {
- border-radius: 5px;
- // overflow: hidden;
+ border-radius: #{$border-radius-large};
outline: 1px solid var(--border-color);
background: var(--background-color);
- padding: 14px 6px;
+ padding: 20px 6px;
position: relative;
+ .timmer {
+ width: auto;
+ position: absolute;
+ bottom: 0;
+ font-size: var(--font-size-tiny);
+ }
+ .start-displayer {
+ bottom: 4px;
+ left: 16px;
+ }
+
+ .end-displayer {
+ bottom: 4px;
+ width: auto;
+ right: 16px;
+ }
.process-player {
position: absolute;
top: 50%;
@@ -321,29 +326,30 @@
left: 86.81px;
border-radius: 14px;
border-width: 1px;
- background: var(--accent-color, #6F42C1);
-
+ background: var(--background-color-accent, #6f42c1);
}
-
- .process-wrapper {
- display: flex;
- // padding: 0px 16px;
-
- .process {
- height: 5px;
- background-color: #4caf50;
- color: white;
- text-align: center;
- line-height: 30px;
- transition: width 0.3s ease;
+ .process-wrapper{
+ .process-container {
+ position: relative;
+ display: flex;
+ width: 100%;
+
+ .process {
+ height: 5px;
+ border-radius: 4px;
+ color: white;
+ text-align: center;
+ line-height: 30px;
+ transition: width 0.3s ease;
+ }
}
}
-
}
-
.simulation-player-container.open {
-
+ .timmer {
+ display: none;
+ }
.progresser-wrapper {
padding-top: 4px;
}
@@ -356,7 +362,7 @@
}
.processDisplayer {
- padding: 0;
+ padding: 0 8px;
background: transparent;
.process-player {
@@ -364,5 +370,4 @@
display: none !important;
}
}
-
-}
\ No newline at end of file
+}
diff --git a/app/src/styles/components/tools.scss b/app/src/styles/components/tools.scss
index 5984dab..e476c3c 100644
--- a/app/src/styles/components/tools.scss
+++ b/app/src/styles/components/tools.scss
@@ -83,6 +83,8 @@
border-radius: #{$border-radius-medium};
background: var(--background-color);
backdrop-filter: blur(8px);
+ contain: layout paint;
+ will-change: backdrop-filter;
.option-list {
display: flex;
diff --git a/app/src/styles/components/visualization/floating/common.scss b/app/src/styles/components/visualization/floating/common.scss
index 0bbbdc9..ee8adf2 100644
--- a/app/src/styles/components/visualization/floating/common.scss
+++ b/app/src/styles/components/visualization/floating/common.scss
@@ -121,10 +121,8 @@
flex-direction: column;
gap: 6px;
border-radius: 5.2px;
-
width: 100%;
height: 150px;
- display: flex;
justify-content: center;
align-items: center;
@@ -254,7 +252,8 @@
gap: 5px;
.header {
- color: #a0aec0;
+ color: var(--text-color);
+ opacity: 0.8;
}
.data-values {
@@ -413,7 +412,6 @@
/* FleetEfficiency.module.css */
.fleetEfficiency {
- width: 100%;
min-height: 240px !important;
padding: 20px;
background: var(--background-color);
diff --git a/app/src/styles/components/visualization/floating/energyConsumed.scss b/app/src/styles/components/visualization/floating/energyConsumed.scss
index 5ef39de..28f0861 100644
--- a/app/src/styles/components/visualization/floating/energyConsumed.scss
+++ b/app/src/styles/components/visualization/floating/energyConsumed.scss
@@ -5,8 +5,8 @@
display: flex;
flex-direction: column;
gap: 6px;
- padding-top: 12px;
padding: 6px;
+ padding-top: 12px;
.floating {
min-height: 170px;
@@ -28,13 +28,6 @@
}
}
-
-
-.floatingWidgets-wrapper {
- font-family: Arial, sans-serif;
- color: #333;
-}
-
.floating.working-state {
width: 100%;
height: 283px;
@@ -51,7 +44,6 @@
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
- // flex-direction: column;
}
.state {
diff --git a/app/src/styles/pages/realTimeViz.scss b/app/src/styles/pages/realTimeViz.scss
index 7348eff..fa1b86c 100644
--- a/app/src/styles/pages/realTimeViz.scss
+++ b/app/src/styles/pages/realTimeViz.scss
@@ -177,8 +177,6 @@
.panel {
position: absolute;
- // background: var(--background-color);
- // box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
border-radius: 6px;
overflow: auto;
@@ -415,7 +413,7 @@
}
path {
- stroke: var(--text-color);
+ stroke: var(--text-button-color);
stroke-width: 2;
}
}
@@ -920,8 +918,6 @@
// Add button
-.extra-Bs {}
-
.extra-Bs-addopening {
animation: slideDown 0.3s ease forwards;
}
diff --git a/app/src/styles/scene/scene.scss b/app/src/styles/scene/scene.scss
index ab8f787..40743e0 100644
--- a/app/src/styles/scene/scene.scss
+++ b/app/src/styles/scene/scene.scss
@@ -15,7 +15,7 @@
font-size: var(--font-size-large);
padding: 2px 8px;
background: var(--background-color-accent);
- color: var(--text-color);
+ color: var(--text-button-color);
border-radius: #{$border-radius-medium};
box-shadow: var(--box-shadow-light);
}
From 29efeab38738b5b2bfb05abac388420470465d2a Mon Sep 17 00:00:00 2001
From: Jerald-Golden-B <jerald@hexrfactory.com>
Date: Wed, 30 Apr 2025 20:16:26 +0530
Subject: [PATCH 07/17] Enhance event handling and backend updates across
mechanics components; refactor trigger management in TriggerConnector
---
.../mechanics/machineMechanics.tsx | 35 +++-
.../mechanics/storageMechanics.tsx | 51 +++++-
.../mechanics/vehicleMechanics.tsx | 73 +++++++-
.../geomentries/assets/addAssetModel.ts | 67 +++++--
.../selectionControls/moveControls.tsx | 33 +++-
.../selectionControls/rotateControls.tsx | 33 +++-
.../events/addOrRemoveEventsInProducts.tsx | 13 +-
app/src/modules/simulation/simulation.tsx | 2 +-
.../triggers/connector/triggerConnector.tsx | 168 +++++++++++++-----
.../instances/animator/vehicleAnimator.tsx | 1 -
app/src/store/simulation/useEventsStore.ts | 5 +-
app/src/store/simulation/useProductStore.ts | 7 +-
12 files changed, 399 insertions(+), 89 deletions(-)
diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/machineMechanics.tsx b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/machineMechanics.tsx
index 993c46b..1a03986 100644
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/machineMechanics.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/machineMechanics.tsx
@@ -6,6 +6,7 @@ import { useSelectedEventData, useSelectedProduct } from "../../../../../../stor
import { useProductStore } from "../../../../../../store/simulation/useProductStore";
import ProcessAction from "../actions/ProcessAction";
import ActionsList from "../components/ActionsList";
+import { upsertProductOrEventApi } from "../../../../../../services/simulation/UpsertProductOrEventApi";
function MachineMechanics() {
const [activeOption, setActiveOption] = useState<"default" | "process">("default");
@@ -14,6 +15,9 @@ function MachineMechanics() {
const { getPointByUuid, updateAction } = useProductStore();
const { selectedProduct } = useSelectedProduct();
+ const email = localStorage.getItem('email')
+ const organization = (email!.split("@")[1]).split(".")[0];
+
useEffect(() => {
if (selectedEventData) {
const point = getPointByUuid(
@@ -28,31 +32,54 @@ function MachineMechanics() {
}
}, [selectedProduct, selectedEventData, getPointByUuid]);
+ const updateBackend = (
+ productName: string,
+ productId: string,
+ organization: string,
+ eventData: EventsSchema
+ ) => {
+ upsertProductOrEventApi({
+ productName: productName,
+ productId: productId,
+ organization: organization,
+ eventDatas: eventData
+ })
+ }
+
const handleActionTypeChange = (option: string) => {
if (!selectedEventData || !selectedPointData) return;
const validOption = option as "process";
setActiveOption(validOption);
- updateAction(selectedPointData.action.actionUuid, {
+ const event = updateAction(selectedPointData.action.actionUuid, {
actionType: validOption,
});
+
+ if (event) {
+ updateBackend(
+ selectedProduct.productName,
+ selectedProduct.productId,
+ organization,
+ event
+ );
+ }
};
const handleRenameAction = (newName: string) => {
if (!selectedPointData) return;
- updateAction(selectedPointData.action.actionUuid, { actionName: newName });
+ const event = updateAction(selectedPointData.action.actionUuid, { actionName: newName });
};
const handleProcessTimeChange = (value: string) => {
if (!selectedPointData) return;
- updateAction(selectedPointData.action.actionUuid, {
+ const event = updateAction(selectedPointData.action.actionUuid, {
processTime: parseFloat(value),
});
};
const handleMaterialSelect = (material: string) => {
if (!selectedPointData) return;
- updateAction(selectedPointData.action.actionUuid, {
+ const event = updateAction(selectedPointData.action.actionUuid, {
swapMaterial: material,
});
};
diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/storageMechanics.tsx b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/storageMechanics.tsx
index c85da9f..f782019 100644
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/storageMechanics.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/storageMechanics.tsx
@@ -6,6 +6,7 @@ import { useSelectedEventData, useSelectedProduct } from "../../../../../../stor
import { useProductStore } from "../../../../../../store/simulation/useProductStore";
import StorageAction from "../actions/StorageAction";
import ActionsList from "../components/ActionsList";
+import { upsertProductOrEventApi } from "../../../../../../services/simulation/UpsertProductOrEventApi";
function StorageMechanics() {
const [activeOption, setActiveOption] = useState<"default" | "store" | "spawn">("default");
@@ -14,6 +15,9 @@ function StorageMechanics() {
const { getPointByUuid, updateAction } = useProductStore();
const { selectedProduct } = useSelectedProduct();
+ const email = localStorage.getItem('email')
+ const organization = (email!.split("@")[1]).split(".")[0];
+
useEffect(() => {
if (selectedEventData) {
const point = getPointByUuid(
@@ -28,26 +32,67 @@ function StorageMechanics() {
}
}, [selectedProduct, selectedEventData, getPointByUuid]);
+ const updateBackend = (
+ productName: string,
+ productId: string,
+ organization: string,
+ eventData: EventsSchema
+ ) => {
+ upsertProductOrEventApi({
+ productName: productName,
+ productId: productId,
+ organization: organization,
+ eventDatas: eventData
+ })
+ }
+
const handleActionTypeChange = (option: string) => {
if (!selectedEventData || !selectedPointData) return;
const validOption = option as "store" | "spawn";
setActiveOption(validOption);
- updateAction(selectedPointData.action.actionUuid, {
+ const event = updateAction(selectedPointData.action.actionUuid, {
actionType: validOption,
});
+
+ if (event) {
+ updateBackend(
+ selectedProduct.productName,
+ selectedProduct.productId,
+ organization,
+ event
+ );
+ }
};
const handleRenameAction = (newName: string) => {
if (!selectedPointData) return;
- updateAction(selectedPointData.action.actionUuid, { actionName: newName });
+ const event = updateAction(selectedPointData.action.actionUuid, { actionName: newName });
+
+ if (event) {
+ updateBackend(
+ selectedProduct.productName,
+ selectedProduct.productId,
+ organization,
+ event
+ );
+ }
};
const handleCapacityChange = (value: string) => {
if (!selectedPointData) return;
- updateAction(selectedPointData.action.actionUuid, {
+ const event = updateAction(selectedPointData.action.actionUuid, {
storageCapacity: parseInt(value),
});
+
+ if (event) {
+ updateBackend(
+ selectedProduct.productName,
+ selectedProduct.productId,
+ organization,
+ event
+ );
+ }
};
// Get current values from store
diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/vehicleMechanics.tsx b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/vehicleMechanics.tsx
index 28eb61f..98eb63e 100644
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/vehicleMechanics.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/vehicleMechanics.tsx
@@ -10,6 +10,7 @@ import {
import { useProductStore } from "../../../../../../store/simulation/useProductStore";
import TravelAction from "../actions/TravelAction";
import ActionsList from "../components/ActionsList";
+import { upsertProductOrEventApi } from "../../../../../../services/simulation/UpsertProductOrEventApi";
function VehicleMechanics() {
const [activeOption, setActiveOption] = useState<"default" | "travel">("default");
@@ -18,6 +19,9 @@ function VehicleMechanics() {
const { getPointByUuid, getEventByModelUuid, updateEvent, updateAction } = useProductStore();
const { selectedProduct } = useSelectedProduct();
+ const email = localStorage.getItem('email')
+ const organization = (email!.split("@")[1]).split(".")[0];
+
useEffect(() => {
if (selectedEventData) {
const point = getPointByUuid(
@@ -33,11 +37,34 @@ function VehicleMechanics() {
}
}, [selectedProduct, selectedEventData, getPointByUuid]);
+ const updateBackend = (
+ productName: string,
+ productId: string,
+ organization: string,
+ eventData: EventsSchema
+ ) => {
+ upsertProductOrEventApi({
+ productName: productName,
+ productId: productId,
+ organization: organization,
+ eventDatas: eventData
+ })
+ }
+
const handleSpeedChange = (value: string) => {
if (!selectedEventData) return;
- updateEvent(selectedProduct.productId, selectedEventData.data.modelUuid, {
+ const event = updateEvent(selectedProduct.productId, selectedEventData.data.modelUuid, {
speed: parseFloat(value),
});
+
+ if (event) {
+ updateBackend(
+ selectedProduct.productName,
+ selectedProduct.productId,
+ organization,
+ event
+ );
+ }
};
const handleActionTypeChange = (option: string) => {
@@ -45,28 +72,64 @@ function VehicleMechanics() {
const validOption = option as "travel";
setActiveOption(validOption);
- updateAction(selectedPointData.action.actionUuid, {
+ const event = updateAction(selectedPointData.action.actionUuid, {
actionType: validOption,
});
+
+ if (event) {
+ updateBackend(
+ selectedProduct.productName,
+ selectedProduct.productId,
+ organization,
+ event
+ );
+ }
};
const handleRenameAction = (newName: string) => {
if (!selectedPointData) return;
- updateAction(selectedPointData.action.actionUuid, { actionName: newName });
+ const event = updateAction(selectedPointData.action.actionUuid, { actionName: newName });
+
+ if (event) {
+ updateBackend(
+ selectedProduct.productName,
+ selectedProduct.productId,
+ organization,
+ event
+ );
+ }
};
const handleLoadCapacityChange = (value: string) => {
if (!selectedPointData) return;
- updateAction(selectedPointData.action.actionUuid, {
+ const event = updateAction(selectedPointData.action.actionUuid, {
loadCapacity: parseFloat(value),
});
+
+ if (event) {
+ updateBackend(
+ selectedProduct.productName,
+ selectedProduct.productId,
+ organization,
+ event
+ );
+ }
};
const handleUnloadDurationChange = (value: string) => {
if (!selectedPointData) return;
- updateAction(selectedPointData.action.actionUuid, {
+ const event = updateAction(selectedPointData.action.actionUuid, {
unLoadDuration: parseFloat(value),
});
+
+ if (event) {
+ updateBackend(
+ selectedProduct.productName,
+ selectedProduct.productId,
+ organization,
+ event
+ );
+ }
};
const handlePickPointChange = (value: string) => {
diff --git a/app/src/modules/builder/geomentries/assets/addAssetModel.ts b/app/src/modules/builder/geomentries/assets/addAssetModel.ts
index c718ec3..64656a0 100644
--- a/app/src/modules/builder/geomentries/assets/addAssetModel.ts
+++ b/app/src/modules/builder/geomentries/assets/addAssetModel.ts
@@ -186,22 +186,59 @@ async function handleModelLoad(
state: "idle",
type: 'transfer',
speed: 1,
- points: data.points.map((point: THREE.Vector3, index: number) => ({
- uuid: THREE.MathUtils.generateUUID(),
- position: [point.x, point.y, point.z],
- rotation: [0, 0, 0],
- action: {
- actionUuid: THREE.MathUtils.generateUUID(),
- actionName: `Action ${index}`,
- actionType: 'default',
- material: 'Default Material',
- delay: 0,
- spawnInterval: 5,
- spawnCount: 1,
- triggers: []
+ points: data.points.map((point: THREE.Vector3, index: number) => {
+ const triggers: TriggerSchema[] = [];
+
+ if (data.points && index < data.points.length - 1) {
+ triggers.push({
+ triggerUuid: THREE.MathUtils.generateUUID(),
+ triggerName: `Trigger 1`,
+ triggerType: "onComplete",
+ delay: 0,
+ triggeredAsset: {
+ triggeredModel: {
+ modelName: newFloorItem.modelName,
+ modelUuid: newFloorItem.modelUuid
+ },
+ triggeredPoint: {
+ pointName: `Point`,
+ pointUuid: ""
+ },
+ triggeredAction: {
+ actionName: `Action 1`,
+ actionUuid: ""
+ }
+ }
+ });
}
- }))
+
+ return {
+ uuid: THREE.MathUtils.generateUUID(),
+ position: [point.x, point.y, point.z],
+ rotation: [0, 0, 0],
+ action: {
+ actionUuid: THREE.MathUtils.generateUUID(),
+ actionName: `Action 1`,
+ actionType: 'default',
+ material: 'Default Material',
+ delay: 0,
+ spawnInterval: 5,
+ spawnCount: 1,
+ triggers: triggers
+ }
+ };
+ })
};
+
+ for (let i = 0; i < ConveyorEvent.points.length - 1; i++) {
+ const currentPoint = ConveyorEvent.points[i];
+ const nextPoint = ConveyorEvent.points[i + 1];
+
+ if (currentPoint.action.triggers.length > 0) {
+ currentPoint.action.triggers[0].triggeredAsset!.triggeredPoint.pointUuid = nextPoint.uuid;
+ currentPoint.action.triggers[0].triggeredAsset!.triggeredAction!.actionUuid = nextPoint.action.actionUuid;
+ }
+ }
addEvent(ConveyorEvent);
eventData.points = ConveyorEvent.points.map(point => ({
uuid: point.uuid,
@@ -228,7 +265,7 @@ async function handleModelLoad(
actionType: "travel",
unLoadDuration: 5,
loadCapacity: 10,
- steeringAngle:0,
+ steeringAngle: 0,
pickUpPoint: null,
unLoadPoint: null,
triggers: []
diff --git a/app/src/modules/scene/controls/selectionControls/moveControls.tsx b/app/src/modules/scene/controls/selectionControls/moveControls.tsx
index d371806..cc9ce50 100644
--- a/app/src/modules/scene/controls/selectionControls/moveControls.tsx
+++ b/app/src/modules/scene/controls/selectionControls/moveControls.tsx
@@ -9,6 +9,7 @@ import { detectModifierKeys } from "../../../../utils/shortcutkeys/detectModifie
import { useEventsStore } from "../../../../store/simulation/useEventsStore";
import { useProductStore } from "../../../../store/simulation/useProductStore";
import { useSelectedProduct } from "../../../../store/simulation/useSimulationStore";
+import { upsertProductOrEventApi } from "../../../../services/simulation/UpsertProductOrEventApi";
function MoveControls({ movedObjects, setMovedObjects, itemsGroupRef, copiedObjects, setCopiedObjects, pastedObjects, setpastedObjects, duplicatedObjects, setDuplicatedObjects, selectionGroup, rotatedObjects, setRotatedObjects, boundingBoxRef }: any) {
const { camera, controls, gl, scene, pointer, raycaster } = useThree();
@@ -16,10 +17,28 @@ function MoveControls({ movedObjects, setMovedObjects, itemsGroupRef, copiedObje
const { toggleView } = useToggleView();
const { selectedAssets, setSelectedAssets } = useSelectedAssets();
+ const { selectedProduct } = useSelectedProduct();
const { floorItems, setFloorItems } = useFloorItems();
const { socket } = useSocketStore();
const itemsData = useRef<Types.FloorItems>([]);
+ const email = localStorage.getItem('email')
+ const organization = (email!.split("@")[1]).split(".")[0];
+
+ const updateBackend = (
+ productName: string,
+ productId: string,
+ organization: string,
+ eventData: EventsSchema
+ ) => {
+ upsertProductOrEventApi({
+ productName: productName,
+ productId: productId,
+ organization: organization,
+ eventDatas: eventData
+ })
+ }
+
useEffect(() => {
if (!camera || !scene || toggleView || !itemsGroupRef.current) return;
@@ -190,10 +209,19 @@ function MoveControls({ movedObjects, setMovedObjects, itemsGroupRef, copiedObje
})
}
if (productData) {
- useProductStore.getState().updateEvent(useSelectedProduct.getState().selectedProduct.productId, obj.userData.modelUuid, {
+ const event = useProductStore.getState().updateEvent(useSelectedProduct.getState().selectedProduct.productId, obj.userData.modelUuid, {
position: [worldPosition.x, worldPosition.y, worldPosition.z],
rotation: [obj.rotation.x, obj.rotation.y, obj.rotation.z],
})
+
+ if (event) {
+ updateBackend(
+ selectedProduct.productName,
+ selectedProduct.productId,
+ organization,
+ event
+ );
+ }
}
}
@@ -203,9 +231,6 @@ function MoveControls({ movedObjects, setMovedObjects, itemsGroupRef, copiedObje
return updatedItems;
});
- const email = localStorage.getItem("email");
- const organization = email ? email.split("@")[1].split(".")[0] : "default";
-
//REST
// await setFloorItemApi(
diff --git a/app/src/modules/scene/controls/selectionControls/rotateControls.tsx b/app/src/modules/scene/controls/selectionControls/rotateControls.tsx
index 08667b4..7ea7045 100644
--- a/app/src/modules/scene/controls/selectionControls/rotateControls.tsx
+++ b/app/src/modules/scene/controls/selectionControls/rotateControls.tsx
@@ -8,6 +8,7 @@ import * as Types from "../../../../types/world/worldTypes";
import { useEventsStore } from "../../../../store/simulation/useEventsStore";
import { useProductStore } from "../../../../store/simulation/useProductStore";
import { useSelectedProduct } from "../../../../store/simulation/useSimulationStore";
+import { upsertProductOrEventApi } from "../../../../services/simulation/UpsertProductOrEventApi";
function RotateControls({ rotatedObjects, setRotatedObjects, movedObjects, setMovedObjects, itemsGroupRef, copiedObjects, setCopiedObjects, pastedObjects, setpastedObjects, duplicatedObjects, setDuplicatedObjects, selectionGroup, boundingBoxRef }: any) {
const { camera, controls, gl, scene, pointer, raycaster } = useThree();
@@ -15,10 +16,28 @@ function RotateControls({ rotatedObjects, setRotatedObjects, movedObjects, setMo
const { toggleView } = useToggleView();
const { selectedAssets, setSelectedAssets } = useSelectedAssets();
+ const { selectedProduct } = useSelectedProduct();
const { floorItems, setFloorItems } = useFloorItems();
const { socket } = useSocketStore();
const itemsData = useRef<Types.FloorItems>([]);
+ const email = localStorage.getItem('email')
+ const organization = (email!.split("@")[1]).split(".")[0];
+
+ const updateBackend = (
+ productName: string,
+ productId: string,
+ organization: string,
+ eventData: EventsSchema
+ ) => {
+ upsertProductOrEventApi({
+ productName: productName,
+ productId: productId,
+ organization: organization,
+ eventDatas: eventData
+ })
+ }
+
const prevPointerPosition = useRef<THREE.Vector2 | null>(null);
useEffect(() => {
@@ -190,10 +209,19 @@ function RotateControls({ rotatedObjects, setRotatedObjects, movedObjects, setMo
})
}
if (productData) {
- useProductStore.getState().updateEvent(useSelectedProduct.getState().selectedProduct.productId, obj.userData.modelUuid, {
+ const event = useProductStore.getState().updateEvent(useSelectedProduct.getState().selectedProduct.productId, obj.userData.modelUuid, {
position: [worldPosition.x, worldPosition.y, worldPosition.z],
rotation: [obj.rotation.x, obj.rotation.y, obj.rotation.z],
})
+
+ if (event) {
+ updateBackend(
+ selectedProduct.productName,
+ selectedProduct.productId,
+ organization,
+ event
+ );
+ }
}
}
@@ -203,9 +231,6 @@ function RotateControls({ rotatedObjects, setRotatedObjects, movedObjects, setMo
return updatedItems;
});
- const email = localStorage.getItem("email");
- const organization = email ? email.split("@")[1].split(".")[0] : "default";
-
//REST
// await setFloorItemApi(
diff --git a/app/src/modules/simulation/products/events/addOrRemoveEventsInProducts.tsx b/app/src/modules/simulation/products/events/addOrRemoveEventsInProducts.tsx
index 9eececc..715aa37 100644
--- a/app/src/modules/simulation/products/events/addOrRemoveEventsInProducts.tsx
+++ b/app/src/modules/simulation/products/events/addOrRemoveEventsInProducts.tsx
@@ -53,7 +53,17 @@ function AddOrRemoveEventsInProducts() {
const canvasElement = gl.domElement;
if (!canvasElement) return;
- let intersects = raycaster.intersectObjects(scene.children, true);
+ const intersects = raycaster
+ .intersectObjects(scene.children, true)
+ .filter(
+ (intersect) =>
+ !intersect.object.name.includes("Roof") &&
+ !intersect.object.name.includes("MeasurementReference") &&
+ !intersect.object.name.includes("agv-collider") &&
+ !(intersect.object.type === "GridHelper") &&
+ !(intersect.object?.parent?.name.includes('zones')) &&
+ !(intersect.object?.parent?.name.includes('Zone'))
+ );
if (intersects.length > 0 && intersects[0]?.object?.parent?.parent?.position && intersects[0]?.object?.parent?.parent?.scale && intersects[0]?.object?.parent?.parent?.rotation) {
let currentObject = intersects[0].object;
@@ -116,6 +126,7 @@ function AddOrRemoveEventsInProducts() {
};
}, [gl, subModule, selectedProduct, selectedAsset]);
+
return (
<></>
)
diff --git a/app/src/modules/simulation/simulation.tsx b/app/src/modules/simulation/simulation.tsx
index 5ca0ec5..757a9ef 100644
--- a/app/src/modules/simulation/simulation.tsx
+++ b/app/src/modules/simulation/simulation.tsx
@@ -23,7 +23,7 @@ function Simulation() {
}, [events])
useEffect(() => {
- // console.log('products: ', products);
+ console.log('products: ', products);
}, [products])
return (
diff --git a/app/src/modules/simulation/triggers/connector/triggerConnector.tsx b/app/src/modules/simulation/triggers/connector/triggerConnector.tsx
index efefa0c..b554979 100644
--- a/app/src/modules/simulation/triggers/connector/triggerConnector.tsx
+++ b/app/src/modules/simulation/triggers/connector/triggerConnector.tsx
@@ -7,21 +7,24 @@ import { useProductStore } from "../../../../store/simulation/useProductStore";
import { useEventsStore } from "../../../../store/simulation/useEventsStore";
import { useSelectedProduct } from "../../../../store/simulation/useSimulationStore";
import { handleAddEventToProduct } from "../../events/points/functions/handleAddEventToProduct";
+import { QuadraticBezierLine } from "@react-three/drei";
+import { upsertProductOrEventApi } from "../../../../services/simulation/UpsertProductOrEventApi";
interface ConnectionLine {
id: string;
- start: THREE.Vector3;
- end: THREE.Vector3;
- mid: THREE.Vector3;
+ startPointUuid: string;
+ endPointUuid: string;
trigger: TriggerSchema;
}
function TriggerConnector() {
const { gl, raycaster, scene } = useThree();
const { subModule } = useSubModuleStore();
- const { products, getPointByUuid, getIsEventInProduct, getActionByUuid, addTrigger, addEvent, getEventByModelUuid } = useProductStore();
+ const { products, getPointByUuid, getIsEventInProduct, getActionByUuid, addTrigger, addEvent, getEventByModelUuid, getProductById } = useProductStore();
const { selectedAsset, clearSelectedAsset } = useSelectedAsset();
const { selectedProduct } = useSelectedProduct();
+ const [hoveredLineKey, setHoveredLineKey] = useState<string | null>(null);
+ const groupRefs = useRef<Record<string, any>>({});
const [firstSelectedPoint, setFirstSelectedPoint] = useState<{
productId: string;
@@ -32,52 +35,59 @@ function TriggerConnector() {
const [connections, setConnections] = useState<ConnectionLine[]>([]);
+ const email = localStorage.getItem('email')
+ const organization = (email!.split("@")[1]).split(".")[0];
+
+ const updateBackend = (
+ productName: string,
+ productId: string,
+ organization: string,
+ eventData: EventsSchema
+ ) => {
+ upsertProductOrEventApi({
+ productName: productName,
+ productId: productId,
+ organization: organization,
+ eventDatas: eventData
+ })
+ }
+
useEffect(() => {
const newConnections: ConnectionLine[] = [];
- products.forEach(product => {
- product.eventDatas.forEach(event => {
- if ('points' in event) {
- event.points.forEach(point => {
- if ('action' in point && point.action?.triggers) {
- point.action.triggers.forEach(trigger => {
- if (trigger.triggeredAsset) {
- const targetPoint = getPointByUuid(
- product.productId,
- trigger.triggeredAsset.triggeredModel.modelUuid,
- trigger.triggeredAsset.triggeredPoint.pointUuid
- );
+ const product = getProductById(selectedProduct.productId);
+ if (!product || products.length === 0) return;
- if (targetPoint) {
- const startPos = new THREE.Vector3(...point.position);
- const endPos = new THREE.Vector3(...targetPoint.position);
- const midPos = new THREE.Vector3()
- .addVectors(startPos, endPos)
- .multiplyScalar(0.5)
- .add(new THREE.Vector3(0, 2, 0));
+ product.eventDatas.forEach(event => {
+ if ('points' in event) {
+ event.points.forEach(point => {
+ if ('action' in point && point.action?.triggers) {
+ point.action.triggers.forEach(trigger => {
+ if (trigger.triggeredAsset) {
+ newConnections.push({
+ id: `${point.uuid}-${trigger.triggeredAsset.triggeredPoint.pointUuid}-${trigger.triggerUuid}`,
+ startPointUuid: point.uuid,
+ endPointUuid: trigger.triggeredAsset.triggeredPoint.pointUuid,
+ trigger
+ });
+ }
+ });
+ }
+ });
+ } else if ('point' in event) {
+ if ('actions' in event.point) {
+ console.log(event);
- newConnections.push({
- id: `${point.uuid}-${targetPoint.uuid}-${trigger.triggerUuid}`,
- start: startPos,
- end: endPos,
- mid: midPos,
- trigger
- });
- }
- }
- });
- }
- });
+ // you left here
+
+ } else if ('action' in event.point) {
+ console.log(event);
}
- });
+ }
});
setConnections(newConnections);
- }, [products]);
-
- useEffect(() => {
- console.log('connections: ', connections);
- }, connections)
+ }, [products, selectedProduct.productId]);
useEffect(() => {
const canvasElement = gl.domElement;
@@ -111,7 +121,12 @@ function TriggerConnector() {
if (drag) return;
evt.preventDefault();
- const intersects = raycaster.intersectObjects(scene.children, true);
+ const intersects = raycaster
+ .intersectObjects(scene.children, true)
+ .filter(
+ (intersect) =>
+ intersect.object.name === ('Event-Sphere')
+ );
if (intersects.length === 0) return;
const currentObject = intersects[0].object;
@@ -128,7 +143,9 @@ function TriggerConnector() {
pointUuid
);
- if (!point) return;
+ const event = getEventByModelUuid(selectedProduct.productId, modelUuid);
+
+ if (!point || !event) return;
let actionUuid: string | undefined;
if ('action' in point && point.action) {
@@ -152,12 +169,12 @@ function TriggerConnector() {
delay: 0,
triggeredAsset: {
triggeredModel: {
- modelName: currentObject.parent?.parent?.name || 'Unknown',
+ modelName: event.modelName || 'Unknown',
modelUuid: modelUuid
},
triggeredPoint: {
- pointName: currentObject.name,
- pointUuid: pointUuid
+ pointName: 'Point',
+ pointUuid: point.uuid
},
triggeredAction: actionUuid ? {
actionName: getActionByUuid(selectedProduct.productId, actionUuid)?.actionName || 'Action',
@@ -167,7 +184,16 @@ function TriggerConnector() {
};
if (firstSelectedPoint.actionUuid) {
- addTrigger(firstSelectedPoint.actionUuid, trigger);
+ const event = addTrigger(firstSelectedPoint.actionUuid, trigger);
+
+ if (event) {
+ updateBackend(
+ selectedProduct.productName,
+ selectedProduct.productId,
+ organization,
+ event
+ );
+ }
}
setFirstSelectedPoint(null);
}
@@ -237,9 +263,53 @@ function TriggerConnector() {
}, [gl, subModule, selectedProduct, firstSelectedPoint]);
+ const getWorldPositionFromScene = (pointUuid: string): THREE.Vector3 | null => {
+ const pointObj = scene.getObjectByProperty("uuid", pointUuid);
+ if (!pointObj) return null;
+
+ const worldPosition = new THREE.Vector3();
+ pointObj.getWorldPosition(worldPosition);
+ return worldPosition;
+ };
+
return (
- <>
- </>
+ <group>
+ {connections.map((connection) => {
+ const startPoint = getWorldPositionFromScene(connection.startPointUuid);
+ const endPoint = getWorldPositionFromScene(connection.endPointUuid);
+
+ if (!startPoint || !endPoint) return null;
+
+ const distance = startPoint.distanceTo(endPoint);
+ const heightFactor = Math.max(0.5, distance * 0.2);
+ const midPoint = new THREE.Vector3(
+ (startPoint.x + endPoint.x) / 2,
+ Math.max(startPoint.y, endPoint.y) + heightFactor,
+ (startPoint.z + endPoint.z) / 2
+ );
+
+ return (
+ <QuadraticBezierLine
+ key={connection.id}
+ ref={(el) => (groupRefs.current[connection.id] = el!)}
+ start={startPoint.toArray()}
+ end={endPoint.toArray()}
+ mid={midPoint.toArray()}
+ color={hoveredLineKey === connection.id ? "red" : "#42a5f5"}
+ lineWidth={4}
+ dashed={hoveredLineKey !== connection.id}
+ dashSize={0.75}
+ dashScale={20}
+ onPointerOver={() => setHoveredLineKey(connection.id)}
+ onPointerOut={() => setHoveredLineKey(null)}
+ onClick={() => {
+ console.log("Connection clicked:", connection);
+ }}
+ userData={connection.trigger}
+ />
+ );
+ })}
+ </group>
);
}
diff --git a/app/src/modules/simulation/vehicle/instances/animator/vehicleAnimator.tsx b/app/src/modules/simulation/vehicle/instances/animator/vehicleAnimator.tsx
index 2f0b235..421dea8 100644
--- a/app/src/modules/simulation/vehicle/instances/animator/vehicleAnimator.tsx
+++ b/app/src/modules/simulation/vehicle/instances/animator/vehicleAnimator.tsx
@@ -67,7 +67,6 @@ function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid, agvDetai
setRestingRotation(true);
decrementVehicleLoad(agvDetail.modelUuid, 0);
const object = scene.getObjectByProperty('uuid', agvUuid);
- console.log('currentPhase: ', currentPhase);
if (object) {
object.position.set(agvDetail.position[0], agvDetail.position[1], agvDetail.position[2]);
object.rotation.set(objectRotation.x, objectRotation.y, objectRotation.z);
diff --git a/app/src/store/simulation/useEventsStore.ts b/app/src/store/simulation/useEventsStore.ts
index 2d92fc2..8fa6838 100644
--- a/app/src/store/simulation/useEventsStore.ts
+++ b/app/src/store/simulation/useEventsStore.ts
@@ -7,7 +7,7 @@ type EventsStore = {
// Event-level actions
addEvent: (event: EventsSchema) => void;
removeEvent: (modelUuid: string) => void;
- updateEvent: (modelUuid: string, updates: Partial<EventsSchema>) => void;
+ updateEvent: (modelUuid: string, updates: Partial<EventsSchema>) => EventsSchema | undefined;
// Point-level actions
addPoint: (modelUuid: string, point: ConveyorPointSchema | VehiclePointSchema | RoboticArmPointSchema | MachinePointSchema | StoragePointSchema) => void;
@@ -60,12 +60,15 @@ export const useEventsStore = create<EventsStore>()(
},
updateEvent: (modelUuid, updates) => {
+ let updatedEvent: EventsSchema | undefined;
set((state) => {
const event = state.events.find(e => 'modelUuid' in e && e.modelUuid === modelUuid);
if (event) {
Object.assign(event, updates);
+ updatedEvent = JSON.parse(JSON.stringify(event));
}
});
+ return updatedEvent;
},
// Point-level actions
diff --git a/app/src/store/simulation/useProductStore.ts b/app/src/store/simulation/useProductStore.ts
index 4f2b546..0918128 100644
--- a/app/src/store/simulation/useProductStore.ts
+++ b/app/src/store/simulation/useProductStore.ts
@@ -43,7 +43,7 @@ type ProductsStore = {
addTrigger: (
actionUuid: string,
trigger: TriggerSchema
- ) => void;
+ ) => EventsSchema | undefined;
removeTrigger: (triggerUuid: string) => void;
updateTrigger: (
triggerUuid: string,
@@ -284,6 +284,7 @@ export const useProductStore = create<ProductsStore>()(
// Trigger-level actions
addTrigger: (actionUuid, trigger) => {
+ let updatedEvent: EventsSchema | undefined;
set((state) => {
for (const product of state.products) {
for (const event of product.eventDatas) {
@@ -291,6 +292,7 @@ export const useProductStore = create<ProductsStore>()(
for (const point of (event as ConveyorEventSchema).points) {
if (point.action && point.action.actionUuid === actionUuid) {
point.action.triggers.push(trigger);
+ updatedEvent = JSON.parse(JSON.stringify(event));
return;
}
}
@@ -298,11 +300,13 @@ export const useProductStore = create<ProductsStore>()(
const point = (event as any).point;
if ('action' in point && point.action.actionUuid === actionUuid) {
point.action.triggers.push(trigger);
+ updatedEvent = JSON.parse(JSON.stringify(event));
return;
} else if ('actions' in point) {
const action = point.actions.find((a: any) => a.actionUuid === actionUuid);
if (action) {
action.triggers.push(trigger);
+ updatedEvent = JSON.parse(JSON.stringify(event));
return;
}
}
@@ -310,6 +314,7 @@ export const useProductStore = create<ProductsStore>()(
}
}
});
+ return updatedEvent;
},
removeTrigger: (triggerUuid) => {
From 571da0a78a431e4ac37f224a12910a444474a0e5 Mon Sep 17 00:00:00 2001
From: Jerald-Golden-B <jerald@hexrfactory.com>
Date: Fri, 2 May 2025 10:50:52 +0530
Subject: [PATCH 08/17] Refactor Machine and TriggerConnector components:
enhance event handling for machine points and streamline vehicle status
sample initialization
---
.../modules/simulation/machine/machine.tsx | 23 +++++++
.../triggers/connector/triggerConnector.tsx | 60 +++++++++++++++----
.../modules/simulation/vehicle/vehicles.tsx | 8 +--
3 files changed, 76 insertions(+), 15 deletions(-)
diff --git a/app/src/modules/simulation/machine/machine.tsx b/app/src/modules/simulation/machine/machine.tsx
index 32c3b8e..96a5b39 100644
--- a/app/src/modules/simulation/machine/machine.tsx
+++ b/app/src/modules/simulation/machine/machine.tsx
@@ -2,6 +2,29 @@ import React from 'react'
import MachineInstances from './instances/machineInstances'
function Machine() {
+
+ const machineSample: MachineEventSchema = {
+ modelUuid: "machine-1234-5678-9012",
+ modelName: "CNC Milling Machine",
+ position: [10, 0, 5],
+ rotation: [0, 0, 0],
+ state: "idle",
+ type: "machine",
+ point: {
+ uuid: "machine-point-9876-5432-1098",
+ position: [10, 0.5, 5.2],
+ rotation: [0, 0, 0],
+ action: {
+ actionUuid: "machine-action-2468-1357-8024",
+ actionName: "Metal Processing",
+ actionType: "process",
+ processTime: 10,
+ swapMaterial: "steel",
+ triggers: []
+ }
+ }
+ };
+
return (
<>
diff --git a/app/src/modules/simulation/triggers/connector/triggerConnector.tsx b/app/src/modules/simulation/triggers/connector/triggerConnector.tsx
index b554979..5c4c602 100644
--- a/app/src/modules/simulation/triggers/connector/triggerConnector.tsx
+++ b/app/src/modules/simulation/triggers/connector/triggerConnector.tsx
@@ -59,9 +59,10 @@ function TriggerConnector() {
if (!product || products.length === 0) return;
product.eventDatas.forEach(event => {
- if ('points' in event) {
+ // Handle Conveyor points
+ if (event.type === "transfer" && 'points' in event) {
event.points.forEach(point => {
- if ('action' in point && point.action?.triggers) {
+ if (point.action?.triggers) {
point.action.triggers.forEach(trigger => {
if (trigger.triggeredAsset) {
newConnections.push({
@@ -74,14 +75,53 @@ function TriggerConnector() {
});
}
});
- } else if ('point' in event) {
- if ('actions' in event.point) {
- console.log(event);
-
- // you left here
-
- } else if ('action' in event.point) {
- console.log(event);
+ }
+ // Handle Vehicle point
+ else if (event.type === "vehicle" && 'point' in event) {
+ const point = event.point;
+ if (point.action?.triggers) {
+ point.action.triggers.forEach(trigger => {
+ if (trigger.triggeredAsset) {
+ newConnections.push({
+ id: `${point.uuid}-${trigger.triggeredAsset.triggeredPoint.pointUuid}-${trigger.triggerUuid}`,
+ startPointUuid: point.uuid,
+ endPointUuid: trigger.triggeredAsset.triggeredPoint.pointUuid,
+ trigger
+ });
+ }
+ });
+ }
+ }
+ // Handle Robotic Arm points
+ else if (event.type === "roboticArm" && 'point' in event) {
+ const point = event.point;
+ point.actions?.forEach(action => {
+ action.triggers?.forEach(trigger => {
+ if (trigger.triggeredAsset) {
+ newConnections.push({
+ id: `${point.uuid}-${trigger.triggeredAsset.triggeredPoint.pointUuid}-${trigger.triggerUuid}`,
+ startPointUuid: point.uuid,
+ endPointUuid: trigger.triggeredAsset.triggeredPoint.pointUuid,
+ trigger
+ });
+ }
+ });
+ });
+ }
+ // Handle Machine point
+ else if (event.type === "machine" && 'point' in event) {
+ const point = event.point;
+ if (point.action?.triggers) {
+ point.action.triggers.forEach(trigger => {
+ if (trigger.triggeredAsset) {
+ newConnections.push({
+ id: `${point.uuid}-${trigger.triggeredAsset.triggeredPoint.pointUuid}-${trigger.triggerUuid}`,
+ startPointUuid: point.uuid,
+ endPointUuid: trigger.triggeredAsset.triggeredPoint.pointUuid,
+ trigger
+ });
+ }
+ });
}
}
});
diff --git a/app/src/modules/simulation/vehicle/vehicles.tsx b/app/src/modules/simulation/vehicle/vehicles.tsx
index 7badec5..61dc1a0 100644
--- a/app/src/modules/simulation/vehicle/vehicles.tsx
+++ b/app/src/modules/simulation/vehicle/vehicles.tsx
@@ -13,9 +13,7 @@ function Vehicles() {
const { floorItems } = useFloorItems();
const { isPlaying } = usePlayButtonStore();
- const [vehicleStatusSample, setVehicleStatusSample] = useState<
- VehicleEventSchema[]
- >([
+ const [vehicleStatusSample, setVehicleStatusSample] = useState<VehicleEventSchema[]>([
{
modelUuid: "9356f710-4727-4b50-bdb2-9c1e747ecc74",
modelName: "AGV",
@@ -34,7 +32,7 @@ function Vehicles() {
actionType: "travel",
unLoadDuration: 10,
loadCapacity: 2,
- steeringAngle:0,
+ steeringAngle: 0,
pickUpPoint: { position: { x: 98.71483985219794, y: 0, z: 28.66321267938962 }, rotation: { x: 0, y: 0, z: 0 } },
unLoadPoint: { position: { x: 105.71483985219794, y: 0, z: 28.66321267938962 }, rotation: { x: 0, y: 0, z: 0 } },
triggers: [
@@ -78,7 +76,7 @@ function Vehicles() {
actionType: "travel",
unLoadDuration: 10,
loadCapacity: 2,
- steeringAngle:0,
+ steeringAngle: 0,
pickUpPoint: null,
unLoadPoint: null,
triggers: [
From 2a669f63372efe153c294b7f75e676081a3b8abc Mon Sep 17 00:00:00 2001
From: Poovizhi99 <poovizhi@hexrfactory.com>
Date: Fri, 2 May 2025 11:15:11 +0530
Subject: [PATCH 09/17] removed sample data and worked with schema for agv
---
.../mechanics/vehicleMechanics.tsx | 2 +-
.../IntialLoad/loadInitialFloorItems.ts | 2 +-
.../events/points/creator/pointsCreator.tsx | 10 +-
.../armInstance/roboticArmInstance.tsx | 4 +-
.../instances/animator/vehicleAnimator.tsx | 2 +-
.../instances/instance/vehicleInstance.tsx | 6 +-
.../modules/simulation/vehicle/vehicles.tsx | 215 ++----------------
7 files changed, 34 insertions(+), 207 deletions(-)
diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/vehicleMechanics.tsx b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/vehicleMechanics.tsx
index 28eb61f..68464c9 100644
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/vehicleMechanics.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/vehicleMechanics.tsx
@@ -19,7 +19,7 @@ function VehicleMechanics() {
const { selectedProduct } = useSelectedProduct();
useEffect(() => {
- if (selectedEventData) {
+ if (selectedEventData && selectedEventData.data.type === 'vehicle') {
const point = getPointByUuid(
selectedProduct.productId,
selectedEventData.data.modelUuid,
diff --git a/app/src/modules/builder/IntialLoad/loadInitialFloorItems.ts b/app/src/modules/builder/IntialLoad/loadInitialFloorItems.ts
index a351d73..27175ee 100644
--- a/app/src/modules/builder/IntialLoad/loadInitialFloorItems.ts
+++ b/app/src/modules/builder/IntialLoad/loadInitialFloorItems.ts
@@ -187,7 +187,7 @@ function processLoadedModel(
},
]);
- if (item.eventData.type === "vehicle") {
+ if (item.eventData.type === "Vehicle") {
const vehicleEvent: VehicleEventSchema = {
modelUuid: item.modelUuid,
modelName: item.modelName,
diff --git a/app/src/modules/simulation/events/points/creator/pointsCreator.tsx b/app/src/modules/simulation/events/points/creator/pointsCreator.tsx
index c6ec316..36ec89a 100644
--- a/app/src/modules/simulation/events/points/creator/pointsCreator.tsx
+++ b/app/src/modules/simulation/events/points/creator/pointsCreator.tsx
@@ -93,9 +93,7 @@ function PointsCreator() {
);
}}
onPointerMissed={() => {
- if (selectedEventData?.data.type !== 'vehicle') {
- clearSelectedEventSphere();
- }
+ // clearSelectedEventSphere();
setTransformMode(null);
}}
key={`${i}-${j}`}
@@ -123,7 +121,7 @@ function PointsCreator() {
);
}}
onPointerMissed={() => {
- clearSelectedEventSphere();
+ // clearSelectedEventSphere();
setTransformMode(null);
}}
position={new THREE.Vector3(...event.point.position)}
@@ -149,7 +147,7 @@ function PointsCreator() {
);
}}
onPointerMissed={() => {
- clearSelectedEventSphere();
+ // clearSelectedEventSphere();
setTransformMode(null);
}}
position={new THREE.Vector3(...event.point.position)}
@@ -175,7 +173,7 @@ function PointsCreator() {
);
}}
onPointerMissed={() => {
- clearSelectedEventSphere();
+ // clearSelectedEventSphere();
setTransformMode(null);
}}
position={new THREE.Vector3(...event.point.position)}
diff --git a/app/src/modules/simulation/roboticArm/instances/armInstance/roboticArmInstance.tsx b/app/src/modules/simulation/roboticArm/instances/armInstance/roboticArmInstance.tsx
index 6bde587..af3ffe3 100644
--- a/app/src/modules/simulation/roboticArm/instances/armInstance/roboticArmInstance.tsx
+++ b/app/src/modules/simulation/roboticArm/instances/armInstance/roboticArmInstance.tsx
@@ -170,8 +170,8 @@ function RoboticArmInstance({ robot }: { robot: ArmBotStatus }) {
}
}
const logStatus = (id: string, status: string) => {
- // console.log(id + "," + status);
- console.log( status);
+ //
+
}
return (
diff --git a/app/src/modules/simulation/vehicle/instances/animator/vehicleAnimator.tsx b/app/src/modules/simulation/vehicle/instances/animator/vehicleAnimator.tsx
index 2f0b235..f17efcb 100644
--- a/app/src/modules/simulation/vehicle/instances/animator/vehicleAnimator.tsx
+++ b/app/src/modules/simulation/vehicle/instances/animator/vehicleAnimator.tsx
@@ -67,7 +67,7 @@ function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid, agvDetai
setRestingRotation(true);
decrementVehicleLoad(agvDetail.modelUuid, 0);
const object = scene.getObjectByProperty('uuid', agvUuid);
- console.log('currentPhase: ', currentPhase);
+
if (object) {
object.position.set(agvDetail.position[0], agvDetail.position[1], agvDetail.position[2]);
object.rotation.set(objectRotation.x, objectRotation.y, objectRotation.z);
diff --git a/app/src/modules/simulation/vehicle/instances/instance/vehicleInstance.tsx b/app/src/modules/simulation/vehicle/instances/instance/vehicleInstance.tsx
index 6a81d3a..412a4ba 100644
--- a/app/src/modules/simulation/vehicle/instances/instance/vehicleInstance.tsx
+++ b/app/src/modules/simulation/vehicle/instances/instance/vehicleInstance.tsx
@@ -30,7 +30,8 @@ function VehicleInstance({ agvDetail }: any) {
);
function vehicleStatus(modelId: string, status: string) {
- // console.log(`${modelId} , ${status});
+ // console.log(`${modelId} , ${status}`);
+
}
// Function to reset everything
@@ -44,7 +45,7 @@ function VehicleInstance({ agvDetail }: any) {
const increment = () => {
if (isIncrememtable.current) {
- incrementVehicleLoad(agvDetail.modelUuid, 2);
+ incrementVehicleLoad(agvDetail.modelUuid, 10);
isIncrememtable.current = false;
}
}
@@ -69,6 +70,7 @@ function VehicleInstance({ agvDetail }: any) {
increment();
}, 5000);
+
if (agvDetail.currentLoad === agvDetail.point.action.loadCapacity) {
const toDrop = computePath(
agvDetail.point.action.pickUpPoint.position,
diff --git a/app/src/modules/simulation/vehicle/vehicles.tsx b/app/src/modules/simulation/vehicle/vehicles.tsx
index 7badec5..9691372 100644
--- a/app/src/modules/simulation/vehicle/vehicles.tsx
+++ b/app/src/modules/simulation/vehicle/vehicles.tsx
@@ -2,208 +2,38 @@ import React, { useEffect, useState } from "react";
import VehicleInstances from "./instances/vehicleInstances";
import { useVehicleStore } from "../../../store/simulation/useVehicleStore";
import { useFloorItems } from "../../../store/store";
-import { useSelectedEventData, useSelectedEventSphere } from "../../../store/simulation/useSimulationStore";
+import { useSelectedEventData, useSelectedEventSphere, useSelectedProduct } from "../../../store/simulation/useSimulationStore";
import VehicleUI from "../ui/vehicle/vehicleUI";
import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
-function Vehicles() {
+import { useProductStore } from "../../../store/simulation/useProductStore";
- const { vehicles, addVehicle } = useVehicleStore();
+function Vehicles() {
+ const { getProductById } = useProductStore();
+ const { selectedProduct } = useSelectedProduct();
+ const { vehicles, addVehicle, removeVehicle } = useVehicleStore();
const { selectedEventSphere } = useSelectedEventSphere();
const { selectedEventData } = useSelectedEventData();
const { floorItems } = useFloorItems();
const { isPlaying } = usePlayButtonStore();
- const [vehicleStatusSample, setVehicleStatusSample] = useState<
- VehicleEventSchema[]
- >([
- {
- modelUuid: "9356f710-4727-4b50-bdb2-9c1e747ecc74",
- modelName: "AGV",
- position: [97.9252965204558, 0, 37.96138815638661],
- rotation: [0, 0, 0],
- state: "idle",
- type: "vehicle",
- speed: 2.5,
- point: {
- uuid: "point-789",
- position: [0, 1, 0],
- rotation: [0, 0, 0],
- action: {
- actionUuid: "action-456",
- actionName: "Deliver to Zone A",
- actionType: "travel",
- unLoadDuration: 10,
- loadCapacity: 2,
- steeringAngle:0,
- pickUpPoint: { position: { x: 98.71483985219794, y: 0, z: 28.66321267938962 }, rotation: { x: 0, y: 0, z: 0 } },
- unLoadPoint: { position: { x: 105.71483985219794, y: 0, z: 28.66321267938962 }, rotation: { x: 0, y: 0, z: 0 } },
- triggers: [
- {
- triggerUuid: "trig-001",
- triggerName: "Start Travel",
- triggerType: "onComplete",
- delay: 0,
- triggeredAsset: {
- triggeredModel: { modelName: "ArmBot-X", modelUuid: "arm-001" },
- triggeredPoint: { pointName: "Pickup Arm Point", pointUuid: "arm-point-01" },
- triggeredAction: { actionName: "Grab Widget", actionUuid: "grab-001" }
- }
- },
- {
- triggerUuid: "trig-002",
- triggerName: "Complete Travel",
- triggerType: "onComplete",
- delay: 2,
- triggeredAsset: null
- }
- ]
- }
- }
- },
- {
- modelUuid: "b06960bb-3d2e-41f7-a646-335f389c68b4",
- modelName: "AGV",
- position: [89.61609306554463, 0, 33.634136622267356],
- rotation: [0, 0, 0],
- state: "idle",
- type: "vehicle",
- speed: 2.5,
- point: {
- uuid: "point-789",
- position: [0, 1, 0],
- rotation: [0, 0, 0],
- action: {
- actionUuid: "action-456",
- actionName: "Deliver to Zone A",
- actionType: "travel",
- unLoadDuration: 10,
- loadCapacity: 2,
- steeringAngle:0,
- pickUpPoint: null,
- unLoadPoint: null,
- triggers: [
- {
- triggerUuid: "trig-001",
- triggerName: "Start Travel",
- triggerType: "onStart",
- delay: 0,
- triggeredAsset: {
- triggeredModel: { modelName: "ArmBot-X", modelUuid: "arm-001" },
- triggeredPoint: { pointName: "Pickup Arm Point", pointUuid: "arm-point-01" },
- triggeredAction: { actionName: "Grab Widget", actionUuid: "grab-001" }
- }
- },
- {
- triggerUuid: "trig-002",
- triggerName: "Complete Travel",
- triggerType: "onComplete",
- delay: 2,
- triggeredAsset: null
- }
- ]
- }
- }
- },
- // {
- // modelUuid: "cd7d0584-0684-42b4-b051-9e882c1914aa",
- // modelName: "AGV",
- // position: [105.90938758014703, 0, 31.584209911095215],
- // rotation: [0, 0, 0],
- // state: "idle",
- // type: "vehicle",
- // speed: 2.5,
- // point: {
- // uuid: "point-789",
- // position: [0, 1, 0],
- // rotation: [0, 0, 0],
- // action: {
- // actionUuid: "action-456",
- // actionName: "Deliver to Zone A",
- // actionType: "travel",
- // unLoadDuration: 10,
- // loadCapacity: 2,
- // steeringAngle:0,
- // pickUpPoint: null,
- // unLoadPoint: null,
- // triggers: [
- // {
- // triggerUuid: "trig-001",
- // triggerName: "Start Travel",
- // triggerType: "onStart",
- // delay: 0,
- // triggeredAsset: {
- // triggeredModel: { modelName: "ArmBot-X", modelUuid: "arm-001" },
- // triggeredPoint: { pointName: "Pickup Arm Point", pointUuid: "arm-point-01" },
- // triggeredAction: { actionName: "Grab Widget", actionUuid: "grab-001" }
- // }
- // },
- // {
- // triggerUuid: "trig-002",
- // triggerName: "Complete Travel",
- // triggerType: "onComplete",
- // delay: 2,
- // triggeredAsset: null
- // }
- // ]
- // }
- // }
- // },
- // {
- // modelUuid: "e729a4f1-11d2-4778-8d6a-468f1b4f6b79",
- // modelName: "forklift",
- // position: [98.85729337188162, 0, 38.36616546567653],
- // rotation: [0, 0, 0],
- // state: "idle",
- // type: "vehicle",
- // speed: 2.5,
- // point: {
- // uuid: "point-789",
- // position: [0, 1, 0],
- // rotation: [0, 0, 0],
- // action: {
- // actionUuid: "action-456",
- // actionName: "Deliver to Zone A",
- // actionType: "travel",
- // unLoadDuration: 15,
- // loadCapacity: 5,
- // steeringAngle:0,
- // pickUpPoint: null,
- // unLoadPoint: null,
- // triggers: [
- // {
- // triggerUuid: "trig-001",
- // triggerName: "Start Travel",
- // triggerType: "onStart",
- // delay: 0,
- // triggeredAsset: {
- // triggeredModel: { modelName: "ArmBot-X", modelUuid: "arm-001" },
- // triggeredPoint: { pointName: "Pickup Arm Point", pointUuid: "arm-point-01" },
- // triggeredAction: { actionName: "Grab Widget", actionUuid: "grab-001" }
- // }
- // },
- // {
- // triggerUuid: "trig-002",
- // triggerName: "Complete Travel",
- // triggerType: "onComplete",
- // delay: 2,
- // triggeredAsset: null
- // }
- // ]
- // }
- // }
- // }
- ]);
useEffect(() => {
+ if (selectedProduct.productId) {
+ const product = getProductById(selectedProduct.productId);
+ if (product) {
+ product.eventDatas.forEach(events => {
+ if (events.type === 'vehicle') {
+ removeVehicle(events.modelUuid);
+ addVehicle(selectedProduct.productId, events);
+ }
+ });
+ }
+ }
+ }, [selectedProduct]);
+ useEffect(() => {
+
// console.log('vehicles: ', vehicles);
}, [vehicles])
- useEffect(() => {
- addVehicle("123", vehicleStatusSample[0]);
- addVehicle('123', vehicleStatusSample[1]);
- // addVehicle('123', vehicleStatusSample[2]);
- }, []);
-
-
return (
<>
<VehicleInstances />
@@ -214,7 +44,4 @@ function Vehicles() {
);
}
-export default Vehicles;
-
-
-
+export default Vehicles;
\ No newline at end of file
From d3f5c5e506f74fbb494f5bc93ad03fa7ef8f92f7 Mon Sep 17 00:00:00 2001
From: Jerald-Golden-B <jerald@hexrfactory.com>
Date: Fri, 2 May 2025 11:35:03 +0530
Subject: [PATCH 10/17] Enhance TriggerConnector and useProductStore: add
removeTrigger return value and improve event handling in TriggerConnector
---
.../triggers/connector/triggerConnector.tsx | 105 ++++++++++++++++--
app/src/store/simulation/useProductStore.ts | 7 +-
2 files changed, 104 insertions(+), 8 deletions(-)
diff --git a/app/src/modules/simulation/triggers/connector/triggerConnector.tsx b/app/src/modules/simulation/triggers/connector/triggerConnector.tsx
index 5c4c602..7eb0e81 100644
--- a/app/src/modules/simulation/triggers/connector/triggerConnector.tsx
+++ b/app/src/modules/simulation/triggers/connector/triggerConnector.tsx
@@ -1,5 +1,5 @@
import { useEffect, useRef, useState } from "react";
-import { useThree } from "@react-three/fiber";
+import { useFrame, useThree } from "@react-three/fiber";
import * as THREE from "three";
import { useSubModuleStore } from "../../../../store/useModuleStore";
import { useSelectedAsset } from "../../../../store/simulation/useSimulationStore";
@@ -9,6 +9,7 @@ import { useSelectedProduct } from "../../../../store/simulation/useSimulationSt
import { handleAddEventToProduct } from "../../events/points/functions/handleAddEventToProduct";
import { QuadraticBezierLine } from "@react-three/drei";
import { upsertProductOrEventApi } from "../../../../services/simulation/UpsertProductOrEventApi";
+import { useDeleteTool } from "../../../../store/store";
interface ConnectionLine {
id: string;
@@ -18,13 +19,16 @@ interface ConnectionLine {
}
function TriggerConnector() {
- const { gl, raycaster, scene } = useThree();
+ const { gl, raycaster, scene, pointer, camera } = useThree();
const { subModule } = useSubModuleStore();
- const { products, getPointByUuid, getIsEventInProduct, getActionByUuid, addTrigger, addEvent, getEventByModelUuid, getProductById } = useProductStore();
+ const { products, getPointByUuid, getIsEventInProduct, getActionByUuid, addTrigger, removeTrigger, addEvent, getEventByModelUuid, getProductById } = useProductStore();
const { selectedAsset, clearSelectedAsset } = useSelectedAsset();
const { selectedProduct } = useSelectedProduct();
const [hoveredLineKey, setHoveredLineKey] = useState<string | null>(null);
const groupRefs = useRef<Record<string, any>>({});
+ const [helperlineColor, setHelperLineColor] = useState<string>("red");
+ const [currentLine, setCurrentLine] = useState<{ start: THREE.Vector3; end: THREE.Vector3; mid: THREE.Vector3; } | null>(null);
+ const { deleteTool } = useDeleteTool();
const [firstSelectedPoint, setFirstSelectedPoint] = useState<{
productId: string;
@@ -303,6 +307,61 @@ function TriggerConnector() {
}, [gl, subModule, selectedProduct, firstSelectedPoint]);
+
+ useFrame(() => {
+ if (firstSelectedPoint) {
+ raycaster.setFromCamera(pointer, camera);
+ const intersects = raycaster.intersectObjects(scene.children, true).filter(
+ (intersect) =>
+ !intersect.object.name.includes("Roof") &&
+ !intersect.object.name.includes("agv-collider") &&
+ !intersect.object.name.includes("MeasurementReference") &&
+ !intersect.object.userData.isPathObject &&
+ !(intersect.object.type === "GridHelper")
+ );
+
+ let point: THREE.Vector3 | null = null;
+
+ if (intersects.length > 0) {
+ point = intersects[0].point;
+ if (point.y < 0.05) {
+ point = new THREE.Vector3(point.x, 0.05, point.z);
+ }
+ }
+
+ const sphereIntersects = raycaster.intersectObjects(scene.children, true).filter((intersect) => intersect.object.name === ('Event-Sphere'));
+ const startPoint = getWorldPositionFromScene(firstSelectedPoint.pointUuid);
+
+ if (point && startPoint) {
+
+ const distance = startPoint.distanceTo(point);
+ const heightFactor = Math.max(0.5, distance * 0.2);
+ const midPoint = new THREE.Vector3(
+ (startPoint.x + point.x) / 2,
+ Math.max(startPoint.y, point.y) + heightFactor,
+ (startPoint.z + point.z) / 2
+ );
+
+ setCurrentLine({
+ start: startPoint,
+ mid: midPoint,
+ end: point,
+ });
+
+ if (sphereIntersects.length > 0) {
+ setHelperLineColor("#6cf542");
+ } else {
+ setHelperLineColor("red");
+ }
+ } else {
+ setCurrentLine(null);
+ }
+ } else {
+ setCurrentLine(null);
+ }
+
+ })
+
const getWorldPositionFromScene = (pointUuid: string): THREE.Vector3 | null => {
const pointObj = scene.getObjectByProperty("uuid", pointUuid);
if (!pointObj) return null;
@@ -312,8 +371,23 @@ function TriggerConnector() {
return worldPosition;
};
+ const removeConnection = (connection: ConnectionLine) => {
+ if (connection.trigger.triggerUuid) {
+ const event = removeTrigger(connection.trigger.triggerUuid);
+ if (event) {
+ console.log('event: ', event);
+ updateBackend(
+ selectedProduct.productName,
+ selectedProduct.productId,
+ organization,
+ event
+ );
+ }
+ }
+ };
+
return (
- <group>
+ <group name="simulationConnectionGroup" >
{connections.map((connection) => {
const startPoint = getWorldPositionFromScene(connection.startPointUuid);
const endPoint = getWorldPositionFromScene(connection.endPointUuid);
@@ -335,20 +409,37 @@ function TriggerConnector() {
start={startPoint.toArray()}
end={endPoint.toArray()}
mid={midPoint.toArray()}
- color={hoveredLineKey === connection.id ? "red" : "#42a5f5"}
+ color={deleteTool && hoveredLineKey === connection.id ? "red" : "#42a5f5"}
lineWidth={4}
- dashed={hoveredLineKey !== connection.id}
+ dashed={deleteTool && hoveredLineKey === connection.id ? false : true}
dashSize={0.75}
dashScale={20}
onPointerOver={() => setHoveredLineKey(connection.id)}
onPointerOut={() => setHoveredLineKey(null)}
onClick={() => {
- console.log("Connection clicked:", connection);
+ if (deleteTool) {
+ setHoveredLineKey(null);
+ setCurrentLine(null);
+ removeConnection(connection);
+ }
}}
userData={connection.trigger}
/>
);
})}
+
+ {currentLine && (
+ <QuadraticBezierLine
+ start={currentLine.start.toArray()}
+ end={currentLine.end.toArray()}
+ mid={currentLine.mid.toArray()}
+ color={helperlineColor}
+ lineWidth={4}
+ dashed
+ dashSize={1}
+ dashScale={20}
+ />
+ )}
</group>
);
}
diff --git a/app/src/store/simulation/useProductStore.ts b/app/src/store/simulation/useProductStore.ts
index 0918128..a47bcdb 100644
--- a/app/src/store/simulation/useProductStore.ts
+++ b/app/src/store/simulation/useProductStore.ts
@@ -44,7 +44,7 @@ type ProductsStore = {
actionUuid: string,
trigger: TriggerSchema
) => EventsSchema | undefined;
- removeTrigger: (triggerUuid: string) => void;
+ removeTrigger: (triggerUuid: string) => EventsSchema | undefined;
updateTrigger: (
triggerUuid: string,
updates: Partial<TriggerSchema>
@@ -318,6 +318,7 @@ export const useProductStore = create<ProductsStore>()(
},
removeTrigger: (triggerUuid) => {
+ let updatedEvent: EventsSchema | undefined;
set((state) => {
for (const product of state.products) {
for (const event of product.eventDatas) {
@@ -325,16 +326,19 @@ export const useProductStore = create<ProductsStore>()(
for (const point of (event as ConveyorEventSchema).points) {
if (point.action && 'triggers' in point.action) {
point.action.triggers = point.action.triggers.filter(t => t.triggerUuid !== triggerUuid);
+ updatedEvent = JSON.parse(JSON.stringify(event));
}
}
} else if ('point' in event) {
const point = (event as any).point;
if ('action' in point && 'triggers' in point.action) {
point.action.triggers = point.action.triggers.filter((t: any) => t.triggerUuid !== triggerUuid);
+ updatedEvent = JSON.parse(JSON.stringify(event));
} else if ('actions' in point) {
for (const action of point.actions) {
if ('triggers' in action) {
action.triggers = action.triggers.filter((t: any) => t.triggerUuid !== triggerUuid);
+ updatedEvent = JSON.parse(JSON.stringify(event));
}
}
}
@@ -342,6 +346,7 @@ export const useProductStore = create<ProductsStore>()(
}
}
});
+ return updatedEvent;
},
updateTrigger: (triggerUuid, updates) => {
From 96530b981f378e3002f01f872dc1202af99957fe Mon Sep 17 00:00:00 2001
From: Jerald-Golden-B <jerald@hexrfactory.com>
Date: Fri, 2 May 2025 11:54:40 +0530
Subject: [PATCH 11/17] Add dragging and rotating state management to
simulation store; enhance PointsCreator and VehicleUI components
---
.../events/points/creator/pointsCreator.tsx | 74 ++++++++++++++-----
.../simulation/ui/vehicle/vehicleUI.tsx | 10 +--
.../store/simulation/useSimulationStore.ts | 32 ++++++++
3 files changed, 93 insertions(+), 23 deletions(-)
diff --git a/app/src/modules/simulation/events/points/creator/pointsCreator.tsx b/app/src/modules/simulation/events/points/creator/pointsCreator.tsx
index 36ec89a..e178a81 100644
--- a/app/src/modules/simulation/events/points/creator/pointsCreator.tsx
+++ b/app/src/modules/simulation/events/points/creator/pointsCreator.tsx
@@ -1,22 +1,29 @@
import React, { useEffect, useRef, useState } from "react";
import * as THREE from "three";
import { useEventsStore } from "../../../../../store/simulation/useEventsStore";
-import useModuleStore from "../../../../../store/useModuleStore";
+import useModuleStore, { useSubModuleStore } from "../../../../../store/useModuleStore";
import { TransformControls } from "@react-three/drei";
import { detectModifierKeys } from "../../../../../utils/shortcutkeys/detectModifierKeys";
import {
useSelectedEventSphere,
useSelectedEventData,
+ useIsDragging,
+ useIsRotating,
} from "../../../../../store/simulation/useSimulationStore";
+import { useThree } from "@react-three/fiber";
function PointsCreator() {
+ const { gl, raycaster, scene, pointer, camera } = useThree();
+ const { subModule } = useSubModuleStore();
const { events, updatePoint, getPointByUuid, getEventByModelUuid } = useEventsStore();
const { activeModule } = useModuleStore();
const transformRef = useRef<any>(null);
const [transformMode, setTransformMode] = useState<"translate" | "rotate" | null>(null);
const sphereRefs = useRef<{ [key: string]: THREE.Mesh }>({});
const { selectedEventSphere, setSelectedEventSphere, clearSelectedEventSphere, } = useSelectedEventSphere();
- const { selectedEventData, setSelectedEventData, clearSelectedEventData } = useSelectedEventData();
+ const { setSelectedEventData, clearSelectedEventData } = useSelectedEventData();
+ const { isDragging } = useIsDragging();
+ const { isRotating } = useIsRotating();
useEffect(() => {
if (selectedEventSphere) {
@@ -72,6 +79,53 @@ function PointsCreator() {
}
};
+ useEffect(() => {
+ const canvasElement = gl.domElement;
+
+ let drag = false;
+ let isMouseDown = false;
+
+ const onMouseDown = () => {
+ isMouseDown = true;
+ drag = false;
+ };
+
+ const onMouseUp = () => {
+ if (selectedEventSphere && !drag) {
+ raycaster.setFromCamera(pointer, camera);
+ const intersects = raycaster
+ .intersectObjects(scene.children, true)
+ .filter(
+ (intersect) =>
+ intersect.object.name === ('Event-Sphere')
+ );
+ if (intersects.length === 0) {
+ clearSelectedEventSphere();
+ setTransformMode(null);
+ }
+ }
+ }
+
+ const onMouseMove = () => {
+ if (isMouseDown) {
+ drag = true;
+ }
+ };
+
+ if (subModule === 'mechanics') {
+ canvasElement.addEventListener("mousedown", onMouseDown);
+ canvasElement.addEventListener("mouseup", onMouseUp);
+ canvasElement.addEventListener("mousemove", onMouseMove);
+ }
+
+ return () => {
+ canvasElement.removeEventListener("mousedown", onMouseDown);
+ canvasElement.removeEventListener("mouseup", onMouseUp);
+ canvasElement.removeEventListener("mousemove", onMouseMove);
+ };
+
+ }, [gl, subModule, selectedEventSphere]);
+
return (
<>
{activeModule === "simulation" && (
@@ -92,10 +146,6 @@ function PointsCreator() {
sphereRefs.current[point.uuid]
);
}}
- onPointerMissed={() => {
- // clearSelectedEventSphere();
- setTransformMode(null);
- }}
key={`${i}-${j}`}
position={new THREE.Vector3(...point.position)}
// rotation={new THREE.Euler(...point.rotation)}
@@ -120,10 +170,6 @@ function PointsCreator() {
sphereRefs.current[event.point.uuid]
);
}}
- onPointerMissed={() => {
- // clearSelectedEventSphere();
- setTransformMode(null);
- }}
position={new THREE.Vector3(...event.point.position)}
// rotation={new THREE.Euler(...event.point.rotation)}
userData={{ modelUuid: event.modelUuid, pointUuid: event.point.uuid }}
@@ -146,10 +192,6 @@ function PointsCreator() {
sphereRefs.current[event.point.uuid]
);
}}
- onPointerMissed={() => {
- // clearSelectedEventSphere();
- setTransformMode(null);
- }}
position={new THREE.Vector3(...event.point.position)}
// rotation={new THREE.Euler(...event.point.rotation)}
userData={{ modelUuid: event.modelUuid, pointUuid: event.point.uuid }}
@@ -172,10 +214,6 @@ function PointsCreator() {
sphereRefs.current[event.point.uuid]
);
}}
- onPointerMissed={() => {
- // clearSelectedEventSphere();
- setTransformMode(null);
- }}
position={new THREE.Vector3(...event.point.position)}
// rotation={new THREE.Euler(...event.point.rotation)}
userData={{ modelUuid: event.modelUuid, pointUuid: event.point.uuid }}
diff --git a/app/src/modules/simulation/ui/vehicle/vehicleUI.tsx b/app/src/modules/simulation/ui/vehicle/vehicleUI.tsx
index 5dec724..43ba833 100644
--- a/app/src/modules/simulation/ui/vehicle/vehicleUI.tsx
+++ b/app/src/modules/simulation/ui/vehicle/vehicleUI.tsx
@@ -4,7 +4,7 @@ import startEnd from "../../../../assets/gltf-glb/arrow_red.glb";
import * as THREE from "three";
import { useGLTF } from '@react-three/drei';
import { useFrame, useThree } from '@react-three/fiber';
-import { useSelectedEventSphere } from '../../../../store/simulation/useSimulationStore';
+import { useSelectedEventSphere, useIsDragging, useIsRotating } from '../../../../store/simulation/useSimulationStore';
import { useVehicleStore } from '../../../../store/simulation/useVehicleStore';
import * as Types from "../../../../types/world/worldTypes";
const VehicleUI = () => {
@@ -19,8 +19,8 @@ const VehicleUI = () => {
const [endPosition, setEndPosition] = useState<[number, number, number]>([0, 0, 0]);
const [startRotation, setStartRotation] = useState<[number, number, number]>([0, 0, 0]);
const [endRotation, setEndRotation] = useState<[number, number, number]>([0, 0, 0]);
- const [isDragging, setIsDragging] = useState<"start" | "end" | null>(null);
- const [isRotating, setIsRotating] = useState<"start" | "end" | null>(null);
+ const { isDragging, setIsDragging } = useIsDragging();
+ const { isRotating, setIsRotating } = useIsRotating();
const { raycaster } = useThree();
const plane = useRef(new THREE.Plane(new THREE.Vector3(0, 1, 0), 0));
const state: Types.ThreeState = useThree();
@@ -46,13 +46,13 @@ const VehicleUI = () => {
pickUpPoint.rotation.y,
pickUpPoint.rotation.z
);
- pickupPosition.y = 0;
+ pickupPosition.y = 0;
setStartPosition([pickupPosition.x, 0, pickupPosition.z]);
setStartRotation([pickupRotation.x, pickupRotation.y, pickupRotation.z]);
} else {
const defaultLocal = new THREE.Vector3(0, 0, 1.5);
const defaultWorld = selectedEventSphere.localToWorld(defaultLocal);
- defaultWorld.y = 0;
+ defaultWorld.y = 0;
setStartPosition([defaultWorld.x, 0, defaultWorld.z]);
setStartRotation([0, 0, 0]);
}
diff --git a/app/src/store/simulation/useSimulationStore.ts b/app/src/store/simulation/useSimulationStore.ts
index 5085688..6e4321f 100644
--- a/app/src/store/simulation/useSimulationStore.ts
+++ b/app/src/store/simulation/useSimulationStore.ts
@@ -114,4 +114,36 @@ export const useSelectedAction = create<SelectedActionState>()(
});
},
}))
+);
+
+interface IsDraggingState {
+ isDragging: "start" | "end" | null;
+ setIsDragging: (state: "start" | "end" | null) => void;
+}
+
+export const useIsDragging = create<IsDraggingState>()(
+ immer((set) => ({
+ isDragging: null,
+ setIsDragging: (state) => {
+ set((s) => {
+ s.isDragging = state;
+ });
+ },
+ }))
+);
+
+interface IsRotatingState {
+ isRotating: "start" | "end" | null;
+ setIsRotating: (state: "start" | "end" | null) => void;
+}
+
+export const useIsRotating = create<IsRotatingState>()(
+ immer((set) => ({
+ isRotating: null,
+ setIsRotating: (state) => {
+ set((s) => {
+ s.isRotating = state;
+ });
+ },
+ }))
);
\ No newline at end of file
From 34c30bb5a270d5d9d7677a44339de3e8e5ca2b1b Mon Sep 17 00:00:00 2001
From: Jerald-Golden-B <jerald@hexrfactory.com>
Date: Fri, 2 May 2025 12:11:09 +0530
Subject: [PATCH 12/17] Enhance Machine and Vehicle components: add current
action management and update machine sample structure
---
.../modules/simulation/machine/machine.tsx | 51 ++++++++++++-------
.../modules/simulation/vehicle/vehicles.tsx | 15 +++++-
app/src/store/simulation/useMachineStore.ts | 28 ++++++++++
app/src/types/simulationTypes.d.ts | 4 ++
4 files changed, 78 insertions(+), 20 deletions(-)
diff --git a/app/src/modules/simulation/machine/machine.tsx b/app/src/modules/simulation/machine/machine.tsx
index 96a5b39..e9d2dea 100644
--- a/app/src/modules/simulation/machine/machine.tsx
+++ b/app/src/modules/simulation/machine/machine.tsx
@@ -1,29 +1,42 @@
-import React from 'react'
+import React, { useEffect } from 'react'
import MachineInstances from './instances/machineInstances'
+import { useMachineStore } from '../../../store/simulation/useMachineStore'
+import { useSelectedProduct } from '../../../store/simulation/useSimulationStore';
function Machine() {
+ const { addMachine, addCurrentAction, removeMachine } = useMachineStore();
+ const { selectedProduct } = useSelectedProduct();
- const machineSample: MachineEventSchema = {
- modelUuid: "machine-1234-5678-9012",
- modelName: "CNC Milling Machine",
- position: [10, 0, 5],
- rotation: [0, 0, 0],
- state: "idle",
- type: "machine",
- point: {
- uuid: "machine-point-9876-5432-1098",
- position: [10, 0.5, 5.2],
+ const machineSample: MachineEventSchema[] = [
+ {
+ modelUuid: "machine-1234-5678-9012",
+ modelName: "CNC Milling Machine",
+ position: [10, 0, 5],
rotation: [0, 0, 0],
- action: {
- actionUuid: "machine-action-2468-1357-8024",
- actionName: "Metal Processing",
- actionType: "process",
- processTime: 10,
- swapMaterial: "steel",
- triggers: []
+ state: "idle",
+ type: "machine",
+ point: {
+ uuid: "machine-point-9876-5432-1098",
+ position: [10, 0.5, 5.2],
+ rotation: [0, 0, 0],
+ action: {
+ actionUuid: "machine-action-2468-1357-8024",
+ actionName: "Metal Processing",
+ actionType: "process",
+ processTime: 10,
+ swapMaterial: "steel",
+ triggers: []
+ }
}
}
- };
+ ];
+
+ useEffect(() => {
+ removeMachine(machineSample[0].modelUuid);
+ addMachine(selectedProduct.productId, machineSample[0]);
+
+ // addCurrentAction(machineSample[0].modelUuid, machineSample[0].point.action.actionUuid);
+ }, [])
return (
<>
diff --git a/app/src/modules/simulation/vehicle/vehicles.tsx b/app/src/modules/simulation/vehicle/vehicles.tsx
index 9691372..a4d72a1 100644
--- a/app/src/modules/simulation/vehicle/vehicles.tsx
+++ b/app/src/modules/simulation/vehicle/vehicles.tsx
@@ -8,7 +8,7 @@ import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
import { useProductStore } from "../../../store/simulation/useProductStore";
function Vehicles() {
- const { getProductById } = useProductStore();
+ const { products, getProductById } = useProductStore();
const { selectedProduct } = useSelectedProduct();
const { vehicles, addVehicle, removeVehicle } = useVehicleStore();
const { selectedEventSphere } = useSelectedEventSphere();
@@ -29,6 +29,19 @@ function Vehicles() {
}
}
}, [selectedProduct]);
+
+ // useEffect(() => {
+ // vehicles.forEach(vehicle => {
+ // const product = getProductById(vehicle.productId);
+ // if (product) {
+ // const eventData = product.eventDatas.find(event => event.modelUuid === vehicle.modelUuid);
+ // if (eventData) {
+ // vehicle.eventData = eventData;
+ // }
+ // }
+ // });
+ // }, [vehicles, products]);
+
useEffect(() => {
// console.log('vehicles: ', vehicles);
diff --git a/app/src/store/simulation/useMachineStore.ts b/app/src/store/simulation/useMachineStore.ts
index cc927f7..af7119c 100644
--- a/app/src/store/simulation/useMachineStore.ts
+++ b/app/src/store/simulation/useMachineStore.ts
@@ -12,6 +12,9 @@ interface MachineStore {
updates: Partial<Omit<MachineStatus, 'modelUuid' | 'productId'>>
) => void;
+ addCurrentAction: (modelUuid: string, actionUuid: string) => void;
+ removeCurrentAction: (modelUuid: string) => void;
+
// Status updates
setMachineActive: (modelUuid: string, isActive: boolean) => void;
setMachineState: (modelUuid: string, newState: MachineStatus['state']) => void;
@@ -61,6 +64,31 @@ export const useMachineStore = create<MachineStore>()(
});
},
+
+ addCurrentAction: (modelUuid) => {
+ set((state) => {
+ const armBot = state.machines.find(a => a.modelUuid === modelUuid);
+ if (armBot) {
+ const action = armBot.point.action;
+ if (action) {
+ armBot.currentAction = {
+ actionUuid: action.actionUuid,
+ actionName: action.actionName,
+ };
+ }
+ }
+ });
+ },
+
+ removeCurrentAction: (modelUuid) => {
+ set((state) => {
+ const armBot = state.machines.find(a => a.modelUuid === modelUuid);
+ if (armBot) {
+ armBot.currentAction = undefined;
+ }
+ });
+ },
+
// Status updates
setMachineActive: (modelUuid, isActive) => {
set((state) => {
diff --git a/app/src/types/simulationTypes.d.ts b/app/src/types/simulationTypes.d.ts
index cb71864..346e408 100644
--- a/app/src/types/simulationTypes.d.ts
+++ b/app/src/types/simulationTypes.d.ts
@@ -143,6 +143,10 @@ interface MachineStatus extends MachineEventSchema {
isActive: boolean;
idleTime: number;
activeTime: number;
+ currentAction?: {
+ actionUuid: string;
+ actionName: string;
+ };
}
interface ArmBotStatus extends RoboticArmEventSchema {
From 01a03f5166dac43c7ca7343b8e2b57587ed6b964 Mon Sep 17 00:00:00 2001
From: Jerald-Golden-B <jerald@hexrfactory.com>
Date: Fri, 2 May 2025 13:13:41 +0530
Subject: [PATCH 13/17] Refactor action updates to include productId in
updateAction calls across mechanics components; enhance event handling in
product store and trigger management. Add clear functions for various stores
to reset state. Update action and trigger management to prevent duplicates
and ensure integrity. Adjust initial load actions to use consistent naming
conventions.
---
.../components/ActionsList.tsx | 2 +-
.../mechanics/conveyorMechanics.tsx | 12 +-
.../mechanics/machineMechanics.tsx | 8 +-
.../mechanics/roboticArmMechanics.tsx | 8 +-
.../mechanics/storageMechanics.tsx | 6 +-
.../mechanics/vehicleMechanics.tsx | 8 +-
.../IntialLoad/loadInitialFloorItems.ts | 8 +-
.../modules/simulation/products/products.tsx | 5 +-
.../triggers/connector/triggerConnector.tsx | 7 +-
.../modules/simulation/vehicle/vehicles.tsx | 26 +---
.../visualization/RealTimeVisulization.tsx | 5 +-
app/src/store/simulation/useArmBotStore.ts | 26 ++--
app/src/store/simulation/useConveyorStore.ts | 26 ++--
app/src/store/simulation/useEventsStore.ts | 38 +++--
app/src/store/simulation/useMachineStore.ts | 33 ++---
app/src/store/simulation/useProductStore.ts | 135 ++++++++++++------
.../store/simulation/useStorageUnitStore.ts | 38 ++---
app/src/store/simulation/useVehicleStore.ts | 28 ++--
app/src/types/simulationTypes.d.ts | 1 +
19 files changed, 245 insertions(+), 175 deletions(-)
diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/components/ActionsList.tsx b/app/src/components/layout/sidebarRight/properties/eventProperties/components/ActionsList.tsx
index 09017de..8aae3b2 100644
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/components/ActionsList.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/components/ActionsList.tsx
@@ -35,7 +35,7 @@ const ActionsList: React.FC<ActionsListProps> = ({
const handleRenameAction = (newName: string) => {
if (!selectedAction.actionId) return;
- const event = renameAction(selectedAction.actionId, newName);
+ const event = renameAction(selectedProduct.productId, selectedAction.actionId, newName);
if (event) {
upsertProductOrEventApi({
diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/conveyorMechanics.tsx b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/conveyorMechanics.tsx
index f68b6b8..ded65af 100644
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/conveyorMechanics.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/conveyorMechanics.tsx
@@ -72,7 +72,7 @@ function ConveyorMechanics() {
const validOption = option as | "default" | "spawn" | "swap" | "delay" | "despawn";
setActiveOption(validOption);
- const event = updateAction(selectedPointData.action.actionUuid, {
+ const event = updateAction(selectedProduct.productId, selectedPointData.action.actionUuid, {
actionType: validOption,
});
@@ -88,7 +88,7 @@ function ConveyorMechanics() {
const handleRenameAction = (newName: string) => {
if (!selectedEventData || !selectedPointData) return;
- const event = updateAction(selectedPointData.action.actionUuid, { actionName: newName });
+ const event = updateAction(selectedProduct.productId, selectedPointData.action.actionUuid, { actionName: newName });
if (event) {
updateBackend(
@@ -102,7 +102,7 @@ function ConveyorMechanics() {
const handleSpawnCountChange = (value: string) => {
if (!selectedEventData || !selectedPointData) return;
- const event = updateAction(selectedPointData.action.actionUuid, {
+ const event = updateAction(selectedProduct.productId, selectedPointData.action.actionUuid, {
spawnCount: value === "inherit" ? "inherit" : parseFloat(value),
});
@@ -118,7 +118,7 @@ function ConveyorMechanics() {
const handleSpawnIntervalChange = (value: string) => {
if (!selectedEventData || !selectedPointData) return;
- const event = updateAction(selectedPointData.action.actionUuid, {
+ const event = updateAction(selectedProduct.productId, selectedPointData.action.actionUuid, {
spawnInterval: value === "inherit" ? "inherit" : parseFloat(value),
});
@@ -134,7 +134,7 @@ function ConveyorMechanics() {
const handleMaterialSelect = (material: string) => {
if (!selectedEventData || !selectedPointData) return;
- const event = updateAction(selectedPointData.action.actionUuid, { material });
+ const event = updateAction(selectedProduct.productId, selectedPointData.action.actionUuid, { material });
if (event) {
updateBackend(
@@ -148,7 +148,7 @@ function ConveyorMechanics() {
const handleDelayChange = (value: string) => {
if (!selectedEventData || !selectedPointData) return;
- const event = updateAction(selectedPointData.action.actionUuid, {
+ const event = updateAction(selectedProduct.productId, selectedPointData.action.actionUuid, {
delay: value === "inherit" ? "inherit" : parseFloat(value),
});
diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/machineMechanics.tsx b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/machineMechanics.tsx
index 1a03986..3e11e54 100644
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/machineMechanics.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/machineMechanics.tsx
@@ -51,7 +51,7 @@ function MachineMechanics() {
const validOption = option as "process";
setActiveOption(validOption);
- const event = updateAction(selectedPointData.action.actionUuid, {
+ const event = updateAction(selectedProduct.productId, selectedPointData.action.actionUuid, {
actionType: validOption,
});
@@ -67,19 +67,19 @@ function MachineMechanics() {
const handleRenameAction = (newName: string) => {
if (!selectedPointData) return;
- const event = updateAction(selectedPointData.action.actionUuid, { actionName: newName });
+ const event = updateAction(selectedProduct.productId, selectedPointData.action.actionUuid, { actionName: newName });
};
const handleProcessTimeChange = (value: string) => {
if (!selectedPointData) return;
- const event = updateAction(selectedPointData.action.actionUuid, {
+ const event = updateAction(selectedProduct.productId, selectedPointData.action.actionUuid, {
processTime: parseFloat(value),
});
};
const handleMaterialSelect = (material: string) => {
if (!selectedPointData) return;
- const event = updateAction(selectedPointData.action.actionUuid, {
+ const event = updateAction(selectedProduct.productId, selectedPointData.action.actionUuid, {
swapMaterial: material,
});
};
diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/roboticArmMechanics.tsx b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/roboticArmMechanics.tsx
index e56741f..df5c358 100644
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/roboticArmMechanics.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/roboticArmMechanics.tsx
@@ -59,7 +59,7 @@ function RoboticArmMechanics() {
const handleRenameAction = (newName: string) => {
if (!selectedAction.actionId) return;
- const event = updateAction(selectedAction.actionId, { actionName: newName });
+ const event = updateAction(selectedProduct.productId, selectedAction.actionId, { actionName: newName });
if (selectedPointData) {
const updatedActions = selectedPointData.actions.map((action) =>
@@ -101,7 +101,7 @@ function RoboticArmMechanics() {
if (!selectedAction.actionId || !selectedPointData) return;
const [x, y, z] = value.split(",").map(Number);
- const event = updateAction(selectedAction.actionId, {
+ const event = updateAction(selectedProduct.productId, selectedAction.actionId, {
process: {
startPoint: [x, y, z] as [number, number, number],
endPoint: selectedPointData.actions.find((a) => a.actionUuid === selectedAction.actionId)?.process.endPoint || null,
@@ -122,7 +122,7 @@ function RoboticArmMechanics() {
if (!selectedAction.actionId || !selectedPointData) return;
const [x, y, z] = value.split(",").map(Number);
- const event = updateAction(selectedAction.actionId, {
+ const event = updateAction(selectedProduct.productId, selectedAction.actionId, {
process: {
startPoint: selectedPointData.actions.find((a) => a.actionUuid === selectedAction.actionId)?.process.startPoint || null,
endPoint: [x, y, z] as [number, number, number],
@@ -181,7 +181,7 @@ function RoboticArmMechanics() {
const handleDeleteAction = (actionUuid: string) => {
if (!selectedPointData) return;
- const event = removeAction(actionUuid);
+ const event = removeAction(selectedProduct.productId, actionUuid);
if (event) {
updateBackend(
diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/storageMechanics.tsx b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/storageMechanics.tsx
index f782019..3273ce4 100644
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/storageMechanics.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/storageMechanics.tsx
@@ -51,7 +51,7 @@ function StorageMechanics() {
const validOption = option as "store" | "spawn";
setActiveOption(validOption);
- const event = updateAction(selectedPointData.action.actionUuid, {
+ const event = updateAction(selectedProduct.productId, selectedPointData.action.actionUuid, {
actionType: validOption,
});
@@ -67,7 +67,7 @@ function StorageMechanics() {
const handleRenameAction = (newName: string) => {
if (!selectedPointData) return;
- const event = updateAction(selectedPointData.action.actionUuid, { actionName: newName });
+ const event = updateAction(selectedProduct.productId, selectedPointData.action.actionUuid, { actionName: newName });
if (event) {
updateBackend(
@@ -81,7 +81,7 @@ function StorageMechanics() {
const handleCapacityChange = (value: string) => {
if (!selectedPointData) return;
- const event = updateAction(selectedPointData.action.actionUuid, {
+ const event = updateAction(selectedProduct.productId, selectedPointData.action.actionUuid, {
storageCapacity: parseInt(value),
});
diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/vehicleMechanics.tsx b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/vehicleMechanics.tsx
index 35c2821..7839168 100644
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/vehicleMechanics.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/vehicleMechanics.tsx
@@ -72,7 +72,7 @@ function VehicleMechanics() {
const validOption = option as "travel";
setActiveOption(validOption);
- const event = updateAction(selectedPointData.action.actionUuid, {
+ const event = updateAction(selectedProduct.productId, selectedPointData.action.actionUuid, {
actionType: validOption,
});
@@ -88,7 +88,7 @@ function VehicleMechanics() {
const handleRenameAction = (newName: string) => {
if (!selectedPointData) return;
- const event = updateAction(selectedPointData.action.actionUuid, { actionName: newName });
+ const event = updateAction(selectedProduct.productId, selectedPointData.action.actionUuid, { actionName: newName });
if (event) {
updateBackend(
@@ -102,7 +102,7 @@ function VehicleMechanics() {
const handleLoadCapacityChange = (value: string) => {
if (!selectedPointData) return;
- const event = updateAction(selectedPointData.action.actionUuid, {
+ const event = updateAction(selectedProduct.productId, selectedPointData.action.actionUuid, {
loadCapacity: parseFloat(value),
});
@@ -118,7 +118,7 @@ function VehicleMechanics() {
const handleUnloadDurationChange = (value: string) => {
if (!selectedPointData) return;
- const event = updateAction(selectedPointData.action.actionUuid, {
+ const event = updateAction(selectedProduct.productId, selectedPointData.action.actionUuid, {
unLoadDuration: parseFloat(value),
});
diff --git a/app/src/modules/builder/IntialLoad/loadInitialFloorItems.ts b/app/src/modules/builder/IntialLoad/loadInitialFloorItems.ts
index 27175ee..ee5c283 100644
--- a/app/src/modules/builder/IntialLoad/loadInitialFloorItems.ts
+++ b/app/src/modules/builder/IntialLoad/loadInitialFloorItems.ts
@@ -202,11 +202,11 @@ function processLoadedModel(
rotation: [item.eventData.point?.rotation[0] || 0, item.eventData.point?.rotation[1] || 0, item.eventData.point?.rotation[2] || 0],
action: {
actionUuid: THREE.MathUtils.generateUUID(),
- actionName: "Vehicle Action",
+ actionName: "Action 1",
actionType: "travel",
unLoadDuration: 5,
loadCapacity: 10,
- steeringAngle:0,
+ steeringAngle: 0,
pickUpPoint: null,
unLoadPoint: null,
triggers: []
@@ -254,7 +254,7 @@ function processLoadedModel(
rotation: [item.eventData.point?.rotation[0] || 0, item.eventData.point?.rotation[1] || 0, item.eventData.point?.rotation[2] || 0],
action: {
actionUuid: THREE.MathUtils.generateUUID(),
- actionName: "Process Action",
+ actionName: "Action 1",
actionType: "process",
processTime: 10,
swapMaterial: "material-id",
@@ -279,7 +279,7 @@ function processLoadedModel(
actions: [
{
actionUuid: THREE.MathUtils.generateUUID(),
- actionName: "Pick and Place",
+ actionName: "Action 1",
actionType: "pickAndPlace",
process: {
startPoint: [0, 0, 0],
diff --git a/app/src/modules/simulation/products/products.tsx b/app/src/modules/simulation/products/products.tsx
index ee1ac42..921dd96 100644
--- a/app/src/modules/simulation/products/products.tsx
+++ b/app/src/modules/simulation/products/products.tsx
@@ -7,7 +7,7 @@ import { upsertProductOrEventApi } from '../../../services/simulation/UpsertProd
import { getAllProductsApi } from '../../../services/simulation/getallProductsApi';
function Products() {
- const { products, addProduct, setProducts } = useProductStore();
+ const { addProduct, setProducts } = useProductStore();
const { setSelectedProduct } = useSelectedProduct();
useEffect(() => {
@@ -27,9 +27,6 @@ function Products() {
})
}, [])
- useEffect(() => {
- }, [])
-
return (
<>
diff --git a/app/src/modules/simulation/triggers/connector/triggerConnector.tsx b/app/src/modules/simulation/triggers/connector/triggerConnector.tsx
index 7eb0e81..5f83528 100644
--- a/app/src/modules/simulation/triggers/connector/triggerConnector.tsx
+++ b/app/src/modules/simulation/triggers/connector/triggerConnector.tsx
@@ -228,7 +228,7 @@ function TriggerConnector() {
};
if (firstSelectedPoint.actionUuid) {
- const event = addTrigger(firstSelectedPoint.actionUuid, trigger);
+ const event = addTrigger(selectedProduct.productId, firstSelectedPoint.actionUuid, trigger);
if (event) {
updateBackend(
@@ -285,7 +285,7 @@ function TriggerConnector() {
};
if (firstSelectedPoint.actionUuid) {
- addTrigger(firstSelectedPoint.actionUuid, trigger);
+ addTrigger(selectedProduct.productId, firstSelectedPoint.actionUuid, trigger);
}
setFirstSelectedPoint(null);
}
@@ -373,9 +373,8 @@ function TriggerConnector() {
const removeConnection = (connection: ConnectionLine) => {
if (connection.trigger.triggerUuid) {
- const event = removeTrigger(connection.trigger.triggerUuid);
+ const event = removeTrigger(selectedProduct.productId, connection.trigger.triggerUuid);
if (event) {
- console.log('event: ', event);
updateBackend(
selectedProduct.productName,
selectedProduct.productId,
diff --git a/app/src/modules/simulation/vehicle/vehicles.tsx b/app/src/modules/simulation/vehicle/vehicles.tsx
index a4d72a1..19f049c 100644
--- a/app/src/modules/simulation/vehicle/vehicles.tsx
+++ b/app/src/modules/simulation/vehicle/vehicles.tsx
@@ -1,7 +1,6 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
import VehicleInstances from "./instances/vehicleInstances";
import { useVehicleStore } from "../../../store/simulation/useVehicleStore";
-import { useFloorItems } from "../../../store/store";
import { useSelectedEventData, useSelectedEventSphere, useSelectedProduct } from "../../../store/simulation/useSimulationStore";
import VehicleUI from "../ui/vehicle/vehicleUI";
import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
@@ -10,49 +9,38 @@ import { useProductStore } from "../../../store/simulation/useProductStore";
function Vehicles() {
const { products, getProductById } = useProductStore();
const { selectedProduct } = useSelectedProduct();
- const { vehicles, addVehicle, removeVehicle } = useVehicleStore();
+ const { vehicles, addVehicle, clearvehicles } = useVehicleStore();
const { selectedEventSphere } = useSelectedEventSphere();
const { selectedEventData } = useSelectedEventData();
- const { floorItems } = useFloorItems();
const { isPlaying } = usePlayButtonStore();
useEffect(() => {
if (selectedProduct.productId) {
const product = getProductById(selectedProduct.productId);
if (product) {
+ clearvehicles();
product.eventDatas.forEach(events => {
if (events.type === 'vehicle') {
- removeVehicle(events.modelUuid);
addVehicle(selectedProduct.productId, events);
}
});
}
}
- }, [selectedProduct]);
-
- // useEffect(() => {
- // vehicles.forEach(vehicle => {
- // const product = getProductById(vehicle.productId);
- // if (product) {
- // const eventData = product.eventDatas.find(event => event.modelUuid === vehicle.modelUuid);
- // if (eventData) {
- // vehicle.eventData = eventData;
- // }
- // }
- // });
- // }, [vehicles, products]);
+ }, [selectedProduct, products]);
useEffect(() => {
-
// console.log('vehicles: ', vehicles);
}, [vehicles])
return (
<>
+
<VehicleInstances />
+
{selectedEventSphere && selectedEventData?.data.type === "vehicle" && !isPlaying &&
< VehicleUI />
}
+
</>
);
}
diff --git a/app/src/modules/visualization/RealTimeVisulization.tsx b/app/src/modules/visualization/RealTimeVisulization.tsx
index caf37a1..56e3054 100644
--- a/app/src/modules/visualization/RealTimeVisulization.tsx
+++ b/app/src/modules/visualization/RealTimeVisulization.tsx
@@ -66,8 +66,7 @@ const RealTimeVisulization: React.FC = () => {
const { selectedZone, setSelectedZone } = useSelectedZoneStore();
const { setRightSelect } = useRightSelected();
- const { editWidgetOptions, setEditWidgetOptions } =
- useEditWidgetOptionsStore();
+ const { editWidgetOptions, setEditWidgetOptions } = useEditWidgetOptionsStore();
const { rightClickSelected, setRightClickSelected } = useRightClickSelected();
const [openConfirmationPopup, setOpenConfirmationPopup] = useState(false);
const { setFloatingWidget } = useFloatingWidget();
@@ -76,8 +75,6 @@ const RealTimeVisulization: React.FC = () => {
const { setSelectedChartId } = useWidgetStore();
const [waitingPanels, setWaitingPanels] = useState(null);
- console.log("waitingPanels: ", waitingPanels);
-
OuterClick({
contextClassName: [
"chart-container",
diff --git a/app/src/store/simulation/useArmBotStore.ts b/app/src/store/simulation/useArmBotStore.ts
index 642762f..3c54596 100644
--- a/app/src/store/simulation/useArmBotStore.ts
+++ b/app/src/store/simulation/useArmBotStore.ts
@@ -10,6 +10,7 @@ interface ArmBotStore {
modelUuid: string,
updates: Partial<Omit<ArmBotStatus, 'modelUuid' | 'productId'>>
) => void;
+ clearArmBots: () => void;
addCurrentAction: (modelUuid: string, actionUuid: string) => void;
removeCurrentAction: (modelUuid: string) => void;
@@ -39,14 +40,17 @@ export const useArmBotStore = create<ArmBotStore>()(
addArmBot: (productId, event) => {
set((state) => {
- state.armBots.push({
- ...event,
- productId,
- isActive: false,
- idleTime: 0,
- activeTime: 0,
- state: 'idle',
- });
+ const exists = state.armBots.some(a => a.modelUuid === event.modelUuid);
+ if (!exists) {
+ state.armBots.push({
+ ...event,
+ productId,
+ isActive: false,
+ idleTime: 0,
+ activeTime: 0,
+ state: 'idle',
+ });
+ }
});
},
@@ -65,6 +69,12 @@ export const useArmBotStore = create<ArmBotStore>()(
});
},
+ clearArmBots: () => {
+ set((state) => {
+ state.armBots = [];
+ });
+ },
+
addCurrentAction: (modelUuid, actionUuid) => {
set((state) => {
const armBot = state.armBots.find(a => a.modelUuid === modelUuid);
diff --git a/app/src/store/simulation/useConveyorStore.ts b/app/src/store/simulation/useConveyorStore.ts
index 15dbf34..862ce79 100644
--- a/app/src/store/simulation/useConveyorStore.ts
+++ b/app/src/store/simulation/useConveyorStore.ts
@@ -10,6 +10,7 @@ interface ConveyorStore {
modelUuid: string,
updates: Partial<Omit<ConveyorStatus, 'modelUuid' | 'productId'>>
) => void;
+ clearConveyors: () => void;
setConveyorActive: (modelUuid: string, isActive: boolean) => void;
setConveyorState: (modelUuid: string, newState: ConveyorStatus['state']) => void;
@@ -30,14 +31,17 @@ export const useConveyorStore = create<ConveyorStore>()(
addConveyor: (productId, event) => {
set((state) => {
- state.conveyors.push({
- ...event,
- productId,
- isActive: false,
- idleTime: 0,
- activeTime: 0,
- state: 'idle',
- });
+ const exists = state.conveyors.some(c => c.modelUuid === event.modelUuid);
+ if (!exists) {
+ state.conveyors.push({
+ ...event,
+ productId,
+ isActive: false,
+ idleTime: 0,
+ activeTime: 0,
+ state: 'idle',
+ });
+ }
});
},
@@ -56,6 +60,12 @@ export const useConveyorStore = create<ConveyorStore>()(
});
},
+ clearConveyors: () => {
+ set((state) => {
+ state.conveyors = [];
+ });
+ },
+
setConveyorActive: (modelUuid, isActive) => {
set((state) => {
const conveyor = state.conveyors.find(c => c.modelUuid === modelUuid);
diff --git a/app/src/store/simulation/useEventsStore.ts b/app/src/store/simulation/useEventsStore.ts
index 8fa6838..5580eb1 100644
--- a/app/src/store/simulation/useEventsStore.ts
+++ b/app/src/store/simulation/useEventsStore.ts
@@ -49,7 +49,9 @@ export const useEventsStore = create<EventsStore>()(
// Event-level actions
addEvent: (event) => {
set((state) => {
- state.events.push(event);
+ if (!state.events.some(e => 'modelUuid' in e && e.modelUuid === event.modelUuid)) {
+ state.events.push(event);
+ }
});
},
@@ -76,9 +78,14 @@ export const useEventsStore = create<EventsStore>()(
set((state) => {
const event = state.events.find(e => 'modelUuid' in e && e.modelUuid === modelUuid);
if (event && 'points' in event) {
- (event as ConveyorEventSchema).points.push(point as ConveyorPointSchema);
+ const existingPoint = (event as ConveyorEventSchema).points.find(p => p.uuid === point.uuid);
+ if (!existingPoint) {
+ (event as ConveyorEventSchema).points.push(point as ConveyorPointSchema);
+ }
} else if (event && 'point' in event) {
- (event as VehicleEventSchema | RoboticArmEventSchema | MachineEventSchema | StorageEventSchema).point = point as any;
+ if (!(event as any).point || (event as any).point.uuid !== point.uuid) {
+ (event as VehicleEventSchema | RoboticArmEventSchema | MachineEventSchema | StorageEventSchema).point = point as any;
+ }
}
});
},
@@ -113,14 +120,15 @@ export const useEventsStore = create<EventsStore>()(
const event = state.events.find(e => 'modelUuid' in e && e.modelUuid === modelUuid);
if (event && 'points' in event) {
const point = (event as ConveyorEventSchema).points.find(p => p.uuid === pointUuid);
- if (point) {
+ if (point && (!point.action || point.action.actionUuid !== action.actionUuid)) {
point.action = action as any;
}
} else if (event && 'point' in event && (event as any).point.uuid === pointUuid) {
- if ('action' in (event as any).point) {
- (event as any).point.action = action;
- } else if ('actions' in (event as any).point) {
- (event as any).point.actions.push(action);
+ const point = (event as any).point;
+ if ('action' in point && (!point.action || point.action.actionUuid !== action.actionUuid)) {
+ point.action = action;
+ } else if ('actions' in point && !point.actions.some((a: any) => a.actionUuid === action.actionUuid)) {
+ point.actions.push(action);
}
}
});
@@ -183,18 +191,22 @@ export const useEventsStore = create<EventsStore>()(
if ('points' in event) {
for (const point of (event as ConveyorEventSchema).points) {
if (point.action && point.action.actionUuid === actionUuid) {
- point.action.triggers.push(trigger);
+ if (!point.action.triggers.some(t => t.triggerUuid === trigger.triggerUuid)) {
+ point.action.triggers.push(trigger);
+ }
return;
}
}
} else if ('point' in event) {
- const point = (event as any).point;
+ const point: MachinePointSchema | VehiclePointSchema = (event as any).point;
if ('action' in point && point.action.actionUuid === actionUuid) {
- point.action.triggers.push(trigger);
+ if (!point.action.triggers.some(t => t.triggerUuid === trigger.triggerUuid)) {
+ point.action.triggers.push(trigger);
+ }
return;
} else if ('actions' in point) {
- const action = point.actions.find((a: any) => a.actionUuid === actionUuid);
- if (action) {
+ const action = (point as RoboticArmPointSchema).actions.find((a) => a.actionUuid === actionUuid);
+ if (action && !action.triggers.some(t => t.triggerUuid === trigger.triggerUuid)) {
action.triggers.push(trigger);
return;
}
diff --git a/app/src/store/simulation/useMachineStore.ts b/app/src/store/simulation/useMachineStore.ts
index af7119c..9a564ac 100644
--- a/app/src/store/simulation/useMachineStore.ts
+++ b/app/src/store/simulation/useMachineStore.ts
@@ -4,26 +4,23 @@ import { immer } from 'zustand/middleware/immer';
interface MachineStore {
machines: MachineStatus[];
- // Actions
addMachine: (productId: string, machine: MachineEventSchema) => void;
removeMachine: (modelUuid: string) => void;
updateMachine: (
modelUuid: string,
updates: Partial<Omit<MachineStatus, 'modelUuid' | 'productId'>>
) => void;
+ clearMachines: () => void;
addCurrentAction: (modelUuid: string, actionUuid: string) => void;
removeCurrentAction: (modelUuid: string) => void;
- // Status updates
setMachineActive: (modelUuid: string, isActive: boolean) => void;
setMachineState: (modelUuid: string, newState: MachineStatus['state']) => void;
- // Time tracking
incrementActiveTime: (modelUuid: string, incrementBy: number) => void;
incrementIdleTime: (modelUuid: string, incrementBy: number) => void;
- // Helpers
getMachineById: (modelUuid: string) => MachineStatus | undefined;
getMachinesByProduct: (productId: string) => MachineStatus[];
getMachinesBystate: (state: string) => MachineStatus[];
@@ -35,17 +32,19 @@ export const useMachineStore = create<MachineStore>()(
immer((set, get) => ({
machines: [],
- // Actions
addMachine: (productId, machine) => {
set((state) => {
- state.machines.push({
- ...machine,
- productId,
- isActive: false,
- idleTime: 0,
- activeTime: 0,
- state: 'idle',
- });
+ const exists = state.machines.some(m => m.modelUuid === machine.modelUuid);
+ if (!exists) {
+ state.machines.push({
+ ...machine,
+ productId,
+ isActive: false,
+ idleTime: 0,
+ activeTime: 0,
+ state: 'idle',
+ });
+ }
});
},
@@ -64,6 +63,11 @@ export const useMachineStore = create<MachineStore>()(
});
},
+ clearMachines: () => {
+ set((state) => {
+ state.machines = [];
+ });
+ },
addCurrentAction: (modelUuid) => {
set((state) => {
@@ -89,7 +93,6 @@ export const useMachineStore = create<MachineStore>()(
});
},
- // Status updates
setMachineActive: (modelUuid, isActive) => {
set((state) => {
const machine = state.machines.find(m => m.modelUuid === modelUuid);
@@ -108,7 +111,6 @@ export const useMachineStore = create<MachineStore>()(
});
},
- // Time tracking
incrementActiveTime: (modelUuid, incrementBy) => {
set((state) => {
const machine = state.machines.find(m => m.modelUuid === modelUuid);
@@ -127,7 +129,6 @@ export const useMachineStore = create<MachineStore>()(
});
},
- // Helpers
getMachineById: (modelUuid) => {
return get().machines.find(m => m.modelUuid === modelUuid);
},
diff --git a/app/src/store/simulation/useProductStore.ts b/app/src/store/simulation/useProductStore.ts
index a47bcdb..b7448f2 100644
--- a/app/src/store/simulation/useProductStore.ts
+++ b/app/src/store/simulation/useProductStore.ts
@@ -33,27 +33,30 @@ type ProductsStore = {
pointUuid: string,
action: ConveyorPointSchema['action'] | VehiclePointSchema['action'] | RoboticArmPointSchema['actions'][0] | MachinePointSchema['action'] | StoragePointSchema['action']
) => EventsSchema | undefined;
- removeAction: (actionUuid: string) => EventsSchema | undefined;
+ removeAction: (productId: string, actionUuid: string) => EventsSchema | undefined;
updateAction: (
+ productId: string,
actionUuid: string,
updates: Partial<ConveyorPointSchema['action'] | VehiclePointSchema['action'] | RoboticArmPointSchema['actions'][0] | MachinePointSchema['action'] | StoragePointSchema['action']>
) => EventsSchema | undefined;
// Trigger-level actions
addTrigger: (
+ productId: string,
actionUuid: string,
trigger: TriggerSchema
) => EventsSchema | undefined;
- removeTrigger: (triggerUuid: string) => EventsSchema | undefined;
+ removeTrigger: (productId: string, triggerUuid: string) => EventsSchema | undefined;
updateTrigger: (
+ productId: string,
triggerUuid: string,
updates: Partial<TriggerSchema>
) => void;
// Renaming functions
renameProduct: (productId: string, newName: string) => void;
- renameAction: (actionUuid: string, newName: string) => EventsSchema | undefined;
- renameTrigger: (triggerUuid: string, newName: string) => void;
+ renameAction: (productId: string, actionUuid: string, newName: string) => EventsSchema | undefined;
+ renameTrigger: (productId: string, triggerUuid: string, newName: string) => void;
// Helper functions
getProductById: (productId: string) => { productName: string; productId: string; eventDatas: EventsSchema[] } | undefined;
@@ -71,12 +74,15 @@ export const useProductStore = create<ProductsStore>()(
// Product-level actions
addProduct: (productName, productId) => {
set((state) => {
- const newProduct = {
- productName,
- productId: productId,
- eventDatas: []
- };
- state.products.push(newProduct);
+ const existingProduct = state.products.find(p => p.productId === productId);
+ if (!existingProduct) {
+ const newProduct = {
+ productName,
+ productId: productId,
+ eventDatas: []
+ };
+ state.products.push(newProduct);
+ }
});
},
@@ -106,7 +112,10 @@ export const useProductStore = create<ProductsStore>()(
set((state) => {
const product = state.products.find(p => p.productId === productId);
if (product) {
- product.eventDatas.push(event);
+ const existingEvent = product.eventDatas.find(e => 'modelUuid' in e && e.modelUuid === event.modelUuid);
+ if (!existingEvent) {
+ product.eventDatas.push(event);
+ }
}
});
},
@@ -120,7 +129,7 @@ export const useProductStore = create<ProductsStore>()(
});
},
- deleteEvent: (modelUuid: string) => {
+ deleteEvent: (modelUuid) => {
set((state) => {
for (const product of state.products) {
product.eventDatas = product.eventDatas.filter(e => 'modelUuid' in e && e.modelUuid !== modelUuid);
@@ -150,9 +159,15 @@ export const useProductStore = create<ProductsStore>()(
if (product) {
const event = product.eventDatas.find(e => 'modelUuid' in e && e.modelUuid === modelUuid);
if (event && 'points' in event) {
- (event as ConveyorEventSchema).points.push(point as ConveyorPointSchema);
+ const existingPoint = (event as ConveyorEventSchema).points.find(p => p.uuid === point.uuid);
+ if (!existingPoint) {
+ (event as ConveyorEventSchema).points.push(point as ConveyorPointSchema);
+ }
} else if (event && 'point' in event) {
- (event as VehicleEventSchema | RoboticArmEventSchema | MachineEventSchema | StorageEventSchema).point = point as any;
+ const existingPoint = (event as any).point?.uuid === point.uuid;
+ if (!existingPoint) {
+ (event as VehicleEventSchema | RoboticArmEventSchema | MachineEventSchema | StorageEventSchema).point = point as any;
+ }
}
}
});
@@ -198,17 +213,22 @@ export const useProductStore = create<ProductsStore>()(
const event = product.eventDatas.find(e => 'modelUuid' in e && e.modelUuid === modelUuid);
if (event && 'points' in event) {
const point = (event as ConveyorEventSchema).points.find(p => p.uuid === pointUuid);
- if (point) {
+ if (point && (!point.action || point.action.actionUuid !== action.actionUuid)) {
point.action = action as any;
updatedEvent = JSON.parse(JSON.stringify(event));
}
} else if (event && 'point' in event && (event as any).point.uuid === pointUuid) {
if ('action' in (event as any).point) {
- (event as any).point.action = action;
- updatedEvent = JSON.parse(JSON.stringify(event));
+ if (!(event as any).point.action || (event as any).point.action.actionUuid !== action.actionUuid) {
+ (event as any).point.action = action;
+ updatedEvent = JSON.parse(JSON.stringify(event));
+ }
} else if ('actions' in (event as any).point) {
- (event as any).point.actions.push(action);
- updatedEvent = JSON.parse(JSON.stringify(event));
+ const existingAction = (event as any).point.actions.find((a: any) => a.actionUuid === action.actionUuid);
+ if (!existingAction) {
+ (event as any).point.actions.push(action);
+ updatedEvent = JSON.parse(JSON.stringify(event));
+ }
}
}
}
@@ -216,10 +236,11 @@ export const useProductStore = create<ProductsStore>()(
return updatedEvent;
},
- removeAction: (actionUuid: string) => {
+ removeAction: (productId, actionUuid) => {
let updatedEvent: EventsSchema | undefined;
set((state) => {
- for (const product of state.products) {
+ const product = state.products.find(p => p.productId === productId);
+ if (product) {
for (const event of product.eventDatas) {
if ('points' in event) {
// Handle ConveyorEventSchema
@@ -248,10 +269,11 @@ export const useProductStore = create<ProductsStore>()(
return updatedEvent;
},
- updateAction: (actionUuid, updates) => {
+ updateAction: (productId, actionUuid, updates) => {
let updatedEvent: EventsSchema | undefined;
set((state) => {
- for (const product of state.products) {
+ const product = state.products.find(p => p.productId === productId);
+ if (product) {
for (const event of product.eventDatas) {
if ('points' in event) {
for (const point of (event as ConveyorEventSchema).points) {
@@ -283,30 +305,40 @@ export const useProductStore = create<ProductsStore>()(
},
// Trigger-level actions
- addTrigger: (actionUuid, trigger) => {
+ addTrigger: (productId, actionUuid, trigger) => {
let updatedEvent: EventsSchema | undefined;
set((state) => {
- for (const product of state.products) {
+ const product = state.products.find(p => p.productId === productId);
+ if (product) {
for (const event of product.eventDatas) {
if ('points' in event) {
for (const point of (event as ConveyorEventSchema).points) {
if (point.action && point.action.actionUuid === actionUuid) {
- point.action.triggers.push(trigger);
- updatedEvent = JSON.parse(JSON.stringify(event));
+ const existingTrigger = point.action.triggers.find(t => t.triggerUuid === trigger.triggerUuid);
+ if (!existingTrigger) {
+ point.action.triggers.push(trigger);
+ updatedEvent = JSON.parse(JSON.stringify(event));
+ }
return;
}
}
} else if ('point' in event) {
const point = (event as any).point;
if ('action' in point && point.action.actionUuid === actionUuid) {
- point.action.triggers.push(trigger);
- updatedEvent = JSON.parse(JSON.stringify(event));
+ const existingTrigger = point.action.triggers.find((t: any) => t.triggerUuid === trigger.triggerUuid);
+ if (!existingTrigger) {
+ point.action.triggers.push(trigger);
+ updatedEvent = JSON.parse(JSON.stringify(event));
+ }
return;
} else if ('actions' in point) {
const action = point.actions.find((a: any) => a.actionUuid === actionUuid);
if (action) {
- action.triggers.push(trigger);
- updatedEvent = JSON.parse(JSON.stringify(event));
+ const existingTrigger = action.triggers.find((t: any) => t.triggerUuid === trigger.triggerUuid);
+ if (!existingTrigger) {
+ action.triggers.push(trigger);
+ updatedEvent = JSON.parse(JSON.stringify(event));
+ }
return;
}
}
@@ -317,28 +349,38 @@ export const useProductStore = create<ProductsStore>()(
return updatedEvent;
},
- removeTrigger: (triggerUuid) => {
+ removeTrigger: (productId, triggerUuid) => {
let updatedEvent: EventsSchema | undefined;
set((state) => {
- for (const product of state.products) {
+ const product = state.products.find(p => p.productId === productId);
+ if (product) {
for (const event of product.eventDatas) {
if ('points' in event) {
for (const point of (event as ConveyorEventSchema).points) {
if (point.action && 'triggers' in point.action) {
- point.action.triggers = point.action.triggers.filter(t => t.triggerUuid !== triggerUuid);
- updatedEvent = JSON.parse(JSON.stringify(event));
+ const Trigger = point.action.triggers.find(t => t.triggerUuid === triggerUuid);
+ if (Trigger) {
+ point.action.triggers = point.action.triggers.filter(t => t.triggerUuid !== triggerUuid);
+ updatedEvent = JSON.parse(JSON.stringify(event));
+ }
}
}
} else if ('point' in event) {
const point = (event as any).point;
if ('action' in point && 'triggers' in point.action) {
- point.action.triggers = point.action.triggers.filter((t: any) => t.triggerUuid !== triggerUuid);
- updatedEvent = JSON.parse(JSON.stringify(event));
+ const Trigger = point.action.triggers.find((t: any) => t.triggerUuid === triggerUuid);
+ if (Trigger) {
+ point.action.triggers = point.action.triggers.filter((t: any) => t.triggerUuid !== triggerUuid);
+ updatedEvent = JSON.parse(JSON.stringify(event));
+ }
} else if ('actions' in point) {
for (const action of point.actions) {
if ('triggers' in action) {
- action.triggers = action.triggers.filter((t: any) => t.triggerUuid !== triggerUuid);
- updatedEvent = JSON.parse(JSON.stringify(event));
+ const Trigger = action.triggers.find((t: any) => t.triggerUuid === triggerUuid);
+ if (Trigger) {
+ action.triggers = action.triggers.filter((t: any) => t.triggerUuid !== triggerUuid);
+ updatedEvent = JSON.parse(JSON.stringify(event));
+ }
}
}
}
@@ -349,9 +391,10 @@ export const useProductStore = create<ProductsStore>()(
return updatedEvent;
},
- updateTrigger: (triggerUuid, updates) => {
+ updateTrigger: (productId, triggerUuid, updates) => {
set((state) => {
- for (const product of state.products) {
+ const product = state.products.find(p => p.productId === productId);
+ if (product) {
for (const event of product.eventDatas) {
if ('points' in event) {
for (const point of (event as ConveyorEventSchema).points) {
@@ -398,10 +441,11 @@ export const useProductStore = create<ProductsStore>()(
});
},
- renameAction: (actionUuid, newName) => {
+ renameAction: (productId, actionUuid, newName) => {
let updatedEvent: EventsSchema | undefined;
set((state) => {
- for (const product of state.products) {
+ const product = state.products.find(p => p.productId === productId);
+ if (product) {
for (const event of product.eventDatas) {
if ('points' in event) {
for (const point of (event as ConveyorEventSchema).points) {
@@ -432,9 +476,10 @@ export const useProductStore = create<ProductsStore>()(
return updatedEvent;
},
- renameTrigger: (triggerUuid, newName) => {
+ renameTrigger: (productId, triggerUuid, newName) => {
set((state) => {
- for (const product of state.products) {
+ const product = state.products.find(p => p.productId === productId);
+ if (product) {
for (const event of product.eventDatas) {
if ('points' in event) {
for (const point of (event as ConveyorEventSchema).points) {
diff --git a/app/src/store/simulation/useStorageUnitStore.ts b/app/src/store/simulation/useStorageUnitStore.ts
index d729708..aec2f12 100644
--- a/app/src/store/simulation/useStorageUnitStore.ts
+++ b/app/src/store/simulation/useStorageUnitStore.ts
@@ -4,26 +4,22 @@ import { immer } from 'zustand/middleware/immer';
interface StorageUnitStore {
storageUnits: StorageUnitStatus[];
- // Actions
addStorageUnit: (productId: string, storageUnit: StorageEventSchema) => void;
removeStorageUnit: (modelUuid: string) => void;
updateStorageUnit: (
modelUuid: string,
updates: Partial<Omit<StorageUnitStatus, 'modelUuid' | 'productId'>>
) => void;
+ clearStorageUnits: () => void;
- // Status updates
setStorageUnitActive: (modelUuid: string, isActive: boolean) => void;
setStorageUnitState: (modelUuid: string, newState: StorageUnitStatus['state']) => void;
- // Load updates
updateStorageUnitLoad: (modelUuid: string, incrementBy: number) => void;
- // Time tracking
incrementActiveTime: (modelUuid: string, incrementBy: number) => void;
incrementIdleTime: (modelUuid: string, incrementBy: number) => void;
- // Helpers
getStorageUnitById: (modelUuid: string) => StorageUnitStatus | undefined;
getStorageUnitsByProduct: (productId: string) => StorageUnitStatus[];
getStorageUnitsBystate: (state: string) => StorageUnitStatus[];
@@ -37,18 +33,20 @@ export const useStorageUnitStore = create<StorageUnitStore>()(
immer((set, get) => ({
storageUnits: [],
- // Actions
addStorageUnit: (productId, storageUnit) => {
set((state) => {
- state.storageUnits.push({
- ...storageUnit,
- productId,
- isActive: false,
- idleTime: 0,
- activeTime: 0,
- currentLoad: 0,
- state: 'idle',
- });
+ const exists = state.storageUnits.some(s => s.modelUuid === storageUnit.modelUuid);
+ if (!exists) {
+ state.storageUnits.push({
+ ...storageUnit,
+ productId,
+ isActive: false,
+ idleTime: 0,
+ activeTime: 0,
+ currentLoad: 0,
+ state: 'idle',
+ });
+ }
});
},
@@ -67,7 +65,12 @@ export const useStorageUnitStore = create<StorageUnitStore>()(
});
},
- // Status updates
+ clearStorageUnits: () => {
+ set(() => ({
+ storageUnits: [],
+ }));
+ },
+
setStorageUnitActive: (modelUuid, isActive) => {
set((state) => {
const unit = state.storageUnits.find(s => s.modelUuid === modelUuid);
@@ -86,7 +89,6 @@ export const useStorageUnitStore = create<StorageUnitStore>()(
});
},
- // Load updates
updateStorageUnitLoad: (modelUuid, incrementBy) => {
set((state) => {
const unit = state.storageUnits.find(s => s.modelUuid === modelUuid);
@@ -96,7 +98,6 @@ export const useStorageUnitStore = create<StorageUnitStore>()(
});
},
- // Time tracking
incrementActiveTime: (modelUuid, incrementBy) => {
set((state) => {
const unit = state.storageUnits.find(s => s.modelUuid === modelUuid);
@@ -115,7 +116,6 @@ export const useStorageUnitStore = create<StorageUnitStore>()(
});
},
- // Helpers
getStorageUnitById: (modelUuid) => {
return get().storageUnits.find(s => s.modelUuid === modelUuid);
},
diff --git a/app/src/store/simulation/useVehicleStore.ts b/app/src/store/simulation/useVehicleStore.ts
index a5ea3be..ecef809 100644
--- a/app/src/store/simulation/useVehicleStore.ts
+++ b/app/src/store/simulation/useVehicleStore.ts
@@ -20,6 +20,7 @@ interface VehiclesStore {
modelUuid: string,
updates: Partial<Omit<VehicleStatus, 'modelUuid' | 'productId'>>
) => void;
+ clearvehicles: () => void;
setVehicleActive: (modelUuid: string, isActive: boolean) => void;
updateSteeringAngle: (modelUuid: string, steeringAngle: number) => void;
@@ -41,15 +42,18 @@ export const useVehicleStore = create<VehiclesStore>()(
addVehicle: (productId, event) => {
set((state) => {
- state.vehicles.push({
- ...event,
- productId,
- isActive: false,
- idleTime: 0,
- activeTime: 0,
- currentLoad: 0,
- distanceTraveled: 0,
- });
+ const exists = state.vehicles.some(v => v.modelUuid === event.modelUuid);
+ if (!exists) {
+ state.vehicles.push({
+ ...event,
+ productId,
+ isActive: false,
+ idleTime: 0,
+ activeTime: 0,
+ currentLoad: 0,
+ distanceTraveled: 0,
+ });
+ }
});
},
@@ -68,6 +72,12 @@ export const useVehicleStore = create<VehiclesStore>()(
});
},
+ clearvehicles: () => {
+ set((state) => {
+ state.vehicles = [];
+ });
+ },
+
setVehicleActive: (modelUuid, isActive) => {
set((state) => {
const vehicle = state.vehicles.find(v => v.modelUuid === modelUuid);
diff --git a/app/src/types/simulationTypes.d.ts b/app/src/types/simulationTypes.d.ts
index 346e408..c7ccd8b 100644
--- a/app/src/types/simulationTypes.d.ts
+++ b/app/src/types/simulationTypes.d.ts
@@ -88,6 +88,7 @@ interface StoragePointSchema {
actionType: "store";
materials: { materialName: string; materialId: string; }[];
storageCapacity: number;
+ triggers: TriggerSchema[];
};
}
From a3b48d12c14fea7da380726aaafdc3c6eb3086dc Mon Sep 17 00:00:00 2001
From: Jerald-Golden-B <jerald@hexrfactory.com>
Date: Fri, 2 May 2025 13:40:00 +0530
Subject: [PATCH 14/17] Refactor TriggerConnector to improve event handling:
reset firstSelectedPoint on invalid intersections, update event model name,
and ensure proper cleanup of state. Adjust event listener conditions for
better performance.
---
.../triggers/connector/triggerConnector.tsx | 45 ++++++++++++++-----
1 file changed, 35 insertions(+), 10 deletions(-)
diff --git a/app/src/modules/simulation/triggers/connector/triggerConnector.tsx b/app/src/modules/simulation/triggers/connector/triggerConnector.tsx
index 5f83528..a10580f 100644
--- a/app/src/modules/simulation/triggers/connector/triggerConnector.tsx
+++ b/app/src/modules/simulation/triggers/connector/triggerConnector.tsx
@@ -171,10 +171,16 @@ function TriggerConnector() {
(intersect) =>
intersect.object.name === ('Event-Sphere')
);
- if (intersects.length === 0) return;
+ if (intersects.length === 0) {
+ setFirstSelectedPoint(null);
+ return;
+ };
const currentObject = intersects[0].object;
- if (!currentObject || currentObject.name !== 'Event-Sphere') return;
+ if (!currentObject || currentObject.name !== 'Event-Sphere') {
+ setFirstSelectedPoint(null);
+ return;
+ };
const modelUuid = currentObject.userData.modelUuid;
const pointUuid = currentObject.userData.pointUuid;
@@ -189,7 +195,10 @@ function TriggerConnector() {
const event = getEventByModelUuid(selectedProduct.productId, modelUuid);
- if (!point || !event) return;
+ if (!point || !event) {
+ setFirstSelectedPoint(null);
+ return;
+ };
let actionUuid: string | undefined;
if ('action' in point && point.action) {
@@ -254,7 +263,12 @@ function TriggerConnector() {
pointUuid
);
- if (!point) return;
+ const event = getEventByModelUuid(selectedProduct.productId, modelUuid);
+
+ if (!point || !event) {
+ setFirstSelectedPoint(null);
+ return;
+ };
let actionUuid: string | undefined;
if ('action' in point && point.action) {
@@ -270,12 +284,12 @@ function TriggerConnector() {
delay: 0,
triggeredAsset: {
triggeredModel: {
- modelName: currentObject.parent?.parent?.name || 'Unknown',
+ modelName: event.modelName || 'Unknown',
modelUuid: modelUuid
},
triggeredPoint: {
- pointName: currentObject.name,
- pointUuid: pointUuid
+ pointName: 'Point',
+ pointUuid: point.uuid
},
triggeredAction: actionUuid ? {
actionName: getActionByUuid(selectedProduct.productId, actionUuid)?.actionName || 'Action',
@@ -285,13 +299,24 @@ function TriggerConnector() {
};
if (firstSelectedPoint.actionUuid) {
- addTrigger(selectedProduct.productId, firstSelectedPoint.actionUuid, trigger);
+ const event = addTrigger(selectedProduct.productId, firstSelectedPoint.actionUuid, trigger);
+
+ if (event) {
+ updateBackend(
+ selectedProduct.productName,
+ selectedProduct.productId,
+ organization,
+ event
+ );
+ }
}
setFirstSelectedPoint(null);
+ } else if (firstSelectedPoint) {
+ setFirstSelectedPoint(null);
}
};
- if (subModule === 'simulations') {
+ if (subModule === 'simulations' && !deleteTool) {
canvasElement.addEventListener("mousedown", onMouseDown);
canvasElement.addEventListener("mouseup", onMouseUp);
canvasElement.addEventListener("mousemove", onMouseMove);
@@ -305,7 +330,7 @@ function TriggerConnector() {
canvasElement.removeEventListener('contextmenu', handleRightClick);
};
- }, [gl, subModule, selectedProduct, firstSelectedPoint]);
+ }, [gl, subModule, selectedProduct, firstSelectedPoint, deleteTool]);
useFrame(() => {
From fb9e507f4fe28f0426d2cc24d7b62b23ee1885ed Mon Sep 17 00:00:00 2001
From: Jerald-Golden-B <jerald@hexrfactory.com>
Date: Fri, 2 May 2025 14:44:29 +0530
Subject: [PATCH 15/17] Enhance TriggerConnector and VehicleUI components:
improve event handling by resetting firstSelectedPoint on invalid
intersections, refine intersection checks, and streamline state updates in
VehicleUI. Integrate backend updates for vehicle actions and ensure
consistent rotation handling.
---
.../triggers/connector/triggerConnector.tsx | 31 +++--
.../simulation/ui/vehicle/vehicleUI.tsx | 117 ++++++++----------
2 files changed, 75 insertions(+), 73 deletions(-)
diff --git a/app/src/modules/simulation/triggers/connector/triggerConnector.tsx b/app/src/modules/simulation/triggers/connector/triggerConnector.tsx
index a10580f..dcb46f4 100644
--- a/app/src/modules/simulation/triggers/connector/triggerConnector.tsx
+++ b/app/src/modules/simulation/triggers/connector/triggerConnector.tsx
@@ -185,6 +185,11 @@ function TriggerConnector() {
const modelUuid = currentObject.userData.modelUuid;
const pointUuid = currentObject.userData.pointUuid;
+ if (firstSelectedPoint && firstSelectedPoint.pointUuid === pointUuid) {
+ setFirstSelectedPoint(null);
+ return;
+ }
+
if (selectedProduct && getIsEventInProduct(selectedProduct.productId, modelUuid)) {
const point = getPointByUuid(
@@ -341,8 +346,9 @@ function TriggerConnector() {
!intersect.object.name.includes("Roof") &&
!intersect.object.name.includes("agv-collider") &&
!intersect.object.name.includes("MeasurementReference") &&
- !intersect.object.userData.isPathObject &&
- !(intersect.object.type === "GridHelper")
+ !intersect.object.parent?.name.includes("Zone") &&
+ !(intersect.object.type === "GridHelper") &&
+ !(intersect.object.type === "Line2")
);
let point: THREE.Vector3 | null = null;
@@ -355,10 +361,19 @@ function TriggerConnector() {
}
const sphereIntersects = raycaster.intersectObjects(scene.children, true).filter((intersect) => intersect.object.name === ('Event-Sphere'));
+
+ if (sphereIntersects.length > 0 && sphereIntersects[0].object.uuid === firstSelectedPoint.pointUuid) {
+ setHelperLineColor('red');
+ setCurrentLine(null);
+ return;
+ }
+
const startPoint = getWorldPositionFromScene(firstSelectedPoint.pointUuid);
if (point && startPoint) {
-
+ if (sphereIntersects.length > 0) {
+ point = sphereIntersects[0].object.getWorldPosition(new THREE.Vector3());
+ }
const distance = startPoint.distanceTo(point);
const heightFactor = Math.max(0.5, distance * 0.2);
const midPoint = new THREE.Vector3(
@@ -367,17 +382,15 @@ function TriggerConnector() {
(startPoint.z + point.z) / 2
);
+ const endPoint = point;
+
setCurrentLine({
start: startPoint,
mid: midPoint,
- end: point,
+ end: endPoint,
});
- if (sphereIntersects.length > 0) {
- setHelperLineColor("#6cf542");
- } else {
- setHelperLineColor("red");
- }
+ setHelperLineColor(sphereIntersects.length > 0 ? "#6cf542" : "red");
} else {
setCurrentLine(null);
}
diff --git a/app/src/modules/simulation/ui/vehicle/vehicleUI.tsx b/app/src/modules/simulation/ui/vehicle/vehicleUI.tsx
index 43ba833..2a124cd 100644
--- a/app/src/modules/simulation/ui/vehicle/vehicleUI.tsx
+++ b/app/src/modules/simulation/ui/vehicle/vehicleUI.tsx
@@ -1,12 +1,16 @@
import React, { useEffect, useRef, useState } from 'react';
+import * as Types from "../../../../types/world/worldTypes";
import startPoint from "../../../../assets/gltf-glb/arrow_green.glb";
-import startEnd from "../../../../assets/gltf-glb/arrow_red.glb";
import * as THREE from "three";
+import startEnd from "../../../../assets/gltf-glb/arrow_red.glb";
import { useGLTF } from '@react-three/drei';
import { useFrame, useThree } from '@react-three/fiber';
import { useSelectedEventSphere, useIsDragging, useIsRotating } from '../../../../store/simulation/useSimulationStore';
import { useVehicleStore } from '../../../../store/simulation/useVehicleStore';
-import * as Types from "../../../../types/world/worldTypes";
+import { useProductStore } from '../../../../store/simulation/useProductStore';
+import { useSelectedProduct } from '../../../../store/simulation/useSimulationStore';
+import { upsertProductOrEventApi } from '../../../../services/simulation/UpsertProductOrEventApi';
+
const VehicleUI = () => {
const { scene: startScene } = useGLTF(startPoint) as any;
const { scene: endScene } = useGLTF(startEnd) as any;
@@ -14,7 +18,9 @@ const VehicleUI = () => {
const endMarker = useRef<THREE.Group>(null);
const prevMousePos = useRef({ x: 0, y: 0 });
const { selectedEventSphere } = useSelectedEventSphere();
- const { vehicles, updateVehicle } = useVehicleStore();
+ const { selectedProduct } = useSelectedProduct();
+ const { getVehicleById } = useVehicleStore();
+ const { updateEvent } = useProductStore();
const [startPosition, setStartPosition] = useState<[number, number, number]>([0, 0, 0]);
const [endPosition, setEndPosition] = useState<[number, number, number]>([0, 0, 0]);
const [startRotation, setStartRotation] = useState<[number, number, number]>([0, 0, 0]);
@@ -26,55 +32,46 @@ const VehicleUI = () => {
const state: Types.ThreeState = useThree();
const controls: any = state.controls;
+ const email = localStorage.getItem('email')
+ const organization = (email!.split("@")[1]).split(".")[0];
+
+ const updateBackend = (
+ productName: string,
+ productId: string,
+ organization: string,
+ eventData: EventsSchema
+ ) => {
+ upsertProductOrEventApi({
+ productName: productName,
+ productId: productId,
+ organization: organization,
+ eventDatas: eventData
+ })
+ }
+
useEffect(() => {
if (!selectedEventSphere) return;
- const selectedVehicle = vehicles.find(
- (vehicle: any) => vehicle.modelUuid === selectedEventSphere.userData.modelUuid
- );
+ const selectedVehicle = getVehicleById(selectedEventSphere.userData.modelUuid);
if (selectedVehicle?.point?.action) {
const { pickUpPoint, unLoadPoint } = selectedVehicle.point.action;
if (pickUpPoint) {
- const pickupPosition = new THREE.Vector3(
- pickUpPoint.position.x,
- pickUpPoint.position.y,
- pickUpPoint.position.z
- );
- const pickupRotation = new THREE.Vector3(
- pickUpPoint.rotation.x,
- pickUpPoint.rotation.y,
- pickUpPoint.rotation.z
- );
- pickupPosition.y = 0;
- setStartPosition([pickupPosition.x, 0, pickupPosition.z]);
- setStartRotation([pickupRotation.x, pickupRotation.y, pickupRotation.z]);
+ setStartPosition([pickUpPoint.position.x, 0, pickUpPoint.position.z]);
+ setStartRotation([pickUpPoint.rotation.x, pickUpPoint.rotation.y, pickUpPoint.rotation.z]);
} else {
const defaultLocal = new THREE.Vector3(0, 0, 1.5);
const defaultWorld = selectedEventSphere.localToWorld(defaultLocal);
- defaultWorld.y = 0;
setStartPosition([defaultWorld.x, 0, defaultWorld.z]);
setStartRotation([0, 0, 0]);
}
if (unLoadPoint) {
- const unLoadPosition = new THREE.Vector3(
- unLoadPoint.position.x,
- unLoadPoint.position.y,
- unLoadPoint.position.z
- );
- const unLoadRotation = new THREE.Vector3(
- unLoadPoint.rotation.x,
- unLoadPoint.rotation.y,
- unLoadPoint.position.z
- );
- unLoadPosition.y = 0; // Force y to 0
- setEndPosition([unLoadPosition.x, 0, unLoadPosition.z]);
- setEndRotation([unLoadRotation.x, unLoadRotation.y, unLoadRotation.z]);
+ setEndPosition([unLoadPoint.position.x, 0, unLoadPoint.position.z]);
+ setEndRotation([unLoadPoint.rotation.x, unLoadPoint.rotation.y, unLoadPoint.rotation.z]);
} else {
const defaultLocal = new THREE.Vector3(0, 0, -1.5);
const defaultWorld = selectedEventSphere.localToWorld(defaultLocal);
- defaultWorld.y = 0; // Force y to 0
setEndPosition([defaultWorld.x, 0, defaultWorld.z]);
setEndRotation([0, 0, 0]);
}
@@ -87,7 +84,6 @@ const VehicleUI = () => {
const intersects = raycaster.ray.intersectPlane(plane.current, intersectPoint);
if (intersects) {
- intersectPoint.y = 0; // Force y to 0
if (isDragging === "start") {
setStartPosition([intersectPoint.x, 0, intersectPoint.z]);
}
@@ -108,12 +104,12 @@ const VehicleUI = () => {
if (marker) {
const rotationSpeed = 10;
- marker.rotation.y += deltaX * rotationSpeed;
if (isRotating === 'start') {
- setStartRotation([marker.rotation.x, marker.rotation.y, marker.rotation.z])
+ const y = startRotation[1] + deltaX * rotationSpeed;
+ setStartRotation([0, y, 0]);
} else {
-
- setEndRotation([marker.rotation.x, marker.rotation.y, marker.rotation.z])
+ const y = endRotation[1] + deltaX * rotationSpeed;
+ setEndRotation([0, y, 0]);
}
}
});
@@ -142,43 +138,34 @@ const VehicleUI = () => {
setIsRotating(null);
if (selectedEventSphere?.userData.modelUuid) {
- const updatedVehicle = vehicles.find(
- (vehicle) => vehicle.modelUuid === selectedEventSphere.userData.modelUuid
- );
+ const updatedVehicle = getVehicleById(selectedEventSphere.userData.modelUuid);
if (updatedVehicle) {
- updateVehicle(selectedEventSphere.userData.modelUuid, {
+ const event = updateEvent(selectedProduct.productId, selectedEventSphere.userData.modelUuid, {
point: {
...updatedVehicle.point,
action: {
...updatedVehicle.point?.action,
pickUpPoint: {
- position: {
- x: startPosition[0],
- y: startPosition[1],
- z: startPosition[2],
- },
- rotation: {
- x: startRotation[0],
- y: startRotation[1],
- z: startRotation[2],
- },
+ position: { x: startPosition[0], y: startPosition[1], z: startPosition[2], },
+ rotation: { x: 0, y: startRotation[1], z: 0, },
},
unLoadPoint: {
- position: {
- x: endPosition[0],
- y: endPosition[1],
- z: endPosition[2],
- },
- rotation: {
- x: endRotation[0],
- y: endRotation[1],
- z: endRotation[2],
- },
+ position: { x: endPosition[0], y: endPosition[1], z: endPosition[2], },
+ rotation: { x: 0, y: endRotation[1], z: 0, },
},
},
},
- });
+ })
+
+ if (event) {
+ updateBackend(
+ selectedProduct.productName,
+ selectedProduct.productId,
+ organization,
+ event
+ );
+ }
}
}
};
@@ -208,6 +195,7 @@ const VehicleUI = () => {
object={startScene}
ref={startMarker}
position={startPosition}
+ rotation={startRotation}
onPointerDown={(e: any) => {
e.stopPropagation();
handlePointerDown(e, "start", "start");
@@ -224,6 +212,7 @@ const VehicleUI = () => {
object={endScene}
ref={endMarker}
position={endPosition}
+ rotation={endRotation}
onPointerDown={(e: any) => {
e.stopPropagation();
handlePointerDown(e, "end", "end");
From 66b3d755006fc0c1e0d571b23a19854527021d81 Mon Sep 17 00:00:00 2001
From: Jerald-Golden-B <jerald@hexrfactory.com>
Date: Fri, 2 May 2025 14:59:19 +0530
Subject: [PATCH 16/17] Refactor VehicleAnimator component: update agvDetail
type to VehicleStatus, ensure objectRotation is defined before use, and
adjust object rotation handling to utilize agvDetail's rotation values.
---
.../vehicle/instances/animator/vehicleAnimator.tsx | 8 ++++----
1 file changed, 4 insertions(+), 4 deletions(-)
diff --git a/app/src/modules/simulation/vehicle/instances/animator/vehicleAnimator.tsx b/app/src/modules/simulation/vehicle/instances/animator/vehicleAnimator.tsx
index 421dea8..9ca7355 100644
--- a/app/src/modules/simulation/vehicle/instances/animator/vehicleAnimator.tsx
+++ b/app/src/modules/simulation/vehicle/instances/animator/vehicleAnimator.tsx
@@ -11,7 +11,7 @@ interface VehicleAnimatorProps {
reset: () => void;
currentPhase: string;
agvUuid: number;
- agvDetail: any;
+ agvDetail: VehicleStatus;
}
function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid, agvDetail, reset }: VehicleAnimatorProps) {
@@ -32,7 +32,7 @@ function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid, agvDetai
let startTime: number;
let fixedInterval: number;
let coveredDistance = progressRef.current;
- let objectRotation = (agvDetail.point?.action?.pickUpPoint?.rotation || { x: 0, y: 0, z: 0 }) as { x: number; y: number; z: number };
+ let objectRotation = (agvDetail.point?.action?.pickUpPoint?.rotation || { x: 0, y: 0, z: 0 }) as { x: number; y: number; z: number } | undefined;
useEffect(() => {
@@ -69,7 +69,7 @@ function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid, agvDetai
const object = scene.getObjectByProperty('uuid', agvUuid);
if (object) {
object.position.set(agvDetail.position[0], agvDetail.position[1], agvDetail.position[2]);
- object.rotation.set(objectRotation.x, objectRotation.y, objectRotation.z);
+ object.rotation.set(agvDetail.rotation[0], agvDetail.rotation[1], agvDetail.rotation[2]);
}
}
}, [isReset, isPlaying])
@@ -131,7 +131,7 @@ function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid, agvDetai
}
if (progressRef.current >= totalDistance) {
- if (restRotation) {
+ if (restRotation && objectRotation) {
const targetQuaternion = new THREE.Quaternion().setFromEuler(new THREE.Euler(objectRotation.x, objectRotation.y, objectRotation.z));
object.quaternion.slerp(targetQuaternion, delta * 2);
const angleDiff = object.quaternion.angleTo(targetQuaternion);
From 439f91788470c26032912d37738a60eb3969c242 Mon Sep 17 00:00:00 2001
From: Jerald-Golden-B <jerald@hexrfactory.com>
Date: Fri, 2 May 2025 17:34:55 +0530
Subject: [PATCH 17/17] Refactor Trigger component: pass selectedPointData and
type props, enhance state management for triggers, and streamline rendering
logic for better performance.
---
.../mechanics/conveyorMechanics.tsx | 2 +-
.../eventProperties/trigger/Trigger.tsx | 237 +++++++++---------
2 files changed, 117 insertions(+), 122 deletions(-)
diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/conveyorMechanics.tsx b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/conveyorMechanics.tsx
index ded65af..a6a1fa9 100644
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/conveyorMechanics.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/conveyorMechanics.tsx
@@ -271,7 +271,7 @@ function ConveyorMechanics() {
</div>
</div>
<div className="tirgger">
- <Trigger />
+ <Trigger selectedPointData={selectedPointData as any} type= {'Conveyor'}/>
</div>
</section>
</>
diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/trigger/Trigger.tsx b/app/src/components/layout/sidebarRight/properties/eventProperties/trigger/Trigger.tsx
index 1434446..86e4e7b 100644
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/trigger/Trigger.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/trigger/Trigger.tsx
@@ -1,137 +1,132 @@
-import React, { useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
import {
- AddIcon,
- RemoveIcon,
- ResizeHeightIcon,
+ AddIcon,
+ RemoveIcon,
+ ResizeHeightIcon,
} from "../../../../../icons/ExportCommonIcons";
import LabledDropdown from "../../../../../ui/inputs/LabledDropdown";
import RenameInput from "../../../../../ui/inputs/RenameInput";
import { handleResize } from "../../../../../../functions/handleResizePannel";
+import { useProductStore } from "../../../../../../store/simulation/useProductStore";
+import { useSelectedProduct } from "../../../../../../store/simulation/useSimulationStore";
-const Trigger: React.FC = () => {
- // State to hold the list of triggers
- const [triggers, setTriggers] = useState<string[]>(["Trigger 1"]);
- const [selectedTrigger, setSelectedTrigger] = useState<string>("Trigger 1");
- const [activeOption, setActiveOption] = useState("onComplete");
- const triggersContainerRef = useRef<HTMLDivElement>(null);
+type TriggerProps = {
+ selectedPointData?: PointsScheme | undefined;
+ type?: 'Conveyor' | 'Vehicle' | 'RoboticArm' | 'Machine' | 'StorageUnit';
+};
- // States for dropdowns
- const [triggeredModel, setTriggeredModel] = useState<string[]>([]);
- const [triggeredPoint, setTriggeredPoint] = useState<string[]>([]);
- const [triggeredAction, setTriggeredAction] = useState<string[]>([]);
+const Trigger = ({ selectedPointData, type }: TriggerProps) => {
+ const [currentAction, setCurrentAction] = useState<string | undefined>();
+ const { selectedProduct } = useSelectedProduct();
+ const { getActionByUuid } = useProductStore();
+ const [triggers, setTriggers] = useState<TriggerSchema[]>([]);
+ const [selectedTrigger, setSelectedTrigger] = useState<TriggerSchema | undefined>();
+ const [activeOption, setActiveOption] = useState("onComplete");
+ const triggersContainerRef = useRef<HTMLDivElement>(null);
- // Function to handle adding a new trigger
- const addTrigger = (): void => {
- const newTrigger = `Trigger ${triggers.length + 1}`;
- setTriggers([...triggers, newTrigger]); // Add new trigger to the state
+ useEffect(() => {
+ if (!selectedPointData) return;
+ if (type === 'Conveyor' || type === 'Vehicle' || type === 'Machine' || type === 'StorageUnit') {
+ setCurrentAction((selectedPointData as ConveyorPointSchema).action.actionUuid);
+ }
+ }, [selectedPointData]);
- // Initialize the states for the new trigger
- setTriggeredModel([...triggeredModel, ""]);
- setTriggeredPoint([...triggeredPoint, ""]);
- setTriggeredAction([...triggeredAction, ""]);
- };
+ useEffect(() => {
+ if (!currentAction || !selectedProduct) return;
+ const action = getActionByUuid(selectedProduct.productId, currentAction);
+ setTriggers(action?.triggers || []);
+ setSelectedTrigger(action?.triggers[0] || undefined);
+ }, [currentAction, selectedProduct]);
- // Function to handle removing a trigger
- const removeTrigger = (index: number): void => {
- setTriggers(triggers.filter((_, i) => i !== index)); // Remove trigger by index
- setTriggeredModel(triggeredModel.filter((_, i) => i !== index));
- setTriggeredPoint(triggeredPoint.filter((_, i) => i !== index));
- setTriggeredAction(triggeredAction.filter((_, i) => i !== index));
- };
+ const addTrigger = (): void => {
+ };
- return (
- <div className="trigger-wrapper">
- <div className="header">
- <div className="title">Trigger</div>
- <button
- className="add-button"
- onClick={addTrigger}
- style={{ cursor: "pointer" }}
- >
- <AddIcon /> Add
- </button>
- </div>
- <div className="trigger-list">
- <div
- className="lists-main-container"
- ref={triggersContainerRef}
- style={{ height: "120px" }}
- >
- <div className="list-container">
- {triggers.map((trigger: any, index: number) => (
- <div
- key={index}
- className={`list-item ${
- selectedTrigger === trigger ? "active" : ""
- }`}
- onClick={() => setSelectedTrigger(trigger)}
- >
- <button className="value" onClick={() => {}}>
- <RenameInput value={trigger} onRename={() => {}} />
+ const removeTrigger = (triggerUuid: string): void => {
+ };
+
+ const triggeredModel = selectedTrigger?.triggeredAsset?.triggeredModel || { modelName: "Select Model", modelUuid: "" };
+ const triggeredPoint = selectedTrigger?.triggeredAsset?.triggeredPoint || { pointName: "Select Point", pointUuid: "" };
+ const triggeredAction = selectedTrigger?.triggeredAsset?.triggeredAction || { actionName: "Select Action", actionUuid: "" };
+
+ return (
+ <div className="trigger-wrapper">
+ <div className="header">
+ <div className="title">Trigger</div>
+ <button
+ className="add-button"
+ onClick={addTrigger}
+ style={{ cursor: "pointer" }}
+ >
+ <AddIcon /> Add
</button>
- {triggers.length > 1 && (
- <button
- className="remove-button"
- onClick={() => removeTrigger(index)}
- >
- <RemoveIcon />
- </button>
- )}
- </div>
- ))}
- </div>
- <button
- className="resize-icon"
- id="action-resize"
- onMouseDown={(e: any) => handleResize(e, triggersContainerRef)}
- >
- <ResizeHeightIcon />
- </button>
+ </div>
+ <div className="trigger-list">
+ <div
+ className="lists-main-container"
+ ref={triggersContainerRef}
+ style={{ height: "120px" }}
+ >
+ <div className="list-container">
+ {triggers.map((trigger) => (
+ <div
+ key={trigger.triggerUuid}
+ className={`list-item ${selectedTrigger?.triggerUuid === trigger.triggerUuid ? "active" : ""}`}
+ onClick={() => setSelectedTrigger(trigger)}
+ >
+ <button className="value" onClick={() => { }}>
+ <RenameInput value={trigger.triggerName} onRename={() => { }} />
+ </button>
+ {triggers.length > 1 && (
+ <button
+ className="remove-button"
+ onClick={() => removeTrigger(trigger.triggerUuid)}
+ >
+ <RemoveIcon />
+ </button>
+ )}
+ </div>
+ ))}
+ </div>
+ <button
+ className="resize-icon"
+ id="action-resize"
+ onMouseDown={(e: any) => handleResize(e, triggersContainerRef)}
+ >
+ <ResizeHeightIcon />
+ </button>
+ </div>
+ <div className="trigger-item">
+ <div className="trigger-name">{selectedTrigger?.triggerName}</div>
+ <LabledDropdown
+ label="Trigger Type"
+ defaultOption={activeOption}
+ options={["onComplete", "onStart", "onStop", "delay"]}
+ onSelect={(option) => setActiveOption(option)}
+ />
+ <div className="trigger-options">
+ <LabledDropdown
+ label="Triggered Object"
+ defaultOption={triggeredModel.modelName}
+ options={[]}
+ onSelect={(option) => { }}
+ />
+ <LabledDropdown
+ label="Triggered Point"
+ defaultOption={triggeredPoint.pointName}
+ options={[]}
+ onSelect={(option) => { }}
+ />
+ <LabledDropdown
+ label="Triggered Action"
+ defaultOption={triggeredAction.actionName}
+ options={[]}
+ onSelect={(option) => { }}
+ />
+ </div>
+ </div>
+ </div>
</div>
- <div className="trigger-item">
- <div className="trigger-name">{selectedTrigger}</div>
- <LabledDropdown
- label="Trigger on"
- defaultOption={activeOption}
- options={["onComplete", "onStart", "onStop", "delay"]}
- onSelect={(option) => setActiveOption(option)}
- />
- <div className="trigger-options">
- <LabledDropdown
- label="Triggered Object"
- defaultOption={triggeredModel[0] || "Select Model"}
- options={["Model 1", "Model 2", "Model 3"]}
- onSelect={(option) => {
- const newModel = [...triggeredModel];
- newModel[0] = option;
- setTriggeredModel(newModel);
- }}
- />
- <LabledDropdown
- label="Triggered Point"
- defaultOption={triggeredPoint[0] || "Select Point"}
- options={["Point 1", "Point 2", "Point 3"]}
- onSelect={(option) => {
- const newPoint = [...triggeredPoint];
- newPoint[0] = option;
- setTriggeredPoint(newPoint);
- }}
- />
- <LabledDropdown
- label="Triggered Action"
- defaultOption={triggeredAction[0] || "Select Action"}
- options={["Action 1", "Action 2", "Action 3"]}
- onSelect={(option) => {
- const newAction = [...triggeredAction];
- newAction[0] = option;
- setTriggeredAction(newAction);
- }}
- />
- </div>
- </div>
- </div>
- </div>
- );
+ );
};
export default Trigger;