mapillary · oscarlorentzon · Jan 13, 2021 · Dec 23, 2020 · Dec 23, 2020 · Dec 26, 2020
diff --git a/debug/spatial.html b/debug/spatial.html
@@ -16,32 +16,17 @@
         }
 
         html,
-        body {
+        body,
+        #mly {
             width: 100%;
             height: 100%;
         }
-
-        #mly {
-            width: 90%;
-            height: 90%;
-        }
     </style>
 </head>
 
 <body>
     <div id="mly"></div>
-    <select name="visualization" id="visualization">
-        <option value="default">Default</option>
-        <option value="mergecc">CC</option>
-        <option value="cluster">Cluster</option>
-        <option value="sequence">Sequence</option>
-    </select>
-    <button onclick="toggleSetting('earthControls')">Earth</button>
-    <button onclick="toggleSetting('pointsVisible')">Points</button>
-    <button onclick="toggleSetting('camerasVisible')">Cameras</button>
-    <button onclick="toggleSetting('positionsVisible')">Positions</button>
-    <button onclick="toggleSetting('tilesVisible')">Tiles</button>
-    <button onclick="toggleImages()">Images</button>
+
     <script>
         const viewer = new Mapillary.Viewer({
             apiClient: "QjI1NnU0aG5FZFZISE56U3R5aWN4ZzpkYzg0NzE3MDA0YTRhZjlh",
@@ -53,41 +38,71 @@
         window.addEventListener("resize", function () { viewer.resize(); });
 
         const spatial = viewer.getComponent("spatialData");
+        const s = Object.assign(
+            {},
+            spatial.defaultConfiguration,
+            { imagesVisible: true });
 
-        document
-            .getElementById("visualization")
-            .addEventListener("change", (event) => {
-                const cvms = Mapillary.SpatialDataComponent.CameraVisualizationMode;
-                let mode;
-                switch (event.target.value) {
-                    case "mergecc": mode = cvms.ConnectedComponent; break;
-                    case "cluster": mode = cvms.Cluster; break;
-                    case "sequence": mode = cvms.Sequence; break;
-                    default: mode = cvms.Default; break;
-                }
-                spatial.configure({ cameraVisualizationMode: mode });
-            });
+        const mode = Mapillary.SpatialDataComponent.CameraVisualizationMode;
+        const none = mode.Default;
+        const cluster = mode.Cluster;
+        const connectedComponent = mode.ConnectedComponent;
+        const sequence = mode.Sequence;
+
+        const modeRotation = {};
+        modeRotation[none] = cluster;
+        modeRotation[cluster] = connectedComponent;
+        modeRotation[connectedComponent] = sequence;
+        modeRotation[sequence] = none;
 
-        const s = {
-            camerasVisible: false,
-            earthControls: false,
-            imagesVisible: true,
-            pointsVisible: true,
-            positionsVisible: false,
-            tilesVisible: false,
+        function toggleImages() {
+            s.imagesVisible = !s.imagesVisible;
+            if (s.imagesVisible) { viewer.activateComponent("imagePlane"); }
+            else { viewer.deactivateComponent("imagePlane"); }
         }
 
-        function toggleSetting(name) {
+        function rotateCvm() {
+            s.cameraVisualizationMode = modeRotation[s.cameraVisualizationMode];
+            configure("cameraVisualizationMode");
+        }
+
+        function toggleBooleanSetting(name) {
             s[name] = !s[name];
+            configure(name);
+        }
+
+        function changeSize(name, coeff) {
+            s[name] *= coeff;
+            s[name] = Math.max(0.01, Math.min(1, s[name]));
+            configure(name);
+        }
+
+        function configure(name) {
             const c = {}; c[name] = s[name];
             spatial.configure(c);
         }
 
-        function toggleImages() {
-            s.imagesVisible = !s.imagesVisible;
-            if (s.imagesVisible) { viewer.activateComponent("imagePlane"); }
-            else { viewer.deactivateComponent("imagePlane"); }
-        }
+        window.document.addEventListener(
+            "keydown",
+            e => {
+                let name = undefined;
+                switch (e.key) {
+                    case 'c': name = 'camerasVisible'; break;
+                    case 'e': name = 'earthControls'; break;
+                    case 'p': name = 'pointsVisible'; break;
+                    case 'o': name = 'positionsVisible'; break;
+                    case 't': name = 'tilesVisible'; break;
+                    case 'i': toggleImages(); break;
+                    case 'v': rotateCvm(); break;
+                    case 'q': changeSize('pointSize', 0.9); break;
+                    case 'w': changeSize('pointSize', 1.1); break;
+                    case 'a': changeSize('cameraSize', 0.9); break;
+                    case 's': changeSize('cameraSize', 1.1); break;
+                    default: break;
+                }
+
+                if (!!name) { toggleBooleanSetting(name); }
+            });
     </script>
 </body>
 

diff --git a/spec/component/spatialData/SpatialDataComponent.spec.ts b/spec/component/spatialData/SpatialDataComponent.spec.ts
@@ -1,11 +1,7 @@
-import {of as observableOf, Observable, ReplaySubject, Subject, VirtualTimeScheduler} from "rxjs";
+import SpatialDataComponent from "../../../src/component/spatialdata/SpatialDataComponent";
 
-import {
-    SpatialDataComponent,
-} from "../../../src/Component";
-
-import {ContainerMockCreator} from "../../helper/ContainerMockCreator.spec";
-import {NavigatorMockCreator} from "../../helper/NavigatorMockCreator.spec";
+import { ContainerMockCreator } from "../../helper/ContainerMockCreator.spec";
+import { NavigatorMockCreator } from "../../helper/NavigatorMockCreator.spec";
 
 describe("SpatialDataComponent.ctor", () => {
     it("should be defined", () => {

diff --git a/spec/helper/MouseServiceMockCreator.spec.ts b/spec/helper/MouseServiceMockCreator.spec.ts
@@ -1,7 +1,7 @@
-import {Subject} from "rxjs";
+import { Subject } from "rxjs";
 
-import {MockCreator} from "./MockCreator.spec";
-import {MockCreatorBase} from "./MockCreatorBase.spec";
+import { MockCreator } from "./MockCreator.spec";
+import { MockCreatorBase } from "./MockCreatorBase.spec";
 import {
     MouseService,
 } from "../../src/Viewer";
@@ -25,6 +25,8 @@ export class MouseServiceMockCreator extends MockCreatorBase<MouseService> {
         this._mockProperty(mock, "mouseDrag$", new Subject<MouseEvent>());
         this._mockProperty(mock, "mouseDragEnd$", new Subject<MouseEvent>());
         this._mockProperty(mock, "mouseDragStart$", new Subject<MouseEvent>());
+        this._mockProperty(mock, "mouseEnter$", new Subject<MouseEvent>());
+        this._mockProperty(mock, "mouseLeave$", new Subject<MouseEvent>());
         this._mockProperty(mock, "mouseMove$", new Subject<MouseEvent>());
         this._mockProperty(mock, "mouseOut$", new Subject<MouseEvent>());
         this._mockProperty(mock, "mouseOver$", new Subject<MouseEvent>());
@@ -33,6 +35,8 @@ export class MouseServiceMockCreator extends MockCreatorBase<MouseService> {
         this._mockProperty(mock, "proximateClick$", new Subject<MouseEvent>());
         this._mockProperty(mock, "staticClick$", new Subject<MouseEvent>());
 
+        this._mockProperty(mock, "windowBlur$", new Subject<FocusEvent>());
+
         return mock;
     }
 }

diff --git a/src/component/interfaces/ISpatialDataConfiguration.ts b/src/component/interfaces/ISpatialDataConfiguration.ts
@@ -7,36 +7,52 @@ import { CameraVisualizationMode } from "../spatialdata/SpatialDataExport";
  * @interface
  * @example
  * ```
- * var viewer = new Mapillary.Viewer('<element-id>', '<client-id>', '<image-key>',
- *     {
- *         component: {
- *             spatialData: {
- *                 camerasVisible: true,
- *                 connectedComponents: true,
- *                 earthControls: true,
- *                 pointsVisible: false,
- *                 positionsVisible: true,
- *                 tilesVisible: true,
- *             },
+ * var mode = Mapilary.SpatialDataComponent.CameraVisualizationMode;
+ * var viewer = new Mapillary.Viewer({
+ *     ...
+ *     component: {
+ *         spatialData: {
+ *             cameraSize: 0.5,
+ *             camerasVisible: true,
+ *             cameraVisualizationMode: mode.Cluster,
+ *             earthControls: true,
+ *             pointSize: 0.5,
+ *             pointsVisible: false,
+ *             positionsVisible: true,
+ *             tilesVisible: true,
  *         },
- *     })
+ *     },
+ *     ...
+ * });
  * ```
  */
 export interface ISpatialDataConfiguration extends IComponentConfiguration {
+    /**
+     * The camera size on the interval [0.01, 1].
+     *
+     * @default 0.1
+     */
+    cameraSize?: number;
+
     /**
      * Specify if the cameras should be visible or not.
      *
      * @default false
      */
     camerasVisible?: boolean;
-
     /**
      * Specify the camera visualization mode.
      *
      * @default CameraVisualizationMode.Default
      */
     cameraVisualizationMode?: CameraVisualizationMode;
 
+    /**
+     * @deprecated Deprecated since v2.19.0. Use cameraVisualizationMode
+     * property instead.
+     */
+    connectedComponents?: boolean;
+
     /**
      * Specify if the camera should be controlled in earth
      * mode.
@@ -45,14 +61,15 @@ export interface ISpatialDataConfiguration extends IComponentConfiguration {
      * may be removed in a future minor release.
      *
      * @default false
-     * @ignore
      */
     earthControls?: boolean;
 
     /**
-     * @deprecated since v2.19.0
+     * The point size on the interval [0.01, 1].
+     *
+     * @default 0.1
      */
-    connectedComponents?: boolean;
+    pointSize?: number;
 
     /**
      * Specify if the points should be visible or not.