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

updated realTimeViz panel style

This commit is contained in:
Nalvazhuthi 2025-04-07 18:27:01 +05:30
parent e23b580a14 1eec500955
commit b24e4583d7
8 changed files with 35 additions and 56 deletions
app/src
components
layout/sidebarLeft
Outline.tsx
ui/componets
DraggableWidget.tsx
modules/scene/controls/selection
boundingBoxHelper.tsxcopyPasteControls.tsxduplicationControls.tsxrotateControls.tsx
services/factoryBuilder/assest/assets
getCategoryAsset.ts
styles/pages
realTimeViz.scss

2
app/src/components/layout/sidebarLeft/Outline.tsx
View File

@ -12,7 +12,7 @@ const Outline: React.FC = () => {
const dropdownItems = [
{ id: "1", name: "Ground Floor" },
{ id: "2", name: "Floor 1" },
// { id: "2", name: "Floor 1" },
]; // Example dropdown items
return (

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

@ -98,14 +98,14 @@ export const DraggableWidget = ({
widgetID: widget.id,
organization: organization,
};
console.log("deleteWidget: ", deleteWidget);
if (visualizationSocket) {
visualizationSocket.emit("v2:viz-widget:delete", deleteWidget);
}
const updatedWidgets = selectedZone.widgets.filter(
(w: Widget) => w.id !== widget.id
);
console.log("updatedWidgets: ", updatedWidgets);
setSelectedZone((prevZone: any) => ({
...prevZone,
widgets: updatedWidgets,
@ -250,55 +250,30 @@ export const DraggableWidget = ({
height: 0,
});
// Track canvas dimensions
useEffect(() => {
const canvas = document.getElementById("real-time-vis-canvas");
if (!canvas) return;
const updateCanvasDimensions = () => {
const rect = canvas.getBoundingClientRect();
setCanvasDimensions({
width: rect.width,
height: rect.height,
});
};
// Initial measurement
updateCanvasDimensions();
// Current: Two identical useEffect hooks for canvas dimensions
// Remove the duplicate and keep only one
useEffect(() => {
const canvas = document.getElementById("real-time-vis-canvas");
if (!canvas) return;
// Set up ResizeObserver to track changes
const resizeObserver = new ResizeObserver(updateCanvasDimensions);
resizeObserver.observe(canvas);
const updateCanvasDimensions = () => {
const rect = canvas.getBoundingClientRect();
setCanvasDimensions({
width: rect.width,
height: rect.height,
});
};
return () => {
resizeObserver.unobserve(canvas);
};
}, []);
updateCanvasDimensions();
const resizeObserver = new ResizeObserver(updateCanvasDimensions);
resizeObserver.observe(canvas);
useEffect(() => {
const canvas = document.getElementById("real-time-vis-canvas");
if (!canvas) return;
return () => resizeObserver.unobserve(canvas);
}, []);
const updateCanvasDimensions = () => {
const rect = canvas.getBoundingClientRect();
setCanvasDimensions({
width: rect.width,
height: rect.height,
});
};
// Initial measurement
updateCanvasDimensions();
// Set up ResizeObserver to track changes
const resizeObserver = new ResizeObserver(updateCanvasDimensions);
resizeObserver.observe(canvas);
return () => {
resizeObserver.unobserve(canvas);
};
}, []);
console.log("selectedChartId: ", widget);
return (
<>
<style>
@ -418,4 +393,4 @@ export const DraggableWidget = ({
);
};
// in style if widget .panel is top or bottom set width if left or right set height
// while resize calculate --realTimeViz-container-height pprperly

4
app/src/modules/scene/controls/selection/boundingBoxHelper.tsx
View File

@ -44,11 +44,13 @@ const BoundingBox = ({ boundingBoxRef }: any) => {
};
}, [selectedAssets]);
const savedTheme: string | null = localStorage.getItem("theme") || "light";
return (
<>
{points.length > 0 && (
<>
<Line points={points} color="yellow" lineWidth={2.5} segments />
<Line points={points} color={savedTheme === "dark" ? "#c4abf1" : "#6f42c1"} lineWidth={2.7} segments />
<mesh ref={boundingBoxRef} visible={false} position={boxProps.position}>
<boxGeometry args={boxProps.args} />
<meshBasicMaterial />

1
app/src/modules/scene/controls/selection/copyPasteControls.tsx
View File

@ -354,6 +354,7 @@ const CopyPasteControls = ({ itemsGroupRef, copiedObjects, setCopiedObjects, pas
}
obj.userData.modeluuid = newFloorItem.modeluuid;
itemsGroupRef.current.add(obj);
}
});

1
app/src/modules/scene/controls/selection/duplicationControls.tsx
View File

@ -336,6 +336,7 @@ const DuplicationControls = ({ itemsGroupRef, duplicatedObjects, setDuplicatedOb
}
obj.userData.modeluuid = newFloorItem.modeluuid;
itemsGroupRef.current.add(obj);
}
});

2
app/src/modules/scene/controls/selection/rotateControls.tsx
View File

@ -185,6 +185,7 @@ function RotateControls({ rotatedObjects, setRotatedObjects, movedObjects, setMo
});
let eventData: Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | undefined = simulationStates.find((events) => events.modeluuid === obj.userData.modeluuid);
console.log('eventData: ', eventData);
const email = localStorage.getItem("email");
const organization = email ? email.split("@")[1].split(".")[0] : "default";
@ -232,6 +233,7 @@ function RotateControls({ rotatedObjects, setRotatedObjects, movedObjects, setMo
newEventData.modelName = newFloorItem.modelname;
newEventData.position = newFloorItem.position;
newEventData.rotation = [obj.rotation.x, obj.rotation.y, obj.rotation.z];
console.log('newEventData: ', newEventData);
setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema)[]) => {
const updatedEvents = (prevEvents || []).map(event =>

3
app/src/services/factoryBuilder/assest/assets/getCategoryAsset.ts
View File

@ -1,8 +1,7 @@
let BackEnd_url = `http://${process.env.REACT_APP_SERVER_MARKETPLACE_URL}`;
export const getCategoryAsset = async (categoryName: any) => {
try {
const response = await fetch(
`${BackEnd_url}/api/v2/getCategoryAssets/${categoryName}`,
const response = await fetch(`${BackEnd_url}/api/v2/getCategoryAssets/${categoryName}`,
{
method: "GET",
headers: {

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

@ -117,6 +117,7 @@
.zone-wrapper.bottom {
bottom: calc(var(--realTimeViz-container-height) * 0.27);
bottom: 200px;
}
.content-container {
@ -306,7 +307,7 @@
.chart-container {
min-width: 150px;
min-width: 160px;
}
}
}
@ -346,11 +347,8 @@
.chart-container {
width: 100%;
min-height: 150px;
min-height: 160px;
max-height: 100%;
// border: 1px dashed var(--background-color-gray);
border-radius: 8px;
box-shadow: var(--box-shadow-medium);
padding: 6px 0;
@ -370,7 +368,8 @@
.playingFlase {
.zone-wrapper.bottom {
bottom: calc(var(--realTimeViz-container-height) * 0.25);
bottom: calc(var(--realTimeViz-container-height) * 0.3);
bottom: 210px;
}
}