chore(release): 🚀 publish

examples/x6-example-features/src/pages/case/dag.tsx

@@ -3,6 +3,7 @@ import { Graph, Node, Cell } from '@antv/x6'
 import { Path } from '@antv/x6-geometry'
 import { register } from '@antv/x6-react-shape'
 import { Selection } from '@antv/x6-plugin-selection'
+import { Snapline } from '@antv/x6-plugin-snapline'
 import '../index.less'
 import './index.less'
 interface NodeStatus {
@@ -381,6 +382,7 @@ export default class Example extends React.Component {
       rubberband: true,
     })
     graph.use(selection)
+    graph.use(new Snapline({ enabled: true }))
 
     graph.on('edge:connected', ({ edge }) => {
       edge.attr({

lerna.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.0.6-beta.20",
+  "version": "2.0.6-beta.24",
   "npmClient": "yarn",
   "useWorkspaces": true,
   "command": {

packages/x6-plugin-scroller/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/x6-plugin-scroller",
-  "version": "2.0.6-beta.20",
+  "version": "2.0.6-beta.21",
   "description": "scroller plugin for X6.",
   "main": "lib/index.js",
   "module": "es/index.js",

packages/x6-plugin-scroller/src/scroller.ts

@@ -48,6 +48,7 @@ export class ScrollerImpl extends View {
     super()
 
     this.options = ScrollerImpl.getOptions(options)
+    this.onUpdate = FunctionExt.debounce(this.onUpdate, 200)
 
     const scale = this.graph.transform.getScale()
     this.sx = scale.sx
@@ -79,31 +80,6 @@ export class ScrollerImpl extends View {
       Dom.before(graphContainer, this.container)
     }
 
-    // todo copy style
-    // const style = graphContainer.getAttribute('style')
-    // if (style) {
-    //   const obj: { [name: string]: string } = {}
-    //   const styles = style.split(';')
-    //   styles.forEach((item) => {
-    //     const section = item.trim()
-    //     if (section) {
-    //       const pair = section.split(':')
-    //       if (pair.length) {
-    //         obj[pair[0].trim()] = pair[1] ? pair[1].trim() : ''
-    //       }
-    //     }
-    //   })
-
-    //   Object.keys(obj).forEach((key: any) => {
-    //     if (key === 'width' || key === 'height') {
-    //       return
-    //     }
-
-    //     graphContainer.style[key] = ''
-    //     this.container.style[key] = obj[key]
-    //   })
-    // }
-
     this.content = document.createElement('div')
     Dom.addClass(this.content, this.prefixClassName(ScrollerImpl.contentClass))
     Dom.css(this.content, {
@@ -185,11 +161,9 @@ export class ScrollerImpl extends View {
   }
 
   protected onUpdate() {
-    if (!this.options.autoResize) {
-      return
+    if (this.options.autoResize) {
+      this.update()
     }
-
-    this.update()
   }
 
   protected delegateBackgroundEvents(events?: View.Events) {
@@ -381,76 +355,12 @@ export class ScrollerImpl extends View {
       gridWidth: this.options.pageWidth,
       gridHeight: this.options.pageHeight,
       allowNewOrigin: 'negative',
-      contentArea: this.calcContextArea(resizeOptions),
       ...resizeOptions,
     }
 
     this.graph.fitToContent(this.getFitToContentOptions(options))
   }
 
-  protected calcContextArea(
-    resizeOptions:
-      | (TransformManager.FitToContentFullOptions & {
-          direction:
-            | ScrollerImpl.AutoResizeDirection
-            | ScrollerImpl.AutoResizeDirection[]
-        })
-      | undefined,
-  ) {
-    const direction = resizeOptions?.direction
-
-    if (!direction) {
-      return this.graph.transform.getContentArea({ useCellGeometry: true })
-    }
-
-    function getCellBBox(cell: Cell) {
-      let rect = cell.getBBox()
-      if (rect) {
-        if (cell.isNode()) {
-          const angle = cell.getAngle()
-          if (angle != null && angle !== 0) {
-            rect = rect.bbox(angle)
-          }
-        }
-      }
-      return rect
-    }
-
-    const gridWidth = this.options.pageWidth || 1
-    const gridHeight = this.options.pageHeight || 1
-    let calculativeCells = this.graph.getCells()
-
-    if (!direction.includes('top')) {
-      calculativeCells = calculativeCells.filter((cell) => {
-        const bbox = getCellBBox(cell)
-        return bbox.y >= 0
-      })
-    }
-
-    if (!direction.includes('left')) {
-      calculativeCells = calculativeCells.filter((cell) => {
-        const bbox = getCellBBox(cell)
-        return bbox.x >= 0
-      })
-    }
-
-    if (!direction.includes('right')) {
-      calculativeCells = calculativeCells.filter((cell) => {
-        const bbox = getCellBBox(cell)
-        return bbox.x + bbox.width <= gridWidth
-      })
-    }
-
-    if (!direction.includes('bottom')) {
-      calculativeCells = calculativeCells.filter((cell) => {
-        const bbox = getCellBBox(cell)
-        return bbox.y + bbox.height <= gridHeight
-      })
-    }
-
-    return this.model.getCellsBBox(calculativeCells) || new Rectangle()
-  }
-
   protected getFitToContentOptions(
     options: TransformManager.FitToContentFullOptions,
   ) {

packages/x6-plugin-selection/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/x6-plugin-selection",
-  "version": "2.0.6-beta.20",
+  "version": "2.0.6-beta.24",
   "description": "selection plugin for X6.",
   "main": "lib/index.js",
   "module": "es/index.js",

packages/x6-plugin-selection/src/selection.ts

@@ -119,23 +119,16 @@ export class SelectionImpl extends View<SelectionImpl.EventArgs> {
     options,
   }: Collection.EventArgs['node:change:position']) {
     const { showNodeSelectionBox, pointerEvents } = this.options
-    const { ui, selection, translateBy } = options
-    let allowTranslating = !this.translating
+    const { ui, selection, translateBy, snapped } = options
 
-    /* Scenarios where this method is not called:
-     * 1. ShowNodeSelection is true or ponterEvents is none
-     * 2. Avoid circular calls with the selection tag
-     */
-    allowTranslating =
-      allowTranslating &&
-      (showNodeSelectionBox !== true || pointerEvents === 'none')
-    allowTranslating = allowTranslating && ui && !selection
+    const allowTranslating =
+      (showNodeSelectionBox !== true || pointerEvents === 'none') &&
+      !this.translating &&
+      !selection
 
-    // Avoid circular calls of child nodes
-    allowTranslating =
-      allowTranslating && translateBy && node.id === translateBy
+    const translateByUi = ui && translateBy && node.id === translateBy
 
-    if (allowTranslating) {
+    if (allowTranslating && (translateByUi || snapped)) {
       this.translating = true
       const current = node.position()
       const previous = node.previous('position')!

packages/x6/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/x6",
-  "version": "2.0.6-beta.20",
+  "version": "2.0.6-beta.21",
   "description": "JavaScript diagramming library that uses SVG and HTML for rendering.",
   "main": "lib/index.js",
   "module": "es/index.js",

packages/x6/src/renderer/queueJob.ts

@@ -5,8 +5,9 @@ export interface Job {
 }
 
 export enum JOB_PRIORITY {
-  Manual = 1,
-  Render = 2,
+  RenderEdge = 1,
+  RenderNode = 2,
+  Update = 3,
 }
 
 let isFlushing = false
@@ -106,7 +107,7 @@ function flushJobs() {
 
 function findInsertionIndex(job: Job) {
   let start = 0
-  while (queue[start] && queue[start].priority <= job.priority) {
+  while (queue[start] && queue[start].priority >= job.priority) {
     start += 1
   }
   return start

packages/x6/src/renderer/scheduler.ts

@@ -75,7 +75,7 @@ export class Scheduler extends Disposable {
         viewItem.view,
         Scheduler.FLAG_INSERT,
         options,
-        JOB_PRIORITY.Render,
+        JOB_PRIORITY.Update,
         true,
       )
     }
@@ -92,7 +92,7 @@ export class Scheduler extends Disposable {
     view: CellView,
     flag: number,
     options: any = {},
-    priority: JOB_PRIORITY = JOB_PRIORITY.Manual,
+    priority: JOB_PRIORITY = JOB_PRIORITY.Update,
     flush = true,
   ) {
     const id = view.cell.id
@@ -177,7 +177,7 @@ export class Scheduler extends Disposable {
         viewItem.view,
         flag,
         options,
-        JOB_PRIORITY.Render,
+        cell.isNode() ? JOB_PRIORITY.RenderNode : JOB_PRIORITY.RenderEdge,
         false,
       )
     })
@@ -218,7 +218,10 @@ export class Scheduler extends Disposable {
       const viewItem = this.views[ids[i]]
       if (viewItem && viewItem.state === Scheduler.ViewState.WAITTING) {
         const { view, flag, options } = viewItem
-        this.requestViewUpdate(view, flag, options, JOB_PRIORITY.Render, false)
+        const priority = view.cell.isNode()
+          ? JOB_PRIORITY.RenderNode
+          : JOB_PRIORITY.RenderEdge
+        this.requestViewUpdate(view, flag, options, priority, false)
       }
     }