拖拽编辑节点卡顿

[lbrjms]

直接运行官方demo （https://www.relation-graph.com/#/demo/react?id=gee-node-resize） 版本2.2.6
当节点是编辑状态的时候 拖拽特别卡顿
当节点是非编辑状态的时候 拖拽非常丝滑

default.mov

[lbrjms]

最小代码复现上面的bug
react版本18.2.0

当graphInstance.setEditingNodes([nodeObject])的时候
eg2 会引起节点编辑拖拽卡顿
eg1 不会引起节点编辑拖拽卡顿

有大佬知道具体的原因吗

// 1、graphInstance.setEditingNodes([nodeObject])，不会卡顿; 
import ReactDOM1 from 'react-dom';
ReactDOM1.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>,
    document.getElementById('root')
);
// 2、graphInstance.setEditingNodes([nodeObject]); 会卡顿
import ReactDOM2 from 'react-dom/client';
const root = ReactDOM2.createRoot(
    document.getElementById('root') as HTMLElement
);

界面代码

import React, { useRef, useEffect } from 'react';
import RelationGraph, { RelationGraphComponent, RGJsonData, RGNode, RGUserEvent } from 'relation-graph-react';
const Demo = () => {
  const graphRef = useRef<RelationGraphComponent>(null);
  useEffect(() => {
    showSeeksGraph();
  }, []);
  const showSeeksGraph = async() => {
    const __graph_json_data: RGJsonData = {
      rootId: 'a',
      nodes: [
        { id: 'a', text: 'Border color', borderColor: 'yellow' },
        { id: 'a1', text: 'No border', borderWidth: -1, color: '#ff8c00' },
      ],
      lines: [
        { from: 'a', to: 'a1' },
      ]
    };
    const graphInstance = graphRef.current!.getInstance();
    await graphInstance.setJsonData(__graph_json_data);
  };
  const onNodeClick = (nodeObject:RGNode, _$event:RGUserEvent) => {
    console.log('onNodeClick:', nodeObject);
    const graphInstance = graphRef.current!.getInstance();
    graphInstance.setEditingNodes([nodeObject]);
  };
  const onCanvasClick = () => {
    const graphInstance = graphRef.current!.getInstance();
    graphInstance.setEditingNodes([]);
  };
  const graphOptions = {
    allowShowMiniToolBar: false
  };
  // @ts-ignore
  return (
        <div style={{ height: '100vh' }}>
          <RelationGraph
              ref={graphRef}
              options={graphOptions}
              onCanvasClick={onCanvasClick}
              onNodeClick={onNodeClick}
          />
        </div>);
};

export default Demo;

[seeksdream]

我目前还没发现这个现象，可能我用的几台电脑配置都不错，改天我找一个配置一般的电脑试试。
你也可以尝试更新到最新版本试试，看看是否还是这样。

[lbrjms]

我年前用的2.2.10版本也是卡顿 跟电脑配置没关系 非常明显的bug
react 18.0 之后下面的用法必有这个问题

// 2、graphInstance.setEditingNodes([nodeObject]); 会卡顿
import ReactDOM2 from 'react-dom/client';
const root = ReactDOM2.createRoot(
document.getElementById('root') as HTMLElement
);

初步判断是下面这段代码的问题

    onNodeDragStart(e, t) {
        if (this.options.disableDragNode || e.disableDrag)
            return;
        isNaN(e.x) && (e.x = 0), isNaN(e.y) && (e.y = 0), e.dragging = !0, this.emitEvent(A.nodeDragStart, e, t);
        const i = (o, n, r) => {
            e.dragging = !1, this.options.editingReferenceLine.show = !1, this.onNodeDraged(e, o, n, r), this._dataUpdated();
        };
        re.startDrag(t, e, i, (o, n, r) => {
            let l = o / (this.options.canvasZoom / 100) + r.x, c = n / (this.options.canvasZoom / 100) + r.y;
            const h = l - e.x, u = c - e.y,
                d = this.emitEvent(A.nodeDragging, e, l, c, h, u, t);
            d && (typeof d.x == "number" && (l = d.x),
            typeof d.y == "number" && (c = d.y)),
            this.options.useHorizontalView && (l = n / (this.options.canvasZoom / 100) + r.x,
                c = -o / (this.options.canvasZoom / 100) + r.y),
                this.setNodePosition(e, l, c),
                this.draggingSelectedNodes(e, h, u),
                this.updateElementLines(),
                this._dataUpdated();
        });
    }

draggingSelectedNodes方法最终会调用

 dataUpdated() {
        (this.isReact || this.options.canvasZoom <= 40) && this._dataUpdated();
    }

在react环境这里会有两次_dataUpdated 去掉其中任意一次就不卡顿了