@eturnity/eturnity_3d 9.31.0 → 9.31.1-9.25-dev-03.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eturnity/eturnity_3d",
   "private": false,
-  "version": "9.31.0",
+  "version": "9.31.1-9.25-dev-03.0",
   "files": [
     "dist",
     "src"
@@ -16,7 +16,7 @@
     "merge-remote-master": "node scripts/merge-remote-master.js"
   },
   "dependencies": {
-    "@eturnity/eturnity_maths": "9.31.0",
+    "@eturnity/eturnity_maths": "9.31.0-9.25-dev-03.0",
     "@originjs/vite-plugin-commonjs": "1.0.3",
     "core-js": "3.30.2",
     "cors": "2.8.5",

package/src/Overlay/ThreeDModelOverlay.js

@@ -66,28 +66,31 @@ export default class ThreeDModelOverlay extends Overlay {
         threeJSComponent.scene.add(waitingBall)
       }
       threeJSComponent.meshes.overlayMeshes[this.id] = waitingBall
-      this.hasPlaceholderMesh = true
       return
     }
-    let meshId = this.id
+    // Each canvas renders its own clone: an Object3D belongs to a single scene,
+    // so sharing this.overlayMesh made one canvas steal (and later dispose) the
+    // mesh another canvas was still rendering. this.overlayMesh stays a load
+    // cache and is never added to a scene.
     let overlayMesh = threeJSComponent.meshes.overlayMeshes[this.id]
-    if (this.hasPlaceholderMesh) {
-      threeJSComponent.clearMeshFromScene(overlayMesh, threeJSComponent.scene)
+    if (overlayMesh && overlayMesh.name == 'waitingBall') {
+      // Placeholder spheres are per-canvas objects, so disposing them is safe.
+      threeJSComponent.scene.remove(overlayMesh)
+      threeJSComponent.disposeMesh(overlayMesh)
+      delete threeJSComponent.meshes.overlayMeshes[this.id]
       overlayMesh = null
-      this.hasPlaceholderMesh = false
     }
-    if (!overlayMesh && this.overlayMesh) {
-      threeJSComponent.meshes.overlayMeshes[this.id] = this.overlayMesh
-      overlayMesh = this.overlayMesh
-      overlayMesh.children.forEach((mesh) => {
+    if (!overlayMesh) {
+      if (!this.overlayMesh) {
+        this.overlayMesh = await this.loadFile()
+      }
+      this.overlayMesh.children.forEach((mesh) => {
         mesh.position.set(-this.boxCenter.x, -this.boxCenter.y, 0)
       })
+      overlayMesh = this.overlayMesh.clone(true)
+      threeJSComponent.meshes.overlayMeshes[this.id] = overlayMesh
       threeJSComponent.scene.add(overlayMesh)
     }
-    if (!overlayMesh) {
-      overlayMesh = await this.loadFile()
-      threeJSComponent.meshes.overlayMeshes[meshId] = overlayMesh
-    }
     const positionOffset = multiplyVector(1 / 1000, this.positionOffset)
     overlayMesh.position.set(0, 0, 0)
     overlayMesh.rotateZ(-overlayMesh.rotation.z)
@@ -104,9 +107,13 @@ export default class ThreeDModelOverlay extends Overlay {
       threeJSComponent.render()
     }
 
-    this.overlayMesh = overlayMesh
-    this.overlayMesh.frustumCulled = false
-    this.set3DObjectMaterialOpacity(this.overlayMesh)
+    overlayMesh.frustumCulled = false
+    this.set3DObjectMaterialOpacity(overlayMesh)
+    // Keep the master aligned with the rendered clones: it is still what
+    // getProjectedPlanesOnOverlay raycasts and what bounding-box consumers
+    // measure.
+    this.overlayMesh.position.copy(overlayMesh.position)
+    this.overlayMesh.rotation.copy(overlayMesh.rotation)
     return overlayMesh
   }
   renderOnPaperJS(paperJSComponent) {

package/src/components/ThreeCanvasViewer.vue

@@ -26,7 +26,6 @@
         layers: null,
         provider: null,
         pointer: { x: 0, y: 0 },
-        areUserDeactivatedPanelsVisible: false,
         animationFrameId: null,
         intervalId: null,
         intervalEventId: null,
@@ -55,7 +54,6 @@
         obstacles: 'getObstacles',
         moduleFields: 'getModuleFields',
         panels: 'getPanels',
-        userDeactivatedPanels: 'getUserDeactivatedPanels',
       }),
     },
     watch: {

package/src/config.js

@@ -8,6 +8,7 @@ export const mmTolerance = 5
 export const mmTolerance3dNode = 50
 export const earthRadius = 6371008
 export const marginAroundBuildingForCameraViewInMeter = 5
+export const DEFAULT_FOV = 50
 export const layerColors = {
   construction: {
     fillColor: 'transparent',
@@ -49,11 +50,6 @@ export const layerColors = {
     strokeColor: '#ffffff',
     strokeWidth: 1,
   },
-  user_deactivated_panel: {
-    fillColor: 'rgba(115, 115, 229, 0.1)',
-    strokeColor: 'white',
-    strokeWidth: 2,
-  },
   selectedPanel: {
     fillColor: '#0068DE80',
     strokeColor: theme.colors.blue,
@@ -126,11 +122,6 @@ export const layerColors = {
     strokeColor: theme.colors.blueElectric,
     strokeWidth: 5,
   },
-  tmpModuleField: {
-    fillColor: 'rgba(115, 115, 229, 0.2)',
-    strokeColor: theme.colors.blue,
-    strokeWidth: 1,
-  },
   selectedModuleField: {
     fillColor: '#0068DEA0',
     strokeColor: theme.colors.blue,

package/src/helper/UpdateRoofModuleFieldRelations.js

@@ -9,35 +9,51 @@ import {
 } from '@eturnity/eturnity_maths'
 import { defaultTextureColorMap, fittingPanelsColorMap } from '../config'
 //this function just update the "roof" and "moduleField(s)" properties of panels,moduleFields and roofs
+// The roof underneath an outline: biggest footprint overlap wins, ties go to
+// the smaller roof. Returns null when no roof intersects the outline.
+export function findRoofWithBiggestOverlap(roofs, outline) {
+  const intersections = []
+  roofs.forEach((roof) => {
+    const intersection = intersectOutlines(roof.outline, outline)
+    if (intersection.length) {
+      const intersectionArea = intersection.reduce(
+        (acc, cur) => acc + calculateArea(cur),
+        0
+      )
+      intersections.push({ roof, intersectionArea })
+    }
+  })
+  intersections.sort((a, b) => a.roof.area - b.roof.area)
+  intersections.sort((a, b) => b.intersectionArea - a.intersectionArea)
+  return intersections.length ? intersections[0].roof : null
+}
+
 export function UpdateRoofModuleFieldRelations(state) {
   let moduleFields = state.polygons.filter(
     (poly) => poly.layer == 'moduleField'
   )
   let roofs = state.polygons.filter((poly) => poly.layer == 'roof')
   const panels = state.polygons.filter((poly) =>
-    ['panel', 'user_deactivated_panel'].includes(poly.layer)
+    ['panel'].includes(poly.layer)
   )
-
   let roofUnderPerModuleFieldId = {}
   moduleFields.forEach((moduleField) => {
-    let roofModuleFieldIntersections = []
-    roofs.forEach((roof) => {
-      let intersection = intersectOutlines(roof.outline, moduleField.outline)
-      if (intersection.length) {
-        const intersectionArea = intersection.reduce((acc, cur) => {
-          acc += calculateArea(cur)
-          return acc
-        }, 0)
-        roofModuleFieldIntersections.push({ roof, intersectionArea })
-      }
-    })
-    roofModuleFieldIntersections.sort((a, b) => a.roof.area - b.roof.area)
-    roofModuleFieldIntersections.sort(
-      (a, b) => b.intersectionArea - a.intersectionArea
-    )
-    if (roofModuleFieldIntersections.length) {
-      roofUnderPerModuleFieldId[moduleField.id] =
-        roofModuleFieldIntersections[0].roof
+    // A module field keeps its roof for as long as that roof exists (matched
+    // by id: polygons are recreated on hydration, so the reference may be
+    // stale). It is only reassigned — to the roof it overlaps most — when its
+    // previous roof was deleted. Flows that deliberately move a field to
+    // another roof (drag replant, MoveModuleFields) set moduleField.roof
+    // themselves before the relations update.
+    const previousRoof = moduleField.roof
+      ? roofs.find((roof) => roof.id == moduleField.roof.id)
+      : null
+    if (previousRoof) {
+      roofUnderPerModuleFieldId[moduleField.id] = previousRoof
+      return
+    }
+    const roofUnder = findRoofWithBiggestOverlap(roofs, moduleField.outline)
+    if (roofUnder) {
+      roofUnderPerModuleFieldId[moduleField.id] = roofUnder
     }
   })
   roofs.forEach((roof) => (roof.moduleFields = []))
@@ -47,6 +63,11 @@ export function UpdateRoofModuleFieldRelations(state) {
   moduleFields.forEach((moduleField) => {
     let roof = roofUnderPerModuleFieldId[moduleField.id]
     if (roof) {
+      if (moduleField.hasError) {
+        moduleField.hasError = false
+        moduleField.warnings = []
+        moduleField.hasWarnings = false
+      }
       moduleField.roof = roof
       roof.moduleFields.push(moduleField)
       panels.forEach((panel) => {
@@ -54,6 +75,13 @@ export function UpdateRoofModuleFieldRelations(state) {
           panel.roof = roof
         }
       })
+    } else if (moduleField.panels && moduleField.panels.length > 0) {
+      moduleField.roof = null
+      if (!moduleField.hasError) {
+        moduleField.hasError = true
+        moduleField.warnings = ['module_field_warning_roof_missing']
+        moduleField.hasWarnings = true
+      }
     }
   })
   state = removeModuleFieldAndPanelsOnNoOrMultipleRoofs(state)
@@ -65,36 +93,46 @@ export function removeModuleFieldAndPanelsOnNoOrMultipleRoofs(state) {
     ['roof', 'obstacle'].includes(polygon.layer)
   )
   const remainingModuleFields = state.polygons.filter(
-    (polygon) => polygon.layer == 'moduleField' && !!polygon.roof
+    (polygon) =>
+      polygon.layer == 'moduleField' && (!!polygon.roof || polygon.hasError)
   )
-  const remainingPanels = state.polygons.filter(
-    (polygon) => polygon.layer == 'panel' && !!polygon.roof
+  const retainedModuleFieldIds = new Set(
+    remainingModuleFields.map((mf) => mf.id)
   )
-  const remainingUserDeactivatedPanels = state.polygons.filter(
-    (polygon) => polygon.layer == 'user_deactivated_panel' && !!polygon.roof
+  const remainingPanels = state.polygons.filter(
+    (polygon) =>
+      polygon.layer == 'panel' &&
+      (!!polygon.roof || retainedModuleFieldIds.has(polygon.moduleField?.id))
   )
-
   state.polygons = [
     ...remainingPolygons,
     ...remainingModuleFields,
     ...remainingPanels,
-    ...remainingUserDeactivatedPanels,
   ]
   return state
 }
 
 export function updateModuleFieldFittingPanels(moduleField) {
+  const { has_fitting_panels, fitting_panel_area_m2 } = moduleField.data || {}
+  if (!(has_fitting_panels && fitting_panel_area_m2 > 0)) {
+    delete moduleField.fittingPanels
+    return
+  }
+  clipModuleFieldFittingPanels(moduleField)
+}
+
+export function clipModuleFieldFittingPanels(moduleField) {
+  const prevVisible = moduleField?.fittingPanels?.visible
   delete moduleField.fittingPanels
-  const { has_fitting_panels, fitting_panel_area_m2 } = moduleField.data
-  const hasFittingPanels = has_fitting_panels && fitting_panel_area_m2 > 0
-  if (!hasFittingPanels) return
-  const polygons = []
+  if (!moduleField?.panels?.length) return
+  if (!moduleField?.roof || !moduleField.data?.has_fitting_panels) return
+  const innerOutline = moduleField.roof.margins?.innerOutline
+  if (!innerOutline?.length) return
 
-  const outlines = getModuleFieldRoofIntersections(
-    moduleField,
-    moduleField.roof.margins.innerOutline
-  )
+  const outlines = getModuleFieldRoofIntersections(moduleField, innerOutline)
+  if (!outlines?.length) return
   const holes = getModuleFieldHoleOutlines(moduleField)
+  const polygons = []
 
   outlines.forEach((outline) => {
     polygons.push({
@@ -105,6 +143,7 @@ export function updateModuleFieldFittingPanels(moduleField) {
         .filter(Boolean),
     })
   })
+  if (!polygons.length) return
 
   const hasCustomTexture = !!moduleField.pvData?.texture_img_url
   const defaultTextureIndex = moduleField.pvData?.module_texture_version_id || 0
@@ -115,7 +154,7 @@ export function updateModuleFieldFittingPanels(moduleField) {
 
   moduleField.fittingPanels = {
     polygons,
-    visible: true,
+    visible: prevVisible !== false,
     color: mappedColor,
   }
 }

package/src/helper/cameraMixin.js

@@ -6,13 +6,21 @@ import {
   multiplyVector,
   substractVector,
 } from '@eturnity/eturnity_maths'
-import { marginAroundBuildingForCameraViewInMeter } from '../config'
+import {
+  DEFAULT_FOV,
+  marginAroundBuildingForCameraViewInMeter,
+} from '../config'
 import OverlayLayer from '../Overlay/OverlayLayer'
 export default {
   data() {
     return {
       animationFrameId: null,
-      perspectiveCamera: new THREE.PerspectiveCamera(80, 300 / 300, 1, 50000),
+      perspectiveCamera: new THREE.PerspectiveCamera(
+        DEFAULT_FOV,
+        300 / 300,
+        1,
+        50000
+      ),
       orthographicCamera: new THREE.OrthographicCamera(
         -50,
         50,
@@ -398,7 +406,7 @@ export default {
     },
     setCameraInitialPosition() {
       if (this.roofs.length == 0) return
-      let newFov = 50
+      let newFov = DEFAULT_FOV
       if (
         this.roofsBounds.xMax === Infinity ||
         this.roofsBounds.xMin === -Infinity ||
@@ -462,7 +470,7 @@ export default {
       if (this.camera.isOrthographicCamera) {
         this.setOrthographicCameraGlobalPosition()
       } else {
-        let newFov = 50
+        let newFov = DEFAULT_FOV
         let bounds = this.roofsBounds
         if (
           bounds.xMax === Infinity ||
@@ -618,7 +626,7 @@ export default {
       const {
         position,
         target,
-        fov = 50,
+        fov = DEFAULT_FOV,
         duration = 1500,
         callback = () => {},
       } = payload
@@ -713,7 +721,9 @@ export default {
               callback()
             })
         } else {
-          this.camera.up = { x: 0, y: 0, z: 1 }
+          // must stay a real Vector3: OrbitControls' zoomToCursor calls
+          // camera.up.dot() on wheel zoom (a plain object crashes it)
+          this.camera.up = new THREE.Vector3(0, 0, 1)
           this.tweenCamera = new TWEEN.Tween(currentTweenVar)
             .to({ t: 1 }, duration)
             .easing(TWEEN.Easing.Sinusoidal.Out)
@@ -778,7 +788,7 @@ export default {
     },
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     TWEEN.removeAll()
     cancelAnimationFrame(this.animationFrameId)
   },

package/src/helper/materialMixin.js

@@ -80,13 +80,6 @@ export default {
         flatShading: true,
       })
     }
-    this.material.panel['userDeactivatedPanel'] = new THREE.MeshBasicMaterial({
-      color: 0xffffff,
-      transparent: true,
-      alphaTest: 0,
-      opacity: 0.2,
-      side: THREE.DoubleSide,
-    })
     this.material.projectionTiles = []
 
     this.material.roof = [this.material.wall]

package/src/helper/render/clear.js

@@ -33,7 +33,13 @@ export default {
         return
       }
       scene.remove(mesh)
-      this.disposeMesh(mesh)
+      // Overlay meshes are per-canvas clones sharing geometry/material with the
+      // overlay's master mesh and with the other canvases' clones: disposing
+      // here would blank the overlay on every other canvas. Scene removal plus
+      // registry delete only; the master's resources go with the overlay.
+      if (mesh.userData.type != 'overlayMeshes') {
+        this.disposeMesh(mesh)
+      }
       if (
         mesh.userData.meshId &&
         this.meshes[mesh.userData.type][mesh.userData.meshId]

package/src/helper/render/edge.js

@@ -48,6 +48,7 @@ export default {
         if (cylinder) {
           cylinder.visible = false
         }
+        if (edge.layer === 'moduleField') return
         if (['obstacle', 'construction'].includes(edge.layer)) return
         if (
           ['selectRoof'].includes(this.selectedTool) &&

package/src/helper/render/index.js

@@ -18,6 +18,7 @@ import mergedGeometry from './mergedGeometry'
 import building from './building'
 import marker from './marker'
 import scene from './scene'
+import pullHandle from './pullHandle'
 export default {
   mixins: [
     margin,
@@ -40,5 +41,6 @@ export default {
     building,
     marker,
     scene,
+    pullHandle,
   ],
 }

package/src/helper/render/moduleField.js

@@ -3,6 +3,7 @@ import {
   getBufferModuleFieldGeometry,
   getFittingPanelsBufferGeometry,
 } from './geometryHandler'
+import { clipModuleFieldFittingPanels } from '../UpdateRoofModuleFieldRelations'
 
 export default {
   data() {
@@ -11,35 +12,149 @@ export default {
     }
   },
   methods: {
+    refreshModuleFieldFittingPanels(moduleFieldId = null) {
+      this.polygons
+        .filter((p) => p.layer === 'moduleField')
+        .forEach((moduleField) => {
+          if (
+            moduleField.data &&
+            (moduleFieldId == null || moduleField.id == moduleFieldId)
+          ) {
+            clipModuleFieldFittingPanels(moduleField)
+          }
+        })
+      this.renderModuleFields()
+    },
     renderModuleFields() {
-      this.clearByType('moduleFieldsMeshes')
-      const moduleFieldPolygons = this.polygons.filter((p) =>
-        ['moduleField', 'tmpModuleField'].includes(p.layer)
+      console.log('renderModuleFields')
+      this.clearRemovedModuleFieldGroups()
+      const moduleFieldPolygons = this.polygons.filter(
+        (p) => p.layer === 'moduleField'
       )
       moduleFieldPolygons.forEach((moduleFieldPolygon) => {
-        const panelOverrideMesh =
-          this.renderModuleFieldPanelOverride(moduleFieldPolygon)
-        const fittingPanelsMesh =
-          this.renderModuleFieldFittingPanels(moduleFieldPolygon)
+        let group = this.meshes.moduleFieldsMeshes[moduleFieldPolygon.id]
+        if (!group) {
+          group = new THREE.Group()
+          group.matrixAutoUpdate = false
+          group.userData.type = 'moduleFieldsMeshes'
+          group.userData.layer = moduleFieldPolygon.layer
+          group.userData.meshId = moduleFieldPolygon.id
+          group.userData.polygonId = moduleFieldPolygon.id
+          this.scene.add(group)
+          this.meshes.moduleFieldsMeshes[moduleFieldPolygon.id] = group
+        }
 
-        if (!panelOverrideMesh && !fittingPanelsMesh) return
+        this.updateModuleFieldPanelOverrideMesh(group, moduleFieldPolygon)
+        this.updateModuleFieldFittingPanelsMesh(group, moduleFieldPolygon)
 
-        const meshList = [panelOverrideMesh, fittingPanelsMesh]
-        const group = new THREE.Group()
-        meshList.forEach((mesh) => {
-          if (mesh) group.add(mesh)
-        })
-        group.matrixAutoUpdate = false
         group.userData.version = moduleFieldPolygon.version
-        group.userData.type = 'moduleFieldsMeshes'
-        group.userData.layer = moduleFieldPolygon.layer
-        group.userData.meshId = moduleFieldPolygon.id
-        group.userData.polygonId = moduleFieldPolygon.id
         group.visible = this.areModuleFieldsVisible && this.panelOpacity === 1
-        this.scene.add(group)
-        this.meshes.moduleFieldsMeshes[moduleFieldPolygon.id] = group
+
+        if (group.children.length === 0) {
+          this.scene.remove(group)
+          delete this.meshes.moduleFieldsMeshes[moduleFieldPolygon.id]
+        }
+      })
+    },
+    clearRemovedModuleFieldGroups() {
+      Object.values(this.meshes.moduleFieldsMeshes).forEach((group) => {
+        if (!this.polygonIds.includes(group.userData.polygonId)) {
+          this.disposeModuleFieldGroupChildren(group)
+          this.scene.remove(group)
+          delete this.meshes.moduleFieldsMeshes[group.userData.meshId]
+        }
+      })
+    },
+    disposeModuleFieldGroupChildren(group) {
+      group.children.forEach((child) => {
+        if (child.geometry?.dispose) child.geometry.dispose()
+        if (
+          child.userData.type === 'moduleFieldsMeshes_fittingPanels' &&
+          child.material?.dispose
+        ) {
+          child.material.dispose()
+        }
+      })
+    },
+    updateModuleFieldPanelOverrideMesh(group, moduleFieldPolygon) {
+      const type = 'moduleFieldsMeshes_panelOverride'
+      let mesh = group.children.find((c) => c.userData.type === type)
+      const shouldExist = !!moduleFieldPolygon?.data?.number_of_panels_override
+
+      if (!shouldExist) {
+        if (mesh) {
+          group.remove(mesh)
+          if (mesh.geometry?.dispose) mesh.geometry.dispose()
+        }
+        return
+      }
+
+      if (!mesh) {
+        mesh = this.renderModuleFieldPanelOverride(moduleFieldPolygon)
+        if (mesh) group.add(mesh)
+        return
+      }
+
+      if (mesh.userData.version < moduleFieldPolygon.version) {
+        const geometry = getBufferModuleFieldGeometry(moduleFieldPolygon)
+        if (geometry) {
+          if (mesh.geometry?.dispose) mesh.geometry.dispose()
+          mesh.geometry = geometry
+          mesh.userData.version = moduleFieldPolygon.version
+          mesh.updateMatrix()
+        }
+      }
+    },
+    updateModuleFieldFittingPanelsMesh(group, moduleFieldPolygon) {
+      const type = 'moduleFieldsMeshes_fittingPanels'
+      let mesh = group.children.find((c) => c.userData.type === type)
+      const fittingPanels = moduleFieldPolygon?.fittingPanels
+
+      const removeMesh = () => {
+        if (mesh) {
+          group.remove(mesh)
+          if (mesh.geometry?.dispose) mesh.geometry.dispose()
+          if (mesh.material?.dispose) mesh.material.dispose()
+        }
+      }
+
+      if (!fittingPanels?.polygons?.length) {
+        removeMesh()
+        return
+      }
+
+      if (!mesh) {
+        mesh = this.renderModuleFieldFittingPanels(moduleFieldPolygon)
+        if (mesh) group.add(mesh)
         return
+      }
+
+      const { polygons, visible, color } = fittingPanels
+      const geometries = []
+      polygons.forEach((polygon) => {
+        const geometry = getFittingPanelsBufferGeometry(
+          polygon.outline,
+          polygon.holes,
+          moduleFieldPolygon
+        )
+        if (geometry) geometries.push(geometry)
       })
+
+      if (!geometries.length) {
+        removeMesh()
+        return
+      }
+
+      mesh.geometry = this.updateMergedGeometry(geometries, mesh.geometry)
+      const isTransparent = color === 'transparent'
+      mesh.material.color.set(isTransparent ? '#ffffff' : color)
+      mesh.material.transparent = true
+      mesh.material.opacity = isTransparent ? 0.2 : 0.8
+      mesh.material.needsUpdate = true
+      mesh.userData.fittingPanelsVisible = visible
+      mesh.userData.version = moduleFieldPolygon.version
+      mesh.visible =
+        visible && this.areModuleFieldsVisible && this.panelOpacity === 1
     },
     renderModuleFieldPanelOverride(moduleFieldPolygon) {
       if (!moduleFieldPolygon?.data?.number_of_panels_override) return
@@ -60,7 +175,6 @@ export default {
     renderModuleFieldFittingPanels(moduleFieldPolygon) {
       if (!moduleFieldPolygon?.fittingPanels?.polygons?.length) return
       const { polygons, visible, color } = moduleFieldPolygon.fittingPanels
-
       const geometries = []
       polygons.forEach((polygon) => {
         const { outline, holes } = polygon
@@ -84,8 +198,10 @@ export default {
       })
 
       const mesh = new THREE.Mesh(mergedGeometry, material)
-      mesh.visible = visible
+      mesh.visible =
+        visible && this.areModuleFieldsVisible && this.panelOpacity === 1
       mesh.matrixAutoUpdate = false
+      mesh.userData.fittingPanelsVisible = visible
       mesh.userData.version = moduleFieldPolygon.version
       mesh.userData.type = 'moduleFieldsMeshes_fittingPanels'
       mesh.userData.layer = moduleFieldPolygon.layer
@@ -96,11 +212,17 @@ export default {
     },
     updateModuleFieldsVisibility(isVisible) {
       this.areModuleFieldsVisible = isVisible
-      Object.values(this.meshes['moduleFieldsMeshes']).forEach(
-        (mesh) =>
-          (mesh.visible =
-            this.areModuleFieldsVisible && this.panelOpacity === 1)
-      )
+      const moduleFieldsVisible =
+        this.areModuleFieldsVisible && this.panelOpacity === 1
+      Object.values(this.meshes['moduleFieldsMeshes']).forEach((group) => {
+        group.visible = moduleFieldsVisible
+        group.children.forEach((child) => {
+          if (child.userData.type === 'moduleFieldsMeshes_fittingPanels') {
+            child.visible =
+              moduleFieldsVisible && child.userData.fittingPanelsVisible
+          }
+        })
+      })
     },
     hideModuleFields() {
       this.updateModuleFieldsVisibility(false)