From a84fe404866c60ea51fd5c6c73e0aa09df8cbb53 Mon Sep 17 00:00:00 2001 From: Nalvazhuthi Date: Tue, 25 Mar 2025 14:25:51 +0530 Subject: [PATCH] updated pannels --- .../visualization/widgets/Widgets.tsx | 2 +- app/src/components/ui/Tools.tsx | 217 +++++------ app/src/components/ui/componets/Panel.tsx | 58 ++- .../ui/componets/RealTimeVisulization.tsx | 2 +- app/src/store/useModuleStore.ts | 2 +- app/src/styles/components/tools.scss | 62 +++- app/src/styles/pages/realTimeViz.scss | 339 +++++------------- 7 files changed, 289 insertions(+), 393 deletions(-) diff --git a/app/src/components/layout/sidebarLeft/visualization/widgets/Widgets.tsx b/app/src/components/layout/sidebarLeft/visualization/widgets/Widgets.tsx index 7ab7a14..15bc313 100644 --- a/app/src/components/layout/sidebarLeft/visualization/widgets/Widgets.tsx +++ b/app/src/components/layout/sidebarLeft/visualization/widgets/Widgets.tsx @@ -5,7 +5,7 @@ import Widgets3D from "./Widgets3D"; import WidgetsFloating from "./WidgetsFloating"; const Widgets = () => { - const [activeOption, setActiveOption] = useState("Floating"); + const [activeOption, setActiveOption] = useState("2D"); const handleToggleClick = (option: string) => { setActiveOption(option); diff --git a/app/src/components/ui/Tools.tsx b/app/src/components/ui/Tools.tsx index f6389e9..7b286fd 100644 --- a/app/src/components/ui/Tools.tsx +++ b/app/src/components/ui/Tools.tsx @@ -57,78 +57,80 @@ const Tools: React.FC = () => { return (
-
-
- {activeSubTool == "cursor" && ( -
{ - setActiveTool("cursor"); - }} - > - -
- )} - {activeSubTool == "free-hand" && ( -
{ - setActiveTool("free-hand"); - }} - > - -
- )} - {activeModule !== "visualization" && ( -
{ - setOpenDrop(!openDrop); - console.log(openDrop); - }} - > - - {openDrop && ( -
-
{ - setOpenDrop(false); - setActiveTool("cursor"); - setActiveSubTool("cursor"); - }} - > -
- {activeSubTool === "cursor" && } + {!isPlaying && ( +
+
+ {activeSubTool == "cursor" && ( +
{ + setActiveTool("cursor"); + }} + > + +
+ )} + {activeSubTool == "free-hand" && ( +
{ + setActiveTool("free-hand"); + }} + > + +
+ )} + {activeModule !== "visualization" && ( +
{ + setOpenDrop(!openDrop); + console.log(openDrop); + }} + > + + {openDrop && ( +
+
{ + setOpenDrop(false); + setActiveTool("cursor"); + setActiveSubTool("cursor"); + }} + > +
+ {activeSubTool === "cursor" && } +
+ +
Cursor
- -
Cursor
-
-
{ - setOpenDrop(false); - setActiveTool("free-hand"); - setActiveSubTool("free-hand"); - }} - > -
- {activeSubTool === "free-hand" && } +
{ + setOpenDrop(false); + setActiveTool("free-hand"); + setActiveSubTool("free-hand"); + }} + > +
+ {activeSubTool === "free-hand" && } +
+ +
Free Hand
- -
Free Hand
-
- )} -
- )} + )} +
+ )} +
-
+ )} {!toggleThreeD && activeModule === "builder" && ( <>
@@ -191,7 +193,7 @@ const Tools: React.FC = () => {
)} - {activeModule === "visualization" && ( + {activeModule === "visualization" && !isPlaying && ( <>
@@ -210,40 +212,51 @@ const Tools: React.FC = () => {
)} -
-
-
{ - setActiveTool("comment"); - }} - > - + {!isPlaying && ( + <> +
+
+
{ + setActiveTool("comment"); + }} + > + +
+
{ + setActiveTool("play"); + setIsPlaying(!isPlaying); + }} + > + +
+
+
+
{ + setToggleThreeD(!toggleThreeD); + }} + > +
+ 2d +
+
+ 3d +
+
+ + )} + {isPlaying && ( +
setIsPlaying(false)}> + X
-
{ - setActiveTool("play"); - setIsPlaying(!isPlaying); - }} - > - -
-
-
-
{ - setToggleThreeD(!toggleThreeD); - }} - > -
- 2d -
-
- 3d -
-
+ )}
); }; diff --git a/app/src/components/ui/componets/Panel.tsx b/app/src/components/ui/componets/Panel.tsx index 4a1305f..e57e49e 100644 --- a/app/src/components/ui/componets/Panel.tsx +++ b/app/src/components/ui/componets/Panel.tsx @@ -49,29 +49,30 @@ const Panel: React.FC = ({ selectedZone, setSelectedZone }) => { const rightActive = previousPanels.includes("right"); const topActive = previousPanels.includes("top"); const bottomActive = previousPanels.includes("bottom"); + const panelSize = isPlaying ? 355 : 305; switch (side) { case "top": case "bottom": return { width: `calc(100% - ${ - (leftActive ? 204 : 0) + (rightActive ? 204 : 0) + (leftActive ? panelSize : 0) + (rightActive ? panelSize : 0) }px)`, - left: leftActive ? "204px" : "0", - right: rightActive ? "204px" : "0", + height: `${panelSize - 5}px`, + left: leftActive ? `${panelSize}px` : "0", + right: rightActive ? `${panelSize}px` : "0", [side]: "0", - height: "200px", }; case "left": case "right": return { + width: `${panelSize - 5}px`, height: `calc(100% - ${ - (topActive ? 204 : 0) + (bottomActive ? 204 : 0) + (topActive ? panelSize : 0) + (bottomActive ? panelSize : 0) }px)`, - top: topActive ? "204px" : "0", - bottom: bottomActive ? "204px" : "0", + top: topActive ? `${panelSize}px` : "0", + bottom: bottomActive ? `${panelSize}px` : "0", [side]: "0", - width: "200px", }; default: return {}; @@ -83,53 +84,51 @@ const Panel: React.FC = ({ selectedZone, setSelectedZone }) => { const handleDrop = (e: React.DragEvent, panel: Side) => { e.preventDefault(); const { draggedAsset } = useWidgetStore.getState(); - if (!draggedAsset) return; if (isPanelLocked(panel)) return; - + const currentWidgetsCount = getCurrentWidgetCount(panel); const maxCapacity = calculatePanelCapacity(panel); - + if (currentWidgetsCount >= maxCapacity) return; - + addWidgetToPanel(draggedAsset, panel); }; - - // Helper functions - const isPanelLocked = (panel: Side) => + + const isPanelLocked = (panel: Side) => selectedZone.lockedPanels.includes(panel); - - const getCurrentWidgetCount = (panel: Side) => - selectedZone.widgets.filter(w => w.panel === panel).length; - + + const getCurrentWidgetCount = (panel: Side) => + selectedZone.widgets.filter((w) => w.panel === panel).length; + const calculatePanelCapacity = (panel: Side) => { - const CHART_WIDTH = 200; - const CHART_HEIGHT = 200; + const CHART_WIDTH = 250; + const CHART_HEIGHT = 250; const FALLBACK_HORIZONTAL_CAPACITY = 5; const FALLBACK_VERTICAL_CAPACITY = 3; - + const dimensions = panelDimensions[panel]; if (!dimensions) { - return panel === "top" || panel === "bottom" + return panel === "top" || panel === "bottom" ? FALLBACK_HORIZONTAL_CAPACITY : FALLBACK_VERTICAL_CAPACITY; } - + return panel === "top" || panel === "bottom" ? Math.floor(dimensions.width / CHART_WIDTH) : Math.floor(dimensions.height / CHART_HEIGHT); }; - + const addWidgetToPanel = (asset: any, panel: Side) => { const newWidget = { ...asset, id: generateUniqueId(), panel, }; - - setSelectedZone(prev => ({ + + setSelectedZone((prev) => ({ ...prev, - widgets: [...prev.widgets, newWidget] + widgets: [...prev.widgets, newWidget], })); }; @@ -187,7 +186,6 @@ const Panel: React.FC = ({ selectedZone, setSelectedZone }) => { opacity: selectedZone.lockedPanels.includes(side) ? "0.8" : "1", }} > - <>{} {selectedZone.widgets .filter((w) => w.panel === side) .map((widget) => ( @@ -200,4 +198,4 @@ const Panel: React.FC = ({ selectedZone, setSelectedZone }) => { ); }; -export default Panel; +export default Panel; \ No newline at end of file diff --git a/app/src/components/ui/componets/RealTimeVisulization.tsx b/app/src/components/ui/componets/RealTimeVisulization.tsx index 7905769..44164c4 100644 --- a/app/src/components/ui/componets/RealTimeVisulization.tsx +++ b/app/src/components/ui/componets/RealTimeVisulization.tsx @@ -72,7 +72,7 @@ const RealTimeVisulization: React.FC = () => {
((set) => ({ - activeModule: "builder", // Initial state + activeModule: "visualization", // Initial state setActiveModule: (module) => set({ activeModule: module }), // Update state })); diff --git a/app/src/styles/components/tools.scss b/app/src/styles/components/tools.scss index 46791d7..06fa5a1 100644 --- a/app/src/styles/components/tools.scss +++ b/app/src/styles/components/tools.scss @@ -4,7 +4,7 @@ .tools-container { @include flex-center; position: fixed; - bottom: 32px; + bottom: 50px; left: 50%; transform: translate(-50%, 0); padding: 8px; @@ -14,12 +14,14 @@ 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 { @@ -29,42 +31,46 @@ 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 - ); + 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 - ); + background: color-mix(in srgb, + var(--highlight-accent-color) 60%, + transparent); } + .drop-down-container { position: absolute; bottom: 40px; @@ -72,6 +78,7 @@ box-shadow: #{$box-shadow-medium}; padding: 8px; border-radius: #{$border-radius-large}; + .option-list { margin: 4px 0; display: flex; @@ -80,18 +87,22 @@ 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; } @@ -99,6 +110,7 @@ } } } + .toggle-threed-button { @include flex-center; padding: 3px; @@ -106,12 +118,14 @@ 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; @@ -123,15 +137,38 @@ border-radius: #{$border-radius-small}; transition: all 0.2s; } + .active { color: var(--highlight-accent-color); } } + .toggled { &::after { left: 24px; } } + + .exitPlay { + width: 30px; + height: 30px; + border-radius: 50%; + background-color: var(--accent-color); + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + position: relative; + transition: background-color 0.3s, transform 0.3s; + color: var(--background-color); + } + + + .exitPlay:hover { + background-color: var(--accent-color); + transform: scale(1.1); + } + } @keyframes expandWidth { @@ -139,8 +176,9 @@ width: 0; opacity: 0; } + to { width: fit-content; opacity: 1; } -} +} \ No newline at end of file diff --git a/app/src/styles/pages/realTimeViz.scss b/app/src/styles/pages/realTimeViz.scss index abfc846..b1d1dd6 100644 --- a/app/src/styles/pages/realTimeViz.scss +++ b/app/src/styles/pages/realTimeViz.scss @@ -1,148 +1,26 @@ @use "../abstracts/variables.scss" as *; +@use "../abstracts/mixins.scss" as *; // Main Container .realTime-viz { background-color: var(--background-color); border-radius: 20px; box-shadow: $box-shadow-medium; - width: calc(100% - (320px + 270px + 90px)); - height: calc(100% - (200px + 80px)); + width: 100%; + height: 100%; position: absolute; - top: 50%; - left: calc(270px + 45px); - transform: translate(0, -50%); - - .icon { - display: flex; - align-items: center; - position: relative; - } - - .icons-container { - .icon { - &:first-child { - &::after { - display: none; - } - } - } - } - - .zoon-wrapper { - display: flex; - background-color: var(--background-color); - position: absolute; - bottom: 10px; - left: 50%; - transform: translate(-50%, 0); - gap: 6px; - padding: 4px; - border-radius: 8px; - max-width: 80%; - overflow: auto; - max-width: calc(100% - 450px); - &::-webkit-scrollbar { - display: none; - } - - .zone { - width: auto; - background-color: var(--background-color); - border-radius: 6px; - padding: 4px 8px; - white-space: nowrap; - font-size: $small; - } - - .active { - background-color: var(--accent-color); - color: var(--background-color); - // color: #FCFDFD !important; - } - } - - .zoon-wrapper.bottom { - bottom: 210px; - } - - @media (max-width: 1024px) { - width: 80%; // Increase width to take more space on smaller screens - height: 500px; // Reduce height to fit smaller screens - left: 50%; // Center horizontally - - .main-container { - margin: 0 15px; // Reduce margin for better spacing - } - - .zoon-wrapper { - bottom: 5px; // Adjust position for smaller screens - - &.bottom { - bottom: 150px; // Adjust for bottom placement - } - } - } - - .content-container { - display: flex; - height: 100vh; - transition: all 0.3s ease; - } - - .main-container { - position: relative; - flex: 1; - height: 600px; - background-color: rgb(235, 235, 235); - margin: 0 30px; - transition: height 0.3s ease, margin 0.3s ease; - - .zoon-wrapper { - display: flex; - background-color: rgba(224, 223, 255, 0.5); - position: absolute; - bottom: 10px; - left: 50%; - transform: translate(-50%, 0); - gap: 6px; - padding: 4px; - border-radius: 8px; - max-width: 80%; - overflow: auto; - transition: transform 0.3s ease; - - &::-webkit-scrollbar { - display: none; - } - - .zone { - width: auto; - background-color: $background-color; - border-radius: 6px; - padding: 4px 8px; - white-space: nowrap; - cursor: pointer; - transition: background-color 0.3s ease; - - &.active { - background-color: var(--primary-color); - color: var(--accent-color); - } - } - - &.bottom { - bottom: 210px; - } - } - } + top: 0; + left: 0; + transform: scale(1); + // Panels .panel { position: absolute; background: white; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; border-radius: 6px; - overflow: visible !important; + overflow: hidden; .panel-content { position: relative; @@ -159,7 +37,7 @@ } .chart-container { - width: 100%; + width: 229px; height: 200px; max-height: 100%; border: 1px dotted #a9a9a9; @@ -179,53 +57,89 @@ color: var(--primary-color); } } + } + // Panels for each side + .left-panel, + .right-panel { + .chart-container { + padding: 10px; + width: 100% !important; + height: 250px !important; - &.top-panel, - &.bottom-panel { - left: 0; - right: 0; - - .fullScreen { - background-color: red; - } - - .panel-content { - display: flex; - flex-direction: row; - - .chart-container { - height: 100%; - width: 200px; - } - } - } - - &.top-panel { - top: 0; - } - - &.bottom-panel { - bottom: 0; - } - - &.left-panel { - left: 0; - top: 0; - bottom: 0; - - .chart-container { - width: 100%; - height: 180px; - } - } - - &.right-panel { - right: 0; - top: 0; - bottom: 0; } } + + .top-panel, + .bottom-panel { + .chart-container { + padding: 10px; + width: 300px !important; + height: 100% !important; + } + } + + // Zone Wrapper + .zoon-wrapper { + display: flex; + background-color: var(--background-color); + position: absolute; + bottom: 10px; + left: 50%; + transform: translate(-50%, 0); + gap: 6px; + padding: 4px; + border-radius: 8px; + max-width: 80%; + overflow: auto; + max-width: calc(100% - 450px); + + &::-webkit-scrollbar { + display: none; + } + + .zone { + width: auto; + background-color: var(--background-color); + border-radius: 6px; + padding: 4px 8px; + white-space: nowrap; + font-size: $small; + } + + .active { + background-color: var(--accent-color); + color: var(--background-color); + } + } + + .zoon-wrapper.bottom { + bottom: 210px; + } + + .content-container { + display: flex; + height: 100vh; + transition: all 0.3s ease; + } + + .main-container { + position: relative; + flex: 1; + height: 600px; + background-color: rgb(235, 235, 235); + margin: 0 30px; + transition: height 0.3s ease, margin 0.3s ease; + } +} + +.playActiveFalse { + position: absolute; + top: 50%; + left: calc(270px + 45px); + transform: translate(0, -50%) scaleX(0.6) scaleY(0.65); + transform-origin: left; + width: 100%; } // Side Buttons @@ -267,7 +181,6 @@ height: 18px; display: flex; justify-content: center; - // align-items: center; background-color: var(--accent-color); border: none; color: var(--background-color); @@ -307,84 +220,18 @@ } } -.right.side-button-container { - .extra-Bs { - flex-direction: column; - } -} - +.right.side-button-container, .left.side-button-container { .extra-Bs { flex-direction: column; } } -// Theme Container -.theme-container { - width: 250px; - padding: 12px; - box-shadow: 1px -3px 4px 0px rgba(0, 0, 0, 0.11); - border-radius: 8px; - background-color: white; - position: absolute; - top: 20px; - right: -100%; - transform: translate(-0%, 0); +.top-panel, +.bottom-panel { + .panel-content { - h2 { - font-size: 12px; - margin-bottom: 8px; - color: #2b3344; - } - - .theme-preset-wrapper { display: flex; - gap: 5px; - flex-wrap: wrap; - - .theme-preset { - display: flex; - gap: 2px; - margin-bottom: 10px; - border: 1px solid $border-color; - padding: 5px 10px; - border-radius: 4px; - transition: border 0.3s ease; - - &.active { - border: 1px solid var(--primary-color); - - &::after { - content: ""; - position: absolute; - top: 1px; - left: 1px; - width: 10px; - height: 10px; - background-color: var(--primary-color); - border-radius: 50%; - } - } - } - } - - .custom-color { - display: flex; - justify-content: space-between; - - .color-displayer { - display: flex; - gap: 5px; - align-items: center; - border: 1px solid var(--accent-color); - border-radius: 4px; - padding: 0 5px; - - input { - border: none; - outline: none; - border-radius: 50%; - } - } + flex-direction: row !important; } } \ No newline at end of file