I have a link connected between two elements. When I mouseover on the link, remove option (X) is displayed.
Is it possible to catch remove event externally? I want to remove the link on click of (X) icon but, before hand I want to execute a customized function.
JointJS link
You can listen to the element remove event on the graph and see if the removed element is a link and then execute your logic.
graph.on('remove', function (cell) {
if (cell.isLink()) {
// execute your custom logic
}
}
This remove event will get fired when you click on (X) icon of a link.
Related
I used the example code to create an info button (https://resources.jointjs.com/tutorial/element-tools). But I would like it to change when clicked. (I actually modified the example to show a "+" instead of a blue info circle, by using text and textContent instead of a path in the markup definition. But I would be happy to learn how to make the original example change when clicked, too.)
So when you click it I want it to show some info and change to a "-". And then if you click the "-", change back to a "+". I don't see how to change the textContent of the elementTools.Button programmatically or in an event. It was easy enough to change the label of the associated Rectangle. Inside the event I just did this.model.attr("label/text", "whatever"). But how to do it to the element tool Button?
There is an example that's pretty good, using a custom element containing subelements not tools (halfway through https://resources.jointjs.com/tutorial/events). Does it mean I can't use an element tool, that element tools can't change on an event?
The behaviour of the Button tool can be adjusted in the callback function in options.action.
joint.elementTools.InfoButton = joint.elementTools.Button.extend({
name: 'info-button',
options: {
action: function(evt, elementView, buttonView) {
// your action
}
}
});
Although, in your case I would probably go with the example using custom events you linked in your question. It is probably more flexible to work with an element rather than a tool in this instance.
In my recent Cue Project, I have following situation:
I've got a weather div which, when editing-mode is enabled, has a delete- span on the bottom left which contains the ref="edit" attribute (Look here).
On the outer div, there's an click event with #click="eventHandler"
The eventhandler looks like this:
eventHandler(e){
if(e.target !== this.$refs.edit){
this.$router.push({name: "Weather", params: {city: this.city.city}} )
}
}
The event handler should not fire when clicking on the edit-span on the bottom left, so he if-condition above should test this.
But when logging both, e.target and this.$refs.edit to the console, it shows that one is a html-element and the other a proxy.
So is there any good way to test in vue3, whether the click was on the edit-element or not to only fire the router-algorithm when the click was not on it?
Thanks for your help!
I would like to know, just by subscribing to the Interactable OnClick event, if I pressed the button with my left or right hand. Would that even be possible without passing this information along with the OnClick event?
The button has quite the logic to go through until it decides to accept a click request, so replicating all of that via global listener is not feasible.
Is it possible to get that information OnClick from somewhere else? Is it possible to query the potential click sources for who that was?
Without altering the Interactable class the only way I found was to query the FocusProvider for the active pointer, which must have been the one pressing the button (in my case):
https://microsoft.github.io/MixedRealityToolkit-Unity/Documentation/Input/Pointers.html
https://microsoft.github.io/MixedRealityToolkit-Unity/Documentation/Input/Controllers.html
Setup your controllers, take note of the axis name, in code you can do something like this in any GameObject's update loop:
if (Input.GetAxis("Axis1D.PrimaryHandButton") > 0.5f) {
// this axis (button) is pressed do something
}
I'm trying to add some click listeners to some custom divs and the problem might be that I use navigation and the elements keep being deleted/added .
I need a dynamic way to add event listeners to objects , I kept searching but I couldn't find anything good. Any ideas?
Found this code on another question:
document.querySelector('body').addEventListener('click', function(event) {
if(event.target.id == "main_description"){
}
});
I'm developing a chrome extension where I need to create dynamic sub-contextMenus based on some selected text. Like If you select a text, it'll send an ajaxrequest from the background.html and create some child context menu based on the returned results. Is that possible? I've been trying for sometime. But no luck.
You can add right mouse button event listener in a content script:
document.addEventListener("mousedown", function(event){
if(event.button == 2) {
//get selected text and send request to bkgd page to create menu
}
}, true);
There is also oncontextmenu event, can try it as well (I think mousedown is fired earlier though).