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

updated pannels

This commit is contained in:
Nalvazhuthi 2025-03-25 14:25:51 +05:30
parent 61b3c4ee2c
commit a84fe40486
7 changed files with 289 additions and 393 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/src/components/layout/sidebarLeft/visualization/widgets/Widgets.tsx
View File

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

17
app/src/components/ui/Tools.tsx
View File

@ -57,6 +57,7 @@ const Tools: React.FC = () => {
return (
<div className="tools-container">
{!isPlaying && (
<div className="drop-down-icons">
<div className="activeDropicon">
{activeSubTool == "cursor" && (
@ -129,6 +130,7 @@ const Tools: React.FC = () => {
)}
</div>
</div>
)}
{!toggleThreeD && activeModule === "builder" && (
<>
<div className="split"></div>
@ -191,7 +193,7 @@ const Tools: React.FC = () => {
</div>
</>
)}
{activeModule === "visualization" && (
{activeModule === "visualization" && !isPlaying && (
<>
<div className="split"></div>
<div className="draw-tools">
@ -210,10 +212,14 @@ const Tools: React.FC = () => {
</div>
</>
)}
{!isPlaying && (
<>
<div className="split"></div>
<div className="general-options">
<div
className={`tool-button ${activeTool === "comment" ? "active" : ""}`}
className={`tool-button ${
activeTool === "comment" ? "active" : ""
}`}
onClick={() => {
setActiveTool("comment");
}}
@ -244,6 +250,13 @@ const Tools: React.FC = () => {
3d
</div>
</div>
</>
)}
{isPlaying && (
<div className="exitPlay" onClick={() => setIsPlaying(false)}>
X
</div>
)}
</div>
);
};

30
app/src/components/ui/componets/Panel.tsx
View File

@ -49,29 +49,30 @@ const Panel: React.FC<PanelProps> = ({ 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,7 +84,6 @@ const Panel: React.FC<PanelProps> = ({ selectedZone, setSelectedZone }) => {
const handleDrop = (e: React.DragEvent, panel: Side) => {
e.preventDefault();
const { draggedAsset } = useWidgetStore.getState();
if (!draggedAsset) return;
if (isPanelLocked(panel)) return;
@ -95,16 +95,15 @@ const Panel: React.FC<PanelProps> = ({ selectedZone, setSelectedZone }) => {
addWidgetToPanel(draggedAsset, panel);
};
// Helper functions
const isPanelLocked = (panel: Side) =>
selectedZone.lockedPanels.includes(panel);
const getCurrentWidgetCount = (panel: Side) =>
selectedZone.widgets.filter(w => w.panel === panel).length;
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;
@ -127,9 +126,9 @@ const Panel: React.FC<PanelProps> = ({ selectedZone, setSelectedZone }) => {
panel,
};
setSelectedZone(prev => ({
setSelectedZone((prev) => ({
...prev,
widgets: [...prev.widgets, newWidget]
widgets: [...prev.widgets, newWidget],
}));
};
@ -187,7 +186,6 @@ const Panel: React.FC<PanelProps> = ({ selectedZone, setSelectedZone }) => {
opacity: selectedZone.lockedPanels.includes(side) ? "0.8" : "1",
}}
>
<>{}</>
{selectedZone.widgets
.filter((w) => w.panel === side)
.map((widget) => (

2
app/src/components/ui/componets/RealTimeVisulization.tsx
View File

@ -72,7 +72,7 @@ const RealTimeVisulization: React.FC = () => {
<div
ref={containerRef}
id="real-time-vis-canvas"
className="realTime-viz canvas"
className={`realTime-viz canvas ${!isPlaying ? "playActiveFalse" : ""}`}
style={{
height: isPlaying ? "100vh" : "",
width: isPlaying ? "100%" : "",

2
app/src/store/useModuleStore.ts
View File

@ -7,7 +7,7 @@ interface ModuleStore {
}
const useModuleStore = create<ModuleStore>((set) => ({
activeModule: "builder", // Initial state
activeModule: "visualization", // Initial state
setActiveModule: (module) => set({ activeModule: module }), // Update state
}));

56
app/src/styles/components/tools.scss
View File

@ -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,
background: color-mix(in srgb,
var(--highlight-accent-color) 60%,
transparent
);
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,
background: color-mix(in srgb,
var(--highlight-accent-color) 60%,
transparent
);
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,6 +176,7 @@
width: 0;
opacity: 0;
}
to {
width: fit-content;
opacity: 1;

319
app/src/styles/pages/realTimeViz.scss
View File

@ -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);
}
}
&.top-panel,
&.bottom-panel {
left: 0;
right: 0;
.fullScreen {
background-color: red;
}
.panel-content {
// Panels for each side
.left-panel,
.right-panel {
.chart-container {
padding: 10px;
width: 100% !important;
height: 250px !important;
}
}
.top-panel,
.bottom-panel {
.chart-container {
padding: 10px;
width: 300px !important;
height: 100% !important;
}
}
// Zone Wrapper
.zoon-wrapper {
display: flex;
flex-direction: row;
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);
.chart-container {
height: 100%;
width: 200px;
&::-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);
}
}
&.top-panel {
top: 0;
.zoon-wrapper.bottom {
bottom: 210px;
}
&.bottom-panel {
bottom: 0;
.content-container {
display: flex;
height: 100vh;
transition: all 0.3s ease;
}
&.left-panel {
left: 0;
top: 0;
bottom: 0;
.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;
}
}
.chart-container {
.playActiveFalse {
position: absolute;
top: 50%;
left: calc(270px + 45px);
transform: translate(0, -50%) scaleX(0.6) scaleY(0.65);
transform-origin: left;
width: 100%;
height: 180px;
}
}
&.right-panel {
right: 0;
top: 0;
bottom: 0;
}
}
}
// 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;
}
}