Performance issues when rendering 100 custom nodes #5176

问题描述

Good afternoon! I use your wonderful product and faced the following problem: I'm trying to render 100 custom shapes and 50 links between them. The rendering itself is very fast, but the canvas slows down very much, especially visible when moving across the canvas, and focusing on each element through focusItem. What could you suggest to improve performance? Except enableOptimize

重现链接

No

重现步骤

My custom render:

` G6.registerNode( 'configuration-unit', { getAnchorPoints: () => [ [0, 0.5], [1, 0.5], ],

  drawShape(cfg, group) {
    // Основной BBOX
    const shape = group.addShape('rect', {
      attrs: {
        x: -20,
        y: 0,
        width: 45,
        height: 24,
      },
      name: 'main-box',
      draggable: true,
    })

    // FAKE контейнер
    group.addShape('rect', {
      attrs: {
        x: 0,
        y: 0,
        width: 250,
        height: 100,
      },
      name: 'main-box-fake',
      draggable: true,
    })

    // Обводка для иконки
    group.addShape('circle', {
      attrs: {
        x: 2,
        y: 13,
        height: 24,
        width: 24,
        r: 12,
        cursor: 'pointer',
        fill: 'white',
        stroke: 'white',
        lineWidth: 2,
        shadowBlur: 10,
        shadowColor: colors.shadow,
      },
      name: 'circle-node-icon',
      draggable: true,
    })

    // Иконка
    group.addShape('image', {
      attrs: {
        x: -6,
        y: 5,
        height: 16,
        width: 16,
        cursor: 'pointer',
        img: enumConfigurationUnitIcons[cfg.data.classID],
      },
      name: 'node-icon',
      draggable: true,
    })

    // Название
    group.addShape('text', {
      attrs: {
        textBaseline: 'center',
        textAlign: 'center',
        y: 40,
        fontWeight: 700,
        text: cfg.data.name,
        fill: '#2B2A29',
      },
      name: 'title',
      draggable: true,
    })

    // Подзаголовок
    group.addShape('text', {
      attrs: {
        textBaseline: 'center',
        textAlign: 'center',
        y: 56,
        text: cfg.data.model,
        fill: colors.black,
      },
      name: 'subtitle',
      draggable: true,
    })

    // Название типа
    group.addShape('text', {
      attrs: {
        textBaseline: 'center',
        textAlign: 'center',
        y: 72,
        text: cfg.data.typeName,
        fill: colors.darkGray,
      },
      name: 'typeName',
      draggable: true,
    })

    // Иконка сбоя
    if (cfg.data.failure) {
      group.addShape('image', {
        attrs: {
          x: -7,
          y: 75,
          height: 16,
          width: 16,
          cursor: 'pointer',
          img: incident,
        },
        name: 'incident',
      })
    }

    // Левый порт
    group.addShape('circle', {
      attrs: {
        x: -16,
        y: 12,
        r: 5,
        fill: colors.lightGray,
      },
      name: 'left-port',
    })

    // Правый порт
    group.addShape('circle', {
      attrs: {
        x: 20,
        y: 12,
        r: 5,
        fill: colors.lightGray,
      },
      name: 'right-port',
    })

    return shape
  },

  setState(name, value, item) {
    const group = item.getContainer()

    const children = group.get('children')

    const image = children.find(
      ({ cfg }) => cfg.name === 'circle-node-icon'
    )
    const title = children.find(({ cfg }) => cfg.name === 'title')
    const leftPort = children.find(({ cfg }) => cfg.name === 'left-port')
    const rightPort = children.find(({ cfg }) => cfg.name === 'right-port')

    if (name === 'focused') {
      image.animate(
        (ratio) => {
          const diff = ratio <= 0.5 ? ratio * 4 : (1 - ratio) * 4
          return {
            r: 24 / 2 + diff,
          }
        },
        {
          repeat: true,
          duration: 2000,
          easing: 'easeCubic',
        }
      )

      if (value) {
        // Иконка
        image.attr('shadowBlur', 10)
        image.attr('shadowColor', colors.shadow)
        image.attr('stroke', colors.blue)

        // Текст
        title.attr('fill', colors.blue)

        // Порты
        leftPort.attr('fill', colors.blue)
        rightPort.attr('fill', colors.blue)
      } else {
        // Иконка
        image.attr('fill', 'white')
        image.attr('stroke', 'white')

        // Текст
        title.attr('fill', colors.black)

        // Порты
        leftPort.attr('fill', colors.lightGray)
        rightPort.attr('fill', colors.lightGray)

        image.stopAnimate()
      }
    }
  },
},
'single-node'

)`

预期行为

I expected the performance of the canvas when interacting with it

平台

• 操作系统: [macOS, Windows, Linux, React Native ...]
• 网页浏览器: [Google Chrome, Safari, Firefox]
• G6 版本: [4.5.1 ... ]

屏幕截图或视频（可选）

Uploading InfraManager WEB - Google Chrome 2023-11-21 23-08-24.mp4…

补充说明（可选）

No response