I have a small cytoscape.js example here:
https://s3.amazonaws.com/cyprob/standalone.html
Note that if I click a node, and then click outside the node (but still in the graph div), I go into this strange mode where when I move the mouse, the whole graph moves. I can't get out of this mode except by reloading the page.
I have another version of this same page:
https://s3.amazonaws.com/cyprob/standalone-noevents.html
In this version, I can click nodes or anywhere in the graph, and I don't enter that strange graph-dragging mode.
The only difference between these two versions is that the first one has an event listener in the ready method:
cy.on('click', function(evt){
console.log("the cytoscape graph was clicked");
window.evt = evt;
console.log( 'clicked ' + evt.cyTarget.id() );
});
So my question is...how do I get out of that graph-dragging mode? And can I have an event listener that won't cause me to go into that mode?
Related
I want to add actions for when the user clicks on an object from a Paths layers. I notice that I really need to click in the middle of each path for this to happen. Is it somehow possible to increase that radius so when the user clicks even just a bit near that object the on-click action would trigger? Couldn't find such property for any layer.
I think you are looking for pickingRadius, check this out.
You should be able to apply that on Deck instance.
With React:
<DeckGL
...otherProps
pickingRadius={10}
>
With vanilla JS:
const deckgl = new Deck({
...otherProps,
pickingRadius: 10
});
I am trying to set up a QSelect driven by user input in order to achieve an "autocomplete" behavior. There are a few examples on the official documentation and they make use of the #filter callback.
I have currently two problems:
Whenever I click outside of the input field the input text is lost and the popup disappears.
If I click on the input the current text remains, but the pop is hidden until I click on it again.
For the latter issue, one workaround is to force the popup to show upon click:
<q-select
ref="input"
...
#click.native.prevent="onClick"
>
...
onClick(){
if( this.searchFilter.length > 0){
this.$refs.input.showPopup()
}
}
However, the inconvenience is that the popup still shortly disappears for a short while before showing again. I've also tried using #click.native.stop instead of #click.native.prevent to no avail.
As for issue number 1 I haven't even found a workaround yet.
Here is a related issue, though the popup disappearing was a wanted behavior in his case.
I set up a basic Pen to illustrate the issue. Try clicking on the input or outside the input at the same height.
The trick was to use #click.capture.native and then conditionally stop the propagation inside the callback function via event.stopImmediatePropagation() See it working here
I'm using a VIS.JS network diagram as a menu (of sorts) with a master/detail relationship to another area of the screen. Each time a user selects a node I signal the loading of the other area. Since the load is asynchronous and can take time (1-2 sec) I'd like to prevent the network node selection from changing until the details are loaded.
Ideally I'd like for the click to invoke the callback, without changing the node selection. Then receive a notification from the detail pane that the loading is complete, and only then change the node selection through code.
I think the only thing I'm missing is the ability to disable the auto-selection of a node when it is clicked.
Is that possible?
Thanks
-John
I don't know if it'll exactly fit your need but,
I needed to create some node unselectable so I prefix my unselectable node's id with a marker.
And then
const unselectableMarker = 'header-';
network.on('selectNode', (opts) => {
network.setSelection({
nodes: opts.nodes.filter(id => !id.startsWith(unselectableMarker)), // prevent selection of headers nodes
edges: opts.edges,
});
});
I've found nothing in actual doc for preventing events in network context.
Capturing the event and preventing default behaviour should not focus the element.
handleClick (evt) {
evt.preventDefault();
// rest of code
}
There's a single button element on the page and the following click stream:
let submitClick$ = sources.DOM.select(buttonSel)
.events("click")
.mapTo(true)
.debug(console.log)
Once I click on the button, true is logged, which is correct.
However, when I map the stream, the code inside runs twice:
let submitDeal$ = submitClick$.map(() => {
console.log("Clicked")
// ...
})
No other event handlers should be attached to the button, and the element itself sits inside a div:
button(".btn--add", "Submit")
The usual event.preventDefault() and event.stopPropagation() doesn't make a difference, and inspecting the event does show that it is fired from the same element button.btn--add.
Not really sure what's going on, any ideas are appreciated! Thanks!
Versions:
"#cycle/dom": "^12.2.5"
"#cycle/http": "^11.0.1"
"#cycle/xstream-run": "^3.1.0"
"xstream": "^6.4.0"
Update 1: I triple checked and no JS files are loaded twice. I'm using Webpack that bundles a single app.js file that's loaded on the page (Elixir/Phoenix app). Also when inspecting the button in the Event Listeners tab in Chrome's Developer Tools, it seems that only 1 event handled is attached.
Update 2: Gist with the code
Too little information is given to resolve this problem. However some things come to mind:
You shouldn't use .debug(console.log) but .debug(x => console.log(x)) instead. In fact .debug() is enough, it will use console.log internally.
Then, is the button inside a <form>? That may be affecting the events. In general this question needs more details.
Turns out this was due to a bug in xstream, which was fixed in xstream#7.0.0.
Is there a way to bind an event callback so that it's called for all instances of Magnific Popup? On a site I'm building several elements have fixed position and "jump" when the main browser scrollbar disappears. I want to set a callback to add padding for those elements before any popup is opened, and remove the padding when the popup is closed. I don't want to re-use the callbacks every time I initialize Magnific Popup – I'd rather set one set of callbacks that is run every time Magnific opens and closes a popup.
My first thought was to use event delegation and bind pretty high in the document tree. I was trying to bind to the mfpOpen event and listen on the BODY tag, but it doesn't seem like the event bubbles. Is there another solution?
Events are dispatched only on target element or on document (if target element is not present).
But you may override open function globally using prototype, e.g.:
$.magnificPopup.instance.open = function(data) {
console.log('before open anything');
$.magnificPopup.proto.open.call(this,data);
console.log('after open anything');
};
You may do the same thing with close function (it doesn't have any arguments).