fix: viewChange is not triggered

* fix: viewChange is not triggered * test: fix failing tests
naver · Nov 1, 2021 · 677b1a9 · 677b1a9
1 parent 96e0af4
commit 677b1a9
Show file tree

Hide file tree

Showing 9 changed files with 55 additions and 29 deletions.
diff --git a/src/PanoViewer/PanoViewer.ts b/src/PanoViewer/PanoViewer.ts
@@ -968,7 +968,13 @@ class PanoViewer extends Component<PanoViewerEvent> {
       this._fov = e.fov;
       this._quaternion = e.quaternion;
 
-      this.trigger(new ComponentEvent(EVENTS.VIEW_CHANGE, e));
+      this.trigger(new ComponentEvent(EVENTS.VIEW_CHANGE, {
+        yaw: e.yaw,
+        pitch: e.pitch,
+        fov: e.fov,
+        quaternion: e.quaternion,
+        isTrusted: e.isTrusted
+      }));
     });
   }
 

diff --git a/src/YawPitchControl/YawPitchControl.ts b/src/YawPitchControl/YawPitchControl.ts
@@ -49,20 +49,20 @@ export interface YawPitchControlOptions {
   aspectRatio: number;
 }
 interface YawPitchControlEvents {
-  change: {
+  change: ComponentEvent<{
     yaw: number;
     pitch: number;
     fov: number;
     quaternion: quat | null;
     targetElement: HTMLElement;
     isTrusted: boolean;
-  };
-  hold: {
+  }>;
+  hold: ComponentEvent<{
     isTrusted: boolean;
-  };
-  animationEnd: {
+  }>;
+  animationEnd: ComponentEvent<{
     isTrusted: boolean;
-  };
+  }>;
 }
 
 /**
@@ -657,7 +657,7 @@ class YawPitchControl extends Component<YawPitchControlEvents> {
   private _triggerChange(evt: any) {
     const pos = this._axes.get();
     const opt = this.options;
-    const event: YawPitchControlEvents["change"] = {
+    const event: YawPitchControlEvents["change"] extends ComponentEvent<infer T> ? T : never = {
       targetElement: opt.element as HTMLElement,
       isTrusted: evt.isTrusted,
       yaw: pos.yaw,
@@ -669,6 +669,7 @@ class YawPitchControl extends Component<YawPitchControlEvents> {
     if (opt.gyroMode === GYRO_MODE.VR && this._deviceQuaternion) {
       event.quaternion = this._deviceQuaternion.getCombinedQuaternion(pos.yaw);
     }
+
     this.trigger(new ComponentEvent("change", event));
   }
 

diff --git a/src/types/event.ts b/src/types/event.ts
@@ -43,6 +43,7 @@ export interface ViewChangeEvent<T extends PanoViewer = PanoViewer> extends Comp
   yaw: number;
   pitch: number;
   fov: number;
+  isTrusted: boolean;
 }
 
 /**

diff --git a/test/manual/PanoViewer/PanoViewer.html b/test/manual/PanoViewer/PanoViewer.html
@@ -80,7 +80,7 @@ <h1 class="pageTitle">PanoViewer Manual Test</h1>
 <script src="../../../node_modules/@egjs/axes/dist/axes.js"></script>
 <script src="../../../dist/view360.js"></script> -->
 
-<script src="../../../dist/PanoViewer/view360.panoviewer.pkgd.js"></script>
+<script src="../../../dist/view360.pkgd.js"></script>
 
 <script src="../js/GridView.js"></script>
 <!--<script src="./js/OptionControls.js"></script>-->
@@ -448,7 +448,7 @@ <h1 class="pageTitle">PanoViewer Manual Test</h1>
 });
 
 panoViewer.on("viewChange", function(e) {
-  render()
+  render();
 });
 
 

diff --git a/test/unit/PanoImageRenderer/PanoImageRenderer.spec.js b/test/unit/PanoImageRenderer/PanoImageRenderer.spec.js
@@ -1,3 +1,4 @@
+// eslint-disable-next-line max-classes-per-file
 import {expect} from "chai";
 import sinon from "sinon";
 import {mat4} from "gl-matrix";
@@ -10,8 +11,7 @@ import PanoImageRendererForUnitTest from "../PanoImageRendererForUnitTest";
 import {compare, createPanoImageRenderer, renderAndCompareSequentially, isVideoLoaded, createVideoElement, sandbox, cleanup} from "../util";
 import WebGLUtils from "../../../src/PanoImageRenderer/WebGLUtils";
 import TestHelper from "../YawPitchControl/testHelper";
-import {PROJECTION_TYPE} from "../../../src/PanoViewer/consts";
-import PanoViewer from "../../../src/PanoViewer/PanoViewer";
+import {PROJECTION_TYPE, DEFAULT_CANVAS_CLASS} from "../../../src/PanoViewer/consts";
 
 const RendererOnIE11 = RendererInjector(
 	{
@@ -164,7 +164,7 @@ describe("PanoImageRenderer", () => {
 			sourceImg.src = "./images/test_equi.jpg";
 
 			// When
-			const inst = new MockedPanoImageRenderer(sourceImg, 200, 200, false, {
+			const inst = new MockedPanoImageRenderer(sourceImg, 200, 200, false, document.createElement("div"), DEFAULT_CANVAS_CLASS, {
 				initialYaw: 0,
 				initialpitch: 0,
 				imageType: "equirectangular",
@@ -189,7 +189,7 @@ describe("PanoImageRenderer", () => {
 			sourceImg.src = "./images/test_equi.jpg";
 
 			// When
-			const inst = new MockedPanoImageRenderer(sourceImg, 200, 200, false, {
+			const inst = new MockedPanoImageRenderer(sourceImg, 200, 200, false, document.createElement("div"), DEFAULT_CANVAS_CLASS, {
 				initialYaw: 0,
 				initialpitch: 0,
 				imageType: "equirectangular",
@@ -214,7 +214,7 @@ describe("PanoImageRenderer", () => {
 			sourceImg.src = "./images/test_equi.jpg";
 
 			// When
-			const inst = new MockedPanoImageRenderer(sourceImg, 200, 200, false, {
+			const inst = new MockedPanoImageRenderer(sourceImg, 200, 200, false, document.createElement("div"), DEFAULT_CANVAS_CLASS, {
 				initialYaw: 0,
 				initialpitch: 0,
 				imageType: "equirectangular",
@@ -904,7 +904,7 @@ describe("PanoImageRenderer", () => {
 			const sourceImg = new Image();
 
 			sourceImg.src = "./images/test_equi.jpg";
-			const inst = new PanoImageRendererOnIE11ForTest(sourceImg, 200, 200, false, {
+			const inst = new PanoImageRendererOnIE11ForTest(sourceImg, 200, 200, false, document.createElement("div"), DEFAULT_CANVAS_CLASS, {
 				imageType: "equirectangular",
 				fieldOfView: 65
 			});
@@ -936,7 +936,7 @@ describe("PanoImageRenderer", () => {
 			const isVideo = true;
 			const thresholdMargin = 4; /* Exceptional Case */
 
-			const inst = new PanoImageRendererOnIE11ForTest(sourceImg, 200, 200, isVideo, {
+			const inst = new PanoImageRendererOnIE11ForTest(sourceImg, 200, 200, isVideo, document.createElement("div"), DEFAULT_CANVAS_CLASS, {
 				imageType: "equirectangular",
 				fieldOfView: 65
 			});
@@ -971,7 +971,7 @@ describe("PanoImageRenderer", () => {
 			const isVideo = true;
 			const thresholdMargin = 4; /* Exceptional Case */
 
-			const inst = new PanoImageRendererOnIE11ForTest(sourceImg, 200, 200, isVideo, {
+			const inst = new PanoImageRendererOnIE11ForTest(sourceImg, 200, 200, isVideo, document.createElement("div"), DEFAULT_CANVAS_CLASS, {
 				imageType: "equirectangular",
 				fieldOfView: 65
 			});
@@ -1403,7 +1403,7 @@ describe("PanoImageRenderer", () => {
 			const sourceImg = new Image();
 
 			sourceImg.src = "./images/PanoViewer/Stereoscopic/stereoscopic1.png";
-			inst = new PanoImageRendererVR(sourceImg, 200, 200, false, {
+			inst = new PanoImageRendererVR(sourceImg, 200, 200, false, document.createElement("div"), DEFAULT_CANVAS_CLASS, {
 				fieldOfView: 65,
 				imageType: PROJECTION_TYPE.STEREOSCOPIC_EQUI,
 			});
@@ -1522,7 +1522,7 @@ describe("PanoImageRenderer", () => {
 			const sourceImg = new Image();
 
 			sourceImg.src = "./images/PanoViewer/Stereoscopic/stereoscopic1.png";
-			inst = new PanoImageRendererVRWithManagerMocked(sourceImg, 200, 200, false, {
+			inst = new PanoImageRendererVRWithManagerMocked(sourceImg, 200, 200, false, document.createElement("div"), DEFAULT_CANVAS_CLASS, {
 				fieldOfView: 65,
 				imageType: PROJECTION_TYPE.STEREOSCOPIC_EQUI,
 			});
@@ -1575,7 +1575,7 @@ describe("PanoImageRenderer", () => {
 
 		it("should apply correct yaw offset", async () => {
 			// Given
-			const renderer = new PanoImageRendererXR(sourceImg, 200, 200, false, {
+			const renderer = new PanoImageRendererXR(sourceImg, 200, 200, false, document.createElement("div"), DEFAULT_CANVAS_CLASS, {
 				fieldOfView: 65,
 				imageType: PROJECTION_TYPE.STEREOSCOPIC_EQUI,
 			});

diff --git a/test/unit/PanoImageRendererForUnitTest.js b/test/unit/PanoImageRendererForUnitTest.js
@@ -10,7 +10,7 @@ const DEBUG_CONTEXT_ATTRIBUTES = {
  *
  */
 export default class PanoImageRendererForUnitTest extends PanoImageRenderer {
-	constructor(image, width, height, isVideo, sphericalConfig) {
-		super(image, width, height, isVideo, sphericalConfig, DEBUG_CONTEXT_ATTRIBUTES);
+	constructor(image, width, height, isVideo, container, canvasClass, sphericalConfig) {
+		super(image, width, height, isVideo, container, canvasClass, sphericalConfig, DEBUG_CONTEXT_ATTRIBUTES);
 	}
 }
diff --git a/test/unit/PanoViewer/PanoViewer.spec.js b/test/unit/PanoViewer/PanoViewer.spec.js
@@ -5,7 +5,7 @@ import WebglUtilsInjector from "inject-loader!../../../src/PanoImageRenderer/Web
 import PanoViewer from "../../../src/PanoViewer/PanoViewer"; // eslint-disable-line import/no-duplicates
 import WebGLUtils from "../../../src/PanoImageRenderer/WebGLUtils"; // eslint-disable-line import/no-duplicates
 import {compare, createPanoViewerForRenderingTest, sandbox, cleanup} from "../util";
-import {ERROR_TYPE, EVENTS} from "../../../src/PanoViewer/consts";
+import {ERROR_TYPE, PANOVIEWER_EVENTS as EVENTS} from "../../../src/PanoViewer/consts";
 
 function promiseFactory(inst, yaw, pitch, fov, answerFile, threshold = 2) {
 	return new Promise(res => {
@@ -389,6 +389,21 @@ describe("PanoViewer", () => {
 				panoViewer.destroy();
 				done();
 			});
+
+      IT("should trigger 'viewChange' event", done => {
+        // Given
+        const panoViewer = new PanoViewer(target, {
+          image: "./images/test_equi.png"
+        });
+        const changeSpy = sinon.spy();
+        panoViewer.on(EVENTS.VIEW_CHANGE, changeSpy);
+
+        // When
+        panoViewer.lookAt({yaw: 10, pitch: 10}, 0);
+
+        // Then
+        expect(changeSpy.calledOnce).to.be.true;
+      });
 		});
 	});
 

diff --git a/test/unit/YawPitchControl/YawPitchControl.spec.js b/test/unit/YawPitchControl/YawPitchControl.spec.js
@@ -1,3 +1,4 @@
+/* eslint-disable max-classes-per-file */
 import {expect} from "chai";
 import sinon from "sinon";
 import {glMatrix, quat} from "gl-matrix";
@@ -872,7 +873,7 @@ describe("YawPitchControl", function() {
 			let target;
 			const attachThenHandler = (expected, then) => {
 				inst.on("change", e => {
-					const deceleration = inst.axes.options.deceleration;
+					const deceleration = inst._axes.options.deceleration;
 
 					results.push(deceleration);
 					if (results.length < expected.length) {
@@ -1237,14 +1238,14 @@ describe("YawPitchControl", function() {
 			it("should update panScale if fov is changed by fovRange's change", () => {
 				// Given
 				const prevFov = yawpitch.getFov();
-				const prevPanScale = yawpitch.axesPanInput.options.scale;
+				const prevPanScale = yawpitch._axesPanInput.options.scale;
 
 				// When
 				yawpitch.option("fovRange", [prevFov + 10, prevFov + 30]);
 
 				// Then
 				const currFov = yawpitch.getFov();
-				const currPanScale = yawpitch.axesPanInput.options.scale;
+				const currPanScale = yawpitch._axesPanInput.options.scale;
 
 				expect(currFov).to.not.equal(prevFov);
 				expect(prevPanScale).to.not.equal(currPanScale);
@@ -1279,7 +1280,7 @@ describe("YawPitchControl", function() {
 				[30, 45, 60, 75, 90, 120, 240].forEach(newFov => {
 					inst.option({"fov": newFov});
 
-					yaw = inst.axes.axis.yaw;
+					yaw = inst._axes.axis.yaw;
 					calculatedRangeSize = yaw.range[1] - yaw.range[0];
 					expectedRangeSize = (YAW_RANGE[1] - YAW_RANGE[0]) - inst.getFov();
 

diff --git a/test/unit/util.js b/test/unit/util.js
@@ -1,7 +1,9 @@
+/* eslint-disable */
 import {glMatrix, quat} from "gl-matrix";
 import PanoViewerInjector from "inject-loader!../../src/PanoViewer/PanoViewer";
 import PanoImageRendererForUnitTest from "./PanoImageRendererForUnitTest";
 import {util as mathUtil} from "../../src/utils/math-util";
+import { DEFAULT_CANVAS_CLASS } from "../../src/PanoViewer/consts"
 import PanoViewer from "../../src/PanoViewer/PanoViewer";
 
 const resemble = window.resemble;
@@ -60,7 +62,7 @@ function createPanoImageRenderer(image, isVideo, projectionType, cubemapConfig =
 	};
 
 	return new PanoImageRendererForUnitTest(
-		image, options.width, options.height, isVideo, sphericalConfig);
+		image, options.width, options.height, isVideo, document.createElement("div"), DEFAULT_CANVAS_CLASS, sphericalConfig);
 }
 
 function promiseFactory(inst, yaw, pitch, fov, answerFile, threshold = 2, isQuaternion) {