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

feat: add zone name display in ZoneGroup and update styles for zone-name-wrapper

This commit is contained in:
Vishnu 2025-05-19 16:27:58 +05:30
parent bdde20a611
commit 068af3f936
2 changed files with 37 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
app/src/modules/builder/groups/zoneGroup.tsx
View File

@ -16,7 +16,7 @@ import {
import { getZonesApi } from "../../../services/factoryBuilder/zones/getZonesApi"; import { getZonesApi } from "../../../services/factoryBuilder/zones/getZonesApi";
import * as CONSTANTS from "../../../types/world/worldConstants"; 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 { computeArea } from "../functions/computeArea";
import { useSelectedZoneStore } from "../../../store/visualization/useZoneStore"; import { useSelectedZoneStore } from "../../../store/visualization/useZoneStore";
@ -526,7 +526,6 @@ const ZoneGroup: React.FC = () => {
} }
}); });
return ( return (
<group ref={groupsRef} name="zoneGroup"> <group ref={groupsRef} name="zoneGroup">
<group name="zones" visible={!toggleView}> <group name="zones" visible={!toggleView}>
@ -577,6 +576,24 @@ const ZoneGroup: React.FC = () => {
</mesh> </mesh>
); );
})} })}
{!toggleView && (
<Html
// data
key={zone.zoneId}
position={[
zone.viewPortCenter[0],
zone.viewPortCenter[1] + 4,
zone.viewPortCenter[2],
]}
// class
className="zone-name-wrapper"
// other
center
distanceFactor={20}
>
<div className="zone-name">{zone.zoneName}</div>
</Html>
)}
</group> </group>
))} ))}
</group> </group>
@ -597,7 +614,6 @@ const ZoneGroup: React.FC = () => {
}} }}
/> />
))} ))}
</group> </group>
<group name="zoneArea" visible={toggleView}> <group name="zoneArea" visible={toggleView}>
{zones.map((zone: any, index: any) => { {zones.map((zone: any, index: any) => {
@ -625,7 +641,7 @@ const ZoneGroup: React.FC = () => {
const htmlPosition: [number, number, number] = [ const htmlPosition: [number, number, number] = [
center2D[0], center2D[0],
avgY + CONSTANTS.zoneConfig.height, avgY + CONSTANTS.zoneConfig.height,
center2D[1] center2D[1],
]; ];
return ( return (
<Html <Html
@ -683,18 +699,8 @@ const ZoneGroup: React.FC = () => {
/> />
)} )}
</group> </group>
</group> </group>
); );
}; };
export default ZoneGroup; export default ZoneGroup;

22
app/src/styles/scene/scene.scss
View File

@ -1,9 +1,12 @@
@use "../abstracts/variables" as *; @use "../abstracts/variables" as *;
@use "../abstracts/mixins" as *; @use "../abstracts/mixins" as *;
.distance-text-wrapper { .distance-text-wrapper,
.zone-name-wrapper,
.pointer-none {
pointer-events: none !important; pointer-events: none !important;
} }
.distance-text { .distance-text {
pointer-events: none !important; pointer-events: none !important;
div { div {
@ -24,11 +27,20 @@
} }
} }
.pointer-none { .zone-name{
pointer-events: none; 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 { .select-floorplane-wrapper {
position: absolute; position: absolute;
@include flex-center; @include flex-center;
@ -52,7 +64,7 @@
border-radius: #{$border-radius-large}; border-radius: #{$border-radius-large};
outline: 1px solid var(--border-color); outline: 1px solid var(--border-color);
} }
.active{ .active {
background: var(--background-color-accent); background: var(--background-color-accent);
color: var(--text-button-color); color: var(--text-button-color);
} }