@eturnity/eturnity_3d 7.20.1 → 7.24.0-EPDM-10926.0

package/package.json

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

package/src/EventManager/EventManager.js

@@ -0,0 +1,48 @@
+export default class EventManager {
+  constructor() {
+    this.listeners = {}
+    this.availableEvents = []
+  }
+
+  // Add an event listener
+  addEventListener(events, callback) {
+    let eventList = events.split(' ')
+    eventList.forEach((event) => {
+      if (!this.listeners[event]) {
+        this.listeners[event] = []
+      }
+      this.listeners[event].push(callback)
+    })
+  }
+
+  // Remove an event listener
+  removeEventListener(events, callback) {
+    let eventList = events.split(' ')
+    eventList.forEach((event) => {
+      if (this.listeners[event]) {
+        this.listeners[event] = this.listeners[event].filter(
+          (listener) => listener !== callback
+        )
+      }
+    })
+  }
+
+  // Dispatch an event and bubble it up to parent components
+  emit(event, eventData) {
+    //Check if event is available
+    if (!this.availableEvents.includes(event)) {
+      console.error(
+        event,
+        ' not available. Available events:',
+        this.availableEvents
+      )
+    }
+    // Check if the event has listeners
+    if (this.listeners[event]) {
+      // Execute each listener callback
+      this.listeners[event].forEach((callback) => {
+        callback(eventData)
+      })
+    }
+  }
+}

package/src/Item/Item.js

@@ -0,0 +1,12 @@
+import { v4 as uuidv4 } from 'uuid'
+
+export default class Item {
+  constructor(emit) {
+    this.id = uuidv4()
+    this.version = 0
+    this.emit = emit
+    this.actionsAvailable = []
+    this.isSelected = false
+  }
+  serialize() {}
+}

package/src/Layer/Layer.js

@@ -0,0 +1,119 @@
+import EventManager from '../EventManager/EventManager'
+
+export default class LayerManager extends EventManager {
+  constructor() {
+    super()
+    this.items = []
+    this.selectedItemsIds = []
+    this.itemsIds = []
+    this.availableEvents.push(
+      'selected-items-updated',
+      'items-updated',
+      'item-updated',
+      'item-added',
+      'item-removed',
+      'item-selected'
+    )
+  }
+  findById(id) {
+    return this.items.find((item) => item.id == id)
+  }
+  getItems() {
+    return this.items
+  }
+  getReadyItems() {
+    return this.items.filter((item) => item.isReady)
+  }
+  getItemsIds() {
+    return this.itemsIds
+  }
+  getSelectedItemsIds() {
+    return this.selectedItemsIds
+  }
+  getSelectedItems() {
+    return this.items.filter((item) => this.selectedItemsIds.includes(item.id))
+  }
+  setItems(items) {
+    this.items = items
+    this.itemsIds = items.map((i) => i.id)
+    const newSelectedItemsIds = this.selectedItemsIds.filter((id) =>
+      this.itemsIds.includes(id)
+    )
+    this.selectItemsIds(newSelectedItemsIds)
+    this.emit('items-updated', [...this.items])
+  }
+  selectItemsIds(ids) {
+    this.selectedItemsIds = ids
+    this.items.forEach(
+      (item) => (item.isSelected = this.selectedItemsIds.includes(item.id))
+    )
+    this.emit('selected-items-updated', this.selectedItemsIds)
+  }
+  selectItems(items) {
+    const selectedItemsIds = items.map((item) => item.id)
+    this.selectItemsIds(selectedItemsIds)
+  }
+  deselectItems() {
+    this.selectItems([])
+  }
+  toggleSelectionById(id) {
+    let newSelectedItems = this.getSelectedItems()
+    if (this.selectedItemsIds.includes(id)) {
+      newSelectedItems = newSelectedItems.filter((item) => item.id != id)
+    } else {
+      let item = this.findById(id)
+      if (item) {
+        newSelectedItems.push(item)
+      }
+    }
+    this.selectItems(newSelectedItems)
+  }
+  addOrUpdateItem(item) {
+    const id = item.id
+    const existingItemWithSameId = this.items.find((i) => i.id == id)
+    if (existingItemWithSameId) {
+      if (item.version > existingItemWithSameId.version) {
+        this.removeItemById(id)
+      } else {
+        return existingItemWithSameId
+      }
+    }
+    let newItems = [...this.items]
+    newItems.push(item)
+    this.setItems(newItems)
+    this.emit('item-added', item)
+    return item
+  }
+  removeItemById(id) {
+    this.setItems(this.items.filter((item) => item.id != id))
+    this.emit('item-removed')
+  }
+  removeSelectedItems() {
+    this.setItems(this.items.filter((item) => !item.isSelected))
+    this.emit('item-removed')
+  }
+  removeAllItems() {
+    this.setItems([])
+    this.emit('item-removed')
+  }
+  dispatchActionToAllItems(actionName, params) {
+    return this.getItems().map((item) => {
+      if (
+        typeof item[actionName] === 'function' &&
+        item.actionsAvailable.includes(actionName)
+      ) {
+        return item[actionName](params)
+      }
+    })
+  }
+  dispatchActionToItemById(id, actionName, params) {
+    const item = this.findById(id)
+    if (
+      typeof item[actionName] === 'function' &&
+      item.actionsAvailable.includes(actionName)
+    ) {
+      return item[actionName](params)
+    }
+    return
+  }
+}

package/src/Overlay/GLBOverlay.js

@@ -0,0 +1,91 @@
+import ThreeDModelOverlay from './ThreeDModelOverlay'
+import * as THREE from 'three'
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
+import { deltaLatLngToDistance } from '@eturnity/eturnity_maths'
+export default class GLBOverlay extends ThreeDModelOverlay {
+  constructor(overlay, emit, origin) {
+    super(overlay, emit, origin, new GLTFLoader())
+    this.extracted = false
+    this.geoLocalisation = this.settings.geoLocalisation
+    this.has_plain_roof_simplified = false
+  }
+  loadFile() {
+    this.isReady = false
+    return new Promise((resolve) => {
+      if (this.overlayMesh) {
+        resolve(this.overlayMesh)
+      }
+      let resource = this.resources[0]
+      let overlayMesh = new THREE.Group()
+      this.loader.load(resource.file_url, (gltf) => {
+        const model = gltf.scene
+        model.rotateX(Math.PI / 2)
+        overlayMesh.userData.meshId = this.id
+        overlayMesh.userData.type = 'overlayMeshes'
+        overlayMesh.userData.version = this.version
+        overlayMesh.attach(model)
+        overlayMesh.position.set(0, 0, 0)
+        const box = new THREE.Box3().setFromObject(overlayMesh)
+        overlayMesh.position.set(0, 0, -box.min.z)
+        if (overlayMesh.getObjectByName('plain_roof_simplified')) {
+          this.has_plain_roof_simplified = true
+          this.type = 'airteam'
+        } else {
+          this.type = 'custom_3d_model'
+        }
+        resolve(overlayMesh)
+      })
+    })
+  }
+  checkGeoLocDataAndOffset() {
+    const lat0 = this.overlayMesh.children[0].userData.latitude_origin
+    const lng0 = this.overlayMesh.children[0].userData.longitude_origin
+    if (lat0 && lng0 && this.origin) {
+      let { x, y } = deltaLatLngToDistance(
+        lat0 - this.origin.lat,
+        lng0 - this.origin.lng,
+        lat0
+      )
+      if (Math.hypot(x, y) < 100000) {
+        this.positionOffset.x = x
+        this.positionOffset.y = y
+        this.positionOffset.z = 0
+      } else {
+        this.positionOffset.x = 0
+        this.positionOffset.y = 0
+        this.positionOffset.z = 0
+        this.emit('overlay-offset-position-error', { id: this.id })
+      }
+      this.geoLocalisation = { x, y }
+    }
+  }
+  setOverlayVisibilityFor2D() {
+    if (
+      this.overlayMesh.children[0].children.some(
+        (child) => child.name == 'textured_roof'
+      )
+    ) {
+      this.overlayMesh.children[0].children.forEach(
+        (child) => (child.visible = child.name == 'textured_roof')
+      )
+    }
+    return this.overlayMesh
+  }
+  set3DObjectMaterialOpacity(obj) {
+    obj.children.forEach((child) => {
+      this.set3DObjectMaterialOpacity(child, this.opacity)
+    })
+    if (obj.material && obj.name != 'plain_roof_simplified') {
+      obj.visible = this.opacity > 0
+      obj.material.opacity = this.opacity
+      obj.material.transparent = this.opacity < 1
+    }
+  }
+  serializeSettings() {
+    return {
+      version: this.version,
+      corners: this.corners,
+      geoLocalisation: this.geoLocalisation
+    }
+  }
+}

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
+    }
+  }
+}