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

Merge branch 'v2-ui' of http://185.100.212.76:7776/Dwinzo-Beta/Dwinzo_dev into v2-ui

This commit is contained in:
Vishnu 2025-05-08 18:32:03 +05:30
parent fef6da5ab7 26fa892597
commit 77f840d878
4 changed files with 68 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
app/src/modules/visualization/widgets/2d/DraggableWidget.tsx
View File

@ -38,11 +38,6 @@ export const DraggableWidget = ({
setOpenKebabId, setOpenKebabId,
selectedZone, selectedZone,
setSelectedZone, setSelectedZone,
draggingIndex,
setDraggingIndex,
hoverIndex,
setHoverIndex,
side,
}: { }: {
selectedZone: { selectedZone: {
zoneName: string; zoneName: string;
@ -79,12 +74,6 @@ export const DraggableWidget = ({
onReorder: (fromIndex: number, toIndex: number) => void; onReorder: (fromIndex: number, toIndex: number) => void;
openKebabId: string | null; openKebabId: string | null;
setOpenKebabId: (id: string | null) => void; setOpenKebabId: (id: string | null) => void;
draggingIndex: number | null;
setDraggingIndex: React.Dispatch<React.SetStateAction<number | null>>;
hoverIndex: number | null;
setHoverIndex: React.Dispatch<React.SetStateAction<number | null>>;
side: any;
}) => { }) => {
const { visualizationSocket } = useSocketStore(); const { visualizationSocket } = useSocketStore();
const { selectedChartId, setSelectedChartId } = useWidgetStore(); const { selectedChartId, setSelectedChartId } = useWidgetStore();
@ -109,6 +98,8 @@ export const DraggableWidget = ({
const deleteSelectedChart = async () => { const deleteSelectedChart = async () => {
try { try {
console.log("delete");
const email = localStorage.getItem("email") || ""; const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0]; const organization = email?.split("@")[1]?.split(".")[0];
let deleteWidget = { let deleteWidget = {
@ -120,6 +111,7 @@ export const DraggableWidget = ({
if (visualizationSocket) { if (visualizationSocket) {
setSelectedChartId(null); setSelectedChartId(null);
visualizationSocket.emit("v2:viz-widget:delete", deleteWidget); visualizationSocket.emit("v2:viz-widget:delete", deleteWidget);
console.log("delete widget", selectedChartId);
} }
const updatedWidgets = selectedZone.widgets.filter( const updatedWidgets = selectedZone.widgets.filter(
(w: Widget) => w.id !== widget.id (w: Widget) => w.id !== widget.id
@ -141,7 +133,7 @@ export const DraggableWidget = ({
// })); // }));
// } // }
} catch (error) { } catch (error) {
echo.error("Failed to delete selected chart"); echo.error("Failued to dublicate widgeet");
} finally { } finally {
setOpenKebabId(null); setOpenKebabId(null);
} }
@ -206,8 +198,17 @@ export const DraggableWidget = ({
...prevZone, ...prevZone,
widgets: [...prevZone.widgets, duplicatedWidget], widgets: [...prevZone.widgets, duplicatedWidget],
})); }));
// const response = await duplicateWidgetApi(selectedZone.zoneId, organization, duplicatedWidget);
// if (response?.message === "Widget created successfully") {
// setSelectedZone((prevZone: any) => ({
// ...prevZone,
// widgets: [...prevZone.widgets, duplicatedWidget],
// }));
// }
} catch (error) { } catch (error) {
echo.error("Failed to dublicate widget"); echo.error("Failued to dublicate widgeet");
} finally { } finally {
setOpenKebabId(null); setOpenKebabId(null);
} }
@ -242,15 +243,10 @@ export const DraggableWidget = ({
}, [setOpenKebabId]); }, [setOpenKebabId]);
const handleDragStart = (event: React.DragEvent<HTMLDivElement>) => { const handleDragStart = (event: React.DragEvent<HTMLDivElement>) => {
event.dataTransfer.setData("text/plain", index.toString()); event.dataTransfer.setData("text/plain", index.toString()); // Store the index of the dragged widget
// selectedZone.zoneId
setDraggingIndex(index);
}; };
const handleDragEnter = (event: React.DragEvent<HTMLDivElement>) => { const handleDragEnter = (event: React.DragEvent<HTMLDivElement>) => {
event.preventDefault(); event.preventDefault(); // Allow drop
setHoverIndex(index); // Set where the placeholder should show
}; };
const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => { const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {
@ -259,20 +255,11 @@ export const DraggableWidget = ({
const handleDrop = (event: React.DragEvent<HTMLDivElement>) => { const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
event.preventDefault(); event.preventDefault();
const fromIndex = parseInt(event.dataTransfer.getData("text/plain"), 10); const fromIndex = parseInt(event.dataTransfer.getData("text/plain"), 10); // Get the dragged widget's index
const toIndex = index; const toIndex = index; // The index of the widget where the drop occurred
if (fromIndex !== toIndex) { if (fromIndex !== toIndex) {
onReorder(fromIndex, toIndex); onReorder(fromIndex, toIndex); // Call the reorder function passed as a prop
} }
setDraggingIndex(null);
setHoverIndex(null);
};
const handleDragEnd = () => {
setDraggingIndex(null);
setHoverIndex(null);
}; };
// useClickOutside(chartWidget, () => { // useClickOutside(chartWidget, () => {
@ -284,7 +271,7 @@ export const DraggableWidget = ({
// Current: Two identical useEffect hooks for canvas dimensions // Current: Two identical useEffect hooks for canvas dimensions
// Remove the duplicate and keep only one // Remove the duplicate and keep only one
useEffect(() => { useEffect(() => {
const canvas = document.getElementById("work-space-three-d-canvas"); const canvas = document.getElementById("real-time-vis-canvas");
if (!canvas) return; if (!canvas) return;
const updateCanvasDimensions = () => { const updateCanvasDimensions = () => {
@ -304,22 +291,6 @@ export const DraggableWidget = ({
return ( return (
<> <>
{draggingIndex !== null && hoverIndex === index && (
<div
className="widget-placeholder"
style={{
width: ["top", "bottom"].includes(widget.panel)
? `calc(${canvasDimensions.width}px / 6)`
: undefined,
height: ["left", "right"].includes(widget.panel)
? `calc(${canvasDimensions.height - 15}px / 4)`
: undefined,
}}
>
Drop Here
</div>
)}
<div <div
draggable draggable
key={widget.id} key={widget.id}
@ -331,7 +302,6 @@ export const DraggableWidget = ({
onDragEnter={handleDragEnter} onDragEnter={handleDragEnter}
onDragOver={handleDragOver} onDragOver={handleDragOver}
onDrop={handleDrop} onDrop={handleDrop}
onDragEnd={handleDragEnd}
style={{ style={{
width: ["top", "bottom"].includes(widget.panel) width: ["top", "bottom"].includes(widget.panel)
? `calc(${canvasDimensions.width}px / 6)` ? `calc(${canvasDimensions.width}px / 6)`
@ -343,6 +313,7 @@ export const DraggableWidget = ({
ref={chartWidget} ref={chartWidget}
onClick={() => { onClick={() => {
setSelectedChartId(widget); setSelectedChartId(widget);
console.log("click");
}} }}
> >
{/* Kebab Icon */} {/* Kebab Icon */}

30
app/src/modules/visualization/widgets/panel/Panel.tsx
View File

@ -56,6 +56,7 @@ const Panel: React.FC<PanelProps> = ({
setZonesData, setZonesData,
waitingPanels, waitingPanels,
}) => { }) => {
const { widgetSelect, setWidgetSelect } = useAsset3dWidget();
const panelRefs = useRef<{ [side in Side]?: HTMLDivElement }>({}); const panelRefs = useRef<{ [side in Side]?: HTMLDivElement }>({});
const [panelDimensions, setPanelDimensions] = useState<{ const [panelDimensions, setPanelDimensions] = useState<{
[side in Side]?: { width: number; height: number }; [side in Side]?: { width: number; height: number };
@ -68,12 +69,9 @@ const Panel: React.FC<PanelProps> = ({
height: 0, height: 0,
}); });
const [draggingIndex, setDraggingIndex] = useState<number | null>(null);
const [hoverIndex, setHoverIndex] = useState<number | null>(null);
// Track canvas dimensions // Track canvas dimensions
useEffect(() => { useEffect(() => {
const canvas = document.getElementById("work-space-three-d-canvas"); const canvas = document.getElementById("real-time-vis-canvas");
if (!canvas) return; if (!canvas) return;
const updateCanvasDimensions = () => { const updateCanvasDimensions = () => {
@ -185,7 +183,7 @@ const Panel: React.FC<PanelProps> = ({
// Add widget to panel // Add widget to panel
const addWidgetToPanel = async (asset: any, panel: Side) => { const addWidgetToPanel = async (asset: any, panel: Side) => {
const email = localStorage.getItem("email") ?? ""; const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0]; const organization = email?.split("@")[1]?.split(".")[0];
const newWidget = { const newWidget = {
@ -304,14 +302,13 @@ const Panel: React.FC<PanelProps> = ({
> >
<div <div
className={`panel-content className={`panel-content
${waitingPanels === side ? `${side}-closing` : ""} ${waitingPanels === side ? `${side}-closing` : ""}
${ ${
!hiddenPanels[selectedZone.zoneId]?.includes(side) && !hiddenPanels[selectedZone.zoneId]?.includes(side) && waitingPanels !== side
waitingPanels !== side ? `${side}-opening`
? `${side}-opening` : ""
: "" }
} ${isPlaying ? "fullScreen" : ""}`}
${isPlaying ? "fullScreen" : ""}`}
style={{ style={{
pointerEvents: pointerEvents:
selectedZone.lockedPanels.includes(side) || selectedZone.lockedPanels.includes(side) ||
@ -322,7 +319,7 @@ const Panel: React.FC<PanelProps> = ({
}} }}
> >
{selectedZone.widgets {selectedZone.widgets
.filter((w) => w.panel === "top") .filter((w) => w.panel === side)
.map((widget, index) => ( .map((widget, index) => (
<DraggableWidget <DraggableWidget
hiddenPanels={hiddenPanels} hiddenPanels={hiddenPanels}
@ -332,15 +329,10 @@ const Panel: React.FC<PanelProps> = ({
onReorder={(fromIndex, toIndex) => onReorder={(fromIndex, toIndex) =>
handleReorder(fromIndex, toIndex, side) handleReorder(fromIndex, toIndex, side)
} }
side={side}
openKebabId={openKebabId} openKebabId={openKebabId}
setOpenKebabId={setOpenKebabId} setOpenKebabId={setOpenKebabId}
selectedZone={selectedZone} selectedZone={selectedZone}
setSelectedZone={setSelectedZone} setSelectedZone={setSelectedZone}
draggingIndex={draggingIndex}
setDraggingIndex={setDraggingIndex}
hoverIndex={hoverIndex}
setHoverIndex={setHoverIndex}
/> />
))} ))}
</div> </div>

2
app/src/styles/components/marketPlace/marketPlace.scss
View File

@ -46,7 +46,7 @@
width: calc(25% - 14px) !important; width: calc(25% - 14px) !important;
height: auto !important; height: 100%;
border-radius: #{$border-radius-xlarge}; border-radius: #{$border-radius-xlarge};
padding: 12px; padding: 12px;
box-shadow: 0px 2px 10.5px 0px #0000000d; box-shadow: 0px 2px 10.5px 0px #0000000d;

42
app/src/styles/layout/sidebar.scss
View File

@ -42,18 +42,22 @@
min-width: 32px; min-width: 32px;
border-radius: #{$border-radius-large}; border-radius: #{$border-radius-large};
position: relative; position: relative;
.tooltip { .tooltip {
top: 6px; top: 6px;
right: -168px; right: -168px;
&::after { &::after {
left: 0px; left: 0px;
bottom: 50%; bottom: 50%;
} }
} }
&:hover { &:hover {
outline: 1px solid var(--border-color); outline: 1px solid var(--border-color);
outline-offset: -1px; outline-offset: -1px;
background: var(--background-color-solid); background: var(--background-color-solid);
.tooltip { .tooltip {
opacity: 1; opacity: 1;
transform: translateX(2px); transform: translateX(2px);
@ -81,6 +85,7 @@
.sidebar-left-container { .sidebar-left-container {
min-height: 50vh; min-height: 50vh;
max-width: 100%;
padding-bottom: 4px; padding-bottom: 4px;
position: relative; position: relative;
display: flex; display: flex;
@ -391,6 +396,7 @@
.tooltip { .tooltip {
top: 6px; top: 6px;
right: calc(100% + 6px); right: calc(100% + 6px);
&::after { &::after {
left: 100%; left: 100%;
bottom: 50%; bottom: 50%;
@ -411,10 +417,12 @@
&:hover { &:hover {
outline-color: var(--border-color-accent); outline-color: var(--border-color-accent);
svg { svg {
transition: all 0.2s; transition: all 0.2s;
scale: 1.1; scale: 1.1;
} }
.tooltip { .tooltip {
opacity: 1; opacity: 1;
transform: translateX(-2px); transform: translateX(-2px);
@ -425,10 +433,12 @@
.active { .active {
background: var(--background-color-accent); background: var(--background-color-accent);
outline: none; outline: none;
&:hover { &:hover {
svg { svg {
scale: 1; scale: 1;
} }
background: var(--background-color-accent); background: var(--background-color-accent);
} }
} }
@ -1297,10 +1307,12 @@
&:hover { &:hover {
outline: 1px solid var(--border-color-accent); outline: 1px solid var(--border-color-accent);
img { img {
transition: all 0.2s; transition: all 0.2s;
scale: 1.3; scale: 1.3;
} }
&::after { &::after {
top: 80px; top: 80px;
right: 0; right: 0;
@ -1411,6 +1423,7 @@
.asset-name { .asset-name {
opacity: 1; opacity: 1;
} }
.asset-image { .asset-image {
scale: 1.2; scale: 1.2;
} }
@ -1424,11 +1437,9 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
font-size: var(--font-size-regular); font-size: var(--font-size-regular);
background: linear-gradient( background: linear-gradient(0deg,
0deg, rgba(37, 24, 51, 0) 0%,
rgba(37, 24, 51, 0) 0%, rgba(52, 41, 61, 0.5) 100%);
rgba(52, 41, 61, 0.5) 100%
);
pointer-events: none; pointer-events: none;
backdrop-filter: blur(8px); backdrop-filter: blur(8px);
opacity: 0; opacity: 0;
@ -1455,10 +1466,12 @@
.skeleton-wrapper { .skeleton-wrapper {
display: flex; display: flex;
.asset-name { .asset-name {
width: 40%; width: 40%;
height: 10px; height: 10px;
} }
.asset { .asset {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -1467,11 +1480,26 @@
.sidebar-left-wrapper, .sidebar-left-wrapper,
.sidebar-right-wrapper { .sidebar-right-wrapper {
height: calc(50vh + 150px); height: calc(54vh + 150px);
transition: height 0.2s ease-in-out; transition: height 0.2s ease-in-out;
.sidebar-left-container {
height: 100%;
.sidebar-left-content-container{
max-height: 80%;
.widget-left-sideBar{
height: 80%;
.widget2D.widgets-wrapper{
min-height: 50vh;
height: 60%;
}
}
}
}
} }
.sidebar-left-wrapper.closed, .sidebar-left-wrapper.closed,
.sidebar-right-wrapper.closed { .sidebar-right-wrapper.closed {
height: 52px; height: 52px;
} }