@vcmap/core 5.0.0-rc.1 → 5.0.0-rc.12

package/src/{vcs/vcm/util → util}/mapCollection.js

@@ -1,6 +1,6 @@
-import { checkMaybe } from '@vcsuite/check';
+import { check, checkMaybe } from '@vcsuite/check';
 import { getLogger } from '@vcsuite/logger';
-import VcsEvent from '../event/vcsEvent.js';
+import VcsEvent from '../vcsEvent.js';
 import Collection from './collection.js';
 import EventHandler from '../interaction/eventHandler.js';
 import LayerCollection from './layerCollection.js';
@@ -15,7 +15,7 @@ import SplitScreen from './splitScreen.js';
 
 /**
  * @param {import("@vcmap/core").CesiumMap} cesiumMap
- * @param {import("@vcmap/core").Openlayers} olMap
+ * @param {import("@vcmap/core").OpenlayersMap} olMap
  * @returns {Promise<void>}
  */
 async function setCesiumToOLViewpoint(cesiumMap, olMap) {
@@ -42,7 +42,6 @@ async function setCesiumToOLViewpoint(cesiumMap, olMap) {
 
 /**
  * @class
- * @export
  * @extends {Collection<import("@vcmap/core").VcsMap>}}
  */
 // ignored do to static issues, see https://github.com/microsoft/TypeScript/issues/4628
@@ -83,6 +82,13 @@ class MapCollection extends Collection {
      */
     this._target = null;
 
+    /**
+     * if the active map is removed the last viewpoint is cached for the next mapActivation.
+     * @type {import("@vcmap/core").ViewPoint}
+     * @private
+     */
+    this._cachedViewpoint = null;
+
     /**
      * The map pointer event handler. The EventHandler is shared amongst all maps within the collection.
      * @type {EventHandler}
@@ -94,9 +100,8 @@ class MapCollection extends Collection {
      * Collection of layers shared amongst the maps within this collection,
      * layers will be rendered if supported on the currently active map.
      * @type {LayerCollection}
-     * @api
      */
-    this.layerCollection = new LayerCollection();
+    this._layerCollection = new LayerCollection();
 
     /**
      * Called, if a map fails to initialize. The map causing the error will be removed from the collection.
@@ -125,12 +130,13 @@ class MapCollection extends Collection {
      * @type {ClippingObjectManager}
      * @api
      */
-    this.clippingObjectManager = new ClippingObjectManager(this.layerCollection);
+    this.clippingObjectManager = new ClippingObjectManager(this._layerCollection);
 
     /**
      * @type {SplitScreen}
+     * @private
      */
-    this.splitScreen = new SplitScreen(this.clippingObjectManager);
+    this._splitScreen = new SplitScreen(this.clippingObjectManager);
 
     /**
      * @type {Array<Function>}
@@ -157,6 +163,48 @@ class MapCollection extends Collection {
     return this._target;
   }
 
+  /**
+   * The current layer collection
+   * @type {LayerCollection}
+   */
+  get layerCollection() {
+    return this._layerCollection;
+  }
+
+  /**
+   * Set the layer collection for these maps.
+   * @param {LayerCollection} layerCollection
+   */
+  set layerCollection(layerCollection) {
+    check(layerCollection, LayerCollection);
+
+    this._layerCollection = layerCollection;
+    this._array.forEach((map) => {
+      map.layerCollection = this._layerCollection;
+    });
+  }
+
+  /**
+   * The current split screen
+   * @type {SplitScreen}
+   */
+  get splitScreen() {
+    return this._splitScreen;
+  }
+
+  /**
+   * Set split screen for these maps.
+   * @param {SplitScreen} splitScreen
+   */
+  set splitScreen(splitScreen) {
+    check(splitScreen, SplitScreen);
+
+    this._splitScreen = splitScreen;
+    this._array.forEach((map) => {
+      map.splitScreen = this._splitScreen;
+    });
+  }
+
   /**
    * Adds a map to the collection. This will set the collections target, {@link SplitScreen}
    * and the collections {@link LayerCollection} on the map.
@@ -169,28 +217,33 @@ class MapCollection extends Collection {
     if (added !== null) {
       this._mapPointerListeners
         .push(map.pointerInteractionEvent.addEventListener(this.eventHandler.handleMapEvent.bind(this.eventHandler)));
-      map.layerCollection = this.layerCollection;
-      map.splitScreen = this.splitScreen;
+      map.layerCollection = this._layerCollection;
+      map.splitScreen = this._splitScreen;
       map.setTarget(this._target);
     }
     return added;
   }
 
   /**
-   * Removes the map from the collection. Will also set splitScreen & target to null and an empty layerCollection on the map,
-   * if the map is currently part of the collection.
    * @param {import("@vcmap/core").VcsMap} map
+   * @returns {number}
+   * @protected
    */
-  remove(map) {
+  _remove(map) {
+    if (this._activeMap === map) {
+      this._cachedViewpoint = map.getViewPointSync();
+      if (this._target) {
+        const mapClassName = this._activeMap.className.split('.').pop();
+        this._target.classList.remove(mapClassName);
+      }
+      this._activeMap = null;
+    }
     if (this.has(map)) {
       map.setTarget(null);
       map.splitScreen = null;
       map.layerCollection = new LayerCollection();
     }
-    super.remove(map);
-    if (this._activeMap === map) {
-      this._activeMap = null;
-    }
+    return super._remove(map);
   }
 
   /**
@@ -245,7 +298,7 @@ class MapCollection extends Collection {
   _getFallbackMapOrDefault(map) {
     const fallbackMap = this._getFallbackMap(map);
     return fallbackMap ||
-      this.getByType('vcs.vcm.maps.Openlayers')[0] ||
+      this.getByType('OpenlayersMap')[0] ||
       this._array[0];
   }
 
@@ -259,25 +312,25 @@ class MapCollection extends Collection {
   async setActiveMap(mapName) {
     const map = this.getByKey(mapName);
     if (!map) {
-      getLogger('vcs.vcm.util.MapCollection').warning(`could not find map with name ${mapName}`);
+      getLogger('MapCollection').warning(`could not find map with name ${mapName}`);
       return Promise.resolve();
     }
 
     if (
       this._activeMap &&
-      this._activeMap.className === 'vcs.vcm.maps.Cesium' &&
-      map.className === 'vcs.vcm.maps.Openlayers'
+      this._activeMap.className === 'CesiumMap' &&
+      map.className === 'OpenlayersMap'
     ) {
       await setCesiumToOLViewpoint(
         /** @type {import("@vcmap/core").CesiumMap} */ (this._activeMap),
-        /** @type {import("@vcmap/core").Openlayers} */ (map),
+        /** @type {import("@vcmap/core").OpenlayersMap} */ (map),
       );
     }
 
     try {
       await map.initialize();
     } catch (error) { // typically unsupported webGL and cesium map
-      getLogger('vcs.vcm.util.MapCollection').error(error);
+      getLogger('MapCollection').error(error);
       this.remove(map);
       const fallbackMap = this._getFallbackMapOrDefault(map);
       this.initializeError.raiseEvent({
@@ -292,12 +345,13 @@ class MapCollection extends Collection {
     }
 
     let viewpoint;
-    if (this._activeMap) {
+    if (this._activeMap || this._cachedViewpoint) {
       if (this._activeMap === map) {
         return map.activate();
       }
 
-      viewpoint = await this._activeMap.getViewPoint();
+      viewpoint = this._activeMap ? await this._activeMap.getViewPoint() : this._cachedViewpoint;
+
       const canShow = await map.canShowViewpoint(viewpoint);
       if (!canShow) {
         const fallbackMap = this._getFallbackMap(map);
@@ -306,10 +360,13 @@ class MapCollection extends Collection {
           return this.setActiveMap(fallbackMap.name);
         }
       }
-      this._activeMap.deactivate();
-      if (this._target) {
-        const mapClassName = this._activeMap.className.split('.').pop();
-        this._target.classList.remove(mapClassName);
+      this._cachedViewpoint = null;
+      if (this._activeMap) {
+        this._activeMap.deactivate();
+        if (this._target) {
+          const mapClassName = this._activeMap.className.split('.').pop();
+          this._target.classList.remove(mapClassName);
+        }
       }
     }
 
@@ -322,7 +379,7 @@ class MapCollection extends Collection {
     }
 
     this.clippingObjectManager.mapActivated(map);
-    this.splitScreen.mapActivated(map);
+    this._splitScreen.mapActivated(map);
     this.mapActivated.raiseEvent(map);
     return Promise.resolve();
   }
@@ -342,14 +399,14 @@ class MapCollection extends Collection {
    */
   destroy() {
     super.destroy();
-    [...this.layerCollection].forEach((l) => { l.destroy(); });
-    this.layerCollection.destroy();
+    [...this._layerCollection].forEach((l) => { l.destroy(); });
+    this._layerCollection.destroy();
     this.eventHandler.destroy();
     this.mapActivated.destroy();
     this.clippingObjectManager.destroy();
     this.clippingObjectManager = null;
-    this.splitScreen.destroy();
-    this.splitScreen = null;
+    this._splitScreen.destroy();
+    this._splitScreen = null;
     this.fallbackMapActivated.destroy();
     this.initializeError.destroy();
 

package/src/util/overrideCollection.js

@@ -0,0 +1,223 @@
+/* eslint no-underscore-dangle: ["error", { "allow": ["_array"] }] */
+// eslint-disable-next-line max-classes-per-file
+import { check } from '@vcsuite/check';
+import { getLogger as getLoggerByName } from '@vcsuite/logger';
+import { contextIdSymbol } from '../vcsAppContextHelpers.js';
+import Collection from './collection.js';
+import VcsEvent from '../vcsEvent.js';
+
+/**
+ * @returns {import("@vcsuite/logger").Logger}
+ */
+function getLogger() {
+  return getLoggerByName('OverrideCollection');
+}
+
+/**
+ * The override collection adds the ability to override a unique item and re-creating it, should the override
+ * be removed. This does change some flow of called events. 1) if you override an item, removed is not called for the
+ * removed current item. 2) added can be called more the once for the same unique id. 3) replaced is called for items
+ * which where replaced. replaced is called after added has been called for the item.
+ * @interface OverrideCollectionInterface
+ * @property {import("@vcmap/core").VcsEvent<T>} replaced - replaced is called after added
+ * @property {function(T):T|null} override - returns the overriden item or null if the item could not be inserted (this would be the result of a race condition)
+ * @property {Map<string, Array<Object>>} shadowMap
+ * @property {function(Array<Object>, string):Promise<void>} parseItems
+ * @property {function(string):Promise<void>} removeContext
+ * @property {function(string):Array<Object>} serializeContext
+ * @template {*} T
+ */
+
+/**
+ * A symbol added to override collections.
+ * @type {symbol}
+ */
+export const isOverrideCollection = Symbol('OverrideCollection');
+
+/**
+ * @param {Collection<T>} collection
+ * @param {function():string} getDynamicContextId - function to get the current dynamic context id
+ * @param {(function(T):Object)=} serializeItem - optional function to serialize an item, defaults to returning item.toJSON or item: i => (i.toJSON || i)
+ * @param {(function(Object):(T|Promise<T>))=} deserializeItem - optional deserialization function. defaults to returning the passed object: i => i
+ * @param {*=} ctor - optional constructor to validate deserialized items against. if passed, deserializeItem must be an instance of ctor.
+ * @param {(function(T, (T|null|undefined), (number|undefined)):number|null)=} determineShadowIndex - return the index where a shadow should be inserted. only has relevance, if the collection is indexed. previous and current index may be null.
+ * @template {*} T
+ * @returns {OverrideCollection<T>}
+ */
+function makeOverrideCollection(
+  collection,
+  getDynamicContextId,
+  serializeItem,
+  deserializeItem,
+  ctor,
+  determineShadowIndex,
+) {
+  check(collection, Collection);
+
+  const overrideCollection = /** @type {OverrideCollection<T>} */ (collection);
+  if (overrideCollection[isOverrideCollection]) {
+    throw new Error('Cannot transform collection, collection already is an OverrideCollection');
+  }
+  overrideCollection[isOverrideCollection] = true;
+
+  const deserialize = deserializeItem || (i => i);
+  // @ts-ignore
+  const serialize = serializeItem || (i => (i.toJSON ? i.toJSON() : i));
+  const getShadowIndex = determineShadowIndex || ((item, shadow, currentIndex) => currentIndex);
+
+  /**
+   * @type {Map<string, Array<Object>>}
+   */
+  overrideCollection.shadowMap = new Map();
+
+  /**
+   * @param {T} item
+   * @returns {T|null}
+   */
+  overrideCollection.override = function override(item) {
+    let shadow;
+    let index;
+    const itemId = item[overrideCollection.uniqueKey];
+
+    if (overrideCollection.hasKey(itemId)) {
+      shadow = overrideCollection.getByKey(itemId);
+
+      // @ts-ignore
+      // eslint-disable-next-line no-underscore-dangle
+      index = overrideCollection._remove(shadow);
+
+      if (!overrideCollection.shadowMap.has(itemId)) {
+        overrideCollection.shadowMap.set(itemId, []);
+      }
+      const shadowsArray = overrideCollection.shadowMap.get(itemId);
+      const serializedShadow = serialize(shadow);
+      // @ts-ignore
+      if (shadow.destroy) {
+        // @ts-ignore
+        shadow.destroy();
+      }
+      serializedShadow[contextIdSymbol] = shadow[contextIdSymbol];
+      shadowsArray.push(serializedShadow);
+    }
+
+    const usedIndex = shadow ? getShadowIndex(shadow, item, index) : null;
+    if (shadow) {
+      overrideCollection.replaced.raiseEvent(item);
+    }
+    // @ts-ignore
+    if (overrideCollection.add(item, usedIndex) >= 0) {
+      return item;
+    }
+    return null;
+  };
+
+  /**
+   * @param {Array<Object>} configArray
+   * @param {string} contextId
+   * @returns {Promise<void>}
+   */
+  overrideCollection.parseItems = async function parseItems(configArray, contextId) {
+    if (Array.isArray(configArray)) {
+      const instanceArray = await Promise.all(configArray.map(async (config) => {
+        const item = await deserialize(config);
+        if (!item || (ctor && !(item instanceof ctor))) {
+          getLogger().warning(`Could not load item ${config[overrideCollection.uniqueKey]} of type ${config.type}`);
+          return null;
+        }
+        item[contextIdSymbol] = contextId;
+        return item;
+      }));
+      instanceArray
+        .filter(i => i)
+        .forEach((i) => { overrideCollection.override(i); });
+    }
+  };
+
+  overrideCollection.removed.addEventListener(async (item) => {
+    const itemId = item[overrideCollection.uniqueKey];
+
+    if (overrideCollection.shadowMap.has(itemId)) {
+      const serializedShadow = overrideCollection.shadowMap.get(itemId).pop();
+      if (serializedShadow) {
+        const reincarnation = await deserialize(serializedShadow);
+        reincarnation[contextIdSymbol] = serializedShadow[contextIdSymbol];
+        // @ts-ignore
+        const index = getShadowIndex(reincarnation, item, item[overrideCollection.previousIndexSymbol]);
+        // @ts-ignore
+        overrideCollection.add(reincarnation, index);
+      }
+
+      if (overrideCollection.shadowMap.get(itemId).length === 0) {
+        overrideCollection.shadowMap.delete(itemId);
+      }
+    }
+  });
+
+  overrideCollection.added.addEventListener((item) => {
+    if (!item[contextIdSymbol]) {
+      item[contextIdSymbol] = getDynamicContextId();
+    }
+  });
+
+  /**
+   * @param {string} contextId
+   * @returns {Promise<void>}
+   */
+  overrideCollection.removeContext = async function removeContext(contextId) {
+    overrideCollection.shadowMap.forEach((shadowsArray, name) => {
+      const newShadowsArray = shadowsArray.filter(c => c[contextIdSymbol] !== contextId);
+      if (newShadowsArray.length === 0) {
+        overrideCollection.shadowMap.delete(name);
+      } else if (newShadowsArray.length !== shadowsArray.length) {
+        overrideCollection.shadowMap.set(name, newShadowsArray);
+      }
+    });
+
+    await Promise.all([...overrideCollection]
+      .filter(item => item[contextIdSymbol] === contextId)
+      .map(async (item) => {
+        overrideCollection.remove(item);
+        // @ts-ignore
+        if (item.destroy) {
+          // @ts-ignore
+          item.destroy();
+        }
+      }));
+  };
+
+  /**
+   * @type {VcsEvent<T>}
+   */
+  overrideCollection.replaced = new VcsEvent();
+
+  /**
+   * @param {string} contextId
+   * @returns {Array<Object>}
+   */
+  overrideCollection.serializeContext = function serializeContext(contextId) {
+    return [...overrideCollection]
+      .map((item) => {
+        if (item[contextIdSymbol] === contextId) {
+          return serialize(item);
+        }
+        if (overrideCollection.shadowMap.has(item[overrideCollection.uniqueKey])) {
+          return overrideCollection.shadowMap.get(item[overrideCollection.uniqueKey])
+            .find(i => i[contextIdSymbol] === contextId);
+        }
+        return null;
+      })
+      .filter(i => i);
+  };
+
+  const originalDestroy = overrideCollection.destroy.bind(overrideCollection);
+
+  overrideCollection.destroy = function destroy() {
+    originalDestroy();
+    overrideCollection.shadowMap.clear();
+    overrideCollection.replaced.destroy();
+  };
+
+  return overrideCollection;
+}
+
+export default makeOverrideCollection;

package/src/{vcs/vcm/util → util}/projection.js

@@ -1,27 +1,23 @@
 import { getTransform, get as getProjection, equivalent } from 'ol/proj.js';
 import { register } from 'ol/proj/proj4.js';
 import proj4 from 'proj4';
-import { getLogger as getLoggerByName } from '@vcsuite/logger';
 import { check } from '@vcsuite/check';
 
 /**
  * @typedef {Object} ProjectionOptions
+ * @property {string} [type]
  * @property {string|number} [epsg] -  EPSG of the projection, for example: "EPSG:4326" if not specified, uses the framework projection
  * @property {string|undefined|null} [proj4] - definition of the projection. See for example: {@link http://spatialreference.org/ref/epsg/4326/proj4/} proj4
  * @property {Array<string>|undefined|null} [alias] - aliases to define
+ * @property {string|undefined} [prefix='EPSG:'] - an alternate prefix to use for custom projection
  * @api stable
  */
-
-export const wgs84ToMercatorTransformer = getTransform('EPSG:4326', 'EPSG:3857');
-export const mercatorToWgs84Transformer = getTransform('EPSG:3857', 'EPSG:4326');
-
-
 /**
- * @returns {import("@vcsuite/logger").Logger}
+ * @typedef {function(Array<number>, Array<number>=, number=): Array<number>} CorrectTransformFunction
  */
-function getLogger() {
-  return getLoggerByName('vcs.vcm.util.Projection');
-}
+
+export const wgs84ToMercatorTransformer = /** @type {CorrectTransformFunction} */ (getTransform('EPSG:4326', 'EPSG:3857'));
+export const mercatorToWgs84Transformer = /** @type {CorrectTransformFunction} */ (getTransform('EPSG:3857', 'EPSG:4326'));
 
 /**
  * @type {ProjectionOptions}
@@ -36,7 +32,8 @@ let defaultProjectionOption = {
  * @returns {string}
  */
 function parseEPSGCode(value, prefix = 'EPSG:') {
-  const matches = `${value}`.match(/^(?:epsg:)?(\d+)/i);
+  const regex = new RegExp(`^(?:${prefix})?(\\d+)`, 'i');
+  const matches = `${value}`.match(regex);
   if (matches && matches[1]) {
     return `${prefix}${matches[1]}`;
   }
@@ -73,9 +70,11 @@ function validateProjectionOptions(options) {
  * @returns {ProjectionOptions} valid options
  */
 function registerProjection(options) {
-  const saneOptions = {};
+  const saneOptions = {
+    prefix: options.prefix,
+  };
   if (options.epsg) {
-    saneOptions.epsg = parseEPSGCode(options.epsg);
+    saneOptions.epsg = parseEPSGCode(options.epsg, options.prefix);
     if (saneOptions.epsg) {
       if (options.proj4) {
         saneOptions.proj4 = options.proj4;
@@ -99,7 +98,6 @@ function registerProjection(options) {
  * projection created prior to this functions call.
  * @param {ProjectionOptions} options
  * @api
- * @export
  */
 export function setDefaultProjectionOptions(options) {
   check(options, { epsg: [String, Number], proj4: [String, undefined, null] });
@@ -112,7 +110,6 @@ export function setDefaultProjectionOptions(options) {
 /**
  * Projection Class, if no valid options are given, the Projection will initialize with the Framework default Projection
  * @class
- * @export
  * For example:
  *     <pre><code>
  *         {
@@ -123,6 +120,11 @@ export function setDefaultProjectionOptions(options) {
  * @api stable
  */
 class Projection {
+  /**
+   * @returns {string}
+   */
+  static get className() { return 'Projection'; }
+
   /**
    * @param {ProjectionOptions} options
    */
@@ -143,6 +145,20 @@ class Projection {
     if (!this.proj) {
       this._epsg = Projection.parseEPSGCode(defaultProjectionOption.epsg);
     }
+
+    /**
+     * Cached for toJSON
+     * @type {Array<string>}
+     * @private
+     */
+    this._alias = saneOptions.alias;
+
+    /**
+     * Cached for toJSON
+     * @type {string}
+     * @private
+     */
+    this._prefix = saneOptions.prefix;
   }
 
   /**
@@ -174,16 +190,6 @@ class Projection {
     return getProjection(this.epsg);
   }
 
-  /**
-   * @returns {import("ol/proj/Projection").default}
-   * @api
-   * @deprecated 3.7
-   */
-  getProjection() {
-    getLogger().deprecate('getProjection', 'Access the property proj directly');
-    return this.proj;
-  }
-
   /**
    * @param {Projection} projection
    * @returns {boolean}
@@ -262,13 +268,20 @@ class Projection {
    * @returns {ProjectionOptions}
    * @api stable
    */
-  getConfigObject() {
+  toJSON() {
     const configObject = {
+      type: Projection.className,
       epsg: this.epsg,
     };
     if (this.proj4) {
       configObject.proj4 = this.proj4;
     }
+    if (Array.isArray(this._alias) && this._alias.length > 0) {
+      configObject.alias = this._alias.slice();
+    }
+    if (this._prefix) {
+      configObject.prefix = this._prefix;
+    }
     return configObject;
   }
 
@@ -326,7 +339,6 @@ export default Projection;
  * Returns the default Projection.
  * @api stable
  * @returns {Projection}
- * @export
  */
 export function getDefaultProjection() {
   return new Projection(defaultProjectionOption);
@@ -336,13 +348,11 @@ export function getDefaultProjection() {
  * wgs84 Projection EPSG Code: 4326
  * @api stable
  * @type {Projection}
- * @export
  */
 export const wgs84Projection = new Projection({ epsg: 4326 });
 /**
  * mercator Projection EPSG Code: 3857
  * @api stable
  * @type {Projection}
- * @export
  */
 export const mercatorProjection = new Projection({ epsg: 3857 });

package/src/{vcs/vcm/util → util}/splitScreen.js

@@ -4,13 +4,13 @@ import {
   Plane,
   ClippingPlane,
   ClippingPlaneCollection,
-  ImagerySplitDirection,
+  SplitDirection,
 } from '@vcmap/cesium';
 
 import { check } from '@vcsuite/check';
-import CesiumMap from '../maps/cesium.js';
+import CesiumMap from '../map/cesiumMap.js';
 import ClippingObject from './clipping/clippingObject.js';
-import Openlayers from '../maps/openlayers.js';
+import OpenlayersMap from '../map/openlayersMap.js';
 
 /**
  * @class
@@ -136,7 +136,7 @@ class SplitScreen {
       this.scene = map.getScene();
       this.olMap = null;
       this._targetsChanged();
-    } else if (map instanceof Openlayers) {
+    } else if (map instanceof OpenlayersMap) {
       this.scene = null;
       this.olMap = map.olMap;
     }
@@ -194,21 +194,21 @@ class SplitScreen {
 
   /**
    * Gets the clipping object for a split direction
-   * @param {import("@vcmap/cesium").ImagerySplitDirection} splitDirection
+   * @param {import("@vcmap/cesium").SplitDirection} splitDirection
    * @returns {ClippingObject|null}
    * @api
    */
   getClippingObjectForDirection(splitDirection) {
     check(splitDirection, [
-      ImagerySplitDirection.LEFT,
-      ImagerySplitDirection.RIGHT,
-      ImagerySplitDirection.NONE,
+      SplitDirection.LEFT,
+      SplitDirection.RIGHT,
+      SplitDirection.NONE,
     ]);
 
-    if (splitDirection === ImagerySplitDirection.LEFT) {
+    if (splitDirection === SplitDirection.LEFT) {
       return this.leftScreenClippingObject;
     }
-    if (splitDirection === ImagerySplitDirection.RIGHT) {
+    if (splitDirection === SplitDirection.RIGHT) {
       return this.rightScreenClippingObject;
     }