@eturnity/eturnity_3d 6.33.0 → 6.34.1

package/package.json

@@ -1,14 +1,16 @@
 {
   "name": "@eturnity/eturnity_3d",
   "private": false,
-  "version": "6.33.0",
+  "version": "6.34.1",
   "main": "dist/main.js",
   "scripts": {
     "dev": "vue-cli-service serve --skip-plugins @vue/cli-plugin-eslint",
-    "build": "vue-cli-service build --skip-plugins @vue/cli-plugin-eslint"
+    "build": "vue-cli-service build --skip-plugins @vue/cli-plugin-eslint",
+    "lint": "eslint --fix --ext .js,.vue ./src",
+    "prettier": "prettier --write \"**/*.{js,vue}\""
   },
   "dependencies": {
-    "@eturnity/eturnity_maths": "6.33.0",
+    "@eturnity/eturnity_maths": "6.34.1",
     "axios": "^1.3.2",
     "core-js": "^2.6.12",
     "cors": "^2.8.5",
@@ -32,6 +34,7 @@
     "@vue/cli-plugin-babel": "^3.12.1",
     "@vue/cli-plugin-eslint": "^3.12.1",
     "@vue/cli-service": "^3.12.1",
+    "babel-eslint": "^10.1.0",
     "babel-loader": "^8.3.0",
     "eslint": "5.16.0",
     "eslint-config-prettier": "6.15.0",
@@ -39,7 +42,8 @@
     "eslint-plugin-vue": "5.2.3",
     "html-webpack-plugin": "^3.2.0",
     "webpack": "^4.46.0",
-    "webpack-cli": "^4.10.0"
+    "webpack-cli": "^4.10.0",
+    "prettier": "2.8.4"
   },
   "eslintConfig": {
     "root": true,
@@ -69,4 +73,4 @@
     "> 1%",
     "last 2 versions"
   ]
-}
+}

package/src/App.vue

@@ -1,28 +1,28 @@
 <template>
-  <div class="frame" :style="{height:'100%'}">
+  <div class="frame" :style="{ height: '100%' }">
     <ThreeCanvas />
   </div>
 </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>
 
 <style scoped>
-.frame{
-  width:100%;
-  height:100%;
+.frame {
+  width: 100%;
+  height: 100%;
 }
 </style>

package/src/assets/theme.js

@@ -18,15 +18,15 @@ const theme = {
     grey3: '#b2b9c5',
     grey4: '#dee2eb',
     grey5: '#fafafa',
-    grey6: '#555d61',    
-    turquoise:'#20A4CA',
+    grey6: '#555d61',
+    turquoise: '#20A4CA',
     green: '#99db0c',
     purple: '#505ca6',
     disabled: '#dfe1e1',
     transparentWhite1: '#ffffff32',
     transparentBlack1: '#263238e6',
-    transparentBlue1:'#20a4cae6',
-    blueElectric:'#66dffa',
+    transparentBlue1: '#20a4cae6',
+    blueElectric: '#66dffa',
     eturnityGrey: '#263238'
   },
 

package/src/components/ThreeCanvasViewer.vue

@@ -1,9 +1,14 @@
 <template>
-  <div class="canvas3DContainer" ref="canvas3DContainer" :style="{height:'100%'}" crossorigin />
+  <div
+    class="canvas3DContainer"
+    ref="canvas3DContainer"
+    :style="{ height: '100%' }"
+    crossorigin
+  />
 </template>
 
 <script>
-import { mapActions, mapState, mapGetters,mapMutations } from 'vuex'
+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'
@@ -25,14 +30,14 @@ export default {
         1,
         1000
       ),
-      provider:null,
+      provider: null,
       cameraprojection: null,
       texture: null,
       renderer: new THREE.WebGLRenderer({
         antialias: true,
         preserveDrawingBuffer: true
       }),
-      orbitControl:null,
+      orbitControl: null,
       raycaster: new THREE.Raycaster(),
       loader: new THREE.TextureLoader(),
       pointer: { x: 0, y: 0 },
@@ -53,10 +58,10 @@ export default {
         camera: false
       },
       screenshotable: false,
-      areModuleFieldsVisible:false
+      areModuleFieldsVisible: false
     }
   },
-  mixins: [renderMixin,threeMixin,materialMixin],
+  mixins: [renderMixin, threeMixin, materialMixin],
   async mounted() {
     await this.hydrateData(this.geometryData)
     this.renderer.domElement.style.width = '100%'
@@ -69,9 +74,11 @@ export default {
     this.onWindowResize()
     // this.updateProjectionMaterials()
     this.animate()
-    this.$root.$on('on-roofSelected',(polygon)=>this.setCameraOrthogonalTo(polygon))
+    this.$root.$on('on-roofSelected', (polygon) =>
+      this.setCameraOrthogonalTo(polygon)
+    )
     this.initializeProjectionMaterial()
-    
+
     const polygon = this.polygons.find((p) => p.id == this.uuid)
     this.setCamera(polygon, this.view_mode)
     this.isReady.geometry = true
@@ -82,7 +89,7 @@ export default {
       uuid: (state) => state.threeDModule.uuid,
       view_mode: (state) => state.threeDModule.view_mode,
       isInteractive: (state) => state.threeDModule.isInteractive,
-      imageOverlay: (state) => state.threeDModule.imageOverlay,
+      imageOverlay: (state) => state.threeDModule.imageOverlay
     }),
     ...mapGetters({
       polygons: 'getPolygons',
@@ -106,7 +113,7 @@ export default {
       setModuleTextureVersionId: 'mutate_moduleTextureVersionId'
     }),
     setCamera(polygon, view_mode) {
-      let margin=0.2
+      let margin = 0.2
       if (!polygon || view_mode == 'global') {
         let roofsBounds = this.roofsBounds
         const position = [0, 0, 100]
@@ -114,9 +121,12 @@ export default {
         this.orthographicCamera.position.set(...position)
         this.orthographicCamera.lookAt(...target)
         this.isReady.camera = true
-        
-        let {xMin,xMax,yMin,yMax}=this.orthographicBounds(roofsBounds,margin)
-       
+
+        let { xMin, xMax, yMin, yMax } = this.orthographicBounds(
+          roofsBounds,
+          margin
+        )
+
         this.orthographicCamera.left = xMin / 1000
         this.orthographicCamera.right = xMax / 1000
         this.orthographicCamera.top = yMax / 1000
@@ -153,7 +163,8 @@ export default {
         const targetVector = polygonRef.meanPoint
         //const target=[targetVector.x/1000,targetVector.y/1000,targetVector.z/1000]
         let cameraMoveVector = { x: 0, y: 0, z: 0 }
-        let flatRoof=polygonRef.normalVector.x==0 && polygonRef.normalVector.y==0
+        let flatRoof =
+          polygonRef.normalVector.x == 0 && polygonRef.normalVector.y == 0
         if (view_mode == 'ortho') {
           cameraMoveVector = multiplyVector(
             distance * 1000,
@@ -161,14 +172,17 @@ export default {
           )
         } 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]
+          polygonBounds.xMin -= 1000
+          polygonBounds.xMax += 1000
+          polygonBounds.yMin -= 1000
+          polygonBounds.yMax += 1000
+          const position = [0, 0, 100]
           const target = [0, 0, 0]
 
-          let {xMin,xMax,yMin,yMax}=this.orthographicBounds(polygonBounds,margin)
+          let { xMin, xMax, yMin, yMax } = this.orthographicBounds(
+            polygonBounds,
+            margin
+          )
           this.orthographicCamera.position.set(...position)
           this.orthographicCamera.lookAt(...target)
 
@@ -184,11 +198,15 @@ export default {
             //if flat roof=> go south
             horizontalVector.y = 1
           }
-          cameraMoveVector = multiplyVector(distance * 2000, horizontalVector)
+          let distanceCoefficient = 2
+          if(flatRoof){
+            distanceCoefficient = 1.5
+          }
+          cameraMoveVector = multiplyVector(distance * 1000 * distanceCoefficient, horizontalVector)
         }
 
         const positionVector = addVector(polygonRef.meanPoint, cameraMoveVector)
-        if(flatRoof) positionVector.z+=2000
+        if (flatRoof) positionVector.z += 2000
         const position = [
           positionVector.x / 1000,
           positionVector.y / 1000 - 1,
@@ -202,34 +220,32 @@ export default {
         this.isReady.camera = true
       }
     },
-    orthographicBounds(bounds,margin){
-      let ratioCanvas=this.canvasHeight/this.canvasWidth
+    orthographicBounds(bounds, margin) {
+      let ratioCanvas = this.canvasHeight / this.canvasWidth
 
+      let width = (bounds.xMax - bounds.xMin) * (1 + margin)
+      let height = (bounds.yMax - bounds.yMin) * (1 + margin)
+      let ratio = height / width
 
-      let width=(bounds.xMax-bounds.xMin)*(1+margin)
-      let height=(bounds.yMax-bounds.yMin)*(1+margin)
-      let ratio=height/width
-
-      let xCenter=(bounds.xMax+bounds.xMin)/2
-      let yCenter=(bounds.yMax+bounds.yMin)/2
+      let xCenter = (bounds.xMax + bounds.xMin) / 2
+      let yCenter = (bounds.yMax + bounds.yMin) / 2
       let xMin
       let xMax
       let yMin
       let yMax
-      if(ratioCanvas<ratio){
+      if (ratioCanvas < ratio) {
         //canvas wider
-        xMin=xCenter-height/(2*ratioCanvas)
-        xMax=xCenter+height/(2*ratioCanvas)
-        yMin=yCenter-height/2
-        yMax=yCenter+height/2
-
-      }else{
-        xMin=xCenter-width/2
-        xMax=xCenter+width/2
-        yMin=yCenter-(width*ratioCanvas/2)
-        yMax=yCenter+(width*ratioCanvas/2)
+        xMin = xCenter - height / (2 * ratioCanvas)
+        xMax = xCenter + height / (2 * ratioCanvas)
+        yMin = yCenter - height / 2
+        yMax = yCenter + height / 2
+      } else {
+        xMin = xCenter - width / 2
+        xMax = xCenter + width / 2
+        yMin = yCenter - (width * ratioCanvas) / 2
+        yMax = yCenter + (width * ratioCanvas) / 2
       }
-      return {xMin,xMax,yMin,yMax}
+      return { xMin, xMax, yMin, yMax }
     },
     animate() {
       this.render()
@@ -250,7 +266,7 @@ export default {
       } else {
         this.renderer.render(this.scene, this.camera)
       }
-    },
+    }
   },
   watch: {
     isReady: {
@@ -279,7 +295,8 @@ export default {
   width: 100%;
   height: 100%;
 }
-.canvas3DContainer > canvas {
+
+.canvas3DContainer>canvas {
   width: 100%;
   height: 100%;
 }

package/src/config.js

@@ -1,79 +1,153 @@
 import theme from './assets/theme'
-export const polygonCloseTolerance=15
+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 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},
+  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"},
+  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 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"],
+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.4
-export const node3dOpacity=0.3
-export const dimMarginColor='#ff000020'
-export const defaultTextureUrl=require('./assets/images/panels/reneSola_Virtus_2_JC320S_24_Bbw.png')
-const textureImageDomain='https://public-data.eturnity.io/'
+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.4
+export const node3dOpacity = 0.3
+export const dimMarginColor = '#ff000020'
+export const defaultTextureUrl = require('./assets/images/panels/reneSola_Virtus_2_JC320S_24_Bbw.png')
+const textureImageDomain = 'https://public-data.eturnity.io/'
 export const defaultTextureUrls = [
-  textureImageDomain+'textures/reneSola_Virtus_2_JC320S_24_Bbw.png',
-  textureImageDomain+'textures/longiSolarLR4_60HPH_370M.png',
-  textureImageDomain+'textures/longiSolarLR4_60HPH_350M.png',
+  textureImageDomain + 'textures/reneSola_Virtus_2_JC320S_24_Bbw.png',
+  textureImageDomain + 'textures/longiSolarLR4_60HPH_370M.png',
+  textureImageDomain + 'textures/longiSolarLR4_60HPH_350M.png'
 ]
 
 export const hitOption = {
@@ -82,7 +156,7 @@ export const hitOption = {
   fill: true,
   tolerance: 10
 }
-export const zoomFactor=Math.exp(Math.log(2)/10)
+export const zoomFactor = Math.exp(Math.log(2) / 10)
 export const hitOptionPolygonStrict = {
   segments: false,
   stroke: false,
@@ -102,5 +176,5 @@ export const hitOptionStroke = {
   tolerance: 2
 }
 
-export const dragHeightSensitivity=20
-export const snapLimit=100
+export const dragHeightSensitivity = 20
+export const snapLimit = 100