I want to drag all nodes, connections together when i click and drag anywhere inside the instance. Though, when i drag any node, i don't want other nodes to be dragged. I could find addToDragSelection() to do this. But, how do i enable it only when i click and drag anywhere outside the nodes.
this.instance = newInstance({
dragOptions: {
cursor: 'pointer',
zIndex: 2000,
containment: ContainmentType.notNegative
},
container: this.wrapper.nativeElement,
});
Do you mean like the way everything pans in the Toolkit edition?
https://demo.jsplumbtoolkit.com/flowchart-builder/
There is no support for this in the Community edition. You'd have to write code yourself to do this.
Related
I created a simple graph (it will become more complex, but for the purpose of this example it will do):
function createGraph(){
var graph = jsnx.Graph();
graph.add_nodes_from([
[1,{color:'red'}],
[2,{color:'green'}],
[3,{color:'blue'}]
]);
graph.add_edges_from([[1,2],[1,3]]);
jsnx.draw(graph,{
element: '#my-canvas',
with_labels: true,
node_style:{
fill: function(d){
return d.data.color;
}
}
});
}
This code successfully draws the graph. Now, I'd like the user to be able to select an edge with the mouse and, when this edge is selected, by pressing the "canc" key the edge should be deleted.
Also, if the user clicks on a node and then drags on another node, he should be able to create an edge.
In short: is d3.js just for visualization or does it allow to visually alter a graph too?
In principle, you can do this with D3 (see here for example). You will however have to implement the functionality that allows the user to change the graph yourself. That is, D3 doesn't provide this functionality out of the box.
When you add a CKEditor to a div inside a div with: "overflow: scroll" the toolbar won't move when scrolling the parent div...
<div id="wrapper" style="overflow: scroll;">
<div contenteditable="true">This is the ckedito</div>
</div>
An example can be found here: ​http://jsfiddle.net/W8Dt4/
Does anyone know a workaround around this problem?
I think the desired behaviour would be:
Keep the toolbar at the top of the editor div when there's enough room.
Move the toolbar to the bottom of the editor div when there's not enough room on top and there is enough room on the bottom.
Using version 4.4.3, I was able to solve this problem by fire the window scroll event in a similar way that it is done in other areas in CKEditor. Attach a scroll event to the parent container that has overflow:scroll; set on it and trigger the window scroll within. The positioning is a little clunky but still works.
$("#parent-with-scroll").on('scroll', function (evt) {
CKEDITOR.document.getWindow().fire('scroll');
});
Yup. CKEditor never considered such case and, most likely, editor will never deal with such edge case.
Still, what you need is a scroll listener for editor.element.getParent() in those lines of floatingspace plugin. Unfortunately, you have to wait for the ticket #9816 to be resolved, because it changes the way of re-positioning the toolbar, and makes your case possible to fix. Once the fix is released (in 4.2.1), you got to basically change the lines to look like this:
var elementParent = editor.element.getParent();
editor.on( 'focus', function( evt ) {
...
elementParent.on( 'scroll', uiBuffer.input );
} );
editor.on( 'blur', function() {
...
elementParent.removeListener( 'scroll', uiBuffer.input );
} );
editor.on( 'destroy', function() {
...
elementParent.removeListener( 'scroll', uiBuffer.input );
} );
If you want, you can give it a try with this ticket branch. Otherwise, you got to need to wait for the upcoming release to patch your code.
There's also one thing that you need to know: each floating toolbar is appended to <body>, so it will never belong to the same (overflowed) container enclosing your editor. Even though the toolbar will scroll along with the container, it will always float above it and there's not much you can do about it unless you also hack this line. Note that I haven't tested it.
I hope this helped you.
I'm building a website that uses highcharts. When I view the site on a mobile device, touching within the graph area pops up the tooltip, which prevents scrolling. I have tried all of the following, as suggested in other SO questions, without success:
$('#graph-container').click(function() { return false; });
$('#graph-container').children().click(function() { return false; });
chart.container.onclick = null;
plotOptions: {
series: {
enableMouseTracking: false // (stops tooltip but still blocks scrolling)
}
}
For now I've added a second div that covers the graph on mobile devices, so the user touches the div instead of the graph, but that is more a workaround than a solution. I also tried removing all listeners from every element of the graph using things like $('svg').off() in Chrome's console, without any noticeable change in the graph's behaviour. Is there a way to do this that I'm missing?
Highcharts JS v2.3.5 (2012-12-19)
Little HACK:
edit Line: 9026: this.setDOMEvents();
into: // this.setDOMEvents();
or delete it.
I hope it helped!
Here you can find simple Gist for that.
Also, in upcoming Highcharts 3.0 touch events should be upgraded and fixed similar issues. See roadmap: http://www.highcharts.com/support/roadmap
I'm trying to implement a drag and drop system in the extension I'm developing but I'm running into a problem.
As far as I can tell, dnd is implemented by making a draggable object like this
let draggable = DND.makeDraggable(this.actor)
where this.actor is the Clutter actor I want to drag and drop, and then implementing the necessary callbacks. However, when I do this, Gnome Shell immediately crashes when I start to drag and leaves output on stderr like this
(gnome-shell:15279): St-ERROR **: st_widget_get_theme_node called on the widget [0x2b3c000 StBoxLayout.window-list-item-box:focused ("extension.js (~/Source/js/Botto...gmail.com) - GVIM")] which is not in the stage.
However, using the Looking Glass to call the get_theme_node method on that specific widget does work perfectly!
Do I have to explicitly add actors to the stage? And how could get_theme_node fail somewhere deep inside the belly of Gnome Shell, but not from the Looking Glass?
It is also necessary to implement a getDragActor and getDragActorSource method on the delegate of the actor you're trying to drag.
Here is a simple implementation that just drags around a clone of the actor.
getDragActor: function() {
return new Clutter.Clone({source: this.actor,
reactive: false,
width: this.actor.get_width(),
height: this.actor.get_height()});
},
getDragActorSource: function() {
return this.actor;
}
As visible in the image, i have a "Hide" button. On click of the Hide button i want the left panel to be hidden and the right panel to cover 100% of the screen. On doing so, the "hide" button will change to show where the panel comes back to its original position.
For doing the same
xtype:'toolbar',
docked:'top',
items:[
{
cls:'hide',
xtype:'button',
text:"Hide",
iconMask:true,
ui:'back',
id:'hide',
handler:function () {
var viewWidth = Ext.Viewport.getWindowWidth();
alert(viewWidth);
desiredWidth = Math.min(viewWidth, 400) - 10;
Ext.fly('protocol').setStyle('width', desiredWidth); ;
}
},
I tried the above code to change the width of the panel dynamically but Ext.fly doesn seem to work.
What could be the solution to this?
Any help is appreciated.
A highlight of the left panel will be appreciated.
However, just looking at your image and I am making an assumption here.
If all you want to hide is the left panel containing the following
Then perhaps, what you can do is to do a jQuery toggle after declaring the LEFT and RIGHT panels within a "DIV" html
tag for example. See link below.
jQuery API for toggle
Also, if you're using a Javascript library or tool to build this, then you might want to get the source of the Javascript and dive into that.
From my experience, it is a lot easier to write a Javascript function on your own rather than to use something ready built.
Ext.getCmp('workItemPanel').hide();
worked well for me.