We Keep Coding

Moving multiple objects simultaneously in createJS/easelJS

I've been using easelJS within the createJS framework for a project and have enjoyed it a lot until recently hitting a roadblock. I have multiple objects that I'd like to move simultaneously when one of the group is dragged. Here is my current situation:
What I'd like to do is when the red circle is moved, the red crosshairs would also move so that they appear to be "locked" to the circle. The same with the green circle.
I have been able to accomplish something very close to this by adding the circles and crosshairs to a container, as mentioned in the answers to this question:
Easeljs Scrollable Container
But the issue I encounter is that the container is actually a rectangle, such that I can click anywhere between the circle and crosshairs to move the various objects contained within the container. Instead I would like for the objects to be moved only when I click on a circle.
Does anyone have any idea how to accomplish this? Am I correct in thinking this can be accomplished somehow with easelJS containers?

Containers should be fine. You can turn off mouseEnabled on the cross-hair in order to make it ignore the mouse.
You could also just store the offset for each cross-hair/circle, and just set the cross-hair position when the circle moves.
Here is a quick demo:
http://jsfiddle.net/lannymcnie/kah9of6e/
// Set the offset when the circle is pressed
circle.on("mousedown", function(e) {
circle.offset = new createjs.Point(crosshair.x-circle.x, crosshair.y-circle.y);
});
// Add drag and drop to each shape
circle.on("pressmove", handleDrag);
crosshair.on("pressmove", handleDrag);
function handleDrag(e) {
// Move the target to the mouse
e.target.x = e.stageX; e.target.y = e.stageY;
// If the target is the circle, also move the cross-hair
if (e.target == circle) {
// Move the cross-hair
crosshair.x = circle.x + circle.offset.x;
x.y = circle.y + circle.offset.y;
}
}

How can I move dynamically a gridLine with mouse in D3.js?

I would like to know,
how can I move a gridLine up/down dynamically with the mouse in d3.js ?
Thanks a lot :)

The way I have done this in the past is to add an extra horizontal or vertical line to your graph and mark it as hidden.
Then whenever an element is moused-over show the line, whenever the element is moused-out hide the line again. You would need to set the X and Y values of the line such that it matches the location of the element the cursor is hovering over.
This is similar to the way showing/hiding tooltips work: https://gist.github.com/biovisualize/1016860 except you would not use a div (you would use a line) and would not use the location of the mouse pointer (you would use the x and y of the element).

Add an event listener to a drawn object on html5 canvas

I'm making a game where the bubbles (circles) appear on the screen and move upwards and I'm using HTML5 and JavaScript only which means no frameworks like kinetic and no jQuery at all.
I've come to a point where I want to add an event listener to the bubble itself, now I understand that because the bubble is an object on the canvas, it has no method 'addEventListener' so I can't directly add a click event to the bubble, I was wondering if anybody could help me with this problem I'm having? Here is a fiddle of what happens so far...
Bubbles
I have tried to add the event listener to the bubble as specified before by doing this...
bubbles[i].addEventListener('click', function);
I have also tried adding mouseevents such as
bubbles[i].onmouseenter = function () { console.log("blah") }
But now, I'm seriously at a loss
Thanks in advance!

I have updated your sample on jsfiddle demonstrating hit-testing. This sample uses an onmousemove event handler bound to the canvas and performs the actual hit-test when this event occurs. The hit-test in your case is "Is the mouse coordinate with in the bubble's circle?"
Summary of changes:
A "bubble" has a color property to demonstrate the effect of a hit test.
function hitTest(x, y) { ... } used to test whether the passed in coordinates are within the bubble.
function getMouse(e, canvas) ... used to transform the mouse coordinates to canvas relative coordinates. i.e, the mouse coordinate needs to be relative to the upper left hand corner of the canvas to be accurate.

Nested zooms issue in D3

Please see my fiddle: http://jsfiddle.net/haiphong/BRjFE/
You can hold SHIFT and then drag and drop the rectangle to move it and the circle inside it around. You can hold SHIFT and zoom as well. This zoom/pan is done by d3.behavior.zoom(). Works well.
I want to zoom and pan the circle when NOT holding shift. So, I create another d3.behavior.zoom(). However, the circle can be zoomed but not panned. By debugging, I see that when I pan the circle, the handling code doesn't execute.
In sum, when binding a zoom to both the outer g element and the inner g element, the outer works well for zoom/pan; however, the inner only works for zoom. How to get it work for pan as well?

I found the solution for my answer. http://jsfiddle.net/haiphong/BRjFE/4/
When I pan the circle, its zoom event doesn't fire. However, its zoomstart event fires and it is fired before its parent's zoomstart. Somehow, when the parent's zoomstart fires, it eats the circle's event.
So, in the zoomstart of the circle, I force the event stop propagating when SHIFT isn't being hold. That makes the circle zoom fires.

PaperJS: Events are caught when I'm outside the canvas

I'm working in a tool to draw in a canvas using the framework Paper.js
I got an issue using iPad. When I'm drawing with one finger, that works. When I'm drawing with two fingers, one in the canvas and one outside the canvas, the second finger event is caught by the event onMouseDrag, and that put some stroke from the first finger to the second finger, not a good behaviour for me.
Example:
At the beginning, I start to draw with one finger. After I put the second finger outside the canvas and I continue to move my first finger. This is what happen.
Do you have any idea to avoid event when I'm outside the canvas?
Thanks.

If you don't want the finger outside to be detected, limit the target to your canvas.
var canvasElement = document.getElementById('canvasId') //or element
tool.onMouseDrag = function(event) {
if (event.event.target === canvasElement) { //my target canvas was nested like this
path.add(event.point);
path.smooth();
}
}

Well, you could test event.point.isInside(view.bounds). This will likely kill your performance if you test it while drawing, but you could cull the points after you're finished.