@eturnity/eturnity_3d 0.0.4

package/src/assets/theme.js

@@ -0,0 +1,43 @@
+const theme = {
+  colors: {
+    primary: '#282387',
+    secondary: '#818181',
+    tertiary: '#d5d5d5',
+    black: '#263238',
+    yellow: '#fdb813',
+    darkGray: '#818181',
+    mediumGray: '#d5d5d5',
+    lightGray: '#f2f2f2',
+    white: '#fff',
+    blue: '#48a2d0',
+    red: '#FF5656',
+    blue1: '#e4efff',
+    blue2: '#F6FAFF',
+    grey1: '#666',
+    grey2: '#c4c4c4',
+    grey3: '#b2b9c5',
+    grey4: '#dee2eb',
+    grey5: '#fafafa',
+    grey6: '#555d61',    
+    turquoise:'#20A4CA',
+    green: '#99db0c',
+    purple: '#505ca6',
+    disabled: '#dfe1e1',
+    transparentWhite1: '#ffffff32',
+    transparentBlack1: '#263238e6',
+    transparentBlue1:'#20a4cae6',
+    blueElectric:'#66dffa',
+    eturnityGrey: '#263238'
+  },
+
+  screen: {
+    mobileSmall: '345px',
+    mobile: '425px',
+    mobileLarge: '530px',
+    tablet: '768px',
+    tabletLarge: '950px'
+  },
+  borderRadius: '4px'
+}
+
+export default theme

package/src/components/ThreeCanvasViewer.vue

@@ -0,0 +1,247 @@
+<template>
+  <div id="canvas3DContainer" ref="canvas3DContainer" crossorigin />
+</template>
+
+<script>
+import { mapActions, mapState, mapGetters,mapMutations } from 'vuex'
+import * as THREE from 'three'
+import { addVector, multiplyVector } from '@eturnity/eturnity_maths'
+import { updateComputedGeometryPolygon } from '@eturnity/eturnity_maths'
+
+import threeMixin from '../helper/threeMixin'
+import { material } from '../helper/materials'
+import renderMixin from '../helper/renderMixin'
+export default {
+  name: 'ThreeCanvas',
+  data() {
+    return {
+      scene: new THREE.Scene(),
+      camera: new THREE.PerspectiveCamera(50, 300 / 300, 0.1, 100000),
+      orthographicCamera: new THREE.OrthographicCamera(
+        10 / -2,
+        10 / 2,
+        10 / 2,
+        10 / -2,
+        1,
+        1000
+      ),
+      provider:null,
+      cameraprojection: null,
+      texture: null,
+      material: material,
+      renderer: new THREE.WebGLRenderer({
+        antialias: true,
+        preserveDrawingBuffer: true
+      }),
+      orbitControl:null,
+      raycaster: new THREE.Raycaster(),
+      loader: new THREE.TextureLoader(),
+      pointer: { x: 0, y: 0 },
+      canvasHeight: null,
+      canvasWidth: null,
+      canvasOffset: { x: 0, y: 0 },
+      tweenCamera: null,
+      tweenOrbit: null,
+      three_map: null,
+      backgroundImagesizeInMm: null,
+      textureLoader: new THREE.TextureLoader(),
+      isReady: {
+        texturesLoaded: 0,
+        texturesToLoad: 0,
+        backgroundImage: false,
+        threeMap: false,
+        geometry: false,
+        camera: false
+      },
+      screenshotable: false
+    }
+  },
+  mixins: [renderMixin,threeMixin],
+  async mounted() {
+    await this.hydrateData(this.geometryData)
+    this.renderer.domElement.style.width = '100%'
+    this.renderer.domElement.style.height = '100%'
+
+    this.initialiseThree()
+    this.loadProjectionMaterial()
+    this.initialiseThreeMap()
+    await this.loadTextureFromModuleFields()
+    this.renderGeometry()
+    this.onWindowResize()
+    this.animate()
+    this.$root.$on('on-roofSelected',(polygon)=>this.setCameraOrthogonalTo(polygon))
+    this.updateProjectionMaterial()
+    
+    console.log('uuid to focus on:', this.uuid)
+    const polygon = this.polygons.find((p) => p.id == this.uuid)
+    this.setCamera(polygon, this.view_mode)
+    this.isReady.geometry = true
+  },
+  computed: {
+    ...mapState({
+      geometryData: (state) => state.threeDModule.geometryData,
+      uuid: (state) => state.threeDModule.uuid,
+      view_mode: (state) => state.threeDModule.view_mode
+    }),
+    ...mapGetters({
+      polygons: 'getPolygons',
+      edges: 'getEdges3D',
+      nodes: 'getNodes3D',
+      mapConfig: 'getMapConfig',
+      roofsBounds: 'getRoofsBounds',
+      layoutSettings: 'getLayoutSettings',
+
+      roofs: 'getRoofs',
+      obstacles: 'getObstacles',
+      moduleFields: 'getModuleFields',
+      panels: 'getPanels',
+      userDeactivatedPanels: 'getUserDeactivatedPanels'
+    })
+  },
+  methods: {
+    ...mapActions({
+      hydrateData: 'hydrateData'
+    }),
+    ...mapMutations({
+      set_module_texture_version_id: 'mutate_module_texture_version_id'
+    }),
+    setCamera(polygon, view_mode) {
+      console.log('viewmode', view_mode)
+      if (!polygon || view_mode == 'global') {
+        let roofsBounds = this.roofsBounds()
+        //let distance = 5 + objectRadius / Math.sin(((this.orthographicCamera.fov / 2) * Math.PI) / 180)
+        //console.log('distance:',distance)
+        const position = [0, 0, 100]
+        const target = [0, 0, 0]
+        this.orthographicCamera.position.set(...position)
+        this.orthographicCamera.lookAt(...target)
+        this.isReady.camera = true
+        this.orthographicCamera.left = roofsBounds.xMin / 1000
+        this.orthographicCamera.right = roofsBounds.xMax / 1000
+        this.orthographicCamera.top = roofsBounds.yMax / 1000
+        this.orthographicCamera.bottom = roofsBounds.yMin / 1000
+        this.orthographicCamera.updateProjectionMatrix()
+      } else if (polygon) {
+        let polygonRef = polygon
+
+        //get polygonMesh
+        let mesh
+        let target
+        let distance = 45
+        if (polygonRef.layer == 'roof') {
+          mesh = this.meshes.roofMeshes[polygonRef.id]
+        } else if (polygonRef.layer == 'moduleField') {
+          mesh = this.meshes.moduleFieldsMeshes[polygonRef.id]
+        }
+        if (mesh) {
+          const geometry = mesh.geometry
+
+          if (geometry.boundingSphere === null) geometry.computeBoundingSphere()
+          console.log('geometry.boundingSphere', geometry.boundingSphere)
+          target = [
+            geometry.boundingSphere.center.x,
+            geometry.boundingSphere.center.y,
+            geometry.boundingSphere.center.z
+          ]
+          let objectRadius = geometry.boundingSphere.radius
+          distance =
+            5 + objectRadius / Math.sin(((this.camera.fov / 2) * Math.PI) / 180)
+          //_sphere.copy( geometry.boundingSphere ).applyMatrix4( object.matrixWorld );
+        }
+
+        polygonRef = updateComputedGeometryPolygon(polygonRef)
+        const targetVector = polygonRef.meanPoint
+        //const target=[targetVector.x/1000,targetVector.y/1000,targetVector.z/1000]
+        let cameraMoveVector = { x: 0, y: 0, z: 0 }
+        console.log('normalVector:', polygonRef.normalVector)
+        if (view_mode == 'ortho') {
+          cameraMoveVector = multiplyVector(
+            distance * 1000,
+            polygonRef.normalVector
+          )
+        } else if (view_mode == 'top') {
+          let polygonBounds = polygonRef.getBounds()
+          polygonBounds.xMin-=1000
+          polygonBounds.xMax+=1000
+          polygonBounds.yMin-=1000
+          polygonBounds.yMax+=1000
+          const position = [0,0, 100]
+          const target = [0, 0, 0]
+
+          console.log('top POS TARGET', position, target)
+          this.orthographicCamera.position.set(...position)
+          this.orthographicCamera.lookAt(...target)
+          this.orthographicCamera.left = polygonBounds.xMin / 1000
+          this.orthographicCamera.right = polygonBounds.xMax / 1000
+          this.orthographicCamera.top = polygonBounds.yMax / 1000
+          this.orthographicCamera.bottom = polygonBounds.yMin / 1000
+          this.orthographicCamera.updateProjectionMatrix()
+        } else {
+          //street view
+          const horizontalVector = { ...polygonRef.normalVector, z: 0 }
+          if (horizontalVector.x == 0 && horizontalVector.y == 0) {
+            horizontalVector.y = 1
+          }
+          cameraMoveVector = multiplyVector(distance * 1000, horizontalVector)
+        }
+
+        const positionVector = addVector(polygonRef.meanPoint, cameraMoveVector)
+        const position = [
+          positionVector.x / 1000,
+          positionVector.y / 1000 - 1,
+          positionVector.z / 1000
+        ]
+
+        this.camera.position.set(...position)
+        this.camera.lookAt(...target)
+        this.camera.updateProjectionMatrix()
+
+        this.isReady.camera = true
+      }
+    },
+    animate() {
+      this.render()
+      requestAnimationFrame(this.animate)
+    },
+    render() {
+      this.renderer.clear()
+      if (['top', 'global'].includes(this.view_mode)) {
+        this.renderer.render(this.scene, this.orthographicCamera)
+      } else {
+        this.renderer.render(this.scene, this.camera)
+      }
+    }
+  },
+  watch: {
+    isReady: {
+      handler() {
+        if (
+          this.isReady.texturesToLoad == this.isReady.texturesLoaded &&
+          this.isReady.backgroundImage &&
+          this.isReady.geometry &&
+          this.isReady.threeMap &&
+          this.isReady.camera
+        ) {
+          var event = new CustomEvent('screenshotable')
+          // dispatch the custom event
+          document.dispatchEvent(event)
+          this.screenshotable = true
+          console.log('screenshotable')
+        }
+      },
+      deep: true
+    }
+  }
+}
+</script>
+
+<style>
+#canvas3DContainer {
+  width: 100%;
+  height: 100%;
+}
+#canvas3DContainer > canvas {
+  width: 100%;
+  height: 100%;
+}
+</style>

package/src/config.js

@@ -0,0 +1,104 @@
+import theme from './assets/theme'
+export const polygonCloseTolerance=15
+export const snapToPointTolerance = 15
+export const snapToIntersectionPointTolerance = 15
+export const snapToLineTolerance = 10
+export const distanceToCloseNode = 70
+export const mmTolerance=50
+export const earthRadius=6371008
+
+export const layerColors = {
+  construction: { fillColor: 'transparent', strokeColor: theme.colors.blueElectric ,strokeWidth:3 },
+  roof: { fillColor: 'rgba(255, 255, 255, 0.1)', strokeColor: 'white' ,strokeWidth:0 },
+  roofInside: { fillColor: 'rgba(255, 255, 255, 0.1)', strokeColor: 'white' ,strokeWidth:1},
+  obstacle: { fillColor: theme.colors.red, strokeColor: 'red' ,strokeWidth:1 },
+  panel: { fillColor: 'rgba(115, 115, 229, 0.1)', strokeColor: '#ffffff'  ,strokeWidth:1},
+  user_deactivated_panel: { fillColor: 'rgba(115, 115, 229, 0.1)', strokeColor: 'white'  ,strokeWidth:4},
+  selectedPanel: { fillColor: '#0068DE80', strokeColor: theme.colors.blue  ,strokeWidth:1},
+  snap: { fillColor: 'transparent', strokeColor: 'white' },
+  moduleField: { fillColor: 'rgba(255, 255, 255, 0.1)', strokeColor: 'white' ,strokeWidth:3 },
+  hoveredModuleFieldEdge: { strokeColor: theme.colors.blue ,strokeWidth:6 },
+  tmpModuleField: { fillColor: 'rgba(115, 115, 229, 0.4)', strokeColor: theme.colors.blue ,strokeWidth:2 },
+  selectedModuleField: {fillColor: '#0068DE80', strokeColor: theme.colors.blue ,strokeWidth:3},
+  highlight: { fillColor: 'rgba(255, 255, 255, 0.2)', strokeColor: 'white' ,strokeWidth:1 },
+  selectedRoof: { fillColor: '#0068DE80', strokeColor: 'white' ,strokeWidth:3 },
+  selectedObstacle: { fillColor: '#0068DE80', strokeColor: theme.colors.blue ,strokeWidth:2 },
+  selectedAndHighlighted: {fillColor: '#0068DEA0', strokeColor: theme.colors.blue ,strokeWidth:3},
+  flatWarning: {fillColor: '#ffff0090', strokeColor: 'yellow' ,strokeWidth:1},
+  customLength: { fillColor: 'transparent', strokeColor: theme.colors.blueElectric ,strokeWidth:1 },
+  snapDirectionIncline: { fillColor: 'transparent', strokeColor: theme.colors.blue ,strokeWidth:1 },
+  inclineDirectionArrow: { fillColor: 'transparent', strokeColor: "#FF5656" ,strokeWidth:5 },
+  inclineLabel: { fillColor: theme.colors.transparentBlack1, textColor: "white"},
+  directionLabel: { fillColor: theme.colors.transparentBlack1, textColor: "white"},
+}
+
+export const snapInclineTolerance=5
+export const snapDirectionTolerance=15
+export const radiusPadding=20
+export const InclineDirectionCircleRadius=250
+export const inclineDirectionMinRadius=50
+export const baseEdgeOfModuleField=theme.colors.blueElectric
+export const maximumGapLimit=500
+export const defaultBaseHeight=3000
+export const colorArrayBase=[
+  "#FF5656",
+  "#FDB813",
+  "#505CA6",
+  "#8392EE",
+  "#6CD5D5",
+  "#C84E4E",
+  "#90A650",
+  "#D27CCA",
+  "#6276DF",
+]
+export const colorArray=colorArrayBase.map(c=>c+"c0")
+export const layerTools={
+  map:[],
+  roof:["drawRoof","selectRoof"],
+  obstacle:["drawObstacle"],
+  margin:["selectMargin"],
+  panel:["selectModuleField"],
+}
+//3D visualisation:
+export const beamRadius=0.05
+export const maxMargin=2500
+export const node3DRadius=0.05
+export const beamColor="#ffffff"
+export const node3DColor="white"
+export const beamOpacity=0.3
+export const node3dOpacity=0.3
+export const dimMarginColor='#ff000020'
+export const defaultTextureUrl=require('./assets/images/panels/reneSola_Virtus_2_JC320S_24_Bbw.png')
+export const defaultTextureUrls=[
+  require('./assets/images/panels/reneSola_Virtus_2_JC320S_24_Bbw.png'),
+  require('./assets/images/panels/longiSolarLR4_60HPH_370M.png'),
+  require('./assets/images/panels/longiSolarLR4_60HPH_350M.png'),
+]
+export const hitOption = {
+  segments: true,
+  stroke: true,
+  fill: true,
+  tolerance: 10
+}
+export const zoomFactor=Math.exp(Math.log(2)/10)
+export const hitOptionPolygonStrict = {
+  segments: false,
+  stroke: false,
+  fill: true,
+  tolerance: 0
+}
+export const hitOptionStrokeStrict = {
+  segments: false,
+  stroke: true,
+  fill: false,
+  tolerance: 0
+}
+export const hitOptionStroke = {
+  segments: false,
+  stroke: true,
+  fill: false,
+  tolerance: 2
+}
+
+export const dragHeightSensitivity=20
+export const snapLimit=100

package/src/functions.js

@@ -0,0 +1,2 @@
+export * from './helper/UpdateRoofModuleFieldRelations'
+export * from './helper/UpdateRoofObstacleRelations'

package/src/helper/DFS.js

@@ -0,0 +1,80 @@
+
+// Javascript program to print DFS
+// traversal from a given
+// graph
+ 
+// This class represents a
+// directed graph using adjacency
+// list representation
+export class Graph
+{
+     
+    // Constructor
+    //v=number of vertices
+    constructor()
+    {
+        this.visited=[]
+        this.dict= []
+        this.adj = []
+            
+    }
+     
+    // Function to add an edge into the graph
+    addEdge(uuid1, uuid2)
+    {
+        let v=this.dict.indexOf(uuid1)
+        let length
+        if(v==-1){
+          length=this.dict.length
+          this.dict[length]=uuid1
+          this.adj[length]=[]
+          v=length
+        }
+        let w=this.dict.indexOf(uuid2)
+        if(w==-1){
+          length=this.dict.length
+          this.dict[length]=uuid2
+          this.adj[length]=[]
+          w=length
+        }
+        // Add w to v's list.
+       if(!this.adj[v]){this.adj[v]=[]}
+       this.adj[v].push(w);
+       if(!this.adj[w]){this.adj[w]=[]}
+        this.adj[w].push(v);
+    }
+     
+    // A function used by DFS
+    DFSUtil(v, visited)
+    {
+         
+        // Mark the current node as visited and print it
+        visited[v] = true;
+        this.visited.push(v)
+  
+        // Recur for all the vertices adjacent to this
+        // vertex
+        for(let i in this.adj[v])
+        {
+            let n = this.adj[v][i]
+            if (!visited[n])
+                this.DFSUtil(n, visited);
+        }
+    }
+     
+    // The function to do DFS traversal.
+    // It uses recursive
+    // DFSUtil()
+    DFS(uuidStart){
+        let v=this.dict.indexOf(uuidStart)
+        // Mark all the vertices as
+        // not visited(set as
+        // false by default in java)
+        let visited = [];
+        // Call the recursive helper
+        // function to print DFS
+        // traversal
+        this.DFSUtil(v, visited);
+        return [...new Set(this.visited.map((i)=>{return this.dict[i]}))]
+    }
+}