sgratzl / cytoscape.js-layers Goto Github PK
View Code? Open in Web Editor NEWCytoscape.js plugin for simplified layers (svg, canvas, html)
License: MIT License
Cytoscape.js plugin for simplified layers (svg, canvas, html)
License: MIT License
Hello,
How can I change the style after calling renderPerEdge? Example, changing the color between red and blue using two buttons. It seems to rerender additionally for each click if I call below code on button click.
layers.renderPerEdge(customLayer, (ctx, edge, path) => {
ctx.strokeStyle = btnColor;
ctx.stroke(path);
});
Use the renderPerNode() method to draw the canvas first, and then use the png() method with the configuration option full=true to export the entire graphics. However, when exporting the entire graphics, the canvas may experience position offset.
It would be great if
optimize html and svg renderPerNode/renderPerEdge to only update the single node/edge
I create the custom canvas layer and set bg="#fff" when exporting the canvas, but the exported background color is not white.
It would be great if the library supports exporting the layers along with the graph
issues
When I try to pass the "{updateOn: "render"}" prop to renderPerEdge, nothing gets rendered at all. When I dont pass a value it gets rendered but does not update on rerender. the property does work as expected on the renderPerNode method.
This example does not render anything at all:
layers.renderPerEdge(layers.append('canvas'), (ctx, edge, path, start, end) => {
ctx.strokeStyle = 'red';
ctx.stroke(path);
}, {updateOn: "render"});
Expected behavior
Same behaviour as for the renderPerNode method
Context
I created 4 canvas layers using the insert method and then used the renderPerNode method to draw the canvas. I used queryEachTime=true because I needed to update the custom canvas every time it was redrawn. When there is a large amount of data, dragging or scaling the canvas will feel too laggy. How can I use methods like requestAnimationFrame to reduce the redrawing of the canvas?
If edges have arrows, the path when using renderPerEdge goes from edge.sourceEndpoint() to edge.targetEndpoint(). Is it possible to render the path from edge.source().position() to edge.target().position()? It seems straightforward if the path is "straight" but not sure how to apply it to "bezier" style. Is there a way to achieve this or maybe consider an option for fullPath?
Hi there, I was wondering if it is possible to get the layer that cytoscape uses for their rendering? Otherwise is it possible to get a canvas "behind" their render? I'm trying to write to either a canvas or SVG behind the cytoscape render - not just behind nodes or edges
I tried this - but canvasLayer is undefined:
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
const layers = cy.layers( );
const canvasLayer = layers.canvasLayer;
Screenshots / Sketches
Context
Additional context
I'm trying to render a dom node for each cytoscape node but they seem to be additively rendering every change. This is what my render function looks like. Do you know what I may be doing wrong? Thanks for the awesome library!
layers.renderPerNode(layers.append("html"), (elem, node) => {
const classes = (node.classes() as unknown as string[]).join(" ");
drawNode(elem, node.data(), classes, ["label"]);
});
function drawNode(
div: HTMLElement,
data: NodeDefinition["data"],
classes: string,
visibleAttributes = ["label"]
) {
// add the classes
div.setAttribute("class", ("node " + classes).trim());
// add the attributes that should be displayed
for (let i = 0; i < visibleAttributes.length; i++) {
const attr = visibleAttributes[i];
const value = data[attr];
if (value) {
const span = document.createElement("span");
span.setAttribute("class", attr);
span.textContent = value;
div.appendChild(span);
}
}
}
We use cytoscape-layers plugin for rendering the informational badges with each node. We were using version 2.1.0
for a very long time, but since it had some unpredictable bugs and extra amount of re-rendering involved, we had to move to the latest version of this plugin. We had started using v2.3.0
, but with the html layer it has got some serious bugs that are blocking the functional properties of our badges. In the code, there has been some calls to variables whose references aren't resolved giving uncaught errors, catching those errors block the behavioural properties of badges.
This is the error we get in production compiled build:
This error is arising from here:
cytoscape.js-layers/src/layers/ABaseLayer.ts
Lines 67 to 69 in 74cd9a7
this.update();
which throws further error of update is not a function
.v2.2.0
also.
The cytoscape badge in our UI looks like this:
on changing the position of node, the position of badge doesnt change and stay at the same place.
To Reproduce
const createBadge = (nodeId, render, cy,) => {
/** @type {LayersPlugin} */
const layers = cy.layers();
layers.renderPerNode(
layers.append("html"),
(elem, node) => {
if (node.data("id") === nodeId) {
render(node, elem);
}
},
);
};
layers.append("html")
creates an html layer and render process has the styling config for it.Expected behavior
On changing the position of the node, the badge should move at the correct place.
Screenshots
Context
Additional context
hi, I found your repo while i'm looking for about cytoscape.js
I think ctxmenu
link in the repo's readme file is wrong.
the link is ctxmenu.ts
, but file name is cxtmenu.ts
html file name is too.
I think you should change the link in the readme file ctxmenu.ts
to cxtmenu.ts
I don't know if I can create a pull request, so I'm leaving an issue.
it's trivial.
Screenshots / Sketches
if you click ctxmenu
link
you can see 404
Context
Additional context
allowing only canvas layer in combination with a offscreen canvas similar to cytoscape. Only useful in case #1 is supported
Here's an example
https://codepen.io/wlhz/pen/XWaeOry
GIF worth thousand words :
I'm using latest release of this awesome plugins and I'm figuring out that if I don't use queryEachTime: true
, the layers doesn't seems to be deleting when I delete node. In the GIF we can see it by loading another graph but I've the same problem when trying to delete a single node by hand. I must be missing something, can you help me please ?
Sidenote: the reason I try to avoid using queryEachTime is that when graph have around 500 nodes, zooming, panning start to became a bit laggy. When a set it to false, it's ok.
Here's my messy useEffect :
useEffect(() => {
if (!graphRefCtx.current) return
layersRef.current = (graphRefCtx.current as FixMeLater).layers()
if (!layersRef.current) return
// Only if graph have some nodes
if (graphRefCtx.current.nodes().length)
layersRef.current.renderPerNode(
layersRef.current.append('html'),
(elem: HTMLElement, node: NodeSingular) => {
if (!node.data('note') && !node.data('image')) return
let html = `
<div class="graph-icon-wrapper"
data-dimmed=${node.style('opacity') == 0.2}
style="width: ${node.width()}px; height: ${node.height()}px;"
>
`
// If node has a note
if (node.data?.('note')?.length > 0) {
html += `
<div class="graph-icon note" style="
height: ${
// Return at least 8px, or 1/3 of node height, or maxium 20px
Math.max(7, Math.min(Math.floor(node.height() / 3.3), 15))
}px;
border-color:${getIconColor('sticky-note')}">
<img src="${getIconToString('sticky-note', '')}" />
</div>
`
}
// If node has an image
if (node.data?.('image')?.length > 0) {
html += `
<div class="graph-icon" style="
height: ${
// Return at least 8px, or 1/3 of node height, or maxium 20px
Math.max(7, Math.min(Math.floor(node.height() / 3.3), 15))
}px;
border-color:${getIconColor(node.data('type'))}">
<img src="${getIconToString(node.data('type'), '')}" />
</div>
`
}
// If node has a 'seeNote' class
if (node.hasClass('seeNote')) {
html += `
<div class="visibleNote"
style="left:${node.height() + 5}px;"
>
<p>${node.data('note')}</p>
</div>
`
}
elem.innerHTML = html + '</div>'
},
{
position: 'center',
transform: 'translate(-50%,-50%)',
// uniqueElements: true,
// queryEachTime: true,
},
)
}, [currentGraph.id])
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.