From 068af3f936f61953b9062102689caeba73f924ac Mon Sep 17 00:00:00 2001 From: Vishnu Date: Mon, 19 May 2025 16:27:58 +0530 Subject: [PATCH] feat: add zone name display in ZoneGroup and update styles for zone-name-wrapper --- app/src/modules/builder/groups/zoneGroup.tsx | 34 ++++++++++++-------- app/src/styles/scene/scene.scss | 22 ++++++++++--- 2 files changed, 37 insertions(+), 19 deletions(-) diff --git a/app/src/modules/builder/groups/zoneGroup.tsx b/app/src/modules/builder/groups/zoneGroup.tsx index 4d884dc..91be7f5 100644 --- a/app/src/modules/builder/groups/zoneGroup.tsx +++ b/app/src/modules/builder/groups/zoneGroup.tsx @@ -16,7 +16,7 @@ import { import { getZonesApi } from "../../../services/factoryBuilder/zones/getZonesApi"; import * as CONSTANTS from "../../../types/world/worldConstants"; -import * as turf from '@turf/turf'; +import * as turf from "@turf/turf"; import { computeArea } from "../functions/computeArea"; import { useSelectedZoneStore } from "../../../store/visualization/useZoneStore"; @@ -526,7 +526,6 @@ const ZoneGroup: React.FC = () => { } }); - return ( @@ -577,6 +576,24 @@ const ZoneGroup: React.FC = () => { ); })} + {!toggleView && ( + +
{zone.zoneName}
+ + )} ))} @@ -597,7 +614,6 @@ const ZoneGroup: React.FC = () => { }} /> ))} - {zones.map((zone: any, index: any) => { @@ -625,7 +641,7 @@ const ZoneGroup: React.FC = () => { const htmlPosition: [number, number, number] = [ center2D[0], avgY + CONSTANTS.zoneConfig.height, - center2D[1] + center2D[1], ]; return ( { /> )} - ); }; export default ZoneGroup; - - - - - - - - - diff --git a/app/src/styles/scene/scene.scss b/app/src/styles/scene/scene.scss index 2265359..81c0451 100644 --- a/app/src/styles/scene/scene.scss +++ b/app/src/styles/scene/scene.scss @@ -1,9 +1,12 @@ @use "../abstracts/variables" as *; @use "../abstracts/mixins" as *; -.distance-text-wrapper { +.distance-text-wrapper, +.zone-name-wrapper, +.pointer-none { pointer-events: none !important; } + .distance-text { pointer-events: none !important; div { @@ -24,11 +27,20 @@ } } -.pointer-none { - pointer-events: none; +.zone-name{ + background: var(--background-color); + padding: 2px 8px; + text-wrap: nowrap; + backdrop-filter: blur(12px); + border-radius: #{$border-radius-medium}; + outline: 1px solid var(--border-color); } -// temp +// +// +// +// +// ------------------------------- temp ----------------------------- .select-floorplane-wrapper { position: absolute; @include flex-center; @@ -52,7 +64,7 @@ border-radius: #{$border-radius-large}; outline: 1px solid var(--border-color); } - .active{ + .active { background: var(--background-color-accent); color: var(--text-button-color); }