@eturnity/eturnity_3d 7.20.1 → 7.24.0

package/src/Overlay/ImageOverlay.js

@@ -0,0 +1,309 @@
+import Overlay from './Overlay'
+import { layerColors } from '../config'
+import {
+  getDistanceBetweenPoints,
+  addVector,
+  multiplyVector,
+  substractVector,
+  getAngleInDegFromCanvasVector,
+  normalize2DVector,
+  vectorLength2D
+} from '@eturnity/eturnity_maths'
+let Paper
+export default class ImageOverlay extends Overlay {
+  constructor(overlay, emit) {
+    super(overlay, emit)
+    this.url = this.resources[0].file_url
+    this.opacity = 1
+    this.imageUrl = this.resources[0].file_url
+    this.corners = overlay.settings.corners
+    this.hasScale = overlay.settings.hasScale
+    this.points =
+      overlay.settings.scaleParams && overlay.settings.scaleParams.points
+        ? overlay.settings.scaleParams.points
+        : []
+    this.mmPerPx =
+      overlay.settings.scaleParams && overlay.settings.scaleParams.mmPerPx
+        ? overlay.settings.scaleParams.mmPerPx
+        : null
+    this.distance =
+      overlay.settings.scaleParams && overlay.settings.scaleParams.distance
+        ? overlay.settings.scaleParams.distance
+        : 10000
+    this.initialiseImage(this.url).then((isReady) => {
+      this.isReady = isReady
+      this.version++
+      this.emit('overlay-is-ready', { id: this.id })
+      this.isReadyCallback.forEach((callback) => {
+        if (typeof callback === 'function') {
+          callback()
+        }
+      })
+      this.isReadyCallback = []
+    })
+  }
+  onLoad() {
+    return new Promise((resolve) => {
+      if (this.isReady) {
+        resolve(this)
+      } else {
+        this.isReadyCallback.push(resolve)
+      }
+    })
+  }
+  async initialiseImage(url) {
+    const img = new Image()
+    const _this = this
+    const promise = new Promise((resolve, reject) => {
+      img.onload = function () {
+        _this.width = this.width
+        _this.height = this.height
+        resolve(true)
+      }
+      img.onerror = reject
+      this.img = img
+    })
+    img.src = url
+    return promise
+  }
+  async getInitial2DCorners(mmPerPx) {
+    const initialWidthMm = this.width * mmPerPx
+    const ratio = this.height / this.width
+    const initialHeightMm = ratio * initialWidthMm
+    const cornersTopLeft = {
+      x: -initialWidthMm / 2,
+      y: initialHeightMm / 2
+    }
+    const cornersTopRight = {
+      x: initialWidthMm / 2,
+      y: initialHeightMm / 2
+    }
+    const cornersBottomLeft = {
+      x: -initialWidthMm / 2,
+      y: -initialHeightMm / 2
+    }
+    const cornersBottomRight = {
+      x: initialWidthMm / 2,
+      y: -initialHeightMm / 2
+    }
+    const corners = [
+      cornersTopLeft,
+      cornersTopRight,
+      cornersBottomRight,
+      cornersBottomLeft
+    ]
+    return corners
+  }
+  async setScale(scaleParams) {
+    if (!scaleParams) {
+      this.hasScale = false
+      this.version++
+      this.emit('overlay-scale-updated', { id: this.id })
+      return
+    }
+    let { points, distance, mmPerPx } = scaleParams
+
+    if (points.length < 2 || !distance) {
+      this.hasScale = false
+      this.version++
+      this.emit('overlay-scale-updated', { id: this.id })
+      return
+    }
+    this.mmPerPx = mmPerPx
+    this.points = points
+    this.distance = distance
+    this.hasScale = true
+    this.points = [{ ...this.points[0] }, { ...this.points[1] }]
+    this.version++
+    this.corners = await this.getInitial2DCorners(mmPerPx)
+    this.emit('overlay-scale-updated', { id: this.id })
+  }
+  renderOnPaperJS(paperJSComponent) {
+    Paper = paperJSComponent.paperScope
+    if (!this.isReady || !this.isActive || !this.corners) {
+      return
+    }
+    let group = paperJSComponent.paths.imageOverlays[this.id]
+    paperJSComponent.paperLayer['imageOverlays'].activate()
+
+    let imageOverlayPath
+    let handles
+    let isRotationHandleVisible =
+      paperJSComponent.selectedTool == 'selectOverlay' && this.isSelected
+    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, corners)
+        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()
+      imageOverlayPath = this.loadImageOverlay(this.url, corners)
+
+      handles = this.renderImageOverlayHandles(corners, isRotationHandleVisible)
+
+      group.addChild(imageOverlayPath)
+      group.addChild(handles)
+      group.itemType = 'imageOverlays'
+      group.data.url = this.url
+      group.type = 'imageOverlays'
+      group.pathId = this.id
+      group.overlayId = this.id
+      group.visible = true
+      paperJSComponent.paths.imageOverlays[this.id] = group
+    }
+    imageOverlayPath.opacity = this.opacity
+    handles.visible = isRotationHandleVisible
+  }
+  loadImageOverlay(url, corners) {
+    let rasterImageOverlay = new Paper.Raster({
+      source: url,
+      crossOrigin: 'Anonymous'
+    })
+    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
+
+    //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 {
+      hasScale: this.hasScale,
+      scaleParams: {
+        points: this.points,
+        distance: this.distance,
+        mmPerPx: this.mmPerPx
+      },
+      corners: this.corners,
+      version: this.version
+    }
+  }
+}

package/src/Overlay/Overlay.js

@@ -0,0 +1,255 @@
+import { v4 as uuidv4 } from 'uuid'
+import Item from '../Item/Item'
+import {
+  multiplyVector,
+  addVector,
+  rotateTransformation,
+  substractVector,
+  getDistanceBetweenPoints,
+  getAngleInDegFromCanvasVector
+} from '@eturnity/eturnity_maths'
+import {
+  updateBufferRoofGeometry,
+  getBufferRoofGeometry
+} from '../helper/render/geometryHandler'
+import * as THREE from 'three'
+import ProjectedMaterial from 'three-projected-material'
+export default class Overlay extends Item {
+  constructor(overlay, emit) {
+    super(emit)
+    this.id = overlay.layouting_overlay_uuid
+      ? overlay.layouting_overlay_uuid.toString()
+      : uuidv4()
+    this.actionsAvailable.push('setOpacity')
+    this.isActive = overlay.is_active
+    this.isReady = false
+    this.resources = overlay.resources
+    this.type = overlay.type
+    this.corners = overlay.settings.corners
+    this.placeHolderCorners = [
+      { 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
+    }
+    this.angleOffset = overlay.settings.angleOffset || 0
+    this.imageUrl = null
+    this.imageOverlayProjectionMaterial = null
+    this.settings = overlay.settings
+    this.version = this.settings.version || 0
+    this.overlayProjectionCamera = new THREE.OrthographicCamera(
+      -20,
+      20,
+      20,
+      -20,
+      1,
+      1000
+    )
+    this.backgroundGeometry = null
+    this.overlayProjectionCamera.up.set(0, 1, 0)
+    this.isSelected = false
+    this.isReadyCallback = []
+  }
+  getCenter() {
+    let center = multiplyVector(
+      0.5,
+      addVector(this.corners[0], this.corners[2])
+    )
+    return center
+  }
+  setOpacity(opacity) {
+    this.opacity = opacity
+    this.emit('item-updated', this)
+  }
+  translateBy(shift) {
+    this.version++
+    let newCorners = []
+    for (let cornerIndex in this.corners) {
+      let corner = this.corners[cornerIndex]
+      newCorners[cornerIndex] = {}
+      newCorners[cornerIndex].x = corner.x + shift.x
+      newCorners[cornerIndex].y = corner.y + shift.y
+      newCorners[cornerIndex].z = corner.z + shift.z
+    }
+    this.positionOffset.x += shift.x
+    this.positionOffset.y += shift.y
+    this.positionOffset.z += shift.z
+    this.corners = newCorners
+    this.emit('item-updated', this)
+  }
+  translate(newPositionOffset) {
+    this.version++
+    let newCorners = []
+    let shift = substractVector(newPositionOffset, this.positionOffset)
+    for (let cornerIndex in this.corners) {
+      let corner = this.corners[cornerIndex]
+      newCorners[cornerIndex] = {}
+      newCorners[cornerIndex].x = corner.x + shift.x
+      newCorners[cornerIndex].y = corner.y + shift.y
+      newCorners[cornerIndex].z = corner.z + shift.z
+    }
+    this.positionOffset = newPositionOffset
+    this.corners = newCorners
+    this.emit('item-updated', this)
+  }
+  rotateBy(deltaAngle) {
+    this.version++
+    const newCorners = this.corners
+    let center = multiplyVector(
+      0.5,
+      addVector(this.corners[0], this.corners[2])
+    )
+    for (let k in this.corners) {
+      let corner = this.corners[k]
+      newCorners[k] = rotateTransformation(corner, deltaAngle, center)
+      newCorners[k].z = this.corners[k].z
+    }
+    this.angleOffset += deltaAngle
+    this.corners = newCorners
+    this.emit('item-updated', this)
+  }
+  rotate(newAngle) {
+    this.version++
+    const newCorners = this.corners
+    let center = multiplyVector(
+      0.5,
+      addVector(this.corners[0], this.corners[2])
+    )
+    for (let k in this.corners) {
+      let corner = this.corners[k]
+      newCorners[k] = rotateTransformation(
+        corner,
+        newAngle - this.angleOffset,
+        center
+      )
+      newCorners[k].z = this.corners[k].z
+    }
+    this.angleOffset = newAngle
+    this.corners = newCorners
+    this.emit('item-updated', this)
+  }
+  async getProjectionMaterial() {
+    if (!this.isReady || !this.corners) {
+      return null
+    }
+    const url = this.imageUrl
+    return new Promise((resolve) => {
+      if (this.imageOverlayProjectionMaterial) {
+        const cameraChanged = this.setImageOverlayCameraPosition()
+        if (cameraChanged) {
+          this.imageOverlayProjectionMaterial.userData.version++
+        }
+        this.imageOverlayProjectionMaterial.opacity = this.opacity
+        resolve(this.imageOverlayProjectionMaterial)
+        return
+      }
+      const loader = new THREE.TextureLoader()
+      loader.load(url, (texture) => {
+        this.setImageOverlayCameraPosition()
+        let imageOverlayProjectionMaterial = new ProjectedMaterial({
+          camera: this.overlayProjectionCamera,
+          texture,
+          transparent: true,
+          side: THREE.DoubleSide
+        })
+
+        imageOverlayProjectionMaterial.userData = {}
+        imageOverlayProjectionMaterial.userData.type = 'overlayMaterial'
+        imageOverlayProjectionMaterial.userData.version = 0
+        imageOverlayProjectionMaterial.priority = 30
+        imageOverlayProjectionMaterial.userData.url = url
+        imageOverlayProjectionMaterial.opacity = this.opacity
+        this.imageOverlayProjectionMaterial = imageOverlayProjectionMaterial
+        resolve(imageOverlayProjectionMaterial)
+      })
+    })
+  }
+  getBackgroundGeometry() {
+    const outline = this.corners.map((p) => {
+      return { ...p, z: 100 }
+    })
+    if (this.backgroundGeometry) {
+      this.backgroundGeometry = updateBufferRoofGeometry(
+        outline,
+        [],
+        this.backgroundGeometry
+      )
+    } else {
+      this.backgroundGeometry = getBufferRoofGeometry(outline, [])
+    }
+    return this.backgroundGeometry
+  }
+  setImageOverlayCameraPosition() {
+    let cameraChanged = false
+    const boxCenter = multiplyVector(
+      0.5,
+      addVector(this.corners[0], this.corners[2])
+    )
+    boxCenter.z = 0
+    const boxSize = {
+      x: getDistanceBetweenPoints(this.corners[0], this.corners[1]) / 1000,
+      y: getDistanceBetweenPoints(this.corners[1], this.corners[2]) / 1000,
+      z: 0
+    }
+    if (
+      this.overlayProjectionCamera.left != -boxSize.x / 2 ||
+      this.overlayProjectionCamera.right != boxSize.x / 2 ||
+      this.overlayProjectionCamera.top != boxSize.y / 2 ||
+      this.overlayProjectionCamera.bottom != -boxSize.y / 2
+    ) {
+      cameraChanged = true
+    }
+    this.overlayProjectionCamera.left = -boxSize.x / 2
+    this.overlayProjectionCamera.right = boxSize.x / 2
+    this.overlayProjectionCamera.top = boxSize.y / 2
+    this.overlayProjectionCamera.bottom = -boxSize.y / 2
+
+    let zAngle = getAngleInDegFromCanvasVector(
+      substractVector(this.corners[3], this.corners[0])
+    )
+    if (this.overlayProjectionCamera.rotation.z != (zAngle * Math.PI) / 180) {
+      cameraChanged = true
+    }
+    this.overlayProjectionCamera.rotation.set(0, 0, (zAngle * Math.PI) / 180)
+    if (
+      this.overlayProjectionCamera.position.x != boxCenter.x / 1000 ||
+      this.overlayProjectionCamera.position.y != boxCenter.y / 1000 ||
+      this.overlayProjectionCamera.position.z != boxCenter.z / 1000 + 50
+    ) {
+      cameraChanged = true
+    }
+    this.overlayProjectionCamera.position.set(
+      boxCenter.x / 1000,
+      boxCenter.y / 1000,
+      boxCenter.z / 1000 + 50
+    )
+    this.overlayProjectionCamera.updateProjectionMatrix()
+    return cameraChanged
+  }
+  serialize() {
+    const serializedOverlay = {
+      layouting_overlay_uuid: this.id,
+      settings: {
+        ...this.settings,
+        positionOffset: this.positionOffset,
+        angleOffset: this.angleOffset,
+        ...this.serializeSettings()
+      },
+      type: this.type,
+      is_active: this.isActive,
+      resources: this.resources
+    }
+    return serializedOverlay
+  }
+
+  renderOnPaperJS(paperJSComponent) {}
+  renderOnThreeJS(threeJSComponent) {}
+  serializeSettings() {
+    return {}
+  }
+}

package/src/Overlay/OverlayFactory.js

@@ -0,0 +1,19 @@
+import Overlay from './Overlay'
+import AirTeamOverlay from './AirTeamOverlay'
+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)
+    } else if (serializedOverlay.type == 'image_overlay') {
+      overlayInstance = new ImageOverlay(serializedOverlay, emit)
+    } else {
+      overlayInstance = new Overlay(serializedOverlay, emit)
+    }
+    return overlayInstance
+  }
+}
+
+export default OverlayFactory

package/src/Overlay/OverlayLayer.js

@@ -0,0 +1,36 @@
+import OverlayFactory from './OverlayFactory'
+import LayerManager from '../Layer/Layer'
+class OverlayLayer extends LayerManager {
+  constructor() {
+    super()
+    this.id = Math.random().toString(36) // Unique ID for instance
+    this.availableEvents.push(
+      'items-updated',
+      'overlay-scale-updated',
+      'overlay-is-ready',
+      'overlay-offset-position-error',
+      'overlay-three-loaded'
+    )
+  }
+  addOrUpdateSerializedItems(
+    serializedOverlays,
+    origin = { lat: null, lng: null }
+  ) {
+    let addedOverlays = []
+    serializedOverlays.forEach((serializedOverlay) => {
+      let overlayInstance = OverlayFactory.createOverlay(
+        serializedOverlay,
+        (...arg) => {
+          return this.emit.call(this, ...arg)
+        },
+        origin
+      )
+      addedOverlays.push(overlayInstance)
+      this.addOrUpdateItem(overlayInstance)
+    })
+    return addedOverlays
+  }
+}
+
+const OverlayLayerInstance = new OverlayLayer()
+export default OverlayLayerInstance

package/src/components/ThreeCanvasViewer.vue

@@ -15,7 +15,7 @@ import {
   updateComputedGeometryPolygon,
   normalizeVector
 } from '@eturnity/eturnity_maths'
-
+import OverlayLayer from '../Overlay/OverlayLayer.js'
 import threeMixin from '../helper/threeMixin'
 
 export default {
@@ -34,6 +34,10 @@ export default {
   beforeDestroy() {
     clearInterval(this.intervalId)
     cancelAnimationFrame(this.animationFrameId)
+    OverlayLayer.removeEventListener(
+      'overlay-is-ready',
+      this.updateOverlayRendering
+    )
   },
   mixins: [threeMixin],
   async mounted() {
@@ -72,8 +76,12 @@ export default {
       this.setCamera(polygon, this.view_mode)
     }
     this.isReady.geometry = true
-    this.render()
     this.intervalId = setInterval(() => this.render(), 500)
+    OverlayLayer.addEventListener(
+      'overlay-is-ready',
+      this.updateOverlayRendering
+    )
+    this.render()
   },
   computed: {
     ...mapState({
@@ -190,8 +198,11 @@ export default {
           distance =
             5 + objectRadius / Math.sin(((this.camera.fov / 2) * Math.PI) / 180)
         }
-
-        polygonRef = updateComputedGeometryPolygon(polygonRef)
+        try {
+          polygonRef = updateComputedGeometryPolygon(polygonRef)
+        } catch (err) {
+          console.error(err)
+        }
         const targetVector = polygonRef.meanPoint
         //const target=[targetVector.x/1000,targetVector.y/1000,targetVector.z/1000]
         let cameraMoveVector = { x: 0, y: 0, z: 0 }
@@ -292,11 +303,11 @@ export default {
   watch: {
     isReady: {
       handler() {
+        const overlayReady = OverlayLayer.getItems().length == 0 || this.isReady.overlay
         if (
           this.isReady.texturesToLoad == this.isReady.texturesLoaded &&
           this.isReady.geometry &&
-          this.isReady.threeMap &&
-          this.isReady.camera
+          overlayReady
         ) {
           var event = new CustomEvent('screenshotable')
           // dispatch the custom event