From fd65941ba206c6e0f13e9eed95536e48a394b52e Mon Sep 17 00:00:00 2001 From: Vishnu Date: Thu, 20 Mar 2025 16:52:00 +0530 Subject: [PATCH] uid generater --- .../layout/sidebarRight/SideBarRight.tsx | 18 ++ .../mechanics/MachineMechanics.tsx | 246 +++++++++--------- app/src/components/ui/list/DropDownList.tsx | 7 +- app/src/functions/generateUId.ts | 2 + app/src/store/useModuleStore.ts | 2 +- app/src/styles/abstracts/variables.scss | 2 + app/src/styles/base/base.scss | 4 +- app/src/styles/components/input.scss | 80 +++++- app/src/styles/components/lists.scss | 8 + app/src/styles/components/tools.scss | 150 +++++++++++ app/src/styles/layout/sidebar.scss | 143 +++++++++- 11 files changed, 526 insertions(+), 136 deletions(-) create mode 100644 app/src/functions/generateUId.ts diff --git a/app/src/components/layout/sidebarRight/SideBarRight.tsx b/app/src/components/layout/sidebarRight/SideBarRight.tsx index 9cac07b..6b2ff3f 100644 --- a/app/src/components/layout/sidebarRight/SideBarRight.tsx +++ b/app/src/components/layout/sidebarRight/SideBarRight.tsx @@ -54,12 +54,30 @@ const SideBarRight: React.FC = () => { )} )} +<<<<<<< Updated upstream {toggleUI && (
+======= + {/* mechanics */} + {toggleUI && ( + <> + {/* {activeModule === "simulation" && activeList === "mechanics" && ( */} + {activeModule === "simulation" && ( +
+
+ +
+
+ )} + + {/* realtime visualization */} + {activeModule === "visualization" && } + +>>>>>>> Stashed changes )} ); diff --git a/app/src/components/layout/sidebarRight/mechanics/MachineMechanics.tsx b/app/src/components/layout/sidebarRight/mechanics/MachineMechanics.tsx index a240de8..803c96a 100644 --- a/app/src/components/layout/sidebarRight/mechanics/MachineMechanics.tsx +++ b/app/src/components/layout/sidebarRight/mechanics/MachineMechanics.tsx @@ -1,10 +1,15 @@ -import React, { useState } from "react"; +import React, { useRef, useState } from "react"; import { AddIcon, InfoIcon, RemoveIcon, ResizeHeightIcon, } from "../../../icons/ExportCommonIcons"; +import RenameInput from "../../../ui/inputs/RenameInput"; +import InputWithDropDown from "../../../ui/inputs/InputWithDropDown"; +import LabledDropdown from "../../../ui/inputs/LabledDropdown"; +import RegularDropDown from "../../../ui/inputs/RegularDropDown"; +import { handleResize } from "../../../../functions/handleResizePannel"; const MachineMechanics: React.FC = () => { const [actionList, setActionList] = useState([]); @@ -13,7 +18,9 @@ const MachineMechanics: React.FC = () => { type: "action" | "trigger"; name: string; } | null>(null); - const [editedName, setEditedName] = useState(""); + + const actionsContainerRef = useRef(null); + const triggersContainerRef = useRef(null); const handleAddAction = () => { setActionList([...actionList, `Action ${actionList.length + 1}`]); @@ -30,7 +37,6 @@ const MachineMechanics: React.FC = () => { selectedItem.name === actionList[index] ) { setSelectedItem(null); - setEditedName(""); } }; @@ -41,133 +47,135 @@ const MachineMechanics: React.FC = () => { selectedItem.name === triggerList[index] ) { setSelectedItem(null); - setEditedName(""); } }; const handleSelectItem = (type: "action" | "trigger", name: string) => { setSelectedItem({ type, name }); - setEditedName(name); - }; - - const handleSave = () => { - if (!selectedItem) return; - - if (selectedItem.type === "action") { - setActionList( - actionList.map((action) => - action === selectedItem.name ? editedName : action - ) - ); - } else if (selectedItem.type === "trigger") { - setTriggerList( - triggerList.map((trigger) => - trigger === selectedItem.name ? editedName : trigger - ) - ); - } - - setSelectedItem({ ...selectedItem, name: editedName }); }; return (
-
-
-
Actions
-
- Add -
-
-
-
- {actionList.map((action, index) => ( -
-
handleSelectItem("action", action)}> - {action} -
-
handleRemoveAction(index)} - > - -
-
- ))} -
-
- -
-
+
Selected Object
+
+
Process:
+ {}} + />
-
-
-
Triggers
-
- Add -
-
-
-
- {triggerList.map((trigger, index) => ( -
-
handleSelectItem("trigger", trigger)}> - {trigger} -
-
handleRemoveTrigger(index)} - > - -
-
- ))} -
-
- -
-
-
-
- {selectedItem && ( - <> -
- - setEditedName(e.target.value)} - /> +
+
+
+
Actions
+
+ Add
- {/* Add other Properties Like: - * Object Selection Dropdown - * Buffer Time - * Get Value From Object - * Action - * etc. - */} -
Update
{/* remove this */} - - )} -
-
- - By Selecting Path, you can create Object Triggers. +
+
+
+ {actionList.map((action, index) => ( +
+
handleSelectItem("action", action)} + > + +
+
handleRemoveAction(index)} + > + +
+
+ ))} +
+
handleResize(e, actionsContainerRef)} + > + +
+
+
+
+
+
Triggers
+
+ Add +
+
+
+
+ {triggerList.map((trigger, index) => ( +
+
handleSelectItem("trigger", trigger)} + > + +
+
handleRemoveTrigger(index)} + > + +
+
+ ))} +
+
handleResize(e, triggersContainerRef)} + > + +
+
+
+
+ {selectedItem && ( + <> +
{selectedItem.name}
+ + + + )} +
+
+ + By Selecting Path, you can create Object Triggers. +
); diff --git a/app/src/components/ui/list/DropDownList.tsx b/app/src/components/ui/list/DropDownList.tsx index 093765c..34b9143 100644 --- a/app/src/components/ui/list/DropDownList.tsx +++ b/app/src/components/ui/list/DropDownList.tsx @@ -81,12 +81,7 @@ const DropDownList: React.FC = ({ showAddIcon={false} items={[]} /> - + {/* change this */} )}
diff --git a/app/src/functions/generateUId.ts b/app/src/functions/generateUId.ts new file mode 100644 index 0000000..2cc19d5 --- /dev/null +++ b/app/src/functions/generateUId.ts @@ -0,0 +1,2 @@ +export const generateUniqueId = (): string => + `${Date.now()}-${Math.random().toString(36).slice(2, 11)}`; diff --git a/app/src/store/useModuleStore.ts b/app/src/store/useModuleStore.ts index 5281c0b..8980b7a 100644 --- a/app/src/store/useModuleStore.ts +++ b/app/src/store/useModuleStore.ts @@ -7,7 +7,7 @@ interface ModuleStore { } const useModuleStore = create((set) => ({ - activeModule: 'builder', // Initial state + activeModule: "simulation", // Initial state setActiveModule: (module) => set({ activeModule: module }), // Update state })); diff --git a/app/src/styles/abstracts/variables.scss b/app/src/styles/abstracts/variables.scss index eaab86b..97aae90 100644 --- a/app/src/styles/abstracts/variables.scss +++ b/app/src/styles/abstracts/variables.scss @@ -35,7 +35,9 @@ $highlight-accent-color-dark: #403e6a; // Highlighted accent for dark mode $background-color: #fcfdfd; // Main background color $background-color-dark: #19191d; // Main background color for dark mode $background-color-secondary: #e1e0ff80; // Secondary background color +$background-color-gray: #F3F3F3; // Secondary background color $background-color-secondary-dark: #1f1f2399; // Secondary background color for dark mode +$background-color-gray-dark: #232323; // Secondary background color // Border colors $border-color: #e0dfff; // Default border color diff --git a/app/src/styles/base/base.scss b/app/src/styles/base/base.scss index d742fa5..9ac9a1f 100644 --- a/app/src/styles/base/base.scss +++ b/app/src/styles/base/base.scss @@ -15,6 +15,7 @@ // Background colors --background-color: #{$background-color}; // Main background color --background-color-secondary: #{$background-color-secondary}; // Secondary background color + --background-color-gray: #{$background-color-gray}; // Secondary background color // Border colors --border-color: #{$border-color}; // Border color for light theme @@ -47,6 +48,7 @@ // Background colors --background-color: #{$background-color-dark}; // Main background color --background-color-secondary: #{$background-color-secondary-dark}; // Secondary background color + --background-color-gray: #{$background-color-gray-dark}; // Secondary background color // Border colors --border-color: #{$border-color-dark}; // Border color for dark theme @@ -109,7 +111,7 @@ body { ::-webkit-scrollbar-thumb { background: var(--accent-color); /* Scrollbar handle color */ border-radius: 4px; /* Rounded corners */ - border: 2px solid #f4f4f4; /* Padding around the scrollbar handle */ + border: 2px solid var(--background-color); /* Padding around the scrollbar handle */ } ::-webkit-scrollbar-thumb:hover { diff --git a/app/src/styles/components/input.scss b/app/src/styles/components/input.scss index 2186efe..fa6e6a0 100644 --- a/app/src/styles/components/input.scss +++ b/app/src/styles/components/input.scss @@ -18,11 +18,11 @@ color: var(--input-text-color); font-size: var(--font-size-regular); font-weight: var(--font-weight-regular); + background-color: var(--background-color); border: 1px solid var(--accent-color); outline: none; border-radius: #{$border-radius-small}; - line-height: 26px; - padding: 0 8px; + padding: 2px 8px; } .toggle-header-container { @@ -144,8 +144,82 @@ .project-dropdowm-container { position: relative; height: 32px; - .project-name{ + .project-name { line-height: 32px; height: 100%; } } +.input.default { + text-align: center; + display: flex; + overflow: hidden; + position: relative; + input { + border: 1px solid var(--border-color); + border-radius: #{$border-radius-medium}; + padding: 3px 8px; + outline: none; + width: 100%; + background-color: var(--background-color); + &:focus, + &:active { + border: 1px solid var(--accent-color); + } + } + .dropdown { + position: absolute; + right: 4px; + padding: 2px 4px; + background-color: var(--highlight-accent-color); + font-size: var(--font-size-small); + border-radius: #{$border-radius-medium}; + top: 3px; + .active-option { + font-size: inherit; + position: relative; + } + } +} + +.regularDropdown-container { + width: 100%; + border: 1px solid var(--border-color); // Ensure $border-color is defined + border-radius: #{$border-radius-medium}; + position: relative; + cursor: pointer; + padding: 2px 6px; + + .dropdown-header { + height: 100%; + @include flex-space-between; + cursor: pointer; + border: 1px solid var(--primary-color); + border-radius: #{$border-radius-small}; + background-color: var(--background-color); + } + + .dropdown-options { + position: absolute; + width: 100%; + background-color: var(--primary-color); + border: 1px solid var(--border-color); + border-radius: 4px; + z-index: 10; + left: 0; + top: 104%; + padding: 4px; + .option { + padding: 2px; + cursor: pointer; + border-radius: #{$border-radius-small}; + &:hover { + color: var(--accent-color); + background-color: var(--highlight-accent-color); + } + } + } + + .icon { + height: auto; + } +} diff --git a/app/src/styles/components/lists.scss b/app/src/styles/components/lists.scss index a9b0145..40b72c7 100644 --- a/app/src/styles/components/lists.scss +++ b/app/src/styles/components/lists.scss @@ -9,6 +9,10 @@ .head { @include flex-space-between; padding: 6px 12px; + .value { + color: var(--text-color); + font-weight: #{$medium-weight}; + } .options { @include flex-center; gap: 6px; @@ -37,6 +41,10 @@ width: 100%; text-align: start; max-width: 180px; + font-size: var(--font-size-regular); + .input-value { + font-size: inherit; + } } .options-container { @include flex-center; diff --git a/app/src/styles/components/tools.scss b/app/src/styles/components/tools.scss index e69de29..65fad78 100644 --- a/app/src/styles/components/tools.scss +++ b/app/src/styles/components/tools.scss @@ -0,0 +1,150 @@ +<<<<<<< Updated upstream +======= +@use "../abstracts/variables" as *; +@use "../abstracts/mixins" as *; + +.tools-container { + @include flex-center; + position: fixed; + bottom: 32px; + left: 50%; + transform: translate(-50%, 0); + padding: 8px; + gap: 10px; + box-shadow: #{$box-shadow-medium}; + border-radius: #{$border-radius-large}; + width: fit-content; + transition: width 0.2s; + background-color: var(--background-color); + .split { + height: 20px; + width: 2px; + border-radius: 2px; + background: var(--highlight-accent-color); + } + .draw-tools, + .general-options, + .activeDropicon { + @include flex-center; + gap: 8px; + interpolate-size: allow-keywords; + width: 0; + opacity: 0; + animation: expandWidth 0.2s ease-in-out forwards; + .tool-button { + @include flex-center; + height: 28px; + width: 28px; + cursor: pointer; + border-radius: #{$border-radius-small}; + &:hover { + background: color-mix( + in srgb, + var(--highlight-accent-color) 60%, + transparent + ); + } + } + .active { + background-color: var(--accent-color); + &:hover { + background-color: var(--accent-color); + } + } + } + .activeDropicon { + gap: 2px; + .drop-down-option-button { + @include flex-center; + height: 28px; + cursor: pointer; + border-radius: #{$border-radius-small}; + position: relative; + &:hover { + background: color-mix( + in srgb, + var(--highlight-accent-color) 60%, + transparent + ); + } + .drop-down-container { + position: absolute; + bottom: 40px; + left: 0; + box-shadow: #{$box-shadow-medium}; + padding: 8px; + border-radius: #{$border-radius-large}; + background-color: var(--background-color); + .option-list { + margin: 4px 0; + display: flex; + align-items: center; + white-space: nowrap; + border-radius: #{$border-radius-medium}; + gap: 6px; + padding: 4px; + &:hover { + background-color: var(--highlight-accent-color); + color: var(--accent-color); + path { + stroke: var(--accent-color); + } + } + .active-option { + height: 12px; + width: 12px; + @include flex-center; + } + .option { + color: inherit; + } + } + } + } + } + .toggle-threed-button { + @include flex-center; + padding: 3px; + border-radius: #{$border-radius-small}; + background-color: var(--highlight-accent-color); + gap: 2px; + position: relative; + .toggle-option { + font-size: var(--font-size-small); + padding: 2px; + z-index: 1; + transition: all 0.2s; + } + &::after { + content: ""; + position: absolute; + background-color: var(--accent-color); + left: 3px; + top: 3px; + height: 18px; + width: 18px; + border-radius: #{$border-radius-small}; + transition: all 0.2s; + } + .active { + color: var(--highlight-accent-color); + } + } + .toggled { + &::after { + left: 24px; + } + } +} + +@keyframes expandWidth { + from { + width: 0; + opacity: 0; + } + to { + width: fit-content; + opacity: 1; + } +} +>>>>>>> Stashed changes diff --git a/app/src/styles/layout/sidebar.scss b/app/src/styles/layout/sidebar.scss index 49ce93b..0f5fc24 100644 --- a/app/src/styles/layout/sidebar.scss +++ b/app/src/styles/layout/sidebar.scss @@ -53,7 +53,7 @@ display: flex; flex-direction: column; .sidebar-left-content-container { - border-bottom: 1px solid var(--border-color); + // border-bottom: 1px solid var(--border-color); // flex: 1; height: calc(100% - 36px); position: relative; @@ -181,9 +181,11 @@ } .machine-mechanics-container { - .header { - @include flex-space-between; + .process-list-container { + display: flex; + align-items: center; padding: 6px 12px; +<<<<<<< Updated upstream .add-button { @include flex-center; padding: 2px 4px; @@ -214,19 +216,103 @@ .active { background: var(--accent-color); .value { +======= + gap: 12px; + } + .machine-mechanics-header { + padding: 8px 12px; + border: 1px solid var(--highlight-accent-color); + border-right: none; + border-left: none; + color: var(--accent-color); + font-weight: var(--font-weight-bold); + } + .machine-mechanics-content-container { + height: 100%; + overflow: auto; + max-height: calc(60vh - (35px + 38px)); + .actions, + .triggers { + .header { + @include flex-space-between; + padding: 6px 12px; + + .add-button { + @include flex-center; + padding: 2px 4px; + background: var(--accent-color); +>>>>>>> Stashed changes color: var(--primary-color); + border-radius: #{$border-radius-small}; + cursor: pointer; + + path { + stroke: var(--primary-color); + } } + } + } + + .lists-main-container { + margin: 2px 8px; + width: calc(100% - 16px); + background: var(--background-color-gray); + border-radius: #{$border-radius-small}; + min-height: 120px; + height: 120px; + + .list-container { + padding: 4px; + height: calc(100% - 16px); + + .list-item { + @include flex-space-between; + padding: 4px 12px; + width: 100%; + margin: 2px 0; + border-radius: #{$border-radius-small}; + } +<<<<<<< Updated upstream path { stroke: var(--primary-color); } } .remove-button { +======= + + .active { + background: var(--highlight-accent-color); + + .value, + .input-value { + color: var(--accent-color); + } + + path { + stroke: var(--accent-color); + } + } + + .remove-button { + @include flex-center; + height: 12px; + width: 12px; + cursor: pointer; + } + } + + .resize-icon { +>>>>>>> Stashed changes @include flex-center; - height: 12px; - width: 12px; - cursor: pointer; + padding: 4px; + cursor: grab; + + &:active { + cursor: grabbing; + } } } +<<<<<<< Updated upstream .resize-icon { @include flex-center; padding: 4px; @@ -246,4 +332,49 @@ padding: 12px; font-size: var(--font-size-tiny); } +======= + + .selected-properties-container { + padding: 12px; + width: 100%; + // overflow: hidden; + .properties-header { + text-transform: capitalize; + padding: 8px 6px; + color: var(--accent-color); + font-weight: var(--font-weight-bold); + border-bottom: 1px solid var(--border-color); + span { + color: inherit; + text-transform: none; + } + } + .value-field-container { + display: flex; + align-items: center; + gap: 10px; + width: 100%; + padding: 8px 0; + .label { + width: 40%; + height: 100%; + } + .input { + width: 60%; + } + } + .regularDropdown-container { + width: 60%; + } + } + + .footer { + @include flex-center; + justify-content: flex-start; + gap: 4px; + padding: 12px; + font-size: var(--font-size-tiny); + } + } +>>>>>>> Stashed changes }