@eturnity/eturnity_3d 6.33.0-qa.3 → 6.34.0

package/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": "plugin:vue/vue3-essential",
+    "overrides": [
+    ],
+    "parserOptions": {
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+    },
+    "plugins": [
+        "vue"
+    ],
+    "rules": {
+    }
+}

package/package.json

@@ -1,16 +1,14 @@
 {
   "name": "@eturnity/eturnity_3d",
   "private": false,
-  "version": "6.33.0-qa.3",
+  "version": "6.34.0",
   "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",
-    "lint": "eslint --fix --ext .js,.vue ./src",
-    "prettier": "prettier --write \"**/*.{js,vue}\""
+    "build": "vue-cli-service build --skip-plugins @vue/cli-plugin-eslint"
   },
   "dependencies": {
-    "@eturnity/eturnity_maths": "6.33.0-qa.0",
+    "@eturnity/eturnity_maths": "6.34.0",
     "axios": "^1.3.2",
     "core-js": "^2.6.12",
     "cors": "^2.8.5",
@@ -34,7 +32,6 @@
     "@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",
@@ -42,8 +39,7 @@
     "eslint-plugin-vue": "5.2.3",
     "html-webpack-plugin": "^3.2.0",
     "webpack": "^4.46.0",
-    "webpack-cli": "^4.10.0",
-    "prettier": "2.8.4"
+    "webpack-cli": "^4.10.0"
   },
   "eslintConfig": {
     "root": true,
@@ -73,4 +69,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,14 +1,9 @@
 <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'
@@ -30,14 +25,14 @@ export default {
         1,
         1000
       ),
-      provider: null,
-      cameraProjection: 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 },
@@ -58,10 +53,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%'
@@ -72,13 +67,11 @@ export default {
     await this.loadPanelsTexture()
     this.renderGeometry()
     this.onWindowResize()
-    this.updateProjectionMaterials()
+    // 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
@@ -89,7 +82,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',
@@ -113,7 +106,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]
@@ -121,12 +114,9 @@ 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
@@ -163,8 +153,7 @@ 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,
@@ -172,17 +161,14 @@ 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)
 
@@ -206,7 +192,7 @@ export default {
         }
 
         const positionVector = addVector(polygonRef.meanPoint, cameraMoveVector)
-        if (flatRoof) positionVector.z += 3000
+        if(flatRoof) positionVector.z+=3000
         const position = [
           positionVector.x / 1000,
           positionVector.y / 1000 - 1,
@@ -220,32 +206,34 @@ 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 xCenter = (bounds.xMax + bounds.xMin) / 2
-      let yCenter = (bounds.yMax + bounds.yMin) / 2
+      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 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()
@@ -266,7 +254,7 @@ export default {
       } else {
         this.renderer.render(this.scene, this.camera)
       }
-    }
+    },
   },
   watch: {
     isReady: {

package/src/config.js

@@ -1,153 +1,79 @@
 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 = {
@@ -156,7 +82,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,
@@ -176,5 +102,5 @@ export const hitOptionStroke = {
   tolerance: 2
 }
 
-export const dragHeightSensitivity = 20
-export const snapLimit = 100
+export const dragHeightSensitivity=20
+export const snapLimit=100