const graph = new Graph({
  autoFit: {
    type: 'view', // 自适应类型：'view' 或 'center'
    options: {
      // 仅适用于 'view' 类型
      when: 'overflow', // 何时适配：'overflow'(仅当内容溢出时) 或 'always'(总是适配)
      direction: 'x', // 适配方向：'x'、'y' 或 'both'
    },
    animation: {
      // 自适应动画效果
      duration: 1000, // 动画持续时间(毫秒)
      easing: 'ease-in-out', // 动画缓动函数
    },
  },
});

type ViewportAnimationEffectTiming =
  | boolean // true 启用默认动画，false 禁用动画
  | {
      easing?: string; // 动画缓动函数：'ease-in-out'、'ease-in'、'ease-out'、'linear'
      duration?: number; // 动画持续时间(毫秒)
    };

import { Renderer as SVGRenderer } from '@antv/g-svg';
import { Graph } from '@antv/g6';

const graph = new Graph({
  renderer: () => new SVGRenderer(),
});

// 单个数值
const graph1 = new Graph({
  padding: 20, // 四边均为 20 像素的内边距
});

// 数组形式
const graph2 = new Graph({
  padding: [20, 40, 20, 40], // 上、右、下、左的内边距
});

// 简单启用
const graph1 = new Graph({
  animation: true,
});

// 详细配置
const graph2 = new Graph({
  animation: {
    duration: 500, // 动画持续时间（毫秒）
    easing: 'ease-in-out', // 缓动函数
  },
});

const graph = new Graph({
  data: {
    nodes: [
      { id: 'node1', style: { x: 100, y: 100 } },
      { id: 'node2', style: { x: 200, y: 200 } },
    ],
    edges: [{ id: 'edge1', source: 'node1', target: 'node2' }],
    combos: [{ id: 'combo1', style: { x: 150, y: 150 } }],
  },
});

const graph = new Graph({
  node: {
    type: 'circle', // 节点类型
    style: {
      fill: '#e6f7ff', // 填充色
      stroke: '#91d5ff', // 边框色
      lineWidth: 1, // 边框宽度
      r: 20, // 半径
      labelText: (d) => d.id, // 标签文本
    },
    // 节点状态样式
    state: {
      hover: {
        lineWidth: 2,
        stroke: '#69c0ff',
      },
      selected: {
        fill: '#bae7ff',
        stroke: '#1890ff',
        lineWidth: 2,
      },
    },
  },
});

const graph = new Graph({
  edge: {
    type: 'polyline', // 边类型
    style: {
      stroke: '#91d5ff', // 边的颜色
      lineWidth: 2, // 边的宽度
      endArrow: true, // 是否有箭头
    },
    // 边的状态样式
    state: {
      selected: {
        stroke: '#1890ff',
        lineWidth: 3,
      },
    },
  },
});

const graph = new Graph({
  combo: {
    type: 'circle', // 组合类型
    style: {
      fill: '#f0f0f0', // 背景色
      stroke: '#d9d9d9', // 边框色
      lineWidth: 1, // 边框宽度
    },
    // 组合状态样式
    state: {
      selected: {
        stroke: '#1890ff',
        lineWidth: 2,
      },
    },
  },
});

const graph = new Graph({
  container: 'container',
  layout: {
    type: 'force', // 力导向布局
    preventOverlap: true, // 防止节点重叠
    nodeStrength: -50, // 节点之间的斥力
    edgeStrength: 0.5, // 边的弹性系数
    iterations: 200, // 迭代次数
    animation: true, // 启用布局动画
  },
});

const graph = new Graph({
  behaviors: [
    'drag-canvas', // 使用默认配置启用画布拖拽
    'zoom-canvas', // 使用默认配置启用画布缩放
    {
      type: 'drag-element', // 自定义配置拖拽元素
      key: 'drag-node-only',
      enable: (event) => event.targetType === 'node', // 只允许拖拽节点
    },
    function () {
      console.log(this); // 输出 graph 实例
      return {
        type: 'hover-activate',
      };
    },
  ],
});

const graph = new Graph({
  container: 'container',
  plugins: [
    'minimap', // 启用小地图，使用默认配置
    {
      type: 'grid', // 启用网格背景
      key: 'grid-plugin',
      line: {
        stroke: '#d9d9d9',
        lineWidth: 1,
      },
    },
    {
      type: 'toolbar', // 启用工具栏
      key: 'graph-toolbar',
      position: 'top-right', // 位置
    },
  ],
});

const graph = new Graph({
  transforms: [
    'process-parallel-edges', // 处理平行边，使用默认配置
    {
      type: 'map-node-size', // 根据节点数据映射节点大小
      field: 'value', // 使用 value 字段的值
      max: 50, // 最大半径
      min: 20, // 最小半径
    },
  ],
});

interface CustomExtensionOption extends Record<string, any> {
  /** 拓展类型 */
  type: string;
  /** 拓展 key，即唯一标识 */
  key?: string;
}