Close #490 add canvasBackground option

mistic100 · Jan 22, 2021 · d49ab1f · d49ab1f
1 parent 87c3911
commit d49ab1f
Show file tree

Hide file tree

Showing 7 changed files with 57 additions and 5 deletions.
diff --git a/docs/.vuepress/components/Playground.vue b/docs/.vuepress/components/Playground.vue
@@ -39,6 +39,10 @@
     }
   }
 
+  .playground-container .el-tabs__content {
+    overflow: visible;
+  }
+
   .playground-container .md-title {
     margin: 2em 0 0 0;
   }
@@ -201,6 +205,14 @@
               Move inertia
             </md-checkbox>
           </div>
+          <div class="md-layout-item md-size-33">
+            <md-field>
+              <label>Canvas background</label>
+              <v-swatches shapes="circles" v-model="options.canvasBackground" :disabled="!imageData">
+                <md-input slot="trigger" :value="options.canvasBackground" :disabled="!imageData" readonly/>
+              </v-swatches>
+            </md-field>
+          </div>
         </div>
       </Tab>
 
@@ -227,6 +239,14 @@
       file     : null,
       imageData: null,
       options  : omit(cloneDeep(DEFAULTS), ['panorama', 'panoData', 'container', 'plugins', 'navbar', 'loadingImg']),
+      panoData : {
+        fullWidth    : null,
+        fullHeight   : null,
+        croppedWidth : null,
+        croppedHeight: null,
+        croppedX     : null,
+        croppedY     : null,
+      },
       navbar   : [
         { code: 'autorotate', label: DEFAULTS.lang.autorotate, enabled: true },
         { code: 'zoom', label: DEFAULTS.lang.zoom, enabled: true },
@@ -301,6 +321,7 @@
 
             image.onload = () => {
               this.imageData = image.src;
+              this.computePanoData(image.width, image.height);
               this.loadPsv();
               this.options.caption = null;
             };
@@ -316,8 +337,23 @@
         }
       },
 
+      computePanoData(width, height) {
+        const fullWidth = Math.max(width, height * 2);
+        const fullHeight = Math.round(fullWidth / 2);
+        const croppedX = Math.round((fullWidth - width) / 2);
+        const croppedY = Math.round((fullHeight - height) / 2);
+
+        this.panoData.fullWidth = fullWidth;
+        this.panoData.fullHeight = fullHeight;
+        this.panoData.croppedWidth = width;
+        this.panoData.croppedHeight = height;
+        this.panoData.croppedX = croppedX;
+        this.panoData.croppedY = croppedY;
+      },
+
       loadDefaultFile() {
         this.imageData = 'https://photo-sphere-viewer.js.org/assets/sphere.jpg';
+        this.computePanoData(6000, 3000);
         this.file = null;
         this.loadPsv();
         this.options.caption = 'Parc national du Mercantour <b>&copy; Damien Sorel</b>';
@@ -327,7 +363,7 @@
         if (this.imageData) {
           this.psv.overlay.hide();
 
-          this.psv.setPanorama(this.imageData);
+          this.psv.setPanorama(this.imageData, { panoData: this.panoData });
         }
         else {
           this.psv.overlay.show({

diff --git a/docs/.vuepress/enhanceApp.js b/docs/.vuepress/enhanceApp.js
@@ -1,11 +1,14 @@
-import { MdField, MdButton, MdCheckbox } from "vue-material/dist/components";
+import { MdButton, MdCheckbox, MdField } from 'vue-material/dist/components';
+import VSwatches from 'vue-swatches';
 import 'vue-material/dist/theme/default.css'
 import 'vue-material/dist/vue-material.min.css'
+import 'vue-swatches/dist/vue-swatches.css';
 
 export default ({ Vue, router }) => {
   Vue.use(MdField);
   Vue.use(MdButton);
   Vue.use(MdCheckbox);
+  Vue.component('v-swatches', VSwatches);
 
   router.beforeEach((to, from, next) => {
     if (/^\/api/.test(to.fullPath)) {

diff --git a/docs/guide/config.md b/docs/guide/config.md
@@ -261,6 +261,12 @@ panoData: (image) => ({
 })
 ```
 
+#### `canvasBackground`
+- type: `string`
+- default: `#000`
+
+Background of the canvas, which will be visible when using cropped panoramas.
+
 #### `moveInertia`
 - type: `boolean`
 - default: `true`

diff --git a/package.json b/package.json
@@ -76,6 +76,7 @@
     "stylelint-config-standard": "^20.0.0",
     "stylelint-scss": "^3.13.0",
     "vue-material": "^1.0.0-beta-11",
+    "vue-swatches": "^2.1.0",
     "vuepress": "^1.4.0",
     "vuepress-plugin-element-tabs": "^0.2.8"
   },

diff --git a/src/Viewer.js b/src/Viewer.js
@@ -578,6 +578,10 @@ export class Viewer extends EventEmitter {
           this.trigger(EVENTS.ZOOM_UPDATED, this.getZoomLevel());
           break;
 
+        case 'canvasBackground':
+          this.renderer.canvasContainer.style.background = this.config.canvasBackground;
+          break;
+
         default:
           break;
       }

diff --git a/src/data/config.js b/src/data/config.js
@@ -40,6 +40,7 @@ export const DEFAULTS = {
   touchmoveTwoFingers: false,
   useXmpData         : true,
   panoData           : null,
+  canvasBackground   : '#000',
   withCredentials    : false,
   navbar             : [
     'autorotate',
@@ -98,7 +99,7 @@ export const CONFIG_PARSERS = {
     }
     return container;
   },
-  defaultLong: (defaultLong) => {
+  defaultLong    : (defaultLong) => {
     // defaultLat is between 0 and PI
     return parseAngle(defaultLong);
   },

diff --git a/src/services/Renderer.js b/src/services/Renderer.js
@@ -62,10 +62,11 @@ export class Renderer extends AbstractService {
     /**
      * @member {HTMLElement}
      * @readonly
-     * @protected
+     * @package
      */
     this.canvasContainer = document.createElement('div');
     this.canvasContainer.className = 'psv-canvas-container';
+    this.canvasContainer.style.background = this.psv.config.canvasBackground;
     this.canvasContainer.style.cursor = this.psv.config.mousemove ? 'move' : 'default';
     this.psv.container.appendChild(this.canvasContainer);
 
@@ -223,7 +224,7 @@ export class Renderer extends AbstractService {
   __createScene() {
     this.raycaster = new THREE.Raycaster();
 
-    this.renderer = new THREE.WebGLRenderer();
+    this.renderer = new THREE.WebGLRenderer({ alpha: true });
     this.renderer.setSize(this.prop.size.width, this.prop.size.height);
     this.renderer.setPixelRatio(SYSTEM.pixelRatio);