如何在 ngx-cytoscape 中获得 cy 对象的引用？

Question

I'm trying to use ngx-cytoscape .

I've managed to get it work and the graph appears, but the next step would require getting a reference to the cy object.

There is an example on ngx-cytoscape's GitHub page for adding plugins, but it doesn't say in which file that code snippet should be added to or what else is required to get it work.

Could anyone help with this?

Answer 1

Demo Component

There is full version of demo component here - https://github.com/calvinvette/ngx-cytoscape/blob/master/cytodemo/cytodemo.component.ts

getting a reference to the cy object.

You can get the reference by cy Object by using the @ViewChild in your component and you can get the access of cy object from this reference component in ngAfterViewInit function.

@ViewChild(CytoscapeComponent)
private cytograph: CytoscapeComponent;

ngAfterViewInit() {
      if (this.cytograph.cy) {
        const cyLayer = this.cytograph.cy.cyCanvas();
        const cnv: HTMLCanvasElement = cyLayer.getCanvas();
        const ctx: CanvasRenderingContext2D = cnv.getContext("2d");
        // ...
          this.cytograph.cy.on("render cyCanvas.resize", function(evt, src) {
              // "this" is now "cy" inside this callback function
              cyLayer.resetTransform(ctx);
              cyLayer.clear(ctx);
              ctx.fillStyle = "#ff00ff";
              //ctx.fillRect(0, 0, 100, 100); // Top left corner
              cyLayer.setTransform(ctx);

              const width = cnv.width;
              const height = cnv.height;
              const data = Array(width * height);

              // Draw model elements
              this.nodes().forEach(function(node) {
                  const pos = node.position();
                  // Do something with canvas at or around the node's position
                  ctx.fillRect(pos.x - 25, pos.y - 25, 50, 50); // At node position (bisection point of 50x50 rectangle)
              });
          });
      }
      // ...
  }