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 * 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 (
<group ref={groupsRef} name="zoneGroup">
<group name="zones" visible={!toggleView}>
@ -577,6 +576,24 @@ const ZoneGroup: React.FC = () => {
</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>
@ -597,7 +614,6 @@ const ZoneGroup: React.FC = () => {
}}
/>
))}
</group>
<group name="zoneArea" visible={toggleView}>
{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 (
<Html
@ -683,18 +699,8 @@ const ZoneGroup: React.FC = () => {
/>
)}
</group>
</group>
);
};
export default ZoneGroup;

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

@ -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);
}