fix: optimize rendering logic to prevent loops (#3108)

Author: NewByVector

packages/x6/src/renderer/scheduler.ts

@@ -223,13 +223,13 @@ export class Scheduler extends Disposable {
         cell.isEdge() &&
         (result & view.getFlag(['source', 'target'])) === 0
       ) {
-        this.requestViewUpdate(
-          view,
-          result,
-          options,
-          JOB_PRIORITY.RenderEdge,
-          false,
-        )
+        this.queue.queueJob({
+          id,
+          priority: JOB_PRIORITY.RenderEdge,
+          cb: () => {
+            this.updateView(view, flag, options)
+          },
+        })
       }
     }
   }

sites/x6-sites/.dumi/global.ts

@@ -1,20 +1,19 @@
 if (window) {
-  (window as any).react = require('react');
-  (window as any).reactDom = require('react-dom');
-  (window as any).antd = require('antd');
-  (window as any).dagre = require('dagre');
-  (window as any).x6 = require('@antv/x6');
-  (window as any).x6PluginSnapline = require('@antv/x6-plugin-snapline');
-  (window as any).x6PluginClipboard = require('@antv/x6-plugin-clipboard');
-  (window as any).x6PluginKeyboard = require('@antv/x6-plugin-keyboard');
-  (window as any).x6PluginSelection = require('@antv/x6-plugin-selection');
-  (window as any).x6PluginTransform = require('@antv/x6-plugin-transform');
-  (window as any).x6PluginStencil = require('@antv/x6-plugin-stencil');
-  (window as any).x6PluginHistory = require('@antv/x6-plugin-history');
-  (window as any).x6ReactShape = require('@antv/x6-react-shape');
-  (window as any).x6Common = require('@antv/x6-common');
-  (window as any).layout = require('@antv/layout');
-  (window as any).classnames = require('classnames');
-  (window as any).hierarchy = require('@antv/hierarchy');
-  (window as any).elkjs = require('elkjs/lib/elk.bundled.js');
+  ;(window as any).react = require('react')
+  ;(window as any).reactDom = require('react-dom')
+  ;(window as any).antd = require('antd')
+  ;(window as any).dagre = require('dagre')
+  ;(window as any).x6 = require('@antv/x6')
+  ;(window as any).x6PluginSnapline = require('@antv/x6-plugin-snapline')
+  ;(window as any).x6PluginClipboard = require('@antv/x6-plugin-clipboard')
+  ;(window as any).x6PluginKeyboard = require('@antv/x6-plugin-keyboard')
+  ;(window as any).x6PluginSelection = require('@antv/x6-plugin-selection')
+  ;(window as any).x6PluginTransform = require('@antv/x6-plugin-transform')
+  ;(window as any).x6PluginStencil = require('@antv/x6-plugin-stencil')
+  ;(window as any).x6PluginHistory = require('@antv/x6-plugin-history')
+  ;(window as any).x6ReactShape = require('@antv/x6-react-shape')
+  ;(window as any).layout = require('@antv/layout')
+  ;(window as any).classnames = require('classnames')
+  ;(window as any).hierarchy = require('@antv/hierarchy')
+  ;(window as any).elkjs = require('elkjs/lib/elk.bundled.js')
 }

sites/x6-sites/docs/tutorial/about.zh.md

@@ -11,9 +11,9 @@ X6 是基于 HTML 和 SVG 的图编辑引擎，提供低成本的定制能力和
 如果你还没有使用过 X6， 建议通过 [快速上手](/zh/docs/tutorial/getting-started) 抢先体验 X6 的魅力。
 
 <p align="left">
-<a href="https://github.com/antvis/X6/actions/workflows/ci.yml"><img alt="build" src="https://img.shields.io/github/workflow/status/antvis/x6/%F0%9F%91%B7%E3%80%80CI/master?logo=github&style=flat-square"></a>
-<a href="https://app.codecov.io/gh/antvis/X6"><img alt="coverage" src="https://img.shields.io/codecov/c/gh/antvis/x6?logo=codecov&style=flat-square&token=15CO54WYUV"></a>
-<a href="https://lgtm.com/projects/g/antvis/x6/context:javascript"><img alt="Language grade: JavaScript" src="https://img.shields.io/lgtm/grade/javascript/g/antvis/x6.svg?logo=lgtm&style=flat-square"></a>
+<a href="https://github.com/antvis/X6/actions/workflows/ci.yml"><img alt="build" src="https://img.shields.io/github/actions/workflow/status/antvis/x6/ci.yml?branch=master&logo=github&style=flat-square"></a>
+<!-- <a href="https://app.codecov.io/gh/antvis/X6"><img alt="coverage" src="https://img.shields.io/codecov/c/gh/antvis/x6?logo=codecov&style=flat-square&token=15CO54WYUV"></a>
+<a href="https://lgtm.com/projects/g/antvis/x6/context:javascript"><img alt="Language grade: JavaScript" src="https://img.shields.io/lgtm/grade/javascript/g/antvis/x6.svg?logo=lgtm&style=flat-square"></a> -->
 <a href="https://www.npmjs.com/package/@antv/x6"><img alt="NPM Package" src="https://img.shields.io/npm/v/@antv/x6.svg?style=flat-square"></a>
 <a href="https://www.npmjs.com/package/@antv/x6"><img alt="NPM Downloads" src="https://img.shields.io/npm/dm/@antv/x6?logo=npm&style=flat-square"></a>
 </p>

sites/x6-sites/examples/showcase/practices/demo/dataProcessingDag.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
-import { Graph, Node, Path, Edge, Platform } from '@antv/x6'
+import { Graph, Node, Path, Edge, Platform, StringExt } from '@antv/x6'
 import { Selection } from '@antv/x6-plugin-selection'
-import { StringExt } from '@antv/x6-common'
 import classnames from 'classnames'
 import insertCss from 'insert-css'
 import { register } from '@antv/x6-react-shape'
@@ -57,12 +56,16 @@ const PROCESSING_TYPE_LIST = [
 
 // 不同节点类型的icon
 const NODE_TYPE_LOGO = {
-  INPUT: 'https://mdn.alipayobjects.com/huamei_f4t1bn/afts/img/A*RXnuTpQ22xkAAAAAAAAAAAAADtOHAQ/original', // 数据输入
-  FILTER: 'https://mdn.alipayobjects.com/huamei_f4t1bn/afts/img/A*ZJ6qToit8P4AAAAAAAAAAAAADtOHAQ/original', // 数据筛选
+  INPUT:
+    'https://mdn.alipayobjects.com/huamei_f4t1bn/afts/img/A*RXnuTpQ22xkAAAAAAAAAAAAADtOHAQ/original', // 数据输入
+  FILTER:
+    'https://mdn.alipayobjects.com/huamei_f4t1bn/afts/img/A*ZJ6qToit8P4AAAAAAAAAAAAADtOHAQ/original', // 数据筛选
   JOIN: 'https://mdn.alipayobjects.com/huamei_f4t1bn/afts/img/A*EHqyQoDeBvIAAAAAAAAAAAAADtOHAQ/original', // 数据连接
-  UNION: 'https://mdn.alipayobjects.com/huamei_f4t1bn/afts/img/A*k4eyRaXv8gsAAAAAAAAAAAAADtOHAQ/original', // 数据合并
+  UNION:
+    'https://mdn.alipayobjects.com/huamei_f4t1bn/afts/img/A*k4eyRaXv8gsAAAAAAAAAAAAADtOHAQ/original', // 数据合并
   AGG: 'https://mdn.alipayobjects.com/huamei_f4t1bn/afts/img/A*TKG8R6nfYiAAAAAAAAAAAAAADtOHAQ/original', // 数据聚合
-  OUTPUT: 'https://mdn.alipayobjects.com/huamei_f4t1bn/afts/img/A*zUgORbGg1HIAAAAAAAAAAAAADtOHAQ/original', // 数据输出
+  OUTPUT:
+    'https://mdn.alipayobjects.com/huamei_f4t1bn/afts/img/A*zUgORbGg1HIAAAAAAAAAAAAADtOHAQ/original', // 数据输出
 }
 
 /**
@@ -105,7 +108,7 @@ const getDownstreamNodePosition = (
 
   return {
     x: minX !== Infinity ? minX : position.x + dx,
-    y: maxY !== -Infinity ? maxY + dy  : position.y,
+    y: maxY !== -Infinity ? maxY + dy : position.y,
   }
 }
 
@@ -161,8 +164,12 @@ export const createNode = (
     return {}
   }
   let newNode = {}
-  const sameTypeNodes = graph.getNodes().filter(item => item.getData()?.type === type);
-  const typeName = PROCESSING_TYPE_LIST?.find((item) => item.type === type)?.name;
+  const sameTypeNodes = graph
+    .getNodes()
+    .filter((item) => item.getData()?.type === type)
+  const typeName = PROCESSING_TYPE_LIST?.find(
+    (item) => item.type === type,
+  )?.name
   const id = StringExt.uuid()
   const node = {
     id,
@@ -243,21 +250,24 @@ class DataProcessingDagNode extends React.Component<{
   getPlusDagMenu = () => {
     return (
       <ul>
-        {
-          PROCESSING_TYPE_LIST.map((item) => {
-            const content = (
-              <a onClick={() => this.clickPlusDragMenu(item.type)}>
-                <i
-                  className="node-mini-logo"
-                  style={{ backgroundImage: `url(${NODE_TYPE_LOGO[item.type]})` }}
-                />
-
-                <span>{item.name}</span>
-              </a>
-            )
-            return <li className="each-sub-menu">{content}</li>
-          })
-        }
+        {PROCESSING_TYPE_LIST.map((item) => {
+          const content = (
+            // eslint-disable-next-line
+            <a onClick={() => this.clickPlusDragMenu(item.type)}>
+              <i
+                className="node-mini-logo"
+                style={{ backgroundImage: `url(${NODE_TYPE_LOGO[item.type]})` }}
+              />
+
+              <span>{item.name}</span>
+            </a>
+          )
+          return (
+            <li className="each-sub-menu" key={item.type}>
+              {content}
+            </li>
+          )
+        })}
       </ul>
     )
   }
@@ -273,9 +283,12 @@ class DataProcessingDagNode extends React.Component<{
   onMainMouseEnter = () => {
     const { node } = this.props
     // 获取该节点下的所有连接桩
-    const ports = node.getPorts() || [];
+    const ports = node.getPorts() || []
     ports.forEach((port) => {
-      node.setPortProp(port.id, 'attrs/circle', { fill: '#fff', stroke: '#85A5FF' })
+      node.setPortProp(port.id, 'attrs/circle', {
+        fill: '#fff',
+        stroke: '#85A5FF',
+      })
     })
   }
 
@@ -285,7 +298,10 @@ class DataProcessingDagNode extends React.Component<{
     // 获取该节点下的所有连接桩
     const ports = node.getPorts() || []
     ports.forEach((port) => {
-      node.setPortProp(port.id, 'attrs/circle', { fill: 'transparent', stroke: 'transparent' })
+      node.setPortProp(port.id, 'attrs/circle', {
+        fill: 'transparent',
+        stroke: 'transparent',
+      })
     })
   }
 
@@ -404,21 +420,31 @@ Graph.registerConnector(
   (sourcePoint, targetPoint) => {
     const hgap = Math.abs(targetPoint.x - sourcePoint.x)
     const path = new Path()
-    path.appendSegment(Path.createSegment('M', sourcePoint.x - 4, sourcePoint.y))
-    path.appendSegment(Path.createSegment('L', sourcePoint.x + 12, sourcePoint.y))
+    path.appendSegment(
+      Path.createSegment('M', sourcePoint.x - 4, sourcePoint.y),
+    )
+    path.appendSegment(
+      Path.createSegment('L', sourcePoint.x + 12, sourcePoint.y),
+    )
     // 水平三阶贝塞尔曲线
     path.appendSegment(
       Path.createSegment(
         'C',
-        sourcePoint.x < targetPoint.x ? sourcePoint.x + hgap / 2 : sourcePoint.x - hgap / 2,
+        sourcePoint.x < targetPoint.x
+          ? sourcePoint.x + hgap / 2
+          : sourcePoint.x - hgap / 2,
         sourcePoint.y,
-        sourcePoint.x < targetPoint.x ? targetPoint.x - hgap / 2 : targetPoint.x + hgap / 2,
+        sourcePoint.x < targetPoint.x
+          ? targetPoint.x - hgap / 2
+          : targetPoint.x + hgap / 2,
         targetPoint.y,
         targetPoint.x - 6,
         targetPoint.y,
       ),
     )
-    path.appendSegment(Path.createSegment('L', targetPoint.x + 2, targetPoint.y))
+    path.appendSegment(
+      Path.createSegment('L', targetPoint.x + 2, targetPoint.y),
+    )
 
     return path.serialize()
   },
@@ -521,7 +547,7 @@ const graph: Graph = new Graph({
       })
     },
     // 连接桩校验
-    validateConnection({ sourceView, targetView, sourceMagnet, targetMagnet }) {
+    validateConnection({ sourceMagnet, targetMagnet }) {
       // 只能从输出链接桩创建连接
       if (!sourceMagnet || sourceMagnet.getAttribute('port-group') === 'in') {
         return false
@@ -535,14 +561,16 @@ const graph: Graph = new Graph({
   },
 })
 
-graph.use(new Selection({
-  enabled: true,
-  multiple: true,
-  rubberEdge: true,
-  rubberNode: true,
-  modifiers: 'shift',
-  rubberband: true,
-}))
+graph.use(
+  new Selection({
+    enabled: true,
+    multiple: true,
+    rubberEdge: true,
+    rubberNode: true,
+    modifiers: 'shift',
+    rubberband: true,
+  }),
+)
 
 // 节点状态列表
 const nodeStatusList = [
@@ -565,7 +593,7 @@ const nodeStatusList = [
   {
     id: 'node-4',
     status: 'error',
-    statusMsg: '错误信息示例'
+    statusMsg: '错误信息示例',
   },
 ]
 
@@ -656,7 +684,6 @@ fetch('/data/data-processing-dag.json')
     }, 3000)
   })
 
-
 insertCss(`
   .data-processing-dag-node {
     display: flex;

sites/x6-sites/package.json

@@ -39,7 +39,7 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-i18next": "^11.5.0",
-    "classnames": "^2.2.6",
-    "@antv/x6-common": "^2.0.x"
-  }
+    "classnames": "^2.2.6"
+  },
+  "repository": "https://github.com/antvis/x6"
 }