Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Embedding Projector: fix camera controls #6286

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Embedding Projector: fix camera controls #6286

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
07d25bc
Embedding Projector: fix camera controls
alicialics Apr 8, 2023
dde086f
fix shift key regression
alicialics Aug 2, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 15 additions & 43 deletions tensorboard/plugins/projector/vz_projector/scatterPlot.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,6 @@ const PERSP_CAMERA_FAR_CLIP_PLANE = 100;
const ORTHO_CAMERA_FRUSTUM_HALF_EXTENT = 1.2;
// Key presses.
const SHIFT_KEY = 16;
const CTRL_KEY = 17;
const ORBIT_MOUSE_ROTATION_SPEED = 1;
const ORBIT_ANIMATION_ROTATION_CYCLE_IN_SECONDS = 7;
export type OnCameraMoveListener = (
Expand Down Expand Up @@ -85,7 +84,7 @@ export class ScatterPlot {
private cameraDef: CameraDef | null = null;
private camera: THREE.Camera;
private orbitAnimationOnNextCameraCreation: boolean = false;
private orbitCameraControls: any;
private orbitCameraControls: OrbitControls;
private orbitAnimationId: number | null;
private worldSpacePointPositions: Float32Array;
private pointColors: Float32Array;
Expand Down Expand Up @@ -133,7 +132,7 @@ export class ScatterPlot {
window.addEventListener('keydown', this.onKeyDown.bind(this), false);
window.addEventListener('keyup', this.onKeyUp.bind(this), false);
}
private addCameraControlsEventListeners(cameraControls: any) {
private addCameraControlsEventListeners(cameraControls: OrbitControls) {
// Start is called when the user stars interacting with
// controls.
cameraControls.addEventListener('start', () => {
Expand All @@ -158,7 +157,7 @@ export class ScatterPlot {
if (this.orbitCameraControls != null) {
this.orbitCameraControls.dispose();
}
const occ = new OrbitControls(camera, this.renderer.domElement) as any;
const occ = new OrbitControls(camera, this.renderer.domElement);
occ.target0 = new THREE.Vector3(
cameraDef.target[0],
cameraDef.target[1],
Expand All @@ -170,11 +169,11 @@ export class ScatterPlot {
occ.autoRotate = false;
occ.rotateSpeed = ORBIT_MOUSE_ROTATION_SPEED;
if (cameraIs3D) {
occ.mouseButtons.ORBIT = THREE.MOUSE.LEFT;
occ.mouseButtons.PAN = THREE.MOUSE.RIGHT;
occ.mouseButtons.LEFT = THREE.MOUSE.ROTATE;
occ.mouseButtons.RIGHT = THREE.MOUSE.PAN;
} else {
occ.mouseButtons.ORBIT = null;
occ.mouseButtons.PAN = THREE.MOUSE.LEFT;
occ.mouseButtons.RIGHT = null;
occ.mouseButtons.LEFT = THREE.MOUSE.PAN;
}
occ.reset();
this.camera = camera;
Expand Down Expand Up @@ -312,28 +311,10 @@ export class ScatterPlot {
this.orbitCameraControls.enabled = false;
this.rectangleSelector.onMouseDown(e.offsetX, e.offsetY);
this.setNearestPointToMouse(e);
} else if (
!e.ctrlKey &&
this.sceneIs3D() &&
this.orbitCameraControls.mouseButtons.ORBIT === THREE.MOUSE.RIGHT
) {
// The user happened to press the ctrl key when the tab was active,
// unpressed the ctrl when the tab was inactive, and now he/she
// is back to the projector tab.
this.orbitCameraControls.mouseButtons.ORBIT = THREE.MOUSE.LEFT;
this.orbitCameraControls.mouseButtons.PAN = THREE.MOUSE.RIGHT;
} else if (
e.ctrlKey &&
this.sceneIs3D() &&
this.orbitCameraControls.mouseButtons.ORBIT === THREE.MOUSE.LEFT
) {
// Similarly to the situation above.
this.orbitCameraControls.mouseButtons.ORBIT = THREE.MOUSE.RIGHT;
this.orbitCameraControls.mouseButtons.PAN = THREE.MOUSE.LEFT;
}
}
/** When we stop dragging/zooming, return to normal behavior. */
private onMouseUp(e: any) {
private onMouseUp(e: MouseEvent) {
if (this.selecting || !this.orbitCameraControls.enabled) {
this.orbitCameraControls.enabled = true;
this.rectangleSelector.onMouseUp();
Expand All @@ -356,25 +337,16 @@ export class ScatterPlot {
this.projectorEventContext.notifyHoverOverPoint(this.nearestPoint!);
}
}
/** For using ctrl + left click as right click, and for circle select */
private onKeyDown(e: any) {
// If ctrl is pressed, use left click to orbit
if (e.keyCode === CTRL_KEY && this.sceneIs3D()) {
this.orbitCameraControls.mouseButtons.ORBIT = THREE.MOUSE.RIGHT;
this.orbitCameraControls.mouseButtons.PAN = THREE.MOUSE.LEFT;
}
/** For for circle select */
private onKeyDown(e: KeyboardEvent) {
// If shift is pressed, start selecting
if (e.keyCode === SHIFT_KEY) {
this.selecting = true;
this.container.style.cursor = 'crosshair';
}
}
/** For using ctrl + left click as right click, and for circle select */
private onKeyUp(e: any) {
if (e.keyCode === CTRL_KEY && this.sceneIs3D()) {
this.orbitCameraControls.mouseButtons.ORBIT = THREE.MOUSE.LEFT;
this.orbitCameraControls.mouseButtons.PAN = THREE.MOUSE.RIGHT;
}
/** For for circle select */
private onKeyUp(e: KeyboardEvent) {
// If shift is released, stop selecting
if (e.keyCode === SHIFT_KEY) {
this.selecting = this.getMouseMode() === MouseMode.AREA_SELECT;
Expand Down Expand Up @@ -468,7 +440,7 @@ export class ScatterPlot {
return axes;
}
private add3dAxis() {
const axes = new (THREE as any).AxesHelper();
const axes = new THREE.AxesHelper();
axes.name = 'axes';
this.scene.add(axes);
}
Expand All @@ -493,7 +465,7 @@ export class ScatterPlot {
def.orthographic = !this.sceneIs3D();
def.position = [pos.x, pos.y, pos.z];
def.target = [tgt.x, tgt.y, tgt.z];
def.zoom = (this.camera as any).zoom;
def.zoom = this.camera.zoom;
return def;
}
/** Sets parameters for the next camera recreation. */
Expand Down Expand Up @@ -705,7 +677,7 @@ export class ScatterPlot {
const renderCanvasSize = new THREE.Vector2();
// TODO(stephanwlee): Remove casting to any after three.js typing is
// proper.
(this.renderer as any).getSize(renderCanvasSize);
this.renderer.getSize(renderCanvasSize);
const pixelRatio = this.renderer.getPixelRatio();
this.pickingTexture = new THREE.WebGLRenderTarget(
renderCanvasSize.width * pixelRatio,
Expand Down