cy.ready(event => {
  // 图数据加载完成且初始布局已应用
  console.log('图已就绪，节点数:', cy.nodes().length);
  cy.fit(undefined, 30);
});

const cy = cytoscape({ /* options */ })

// 常用 Core 方法
cy.add([...])          // 添加元素
cy.remove('node#a')    // 删除元素
cy.getElementById('a') // 获取元素
cy.nodes()             // 获取所有节点
cy.edges()             // 获取所有边
cy.layout({...}).run() // 运行布局
cy.fit()               // 适应画布
cy.center()            // 居中所有元素
cy.zoom(2)             // 缩放到 200%
cy.pan({ x: 50, y: 0 }) // 平移画布
cy.destroy()           // 销毁实例

// 获取所有被选中的节点
cy.nodes(':selected');

// 获取边权重 > 0.5 的边
cy.edges('[weight > 0.5]');

// 获取节点 a 的邻域（1 跳）
cy.getElementById('a').neighborhood();

// 获取节点 a 的相邻节点
cy.getElementById('a').connectedEdges().connectedNodes();

// 获取节点 a 到 b 的最短路径
cy.getElementById('a').aStar({ root: '#b' });

const node = cy.getElementById('a');

// 获取/设置数据
node.data('label'); // '张三'
node.data('label', '张三丰'); // 更新 label
node.data(); // { id: 'a', label: '张三丰' }

// 位置操作
node.position(); // { x: 100, y: 200 }
node.position({ x: 300, y: 400 });

// CSS 样式（渲染样式，非 data）
node.style('background-color', 'red');

// 节点特有
node.degree(); // 度（相连边数）
node.indegree(); // 入度
node.outdegree(); // 出度

// 边特有
const edge = cy.getElementById('ab');
edge.source(); // 源节点对象
edge.target(); // 目标节点对象
edge.isLoop(); // 是否是自环

// 坐标转换
const modelPos = node.position(); // 模型坐标
const renderedPos = node.renderedPosition(); // Canvas 像素坐标

// 事件中获取
cy.on('tap', 'node', evt => {
  evt.position; // model position
  evt.renderedPosition; // rendered position (用于定位 popover/tooltip)
});

// 定义父子关系（在 data 中通过 parent 字段指定）
const cy = cytoscape({
  elements: [
    // 父节点（容器）
    { data: { id: 'parent-1', label: '分组 A' } },
    // 子节点
    { data: { id: 'a', parent: 'parent-1', label: '张三' } },
    { data: { id: 'b', parent: 'parent-1', label: '李四' } },
    // 无父节点的正常节点
    { data: { id: 'c', label: '王五' } },
  ],
  style: [
    { selector: 'node', style: { label: 'data(label)' } },
    // 父节点样式（不同的边框和背景）
    {
      selector: ':parent',
      style: {
        'background-opacity': 0.3,
        'background-color': '#1a3a5c',
        'border-color': '#2a6eb0',
        'border-width': 2,
        'border-style': 'dashed',
      },
    },
    // 边也支持复合：连接两个父节点
    { data: { id: 'e1', source: 'parent-1', target: 'c', label: '组间关联' } },
  ],
});

// 检查节点是否为父节点
node.isParent(); // true 如果该节点有子节点

// 获取父节点 / 子节点
node.parent(); // 返回父节点（或空集合）
node.children(); // 返回直接子节点
node.descendants(); // 返回所有后代（递归）
node.ancestors(); // 返回所有祖先

// 修改父子关系
node.move({ parent: 'parent-1' }); // 将 node 移动到 parent-1 下
node.move({ parent: null }); // 从父节点中移出

// 折叠/展开
node.collapse(); // 折叠（隐藏子节点）
node.expand(); // 展开（显示子节点）

// 绑定临时数据
node.scratch('isExpanded', true)
node.scratch('_tooltipTimer', setTimeout(...))
node.scratch('_positions', { originalX: 100, originalY: 200 })

// 读取
if (node.scratch('isExpanded')) { ... }

// 删除
node.removeScratch('isExpanded')  // 删除指定 key
node.scratch()                     // 获取整个 scratch 对象

// 批量添加节点并设置初始位置，只触发一次重绘
cy.batch(() => {
  for (let i = 0; i < 100; i++) {
    cy.add({
      data: { id: `node-${i}`, label: `节点 ${i}` },
      position: { x: Math.random() * 1000, y: Math.random() * 600 },
    });
  }
});

const elements = {
  nodes: [{ data: { id: 'n1', label: '节点A', type: 'root', weight: 10 } }, { data: { id: 'n2', label: '节点B', type: 'branch' } }, { data: { id: 'n3', label: '节点C', type: 'leaf' } }],
  edges: [
    {
      data: {
        id: 'e1',
        source: 'n1',
        target: 'n2',
        label: '就职于',
        relType: 'RELATED',
        weight: 5,
      },
    },
    {
      data: {
        id: 'e2',
        source: 'n1',
        target: 'n3',
        label: '拥有',
        relType: 'CONTAINS',
      },
    },
  ],
};

// 同时匹配多个条件（AND）
cy.$('node[type = "root"][degree > 5]'); // type 为 root 且度 > 5

// 匹配多个选择器之一（OR 用逗号分隔）
cy.$('node[type = "root"], node[type = "branch"]');

// 按元数据字段（meta fields，使用 ? 前缀）
cy.$('node[?degree]'); // 有 degree 值的节点
cy.$('node[?degree > 5]'); // degree 值 > 5
cy.$('node[?removed = false]');

// 实用选择器示例
cy.$('node[?degree > 10]'); // degree > 10 的枢纽节点
cy.$('node:orphan'); // 孤立节点（无父节点）
cy.$('edge[?isLoop]'); // 所有自环边
cy.$('node[?removed = false]:visible'); // 当前可见且未被移除的节点

// 使用函数作为过滤器
cy.nodes().filter(node => node.degree() > 5);

// 等效的选择器写法
cy.$('node[?degree > 5]');

const style = [
  {
    selector: 'node', // CSS-like 选择器（支持全部选择器语法）
    style: {
      // 样式键值对
      width: 60,
      height: 60,
      // 属性值可以使用函数动态计算
      'background-color': ele => typeColorMap[ele.data('type')] || '#ccc',
    },
  },
  {
    selector: 'node:selected',
    style: {
      'border-width': 3,
      'border-color': 'rgb(78, 162, 240)',
    },
  },
];

// 运行时动态修改样式
cy.style().selector('node:selected').style('border-color', '#ff4444').update(); // .update() 应用更改，否则不生效

// 批量更新多个选择器
cy.style().selector('node').style('background-opacity', 0.8).selector('edge').style('opacity', 0.5).update();

// 形状示例
{ selector: 'node', style: { 'shape': 'roundrectangle', 'border-radius': '8px' } }
{ selector: 'node[type="case"]', style: { 'shape': 'diamond' } }
{ selector: 'node[type="leaf"]', style: { 'shape': 'hexagon' } }

const style = [
  // 通用节点样式
  {
    selector: 'node',
    style: {
      width: 60,
      height: 60,
      'background-color': '#4e56fd',
      'border-width': 2,
      'border-color': '#fff',
      label: 'data(label)',
      color: '#fff',
      'font-size': 12,
      'text-valign': 'bottom',
      'text-halign': 'center',
      'text-margin-y': 8,
    },
  },

  // 按 data 字段选择（type 为 root 的节点）
  {
    selector: 'node[type="root"]',
    style: {
      shape: 'ellipse',
      'background-color': '#007AFC',
    },
  },

  // 按 data 字段选择（type 为 branch 的节点）
  {
    selector: 'node[type="branch"]',
    style: {
      shape: 'roundrectangle',
      'background-color': '#71ED4D',
    },
  },

  // 选中状态
  {
    selector: 'node:selected',
    style: {
      'border-width': 3,
      'border-color': 'rgb(78, 162, 240)',
      'overlay-opacity': 0.1,
      'overlay-color': '#4ea2f0',
      'overlay-padding': 6,
    },
  },

  // 边的通用样式
  {
    selector: 'edge',
    style: {
      width: 2,
      'line-color': '#999',
      'target-arrow-color': '#999',
      'target-arrow-shape': 'triangle',
      'curve-style': 'bezier',
      label: 'data(label)',
      'font-size': 10,
    },
  },

  // 不同类型边不同颜色（函数式动态样式）
  {
    selector: 'edge',
    style: {
      'line-color': ele => edgeColorMap[ele.data('relType')] || '#999',
      'target-arrow-color': ele => edgeColorMap[ele.data('relType')] || '#999',
    },
  },
];

// 方案一：通过样式声明
{
  selector: 'node[type="root"]',
  style: {
    'background-image': './static/images/node-icon.png',
    'background-fit': 'cover',
    'width': 40,
    'height': 40,
  }
}

// 方案二：运行时动态设置（适用于从后端接口获取图标 URL）
cy.nodes('[type="root"]').forEach(node => {
  node.style('background-image', `./static/images/${node.data('iconType')}.png`)
  node.style('background-fit', 'cover')
})

const darkThemeStyle = [
  {
    selector: 'node',
    style: {
      'background-color': '#1a3a5c',
      'border-color': '#2a6eb0',
      color: '#e0e0e0',
      'font-size': 11,
    },
  },
  {
    selector: 'edge',
    style: {
      'line-color': '#3a5a8c',
      'target-arrow-color': '#3a5a8c',
      'loop-direction': '-45deg',
      'loop-sweep': '-90deg',
    },
  },
];

// dagre - 树形层次布局（最常用）
cy.layout({
  name: 'dagre',
  rankDir: 'TB', // 方向: TB(上→下) | LR(左→右) | BT(下→上) | RL(右→左)
  nodeSep: 60, // 同层节点间距
  edgeSep: 10, // 边间距
  rankSep: 100, // 层级间距
  nodeDimensionsIncludeLabels: true, // 节点尺寸是否包含标签
  animate: true, // 是否动画过渡
  animationDuration: 500, // 动画时长 (ms)
}).run();

// circle - 圆形布局
cy.layout({
  name: 'circle',
  fit: true, // 是否适应视口
  avoidOverlap: true, // 是否避免重叠
  nodeDimensionsIncludeLabels: true,
  startAngle: 0, // 起始角度
  clockwise: true, // 是否顺时针
}).run();

// cose - 力导向布局
cy.layout({
  name: 'cose',
  idealEdgeLength: 100, // 理想边长
  nodeOverlap: 20, // 节点重叠容忍度
  gravity: 1, // 重力强度
  numIter: 1000, // 最大迭代次数
  animate: true,
  fit: true,
}).run();

// grid - 网格布局
cy.layout({
  name: 'grid',
  rows: undefined, // 行数（留空则自动计算）
  cols: undefined, // 列数
  avoidOverlap: true,
}).run();

// concentric - 同心圆布局
cy.layout({
  name: 'concentric',
  concentric: node => node.degree(), // 按度数分层
  minNodeSpacing: 40,
}).run();

// breadthfirst - 广度优先布局
cy.layout({
  name: 'breadthfirst',
  directed: true,
  spacingFactor: 1.5,
  roots: '#a', // 指定根节点
}).run();

import cytoscape from 'cytoscape';
import avsdf from 'cytoscape-avsdf';
import klay from 'cytoscape-klay';

cytoscape.use(avsdf); // 注册 AVSDF 布局
cytoscape.use(klay); // 注册 Klay 布局

// 使用
cy.layout({ name: 'avsdf', animate: true }).run();
cy.layout({ name: 'klay', klay: { direction: 'RIGHT' } }).run();

// 布局切换函数
const layoutModes = {
  dagre: { name: 'dagre', rankDir: 'TB', nodeSep: 60, rankSep: 100, animate: true },
  circle: { name: 'circle', fit: true, avoidOverlap: true, animate: true },
  grid: { name: 'grid', avoidOverlap: true, animate: true },
  cose: { name: 'cose', idealEdgeLength: 100, numIter: 1000, animate: true },
  avsdf: { name: 'avsdf', animate: true },
  klay: { name: 'klay', klay: { direction: 'RIGHT' }, animate: true },
  concentric: { name: 'concentric', concentric: n => n.degree(), animate: true },
  breadthfirst: { name: 'breadthfirst', directed: true, animate: true },
};

const switchLayout = mode => {
  if (!cy || mode === currentLayout.value) return;
  const config = layoutModes[mode];
  if (!config) return;

  currentLayout.value = mode;
  cy.layout(config).run();
};

// 绑定事件
cy.on('tap', 'node', evt => {
  const node = evt.target;
  console.log('点击节点:', node.data('label'));
});

// 解绑
cy.off('tap', 'node');

// 一次性事件
cy.one('layoutstop', () => {
  console.log('首布局完成');
});

// 派发自定义事件
cy.emit('customEvent', { msg: 'hello' });

// 右键菜单
cy.on('cxttap', 'node', evt => {
  const node = evt.target;
  const renderedPos = evt.renderedPosition; // 画面坐标
  const modelPos = evt.position; // 模型坐标

  showContextMenu({
    x: renderedPos.x,
    y: renderedPos.y,
    items: [
      {
        label: '展开关联节点',
        action: () => expandNode(node),
      },
      {
        label: '高亮关联',
        action: () => highlightNeighbors(node),
      },
      {
        label: '复制节点名称',
        action: () => copyToClipboard(node.data('label')),
      },
      {
        label: '删除节点',
        action: () => cy.remove(node),
      },
    ],
  });
});

// 双击节点 - 查看详情
cy.on('dbltap', 'node', async evt => {
  const node = evt.target;
  const detail = await fetchNodeDetail(node.id());
  showNodeDetailDialog(detail);
});

// 双击边 - 查看关系详情
cy.on('dbltap', 'edge', async evt => {
  const edge = evt.target;
  const detail = await fetchRelationDetail(edge.id());
  showEdgeDetailDialog(detail);
});

// 拖拽时邻域节点跟随移动
cy.nodes().on('drag', evt => {
  const draggedNode = evt.target;
  const delta = { x: evt.originalEvent.movementX, y: evt.originalEvent.movementY };
  // 相邻节点跟随移动
  draggedNode
    .neighborhood()
    .nodes()
    .forEach(neighbor => {
      const pos = neighbor.position();
      neighbor.position({
        x: pos.x + delta.x * 0.3, // 阻尼系数 0.3
        y: pos.y + delta.y * 0.3,
      });
    });
});

// 缩放
cy.zoom(1.5); // 缩放到 150%
cy.zoom({ level: 1.5, renderedPosition: { x: 300, y: 200 } }); // 以某点为中心缩放
cy.zoom(cy.zoom() + 0.1); // 放大 0.1

// 适应画布
cy.fit(); // 适应所有元素
cy.fit(cy.nodes(':selected'), 50); // 适应选中元素，留 50px 边距

// 居中
cy.center(); // 居中所有元素
cy.center(cy.nodes(':selected')); // 居中选中元素

// 平移
cy.pan({ x: 50, y: 0 });
cy.panBy({ x: 100, y: 0 });

// 动画
cy.animate(
  {
    zoom: 1.5,
    pan: { x: 200, y: 100 },
    center: { eles: cy.nodes(':selected') },
  },
  {
    duration: 500,
  },
);

// 添加元素
const newNode = cy.add({
  group: 'nodes', // 'nodes' | 'edges'
  data: { id: 'new-node', label: '新节点' },
  position: { x: 300, y: 200 },
});

const newEdge = cy.add({
  group: 'edges',
  data: {
    id: 'new-edge',
    source: 'a',
    target: 'new-node',
    label: '新关系',
  },
});

// 批量添加
cy.add([{ data: { id: 'n1', label: 'A' }, position: { x: 100, y: 100 } }, { data: { id: 'n2', label: 'B' }, position: { x: 200, y: 200 } }, { data: { id: 'e1', source: 'n1', target: 'n2' } }]);

// 删除
cy.remove('#new-node'); // 通过选择器
cy.remove(newNode); // 通过对象
cy.remove(collection); // 通过集合

// 选择
cy.nodes('[type="root"]');
cy.edges('[relType="FAMILY"]');
cy.nodes().filter(node => node.degree() > 5);

// 高亮关联（过滤不相干元素）
const highlightNeighbors = node => {
  cy.elements().addClass('light-off'); // 全部变暗
  node.removeClass('light-off'); // 目标节点保持明亮
  node.neighborhood().removeClass('light-off'); // 邻域保持明亮
};

// 恢复
const resetHighlight = () => {
  cy.elements().removeClass('light-off');
};

// 自建历史栈
const historyStack = [];
const redoStack = [];
const MAX_HISTORY = 50;

const saveSnapshot = () => {
  historyStack.push(cy.json()); // 保存完整快照
  if (historyStack.length > MAX_HISTORY) historyStack.shift();
  redoStack.length = 0; // 清空重做栈
};

const undo = () => {
  if (historyStack.length <= 1) return;
  const current = historyStack.pop();
  redoStack.push(current);
  const prev = historyStack[historyStack.length - 1];
  cy.json(prev); // 恢复快照
};

const redo = () => {
  if (redoStack.length === 0) return;
  const next = redoStack.pop();
  historyStack.push(next);
  cy.json(next);
};

// 监听变更自动保存
cy.on('add remove data position', () => {
  saveSnapshot();
});

// 导出 PNG
const exportPNG = () => {
  const blob = cy.png({
    output: 'blob', // 'blob' | 'blob-promise' | 'blob-url' | 'base64' | 'base64uri'
    bg: '#1a1a2e', // 背景色（暗色主题）
    full: true, // 导出全部元素（超出视口的部分也包含）
    scale: 2, // 2x 高清
    maxWidth: 4096,
    maxHeight: 4096,
  });

  // 下载
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = `graph_export_${Date.now()}.png`;
  a.click();
  URL.revokeObjectURL(url);
};

// 也可以使用 html2canvas 获得更高清的输出
import html2canvas from 'html2canvas';
const exportWithHtml2Canvas = async () => {
  const canvas = await html2canvas(cy.container(), { backgroundColor: '#1a1a2e' });
  const link = document.createElement('a');
  link.download = `图谱_${Date.now()}.png`;
  link.href = canvas.toDataURL();
  link.click();
};

// 搜索节点并居中
const searchAndFocus = keyword => {
  const node = cy.nodes().filter(n => n.data('label').includes(keyword));

  if (node.length > 0) {
    cy.animate(
      {
        center: { eles: node },
        zoom: 1.5,
      },
      { duration: 500 },
    );
    node.style('border-color', '#ff4444');
    setTimeout(() => node.style('border-color', ''), 2000);
  }
};

// 视口平滑过渡
cy.animate(
  {
    // 目标值
    zoom: 1.5,
    pan: { x: 200, y: 100 },

    // 或者居中到元素
    center: { eles: cy.nodes(':selected') },
    fit: { eles: cy.elements(), padding: 30 },
  },
  {
    duration: 500, // 动画时长 (ms)
    easing: 'ease-in-out', // 缓动函数
    queue: false, // 是否排队（false 则立即执行并中断当前动画）
    complete: () => {
      // 完成回调
      console.log('动画完成');
    },
  },
);

// 停止所有视口动画
cy.stop(true); // true = 跳转到最终位置
cy.stop(false); // false = 保持当前位置

// 对单个节点做位置动画
const anim = node.animation(
  {
    position: { x: 500, y: 300 },
    style: {
      'background-color': '#ff4444',
      'border-width': 4,
    },
  },
  {
    duration: 300,
    easing: 'ease-out',
  },
);

anim
  .play()
  .promise('complete')
  .then(() => {
    // 动画完成后继续
    node.style('background-color', '#4e56fd');
  });

// 边动画
edge
  .animation(
    {
      style: {
        'line-color': '#ffd700',
        width: 4,
      },
    },
    { duration: 500 },
  )
  .play();

const anim = node.animation({ position: { x: 300, y: 200 } }, { duration: 1000 })

anim.play()         // 播放
anim.pause()        // 暂停
anim.stop()         // 停止并清除
anim.apply()        // 立即应用最后一帧
anim.promise('complete').then(() => { ... })  // 等待完成

anim.playing()      // 是否正在播放
anim.progress()     // 当前进度 (0-1)
anim.time()         // 已过时间 (ms)

// 反向播放
anim.reverse().play()

cy.layout({
  name: 'dagre',
  animate: true,
  animationDuration: 500,
  animationEasing: 'ease-in-out',
  animateFilter: (node, i) => node.degree() > 0, // 只动画非孤立节点
}).run();

import cytoscape from 'cytoscape';
import edgehandles from 'cytoscape-edgehandles';
import avsdf from 'cytoscape-avsdf';
import klay from 'cytoscape-klay';
import dagre from 'cytoscape-dagre';

cytoscape.use(edgehandles);
cytoscape.use(avsdf);
cytoscape.use(klay);
cytoscape.use(dagre);

// edgehandles 使用
const eh = cy.edgehandles({
  snap: false, // 是否吸附到节点中心
  handleNodes: 'node', // 可以连线的节点
  hoverDelay: 100, // 悬停延迟
  toggleOffOn: 'dblclick', // 双击切换模式
});

// 启用/禁用连线模式
eh.enable();
eh.disable();

import cytoscape from 'cytoscape';
import contextMenus from 'cytoscape-context-menus';

cytoscape.use(contextMenus);

cy.contextMenus({
  menuItems: [
    {
      id: 'expand',
      content: '展开关联',
      selector: 'node',
      onClickFunction: evt => {
        expandNode(evt.target);
      },
    },
    {
      id: 'remove',
      content: '删除节点',
      selector: 'node',
      onClickFunction: evt => {
        cy.remove(evt.target);
      },
    },
    {
      id: 'detail',
      content: '查看详情',
      selector: 'edge',
      onClickFunction: evt => {
        showEdgeDetail(evt.target);
      },
    },
  ],
});

// 后端返回的数据格式示例
const apiResponse = {
  nodes: [
    { id: 'n1', name: '节点A', type: 'root', properties: { weight: 10 } },
    { id: 'n2', name: '节点B', type: 'branch', properties: { weight: 5 } },
    { id: 'n3', name: '节点C', type: 'leaf', properties: { weight: 2 } },
  ],
  relationships: [
    { id: 'r1', source: 'n1', target: 'n2', type: 'RELATED', properties: { count: 5 } },
    { id: 'r2', source: 'n1', target: 'n3', type: 'CONTAINS', properties: { count: 3 } },
  ],
};

// 转换为 Cytoscape elements 格式
const toCyElements = data => ({
  nodes: (data.nodes || []).map(n => ({
    data: {
      id: n.id,
      label: n.name || n.label,
      type: n.type,
      ...n.properties,
    },
  })),
  edges: (data.relationships || data.edges || []).map(r => ({
    data: {
      id: r.id,
      source: r.source,
      target: r.target,
      label: r.type || r.label,
      relType: r.type,
      ...r.properties,
    },
  })),
});

const elements = toCyElements(apiResponse);
cy.add(elements);
cy.layout({ name: 'dagre', animate: true }).run();

// 展开某个节点的关联数据
const expandNode = async (node, depth = 1) => {
  const nodeId = node.id();

  // 调用后端接口获取关联数据
  const resp = await apiExpandNode({ nodeId, depth });

  // 转换并添加到画布
  const newElements = toCyElements(resp.data);
  cy.add(newElements);
  cy.layout({ name: 'dagre', animate: true }).run();

  // 标记已展开，避免重复查询
  node.data('expanded', true);
};

const cleanData = (rawData) => {
  let data = { ...rawData };

  // 1. 去重
  data.nodes = dedupeBy(data.nodes, 'id');

  // 2. 过滤自环边
  data.edges = data.edges.filter(e => e.source !== e.target);

  // 3. 过滤零度节点（无任何关系的孤立节点）
  const connectedIds = new Set();
  data.edges.forEach(e => {
    connectedIds.add(e.source);
    connectedIds.add(e.target);
  });
  data.nodes = data.nodes.filter(n => connectedIds.has(n.id));

  return data;
};

// 高性能配置示例（适用 2000+ 节点场景）
const cy = cytoscape({
  container: document.getElementById('cy'),
  hideEdgesOnViewport: true, // 交互时隐藏边
  textureOnViewport: true, // 纹理缓存
  motionBlur: true, // 运动模糊
  pixelRatio: 1, // 1 倍渲染（牺牲清晰度）
  wheelSensitivity: 0.2, // 降低滚轮灵敏度
  // ... 其余配置
});