/* -*- indent-tabs-mode: nil; js-indent-level: 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"); var TiltGL = require("devtools/client/tilt/tilt-gl"); var TiltUtils = require("devtools/client/tilt/tilt-utils"); var TiltVisualizerStyle = require("devtools/client/tilt/tilt-visualizer-style"); var {EPSILON, TiltMath, vec3, mat4, quat4} = require("devtools/client/tilt/tilt-math"); var {TargetFactory} = require("devtools/client/framework/target"); Cu.import("resource://gre/modules/Services.jsm"); Cu.import("resource://devtools/client/framework/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://devtools/client/tilt/TiltWorkerCrafter.js"; const TILT_PICKER = "resource://devtools/client/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; let frameStartTime = this.chromeWindow.performance.now(); // 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.requestAnimationFrame(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(frameStartTime); this._handleKeyframeNotifications(); }, /** * Calculates the current frame delta time. */ _handleFrameDelta: function TVP__handleFrameDelta(frameStartTime) { this._prevFrameTime = this._currFrameTime; this._currFrameTime = frameStartTime; 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/client/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") };