Как я могу получить ссылку на объект cy в ngx-cytoscape? - PullRequest
Новая
       15

Как я могу получить ссылку на объект cy в ngx-cytoscape?

0 голосов
/ 13 октября 2018

Я пытаюсь использовать ngx-cytoscape .

Мне удалось заставить его работать, и график появляется, но следующий шаг потребует получения ссылки на cyobject.

На странице GitHub ngx-cytoscape есть пример добавления плагинов, но в нем не указано, в какой файл нужно добавить фрагмент кода или что еще требуется для его работы.

Может ли кто-нибудь помочь с этим?

1 Ответ

0 голосов
/ 14 октября 2018

Демо-компонент

Здесь есть полная версия демо-компонента - https://github.com/calvinvette/ngx-cytoscape/blob/master/cytodemo/cytodemo.component.ts

с получением ссылки на объект cy.

Вы можете получить ссылку с помощью cy Объект с помощью @ViewChild в вашем компоненте, и вы можете получить доступ к объекту cy из этого ссылочного компонента в функции ngAfterViewInit. 

@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)
              });
          });
      }
      // ...
  }
...