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

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.

Related

How to Load New Webpage Without Reloading Browser? Vanilla JS

I'm trying to make a website that allows for page transitions across each webpage, without having the browser reload each time it changes pages. I am currently using barba.js to make it possible to change pages while using transitions. I was wondering if there was a way to do this in Vanilla JS, as all I want to do is run transitions, and have pages with static data on said pages, and don't feel I need the extra functionality barba.js provides.
Here is my current barba.js code if it is of any use:
barba.init({
sync: true,
views: [
{ namespace: 'about' },
{ namespace: 'projects' },
{ namespace: 'stories' }
],
transitions: [{
name: 'opacity-transition',
sync: true,
async enter(data) {
// Entrance Transition settings
return gsap.from(data.next.container, {
left: '20%',
filter: 'brightness(0.4)',
duration: 0.9,
ease: 'power1.inOut',
});
},
async leave(data) {
// Exiting Transition settings
return gsap.to(data.current.container, {
left: '-100%',
duration: 0.9,
filter: 'brightness(0.6)',
ease: 'power1.inOut',
});
},
}]
});
The greensock stuff can be removed and turned in to CSS animations if it's possible to do this without barba.js

tippy tooltip position with browser zoom in/out

I have made a popover with tippyjs. Tippy takes next options:
const tippyInstance: any = tippy(element, {
content: loaderTemplate,
placement: 'right',
animation: 'fade',
animateFill: false,
theme: 'kpi-tooltip',
trigger: 'manual',
interactive: true,
onHidden: () => {
tippyInstance.destroy();
},
allowHTML: true
});
"Element" is a plain html element and content loading after response from server. The problem is when i make browser zoom in or zoom out the tooltips changes position. I'm using chrome last version.
Tooltip in normal state:
Tooltip with zoom in:
"appendTo" property option solved the problem.

How do i get rid of free-jqgrid's right-side scrollbar space?

I'm upgrading jqgrid to the latest stable build of free-jqgrid (4.15.2) and the grid always shows a right-side gap where the scollbar will never need to be. It appears as though some of the usage has changed since the last developer updated the library and might be ahead of the documentation. I've looked at other questions in SO and:
I've tried manually stylling the grid, which did not help and served only to complicate matters.
I've tried setting scrollOffset:0 (with and without a height set in both percentatge and a static int) and it has not removed the scrollbar area
Other helpful info:
* We're manually resizing the grid to it's container on resize event and on initial draw. This code seems to have little effect now
I'm seeing the unsightly gap every time i set up a grid in a similar fashion to the following:
var grid_data = {
altRows: true,
data: [],
datatype: 'local',
sortable: false,
width: (bodyWidth() - 14),
rowNum: 10000,
colNames: [],
ondblClickRow: function() {
onGridDblClickRow();
},
onSelectAll: function() {
onGridSelectAll();
},
gridComplete: function() {
doGridComplete();
}
},
onRightClickRow: function( rowId ) {
doRightClick(rowId);
}
},
onSelectRow: $.proxy( onGridSelectRow, this ),
colModel: column_info_array,
multiselect: true,
multiselectWidth: 22,
viewrecords: true,
height:'100%',
scrollOffset:0,
}
The following fiddle shows the same problem in more reduced code
http://jsfiddle.net/catbadger/mhvzerdg/8/

Making custom chrome app top bar

I am making a chrome app and this is my background.js
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('window.html', {
'outerBounds': {
'width': 500,
'height': 500,
},
'resizable': false
});
});
I want to know how to make it so when I run the app, the top bar where you can close the app is a different color. I also want to know how to show text on the top bar with a different color.
The top bar is part of the window's frame.
You can supply a FrameOptions object to create():
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('window.html', {
'outerBounds': {
'width': 500,
'height': 500,
},
'resizable': false,
'frame': { /* ... */ }
});
});
You have 2 broad options:
You can keep the default system frame, and have (minimal) customization options: specifically, you can control the frame's color. See this sample.
'frame': { 'color': "#ff0000" }
Optionally, it can be different when active/inactive. See the documentation for appropriate format. You can't control the text color this way.
You can completely disable the OS-supplied frame, and build your own - but you'll need to provide your own controls (e.g. a close button) and draggable areas. See this sample.
'frame' : { 'type' : 'none' }
try this:
innerBounds: {
width: ,
height: ,
minWidth: ,
maxWidth: ,
minHeight: ,
maxHeight:
}

Hiding green constraint drag trail in Matter.js

I'm trying to create a small mobile game using Matter.js. I'm testing a few things with their mobile demo, found here: https://github.com/liabru/matter-js/blob/master/demo/js/DemoMobile.js
I can't figure out how to hide this green dragging trail that is shown when I drag an object. I tried to do the following:
World.add(_world, MouseConstraint.create(_engine, {
render: {
visible: false,
lineWidth: 0,
strokeStyle: 'rgba(0,0,0,0)'
}
}));
But that didn't work. Any ideas?
Try this:
var mouseConstraint = MouseConstraint.create(engine, {
constraint: {
render: {
visible: false
}
}
});

Categories