docs: include components and configurations in docs

Document bearing and zoom components and include in docs.
Include component size enum in public API.

src/Component.ts

@@ -4,6 +4,7 @@ export {HandlerBase} from "./component/utils/HandlerBase";
 export {MeshFactory} from "./component/utils/MeshFactory";
 export {MeshScene} from "./component/utils/MeshScene";
 export {MouseOperator} from "./component/utils/MouseOperator";
+export {ComponentSize} from "./component/utils/ComponentSize";
 export {AttributionComponent} from "./component/AttributionComponent";
 export {BackgroundComponent} from "./component/BackgroundComponent";
 export {BearingComponent} from "./component/BearingComponent";

src/Mapillary.ts

@@ -14,7 +14,10 @@ export {
     ImageSize,
     Viewer,
 } from "./Viewer";
-export {SliderMode} from "./Component";
+export {
+    SliderMode,
+    ComponentSize,
+} from "./Component";
 
 import * as TagComponent from "./component/tag/Tag";
 export {TagComponent};

src/component/BearingComponent.ts

@@ -6,7 +6,6 @@ import {Observable, Subscription, combineLatest as observableCombineLatest} from
 import {
     Component,
     ComponentService,
-    IComponentConfiguration,
 } from "../Component";
 import {
     Spatial, Transform, Geo,
@@ -26,6 +25,22 @@ import IBearingConfiguration from "./interfaces/IBearingConfiguration";
 import ISize from "../render/interfaces/ISize";
 import ComponentSize from "./utils/ComponentSize";
 
+/**
+ * @class BearingComponent
+ *
+ * @classdesc Component for indicating bearing and field of view.
+ *
+ * @example
+ * ```
+ * var viewer = new Mapillary.Viewer(
+ *     "<element-id>",
+ *     "<client-id>",
+ *     "<my key>");
+ *
+ * var bearingComponent = viewer.getComponent("bearing");
+ * bearingComponent.configure({ size: Mapillary.ComponentSize.Small });
+ * ```
+ */
 export class BearingComponent extends Component<IBearingConfiguration> {
     public static componentName: string = "bearing";
 

src/component/interfaces/interfaces.ts

@@ -1,3 +1,4 @@
+export {IBearingConfiguration} from "./IBearingConfiguration";
 export {ICacheConfiguration, ICacheDepth} from "./ICacheConfiguration";
 export {CoverState, ICoverConfiguration} from "./ICoverConfiguration";
 export {IDirectionConfiguration} from "./IDirectionConfiguration";
@@ -11,6 +12,7 @@ export {IComponentConfiguration} from "./IComponentConfiguration";
 export {ISequenceConfiguration} from "./ISequenceConfiguration";
 export {ISpatialDataConfiguration} from "./ISpatialDataConfiguration";
 export {ITagConfiguration} from "./ITagConfiguration";
+export {IZoomConfiguration} from "./IZoomConfiguration";
 export {IShader} from "./IShader";
 export * from "../imageplane/interfaces/interfaces";
 export * from "../marker/interfaces/interfaces";

src/component/utils/ComponentSize.ts

@@ -1,6 +1,27 @@
+/**
+ * Enumeration for component size.
+ * @enum {number}
+ * @readonly
+ * @description May be used by a component to allow for resizing
+ * of the UI elements rendered by the component.
+ */
 export enum ComponentSize {
+    /**
+     * Automatic size. The size of the elements will automatically
+     * change at a predefined threshold.
+     */
     Automatic,
+
+    /**
+     * Large size. The size of the elements will be fixed until another
+     * component size is configured.
+     */
     Large,
+
+    /**
+     * Small size. The size of the elements will be fixed until another
+     * component size is configured.
+     */
     Small,
 }
 

src/component/zoom/ZoomComponent.ts

@@ -6,7 +6,6 @@ import * as vd from "virtual-dom";
 import {
     ComponentService,
     Component,
-    IComponentConfiguration,
 } from "../../Component";
 import {
     Transform,
@@ -28,6 +27,22 @@ import IZoomConfiguration from "../interfaces/IZoomConfiguration";
 import ISize from "../../render/interfaces/ISize";
 import ComponentSize from "../utils/ComponentSize";
 
+/**
+ * @class ZoomComponent
+ *
+ * @classdesc Component rendering UI elements used for zooming.
+ *
+ * @example
+ * ```
+ * var viewer = new Mapillary.Viewer(
+ *     "<element-id>",
+ *     "<client-id>",
+ *     "<my key>");
+ *
+ * var zoomComponent = viewer.getComponent("zoom");
+ * zoomComponent.configure({ size: Mapillary.ComponentSize.Small });
+ * ```
+ */
 export class ZoomComponent extends Component<IZoomConfiguration> {
     public static componentName: string = "zoom";
 

src/viewer/interfaces/IComponentOptions.ts

@@ -1,4 +1,5 @@
 import {
+    IBearingConfiguration,
     ICacheConfiguration,
     IDirectionConfiguration,
     IKeyboardConfiguration,
@@ -9,6 +10,7 @@ import {
     ISliderConfiguration,
     ISpatialDataConfiguration,
     ITagConfiguration,
+    IZoomConfiguration,
 } from "../../Component";
 
 /**
@@ -36,7 +38,7 @@ export interface IComponentOptions {
      *
      * @default true
      */
-    bearing?: boolean;
+    bearing?: boolean | IBearingConfiguration;
 
     /**
      * Cache images around the current one.
@@ -195,7 +197,7 @@ export interface IComponentOptions {
      *
      * @default true
      */
-    zoom?: boolean;
+    zoom?: boolean | IZoomConfiguration;
 }
 
 export default IComponentOptions;

tsconfig.docs.json

@@ -3,6 +3,7 @@
     "files": [
         "./src/api/interfaces/IGPano.ts",
         "./src/api/interfaces/ILatLon.ts",
+        "./src/component/interfaces/IBearingConfiguration.ts",
         "./src/component/interfaces/ICacheConfiguration.ts",
         "./src/component/interfaces/IDirectionConfiguration.ts",
         "./src/component/interfaces/IKeyboardConfiguration.ts",
@@ -13,6 +14,7 @@
         "./src/component/interfaces/ISliderConfiguration.ts",
         "./src/component/interfaces/ISpatialDataConfiguration.ts",
         "./src/component/interfaces/ITagConfiguration.ts",
+        "./src/component/interfaces/IZoomConfiguration.ts",
         "./src/component/keyboard/KeyboardComponent.ts",
         "./src/component/keyboard/KeyPlayHandler.ts",
         "./src/component/keyboard/KeySequenceNavigationHandler.ts",
@@ -45,7 +47,9 @@
         "./src/component/tag/tag/SpotTag.ts",
         "./src/component/tag/TagComponent.ts",
         "./src/component/tag/TagMode.ts",
+        "./src/component/zoom/ZoomComponent.ts",
         "./src/component/NavigationComponent.ts",
+        "./src/component/BearingComponent.ts",
         "./src/error/AbortMapillaryError.ts",
         "./src/graph/edge/interfaces/IEdge.ts",
         "./src/graph/edge/interfaces/IEdgeData.ts",