fixed image preview sizes

src/App.vue

@@ -343,14 +343,14 @@ export default {
             this.controls.lat = 0
             switch (vnode.face) {
               case 'left':
-                toPos.x += 4
+                toPos.x += 1.5
                 this.controls.lon = 180
                 break
               // case 'back':
               //   toPos.z += 4
               //   break
               case 'right':
-                toPos.x -= 4
+                toPos.x -= 1.5
                 this.controls.lon = 0
                 break
               // case 'front':

src/components/objects/ContentBlock.vue

@@ -149,22 +149,19 @@ export default {
     }
 
     if (this.preview_img_url) {
+      // this.size.x = this.projWall.winW * this.contents_size_factor
+      // this.size.y = this.projWall.winH * this.contents_size_factor
+
+      // get the right size depending on screen
+      let u
+      if (window.innerWidth > window.innerHeight) {
+        u = window.innerHeight / window.innerWidth
+      } else {
+        u = window.innerWidth / window.innerHeight
+      }
       this.size.x = this.projWall.winW * this.contents_size_factor
-      this.size.y = this.projWall.winY * this.contents_size_factor
-      // console.log('ContentBlock created', this.data)
-      // let txtcolor = '#000000'
-      // switch (this.type) {
-      //   case 'visible':
-      //     txtcolor = '#0000ff'
-      //     break
-      //   case 'context':
-      //     txtcolor = '#ff0000'
-      //     break
-      //   case 'process':
-      //     txtcolor = '#00ff00'
-      //     break
-      //   default:
-      // }
+      this.size.y = this.projWall.winH * u * this.contents_size_factor
+      // console.log(`windowW :${window.innerWidth}, windowH :${window.innerHeight}, winW : ${this.projWall.winW}, winH : ${this.projWall.winH}, size.x :${this.size.x}, size.y :${this.size.y}`)
 
       // this.label_canvas = this.createLabelCanvas(this.data.Name.replace(/ /g, '\n').toUpperCase(), 60, 150, txtcolor)
       //
@@ -256,10 +253,21 @@ export default {
       this.createImgCanvas(this.preview_img_url)
         .then(({ img, canvas }) => {
           // console.log('THEN img loaded ok', this, img, canvas)
-          let f = this.size.x / canvas.width
-          this.img_size.x = canvas.width * f - this.img_padding * 2
-          this.img_size.y = this.size.y = canvas.height * f - this.img_padding * 2
-          console.log(`size.x :${this.size.x}, canvas.width: ${canvas.width}, canvas.height: ${canvas.height}, f: ${f}, img_size.x: ${this.img_size.x}, img_size.y: ${this.img_size.y}`)
+          // canvas is way bigger than displayable for good resolution
+          // reduce it keeping good resolution
+          // and fit the width and height to the screen
+          let f
+          if (canvas.width >= canvas.height) {
+            f = this.size.x / canvas.width
+            this.img_size.x = canvas.width * f - this.img_padding * 2
+            this.img_size.y = this.size.y = canvas.height * f - this.img_padding * 2
+          } else {
+            f = this.size.y / canvas.height
+            this.img_size.y = canvas.height * f - this.img_padding * 2
+            this.img_size.x = this.size.x = canvas.width * f - this.img_padding * 2
+          }
+          console.log(`size.x :${this.size.x}, size.y :${this.size.y}, canvas.width: ${canvas.width}, canvas.height: ${canvas.height}, f: ${f}, img_size.x: ${this.img_size.x}, img_size.y: ${this.img_size.y}`)
+
           this.img_position.y = this.position.y - this.size.y / 2 - this.img_size.y / 2
           switch (this.face) {
             case 'left':