Add pngFull function to Cytoscape.js Core with Visual Cues Enhancement

[LaraMerdol]

Description:

This pull request proposes the addition of a new pngFull function enhancing the capabilities of exporting the graph to a PNG image by integrating visual cues.

Changes Made:

• New Functionality: Added the pngFull function as a new Cytoscape.js core function.
• Added export as PNG, PNG(hall) option to the demo

Notes:

• Dependency Added: Included the html2canvas library as a new dependency to enable rendering of cues.
• Dependency Note: Please note that the html2canvas library may not automatically recognize certain elements, such as 'cy-context-menus-cxt-menu' and 'cy-panzoom'.
• Customization Requirement: To ensure proper functionality, it's necessary to manually add these elements to the ignoreElementClasses parameter within the pngFull method.
  pngFull(options: any, ignoreElementClasses: string[] = [])
• Rendering time: When there are many cues in a graph, exploring the png may take longer.

Screenshots

Note

[canbax]

1. There is a flood of console logs. Can you get rid of them?

#280 218ms Finished rendering
cytoscape-visual-cues.ts:869 #281 0ms Starting document clone with size 1728x915 scrolled to 0,0
html2canvas.esm.js:7624 #281 176ms Document cloned, element located at 317.1070556640625,740.471435546875 with size 77.43096923828125x78.6600341796875 using computed rendering
html2canvas.esm.js:7624 #281 176ms Starting DOM parsing

2. This produces wrong images for "n18" node. See image below generated by this.

versus the image I see on the canvas

4. I see this method is computationally very expensive and long and hard to detect errors. Why not call html2canvas on the cytoscape.js container element? This seems much faster and smaller. Below code works to get image of what you see. To get the full image of canvas, maybe we need to play with the function html2canvas( Can you try that?

export async function pngFull(isWholeScreen: boolean): Promise<string> {
  const cy = this;
  const cyZoom = cy.zoom();
  const container = cy.container();
  return (
    await html2canvas(container, {
      backgroundColor: "transparent",
      scale: isWholeScreen ? 1 / cyZoom : 1,
    })
  ).toDataURL();
}

[canbax]

nitpick: I guess "(hall)" is a typo, shouldn't it need to be "(all)"?

[LaraMerdol]

Thank you for the correction, it has been changed to "whole".

[canbax]

suggestion: define type or interface for options, don't use any. This will be more clear and type-strict

[LaraMerdol]

Thank you for the suggestion, the interface has been defined for PngOptions.

[canbax]

Also, another issue is the pipeline. Why it failed?

[LaraMerdol]

1. 1. Console logs were removed, should I also remove the console errors?
2. 2. The issue is about the miscalculation of margins for the full option now it is fixed.

4. 4. The suggested implementation works well for the !full option. However, when rendering the entire graph, it seems necessary to render each cue separately and combine them with the image retrieved from png(full). The reason for this is that htmI2canvas only renders the visible part on the canvas, not the entire graph. Therefore, I have modified the implementation accordingly. Now, for the !full option, it will render the container as a whole, while for the full option, it will do the previous, more expensive implementation.

[LaraMerdol]

Also, another issue is the pipeline. Why it failed?

Now the pipeline is running without any issues. I have added the "Install Dependencies" step before running the project. Is this okay?

[canbax]

How about a different approach: If it's full first save the pan and zoom values of the canvas first. And then fit to canvas. And then wait some time so that the cues are positioned properly and then call html2canvas. After that revert the cytoscape pan and zoom values. The only disadvantage of this method is small flickering since we are changing pan and zoom values programmatically. But still, it's faster.

/**
 * 
 * @param wait milliseconds to wait
 * @returns 
 */
export function asyncWait(wait: number): Promise<boolean> {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, wait);
  });
}

const prevPan = cy.pan();
 const prevZoom = cy.zoom();
 cy.fit();
 await asyncWait(150);
 const results = (
    await html2canvas(container, { logging: false })
 ).toDataURL();
 cy.zoom(prevZoom);
 cy.pan(prevPan);
 return results;

What do you think about this approach? Also please, call html2canvas with logging:false

[LaraMerdol]

I have made the suggested changes. The approach works, but there is a slight flickering issue as you discussed earlier. In my opinion, I agree with you that this approach is less expensive and the flickering is not too bothersome.

Note: Also calling html2canvas with logging:false

[canbax]

Nice work! It's great that also considers the cues margins in cy.fit() call.

Of course, there could be lots of improvements such as adding tests, creating separate files for types and utils, performance tests, code style etc... But I think those are different concerns.