drawLinkPoints and updateLinkPoints methods are not available in typescript #4687

Describe the bug

I am trying to integrate the @antv/g6 library with Angular 16. I have the following code in the component.

import G6, { Graph, IGroup, IPoint, Item, ModelConfig } from '@antv/g6';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit, AfterViewInit {
mockData = {...}

props = {
    data: this.mockData,
    config: {
      padding: [20, 50],
      defaultLevel: 3,
      defaultZoom: 0.8,
      modes: { default: ['zoom-canvas', 'drag-canvas'] },
    },
  };

ngAfterViewInit() {
const container = document.getElementById('graph-container')!;
    const width = container.scrollWidth;
    const height = container.scrollHeight || 500;
    const defaultConfig = {
      width,
      height,
      modes: {
        default: ['zoom-canvas', 'drag-canvas'],
      },
      fitView: true,
      animate: true,
      defaultNode: {
        type: 'flow-rect',
      },
      defaultEdge: {
        type: 'cubic-horizontal',
        style: {
          stroke: '#CED4D9',
        },
      },
      layout: {
        type: 'indented',
        direction: 'LR',
        dropCap: false,
        indent: 300,
        getHeight: () => {
          return 60;
        },
      },
    };
    const { data } = this.props;
    const { config } = this.props;

    const graph1 = new G6.TreeGraph({
      container: container,
      ...defaultConfig,
      ...config,
    });

    graph1.data(data);
    graph1.render();

}


  registerFn = () => {
    G6.registerNode(
      'flow-rect',
      {
        shapeType: 'flow-rect',
        draw(cfg, group) {
          const {
            name = '',
            variableName,
            variableValue,
            variableUp,
            label,
            collapsed,
            currency,
            status,
            rate,
          }: ModelConfig = cfg;

          const grey = '#CED4D9';
          const rectConfig = {
            width: 202,
            height: 60,
            lineWidth: 1,
            fontSize: 12,
            fill: '#fff',
            radius: 4,
            stroke: grey,
            opacity: 1,
          };

          const nodeOrigin = {
            x: -rectConfig.width / 2,
            y: -rectConfig.height / 2,
          };
          enum textBaseline {
            Top = 'top',
            Hanging = 'hanging',
            Middle = 'middle',
            Alphabetic = 'alphabetic',
            Ideographic = 'ideographic',
            Bottom = 'bottom',
          }
          enum TextAlignment {
            Start = 'start',
            Center = 'center',
            End = 'end',
            Left = 'left',
            Right = 'right',
          }
          const textConfig = {
            textAlign: TextAlignment.Left,
            textBaseline: textBaseline.Bottom,
          };

          const rect = group.addShape('rect', {
            attrs: {
              x: nodeOrigin.x,
              y: nodeOrigin.y,
              ...rectConfig,
            },
          });

          const rectBBox = rect.getBBox();

          // label title
          group.addShape('text', {
            attrs: {
              ...textConfig,
              x: 12 + nodeOrigin.x,
              y: 20 + nodeOrigin.y,
              text:
                (name as any).length > 28
                  ? (name as any).substr(0, 28) + '...'
                  : name,
              fontSize: 12,
              opacity: 0.85,
              fill: '#000',
              cursor: 'pointer',
            },
            // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
            name: 'name-shape',
          });

          // price
          const price = group.addShape('text', {
            attrs: {
              ...textConfig,
              x: 12 + nodeOrigin.x,
              y: rectBBox.maxY - 12,
              text: label,
              fontSize: 16,
              fill: '#000',
              opacity: 0.85,
            },
          });

          // label currency
          group.addShape('text', {
            attrs: {
              ...textConfig,
              x: price.getBBox().maxX + 5,
              y: rectBBox.maxY - 12,
              text: currency,
              fontSize: 12,
              fill: '#000',
              opacity: 0.75,
            },
          });

          // percentage
          const percentText = group.addShape('text', {
            attrs: {
              ...textConfig,
              x: rectBBox.maxX - 8,
              y: rectBBox.maxY - 12,
              text: `${(((variableValue as any) || 0) * 100).toFixed(2)}%`,
              fontSize: 12,
              textAlign: 'right',
              // fill: colors[status],
            },
          });

          // percentage triangle
          const symbol = variableUp ? 'triangle' : 'triangle-down';
          const triangle = group.addShape('marker', {
            attrs: {
              ...textConfig,
              x: percentText.getBBox().minX - 10,
              y: rectBBox.maxY - 12 - 6,
              symbol,
              r: 6,
              // fill: colors[status],
            },
          });

          // variable name
          group.addShape('text', {
            attrs: {
              ...textConfig,
              x: triangle.getBBox().minX - 4,
              y: rectBBox.maxY - 12,
              text: variableName,
              fontSize: 12,
              textAlign: 'right',
              fill: '#000',
              opacity: 0.45,
            },
          });

          // bottom line background
          const bottomBackRect = group.addShape('rect', {
            attrs: {
              x: nodeOrigin.x,
              y: rectBBox.maxY - 4,
              width: rectConfig.width,
              height: 4,
              radius: [0, 0, rectConfig.radius, rectConfig.radius],
              fill: '#E0DFE3',
            },
          });

          // bottom percent
          const bottomRect = group.addShape('rect', {
            attrs: {
              x: nodeOrigin.x,
              y: rectBBox.maxY - 4,
              width: (rate as any) * rectBBox.width,
              height: 4,
              radius: [0, 0, 0, rectConfig.radius],
              // fill: colors[status],
            },
          });

          // collapse rect
          if (cfg['children'] && (cfg['children'] as any).length) {
            group.addShape('rect', {
              attrs: {
                x: rectConfig.width / 2 - 8,
                y: -8,
                width: 16,
                height: 16,
                stroke: 'rgba(0, 0, 0, 0.25)',
                cursor: 'pointer',
                fill: '#fff',
              },
              // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
              name: 'collapse-back',
              modelId: cfg['id'],
            });

            // collpase text
            group.addShape('text', {
              attrs: {
                x: rectConfig.width / 2,
                y: -1,
                textAlign: 'center',
                textBaseline: 'middle',
                text: collapsed ? '+' : '-',
                fontSize: 16,
                cursor: 'pointer',
                fill: 'rgba(0, 0, 0, 0.25)',
              },
              // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
              name: 'collapse-text',
              modelId: cfg['id'],
            });
          }

          this.drawLinkPoints(cfg, group);// Getting Error here: Property 'drawLinkPoints' does not exist on type 'String | Partial<{ [key: string]: any; options: ModelConfig; type: string; itemType: string;
          return rect;
        },
        update(cfg, item) {
          const { level, status, name } = cfg;
          const group = item.getContainer();
          let mask = group.find((ele) => ele.get('name') === 'mask-shape');
          let maskLabel = group.find(
            (ele) => ele.get('name') === 'mask-label-shape'
          );
          if (level === 0) {
            group.get('children').forEach((child: any) => {
              if (child.get('name')?.includes('collapse')) return;
              child.hide();
            });
            if (!mask) {
              mask = group.addShape('rect', {
                attrs: {
                  x: -101,
                  y: -30,
                  width: 202,
                  height: 60,
                  opacity: 0,
                  // fill: colors[status],
                },
                // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
                name: 'mask-shape',
              });
              maskLabel = group.addShape('text', {
                attrs: {
                  fill: '#fff',
                  fontSize: 20,
                  x: 0,
                  y: 10,
                  text:
                    (name as any).length > 28
                      ? (name as any).substr(0, 16) + '...'
                      : name,
                  textAlign: 'center',
                  opacity: 0,
                },
                // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
                name: 'mask-label-shape',
              });
              const collapseRect = group.find(
                (ele) => ele.get('name') === 'collapse-back'
              );
              const collapseText = group.find(
                (ele) => ele.get('name') === 'collapse-text'
              );
              collapseRect?.toFront();
              collapseText?.toFront();
            } else {
              mask.show();
              maskLabel.show();
            }
            mask.animate({ opacity: 1 }, 200);
            maskLabel.animate({ opacity: 1 }, 200);
            return mask;
          } else {
            group.get('children').forEach((child: any) => {
              if (child.get('name')?.includes('collapse')) return;
              child.show();
            });
            mask?.animate(
              { opacity: 0 },
              {
                duration: 200,
                callback: () => mask.hide(),
              }
            );
            maskLabel?.animate(
              { opacity: 0 },
              {
                duration: 200,
                callback: () => maskLabel.hide(),
              }
            );
          }
          this.updateLinkPoints(cfg, group);
        },
        setState(name, value, item) {
          if (name === 'collapse') {
            const group = (item as any).getContainer();
            const collapseText = group.find(
              (e: any) => e.get('name') === 'collapse-text'
            );
            if (collapseText) {
              if (!value) {
                collapseText.attr({
                  text: '-',
                });
              } else {
                collapseText.attr({
                  text: '+',
                });
              }
            }
          }
        },
        getAnchorPoints() {
          return [
            [0, 0.5],
            [1, 0.5],
          ];
        },
      },
      'rect'
    );
  };
}

Your Example Website or App

https://stackblitz.com/edit/stackblitz-starters-uuhj6k

Steps to Reproduce the Bug or Issue

Getting error while serving the code during initial compile:

Getting Error here: Property 'drawLinkPoints' does not exist on type 'String | Partial<{ [key: string]: any; options: ModelConfig; type: string; itemType: string;

Expected behavior

Graph should render as expected. The same code when tried with cdn (https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.7.1/dist/g6.min.js) is working fine

Screenshots or Videos

<img width="978" alt="image" src="https://github.com/antvis/G6/assets/994083/9223bf23-6d1a-442f-a655-b69bada097bc">

Platform

• OS: macOS
• Browser: Chrome
• Version: g6 version 4.8.17

Additional context

No response