wehriam / cytoscape-css-renderer Goto Github PK

In order to achieve maximum performance, it is probably necessary to use transform: translate3d(...)

No recent changes and the demo is broken: http://htmlpreview.github.io/?https://github.com/wehriam/cytoscape-css-renderer/blob/master/demo.html. Is there some other option for html in node labels?

Before zooming in:

After zooming in:

I understand that it's because the font size is not changed but scaled by CSS transformation. I can't think of a proper solution immediately, but it's really an issue for end users.

Just use http://htmlpreview.github.io/?https://github.com/wehriam/cytoscape-css-renderer/blob/master/demo.html and zoom in to the extent that some nodes are out of the viewport, the labels of the out-of-screen nodes are no longer attached to their corresponding nodes.

Before zooming in:

After zooming in:

Instead of inheriting from the renderer, it would be more flexible to have this extension decoupled. The renderer may change in future, and there is also a concern with performance: drawNodeText() is synchronous.

That means that doing the DOM manipulation will hold up redraws(), thereby slowing down the "rendering loop" (not quite how it works, but the principle is the same). It would probably be faster to poll using timeouts, and update the labels then. There may be a slight lag in the labels, but that would be an acceptable tradeoff for performance.

In order to achieve maximum balance of performance and text quality, it is best to use the scale() transform during zooming, and then to use an adjusted font size along with scale(1, 1) when zooming is finished. That way, text is crisp when zooming is finished, and text is rendered quickly during zooming. You can use $$.util.debounce() on the zoom event for this.

Labels are not correctly positioned for the official "Compound nodes" demo ( http://js.cytoscape.org/#demos ). One would get something like:

Observations:

• a little right
• the parent nodes(which used {'text-valign': 'top', 'text-halign': 'center'}) are not on the top but centered

The code always assumed a width of 200px and calculates alignments based on that.

If we remove the codes handling alignments , it's actually a little better:

Along the same lines as #1, it may be better to be an element extension (i.e. function). That way, you can say explicitly which elements you want to use this. It also means that you can safely turn off regular labels using a bypass style (i.e. ele.css('min-zoomed-font-size', 9999999). Then you can read other label style properties as normal to render the labels with CSS.

The renderer does a good job of displaying html content on node and edge labels but when a node is hidden by the user, the labels remain visible for some reason.
I cannot understand what might be causing this problem.

Reading private element data is fine and necessary. However, I would be hesitant to read private renderer data, as compatibility could easily break with changes to the renderer. Consider that the renderer could be subject to refactoring, API changes, changes in rendering technology, etc.