Browse Source

Add ability to move graph3d by left mouse button while pressing ctrl key and rotate like before

codeClimate
A 8 years ago
committed by Alexander Wunschik
parent
commit
c4f6a6f0a7
2 changed files with 84 additions and 23 deletions
  1. +45
    -1
      lib/graph3d/Camera.js
  2. +39
    -22
      lib/graph3d/Graph3d.js

+ 45
- 1
lib/graph3d/Camera.js View File

@ -16,6 +16,8 @@ function Camera() {
this.armRotation.horizontal = 0;
this.armRotation.vertical = 0;
this.armLength = 1.7;
this.cameraOffset = new Point3d();
this.offsetMultiplier = 0.6;
this.cameraLocation = new Point3d();
this.cameraRotation = new Point3d(0.5*Math.PI, 0, 0);
@ -23,6 +25,36 @@ function Camera() {
this.calculateCameraOrientation();
}
/**
* Set offset camera in camera coordinates
* @param {Number} x offset by camera horisontal
* @param {Number} y offset by camera vertical
*/
Camera.prototype.setOffset = function(x, y) {
var abs = Math.abs,
sign = Math.sign,
mul = this.offsetMultiplier,
border = this.armLength * mul;
if (abs(x) > border) {
x = sign(x) * border;
}
if (abs(y) > border) {
y = sign(y) * border;
}
this.cameraOffset.x = x;
this.cameraOffset.y = y;
this.calculateCameraOrientation();
};
/**
* Get camera offset by horizontal and vertical
* @return {Point3d} x - horizontal offset, y - vertical offset, z - not used
*/
Camera.prototype.getOffset = function(x, y) {
return this.cameraOffset;
};
/**
* Set the location (origin) of the arm
* @param {Number} x Normalized value of x
@ -89,6 +121,7 @@ Camera.prototype.setArmLength = function(length) {
if (this.armLength < 0.71) this.armLength = 0.71;
if (this.armLength > 5.0) this.armLength = 5.0;
this.setOffset(this.cameraOffset.x, this.cameraOffset.y);
this.calculateCameraOrientation();
};
@ -130,6 +163,17 @@ Camera.prototype.calculateCameraOrientation = function() {
this.cameraRotation.x = Math.PI/2 - this.armRotation.vertical;
this.cameraRotation.y = 0;
this.cameraRotation.z = -this.armRotation.horizontal;
var xa = this.cameraRotation.x;
var ya = this.cameraRotation.y;
var za = this.cameraRotation.z;
var dx = this.cameraOffset.x;
var dy = this.cameraOffset.y;
var sin = Math.sin, cos = Math.cos;
this.cameraLocation.x = this.cameraLocation.x + dx * cos(za) + dy * - sin(za) * cos(xa);
this.cameraLocation.y = this.cameraLocation.y + dx * sin(za) + dy * cos(za) * cos(xa);
this.cameraLocation.z = this.cameraLocation.z + dy * sin(xa);
};
module.exports = Camera;
module.exports = Camera;

+ 39
- 22
lib/graph3d/Graph3d.js View File

@ -1937,34 +1937,51 @@ Graph3d.prototype._onMouseDown = function(event) {
Graph3d.prototype._onMouseMove = function (event) {
event = event || window.event;
// calculate change in mouse position
var diffX = parseFloat(getMouseX(event)) - this.startMouseX;
var diffY = parseFloat(getMouseY(event)) - this.startMouseY;
// move with ctrl or rotate by other
if (event && event.ctrlKey === true) {
// calculate change in mouse position
var camera = this.camera,
offset = camera.getOffset();
var diffX = parseFloat(getMouseX(event)) - this.startMouseX;
var diffY = parseFloat(getMouseY(event)) - this.startMouseY;
var horizontalNew = this.startArmRotation.horizontal + diffX / 200;
var verticalNew = this.startArmRotation.vertical + diffY / 200;
var scale = this.frame.clientWidth * 0.6;
var snapAngle = 4; // degrees
var snapValue = Math.sin(snapAngle / 360 * 2 * Math.PI);
var offXNew = offset.x - ((diffX / scale) * this.camera.armLength) * 0.1;
var offYNew = offset.y + ((diffY / scale) * this.camera.armLength) * 0.1;
// snap horizontally to nice angles at 0pi, 0.5pi, 1pi, 1.5pi, etc...
// the -0.001 is to take care that the vertical axis is always drawn at the left front corner
if (Math.abs(Math.sin(horizontalNew)) < snapValue) {
horizontalNew = Math.round((horizontalNew / Math.PI)) * Math.PI - 0.001;
}
if (Math.abs(Math.cos(horizontalNew)) < snapValue) {
horizontalNew = (Math.round((horizontalNew/ Math.PI - 0.5)) + 0.5) * Math.PI - 0.001;
}
this.camera.setOffset(offXNew, offYNew);
} else {
// snap vertically to nice angles
if (Math.abs(Math.sin(verticalNew)) < snapValue) {
verticalNew = Math.round((verticalNew / Math.PI)) * Math.PI;
}
if (Math.abs(Math.cos(verticalNew)) < snapValue) {
verticalNew = (Math.round((verticalNew/ Math.PI - 0.5)) + 0.5) * Math.PI;
// calculate change in mouse position
var diffX = parseFloat(getMouseX(event)) - this.startMouseX;
var diffY = parseFloat(getMouseY(event)) - this.startMouseY;
var horizontalNew = this.startArmRotation.horizontal + diffX / 200;
var verticalNew = this.startArmRotation.vertical + diffY / 200;
var snapAngle = 4; // degrees
var snapValue = Math.sin(snapAngle / 360 * 2 * Math.PI);
// snap horizontally to nice angles at 0pi, 0.5pi, 1pi, 1.5pi, etc...
// the -0.001 is to take care that the vertical axis is always drawn at the left front corner
if (Math.abs(Math.sin(horizontalNew)) < snapValue) {
horizontalNew = Math.round(horizontalNew / Math.PI) * Math.PI - 0.001;
}
if (Math.abs(Math.cos(horizontalNew)) < snapValue) {
horizontalNew = (Math.round(horizontalNew / Math.PI - 0.5) + 0.5) * Math.PI - 0.001;
}
// snap vertically to nice angles
if (Math.abs(Math.sin(verticalNew)) < snapValue) {
verticalNew = Math.round(verticalNew / Math.PI) * Math.PI;
}
if (Math.abs(Math.cos(verticalNew)) < snapValue) {
verticalNew = (Math.round(verticalNew / Math.PI - 0.5) + 0.5) * Math.PI;
}
this.camera.setArmRotation(horizontalNew, verticalNew);
}
this.camera.setArmRotation(horizontalNew, verticalNew);
this.redraw();
// fire a cameraPositionChange event

Loading…
Cancel
Save