archive-gh-me/mapillary-js
1
0
Fork 0
mirror of https://github.com/mapillary/mapillary-js.git synced 2026-02-01 14:33:45 +00:00
Code Issues Projects Releases Wiki Activity

refactor: create canvas in container for more control

Browse Source
This commit is contained in:
Oscar Lorentzon 2017-09-03 07:35:54 +00:00
parent e61034d8e7
commit 4deba2edbe
3 changed files with 26 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
spec/render/GLRenderer.spec.ts
View File

@ -73,9 +73,9 @@ class RenderServiceMock extends RenderService {
describe("GLRenderer.ctor", () => {
it("should be contructed", () => {
let element: HTMLDivElement = document.createElement("div");
let canvasContainer: HTMLDivElement = document.createElement("div");
let canvas: HTMLCanvasElement = document.createElement("canvas");
let renderService: RenderService = new RenderServiceMock(element);
let glRenderer: GLRenderer = new GLRenderer(canvasContainer, renderService);
let glRenderer: GLRenderer = new GLRenderer(canvas, renderService);
expect(glRenderer).toBeDefined();
});
@ -84,9 +84,9 @@ describe("GLRenderer.ctor", () => {
spyOn(THREE, "WebGLRenderer");
let element: HTMLDivElement = document.createElement("div");
let canvasContainer: HTMLDivElement = document.createElement("div");
let canvas: HTMLCanvasElement = document.createElement("canvas");
let renderService: RenderService = new RenderServiceMock(element);
let glRenderer: GLRenderer = new GLRenderer(canvasContainer, renderService);
let glRenderer: GLRenderer = new GLRenderer(canvas, renderService);
expect(glRenderer).toBeDefined();
@ -148,7 +148,7 @@ describe("GLRenderer.renderer", () => {
spyOn(THREE, "WebGLRenderer").and.returnValue(rendererMock);
let renderServiceMock: RenderServiceMock = new RenderServiceMock(document.createElement("div"));
let glRenderer: GLRenderer = new GLRenderer(document.createElement("div"), renderServiceMock);
let glRenderer: GLRenderer = new GLRenderer(document.createElement("canvas"), renderServiceMock);
let renderHash: IGLRenderHash = createGLRenderHash(0, true);
glRenderer.render$.next(renderHash);
@ -162,7 +162,7 @@ describe("GLRenderer.renderer", () => {
spyOn(THREE, "WebGLRenderer").and.returnValue(rendererMock);
let renderServiceMock: RenderServiceMock = new RenderServiceMock(document.createElement("div"));
let glRenderer: GLRenderer = new GLRenderer(document.createElement("div"), renderServiceMock);
let glRenderer: GLRenderer = new GLRenderer(document.createElement("canvas"), renderServiceMock);
let renderHash: IGLRenderHash = createGLRenderHash(0, true);
glRenderer.render$.next(renderHash);
@ -180,7 +180,7 @@ describe("GLRenderer.renderer", () => {
spyOn(THREE, "WebGLRenderer").and.returnValue(rendererMock);
let renderServiceMock: RenderServiceMock = new RenderServiceMock(document.createElement("div"));
let glRenderer: GLRenderer = new GLRenderer(document.createElement("div"), renderServiceMock);
let glRenderer: GLRenderer = new GLRenderer(document.createElement("canvas"), renderServiceMock);
let renderHash: IGLRenderHash = createGLRenderHash(0, true);
glRenderer.render$.next(renderHash);
@ -206,7 +206,7 @@ describe("GLRenderer.renderer", () => {
renderCamera.frameId = 1;
renderServiceMock.renderCameraFrame$ = new BehaviorSubject<RenderCamera>(renderCamera);
let glRenderer: GLRenderer = new GLRenderer(document.createElement("div"), renderServiceMock);
let glRenderer: GLRenderer = new GLRenderer(document.createElement("canvas"), renderServiceMock);
frame$
.map(
@ -238,7 +238,7 @@ describe("GLRenderer.renderer", () => {
renderCamera.frameId = 1;
renderServiceMock.renderCameraFrame$ = new BehaviorSubject<RenderCamera>(renderCamera);
let glRenderer: GLRenderer = new GLRenderer(document.createElement("div"), renderServiceMock);
let glRenderer: GLRenderer = new GLRenderer(document.createElement("canvas"), renderServiceMock);
let frameSubscription: Subscription = frame$
.map(
@ -269,7 +269,7 @@ describe("GLRenderer.renderer", () => {
renderCamera.frameId = 1;
renderServiceMock.renderCameraFrame$ = new BehaviorSubject<RenderCamera>(renderCamera);
let glRenderer: GLRenderer = new GLRenderer(document.createElement("div"), renderServiceMock);
let glRenderer: GLRenderer = new GLRenderer(document.createElement("canvas"), renderServiceMock);
expect(glRenderer).toBeDefined();
@ -294,7 +294,7 @@ describe("GLRenderer.renderer", () => {
renderCamera.frameId = frameId;
renderServiceMock.renderCameraFrame$ = new BehaviorSubject<RenderCamera>(renderCamera);
let glRenderer: GLRenderer = new GLRenderer(document.createElement("div"), renderServiceMock);
let glRenderer: GLRenderer = new GLRenderer(document.createElement("canvas"), renderServiceMock);
glRenderer.render$.next(createGLRenderHash(frameId, true));
@ -319,7 +319,7 @@ describe("GLRenderer.renderer", () => {
renderCamera.frameId = frameId;
renderServiceMock.renderCameraFrame$ = new BehaviorSubject<RenderCamera>(renderCamera);
let glRenderer: GLRenderer = new GLRenderer(document.createElement("div"), renderServiceMock);
let glRenderer: GLRenderer = new GLRenderer(document.createElement("canvas"), renderServiceMock);
glRenderer.render$.next(createGLRenderHash(frameId, true));
@ -345,7 +345,7 @@ describe("GLRenderer.renderer", () => {
renderCamera.frameId = frameId;
renderServiceMock.renderCameraFrame$ = new BehaviorSubject<RenderCamera>(renderCamera);
let glRenderer: GLRenderer = new GLRenderer(document.createElement("div"), renderServiceMock);
let glRenderer: GLRenderer = new GLRenderer(document.createElement("canvas"), renderServiceMock);
glRenderer.render$.next(createGLRenderHash(frameId, true));
@ -375,7 +375,7 @@ describe("GLRenderer.renderer", () => {
renderCamera.frameId = frameId;
renderServiceMock.renderCameraFrame$ = new BehaviorSubject<RenderCamera>(renderCamera);
let glRenderer: GLRenderer = new GLRenderer(document.createElement("div"), renderServiceMock);
let glRenderer: GLRenderer = new GLRenderer(document.createElement("canvas"), renderServiceMock);
let renderHash1: IGLRenderHash = createGLRenderHash(frameId, true, hash1);
let renderHash2: IGLRenderHash = createGLRenderHash(frameId, true, hash2);
@ -421,7 +421,7 @@ describe("GLRenderer.renderer", () => {
renderCamera.frameId = frameId;
renderServiceMock.renderCameraFrame$ = new BehaviorSubject<RenderCamera>(renderCamera);
let glRenderer: GLRenderer = new GLRenderer(document.createElement("div"), renderServiceMock);
let glRenderer: GLRenderer = new GLRenderer(document.createElement("canvas"), renderServiceMock);
let renderHash1: IGLRenderHash = createGLRenderHash(frameId, true, hash1);
let renderHash2: IGLRenderHash = createGLRenderHash(frameId, true, hash2);

10
src/render/GLRenderer.ts
View File

@ -93,7 +93,7 @@ export class GLRenderer {
private _renderFrameSubscription: Subscription;
constructor (canvasContainer: HTMLElement, renderService: RenderService) {
constructor (canvas: HTMLCanvasElement, renderService: RenderService) {
this._renderService = renderService;
this._renderer$ = this._rendererOperation$
@ -246,17 +246,13 @@ export class GLRenderer {
.first()
.map(
(hash: IGLRenderHash): THREE.WebGLRenderer => {
let element: HTMLElement = renderService.element;
const element: HTMLElement = renderService.element;
let webGLRenderer: THREE.WebGLRenderer = new THREE.WebGLRenderer();
const webGLRenderer: THREE.WebGLRenderer = new THREE.WebGLRenderer({ canvas: canvas });
webGLRenderer.setPixelRatio(window.devicePixelRatio);
webGLRenderer.setSize(element.offsetWidth, element.offsetHeight);
webGLRenderer.setClearColor(new THREE.Color(0x202020), 1.0);
webGLRenderer.autoClear = false;
webGLRenderer.domElement.style.position = "absolute";
webGLRenderer.domElement.setAttribute("tabindex", "0");
canvasContainer.appendChild(webGLRenderer.domElement);
return webGLRenderer;
})

9
src/viewer/Container.ts
View File

@ -27,6 +27,7 @@ export class Container {
public spriteService: SpriteService;
private _canvasContainer: HTMLElement;
private _canvas: HTMLCanvasElement;
private _container: HTMLElement;
private _domContainer: HTMLElement;
@ -44,6 +45,12 @@ export class Container {
this._canvasContainer = document.createElement("div");
this._canvasContainer.className = "mapillary-js-interactive";
this._canvas = document.createElement("canvas");
this._canvas.className = "mapillary-js-canvas";
this._canvas.style.position = "absolute";
this._canvas.setAttribute("tabindex", "0");
this._canvasContainer.appendChild(this._canvas);
this._domContainer = document.createElement("div");
this._domContainer.className = "mapillary-js-dom";
@ -52,7 +59,7 @@ export class Container {
this.renderService = new RenderService(this._container, stateService.currentState$, options.renderMode);
this.glRenderer = new GLRenderer(this._canvasContainer, this.renderService);
this.glRenderer = new GLRenderer(this._canvas, this.renderService);
this.domRenderer = new DOMRenderer(this._domContainer, this.renderService, stateService.currentState$);
this.keyboardService = new KeyboardService(this._canvasContainer);