@eturnity/eturnity_3d 8.16.0 → 8.16.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eturnity/eturnity_3d",
   "private": false,
-  "version": "8.16.0",
+  "version": "8.16.2",
   "files": [
     "dist",
     "src"
@@ -16,7 +16,7 @@
     "merge-remote-master": "node scripts/merge-remote-master.js"
   },
   "dependencies": {
-    "@eturnity/eturnity_maths": "8.16.0",
+    "@eturnity/eturnity_maths": "8.16.1",
     "@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
     }
@@ -131,28 +121,27 @@ export default class ImageOverlay extends Overlay {
     let handles
     let isRotationHandleVisible =
       paperJSComponent.selectedTool == 'selectOverlay' && this.isSelected
-    let corners = this.corners.map((p) => paperJSComponent.toCanvasRef(p))
+    const getCorners = () =>
+      this.corners.map((p) => paperJSComponent.toCanvasRef(p))
+    let corners = getCorners()
     if (group) {
       if (group.data.url == this.url) {
         imageOverlayPath = group.children[0]
       } else {
-        imageOverlayPath = this.loadImageOverlay(this.url, corners)
+        imageOverlayPath = this.loadImageOverlay(this.url, getCorners)
         paperJSComponent.clearPath(group.children[0])
         group.insertChild(0, imageOverlayPath)
       }
-      handles = this.renderImageOverlayHandles(
+      this.renderImageOverlayHandles(
         corners,
         isRotationHandleVisible,
         group.children[1]
       )
       this.applyRasterToCorners(imageOverlayPath, corners)
-      group.visible = true
     } else {
-      group = new Paper.Group()
-      imageOverlayPath = this.loadImageOverlay(this.url, corners)
-
+      group = new this.Paper.Group()
+      imageOverlayPath = this.loadImageOverlay(this.url, getCorners)
       handles = this.renderImageOverlayHandles(corners, isRotationHandleVisible)
-
       group.addChild(imageOverlayPath)
       group.addChild(handles)
       group.itemType = 'imageOverlays'
@@ -160,21 +149,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
+    // handles.visible = isRotationHandleVisible
   }
-  loadImageOverlay(url, corners) {
+  loadImageOverlay(url, getCorners = () => {}) {
     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)
+      this.applyRasterToCorners(rasterImageOverlay, getCorners())
+      rasterImageOverlay.visible = true
     }
     rasterImageOverlay.data.angle = 0
     rasterImageOverlay.data.type = 'imageOverlayRaster'
@@ -182,120 +173,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, getCorners = () => {}) {
+    let rasterImageOverlay = new this.Paper.Raster({
+      source: url,
+      crossOrigin: 'Anonymous',
+    })
+    rasterImageOverlay.visible = false
+    rasterImageOverlay.onLoad = () => {
+      this.applyRasterToCorners(rasterImageOverlay, getCorners())
+      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,60 @@ 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
+    const hasPaths = group?.children?.length > 0
+    const handles = group || new this.Paper.Group()
+    // rotation handle
+    const center = multiplyVector(0.5, addVector(corners[0], corners[2]))
+    const 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
+    return canvas
+  }
+  renderOnPaperJS(paperJSComponent) {}
+  renderOnThreeJS(threeJSComponent) {}
   serialize() {
     const serializedOverlay = {
       layouting_overlay_uuid: this.id,
@@ -259,9 +363,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 }