archive-gh-me/mapillary-js
1
0
Fork 0
mirror of https://github.com/mapillary/mapillary-js.git synced 2026-01-18 13:56:53 +00:00
Code Issues Projects Releases Wiki Activity

feat: typed component names

Browse Source
This commit is contained in:
Oscar Lorentzon 2021-04-18 13:00:22 +02:00
parent cea3967e86
commit c3b3d8eb2a
26 changed files with 127 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/component/Component.ts
View File

@ -19,13 +19,15 @@ import { EventEmitter } from "../util/EventEmitter";
import { SubscriptionHolder } from "../util/SubscriptionHolder";
import { IComponent } from "./interfaces/IComponent";
import { ComponentEventType } from "./events/ComponentEventType";
import { ComponentName } from "./ComponentName";
import { FallbackComponentName } from "./fallback/FallbackComponentName";
export abstract class Component
<TConfiguration extends ComponentConfiguration>
extends EventEmitter
implements IComponent {
public static componentName: string = "not_worthy";
public static componentName: ComponentName | FallbackComponentName;
protected _activated: boolean;
protected _container: Container;

16
src/component/ComponentName.ts Normal file
View File

@ -0,0 +1,16 @@
export type ComponentName =
| "attribution"
| "bearing"
| "cache"
| "cover"
| "direction"
| "image"
| "keyboard"
| "marker"
| "mouse"
| "popup"
| "sequence"
| "slider"
| "spatial"
| "tag"
| "zoom";

3
src/component/attribution/AttributionComponent.ts
View File

@ -12,9 +12,10 @@ import { Navigator } from "../../viewer/Navigator";
import { Component } from "../Component";
import { ComponentConfiguration } from "../interfaces/ComponentConfiguration";
import { ComponentName } from "../ComponentName";
export class AttributionComponent extends Component<ComponentConfiguration> {
public static componentName: string = "attribution";
public static componentName: ComponentName = "attribution";
constructor(
name: string,

3
src/component/bearing/BearingComponent.ts
View File

@ -33,6 +33,7 @@ import { ComponentSize } from "../util/ComponentSize";
import { Container } from "../../viewer/Container";
import { Navigator } from "../../viewer/Navigator";
import { isSpherical } from "../../geo/Geo";
import { ComponentName } from "../ComponentName";
type ImageFov = [number, number];
@ -61,7 +62,7 @@ interface ImageFovOperation {
* ```
*/
export class BearingComponent extends Component<BearingConfiguration> {
public static componentName: string = "bearing";
public static componentName: ComponentName = "bearing";
private _spatial: Spatial;
private _viewportCoords: ViewportCoords;

3
src/component/cache/CacheComponent.ts vendored
View File

@ -34,11 +34,12 @@ import { NavigationDirection } from "../../graph/edge/NavigationDirection";
import { Container } from "../../viewer/Container";
import { Navigator } from "../../viewer/Navigator";
import { isSpherical } from "../../geo/Geo";
import { ComponentName } from "../ComponentName";
type EdgesDepth = [NavigationEdge[], number];
export class CacheComponent extends Component<CacheConfiguration> {
public static componentName: string = "cache";
public static componentName: ComponentName = "cache";
/** @ignore */
constructor(name: string, container: Container, navigator: Navigator) {

3
src/component/cover/CoverComponent.ts
View File

@ -31,9 +31,10 @@ import { Container } from "../../viewer/Container";
import { Navigator } from "../../viewer/Navigator";
import { ImagesContract } from "../../api/contracts/ImagesContract";
import { CoverState } from "./CoverState";
import { ComponentName } from "../ComponentName";
export class CoverComponent extends Component<CoverConfiguration> {
public static componentName: string = "cover";
public static componentName: ComponentName = "cover";
constructor(name: string, container: Container, navigator: Navigator) {
super(name, container, navigator);

3
src/component/direction/DirectionComponent.ts
View File

@ -32,6 +32,7 @@ import { DirectionDOMRenderer } from "./DirectionDOMRenderer";
import { ComponentEventType } from "../events/ComponentEventType";
import { ComponentHoverEvent } from "../events/ComponentHoverEvent";
import { ComponentStateEvent } from "../events/ComponentStateEvent";
import { ComponentName } from "../ComponentName";
/**
* @class DirectionComponent
@ -39,7 +40,7 @@ import { ComponentStateEvent } from "../events/ComponentStateEvent";
*/
export class DirectionComponent extends Component<DirectionConfiguration> {
/** @inheritdoc */
public static componentName: string = "direction";
public static componentName: ComponentName = "direction";
private _renderer: DirectionDOMRenderer;

3
src/component/fallback/FallbackComponentName.ts Normal file
View File

@ -0,0 +1,3 @@
export type FallbackComponentName =
| "imagefallback"
| "navigationfallback"

3
src/component/fallback/image/ImageFallbackComponent.ts
View File

@ -19,9 +19,10 @@ import { Container } from "../../../viewer/Container";
import { Navigator } from "../../../viewer/Navigator";
import { ViewportSize } from "../../../render/interfaces/ViewportSize";
import { DOM } from "../../../util/DOM";
import { FallbackComponentName } from "../FallbackComponentName";
export class ImageFallbackComponent extends Component<ComponentConfiguration> {
public static componentName: string = "imagefallback";
public static componentName: FallbackComponentName = "imagefallback";
private _canvasId: string;
private _dom: DOM;

3
src/component/fallback/navigation/NavigationFallbackComponent.ts
View File

@ -23,6 +23,7 @@ import { VirtualNodeHash } from "../../../render/interfaces/VirtualNodeHash";
import { Container } from "../../../viewer/Container";
import { Navigator } from "../../../viewer/Navigator";
import { isSpherical } from "../../../geo/Geo";
import { FallbackComponentName } from "../FallbackComponentName";
/**
* @class NavigationFallbackComponent
@ -33,7 +34,7 @@ import { isSpherical } from "../../../geo/Geo";
*/
export class NavigationFallbackComponent
extends Component<NavigationFallbackConfiguration> {
public static componentName: string = "navigationfallback";
public static componentName: FallbackComponentName = "navigationfallback";
private _seqNames: { [dir: string]: string };
private _spaTopNames: { [dir: string]: string };

3
src/component/image/ImageComponent.ts
View File

@ -50,6 +50,7 @@ import { TextureProvider } from "../../tile/TextureProvider";
import { ComponentConfiguration } from "../interfaces/ComponentConfiguration";
import { Transform } from "../../geo/Transform";
import { ViewerConfiguration } from "../../viewer/ViewerConfiguration";
import { ComponentName } from "../ComponentName";
interface ImageGLRendererOperation {
(renderer: ImageGLRenderer): ImageGLRenderer;
@ -58,7 +59,7 @@ interface ImageGLRendererOperation {
type PositionLookat = [THREE.Vector3, THREE.Vector3, number, number, number];
export class ImageComponent extends Component<ComponentConfiguration> {
public static componentName: string = "image";
public static componentName: ComponentName = "image";
private _rendererOperation$: Subject<ImageGLRendererOperation>;
private _renderer$: Observable<ImageGLRenderer>;

2
src/component/interfaces/NavigationFallbackConfiguration.ts
View File

@ -9,7 +9,7 @@ import { ComponentConfiguration } from "./ComponentConfiguration";
* var viewer = new mapillary.Viewer({
* ...
* component: {
* fallback: {
* fallback: {
* navigation: {
* spatial: false,
* },

5
src/component/keyboard/KeyboardComponent.ts
View File

@ -1,5 +1,3 @@
import { Subscription } from "rxjs";
import { Component } from "../Component";
import { Container } from "../../viewer/Container";
@ -11,6 +9,7 @@ import { KeySequenceNavigationHandler } from "./KeySequenceNavigationHandler";
import { KeySpatialNavigationHandler } from "./KeySpatialNavigationHandler";
import { KeyZoomHandler } from "./KeyZoomHandler";
import { KeyPlayHandler } from "./KeyPlayHandler";
import { ComponentName } from "../ComponentName";
/**
* @class KeyboardComponent
@ -27,7 +26,7 @@ import { KeyPlayHandler } from "./KeyPlayHandler";
* ```
*/
export class KeyboardComponent extends Component<KeyboardConfiguration> {
public static componentName: string = "keyboard";
public static componentName: ComponentName = "keyboard";
private _keyPlayHandler: KeyPlayHandler;
private _keySequenceNavigationHandler: KeySequenceNavigationHandler;

3
src/component/marker/MarkerComponent.ts
View File

@ -44,6 +44,7 @@ import {
} from "../../geo/GeoCoords";
import { ComponentMarkerEvent } from "../events/ComponentMarkerEvent";
import { ComponentEvent } from "../events/ComponentEvent";
import { ComponentName } from "../ComponentName";
/**
* @class MarkerComponent
@ -78,7 +79,7 @@ import { ComponentEvent } from "../events/ComponentEvent";
* ```
*/
export class MarkerComponent extends Component<MarkerConfiguration> {
public static componentName: string = "marker";
public static componentName: ComponentName = "marker";
private _graphCalculator: GraphCalculator;
private _markerScene: MarkerScene;

3
src/component/mouse/MouseComponent.ts
View File

@ -9,6 +9,7 @@ import { DragPanHandler } from "./DragPanHandler";
import { EarthControlHandler } from "./EarthControlHandler";
import { ScrollZoomHandler } from "./ScrollZoomHandler";
import { TouchZoomHandler } from "./TouchZoomHandler";
import { ComponentName } from "../ComponentName";
/**
* @class MouseComponent
@ -26,7 +27,7 @@ import { TouchZoomHandler } from "./TouchZoomHandler";
*/
export class MouseComponent extends Component<MouseConfiguration> {
/** @inheritdoc */
public static componentName: string = "mouse";
public static componentName: ComponentName = "mouse";
private _bounceHandler: BounceHandler;
private _dragPanHandler: DragPanHandler;

3
src/component/popup/PopupComponent.ts
View File

@ -23,6 +23,7 @@ import { DOM } from "../../util/DOM";
import { ComponentConfiguration } from "../interfaces/ComponentConfiguration";
import { Component } from "../Component";
import { Popup } from "./popup/Popup";
import { ComponentName } from "../ComponentName";
/**
* @class PopupComponent
@ -50,7 +51,7 @@ import { Popup } from "./popup/Popup";
* ```
*/
export class PopupComponent extends Component<ComponentConfiguration> {
public static componentName: string = "popup";
public static componentName: ComponentName = "popup";
private _dom: DOM;

3
src/component/sequence/SequenceComponent.ts
View File

@ -47,6 +47,7 @@ import { Component } from "../Component";
import { ComponentEventType } from "../events/ComponentEventType";
import { ComponentPlayEvent } from "../events/ComponentPlayEvent";
import { ComponentHoverEvent } from "../events/ComponentHoverEvent";
import { ComponentName } from "../ComponentName";
/**
* @class SequenceComponent
@ -55,7 +56,7 @@ import { ComponentHoverEvent } from "../events/ComponentHoverEvent";
*/
export class SequenceComponent extends Component<SequenceConfiguration> {
/** @inheritdoc */
public static componentName: string = "sequence";
public static componentName: ComponentName = "sequence";
private _sequenceDOMRenderer: SequenceDOMRenderer;
private _scheduler: Scheduler;

3
src/component/slider/SliderComponent.ts
View File

@ -65,6 +65,7 @@ import { Transform } from "../../geo/Transform";
import { SliderDOMRenderer } from "./SliderDOMRenderer";
import { isSpherical } from "../../geo/Geo";
import { ViewerConfiguration } from "../../viewer/ViewerConfiguration";
import { ComponentName } from "../ComponentName";
/**
* @class SliderComponent
@ -92,7 +93,7 @@ import { ViewerConfiguration } from "../../viewer/ViewerConfiguration";
* ```
*/
export class SliderComponent extends Component<SliderConfiguration> {
public static componentName: string = "slider";
public static componentName: ComponentName = "slider";
private _viewportCoords: ViewportCoords;
private _domRenderer: SliderDOMRenderer;

3
src/component/spatial/SpatialComponent.ts
View File

@ -52,6 +52,7 @@ import { SpatialCache } from "./SpatialCache";
import { CameraType } from "../../geo/interfaces/CameraType";
import { geodeticToEnu } from "../../geo/GeoCoords";
import { LngLat } from "../../api/interfaces/LngLat";
import { ComponentName } from "../ComponentName";
type IntersectEvent = MouseEvent | FocusEvent;
@ -69,7 +70,7 @@ interface IntersectConfiguration {
}
export class SpatialComponent extends Component<SpatialConfiguration> {
public static componentName: string = "spatial";
public static componentName: ComponentName = "spatial";
private _cache: SpatialCache;
private _scene: SpatialScene;

3
src/component/tag/TagComponent.ts
View File

@ -57,6 +57,7 @@ import { ComponentEventType } from "../events/ComponentEventType";
import { ComponentTagModeEvent } from "../events/ComponentTagModeEvent";
import { ComponentGeometryEvent } from "../events/ComponentGeometryEvent";
import { ComponentStateEvent } from "../events/ComponentStateEvent";
import { ComponentName } from "../ComponentName";
/**
* @class TagComponent
@ -94,7 +95,7 @@ import { ComponentStateEvent } from "../events/ComponentStateEvent";
*/
export class TagComponent extends Component<TagConfiguration> {
/** @inheritdoc */
public static componentName: string = "tag";
public static componentName: ComponentName = "tag";
private _tagDomRenderer: TagDOMRenderer;
private _tagScene: TagScene;

3
src/component/zoom/ZoomComponent.ts
View File

@ -24,6 +24,7 @@ import { AnimationFrame } from "../../state/interfaces/AnimationFrame";
import { ComponentSize } from "../util/ComponentSize";
import { Container } from "../../viewer/Container";
import { Navigator } from "../../viewer/Navigator";
import { ComponentName } from "../ComponentName";
/**
* @class ZoomComponent
@ -39,7 +40,7 @@ import { Navigator } from "../../viewer/Navigator";
* ```
*/
export class ZoomComponent extends Component<ZoomConfiguration> {
public static componentName: string = "zoom";
public static componentName: ComponentName = "zoom";
private _viewportCoords: ViewportCoords;

4
src/external/component.ts vendored
View File

@ -28,11 +28,15 @@ export { ComponentHoverEvent } from "../component/events/ComponentHoverEvent";
export { ComponentGeometryEvent }
from "../component/events/ComponentGeometryEvent";
export { ComponentMarkerEvent } from "../component/events/ComponentMarkerEvent";
export { ComponentName } from "../component/ComponentName";
export { ComponentPlayEvent } from "../component/events/ComponentPlayEvent";
export { ComponentSize } from "../component/util/ComponentSize";
export { ComponentStateEvent } from "../component/events/ComponentStateEvent";
export { ComponentTagModeEvent }
from "../component/events/ComponentTagModeEvent";
export { FallbackComponentName }
from "../component/fallback/FallbackComponentName";
export { IComponent } from "../component/interfaces/IComponent";
// Direction

24
src/mapillary.ts
View File

@ -25,16 +25,16 @@ TraversingState.register(UnitBezier);
*/
import { ComponentService } from "./component/ComponentService";
import { ImageFallbackComponent }
from "./component/fallback/image/ImageFallbackComponent";
import { NavigationFallbackComponent }
from "./component/fallback/navigation/NavigationFallbackComponent";
// Cover
import { CoverComponent } from "./component/cover/CoverComponent";
ComponentService.registerCover(CoverComponent);
// Component
import { AttributionComponent }
from "./component/attribution/AttributionComponent";
import { BearingComponent } from "./component/bearing/BearingComponent";
import { CacheComponent } from "./component/cache/CacheComponent";
import { CoverComponent } from "./component/cover/CoverComponent";
import { DirectionComponent } from "./component/direction/DirectionComponent";
import { ImageComponent }
from "./component/image/ImageComponent";
@ -49,11 +49,6 @@ import { SpatialComponent }
import { TagComponent } from "./component/tag/TagComponent";
import { ZoomComponent } from "./component/zoom/ZoomComponent";
ComponentService.registerCover(CoverComponent);
ComponentService.register(ImageFallbackComponent);
ComponentService.register(NavigationFallbackComponent);
ComponentService.register(AttributionComponent);
ComponentService.register(BearingComponent);
ComponentService.register(CacheComponent);
@ -69,6 +64,15 @@ ComponentService.register(SpatialComponent);
ComponentService.register(TagComponent);
ComponentService.register(ZoomComponent);
// Fallback
import { ImageFallbackComponent }
from "./component/fallback/image/ImageFallbackComponent";
import { NavigationFallbackComponent }
from "./component/fallback/navigation/NavigationFallbackComponent";
ComponentService.register(ImageFallbackComponent);
ComponentService.register(NavigationFallbackComponent);
/**
* External exports
*

14
src/viewer/ComponentController.ts
View File

@ -23,6 +23,8 @@ import { CoverConfiguration }
from "../component/interfaces/CoverConfiguration";
import { Image } from "../graph/Image";
import { CoverState } from "../component/cover/CoverState";
import { FallbackComponentName } from "../component/fallback/FallbackComponentName";
import { ComponentName } from "../component/ComponentName";
export class ComponentController {
private _container: Container;
@ -90,7 +92,7 @@ export class ComponentController {
return this._componentService.get<TComponent>(name);
}
public activate(name: string): void {
public activate(name: ComponentName | FallbackComponentName): void {
this._componentService.activate(name);
}
@ -98,7 +100,7 @@ export class ComponentController {
this._coverComponent.configure({ state: CoverState.Visible });
}
public deactivate(name: string): void {
public deactivate(name: ComponentName | FallbackComponentName): void {
this._componentService.deactivate(name);
}
@ -209,7 +211,9 @@ export class ComponentController {
});
}
private _uFalse<TConfiguration extends ComponentConfiguration>(option: boolean | TConfiguration, name: string): void {
private _uFalse<TConfiguration extends ComponentConfiguration>(
option: boolean | TConfiguration,
name: ComponentName | FallbackComponentName): void {
if (option === undefined) {
this._componentService.deactivate(name);
return;
@ -226,7 +230,9 @@ export class ComponentController {
this._componentService.activate(name);
}
private _uTrue<TConfiguration extends ComponentConfiguration>(option: boolean | TConfiguration, name: string): void {
private _uTrue<TConfiguration extends ComponentConfiguration>(
option: boolean | TConfiguration,
name: ComponentName | FallbackComponentName): void {
if (option === undefined) {
this._componentService.activate(name);
return;

18
src/viewer/Viewer.ts
View File

@ -38,6 +38,9 @@ import { ViewerNavigationEdgeEvent }
from "./events/ViewerNavigationEdgeEvent";
import { ViewerImageEvent } from "./events/ViewerImageEvent";
import { ViewerStateEvent } from "./events/ViewerStateEvent";
import { ComponentName } from "../component/ComponentName";
import { FallbackComponentName }
from "../component/fallback/FallbackComponentName";
/**
* @class Viewer
@ -185,14 +188,16 @@ export class Viewer extends EventEmitter implements IViewer {
/**
* Activate a component.
*
* @param {string} name - Name of the component which will become active.
* @param {ComponentName | FallbackComponentName} name - Name of
* the component which will become active.
*
* @example
* ```js
* viewer.activateComponent("marker");
* ```
*/
public activateComponent(name: string): void {
public activateComponent(
name: ComponentName | FallbackComponentName): void {
this._componentController.activate(name);
}
@ -228,14 +233,16 @@ export class Viewer extends EventEmitter implements IViewer {
/**
* Deactivate a component.
*
* @param {string} name - Name of component which become inactive.
* @param {ComponentName | FallbackComponentName} name - Name
* of component which become inactive.
*
* @example
* ```js
* viewer.deactivateComponent("mouse");
* ```
*/
public deactivateComponent(name: string): void {
public deactivateComponent(
name: ComponentName | FallbackComponentName): void {
this._componentController.deactivate(name);
}
@ -383,7 +390,8 @@ export class Viewer extends EventEmitter implements IViewer {
* var mouseComponent = viewer.getComponent("mouse");
* ```
*/
public getComponent<TComponent extends Component<ComponentConfiguration>>(name: string): TComponent {
public getComponent<TComponent extends Component<ComponentConfiguration>>(
name: ComponentName | FallbackComponentName): TComponent {
return this._componentController.get<TComponent>(name);
}

56
test/viewer/ComponentController.test.ts
View File

@ -24,10 +24,13 @@ import { ComponentConfiguration }
import { CoverState } from "../../src/component/cover/CoverState";
import { ViewerNavigableEvent }
from "../../src/viewer/events/ViewerNavigableEvent";
import { ComponentName } from "../../src/component/ComponentName";
import { FallbackComponentName }
from "../../src/component/fallback/FallbackComponentName";
class CMock extends Component<ComponentConfiguration> {
protected static _cn: string = "mock";
public static get componentName(): string {
protected static _cn: ComponentName | FallbackComponentName;
public static get componentName(): ComponentName | FallbackComponentName {
return this._cn;
};
protected _activate(): void { /*noop*/ }
@ -37,44 +40,43 @@ class CMock extends Component<ComponentConfiguration> {
}
}
class IC extends CMock { protected static _cn: string = "imagefallback"; }
class NC extends CMock { protected static _cn: string = "navigationfallback"; }
class IFC extends CMock {
protected static _cn: FallbackComponentName = "imagefallback";
}
class NFC extends CMock {
protected static _cn: FallbackComponentName = "navigationfallback";
}
class AC extends CMock { protected static _cn: string = "attribution"; };
class BaC extends CMock { protected static _cn: string = "background"; }
class BeC extends CMock { protected static _cn: string = "bearing"; }
class CC extends CMock { protected static _cn: string = "cache"; }
class DiC extends CMock { protected static _cn: string = "direction"; }
class DeC extends CMock { protected static _cn: string = "debug"; }
class IPC extends CMock { protected static _cn: string = "image"; }
class KC extends CMock { protected static _cn: string = "keyboard"; }
class MaC extends CMock { protected static _cn: string = "marker"; }
class MoC extends CMock { protected static _cn: string = "mouse"; }
class PC extends CMock { protected static _cn: string = "popup"; }
class RC extends CMock { protected static _cn: string = "route"; }
class SeC extends CMock { protected static _cn: string = "sequence"; }
class SlC extends CMock { protected static _cn: string = "slider"; }
class SDC extends CMock { protected static _cn: string = "spatial"; }
class TC extends CMock { protected static _cn: string = "tag"; }
class ZC extends CMock { protected static _cn: string = "zoom"; }
ComponentService.register(IFC);
ComponentService.register(NFC);
class AC extends CMock { protected static _cn: ComponentName = "attribution"; };
class BeC extends CMock { protected static _cn: ComponentName = "bearing"; }
class CC extends CMock { protected static _cn: ComponentName = "cache"; }
class DiC extends CMock { protected static _cn: ComponentName = "direction"; }
class IC extends CMock { protected static _cn: ComponentName = "image"; }
class KC extends CMock { protected static _cn: ComponentName = "keyboard"; }
class MaC extends CMock { protected static _cn: ComponentName = "marker"; }
class MoC extends CMock { protected static _cn: ComponentName = "mouse"; }
class PC extends CMock { protected static _cn: ComponentName = "popup"; }
class SeC extends CMock { protected static _cn: ComponentName = "sequence"; }
class SlC extends CMock { protected static _cn: ComponentName = "slider"; }
class SpC extends CMock { protected static _cn: ComponentName = "spatial"; }
class TC extends CMock { protected static _cn: ComponentName = "tag"; }
class ZC extends CMock { protected static _cn: ComponentName = "zoom"; }
ComponentService.register(AC);
ComponentService.register(BaC);
ComponentService.register(BeC);
ComponentService.register(CC);
ComponentService.register(DiC);
ComponentService.register(DeC);
ComponentService.register(IC);
ComponentService.register(IPC);
ComponentService.register(KC);
ComponentService.register(MaC);
ComponentService.register(MoC);
ComponentService.register(NC);
ComponentService.register(PC);
ComponentService.register(RC);
ComponentService.register(SeC);
ComponentService.register(SlC);
ComponentService.register(SDC);
ComponentService.register(SpC);
ComponentService.register(TC);
ComponentService.register(ZC);