From 74c1562c3c5d69aada3ab6f37540e3d97e83d37b Mon Sep 17 00:00:00 2001 From: Vishnu Date: Tue, 20 May 2025 10:13:31 +0530 Subject: [PATCH 1/4] feat: improve zone name positioning in ZoneGroup based on polygon center and average height --- app/src/modules/builder/groups/zoneGroup.tsx | 62 ++++++++++++++------ 1 file changed, 44 insertions(+), 18 deletions(-) diff --git a/app/src/modules/builder/groups/zoneGroup.tsx b/app/src/modules/builder/groups/zoneGroup.tsx index 91be7f5..92d9c8b 100644 --- a/app/src/modules/builder/groups/zoneGroup.tsx +++ b/app/src/modules/builder/groups/zoneGroup.tsx @@ -576,24 +576,50 @@ const ZoneGroup: React.FC = () => { ); })} - {!toggleView && ( - -
{zone.zoneName}
- - )} + {!toggleView && + (() => { + const points3D = zone.points || []; + const coords2D = points3D.map((p: any) => [p[0], p[2]]); + + // Ensure the polygon is closed + if ( + coords2D.length >= 3 && + (coords2D[0][0] !== coords2D[coords2D.length - 1][0] || + coords2D[0][1] !== coords2D[coords2D.length - 1][1]) + ) { + coords2D.push(coords2D[0]); + } + + const polygon = turf.polygon([coords2D]); + const center2D = turf.center(polygon).geometry.coordinates; + + // Calculate the average Y value + const sumY = points3D.reduce( + (sum: number, p: any) => sum + p[1], + 0 + ); + const avgY = points3D.length > 0 ? sumY / points3D.length : 0; + + const htmlPosition: [number, number, number] = [ + center2D[0], + avgY + (CONSTANTS.zoneConfig.height || 0) + 1.5, + center2D[1], + ]; + + return ( + +
{zone.zoneName}
+ + ); + })()} ))} From 6ff23e1dd90f2d299581fce07919ac867278a6f8 Mon Sep 17 00:00:00 2001 From: Vishnu Date: Tue, 20 May 2025 15:32:25 +0530 Subject: [PATCH 2/4] fix: correct input value handling in InputWithDropDown component --- app/src/components/ui/inputs/InputWithDropDown.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/src/components/ui/inputs/InputWithDropDown.tsx b/app/src/components/ui/inputs/InputWithDropDown.tsx index c6316d6..f749af7 100644 --- a/app/src/components/ui/inputs/InputWithDropDown.tsx +++ b/app/src/components/ui/inputs/InputWithDropDown.tsx @@ -52,8 +52,8 @@ const InputWithDropDown: React.FC = ({ max={max} step={step} type="number" - // defaultValue={value} - value={value} + defaultValue={value} + // value={value} onChange={(e) => { onChange(e.target.value); }} From 9b3a4e72539b1184b1161f215d9173ac9f3d3795 Mon Sep 17 00:00:00 2001 From: Gomathi9520 Date: Tue, 20 May 2025 15:49:45 +0530 Subject: [PATCH 3/4] Refactor various components: remove console logs, adjust visibility logic, and enhance styling for active list items --- .../properties/ZoneProperties.tsx | 2 +- app/src/components/ui/list/DropDownList.tsx | 1 + app/src/components/ui/list/List.tsx | 82 +++++++++++++++++-- app/src/modules/builder/groups/zoneGroup.tsx | 2 +- .../widgets/3d/Dropped3dWidget.tsx | 77 ++++++++++++----- .../widgets/3d/cards/ProductionCapacity.tsx | 24 +++--- .../widgets/3d/cards/ReturnOfInvestment.tsx | 12 +-- .../widgets/3d/cards/StateWorking.tsx | 4 +- .../widgets/3d/cards/Throughput.tsx | 4 +- .../floating/DroppedFloatingWidgets.tsx | 1 - .../visualization/zone/DisplayZone.tsx | 2 +- app/src/styles/components/lists.scss | 9 ++ 12 files changed, 171 insertions(+), 49 deletions(-) diff --git a/app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx b/app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx index 31c7761..e116c15 100644 --- a/app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx +++ b/app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx @@ -57,7 +57,7 @@ const ZoneProperties: React.FC = () => { }; // Call your API to update the zone let response = await zoneCameraUpdate(zonesdata, organization); - console.log("response: ", response); + // console.log("response: ", response); if (response.message === "updated successfully") { setZones((prevZones: any[]) => prevZones.map((zone) => diff --git a/app/src/components/ui/list/DropDownList.tsx b/app/src/components/ui/list/DropDownList.tsx index 3ec828e..1947138 100644 --- a/app/src/components/ui/list/DropDownList.tsx +++ b/app/src/components/ui/list/DropDownList.tsx @@ -98,6 +98,7 @@ const DropDownList: React.FC = ({ assets: assetsInZone, }; }); + setZoneDataList(updatedZoneList); }, [zones, floorItems]); diff --git a/app/src/components/ui/list/List.tsx b/app/src/components/ui/list/List.tsx index 8ec9dcc..d5db7fb 100644 --- a/app/src/components/ui/list/List.tsx +++ b/app/src/components/ui/list/List.tsx @@ -19,6 +19,7 @@ import { } from "../../../store/builder/store"; import { zoneCameraUpdate } from "../../../services/visulization/zone/zoneCameraUpdation"; import { setFloorItemApi } from "../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi"; +import OuterClick from "../../../utils/outerClick"; interface Asset { id: string; @@ -43,13 +44,14 @@ const List: React.FC = ({ items = [], remove }) => { const { activeModule } = useModuleStore(); const { selectedZone, setSelectedZone } = useSelectedZoneStore(); const { zoneAssetId, setZoneAssetId } = useZoneAssetId(); - const { zones } = useZones(); + const { zones, setZones } = useZones(); const { setSubModule } = useSubModuleStore(); const [expandedZones, setExpandedZones] = useState>( {} ); const { setFloorItems } = useFloorItems(); + useEffect(() => { useSelectedZoneStore.getState().setSelectedZone({ zoneName: "", @@ -82,7 +84,6 @@ const List: React.FC = ({ items = [], remove }) => { const organization = email?.split("@")[1]?.split(".")[0] ?? ""; let response = await getZoneData(id, organization); - setSelectedZone({ zoneName: response?.zoneName, activeSides: response?.activeSides ?? [], @@ -125,6 +126,14 @@ const List: React.FC = ({ items = [], remove }) => { const response = await zoneCameraUpdate(zonesdata, organization); if (response.message === "updated successfully") { setSelectedZone((prev) => ({ ...prev, zoneName: newName })); + + setZones((prevZones: any[]) => + prevZones.map((zone) => + zone.zoneId === selectedZone.zoneId + ? { ...zone, zoneName: newName } + : zone + ) + ); } } @@ -138,7 +147,7 @@ const List: React.FC = ({ items = [], remove }) => { zoneAssetId.id, newName ); - console.log("response: ", response); + // console.log("response: ", response); setFloorItems((prevFloorItems: any[]) => prevFloorItems.map((floorItems) => floorItems.modelUuid === zoneAssetId.id @@ -156,6 +165,69 @@ const List: React.FC = ({ items = [], remove }) => { ); }; + useEffect(() => { + let drag = false; + let isLeftMouseDown = false; + + const contextClassNames = ["list-wrapper", "zone-properties-container", "list-container"]; + + const isOutsideClick = (target: EventTarget | null) => { + if (!(target instanceof HTMLElement)) return true; + return !contextClassNames.some(className => + target.closest(`.${className}`) + ); + }; + + const onMouseDown = (evt: MouseEvent) => { + if (evt.button === 0) { + isLeftMouseDown = true; + drag = false; + } + }; + + const onMouseMove = () => { + if (isLeftMouseDown) { + drag = true; + } + }; + + const onMouseUp = (evt: MouseEvent) => { + if (evt.button === 0) { + isLeftMouseDown = false; + if (drag) return; + + if (isOutsideClick(evt.target)) { + // Clear selected zone + setSelectedZone({ + zoneId: '', + zoneName: '', + activeSides: [], + panelOrder: [], + lockedPanels: [], + widgets: [], + zoneViewPortTarget: [], + zoneViewPortPosition: [] + }); + setZoneAssetId({ + id: '', + name: '', + }); + } + } + }; + + document.addEventListener('mousedown', onMouseDown); + document.addEventListener('mousemove', onMouseMove); + document.addEventListener('mouseup', onMouseUp); + + return () => { + document.removeEventListener('mousedown', onMouseDown); + document.removeEventListener('mousemove', onMouseMove); + document.removeEventListener('mouseup', onMouseUp); + }; + }, []); + + return ( <> {items?.length > 0 ? ( @@ -169,7 +241,7 @@ const List: React.FC = ({ items = [], remove }) => { toggleZoneExpansion(item.id); }} > -
+