@eturnity/eturnity_3d 8.10.1-epic-shading.1 → 8.16.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eturnity/eturnity_3d",
   "private": false,
-  "version": "8.10.1-epic-shading.1",
+  "version": "8.16.0",
   "files": [
     "dist",
     "src"
@@ -16,7 +16,7 @@
     "merge-remote-master": "node scripts/merge-remote-master.js"
   },
   "dependencies": {
-    "@eturnity/eturnity_maths": "8.10.1-epic-shading.0",
+    "@eturnity/eturnity_maths": "8.16.0",
     "@originjs/vite-plugin-commonjs": "1.0.3",
     "core-js": "3.30.2",
     "cors": "2.8.5",

package/src/Overlay/ImageOverlay.js

@@ -9,6 +9,7 @@ import {
   normalize2DVector,
   vectorLength2D,
 } from '@eturnity/eturnity_maths'
+let Paper
 export default class ImageOverlay extends Overlay {
   constructor(overlay, emit) {
     super(overlay, emit)
@@ -41,6 +42,15 @@ 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'
@@ -110,7 +120,7 @@ export default class ImageOverlay extends Overlay {
     this.emit('overlay-scale-updated', { id: this.id })
   }
   renderOnPaperJS(paperJSComponent) {
-    this.Paper = paperJSComponent.paperScope
+    Paper = paperJSComponent.paperScope
     if (!this.isReady || !this.isActive || !this.corners) {
       return
     }
@@ -121,27 +131,28 @@ export default class ImageOverlay extends Overlay {
     let handles
     let isRotationHandleVisible =
       paperJSComponent.selectedTool == 'selectOverlay' && this.isSelected
-    const getCorners = () =>
-      this.corners.map((p) => paperJSComponent.toCanvasRef(p))
-    let corners = getCorners()
+    let corners = this.corners.map((p) => paperJSComponent.toCanvasRef(p))
     if (group) {
       if (group.data.url == this.url) {
         imageOverlayPath = group.children[0]
       } else {
-        imageOverlayPath = this.loadImageOverlay(this.url, getCorners)
+        imageOverlayPath = this.loadImageOverlay(this.url, corners)
         paperJSComponent.clearPath(group.children[0])
         group.insertChild(0, imageOverlayPath)
       }
-      this.renderImageOverlayHandles(
+      handles = this.renderImageOverlayHandles(
         corners,
         isRotationHandleVisible,
         group.children[1]
       )
       this.applyRasterToCorners(imageOverlayPath, corners)
+      group.visible = true
     } else {
-      group = new this.Paper.Group()
-      imageOverlayPath = this.loadImageOverlay(this.url, getCorners)
+      group = new Paper.Group()
+      imageOverlayPath = this.loadImageOverlay(this.url, corners)
+
       handles = this.renderImageOverlayHandles(corners, isRotationHandleVisible)
+
       group.addChild(imageOverlayPath)
       group.addChild(handles)
       group.itemType = 'imageOverlays'
@@ -149,23 +160,21 @@ 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, getCorners = () => {}) {
+  loadImageOverlay(url, corners) {
     let rasterImageOverlay = this.img
-      ? new this.Paper.Raster(this.img)
-      : new this.Paper.Raster({
+      ? new Paper.Raster(this.img)
+      : new Paper.Raster({
           source: url,
           crossOrigin: 'Anonymous',
         })
-    rasterImageOverlay.visible = false
     rasterImageOverlay.onLoad = () => {
-      this.applyRasterToCorners(rasterImageOverlay, getCorners())
-      rasterImageOverlay.visible = true
+      this.applyRasterToCorners(rasterImageOverlay, corners)
     }
     rasterImageOverlay.data.angle = 0
     rasterImageOverlay.data.type = 'imageOverlayRaster'
@@ -173,6 +182,120 @@ 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,6 +1,5 @@
 import { v4 as uuidv4 } from 'uuid'
 import Item from '../Item/Item'
-import { layerColors } from '../config'
 import {
   multiplyVector,
   addVector,
@@ -8,7 +7,6 @@ import {
   substractVector,
   getDistanceBetweenPoints,
   getAngleInDegFromCanvasVector,
-  vectorLength2D,
 } from '@eturnity/eturnity_maths'
 import {
   updateBufferRoofGeometry,
@@ -16,7 +14,6 @@ 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)
@@ -24,7 +21,6 @@ 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
@@ -58,16 +54,6 @@ 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(
@@ -147,67 +133,17 @@ 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.isActive || !this.corners) {
+    if (!this.isReady || !this.corners) {
       return null
     }
     const url = this.imageUrl
     return new Promise((resolve) => {
-      if (
-        this.imageOverlayProjectionMaterial &&
-        this.version == this.imageOverlayProjectionMaterial.userData.version
-      ) {
+      if (this.imageOverlayProjectionMaterial) {
         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
@@ -228,15 +164,14 @@ export default class Overlay extends Item {
 
         imageOverlayProjectionMaterial.userData = {}
         imageOverlayProjectionMaterial.userData.type = 'overlayMaterial'
-        imageOverlayProjectionMaterial.userData.overlayType = this.type
         imageOverlayProjectionMaterial.userData.version = 0
-        imageOverlayProjectionMaterial.priority =
-          this.projectionMaterialPriority
+        imageOverlayProjectionMaterial.priority = 30
         imageOverlayProjectionMaterial.userData.url = url
         imageOverlayProjectionMaterial.opacity = this.opacity
         this.imageOverlayProjectionMaterial = imageOverlayProjectionMaterial
         resolve(imageOverlayProjectionMaterial)
       }
+
       if (this.img) {
         callback(new THREE.Texture(this.img))
       } else {
@@ -263,7 +198,7 @@ export default class Overlay extends Item {
   setImageOverlayCameraPosition() {
     let cameraChanged = false
     const boxCenter = multiplyVector(
-      0.0005,
+      0.5,
       addVector(this.corners[0], this.corners[2])
     )
     boxCenter.z = 0
@@ -294,60 +229,21 @@ 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 ||
-      this.overlayProjectionCamera.position.y != boxCenter.y ||
+      this.overlayProjectionCamera.position.x != boxCenter.x / 1000 ||
+      this.overlayProjectionCamera.position.y != boxCenter.y / 1000 ||
       this.overlayProjectionCamera.position.z !=
-        boxCenter.z + CAMERA_HEIGHT_OFFSET
+        boxCenter.z / 1000 + CAMERA_HEIGHT_OFFSET
     ) {
       cameraChanged = true
     }
     this.overlayProjectionCamera.position.set(
-      boxCenter.x,
-      boxCenter.y,
-      boxCenter.z + CAMERA_HEIGHT_OFFSET
+      boxCenter.x / 1000,
+      boxCenter.y / 1000,
+      boxCenter.z / 1000 + 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,
@@ -363,6 +259,9 @@ export default class Overlay extends Item {
     }
     return serializedOverlay
   }
+
+  renderOnPaperJS(paperJSComponent) {}
+  renderOnThreeJS(threeJSComponent) {}
   serializeSettings() {
     return {}
   }

package/src/Overlay/OverlayFactory.js

@@ -1,7 +1,6 @@
 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 }) {
@@ -10,8 +9,6 @@ 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,12 +12,6 @@ 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 }