Reputation: 10496
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.
// Mouse.js
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;
});
// Selection.js
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<shapes.length; i++) {
if ((shapes[i].getX() <= mouse.getMouseX())
&& (shapes[i].getX() + shapes[i].getWidth() >= mouse.getMouseX())
&& (shapes[i].getY() <= mouse.getMouseY())
&& (shapes[i].getY() + shapes[i].getHeight() >= mouse.getMouseY())) {
selection = shapes[i];
break;
}
}
});
return selection;
});
To keep this question small i will not post "Shape" and "Shapes" module, they are not important.
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.
(Code snippets are from Simon Sarris canvas tutorial with minor modification, just trying to do everything through Require.js)
EDIT: @Katana314, did you thought something like this?
// Selection.js(EDITED)
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<shapes.length; i++) {
if ((shapes[i].getX() <= mouse.getMouseX())
&& (shapes[i].getX() + shapes[i].getWidth() >= mouse.getMouseX())
&& (shapes[i].getY() <= mouse.getMouseY())
&& (shapes[i].getY() + shapes[i].getHeight() >= mouse.getMouseY())) {
selection = shapes[i];
break;
}
}
return selection;
}
});
// Main.js
document.getElementById('canvas').addEventListener('mousedown', function(e) {
console.log(Selection(e)); // Shape... :D
});
Upvotes: 0
Views: 812
Reputation: 8620
EDIT: Misread something, skip ahead. Original reply below: Part of the point of requirejs is that a module only be instantiated once. This is actually running counter to how your setup is at the moment, though.
return
ed result (a constructor function) as module path "Mouse"return
ed result (selection
, which has not received a value yet) as module path "Selection"I think the goal you want here is to return some sort of unchanging object, or even a function, from Selection. Then, whatever is requiring it can do something like this:
require('Selection', function(getSelection) {
var currentElement = getSelection(); // and so on...
});
Since your question was focused on RequireJS, I haven't really analyzed the other functionality of the code for other errors though.
EDIT: Actually, I may have misread a small part of your syntax. It does seem like you're already returning a function in your module, and not the selection itself. The issue at hand may be more to do with the code that checks the active selection. Just to verify, how are you including Selection in your other code, and have you tried stepping through its contents with a debugger?
Upvotes: 1