Hi I'm currently experimenting with Raphael JS 2 and have produced a nice circle of paths but after much searching cannot figure out how to implement a hover event on these paths to change the color...
http://jsfiddle.net/goosefat/HYmd2/
This fiddle changes a bit the way you set the hover functions. If that's not what you want, please explain.
http://jsfiddle.net/vzkxC/1/
Raphael's documentation http://raphaeljs.com/reference.html#Element.hover says you can pass the context of the hoverIn and hoverOut functions as third and fourth parameters (in my example they're both cItem). These are the values of the this inside the callbacks.
Of course, you could move the hoverIn and hoverOut functions to an appropriate scope (out of the for loop)
Edit: Marcelo's example is more readabe/maintainable, use his.
You need a closure to achieve it:
(function (cItem) {
cItem.hover(function(){
cItem.attr({"stroke": "#E3E3E3"});
},
function(){
cItem.attr({"stroke": "#000"});
});
})(cItem)
http://jsfiddle.net/yxDap/
Another nice method for you to handle this kind of problems, code here:
(Event handler defined like this)
var hoverIn = function (item) {
return function (event) {
self.hoverFlag = true;
self.hintElementObj = {};
self._drawHint(paper, event, item);
};
};
(Event handler called like this）
paper.rect(x, y, item.rectWidth, item.rectHeight, round).attr({
fill: fill,
"stroke-width": 0
}).hover(hoverIn(item), hoverOut(item));
In fact, this is a JS trick that you could use in many situations. With it you could do many more interesting things.
Related
I have a doubt about CheckBoxes and click events. I have some button which executes a function OnClick, something like this on code:
SomeButton->OnClicked.AddDynamic(this, &ClassName::FunctionToExecute);
For style reasons, I thought that I should use a Toggle Button, implemented with a CheckBox, instead of a regular Button. However, I am having trouble finding the correct method to bind the function to each click. So far, I tried something like this, but it doesn't work. I also tried declaring a delegate, but it won't work either.
SomeCheckBox->OnCheckStateChanged.Add(&ClassName::FunctionToExecute);
What is the correct way to bind the function to the OnCheckStateChanged() event?
Thanks a lot in advance :smile:
If you are using a UMG Check box (which it sounds like you are), than we can look at the delegate declaration:
// In Checkbox.h
DECLARE_DYNAMIC_MULTICAST_DELEGATE_OneParam( FOnCheckBoxComponentStateChanged, bool, bIsChecked );
and notice that we need a bool input parameter for our callback function.
So that means that our callback function has to look like this:
void UYourWidget::OnCheckboxChanged(bool bIsChecked) {}
You can then bind your widget like this:
if(CheckBox)
{
CheckBox->OnCheckStateChanged.AddDynamic(this, &UTextChatWidget::Test);
}
If you are using a slate check box, then the callback function declaration is a bit different. It uses the ECheckBoxState enum instead of a boolean.
SNew(SCheckBox)
.OnCheckStateChanged(this, &SFoo::OnStateChanged)
void SFoo::OnStateChanged(ECheckBoxState NewState) {}
My typical approach for figuring this stuff out is to simply do a CTRL+SHIFT+F search for the delegate in Visual Studio to find other examples of it.
I'm trying to figure out the best (cleanest) way to structure some code in C++ for an application I'm building. I think MVC makes sense as the way to go, but after a fair amount of research I'm not totally clear I'm doing things the right way.
Here's an example to illustrate my question:
Model
I have a class which contains drawing data called Canvas. An example function, used to clear the current contents of the canvas, is ClearCanvas().
Ultimately, I want a button in the interface to be able to call this function and clear the canvas.
Controller
I have a controller class for the canvas: CanvasController
The controller creates and then holds a reference to a canvas object: CurrentCanvas
The controller also creates the view: CanvasView and then sets a reference to itself on the view: CurrentCanvasView->SetControllerRef(this);
View
The view is made up of a series of nested classes that define the UI. For example, the hierarchy leading to the button in question might be something like this:
CanvasView
-VerticalBox
--HorizontalBox
---Button
During the view's constructor, a reference to the controller is passed from the view to all interactive elements, eg. NewButton->SetControllerRef(this->GetControllerRef());
Button Pressed
So now when the button is pressed, it can function like this:
void ClearCanvasButton::OnButtonPressed()
{
Controller->CurrentCanvas->ClearCanvas();
}
So my general question is: (1) does this seem like the right way to be doing things, or badly structured?
Also (2): Should the controller be encapsulating the canvas functions, for example:
void CanvasController::ClearCanvas()
{
CurrentCanvas->ClearCanvas();
}
Such that the function on the button could simply be:
void ClearCanvasButton::OnButtonPressed()
{
Controller->ClearCanvas();
}
I'm just not sure whether it's correct to essentially be passing down a reference to the controller to all elements of the view which ultimately want to change the model, or whether there is a cleaner way.
Apologies if the question has been asked a thousand times in a thousand different ways, I have been searching around trying to understand this.
You don't need a class ClearCanvasButton, if your Button class contains a member like
std::function<void()> onButtonPressed;
or similar, rather than
virtual void onButtonPressed() {};
You then pass a lambda that references the controller
CanvasView::CanvasView()
{
// make the widgets
Button.onButtonPressed = [Controller](){ Controller->ClearCanvas(); };
}
I'm new to Meteor, I could not find a sufficient answer to this but how does one go about referencing a Template's event handlers programmatically.
For example I would like to add or update or trigger an event defined in a template without actually as an example (pressing or clicking a button).
In the Template object I can see the events object below and can I access it but is this the right way?
Template.myTemplate._tmpl_data.events[]
Thanks!
You can define the handler outside the event map and call it as a function:
someHandler = function(this, evt,tpl) {
// do something with this, evt, and tpl
}
Template.myTemplate.events({
'click .myButton': function(event,template) {
var self = this;
return someHandler(self, event,template);
}
});
// Call someHandler whereever you want passing in whichever args you want
This is not a complete example, but should be able to get you going on some workable direction. If it works, please edit this answer to reflect a more complete example.
Do Raphael sets accept event handler? When I set an event handler on a raphael set, it seems that it is instead assigned on each of the Raphael shapes inside the set and not on the set itself as you can see here if you try to click the set:
http://jsbin.com/aponen/3/edit
I'm not interested in various hacks such as chaining elements inside a set with the set itself via custom attributes or similar approaches.
Thanks
Yes, the event handler is applied to each object individually -- Raphael does not make use of the <g> element of SVG. However, you can fix your issue here with a few keystrokes:
set.push(rect);
set.push(circle);
set.attr({'fill': 'yellow'});
set.click(function(evt) {
//old
this.attr({'fill': 'red'});
//new
set.attr({'fill': 'red'});
});
The biggest difference in the way it works and the way you thought it might work is the meaning of "this" inside the handler. Changing it to "set" will fix that right up.
UPDATE, Jan. 26, 2013
Per comments, you could also attach the set to the children of the set with one line, using Raphael's "data" method:
set.push(rect);
set.push(circle);
set.data('myset', set);
set.attr({'fill': 'yellow'});
set.click(function(evt) {
this.data('myset').attr({'fill': 'red'});
});
I don't believe there is a native way to access the set from children, but I could be missing it.
I'd like a graphical container that I can add and remove my custom widgets to where I can set a sort function that is automatically applied when these operations take place.
Is there a suitable object in Dojo already that I've missed? Or maybe I'm not thinking about the problem correctly?
If not, are there any examples etc. of a minimal working custom container widget out there?
Dont think there is really - how would a standard component's sort functionality know, with which parameters it should weight the order, when containers can contain any widget type?
Using a layout widget extension would be your best option imho. They each have a function to add children, following this prototype:
addChild(/*Object*/ dijit, /*Integer?*/ insertIndex)
The dijit.layout.StackContainer is a good starting point, it inherits from dijit._Container (and dijit.layout._LayoutWidget). So you choose when to call the extension functionality of your override.
dojo.declare("my.Container", [dijit._Container], {
getSortOrder : function(newDijit) {
var newIndex = -1; ??
// something to work with
var currentChildren = this.getChildren();
var currentDescendants = this.getDescendants();
return newIndex;
},
addChild: function(dijit, index) {
// figure out index
arguments[1] = this.getSortOrder(dijit);
this.inherited(arguments);
}
});
But be aware, that layoutwidgets has more to it then choosing order, also positioning like with bordercontainer's region parameter.
Use SitePen's dgrid, then define a List widget with a column of type Editor. Send your custom widget to the Editor's parameter. dgrid's List widget should be able to sort as if it were a grid based on your data, and the Editor column should be able to display anything you want as part of a List's item's content.
If you need anything I'll be around. Luck,