gecko/browser/devtools/tilt/tilt-visualizer.js

2254 lines
66 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/* -*- Mode: javascript; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
/* vim: set ts=2 et sw=2 tw=80: */
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
"use strict";
const {Cu, Ci, ChromeWorker} = require("chrome");
let TiltGL = require("devtools/tilt/tilt-gl");
let TiltUtils = require("devtools/tilt/tilt-utils");
let TiltVisualizerStyle = require("devtools/tilt/tilt-visualizer-style");
let {EPSILON, TiltMath, vec3, mat4, quat4} = require("devtools/tilt/tilt-math");
let {TargetFactory} = require("devtools/framework/target");
Cu.import("resource://gre/modules/Services.jsm");
Cu.import("resource:///modules/devtools/gDevTools.jsm");
const ELEMENT_MIN_SIZE = 4;
const INVISIBLE_ELEMENTS = {
"head": true,
"base": true,
"basefont": true,
"isindex": true,
"link": true,
"meta": true,
"option": true,
"script": true,
"style": true,
"title": true
};
// a node is represented in the visualization mesh as a rectangular stack
// of 5 quads composed of 12 vertices; we draw these as triangles using an
// index buffer of 12 unsigned int elements, obviously one for each vertex;
// if a webpage has enough nodes to overflow the index buffer elements size,
// weird things may happen; thus, when necessary, we'll split into groups
const MAX_GROUP_NODES = Math.pow(2, Uint16Array.BYTES_PER_ELEMENT * 8) / 12 - 1;
const WIREFRAME_COLOR = [0, 0, 0, 0.25];
const INTRO_TRANSITION_DURATION = 1000;
const OUTRO_TRANSITION_DURATION = 800;
const INITIAL_Z_TRANSLATION = 400;
const MOVE_INTO_VIEW_ACCURACY = 50;
const MOUSE_CLICK_THRESHOLD = 10;
const MOUSE_INTRO_DELAY = 200;
const ARCBALL_SENSITIVITY = 0.5;
const ARCBALL_ROTATION_STEP = 0.15;
const ARCBALL_TRANSLATION_STEP = 35;
const ARCBALL_ZOOM_STEP = 0.1;
const ARCBALL_ZOOM_MIN = -3000;
const ARCBALL_ZOOM_MAX = 500;
const ARCBALL_RESET_SPHERICAL_FACTOR = 0.1;
const ARCBALL_RESET_LINEAR_FACTOR = 0.01;
const TILT_CRAFTER = "resource:///modules/devtools/tilt/TiltWorkerCrafter.js";
const TILT_PICKER = "resource:///modules/devtools/tilt/TiltWorkerPicker.js";
/**
* Initializes the visualization presenter and controller.
*
* @param {Object} aProperties
* an object containing the following properties:
* {Window} chromeWindow: a reference to the top level window
* {Window} contentWindow: the content window holding the visualized doc
* {Element} parentNode: the parent node to hold the visualization
* {Object} notifications: necessary notifications for Tilt
* {Function} onError: optional, function called if initialization failed
* {Function} onLoad: optional, function called if initialization worked
*/
function TiltVisualizer(aProperties)
{
// make sure the properties parameter is a valid object
aProperties = aProperties || {};
/**
* Save a reference to the top-level window.
*/
this.chromeWindow = aProperties.chromeWindow;
this.tab = aProperties.tab;
/**
* The canvas element used for rendering the visualization.
*/
this.canvas = TiltUtils.DOM.initCanvas(aProperties.parentNode, {
focusable: true,
append: true
});
/**
* Visualization logic and drawing loop.
*/
this.presenter = new TiltVisualizer.Presenter(this.canvas,
aProperties.chromeWindow,
aProperties.contentWindow,
aProperties.notifications,
aProperties.onError || null,
aProperties.onLoad || null);
/**
* Visualization mouse and keyboard controller.
*/
this.controller = new TiltVisualizer.Controller(this.canvas, this.presenter);
}
exports.TiltVisualizer = TiltVisualizer;
TiltVisualizer.prototype = {
/**
* Initializes the visualizer.
*/
init: function TV_init()
{
this.presenter.init();
this.bindToInspector(this.tab);
},
/**
* Checks if this object was initialized properly.
*
* @return {Boolean} true if the object was initialized properly
*/
isInitialized: function TV_isInitialized()
{
return this.presenter && this.presenter.isInitialized() &&
this.controller && this.controller.isInitialized();
},
/**
* Removes the overlay canvas used for rendering the visualization.
*/
removeOverlay: function TV_removeOverlay()
{
if (this.canvas && this.canvas.parentNode) {
this.canvas.parentNode.removeChild(this.canvas);
}
},
/**
* Explicitly cleans up this visualizer and sets everything to null.
*/
cleanup: function TV_cleanup()
{
this.unbindInspector();
if (this.controller) {
TiltUtils.destroyObject(this.controller);
}
if (this.presenter) {
TiltUtils.destroyObject(this.presenter);
}
let chromeWindow = this.chromeWindow;
TiltUtils.destroyObject(this);
TiltUtils.clearCache();
TiltUtils.gc(chromeWindow);
},
/**
* Listen to the inspector activity.
*/
bindToInspector: function TV_bindToInspector(aTab)
{
this._browserTab = aTab;
this.onNewNodeFromInspector = this.onNewNodeFromInspector.bind(this);
this.onNewNodeFromTilt = this.onNewNodeFromTilt.bind(this);
this.onInspectorReady = this.onInspectorReady.bind(this);
this.onToolboxDestroyed = this.onToolboxDestroyed.bind(this);
gDevTools.on("inspector-ready", this.onInspectorReady);
gDevTools.on("toolbox-destroyed", this.onToolboxDestroyed);
Services.obs.addObserver(this.onNewNodeFromTilt,
this.presenter.NOTIFICATIONS.HIGHLIGHTING,
false);
Services.obs.addObserver(this.onNewNodeFromTilt,
this.presenter.NOTIFICATIONS.UNHIGHLIGHTING,
false);
let target = TargetFactory.forTab(aTab);
let toolbox = gDevTools.getToolbox(target);
if (toolbox) {
let panel = toolbox.getPanel("inspector");
if (panel) {
this.inspector = panel;
this.inspector.selection.on("new-node", this.onNewNodeFromInspector);
this.onNewNodeFromInspector();
}
}
},
/**
* Unregister inspector event listeners.
*/
unbindInspector: function TV_unbindInspector()
{
this._browserTab = null;
if (this.inspector) {
if (this.inspector.selection) {
this.inspector.selection.off("new-node", this.onNewNodeFromInspector);
}
this.inspector = null;
}
gDevTools.off("inspector-ready", this.onInspectorReady);
gDevTools.off("toolbox-destroyed", this.onToolboxDestroyed);
Services.obs.removeObserver(this.onNewNodeFromTilt,
this.presenter.NOTIFICATIONS.HIGHLIGHTING);
Services.obs.removeObserver(this.onNewNodeFromTilt,
this.presenter.NOTIFICATIONS.UNHIGHLIGHTING);
},
/**
* When a new inspector is started.
*/
onInspectorReady: function TV_onInspectorReady(event, toolbox, panel)
{
if (toolbox.target.tab === this._browserTab) {
this.inspector = panel;
this.inspector.selection.on("new-node", this.onNewNodeFromInspector);
this.onNewNodeFromTilt();
}
},
/**
* When the toolbox, therefor the inspector, is closed.
*/
onToolboxDestroyed: function TV_onToolboxDestroyed(event, tab)
{
if (tab === this._browserTab &&
this.inspector) {
if (this.inspector.selection) {
this.inspector.selection.off("new-node", this.onNewNodeFromInspector);
}
this.inspector = null;
}
},
/**
* When a new node is selected in the inspector.
*/
onNewNodeFromInspector: function TV_onNewNodeFromInspector()
{
if (this.inspector &&
this.inspector.selection.reason != "tilt") {
let selection = this.inspector.selection;
let canHighlightNode = selection.isNode() &&
selection.isConnected() &&
selection.isElementNode();
if (canHighlightNode) {
this.presenter.highlightNode(selection.node);
} else {
this.presenter.highlightNodeFor(-1);
}
}
},
/**
* When a new node is selected in Tilt.
*/
onNewNodeFromTilt: function TV_onNewNodeFromTilt()
{
if (!this.inspector) {
return;
}
let nodeIndex = this.presenter._currentSelection;
if (nodeIndex < 0) {
this.inspector.selection.setNodeFront(null, "tilt");
}
let node = this.presenter._traverseData.nodes[nodeIndex];
node = this.inspector.walker.frontForRawNode(node);
this.inspector.selection.setNodeFront(node, "tilt");
},
};
/**
* This object manages the visualization logic and drawing loop.
*
* @param {HTMLCanvasElement} aCanvas
* the canvas element used for rendering
* @param {Window} aChromeWindow
* a reference to the top-level window
* @param {Window} aContentWindow
* the content window holding the document to be visualized
* @param {Object} aNotifications
* necessary notifications for Tilt
* @param {Function} onError
* function called if initialization failed
* @param {Function} onLoad
* function called if initialization worked
*/
TiltVisualizer.Presenter = function TV_Presenter(
aCanvas, aChromeWindow, aContentWindow, aNotifications, onError, onLoad)
{
/**
* A canvas overlay used for drawing the visualization.
*/
this.canvas = aCanvas;
/**
* Save a reference to the top-level window, to access Tilt.
*/
this.chromeWindow = aChromeWindow;
/**
* The content window generating the visualization
*/
this.contentWindow = aContentWindow;
/**
* Shortcut for accessing notifications strings.
*/
this.NOTIFICATIONS = aNotifications;
/**
* Use the default node callback function
*/
this.nodeCallback = null;
/**
* Create the renderer, containing useful functions for easy drawing.
*/
this._renderer = new TiltGL.Renderer(aCanvas, onError, onLoad);
/**
* A custom shader used for drawing the visualization mesh.
*/
this._visualizationProgram = null;
/**
* The combined mesh representing the document visualization.
*/
this._texture = null;
this._meshData = null;
this._meshStacks = null;
this._meshWireframe = null;
this._traverseData = null;
/**
* A highlight quad drawn over a stacked dom node.
*/
this._highlight = {
disabled: true,
v0: vec3.create(),
v1: vec3.create(),
v2: vec3.create(),
v3: vec3.create()
};
/**
* Scene transformations, exposing offset, translation and rotation.
* Modified by events in the controller through delegate functions.
*/
this.transforms = {
zoom: 1,
offset: vec3.create(), // mesh offset, aligned to the viewport center
translation: vec3.create(), // scene translation, on the [x, y, z] axis
rotation: quat4.create() // scene rotation, expressed as a quaternion
};
/**
* Variables holding information about the initial and current node selected.
*/
this._currentSelection = -1; // the selected node index
this._initialMeshConfiguration = false; // true if the 3D mesh was configured
/**
* Variable specifying if the scene should be redrawn.
* This should happen usually when the visualization is translated/rotated.
*/
this._redraw = true;
/**
* Total time passed since the rendering started.
* If the rendering is paused, this property won't get updated.
*/
this._time = 0;
/**
* Frame delta time (the ammount of time passed for each frame).
* This is used to smoothly interpolate animation transfroms.
*/
this._delta = 0;
this._prevFrameTime = 0;
this._currFrameTime = 0;
};
TiltVisualizer.Presenter.prototype = {
/**
* Initializes the presenter and starts the animation loop
*/
init: function TVP_init()
{
this._setup();
this._loop();
},
/**
* The initialization logic.
*/
_setup: function TVP__setup()
{
let renderer = this._renderer;
// if the renderer was destroyed, don't continue setup
if (!renderer || !renderer.context) {
return;
}
// create the visualization shaders and program to draw the stacks mesh
this._visualizationProgram = new renderer.Program({
vs: TiltVisualizer.MeshShader.vs,
fs: TiltVisualizer.MeshShader.fs,
attributes: ["vertexPosition", "vertexTexCoord", "vertexColor"],
uniforms: ["mvMatrix", "projMatrix", "sampler"]
});
// get the document zoom to properly scale the visualization
this.transforms.zoom = this._getPageZoom();
// bind the owner object to the necessary functions
TiltUtils.bindObjectFunc(this, "^_on");
TiltUtils.bindObjectFunc(this, "_loop");
this._setupTexture();
this._setupMeshData();
this._setupEventListeners();
this.canvas.focus();
},
/**
* Get page zoom factor.
* @return {Number}
*/
_getPageZoom: function TVP__getPageZoom() {
return this.contentWindow
.QueryInterface(Ci.nsIInterfaceRequestor)
.getInterface(Ci.nsIDOMWindowUtils)
.fullZoom;
},
/**
* The animation logic.
*/
_loop: function TVP__loop()
{
let renderer = this._renderer;
// if the renderer was destroyed, don't continue rendering
if (!renderer || !renderer.context) {
return;
}
// prepare for the next frame of the animation loop
this.chromeWindow.mozRequestAnimationFrame(this._loop);
// only redraw if we really have to
if (this._redraw) {
this._redraw = false;
this._drawVisualization();
}
// update the current presenter transfroms from the controller
if ("function" === typeof this._controllerUpdate) {
this._controllerUpdate(this._time, this._delta);
}
this._handleFrameDelta();
this._handleKeyframeNotifications();
},
/**
* Calculates the current frame delta time.
*/
_handleFrameDelta: function TVP__handleFrameDelta()
{
this._prevFrameTime = this._currFrameTime;
this._currFrameTime = this.chromeWindow.mozAnimationStartTime;
this._delta = this._currFrameTime - this._prevFrameTime;
},
/**
* Draws the visualization mesh and highlight quad.
*/
_drawVisualization: function TVP__drawVisualization()
{
let renderer = this._renderer;
let transforms = this.transforms;
let w = renderer.width;
let h = renderer.height;
let ih = renderer.initialHeight;
// if the mesh wasn't created yet, don't continue rendering
if (!this._meshStacks || !this._meshWireframe) {
return;
}
// clear the context to an opaque black background
renderer.clear();
renderer.perspective();
// apply a transition transformation using an ortho and perspective matrix
let ortho = mat4.ortho(0, w, h, 0, -1000, 1000);
if (!this._isExecutingDestruction) {
let f = this._time / INTRO_TRANSITION_DURATION;
renderer.lerp(renderer.projMatrix, ortho, f, 8);
} else {
let f = this._time / OUTRO_TRANSITION_DURATION;
renderer.lerp(renderer.projMatrix, ortho, 1 - f, 8);
}
// apply the preliminary transformations to the model view
renderer.translate(w * 0.5, ih * 0.5, -INITIAL_Z_TRANSLATION);
// calculate the camera matrix using the rotation and translation
renderer.translate(transforms.translation[0], 0,
transforms.translation[2]);
renderer.transform(quat4.toMat4(transforms.rotation));
// offset the visualization mesh to center
renderer.translate(transforms.offset[0],
transforms.offset[1] + transforms.translation[1], 0);
renderer.scale(transforms.zoom, transforms.zoom);
// draw the visualization mesh
renderer.strokeWeight(2);
renderer.depthTest(true);
this._drawMeshStacks();
this._drawMeshWireframe();
this._drawHighlight();
// make sure the initial transition is drawn until finished
if (this._time < INTRO_TRANSITION_DURATION ||
this._time < OUTRO_TRANSITION_DURATION) {
this._redraw = true;
}
this._time += this._delta;
},
/**
* Draws the meshStacks object.
*/
_drawMeshStacks: function TVP__drawMeshStacks()
{
let renderer = this._renderer;
let mesh = this._meshStacks;
let visualizationProgram = this._visualizationProgram;
let texture = this._texture;
let mvMatrix = renderer.mvMatrix;
let projMatrix = renderer.projMatrix;
// use the necessary shader
visualizationProgram.use();
for (let i = 0, len = mesh.length; i < len; i++) {
let group = mesh[i];
// bind the attributes and uniforms as necessary
visualizationProgram.bindVertexBuffer("vertexPosition", group.vertices);
visualizationProgram.bindVertexBuffer("vertexTexCoord", group.texCoord);
visualizationProgram.bindVertexBuffer("vertexColor", group.color);
visualizationProgram.bindUniformMatrix("mvMatrix", mvMatrix);
visualizationProgram.bindUniformMatrix("projMatrix", projMatrix);
visualizationProgram.bindTexture("sampler", texture);
// draw the vertices as TRIANGLES indexed elements
renderer.drawIndexedVertices(renderer.context.TRIANGLES, group.indices);
}
// save the current model view and projection matrices
mesh.mvMatrix = mat4.create(mvMatrix);
mesh.projMatrix = mat4.create(projMatrix);
},
/**
* Draws the meshWireframe object.
*/
_drawMeshWireframe: function TVP__drawMeshWireframe()
{
let renderer = this._renderer;
let mesh = this._meshWireframe;
for (let i = 0, len = mesh.length; i < len; i++) {
let group = mesh[i];
// use the necessary shader
renderer.useColorShader(group.vertices, WIREFRAME_COLOR);
// draw the vertices as LINES indexed elements
renderer.drawIndexedVertices(renderer.context.LINES, group.indices);
}
},
/**
* Draws a highlighted quad around a currently selected node.
*/
_drawHighlight: function TVP__drawHighlight()
{
// check if there's anything to highlight (i.e any node is selected)
if (!this._highlight.disabled) {
// set the corresponding state to draw the highlight quad
let renderer = this._renderer;
let highlight = this._highlight;
renderer.depthTest(false);
renderer.fill(highlight.fill, 0.5);
renderer.stroke(highlight.stroke);
renderer.strokeWeight(highlight.strokeWeight);
renderer.quad(highlight.v0, highlight.v1, highlight.v2, highlight.v3);
}
},
/**
* Creates or refreshes the texture applied to the visualization mesh.
*/
_setupTexture: function TVP__setupTexture()
{
let renderer = this._renderer;
// destroy any previously created texture
TiltUtils.destroyObject(this._texture); this._texture = null;
// if the renderer was destroyed, don't continue setup
if (!renderer || !renderer.context) {
return;
}
// get the maximum texture size
this._maxTextureSize =
renderer.context.getParameter(renderer.context.MAX_TEXTURE_SIZE);
// use a simple shim to get the image representation of the document
// this will be removed once the MOZ_window_region_texture bug #653656
// is finished; currently just converting the document image to a texture
// applied to the mesh
this._texture = new renderer.Texture({
source: TiltGL.TextureUtils.createContentImage(this.contentWindow,
this._maxTextureSize),
format: "RGB"
});
if ("function" === typeof this._onSetupTexture) {
this._onSetupTexture();
this._onSetupTexture = null;
}
},
/**
* Create the combined mesh representing the document visualization by
* traversing the document & adding a stack for each node that is drawable.
*
* @param {Object} aMeshData
* object containing the necessary mesh verts, texcoord etc.
*/
_setupMesh: function TVP__setupMesh(aMeshData)
{
let renderer = this._renderer;
// destroy any previously created mesh
TiltUtils.destroyObject(this._meshStacks); this._meshStacks = [];
TiltUtils.destroyObject(this._meshWireframe); this._meshWireframe = [];
// if the renderer was destroyed, don't continue setup
if (!renderer || !renderer.context) {
return;
}
// save the mesh data for future use
this._meshData = aMeshData;
// create a sub-mesh for each group in the mesh data
for (let i = 0, len = aMeshData.groups.length; i < len; i++) {
let group = aMeshData.groups[i];
// create the visualization mesh using the vertices, texture coordinates
// and indices computed when traversing the document object model
this._meshStacks.push({
vertices: new renderer.VertexBuffer(group.vertices, 3),
texCoord: new renderer.VertexBuffer(group.texCoord, 2),
color: new renderer.VertexBuffer(group.color, 3),
indices: new renderer.IndexBuffer(group.stacksIndices)
});
// additionally, create a wireframe representation to make the
// visualization a bit more pretty
this._meshWireframe.push({
vertices: this._meshStacks[i].vertices,
indices: new renderer.IndexBuffer(group.wireframeIndices)
});
}
// configure the required mesh transformations and background only once
if (!this._initialMeshConfiguration) {
this._initialMeshConfiguration = true;
// set the necessary mesh offsets
this.transforms.offset[0] = -renderer.width * 0.5;
this.transforms.offset[1] = -renderer.height * 0.5;
// make sure the canvas is opaque now that the initialization is finished
this.canvas.style.background = TiltVisualizerStyle.canvas.background;
this._drawVisualization();
this._redraw = true;
}
if ("function" === typeof this._onSetupMesh) {
this._onSetupMesh();
this._onSetupMesh = null;
}
},
/**
* Computes the mesh vertices, texture coordinates etc. by groups of nodes.
*/
_setupMeshData: function TVP__setupMeshData()
{
let renderer = this._renderer;
// if the renderer was destroyed, don't continue setup
if (!renderer || !renderer.context) {
return;
}
// traverse the document and get the depths, coordinates and local names
this._traverseData = TiltUtils.DOM.traverse(this.contentWindow, {
nodeCallback: this.nodeCallback,
invisibleElements: INVISIBLE_ELEMENTS,
minSize: ELEMENT_MIN_SIZE,
maxX: this._texture.width,
maxY: this._texture.height
});
let worker = new ChromeWorker(TILT_CRAFTER);
worker.addEventListener("message", function TVP_onMessage(event) {
this._setupMesh(event.data);
}.bind(this), false);
// calculate necessary information regarding vertices, texture coordinates
// etc. in a separate thread, as this process may take a while
worker.postMessage({
maxGroupNodes: MAX_GROUP_NODES,
style: TiltVisualizerStyle.nodes,
texWidth: this._texture.width,
texHeight: this._texture.height,
nodesInfo: this._traverseData.info
});
},
/**
* Sets up event listeners necessary for the presenter.
*/
_setupEventListeners: function TVP__setupEventListeners()
{
this.contentWindow.addEventListener("resize", this._onResize, false);
},
/**
* Called when the content window of the current browser is resized.
*/
_onResize: function TVP_onResize(e)
{
let zoom = this._getPageZoom();
let width = e.target.innerWidth * zoom;
let height = e.target.innerHeight * zoom;
// handle aspect ratio changes to update the projection matrix
this._renderer.width = width;
this._renderer.height = height;
this._redraw = true;
},
/**
* Highlights a specific node.
*
* @param {Element} aNode
* the html node to be highlighted
* @param {String} aFlags
* flags specifying highlighting options
*/
highlightNode: function TVP_highlightNode(aNode, aFlags)
{
this.highlightNodeFor(this._traverseData.nodes.indexOf(aNode), aFlags);
},
/**
* Picks a stacked dom node at the x and y screen coordinates and highlights
* the selected node in the mesh.
*
* @param {Number} x
* the current horizontal coordinate of the mouse
* @param {Number} y
* the current vertical coordinate of the mouse
* @param {Object} aProperties
* an object containing the following properties:
* {Function} onpick: function to be called after picking succeeded
* {Function} onfail: function to be called after picking failed
*/
highlightNodeAt: function TVP_highlightNodeAt(x, y, aProperties)
{
// make sure the properties parameter is a valid object
aProperties = aProperties || {};
// try to pick a mesh node using the current x, y coordinates
this.pickNode(x, y, {
/**
* Mesh picking failed (nothing was found for the picked point).
*/
onfail: function TVP_onHighlightFail()
{
this.highlightNodeFor(-1);
if ("function" === typeof aProperties.onfail) {
aProperties.onfail();
}
}.bind(this),
/**
* Mesh picking succeeded.
*
* @param {Object} aIntersection
* object containing the intersection details
*/
onpick: function TVP_onHighlightPick(aIntersection)
{
this.highlightNodeFor(aIntersection.index);
if ("function" === typeof aProperties.onpick) {
aProperties.onpick();
}
}.bind(this)
});
},
/**
* Sets the corresponding highlight coordinates and color based on the
* information supplied.
*
* @param {Number} aNodeIndex
* the index of the node in the this._traverseData array
* @param {String} aFlags
* flags specifying highlighting options
*/
highlightNodeFor: function TVP_highlightNodeFor(aNodeIndex, aFlags)
{
this._redraw = true;
// if the node was already selected, don't do anything
if (this._currentSelection === aNodeIndex) {
return;
}
// if an invalid or nonexisted node is specified, disable the highlight
if (aNodeIndex < 0) {
this._currentSelection = -1;
this._highlight.disabled = true;
Services.obs.notifyObservers(this.contentWindow, this.NOTIFICATIONS.UNHIGHLIGHTING, null);
return;
}
let highlight = this._highlight;
let info = this._traverseData.info[aNodeIndex];
let style = TiltVisualizerStyle.nodes;
highlight.disabled = false;
highlight.fill = style[info.name] || style.highlight.defaultFill;
highlight.stroke = style.highlight.defaultStroke;
highlight.strokeWeight = style.highlight.defaultStrokeWeight;
let x = info.coord.left;
let y = info.coord.top;
let w = info.coord.width;
let h = info.coord.height;
let z = info.coord.depth + info.coord.thickness;
vec3.set([x, y, z], highlight.v0);
vec3.set([x + w, y, z], highlight.v1);
vec3.set([x + w, y + h, z], highlight.v2);
vec3.set([x, y + h, z], highlight.v3);
this._currentSelection = aNodeIndex;
// if something is highlighted, make sure it's inside the current viewport;
// the point which should be moved into view is considered the center [x, y]
// position along the top edge of the currently selected node
if (aFlags && aFlags.indexOf("moveIntoView") !== -1)
{
this.controller.arcball.moveIntoView(vec3.lerp(
vec3.scale(this._highlight.v0, this.transforms.zoom, []),
vec3.scale(this._highlight.v1, this.transforms.zoom, []), 0.5));
}
Services.obs.notifyObservers(this.contentWindow, this.NOTIFICATIONS.HIGHLIGHTING, null);
},
/**
* Deletes a node from the visualization mesh.
*
* @param {Number} aNodeIndex
* the index of the node in the this._traverseData array;
* if not specified, it will default to the current selection
*/
deleteNode: function TVP_deleteNode(aNodeIndex)
{
// we probably don't want to delete the html or body node.. just sayin'
if ((aNodeIndex = aNodeIndex || this._currentSelection) < 1) {
return;
}
let renderer = this._renderer;
let groupIndex = parseInt(aNodeIndex / MAX_GROUP_NODES);
let nodeIndex = parseInt((aNodeIndex + (groupIndex ? 1 : 0)) % MAX_GROUP_NODES);
let group = this._meshStacks[groupIndex];
let vertices = group.vertices.components;
for (let i = 0, k = 36 * nodeIndex; i < 36; i++) {
vertices[i + k] = 0;
}
group.vertices = new renderer.VertexBuffer(vertices, 3);
this._highlight.disabled = true;
this._redraw = true;
Services.obs.notifyObservers(this.contentWindow, this.NOTIFICATIONS.NODE_REMOVED, null);
},
/**
* Picks a stacked dom node at the x and y screen coordinates and issues
* a callback function with the found intersection.
*
* @param {Number} x
* the current horizontal coordinate of the mouse
* @param {Number} y
* the current vertical coordinate of the mouse
* @param {Object} aProperties
* an object containing the following properties:
* {Function} onpick: function to be called at intersection
* {Function} onfail: function to be called if no intersections
*/
pickNode: function TVP_pickNode(x, y, aProperties)
{
// make sure the properties parameter is a valid object
aProperties = aProperties || {};
// if the mesh wasn't created yet, don't continue picking
if (!this._meshStacks || !this._meshWireframe) {
return;
}
let worker = new ChromeWorker(TILT_PICKER);
worker.addEventListener("message", function TVP_onMessage(event) {
if (event.data) {
if ("function" === typeof aProperties.onpick) {
aProperties.onpick(event.data);
}
} else {
if ("function" === typeof aProperties.onfail) {
aProperties.onfail();
}
}
}, false);
let zoom = this._getPageZoom();
let width = this._renderer.width * zoom;
let height = this._renderer.height * zoom;
x *= zoom;
y *= zoom;
// create a ray following the mouse direction from the near clipping plane
// to the far clipping plane, to check for intersections with the mesh,
// and do all the heavy lifting in a separate thread
worker.postMessage({
vertices: this._meshData.allVertices,
// create the ray destined for 3D picking
ray: vec3.createRay([x, y, 0], [x, y, 1], [0, 0, width, height],
this._meshStacks.mvMatrix,
this._meshStacks.projMatrix)
});
},
/**
* Delegate translation method, used by the controller.
*
* @param {Array} aTranslation
* the new translation on the [x, y, z] axis
*/
setTranslation: function TVP_setTranslation(aTranslation)
{
let x = aTranslation[0];
let y = aTranslation[1];
let z = aTranslation[2];
let transforms = this.transforms;
// only update the translation if it's not already set
if (transforms.translation[0] !== x ||
transforms.translation[1] !== y ||
transforms.translation[2] !== z) {
vec3.set(aTranslation, transforms.translation);
this._redraw = true;
}
},
/**
* Delegate rotation method, used by the controller.
*
* @param {Array} aQuaternion
* the rotation quaternion, as [x, y, z, w]
*/
setRotation: function TVP_setRotation(aQuaternion)
{
let x = aQuaternion[0];
let y = aQuaternion[1];
let z = aQuaternion[2];
let w = aQuaternion[3];
let transforms = this.transforms;
// only update the rotation if it's not already set
if (transforms.rotation[0] !== x ||
transforms.rotation[1] !== y ||
transforms.rotation[2] !== z ||
transforms.rotation[3] !== w) {
quat4.set(aQuaternion, transforms.rotation);
this._redraw = true;
}
},
/**
* Handles notifications at specific frame counts.
*/
_handleKeyframeNotifications: function TV__handleKeyframeNotifications()
{
if (!TiltVisualizer.Prefs.introTransition && !this._isExecutingDestruction) {
this._time = INTRO_TRANSITION_DURATION;
}
if (!TiltVisualizer.Prefs.outroTransition && this._isExecutingDestruction) {
this._time = OUTRO_TRANSITION_DURATION;
}
if (this._time >= INTRO_TRANSITION_DURATION &&
!this._isInitializationFinished &&
!this._isExecutingDestruction) {
this._isInitializationFinished = true;
Services.obs.notifyObservers(this.contentWindow, this.NOTIFICATIONS.INITIALIZED, null);
if ("function" === typeof this._onInitializationFinished) {
this._onInitializationFinished();
}
}
if (this._time >= OUTRO_TRANSITION_DURATION &&
!this._isDestructionFinished &&
this._isExecutingDestruction) {
this._isDestructionFinished = true;
Services.obs.notifyObservers(this.contentWindow, this.NOTIFICATIONS.BEFORE_DESTROYED, null);
if ("function" === typeof this._onDestructionFinished) {
this._onDestructionFinished();
}
}
},
/**
* Starts executing the destruction sequence and issues a callback function
* when finished.
*
* @param {Function} aCallback
* the destruction finished callback
*/
executeDestruction: function TV_executeDestruction(aCallback)
{
if (!this._isExecutingDestruction) {
this._isExecutingDestruction = true;
this._onDestructionFinished = aCallback;
// if we execute the destruction after the initialization finishes,
// proceed normally; otherwise, skip everything and immediately issue
// the callback
if (this._time > OUTRO_TRANSITION_DURATION) {
this._time = 0;
this._redraw = true;
} else {
aCallback();
}
}
},
/**
* Checks if this object was initialized properly.
*
* @return {Boolean} true if the object was initialized properly
*/
isInitialized: function TVP_isInitialized()
{
return this._renderer && this._renderer.context;
},
/**
* Function called when this object is destroyed.
*/
_finalize: function TVP__finalize()
{
TiltUtils.destroyObject(this._visualizationProgram);
TiltUtils.destroyObject(this._texture);
if (this._meshStacks) {
this._meshStacks.forEach(function(group) {
TiltUtils.destroyObject(group.vertices);
TiltUtils.destroyObject(group.texCoord);
TiltUtils.destroyObject(group.color);
TiltUtils.destroyObject(group.indices);
});
}
if (this._meshWireframe) {
this._meshWireframe.forEach(function(group) {
TiltUtils.destroyObject(group.indices);
});
}
TiltUtils.destroyObject(this._renderer);
// Closing the tab would result in contentWindow being a dead object,
// so operations like removing event listeners won't work anymore.
if (this.contentWindow == this.chromeWindow.content) {
this.contentWindow.removeEventListener("resize", this._onResize, false);
}
}
};
/**
* A mouse and keyboard controller implementation.
*
* @param {HTMLCanvasElement} aCanvas
* the visualization canvas element
* @param {TiltVisualizer.Presenter} aPresenter
* the presenter instance to control
*/
TiltVisualizer.Controller = function TV_Controller(aCanvas, aPresenter)
{
/**
* A canvas overlay on which mouse and keyboard event listeners are attached.
*/
this.canvas = aCanvas;
/**
* Save a reference to the presenter to modify its model-view transforms.
*/
this.presenter = aPresenter;
this.presenter.controller = this;
/**
* The initial controller dimensions and offset, in pixels.
*/
this._zoom = aPresenter.transforms.zoom;
this._left = (aPresenter.contentWindow.pageXOffset || 0) * this._zoom;
this._top = (aPresenter.contentWindow.pageYOffset || 0) * this._zoom;
this._width = aCanvas.width;
this._height = aCanvas.height;
/**
* Arcball used to control the visualization using the mouse.
*/
this.arcball = new TiltVisualizer.Arcball(
this.presenter.chromeWindow, this._width, this._height, 0,
[
this._width + this._left < aPresenter._maxTextureSize ? -this._left : 0,
this._height + this._top < aPresenter._maxTextureSize ? -this._top : 0
]);
/**
* Object containing the rotation quaternion and the translation amount.
*/
this._coordinates = null;
// bind the owner object to the necessary functions
TiltUtils.bindObjectFunc(this, "_update");
TiltUtils.bindObjectFunc(this, "^_on");
// add the necessary event listeners
this.addEventListeners();
// attach this controller's update function to the presenter ondraw event
this.presenter._controllerUpdate = this._update;
};
TiltVisualizer.Controller.prototype = {
/**
* Adds events listeners required by this controller.
*/
addEventListeners: function TVC_addEventListeners()
{
let canvas = this.canvas;
let presenter = this.presenter;
// bind commonly used mouse and keyboard events with the controller
canvas.addEventListener("mousedown", this._onMouseDown, false);
canvas.addEventListener("mouseup", this._onMouseUp, false);
canvas.addEventListener("mousemove", this._onMouseMove, false);
canvas.addEventListener("mouseover", this._onMouseOver, false);
canvas.addEventListener("mouseout", this._onMouseOut, false);
canvas.addEventListener("MozMousePixelScroll", this._onMozScroll, false);
canvas.addEventListener("keydown", this._onKeyDown, false);
canvas.addEventListener("keyup", this._onKeyUp, false);
canvas.addEventListener("blur", this._onBlur, false);
// handle resize events to change the arcball dimensions
presenter.contentWindow.addEventListener("resize", this._onResize, false);
},
/**
* Removes all added events listeners required by this controller.
*/
removeEventListeners: function TVC_removeEventListeners()
{
let canvas = this.canvas;
let presenter = this.presenter;
canvas.removeEventListener("mousedown", this._onMouseDown, false);
canvas.removeEventListener("mouseup", this._onMouseUp, false);
canvas.removeEventListener("mousemove", this._onMouseMove, false);
canvas.removeEventListener("mouseover", this._onMouseOver, false);
canvas.removeEventListener("mouseout", this._onMouseOut, false);
canvas.removeEventListener("MozMousePixelScroll", this._onMozScroll, false);
canvas.removeEventListener("keydown", this._onKeyDown, false);
canvas.removeEventListener("keyup", this._onKeyUp, false);
canvas.removeEventListener("blur", this._onBlur, false);
// Closing the tab would result in contentWindow being a dead object,
// so operations like removing event listeners won't work anymore.
if (presenter.contentWindow == presenter.chromeWindow.content) {
presenter.contentWindow.removeEventListener("resize", this._onResize, false);
}
},
/**
* Function called each frame, updating the visualization camera transforms.
*
* @param {Number} aTime
* total time passed since rendering started
* @param {Number} aDelta
* the current animation frame delta
*/
_update: function TVC__update(aTime, aDelta)
{
this._time = aTime;
this._coordinates = this.arcball.update(aDelta);
this.presenter.setRotation(this._coordinates.rotation);
this.presenter.setTranslation(this._coordinates.translation);
},
/**
* Called once after every time a mouse button is pressed.
*/
_onMouseDown: function TVC__onMouseDown(e)
{
e.target.focus();
e.preventDefault();
e.stopPropagation();
if (this._time < MOUSE_INTRO_DELAY) {
return;
}
// calculate x and y coordinates using using the client and target offset
let button = e.which;
this._downX = e.clientX - e.target.offsetLeft;
this._downY = e.clientY - e.target.offsetTop;
this.arcball.mouseDown(this._downX, this._downY, button);
},
/**
* Called every time a mouse button is released.
*/
_onMouseUp: function TVC__onMouseUp(e)
{
e.preventDefault();
e.stopPropagation();
if (this._time < MOUSE_INTRO_DELAY) {
return;
}
// calculate x and y coordinates using using the client and target offset
let button = e.which;
let upX = e.clientX - e.target.offsetLeft;
let upY = e.clientY - e.target.offsetTop;
// a click in Tilt is issued only when the mouse pointer stays in
// relatively the same position
if (Math.abs(this._downX - upX) < MOUSE_CLICK_THRESHOLD &&
Math.abs(this._downY - upY) < MOUSE_CLICK_THRESHOLD) {
this.presenter.highlightNodeAt(upX, upY);
}
this.arcball.mouseUp(upX, upY, button);
},
/**
* Called every time the mouse moves.
*/
_onMouseMove: function TVC__onMouseMove(e)
{
e.preventDefault();
e.stopPropagation();
if (this._time < MOUSE_INTRO_DELAY) {
return;
}
// calculate x and y coordinates using using the client and target offset
let moveX = e.clientX - e.target.offsetLeft;
let moveY = e.clientY - e.target.offsetTop;
this.arcball.mouseMove(moveX, moveY);
},
/**
* Called when the mouse leaves the visualization bounds.
*/
_onMouseOver: function TVC__onMouseOver(e)
{
e.preventDefault();
e.stopPropagation();
this.arcball.mouseOver();
},
/**
* Called when the mouse leaves the visualization bounds.
*/
_onMouseOut: function TVC__onMouseOut(e)
{
e.preventDefault();
e.stopPropagation();
this.arcball.mouseOut();
},
/**
* Called when the mouse wheel is used.
*/
_onMozScroll: function TVC__onMozScroll(e)
{
e.preventDefault();
e.stopPropagation();
this.arcball.zoom(e.detail);
},
/**
* Called when a key is pressed.
*/
_onKeyDown: function TVC__onKeyDown(e)
{
let code = e.keyCode || e.which;
if (!e.altKey && !e.ctrlKey && !e.metaKey && !e.shiftKey) {
e.preventDefault();
e.stopPropagation();
this.arcball.keyDown(code);
} else {
this.arcball.cancelKeyEvents();
}
if (e.keyCode === e.DOM_VK_ESCAPE) {
let {TiltManager} = require("devtools/tilt/tilt");
let tilt =
TiltManager.getTiltForBrowser(this.presenter.chromeWindow);
e.preventDefault();
e.stopPropagation();
tilt.destroy(tilt.currentWindowId, true);
}
},
/**
* Called when a key is released.
*/
_onKeyUp: function TVC__onKeyUp(e)
{
let code = e.keyCode || e.which;
if (code === e.DOM_VK_X) {
this.presenter.deleteNode();
}
if (code === e.DOM_VK_F) {
let highlight = this.presenter._highlight;
let zoom = this.presenter.transforms.zoom;
this.arcball.moveIntoView(vec3.lerp(
vec3.scale(highlight.v0, zoom, []),
vec3.scale(highlight.v1, zoom, []), 0.5));
}
if (!e.altKey && !e.ctrlKey && !e.metaKey && !e.shiftKey) {
e.preventDefault();
e.stopPropagation();
this.arcball.keyUp(code);
}
},
/**
* Called when the canvas looses focus.
*/
_onBlur: function TVC__onBlur(e) {
this.arcball.cancelKeyEvents();
},
/**
* Called when the content window of the current browser is resized.
*/
_onResize: function TVC__onResize(e)
{
let zoom = this.presenter._getPageZoom();
let width = e.target.innerWidth * zoom;
let height = e.target.innerHeight * zoom;
this.arcball.resize(width, height);
},
/**
* Checks if this object was initialized properly.
*
* @return {Boolean} true if the object was initialized properly
*/
isInitialized: function TVC_isInitialized()
{
return this.arcball ? true : false;
},
/**
* Function called when this object is destroyed.
*/
_finalize: function TVC__finalize()
{
TiltUtils.destroyObject(this.arcball);
TiltUtils.destroyObject(this._coordinates);
this.removeEventListeners();
this.presenter.controller = null;
this.presenter._controllerUpdate = null;
}
};
/**
* This is a general purpose 3D rotation controller described by Ken Shoemake
* in the Graphics Interface ’92 Proceedings. It features good behavior
* easy implementation, cheap execution.
*
* @param {Window} aChromeWindow
* a reference to the top-level window
* @param {Number} aWidth
* the width of canvas
* @param {Number} aHeight
* the height of canvas
* @param {Number} aRadius
* optional, the radius of the arcball
* @param {Array} aInitialTrans
* optional, initial vector translation
* @param {Array} aInitialRot
* optional, initial quaternion rotation
*/
TiltVisualizer.Arcball = function TV_Arcball(
aChromeWindow, aWidth, aHeight, aRadius, aInitialTrans, aInitialRot)
{
/**
* Save a reference to the top-level window to set/remove intervals.
*/
this.chromeWindow = aChromeWindow;
/**
* Values retaining the current horizontal and vertical mouse coordinates.
*/
this._mousePress = vec3.create();
this._mouseRelease = vec3.create();
this._mouseMove = vec3.create();
this._mouseLerp = vec3.create();
this._mouseButton = -1;
/**
* Object retaining the current pressed key codes.
*/
this._keyCode = {};
/**
* The vectors representing the mouse coordinates mapped on the arcball
* and their perpendicular converted from (x, y) to (x, y, z) at specific
* events like mousePressed and mouseDragged.
*/
this._startVec = vec3.create();
this._endVec = vec3.create();
this._pVec = vec3.create();
/**
* The corresponding rotation quaternions.
*/
this._lastRot = quat4.create();
this._deltaRot = quat4.create();
this._currentRot = quat4.create(aInitialRot);
/**
* The current camera translation coordinates.
*/
this._lastTrans = vec3.create();
this._deltaTrans = vec3.create();
this._currentTrans = vec3.create(aInitialTrans);
this._zoomAmount = 0;
/**
* Additional rotation and translation vectors.
*/
this._additionalRot = vec3.create();
this._additionalTrans = vec3.create();
this._deltaAdditionalRot = quat4.create();
this._deltaAdditionalTrans = vec3.create();
// load the keys controlling the arcball
this._loadKeys();
// set the current dimensions of the arcball
this.resize(aWidth, aHeight, aRadius);
};
TiltVisualizer.Arcball.prototype = {
/**
* Call this function whenever you need the updated rotation quaternion
* and the zoom amount. These values will be returned as "rotation" and
* "translation" properties inside an object.
*
* @param {Number} aDelta
* the current animation frame delta
*
* @return {Object} the rotation quaternion and the translation amount
*/
update: function TVA_update(aDelta)
{
let mousePress = this._mousePress;
let mouseRelease = this._mouseRelease;
let mouseMove = this._mouseMove;
let mouseLerp = this._mouseLerp;
let mouseButton = this._mouseButton;
// smoothly update the mouse coordinates
mouseLerp[0] += (mouseMove[0] - mouseLerp[0]) * ARCBALL_SENSITIVITY;
mouseLerp[1] += (mouseMove[1] - mouseLerp[1]) * ARCBALL_SENSITIVITY;
// cache the interpolated mouse coordinates
let x = mouseLerp[0];
let y = mouseLerp[1];
// the smoothed arcball rotation may not be finished when the mouse is
// pressed again, so cancel the rotation if other events occur or the
// animation finishes
if (mouseButton === 3 || x === mouseRelease[0] && y === mouseRelease[1]) {
this._rotating = false;
}
let startVec = this._startVec;
let endVec = this._endVec;
let pVec = this._pVec;
let lastRot = this._lastRot;
let deltaRot = this._deltaRot;
let currentRot = this._currentRot;
// left mouse button handles rotation
if (mouseButton === 1 || this._rotating) {
// the rotation doesn't stop immediately after the left mouse button is
// released, so add a flag to smoothly continue it until it ends
this._rotating = true;
// find the sphere coordinates of the mouse positions
this._pointToSphere(x, y, this.width, this.height, this.radius, endVec);
// compute the vector perpendicular to the start & end vectors
vec3.cross(startVec, endVec, pVec);
// if the begin and end vectors don't coincide
if (vec3.length(pVec) > 0) {
deltaRot[0] = pVec[0];
deltaRot[1] = pVec[1];
deltaRot[2] = pVec[2];
// in the quaternion values, w is cosine (theta / 2),
// where theta is the rotation angle
deltaRot[3] = -vec3.dot(startVec, endVec);
} else {
// return an identity rotation quaternion
deltaRot[0] = 0;
deltaRot[1] = 0;
deltaRot[2] = 0;
deltaRot[3] = 1;
}
// calculate the current rotation based on the mouse click events
quat4.multiply(lastRot, deltaRot, currentRot);
} else {
// save the current quaternion to stack rotations
quat4.set(currentRot, lastRot);
}
let lastTrans = this._lastTrans;
let deltaTrans = this._deltaTrans;
let currentTrans = this._currentTrans;
// right mouse button handles panning
if (mouseButton === 3) {
// calculate a delta translation between the new and old mouse position
// and save it to the current translation
deltaTrans[0] = mouseMove[0] - mousePress[0];
deltaTrans[1] = mouseMove[1] - mousePress[1];
currentTrans[0] = lastTrans[0] + deltaTrans[0];
currentTrans[1] = lastTrans[1] + deltaTrans[1];
} else {
// save the current panning to stack translations
lastTrans[0] = currentTrans[0];
lastTrans[1] = currentTrans[1];
}
let zoomAmount = this._zoomAmount;
let keyCode = this._keyCode;
// mouse wheel handles zooming
deltaTrans[2] = (zoomAmount - currentTrans[2]) * ARCBALL_ZOOM_STEP;
currentTrans[2] += deltaTrans[2];
let additionalRot = this._additionalRot;
let additionalTrans = this._additionalTrans;
let deltaAdditionalRot = this._deltaAdditionalRot;
let deltaAdditionalTrans = this._deltaAdditionalTrans;
let rotateKeys = this.rotateKeys;
let panKeys = this.panKeys;
let zoomKeys = this.zoomKeys;
let resetKey = this.resetKey;
// handle additional rotation and translation by the keyboard
if (keyCode[rotateKeys.left]) {
additionalRot[0] -= ARCBALL_SENSITIVITY * ARCBALL_ROTATION_STEP;
}
if (keyCode[rotateKeys.right]) {
additionalRot[0] += ARCBALL_SENSITIVITY * ARCBALL_ROTATION_STEP;
}
if (keyCode[rotateKeys.up]) {
additionalRot[1] += ARCBALL_SENSITIVITY * ARCBALL_ROTATION_STEP;
}
if (keyCode[rotateKeys.down]) {
additionalRot[1] -= ARCBALL_SENSITIVITY * ARCBALL_ROTATION_STEP;
}
if (keyCode[panKeys.left]) {
additionalTrans[0] -= ARCBALL_SENSITIVITY * ARCBALL_TRANSLATION_STEP;
}
if (keyCode[panKeys.right]) {
additionalTrans[0] += ARCBALL_SENSITIVITY * ARCBALL_TRANSLATION_STEP;
}
if (keyCode[panKeys.up]) {
additionalTrans[1] -= ARCBALL_SENSITIVITY * ARCBALL_TRANSLATION_STEP;
}
if (keyCode[panKeys.down]) {
additionalTrans[1] += ARCBALL_SENSITIVITY * ARCBALL_TRANSLATION_STEP;
}
if (keyCode[zoomKeys["in"][0]] ||
keyCode[zoomKeys["in"][1]] ||
keyCode[zoomKeys["in"][2]]) {
this.zoom(-ARCBALL_TRANSLATION_STEP);
}
if (keyCode[zoomKeys["out"][0]] ||
keyCode[zoomKeys["out"][1]]) {
this.zoom(ARCBALL_TRANSLATION_STEP);
}
if (keyCode[zoomKeys["unzoom"]]) {
this._zoomAmount = 0;
}
if (keyCode[resetKey]) {
this.reset();
}
// update the delta key rotations and translations
deltaAdditionalRot[0] +=
(additionalRot[0] - deltaAdditionalRot[0]) * ARCBALL_SENSITIVITY;
deltaAdditionalRot[1] +=
(additionalRot[1] - deltaAdditionalRot[1]) * ARCBALL_SENSITIVITY;
deltaAdditionalRot[2] +=
(additionalRot[2] - deltaAdditionalRot[2]) * ARCBALL_SENSITIVITY;
deltaAdditionalTrans[0] +=
(additionalTrans[0] - deltaAdditionalTrans[0]) * ARCBALL_SENSITIVITY;
deltaAdditionalTrans[1] +=
(additionalTrans[1] - deltaAdditionalTrans[1]) * ARCBALL_SENSITIVITY;
// create an additional rotation based on the key events
quat4.fromEuler(
deltaAdditionalRot[0],
deltaAdditionalRot[1],
deltaAdditionalRot[2], deltaRot);
// create an additional translation based on the key events
vec3.set([deltaAdditionalTrans[0], deltaAdditionalTrans[1], 0], deltaTrans);
// handle the reset animation steps if necessary
if (this._resetInProgress) {
this._nextResetStep(aDelta || 1);
}
// return the current rotation and translation
return {
rotation: quat4.multiply(deltaRot, currentRot),
translation: vec3.add(deltaTrans, currentTrans)
};
},
/**
* Function handling the mouseDown event.
* Call this when the mouse was pressed.
*
* @param {Number} x
* the current horizontal coordinate of the mouse
* @param {Number} y
* the current vertical coordinate of the mouse
* @param {Number} aButton
* which mouse button was pressed
*/
mouseDown: function TVA_mouseDown(x, y, aButton)
{
// save the mouse down state and prepare for rotations or translations
this._mousePress[0] = x;
this._mousePress[1] = y;
this._mouseButton = aButton;
this._cancelReset();
this._save();
// find the sphere coordinates of the mouse positions
this._pointToSphere(
x, y, this.width, this.height, this.radius, this._startVec);
quat4.set(this._currentRot, this._lastRot);
},
/**
* Function handling the mouseUp event.
* Call this when a mouse button was released.
*
* @param {Number} x
* the current horizontal coordinate of the mouse
* @param {Number} y
* the current vertical coordinate of the mouse
*/
mouseUp: function TVA_mouseUp(x, y)
{
// save the mouse up state and prepare for rotations or translations
this._mouseRelease[0] = x;
this._mouseRelease[1] = y;
this._mouseButton = -1;
},
/**
* Function handling the mouseMove event.
* Call this when the mouse was moved.
*
* @param {Number} x
* the current horizontal coordinate of the mouse
* @param {Number} y
* the current vertical coordinate of the mouse
*/
mouseMove: function TVA_mouseMove(x, y)
{
// save the mouse move state and prepare for rotations or translations
// only if the mouse is pressed
if (this._mouseButton !== -1) {
this._mouseMove[0] = x;
this._mouseMove[1] = y;
}
},
/**
* Function handling the mouseOver event.
* Call this when the mouse enters the context bounds.
*/
mouseOver: function TVA_mouseOver()
{
// if the mouse just entered the parent bounds, stop the animation
this._mouseButton = -1;
},
/**
* Function handling the mouseOut event.
* Call this when the mouse leaves the context bounds.
*/
mouseOut: function TVA_mouseOut()
{
// if the mouse leaves the parent bounds, stop the animation
this._mouseButton = -1;
},
/**
* Function handling the arcball zoom amount.
* Call this, for example, when the mouse wheel was scrolled or zoom keys
* were pressed.
*
* @param {Number} aZoom
* the zoom direction and speed
*/
zoom: function TVA_zoom(aZoom)
{
this._cancelReset();
this._zoomAmount = TiltMath.clamp(this._zoomAmount - aZoom,
ARCBALL_ZOOM_MIN, ARCBALL_ZOOM_MAX);
},
/**
* Function handling the keyDown event.
* Call this when a key was pressed.
*
* @param {Number} aCode
* the code corresponding to the key pressed
*/
keyDown: function TVA_keyDown(aCode)
{
this._cancelReset();
this._keyCode[aCode] = true;
},
/**
* Function handling the keyUp event.
* Call this when a key was released.
*
* @param {Number} aCode
* the code corresponding to the key released
*/
keyUp: function TVA_keyUp(aCode)
{
this._keyCode[aCode] = false;
},
/**
* Maps the 2d coordinates of the mouse location to a 3d point on a sphere.
*
* @param {Number} x
* the current horizontal coordinate of the mouse
* @param {Number} y
* the current vertical coordinate of the mouse
* @param {Number} aWidth
* the width of canvas
* @param {Number} aHeight
* the height of canvas
* @param {Number} aRadius
* optional, the radius of the arcball
* @param {Array} aSphereVec
* a 3d vector to store the sphere coordinates
*/
_pointToSphere: function TVA__pointToSphere(
x, y, aWidth, aHeight, aRadius, aSphereVec)
{
// adjust point coords and scale down to range of [-1..1]
x = (x - aWidth * 0.5) / aRadius;
y = (y - aHeight * 0.5) / aRadius;
// compute the square length of the vector to the point from the center
let normal = 0;
let sqlength = x * x + y * y;
// if the point is mapped outside of the sphere
if (sqlength > 1) {
// calculate the normalization factor
normal = 1 / Math.sqrt(sqlength);
// set the normalized vector (a point on the sphere)
aSphereVec[0] = x * normal;
aSphereVec[1] = y * normal;
aSphereVec[2] = 0;
} else {
// set the vector to a point mapped inside the sphere
aSphereVec[0] = x;
aSphereVec[1] = y;
aSphereVec[2] = Math.sqrt(1 - sqlength);
}
},
/**
* Cancels all pending transformations caused by key events.
*/
cancelKeyEvents: function TVA_cancelKeyEvents()
{
this._keyCode = {};
},
/**
* Cancels all pending transformations caused by mouse events.
*/
cancelMouseEvents: function TVA_cancelMouseEvents()
{
this._rotating = false;
this._mouseButton = -1;
},
/**
* Incremental translation method.
*
* @param {Array} aTranslation
* the translation ammount on the [x, y] axis
*/
translate: function TVP_translate(aTranslation)
{
this._additionalTrans[0] += aTranslation[0];
this._additionalTrans[1] += aTranslation[1];
},
/**
* Incremental rotation method.
*
* @param {Array} aRotation
* the rotation ammount along the [x, y, z] axis
*/
rotate: function TVP_rotate(aRotation)
{
// explicitly rotate along y, x, z values because they're eulerian angles
this._additionalRot[0] += TiltMath.radians(aRotation[1]);
this._additionalRot[1] += TiltMath.radians(aRotation[0]);
this._additionalRot[2] += TiltMath.radians(aRotation[2]);
},
/**
* Moves a target point into view only if it's outside the currently visible
* area bounds (in which case it also resets any additional transforms).
*
* @param {Arary} aPoint
* the [x, y] point which should be brought into view
*/
moveIntoView: function TVA_moveIntoView(aPoint) {
let visiblePointX = -(this._currentTrans[0] + this._additionalTrans[0]);
let visiblePointY = -(this._currentTrans[1] + this._additionalTrans[1]);
if (aPoint[1] - visiblePointY - MOVE_INTO_VIEW_ACCURACY > this.height ||
aPoint[1] - visiblePointY + MOVE_INTO_VIEW_ACCURACY < 0 ||
aPoint[0] - visiblePointX > this.width ||
aPoint[0] - visiblePointX < 0) {
this.reset([0, -aPoint[1]]);
}
},
/**
* Resize this implementation to use different bounds.
* This function is automatically called when the arcball is created.
*
* @param {Number} newWidth
* the new width of canvas
* @param {Number} newHeight
* the new height of canvas
* @param {Number} newRadius
* optional, the new radius of the arcball
*/
resize: function TVA_resize(newWidth, newHeight, newRadius)
{
if (!newWidth || !newHeight) {
return;
}
// set the new width, height and radius dimensions
this.width = newWidth;
this.height = newHeight;
this.radius = newRadius ? newRadius : Math.min(newWidth, newHeight);
this._save();
},
/**
* Starts an animation resetting the arcball transformations to identity.
*
* @param {Array} aFinalTranslation
* optional, final vector translation
* @param {Array} aFinalRotation
* optional, final quaternion rotation
*/
reset: function TVA_reset(aFinalTranslation, aFinalRotation)
{
if ("function" === typeof this._onResetStart) {
this._onResetStart();
this._onResetStart = null;
}
this.cancelMouseEvents();
this.cancelKeyEvents();
this._cancelReset();
this._save();
this._resetFinalTranslation = vec3.create(aFinalTranslation);
this._resetFinalRotation = quat4.create(aFinalRotation);
this._resetInProgress = true;
},
/**
* Cancels the current arcball reset animation if there is one.
*/
_cancelReset: function TVA__cancelReset()
{
if (this._resetInProgress) {
this._resetInProgress = false;
this._save();
if ("function" === typeof this._onResetFinish) {
this._onResetFinish();
this._onResetFinish = null;
this._onResetStep = null;
}
}
},
/**
* Executes the next step in the arcball reset animation.
*
* @param {Number} aDelta
* the current animation frame delta
*/
_nextResetStep: function TVA__nextResetStep(aDelta)
{
// a very large animation frame delta (in case of seriously low framerate)
// would cause all the interpolations to become highly unstable
aDelta = TiltMath.clamp(aDelta, 1, 100);
let fNearZero = EPSILON * EPSILON;
let fInterpLin = ARCBALL_RESET_LINEAR_FACTOR * aDelta;
let fInterpSph = ARCBALL_RESET_SPHERICAL_FACTOR;
let fTran = this._resetFinalTranslation;
let fRot = this._resetFinalRotation;
let t = vec3.create(fTran);
let r = quat4.multiply(quat4.inverse(quat4.create(this._currentRot)), fRot);
// reset the rotation quaternion and translation vector
vec3.lerp(this._currentTrans, t, fInterpLin);
quat4.slerp(this._currentRot, r, fInterpSph);
// also reset any additional transforms by the keyboard or mouse
vec3.scale(this._additionalTrans, fInterpLin);
vec3.scale(this._additionalRot, fInterpLin);
this._zoomAmount *= fInterpLin;
// clear the loop if the all values are very close to zero
if (vec3.length(vec3.subtract(this._lastRot, fRot, [])) < fNearZero &&
vec3.length(vec3.subtract(this._deltaRot, fRot, [])) < fNearZero &&
vec3.length(vec3.subtract(this._currentRot, fRot, [])) < fNearZero &&
vec3.length(vec3.subtract(this._lastTrans, fTran, [])) < fNearZero &&
vec3.length(vec3.subtract(this._deltaTrans, fTran, [])) < fNearZero &&
vec3.length(vec3.subtract(this._currentTrans, fTran, [])) < fNearZero &&
vec3.length(this._additionalRot) < fNearZero &&
vec3.length(this._additionalTrans) < fNearZero) {
this._cancelReset();
}
if ("function" === typeof this._onResetStep) {
this._onResetStep();
}
},
/**
* Loads the keys to control this arcball.
*/
_loadKeys: function TVA__loadKeys()
{
this.rotateKeys = {
"up": Ci.nsIDOMKeyEvent["DOM_VK_W"],
"down": Ci.nsIDOMKeyEvent["DOM_VK_S"],
"left": Ci.nsIDOMKeyEvent["DOM_VK_A"],
"right": Ci.nsIDOMKeyEvent["DOM_VK_D"],
};
this.panKeys = {
"up": Ci.nsIDOMKeyEvent["DOM_VK_UP"],
"down": Ci.nsIDOMKeyEvent["DOM_VK_DOWN"],
"left": Ci.nsIDOMKeyEvent["DOM_VK_LEFT"],
"right": Ci.nsIDOMKeyEvent["DOM_VK_RIGHT"],
};
this.zoomKeys = {
"in": [
Ci.nsIDOMKeyEvent["DOM_VK_I"],
Ci.nsIDOMKeyEvent["DOM_VK_ADD"],
Ci.nsIDOMKeyEvent["DOM_VK_EQUALS"],
],
"out": [
Ci.nsIDOMKeyEvent["DOM_VK_O"],
Ci.nsIDOMKeyEvent["DOM_VK_SUBTRACT"],
],
"unzoom": Ci.nsIDOMKeyEvent["DOM_VK_0"]
};
this.resetKey = Ci.nsIDOMKeyEvent["DOM_VK_R"];
},
/**
* Saves the current arcball state, typically after resize or mouse events.
*/
_save: function TVA__save()
{
if (this._mousePress) {
let x = this._mousePress[0];
let y = this._mousePress[1];
this._mouseMove[0] = x;
this._mouseMove[1] = y;
this._mouseRelease[0] = x;
this._mouseRelease[1] = y;
this._mouseLerp[0] = x;
this._mouseLerp[1] = y;
}
},
/**
* Function called when this object is destroyed.
*/
_finalize: function TVA__finalize()
{
this._cancelReset();
}
};
/**
* Tilt configuration preferences.
*/
TiltVisualizer.Prefs = {
/**
* Specifies if Tilt is enabled or not.
*/
get enabled()
{
return this._enabled;
},
set enabled(value)
{
TiltUtils.Preferences.set("enabled", "boolean", value);
this._enabled = value;
},
get introTransition()
{
return this._introTransition;
},
set introTransition(value)
{
TiltUtils.Preferences.set("intro_transition", "boolean", value);
this._introTransition = value;
},
get outroTransition()
{
return this._outroTransition;
},
set outroTransition(value)
{
TiltUtils.Preferences.set("outro_transition", "boolean", value);
this._outroTransition = value;
},
/**
* Loads the preferences.
*/
load: function TVC_load()
{
let prefs = TiltVisualizer.Prefs;
let get = TiltUtils.Preferences.get;
prefs._enabled = get("enabled", "boolean");
prefs._introTransition = get("intro_transition", "boolean");
prefs._outroTransition = get("outro_transition", "boolean");
}
};
/**
* A custom visualization shader.
*
* @param {Attribute} vertexPosition: the vertex position
* @param {Attribute} vertexTexCoord: texture coordinates used by the sampler
* @param {Attribute} vertexColor: specific [r, g, b] color for each vertex
* @param {Uniform} mvMatrix: the model view matrix
* @param {Uniform} projMatrix: the projection matrix
* @param {Uniform} sampler: the texture sampler to fetch the pixels from
*/
TiltVisualizer.MeshShader = {
/**
* Vertex shader.
*/
vs: [
"attribute vec3 vertexPosition;",
"attribute vec2 vertexTexCoord;",
"attribute vec3 vertexColor;",
"uniform mat4 mvMatrix;",
"uniform mat4 projMatrix;",
"varying vec2 texCoord;",
"varying vec3 color;",
"void main() {",
" gl_Position = projMatrix * mvMatrix * vec4(vertexPosition, 1.0);",
" texCoord = vertexTexCoord;",
" color = vertexColor;",
"}"
].join("\n"),
/**
* Fragment shader.
*/
fs: [
"#ifdef GL_ES",
"precision lowp float;",
"#endif",
"uniform sampler2D sampler;",
"varying vec2 texCoord;",
"varying vec3 color;",
"void main() {",
" if (texCoord.x < 0.0) {",
" gl_FragColor = vec4(color, 1.0);",
" } else {",
" gl_FragColor = vec4(texture2D(sampler, texCoord).rgb, 1.0);",
" }",
"}"
].join("\n")
};