We Keep Coding

How to properly re-layout a graph and center on a node

I'm using cytoscape to dynamically create a network visualisation and I'm having trouble to setup the layout correctly.
Occasionally, a collection of nodes is created and attached to a parent node.
Then I call the following function to layout the new nodes and center the graph on that parent:
static DoLayout(node) {
setTimeout(() => {
cy.layout({
name: 'cose',
fit: false,
nodeRepulsion: function (node) { return 99999; },
componentSpacing: 100,
padding: 100,
randomize: false,
animate: 'end',
animationEasing: 'ease-in-out',
animationDuration: 350,
stop: () => {
setTimeout(() => {
cy.zoom(.8)
cy.center(node);
}, 100);
}
})
.run();
}, 50);
}
And here's the issue:
Is there a possibility to have these three actions layout, center and zoom happen at the same time? Or smoothly?
Edit: (fit: true,)
Setting fit to true, as suggested by canbax, solves the 'flickering' issue shown in the gif. However it still doesn't produce a smooth transition (animation?) when zooming and centering. Plus, I don't want the graph to be completely zoomed-out then zoomed-in and centered.

Title to the graph when saved as image in Echarts

I want to give title to the graph image which we get when we save the graph as image in Echarts. Echarts does not have option for the same. So, is there any way that we can achieve our requirement.
Attaching a link for your reference from echarts. Which provide the option for saveAsImage
https://ecomfe.github.io/echarts-doc/public/en/option.html#toolbox.feature.saveAsImage
As attaching a link of echarts example which has save image icon on the right top corner
https://ecomfe.github.io/echarts-examples/public/editor.html?c=area-rainfall
I also want to position the hover tooltip which we get on hover of the save image icon. they have some default options. But, I have to increase the space more.
I really thank the guys who can come up with the solution for the above requirement.

By default, the name of the image is the chart title.
You can set the title by using:
option: {
title: {
text: 'myTitle'
}
}
To provide a custom name, you can use the saveAsImage.name function:
option: {
toolbox: {
feature: {
saveAsImage: {
name: 'myImageName'
}
}
}
}
Bonus: To increase the space between the icons, you can set toolbox.itemGap, and maybe get the result you want:
option: {
toolbox: {
itemGap: 20,
bottom: 20,
...
}
}
Or customize the icons itself through toolbox.iconStyle. For example, by setting a transparent border:
option: {
toolbox: {
iconStyle: {
borderWidth: 10,
borderColor: rgba(0, 0, 0, 0),
...
}
}
}
Toolbox documentation

option: {
toolbox: {
feature: {
saveAsImage: {
title: 'Save',
}
}
}
}

How to set different dimensions in a codemirror editor?

I need each codemirror editor with different dimensions in a php page.
Like below we can create an instances of codemirror editor but it should have same dimensions.Is there any way to create different dimensions?
function editor(id)
{
CodeMirror.fromTextArea(id, {
height: "350px",
parserfile: "parsexml.js",
stylesheet: "css/xmlcolors.css",
path: "js/",
continuousScanning: 500,
lineNumbers: true
});
}
editor('code1');
editor('code2');

Yes, add your dimensions in additional parameters in your editor function.
For example :
function editor(id, h)
{
CodeMirror.fromTextArea(id, {
height: h,
parserfile: "parsexml.js",
stylesheet: "css/xmlcolors.css",
path: "js/",
continuousScanning: 500,
lineNumbers: true
});
}
editor('code1', '350px');
editor('code2', '450px');

Dropdownchecklist not showing selection in internet explorer after re-initialization

After an ajax post I destroy and then re- initialize a dropdownchecklist so that I may re-populate the list. In chrome/firefox this works as expected. In Internet explorer however the selected items do not appear in the comma delimited form in the text-box section, instead the text display just remains empty.
$distList.dropdownchecklist("destroy");
$distList.html(items);
$($distList, $container).dropdownchecklist({
icon: { placement: 'right', toOpen: 'ui-icon-triangle-1-s', toClose: 'ui-icon-triangle-1-n' },
firstItemChecksAll: true,
width: 151,
maxDropHeight: 150,
onComplete: function () {
}
});
EDIT
The following Link will show why I use destroy and initialize. It discusses the refresh only works on changed selected, not adding/chanigng the list itself.'
DISCOVERY
After messing around in the IE debugger I have discovered turning off display: inline-block removes the problem, but can't figure out how to replicate that effect in code.

Try adding in a setTimeout
$distList.dropdownchecklist("destroy");
$distList.html(items);
function doList() {
$($distList, $container).dropdownchecklist({
icon: { placement: 'right', toOpen: 'ui-icon-triangle-1-s', toClose: 'ui-icon-triangle-1-n' },
firstItemChecksAll: true,
width: 151,
maxDropHeight: 150,
onComplete: function () {}
});
}
setTimeout(doList, 50);

How can I set default (global) options for helpers?

I need to fix the problem with body element and the css overflow attribute discussed in this post:
When a fancybox 2 is activated, a scrollbar flashes on the parent page causing the content to shift left and then back
Using the helper option helpers: {overlay: {locked: false}} fixes my problem, but I need a solution to set this option for all Fancybox calls, this way I do not need to spend this setting on each call.
I tried with different forms, but doesn't works:
$.fancybox.open([{
helpers: {
overlay: {
locked: false
}
}
}]);
$.extend($.fn.fancybox.helpers, {
overlay: {
locked: false
}
});
$.fn.fancybox.defaults.overlay.locked = false;
I do not want to change the css component, because currently use the same via Bower.

You could setup an object with this setting that you use in all of your fancyBox calls:
var fancyBoxDefaults =
{
helpers: {
overlay: {
locked: false
}
}
};
$(".fancybox1").fancybox(fancyBoxDefaults);
$(".fancybox2").fancybox(fancyBoxDefaults);
If you need to set settings for any specific fancyBox, you could extend the object:
$(".fancybox3").fancybox($.extend(fancyBoxDefaults,{
maxWidth: 800,
maxHeight: 600
}));