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

added dublicate widget function and added missed drag and drop

Browse Source
This commit is contained in:
Nalvazhuthi
2025-03-27 12:24:36 +05:30
parent f1a72e4afb 1bbb210786
commit 7e44ba94ca
23 changed files with 901 additions and 487 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
app/src/components/ui/componets/AddButtons.tsx
View File

@@ -4,6 +4,7 @@ import {
EyeIcon,
LockIcon,
} from "../../icons/RealTimeVisulationIcons";
import { AddIcon } from "../../icons/ExportCommonIcons";
// Define the type for `Side`
type Side = "top" | "bottom" | "left" | "right";
@@ -132,7 +133,9 @@ const AddButtons: React.FC<ButtonsProps> = ({
{(["top", "right", "bottom", "left"] as Side[]).map((side) => (
<div key={side} className={`side-button-container ${side}`}>
<button
className={`side-button ${side}`}
className={`side-button ${side}${
selectedZone.activeSides.includes(side) ? " active" : ""
}`}
onClick={() => handlePlusButtonClick(side)}
title={
selectedZone.activeSides.includes(side)
@@ -140,7 +143,9 @@ const AddButtons: React.FC<ButtonsProps> = ({
: `Activate ${side} panel`
}
>
+
<div className="add-icon">
<AddIcon />
</div>
</button>
{/* Extra Buttons */}

23
app/src/components/ui/componets/DisplayZone.tsx
View File

@@ -1,5 +1,6 @@
import React, { useEffect, useRef, useState, useCallback } from "react";
import { Widget } from "../../../store/useWidgetStore";
import { MoveArrowLeft, MoveArrowRight } from "../../icons/SimulationIcons";
// Define the type for `Side`
type Side = "top" | "bottom" | "left" | "right";
@@ -134,27 +135,16 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
};
return (
<div className="zoon-wrapper">
<div className="zone-wrapper">
{/* Left Arrow */}
{showLeftArrow && (
<button className="arrow left-arrow" onClick={handleScrollLeft}>
{"<"}
<MoveArrowLeft />
</button>
)}
{/* Zones Wrapper */}
<div
ref={containerRef}
className="zones-wrapper"
style={{
display: "flex",
gap: "6px",
padding: "4px",
borderRadius: "8px",
overflowX: "auto",
maxWidth: "calc(100% - 10px)", // Uncomment this line if needed
}}
>
<div ref={containerRef} className="zones-wrapper">
{Object.keys(zonesData).map((zoneName, index) => (
<div
key={index}
@@ -163,7 +153,6 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
}`}
onClick={() => {
console.log("zoneName: ", zoneName);
setSelectedZone({
zoneName,
activeSides: zonesData[zoneName].activeSides || [],
@@ -181,11 +170,11 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
{/* Right Arrow */}
{showRightArrow && (
<button className="arrow right-arrow" onClick={handleScrollRight}>
{">"}
<MoveArrowRight />
</button>
)}
</div>
);
};
export default DisplayZone;
export default DisplayZone;

28
app/src/components/ui/componets/DraggableWidget.tsx
View File

@@ -151,6 +151,26 @@ export const DraggableWidget = ({
};
}, [setOpenKebabId]);
const handleDragStart = (event: React.DragEvent<HTMLDivElement>) => {
event.dataTransfer.setData("text/plain", index.toString()); // Store the index of the dragged widget
};
const handleDragEnter = (event: React.DragEvent<HTMLDivElement>) => {
event.preventDefault(); // Allow drop
};
const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {
event.preventDefault(); // Allow drop
};
const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
event.preventDefault();
const fromIndex = parseInt(event.dataTransfer.getData("text/plain"), 10); // Get the dragged widget's index
const toIndex = index; // The index of the widget where the drop occurred
if (fromIndex !== toIndex) {
onReorder(fromIndex, toIndex); // Call the reorder function passed as a prop
}
};
return (
<>
<div
@@ -160,6 +180,10 @@ export const DraggableWidget = ({
selectedChartId?.id === widget.id && "activeChart"
}`}
onPointerDown={handlePointerDown}
onDragStart={handleDragStart}
onDragEnter={handleDragEnter}
onDragOver={handleDragOver}
onDrop={handleDrop}
style={{
opacity: isPanelHidden ? 0 : 1,
pointerEvents: isPanelHidden ? "none" : "auto",
@@ -174,7 +198,9 @@ export const DraggableWidget = ({
{openKebabId === widget.id && (
<div className="kebab-options" ref={widgetRef}>
<div
className={`edit btn ${isPanelFull(widget.panel) ? "btn-blur" : ""}`}
className={`edit btn ${
isPanelFull(widget.panel) ? "btn-blur" : ""
}`}
onClick={isPanelFull(widget.panel) ? undefined : duplicateWidget}
>
<div className="icon">

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

@@ -123,34 +123,34 @@ const RealTimeVisulization: React.FC = () => {
});
const { selectedZone, setSelectedZone } = useSelectedZoneStore();
// useEffect(() => {
// async function GetZoneData() {
// try {
// const response: { data: Zone[] } | undefined = await getZonesApi(
// "hexrfactory"
// );
useEffect(() => {
async function GetZoneData() {
try {
const response: { data: Zone[] } | undefined = await getZonesApi(
"hexrfactory"
);
// if (!response || !response.data) {
// return;
// }
// const formattedData = response?.data?.reduce<FormattedZoneData>(
// (acc, zone) => {
// acc[zone.zoneName] = {
// activeSides: [],
// panelOrder: [],
// lockedPanels: [],
// zoneCentrePoint: [],
// widgets: [],
// };
// return acc;
// },
// {}
// );
// setZonesData(formattedData);
// } catch (error) { }
// }
// GetZoneData();
// }, []);
if (!response || !response.data) {
return;
}
const formattedData = response?.data?.reduce<FormattedZoneData>(
(acc, zone) => {
acc[zone.zoneName] = {
activeSides: [],
panelOrder: [],
lockedPanels: [],
zoneCentrePoint: [],
widgets: [],
};
return acc;
},
{}
);
setZonesData(formattedData);
} catch (error) { }
}
GetZoneData();
}, []);
useEffect(() => {}, [zonesData]);