title: Require.js, module dependencies
body: <p>I have few modules: "Shapes.js" which is container for Shape objects(module "Shape.js") "Mouse.js" which will calculate coordinate when user press left click on the mouse and module "Selection.js" which need to do calculations and determinate that coordinate belong to the shape or not.</p>
  
  <p>// Mouse.js<br> </p>
  
  <pre><code>define([], function() {
      function Mouse(element, e) {        
          var offsetX = 0, offsetY = 0;
  
          if (element.offsetParent !== undefined) {
              do {
                  offsetX += element.offsetLeft; 
                  offsetY += element.offsetTop;
              } while ((element = element.offsetParent));
          }
  
          this.getMouseX = function() {
              return e.pageX - offsetX;
          }
          this.getMouseY = function() {
              return e.pageY - offsetY;
          }
      }
      return Mouse;
  });
  </code></pre>
  
  <p>// Selection.js</p>
  
  <pre><code>define(['modules/Shapes', 'modules/Mouse'], function(Shapes, Mouse) {
      var selection;
      document.getElementById('canvas').addEventListener('mousedown', function(e) {
              selection = null;
  
              var mouse = new Mouse(document.getElementById('canvas'), e);
              var shapes = Shapes.getShapes();
  
              for(var i=0; i&lt;shapes.length; i++) {
                  if ((shapes[i].getX() &lt;= mouse.getMouseX()) 
                      &amp;&amp; (shapes[i].getX() + shapes[i].getWidth() &gt;= mouse.getMouseX()) 
                      &amp;&amp; (shapes[i].getY() &lt;= mouse.getMouseY()) 
                      &amp;&amp; (shapes[i].getY() + shapes[i].getHeight() &gt;= mouse.getMouseY())) {
  
                      selection = shapes[i];
                      break;
                  }
              }
          });
      return selection;
  });
  </code></pre>
  
  <p>To keep this question small i will not post "Shape" and "Shapes" module, they are not important. </p>
  
  <p>So now in the "main.js" module i want always to have reference to selected element(or null) when user triger mousedown event but i can't get it. Dont even know from where to start. If i just load Selection module in the main module i will always get undefined.Thanks in advance.</p>
  
  <p>(Code snippets are from Simon Sarris canvas tutorial with minor modification, just trying to do everything through Require.js)</p>
  
  <p>EDIT: @Katana314, did you thought something like this?<br>
  // Selection.js(EDITED)<br><br></p>
  
  <pre><code>define(['modules/Shapes', 'modules/Mouse'], function(Shapes, Mouse) {
  
      var selection;
  
      return function(e) {
          selection = null;
  
          var mouse = new Mouse(document.getElementById('canvas'), e);
          var shapes = Shapes.getShapes();
  
          for(var i=0; i&lt;shapes.length; i++) {
              if ((shapes[i].getX() &lt;= mouse.getMouseX()) 
                  &amp;&amp; (shapes[i].getX() + shapes[i].getWidth() &gt;= mouse.getMouseX()) 
                  &amp;&amp; (shapes[i].getY() &lt;= mouse.getMouseY()) 
                  &amp;&amp; (shapes[i].getY() + shapes[i].getHeight() &gt;= mouse.getMouseY())) {
  
                  selection = shapes[i];
                  break;
              }
          }
  
          return selection;
      }
  });
  </code></pre>
  
  <p>// Main.js</p>
  
  <pre><code>document.getElementById('canvas').addEventListener('mousedown', function(e) {
      console.log(Selection(e)); // Shape... :D
  });
  </code></pre>