Skip to content

Commit

Permalink
feat: viewer option to inactivate image tiling
Browse files Browse the repository at this point in the history
  • Loading branch information
@oscarlorentzon
oscarlorentzon committed Mar 25, 2021
1 parent 4eb5ed7 commit 955bed2
Show file tree
Hide file tree
Showing 12 changed files with 320 additions and 192 deletions.
16 changes: 0 additions & 16 deletions spec/utils/Urls.spec.ts
View file

This file was deleted.

28 changes: 28 additions & 0 deletions spec/utils/ViewerConfiguration.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import { notDeepEqual } from "assert";
import { ViewerOptions } from "../../src/Mapillary";
import { ViewerConfiguration } from "../../src/utils/ViewerConfiguration";

describe("Urls.setOptions", () => {
it("should set all option properties", () => {
const options: ViewerOptions = {
apiClient: "api-client",
container: "container-id",
imageTiling: false,
url: {
exploreHost: "test-explore",
scheme: "test-scheme",
},
};

expect(ViewerConfiguration.imageTiling).toBe(true);
expect(ViewerConfiguration.explore).toBe("https://www.mapillary.com");

ViewerConfiguration.setOptions(options);

expect(ViewerConfiguration.imageTiling).toBe(false);
expect(ViewerConfiguration.explore).not.toContain("https");
expect(ViewerConfiguration.explore).not.toContain("mapillary");
expect(ViewerConfiguration.explore).toContain(options.url.scheme);
expect(ViewerConfiguration.explore).toContain(options.url.exploreHost);
});
});
75 changes: 52 additions & 23 deletions src/component/attribution/AttributionComponent.ts
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,25 @@
import * as vd from "virtual-dom";

import { combineLatest as observableCombineLatest } from "rxjs";

import { map } from "rxjs/operators";

import { Component } from "../Component";
import { ComponentConfiguration } from "../interfaces/ComponentConfiguration";

import { Node } from "../../graph/Node";
import { ViewportSize } from "../../render/interfaces/ViewportSize";
import { VirtualNodeHash } from "../../render/interfaces/VirtualNodeHash";
import { Urls } from "../../utils/Urls";
import { ViewerConfiguration } from "../../utils/ViewerConfiguration";
import { Container } from "../../viewer/Container";
import { Navigator } from "../../viewer/Navigator";

import { Component } from "../Component";
import { ComponentConfiguration } from "../interfaces/ComponentConfiguration";

export class AttributionComponent extends Component<ComponentConfiguration> {
public static componentName: string = "attribution";

constructor(name: string, container: Container, navigator: Navigator) {
constructor(
name: string,
container: Container,
navigator: Navigator) {
super(name, container, navigator);
}

Expand All @@ -29,7 +31,11 @@ export class AttributionComponent extends Component<ComponentConfiguration> {
([node, size]: [Node, ViewportSize]): VirtualNodeHash => {
return {
name: this._name,
vnode: this._getAttributionNode(node.creatorUsername, node.id, node.capturedAt, size.width),
vnode: this._getAttributionNode(
node.creatorUsername,
node.id,
node.capturedAt,
size.width),
};
}))
.subscribe(this._container.domRenderer.render$));
Expand All @@ -43,35 +49,58 @@ export class AttributionComponent extends Component<ComponentConfiguration> {
return {};
}

private _getAttributionNode(username: string, id: string, capturedAt: number, width: number): vd.VNode {
const compact: boolean = width <= 640;

const mapillaryIcon: vd.VNode = vd.h("div.AttributionMapillaryLogo", []);
const mapillaryLink: vd.VNode = vd.h(
private _getAttributionNode(
username: string,
id: string,
capturedAt: number,
width: number)
: vd.VNode {
const compact = width <= 640;

const mapillaryIcon = vd.h(
"div.AttributionMapillaryLogo",
[]);
const mapillaryLink = vd.h(
"a.AttributionIconContainer",
{ href: Urls.explore, target: "_blank" },
{ href: ViewerConfiguration.explore, target: "_blank" },
[mapillaryIcon]);

const imageBy: string = compact ? `${username}` : `image by ${username}`;
const imageByContent: vd.VNode = vd.h("div.AttributionUsername", { textContent: imageBy }, []);

const date: string[] = new Date(capturedAt).toDateString().split(" ");
const formatted: string = (date.length > 3 ?
const imageBy = compact ?
`${username}` : `image by ${username}`;
const imageByContent = vd.h(
"div.AttributionUsername",
{ textContent: imageBy },
[]);

const date = new Date(capturedAt)
.toDateString()
.split(" ");
const formatted = (date.length > 3 ?
compact ?
[date[3]] :
[date[1], date[2] + ",", date[3]] :
date).join(" ");

const dateContent: vd.VNode = vd.h("div.AttributionDate", { textContent: formatted }, []);
const dateContent = vd.h(
"div.AttributionDate",
{ textContent: formatted },
[]);

const imageLink: vd.VNode =
const imageLink =
vd.h(
"a.mapillary-attribution-image-container",
{ href: Urls.exploreImage(id), target: "_blank" },
{
href: ViewerConfiguration.exploreImage(id),
target: "_blank",
},
[imageByContent, dateContent]);

const compactClass: string = compact ? ".mapillary-attribution-compact" : "";
const compactClass = compact ?
".mapillary-attribution-compact" : "";

return vd.h("div.mapillary-attribution-container" + compactClass, {}, [mapillaryLink, imageLink]);
return vd.h(
"div.mapillary-attribution-container" + compactClass,
{},
[mapillaryLink, imageLink]);
}
}
5 changes: 2 additions & 3 deletions src/component/cover/CoverComponent.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import {
empty as observableEmpty,
of as observableOf,
Observable,
Subscription,
Subscriber,
} from "rxjs";

Expand All @@ -27,7 +26,7 @@ import { MapillaryError } from "../../error/MapillaryError";
import { Node } from "../../graph/Node";
import { ViewportSize } from "../../render/interfaces/ViewportSize";
import { VirtualNodeHash } from "../../render/interfaces/VirtualNodeHash";
import { Urls } from "../../utils/Urls";
import { ViewerConfiguration } from "../../utils/ViewerConfiguration";
import { Container } from "../../viewer/Container";
import { Navigator } from "../../viewer/Navigator";
import { ImagesContract } from "../../api/contracts/ImagesContract";
Expand Down Expand Up @@ -168,7 +167,7 @@ export class CoverComponent extends Component<CoverConfiguration> {
"div.mapillary-cover-button",
[vd.h("div.mapillary-cover-button-icon", [])]);

const coverLogo: vd.VNode = vd.h("a.mapillary-cover-logo", { href: Urls.explore, target: "_blank" }, []);
const coverLogo: vd.VNode = vd.h("a.mapillary-cover-logo", { href: ViewerConfiguration.explore, target: "_blank" }, []);
const coverIndicator: vd.VNode = vd.h(
"div.mapillary-cover-indicator",
{ onclick: (): void => { this.configure({ state: CoverState.Loading }); } },
Expand Down
58 changes: 31 additions & 27 deletions src/component/imageplane/ImagePlaneComponent.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ import { RegionOfInterestCalculator }
import { TextureProvider } from "../../tiles/TextureProvider";
import { ComponentConfiguration } from "../interfaces/ComponentConfiguration";
import { Transform } from "../../geo/Transform";
import { ViewerConfiguration } from "../../utils/ViewerConfiguration";

interface ImagePlaneGLRendererOperation {
(renderer: ImagePlaneGLRenderer): ImagePlaneGLRenderer;
Expand Down Expand Up @@ -152,33 +153,35 @@ export class ImagePlaneComponent extends Component<ComponentConfiguration> {
}))
.subscribe(this._rendererOperation$));

const textureProvider$ = this._navigator.stateService.currentState$.pipe(
distinctUntilChanged(
undefined,
(frame: AnimationFrame): string => {
return frame.state.currentNode.id;
}),
withLatestFrom(
this._container.glRenderer.webGLRenderer$,
this._container.renderService.size$),
map(
([frame, renderer, size]: [AnimationFrame, THREE.WebGLRenderer, ViewportSize]): TextureProvider => {
let state = frame.state;
let currentNode = state.currentNode;
let currentTransform = state.currentTransform;
let tileSize = 1024;

return new TextureProvider(
currentNode.id,
currentTransform.basicWidth,
currentTransform.basicHeight,
currentNode.image,
this._imageTileLoader,
new TileStore(),
renderer);
}),
publishReplay(1),
refCount());
const textureProvider$ = this._navigator.stateService.currentState$
.pipe(
filter(() => ViewerConfiguration.imageTiling),
distinctUntilChanged(
undefined,
(frame: AnimationFrame): string => {
return frame.state.currentNode.id;
}),
withLatestFrom(
this._container.glRenderer.webGLRenderer$,
this._container.renderService.size$),
map(
([frame, renderer, size]: [AnimationFrame, THREE.WebGLRenderer, ViewportSize]): TextureProvider => {
let state = frame.state;
let currentNode = state.currentNode;
let currentTransform = state.currentTransform;
let tileSize = 1024;

return new TextureProvider(
currentNode.id,
currentTransform.basicWidth,
currentTransform.basicHeight,
currentNode.image,
this._imageTileLoader,
new TileStore(),
renderer);
}),
publishReplay(1),
refCount());

subs.push(textureProvider$.subscribe(() => { /*noop*/ }));

Expand All @@ -204,6 +207,7 @@ export class ImagePlaneComponent extends Component<ComponentConfiguration> {
const roiTrigger$ = observableCombineLatest(
this._container.renderService.renderCameraFrame$,
this._container.renderService.size$.pipe(debounceTime(250))).pipe(
filter(() => ViewerConfiguration.imageTiling),
map(
([camera, size]: [RenderCamera, ViewportSize]): PositionLookat => {
return [
Expand Down
64 changes: 35 additions & 29 deletions src/component/slider/SliderComponent.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ import { SliderGLRenderer } from "./SliderGLRenderer";
import { Transform } from "../../geo/Transform";
import { SliderDOMRenderer } from "./SliderDOMRenderer";
import { isSpherical } from "../../geo/Geo";
import { ViewerConfiguration } from "../../utils/ViewerConfiguration";

/**
* @class SliderComponent
Expand Down Expand Up @@ -391,35 +392,37 @@ export class SliderComponent extends Component<SliderConfiguration> {
}));


const textureProvider$ = this._navigator.stateService.currentState$.pipe(
distinctUntilChanged(
undefined,
(frame: AnimationFrame): string => {
return frame.state.currentNode.id;
}),
withLatestFrom(
this._container.glRenderer.webGLRenderer$,
this._container.renderService.size$),
map(
([frame, renderer, size]: [AnimationFrame, THREE.WebGLRenderer, ViewportSize]): TextureProvider => {
const state: IAnimationState = frame.state;
const viewportSize: number = Math.max(size.width, size.height);

const currentNode: Node = state.currentNode;
const currentTransform: Transform = state.currentTransform;
const tileSize: number = viewportSize > 2048 ? 2048 : viewportSize > 1024 ? 1024 : 512;

return new TextureProvider(
currentNode.id,
currentTransform.basicWidth,
currentTransform.basicHeight,
currentNode.image,
this._imageTileLoader,
new TileStore(),
renderer);
}),
publishReplay(1),
refCount());
const textureProvider$ = this._navigator.stateService.currentState$
.pipe(
filter(() => ViewerConfiguration.imageTiling),
distinctUntilChanged(
undefined,
(frame: AnimationFrame): string => {
return frame.state.currentNode.id;
}),
withLatestFrom(
this._container.glRenderer.webGLRenderer$,
this._container.renderService.size$),
map(
([frame, renderer, size]: [AnimationFrame, THREE.WebGLRenderer, ViewportSize]): TextureProvider => {
const state: IAnimationState = frame.state;
const viewportSize: number = Math.max(size.width, size.height);

const currentNode: Node = state.currentNode;
const currentTransform: Transform = state.currentTransform;
const tileSize: number = viewportSize > 2048 ? 2048 : viewportSize > 1024 ? 1024 : 512;

return new TextureProvider(
currentNode.id,
currentTransform.basicWidth,
currentTransform.basicHeight,
currentNode.image,
this._imageTileLoader,
new TileStore(),
renderer);
}),
publishReplay(1),
refCount());

subs.push(textureProvider$.subscribe(() => { /*noop*/ }));

Expand All @@ -445,6 +448,7 @@ export class SliderComponent extends Component<SliderConfiguration> {
const roiTrigger$ = observableCombineLatest(
this._container.renderService.renderCameraFrame$,
this._container.renderService.size$.pipe(debounceTime(250))).pipe(
filter(() => ViewerConfiguration.imageTiling),
map(
([camera, size]: [RenderCamera, ViewportSize]): PositionLookat => {
return [
Expand Down Expand Up @@ -520,6 +524,7 @@ export class SliderComponent extends Component<SliderConfiguration> {
subs.push(hasTexture$.subscribe(() => { /*noop*/ }));

const textureProviderPrev$ = this._navigator.stateService.currentState$.pipe(
filter(() => ViewerConfiguration.imageTiling),
filter(
(frame: AnimationFrame): boolean => {
return !!frame.state.previousNode;
Expand Down Expand Up @@ -574,6 +579,7 @@ export class SliderComponent extends Component<SliderConfiguration> {
const roiTriggerPrev$ = observableCombineLatest(
this._container.renderService.renderCameraFrame$,
this._container.renderService.size$.pipe(debounceTime(250))).pipe(
filter(() => ViewerConfiguration.imageTiling),
map(
([camera, size]: [RenderCamera, ViewportSize]): PositionLookat => {
return [
Expand Down

0 comments on commit 955bed2

Please sign in to comment.