Mojo JS Bindings: Update User's Guide, examples

examples/js/cube.js

 #!mojo:js_content_handler
 
 // Copyright 2014 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 define("main", [
   "console",
   "mojo/services/public/js/application",
-  "mojo/services/gpu/public/interfaces/command_buffer.mojom",
   "mojo/services/geometry/public/interfaces/geometry.mojom",
   "mojo/services/gpu/public/interfaces/gpu.mojom",
   "mojo/services/gpu/public/interfaces/viewport_parameter_listener.mojom",
   "mojo/services/native_viewport/public/interfaces/native_viewport.mojom",
   "mojo/public/js/core",
   "services/js/modules/gl",
   "services/js/modules/clock",
   "timer",
 ], function(console,
-            appModule,
-            cbModule,
-            geoModule,
-            gpuModule,
-            vplModule,
-            nvModule,
-            coreModule,
-            glModule,
-            clockModule,
-            timerModule) {
+            application,
+            geometry,
+            gpu,
+            vpl,
+            nv,
+            core,
+            gl,
+            clock,
+            timer) {
+
+  var Application = application.Application;

[eseidel, 2015/01/06 21:02:01]

Can we use const?

+  var Context = gl.Context;
+  var Gpu = gpu.Gpu;
+  var Size = geometry.Size;
+  var ViewportParameterListener = vpl.ViewportParameterListener;
+  var NativeViewport = nv.NativeViewport;
 
   const VERTEX_SHADER_SOURCE = [
     'uniform mat4 u_mvpMatrix;',
     'attribute vec4 a_position;',
     'void main()',
     '{',
     '   gl_Position = u_mvpMatrix * a_position;',
     '}'
   ].join('\n');
 
@@ skipping 238 matching lines @@
     vboIndices = gl.createBuffer();
     gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, vboIndices);
     gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, cubeIndices, gl.STATIC_DRAW);
     gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, 0);
 
     return cubeIndices.length;
   }
 
   class GLES2ClientImpl {
     constructor (remotePipe, size) {
-      this.gl_ = new glModule.Context(remotePipe, this.contextLost.bind(this));
-      this.lastTime_ = clockModule.seconds();
+      this.gl_ = new Context(remotePipe, this.contextLost.bind(this));
+      this.lastTime_ = clock.seconds();
       this.angle_ = 45;
 
       this.program_ = loadProgram(this.gl_);
       this.positionLocation_ =
         this.gl_.getAttribLocation(this.program_, 'a_position');
       this.mvpLocation_ =
         this.gl_.getUniformLocation(this.program_, 'u_mvpMatrix');
       this.numIndices_ = generateCube(this.gl_);
       this.mvpMatrix_ = new ESMatrix();
       this.mvpMatrix_.loadIdentity();
 
       this.gl_.clearColor(0, 0, 0, 0);
       this.setDimensions(size);
       this.timer_ =
-          timerModule.createRepeating(16, this.handleTimer.bind(this));
+          timer.createRepeating(16, this.handleTimer.bind(this));
     }
 
     setDimensions(size) {
       this.width_ = size.width;
       this.height_ = size.height;
       this.gl_.resize(size.width, size.height, 1);
     }
 
     drawCube() {
       this.gl_.viewport(0, 0, this.width_, this.height_);
       this.gl_.clear(this.gl_.COLOR_BUFFER_BIT);
       this.gl_.useProgram(this.program_);
       this.gl_.bindBuffer(this.gl_.ARRAY_BUFFER, vboVertices);
       this.gl_.bindBuffer(this.gl_.ELEMENT_ARRAY_BUFFER, vboIndices);
       this.gl_.vertexAttribPointer(this.positionLocation_, 3, this.gl_.FLOAT,
                                    false, 12, 0);
       this.gl_.enableVertexAttribArray(this.positionLocation_);
       this.gl_.uniformMatrix4fv(this.mvpLocation_, false, this.mvpMatrix_.m);
       this.gl_.drawElements(this.gl_.TRIANGLES, this.numIndices_,
                             this.gl_.UNSIGNED_SHORT, 0);
       this.gl_.swapBuffers();
     };
 
     handleTimer() {
-      var now = clockModule.seconds();
+      var now = clock.seconds();
       var secondsDelta = now - this.lastTime_;
       this.lastTime_ = now;
 
       this.angle_ += this.getRotationForTimeDelta(secondsDelta);
       this.angle_ = this.angle_ % 360;
 
       var aspect = this.width_ / this.height_;
 
       var perspective = new ESMatrix();
       perspective.loadIdentity();
@@ skipping 18 matching lines @@
     };
 
     quit() {
       if (this.timer_) {
         this.timer_.cancel();
         this.timer_ = null;
       }
     }
   }
 
-  class CubeDemo extends appModule.Application {
+  class CubeDemo extends Application {
     initialize(args) {
       this.viewport = this.shell.connectToService(
-          "mojo:native_viewport_service", nvModule.NativeViewport, this);
+          "mojo:native_viewport_service", NativeViewport, this);
 
       this.gpu = this.shell.connectToService(
-          "mojo:native_viewport_service", gpuModule.Gpu);
+          "mojo:native_viewport_service", Gpu);
 
       var app = this;
-      var viewportSize = new geoModule.Size({width: 800, height: 600});
+      var viewportSize = new Size({width: 800, height: 600});
       this.viewport.create(viewportSize).then(
         function(result) {
           app.onViewportCreated(result.native_viewport_id, viewportSize);
         });
 
       this.viewport.setEventDispatcher(this);
       this.viewport.show();
     }
 
     onViewportCreated(id, size) {
-      this.vpl = new vplModule.ViewportParameterListener.stubClass({
+      this.vpl = new ViewportParameterListener.stubClass({
         onVSyncParametersUpdated: function(timebase, interval) {
           console.log("onVSyncParametersUpdated");
         }
       });
-      var pipe = coreModule.createMessagePipe();
+      var pipe = core.createMessagePipe();
       this.gpu.createOnscreenGLES2Context(id, size, pipe.handle1, this.vpl);
       this.gles2_ = new GLES2ClientImpl(pipe.handle0, size);
     }
 
     onEvent(event) {
       return Promise.resolve(); // This just gates the next event delivery
     }
 
     onSizeChanged(size) {
       if (this.gles2_)
         this.gles2_.setDimensions(size);
     }
 
     onDestroyed() {
       this.quit();
     }
   }
 
   return CubeDemo;
 });