v2-ui #83
|
|
@ -38,11 +38,6 @@ export const DraggableWidget = ({
|
|||
setOpenKebabId,
|
||||
selectedZone,
|
||||
setSelectedZone,
|
||||
draggingIndex,
|
||||
setDraggingIndex,
|
||||
hoverIndex,
|
||||
setHoverIndex,
|
||||
side,
|
||||
}: {
|
||||
selectedZone: {
|
||||
zoneName: string;
|
||||
|
|
@ -79,12 +74,6 @@ export const DraggableWidget = ({
|
|||
onReorder: (fromIndex: number, toIndex: number) => void;
|
||||
openKebabId: string | null;
|
||||
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 { selectedChartId, setSelectedChartId } = useWidgetStore();
|
||||
|
|
@ -109,6 +98,8 @@ export const DraggableWidget = ({
|
|||
|
||||
const deleteSelectedChart = async () => {
|
||||
try {
|
||||
console.log("delete");
|
||||
|
||||
const email = localStorage.getItem("email") || "";
|
||||
const organization = email?.split("@")[1]?.split(".")[0];
|
||||
let deleteWidget = {
|
||||
|
|
@ -120,6 +111,7 @@ export const DraggableWidget = ({
|
|||
if (visualizationSocket) {
|
||||
setSelectedChartId(null);
|
||||
visualizationSocket.emit("v2:viz-widget:delete", deleteWidget);
|
||||
console.log("delete widget", selectedChartId);
|
||||
}
|
||||
const updatedWidgets = selectedZone.widgets.filter(
|
||||
(w: Widget) => w.id !== widget.id
|
||||
|
|
@ -141,7 +133,7 @@ export const DraggableWidget = ({
|
|||
// }));
|
||||
// }
|
||||
} catch (error) {
|
||||
echo.error("Failed to delete selected chart");
|
||||
echo.error("Failued to dublicate widgeet");
|
||||
} finally {
|
||||
setOpenKebabId(null);
|
||||
}
|
||||
|
|
@ -206,8 +198,17 @@ export const DraggableWidget = ({
|
|||
...prevZone,
|
||||
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) {
|
||||
echo.error("Failed to dublicate widget");
|
||||
echo.error("Failued to dublicate widgeet");
|
||||
} finally {
|
||||
setOpenKebabId(null);
|
||||
}
|
||||
|
|
@ -242,15 +243,10 @@ export const DraggableWidget = ({
|
|||
}, [setOpenKebabId]);
|
||||
|
||||
const handleDragStart = (event: React.DragEvent<HTMLDivElement>) => {
|
||||
event.dataTransfer.setData("text/plain", index.toString());
|
||||
// selectedZone.zoneId
|
||||
|
||||
setDraggingIndex(index);
|
||||
event.dataTransfer.setData("text/plain", index.toString()); // Store the index of the dragged widget
|
||||
};
|
||||
|
||||
const handleDragEnter = (event: React.DragEvent<HTMLDivElement>) => {
|
||||
event.preventDefault();
|
||||
setHoverIndex(index); // Set where the placeholder should show
|
||||
event.preventDefault(); // Allow drop
|
||||
};
|
||||
|
||||
const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {
|
||||
|
|
@ -259,20 +255,11 @@ export const DraggableWidget = ({
|
|||
|
||||
const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
|
||||
event.preventDefault();
|
||||
const fromIndex = parseInt(event.dataTransfer.getData("text/plain"), 10);
|
||||
const toIndex = index;
|
||||
|
||||
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);
|
||||
onReorder(fromIndex, toIndex); // Call the reorder function passed as a prop
|
||||
}
|
||||
|
||||
setDraggingIndex(null);
|
||||
setHoverIndex(null);
|
||||
};
|
||||
|
||||
const handleDragEnd = () => {
|
||||
setDraggingIndex(null);
|
||||
setHoverIndex(null);
|
||||
};
|
||||
|
||||
// useClickOutside(chartWidget, () => {
|
||||
|
|
@ -284,7 +271,7 @@ export const DraggableWidget = ({
|
|||
// Current: Two identical useEffect hooks for canvas dimensions
|
||||
// Remove the duplicate and keep only one
|
||||
useEffect(() => {
|
||||
const canvas = document.getElementById("work-space-three-d-canvas");
|
||||
const canvas = document.getElementById("real-time-vis-canvas");
|
||||
if (!canvas) return;
|
||||
|
||||
const updateCanvasDimensions = () => {
|
||||
|
|
@ -304,22 +291,6 @@ export const DraggableWidget = ({
|
|||
|
||||
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
|
||||
draggable
|
||||
key={widget.id}
|
||||
|
|
@ -331,7 +302,6 @@ export const DraggableWidget = ({
|
|||
onDragEnter={handleDragEnter}
|
||||
onDragOver={handleDragOver}
|
||||
onDrop={handleDrop}
|
||||
onDragEnd={handleDragEnd}
|
||||
style={{
|
||||
width: ["top", "bottom"].includes(widget.panel)
|
||||
? `calc(${canvasDimensions.width}px / 6)`
|
||||
|
|
@ -343,6 +313,7 @@ export const DraggableWidget = ({
|
|||
ref={chartWidget}
|
||||
onClick={() => {
|
||||
setSelectedChartId(widget);
|
||||
console.log("click");
|
||||
}}
|
||||
>
|
||||
{/* Kebab Icon */}
|
||||
|
|
|
|||
|
|
@ -56,6 +56,7 @@ const Panel: React.FC<PanelProps> = ({
|
|||
setZonesData,
|
||||
waitingPanels,
|
||||
}) => {
|
||||
const { widgetSelect, setWidgetSelect } = useAsset3dWidget();
|
||||
const panelRefs = useRef<{ [side in Side]?: HTMLDivElement }>({});
|
||||
const [panelDimensions, setPanelDimensions] = useState<{
|
||||
[side in Side]?: { width: number; height: number };
|
||||
|
|
@ -68,12 +69,9 @@ const Panel: React.FC<PanelProps> = ({
|
|||
height: 0,
|
||||
});
|
||||
|
||||
const [draggingIndex, setDraggingIndex] = useState<number | null>(null);
|
||||
const [hoverIndex, setHoverIndex] = useState<number | null>(null);
|
||||
|
||||
// Track canvas dimensions
|
||||
useEffect(() => {
|
||||
const canvas = document.getElementById("work-space-three-d-canvas");
|
||||
const canvas = document.getElementById("real-time-vis-canvas");
|
||||
if (!canvas) return;
|
||||
|
||||
const updateCanvasDimensions = () => {
|
||||
|
|
@ -185,7 +183,7 @@ const Panel: React.FC<PanelProps> = ({
|
|||
|
||||
// Add widget to panel
|
||||
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 newWidget = {
|
||||
|
|
@ -306,8 +304,7 @@ const Panel: React.FC<PanelProps> = ({
|
|||
className={`panel-content
|
||||
${waitingPanels === side ? `${side}-closing` : ""}
|
||||
${
|
||||
!hiddenPanels[selectedZone.zoneId]?.includes(side) &&
|
||||
waitingPanels !== side
|
||||
!hiddenPanels[selectedZone.zoneId]?.includes(side) && waitingPanels !== side
|
||||
? `${side}-opening`
|
||||
: ""
|
||||
}
|
||||
|
|
@ -322,7 +319,7 @@ const Panel: React.FC<PanelProps> = ({
|
|||
}}
|
||||
>
|
||||
{selectedZone.widgets
|
||||
.filter((w) => w.panel === "top")
|
||||
.filter((w) => w.panel === side)
|
||||
.map((widget, index) => (
|
||||
<DraggableWidget
|
||||
hiddenPanels={hiddenPanels}
|
||||
|
|
@ -332,15 +329,10 @@ const Panel: React.FC<PanelProps> = ({
|
|||
onReorder={(fromIndex, toIndex) =>
|
||||
handleReorder(fromIndex, toIndex, side)
|
||||
}
|
||||
side={side}
|
||||
openKebabId={openKebabId}
|
||||
setOpenKebabId={setOpenKebabId}
|
||||
selectedZone={selectedZone}
|
||||
setSelectedZone={setSelectedZone}
|
||||
draggingIndex={draggingIndex}
|
||||
setDraggingIndex={setDraggingIndex}
|
||||
hoverIndex={hoverIndex}
|
||||
setHoverIndex={setHoverIndex}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@
|
|||
|
||||
|
||||
width: calc(25% - 14px) !important;
|
||||
height: auto !important;
|
||||
height: 100%;
|
||||
border-radius: #{$border-radius-xlarge};
|
||||
padding: 12px;
|
||||
box-shadow: 0px 2px 10.5px 0px #0000000d;
|
||||
|
|
|
|||
|
|
@ -42,18 +42,22 @@
|
|||
min-width: 32px;
|
||||
border-radius: #{$border-radius-large};
|
||||
position: relative;
|
||||
|
||||
.tooltip {
|
||||
top: 6px;
|
||||
right: -168px;
|
||||
|
||||
&::after {
|
||||
left: 0px;
|
||||
bottom: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
outline: 1px solid var(--border-color);
|
||||
outline-offset: -1px;
|
||||
background: var(--background-color-solid);
|
||||
|
||||
.tooltip {
|
||||
opacity: 1;
|
||||
transform: translateX(2px);
|
||||
|
|
@ -81,6 +85,7 @@
|
|||
|
||||
.sidebar-left-container {
|
||||
min-height: 50vh;
|
||||
max-width: 100%;
|
||||
padding-bottom: 4px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
|
@ -391,6 +396,7 @@
|
|||
.tooltip {
|
||||
top: 6px;
|
||||
right: calc(100% + 6px);
|
||||
|
||||
&::after {
|
||||
left: 100%;
|
||||
bottom: 50%;
|
||||
|
|
@ -411,10 +417,12 @@
|
|||
|
||||
&:hover {
|
||||
outline-color: var(--border-color-accent);
|
||||
|
||||
svg {
|
||||
transition: all 0.2s;
|
||||
scale: 1.1;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
opacity: 1;
|
||||
transform: translateX(-2px);
|
||||
|
|
@ -425,10 +433,12 @@
|
|||
.active {
|
||||
background: var(--background-color-accent);
|
||||
outline: none;
|
||||
|
||||
&:hover {
|
||||
svg {
|
||||
scale: 1;
|
||||
}
|
||||
|
||||
background: var(--background-color-accent);
|
||||
}
|
||||
}
|
||||
|
|
@ -1297,10 +1307,12 @@
|
|||
|
||||
&:hover {
|
||||
outline: 1px solid var(--border-color-accent);
|
||||
|
||||
img {
|
||||
transition: all 0.2s;
|
||||
scale: 1.3;
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: 80px;
|
||||
right: 0;
|
||||
|
|
@ -1411,6 +1423,7 @@
|
|||
.asset-name {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.asset-image {
|
||||
scale: 1.2;
|
||||
}
|
||||
|
|
@ -1424,11 +1437,9 @@
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: var(--font-size-regular);
|
||||
background: linear-gradient(
|
||||
0deg,
|
||||
background: linear-gradient(0deg,
|
||||
rgba(37, 24, 51, 0) 0%,
|
||||
rgba(52, 41, 61, 0.5) 100%
|
||||
);
|
||||
rgba(52, 41, 61, 0.5) 100%);
|
||||
pointer-events: none;
|
||||
backdrop-filter: blur(8px);
|
||||
opacity: 0;
|
||||
|
|
@ -1455,10 +1466,12 @@
|
|||
|
||||
.skeleton-wrapper {
|
||||
display: flex;
|
||||
|
||||
.asset-name {
|
||||
width: 40%;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.asset {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -1467,8 +1480,23 @@
|
|||
|
||||
.sidebar-left-wrapper,
|
||||
.sidebar-right-wrapper {
|
||||
height: calc(50vh + 150px);
|
||||
height: calc(54vh + 150px);
|
||||
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,
|
||||
|
|
|
|||
Loading…
Reference in New Issue