@eturnity/eturnity_3d 8.4.3 → 8.7.0-EPDM-12535.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eturnity/eturnity_3d",
   "private": false,
-  "version": "8.4.3",
+  "version": "8.7.0-EPDM-12535.0",
   "files": [
     "dist",
     "src"
@@ -15,7 +15,7 @@
     "prettier": "prettier --write \"**/*.{js,vue}\""
   },
   "dependencies": {
-    "@eturnity/eturnity_maths": "8.4.2",
+    "@eturnity/eturnity_maths": "8.7.0-EPDM-12535.0",
     "@originjs/vite-plugin-commonjs": "1.0.3",
     "core-js": "3.30.2",
     "cors": "2.8.5",

package/src/Overlay/ImageOverlay.js

@@ -9,7 +9,6 @@ import {
   normalize2DVector,
   vectorLength2D,
 } from '@eturnity/eturnity_maths'
-let Paper
 export default class ImageOverlay extends Overlay {
   constructor(overlay, emit) {
     super(overlay, emit)
@@ -42,15 +41,6 @@ export default class ImageOverlay extends Overlay {
       this.isReadyCallback = []
     })
   }
-  onLoad() {
-    return new Promise((resolve) => {
-      if (this.isReady) {
-        resolve(this)
-      } else {
-        this.isReadyCallback.push(resolve)
-      }
-    })
-  }
   async initialiseImage(url) {
     const img = new Image()
     img.crossOrigin = 'Anonymous'
@@ -120,7 +110,7 @@ export default class ImageOverlay extends Overlay {
     this.emit('overlay-scale-updated', { id: this.id })
   }
   renderOnPaperJS(paperJSComponent) {
-    Paper = paperJSComponent.paperScope
+    this.Paper = paperJSComponent.paperScope
     if (!this.isReady || !this.isActive || !this.corners) {
       return
     }
@@ -140,15 +130,9 @@ export default class ImageOverlay extends Overlay {
         paperJSComponent.clearPath(group.children[0])
         group.insertChild(0, imageOverlayPath)
       }
-      handles = this.renderImageOverlayHandles(
-        corners,
-        isRotationHandleVisible,
-        group.children[1]
-      )
       this.applyRasterToCorners(imageOverlayPath, corners)
-      group.visible = true
     } else {
-      group = new Paper.Group()
+      group = new this.Paper.Group()
       imageOverlayPath = this.loadImageOverlay(this.url, corners)
 
       handles = this.renderImageOverlayHandles(corners, isRotationHandleVisible)
@@ -160,21 +144,23 @@ export default class ImageOverlay extends Overlay {
       group.type = 'imageOverlays'
       group.pathId = this.id
       group.overlayId = this.id
-      group.visible = true
       paperJSComponent.paths.imageOverlays[this.id] = group
     }
+    group.visible = true
     imageOverlayPath.opacity = this.opacity
     handles.visible = isRotationHandleVisible
   }
   loadImageOverlay(url, corners) {
     let rasterImageOverlay = this.img
-      ? new Paper.Raster(this.img)
-      : new Paper.Raster({
+      ? new this.Paper.Raster(this.img)
+      : new this.Paper.Raster({
           source: url,
           crossOrigin: 'Anonymous',
         })
+    rasterImageOverlay.visible = false
     rasterImageOverlay.onLoad = () => {
       this.applyRasterToCorners(rasterImageOverlay, corners)
+      rasterImageOverlay.visible = true
     }
     rasterImageOverlay.data.angle = 0
     rasterImageOverlay.data.type = 'imageOverlayRaster'
@@ -182,120 +168,6 @@ export default class ImageOverlay extends Overlay {
     rasterImageOverlay.data.url = url
     return rasterImageOverlay
   }
-  applyRasterToCorners(texture, corners = this.corners) {
-    //remove angle of texture
-    let textureAngle = texture.angle || 0
-    texture.rotate(-textureAngle)
-
-    //make texture the same size to fit corners
-    const textureWidth = texture.bounds.width
-    const textureHeight = texture.bounds.height
-    const frameWidth = getDistanceBetweenPoints(corners[1], corners[0])
-    const frameHeight = getDistanceBetweenPoints(corners[3], corners[0])
-    const center = multiplyVector(0.5, addVector(corners[0], corners[2]))
-    if (texture.bounds.width) {
-      var a = frameWidth / textureWidth
-      var b = 0
-      var c = 0
-      var d = frameHeight / textureHeight
-      texture.transform(new Paper.Matrix(a, b, c, d, 0, 0))
-      //translate to fit top left corner
-      var tx = center.x - texture.bounds.center.x
-      var ty = center.y - texture.bounds.center.y
-      texture.transform(new Paper.Matrix(1, 0, 0, 1, tx, ty))
-      //rotate
-      let angle = getAngleInDegFromCanvasVector(
-        substractVector(corners[0], corners[3])
-      )
-
-      texture.angle = angle
-      texture.rotate(angle)
-    }
-  }
-  renderImageOverlayHandles(corners, rotateHandleVisible, group = null) {
-    let circleHandle
-    let hasPaths = !!group
-    let handles = group || new Paper.Group()
-    let u = normalize2DVector(substractVector(corners[1], corners[0]))
-    let v = normalize2DVector(substractVector(corners[0], corners[3]))
-
-    //rotation handle
-    let center = multiplyVector(0.5, addVector(corners[0], corners[2]))
-
-    let radius = vectorLength2D(substractVector(center, corners[0])) - 10
-    if (!hasPaths) {
-      circleHandle = new Paper.Path.Circle(center, radius)
-      circleHandle.fillColor = layerColors.imageOverlayHandle.fillColor
-      circleHandle.strokeWidth = layerColors.imageOverlayHandle.strokeWidth
-      circleHandle.strokeColor = layerColors.imageOverlayHandle.strokeColor
-      circleHandle.data.type = 'imageOverlayRotateHandle'
-      circleHandle.data.overlayId = this.id
-      circleHandle.radius = radius
-      handles.addChild(circleHandle)
-    } else {
-      circleHandle = handles.children[0]
-      let ratio = radius / circleHandle.radius
-      circleHandle.transform(new Paper.Matrix(ratio, 0, 0, ratio, 0, 0))
-      circleHandle.position = center
-      circleHandle.radius = radius
-    }
-
-    circleHandle.visible = rotateHandleVisible
-
-    //scale handle
-    for (let k = 0; k < 4; k++) {
-      let squareSize = 10
-      let squareHandleVertices = [
-        addVector(
-          addVector(corners[k], multiplyVector(squareSize / 2, u)),
-          multiplyVector(squareSize / 2, v)
-        ),
-        addVector(
-          addVector(corners[k], multiplyVector(-squareSize / 2, u)),
-          multiplyVector(squareSize / 2, v)
-        ),
-        addVector(
-          addVector(corners[k], multiplyVector(-squareSize / 2, u)),
-          multiplyVector(-squareSize / 2, v)
-        ),
-        addVector(
-          addVector(corners[k], multiplyVector(squareSize / 2, u)),
-          multiplyVector(-squareSize / 2, v)
-        ),
-        addVector(
-          addVector(corners[k], multiplyVector(squareSize / 2, u)),
-          multiplyVector(squareSize / 2, v)
-        ),
-      ]
-      let squareHandle
-
-      if (hasPaths) {
-        squareHandle = handles.children[k + 1]
-        squareHandle.position = corners[k]
-        //squareHandle.rotate()
-        for (let index in squareHandleVertices) {
-          let vertex = squareHandleVertices[index]
-          squareHandle.segments[index].point = vertex
-        }
-      } else {
-        squareHandle = new Paper.Path()
-
-        for (let vertex of squareHandleVertices) {
-          squareHandle.add(vertex)
-        }
-
-        squareHandle.fillColor = layerColors.imageOverlayHandle.fillColor
-        squareHandle.strokeWidth = layerColors.imageOverlayHandle.strokeWidth
-        squareHandle.strokeColor = layerColors.imageOverlayHandle.strokeColor
-        squareHandle.data.type = 'handle'
-        squareHandle.data.index = k
-
-        handles.addChild(squareHandle)
-      }
-      squareHandle.visible = false
-    }
-    return handles
-  }
   renderOnThreeJS(threeJSComponent) {}
   serializeSettings() {
     return {

package/src/Overlay/Overlay.js

@@ -1,5 +1,6 @@
 import { v4 as uuidv4 } from 'uuid'
 import Item from '../Item/Item'
+import { layerColors } from '../config'
 import {
   multiplyVector,
   addVector,
@@ -7,6 +8,7 @@ import {
   substractVector,
   getDistanceBetweenPoints,
   getAngleInDegFromCanvasVector,
+  vectorLength2D,
 } from '@eturnity/eturnity_maths'
 import {
   updateBufferRoofGeometry,
@@ -14,6 +16,7 @@ import {
 } from '../helper/render/geometryHandler'
 import * as THREE from 'three'
 import ProjectedMaterial from '../helper/projectedMaterial'
+
 export default class Overlay extends Item {
   constructor(overlay, emit) {
     super(emit)
@@ -21,6 +24,7 @@ export default class Overlay extends Item {
       ? overlay.layouting_overlay_uuid.toString()
       : uuidv4()
     this.actionsAvailable.push('setOpacity')
+    this.hasToBeSavedInBE = true
     this.isActive = overlay.is_active
     this.isReady = false
     this.resources = overlay.resources
@@ -54,6 +58,16 @@ export default class Overlay extends Item {
     this.overlayProjectionCamera.up.set(0, 1, 0)
     this.isSelected = false
     this.isReadyCallback = []
+    this.projectionMaterialPriority = 30
+  }
+  onLoad() {
+    return new Promise((resolve) => {
+      if (this.isReady) {
+        resolve(this)
+      } else {
+        this.isReadyCallback.push(resolve)
+      }
+    })
   }
   getCenter() {
     let center = multiplyVector(
@@ -133,17 +147,67 @@ export default class Overlay extends Item {
     this.corners = newCorners
     this.emit('item-updated', this)
   }
+  loadImageOverlay(url, corners) {
+    let rasterImageOverlay = new this.Paper.Raster({
+      source: url,
+      crossOrigin: 'Anonymous',
+    })
+    rasterImageOverlay.visible = false
+    rasterImageOverlay.onLoad = () => {
+      this.applyRasterToCorners(rasterImageOverlay, corners)
+      rasterImageOverlay.visible = true
+    }
+    rasterImageOverlay.data.angle = 0
+    rasterImageOverlay.data.type = 'imageOverlayRaster'
+    rasterImageOverlay.data.overlayId = this.id
+    rasterImageOverlay.data.url = url
+    return rasterImageOverlay
+  }
+  applyRasterToCorners(texture, corners = this.corners) {
+    //remove angle of texture
+    let textureAngle = texture.angle || 0
+    texture.rotate(-textureAngle)
+
+    //make texture the same size to fit corners
+    const textureWidth = texture.bounds.width
+    const textureHeight = texture.bounds.height
+    const frameWidth = getDistanceBetweenPoints(corners[1], corners[0])
+    const frameHeight = getDistanceBetweenPoints(corners[3], corners[0])
+    const center = multiplyVector(0.5, addVector(corners[0], corners[2]))
+    if (texture.bounds.width) {
+      var a = frameWidth / textureWidth
+      var b = 0
+      var c = 0
+      var d = frameHeight / textureHeight
+      texture.transform(new this.Paper.Matrix(a, b, c, d, 0, 0))
+      //translate to fit top left corner
+      var tx = center.x - texture.bounds.center.x
+      var ty = center.y - texture.bounds.center.y
+      texture.transform(new this.Paper.Matrix(1, 0, 0, 1, tx, ty))
+      //rotate
+      let angle = getAngleInDegFromCanvasVector(
+        substractVector(corners[0], corners[3])
+      )
+
+      texture.angle = angle
+      texture.rotate(angle)
+    }
+  }
   async getProjectionMaterial() {
-    if (!this.isReady || !this.corners) {
+    if (!this.isReady || !this.isActive || !this.corners) {
       return null
     }
     const url = this.imageUrl
     return new Promise((resolve) => {
-      if (this.imageOverlayProjectionMaterial) {
+      if (
+        this.imageOverlayProjectionMaterial &&
+        this.version == this.imageOverlayProjectionMaterial.userData.version
+      ) {
         const cameraChanged = this.setImageOverlayCameraPosition()
         if (cameraChanged) {
           this.imageOverlayProjectionMaterial.userData.version++
         }
+        this.imageOverlayProjectionMaterial.userData.version = this.version
         this.imageOverlayProjectionMaterial.opacity = this.opacity
         resolve(this.imageOverlayProjectionMaterial)
         return
@@ -164,14 +228,15 @@ export default class Overlay extends Item {
 
         imageOverlayProjectionMaterial.userData = {}
         imageOverlayProjectionMaterial.userData.type = 'overlayMaterial'
+        imageOverlayProjectionMaterial.userData.overlayType = this.type
         imageOverlayProjectionMaterial.userData.version = 0
-        imageOverlayProjectionMaterial.priority = 30
+        imageOverlayProjectionMaterial.priority =
+          this.projectionMaterialPriority
         imageOverlayProjectionMaterial.userData.url = url
         imageOverlayProjectionMaterial.opacity = this.opacity
         this.imageOverlayProjectionMaterial = imageOverlayProjectionMaterial
         resolve(imageOverlayProjectionMaterial)
       }
-
       if (this.img) {
         callback(new THREE.Texture(this.img))
       } else {
@@ -198,7 +263,7 @@ export default class Overlay extends Item {
   setImageOverlayCameraPosition() {
     let cameraChanged = false
     const boxCenter = multiplyVector(
-      0.5,
+      0.0005,
       addVector(this.corners[0], this.corners[2])
     )
     boxCenter.z = 0
@@ -229,21 +294,63 @@ export default class Overlay extends Item {
     this.overlayProjectionCamera.rotation.set(0, 0, (zAngle * Math.PI) / 180)
     const CAMERA_HEIGHT_OFFSET = 50
     if (
-      this.overlayProjectionCamera.position.x != boxCenter.x / 1000 ||
-      this.overlayProjectionCamera.position.y != boxCenter.y / 1000 ||
+      this.overlayProjectionCamera.position.x != boxCenter.x ||
+      this.overlayProjectionCamera.position.y != boxCenter.y ||
       this.overlayProjectionCamera.position.z !=
-        boxCenter.z / 1000 + CAMERA_HEIGHT_OFFSET
+        boxCenter.z + CAMERA_HEIGHT_OFFSET
     ) {
       cameraChanged = true
     }
     this.overlayProjectionCamera.position.set(
-      boxCenter.x / 1000,
-      boxCenter.y / 1000,
-      boxCenter.z / 1000 + CAMERA_HEIGHT_OFFSET
+      boxCenter.x,
+      boxCenter.y,
+      boxCenter.z + CAMERA_HEIGHT_OFFSET
     )
     this.overlayProjectionCamera.updateProjectionMatrix()
     return cameraChanged
   }
+  renderImageOverlayHandles(corners, rotateHandleVisible, group = null) {
+    let circleHandle
+    let hasPaths = !!group
+    let handles = group || new this.Paper.Group()
+    //rotation handle
+    let center = multiplyVector(0.5, addVector(corners[0], corners[2]))
+
+    let radius = vectorLength2D(substractVector(center, corners[0])) - 10
+    if (!hasPaths) {
+      circleHandle = new this.Paper.Path.Circle(center, radius)
+      circleHandle.fillColor = layerColors.imageOverlayHandle.fillColor
+      circleHandle.strokeWidth = layerColors.imageOverlayHandle.strokeWidth
+      circleHandle.strokeColor = layerColors.imageOverlayHandle.strokeColor
+      circleHandle.data.type = 'imageOverlayRotateHandle'
+      circleHandle.data.overlayId = this.id
+      circleHandle.radius = radius
+      handles.addChild(circleHandle)
+    } else {
+      circleHandle = handles.children[0]
+      let ratio = radius / circleHandle.radius
+      circleHandle.transform(new this.Paper.Matrix(ratio, 0, 0, ratio, 0, 0))
+      circleHandle.position = center
+      circleHandle.radius = radius
+    }
+
+    circleHandle.visible = rotateHandleVisible
+    return handles
+  }
+  createCanvas() {
+    const canvas = document.createElement('canvas')
+    canvas.width = this.canvasWidth
+    canvas.height = this.canvasHeight
+    canvas.style.position = 'fixed'
+    canvas.style.top = '100px'
+    canvas.style.left = '50px'
+    canvas.style.zIndex = 0
+    // Add the canvas to the document body
+    document.body.appendChild(canvas)
+    return canvas
+  }
+  renderOnPaperJS(paperJSComponent) {}
+  renderOnThreeJS(threeJSComponent) {}
   serialize() {
     const serializedOverlay = {
       layouting_overlay_uuid: this.id,
@@ -259,9 +366,6 @@ export default class Overlay extends Item {
     }
     return serializedOverlay
   }
-
-  renderOnPaperJS(paperJSComponent) {}
-  renderOnThreeJS(threeJSComponent) {}
   serializeSettings() {
     return {}
   }

package/src/Overlay/OverlayFactory.js

@@ -1,6 +1,7 @@
 import Overlay from './Overlay'
 import GLBOverlay from './GLBOverlay'
 import ImageOverlay from './ImageOverlay'
+import YearlySunShadingOverlay from './YearlySunShadingOverlay'
 
 const OverlayFactory = {
   createOverlay(serializedOverlay, emit, origin = { lat: null, lng: null }) {
@@ -9,6 +10,8 @@ const OverlayFactory = {
       overlayInstance = new GLBOverlay(serializedOverlay, emit, origin)
     } else if (serializedOverlay.type == 'image_overlay') {
       overlayInstance = new ImageOverlay(serializedOverlay, emit)
+    } else if (serializedOverlay.type == 'yearly_sun_shading') {
+      overlayInstance = new YearlySunShadingOverlay(serializedOverlay, emit)
     } else {
       overlayInstance = new Overlay(serializedOverlay, emit)
     }

package/src/Overlay/OverlayLayer.js

@@ -12,6 +12,12 @@ class OverlayLayer extends LayerManager {
       'overlay-three-loaded'
     )
   }
+  getItemsToSaveInBE() {
+    return this.items.filter((item) => item.hasToBeSavedInBE)
+  }
+  getUserItems() {
+    return this.items.filter((item) => item.type != 'yearly_sun_shading')
+  }
   addOrUpdateSerializedItems(
     serializedOverlays,
     origin = { lat: null, lng: null }

package/src/Overlay/ThreeDModelOverlay.js

@@ -1,23 +1,14 @@
 import Overlay from './Overlay'
 import * as THREE from 'three'
-import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
-import { layerColors } from '../config'
 import {
-  getDistanceBetweenPoints,
   addVector,
   multiplyVector,
-  substractVector,
-  getAngleInDegFromCanvasVector,
-  normalize2DVector,
   isInsidePolygon,
   calculateBestFittingPlanePolygon,
   verticalProjectionOnPlane,
-  vectorLength2D,
-  deltaLatLngToDistance,
   rotateTransformation,
   getStandardDeviation,
 } from '@eturnity/eturnity_maths'
-let Paper
 export default class ThreeDModelOverlay extends Overlay {
   constructor(overlay, emit, origin, loader) {
     super(overlay, emit)
@@ -44,15 +35,6 @@ export default class ThreeDModelOverlay extends Overlay {
     this.geoLocalisation = this.settings.geoLocalisation
   }
   loadFile() {}
-  onLoad() {
-    return new Promise((resolve) => {
-      if (this.isReady) {
-        resolve(this)
-      } else {
-        this.isReadyCallback.push(resolve)
-      }
-    })
-  }
   set3DObjectMaterialOpacity(obj) {
     obj.children.forEach((child) => {
       this.set3DObjectMaterialOpacity(child, this.opacity)
@@ -65,7 +47,6 @@ export default class ThreeDModelOverlay extends Overlay {
     if (this.overlayMesh && this.overlayMesh.children.length == 0) {
       this.overlayMesh = await this.loadFile()
     }
-
     if (!this.isReady) {
       let waitingBall = threeJSComponent.meshes.overlayMeshes[this.id]
       if (!waitingBall) {
@@ -126,9 +107,10 @@ export default class ThreeDModelOverlay extends Overlay {
     this.overlayMesh = overlayMesh
     this.overlayMesh.frustumCulled = false
     this.set3DObjectMaterialOpacity(this.overlayMesh)
+    return overlayMesh
   }
   renderOnPaperJS(paperJSComponent) {
-    Paper = paperJSComponent.paperScope
+    this.Paper = paperJSComponent.paperScope
     if (!this.isActive) {
       return
     }
@@ -139,7 +121,7 @@ export default class ThreeDModelOverlay extends Overlay {
         if (!paperJSComponent.loadingSpinner) {
           return
         }
-        group = new Paper.Group()
+        group = new this.Paper.Group()
 
         group.addChild(this.renderImagePlaceHolder(paperJSComponent))
         group.itemType = 'placeholderOverlays'
@@ -150,7 +132,7 @@ export default class ThreeDModelOverlay extends Overlay {
         this.placeholderPath = group
 
         paperJSComponent.paperLayer['loadingSpinners'].activate()
-        Paper.view.onFrame = (event) => this.animatePlaceholder(event)
+        this.Paper.view.onFrame = (event) => this.animatePlaceholder(event)
       }
       paperJSComponent.paths.imageOverlays[this.id] = group
       this.hasPlaceholderPath = true
@@ -187,7 +169,7 @@ export default class ThreeDModelOverlay extends Overlay {
       group.opacity = this.opacity
       group.transparent = this.opacity != 1
     } else {
-      group = new Paper.Group()
+      group = new this.Paper.Group()
       imageOverlayPath = this.loadImageOverlay(this.imageUrl, corners)
       this.applyRasterToCorners(imageOverlayPath, corners)
       handles = this.renderImageOverlayHandles(corners, isRotationHandleVisible)
@@ -209,15 +191,15 @@ export default class ThreeDModelOverlay extends Overlay {
   renderImagePlaceHolder(paperJSComponent) {
     const toCanvasRef = paperJSComponent.canvasContext.toCanvasRef
 
-    const group = new Paper.Group()
-    const circle = new Paper.Path.Circle({
+    const group = new this.Paper.Group()
+    const circle = new this.Paper.Path.Circle({
       center: toCanvasRef({ x: 0, y: 0 }),
       radius: 50,
       fillColor: '#ffffff80',
     })
     circle.radius = 70
     circle.itemData = 'circle'
-    const fillRectangle = new Paper.Path()
+    const fillRectangle = new this.Paper.Path()
     fillRectangle.fillColor = '#ffffff80'
     fillRectangle.itemType = 'placeholder'
     fillRectangle.itemData = this
@@ -247,92 +229,16 @@ export default class ThreeDModelOverlay extends Overlay {
     circle.scale(scale)
     circle.radius = newRadius
   }
-  loadImageOverlay(url, corners) {
-    let rasterImageOverlay = new Paper.Raster({
-      source: url,
-      crossOrigin: 'Anonymous',
-    })
-    rasterImageOverlay.visible = false
-    rasterImageOverlay.onLoad = () => {
-      this.applyRasterToCorners(rasterImageOverlay, corners)
-    }
-    rasterImageOverlay.data.angle = 0
-    rasterImageOverlay.data.type = 'imageOverlayRaster'
-    rasterImageOverlay.data.overlayId = this.id
-    rasterImageOverlay.data.url = url
-    return rasterImageOverlay
-  }
-  applyRasterToCorners(texture, corners = this.corners) {
-    //remove angle of texture
-    let textureAngle = texture.angle || 0
-    texture.rotate(-textureAngle)
-
-    //make texture the same size to fit corners
-    const textureWidth = texture.bounds.width
-    const textureHeight = texture.bounds.height
-    const frameWidth = getDistanceBetweenPoints(corners[1], corners[0])
-    const frameHeight = getDistanceBetweenPoints(corners[3], corners[0])
-    const center = multiplyVector(0.5, addVector(corners[0], corners[2]))
-    if (texture.bounds.width) {
-      var a = frameWidth / textureWidth
-      var b = 0
-      var c = 0
-      var d = frameHeight / textureHeight
-      texture.transform(new Paper.Matrix(a, b, c, d, 0, 0))
-      //translate to fit top left corner
-      var tx = center.x - texture.bounds.center.x
-      var ty = center.y - texture.bounds.center.y
-      texture.transform(new Paper.Matrix(1, 0, 0, 1, tx, ty))
-      //rotate
-      let angle = getAngleInDegFromCanvasVector(
-        substractVector(corners[0], corners[3])
-      )
-
-      texture.angle = angle
-      texture.rotate(angle)
-    }
-  }
-  renderImageOverlayHandles(corners, rotateHandleVisible, group = null) {
-    let circleHandle
-    let hasPaths = !!group
-    let handles = group || new Paper.Group()
-    let u = normalize2DVector(substractVector(corners[1], corners[0]))
-    let v = normalize2DVector(substractVector(corners[0], corners[3]))
-
-    //rotation handle
-    let center = multiplyVector(0.5, addVector(corners[0], corners[2]))
-
-    let radius = vectorLength2D(substractVector(center, corners[0])) - 10
-    if (!hasPaths) {
-      circleHandle = new Paper.Path.Circle(center, radius)
-      circleHandle.fillColor = layerColors.imageOverlayHandle.fillColor
-      circleHandle.strokeWidth = layerColors.imageOverlayHandle.strokeWidth
-      circleHandle.strokeColor = layerColors.imageOverlayHandle.strokeColor
-      circleHandle.data.type = 'imageOverlayRotateHandle'
-      circleHandle.data.overlayId = this.id
-      circleHandle.radius = radius
-      handles.addChild(circleHandle)
-    } else {
-      circleHandle = handles.children[0]
-      let ratio = radius / circleHandle.radius
-      circleHandle.transform(new Paper.Matrix(ratio, 0, 0, ratio, 0, 0))
-      circleHandle.position = center
-      circleHandle.radius = radius
-    }
-
-    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())
+    this.boxSize = boxSize
+    this.boxCenter = boxCenter
     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),
@@ -374,9 +280,7 @@ export default class ThreeDModelOverlay extends Overlay {
       1000 // far
     )
   }
-  checkGeoLocDataAndOffset() {
-    return
-  }
+  checkGeoLocDataAndOffset() {}
   async initialiseModel() {
     this.overlayMesh = await this.loadFile()
     if (!this.geoLocalisation) {
@@ -526,18 +430,6 @@ export default class ThreeDModelOverlay extends Overlay {
     })
     return newOutlines
   }
-  createCanvas() {
-    const canvas = document.createElement('canvas')
-    canvas.width = this.canvasWidth
-    canvas.height = this.canvasHeight
-    canvas.style.position = 'fixed'
-    canvas.style.top = '100px'
-    canvas.style.left = '50px'
-    canvas.style.zIndex = 0
-    // Add the canvas to the document body
-    document.body.appendChild(canvas)
-    return canvas
-  }
   serializeSettings() {
     return {
       version: this.version,