@eturnity/eturnity_3d 7.33.1 → 7.35.0-EPDM-10923.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eturnity/eturnity_3d",
   "private": false,
-  "version": "7.33.1",
+  "version": "7.35.0-EPDM-10923.0",
   "files": [
     "dist",
     "src"
@@ -15,7 +15,7 @@
     "prettier": "prettier --write \"**/*.{js,vue}\""
   },
   "dependencies": {
-    "@eturnity/eturnity_maths": "7.32.0",
+    "@eturnity/eturnity_maths": "7.35.0-EPDM-10923.0",
     "@originjs/vite-plugin-commonjs": "1.0.3",
     "core-js": "2.6.12",
     "cors": "2.8.5",
@@ -26,10 +26,10 @@
     "leaflet.gridlayer.googlemutant": "0.14.0",
     "lodash": "4.17.21",
     "svd-js": "1.1.1",
-    "three": "0.149.0",
+    "three": "0.142.0",
     "tween": "0.9.0",
     "uuid": "9.0.0",
-    "vite-plugin-require": "1.1.14",
+    "vite-plugin-require": "1.2.14",
     "vue": "3.3.4",
     "vuex": "4.1.0"
   },
@@ -42,10 +42,10 @@
     "eslint-plugin-prettier": "4.2.1",
     "eslint-plugin-vue": "9.14.1",
     "html-webpack-plugin": "3.2.0",
-    "prettier": "^2.8.4",
-    "prettier-plugin-vue": "^1.1.6",
+    "prettier": "2.8.4",
+    "prettier-plugin-vue": "1.1.6",
     "vite": "2.7.2",
-    "vite-plugin-env-compatible": "^2.0.1",
+    "vite-plugin-env-compatible": "2.0.1",
     "webpack": "4.46.0",
     "webpack-cli": "4.10.0"
   },

package/src/Overlay/GLBOverlay.js

@@ -0,0 +1,97 @@
+import ThreeDModelOverlay from './ThreeDModelOverlay'
+import * as THREE from 'three'
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
+import { deltaLatLngToDistance } from '@eturnity/eturnity_maths'
+export default class GLBOverlay extends ThreeDModelOverlay {
+  constructor(overlay, emit, origin) {
+    super(overlay, emit, origin, new GLTFLoader())
+    this.extracted = false
+    this.geoLocalisation = this.settings.geoLocalisation
+    this.has_plain_roof_simplified = false
+  }
+  loadFile() {
+    this.isReady = false
+    return new Promise((resolve) => {
+      if (this.overlayMesh) {
+        resolve(this.overlayMesh)
+      }
+      let resource = this.resources[0]
+      let overlayMesh = new THREE.Group()
+      this.loader.load(resource.file_url, (gltf) => {
+        const model = gltf.scene
+        model.rotateX(Math.PI / 2)
+        overlayMesh.userData.meshId = this.id
+        overlayMesh.userData.type = 'overlayMeshes'
+        overlayMesh.userData.version = this.version
+        overlayMesh.attach(model)
+        overlayMesh.position.set(0, 0, 0)
+        const box = new THREE.Box3().setFromObject(overlayMesh)
+        overlayMesh.position.set(0, 0, -box.min.z)
+
+        if (overlayMesh.getObjectByName('plain_roof_simplified')) {
+          this.has_plain_roof_simplified = true
+          this.type = 'airteam'
+        } else {
+          this.type = 'custom_3d_model'
+        }
+        overlayMesh.traverse((object) => {
+          if (object.material) {
+            object.material.metalness = 0
+          }
+        })
+        resolve(overlayMesh)
+      })
+    })
+  }
+  checkGeoLocDataAndOffset() {
+    const lat0 = this.overlayMesh.children[0].userData.latitude_origin
+    const lng0 = this.overlayMesh.children[0].userData.longitude_origin
+    if (lat0 && lng0 && this.origin) {
+      let { x, y } = deltaLatLngToDistance(
+        lat0 - this.origin.lat,
+        lng0 - this.origin.lng,
+        lat0
+      )
+      if (Math.hypot(x, y) < 100000) {
+        this.positionOffset.x = x
+        this.positionOffset.y = y
+        this.positionOffset.z = 0
+      } else {
+        this.positionOffset.x = 0
+        this.positionOffset.y = 0
+        this.positionOffset.z = 0
+        this.emit('overlay-offset-position-error', { id: this.id })
+      }
+      this.geoLocalisation = { x, y }
+    }
+  }
+  setOverlayVisibilityFor2D() {
+    if (
+      this.overlayMesh.children[0].children.some(
+        (child) => child.name == 'plain_roof_simplified'
+      )
+    ) {
+      this.overlayMesh.children[0].children.forEach(
+        (child) => (child.visible = child.name != 'plain_roof_simplified')
+      )
+    }
+    return this.overlayMesh
+  }
+  set3DObjectMaterialOpacity(obj) {
+    obj.children.forEach((child) => {
+      this.set3DObjectMaterialOpacity(child, this.opacity)
+    })
+    if (obj.material && obj.name != 'plain_roof_simplified') {
+      obj.visible = this.opacity > 0
+      obj.material.opacity = this.opacity
+      obj.material.transparent = this.opacity < 1
+    }
+  }
+  serializeSettings() {
+    return {
+      version: this.version,
+      corners: this.corners,
+      geoLocalisation: this.geoLocalisation,
+    }
+  }
+}

package/src/Overlay/OverlayFactory.js

@@ -1,12 +1,12 @@
 import Overlay from './Overlay'
-import AirTeamOverlay from './AirTeamOverlay'
+import GLBOverlay from './GLBOverlay'
 import ImageOverlay from './ImageOverlay'
 
 const OverlayFactory = {
   createOverlay(serializedOverlay, emit, origin = { lat: null, lng: null }) {
     let overlayInstance
-    if (serializedOverlay.type == 'airteam') {
-      overlayInstance = new AirTeamOverlay(serializedOverlay, emit, origin)
+    if (['airteam', 'custom_3d_model'].includes(serializedOverlay.type)) {
+      overlayInstance = new GLBOverlay(serializedOverlay, emit, origin)
     } else if (serializedOverlay.type == 'image_overlay') {
       overlayInstance = new ImageOverlay(serializedOverlay, emit)
     } else {

package/src/Overlay/{AirTeamOverlay.js → ThreeDModelOverlay.js}

@@ -15,16 +15,17 @@ import {
   vectorLength2D,
   deltaLatLngToDistance,
   rotateTransformation,
+  getStandardDeviation,
 } from '@eturnity/eturnity_maths'
 let Paper
-export default class AirTeamOverlay extends Overlay {
-  constructor(overlay, emit, origin) {
+export default class ThreeDModelOverlay extends Overlay {
+  constructor(overlay, emit, origin, loader) {
     super(overlay, emit)
-    //this.updateVerticalProjectionIfNeeded()
     this.canvasWidth = 400
     this.canvasHeight = 400
     this.origin = origin
     this.imageUrl = null
+    this.loader = loader
     this.initialiseModel().then((isReady) => {
       this.isReady = isReady
       this.version++
@@ -42,6 +43,7 @@ export default class AirTeamOverlay extends Overlay {
     this.extracted = false
     this.geoLocalisation = this.settings.geoLocalisation
   }
+  loadFile() {}
   onLoad() {
     return new Promise((resolve) => {
       if (this.isReady) {
@@ -51,65 +53,17 @@ export default class AirTeamOverlay extends Overlay {
       }
     })
   }
-  setOpacity(opacity) {
-    this.opacity = opacity
-    this.emit('item-updated', this)
-    this.emit('overlay-three-loaded', this)
-  }
-  hasVerticalProjection() {
-    return this.resources.some((resource) => resource.file_type == 'image')
-  }
-  loadGLBFile() {
-    this.isReady = false
-    return new Promise((resolve) => {
-      if (this.overlayMesh) {
-        resolve(this.overlayMesh)
-      }
-      let resource = this.resources[0]
-      let overlayMesh = new THREE.Group()
-      const glbLoader = new GLTFLoader()
-      glbLoader.load(resource.file_url, (gltf) => {
-        const model = gltf.scene
-        overlayMesh.attach(model)
-        overlayMesh.userData.meshId = this.id
-        model.rotateX(Math.PI / 2)
-        model.children = model.children.filter((child) =>
-          [
-            'textured_facade',
-            'textured_environment',
-            'textured_roof',
-            'plain_roof_simplified',
-          ].includes(child.name)
-        )
-        model.children.forEach((child) => {
-          if (['plain_roof_simplified'].includes(child.name)) {
-            child.visible = false
-          }
-        })
-
-        overlayMesh.userData.type = 'overlayMeshes'
-        overlayMesh.userData.meshId = this.id
-        overlayMesh.userData.version = this.version
-        overlayMesh.position.set(0, 0, 0)
-        const box = new THREE.Box3().setFromObject(overlayMesh)
-        overlayMesh.position.set(0, 0, -box.min.z)
-        resolve(overlayMesh)
-      })
-    })
-  }
   set3DObjectMaterialOpacity(obj) {
     obj.children.forEach((child) => {
       this.set3DObjectMaterialOpacity(child, this.opacity)
     })
-    if (obj.material && obj.name != 'plain_roof_simplified') {
-      obj.visible = this.opacity > 0
-      obj.material.opacity = this.opacity
-      obj.material.transparent = this.opacity < 1
-    }
+    obj.visible = this.opacity > 0
+    obj.material.opacity = this.opacity
+    obj.material.transparent = this.opacity < 1
   }
   async renderOnThreeJS(threeJSComponent) {
     if (this.overlayMesh && this.overlayMesh.children.length == 0) {
-      this.overlayMesh = await this.loadGLBFile()
+      this.overlayMesh = await this.loadFile()
     }
 
     if (!this.isReady) {
@@ -150,7 +104,7 @@ export default class AirTeamOverlay extends Overlay {
       threeJSComponent.scene.add(overlayMesh)
     }
     if (!overlayMesh) {
-      overlayMesh = await this.loadGLBFile()
+      overlayMesh = await this.loadFile()
       threeJSComponent.meshes.overlayMeshes[meshId] = overlayMesh
     }
     const positionOffset = multiplyVector(1 / 1000, this.positionOffset)
@@ -168,6 +122,7 @@ export default class AirTeamOverlay extends Overlay {
       threeJSComponent.scene.add(overlayMesh)
       threeJSComponent.render()
     }
+
     this.overlayMesh = overlayMesh
     this.overlayMesh.frustumCulled = false
     this.set3DObjectMaterialOpacity(this.overlayMesh)
@@ -231,7 +186,6 @@ export default class AirTeamOverlay extends Overlay {
       group.visible = true
       group.opacity = this.opacity
       group.transparent = this.opacity != 1
-      // group.children[2].position=new Paper.Point(paperJSComponent.toCanvasRef(this.geoLocalisation))
     } else {
       group = new Paper.Group()
       imageOverlayPath = this.loadImageOverlay(this.imageUrl, corners)
@@ -239,11 +193,6 @@ export default class AirTeamOverlay extends Overlay {
       handles = this.renderImageOverlayHandles(corners, isRotationHandleVisible)
       group.addChild(imageOverlayPath)
       group.addChild(handles)
-      // let circle=new Paper.Path.Circle(new Paper.Point(paperJSComponent.toCanvasRef(multiplyVector(1000,this.geoLocalisation))),10)
-      // circle.strokeWidth=2
-      // circle.strokeColor = 'lime'
-      // group.addChild(circle)
-
       group.itemType = 'imageOverlays'
       group.data.url = this.url
       group.type = 'imageOverlays'
@@ -374,11 +323,66 @@ export default class AirTeamOverlay extends Overlay {
     circleHandle.visible = rotateHandleVisible
     return handles
   }
+  initialiseCornersAndProjectionCamera() {
+    const box = new THREE.Box3().setFromObject(this.overlayMesh)
+    const boxSize = box.getSize(new THREE.Vector3())
+    this.boxSize = boxSize
+    const boxCenter = box.getCenter(new THREE.Vector3())
+    const left = -boxSize.x / 2
+    const right = +boxSize.x / 2
+    const top = +boxSize.y / 2
+    const bottom = -boxSize.y / 2
+    this.boxCenter = boxCenter
+    const initialCorners = [
+      {
+        x: 1000 * (boxCenter.x + left),
+        y: 1000 * (boxCenter.y + top),
+        z: 0,
+      },
+      {
+        x: 1000 * (boxCenter.x + right),
+        y: 1000 * (boxCenter.y + top),
+        z: 0,
+      },
+      {
+        x: 1000 * (boxCenter.x + right),
+        y: 1000 * (boxCenter.y + bottom),
+        z: 0,
+      },
+      {
+        x: 1000 * (boxCenter.x + left),
+        y: 1000 * (boxCenter.y + bottom),
+        z: 0,
+      },
+    ]
+    this.corners = []
+    initialCorners.forEach((corner, index) => {
+      corner = rotateTransformation(
+        corner,
+        this.angleOffset,
+        multiplyVector(1000, boxCenter)
+      )
+      corner = addVector(corner, this.positionOffset)
+      this.corners[index] = corner
+    })
+    this.overlayProjectionCamera = new THREE.OrthographicCamera(
+      left,
+      right,
+      top,
+      bottom,
+      0.1, // near
+      1000 // far
+    )
+  }
+  checkGeoLocDataAndOffset() {
+    return
+  }
   async initialiseModel() {
-    this.overlayMesh = await this.loadGLBFile()
+    this.overlayMesh = await this.loadFile()
     if (!this.geoLocalisation) {
       this.checkGeoLocDataAndOffset()
     }
+    this.initialiseCornersAndProjectionCamera()
     this.imageUrl = await this.initialiseVerticalProjectionImg()
     this.overlayMesh.position.set(
       this.positionOffset.x / 1000,
@@ -388,86 +392,24 @@ export default class AirTeamOverlay extends Overlay {
     this.overlayMesh.rotateZ(-this.angleOffset)
     return true
   }
-  checkGeoLocDataAndOffset() {
-    const lat0 = this.overlayMesh.children[0].userData.latitude_origin
-    const lng0 = this.overlayMesh.children[0].userData.longitude_origin
-    if (lat0 && lng0 && this.origin) {
-      let { x, y } = deltaLatLngToDistance(
-        lat0 - this.origin.lat,
-        lng0 - this.origin.lng,
-        lat0
-      )
-      if (Math.hypot(x, y) < 100000) {
-        this.positionOffset.x = x
-        this.positionOffset.y = y
-        this.positionOffset.z = 0
-      } else {
-        this.positionOffset.x = 0
-        this.positionOffset.y = 0
-        this.positionOffset.z = 0
-        this.emit('overlay-offset-position-error', { id: this.id })
-      }
-      this.geoLocalisation = { x, y }
-    }
+  setOverlayVisibilityFor2D() {
+    return this.overlayMesh
   }
   initialiseVerticalProjectionImg() {
     return new Promise((resolve, reject) => {
-      const box = new THREE.Box3().setFromObject(this.overlayMesh)
-      const boxSize = box.getSize(new THREE.Vector3())
-      this.boxSize = boxSize
-      this.canvasWidth = boxSize.x * 100
-      this.canvasHeight = boxSize.y * 100
-      const boxCenter = box.getCenter(new THREE.Vector3())
-      const left = -boxSize.x / 2
-      const right = +boxSize.x / 2
-      const top = +boxSize.y / 2
-      const bottom = -boxSize.y / 2
-      this.boxCenter = boxCenter
-      const initialCorners = [
-        {
-          x: 1000 * (boxCenter.x + left),
-          y: 1000 * (boxCenter.y + top),
-          z: 0,
-        },
-        {
-          x: 1000 * (boxCenter.x + right),
-          y: 1000 * (boxCenter.y + top),
-          z: 0,
-        },
-        {
-          x: 1000 * (boxCenter.x + right),
-          y: 1000 * (boxCenter.y + bottom),
-          z: 0,
-        },
-        {
-          x: 1000 * (boxCenter.x + left),
-          y: 1000 * (boxCenter.y + bottom),
-          z: 0,
-        },
-      ]
-      this.corners = []
-      initialCorners.forEach((corner, index) => {
-        corner = rotateTransformation(
-          corner,
-          this.angleOffset,
-          multiplyVector(1000, boxCenter)
-        )
-        corner = addVector(corner, this.positionOffset)
-        this.corners[index] = corner
-      })
       // Create a canvas element
+      this.canvasWidth = this.boxSize.x * 100
+      this.canvasHeight = this.boxSize.y * 100
+      const maxSize = Math.max(this.canvasWidth, this.canvasHeight)
+      const CANVAS_MAX_SIZE = 2048
+      if (maxSize > CANVAS_MAX_SIZE) {
+        this.canvasWidth *= CANVAS_MAX_SIZE / maxSize
+        this.canvasHeight *= CANVAS_MAX_SIZE / maxSize
+      }
       const canvas = this.createCanvas()
 
       // Initialize Three.js
       const scene = new THREE.Scene()
-      this.overlayProjectionCamera = new THREE.OrthographicCamera(
-        left,
-        right,
-        top,
-        bottom,
-        0.1, // near
-        1000 // far
-      )
 
       const renderer = new THREE.WebGLRenderer({
         canvas: canvas,
@@ -475,54 +417,40 @@ export default class AirTeamOverlay extends Overlay {
       })
       renderer.setSize(this.canvasWidth, this.canvasHeight)
       renderer.setClearColor(0x000000, 0) // Make background transparent
-
+      this.setOverlayVisibilityFor2D()
       scene.add(this.overlayMesh)
 
+      const ambientLight = new THREE.AmbientLight(0xffffff, 0.8)
+      ambientLight.name = 'overlayAmbientLight'
+      scene.add(ambientLight)
+      const light = new THREE.HemisphereLight(0xffffff, 0xffffff, 0.8)
+      ambientLight.name = 'overlayHemisphereLight'
+      scene.add(light)
+
       // Set camera position and look at the center of the model
       this.overlayProjectionCamera.position.set(
-        boxCenter.x,
-        boxCenter.y,
-        boxCenter.z + 100
+        this.boxCenter.x,
+        this.boxCenter.y,
+        this.boxCenter.z + 100
       )
-      this.overlayProjectionCamera.lookAt(boxCenter.x, boxCenter.y, 0)
+      this.overlayProjectionCamera.lookAt(this.boxCenter.x, this.boxCenter.y, 0)
       this.overlayProjectionCamera.updateProjectionMatrix()
-      const childrenVisibility = this.overlayMesh.children[0].children.map(
-        (child) => child.visible
-      )
-      this.overlayMesh.children[0].children.forEach(
-        (child) => (child.visible = child.name == 'textured_roof')
-      )
-      const ambientLight = new THREE.AmbientLight(0xffffff, 0.8)
-      this.overlayMesh.children[0].add(ambientLight)
-      const light = new THREE.HemisphereLight(0xffffff, 0xffffff, 0.8)
-      this.overlayMesh.children[0].add(light)
       // Render the scene
       renderer.render(scene, this.overlayProjectionCamera)
 
       // Generate image from canvas
       const imageUrl = canvas.toDataURL()
-      this.overlayMesh.children[0].remove(light)
-      this.overlayMesh.children[0].remove(ambientLight)
-      this.overlayMesh.children[0].children.forEach((child, index) => {
-        child.visible = childrenVisibility[index]
-      })
+      scene.remove(light)
+      scene.remove(ambientLight)
       canvas.parentNode.removeChild(canvas)
       resolve(imageUrl)
     })
   }
-  getProjectedPlanesOnOverlay(outlines) {
-    // const scene = new THREE.Scene()
+  getProjectedPlanesOnOverlay(polygons) {
     const RayCaster = new THREE.Raycaster()
-    // let overlaySimplifiedRoof = this.overlayMesh.getObjectByName(
-    //   'plain_roof_simplified'
-    // )
-    // overlaySimplifiedRoof.visible = true
-    // if(overlaySimplifiedRoof){
-    // }else{
-    let overlaySimplifiedRoof = this.overlayMesh.clone()
-    //}
-    //scene.add(overlayMesh)
-    const cloudsPoints = outlines.map((outline) => {
+    const cloudsPoints = polygons.map((polygon) => {
+      const outline = polygon.outline
+      const holeOutlines = polygon.holes.map((h) => h.outline)
       let outlineBounds = outline.reduce(
         (acc, cur) => {
           acc.xMin = Math.min(acc.xMin, cur.x)
@@ -535,24 +463,27 @@ export default class AirTeamOverlay extends Overlay {
       )
       let { xMin, xMax, yMin, yMax } = outlineBounds
       const cloudPoints = []
-      let stepNum = 5
-      for (let i = 0; i < stepNum; i++) {
-        for (let j = 0; j < stepNum; j++) {
+      let stepNum = 8
+      for (let i = 1; i < stepNum; i++) {
+        for (let j = 1; j < stepNum; j++) {
           const testPoint = {
             x: xMin + (i * (xMax - xMin)) / stepNum,
             y: yMin + (j * (yMax - yMin)) / stepNum,
           }
-          if (isInsidePolygon(testPoint, outline)) {
+          if (
+            isInsidePolygon(testPoint, outline) &&
+            holeOutlines.every(
+              (holeOutline) => !isInsidePolygon(testPoint, holeOutline)
+            )
+          ) {
             RayCaster.set(
-              new THREE.Vector3(testPoint.x / 1000, testPoint.y / 1000, 0),
-              new THREE.Vector3(0, 0, 1)
+              new THREE.Vector3(testPoint.x / 1000, testPoint.y / 1000, 100),
+              new THREE.Vector3(0, 0, -1)
             )
-            let intersects = RayCaster.intersectObject(overlaySimplifiedRoof)
-            intersects.forEach((intersection) => {
-              if (intersection.object.name == 'textured_roof') {
-                cloudPoints.push(intersection.point)
-              }
-            })
+            let intersects = RayCaster.intersectObject(this.overlayMesh)
+            if (intersects.length > 0) {
+              cloudPoints.push(intersects[0].point)
+            }
           }
         }
       }
@@ -560,19 +491,31 @@ export default class AirTeamOverlay extends Overlay {
     })
     const SVDResults = cloudsPoints.map((cloud) => {
       if (cloud.length > 3) {
-        return calculateBestFittingPlanePolygon(cloud)
+        let cloudInMm = cloud.map((p) => {
+          return multiplyVector(1000, p)
+        })
+        let SVDResult = calculateBestFittingPlanePolygon(cloudInMm)
+        let gaps = SVDResult.gaps
+        let standardDeviation = getStandardDeviation(gaps)
+        if (standardDeviation > 10 && cloudInMm.length > 10) {
+          let sortedGaps = gaps.map((p) => p)
+          sortedGaps = sortedGaps.sort((a, b) => a - b)
+          let threshold = sortedGaps[Math.floor(sortedGaps.length * 0.75)]
+          cloudInMm = cloudInMm.filter((_, index) => {
+            return gaps[index] <= threshold
+          })
+          SVDResult = calculateBestFittingPlanePolygon(cloudInMm)
+        }
+        return SVDResult
       } else {
         return null
       }
     })
-    const newOutlines = outlines.map((outline, index) => {
+    const newOutlines = polygons.map((polygon, index) => {
+      let outline = polygon.outline
       if (SVDResults[index]) {
         const normalVector = SVDResults[index].normalVector
-        const referencePoint = multiplyVector(
-          1000,
-          SVDResults[index].projectedOutline[0]
-        )
-
+        const referencePoint = SVDResults[index].projectedOutline[0]
         const newOutline = outline.map((p) =>
           verticalProjectionOnPlane(p, normalVector, referencePoint)
         )

package/src/components/ThreeCanvasViewer.vue

@@ -32,7 +32,7 @@
         intervalId: null,
       }
     },
-    beforeDestroy() {
+    beforeUnmount() {
       clearInterval(this.intervalId)
       cancelAnimationFrame(this.animationFrameId)
       OverlayLayer.removeEventListener(

package/src/helper/UpdateRoofModuleFieldRelations.js

@@ -6,113 +6,53 @@ import {
 } from '@eturnity/eturnity_maths'
 //this function just update the "roof" and "moduleField(s)" properties of panels,moduleFields and roofs
 export function UpdateRoofModuleFieldRelations(state) {
-  const roofPolygons = state.polygons.filter((poly) => poly.layer == 'roof')
-  const moduleFieldPolygons = state.polygons.filter(
+  let moduleFields = state.polygons.filter(
     (poly) => poly.layer == 'moduleField'
   )
-  const panelPolygons = state.polygons.filter((poly) =>
+  let roofs = state.polygons.filter((poly) => poly.layer == 'roof')
+  const panels = state.polygons.filter((poly) =>
     ['panel', 'user_deactivated_panel'].includes(poly.layer)
   )
-  panelPolygons.forEach((panel) => {
-    panel.roof = null
-  })
-  //let's remove all moduleFields from roofs
 
-  roofPolygons.forEach((roofPolygon) => {
-    if (!roofPolygon.moduleFields) {
-      roofPolygon.moduleFields = []
-    }
-    roofPolygon.moduleFields.filter((mf) => {
-      moduleFieldPolygons.some((p) => p.id == mf.id)
+  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 })
+      }
     })
-  })
-  moduleFieldPolygons.forEach((moduleFieldPolygon) => {
-    if (
-      moduleFieldPolygon.roof &&
-      !roofPolygons.some((r) => r.id == moduleFieldPolygon.roof.id)
-    ) {
-      moduleFieldPolygon.roof = null
+    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
     }
   })
-
-  for (let k in moduleFieldPolygons) {
-    const moduleField = moduleFieldPolygons[k]
-    let roofPolygon = moduleField.roof
-    if (!roofPolygon) {
-      //check if everypoint is in the same roof and if they are not too far from the flat surface.(at least above)
-      let roofPolygonCandidates = roofPolygons.map((roof) => {
-        const intersection = intersectOutlines(
-          moduleField.outline,
-          roof.outline
-        )
-        if (intersection.length == 0) {
-          return {
-            roof,
-            intersectionArea: 0,
-            intersectionRatio: 0,
-            areaRatio: 0,
-            roofBiggerThanModuleField: 1,
-          }
-        }
-        const intersectionArea_m2 = calculateArea(intersection[0]) / 1e6
-        return {
-          roof,
-          intersectionArea: intersectionArea_m2,
-          intersectionRatio: (intersectionArea_m2 / roof.area).toFixed(3),
-          areaRatio: (moduleField.area / roof.area).toFixed(3),
-          roofBiggerThanModuleField: roof.area >= moduleField.area ? 1 : -1,
+  roofs.forEach((roof) => (roof.moduleFields = []))
+  panels.forEach((panel) => {
+    panel.roof = null
+  })
+  moduleFields.forEach((moduleField) => {
+    let roof = roofUnderPerModuleFieldId[moduleField.id]
+    if (roof) {
+      moduleField.roof = roof
+      roof.moduleFields.push(moduleField)
+      panels.forEach((panel) => {
+        if (panel.moduleField.id == moduleField.id) {
+          panel.roof = roof
         }
       })
-      //roofs on roof can lead to multiple roof under a point. moduleField is on the smallest
-
-      roofPolygonCandidates
-        .sort((a, b) => b.roof.area - a.roof.area)
-        .sort((a, b) => a.intersectionArea - b.intersectionArea)
-        .sort(
-          (a, b) => a.roofBiggerThanModuleField - b.roofBiggerThanModuleField
-        )
-      let polygonCandidate = roofPolygonCandidates.pop()
-      if (!polygonCandidate) {
-        continue
-      }
-      roofPolygon = polygonCandidate.roof
-      if (!roofPolygon) {
-        continue
-      }
-
-      roofPolygon.moduleFields.push(moduleField)
     }
-    roofPolygon = roofPolygons.find((r) => r.id == roofPolygon.id)
-    roofPolygon.moduleFields = [
-      ...roofPolygon.moduleFields.filter((mf) => mf.id != moduleField.id),
-      moduleField,
-    ]
-    moduleField.roof = roofPolygon
-    moduleField.panels.forEach((panel) => (panel.roof = roofPolygon))
-    panelPolygons.forEach((p) => {
-      if (p.moduleField.id == moduleField.id) {
-        p.roof = roofPolygon
-      }
-    })
-  }
-
-  let newPolygons = state.polygons.map((p) => {
-    if (
-      !['roof', 'moduleField', 'panel', 'user_deactivated_panel'].includes(
-        p.layer
-      )
-    )
-      return p
-    if (p.layer == 'roof') return roofPolygons.find((r) => r.id == p.id)
-    if (p.layer == 'moduleField')
-      return moduleFieldPolygons.find((mf) => mf.id == p.id)
-    if (['panel', 'user_deactivated_panel'].includes(p.layer))
-      return panelPolygons.find((panel) => panel.id == p.id)
   })
-  state = { ...state, polygons: newPolygons }
-
   state = removeModuleFieldAndPanelsOnNoOrMultipleRoofs(state)
-
   return state
 }
 

package/src/helper/UpdateRoofObstacleRelations.js

@@ -25,9 +25,6 @@ export function UpdateRoofObstacleRelations(state, updateVersionEnable = true) {
 
   holePolygons.forEach((obstacle) => {
     //breaking circular reference for memory management
-    for (let k in obstacle.roofs) {
-      obstacle.roofs[k] = null
-    }
     obstacle.roofs = []
 
     let roofsWithObstacle = roofPolygons.filter((roof) => {

package/src/helper/render/imageOverlay.js

@@ -21,7 +21,7 @@ export default {
   methods: {
     renderImageOverlayOnBackground() {
       const overlayGeometries = OverlayLayer.getReadyItems()
-        .filter((overlay) => overlay.isReady && overlay.corners)
+        .filter((overlay) => overlay.isReady && overlay.corners && overlay.type=='image_overlay')
         .map((overlay) => {
           return overlay.getBackgroundGeometry()
         })
@@ -40,7 +40,6 @@ export default {
       this.applyTextureOnMesh(this.overlayMaterials, this.meshes.backgroundMesh)
 
       this.meshes.backgroundMesh.visible = true
-
       return
     },
     async getOverlaysMaterials() {
@@ -49,7 +48,8 @@ export default {
         overlayMaterialsPromises.push(overlay.getProjectionMaterial())
       })
       overlayMaterialsPromises = overlayMaterialsPromises.filter((p) => !!p)
-      this.imageOverlayMaterial = await Promise.all(overlayMaterialsPromises)
+      const imageOverlayMaterial = await Promise.all(overlayMaterialsPromises)
+      this.imageOverlayMaterial=imageOverlayMaterial.filter(m=>!!m)
       return this.imageOverlayMaterial
     },
   },

package/src/helper/render/margin.js

@@ -28,7 +28,7 @@ export default {
         showableRoofs = this.roofs
       }
       showableRoofs.forEach((roofPolygon) => {
-        const geometries = getBufferRoofMarginGeometry(roofPolygon)
+        const geometries = getBufferRoofMarginGeometry(roofPolygon, roofPolygon)
 
         geometries.forEach((geometry, index) => {
           if (geometry) {

package/src/helper/render/overlay.js

@@ -1,5 +1,3 @@
-import * as THREE from 'three'
-import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
 import { mapState } from 'vuex'
 import OverlayLayer from '../../Overlay/OverlayLayer.js'
 
@@ -8,7 +6,6 @@ export default {
     return {}
   },
   created() {
-    this.glbLoader = new GLTFLoader()
   },
   computed: {
     ...mapState({}),

package/src/helper/render/tileProjection.js

@@ -106,16 +106,6 @@ export default {
       const latitude = this.layoutSettings.layout_latitude
       const longitude = this.layoutSettings.layout_longitude
       let corners = tileToCorners(x, y, zoom, latitude, longitude)
-      let height, width, tileCenter
-      let numberOfTiles = Math.pow(2, zoom)
-      height =
-        (2000 * Math.PI * earthRadius * Math.cos((latitude * Math.PI) / 180)) /
-        numberOfTiles
-      width = height
-      tileCenter = {
-        x: (corners[0].x + corners[2].x) / 2,
-        y: (corners[0].y + corners[2].y) / 2,
-      }
 
       camera.left = corners[0].x / 1000
       camera.right = corners[2].x / 1000

package/src/helper/renderMixin.js

@@ -176,6 +176,11 @@ export default {
             method: this.renderOverlays,
             arg: [],
           })
+          methodList.push({
+            name: 'updateProjectionMaterials',
+            method: this.updateProjectionMaterials,
+            arg: [],
+          })
         case 'removeNodes': //params.nodes
         case 'removeEdges': //params.edges
         case 'translate': //params.edges
@@ -268,6 +273,11 @@ export default {
             method: this.renderRoofsMargin,
             arg: [],
           })
+          methodList.push({
+            name: 'renderTiles',
+            method: this.debouncedRenderTiles,
+            arg: [],
+          })
           break
         case 'removePanels': //params.panels
         case 'removeModuleField': //params:moduleField

package/src/helper/threeMixin.js

@@ -105,12 +105,14 @@ export default {
       })
     },
     initialiseLights() {
-      const ambientLight = new THREE.AmbientLight(0xf0f0f0, 0.5)
+      // const ambientLight = new THREE.AmbientLight(0xffffff, 0.5)
+      var hemiLight = new THREE.HemisphereLight(0xffffff, 0x444444)
+      hemiLight.position.set(0, 0, 300)
+      this.scene.add(hemiLight)
       let directionalLight = new THREE.DirectionalLight(0xffffff, 0.5)
       directionalLight.position.set(0, 1000, 500)
       let directionalLight2 = new THREE.DirectionalLight(0xffffff, 0.5)
       directionalLight2.position.set(0, -1000, 500)
-      this.scene.add(ambientLight)
       this.scene.add(directionalLight)
       this.scene.add(directionalLight2)
     },

package/src/store/hydrateData.js

@@ -24,9 +24,9 @@ function sanitizedOutline(outline) {
   }, [])
 }
 export async function hydratePolygons({
-  roofsResponse,
-  obstaclesResponse,
-  moduleFieldsResponse,
+  roofsResponse = [],
+  obstaclesResponse = [],
+  moduleFieldsResponse = [],
 }) {
   //removing empty roof,obstacle and modulefield generated by BE on variant creation
   roofsResponse = roofsResponse.reduce((acc, cur) => {
@@ -124,6 +124,7 @@ export async function hydratePolygons({
     moduleField.version = moduleFieldResp.version
 
     moduleField.pvData = {}
+    moduleField.mountingData = {}
     moduleField.pvData.module_texture_version_id =
       moduleFieldResp.module_texture_version_id
     moduleField.data = {}
@@ -204,11 +205,13 @@ export async function hydratePolygons({
       })
 
     const roof = roofs.find((r) => r.id == moduleFieldResp.roof_uuid)
-    if (!roof.moduleFields) {
-      roof.moduleFields = []
+    if (roof) {
+      if (!roof.moduleFields) {
+        roof.moduleFields = []
+      }
+      roof.moduleFields.push(moduleField)
+      moduleField.roof = roof
     }
-    roof.moduleFields.push(moduleField)
-    moduleField.roof = roof
     moduleField.panels = MFpanels
     moduleField.userDeactivatedPanels = MFuserDeactivatedPanels
     try {
@@ -244,7 +247,6 @@ export async function hydrateData({ state, commit }, data) {
   let layers = getLayers()
   let selectedLayer = layers.find((layer) => layer.key == mapType)
   commit('mutate_selectedMapLayer', selectedLayer)
-
   if (overlaysResponse) {
     let origin
     if (layoutSettingResponse) {

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

@@ -3,7 +3,7 @@ import {
   generateNodes3D,
   generateEdges2D,
   generateEdges3D,
-} from './nodesEdgesCreation'
+} from '@eturnity/eturnity_maths'
 import { hydrateData } from './hydrateData.js'
 
 const init_state = {

package/src/store/nodesEdgesCreation.js

@@ -1,279 +0,0 @@
-import { Point, Line } from '@eturnity/eturnity_maths'
-import { mmTolerance, mmTolerance3dNode } from '../config'
-import {
-  isAlmostSamePoint3D,
-  isAlmostSameSegment2D,
-  isAlmostSameSegment3D,
-  isAlmostSamePoint2D,
-  verticalProjectionOnPlane,
-} from '@eturnity/eturnity_maths'
-
-export function generateNodes2D(polygons) {
-  let nodes2D = []
-  polygons
-    .filter((poly) =>
-      [
-        'roof',
-        'obstacle',
-        'tmpModuleField',
-        'moduleField',
-        'construction',
-      ].includes(poly.layer)
-    )
-    .forEach((polygon) => {
-      const outline = polygon.outline
-      outline.forEach((point, i) => {
-        //check if nodes2D already exist
-        let node2D = nodes2D.find(
-          (node) =>
-            isAlmostSamePoint2D(node, point, mmTolerance) &&
-            node.layer == polygon.layer
-        )
-        if (!node2D) {
-          node2D = new Point(point.x, point.y, point.z, polygon.layer)
-          node2D.belongsTo = []
-          node2D.id = 'node2D'
-          node2D.itemType = 'node2D'
-          node2D.layer = polygon.layer
-          node2D.masterHandle = {
-            id: node2D.id,
-            itemType: 'masterHandle',
-            open: null,
-            selected: null,
-          }
-          nodes2D.push(node2D)
-        }
-        node2D.belongsTo.push({
-          polygonId: polygon.id,
-          index: i,
-          polygon,
-        })
-        node2D.id += '_' + polygon.id + '_' + i
-      })
-    })
-
-  //all nodes has been created. now lets update open/selected field
-  nodes2D.forEach((node2D) => {
-    if (node2D.masterHandle) {
-      node2D.masterHandle.open = node2D.belongsTo.some(
-        (item) => item.index == null || item.polygon.outline[item.index].open
-      )
-      node2D.masterHandle.selected = node2D.belongsTo.every(
-        (item) =>
-          item.index == null || item.polygon.outline[item.index].selected
-      )
-      node2D.masterHandle.locked = node2D.belongsTo.every(
-        (item) => item.index == null || item.polygon.outline[item.index].locked
-      )
-    }
-  })
-  return nodes2D
-}
-
-export function generateNodes3D(polygons) {
-  let nodes3D = []
-  polygons
-    .filter((poly) =>
-      ['roof', 'obstacle', 'tmpModuleField', 'moduleField'].includes(poly.layer)
-    )
-    .forEach((polygon) => {
-      const outline = polygon.outline
-      outline.forEach((point, i) => {
-        //check if nodes2D already exist
-        let node3D = nodes3D.find((node) =>
-          isAlmostSamePoint3D(node, point, mmTolerance3dNode)
-        )
-        if (!node3D) {
-          node3D = new Point(point.x, point.y, point.z, polygon.layer)
-          node3D.belongsTo = []
-          node3D.id = 'node3D'
-          node3D.itemType = 'node3D'
-          node3D.layer = polygon.layer
-          node3D.masterHandle = {
-            id: node3D.id,
-            itemType: 'masterHandle',
-            open: null,
-            selected: null,
-          }
-          nodes3D.push(node3D)
-        }
-        node3D.belongsTo.push({
-          polygonId: polygon.id,
-          index: i,
-          polygon,
-        })
-        node3D.id += '_' + polygon.id + '_' + i
-      })
-    })
-  //all nodes has been created. now lets update open/selected field
-  nodes3D.forEach((node3D) => {
-    if (node3D.masterHandle) {
-      node3D.masterHandle.open = node3D.belongsTo.some(
-        (item) => item.polygon.outline[item.index].open
-      )
-      node3D.masterHandle.selected = node3D.belongsTo.every(
-        (item) => item.polygon.outline[item.index].selected
-      )
-    }
-  })
-  return nodes3D
-}
-
-export function generateEdges2D(polygons, splitEdgesIds = []) {
-  let edges2D = []
-  polygons
-    .filter((poly) =>
-      ['roof', 'obstacle', 'moduleField', 'construction'].includes(poly.layer)
-    )
-    .forEach((polygon) => {
-      const outline = polygon.outline
-      outline.forEach((point, i) => {
-        const isLastPointOfPolygon = i == outline.length - 1
-        if (!polygon.isClosed && isLastPointOfPolygon) {
-          return
-        }
-        //check if edge2D already exist
-        const nextPoint = outline[(i + 1) % outline.length]
-        let edge2D = edges2D.find((edge) => {
-          return (
-            isAlmostSameSegment2D(
-              [point, nextPoint],
-              edge.outline,
-              mmTolerance
-            ) && edge.layer == polygon.layer
-          )
-        })
-        if (!edge2D) {
-          //create an edge at this position
-          edge2D = new Line(point, nextPoint, polygon.layer)
-          edge2D.id = 'edge2D'
-          edge2D.belongsTo = []
-          edge2D.layer = polygon.layer
-          edge2D.selected = false
-          edge2D.itemType = 'edge2D'
-          edges2D.push(edge2D)
-        }
-        //add BelongToPolygon
-        edge2D.belongsTo.push({
-          polygonId: polygon.id,
-          index: i,
-          polygon,
-        })
-        if (polygon.roofs && polygon.roofs.length > 0) {
-          polygon.roofs.forEach((supportRoof) => {
-            edge2D.belongsTo.push({
-              polygonId: supportRoof.id,
-              index: null,
-              polygon: supportRoof,
-            })
-          })
-        }
-        edge2D.id += '_' + polygon.id + '_' + i
-      })
-    })
-  edges2D.forEach((edge2D) => {
-    edge2D.isSplit = splitEdgesIds.includes(edge2D.id)
-    if (edge2D.belongsTo.length > 2) {
-      edge2D.belongsTo = edge2D.belongsTo.filter((i) => i.index !== null)
-    }
-  })
-  edges2D.forEach((edge2D) => {
-    const isNotSplit = edge2D.belongsTo.every((item, index, array) => {
-      if (index == 0) {
-        return true
-      }
-      const outline0 = array[0].polygon.outline
-      const outline1 = item.polygon.outline
-      let point0, point1, nextPoint0, nextPoint1
-      let pointNull = []
-      if (array[0].index !== null) {
-        point0 = outline0[array[0].index]
-        nextPoint0 = outline0[(array[0].index + 1) % outline0.length]
-      } else {
-        pointNull.push(0)
-        point0 = verticalProjectionOnPlane(
-          outline1[item.index],
-          array[0].polygon.normalVector,
-          array[0].polygon.flatOutline[0]
-        )
-        nextPoint0 = verticalProjectionOnPlane(
-          outline1[(item.index + 1) % outline1.length],
-          array[0].polygon.normalVector,
-          array[0].polygon.flatOutline[0]
-        )
-      }
-      if (item.index !== null) {
-        point1 = outline1[item.index]
-        nextPoint1 = outline1[(item.index + 1) % outline1.length]
-      } else {
-        pointNull.push(1)
-        point1 = verticalProjectionOnPlane(
-          outline0[array[0].index],
-          item.polygon.normalVector,
-          item.polygon.flatOutline[0]
-        )
-        nextPoint1 = verticalProjectionOnPlane(
-          outline0[(array[0].index + 1) % outline0.length],
-          item.polygon.normalVector,
-          item.polygon.flatOutline[0]
-        )
-      }
-      const isSameSeg = isAlmostSameSegment3D(
-        [point0, nextPoint0],
-        [point1, nextPoint1],
-        mmTolerance
-      )
-      return isSameSeg
-    })
-    if (!isNotSplit && edge2D.belongsTo.length == 2 && edge2D.layer == 'roof') {
-      edge2D.isSplit = true
-    }
-  })
-  return edges2D
-}
-
-export function generateEdges3D(polygons) {
-  let edges3D = []
-  polygons
-    .filter((poly) =>
-      ['roof', 'obstacle', 'moduleField', 'construction'].includes(poly.layer)
-    )
-    .forEach((polygon) => {
-      const outline = polygon.outline
-      outline.forEach((point, i) => {
-        const isLastPointOfPolygon = i == outline.length - 1
-        if (!polygon.isClosed && isLastPointOfPolygon) {
-          return
-        }
-        //check if edge2D already exist
-        const nextPoint = outline[(i + 1) % outline.length]
-        let edge3D = edges3D.find((edge) => {
-          return (
-            isAlmostSameSegment3D(
-              [point, nextPoint],
-              edge.outline,
-              mmTolerance
-            ) && edge.layer == polygon.layer
-          )
-        })
-        if (!edge3D) {
-          //create an edge at this position
-          edge3D = new Line(point, nextPoint, polygon.layer)
-          edge3D.id = 'edge3D'
-          edge3D.belongsTo = []
-          edge3D.layer = polygon.layer
-          edge3D.selected = false
-          edge3D.itemType = 'edge3D'
-          edges3D.push(edge3D)
-        }
-        //add BelongToPolygon
-        edge3D.belongsTo.push({
-          polygonId: polygon.id,
-          index: i,
-          polygon,
-        })
-        edge3D.id += '_' + polygon.id + '_' + i
-      })
-    })
-  return edges3D
-}