src/components/Topology/AppTopology.js

/**
 * Licensed to the Apache Software Foundation (ASF) under one or more
 * contributor license agreements.  See the NOTICE file distributed with
 * this work for additional information regarding copyright ownership.
 * The ASF licenses this file to You under the Apache License, Version 2.0
 * (the "License"); you may not use this file except in compliance with
 * the License.  You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */


import cytoscape from 'cytoscape';
import * as d3 from 'd3';
import Base from './Base';

const conf = {
  nodeSize: {
    min: 60,
    max: 120,
  },
};
export default class AppTopology extends Base {
  setUp = (elements) => {
    const { nodes } = elements;
    const eleWithNewUsers = this.supplyUserNode(elements.edges);
    return {
      edges: eleWithNewUsers.edges,
      nodes: nodes.filter(_ => !_.data || _.data.id !== '1').concat(eleWithNewUsers.nodes),
    };
  }

  supplyUserNode = (edges) => {
    let i = 0;
    const nodes = [];
    const time = new Date().getTime();
    return {
      nodes,
      edges: edges.map((_) => {
        if (_.data.source !== '1') {
          return _;
        }
        i += 1;
        const newId = `USER-${time}-${i}`;
        nodes.push({
          data: {
            id: newId,
            name: 'User',
            type: 'USER',
          },
        });
        return {
          data: {
            ..._.data,
            source: newId,
            id: `${newId}-${_.data.target}`,
          },
        };
      }),
    };
  }

  bindEvent = (cy) => {
    const { onSelectedApplication } = this.props;
    if (onSelectedApplication) {
      cy.on('select', 'node[?isReal]', (evt) => {
        const node = evt.target;
        onSelectedApplication(node.data());
      });
      cy.on('unselect', 'node[?isReal]', () => {
        onSelectedApplication();
      });
    }
    const layer = cy.cyCanvas();
    const canvas = layer.getCanvas();
    

    cy.on('render cyCanvas.resize', (evt) => {
      const ctx = canvas.getContext('2d');
      layer.resetTransform(ctx);
      layer.clear(ctx);

      layer.setTransform(ctx);

      // Draw model elements
      cy.nodes('node[type != "USER"]').forEach( (node) => {
        const pos = node.position();
        layer.setTransform(ctx);
        const colors = ["#f5222d", "#1890ff"];

        const arc = d3.arc()
            .outerRadius(33)
            .innerRadius(27)
            .context(ctx);

        const pie = d3.pie()
            .sort(null);

        ctx.translate(pos.x, pos.y);

        const arcs = pie([30, 70]);

        arcs.forEach((d, i) => {
          ctx.beginPath();
          arc(d);
          ctx.fillStyle = colors[i];
          ctx.fill();
        });
      });
    });
  }

  getStyle = () => {
    return cytoscape.stylesheet()
      .selector('node[?isReal]')
      .css({
        width: 60,
        height: 60,
        'text-valign': 'bottom',
        'text-halign': 'center',
        'font-family': 'Microsoft YaHei',
        content: 'data(name)',
        'text-margin-y': 10,
        'border-width': 6,
        'border-color': '#40a9ff',
        'background-image': ele => `img/node/${ele.data('type') ? ele.data('type').toUpperCase() : 'UNDEFINED'}.png`,
        'background-width': '60%',
        'background-height': '60%',
        'background-color': '#e6f7ff',
      })
      .selector(':selected')
      .css({
        'border-width': 4,
      })
      .selector('.faded')
      .css({
        opacity: 0.25,
        'text-opacity': 0,
      })
      .selector('node[!isReal]')
      .css({
        width: 60,
        height: 60,
        'text-valign': 'bottom',
        'text-halign': 'center',
        'background-color': '#e6f7ff',
        'background-image': ele => `img/node/${ele.data('type') ? ele.data('type').toUpperCase() : 'UNDEFINED'}.png`,
        'background-width': '60%',
        'background-height': '60%',
        'border-width': 6,
        'border-color': '#40a9ff',
        'font-family': 'Microsoft YaHei',
        label: 'data(name)',
        'text-margin-y': 10,
        // 'text-margin-y': 5,
      })
      .selector('edge')
      .css({
        'curve-style': 'bezier',
        'control-point-step-size': 100,
        'target-arrow-shape': 'triangle',
        'arrow-scale': 1.7,
        'target-arrow-color': '#40a9ff',
        'line-color': 'mapData(101, 0, 100, #40a9ff, #ffa39e)',
        'opacity': 0.666,
        width: 3,
        label: ele => `${ele.data('callType')}`,
        'text-wrap': 'wrap',
        color: 'rgb(110, 112, 116)',
        'text-rotation': 'autorotate',
      });
  }
}