kaleidoscopejs - npm Package Compare versions

Comparing version 0.0.4 to 0.0.5

package.json

 {
   "name": "kaleidoscopejs",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "360º video/image viewer",
@@ -8,5 +8,10 @@ "main": "dist/kaleidoscope.min.js",
   "scripts": {
-    "test": "./node_modules/.bin/mocha test.js",
+    "test": "./node_modules/.bin/karma start --browsers Chrome --single-run",
     "build": "node_modules/.bin/rollup -c && cat dist/kaleidoscope.js | node_modules/.bin/uglifyjs --screw-ie8 -m -c > dist/kaleidoscope.min.js"
   },
+  "babel": {
+    "presets": [
+      "es2015-rollup"
+    ]
+  },
   "repository": {
@@ -34,4 +39,16 @@ "type": "git",
     "babel-loader": "^6.2.4",
+    "babel-plugin-espower": "^2.3.1",
+    "babel-plugin-transform-runtime": "^6.12.0",
     "babel-preset-es2015-rollup": "^1.1.1",
-    "mocha": "^2.4.5",
+    "babel-preset-stage-2": "^6.11.0",
+    "babel-register": "^6.11.6",
+    "chai": "^3.5.0",
+    "jsdom": "^9.4.1",
+    "karma": "^1.1.2",
+    "karma-chai": "^0.1.0",
+    "karma-chrome-launcher": "^1.0.1",
+    "karma-jasmine": "^1.0.2",
+    "karma-mocha": "^1.1.1",
+    "karma-rollup-plugin": "^0.2.0",
+    "mocha": "^2.5.3",
     "rollup": "^0.33.0",
@@ -38,0 +55,0 @@ "rollup-plugin-babel": "^2.6.1",

README.md

@@ -62,2 +62,4 @@ <img src="kaleidoscope.gif" height="150" width="100%"/>
 
+`options.initialYaw` number to define initial yaw of 360, should be in degrees(45, 90, 180 etc).
+
 `options.loop` to define if the video should loop. Defaults to `false`.
@@ -73,2 +75,4 @@
 
+`viewer.centralize()` move camera back to the original center.
+
 #### Kaleidoscope.Image
@@ -98,2 +102,4 @@
 
+`options.initialYaw` number to define initial yaw of 360, should be in degrees(45, 90, 180 etc).
+
 `options.onError` callback to when something goes wrong.
@@ -103,2 +109,4 @@
 
+`viewer.centralize()` move camera back to the original center.
+
 ## Supported Browsers
@@ -105,0 +113,0 @@

src/controls.js

 import THREE from 'threejs360';
 import utils from './utils'
 
+let easeOutBack = k => {
+  let s = 1.70158;
+  return --k * k * ((s + 1) * k + s) + 1;
+};
+
 export default class MouseControls {
-  constructor(camera, renderer) {
-    this.camera = camera;
-    this.renderer = renderer;
-    this.el = renderer.el;
+  constructor(options) {
+    Object.assign(this, options);
+    this.el = this.renderer.el;
+    this.theta = this.initialYaw * Math.PI / 180;
     this.phi = 0;
-    this.theta = 0;
     this.velo = utils.isiOS() ? 0.07 : 1.6;
@@ -17,2 +21,3 @@ this.rotateStart = new THREE.Vector2();
     this.euler = new THREE.Euler();
+    this.momentum = false;
     this.isUserInteracting = false;
@@ -40,2 +45,24 @@ this.addDraggableStyle();
 
+  centralize() {
+    let endTheta = this.initialYaw * Math.PI / 180;
+
+    let duration = 750;
+    let startTheta = this.theta;
+    let startPhi = this.phi;
+    let start = Date.now();
+
+    let animate = () => {
+      let progress = Date.now() - start;
+      let elapsed = progress / duration;
+      elapsed = elapsed > 1 ? 1 : elapsed;
+      if (progress >= duration) {
+        return cancelAnimationFrame(id);
+      }
+      this.theta = startTheta  + (endTheta - startTheta) * easeOutBack(elapsed);
+      this.phi = startPhi + (0 - startPhi) * easeOutBack(elapsed);
+      return requestAnimationFrame(animate);
+    };
+    let id = animate();
+  }
+
   destroy() {
@@ -72,3 +99,3 @@ this.el.removeEventListener('mousemove', this.onMouseMove);
     if (!this.isUserInteracting) {
-        return;
+      return;
     }
@@ -91,10 +118,22 @@ this.rotateEnd.set(event.clientX, event.clientY);
     this.isUserInteracting = true;
+    this.momentum = false;
   }
 
+  inertia() {
+    if (!this.momentum) return;
+    this.rotateDelta.y *= 0.85;
+    this.rotateDelta.x *= 0.85;
+    this.theta += 0.005 * this.rotateDelta.x;
+    this.phi += 0.005 * this.rotateDelta.y;
+    this.phi = THREE.Math.clamp(this.phi, -Math.PI / 2, Math.PI / 2);
+  }
+
   onMouseUp() {
     this.addDraggableStyle();
     this.isUserInteracting = false;
+    this.momentum = true;
   }
 
   update() {
+    this.inertia();
     this.euler.set(this.phi, this.theta, 0, 'YXZ');
@@ -101,0 +140,0 @@ this.orientation.setFromEuler(this.euler);

src/three-sixty-viewer.js

@@ -9,7 +9,7 @@ import Renderer from './renderer'
   constructor(options={}) {
-    Object.assign(this, {height: 360, width: 640}, options);
-    let {height, width, container, containerId} = this;
+    Object.assign(this, {height: 360, width: 640, initialYaw: 90}, options);
+    let {height, width, container, containerId, initialYaw} = this;
     this.renderer = new Renderer({height, width});
     this.camera = new THREE.PerspectiveCamera(80, window.innerWidth / window.innerHeight, 0.1, 100);
-    this.controls = new Controls(this.camera, this.renderer);
+    this.controls = new Controls({camera: this.camera, renderer: this.renderer, initialYaw});
     this.scene = this.createScene();
@@ -32,2 +32,6 @@ this.scene.add(this.camera);
 
+  centralize() {
+    this.controls.centralize();
+  }
+
   destroy() {
@@ -34,0 +38,0 @@ this.element.style.display = '';

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

6929133

increased by516.5%

Number of package files

23

increased by4.55%

Lines of code

7561

increased by2.81%

Number of lines in readme file

123

increased by6.96%

Worsened metrics

Dev dependency count

24

increased by100%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes