Fix #626 make plugins init independant of order

docs/plugins/writing-a-plugin.md

@@ -9,6 +9,7 @@ The recommended way to create your own plugin is as an ES6 class extending `Abst
 **Requirements:**
 - The plugin class **must** take a `PSV.Viewer` object as first parameter and pass it to the `super` constructor.
 - It **must** have a `static id` property.
+- It **must** implement the `init` method to perform initialization, like subscribing to events.
 - It **must** implement the `destroy` method which is used to cleanup the plugin when the viewer is unloaded.
 - The constructor **can** take an `options` object as second parameter.
 
@@ -25,7 +26,9 @@ export class PhotoSphereViewerCustomPlugin extends AbstractPlugin {
 
   constructor(psv, options) {
     super(psv);
-
+  }
+
+  init() {
     // do your initialisation logic here
   }
 
@@ -203,7 +206,11 @@ export default class PhotoSphereViewerCustomPlugin extends AbstractPlugin {
     /**
      * @type {PSV.plugins.SettingsPlugin}
      */
-    this.settings = psv.getPlugin('settings');
+    this.settings = null;
+  }
+
+  init() {
+    this.settings = this.psv.getPlugin('settings');
 
     // the user may choose to not import the Settings plugin
     // you may choose to make it a requirement by throwing an error...

src/Viewer.js

@@ -250,6 +250,7 @@ export class Viewer extends EventEmitter {
     this.config.plugins.forEach(([plugin, opts]) => {
       this.plugins[plugin.id] = new plugin(this, opts); // eslint-disable-line new-cap
     });
+    each(this.plugins, plugin => plugin.init());
 
     // init buttons
     this.navbar.setButtons(this.config.navbar);

src/plugins/AbstractPlugin.js

@@ -33,6 +33,13 @@ export class AbstractPlugin extends EventEmitter {
     this.psv = psv;
   }
 
+  /**
+   * @summary Initializes the plugin
+   * @package
+   */
+  init() {
+  }
+
   /**
    * @summary Destroys the plugin
    * @package

src/plugins/autorotate-keypoints/index.js

@@ -62,7 +62,6 @@ export class AutorotateKeypointsPlugin extends AbstractPlugin {
     this.config = {
       startFromClosest: true,
       ...options,
-      keypoints       : null,
     };
 
     /**
@@ -74,10 +73,20 @@ export class AutorotateKeypointsPlugin extends AbstractPlugin {
      * @type {PSV.plugins.MarkersPlugin}
      * @private
      */
+    this.markers = null;
+  }
+
+  /**
+   * @package
+   */
+  init() {
+    super.init();
+
     this.markers = this.psv.getPlugin('markers');
 
-    if (options?.keypoints) {
-      this.setKeypoints(options.keypoints);
+    if (this.config.keypoints) {
+      this.setKeypoints(this.config.keypoints);
+      delete this.config.keypoints;
     }
 
     this.psv.on(CONSTANTS.EVENTS.AUTOROTATE, this);
@@ -93,7 +102,6 @@ export class AutorotateKeypointsPlugin extends AbstractPlugin {
 
     delete this.markers;
     delete this.keypoints;
-    delete this.state;
 
     super.destroy();
   }

src/plugins/compass/index.js

@@ -70,7 +70,7 @@ export class CompassPlugin extends AbstractPlugin {
      * @type {PSV.plugins.MarkersPlugin}
      * @private
      */
-    this.markers = this.psv.getPlugin('markers');
+    this.markers = null;
 
     /**
      * @member {HTMLElement}
@@ -90,27 +90,37 @@ export class CompassPlugin extends AbstractPlugin {
       this.container.style.marginLeft = `calc(-${this.config.size} / 2)`;
     }
 
+    /**
+     * @member {HTMLCanvasElement}
+     * @readonly
+     * @private
+     */
+    this.canvas = document.createElement('canvas');
+
+    this.container.appendChild(this.canvas);
+
     if (this.config.navigation) {
       this.container.addEventListener('mouseenter', this);
       this.container.addEventListener('mouseleave', this);
       this.container.addEventListener('mousemove', this);
       this.container.addEventListener('mousedown', this);
       this.container.addEventListener('mouseup', this);
     }
+  }
+
+  /**
+   * @package
+   */
+  init() {
+    super.init();
+
+    this.markers = this.psv.getPlugin('markers');
 
     this.psv.container.appendChild(this.container);
 
-    /**
-     * @member {HTMLCanvasElement}
-     * @readonly
-     * @private
-     */
-    this.canvas = document.createElement('canvas');
     this.canvas.width = this.container.clientWidth * SYSTEM.pixelRatio;
     this.canvas.height = this.container.clientWidth * SYSTEM.pixelRatio;
 
-    this.container.appendChild(this.canvas);
-
     this.psv.on(CONSTANTS.EVENTS.RENDER, this);
 
     if (this.markers) {

src/plugins/gyroscope/index.js

@@ -74,6 +74,13 @@ export class GyroscopePlugin extends AbstractPlugin {
      * @private
      */
     this.controls = null;
+  }
+
+  /**
+   * @package
+   */
+  init() {
+    super.init();
 
     this.psv.on(CONSTANTS.EVENTS.STOP_ALL, this);
     this.psv.on(CONSTANTS.EVENTS.BEFORE_ROTATE, this);
@@ -91,7 +98,6 @@ export class GyroscopePlugin extends AbstractPlugin {
     this.stop();
 
     delete this.controls;
-    delete this.prop;
 
     super.destroy();
   }

src/plugins/markers/index.js

@@ -61,15 +61,6 @@ export class MarkersPlugin extends AbstractPlugin {
   constructor(psv, options) {
     super(psv);
 
-    /**
-     * @member {HTMLElement}
-     * @readonly
-     */
-    this.container = document.createElement('div');
-    this.container.className = 'psv-markers';
-    this.container.style.cursor = this.psv.config.mousemove ? 'move' : 'default';
-    this.psv.container.appendChild(this.container);
-
     /**
      * @summary All registered markers
      * @member {Object<string, PSV.plugins.MarkersPlugin.Marker>}
@@ -99,6 +90,14 @@ export class MarkersPlugin extends AbstractPlugin {
       ...options,
     };
 
+    /**
+     * @member {HTMLElement}
+     * @readonly
+     */
+    this.container = document.createElement('div');
+    this.container.className = 'psv-markers';
+    this.container.style.cursor = this.psv.config.mousemove ? 'move' : 'default';
+
     /**
      * @member {SVGElement}
      * @readonly
@@ -112,16 +111,26 @@ export class MarkersPlugin extends AbstractPlugin {
     this.container.addEventListener('mouseleave', this, true);
     this.container.addEventListener('mousemove', this, true);
     this.container.addEventListener('contextmenu', this);
+  }
+
+  /**
+   * @package
+   */
+  init() {
+    super.init();
+
+    this.psv.container.appendChild(this.container);
 
     // Viewer events
     this.psv.on(CONSTANTS.EVENTS.CLICK, this);
     this.psv.on(CONSTANTS.EVENTS.DOUBLE_CLICK, this);
     this.psv.on(CONSTANTS.EVENTS.RENDER, this);
     this.psv.on(CONSTANTS.EVENTS.CONFIG_CHANGED, this);
 
-    if (options?.markers) {
+    if (this.config.markers) {
       this.psv.once(CONSTANTS.EVENTS.READY, () => {
-        this.setMarkers(options.markers);
+        this.setMarkers(this.config.markers);
+        delete this.config.markers;
       });
     }
   }
@@ -147,7 +156,6 @@ export class MarkersPlugin extends AbstractPlugin {
     delete this.svgContainer;
     delete this.markers;
     delete this.container;
-    delete this.prop;
 
     super.destroy();
   }

src/plugins/resolution/index.js

@@ -48,20 +48,7 @@ export class ResolutionPlugin extends AbstractPlugin {
      * @readonly
      * @private
      */
-    this.settings = psv.getPlugin('settings');
-
-    if (!this.settings) {
-      throw new PSVError('Resolution plugin requires the Settings plugin');
-    }
-
-    this.settings.addSetting({
-      id     : ResolutionPlugin.id,
-      type   : 'options',
-      label  : this.psv.config.lang.resolution,
-      current: () => this.prop.resolution,
-      options: () => this.__getSettingsOptions(),
-      apply  : resolution => this.setResolution(resolution),
-    });
+    this.settings = null;
 
     /**
      * @summary Available resolutions
@@ -85,10 +72,40 @@ export class ResolutionPlugin extends AbstractPlugin {
       resolution: null,
     };
 
+    /**
+     * @type {PSV.plugins.ResolutionPlugin.Options}
+     */
+    this.config = {
+      ...options,
+    };
+  }
+
+  /**
+   * @package
+   */
+  init() {
+    super.init();
+
+    this.settings = this.psv.getPlugin('settings');
+
+    if (!this.settings) {
+      throw new PSVError('Resolution plugin requires the Settings plugin');
+    }
+
+    this.settings.addSetting({
+      id     : ResolutionPlugin.id,
+      type   : 'options',
+      label  : this.psv.config.lang.resolution,
+      current: () => this.prop.resolution,
+      options: () => this.__getSettingsOptions(),
+      apply  : resolution => this.setResolution(resolution),
+    });
+
     this.psv.on(CONSTANTS.EVENTS.PANORAMA_LOADED, this);
 
-    if (options?.resolutions) {
-      this.setResolutions(options.resolutions);
+    if (this.config.resolutions) {
+      this.setResolutions(this.config.resolutions);
+      delete this.config.resolutions;
     }
   }
 

src/plugins/settings/index.js

@@ -64,10 +64,19 @@ export class SettingsPlugin extends AbstractPlugin {
     this.settings = [];
   }
 
+  /**
+   * @package
+   */
+  init() {
+    super.init();
+  }
+
   /**
    * @package
    */
   destroy() {
+    delete this.settings;
+
     super.destroy();
   }