How to use @antv/x6 - 10 common examples

componentDidMount() {
    const pageFormat = { x: 0, y: 0, width: 100, height: 160 }
    const graph = new Graph(this.container, {
      pageFormat,
      // pageVisible: true,
      pageBreak: {
        enabled: this.state.pageBreaksVisible,
        dsahed: true,
        stroke: '#ff0000',
      },
      movingPreview: {
        scaleGrid: true,
      },
      preferPageSize: true,
      centerZoom: false,
    })

    graph.batchUpdate(() => {
      const n1 = graph.addNode({

componentDidMount() {
    const graph = new Graph(this.container)

    graph.batchUpdate(() => {
      const style: Style = {
        shape: 'image',
        image:
          'https://gw.alipayobjects.com/zos/basement_prod/759f4922-517b-4e62-adea-5c431f049f47.svg', // tslint:disable-line
      }
      graph.addNode({
        x: 60,
        y: 40,
        width: 80,
        height: 80,
        label: 'Bottom',
        style: {
          ...style,
          labelVerticalPosition: 'bottom',

export function createGraph(container: HTMLDivElement) {
  return new Graph(container, {
    rotate: false,
    resize: true,
    folding: false,
    infinite: true, // 无限大画布
    // pageVisible: true,
    // pageBreak: {
    //   enabled: true,
    //   dsahed: true,
    //   stroke: '#c0c0c0',
    // },
    // pageFormat: {
    //   width: 800,
    //   height: 960,
    // },
    // mouseWheel: true,
    rubberband: true,

c.lineTo(0, h / 3)
    c.moveTo(w / 2, h / 3)
    c.lineTo(w, h / 3)

    // Legs
    c.moveTo(w / 2, (2 * h) / 3)
    c.lineTo(0, h)
    c.moveTo(w / 2, (2 * h) / 3)
    c.lineTo(w, h)
    c.end()

    c.stroke()
  }
}

Shape.register('umlActor', UmlActorShape)

verticalAlign: 'top',
        childLayout: 'stackLayout',
        horizontal: true,
        startSize: 26,
        horizontalStack: 0,
        resizeParent: true,
        resizeParentMax: 0,
        resizeLast: 0,
        collapsible: 1,
        marginBottom: 0,
      },
    }

    const cell = new Cell(
      'Classname',
      new Geometry(0, 0, data.width, data.height),
      data.style,
    )

    cell.asNode(true)
    // cell.insertChild(field.clone())
    // cell.insertChild(divider.clone())

    return {
      data,
      render: getRendererForCells([cell]),
    }
  })

export function fitTwoPages(graph: Graph, padding: Point = new Point()) {
  if (!graph.pageVisible) {
    // this.get('pageView').funct()
  }

  const fmt = graph.pageFormat
  const ps = graph.pageScale
  const cw = graph.container.clientWidth - 10
  const ch = graph.container.clientHeight - 10

  const scale =
    Math.floor(20 * Math.min(cw / (2 * fmt.width) / ps, ch / fmt.height / ps)) /
    20
  graph.zoomTo(scale)

  if (util.hasScrollbars(graph.container)) {
    graph.container.scrollTop = Math.min(
      padding.y,
      (graph.container.scrollHeight - graph.container.clientHeight) / 2,
    )

    graph.container.scrollLeft = Math.min(
      padding.x,
      (graph.container.scrollWidth - graph.container.clientWidth) / 2,
    )
  }
}

resetScrollbars() {
    const container = this.container

    if (this.pageVisible && util.hasScrollbars(container)) {
      const padding = this.getPagePadding()
      container.scrollLeft = Math.floor(
        Math.min(
          padding[0],
          (container.scrollWidth - container.clientWidth) / 2,
        ),
      )
      container.scrollTop = padding[1]

      // Scrolls graph to visible area
      const bounds = this.getGraphBounds()
      if (bounds.width > 0 && bounds.height > 0) {
        if (bounds.x > container.scrollLeft + container.clientWidth * 0.9) {
          container.scrollLeft = Math.min(
            bounds.x + bounds.width - container.clientWidth,
            bounds.x - 10,

export function fitPage(graph: Graph, padding: Point = new Point()) {
  if (!graph.pageVisible) {
    // this.get('pageView').funct()
  }

  const fmt = graph.pageFormat
  const ps = graph.pageScale
  const cw = graph.container.clientWidth - 10
  const ch = graph.container.clientHeight - 10
  const scale =
    Math.floor(20 * Math.min(cw / fmt.width / ps, ch / fmt.height / ps)) / 20
  graph.zoomTo(scale)

  if (util.hasScrollbars(graph.container)) {
    graph.container.scrollTop = padding.y * graph.view.scale - 1
    graph.container.scrollLeft =
      Math.min(
        padding.x * graph.view.scale,
        (graph.container.scrollWidth - graph.container.clientWidth) / 2,
      ) - 1
  }
}

if (this.cursorPosition != null) {
        dx = this.container.offsetWidth / 2 - this.cursorPosition.x + offset.x
        dy = this.container.offsetHeight / 2 - this.cursorPosition.y + offset.y
      }

      var prev = this.view.scale
      this.zoom(this.cumulativeZoomFactor)
      var s = this.view.scale

      if (s != prev) {
        // if (resize != null) {
        //   ui.chromelessResize(false, null, dx * (this.cumulativeZoomFactor - 1),
        //     dy * (this.cumulativeZoomFactor - 1))
        // }

        if (util.hasScrollbars(this.container) && (dx != 0 || dy != 0)) {
          this.container.scrollLeft -= dx * (this.cumulativeZoomFactor - 1)
          this.container.scrollTop -= dy * (this.cumulativeZoomFactor - 1)
        }
      }

      this.cumulativeZoomFactor = 1
      this.wheelZoomTimer = null
    }, this.wheelZoomDelay)
  }

export function fitPageWidth(graph: Graph, padding: Point = new Point()) {
  if (!graph.pageVisible) {
    // this.get('pageView').funct()
  }

  const fmt = graph.pageFormat
  const ps = graph.pageScale
  const cw = graph.container.clientWidth - 10

  const scale = Math.floor((20 * cw) / fmt.width / ps) / 20
  graph.zoomTo(scale)

  if (util.hasScrollbars(graph.container)) {
    graph.container.scrollLeft = Math.min(
      padding.x * graph.view.scale,
      (graph.container.scrollWidth - graph.container.clientWidth) / 2,
    )
  }
}