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