@eturnity/eturnity_3d 7.20.1 → 7.24.0

package/src/helper/render/roof.js

@@ -16,25 +16,23 @@ export default {
   methods: {
     updateRoofGeometry(geometry, roofPolygon) {
       const roofOutline = roofPolygon.outline
-      let cropedHolesOutline = roofPolygon.holes
-        .filter((h) => h.layer == 'obstacle')
-        .map((h) => {
-          //let's crop obstacle with roof outline
-          const cropedHoleOutline =
-            intersectOutlines(h.outline, roofPolygon.outline)[0] || []
-          const outline = cropedHoleOutline.map((p) => {
-            return {
-              x: p.x,
-              y: p.y,
-              z: verticalProjectionOnPlane(
-                p,
-                roofPolygon.normalVector,
-                roofPolygon.flatOutline[0]
-              ).z
-            }
-          })
-          return outline
+      let cropedHolesOutline = roofPolygon.holes.map((h) => {
+        //let's crop obstacle with roof outline
+        const cropedHoleOutline =
+          intersectOutlines(h.outline, roofPolygon.outline)[0] || []
+        const outline = cropedHoleOutline.map((p) => {
+          return {
+            x: p.x,
+            y: p.y,
+            z: verticalProjectionOnPlane(
+              p,
+              roofPolygon.normalVector,
+              roofPolygon.flatOutline[0]
+            ).z
+          }
         })
+        return outline
+      })
 
       cropedHolesOutline = cropedHolesOutline.filter((outline) => !!outline)
       geometry = updateBufferRoofGeometry(
@@ -47,25 +45,23 @@ export default {
     },
     createRoofGeometry(roofPolygon) {
       const roofOutline = roofPolygon.outline
-      let cropedHolesOutline = roofPolygon.holes
-        .filter((h) => h.layer == 'obstacle')
-        .map((h) => {
-          //let's crop obstacle with roof outline
-          const cropedHoleOutline =
-            intersectOutlines(h.outline, roofPolygon.outline)[0] || []
-          const outline = cropedHoleOutline.map((p) => {
-            return {
-              x: p.x,
-              y: p.y,
-              z: verticalProjectionOnPlane(
-                p,
-                roofPolygon.normalVector,
-                roofPolygon.flatOutline[0]
-              ).z
-            }
-          })
-          return outline
+      let cropedHolesOutline = roofPolygon.holes.map((h) => {
+        //let's crop obstacle with roof outline
+        const cropedHoleOutline =
+          intersectOutlines(h.outline, roofPolygon.outline)[0] || []
+        const outline = cropedHoleOutline.map((p) => {
+          return {
+            x: p.x,
+            y: p.y,
+            z: verticalProjectionOnPlane(
+              p,
+              roofPolygon.normalVector,
+              roofPolygon.flatOutline[0]
+            ).z
+          }
         })
+        return outline
+      })
 
       cropedHolesOutline = cropedHolesOutline.filter((outline) => !!outline)
       let geometry = getBufferRoofGeometry(roofOutline, cropedHolesOutline)
@@ -74,17 +70,22 @@ export default {
     },
 
     applyTextureOnRoofs() {
-      const material = this.material.roof
       this.reorderRoofMaterials()
-      if (this.mergedRoofMesh) {
-        this.applyTextureOnMesh(material, this.mergedRoofMesh)
-        this.render()
-      }
+      const material = this.material.roof
+      this.roofs.forEach((roof) => {
+        const roofMesh = this.meshes.roofMeshes[roof.id]
+        if (roofMesh) {
+          this.applyTextureOnMesh(material, roofMesh)
+        }
+      })
+      this.render()
     },
     renderRoofs() {
       this.clearRemovedOnes('roofMeshes')
-      let roofGeometries = []
       this.roofs.forEach((roofPolygon) => {
+        const material = roofPolygon.isFlat
+          ? this.material.roof
+          : this.material.warningRoof
         let mesh
         let geometry
         if (
@@ -107,25 +108,21 @@ export default {
           geometry = this.createRoofGeometry(roofPolygon)
           if (geometry) {
             //material not used here.
-            mesh = new THREE.Mesh(geometry, this.material.hidden)
+            mesh = new THREE.Mesh(geometry, material)
             mesh.userData.version = roofPolygon.version
             mesh.userData.type = 'roofMeshes'
             mesh.userData.meshId = roofPolygon.id
             mesh.userData.polygonId = roofPolygon.id
+            mesh.frustumCulled = false
             this.meshes.roofMeshes[roofPolygon.id] = mesh
             this.scene.add(mesh)
           }
         }
-        roofGeometries.push(this.meshes.roofMeshes[roofPolygon.id].geometry)
+        //roofGeometries.push(this.meshes.roofMeshes[roofPolygon.id].geometry)
+        if (mesh) {
+          this.applyTextureOnMesh(material, mesh)
+        }
       })
-      // Create the mesh using the merged geometry and shared material
-      this.mergedRoofMesh = this.updateOrCreateMergedMesh(
-        this.mergedRoofMesh,
-        roofGeometries,
-        this.material.roof
-      )
-      this.mergedRoofMesh.userData.type = 'mergedRoofMesh'
-      this.applyTextureOnMesh(this.material.roof, this.mergedRoofMesh)
     },
     renderFlatRoofs() {
       this.clearRemovedOnes('flatRoofMeshes')

package/src/helper/render/texture.js

@@ -2,6 +2,24 @@ export default {
   methods: {
     applyTextureOnMesh(materials, mesh) {
       if (mesh && materials && materials.length > 0) {
+        const materialsVersionsOnMesh = mesh.userData.materialsVersions
+        if (materialsVersionsOnMesh) {
+          const materialUuids = materials.map((m) => m.uuid)
+          const materialVersions = materials.map((m) => m.userData.version)
+          const allMaterialAlreadyProjectedOnMesh =
+            materials.length == materialsVersionsOnMesh.length &&
+            materialsVersionsOnMesh.every((versionMaterial, index) => {
+              return (
+                materialUuids[index] == versionMaterial.uuid &&
+                materialVersions[index] == versionMaterial.materialVersion &&
+                mesh.geometry.userData.version ==
+                  versionMaterial.geometryVersion
+              )
+            })
+          if (allMaterialAlreadyProjectedOnMesh) {
+            return
+          }
+        }
         let geometry = mesh.geometry
         geometry.clearGroups()
         for (let k = 0; k < materials.length; k++) {
@@ -15,6 +33,13 @@ export default {
           }
           materials[m].needsUpdate = true
         }
+        mesh.userData.materialsVersions = materials.map((m) => {
+          return {
+            uuid: m.uuid,
+            materialVersion: m.userData.version,
+            geometryVersion: mesh.geometry.userData.version
+          }
+        })
         mesh.needsUpdate = true
       }
     }

package/src/helper/render/tile.js

@@ -64,7 +64,7 @@ export default {
         this.scene.remove(this.googleBackgroundMap)
         this.clearThreeObjects(this.googleBackgroundMap)
       }
-
+      let providerMapLayer = this.provider.mapLayer
       let zoomLvl = this.provider.maxZoom
 
       const latitude = this.layoutSettings.layout_latitude
@@ -115,6 +115,16 @@ export default {
       for (let xTile = xTileMin; xTile <= xTileMax; xTile++) {
         for (let yTile = yTileMin; yTile <= yTileMax; yTile++) {
           this.tileToRender.push({
+            materialId:
+              'material_' +
+              xTile +
+              '_' +
+              yTile +
+              '_' +
+              zoomLvl +
+              '_' +
+              providerMapLayer,
+            id: 'tile_' + xTile + '_' + yTile + '_' + zoomLvl,
             xTile,
             yTile,
             zoomLvl,
@@ -122,7 +132,6 @@ export default {
           })
         }
       }
-
       while (zoomLvl > 17) {
         xTileMin = xTileMin / 2 - 1
         xTileMax = (xTileMax + 1) / 2
@@ -147,6 +156,16 @@ export default {
               yTileMax - yTile <= yMaxEven
             ) {
               this.tileToRender.push({
+                materialId:
+                  'material_' +
+                  xTile +
+                  '_' +
+                  yTile +
+                  '_' +
+                  zoomLvl +
+                  '_' +
+                  providerMapLayer,
+                id: 'tile_' + xTile + '_' + yTile + '_' + zoomLvl,
                 xTile,
                 yTile,
                 zoomLvl,
@@ -158,13 +177,38 @@ export default {
       }
       this.numberOfTilesToRender = this.tileToRender.length
       this.numberOfTilesRendered = 0
+
+      this.removeUnusedTiles()
+      const promiseArray = []
       for (let k in this.tileToRender) {
         let xTile = this.tileToRender[k].xTile
         let yTile = this.tileToRender[k].yTile
         zoomLvl = this.tileToRender[k].zoomLvl
         let isTileOnRoofBound = this.tileToRender[k].isTileOnRoofBound
-        this.renderTile(xTile, yTile, zoomLvl, isTileOnRoofBound)
+        promiseArray.push(
+          this.renderTile(xTile, yTile, zoomLvl, isTileOnRoofBound)
+        )
       }
+      Promise.all(promiseArray).then((res) => {
+        const tileToRenderOverRoof = this.tileToRender.filter(
+          (tile) => tile.isTileOnRoofBound
+        )
+        const tileToRenderOverRoofMaterialIds = tileToRenderOverRoof.map(
+          (tile) => tile.materialId
+        )
+        this.material.roof = this.material.roof.filter(
+          (m) => m.userData.type != 'tileProjectionMaterial'
+        )
+        this.material.roof.push(
+          ...this.material.projectionTiles.filter((material) => {
+            let materialId = material.userData.materialId
+            return tileToRenderOverRoofMaterialIds.includes(materialId)
+          })
+        )
+        this.applyTextureOnRoofs()
+        this.applyTextureOnObstacles()
+        this.render()
+      })
     },
     removeTileFromPending(meshId, mapLayer) {
       this.pendingTiles = this.pendingTiles.filter(
@@ -172,18 +216,21 @@ export default {
       )
     },
     async renderTile(x, y, zoomLvl, isTileOnRoofBound = false) {
-      const meshId = 'tile_' + x + '_' + y + '_' + zoomLvl
-      const mapLayer = this.provider.mapLayer
-      if (
-        this.pendingTiles.find(
-          (t) => t.meshId == meshId && t.mapLayer == mapLayer
-        )
-      ) {
-        return
-      }
+      const promise = new Promise((resolve, reject) => {
+        const meshId = 'tile_' + x + '_' + y + '_' + zoomLvl
+        const mapLayer = this.provider.mapLayer
+        if (
+          this.pendingTiles.find(
+            (t) => t.meshId == meshId && t.mapLayer == mapLayer
+          )
+        ) {
+          resolve()
+          return
+        }
 
       let mesh = this.meshes.tileMeshes[meshId]
       if (mesh && this.provider.mapLayer == mesh.userData.mapLayer) {
+        resolve()
         return
       }
 
@@ -194,9 +241,12 @@ export default {
         this.provider.fetchTile(zoomLvl, x, y)
       )
       this.pendingTiles.push({ x, y, zoomLvl, mapLayer, meshId, imagePromise })
+      this.isReady.texturesToLoad++
       imagePromise.then((image) => {
+        this.isReady.texturesLoaded++
         if (!image) {
           this.removeTileFromPending(meshId, mapLayer)
+          resolve()
           return
         }
         const texture = new THREE.Texture(image)
@@ -228,7 +278,9 @@ export default {
             map: texture,
             color: 0xffffff,
             side: THREE.FrontSide,
-            transparent: true
+            transparent: false,
+            // opacity:isTileOnRoofBound?0.8:1,
+            // color:isTileOnRoofBound?'red':'white'
           })
           material.map = texture
           material.needsUpdate = true
@@ -240,19 +292,25 @@ export default {
             mesh.userData.mapLayer = this.provider.mapLayer
             mesh.name = meshId
 
-            if (!this.scene.getObjectByName(meshId)) {
-              this.meshes.tileMeshes[meshId] = mesh
-              this.scene.add(this.meshes.tileMeshes[meshId])
+                if (!this.scene.getObjectByName(meshId)) {
+                  this.meshes.tileMeshes[meshId] = mesh
+                  this.scene.add(this.meshes.tileMeshes[meshId])
+                }
+              }
             }
-          }
-        }
-        this.removeTileFromPending(meshId, mapLayer)
-        this.numberOfTilesRendered++
-        if (this.numberOfTilesRendered == this.numberOfTilesToRender) {
-          this.removeUnusedTiles()
-          this.render()
-        }
+            this.removeTileFromPending(meshId, mapLayer)
+            this.numberOfTilesRendered++
+            if (this.numberOfTilesRendered == this.numberOfTilesToRender) {
+              this.removeUnusedTiles()
+              this.render()
+            }
+            resolve()
+          })
+          .catch((err) => {
+            reject()
+          })
       })
+      return promise
     },
     async renderGoogleTiles() {
       this.clearByType('tileMeshes')
@@ -354,7 +412,9 @@ export default {
         let googleBackgroundUrl = `https://maps.googleapis.com/maps/api/staticmap?center=${
           roofsBoundCenterLatLng.lat + ',' + roofsBoundCenterLatLng.lng
         }&maptype=${googleMapType}&zoom=${zoomLevel}&size=${size}x${size}&key=${apiKey}`
+        this.isReady.texturesToLoad++
         this.loader.load(googleBackgroundUrl, (texture) => {
+          this.isReady.texturesLoaded++
           texture[indexGoogleBackground] = texture
           if (indexGoogleBackground == 0) {
             this.newGoogleTileMaterial(

package/src/helper/render/tileProjection.js

@@ -1,5 +1,5 @@
 import * as THREE from 'three'
-import ProjectedMaterial from 'three-projected-material'
+import ProjectedMaterial from '../projectedMaterial'
 import { tileToCorners } from '@eturnity/eturnity_maths'
 import { earthRadius } from '../../config'
 export default {
@@ -28,8 +28,10 @@ export default {
         transparent: true,
         side: THREE.DoubleSide
       })
+      tileProjectionMaterial.camera = cameraProjection
       tileProjectionMaterial.userData = {}
       tileProjectionMaterial.userData.type = 'tileProjectionMaterial'
+      tileProjectionMaterial.userData.version = 0
       tileProjectionMaterial.userData.materialId =
         'material_' +
         sizeInMeter +
@@ -41,9 +43,14 @@ export default {
         mapLayer
       tileProjectionMaterial.userData.mapLayer = mapLayer
       tileProjectionMaterial.userData.priority = 10
+      this.material.projectionTiles.push(tileProjectionMaterial)
+      this.material.roof = this.material.roof.filter(
+        (m) => m.userData.type != 'tileProjectionMaterial'
+      )
       this.material.roof.push(tileProjectionMaterial)
       this.applyTextureOnRoofs()
       this.applyTextureOnObstacles()
+      this.render()
     },
     async newTileMaterial(texture, x, y, zoom, mapLayer) {
       if (!this.material.roof) {
@@ -65,33 +72,35 @@ export default {
         transparent: true,
         side: THREE.DoubleSide
       })
+      tileProjectionMaterial.camera = cameraProjection
       tileProjectionMaterial.userData = {}
       tileProjectionMaterial.userData.type = 'tileProjectionMaterial'
+      tileProjectionMaterial.userData.version = 0
       tileProjectionMaterial.userData.materialId =
         'material_' + x + '_' + y + '_' + zoom + '_' + mapLayer
       tileProjectionMaterial.userData.mapLayer = mapLayer
       tileProjectionMaterial.priority = 10
       this.setTileCameraPosition(cameraProjection, x, y, zoom)
-      this.material.roof.push(tileProjectionMaterial)
-      this.applyTextureOnRoofs()
-      this.applyTextureOnObstacles()
+      this.material.projectionTiles.push(tileProjectionMaterial)
     },
     disposeTileMaterial(material) {
       material.texture.dispose()
       material.dispose()
     },
     disposeTileMaterialDifferentMapLayer(mapLayer) {
-      if (!this.material.roof) return
-      this.material.roof = this.material.roof.filter((m) => {
-        if (
-          m.userData.type == 'tileProjectionMaterial' &&
-          m.userData.mapLayer != mapLayer
-        ) {
-          this.disposeTileMaterial(m)
-          return false
+      if (!this.material.projectionTiles) return
+      this.material.projectionTiles = this.material.projectionTiles.filter(
+        (m) => {
+          if (
+            m.userData.type == 'tileProjectionMaterial' &&
+            m.userData.mapLayer != mapLayer
+          ) {
+            this.disposeTileMaterial(m)
+            return false
+          }
+          return true
         }
-        return true
-      })
+      )
     },
     setTileCameraPosition(camera, x, y, zoom) {
       const latitude = this.layoutSettings.layout_latitude

package/src/helper/renderMixin.js

@@ -24,7 +24,8 @@ export default {
       edgeMeshes: {},
       roofMarginMeshes: {},
       moduleFieldsMeshes: {},
-      tileMeshes: {}
+      tileMeshes: {},
+      overlayMeshes: {}
     }
   },
   mounted() {
@@ -145,6 +146,13 @@ export default {
             arg: []
           })
           break
+        case 'setCameraToOverlay':
+          methodList.push({
+            name: 'setCameraToOverlay',
+            method: this.setCameraToOverlay,
+            arg: [params.overlayId]
+          })
+          break
         case 'toolChange': //params.toolName
           methodList.push({
             name: 'renderEdges',
@@ -162,6 +170,12 @@ export default {
           break
         case 'full':
         case 'reset':
+        case 'changeOverlays':
+          methodList.push({
+            name: 'renderOverlays',
+            method: this.renderOverlays,
+            arg: []
+          })
         case 'removeNodes': //params.nodes
         case 'removeEdges': //params.edges
         case 'translate': //params.edges
@@ -298,7 +312,6 @@ export default {
             method: this.renderRoofsMargin,
             arg: []
           })
-          break
         case 'selectedModuleFieldChange':
           methodList.push({
             name: 'renderEdges',
@@ -381,12 +394,10 @@ export default {
             method: this.updateProjectionMaterials,
             arg: []
           })
-          break
-        case 'clearPanelFromChangingRoofs':
           methodList.push({
-            name: 'clearPanelsFromChangingRoofs',
-            method: this.clearPanelsFromChangingRoofs,
-            arg: [params.roofIds]
+            name: 'renderOverlays',
+            method: this.renderOverlays,
+            arg: []
           })
           break
         case 'selectedPanelChange':
@@ -409,7 +420,11 @@ export default {
     async renderMethods(methodList) {
       for (let item of methodList) {
         if (item.method) {
+          try{
           await item.method(...item.arg)
+          }catch(err){
+            console.error(err)
+          }
         }
       }
       this.render()
@@ -472,7 +487,6 @@ export default {
     }
   },
   beforeDestroy() {
-    this.clearThreeObjects(this.scene)
     if (this.renderer) {
       this.renderer.clear()
       this.renderer.dispose()

package/src/helper/threeMixin.js

@@ -74,6 +74,7 @@ export default {
         this.renderer.domElement.style.height = height + 'px'
         this.renderer.setSize(width, height, false)
         this.renderer.setViewport(0, 0, width, height)
+        // this.renderer.gammaOutput = true
       }
     },
     initialiseControl(isPerspectiveCamera) {
@@ -177,8 +178,10 @@ export default {
       if (this.composer) {
         this.composer.render()
       } else if (this.renderer) {
-        this.renderer.clear()
-        this.renderer.render(this.scene, this.camera)
+        try {
+          this.renderer.clear()
+          this.renderer.render(this.scene, this.camera)
+        } catch (err) {}
       }
     },
     orbitControlChange() {

package/src/store/hydrateData.js

@@ -5,6 +5,7 @@ import {
   getRoofMarginOutline,
   getObstacleMarginOutline
 } from '@eturnity/eturnity_maths'
+import OverlayLayer from '../Overlay/OverlayLayer'
 import getLayers from '../utils/layers'
 import { UpdateRoofObstacleRelations } from '../helper/UpdateRoofObstacleRelations'
 function sanitizedOutline(outline) {
@@ -25,9 +26,7 @@ function sanitizedOutline(outline) {
 export async function hydratePolygons({
   roofsResponse,
   obstaclesResponse,
-  moduleFieldsResponse,
-  projectId,
-  projectVariantId
+  moduleFieldsResponse
 }) {
   //removing empty roof,obstacle and modulefield generated by BE on variant creation
   roofsResponse = roofsResponse.reduce((acc, cur) => {
@@ -80,8 +79,12 @@ export async function hydratePolygons({
       ? roofResp.roof_margins_mm[0]
       : 200
     roof.moduleFields = []
+    try{
     roof = updateComputedGeometryPolygon(roof)
     roofs.push(roof)
+    }catch(err){
+      console.error(err)
+    }
   })
   obstaclesResponse.forEach((obstacleResp) => {
     const obstacle_outline = obstacleResp.obstacle_outline.map((p) => {
@@ -92,6 +95,7 @@ export async function hydratePolygons({
     obstacle.version = obstacleResp.version
     obstacle.height = obstacleResp.obstacle_height_above_ground_mm
     obstacle.isParallel = obstacleResp.obstacle_slope_is_parallel_to_roof
+    try{
     obstacle = updateComputedGeometryPolygon(obstacle)
     obstacle.margins.distances = obstacleResp.obstacle_margins_mm
     obstacle.margins.isSameMargin = obstacleResp.obstacle_margins_mm.every(
@@ -102,6 +106,9 @@ export async function hydratePolygons({
       : 200
     obstacle = getObstacleMarginOutline(obstacle)
     obstacles.push(obstacle)
+    }catch(err){
+      console.error(err)
+    }
   })
   moduleFieldsResponse.forEach((moduleFieldResp) => {
     const MFpanels = []
@@ -204,13 +211,16 @@ export async function hydratePolygons({
     moduleField.roof = roof
     moduleField.panels = MFpanels
     moduleField.userDeactivatedPanels = MFuserDeactivatedPanels
+    try{
     moduleField = updateComputedGeometryPolygon(moduleField)
     moduleFields.push(moduleField)
+    }catch(err){
+      console.error(err)
+    }
   })
   //Get PV & Mounting system component Data:
   pv_module_ids = [...new Set(pv_module_ids)]
   mounting_system_ids = [...new Set(mounting_system_ids)]
-
   return {
     polygons: [
       ...roofs,
@@ -229,19 +239,21 @@ export async function hydrateData({ state, commit }, data) {
   let obstaclesResponse = data.obstacles
   let moduleFieldsResponse = data.moduleFields
   const layoutSettingResponse = data.layoutSettings
-  const imageOverlayResponse = data.imageOverlay
+  const overlaysResponse = data.layoutingOverlays
   const mapType = data.mapType
   let layers = getLayers()
   let selectedLayer = layers.find((layer) => layer.key == mapType)
   commit('mutate_selectedMapLayer', selectedLayer)
 
-  if (imageOverlayResponse && imageOverlayResponse.image_overlay_url) {
-    let imageOverlay = {
-      url: imageOverlayResponse.image_overlay_url,
-      uuid: imageOverlayResponse.image_overlay_uuid,
-      corners: imageOverlayResponse.image_overlay_settings.corners
+  if (overlaysResponse) {
+    let origin
+    if (layoutSettingResponse) {
+      origin = {
+        lat: layoutSettingResponse.layout_latitude,
+        lng: layoutSettingResponse.layout_longitude
+      }
     }
-    commit('mutate_imageOverlay', imageOverlay)
+    OverlayLayer.addOrUpdateSerializedItems(overlaysResponse, origin)
   }
   if (!!layoutSettingResponse) {
     const layoutSetting = layoutSettingResponse