chore(release): 🚀 publish

* docs: 📚️ add port connected demo

* feat: ✨ add scroller api

examples/x6-example-features/src/pages/ports/connected.tsx

@@ -0,0 +1,188 @@
+import React from 'react'
+import { Graph, Node } from '@antv/x6-next'
+import { Path } from '@antv/x6-geometry'
+import '../index.less'
+
+Graph.registerConnector(
+  'ports-connected-connector',
+  (s, e) => {
+    const offset = 4
+    const deltaY = Math.abs(e.y - s.y)
+    const control = Math.floor((deltaY / 3) * 2)
+
+    const v1 = { x: s.x, y: s.y + offset + control }
+    const v2 = { x: e.x, y: e.y - offset - control }
+
+    return Path.normalize(
+      `M ${s.x} ${s.y}
+       L ${s.x} ${s.y + offset}
+       C ${v1.x} ${v1.y} ${v2.x} ${v2.y} ${e.x} ${e.y - offset}
+       L ${e.x} ${e.y}
+      `,
+    )
+  },
+  true,
+)
+
+Graph.registerNode(
+  'ports-connected-node',
+  {
+    width: 144,
+    height: 28,
+    markup: [
+      {
+        tagName: 'rect',
+      },
+      {
+        tagName: 'image',
+      },
+      {
+        tagName: 'text',
+      },
+    ],
+    attrs: {
+      rect: {
+        rx: 14,
+        ry: 14,
+        refWidth: '100%',
+        refHeight: '100%',
+        fill: '#FFF',
+        stroke: '#5f95ff',
+        strokeWidth: 1,
+      },
+      image: {
+        x: 2,
+        y: 2,
+        width: 24,
+        height: 24,
+        xlinkHref:
+          'https://gw.alipayobjects.com/zos/bmw-prod/d9f3b597-3a2e-49c3-8469-64a1168ed779.svg',
+      },
+      text: {
+        x: 28,
+        y: 18,
+        text: '深度学习',
+        fontSize: 12,
+        fill: '#000000a6',
+      },
+    },
+    ports: {
+      groups: {
+        top: {
+          position: 'top',
+          attrs: {
+            circle: {
+              r: 4,
+              magnet: true,
+              stroke: '#c5c5c5',
+              strokeWidth: 1,
+              fill: '#fff',
+            },
+          },
+        },
+        bottom: {
+          position: 'bottom',
+          attrs: {
+            circle: {
+              r: 4,
+              magnet: true,
+              stroke: '#c5c5c5',
+              strokeWidth: 1,
+              fill: '#fff',
+            },
+          },
+        },
+      },
+    },
+  },
+  true,
+)
+
+export default class Example extends React.Component {
+  private container: HTMLDivElement
+
+  componentDidMount() {
+    const graph = new Graph({
+      container: this.container,
+      width: 800,
+      height: 600,
+      connecting: {
+        connector: 'ports-connected-connector',
+        createEdge() {
+          return this.createEdge({
+            attrs: {
+              line: {
+                stroke: '#c5c5c5',
+                strokeWidth: 1,
+                targetMarker: null,
+              },
+            },
+            zIndex: -1,
+          })
+        },
+      },
+    })
+
+    graph.addNode({
+      shape: 'ports-connected-node',
+      width: 144,
+      height: 28,
+      x: 200,
+      y: 200,
+      ports: {
+        items: [
+          {
+            id: '1',
+            group: 'bottom',
+          },
+          {
+            id: '2',
+            group: 'bottom',
+          },
+        ],
+      },
+    })
+
+    graph.addNode({
+      shape: 'ports-connected-node',
+      x: 200,
+      y: 400,
+      width: 144,
+      height: 28,
+      ports: {
+        items: [
+          {
+            id: '3',
+            group: 'top',
+          },
+        ],
+      },
+    })
+
+    graph.on('edge:connected', ({ currentCell, currentPort }) => {
+      const node = currentCell as Node
+      node.setPortProp(currentPort as string, 'markup', [
+        {
+          tagName: 'path',
+          attrs: {
+            fill: '#808080',
+            d: 'M -1 1 L 7 1 L 3 5 L -1 1 Z',
+            style: 'transform: translateY(-1px)',
+          },
+        },
+      ])
+    })
+  }
+
+  refContainer = (container: HTMLDivElement) => {
+    this.container = container
+  }
+
+  render() {
+    return (
+      <div className="x6-graph-wrap">
+        <div ref={this.refContainer} className="x6-graph" />
+      </div>
+    )
+  }
+}

lerna.json

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

packages/x6-next/package.json

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

packages/x6-next/src/graph/graph.ts

@@ -554,11 +554,6 @@ export class Graph extends Basecoat<EventArgs> {
     return this
   }
 
-  resizeGraph(width?: number, height?: number) {
-    this.transform.resize(width, height)
-    return this
-  }
-
   scale(): Dom.Scale
   scale(sx: number, sy?: number, cx?: number, cy?: number): this
   scale(sx?: number, sy: number = sx as number, cx = 0, cy = 0) {
@@ -670,6 +665,32 @@ export class Graph extends Basecoat<EventArgs> {
     return this
   }
 
+  /**
+   * Position the center of graph to the center of the viewport.
+   */
+  center() {
+    return this.centerPoint()
+  }
+
+  /**
+   * Position the point (x,y) on the graph (in local coordinates) to the
+   * center of the viewport. If only one of the coordinates is specified,
+   * only center along the specified dimension and keep the other coordinate
+   * unchanged.
+   */
+  centerPoint(x: number, y: null | number): this
+  centerPoint(x: null | number, y: number): this
+  centerPoint(): this
+  centerPoint(x?: number | null, y?: number | null) {
+    this.transform.centerPoint(x as number, y as number)
+    return this
+  }
+
+  centerContent(options?: Transform.PositionContentOptions) {
+    this.transform.centerContent(options)
+    return this
+  }
+
   centerCell(cell: Cell) {
     this.transform.centerCell(cell)
     return this
@@ -684,6 +705,24 @@ export class Graph extends Basecoat<EventArgs> {
     return this
   }
 
+  positionRect(rect: Rectangle.RectangleLike, direction: Transform.Direction) {
+    this.transform.positionRect(rect, direction)
+    return this
+  }
+
+  positionCell(cell: Cell, direction: Transform.Direction) {
+    this.transform.positionCell(cell, direction)
+    return this
+  }
+
+  positionContent(
+    pos: Transform.Direction,
+    options?: Transform.PositionContentOptions,
+  ) {
+    this.transform.positionContent(pos, options)
+    return this
+  }
+
   // #endregion
 
   // #region coord

packages/x6-next/src/graph/transform.ts

@@ -594,4 +594,10 @@ export namespace TransformManager {
     | 'bottom'
     | 'bottom-left'
     | 'left'
+
+  export interface CenterOptions {
+    padding?: NumberExt.SideOptions
+  }
+
+  export type PositionContentOptions = GetContentAreaOptions & CenterOptions
 }

packages/x6-plugin-keyboard/package.json

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

packages/x6-plugin-keyboard/src/index.ts

@@ -11,7 +11,10 @@ export class Keyboard extends Disposable {
   }
 
   public init(graph: Graph) {
-    this.keyboard = new KeyboardImpl(this.options, graph)
+    this.keyboard = new KeyboardImpl({
+      ...this.options,
+      graph,
+    })
   }
 
   isKeyboardEnabled() {

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

@@ -7,9 +7,12 @@ export class KeyboardImpl extends Disposable implements IDisablable {
   private readonly container: HTMLElement
   private readonly mousetrap: Mousetrap.MousetrapInstance
 
+  private get graph() {
+    return this.options.graph
+  }
+
   constructor(
-    private readonly options: KeyboardImpl.Options,
-    private readonly graph: Graph,
+    private readonly options: KeyboardImpl.Options & { graph: Graph },
   ) {
     super()
 
@@ -149,7 +152,6 @@ export namespace KeyboardImpl {
   export type Handler = (e: KeyboardEvent) => void
 
   export interface Options {
-    graph: Graph
     enabled?: boolean
 
     /**

packages/x6-plugin-scroller/package.json

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

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

@@ -1,18 +1,21 @@
 import { Dom, ModifierKey, Disposable, CssLoader } from '@antv/x6-common'
-import { Graph, Config } from '@antv/x6-next'
+import {
+  Graph,
+  Config,
+  TransformManager,
+  Cell,
+  BackgroundManager,
+} from '@antv/x6-next'
+import { Rectangle, Point } from '@antv/x6-geometry'
 import { ScrollerImpl } from './scroller'
 import { content } from './style/raw'
 
 export class Scroller extends Disposable {
-  private graph: Graph
   public name = 'scroller'
-  public scrollerImpl: ScrollerImpl
+  private graph: Graph
+  private scrollerImpl: ScrollerImpl
 
-  constructor(public readonly options: Scroller.Options) {
-    super()
-  }
-
-  get pannable() {
+  private get pannable() {
     if (this.options) {
       if (typeof this.options.pannable === 'object') {
         return this.options.pannable.enabled
@@ -23,6 +26,10 @@ export class Scroller extends Disposable {
     return false
   }
 
+  constructor(public readonly options: Scroller.Options) {
+    super()
+  }
+
   public init(graph: Graph) {
     this.graph = graph
     CssLoader.ensure('scroller', content)
@@ -35,7 +42,7 @@ export class Scroller extends Disposable {
     this.scrollerImpl.center()
   }
 
-  protected startListening() {
+  private startListening() {
     let eventTypes = []
     const pannable = this.options.pannable
     if (typeof pannable === 'object') {
@@ -58,7 +65,7 @@ export class Scroller extends Disposable {
     }
   }
 
-  protected stopListening() {
+  private stopListening() {
     let eventTypes = []
     const pannable = this.options.pannable
     if (typeof pannable === 'object') {
@@ -80,7 +87,7 @@ export class Scroller extends Disposable {
     }
   }
 
-  protected onRightMouseDown(e: Dom.MouseDownEvent) {
+  private onRightMouseDown(e: Dom.MouseDownEvent) {
     if (e.button === 2 && this.allowPanning(e, true)) {
       this.updateClassName(true)
       this.scrollerImpl.startPanning(e)
@@ -88,7 +95,7 @@ export class Scroller extends Disposable {
     }
   }
 
-  protected preparePanning({ e }: { e: Dom.MouseDownEvent }) {
+  private preparePanning({ e }: { e: Dom.MouseDownEvent }) {
     const allowPanning = this.allowPanning(e, true)
     const selection = this.graph.getPlugin('selection') as any
     const allowRubberband =
@@ -100,13 +107,13 @@ export class Scroller extends Disposable {
     }
   }
 
-  allowPanning(e: Dom.MouseDownEvent, strict?: boolean) {
+  private allowPanning(e: Dom.MouseDownEvent, strict?: boolean) {
     return (
       this.pannable && ModifierKey.isMatch(e, this.options.modifiers, strict)
     )
   }
 
-  protected updateClassName(isPanning?: boolean) {
+  private updateClassName(isPanning?: boolean) {
     const container = this.scrollerImpl.container!
     const pannable = Config.prefix('graph-scroller-pannable')
     if (this.pannable) {
@@ -117,19 +124,138 @@ export class Scroller extends Disposable {
     }
   }
 
+  resize(width?: number, height?: number) {
+    this.scrollerImpl.resize(width, height)
+  }
+
+  zoom(): number
+  zoom(factor: number, options?: TransformManager.ZoomOptions): this
+  zoom(factor?: number, options?: TransformManager.ZoomOptions) {
+    if (typeof factor === 'undefined') {
+      return this.scrollerImpl.zoom()
+    }
+    this.scrollerImpl.zoom(factor, options)
+    return this
+  }
+
+  zoomTo(
+    factor: number,
+    options: Omit<TransformManager.ZoomOptions, 'absolute'> = {},
+  ) {
+    this.scrollerImpl.zoom(factor, { ...options, absolute: true })
+    return this
+  }
+
+  zoomToRect(
+    rect: Rectangle.RectangleLike,
+    options: TransformManager.ScaleContentToFitOptions &
+      TransformManager.ScaleContentToFitOptions = {},
+  ) {
+    this.scrollerImpl.zoomToRect(rect, options)
+    return this
+  }
+
+  zoomToFit(
+    options: TransformManager.GetContentAreaOptions &
+      TransformManager.ScaleContentToFitOptions = {},
+  ) {
+    this.scrollerImpl.zoomToFit(options)
+    return this
+  }
+
+  center(optons?: ScrollerImpl.CenterOptions) {
+    return this.centerPoint(optons)
+  }
+
+  centerPoint(
+    x: number,
+    y: null | number,
+    options?: ScrollerImpl.CenterOptions,
+  ): this
+  centerPoint(
+    x: null | number,
+    y: number,
+    options?: ScrollerImpl.CenterOptions,
+  ): this
+  centerPoint(optons?: ScrollerImpl.CenterOptions): this
+  centerPoint(
+    x?: number | null | ScrollerImpl.CenterOptions,
+    y?: number | null,
+    options?: ScrollerImpl.CenterOptions,
+  ) {
+    this.scrollerImpl.centerPoint(x as number, y as number, options)
+    return this
+  }
+
+  centerContent(options?: ScrollerImpl.PositionContentOptions) {
+    this.scrollerImpl.centerContent(options)
+    return this
+  }
+
+  centerCell(cell: Cell, options?: ScrollerImpl.CenterOptions) {
+    this.scrollerImpl.centerCell(cell, options)
+    return this
+  }
+
+  positionPoint(
+    point: Point.PointLike,
+    x: number | string,
+    y: number | string,
+    options: ScrollerImpl.CenterOptions = {},
+  ) {
+    this.scrollerImpl.positionPoint(point, x, y, options)
+
+    return this
+  }
+
+  positionRect(
+    rect: Rectangle.RectangleLike,
+    direction: ScrollerImpl.Direction,
+    options?: ScrollerImpl.CenterOptions,
+  ) {
+    this.scrollerImpl.positionRect(rect, direction, options)
+    return this
+  }
+
+  positionCell(
+    cell: Cell,
+    direction: ScrollerImpl.Direction,
+    options?: ScrollerImpl.CenterOptions,
+  ) {
+    this.scrollerImpl.positionCell(cell, direction, options)
+    return this
+  }
+
+  positionContent(
+    pos: ScrollerImpl.Direction,
+    options?: ScrollerImpl.PositionContentOptions,
+  ) {
+    this.scrollerImpl.positionContent(pos, options)
+    return this
+  }
+
+  drawBackground(options?: BackgroundManager.Options, onGraph?: boolean) {
+    if (this.graph.options.background == null || !onGraph) {
+      this.scrollerImpl.backgroundManager.draw(options)
+    }
+    return this
+  }
+
+  clearBackground(onGraph?: boolean) {
+    if (this.graph.options.background == null || !onGraph) {
+      this.scrollerImpl.backgroundManager.clear()
+    }
+    return this
+  }
+
+  isPannable() {
+    return this.pannable
+  }
+
   enablePanning() {
     if (!this.pannable) {
       this.options.pannable = true
       this.updateClassName()
-
-      // if (
-      //   ModifierKey.equals(
-      //     this.graph.options.scroller.modifiers,
-      //     this.graph.options.selecting.modifiers,
-      //   )
-      // ) {
-      //   this.graph.selection.disableRubberband()
-      // }
     }
   }
 
@@ -140,18 +266,86 @@ export class Scroller extends Disposable {
     }
   }
 
-  lock() {
+  togglePanning(pannable?: boolean) {
+    if (pannable == null) {
+      if (this.isPannable()) {
+        this.disablePanning()
+      } else {
+        this.enablePanning()
+      }
+    } else if (pannable !== this.isPannable()) {
+      if (pannable) {
+        this.enablePanning()
+      } else {
+        this.disablePanning()
+      }
+    }
+
+    return this
+  }
+
+  lockScroller() {
     this.scrollerImpl.lock()
   }
 
-  unlock() {
+  unlockScroller() {
     this.scrollerImpl.unlock()
   }
 
-  update() {
+  updateScroller() {
     this.scrollerImpl.update()
   }
 
+  getScrollbarPosition() {
+    return this.scrollerImpl.scrollbarPosition()
+  }
+
+  setScrollbarPosition(left?: number, top?: number) {
+    this.scrollerImpl.scrollbarPosition(left, top)
+    return this
+  }
+
+  scrollToPoint(x: number | null | undefined, y: number | null | undefined) {
+    this.scrollerImpl.scrollToPoint(x, y)
+    return this
+  }
+
+  scrollToContent() {
+    this.scrollerImpl.scrollToContent()
+    return this
+  }
+
+  scrollToCell(cell: Cell) {
+    this.scrollerImpl.scrollToCell(cell)
+    return this
+  }
+
+  transitionToPoint(
+    p: Point.PointLike,
+    options?: ScrollerImpl.TransitionOptions,
+  ): this
+  transitionToPoint(
+    x: number,
+    y: number,
+    options?: ScrollerImpl.TransitionOptions,
+  ): this
+  transitionToPoint(
+    x: number | Point.PointLike,
+    y?: number | ScrollerImpl.TransitionOptions,
+    options?: ScrollerImpl.TransitionOptions,
+  ) {
+    this.scrollerImpl.transitionToPoint(x as number, y as number, options)
+    return this
+  }
+
+  transitionToRect(
+    rect: Rectangle.RectangleLike,
+    options: ScrollerImpl.TransitionToRectOptions = {},
+  ) {
+    this.scrollerImpl.transitionToRect(rect, options)
+    return this
+  }
+
   enableAutoResize() {
     this.scrollerImpl.enableAutoResize()
   }
@@ -160,10 +354,6 @@ export class Scroller extends Disposable {
     this.scrollerImpl.disableAutoResize()
   }
 
-  resize(width?: number, height?: number) {
-    this.scrollerImpl.resize(width, height)
-  }
-
   @Disposable.dispose()
   dispose() {
     this.scrollerImpl.dispose()

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

@@ -7,7 +7,6 @@ import {
 } from '@antv/x6-common'
 import { Point, Rectangle } from '@antv/x6-geometry'
 import {
-  Model,
   Cell,
   View,
   Graph,
@@ -80,30 +79,30 @@ export class ScrollerImpl extends View {
       Dom.before(graphContainer, this.container)
     }
 
-    // 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() : ''
-          }
-        }
-      })
+    // 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
-        }
+    //   Object.keys(obj).forEach((key: any) => {
+    //     if (key === 'width' || key === 'height') {
+    //       return
+    //     }
 
-        graphContainer.style[key] = ''
-        this.container.style[key] = obj[key]
-      })
-    }
+    //     graphContainer.style[key] = ''
+    //     this.container.style[key] = obj[key]
+    //   })
+    // }
 
     this.content = document.createElement('div')
     Dom.addClass(this.content, this.prefixClassName(ScrollerImpl.contentClass))
@@ -150,14 +149,10 @@ export class ScrollerImpl extends View {
     graph.on('after:print', this.restoreScrollPosition, this)
     graph.on('after:export', this.restoreScrollPosition, this)
 
-    // todo
-    // graph.on('render:done', this.onRenderDone, this)
-    graph.on('unfreeze', this.onUpdate, this)
     model.on('reseted', this.onUpdate, this)
     model.on('cell:added', this.onUpdate, this)
     model.on('cell:removed', this.onUpdate, this)
     model.on('cell:changed', this.onUpdate, this)
-    model.on('batch:stop', this.onBatchStop, this)
 
     this.delegateBackgroundEvents()
   }
@@ -173,14 +168,10 @@ export class ScrollerImpl extends View {
     graph.off('afterprint', this.restoreScrollPosition, this)
     graph.off('afterexport', this.restoreScrollPosition, this)
 
-    // todo
-    // graph.off('render:done', this.onRenderDone, this)
-    graph.off('unfreeze', this.onUpdate, this)
     model.off('reseted', this.onUpdate, this)
     model.off('cell:added', this.onUpdate, this)
     model.off('cell:removed', this.onUpdate, this)
     model.off('cell:changed', this.onUpdate, this)
-    model.off('batch:stop', this.onBatchStop, this)
 
     this.undelegateBackgroundEvents()
   }
@@ -201,17 +192,6 @@ export class ScrollerImpl extends View {
     this.update()
   }
 
-  // eslint-disable-next-line
-  onBatchStop(args: { name: Model.BatchName }) {
-    // todo
-    // if (!this.options.autoResize) {
-    //   return
-    // }
-    // if (Renderer.UPDATE_DELAYING_BATCHES.includes(args.name)) {
-    //   this.update()
-    // }
-  }
-
   protected delegateBackgroundEvents(events?: View.Events) {
     const evts = events || GraphView.events
     this.delegatedHandlers = Object.keys(evts).reduce<{
@@ -271,12 +251,6 @@ export class ScrollerImpl extends View {
     }
   }
 
-  // protected onRenderDone({ stats }: EventArgs['render:done']) {
-  //   if (this.options.autoResize && stats.priority < 2) {
-  //     this.update()
-  //   }
-  // }
-
   protected onResize() {
     if (this.cachedCenterPoint) {
       this.centerPoint(this.cachedCenterPoint.x, this.cachedCenterPoint.y)
@@ -292,8 +266,7 @@ export class ScrollerImpl extends View {
       this.updatePageBreak()
     }
 
-    const autoResizeOptions =
-      this.options.autoResizeOptions || this.options.fitTocontentOptions
+    const autoResizeOptions = this.options.autoResizeOptions
 
     if (typeof autoResizeOptions === 'function') {
       this.update()
@@ -399,8 +372,7 @@ export class ScrollerImpl extends View {
       size.height / 2,
     )
 
-    let resizeOptions =
-      this.options.autoResizeOptions || this.options.fitTocontentOptions
+    let resizeOptions = this.options.autoResizeOptions
     if (typeof resizeOptions === 'function') {
       resizeOptions = FunctionExt.call(resizeOptions, this, this)
     }
@@ -428,7 +400,7 @@ export class ScrollerImpl extends View {
     const direction = resizeOptions?.direction
 
     if (!direction) {
-      return this.graph.transform.getContentArea()
+      return this.graph.transform.getContentArea({ useCellGeometry: true })
     }
 
     function getCellBBox(cell: Cell) {
@@ -518,20 +490,12 @@ export class ScrollerImpl extends View {
     this.sy = sy
 
     this.graph.translate(options.x * dx, options.y * dy)
-    this.graph.resizeGraph(options.width * dx, options.height * dy)
+    this.graph.resize(options.width * dx, options.height * dy)
   }
 
   scrollbarPosition(): { left: number; top: number }
-  scrollbarPosition(
-    left?: number,
-    top?: number,
-    options?: ScrollerImpl.ScrollOptions,
-  ): this
-  scrollbarPosition(
-    left?: number,
-    top?: number,
-    options?: ScrollerImpl.ScrollOptions, // eslint-disable-line
-  ) {
+  scrollbarPosition(left?: number, top?: number): this
+  scrollbarPosition(left?: number, top?: number) {
     if (left == null && top == null) {
       return {
         left: this.container.scrollLeft,
@@ -548,12 +512,6 @@ export class ScrollerImpl extends View {
       prop.scrollTop = top
     }
 
-    // todo
-    // if (options && options.animation) {
-    //   this.$container.animate(prop, options.animation)
-    // } else {
-    //   this.$container.prop(prop)
-    // }
     Dom.prop(this.container, prop)
 
     return this
@@ -565,11 +523,7 @@ export class ScrollerImpl extends View {
    * coordinates is specified, only scroll in the specified dimension and
    * keep the other coordinate unchanged.
    */
-  scrollToPoint(
-    x: number | null | undefined,
-    y: number | null | undefined,
-    options?: ScrollerImpl.ScrollOptions, // eslint-disable-line
-  ) {
+  scrollToPoint(x: number | null | undefined, y: number | null | undefined) {
     const size = this.getClientSize()
     const ctm = this.graph.matrix()
     const prop: { [key: string]: number } = {}
@@ -582,12 +536,6 @@ export class ScrollerImpl extends View {
       prop.scrollTop = y - size.height / 2 + ctm.f + (this.padding.top || 0)
     }
 
-    // todo
-    // if (options && options.animation) {
-    //   this.$container.animate(prop, options.animation)
-    // } else {
-    //   this.$container.prop(prop)
-    // }
     Dom.prop(this.container, prop)
 
     return this
@@ -597,22 +545,22 @@ export class ScrollerImpl extends View {
    * Try to scroll to ensure that the center of graph content is at the
    * center of the viewport.
    */
-  scrollToContent(options?: ScrollerImpl.ScrollOptions) {
+  scrollToContent() {
     const sx = this.sx
     const sy = this.sy
     const center = this.graph.getContentArea().getCenter()
-    return this.scrollToPoint(center.x * sx, center.y * sy, options)
+    return this.scrollToPoint(center.x * sx, center.y * sy)
   }
 
   /**
    * Try to scroll to ensure that the center of cell is at the center of
    * the viewport.
    */
-  scrollToCell(cell: Cell, options?: ScrollerImpl.ScrollOptions) {
+  scrollToCell(cell: Cell) {
     const sx = this.sx
     const sy = this.sy
     const center = cell.getBBox().getCenter()
-    return this.scrollToPoint(center.x * sx, center.y * sy, options)
+    return this.scrollToPoint(center.x * sx, center.y * sy)
   }
 
   /**
@@ -706,7 +654,7 @@ export class ScrollerImpl extends View {
       Math.max(bottom, 0),
     )
 
-    const result = this.scrollToPoint(x, y, localOptions || undefined)
+    const result = this.scrollToPoint(x, y)
 
     this.restoreClientSize()
 
@@ -1277,22 +1225,6 @@ export namespace ScrollerImpl {
     padding?:
       | NumberExt.SideOptions
       | ((this: ScrollerImpl, scroller: ScrollerImpl) => NumberExt.SideOptions)
-    /**
-     * **Deprecation Notice:** Scroller option `fitTocontentOptions` is deprecated and will be
-     * moved in next major release. Use `autoResizeOptions` instead.
-     *
-     * @deprecated
-     */
-    fitTocontentOptions?:
-      | (TransformManager.FitToContentFullOptions & {
-          direction: AutoResizeDirection | AutoResizeDirection[]
-        })
-      | ((
-          this: ScrollerImpl,
-          scroller: ScrollerImpl,
-        ) => TransformManager.FitToContentFullOptions & {
-          direction: AutoResizeDirection | AutoResizeDirection[]
-        })
     autoResizeOptions?:
       | (TransformManager.FitToContentFullOptions & {
           direction: AutoResizeDirection | AutoResizeDirection[]
@@ -1308,13 +1240,7 @@ export namespace ScrollerImpl {
   export interface Options extends CommonOptions {
     graph: Graph
   }
-
-  export interface ScrollOptions {
-    // animation?: JQuery.EffectsOptions<HTMLElement>
-    animation?: any
-  }
-
-  export interface CenterOptions extends ScrollOptions {
+  export interface CenterOptions {
     padding?: NumberExt.SideOptions
   }
 

scripts/build-dev

@@ -17,5 +17,7 @@ wait
 
 lerna run build --stream --scope @antv/x6-vue-shape \
                          --scope @antv/x6-react-shape \
+                         --scope @antv/x6-plugin-keyboard \
+                         --scope @antv/x6-plugin-scroller
 
 wait