Lets say i have 2 objects on my scene and sometimes i want the listener on the first and sometimes on the second object. So i did:
gui = new GUI( { width: 330 } );
box1 = gui.addFolder('ObjectScale');
item1 = box1.add(myObject.scale, 'x', 0, 3).name('Width').listen();
Now i want the listener on my second object, so the variable "myobject" changes to "myobject2".
i tried:
box1.remove(item1);
Here appears this Error "HierarchyRequestError".
Then i wanted to just do this:
item1 = box1.add(myObject2.scale, 'x', 0, 3).name('Width').listen();
Questions: Why is there an Error, how can i cancel the listener and make one to the second object? How can i just remove the item? (i need to do this, too)
i managed doing it with this.
gui.removeFolder(box1);
box1 = gui.addFolder('ObjectScale');
Problem: All listeners will be deleted. For me thats fine. More Code but fine.
Related
I have a fancytree implementation where each parent node has a child node that can be selected. After a user selects specific children, she is able to save her selections and settings so that she can come back to it later.
I'm able to do all of this, except for when I do an initial load of previously saved data. What I need to do is identify the nodes that need to be opened (and its children selected), and have Fancytree open those nodes and select the children.
I'm using lazy loading, and when the lazyloading event fires I'm able to check to see if the child needs to be selected and do so as needed. What I'd like to be able to do is programmatically do the same thing so that all the previously selected children are loaded and selected upon load. Currently, I'm attempting this in this way:
function getMultipleFieldsNoReset(element,selectedFieldsArray) {
var fieldCreator = element.value;
var tree = $("#multipleFields").fancytree("getTree");
var treeOptions = {
url: "urltogetdata",
type: "POST",
data: {
id: fieldCreator
},
dataType: "json"
};
tree.reload(treeOptions);
for (var i = 0, len = selectedFieldsArray.length; i < len; i++) {
var valueAry = selectedFieldsArray[i].split("-");
var growerNode = valueAry[0];
var farmNode = valueAry[1];
var fieldNode = valueAry[2];
var node = tree.getNodeByKey(growerNode);
console.log(node);
}
}
My problem is that tree.getNodeByKey(growerNode) never finds the node, even though I'm able to find the node in the console after this runs. It seems like the parent nodes aren't loaded yet, which can cause this issue, but I'm not certain where I can set a complete function. Where can I do this? Or even better, is there a cleaner way to handle this?
The OP / Fletchius has got solution on this issue and below is the answer of it. I achieved it in some different way but event loadChildren is the same. from which we both found solution. Just I'm loading those nodes which are selected nodes and lazy true meaning there are children down after this node. And only lazy=true can be useful for this.load(); explicit event.
loadChildren:function(event, data){
var node = data.node;
$(node.children).each(function(){
if(this.selected && this.lazy)
{
this.load();
}
});
},
I need to manipulate the text elements of the first and last tick of an axis to bring them more towards the center.
I am trying to select them, one at the time, with something like svg.select('.tick:last-child text') but it doesn't work. I'd then apply .transform('translate(4,0)')...
Am I doing something wrong? How can I achieve this?
One thing you could do is to create custom sub-selections by adding methods to d3.selection.prototype. You could create a selection.first() method that selects the first item in a selection, and a selection.last() method that selects the last item. For instance:
d3.selection.prototype.first = function() {
return d3.select(this[0][0]);
};
d3.selection.prototype.last = function() {
var last = this.size() - 1;
return d3.select(this[0][last]);
};
This would let you do the following:
var tickLabels = svg.selectAll('.tick text');
tickLabels.first()
.attr('transform','translate(4,0)');
tickLabels.last()
.attr('transform','translate(-4,0)');
Of course, you need to make sure that you only have one axis if you do it that way. Otherwise, specify the axis in your initial selection:
var tickLabels = svg.selectAll('.axis.x .tick text');
HERE is an example.
Here's the cleanest method I've found:
g.selectAll(".tick:first-of-type text").remove();
g.selectAll(".tick:last-of-type text").remove();
As google brought me here, I also want to add a cleaner method to what Adam Grey wrote.
Sometimes you just want to do it without taking a reference of selectAll .
svg.selectAll('.gridlines').filter(function(d, i,list) {
return i === list.length - 1;
}).attr('display', 'none');
the 3rd parameter of the filter function gives you the selected List of elements.
They don't exist in d3 specifically, but you can use the .firstChild and .lastChild methods on a node.
You can first select all of the parents of the node, and then operate within the scope of a .each() method, like so:
d3.selectAll('.myParentElements').each(function(d,i){
var firstChild = this.firstChild,
lastChild = this.lastChild;
//Do stuff with first and last child
});
Within the scope of .each(), this refers to the individual node, which is not wrapped by a d3 selection, so all of the standard methods on a node are available.
Using .filter() with a function also works selection.filter(filter) :
var gridlines;
gridlines = svg.selectAll('.gridlines');
gridlines.filter(function(d, i) {
return i === gridlines.size() - 1;
}).attr('display', 'none');
It's for D3.js v4
d3.selection.prototype.first = function() {
return d3.select(
this.nodes()[0]
);
};
d3.selection.prototype.last = function() {
return d3.select(
this.nodes()[this.size() - 1]
);
};
Example:
var lines = svg.selectAll('line');
lines.first()
.attr('transform','translate(4,0)');
lines.last()
.attr('transform','translate(-4,0)');
Here is another, even though I used Fered's solution for a problem I met.
d3.select(d3.selectAll('*').nodes().reverse()[0])
I'm new to EaselJS. I wonder how I can detect a drop of one container on another container in EaselJS.
So I want to get the dropped container in an eventlistener of the drop target container.
Any examples on this?
I could not find this in the drag drop examples of EaselJS.
Thanks
You can also use getObjectsUnderPoint. Here is a quick sample I put together.
http://jsfiddle.net/lannymcnie/6rh7P/1/
var targets = stage.getObjectsUnderPoint(stage.mouseX, stage.mouseY);
This is from another post asking a similar question. I also posted more info about it.
EaselJS: connect 2 containers/shapes using a line
In the pressmove or stagemouseup event, you can verify if the mouse position (stage.mouseX and stage.mouseY) if over the parent container. To do the verification, you can use the hitTest.
Notice that, hitTest will only if your parent container has at least one mouse event listener, which I think is a bug on EaselJS 0.7.1
I made this class on coffeescript to solve that problem:
class DragContainer
DragContainer.prototype = new createjs.Container()
DragContainer::Container_initialize = DragContainer::initialize
constructor: (opts) ->
#initialize opts
DragContainer::initialize = (opts) ->
#Container_initialize()
#droptargets = new Array()
#on 'mousedown', #handleMouseDown
handleMouseDown: (e) =>
#on 'pressup', (ev)=>
#removeAllEventListeners 'pressup'
if #droptargets and #droptargets.length > 0
#evaluateDrop e
evaluateDrop: (e) =>
target = null
dropped = false
for drop in #droptargets
pt = drop.globalToLocal stage.mouseX, stage.mouseY
if drop.hitTest pt.x, pt.y
target = drop
dropped = true
if dropped
#dispatchEvent {type: 'dropped', currentTarget: target}
else
#dispatchEvent {type: 'dropped', currentTarget: null}
The droptargets property is an array that keeps the objects you want to associate with the drop of your container.
We would like to use appAPI.openURL but in place of sending the data.selectedText I woould like to send the text of the element under the mouse. But I can't find the way of getting the mouse position. My idea was to add in the appAPI.ready the following
$().mousemove(function(event) {
myPositionX = event.pageX ;
myPositionY = event.pageY ;
}
And to have two global variable myPositionX and myPositionY which I could access in my background code to transmit as parameters of my URL.
But this doesn't seem to work.
Is what I'm doing crazy?
You'll be pleased to note that your are not crazy but simply missed the selector required to attach the handler to the page. Hence, to make you code work, bind the mousemove handler to the document object per the following tried and tested code:
$(document).mousemove(function(event) {
myPositionX = event.pageX ;
myPositionY = event.pageY ;
});
I am trying to code a flash app entirely in the document class. I am using GestureWorks with a touch screen. When a user essentially presses a button it calls a method that should hide a specific graphic but not the graphic they touched.
Essentially I need a way to refer to a graphic on the screen using a method besides 'e.target'.
I am receiving this error: Error #1009: Cannot access a property or method of a null object reference.
//This code works
private function photo1SpriteFlickHandler(e:GestureEvent):void {
var openTween:Tween = new Tween(e.target, "x", Strong.easeOut, 232, 970, 5, true);
}
//this code gives me a null object reference
private function photo1SpriteFlickHandler(e:GestureEvent):void {
var openTween:Tween = new Tween(photo1Sprite, "x", Strong.easeOut, 232, 970, 5, true);
}
//photo1Sprite has already been programatically added to the screen as so:
var photo1Sprite = new TouchSprite();
var photo1Loader=new Loader();
photo1Loader.load(new URLRequest("media/photos1/photo1.jpg"));
photo1Loader.contentLoaderInfo.addEventListener(Event.COMPLETE,loaderComplete);
photo1Sprite.x = 232;
photo1Sprite.y = 538;
photo1Sprite.scaleX = .3;
photo1Sprite.scaleY = .3;
photo1Sprite.blobContainerEnabled = true;
photo1Sprite.addEventListener(TouchEvent.TOUCH_DOWN, startDrag_Press);
photo1Sprite.addEventListener(TouchEvent.TOUCH_UP, stopDrag_Release);
photo1Sprite.addChild(photo1Loader);
addChild(photo1Sprite);
It can access photo1Sprite as 'e.target' when the button click happens on the photo1Sprite.
The problem happens when to click one button (not photo1Sprite) and have it effect photo1Sprite.
So I can make photo1Sprite react if my method is attached to it directly using 'e.target' but not if I am trying to call it from a method that was called from another element on the screen.
I'm not sure what the Tween class constructor expects as it first argument. Is it a Sprite instance or is it the name of a Sprite instance? In any case make sure that - in the context of photo1SpriteFlickHandler - photo1Sprite is 1) defined! and 2) refers to the correct thing.