I don't know if this has already been asked.
Say I have a container, <div id="cy"><div/>,
I then initialise a canvas on it
var cy = cytoscape({container: document.getElementById('cy')});
Is it possible to unmount this canvas and add another in it's place? For example.
cy.unmount();
var cy2 = cytoscape({container: document.getElementById('cy')});
I am asking since I wish to use multiple cytoscape canvas in tab-able pages. Any suggestions much appreciated.
Thanks
Yes, if you create a new instance on the same div you already made an instance on, then the old instance is automatically destroyed.
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've started working with Dragula and I'm having elements be moved from one box to another. However, I want to be able to click a button and have the Dragula elements be placed back where they were before, basically resetting it. I've looked around for a solution but I can't seem to find any anywhere, so if anyone can help me with this I'd appreciate it.
You are going to want to pull out the HTML data from the two boxes compile the data and reset then second box.
// reset toppings using JQuery each() method
$("#box2").each(function () {
$("#box").append(this);
});
Hope this helps, just remember all you and doing is targeting the box2 and pulling out the information.
Here is another version that is not quite as clean but easier to follow:
var dragged = $("#box2").html();
var notDragged = $("#box1").html();
var original = dragged + notDragged ;
$("#box1").html(original);
$("#box2").html("");
I am using the vue-masonry plugin which let me create a masonry grid easily.
I created a system of infinite loading where you scroll to the bottom of the page and it append new pictures to an array binded with the vue-masonry plugin.
The problem happen when I created a system of polling for the new pictures that were upoaded by other users. Those new pictures need to be at the top of the masonry grid.
The plugin use two Vue Directive masonry (parent) and masonryTile (element). masonryTile has a v-for which loop through the array binded with my Vue instance (which does all the heavy lifting, preloading, sanityzing, etc...).
Is there a way in the directives to know the differences between something being appended or prepended? And try to react differently (I know masonry has some append/prepend method) but in here and with this plugin, the items where already added (at the beginning so the prepend works with Vue) but there's no masonry interaction nor redraw (I tried to use the prototype to trigger the redraw this.$redrawVueMasonry();).
So I don't know what's next to do. Continue finding a way to differentiate a prepend from a append and trying to bind it to the respective masonry's methods ? Or another method that I didn't think of...
Thanks in advance for you help
Ps : I don't think my code is really relevant since It's more a way to optimize the plugin. If you want some specific part of my code anymay, tell me in the comment !
This probably comes a bit too late, this being a 10 month old question.
However vue-masonry is able to handle situations where items are spliced anywhere in the array. But to properly update the grid this.$redrawVueMasonry() should be called inside this.$nextTick() like this:
this.$nextTick(() => this.$redrawVueMasonry());
Hope this helps, if not the original poster, someone else.
I got a question to which I have no answer after a couple of hours of trying and googling :(
I've created three dojo.dnd.Source components. It is used to couple a user to a project so to the left I've got projects and to the right I've got my users and in the center I got a canvas. I set up the relevant creators and checkacceptance functions and all is well.
Onto the center canvas a user can drop a project which is shown as a div containing all related users as div elements. The other dndtype that can be dropped is the user type, in that case I want to empty the canvas and show all projects to which te dropped user is related. As soon as I drop a project or user on the canvas the creator function is called. The problem is that the creator function returns 1 element that should be dropped, if I drop a user I need to draw several elements onto the canvas so the creator method isn't fully covering this since it returns only one element.
To cope with the default behaviour I tried to manually add projects to the canvas and returning only one, I know it ain't pretty :S It's working but I'm confronted with strange behaviour, if I move a project on the canvas it is treated as a user in stead of a project.
Bottom line, is there a way that you guys know of to drop one item and create multiple. I was searching to trigger the drop event myself but to no avail.
Thanks!
The event you are looking for is Source's onDrop event. Check the API docs for some more events you could use: there is a onDropExternal and onDropInternal for use inside and between Stores.
require(["dojo/dnd/Source"], function(Source){
var source = new Source({
onDrop = function(source, nodes, copy) {
//called only on the current target, when drop is performed
this.inherited(arguments); //execute the default onDrop function
//now add the node(s) to the other stores here
//you might be able to just do something like:
source2.insertNodes(nodes);//but this is untested ;)
}
});
});
I am new to the Dojo Toolkit. I'm getting the error
Tried to register widget with id=myButton but that id is already registered
whenever I try to load dojo content twice (meaning I load HTML content through jQuery.Load into a container div). Is there a way of unregistering already registered widgets in dojo? I've seen some examples, but I don't really get them working.
My button:
<button dojoType="dijit.form.Button" id="myButton">button</button>
If you're looking to unregister specific widgets, you can use their destroy() or destroyRecursive() methods. The second one destroys any widgets inside the one you are destroying (i.e. calling destroyRecursive on a form widget will also destroy all the form components).
In your case, it sounds like your best bet would be to do this before jQuery.load -
var widgets = dijit.findWidgets(<containerDiv>);
dojo.forEach(widgets, function(w) {
w.destroyRecursive(true);
});
The above code will unregister all widgets in <containerDiv>, and preserve their associated DOM Nodes. To destroy the DOM nodes, pass false to destroyRecursive instead.
Reference:
http://dojotoolkit.org/api/1.3/dijit/_Widget/destroyRecursive
Based on http://bugs.dojotoolkit.org/ticket/5438, I found a sufficient way of destroying dojo-widgets:
dijit.registry.forEach(function(w){
w.destroy();
});
This worked for me:
dijit.byId( 'myButton' ).destroy( true );
I think you would be better off removing the id from your button and accessing it using an attach point. You would basically do <button dojoType="dijit.form.Button" data-dojo-attach-point="myButton">button</button>
then in your code you would access it like this.myButton.... however im not sure which version of dojo you are using. This will fix any id issues since dojo will assign a unique id to it automatically.