@eturnity/eturnity_3d 7.24.2 → 7.30.0--EPDM-11320.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eturnity/eturnity_3d",
   "private": false,
-  "version": "7.24.2",
+  "version": "7.30.0--EPDM-11320.1",
   "files": [
     "dist",
     "src"
@@ -15,7 +15,7 @@
     "prettier": "prettier --write \"**/*.{js,vue}\""
   },
   "dependencies": {
-    "@eturnity/eturnity_maths": "7.24.1",
+    "@eturnity/eturnity_maths": "7.24.1-EPDM-11320.2",
     "@originjs/vite-plugin-commonjs": "1.0.3",
     "core-js": "2.6.12",
     "cors": "2.8.5",
@@ -27,7 +27,6 @@
     "lodash": "4.17.21",
     "svd-js": "1.1.1",
     "three": "0.149.0",
-    "three-projected-material": "2.2.1",
     "tween": "0.9.0",
     "uuid": "9.0.0",
     "vite-plugin-require": "1.1.14",
@@ -37,12 +36,14 @@
   "devDependencies": {
     "@vitejs/plugin-vue": "2.0.1",
     "@vue/compiler-sfc": "3.3.4",
+    "@vue/eslint-config-standard": "8.0.1",
     "eslint": "8.0.1",
-    "eslint-config-prettier": "6.15.0",
-    "eslint-plugin-prettier": "3.4.1",
+    "eslint-config-prettier": "8.8.0",
+    "eslint-plugin-prettier": "4.2.1",
     "eslint-plugin-vue": "9.14.1",
     "html-webpack-plugin": "3.2.0",
-    "prettier": "2.8.4",
+    "prettier": "^2.8.4",
+    "prettier-plugin-vue": "^1.1.6",
     "vite": "2.7.2",
     "vite-plugin-env-compatible": "^2.0.1",
     "webpack": "4.46.0",

package/src/App.vue

@@ -8,17 +8,17 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
-import ThreeCanvas from './components/ThreeCanvasViewer.vue'
-export default {
-  components: {
-    ThreeCanvas
-  },
-  computed: {
-    ...mapState({
-      uuid: (state) => state.uuid,
-      view_mode: (state) => state.view_mode
-    })
+  import { mapState } from 'vuex'
+  import ThreeCanvas from './components/ThreeCanvasViewer.vue'
+  export default {
+    components: {
+      ThreeCanvas,
+    },
+    computed: {
+      ...mapState({
+        uuid: (state) => state.uuid,
+        view_mode: (state) => state.view_mode,
+      }),
+    },
   }
-}
 </script>

package/src/Overlay/AirTeamOverlay.js

@@ -14,7 +14,7 @@ import {
   verticalProjectionOnPlane,
   vectorLength2D,
   deltaLatLngToDistance,
-  rotateTransformation
+  rotateTransformation,
 } from '@eturnity/eturnity_maths'
 let Paper
 export default class AirTeamOverlay extends Overlay {
@@ -78,7 +78,7 @@ export default class AirTeamOverlay extends Overlay {
             'textured_facade',
             'textured_environment',
             'textured_roof',
-            'plain_roof_simplified'
+            'plain_roof_simplified',
           ].includes(child.name)
         )
         model.children.forEach((child) => {
@@ -101,7 +101,7 @@ export default class AirTeamOverlay extends Overlay {
     obj.children.forEach((child) => {
       this.set3DObjectMaterialOpacity(child, this.opacity)
     })
-    if (obj.material && obj.name!='plain_roof_simplified') {
+    if (obj.material && obj.name != 'plain_roof_simplified') {
       obj.visible = this.opacity > 0
       obj.material.opacity = this.opacity
       obj.material.transparent = this.opacity < 1
@@ -120,7 +120,7 @@ export default class AirTeamOverlay extends Overlay {
         const material = new THREE.MeshBasicMaterial({
           color: 0xffffff, // Grey color
           transparent: true,
-          opacity // 50% transparent
+          opacity, // 50% transparent
         })
         // Create the mesh and add it to the scene
         waitingBall = new THREE.Mesh(geometry, material)
@@ -264,7 +264,7 @@ export default class AirTeamOverlay extends Overlay {
     const circle = new Paper.Path.Circle({
       center: toCanvasRef({ x: 0, y: 0 }),
       radius: 50,
-      fillColor: '#ffffff80'
+      fillColor: '#ffffff80',
     })
     circle.radius = 70
     circle.itemData = 'circle'
@@ -301,7 +301,7 @@ export default class AirTeamOverlay extends Overlay {
   loadImageOverlay(url, corners) {
     let rasterImageOverlay = new Paper.Raster({
       source: url,
-      crossOrigin: 'Anonymous'
+      crossOrigin: 'Anonymous',
     })
     rasterImageOverlay.visible = false
     rasterImageOverlay.onLoad = () => {
@@ -407,7 +407,7 @@ export default class AirTeamOverlay extends Overlay {
         this.positionOffset.z = 0
         this.emit('overlay-offset-position-error', { id: this.id })
       }
-      this.geoLocalisation={x,y}
+      this.geoLocalisation = { x, y }
     }
   }
   initialiseVerticalProjectionImg() {
@@ -427,23 +427,23 @@ export default class AirTeamOverlay extends Overlay {
         {
           x: 1000 * (boxCenter.x + left),
           y: 1000 * (boxCenter.y + top),
-          z: 0
+          z: 0,
         },
         {
           x: 1000 * (boxCenter.x + right),
           y: 1000 * (boxCenter.y + top),
-          z: 0
+          z: 0,
         },
         {
           x: 1000 * (boxCenter.x + right),
           y: 1000 * (boxCenter.y + bottom),
-          z: 0
+          z: 0,
         },
         {
           x: 1000 * (boxCenter.x + left),
           y: 1000 * (boxCenter.y + bottom),
-          z: 0
-        }
+          z: 0,
+        },
       ]
       this.corners = []
       initialCorners.forEach((corner, index) => {
@@ -471,7 +471,7 @@ export default class AirTeamOverlay extends Overlay {
 
       const renderer = new THREE.WebGLRenderer({
         canvas: canvas,
-        alpha: true
+        alpha: true,
       })
       renderer.setSize(this.canvasWidth, this.canvasHeight)
       renderer.setClearColor(0x000000, 0) // Make background transparent
@@ -540,7 +540,7 @@ export default class AirTeamOverlay extends Overlay {
         for (let j = 0; j < stepNum; j++) {
           const testPoint = {
             x: xMin + (i * (xMax - xMin)) / stepNum,
-            y: yMin + (j * (yMax - yMin)) / stepNum
+            y: yMin + (j * (yMax - yMin)) / stepNum,
           }
           if (isInsidePolygon(testPoint, outline)) {
             RayCaster.set(
@@ -599,7 +599,7 @@ export default class AirTeamOverlay extends Overlay {
     return {
       version: this.version,
       corners: this.corners,
-      geoLocalisation: this.geoLocalisation
+      geoLocalisation: this.geoLocalisation,
     }
   }
 }

package/src/Overlay/ImageOverlay.js

@@ -7,7 +7,7 @@ import {
   substractVector,
   getAngleInDegFromCanvasVector,
   normalize2DVector,
-  vectorLength2D
+  vectorLength2D,
 } from '@eturnity/eturnity_maths'
 let Paper
 export default class ImageOverlay extends Overlay {
@@ -53,15 +53,16 @@ export default class ImageOverlay extends Overlay {
   }
   async initialiseImage(url) {
     const img = new Image()
+    img.crossOrigin = 'Anonymous'
     const _this = this
     const promise = new Promise((resolve, reject) => {
       img.onload = function () {
         _this.width = this.width
         _this.height = this.height
+        _this.img = this
         resolve(true)
       }
       img.onerror = reject
-      this.img = img
     })
     img.src = url
     return promise
@@ -72,25 +73,25 @@ export default class ImageOverlay extends Overlay {
     const initialHeightMm = ratio * initialWidthMm
     const cornersTopLeft = {
       x: -initialWidthMm / 2,
-      y: initialHeightMm / 2
+      y: initialHeightMm / 2,
     }
     const cornersTopRight = {
       x: initialWidthMm / 2,
-      y: initialHeightMm / 2
+      y: initialHeightMm / 2,
     }
     const cornersBottomLeft = {
       x: -initialWidthMm / 2,
-      y: -initialHeightMm / 2
+      y: -initialHeightMm / 2,
     }
     const cornersBottomRight = {
       x: initialWidthMm / 2,
-      y: -initialHeightMm / 2
+      y: -initialHeightMm / 2,
     }
     const corners = [
       cornersTopLeft,
       cornersTopRight,
       cornersBottomRight,
-      cornersBottomLeft
+      cornersBottomLeft,
     ]
     return corners
   }
@@ -166,10 +167,12 @@ export default class ImageOverlay extends Overlay {
     handles.visible = isRotationHandleVisible
   }
   loadImageOverlay(url, corners) {
-    let rasterImageOverlay = new Paper.Raster({
-      source: url,
-      crossOrigin: 'Anonymous'
-    })
+    let rasterImageOverlay = this.img
+      ? new Paper.Raster(this.img)
+      : new Paper.Raster({
+          source: url,
+          crossOrigin: 'Anonymous',
+        })
     rasterImageOverlay.onLoad = () => {
       this.applyRasterToCorners(rasterImageOverlay, corners)
     }
@@ -262,7 +265,7 @@ export default class ImageOverlay extends Overlay {
         addVector(
           addVector(corners[k], multiplyVector(squareSize / 2, u)),
           multiplyVector(squareSize / 2, v)
-        )
+        ),
       ]
       let squareHandle
 
@@ -300,10 +303,10 @@ export default class ImageOverlay extends Overlay {
       scaleParams: {
         points: this.points,
         distance: this.distance,
-        mmPerPx: this.mmPerPx
+        mmPerPx: this.mmPerPx,
       },
       corners: this.corners,
-      version: this.version
+      version: this.version,
     }
   }
 }

package/src/Overlay/Overlay.js

@@ -6,14 +6,14 @@ import {
   rotateTransformation,
   substractVector,
   getDistanceBetweenPoints,
-  getAngleInDegFromCanvasVector
+  getAngleInDegFromCanvasVector,
 } from '@eturnity/eturnity_maths'
 import {
   updateBufferRoofGeometry,
-  getBufferRoofGeometry
+  getBufferRoofGeometry,
 } from '../helper/render/geometryHandler'
 import * as THREE from 'three'
-import ProjectedMaterial from 'three-projected-material'
+import ProjectedMaterial from '../helper/projectedMaterial'
 export default class Overlay extends Item {
   constructor(overlay, emit) {
     super(emit)
@@ -30,12 +30,12 @@ export default class Overlay extends Item {
       { x: 10000, y: 7000 },
       { x: 10000, y: -7000 },
       { x: -10000, y: -7000 },
-      { x: -10000, y: 7000 }
+      { x: -10000, y: 7000 },
     ]
     this.positionOffset = overlay.settings.positionOffset || {
       x: 0,
       y: 0,
-      z: 0
+      z: 0,
     }
     this.angleOffset = overlay.settings.angleOffset || 0
     this.imageUrl = null
@@ -148,14 +148,15 @@ export default class Overlay extends Item {
         resolve(this.imageOverlayProjectionMaterial)
         return
       }
-      const loader = new THREE.TextureLoader()
-      loader.load(url, (texture) => {
+
+      const callback = (texture) => {
+        texture.needsUpdate = true
         this.setImageOverlayCameraPosition()
         let imageOverlayProjectionMaterial = new ProjectedMaterial({
           camera: this.overlayProjectionCamera,
           texture,
           transparent: true,
-          side: THREE.DoubleSide
+          side: THREE.DoubleSide,
         })
 
         imageOverlayProjectionMaterial.userData = {}
@@ -166,7 +167,14 @@ export default class Overlay extends Item {
         imageOverlayProjectionMaterial.opacity = this.opacity
         this.imageOverlayProjectionMaterial = imageOverlayProjectionMaterial
         resolve(imageOverlayProjectionMaterial)
-      })
+      }
+
+      if (this.img) {
+        callback(new THREE.Texture(this.img))
+      } else {
+        const loader = new THREE.TextureLoader()
+        loader.load(url, callback)
+      }
     })
   }
   getBackgroundGeometry() {
@@ -194,7 +202,7 @@ export default class Overlay extends Item {
     const boxSize = {
       x: getDistanceBetweenPoints(this.corners[0], this.corners[1]) / 1000,
       y: getDistanceBetweenPoints(this.corners[1], this.corners[2]) / 1000,
-      z: 0
+      z: 0,
     }
     if (
       this.overlayProjectionCamera.left != -boxSize.x / 2 ||
@@ -216,17 +224,19 @@ export default class Overlay extends Item {
       cameraChanged = true
     }
     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.z != boxCenter.z / 1000 + 50
+      this.overlayProjectionCamera.position.z !=
+        boxCenter.z / 1000 + CAMERA_HEIGHT_OFFSET
     ) {
       cameraChanged = true
     }
     this.overlayProjectionCamera.position.set(
       boxCenter.x / 1000,
       boxCenter.y / 1000,
-      boxCenter.z / 1000 + 50
+      boxCenter.z / 1000 + CAMERA_HEIGHT_OFFSET
     )
     this.overlayProjectionCamera.updateProjectionMatrix()
     return cameraChanged
@@ -238,11 +248,11 @@ export default class Overlay extends Item {
         ...this.settings,
         positionOffset: this.positionOffset,
         angleOffset: this.angleOffset,
-        ...this.serializeSettings()
+        ...this.serializeSettings(),
       },
       type: this.type,
       is_active: this.isActive,
-      resources: this.resources
+      resources: this.resources,
     }
     return serializedOverlay
   }

package/src/Overlay/OverlayFactory.js

@@ -13,7 +13,7 @@ const OverlayFactory = {
       overlayInstance = new Overlay(serializedOverlay, emit)
     }
     return overlayInstance
-  }
+  },
 }
 
 export default OverlayFactory

package/src/assets/theme.js

@@ -27,7 +27,7 @@ const theme = {
     transparentBlack1: '#263238e6',
     transparentBlue1: '#20a4cae6',
     blueElectric: '#66dffa',
-    eturnityGrey: '#263238'
+    eturnityGrey: '#263238',
   },
 
   screen: {
@@ -35,9 +35,9 @@ const theme = {
     mobile: '425px',
     mobileLarge: '530px',
     tablet: '768px',
-    tabletLarge: '950px'
+    tabletLarge: '950px',
   },
-  borderRadius: '4px'
+  borderRadius: '4px',
 }
 
 export default theme