Anybody who knows how to add an event listener to a donut segment drawn on a stage in Anychart?
I tried the following code, but it didn't work (see the jsfiddle).
stage = acgraph.create("container");
donut = acgraph.vector.primitives.donut(stage,200,200,50,100, 0, 60);
donut.listen("click",function()
{
alert("Clicked!")
});
https://jsfiddle.net/ncacampo/3a7hvbmt/
to add an event listener to a donut segment we have to place this donut on a layer and add the listener exactly to this layer.
stage = acgraph.create("container");
var layer = stage.layer();
//now the fill of donut is absolutely transparent, but the color is black
layer.donut(200,200,50,100, 0, 60).fill("#fff", 0);
layer.listen('click', function() {
alert('Clicked!');
});
Also fill() setting is very important here. Without fill() method listener will react only on click on contour of donut. Fill() provides click reaction inside the segment. You can set any color and opacity (from 0 to 1).
jsFiddle example
Related
I have a 3d scene built with react threefibre and I'm able to zoom in and out with both mousewheel and a DOM eleemnt zoombar in this scene.
the demo of the scene can be seen here:
https://codesandbox.io/s/zooming-using-multiple-inputs-lub391
right now, when you zoom with mousewheel, zoombar stays the same, but I want the it change dependant on the mousewheel.
note that I don't want to use mouse wheel event because I may have more sources that also change the zoom and I want the zoombar to be dependant on them too. so the proper way is to add an event listener on camera movement. I wasn't able to do that because whatever I do makes an endless loop.
Perhaps you could use an EventListener on the identified Canvas that listens for mousewheel events like so:
useEffect(() => {
document.getElementById('map-canvas')?.addEventListener('mousewheel', onMouseWheel, false)
return () => {
document.getElementById('map-canvas')?.removeEventListener('mousewheel', onMouseWheel, false)
}
}, [])
return (
<Canvas id="map-canvas"></Canvas>
)
The onMouseWheel function adds the desired value to the previously created context.
I have a react app that uses ChartJS through 'npm react-chartjs-2'.
I am working with a Line chart and I a have the following requirements:
1- Detect clicking on chart area (white area; other than data set line, and legend), then do some logic
2- Detect clicking on legend rectangle at the top to hide/show the dataset (current default behaviour)
I have tried using options.onClick but it seems to override legend click.
Also tried getElementAtEvent it returns the dataset clicked on but when clicking on legend/chart area comes as empty. getDatasetAtEvent always return empty array. And if I use options.legend.onClick I loose default hide/show behaviour and need to do it programmatically.
I was wondering is there is a better way to achieve requirements above. Thanks
You can use the getElementsAtEvent property. This gives value only when the chart area is clicked, the element is null if it is clicked on the legend. If it is clicked on the chart area then it holds properties from which we can get the clicked xAxis and legend value.
document.getElementById("yourChartCanvasId").addEventListener("click", function (e) {
var element = instance.getElementsAtEvent(e)[0];
if (element) {
//Handle click on chart area
}
else {
//Handle click on legend area
}
});
Also if you don't want to do anything on legend click, keeping the default Chart.js behavior then don't include the else block.
I'm using yWorks 2.5 and I use EdgeSegmentControlEdgeStyle to draw edge in a form of some DataTemplate content. I set EdgeSegmentControlEdgeStyle.SegementThickness to 20. However as far as I understand this style uses internally PolylineEdgeStyle and my controls only react to a clicks in the thin central line. How can I make this style to react to all clicks in 20px height rectangular area?
You can set EdgeSegmentControlEdgeStyle.PathStyle to a new instance of PolylineEdgeStyle with the proper width:
myEdgeStyle.PathStyle = new PolylineEdgeStyle { Pen = new Pen(null, 20) };
I have a toolbar inside a simple container. They get rendered on a window's div. When I resize the window the toolbar remains stationary. If the window gets smaller the toolbar starts disappearing (overflowing outside). If the window gets bigger the toolbar stays in its position instead of trying to remain to the far right where it started. I've tried the resize and enable overflow configs but nothing seems to work. I'm thinking that its positioning through the div might be the problem but I'm not sure how to test or fix that. Any ideas?
Some sample code:
var toolbar = Ext.create('MyToolbar');
var toolbarContainer = Ext.create('widget.contaienr', {renderTo: 'myDiv', items: [toolbar]});
.
.
.
<div id='myDiv'></div>
Check this function in the EXtJs docs
onWindowResize( fn, scope, [options] )
Adds a listener to be notified when the browser window is resized and provides resize event buffering (100 milliseconds), passes new viewport width and height to handlers.
Example code looks like the below(I guess you have to write it in your afterRender .(You have to add this event and then fire it.))
Adding the event in the init component looks like below
this.addEvents('setInboxTileSource');
Firing the event in the afterRender looks like below
Ext.EventManager.onWindowResize(function (w, h) {
this.fireEvent('BROWSER_WINDOW_RESIZE')
}, this, {buffer: 150});
You have to listen the event and set your width and height for your toolbar.
listeners: {
BROWSER_WINDOW_RESIZE: this.handleResize,
scope: this
}
handleResize:function(){
this.setHeight(Ext.getBody().getViewSize().height - 270);
this.setWidth(Ext.getBody().getViewSize().width- 100);
}
Hope this helps you...
Toolbars should not be configured that way. If you have a window, it should be configured this way:
Ext.create('Ext.window.Window',{
title:'some title'
,width:400
,height:300
,tbar:[{
// here come toolbar items
}]
});
For more examples see http://docs.sencha.com/extjs/4.2.2/extjs-build/examples/menu/menus.html and other toolbar examples.
I have a tree panel and am trying to do an animated scroll to certain locations. I'm doing something like this:
myTreePanel.getView().getEl().scrollTo('top', yCoord, true /*animate*/);
The view scrolls to the correct location, but the "slider" in the scroll bar doesn't move. Any ideas why?
Some additional info: if I do the following instead, the scrollbar slider moves correctly (but of course scroll() doesn't support animation--I'd prefer to use .scrollTo() so the user can see the scrolling):
myTreePanel.getView().getEl().scroll('down', yDiff);
Thanks for any help/advice!
#MoleculeMan's suggestion of disabling the custom scrollbars (which ExtJS uses in 4.0.x but not in 4.1) does work. After doing this you can call myTreePanel.getView().getEl().scrollTo('top', yCoord, true) and everything works as expected: scrolling is animated and the scrollbar moves. The only problem is that it seems to break the ability for the view to scroll if you use the up/down arrow keys to move through the tree.
It's not very elegant, but the work-around I'm going to use is this:
// Animated scroll of tree view
myTreePanel.getView().getEl().scrollTo('top', yCoord, true);
// Wait 300ms then sync the scroll bar with the tree view
setTimeout(function() {
myTreePanel.setScrollTop(yCoord);
}, 300);
This has the cosmetic disadvantage of the scroll bar "jumping" into place instead of smoothly moving with the animation, but the benefit of not breaking the up/down key scrolling. Also, because it doesn't involve changing config params or overriding the tree view's style, I'm assuming it will still work once we upgrade to ExtJS 4.1 (i.e., the timer call to setScrollTop() will be unnecessary but shouldn't break anything).
Note that calling setScrollTop() moves the scrollbar, but also causes the view to "jump" to that position. You therefore need to ensure that the timer doesn't fire until after the animation finishes. I'm actually using some custom code to poll every 10ms and see if the destination row is visible, then calling setScrollTop(), instead of using a timer that always waits for some hard-coded amount of time:
var scrollToRowNum = 5;
var scrollToEl = getElementForNode(myTreePanel.getRootNode().childNodes[scrollToRowNum]);
var yCoord = scrollToEl.getOffsetsTo(scrollToEl.parent())[1];
// Animated scroll of tree view
myTreePanel.getView().getEl().scrollTo('top', yCoord, true);
// Check every 10ms to see if animation is done, then sync scrollbar
var timerId = setInterval(function() {
if( myTreePanel.isTreeElementWithinVisibleArea(scrollToEl) ) {
clearInterval(timerId);
myTreePanel.setScrollTop(yCoord);
}
}, 10);
The isTreeElementWithinVisibleArea() function just checks to see if element's current Y coordinate (absolute) is between the top and bottom of the tree view box.
Not surprising. They use their own scrollbar. The correct code would be:
myTreePanel.verticalScroller.setScrollTop(yCoord);
However, it doesn't support animation either. So I recommend to get rid of custom scrollbar as I've described here and use your original code.