@eturnity/eturnity_3d 9.40.0 → 9.40.1-EXP-84.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eturnity/eturnity_3d",
   "private": false,
-  "version": "9.40.0",
+  "version": "9.40.1-EXP-84.0",
   "files": [
     "dist",
     "src"
@@ -17,7 +17,7 @@
     "merge-remote-master": "node scripts/merge-remote-master.js"
   },
   "dependencies": {
-    "@eturnity/eturnity_maths": "9.40.0",
+    "@eturnity/eturnity_maths": "9.40.1",
     "@originjs/vite-plugin-commonjs": "1.0.3",
     "core-js": "3.30.2",
     "cors": "2.8.5",

package/src/helper/render/edge.js

@@ -49,6 +49,10 @@ export default {
           cylinder.visible = false
         }
         if (['obstacle', 'construction'].includes(edge.layer)) return
+        // The new engine draws the module field bound on the 2D canvas instead.
+        if (edge.layer === 'moduleField' && this.isNewPanelPlacementEngine) {
+          return
+        }
         if (
           ['selectRoof'].includes(this.selectedTool) &&
           edge.layer != 'roof'

package/src/helper/render/edge.spec.js

@@ -0,0 +1,71 @@
+import * as THREE from 'three'
+import edgeRender from './edge'
+
+const { methods } = edgeRender
+
+function edge(id, layer, itemId) {
+  return {
+    id,
+    layer,
+    belongsTo: [{ itemId }],
+    outline: [
+      { x: 0, y: 0, z: 0 },
+      { x: 1000, y: 0, z: 0 },
+    ],
+  }
+}
+
+function makeCtx({ edges, selectedTool, isNewPanelPlacementEngine }) {
+  const ctx = {
+    edges,
+    selectedTool,
+    isNewPanelPlacementEngine,
+    selectedModuleField: { id: 'mf-1' },
+    scene: new THREE.Scene(),
+    meshes: { edgeMeshes: {} },
+    material: { edge: new THREE.MeshBasicMaterial() },
+    clearEdgesRemovedOnes: jest.fn(),
+  }
+  ctx.setCylinderPosition = methods.setCylinderPosition.bind(ctx)
+  ctx.renderEdges = methods.renderEdges.bind(ctx)
+  return ctx
+}
+
+describe('renderEdges and module field edges', () => {
+  const moduleFieldEdge = edge('e-mf', 'moduleField', 'mf-1')
+
+  it('draws the selected module field outline on the legacy engine', () => {
+    const ctx = makeCtx({
+      edges: [moduleFieldEdge],
+      selectedTool: 'selectModuleField',
+      isNewPanelPlacementEngine: false,
+    })
+    ctx.renderEdges()
+    expect(ctx.meshes.edgeMeshes['e-mf']).toBeInstanceOf(THREE.Mesh)
+    expect(ctx.scene.children).toHaveLength(1)
+  })
+
+  it('skips module field edges on the new engine, which draws its own bound', () => {
+    const ctx = makeCtx({
+      edges: [moduleFieldEdge],
+      selectedTool: 'selectModuleField',
+      isNewPanelPlacementEngine: true,
+    })
+    ctx.renderEdges()
+    expect(ctx.meshes.edgeMeshes['e-mf']).toBeUndefined()
+    expect(ctx.scene.children).toHaveLength(0)
+  })
+
+  it('keeps drawing roof edges on both engines', () => {
+    const roofEdge = edge('e-roof', 'roof', 'roof-1')
+    ;[false, true].forEach((isNewPanelPlacementEngine) => {
+      const ctx = makeCtx({
+        edges: [roofEdge],
+        selectedTool: 'drawRoof',
+        isNewPanelPlacementEngine,
+      })
+      ctx.renderEdges()
+      expect(ctx.meshes.edgeMeshes['e-roof']).toBeInstanceOf(THREE.Mesh)
+    })
+  })
+})

package/src/helper/render/moduleField.js

@@ -3,6 +3,10 @@ import {
   getBufferModuleFieldGeometry,
   getFittingPanelsBufferGeometry,
 } from './geometryHandler'
+import { clipModuleFieldFittingPanels } from '../UpdateRoofModuleFieldRelations'
+
+const PANEL_OVERRIDE_TYPE = 'moduleFieldsMeshes_panelOverride'
+const FITTING_PANELS_TYPE = 'moduleFieldsMeshes_fittingPanels'
 
 export default {
   data() {
@@ -11,35 +15,150 @@ export default {
     }
   },
   methods: {
+    /**
+     * Recomputes the fitting panels of every module field from its
+     * current panels and re-renders. The new panel placement engine changes
+     * panels without a backend re-layout, so nothing else refreshes them.
+     */
+    refreshModuleFieldFittingPanels() {
+      this.polygons
+        .filter((p) => p.layer === 'moduleField' && p.data)
+        .forEach((moduleField) => clipModuleFieldFittingPanels(moduleField))
+      this.renderModuleFields()
+    },
+    /**
+     * Incremental: one group per module field survives across renders and its
+     * meshes are updated in place, so a live transform never rebuilds the layer.
+     */
     renderModuleFields() {
-      this.clearByType('moduleFieldsMeshes')
+      this.clearRemovedModuleFieldGroups()
       const moduleFieldPolygons = this.polygons.filter((p) =>
         ['moduleField', 'tmpModuleField'].includes(p.layer)
       )
       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() {
+      const polygonIds = new Set(this.polygons.map((p) => p.id))
+      Object.values(this.meshes.moduleFieldsMeshes).forEach((group) => {
+        if (!polygonIds.has(group.userData.polygonId)) {
+          this.disposeModuleFieldGroupChildren(group)
+          this.scene.remove(group)
+          delete this.meshes.moduleFieldsMeshes[group.userData.meshId]
+        }
+      })
+    },
+    disposeModuleFieldGroupChildren(group) {
+      group.children.forEach((child) => {
+        child.geometry?.dispose?.()
+        // The override material is shared from materialMixin and must survive.
+        if (child.userData.type === FITTING_PANELS_TYPE) {
+          child.material?.dispose?.()
+        }
+      })
+    },
+    updateModuleFieldPanelOverrideMesh(group, moduleFieldPolygon) {
+      let mesh = group.children.find(
+        (c) => c.userData.type === PANEL_OVERRIDE_TYPE
+      )
+      const shouldExist = !!moduleFieldPolygon?.data?.number_of_panels_override
+
+      if (!shouldExist) {
+        if (mesh) {
+          group.remove(mesh)
+          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) {
+          mesh.geometry?.dispose?.()
+          mesh.geometry = geometry
+          mesh.userData.version = moduleFieldPolygon.version
+          mesh.updateMatrix()
+        }
+      }
+    },
+    updateModuleFieldFittingPanelsMesh(group, moduleFieldPolygon) {
+      let mesh = group.children.find(
+        (c) => c.userData.type === FITTING_PANELS_TYPE
+      )
+      const fittingPanels = moduleFieldPolygon?.fittingPanels
+
+      const removeMesh = () => {
+        if (!mesh) return
+        group.remove(mesh)
+        mesh.geometry?.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
@@ -49,7 +168,7 @@ export default {
         const mesh = new THREE.Mesh(geometry, material)
         mesh.matrixAutoUpdate = false
         mesh.userData.version = moduleFieldPolygon.version
-        mesh.userData.type = 'moduleFieldsMeshes_panelOverride'
+        mesh.userData.type = PANEL_OVERRIDE_TYPE
         mesh.userData.layer = moduleFieldPolygon.layer
         mesh.userData.meshId = moduleFieldPolygon.id
         mesh.userData.polygonId = moduleFieldPolygon.id
@@ -84,10 +203,13 @@ export default {
       })
 
       const mesh = new THREE.Mesh(mergedGeometry, material)
-      mesh.visible = visible
+      mesh.visible =
+        visible && this.areModuleFieldsVisible && this.panelOpacity === 1
       mesh.matrixAutoUpdate = false
+      mesh.frustumCulled = false
+      mesh.userData.fittingPanelsVisible = visible
       mesh.userData.version = moduleFieldPolygon.version
-      mesh.userData.type = 'moduleFieldsMeshes_fittingPanels'
+      mesh.userData.type = FITTING_PANELS_TYPE
       mesh.userData.layer = moduleFieldPolygon.layer
       mesh.userData.meshId = moduleFieldPolygon.id
       mesh.userData.polygonId = moduleFieldPolygon.id
@@ -96,11 +218,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 === FITTING_PANELS_TYPE) {
+            child.visible =
+              moduleFieldsVisible && child.userData.fittingPanelsVisible
+          }
+        })
+      })
     },
     hideModuleFields() {
       this.updateModuleFieldsVisibility(false)

package/src/helper/render/moduleField.spec.js

@@ -0,0 +1,195 @@
+jest.mock('./geometryHandler', () => ({
+  getBufferModuleFieldGeometry: jest.fn(),
+  getFittingPanelsBufferGeometry: jest.fn(),
+}))
+jest.mock('../UpdateRoofModuleFieldRelations', () => ({
+  clipModuleFieldFittingPanels: jest.fn(),
+}))
+
+import * as THREE from 'three'
+import {
+  getBufferModuleFieldGeometry,
+  getFittingPanelsBufferGeometry,
+} from './geometryHandler'
+import { clipModuleFieldFittingPanels } from '../UpdateRoofModuleFieldRelations'
+import moduleFieldRender from './moduleField'
+
+const { methods } = moduleFieldRender
+
+function fittingPanels({ visible = true, color = 'transparent' } = {}) {
+  return { visible, color, polygons: [{ outline: [], holes: [] }] }
+}
+
+function moduleField(id, overrides = {}) {
+  return { id, layer: 'moduleField', version: 1, data: {}, ...overrides }
+}
+
+function makeCtx(polygons, overrides = {}) {
+  const ctx = {
+    polygons,
+    scene: new THREE.Scene(),
+    meshes: { moduleFieldsMeshes: {} },
+    areModuleFieldsVisible: true,
+    panelOpacity: 1,
+    material: { moduleFieldWithPanelOveride: new THREE.MeshBasicMaterial() },
+    createMergedGeometry: () => new THREE.BufferGeometry(),
+    updateMergedGeometry: (geometries, existing) => existing,
+  }
+  Object.entries(methods).forEach(([name, method]) => {
+    ctx[name] = method.bind(ctx)
+  })
+  return Object.assign(ctx, overrides)
+}
+
+beforeEach(() => {
+  jest.clearAllMocks()
+  getFittingPanelsBufferGeometry.mockImplementation(
+    () => new THREE.BufferGeometry()
+  )
+  getBufferModuleFieldGeometry.mockImplementation(
+    () => new THREE.BufferGeometry()
+  )
+})
+
+describe('refreshModuleFieldFittingPanels', () => {
+  const roof = { id: 'roof-1', layer: 'roof', data: {} }
+  const tmpField = { id: 'tmp-1', layer: 'tmpModuleField', data: {} }
+  const fieldWithoutData = { id: 'mf-3', layer: 'moduleField' }
+  const first = moduleField('mf-1')
+  const second = moduleField(2)
+
+  it('clips every module field that has data, then re-renders once', () => {
+    const ctx = makeCtx([roof, first, tmpField, second, fieldWithoutData], {
+      renderModuleFields: jest.fn(),
+    })
+    ctx.refreshModuleFieldFittingPanels()
+    expect(clipModuleFieldFittingPanels.mock.calls.map(([p]) => p)).toEqual([
+      first,
+      second,
+    ])
+    expect(ctx.renderModuleFields).toHaveBeenCalledTimes(1)
+  })
+})
+
+describe('renderModuleFields', () => {
+  it('keeps one group per field across renders and updates it in place', () => {
+    const field = moduleField('mf-1', { fittingPanels: fittingPanels() })
+    const ctx = makeCtx([field])
+
+    ctx.renderModuleFields()
+    const group = ctx.meshes.moduleFieldsMeshes['mf-1']
+    expect(group).toBeInstanceOf(THREE.Group)
+    expect(ctx.scene.children).toEqual([group])
+    expect(group.children).toHaveLength(1)
+
+    field.version = 2
+    ctx.renderModuleFields()
+    expect(ctx.meshes.moduleFieldsMeshes['mf-1']).toBe(group)
+    expect(ctx.scene.children).toEqual([group])
+    expect(group.children).toHaveLength(1)
+    expect(group.userData.version).toBe(2)
+  })
+
+  it('leaves no group behind for a field with nothing to draw', () => {
+    const field = moduleField('mf-1', { fittingPanels: fittingPanels() })
+    const ctx = makeCtx([field])
+    ctx.renderModuleFields()
+
+    field.fittingPanels = { visible: true, color: 'transparent', polygons: [] }
+    ctx.renderModuleFields()
+    expect(ctx.meshes.moduleFieldsMeshes).toEqual({})
+    expect(ctx.scene.children).toEqual([])
+  })
+
+  it('drops the group of a field that left the polygons', () => {
+    const kept = moduleField('mf-1', { fittingPanels: fittingPanels() })
+    const removed = moduleField('mf-2', { fittingPanels: fittingPanels() })
+    const ctx = makeCtx([kept, removed])
+    ctx.renderModuleFields()
+    expect(Object.keys(ctx.meshes.moduleFieldsMeshes)).toEqual(['mf-1', 'mf-2'])
+
+    ctx.polygons = [kept]
+    ctx.renderModuleFields()
+    expect(Object.keys(ctx.meshes.moduleFieldsMeshes)).toEqual(['mf-1'])
+    expect(ctx.scene.children).toEqual([ctx.meshes.moduleFieldsMeshes['mf-1']])
+  })
+
+  it('adds the panel override mesh when the override appears and removes it when it goes', () => {
+    const field = moduleField('mf-1', { fittingPanels: fittingPanels() })
+    const ctx = makeCtx([field])
+    ctx.renderModuleFields()
+    const group = ctx.meshes.moduleFieldsMeshes['mf-1']
+    const typesOf = () => group.children.map((c) => c.userData.type).sort()
+    expect(typesOf()).toEqual(['moduleFieldsMeshes_fittingPanels'])
+
+    field.data = { number_of_panels_override: 3 }
+    field.version = 2
+    ctx.renderModuleFields()
+    expect(typesOf()).toEqual([
+      'moduleFieldsMeshes_fittingPanels',
+      'moduleFieldsMeshes_panelOverride',
+    ])
+
+    field.data = {}
+    field.version = 3
+    ctx.renderModuleFields()
+    expect(typesOf()).toEqual(['moduleFieldsMeshes_fittingPanels'])
+  })
+
+  // Undo hands the field back a version it already rendered at, so a
+  // "newer only" check would keep the trimmed slab.
+  it('rebuilds the override slab whenever the version differs, not only when it grows', () => {
+    const field = moduleField('mf-1', {
+      data: { number_of_panels_override: 3 },
+      version: 3,
+    })
+    const ctx = makeCtx([field])
+    ctx.renderModuleFields()
+    const [overrideMesh] = ctx.meshes.moduleFieldsMeshes['mf-1'].children
+    const trimmedGeometry = overrideMesh.geometry
+
+    const restoredGeometry = new THREE.BufferGeometry()
+    getBufferModuleFieldGeometry.mockReturnValueOnce(restoredGeometry)
+    field.version = 2
+    ctx.renderModuleFields()
+    expect(overrideMesh.geometry).toBe(restoredGeometry)
+    expect(overrideMesh.geometry).not.toBe(trimmedGeometry)
+    expect(overrideMesh.userData.version).toBe(2)
+  })
+})
+
+describe('renderModuleFieldFittingPanels', () => {
+  it('never frustum culls the mesh, whose bounding sphere goes stale on moves', () => {
+    const field = moduleField('mf-1', { fittingPanels: fittingPanels() })
+    const ctx = makeCtx([field])
+    ctx.renderModuleFields()
+    const [fittingMesh] = ctx.meshes.moduleFieldsMeshes['mf-1'].children
+    expect(fittingMesh.frustumCulled).toBe(false)
+  })
+})
+
+describe('updateModuleFieldsVisibility', () => {
+  it('hides hidden fitting panels even while the fields are shown', () => {
+    const field = moduleField('mf-1', {
+      fittingPanels: fittingPanels({ visible: false }),
+    })
+    const ctx = makeCtx([field])
+    ctx.renderModuleFields()
+    const group = ctx.meshes.moduleFieldsMeshes['mf-1']
+    const [fittingMesh] = group.children
+    expect(group.visible).toBe(true)
+    expect(fittingMesh.visible).toBe(false)
+
+    ctx.updateModuleFieldsVisibility(false)
+    expect(group.visible).toBe(false)
+
+    ctx.updateModuleFieldsVisibility(true)
+    expect(group.visible).toBe(true)
+    expect(fittingMesh.visible).toBe(false)
+
+    field.fittingPanels.visible = true
+    field.version = 2
+    ctx.renderModuleFields()
+    expect(fittingMesh.visible).toBe(true)
+  })
+})

package/src/helper/render/panel.js

@@ -61,6 +61,15 @@ export default {
         this.hidePanels()
       }
     },
+    clearMergedPanelMeshes(moduleFieldId) {
+      ;[this.mergedPanelTopMeshes, this.mergedPanelSideMesh].forEach(
+        (registry) => {
+          if (!registry[moduleFieldId]) return
+          this.clearMeshFromScene(registry[moduleFieldId], this.scene)
+          delete registry[moduleFieldId]
+        }
+      )
+    },
     renderPanelsPerModuleField(moduleField) {
       const panelSideGeometries = []
       const panelTopGeometries = []
@@ -75,7 +84,13 @@ export default {
         existingTopMesh?.userData.panelOpacity !== this.panelOpacity
       const skipRender = existingTopMesh && !isNewerVersion && !opacityChanged
 
-      if (!panels.length || skipRender) {
+      if (!panels.length) {
+        // The merged meshes outlive the panels otherwise, so the stale panels
+        // stay in the scene.
+        this.clearMergedPanelMeshes(moduleField.id)
+        return
+      }
+      if (skipRender) {
         return
       }
 

package/src/helper/render/panel.spec.js

@@ -0,0 +1,59 @@
+jest.mock('./geometryHandler', () => ({
+  getBufferPanelGeometry: jest.fn(),
+  updateBufferPanelGeometry: jest.fn(),
+  getBufferPanelSideGeometry: jest.fn(),
+  updateBufferPanelSideGeometry: jest.fn(),
+}))
+
+import panelRender from './panel'
+
+const { methods } = panelRender
+
+function makeCtx({ topMesh, sideMesh } = {}) {
+  const ctx = {
+    scene: { id: 'scene' },
+    panelOpacity: 1,
+    areUserDeactivatedPanelsVisible: false,
+    mergedPanelTopMeshes: topMesh ? { 'mf-1': topMesh } : {},
+    mergedPanelSideMesh: sideMesh ? { 'mf-1': sideMesh } : {},
+    meshes: { panelsMeshes: {} },
+    clearMeshFromScene: jest.fn(),
+    getPanelMaterial: jest.fn(),
+  }
+  ctx.clearMergedPanelMeshes = methods.clearMergedPanelMeshes.bind(ctx)
+  return ctx
+}
+
+describe('renderPanelsPerModuleField', () => {
+  it('drops the merged meshes of a field that lost its last panel', () => {
+    const topMesh = { userData: {} }
+    const sideMesh = { userData: {} }
+    const ctx = makeCtx({ topMesh, sideMesh })
+
+    methods.renderPanelsPerModuleField.call(ctx, { id: 'mf-1', panels: [] })
+
+    expect(ctx.clearMeshFromScene).toHaveBeenCalledWith(topMesh, ctx.scene)
+    expect(ctx.clearMeshFromScene).toHaveBeenCalledWith(sideMesh, ctx.scene)
+    expect(ctx.mergedPanelTopMeshes).toEqual({})
+    expect(ctx.mergedPanelSideMesh).toEqual({})
+  })
+
+  it('does nothing for an empty field that never had merged meshes', () => {
+    const ctx = makeCtx()
+    methods.renderPanelsPerModuleField.call(ctx, { id: 'mf-1', panels: [] })
+    expect(ctx.clearMeshFromScene).not.toHaveBeenCalled()
+    expect(ctx.getPanelMaterial).not.toHaveBeenCalled()
+  })
+
+  it('still skips an unchanged field with panels', () => {
+    const topMesh = { userData: { moduleFieldVersion: 4, panelOpacity: 1 } }
+    const ctx = makeCtx({ topMesh })
+    const field = { id: 'mf-1', version: 4, panels: [{ id: 'p-1' }] }
+
+    methods.renderPanelsPerModuleField.call(ctx, field)
+
+    expect(ctx.getPanelMaterial).not.toHaveBeenCalled()
+    expect(ctx.clearMeshFromScene).not.toHaveBeenCalled()
+    expect(ctx.mergedPanelTopMeshes['mf-1']).toBe(topMesh)
+  })
+})

package/src/helper/renderMixin.js

@@ -38,6 +38,10 @@ export default {
       selectedMapLayer: (state) => state.threeDModule.selectedMapLayer,
       panelOpacity: (state) => state.threeDModule.panelOpacity,
       pvDataMemo: (state) => state.threeDModule.pvDataMemo,
+      // Snapshot the host takes at layout mount; gates the renderer paths that
+      // only the new panel placement engine wants.
+      isNewPanelPlacementEngine: (state) =>
+        state.threeDModule?.isNewPanelPlacementEngineActive === true,
     }),
     ...mapGetters({
       selectedTool: 'getSelectedTool',
@@ -306,6 +310,15 @@ export default {
               method: this.renderObstacles,
               arg: [],
             })
+          } else if (
+            params.layer == 'moduleField' &&
+            this.isNewPanelPlacementEngine
+          ) {
+            methodList.push({
+              name: 'refreshModuleFieldFittingPanels',
+              method: this.refreshModuleFieldFittingPanels,
+              arg: [],
+            })
           }
           methodList.push({
             name: 'renderRoofsMargin',
@@ -318,6 +331,25 @@ export default {
             arg: [],
           })
           break
+        // Legacy emits this too, but its backend re-layout rebuilds the fitting
+        // panels afterwards; only the new engine needs the refresh.
+        case 'updateModuleFieldOutline':
+          if (this.isNewPanelPlacementEngine) {
+            methodList.push({
+              name: 'refreshModuleFieldFittingPanels',
+              method: this.refreshModuleFieldFittingPanels,
+              arg: [],
+            })
+          }
+          break
+        // New engine only: the grid changed without a backend re-layout.
+        case 'resizeModuleFieldGrid': //params.id
+          methodList.push({
+            name: 'refreshModuleFieldFittingPanels',
+            method: this.refreshModuleFieldFittingPanels,
+            arg: [],
+          })
+        // falls through
         case 'removePanels': //params.panels
         case 'removeModuleField': //params:moduleField
         case 'alignOnSelectedEdge':
@@ -336,6 +368,23 @@ export default {
             arg: [this.areModuleFieldsVisible],
           })
           break
+        case 'liveTransformPanels':
+          methodList.push({
+            name: 'renderPanels',
+            method: this.renderPanels,
+            arg: [],
+          })
+          methodList.push({
+            name: 'updateModuleFieldsVisibility',
+            method: this.updateModuleFieldsVisibility,
+            arg: [this.areModuleFieldsVisible],
+          })
+          methodList.push({
+            name: 'renderModuleFields',
+            method: this.renderModuleFields,
+            arg: [],
+          })
+          break
         case 'addPointToPolygon': //params.polygon,index
         case 'removeObstacle': //params:obstacle
         case 'removeRoof': //params:roof

package/src/helper/renderMixin.spec.js

@@ -0,0 +1,77 @@
+jest.mock('./render', () => ({}))
+jest.mock('./cameraMixin', () => ({}))
+
+import renderMixin from './renderMixin'
+
+const { methods, computed } = renderMixin
+
+function namesFor(ctx, geometryEvent) {
+  return methods.renderingMethodsByEvent
+    .call({ areModuleFieldsVisible: true, ...ctx }, geometryEvent)
+    .map((m) => m.name)
+}
+
+describe('isNewPanelPlacementEngine', () => {
+  const read = (state) =>
+    computed.isNewPanelPlacementEngine.call({ $store: { state } })
+
+  it('mirrors the snapshot the host store took at layout mount', () => {
+    expect(
+      read({ threeDModule: { isNewPanelPlacementEngineActive: true } })
+    ).toBe(true)
+  })
+
+  it('is off without a snapshot or without the module', () => {
+    expect(read({ threeDModule: {} })).toBe(false)
+    expect(read({})).toBe(false)
+  })
+})
+
+describe('renderingMethodsByEvent and the fitting panel refresh', () => {
+  describe('updateOutlineXY on a module field', () => {
+    const event = { name: 'updateOutlineXY', params: { layer: 'moduleField' } }
+
+    it('leaves the legacy engine alone, whose backend re-layout follows', () => {
+      const names = namesFor({ isNewPanelPlacementEngine: false }, event)
+      expect(names).not.toContain('refreshModuleFieldFittingPanels')
+      expect(names).toEqual(['renderRoofsMargin', 'renderTiles'])
+    })
+
+    it('refreshes the fitting panels on the new engine', () => {
+      const names = namesFor({ isNewPanelPlacementEngine: true }, event)
+      expect(names).toEqual([
+        'refreshModuleFieldFittingPanels',
+        'renderRoofsMargin',
+        'renderTiles',
+      ])
+    })
+  })
+
+  describe('updateModuleFieldOutline', () => {
+    const event = { name: 'updateModuleFieldOutline', params: { id: 'mf-7' } }
+
+    it('stays a no-op on the legacy engine', () => {
+      expect(namesFor({ isNewPanelPlacementEngine: false }, event)).toEqual([])
+    })
+
+    it('refreshes every field on the new engine, since refreshRendering keeps one call per method name', () => {
+      const ctx = {
+        isNewPanelPlacementEngine: true,
+        fullRenderNeeded: false,
+        geometryEventsToDoWithoutFull: [
+          event,
+          { name: 'updateModuleFieldOutline', params: { id: 'mf-8' } },
+        ],
+        renderingMethodsByEvent: methods.renderingMethodsByEvent,
+        renderMethods: jest.fn(),
+        render: jest.fn(),
+      }
+      methods.refreshRendering.call(ctx)
+      const [methodList] = ctx.renderMethods.mock.calls[0]
+      expect(methodList.map((m) => m.name)).toEqual([
+        'refreshModuleFieldFittingPanels',
+      ])
+      expect(methodList[0].arg).toEqual([])
+    })
+  })
+})

package/src/store/three-d-module.js

@@ -30,6 +30,7 @@ const init_state = {
   mountingDataMemo: [],
   wallColor: '#454545',
   panelOpacity: 1,
+  isNewPanelPlacementEngineActive: false,
   selectedMapLayer: null,
   globalProjectProperties: [],
   imageOverlay: null,